{"id":13712688,"url":"https://github.com/oltdaniel/zig-js-interplay","last_synced_at":"2025-06-24T08:33:12.685Z","repository":{"id":248592290,"uuid":"828654732","full_name":"oltdaniel/zig-js-interplay","owner":"oltdaniel","description":"Seamless integration of Zig and JavaScript in WebAssembly","archived":false,"fork":false,"pushed_at":"2024-07-17T04:09:15.000Z","size":69,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-30T14:17:56.328Z","etag":null,"topics":["js","wasm","zig"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/oltdaniel.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2024-07-14T19:47:36.000Z","updated_at":"2024-12-03T06:25:43.000Z","dependencies_parsed_at":"2024-07-16T00:57:11.285Z","dependency_job_id":"4bd183f7-eeea-4fae-acab-6f1cdbfcf4d5","html_url":"https://github.com/oltdaniel/zig-js-interplay","commit_stats":null,"previous_names":["oltdaniel/zig-js-interplay"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/oltdaniel/zig-js-interplay","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oltdaniel%2Fzig-js-interplay","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oltdaniel%2Fzig-js-interplay/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oltdaniel%2Fzig-js-interplay/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oltdaniel%2Fzig-js-interplay/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oltdaniel","download_url":"https://codeload.github.com/oltdaniel/zig-js-interplay/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oltdaniel%2Fzig-js-interplay/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261635782,"owners_count":23187911,"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":["js","wasm","zig"],"created_at":"2024-08-02T23:01:21.410Z","updated_at":"2025-06-24T08:33:12.658Z","avatar_url":"https://github.com/oltdaniel.png","language":"TypeScript","readme":"# Zig JS Interplay\n\n\u003e **DISCLAIMER**: This is a project for fun. There will only be a loose versioning. There are no guarantees.\n\nDealing with a low level environment like WebAssembly via JavaScript is not easy. Many concepts of low-level languages are being pulled into a very high-level JavaScript environment, reducing the suppleness of the code and interface between both environments.\n\nThis library avoids this by pulling high-level concepts into the low-level environment of the WebAssembly source and wrapping it in such fashion, that it can be called and treated like any other JavaScript interface.\n\nThe implementation is not necessarly restricted to Zig WebAssembly source, but rather the definition of the interfaces it exposes to the JavaScript environment. The concept can be adapted to any other language that compiles to WebAssembly and offers the necessary capabilities. Zig has been chosen for fun and exploration.\n\n## Example\n\n```zig\nconst std = @import(\"std\");\nconst ipl = @import(\"zig-js-interplay\");\n\nexport fn greet(name: ipl.String) ipl.String {\n    // Generate a new greet message that we can return\n    const greetMessage = std.fmt.allocPrint(ipl.allocator, \"Hello {s}!\", .{name}) catch @panic(\"Oops\");\n    // Return with Interplay String\n    return ipl.String.init(greetMessage);\n}\n\nexport fn testFunction(arg: ipl.Function) ipl.AnyType {\n    // Construct function arguments to pass\n    const args = ipl.Array.from(\u0026.{ ipl.String.init(\"Hello\").asAny(), ipl.String.init(\"World\").asAny() });\n    // Call the function and return its return value\n    return arg.call(args);\n}\n```\n\n```js\nimport InterplayInstance from 'zig-js-interplay';\n\nconst inst = new InterplayInstance.initializeFromUrl('main.wasm');\n\nconsole.log(inst.greet(\"Daniel\"))\n// =\u003e prints \"Hello Daniel!\"\n\nconsole.log(inst.testFunction((...args) =\u003e {\n    console.log('I got called by reference from Zig with these arguments =', args)\n    return \"JS says hello!\"\n}))\n// =\u003e prints \"I got called by reference from Zig with these arguments = ['Hello', 'World']\"\n// =\u003e prints \"JS says hello!\"\n```\n\n## Installation\n\n### Requirements\n\nThe required browser versions can easily be extracted via [Browserlist](https://browsersl.ist/#q=supports+es6-module+and+supports+wasm+and+supports+wasm-bigint+and+supports+bigint) with the query `supports es6-module and supports wasm and supports wasm-bigint and supports bigint`. The support for `es6-modules` obviously only counts for the compiled JavaScript files this repo contains directly. All the other features must be supported in order to work correctly.\n\nSupported browser versions (as of 2024-07-15):\n- Chrome 85+\n- Safari iOS 14.5+\n- Safari 14.1+\n- Firefox 78+\n\n### Zig\n\n![GitHub file size in bytes](https://img.shields.io/github/size/oltdaniel/zig-js-interplay/example%2Fmain.wasm)\n\nFirst, add this repo as an dependency to your Zon file with `zig fetch https://github.com/oltdaniel/zig-js-interplay/archive/COMMITSHA.tar.gz --save`.\n\nAnd add the following code to add this repo as a module you can import to your `build.zig`:\n\n```zig\n// ...\n\n// Load depdendency\nconst zigJsInterplay = b.dependency(\"zig-js-interplay\", .{});\n\n// Add dependency to root module\nwasm.root_module.addImport(\"zig-js-interplay\", zigJsInterplay.module(\"zig-js-interplay\"));\n\n// ...\n```\n\n\u003e **NOTE**: I'm still new to zig, so if there is a better way, please let me know.\n\nThe binary size of a full example using all types, including the builtin wasm allocator, a hash function and string formatting, can be seen above.\n\n### JavaScript\n\n![GitHub file size in bytes](https://img.shields.io/github/size/oltdaniel/zig-js-interplay/dist%2Finterplay.min.js)\n\nYou can simply import the module within your source. The current bundle size can be seen above.\n\n```html\n\u003cscript type=\"module\"\u003e\n    import InterplayInstance from 'https://cdn.jsdelivr.net/gh/oltdaniel/zig-js-interplay/dist/interplay.min.js';\n\u003c/script\u003e\n```\n\nRight now we don't publish this package to an registry. But you can simply add this repo as a dependency via the package manager of your choice. We only rely on a single development dependency. Alternatively you can use a CDN like [jsdelivr](https://www.jsdelivr.com/) or [unpkg](https://unpkg.com/).\n\n## Documentation\n\n\u003e **TODO**: Write documentation.\n\nCurrently, there are a lot of technical comments in the source code itself and in the example. Please read those for now instead.\n\n### Articles\n\nI've written two articles about my process to this library. Feel free to check them out:\n\n- [Playing with zig and wasm](https://oltdaniel.eu/blog/2024/playing-with-zig-and-wasm.html)\n- [TODO](#)\n\n## Development\n\nThis project consists of two programming languages. We require a JavaScript and Zig toolchain for full development on this project.\n\n- [Node.js](https://nodejs.org) for the JavaScript toolchain environment.\n- [PNPM](https://pnpm.io/) as JavaScript package manage of choice for this project.\n- [Zig](https://ziglang.org/) for the Zig toolchain (`v0.13` has been used during development by me).\n\n```bash\n# Get the source code\ngit clone https://github.com/oltdaniel/zig-js-interplay\ncd zig-js-interplay\n\n# Compile JavaScript and Zig\n# NOTE: This runs `pnpm build` and `zig build`\nmake\n\n# Compile JavaScript\npnpm build\n\n# Compile Zig\n# NOTE: There is no compile output for Interplay alone. But it checks if everything is ok.\nzig build\n\n# Compile example\ncd example\nzig build\n\n# Serve example via HTTP server\n# http://localhost:8000/example\npython -m http.server 8000\n```\n\n### ToDo\n\n- [ ] Comment the zig file correctly and in full form\n- [ ] Maybe add some tests for the functionns on each side\n- [ ] Write documentation for the encoding and how each type works\n\n## License\n\n![MIT License](https://img.shields.io/github/license/oltdaniel/zig-js-interplay)\n","funding_links":[],"categories":["Network \u0026 Web"],"sub_categories":["WebAssembly"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foltdaniel%2Fzig-js-interplay","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foltdaniel%2Fzig-js-interplay","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foltdaniel%2Fzig-js-interplay/lists"}