Class: PlayRenderer

API / @xmachines/play-dom / PlayRenderer

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

PlayRenderer connects the currentView signal of an actor to the DOM renderer.

It watches actor.currentView through the TC39 Signals. It renders each DomComponentRenderer function into container on every view transition. disconnect() clears the container.

Every option of PlayDomOptions, which extends UIProviderOptions, goes into DomRenderContext on each render pass:

• functions — the named compute functions of a { $computed: "name" } prop expression
• directives — your own dynamic values with a $ prefix, from defineDirective. The renderer resolves them with the props
• validationFunctions — your own check functions. They are available at ctx.ctx.validationFunctions
• navigate — the navigation callback. The renderer calls it for an onSuccess: { navigate: "..." } action binding
• onRenderError — the renderer calls it with (error, name) for a component render error and for an action handler rejection

The preferred use, with registryResult:

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

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

The controlled store mode — you give your own StateStore:

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

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

A second connect() is safe. A connect() call on a connected renderer disconnects it first. Therefore the renderer holds no second render subscription.

Constructors

Constructor

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

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

Parameters

Parameter	Type	Description
container	HTMLElement	The HTMLElement to render into. Each view transition clears it and fills it again.
actor	AbstractActor<AnyActorLogic, EventObject> & Viewable	The actor with the currentView signal. It must implement Viewable.
registry	DomRegistry	The map of the component renderers, usually registryResult.registry from defineRegistry.
options	PlayDomOptions	The configuration. See PlayDomOptions: - registryResult — it connects setState and state of the xstate store for you. - store — an external StateStore, which is the controlled mode. It replaces the values of spec.state. - loading — the flag of the streaming mode. It stops each warning about an absent child. - functions — the named compute functions of a $computed prop expression. - directives — your own dynamic values with a $ prefix. The renderer resolves them with the props. - validationFunctions — your own check functions. They are available at ctx.ctx.validationFunctions. - navigate — the navigation callback. The renderer calls it for onSuccess: { navigate: "..." }. - onRenderError — the (error, name) handler of a component render error and of an action handler rejection. It stops the console.error fallback.

Returns

PlayRenderer

Methods

connect()

connect(): void;

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

Starts the watch of actor.currentView, and renders into the container. It renders the first view synchronously, then it subscribes to the signal changes.

A connect() call on a connected renderer, where a disconnect() call did not follow the previous connect(), installs a second watchSignal subscription. Each view change then renders two times. Therefore this method disconnects the renderer first.

Returns

void

---

disconnect()

disconnect(): void;

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

Stops the watch and clears the container.

Returns

void