App API

createRivet() creates an app: a container for registered components, mounted instances and the event buses.

import { createRivet } from "@fullhaus/rivet";

const app = createRivet();

Overview

Method	Returns	Description
`component(name, factory)`	`RivetApp`	Registers a component (chainable)
`mount(root?)`	`RivetApp`	Mounts components in `root` (default `document`)
`unmount()`	`void`	Disposes all instances, runs cleanups
`get(id)`	`T \| undefined`	An instance’s public API or `undefined`
`require(id)`	`T`	Like `get`, but throws if not present
`emit(name, detail?)`	`void`	Emits a local app event
`listen(name, handler)`	`void`	Listens to a local app event
`global.emit(name, detail?)`	`void`	Emits a global event
`global.listen(name, handler)`	`void`	Listens to a global event
`use(plugin)`	`RivetApp`	Applies a plugin (chainable)
`[Symbol.dispose]()`	`void`	Calls `unmount()` (for `using`)

component(name, factory)

Registers a component factory under a name. The name must match the data-rivet attribute in the HTML. Returns the app (chainable).

const app = createRivet()
  .component("disclosure", disclosure)
  .component("counter", counter);

mount(root?)

Scans root (default document) for [data-rivet], matches each to its registered component and instantiates it. Already-mounted elements are skipped — idempotent. Returns the app.

app.mount();          // entire document
app.mount(container); // only inside an element

Throws Duplicate component id "…" if two instances claim the same data-rivet-id.

unmount()

Disposes all instances: removes listeners, stops effects/computeds, unsubscribes listen subscriptions and runs all cleanup functions. Releases IDs.

get(id) / require(id)

Return the public API (the factory’s return value) of the instance with the given data-rivet-id.

const maybe = app.get<MenuApi>("main-menu");   // MenuApi | undefined
const menu = app.require<MenuApi>("main-menu"); // MenuApi or Error

get(id) → T | undefined
require(id) → T or throws Component "…" not found

emit / listen

Local app bus (see Events). Unlike in the component context, app.listen subscriptions are not unsubscribed automatically — they live as long as the app lives.

app.listen("cart:add", (detail) => { /* … */ });
app.emit("cart:add", { sku: "abc" });

global.emit / global.listen

Cross-app singleton bus.

app.global.emit("theme:change", { mode: "dark" });
app.global.listen("theme:change", (detail) => { /* … */ });

use(plugin)

Applies a plugin — a function (app: RivetApp) => void. Handy for bundling sets of components or cross-cutting behaviour. Chainable.

import type { Plugin } from "@fullhaus/rivet";

const formComponents: Plugin = (app) => {
  app.component("input", input).component("select", select);
};

createRivet().use(formComponents).mount();

Symbol.dispose

The app is Disposable. With using it is unmounted automatically at the end of the block.

{
  using app = createRivet().component("counter", counter);
  app.mount();
} // unmount() runs automatically

Types

import type { RivetApp, ComponentFactory, Plugin } from "@fullhaus/rivet";