@xmachines/docs 1.0.0-beta.10

package/api/@xmachines/play-solid/variables/PlayRenderer.md

@@ -0,0 +1,70 @@
+[Documentation](../../../README.md) / [@xmachines/play-solid](../README.md) / PlayRenderer
+
+# Variable: PlayRenderer
+
+```ts
+const PlayRenderer: Component<PlayRendererProps>;
+```
+
+Defined in: [PlayRenderer.tsx:66](https://gitlab.com/xmachin-es/xmachines-js/-/blob/00a28432ed57807112288436d1ae4387d9f06919/packages/play-solid/src/PlayRenderer.tsx#L66)
+
+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
+
+```typescript
+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.