Svelte-wasm is an example project that how WebAssembly and Svelte could work together.
This example project uses:
Is for: The main focus of this project is to make an integration example of WebAssembly (Rust) and Svelte. Is not for: This project is neither a coding example from Rust nor from Svelte.
Svelte: I used the quick tutorial - straight forward.
Rust-Wasm: I used the hello-world
example from this great tutorial.
Project structure:
svelte-wasm
├── svelte-app
└── wasm-game-of-life
Install the rollup-plugin-rust plugin.
Setup the plugin in your rollup.config.js
// ...
import rust from "@wasm-tool/rollup-plugin-rust";
export default [{
// ...
plugins: [
// ...
// Add the configuration for your wasm-tool plugins
// The generated .wasm file is placed in the /build/ folder.
// To tell the server where to fetch the .wasm file you have to specify
// the path otherwise you get a 404 error (.wasm file not found).
rust({
verbose: true,
serverPath: "/build/"
}),
]
}]
Access your wasm greet()
function in your Svelte js code.
//wasm-game-of-life/src/lib.rs
mod utils;
use wasm_bindgen::prelude::*;
// When the `wee_alloc` feature is enabled, use `wee_alloc` as the global
// allocator.
#[cfg(feature = "wee_alloc")]
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
#[wasm_bindgen]
pub fn greet() -> String {
"Hello, wasm-game-of-life!".into()
}
// svelte-app/src/main.js
import App from './App.svelte';
// Load the .toml file of your Rust project.
// The wasm-plugin runs `wasm-pack build` and cpoies the output into
// `svelte-app/target` directory.
// The `.wasm` file is located in the `svelte-app/public/build` dir.
import wasm from '../../wasm-game-of-life/Cargo.toml';
// WebAssembly files must be loaded async.
const init = async () => {
const gameOfLife = await wasm();
const app = new App({
target: document.body,
props: {
// https://svelte.dev/docs#Creating_a_component
greet: gameOfLife.greet()
}
});
};
init();
Start the server npm run dev
.
The output should look something like this:
Your application is ready~! 🚀
➡ Port 5000 is taken; using 40179 instead
- Local: http://localhost:40179
────────────────── LOGS ──────────────────
[23:02:30] 200 ─ 5.79ms ─ /
[23:02:30] 200 ─ 1.51ms ─ /global.css
[23:02:30] 200 ─ 2.81ms ─ /build/bundle.css
[23:02:30] 200 ─ 3.40ms ─ /build/bundle.js
[23:02:31] 200 ─ 2.04ms ─ /build/wasm-game-of-life.wasm <-- The defined build path in your rollup.config.js file.
[23:02:31] 200 ─ 4.86ms ─ /build/bundle.css.map
[23:02:31] 200 ─ 7.84ms ─ /build/bundle.js.map
[23:02:31] 200 ─ 1.20ms ─ /favicon.png