Class: PlayRenderer

API / @xmachines/play-dom / PlayRenderer

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

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

It watches actor.currentView through the atoms. 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 "@xmachines/play-atom";
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:223

Parameters

Parameter	Type	Description
container	HTMLElement	The HTMLElement to render into. Each view transition clears it and fills it again.
actor	ViewActor	The actor with the currentView atom. 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. - onError — the (error, reset) handler of a failure of a complete rebuild. The renderer contains such a failure always, and this option says where the report goes. - fallback — the element to show for every null view, and after a contained failure.

Returns

PlayRenderer

Methods

connect()

connect(): void;

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

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

A connect() call on a connected renderer, where a disconnect() call did not follow the previous connect(), installs a second watchAtom 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:283

Stops the watch and clears the container.

Returns

void