vite-plugin-rsw

wasm-pack plugin for Vite

Pre-installed

• rust
• nodejs
• wasm-pack

Article

• 中文 - WebAssembly入门
• WebAssembly Series

Features

• startup optimization
• enable debug mode: DEBUG=rsw yarn dev
• friendly error message: browser and terminal
• automatically generate template when crate does not exist
• multiple rust crate
  • compile
  • hot-update

Quick Start

create-xc-app: create a project in seconds!

template: wasm-vue3 and wasm-react

# With NPM
npm init xc-app

# With Yarn:
yarn create xc-app

Getting Started

Step1

Install and configure rsw.

# install rsw
npm i -D vite-plugin-rsw

# or
yarn add -D vite-plugin-rsw

// vite.config.ts
import { defineConfig } from 'vite';
import ViteRsw from 'vite-plugin-rsw';

export default defineConfig({
  plugins: [
    ViteRsw({
      crates: [
        '@rsw/hey',
        'rsw-test',
        // https://github.com/lencx/vite-plugin-rsw/issues/8#issuecomment-820281861
        // outDir: use `path.resolve` or relative path.
        { name: '@rsw/hello', outDir: 'custom/path' },
      ],
    }),
  ],
});

Step2

Use exported Rust things from JavaScript with ECMAScript modules!

import init, { greet } from '@rsw/hey';

// 1. `WebAssembly.Instance` initialization
init();

// 2. Make sure this method is executed after `init()` is called
greet('World!');

Plugin Options

• cli: specified package manager npm or pnpm, default npm.
• root: rust crate root path. default project root path.
• unLinks: string[] - (npm unlink) uninstalls a package.
• crates: Item[ ] - (npm link) package name, support npm organization.
  • Item as string - '@rsw/hello'
  • Item as RswCrateOptions - { name: '@rsw/hello', outDir: 'custom/path' }

⚠️ Note: Before performing the vite build, at least once vite dev, generate wasm package (rust-crate/pkg). In the project, wasm package is installed by vite-plugin-rsw in the form of npm link, otherwise it will error Can not find module 'rust-crate' or its corresponding type declarations.

Remote Deployment

Install

Install lencx/rsw-node globally, you can use the rsw command.

npm i -g rsw-node

Example

• learn-wasm/package.json

npm install -D rsw-node

"scripts": {
  "rsw:deploy": "rsw && npm run build"
}

• learn-wasm/.rswrc.json

  {
    "root": ".",
    "crates": [
      "@rsw/chasm",
      "@rsw/game-of-life",
      "@rsw/excel-read"
    ]
  }

• learn-wasm/.github/workflows/deploy.yml

Video

• youtube
• bilibili (China)

Examples

• react
• vue3
• learn-wasm

Credits

Backers

Thank you to all our backers! 🙏

微信

群二维码已过期，关注公众号《浮之静》，发送“进群”，我将拉你进群一起学习。

License

MIT License © 2021 lencx