{"id":17659757,"url":"https://github.com/raphamorim/xwasm","last_synced_at":"2025-06-26T22:35:16.359Z","repository":{"id":39510215,"uuid":"190668960","full_name":"raphamorim/xwasm","owner":"raphamorim","description":"[Work In Progress] WebAssembly Packager and WASM tooling for modern frontend","archived":false,"fork":false,"pushed_at":"2023-01-04T00:42:48.000Z","size":3872,"stargazers_count":57,"open_issues_count":26,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-28T17:07:07.412Z","etag":null,"topics":["babel","babel-plugin","emcc","emscripten","hooks","react","wasm","webassembbly"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/raphamorim.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-07T00:45:00.000Z","updated_at":"2025-03-13T10:28:27.000Z","dependencies_parsed_at":"2023-02-01T15:16:52.596Z","dependency_job_id":null,"html_url":"https://github.com/raphamorim/xwasm","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/raphamorim/xwasm","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Fxwasm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Fxwasm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Fxwasm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Fxwasm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/raphamorim","download_url":"https://codeload.github.com/raphamorim/xwasm/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Fxwasm/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262151861,"owners_count":23266929,"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":["babel","babel-plugin","emcc","emscripten","hooks","react","wasm","webassembbly"],"created_at":"2024-10-23T16:08:12.280Z","updated_at":"2025-06-26T22:35:16.314Z","avatar_url":"https://github.com/raphamorim.png","language":"JavaScript","funding_links":[],"categories":["Projects"],"sub_categories":["Node.js"],"readme":"![assets](assets/wasm-sdk.png)\n\nThis repository contain tools for develop modern frontend with WebAssembly (React, Vue, Babel and etecetera). \n\nPlease don't use it in production. It's not stable yet.\n\n![Diagram](assets/diagram.png)\n\n#### Create a project with WASM in less than 5 minutes (optional)\n\n```\ncurl -o- -L https://raw.githubusercontent.com/raphamorim/xwasm/master/scripts/create-project.sh | bash\n```\n\n## Supported Languages\n\n| Language | Status | Notes |\n| :---         | :---         | :---         |\n| C++   | Under development     | Still very experimental    |\n| Rust     | Under development       | Test phase      |\n| Go     | On Roadmap       | -      |\n| Kotlin     | On Roadmap       | -      |\n| Lua     | On Roadmap       | -      |\n\n#### Summary\n\n- [`xwasm` Packager to WebAssembly](#xwasm)\n- [`useWasm` React Hook for load WASM files](#usewasm)\n- [FAQ](#faq)\n- [TODO](#todo)\n- [References](#references)\n\n## `xwasm`\n\nWebAssembly Packager (understand Rust/C/C++).\n\nIt will install modules/environment on demand. However you can run separate commands to install enviroment:\n\n- `$ xwasm install cpp` (install C/C++ required dependencies [emcc])\n\n- `$ xwasm check cpp` (check C/C++ dependencies status)\n\n- `$ xwasm install rust` (install Rust required dependencies [cargo])\n\n- `$ xwasm check rust` (check C/C++ dependencies status)\n\n#### Building with\n\n1. Create a file: `xwasm.config.js`\n\n```jsx\nconst filesToProcess = [\n  {\n    input: 'doubler.c',\n    output: 'doubler.wasm',\n    functions: ['doubler'] // functions that you want to export\n  },\n  {\n    // by default output will follow input filename, in this case: \"counter.wasm\"\n    input: 'counter.rs',\n    functions: ['counter']  // functions that you want to export\n  }\n]\n\nmodule.exports = filesToProcess;\n```\n\n2. Now if you run `xwasm`, it's going to load the configuration above. If you want to, you can add it before any build task. For example:\n\n```json\n\"scripts\": {\n  \"build\": \"xwasm \u0026\u0026 webpack\",\n``` \n\n## `useWasm`\n\n### Installing\n\n```bash\n$ npm install use-wasm\n```\n\n### Usage\n\nC++ code\n\n```cpp\nint _doubler(int x) {\n  return 2 * x;\n}\n```\n\nJSX code with React\n\n```jsx\n\nimport React, { Fragment, Component } from 'react';\nimport { render } from 'react-dom';\nimport useWasm from 'use-wasm';\n\nfunction App() {\n  // method will initialize null til load the \"./doubler.wasm\"\n  const { isWasmEnabled, instance } = useWasm('doubler');\n\n  return (\n    \u003cFragment\u003e\n      \u003cp\u003eisWasmEnabled: {String(isWasmEnabled())}\u003c/p\u003e\n      \u003cp\u003e_doubler: {String(instance \u0026\u0026 instance._doubler(2))}\u003c/p\u003e\n    \u003c/Fragment\u003e\n  );\n}\n\nrender(\u003cApp/\u003e, document.querySelector('#root'));\n\n```\n\n###### Instance loading (`null` as initial value)\n\n![Value loading returning null](assets/demo-react-hooks-loading.png) \n\n###### Instance loaded (wasm export object as value)\n\n![Value loading returning instance object](assets/demo-react-hooks-loaded.png)\n\n## TODO\n\n- [ ] useWasm: Cache logic for fetching WASM files\n- [ ] xwasm/emscripten: Cache for build\n- [ ] xwasm/emscripten: Add support for Windows\n- [ ] xwasm/emscripten: Add support for load different files into one export\n- [ ] Write examples using Rust \n\n## References\n\n- https://webassembly.org/getting-started/developers-guide\n- https://emscripten.org/docs/compiling/WebAssembly.html\n- https://developer.mozilla.org/en-US/docs/WebAssembly\n- https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm\n- https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API\n- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory\n- https://github.com/emscripten-core/emscripten/issues/8126\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraphamorim%2Fxwasm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraphamorim%2Fxwasm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraphamorim%2Fxwasm/lists"}