vite-plugin-rsw

wasm-pack plugin for Vite

Pre-installed

• rust
• nodejs
• wasm-pack

Article

• 中文 - WebAssembly入门
• Awesome WebAssembly

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
  • watch for dependent workspace crates (#18)

Plugin Options

• cli: specified package manager npm or pnpm, default value npm.
• root: rust crate root path. default project root path.
• unLinks: string[] - (npm unlink) uninstalls a package.
• unwatch: string[] - stop watching files, directories, or glob patterns, takes an array of strings.
• profile: 'dev' | 'release' | 'profiling', default value dev. wasm-pack build.profile
• target: 'bundler' | 'web' | 'nodejs' | 'no-modules', default value web wasm-pack build.target
• crates: Item[ ] - (npm link) package name, support npm organization. wasm-pack build doc
  • Item as string - '@rsw/hello'
  • Item as RswCrateOptions - { name: '@rsw/hello', outDir: 'custom/path', unwatch: ['./pkg'] } use unwatch to avoid infinite loops when crate is built in a watched directory #24
    • name - support --out-name and scope
    • outDir - --out-dir
    • target - 'bundler' | 'web' | 'nodejs' | 'no-modules', default value web
    • profile - 'dev' | 'release' | 'profiling', default value dev
    • mode - 'no-install' | 'normal', no default value
    • extraOpts - extra options
    • unwatch - stop watching files, directories, or glob patterns, takes an array of strings

⚠️ 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-mpl: create a project in seconds!

Step1

# With NPM
npm init mpl@lastst

# With Yarn:
yarn create mpl

# --type, -t: web | wasm | mini | electron | extension | chrome | github

# npm 6.x
npm init mpl@latest my-app --type wasm

# npm 7+, extra double-dash is needed:
npm init mpl@latest my-app -- --type wasm

# yarn
yarn create mpl my-app --type wasm

# pnpm
pnpm create mpl my-app -- --type wasm

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

Step2

cd my-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

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

Example

lencx/learn-wasm

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

.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:build # use 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

• learn-wasm
• react
• vue3

Credits

Backers

Thank you to all our backers! 🙏

微信

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

License

MIT License © 2021 lencx