Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rwasm/vite-plugin-rsw
🦞 wasm-pack plugin for Vite
https://github.com/rwasm/vite-plugin-rsw
plugin rsw rsw-rs rust vite-plugin vite-plugin-rsw wasm wasm-bindgen wasm-pack webassembly
Last synced: 4 months ago
JSON representation
🦞 wasm-pack plugin for Vite
- Host: GitHub
- URL: https://github.com/rwasm/vite-plugin-rsw
- Owner: rwasm
- License: mit
- Created: 2021-01-10T05:54:29.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-06-12T16:32:37.000Z (over 1 year ago)
- Last Synced: 2024-05-19T15:06:23.086Z (9 months ago)
- Topics: plugin, rsw, rsw-rs, rust, vite-plugin, vite-plugin-rsw, wasm, wasm-bindgen, wasm-pack, webassembly
- Language: TypeScript
- Homepage:
- Size: 11.5 MB
- Stars: 381
- Watchers: 2
- Forks: 10
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - rwasm/vite-plugin-rsw - 🦞 wasm-pack plugin for Vite (TypeScript)
README
# vite-plugin-rsw
> wasm-pack plugin for Vite
[](https://www.npmjs.com/package/vite-plugin-rsw)
[](https://npmjs.org/package/vite-plugin-rsw)
[](https://github.com/vitejs/vite)
[](https://discord.gg/euyYWXTwmk)
[](https://github.com/lencx/awesome-rsw)
[](https://www.rust-lang.org)
[](https://webassembly.org)
|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](https://www.rust-lang.org/learn/get-started)
- [nodejs](https://nodejs.org)
- [wasm-pack](https://github.com/rustwasm/wasm-pack)
- [rsw-rs](https://github.com/lencx/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
```bash
cargo install rsw
```
Install vite-plugin-rsw
```bash
# With NPM:
npm i -D vite-plugin-rsw
# With Yarn:
yarn add -D vite-plugin-rsw
```
### Step 2
Edit vite.config.ts
```js
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 https://github.com/rwasm/rsw-rs/issues/7
```json5
"scripts": {
+ "dev": "concurrently \"rsw watch\" \"vite\"",
+ "build": "rsw build && tsc && vite build",
+ "rsw": "rsw"
}
```
### Step 4
[rsw.toml options](https://github.com/rwasm/rsw-rs#options)
1. Initial rsw.toml
```bash
# yarn rsw -h
yarn rsw init
```
2. Generate rust crate
```bash
# rsw.toml
[new]
# using: wasm-pack | rsw | user, default is `wasm-pack`
using = "wasm-pack"
```
```bash
yarn rsw new rsw-hello
```
3. Edit rsw.toml
```toml
# link type: npm | yarn | pnpm, default is `npm`
cli = "npm"
[[crates]]
name = "rsw-hello"
# link
# ⚠️ Note: must be set to `true`, default is `false`
link = true
```
### Step 5
Start dev server
```bash
# rsw watch & vite
yarn dev
```
### Step 6
Deploy
```bash
yarn build
```
### Example
- [WA+](https://github.com/lencx/WA) - 🤩 Making a web page more like a desktop application is just the beginning, the possibilities are unlimited, up to your imagination!
- [Demo](https://github.com/lencx/learn-wasm) - 🎲 Learning WebAssembly
- [Oh My Box](https://github.com/lencx/OhMyBox) - 🔮 Development toolbox, and more...
## Related
[create-mpl](https://github.com/lencx/create-mpl) - ⚡️ Create a project in seconds!
```bash
# 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
```
---
## 微信
> 群二维码已过期，关注公众号《浮之静》，发送“进群”，我将拉你进群一起学习。
## License
MIT License © 2021 [lencx](https://github.com/lencx)