What is js-component-bindgen?
mainjs-component-bindgen is a tool used to transpile WebAssembly components into JavaScript.repository·main·Indexed 21 days ago
https://github.com/bytecodealliance/jcoA JavaScript-native toolchain for the WebAssembly Component Model. jco allows developers to build WebAssembly components from JavaScript or TypeScript using `jco componentize`, transpile WebAssembly components into JavaScript modules with `jco transpile`, and serve components for local development via `jco serve`. The toolchain includes `js-component-bindgen` for transpiling components into JavaScript and supports WebAssembly Interface Types (WIT) to define component contracts.
js-component-bindgen is a tool used to transpile WebAssembly components into JavaScript.Jco is a JavaScript-native toolchain for working with WebAssembly Components. Its primary functions include:
componentize-js or componentize-qjs.wasmtime run or wasmtime serve).wasm-tools as a library from within JavaScript.jco is a native tool designed for working with WebAssembly Components in JavaScript environments. Its primary capabilities include:
componentize command to create WebAssembly components from JavaScript code (this is a wrapper around ComponentizeJS).Note: This project is experimental. Stability, security, and support are not guaranteed, and breaking changes may occur without notice.
@bytecodealliance/jco-std is a sub-project of @bytecodealliance/jco that contains shared functionality and reusable libraries for building WebAssembly Components in JavaScript.
It provides helpers for both server-side and browser environments.
WARNING Browser support is considered experimental and is not currently suitable for production applications.
examples/components directory contains various JavaScript projects that demonstrate different ways to use JCO for componentization. These examples cover a range of use cases from simple function exports to complex multi-file TypeScript projects, HTTP servers, and WASI interface implementations. Most examples are standard JavaScript projects compatible with Node.js or the browser.The bare-jco package is not the primary JavaScript WebAssembly toolkit. If you intend to use the jco toolkit for WebAssembly integration, you should install and use the official @bytecodealliance/jco package from npm instead.
npm install @bytecodealliance/jcoThe jco repository provides a series of guided walkthroughs to help you navigate the JS ecosystem WebAssembly tooling (including jco and componentize-js). These guides cover everything from initial environment setup to advanced component composition.
Available guides include:
jco: A walkthrough for building simple components (e.g., add.wasm).string-reverse.wasm).string-reverse-upper.wasm).WIT result<T, E> types are handled differently depending on whether they are used in function signatures or stored in containers:
throw-ing.result<string, string>, throwing an error in JS satisfies the err case.result is stored inside another type, it is represented as a variant object: { tag: 'ok', val: T } | { tag: 'err', val: E }.Error object, Jco can extract the error type if the error has a .payload property. This allows you to throw idiomatic JS errors while still satisfying WIT error types.// Function return (Result as exception)
// WIT: f: func(n: u32) -> result<string, string>;
function f(n: number): string {
if (n == 42) {
return 'correct';
}
throw 'not correct';
}
// Result in a container (Result as variant)
// WIT: r: func(r: result<string, string>) -> string;
type Result<T,E> = { tag: 'ok', val: T } | { tag: 'err', val: E };
function f(input: Result<string, string>): string {
switch (input.tag) {
case 'ok': return `SUCCESS, returned: [${input.val}]`;
case 'err': return `ERROR, returned: [${input.val}]`;
default: throw Error("something has gone seriously wrong");
}
}
// Host implementation using Error.payload
function justThrow() {
const plainError = new Error('Error for JS users');
const errorWithPayload = Object.assign(plainError, { payload: 1111 });
throw errorWithPayload;
}In optimized bindgen, resource handles are managed via ResourceTable, which is implemented as a JS array of integers. This table maps handles to resource IDs (reps).
u32 values.1 << 30 is the flag bit for all data values.0 (after removing the flag) indicates the end of the list.scope (ref count or scope ID) and the second is the rep (resource ID). The second value's high bit indicates if it is an 'own' handle.n, read the pair at n * 2 and n * 2 + 1.This project demonstrates how to use the Hono web framework within a WebAssembly component. The architecture relies on the following principles:
wasi:http/incoming-handler interface. When using jco componentize, the StarlingMonkey runtime is used to provide this capability.jco transpile is used. This creates a "virtual" WebAssembly + WASI host using @bytecodealliance/preview2-shim to handle incoming HTTP requests.@bytecodealliance/jco-std, the component can access wasi:cli/environment (for environment variables) and wasi:config/store (for custom configuration) on the WebAssembly platform.The Jco repository is organized into several specialized subprojects:
| Subproject | Description |
|---|---|
jco | The jco CLI |
jco-transpile | WebAssembly Component Transpilation functionality |
jco-std | A "standard library" providing integrations for popular JS frameworks/paradigms |
preview2-shim | Provides a mapping of WASI Preview 2 for NodeJS and Browsers |
preview3-shim | Provides a mapping of WASI Preview 3 for NodeJS |
rolldown-plugin-jco | Rolldown and Rollup plugin for importing WebAssembly Components through Jco |
js-component-bindgen | Enables jco transpile and other features by reusing the Rust WebAssembly ecosystem |
js-component-bindgen-component | A WebAssembly component that makes js-component-bindgen available in JS jco when transpiled |
wasm-tools-component | A WebAssembly component containing pieces of wasm-tools used by jco |