Interface: PlayDomOptions
API / @xmachines/play-dom / PlayDomOptions
Defined in: packages/play-dom/src/types.ts:23
Options for PlayRenderer.
Extends UIProviderOptions, which contributes functions,
validationFunctions, navigate, and onRenderError. All four are
forwarded into DomRenderContext on every render pass and are readable
by component implementations via ctx.ctx.*.
Extends
Properties
| Property | Type | Description | Inherited from | Defined in |
|---|---|---|---|---|
functions? | Record<string, ComputedFunction> | Named compute functions for { $computed: "name", args: {...} } prop expressions. Each function receives the resolved args object and returns the computed value. Forwarded directly to resolveElementProps via PropResolutionContext.functions, matching the FunctionsContext provider in the framework renderers. Without this option, $computed expressions resolve to undefined (no throw). Example const mount = createPlayUI(registryResult, { functions: { fullName: (args) => ${args.first} ${args.last}, formatCurrency: (args) => new Intl.NumberFormat().format(args.amount as number), }, }); Mirrors the functions prop on JSONUIProvider / JsonUIProvider. | UIProviderOptions.functions | packages/play-dom/src/json-render/types.ts:88 |
loading? | boolean | When true, indicates the spec is still streaming (e.g. from an AI provider). Forwarded to renderSpec so component implementations can read ctx.ctx.loading to render skeleton states. Also suppresses missing-child warnings during stream ingestion, since referenced elements may not yet have arrived in the incremental spec. Mirrors the loading prop from framework renderer providers. | - | packages/play-dom/src/types.ts:52 |
navigate? | (path) => void | Programmatic navigation function. Called automatically when an action binding resolves with onSuccess: { navigate: "/path" }. The resolved path string is passed as the sole argument. Mirrors the navigate prop in ActionProvider from the framework renderers, where it is captured in the execute() closure. Also available to component implementations directly via ctx.ctx.navigate for cases where navigation needs to be triggered outside of an action binding. Example import { useNavigate } from "my-router"; const navigate = useNavigate(); const mount = createPlayUI(registryResult, { navigate }); Spec binding that triggers navigation: { "on": { "click": { "action": "doSomething", "onSuccess": { "navigate": "/dashboard" } } } } | UIProviderOptions.navigate | packages/play-dom/src/json-render/types.ts:152 |
onRenderError? | RenderErrorHandler | Unified error handler for component render errors and action handler rejections. Matches RenderErrorHandler = (error: unknown, name: string) => void. Invoked for three distinct error classes: - (error, elementType) — when a component renderer throws synchronously during renderSpec - (error, actionName) — when an action handler rejects during emit() (on-event path) - (error, actionName) — when an action handler rejects during a watch binding callback When provided, suppresses the console.error fallback for all three error types. Forwarded into renderSpec as the onRenderError parameter and into DomRenderContext.onRenderError so both emit() and watch handlers route their errors through the same channel as component render errors. Example const mount = createPlayUI(registryResult, { onRenderError: (err, name) => { myErrorReporter.capture(err, { context: name }); }, }); | UIProviderOptions.onRenderError | packages/play-dom/src/json-render/types.ts:178 |
registryResult? | DefineRegistryResult | The result from defineRegistry — provides both the registry and the handlers factory. When provided, PlayRenderer wires setState and getState from the @xstate/store-backed StateStore into the handlers factory automatically. This is the preferred approach as it ensures actions always receive live setState and state bound to the current store. | - | packages/play-dom/src/types.ts:31 |
store? | StateStore | Optional external StateStore (e.g. from xstateStoreStateStore in @json-render/xstate). When provided, PlayRenderer operates in controlled mode — spec.state is ignored and this store is the single source of truth for UI state (form values, etc.). When omitted, a fresh @xstate/store atom is created internally per view transition, seeded from spec.state. | - | packages/play-dom/src/types.ts:41 |
validationFunctions? | Record<string, (value, args?) => boolean> | Custom validation functions for inline field validation. Each function receives (value, args?) and returns true (valid) or false (invalid). Functions are available to component implementations via ctx.ctx.validationFunctions and should be passed as customFunctions to runValidationCheck / runValidation from @json-render/core. Mirrors customFunctions in ValidationProvider from the framework renderers. The DOM renderer has no automatic ValidationProvider tree — validation must be invoked explicitly by component implementations. Example import { runValidationCheck } from "@json-render/core"; const mount = createPlayUI(registryResult, { validationFunctions: { isEven: (value) => typeof value === "number" && value % 2 === 0, phoneNumber: (value) => /^\+?[\d\s\-()]{7,}$/.test(String(value)), }, }); // Inside a ComponentFn: const MyField: ComponentFn<typeof catalog, "MyField"> = ({ ctx }) => { const result = runValidationCheck( { type: "isEven", message: "must be even" }, { value: someValue, stateModel: {}, customFunctions: ctx.ctx.validationFunctions }, ); // result.valid, result.message }; | UIProviderOptions.validationFunctions | packages/play-dom/src/json-render/types.ts:123 |