{"id":14962614,"url":"https://github.com/tobiasbernet/svelte-wasm","last_synced_at":"2025-06-22T22:35:07.143Z","repository":{"id":42899380,"uuid":"252247715","full_name":"tobiasbernet/svelte-wasm","owner":"tobiasbernet","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-13T12:26:01.000Z","size":472,"stargazers_count":119,"open_issues_count":5,"forks_count":10,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-06-10T08:40:54.064Z","etag":null,"topics":["rust","svelte","sveltejs","wasm-pack","webassembly"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tobiasbernet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-01T17:52:08.000Z","updated_at":"2025-02-27T11:18:25.000Z","dependencies_parsed_at":"2023-02-09T15:30:16.749Z","dependency_job_id":null,"html_url":"https://github.com/tobiasbernet/svelte-wasm","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tobiasbernet/svelte-wasm","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobiasbernet%2Fsvelte-wasm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobiasbernet%2Fsvelte-wasm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobiasbernet%2Fsvelte-wasm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobiasbernet%2Fsvelte-wasm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tobiasbernet","download_url":"https://codeload.github.com/tobiasbernet/svelte-wasm/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tobiasbernet%2Fsvelte-wasm/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261379992,"owners_count":23149930,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["rust","svelte","sveltejs","wasm-pack","webassembly"],"created_at":"2024-09-24T13:30:11.386Z","updated_at":"2025-06-22T22:35:02.127Z","avatar_url":"https://github.com/tobiasbernet.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-wasm\n\nSvelte-wasm is an example project that how WebAssembly and Svelte could work\ntogether.\n\nThis example project uses:\n- [Svelte](https://svelte.dev/) as frontend \"Framework\".\n- [RollupJs](https://rollupjs.org/guide/en/) as module bundler.\n- [wasm-rollup-plugin](https://github.com/wasm-tool/rollup-plugin-rust) the perfect Helper to integrate your Rust code into your js env.\n- [Rust](https://www.rust-lang.org/)\n- [wasm-pack](https://github.com/rustwasm/wasm-pack) awesome Rust WebAssembly Generator.\n\nIs for: The main focus of this project is to make an integration example of WebAssembly (Rust) and Svelte.\nIs not for: This project is neither a coding example from Rust nor from Svelte.\n\n## Basics setup\nSvelte: I used the quick [tutorial](https://svelte.dev/blog/the-easiest-way-to-get-started) - straight forward.\n\nRust-Wasm: I used the `hello-world` example from this great [tutorial](https://rustwasm.github.io/docs/book/game-of-life/hello-world.html).\n\nProject structure:\n```\nsvelte-wasm\n├── svelte-app\n└── wasm-game-of-life\n```\n\n## Setup wasm\n1. Install the [rollup-plugin-rust](https://github.com/wasm-tool/rollup-plugin-rust) plugin.\n2. Setup the plugin in your `rollup.config.js`\n   ```js\n   // ...\n   import rust from \"@wasm-tool/rollup-plugin-rust\";\n\n   export default [{\n     // ...\n\n     plugins: [\n       // ...\n\n       // Add the configuration for your wasm-tool plugins\n       // The generated .wasm file is placed in the /build/ folder.\n       // To tell the server where to fetch the .wasm file you have to specify\n       // the path otherwise you get a 404 error (.wasm file not found).\n       rust({\n        verbose: true,\n        serverPath: \"/build/\"\n      }),\n     ]\n   }]\n   ```\n3. Access your wasm `greet()` function in your Svelte js code.\n   ```rust\n     //wasm-game-of-life/src/lib.rs\n     mod utils;\n\n    use wasm_bindgen::prelude::*;\n\n    // When the `wee_alloc` feature is enabled, use `wee_alloc` as the global\n    // allocator.\n    #[cfg(feature = \"wee_alloc\")]\n    #[global_allocator]\n    static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;\n\n    #[wasm_bindgen]\n    pub fn greet() -\u003e String {\n        \"Hello, wasm-game-of-life!\".into()\n   }\n   ```\n\n   ```js\n   // svelte-app/src/main.js\n   import App from './App.svelte';\n   // Load the .toml file of your Rust project.\n   // The wasm-plugin runs `wasm-pack build` and cpoies the output into\n   // `svelte-app/target` directory.\n   // The `.wasm` file is located in the `svelte-app/public/build` dir.\n   import wasm from '../../wasm-game-of-life/Cargo.toml';\n\n   // WebAssembly files must be loaded async.\n   const init = async () =\u003e {\n       const gameOfLife = await wasm();\n\n       const app = new App({\n           target: document.body,\n           props: {\n             // https://svelte.dev/docs#Creating_a_component\n             greet: gameOfLife.greet()\n           }\n       });\n   };\n\n   init();\n   ```\n4. Start the server `npm run dev`.\n   The output should look something like this:\n   ```bash\n   Your application is ready~! 🚀\n\n   ➡ Port 5000 is taken; using 40179 instead\n\n   - Local:      http://localhost:40179\n \n   ────────────────── LOGS ──────────────────\n\n   [23:02:30] 200 ─ 5.79ms ─ /\n   [23:02:30] 200 ─ 1.51ms ─ /global.css\n   [23:02:30] 200 ─ 2.81ms ─ /build/bundle.css\n   [23:02:30] 200 ─ 3.40ms ─ /build/bundle.js\n   [23:02:31] 200 ─ 2.04ms ─ /build/wasm-game-of-life.wasm \u003c-- The defined build path in your rollup.config.js file.\n   [23:02:31] 200 ─ 4.86ms ─ /build/bundle.css.map\n   [23:02:31] 200 ─ 7.84ms ─ /build/bundle.js.map\n   [23:02:31] 200 ─ 1.20ms ─ /favicon.png\n   ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftobiasbernet%2Fsvelte-wasm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftobiasbernet%2Fsvelte-wasm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftobiasbernet%2Fsvelte-wasm/lists"}