runtime/webassembly

16 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Hono works out of the box with WASI-enabled WebAssembly

Hono works out of the box with WASI-enabled WebAssembly ecosystems. Support for WebAssembly with WASI in JavaScript is powered by StarlingMonkey, and thanks to the focus on Web standards in both StarlingMonkey and Hono, Hono requires no special configuration to work in this environment.

WebAssembly WASI enables filesystem and socket access

While core WebAssembly has no access to the local filesystem or sockets, the WebAssembly System Interface (WASI) enables defining a platform under WebAssembly workloads. With WASI, WebAssembly can operate on files, sockets, and much more.

Initial setup for Hono WebAssembly project with pnpm

To start a Hono WebAssembly project with pnpm, run: mkdir my-app && cd my-app && pnpm init --init-type module && pnpm add hono && pnpm add -D @bytecodealliance/jco @bytecodealliance/componentize-js @bytecodealliance/jco-std && pnpm add -D rolldown. Ensure type is set to "module" in package.json.

Initial setup for Hono WebAssembly project with yarn

To start a Hono WebAssembly project with yarn, run: mkdir my-app && cd my-app && npm init && yarn add hono && yarn add -D @bytecodealliance/jco @bytecodealliance/componentize-js @bytecodealliance/jco-std && yarn add -D rolldown.

Initial setup for Hono WebAssembly project with bun

To start a Hono WebAssembly project with bun, run: mkdir my-app && cd my-app && npm init && bun add hono && bun add -D @bytecodealliance/jco @bytecodealliance/componentize-js @bytecodealliance/jco-std.

tsconfig.json configuration for WebAssembly Hono

For a Hono WebAssembly project, ensure tsconfig.json has compilerOptions.module set to "nodenext".

Rolldown configuration for WebAssembly Hono bundling

Create a rolldown.config.mjs file with the following configuration: import { defineConfig } from 'rolldown'; export default defineConfig({ input: 'src/component.ts', external: /wasi:.*/, output: { file: 'dist/component.js', format: 'esm' } }). This bundles the Hono application into a single file, which is necessary because componentize-js supports only single JS files.

WIT file structure for Hono WebAssembly component

Create a wit/component.wit file with the following content: package example:hono; world component { export wasi:http/incoming-handler@0.2.6; }. This declares that the component provides the functionality of receiving and handling incoming HTTP requests.

Use wkg to fetch WIT dependencies for WebAssembly

Run 'wkg wit fetch' to pull third-party WebAssembly Interface Types (WIT) interfaces maintained by the Bytecode Alliance. This populates the wit/deps folder with dependencies like wasi-http, wasi-io, wasi-clocks, wasi-cli, and wasi-random.

Hono WebAssembly component example with jco-std

Create src/component.ts with the following code to build an HTTP server: import { Hono } from 'hono'; import { fire } from '@bytecodealliance/jco-std/wasi/0.2.6/http/adapters/hono/server'; const app = new Hono(); app.get('/hello', (c) => { return c.json({ message: 'Hello from WebAssembly!' }) }); fire(app); export { incomingHandler } from '@bytecodealliance/jco-std/wasi/0.2.6/http/adapters/hono/server'. The fire() function sets up WASI HTTP, and the export provides the wasi:http/incoming-handler interface for componentize-js.

Build WebAssembly Hono component with rolldown

Run 'npx rolldown -c' (npm), 'yarn rolldown -c' (yarn), 'pnpm exec rolldown -c' (pnpm), or 'bun build --target=bun --outfile=dist/component.js ./src/component.ts' (bun) to bundle the TypeScript/JavaScript code into a single file.

Componentize WebAssembly Hono to .wasm file

Run 'npx jco componentize -w wit -o dist/component.wasm dist/component.js' (npm), 'yarn jco componentize -w wit -o dist/component.wasm dist/component.js' (yarn), 'pnpm exec jco componentize -w wit -o dist/component.wasm dist/component.js' (pnpm), or 'bun run jco componentize -w wit -o dist/component.wasm dist/component.js' (bun) to build the final WebAssembly component from the bundled JavaScript.

Run Hono WebAssembly component with jco serve

Run 'npx jco serve dist/component.wasm' (npm), 'yarn jco serve dist/component.wasm' (yarn), 'pnpm exec jco serve dist/component.wasm' (pnpm), or 'bun run jco serve dist/component.wasm' (bun) to start the development server. jco serve listens on localhost:8000 by default. jco serve is for development only and not recommended for production use.

Alternative WebAssembly runtimes for Hono

Hono WebAssembly components can be run on any WASI-enabled WebAssembly runtime. Alternative runtimes to jco serve include wasmtime.

jco transpile converts WebAssembly components to core modules

jco serve works by converting the WebAssembly component into a basic WebAssembly core module so that it can be run in runtimes like Node.js and the browser. This conversion process is normally run via 'jco transpile', allowing JavaScript engines like Node.js (V8) and browsers to function as WebAssembly Component runtimes.

Bundling requirement for WebAssembly Hono

Bundling is necessary for Hono WebAssembly components because componentize-js and jco currently support only single JavaScript files. Bundlers like rolldown, esbuild, or rollup can be used to bundle Hono and related libraries into a single file before componentization.

Give your agent this brain