wurbo v0.5.3

Wurbo

Because your user interface should be trustless, too.

Experimental Proof of concept web framework using wasm components. All input and UI generation is done in Wasm, so there cannot be "call home" vulnerabilities over your data inputs. This means you can use guest Apps (wasm components) in a trustless fashion in your host app.

Wurbo? Like Turbo, but using Wasm Components. Kind of like Elm too? Render HTML from wasm ui components.

Short Video Hype

Examples

• Example Guest component is examples/vowels
• Example Forms component is examples/forms
• Example Host app is src/routes/+page.svelte

To run the examples locally in the browser, you can use the following commands:

# build-component:
  cargo component build --workspace

# prev: build-component
  npm run build && npm run preview -- --open

or using just: just prev

Demo

The example is demonstrated at https://douganderson444.github.io/wurbo

Use Steps

1. In your WIT file:

• declare interface named reactivity with functions render and activate
• a separate interface (named anything you like, such as imports) with function addeventlistener

2. In the Rust:

• create your new Wasm Component using cargo component new --reactor <name>
• ensure you add render crate to your Cargo.toml dependencies
• use the wurbo crate's macro to implement the reactivity interface for reactivity::Guest.
• build your own Page parent component and Input / Output components as you like for your user interface.

3. In JavaScript:

• load the wasm bytes + importables into an ES module (called it mod) using rollup-plugin-wit-component
• mod.reactivity.render(args) uses that module to load the initial data.
• wurbo.listen(mod) listens for events from the component
• call mod.reactivity.activate() once the DOM has loaded, to start listening for change events.

Table Summary:

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

Compile the wasm component, see README.md for more details.

npm run build

# or start the server and open the app in a new browser tab
npm run preview -- --open

Building

To build the code (dev mode does not work due to how Vite handles wasm):

cargo component build --workspace --release
npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

Publishing

To publish to npm:

just publish

or, manually:

npm run package
npm publish

To publish to crates.io:

cargo publish -p wurbo