Variable: PlayRenderer

Documentation / @xmachines/play-solid / PlayRenderer

const PlayRenderer: Component<PlayRendererProps>;

Defined in: PlayRenderer.tsx:66

Main renderer component that subscribes to actor signals and renders UI

Architecture (per XMachines Play patterns):

• Subscribes to actor.currentView signal via TC39 Signal.subtle.Watcher
• Dynamically renders catalog components based on view.component string
• Forwards user events to actor via actor.send()
• SolidJS signal only for triggering renders, NOT business logic

Invariant: Actor Authority - Actor decides all state transitions via guards. Invariant: Passive Infrastructure - Component observes signals and sends events. Invariant: Signal-Only Reactivity - Business logic state lives in actor signals.

Example

import { PlayRenderer } from "@xmachines/play-solidjs";
import { definePlayer } from "@xmachines/play-xstate";

const actor = definePlayer({ machine, catalog })();
actor.start();

const components = {
  Dashboard: (props) => <div>User: {props.userId}</div>,
  LoginForm: (props) => (
    <form onSubmit={(e) => {
      e.preventDefault();
      props.send({ type: "auth.login", payload: {...} });
    }}>...</form>
  )
};

<PlayRenderer actor={actor} components={components} />

Param

Component props

Returns

SolidJS element rendering current view from actor

Remarks

Component lookup: Dynamically looks up component from components map using view.component string from actor.currentView signal.

Event forwarding: Injects send function as prop to components. Components call send(event) to forward intents to actor. Actor guards decide validity.

Error handling: If component not found in catalog, logs error and shows fallback. This indicates missing component registration, not runtime error.

Signal bridge: Uses one-shot re-watch pattern. TC39 Signal watchers stop watching after notification, so watcher.watch() must be called in microtask after getPending() to re-arm for next notification.

CRITICAL: Never call actor.send() during render - only in event handlers. Calling send during render causes infinite render loops.