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

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.

Quick Start

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

Step1

# With NPM
npm init xc-app

# With Yarn:
yarn create xc-app

You can also directly specify the project name and the template you want to use via additional command line options.

# npm 6.x
npm init xc-app my-wasm-app --template wasm-react

# npm 7+, extra double-dash is needed:
npm init xc-app my-wasm-app -- --template wasm-react

# yarn
yarn create xc-app my-wasm-app --template wasm-react

Currently supported template presets include wasm-vue3 and wasm-react.

Step2

cd my-wasm-app

npm install

npm run dev

Step3

You can edit the crates in ViteRsw to create your own rust crates.

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

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

Step4

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!');

Remote Deployment

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

npm i -g rsw-node

Example

Step1

learn-wasm/package.json

npm install -D rsw-node

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

Step2

learn-wasm/.rswrc.json

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

Step3

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

# .github/workflows/deploy.yml

name: github pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '14'
      - run: yarn
      - run: yarn rsw:deploy # rsw-node build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GH_TOKEN }}
          publish_dir: ./dist

Video

• youtube
• bilibili (China)

Examples

• react
• vue3
• learn-wasm

Credits

Backers

Thank you to all our backers! 🙏

微信

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

License

MIT License © 2021 lencx