@hypen-space/web-engine

Browser engine for Hypen - WASM engine wrapper and orchestrator for building browser SPAs with Hypen's declarative UI.

Installation

npm install @hypen-space/core @hypen-space/web @hypen-space/web-engine
# or
bun add @hypen-space/core @hypen-space/web @hypen-space/web-engine

Quick Start

The simplest way to render a Hypen component in the browser:

import { render } from "@hypen-space/web-engine";

await render("Counter", "#app");

Hypen Orchestrator

For full control over initialization and rendering:

import { Hypen } from "@hypen-space/web-engine";

const hypen = new Hypen({
  componentsDir: "./src/components",
  debug: false,
  wasmUrl: "/hypen_engine_bg.wasm",
  debugHeatmap: false,
});

await hypen.init();
await hypen.loadComponents();
await hypen.render("HomePage", "#app");

// Access runtime
const router = hypen.getRouter();
const context = hypen.getGlobalContext();
const state = hypen.getState();

// Cleanup
await hypen.unmount();

Engine (Low-Level)

Use the Engine class directly for custom integrations:

import { Engine } from "@hypen-space/web-engine";
import { DOMRenderer } from "@hypen-space/web";

const engine = new Engine();
await engine.init({ wasmUrl: "/hypen_engine_bg.wasm" });

const renderer = new DOMRenderer(document.getElementById("app")!, engine);

engine.setRenderCallback((patches) => {
  renderer.applyPatches(patches);
});

engine.renderSource(`
  Column {
    Text("Hello from the browser!")
  }
`);

Render with Pre-Loaded Components

Skip discovery and pass components directly:

import { renderWithComponents } from "@hypen-space/web-engine";

await renderWithComponents("Counter", "#app", {
  Counter: {
    template: 'Column { Text("Count: @{state.count}") }',
    module: counterModule,
  },
});

Device capabilities in one tab

The browser bundle ships the Rust device broker (RFC 001), the same state machine every Hypen server runs. A page whose modules run in-tab can therefore run the real device plane without a server: connectLocalDevicePlane pairs core's DevicePlane with a WebDeviceHost from @hypen-space/device-web over an in-memory transport, the Rust handshake negotiates, and the host's own consent dialogs and drivers answer the module's context.device requests.

import { Engine, connectLocalDevicePlane } from "@hypen-space/web-engine";
import { HypenModuleInstance } from "@hypen-space/core/app";
import { WebDeviceHost } from "@hypen-space/device-web";

const engine = new Engine();
await engine.init();

const local = connectLocalDevicePlane({
  factory: engine.createDeviceBrokerFactory(),
  host: new WebDeviceHost({ origin: location.origin }),
});

const instance = new HypenModuleInstance(engine, myModule);
instance.attachDevice(local.plane); // context.device now reaches the host
await instance.activate();

// … later
local.close();

engine.hasDeviceBroker() tells you whether the loaded bundle carries the broker (a custom jsUrl pointing at a js-only build does not).

Exports

| Export | Description | |--------|-------------| | @hypen-space/web-engine | Main - Hypen orchestrator, render, renderWithComponents, Engine, in-tab device plane | | @hypen-space/web-engine/engine | Browser WASM engine wrapper | | @hypen-space/web-engine/device | connectLocalDevicePlane, createBrowserDeviceBrokerFactory, hasDeviceBroker |

Requirements

• Browser with ES2020 support
• @hypen-space/core and @hypen-space/web peer dependencies

License

MIT