Class: PlayRenderer

API / @xmachines/play-dom / PlayRenderer

Defined in: packages/play-dom/src/PlayRenderer.ts:87

PlayRenderer connects an actor’s currentView signal to the DOM renderer.

Watches actor.currentView via TC39 Signals and renders DomComponentRenderer functions into container on every view transition. Cleared on disconnect().

Options from PlayDomOptions (which extends UIProviderOptions) are all forwarded into DomRenderContext on every render pass:

• functions — named compute functions for { $computed: "name" } prop expressions
• validationFunctions — custom validation functions, available at ctx.ctx.validationFunctions
• navigate — navigation callback, invoked on onSuccess: { navigate: "..." } action bindings
• onRenderError — called with (error, name) for component render errors and action handler rejections

Preferred usage — via registryResult:

import { PlayRenderer, defineRegistry } from "@xmachines/play-dom";

const registryResult = defineRegistry(catalog, { components, actions });
const renderer = new PlayRenderer(container, actor, registryResult.registry, {
  registryResult, // wires setState/getState from xstate store automatically
  navigate: (path) => myRouter.push(path),
  functions: { fullName: (args) => `${args.first} ${args.last}` },
});
renderer.connect();
// Later:
renderer.disconnect();

Controlled store mode — bring your own StateStore:

import { createAtom } from "@xstate/store";
import { xstateStoreStateStore } from "@json-render/xstate";

const atom = createAtom({ username: "" });
const store = xstateStoreStateStore({ atom });
const renderer = new PlayRenderer(container, actor, registry, { registryResult, store });
renderer.connect();

Double connect() is safe — calling connect() while already connected automatically disconnects first, preventing double-render subscriptions.

Constructors

Constructor

new PlayRenderer(
   container,
   actor,
   registry,
   options?): PlayRenderer;

Defined in: packages/play-dom/src/PlayRenderer.ts:113

Parameters

Parameter	Type	Description
container	HTMLElement	HTMLElement to render into. Cleared and repopulated on every view transition.
actor	AbstractActor<AnyActorLogic, EventObject> & Viewable	Actor providing the currentView signal (must implement Viewable).
registry	DomRegistry	Component renderer map — typically registryResult.registry from defineRegistry.
options	PlayDomOptions	Configuration (see PlayDomOptions): - registryResult — auto-wires setState/state from the xstate store. - store — external StateStore (controlled mode; overrides spec.state seeding). - loading — streaming mode flag; suppresses missing-child warnings. - functions — named compute functions for $computed prop expressions. - validationFunctions — custom validation functions; available at ctx.ctx.validationFunctions. - navigate — navigation callback; invoked on onSuccess: { navigate: "..." }. - onRenderError — (error, name) handler for component render errors and action handler rejections; suppresses console.error fallback.

Returns

PlayRenderer

Methods

connect()

connect(): void;

Defined in: packages/play-dom/src/PlayRenderer.ts:129

Start watching actor.currentView and render to container. Renders the initial view synchronously, then subscribes to signal changes.

Calling connect() on an already-connected renderer (where a previous connect() was never followed by disconnect()) would silently install a second watchSignal subscription, causing double-renders on every view change. Guard against this by auto-disconnecting first.

Returns

void

---

disconnect()

disconnect(): void;

Defined in: packages/play-dom/src/PlayRenderer.ts:138

Stop watching and clear the container.

Returns

void