@playfast/reform-remote 0.0.2 → 0.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@playfast/reform-remote",
   "playbook": "./playbook",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "description": "Run a reform scene's logic on the server and stream its rendered UI to a thin client over any duplex transport.",
   "keywords": [
@@ -28,7 +28,7 @@
     "./*": "./src/*.ts"
   },
   "files": [
-    "dist",
+    "src",
     "README.md"
   ],
   "scripts": {

package/src/client-keyed-slot.test.ts

@@ -0,0 +1,136 @@
+// @vitest-environment happy-dom
+import { act, createElement } from 'react'
+import { createRoot } from 'react-dom/client'
+import { expect, test } from 'vitest'
+import { Schema as S } from 'effect'
+import { Composition, slot, Ui, ui } from '@playfast/reform'
+import type { WireNode } from '@playfast/reform'
+import { remoteViews, renderWireTree, type RemoteViews } from './client'
+
+/**
+ * Regression for the KEYED-SLOT bug ("the sidebar showed every branch row under every repo
+ * section"). The client slot thunk renders ALL of a slot's wire children on EACH invocation and
+ * ignores call-site props — correct for a singleton slot rendered once, but wrong for a LIST
+ * slot a view invokes once PER ITEM (each section did `<slots.Row .../>` per branch), so every
+ * call rendered the whole list: N sections × M rows.
+ *
+ * The fix: a view passes `<slots.Row slotKey={id} />` and the thunk renders only the ONE wire
+ * child whose `key` matches (the per-item identity captured server-side from the React `key`).
+ * Omitting `slotKey` keeps the render-all-children behaviour (the singleton case). These tests
+ * pin both halves directly at the framework boundary, with NO app wiring.
+ */
+
+// A list item carrying a `label` so each rendered child is identifiable in the DOM.
+class ItemUi extends ui('Item', { props: S.Struct({ label: S.String }) }) {}
+class ItemComp extends Composition.make('Item', { title: 'Item', ui: ItemUi }) {}
+class ItemSlot extends slot('Item')<typeof ItemComp>() {}
+class ListUi extends ui('List')<{ props: { mode: string }; slots: { Item: ItemSlot } }>() {}
+
+const node = (over: Partial<WireNode> & Pick<WireNode, 'id' | 'name'>): WireNode => ({
+  parentId: null,
+  childIndex: 0,
+  slot: null,
+  key: null,
+  props: [],
+  ...over,
+})
+
+const ItemView = Ui.make(ItemUi, ({ label }) =>
+  createElement('span', { 'data-item': label }, label),
+)
+
+// Three keyed children (a/b/c) under one `Item` slot — the wire shape the server emits for a
+// list. `mode` switches the parent view between keyed selection and the legacy render-all.
+const tree: ReadonlyArray<WireNode> = [
+  node({ id: '0', name: 'List', props: [{ _tag: 'Data', name: 'mode', value: 'keyed' }] }),
+  node({
+    id: '0.Item.0',
+    name: 'Item',
+    parentId: '0',
+    slot: 'Item',
+    key: 'a',
+    props: [{ _tag: 'Data', name: 'label', value: 'a' }],
+  }),
+  node({
+    id: '0.Item.1',
+    name: 'Item',
+    parentId: '0',
+    slot: 'Item',
+    key: 'b',
+    props: [{ _tag: 'Data', name: 'label', value: 'b' }],
+  }),
+  node({
+    id: '0.Item.2',
+    name: 'Item',
+    parentId: '0',
+    slot: 'Item',
+    key: 'c',
+    props: [{ _tag: 'Data', name: 'label', value: 'c' }],
+  }),
+]
+
+type Contract = { List: typeof ListUi; Item: typeof ItemUi }
+
+const renderWith = async (
+  ListView: RemoteViews<Contract>['List'],
+  wire: ReadonlyArray<WireNode>,
+): Promise<HTMLDivElement> => {
+  const config = {
+    invoke: () => Promise.resolve(),
+    views: remoteViews<Contract>({ List: ListView, Item: ItemView }),
+  }
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+  const root = createRoot(container)
+  await act(async () => {
+    root.render(renderWireTree(wire, config))
+  })
+  return container
+}
+
+test('a keyed slot renders ONE matching child per call site, not the whole list', async () => {
+  // Two "sections", each invoking the SAME `Item` slot once with a different `slotKey` — the
+  // exact shape that duplicated rows. Each must render only its own child.
+  const ListView = Ui.make(ListUi, (_props, slots) =>
+    createElement(
+      'div',
+      null,
+      createElement('section', { 'data-section': 'one' }, createElement(slots.Item, { slotKey: 'a' })),
+      createElement('section', { 'data-section': 'two' }, createElement(slots.Item, { slotKey: 'b' })),
+    ),
+  )
+  const container = await renderWith(ListView, tree)
+
+  // Exactly two items rendered total — NOT 2 sections × 3 children = 6 (the bug).
+  expect(container.querySelectorAll('[data-item]').length).toBe(2)
+  // Each section shows ONLY its keyed child.
+  const one = container.querySelector('[data-section="one"]')
+  const two = container.querySelector('[data-section="two"]')
+  expect(one?.querySelectorAll('[data-item]').length).toBe(1)
+  expect(one?.querySelector('[data-item]')?.getAttribute('data-item')).toBe('a')
+  expect(two?.querySelector('[data-item]')?.getAttribute('data-item')).toBe('b')
+  // The unreferenced child 'c' is rendered nowhere.
+  expect(container.querySelector('[data-item="c"]')).toBeNull()
+})
+
+test('an un-keyed slot still renders ALL its children (singleton/back-compat path)', async () => {
+  // No `slotKey` → render every child of the slot, unchanged from before the keyed API.
+  const ListView = Ui.make(ListUi, (_props, slots) =>
+    createElement('div', null, createElement(slots.Item)),
+  )
+  const container = await renderWith(ListView, tree)
+
+  expect(container.querySelectorAll('[data-item]').length).toBe(3)
+  expect(
+    [...container.querySelectorAll('[data-item]')].map((el) => el.getAttribute('data-item')),
+  ).toEqual(['a', 'b', 'c'])
+})
+
+test('a keyed call with no matching child renders nothing (no fallback to the full list)', async () => {
+  const ListView = Ui.make(ListUi, (_props, slots) =>
+    createElement('div', null, createElement(slots.Item, { slotKey: 'missing' })),
+  )
+  const container = await renderWith(ListView, tree)
+
+  expect(container.querySelectorAll('[data-item]').length).toBe(0)
+})

package/src/client-remount.test.ts

@@ -0,0 +1,127 @@
+// @vitest-environment happy-dom
+import { act, createElement, useState } from 'react'
+import { useSyncExternalStore } from 'react'
+import { createRoot } from 'react-dom/client'
+import { expect, test } from 'vitest'
+import { Schema as S } from 'effect'
+import { Composition, slot, Ui, ui } from '@playfast/reform'
+import type { WireNode } from '@playfast/reform'
+import type { ServerMessage } from './transport'
+import { connect } from './transport'
+import { inMemoryTransportPair } from './memory'
+import { remoteViews } from './client'
+
+/**
+ * Regression for the slot-remount bug: a background patch that re-renders ONLY a parent node
+ * must NOT unmount + remount the parent's slot children. Before the fix, `renderWireTree`
+ * rebuilt each slot's component closure every render, so a parent rendering a child as
+ * `<slots.Child/>` handed React a NEW component type each frame — React then tore down the
+ * whole child subtree and rebuilt it, wiping every descendant view's local `useState` (in the
+ * app: the onboarding modal's open/step state snapped back, closing the modal on any unrelated
+ * background patch once server-initiated streaming started delivering them).
+ *
+ * This test renders the client into a REAL React root (static markup can't observe fiber
+ * preservation), captures the child view's mount-time `useState` id, sends a patch touching
+ * only the parent, and asserts the child id is unchanged — i.e. the child fiber survived.
+ */
+
+// A child whose CLIENT view owns local state. Each fresh mount picks the next mount id, so a
+// remount is observable as a changed id.
+class ChildUi extends ui('Child', { props: S.Struct({}) }) {}
+class ChildComp extends Composition.make('Child', { title: 'Child', ui: ChildUi }) {}
+class MainSlot extends slot('Main')<typeof ChildComp>() {}
+// A parent carrying a `count` prop (the thing a background patch bumps) and one slot child it
+// renders as `<slots.Main/>` — the component form that triggered the remount.
+class HostUi extends ui('Host')<{ props: { count: number }; slots: { Main: MainSlot } }>() {}
+
+const node = (over: Partial<WireNode> & Pick<WireNode, 'id' | 'name'>): WireNode => ({
+  parentId: null,
+  childIndex: 0,
+  slot: null,
+  key: null,
+  props: [],
+  ...over,
+})
+
+test('a background patch on the PARENT keeps its slot child mounted (local useState survives)', async () => {
+  const { server: serverTransport, client: clientTransport } = inMemoryTransportPair<
+    ServerMessage,
+    unknown
+  >()
+
+  const mounts = { n: 0 }
+  const ChildView = Ui.make(ChildUi, () => {
+    const [id] = useState(() => {
+      mounts.n += 1
+      return `mount-${mounts.n}`
+    })
+    return createElement('span', { 'data-child-id': id }, id)
+  })
+  const HostView = Ui.make(HostUi, ({ count }, slots) =>
+    createElement('div', { 'data-count': String(count) }, createElement(slots.Main)),
+  )
+
+  const client = connect({
+    transport: clientTransport,
+    views: remoteViews<{ Host: typeof HostUi; Child: typeof ChildUi }>({
+      Host: HostView,
+      Child: ChildView,
+    }),
+  })
+
+  const Root = (): ReturnType<typeof client.node> => {
+    useSyncExternalStore(client.subscribe, client.snapshot, client.snapshot)
+    return client.node()
+  }
+
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+  const root = createRoot(container)
+  try {
+    await act(async () => {
+      root.render(createElement(Root))
+    })
+
+    // First frame: a host (count 0) holding one slot child.
+    await act(async () => {
+      serverTransport.send({
+        _tag: 'Snapshot',
+        tree: [
+          node({ id: '0', name: 'Host', props: [{ _tag: 'Data', name: 'count', value: 0 }] }),
+          node({ id: '0.Main.0', name: 'Child', parentId: '0', slot: 'Main' }),
+        ],
+      })
+    })
+
+    expect(container.querySelector('[data-count]')?.getAttribute('data-count')).toBe('0')
+    const childIdBefore = container.querySelector('[data-child-id]')?.getAttribute('data-child-id')
+    expect(childIdBefore).toBe('mount-1')
+
+    // A background patch that touches ONLY the host (count 0 → 7). The child node is unchanged
+    // and not in the patch at all.
+    await act(async () => {
+      serverTransport.send({
+        _tag: 'Patches',
+        patches: [
+          {
+            _tag: 'Upsert',
+            node: node({ id: '0', name: 'Host', props: [{ _tag: 'Data', name: 'count', value: 7 }] }),
+          },
+        ],
+      })
+    })
+
+    // The parent re-rendered with the new count…
+    expect(container.querySelector('[data-count]')?.getAttribute('data-count')).toBe('7')
+    // …but the child was NOT remounted: same fiber, same mount id, and no second mount ran.
+    expect(container.querySelector('[data-child-id]')?.getAttribute('data-child-id')).toBe(
+      childIdBefore,
+    )
+    expect(mounts.n).toBe(1)
+  } finally {
+    await act(async () => {
+      root.unmount()
+    })
+    client.dispose()
+  }
+})

package/src/client.ts

@@ -0,0 +1,284 @@
+import { createElement, Fragment, type ReactNode, useRef } from 'react'
+import { Schema } from 'effect'
+import {
+  type MadeView,
+  Ui,
+  type UiClass,
+  UiViewContract,
+  Wire,
+  type WireNode,
+  type WireTree,
+} from '@playfast/reform'
+
+// A `Ui.make` view of any contract. The `any` is the same variance escape the core
+// uses for `Schema<any, any>`: a heterogeneous list of contract-typed views cannot
+// share one element type (function params are contravariant in the contract), and the
+// real contract is recovered at runtime from the view's carried brand.
+type AnyMadeView = MadeView<any>
+
+/**
+ * The client side of the remote transport: fold the server's patches with
+ * `Wire.apply`, then render the resulting `WireTree` with locally registered
+ * presentations. The presentations are the SAME `Ui.make` views the local
+ * `@playfast/react` renderer uses — one presentation, many consumers (REMOTE_UI.md):
+ *
+ *  - Each wire node's view runs as a stable React COMPONENT, so a view body's own
+ *    hooks (`useState`, effects) work exactly as under `@playfast/react`.
+ *  - Slots are COMPONENTS that render that slot's wire children, so a view's
+ *    `<slots.Foo/>` / `createElement(slots.Foo, props)` works unchanged (the
+ *    per-slot props were captured server-side; the client component ignores them).
+ *  - Data props are DECODED through the contract's own props schema — the inverse of
+ *    the server's `Schema.encodeUnknown` — so `Option`/`Date`/branded props arrive as
+ *    real instances, not their `{_tag,value}` wire shape.
+ *
+ * A client view is authored with `Ui.make(SomeUi, …)` — exactly like a local view —
+ * and registered with `remoteViews<AppContract>({ Some: SomeView, … })`. There is no
+ * separate `remoteView` call: a `Ui.make` view carries its own contract, so `remoteViews`
+ * recovers each view's wire name + props schema straight from it.
+ */
+
+/**
+ * The dynamic presentation shape the renderer calls — slots and events erased to
+ * their runtime form. Views are authored with `Ui.make` (contract-typed); this is
+ * only the internal shape `renderWireTree` invokes them through.
+ */
+export type RemoteView = (
+  props: Record<string, unknown>,
+  // A slot thunk optionally takes `{ slotKey }` to select a single keyed child (see the keyed-
+  // slot handling in `WireNodeView`); omitting it renders all of the slot's children.
+  slots: Record<string, (slotProps?: { readonly slotKey?: string }) => ReactNode>,
+  events: Record<string, (payload: unknown) => void>,
+) => ReactNode
+
+/** A contract-bound view paired with the contract name the renderer looks it up by, and
+ *  (for a WIRED contract) the props schema used to DECODE wire props back into their
+ *  decoded domain types — the symmetric inverse of the server's `Schema.encodeUnknown`.
+ *  Without it, an `Option`/`Date`/branded prop would reach the view as its raw encoded
+ *  shape (e.g. `{_tag:'Some',value}`) instead of a real `Option`. */
+export interface RegisteredRemoteView {
+  readonly name: string
+  readonly view: RemoteView
+  readonly propsSchema?: Schema.Schema<Record<string, unknown>, unknown>
+}
+
+/** The by-name presentation record the renderer walks — the unbranded runtime shape behind
+ *  a `RemoteViewSet`. Internal: it is NOT part of the public API, so a raw record of this
+ *  shape can never be handed to `connect`/`renderWireTree`/`<RemoteUI>` (those demand the
+ *  branded `RemoteViewSet<C>`). A `RemoteViewSet<C>` is structurally `ViewRegistry & brand`,
+ *  so it always widens back to this when the renderer needs the plain lookup. */
+type ViewRegistry = Readonly<Record<string, RegisteredRemoteView>>
+
+/** Phantom brand carrying the server `RemoteContract` a view set was checked against. Typed
+ *  as a function OF `C` (never called) so the contract appears in the type WITHOUT needing a
+ *  runtime value of `C` — `remoteViews<C>(views)` can brand the set cast-free even though the
+ *  client imports the contract as a TYPE only (trpc-style), never as a value. */
+const ViewSetContract: unique symbol = Symbol.for('reform-remote/view-set-contract')
+
+/**
+ * The presentation set the client renders by contract name — the `ViewRegistry` the renderer
+ * walks, BRANDED with the server `RemoteContract` `C` it was checked against. The brand is
+ * what makes the whole client chain typesafe: `connect`, `renderWireTree`, and `<RemoteUI>`
+ * accept only a `RemoteViewSet` *produced by* `remoteViews<C>(…)` — never an arbitrary
+ * `Record`, which lacks the brand — so a view set cannot reach the renderer without having
+ * been type-checked to implement exactly the server's shape. `C` is recovered by inference at
+ * each consumer, so passing a `RemoteViewSet<AppContract>` types the whole chain to that app.
+ *
+ * No default for `C`: a `RemoteViewSet` is ALWAYS bound to a concrete contract (inferred from
+ * `remoteViews<AppContract>(…)`), never silently widened to the `RemoteContract` bound — that
+ * is what keeps the safety end to end.
+ */
+export type RemoteViewSet<C extends RemoteContract> = ViewRegistry & {
+  readonly [ViewSetContract]: (contract: C) => void
+}
+
+/**
+ * The shared "shape" the server publishes and the client implements — the trpc `AppRouter`
+ * analog. It is a registry of the server's UI contracts (the `ui(...)` classes the scene's
+ * wire tree can emit) keyed by a label. The SERVER declares it ONCE (`remoteContract({…})`)
+ * and exports `typeof` it; the CLIENT imports THAT TYPE and `remoteViews<AppContract>(…)`
+ * checks its view set against it, so the client is forced to implement exactly the server's
+ * views. The wire name + props schema are read from each view's own contract at runtime, so
+ * the label is only the type-level join key — the contract is never needed as a value here.
+ *
+ * `UiClass<any>` is the registry's *upper bound*; the precise per-contract types are
+ * preserved by inferring `C` narrowly at the `remoteContract` declaration site (so
+ * `Ui.Contract<C[K]>` recovers the real contract, not `any`).
+ */
+export type RemoteContract = Readonly<Record<string, UiClass<any>>>
+
+/**
+ * Declare a server's `RemoteContract` with its precise key/contract types inferred (the
+ * `const` type parameter keeps each value's specific `UiClass<…>` instead of widening to
+ * the `UiClass<any>` bound). Define it ONCE next to the scene and export `typeof` it as the
+ * UI requirements the client implements against:
+ *
+ *   export const AppContract = remoteContract({ Shell: ShellUi, Sidebar: SidebarUi })
+ *   export type AppContract = typeof AppContract
+ *
+ * The client then imports only the TYPE and implements it:
+ *
+ *   import type { AppContract } from '…/app-contract'
+ *   export const views = remoteViews<AppContract>({ Shell: ShellView, Sidebar: SidebarView })
+ */
+export const remoteContract = <const C extends RemoteContract>(contract: C): C => contract
+
+/**
+ * The client view set a `RemoteContract` demands: exactly one `Ui.make` view per contract,
+ * each typed to THAT contract (`MadeView<Ui.Contract<C[K]>>`). A missing key, an extra key,
+ * or a view authored for the wrong contract is a COMPILE error — the client cannot connect
+ * to the server without implementing precisely its shape, the same guarantee trpc gives a
+ * client built from `AppRouter`.
+ */
+export type RemoteViews<C extends RemoteContract> = {
+  readonly [K in keyof C]: MadeView<Ui.Contract<C[K]>>
+}
+
+/**
+ * Implement a server's UI shape: `remoteViews<AppContract>({ … })` takes the server's
+ * `RemoteContract` as a TYPE PARAMETER (the client imports only `typeof AppContract`, never a
+ * value — trpc-style) and a set of `Ui.make` views type-checked to implement EXACTLY that
+ * contract. Each view carries its own contract (`Ui.make(SomeUi, …)`), so the wire name and
+ * props schema are recovered from the view itself — a renamed/retyped contract can never
+ * drift from its presentation, and the SAME view authored for the local renderer is reused.
+ * The result is a `RemoteViewSet<C>` (the branded set `connect`/`renderWireTree`/`<RemoteUI>`
+ * accept); an unbranded `Record` can never be substituted.
+ */
+export const remoteViews = <C extends RemoteContract>(views: RemoteViews<C>): RemoteViewSet<C> => {
+  const list: ReadonlyArray<AnyMadeView> = Object.values(views)
+  const byName: ViewRegistry = Object.fromEntries(
+    list.map((view): readonly [string, RegisteredRemoteView] => {
+      const viewContract = view[UiViewContract]
+      const propsSchema = viewContract.manifest.props
+      // `Node` is `ReactNode` and `ViewImpl`'s params widen to the dynamic shape the
+      // renderer calls, so the contract-typed view IS a `RemoteView` — no cast.
+      const entry: RegisteredRemoteView = {
+        name: viewContract.manifest.name,
+        view,
+        ...(propsSchema !== undefined ? { propsSchema } : {}),
+      }
+      return [entry.name, entry]
+    }),
+  )
+  // Brand the record with the contract `C` it was checked against. The brand is a phantom
+  // function OF `C` that is never called, so it needs NO runtime value of `C` — the set is
+  // built cast-free even though the client only has the contract as a type. The renderer
+  // reads the set by string key; the brand is never read at runtime.
+  return Object.assign(byName, { [ViewSetContract]: (_contract: C): void => {} })
+}
+
+export interface ClientConfig<C extends RemoteContract> {
+  /** Presentation (+ optional props schema) per contract name — a contract-checked set. */
+  readonly views: RemoteViewSet<C>
+  /** Deliver a trigger invocation to the server (the transport's send). */
+  readonly invoke: (handle: string, payload: unknown) => void
+}
+
+/** What the renderer actually walks: the unbranded `ViewRegistry` + `invoke`. Any
+ *  `ClientConfig<C>` widens to this (its `RemoteViewSet<C>` views widen to `ViewRegistry`),
+ *  so the recursive renderer is contract-agnostic — the contract check already happened at
+ *  `remoteViews`. Internal: callers only ever supply a `ClientConfig<C>`. */
+interface RenderConfig {
+  readonly views: ViewRegistry
+  readonly invoke: (handle: string, payload: unknown) => void
+}
+
+/**
+ * A stable top-level component for one wire node — stable identity so React keeps a
+ * view's local state across frames (the `node.id` keys it). It decodes props, builds
+ * slot components, and runs the registered view INSIDE this component so the view's
+ * own hooks get a fiber. A child slot renders its wire children as nested `WireNodeView`s.
+ */
+const WireNodeView = ({
+  node,
+  tree,
+  config,
+}: {
+  readonly node: WireNode
+  readonly tree: WireTree
+  readonly config: RenderConfig
+}): ReactNode => {
+  // The latest render inputs, for the stable slot closures below to read. Mutated every
+  // render so a slot always renders against the current tree, even though its function
+  // identity never changes.
+  const latest = useRef({ node, tree, config })
+  latest.current = { node, tree, config }
+  // Slot components cached by name across renders. CRITICAL for state preservation: a parent
+  // view that renders a slot as `<slots.Foo/>` (the Ui.make convention) passes the slot value
+  // as the element TYPE — if that value were a fresh closure each render (as it was before),
+  // React would see a new component type every frame and UNMOUNT+REMOUNT the whole slot
+  // subtree, resetting every descendant view's local hook state (e.g. a modal's open/step
+  // `useState` would snap back, closing the modal on any unrelated background patch). Caching
+  // the closure by slot name gives `<slots.Foo/>` a stable type, so React reconciles the slot's
+  // children by id instead of remounting them. The closure reads `latest` so it still renders
+  // the current tree.
+  const slotCache = useRef<Record<string, () => ReactNode>>({})
+
+  const registered = config.views[node.name]
+  if (registered === undefined) return null
+
+  const encoded: Record<string, unknown> = {}
+  const events: Record<string, (payload: unknown) => void> = {}
+  for (const prop of node.props) {
+    if (prop._tag === 'Data') encoded[prop.name] = prop.value
+    else events[prop.name] = (payload) => config.invoke(prop.handle, payload)
+  }
+  const props: Record<string, unknown> =
+    registered.propsSchema === undefined
+      ? encoded
+      : Schema.decodeUnknownSync(registered.propsSchema)(encoded)
+
+  const children = Wire.childrenOf(tree, node.id)
+  const slots: Record<string, (slotProps?: { readonly slotKey?: string }) => ReactNode> = {}
+  for (const slotName of new Set(children.map((child) => child.slot))) {
+    if (slotName === null) continue
+    // A slot is a COMPONENT rendering that slot's wire children — usable as `<slots.Foo/>`
+    // (Ui.make convention) or `slots.Foo()` (thunk convention). The function is cached so its
+    // identity is STABLE across renders (see `slotCache` above); it reads `latest.current` so
+    // each invocation renders against the current tree/config.
+    //
+    // KEYED SLOTS: when the caller passes `slotKey` (`<slots.Row slotKey={id} />`), render only
+    // the ONE wire child whose `key` matches — the per-item identity the server captured from
+    // the parent's React `key` (see WireNode.key). This is what lets a LIST slot be invoked once
+    // per item without each call rendering the WHOLE list (the duplicate-rows bug). With NO
+    // `slotKey` the behaviour is unchanged: render every child of the slot (correct for a
+    // singleton slot rendered once, e.g. `<slots.Create/>`).
+    const cached = slotCache.current[slotName]
+    const stable =
+      cached ??
+      ((slotProps?: { readonly slotKey?: string }): ReactNode => {
+        const { node: currentNode, tree: currentTree, config: currentConfig } = latest.current
+        const requestedKey = slotProps?.slotKey
+        return createElement(
+          Fragment,
+          null,
+          ...Wire.childrenOf(currentTree, currentNode.id)
+            .filter((child) => child.slot === slotName)
+            .filter((child) => requestedKey === undefined || child.key === requestedKey)
+            .map((child) =>
+              createElement(WireNodeView, {
+                key: child.id,
+                node: child,
+                tree: currentTree,
+                config: currentConfig,
+              }),
+            ),
+        )
+      })
+    slotCache.current[slotName] = stable
+    slots[slotName] = stable
+  }
+
+  return registered.view(props, slots, events)
+}
+
+export const renderWireTree = <C extends RemoteContract>(
+  tree: WireTree,
+  config: ClientConfig<C>,
+): ReactNode =>
+  createElement(
+    Fragment,
+    null,
+    ...Wire.roots(tree).map((node) =>
+      createElement(WireNodeView, { key: node.id, node, tree, config }),
+    ),
+  )