{"id":28895751,"url":"https://github.com/dev-cetera/df_wasm_interop","last_synced_at":"2026-05-05T15:32:10.219Z","repository":{"id":300135816,"uuid":"1005298021","full_name":"dev-cetera/df_wasm_interop","owner":"dev-cetera","description":"A modern utility to load and use wasm-bindgen modules in Flutter web apps, with support for the WasmGC (--wasm) compiler.","archived":false,"fork":false,"pushed_at":"2025-06-20T05:18:21.000Z","size":25031,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-20T05:27:01.251Z","etag":null,"topics":["dart","flutter","interop","rust","utility","wasm","wasm-bindgen"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/df_wasm_interop","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dev-cetera.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-20T02:27:43.000Z","updated_at":"2025-06-20T05:16:30.000Z","dependencies_parsed_at":"2025-06-20T03:48:35.889Z","dependency_job_id":null,"html_url":"https://github.com/dev-cetera/df_wasm_interop","commit_stats":null,"previous_names":["robmllze/df_wasm_interop","dev-cetera/df_wasm_interop"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/dev-cetera/df_wasm_interop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-cetera%2Fdf_wasm_interop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-cetera%2Fdf_wasm_interop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-cetera%2Fdf_wasm_interop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-cetera%2Fdf_wasm_interop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dev-cetera","download_url":"https://codeload.github.com/dev-cetera/df_wasm_interop/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-cetera%2Fdf_wasm_interop/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261066585,"owners_count":23104775,"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":["dart","flutter","interop","rust","utility","wasm","wasm-bindgen"],"created_at":"2025-06-21T05:08:32.977Z","updated_at":"2026-01-11T04:47:50.094Z","avatar_url":"https://github.com/dev-cetera.png","language":"Dart","funding_links":["https://www.buymeacoffee.com/dev_cetera","https://github.com/sponsors/dev-cetera","https://www.patreon.com/c/RobertMollentze"],"categories":[],"sub_categories":[],"readme":"\u003ca href=\"https://www.buymeacoffee.com/dev_cetera\" target=\"_blank\"\u003e\u003cimg align=\"right\" src=\"https://cdn.buymeacoffee.com/buttons/default-orange.png\" height=\"48\"\u003e\u003c/a\u003e\n\u003ca href=\"https://discord.gg/gEQ8y2nfyX\" target=\"_blank\"\u003e\u003cimg align=\"right\" src=\"https://raw.githubusercontent.com/dev-cetera/.github/refs/heads/main/assets/icons/discord_icon/discord_icon.svg\" height=\"48\"\u003e\u003c/a\u003e\n\nDart \u0026 Flutter Packages by dev-cetera.com \u0026 contributors.\n\n[![sponsor](https://img.shields.io/badge/sponsor-grey?logo=github-sponsors)](https://github.com/sponsors/dev-cetera)\n[![patreon](https://img.shields.io/badge/patreon-grey?logo=patreon)](https://www.patreon.com/c/RobertMollentze)\n[![pub](https://img.shields.io/pub/v/df_wasm_interop.svg)](https://pub.dev/packages/df_wasm_interop)\n[![tag](https://img.shields.io/badge/tag-v0.1.2-purple?logo=github)](https://github.com/dev-cetera/df_wasm_interop/tree/v0.1.2)\n[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/dev-cetera/df_wasm_interop/main/LICENSE)\n\n---\n\n[![banner](https://github.com/dev-cetera/df_safer_dart/blob/v0.1.2/doc/assets/banner.png?raw=true)](https://github.com/dev-cetera)\n\n\u003c!-- BEGIN _README_CONTENT --\u003e\n\n## Summary\n\nA modern utility to load and use wasm-bindgen modules in Flutter web apps, with support for the WasmGC (--wasm) compiler.\n\nSee this [Live Example](https://dev-cetera.github.io/df_wasm_interop/). It runs some Rust functions and was compiled with the `--wasm` flag. Here is the[ Source Code](https://github.com/dev-cetera/df_wasm_interop/tree/main/hosted_example).\n\n## Features\n\n- **WasmGC Compatible:** Built from the ground up for `flutter build web --wasm`.\n- **Minimal Boilerplate:** A single line in your `index.html` and one function call in Dart is all you need to get started.\n- **Type-Safe: Encourages using dart:** js_interop's static types for robust function calls.\n- **No Manual JS:** A generic, reusable loader script handles the complexities of WASM instantiation.\n- **Multi-Language Support:** Works with any language that compiles to WASM and uses wasm-bindgen (e.g., Rust, C/C++ with Emscripten).\n\n## Quick Start Guide\n\nFollow these steps to get your WASM module running in your Flutter app.\n\n### Step 1: Create Your WASM Module (Rust Example)\n\nFirst, build your code to a WASM module. Here is a Rust example that matches the Dart API below.\n\n`Cargo.toml`\n\nMake sure you have `wasm-bindgen` as a dependency and the `cdylib` crate-type.\n\n```toml\n[package]\nname = \"my_module\"\nversion = \"0.1.0\"\nedition = \"2021\"\n\n[lib]\ncrate-type = [\"cdylib\"]\n\n[dependencies]\nwasm-bindgen = \"0.2\"\n```\n\n`src/lib.rs`\n\nAnnotate any function you want to call from Dart with `#[wasm_bindgen]`.\n\n```rust\nuse wasm_bindgen::prelude::*;\n\n#[wasm_bindgen]\npub fn add(a: i32, b: i32) -\u003e i32 {\n    a + b\n}\n\n#[wasm_bindgen]\npub fn is_answer_forty_two(x: i32) -\u003e bool {\n    x == 42\n}\n```\n\n### Build the Module\n\nRun `wasm-pack` to compile the code. This will create a pkg directory.\n\n```sh\nwasm-pack build --target web\n```\n\n### Step 2: Add Assets to Your Flutter Project\n\nCopy the generated pkg directory into your Flutter project's `web/assets/` folder.\n\nYour final file structure should look like this:\n\n```\nflutter_project/\n└── web/\n    ├── assets/\n    │   └── my_module/\n    │       ├── my_module.js\n    │       └── my_module_bg.wasm\n    ├── index.html\n    └── loader.js \u003c------ OPTIONAL\n```\n\nOr in Flutter, define the assets path in your `pubspec.yaml`:\n\n```yaml\nflutter:\n  assets:\n    - my_module/\n```\n\n### Step 3: Setup `index.html`\n\nYou must include the `loader.js` script to handle the WASM initialization.\n\n### Option A\n\nAdd the following `\u003cscript\u003e` tag to your `web/index.html` file:\n\n```html\n\u003chead\u003e\n  \u003c!-- ... --\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/gh/dev-cetera/df_wasm_interop@v0.1.2/web/loader.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\n### Option B\n\n1. Create a new file in your Flutter project at `web/loader.js` and paste the contents of the loader script into it. You can find the official loader script here: [loader.js on GitHub](https://github.com/dev-cetera/df_wasm_interop/blob/v0.1.2/web/loader.js)\n\n2. Add the following `\u003cscript\u003e` tag to your `web/index.html` file:\n\n```html\n\u003chead\u003e\n  \u003c!-- ... --\u003e\n  \u003cscript src=\"loader.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\n### Step 4: Use it in Dart\n\n#### A. Craete a Type-Safe Wrapper\n\nThis file translates your WASM functions into a clean Dart API.\n\n```dart\n// ignore_for_file: non_constant_identifier_names\n\nimport 'dart:js_interop';\n\n@JS()\n@staticInterop\nclass MyModule {} // leave it blank\n\nextension MyModuleExtension on MyWasmApi {\n  external int add(int a, int b);\n\n  @protected // hide \"is_answer_forty_two\" from the developer\n  external bool is_answer_forty_two(int x); // make sure the function signatures match exactly!\n\n  bool isAnswerFortyTwo(int x) =\u003e is_answer_forty_two(x); // rename is_answer_forty_two\n}\n```\n\n#### B. Initialize and Call from your App\n\n```dart\nMyWasmApi createMyWasmApi() {\n  final module = await WasmModule.initialize(jsPath: 'assets/my_module/my_module.js');\n  return module.instance as MyWasmApi;\n}\n\nvoid main() async {\n  final api = await createMyWasmApi();\n  print(api.add(1, 2));\n  print(api.isAnswerFortyTwo(42));\n\n  runApp(MyApp());\n}\n```\n\n\n\u003c!-- END _README_CONTENT --\u003e\n\n---\n\n☝️ Please refer to the [API reference](https://pub.dev/documentation/df_wasm_interop/) for more information.\n\n---\n\n## 💬 Contributing and Discussions\n\nThis is an open-source project, and we warmly welcome contributions from everyone, regardless of experience level. Whether you're a seasoned developer or just starting out, contributing to this project is a fantastic way to learn, share your knowledge, and make a meaningful impact on the community.\n\n### ☝️ Ways you can contribute\n\n- **Buy me a coffee:** If you'd like to support the project financially, consider [buying me a coffee](https://www.buymeacoffee.com/dev_cetera). Your support helps cover the costs of development and keeps the project growing.\n- **Find us on Discord:** Feel free to ask questions and engage with the community here: https://discord.gg/gEQ8y2nfyX.\n- **Share your ideas:** Every perspective matters, and your ideas can spark innovation.\n- **Help others:** Engage with other users by offering advice, solutions, or troubleshooting assistance.\n- **Report bugs:** Help us identify and fix issues to make the project more robust.\n- **Suggest improvements or new features:** Your ideas can help shape the future of the project.\n- **Help clarify documentation:** Good documentation is key to accessibility. You can make it easier for others to get started by improving or expanding our documentation.\n- **Write articles:** Share your knowledge by writing tutorials, guides, or blog posts about your experiences with the project. It's a great way to contribute and help others learn.\n\nNo matter how you choose to contribute, your involvement is greatly appreciated and valued!\n\n### ☕ We drink a lot of coffee...\n\nIf you're enjoying this package and find it valuable, consider showing your appreciation with a small donation. Every bit helps in supporting future development. You can donate here: https://www.buymeacoffee.com/dev_cetera\n\n\u003ca href=\"https://www.buymeacoffee.com/dev_cetera\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-orange.png\" height=\"40\"\u003e\u003c/a\u003e\n\n## 🧑‍⚖️ License\n\nThis project is released under the [MIT License](https://raw.githubusercontent.com/dev-cetera/df_wasm_interop/main/LICENSE). See [LICENSE](https://raw.githubusercontent.com/dev-cetera/df_wasm_interop/main/LICENSE) for more information.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-cetera%2Fdf_wasm_interop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdev-cetera%2Fdf_wasm_interop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-cetera%2Fdf_wasm_interop/lists"}