Skip to content

rwasm/vite-plugin-rsw

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
August 4, 2021 22:48
February 27, 2022 16:53
src
November 3, 2022 00:54
August 20, 2021 23:20
June 27, 2022 01:06
January 10, 2021 13:55
November 11, 2022 14:28
February 17, 2021 20:01
January 10, 2021 18:28

vite-plugin-rsw

wasm-pack plugin for Vite

npm npm downloads vite version chat

awesome-rsw Rust WebAssembly

rsw version vite version
>= 2.0.0 >= 2.8.0
>= 1.8.0 >= 2.4.0
1.7.0 2.0.0 ~ 2.3.8

Features

  • HMR
  • Friendly error message - browser and terminal

Pre-installed

  • rust
  • nodejs
  • wasm-pack
  • rsw-rs: rsw = rs(rust) → w(wasm) - A command-line tool for automatically rebuilding local changes, based on the wasm-pack implementation.

Usage

Step 1

Install rsw

cargo install rsw

Install vite-plugin-rsw

# With NPM:
npm i -D vite-plugin-rsw

# With Yarn:
yarn add -D vite-plugin-rsw

Step 2

Edit vite.config.ts

import { defineConfig } from 'vite';
import { ViteRsw } from 'vite-plugin-rsw';

export default defineConfig({
  plugins: [
    ViteRsw(),
  ],
})

Step 3

Edit package.json

recommend to use concurrently instead of & to run command concurrently, because it can't handle system signal properly, see rwasm/rsw-rs#7

"scripts": {
+   "dev": "concurrently \"rsw watch\" \"vite\"",
+   "build": "rsw build && tsc && vite build",
+   "rsw": "rsw"
}

Step 4

rsw.toml options

  1. Initial rsw.toml

    # yarn rsw -h
    yarn rsw init
  2. Generate rust crate

    # rsw.toml
    [new]
    # using: wasm-pack | rsw | user, default is `wasm-pack`
    using = "wasm-pack"
    yarn rsw new rsw-hello
  3. Edit rsw.toml

    # link type: npm | yarn | pnpm, default is `npm`
    cli = "npm"
    
    [[crates]]
    name = "rsw-hello"
    # <npm|yarn|pnpm> link
    # ⚠️ Note: must be set to `true`, default is `false`
    link = true

Step 5

Start dev server

# rsw watch & vite
yarn dev

Step 6

Deploy

yarn build

Example

  • WA+ - 🤩 Making a web page more like a desktop application is just the beginning, the possibilities are unlimited, up to your imagination!
  • Demo - 🎲 Learning WebAssembly
  • Oh My Box - 🔮 Development toolbox, and more...

Related

create-mpl - ⚡️ Create a project in seconds!

# Quickly initialize a wasm project

# 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

微信

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

wasm-wechat-qrcode fzj-qrcode

License

MIT License © 2021 lencx