function / @typed/ui/Storybook

mount

Mounts a Typed component in an isolated Storybook canvas.

The mount stays alive after its first render so reactive attributes and event handlers remain attached. It is released explicitly or when Storybook removes the canvas from its document.

Learn this UI primitive →

Package version
1.0.0-beta.13
Category
Story mounting
Since
1.0.0

Import

import { mount } from "@typed/ui/Storybook";

Signatures

export declare function mount<E>(content: Fx.Fx<RenderEvent, E, Scope.Scope | RenderTemplate>, document?: Document): Promise<MountedStory>;

Why

Waiting only for the first RenderEvent and then ending the fiber would detach reactive attributes and event handlers. This helper keeps the Typed renderer alive while still giving tests an explicit disposal boundary.

Ownership and lifetime

mount creates an unsafe Scope dedicated to this story, starts the render fiber, and resolves only after the first event. dispose interrupts and closes it idempotently. After the canvas has once been connected, a document-scoped MutationObserver disposes it when removed and then disconnects. Calling dispose while the canvas is still connected does not disconnect that observer: it continues retaining the document, canvas, and disposal closure until the canvas is removed. Tests or hosts that keep a disposed canvas connected must remove it themselves to release that observer. If rendering fails before the first event, Scope cleanup runs before rejection and no removal observer is installed.

Platform requirements

This is a browser/testing API. The provided Document supplies element and MutationObserver implementations. The canvas is returned detached so Storybook or a test controls where it enters the DOM.

Examples

import { mount } from "@typed/ui/Storybook"
import { html } from "@typed/template"

const story = await mount(html`<button type="button">Save</button>`)
document.body.append(story.canvas)
// Run interactions and assertions against story.canvas.
await story.dispose()
story.canvas.remove() // disconnects the removal observer

Source