Skip to content

tobiasbernet/svelte-wasm

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 

Repository files navigation

svelte-wasm

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.

Basics setup

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

Setup wasm

  1. Install the rollup-plugin-rust plugin.

  2. 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/"
       }),
      ]
    }]
  3. 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();
  4. 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