@playfast/reform-remote 0.0.2 → 0.0.4

package/src/transport.test.ts

@@ -0,0 +1,205 @@
+import { createElement, Fragment, type ReactNode } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { expect, test, vi } from 'vitest'
+import { Schema as S } from 'effect'
+import { Ui, ui } from '@playfast/reform'
+import type { InvokeMessage, ServerMessage } from './transport'
+import { connect, serve } from './transport'
+import { inMemoryTransportPair } from './memory'
+import { remoteViews } from './client'
+import { asyncCounterScene, CounterUi, counterScene } from './fixtures'
+
+// The client renders views as React components (so view-body hooks work), so a test
+// must actually RENDER `client.node()` to run the views — `draw` forces that pass
+// (node, no DOM needed) and the probe captures what each view received.
+const draw = (node: ReactNode): void => void renderToStaticMarkup(createElement(Fragment, null, node))
+
+// A presentation that records the props/events handed to it, so a test can read
+// what the client reconstructed and fire the callbacks back at the server. It is a
+// regular `Ui.make` view (the only client authoring form), bound to the contract.
+interface Probe {
+  props?: Record<string, unknown>
+  // The counter contract's only event, `bump`, takes `{ by: number }`; typing the
+  // record to that payload lets the strongly-typed `Ui.make` events assign in.
+  events?: Record<string, (payload: { by: number }) => void>
+}
+const probeView = (probe: Probe) =>
+  Ui.make(CounterUi, (props, _slots, events) => {
+    probe.props = props
+    probe.events = events
+    return null
+  })
+
+test('remote UI over a transport: client renders server state and drives it back', async () => {
+  const { server: serverTransport, client: clientTransport } = inMemoryTransportPair<
+    ServerMessage,
+    InvokeMessage
+  >()
+
+  const probe: Probe = {}
+  const client = connect({
+    transport: clientTransport,
+    views: remoteViews<{ Counter: typeof CounterUi }>({ Counter: probeView(probe) }),
+  })
+  const server = serve({ scene: counterScene(), transport: serverTransport })
+  try {
+    await server.start()
+    draw(client.node())
+    expect(probe.props).toEqual({ count: 0 })
+
+    probe.events?.['bump']?.({ by: 6 })
+    await vi.waitFor(() => {
+      draw(client.node())
+      expect(probe.props).toEqual({ count: 6 })
+    })
+  } finally {
+    client.dispose()
+    await server.dispose()
+  }
+})
+
+test('server-initiated state change streams to the client with NO invoke (background load)', async () => {
+  const { server: serverTransport, client: clientTransport } = inMemoryTransportPair<
+    ServerMessage,
+    InvokeMessage
+  >()
+
+  // Count outbound client→server messages: the whole point is that the new frame arrives
+  // without the client invoking anything. A non-zero count would mean the test cheated.
+  const invokes = { count: 0 }
+  const countingClientTransport = {
+    ...clientTransport,
+    send: (message: InvokeMessage) => {
+      invokes.count += 1
+      clientTransport.send(message)
+    },
+  }
+
+  const probe: Probe = {}
+  const client = connect({
+    transport: countingClientTransport,
+    views: remoteViews<{ Counter: typeof CounterUi }>({ Counter: probeView(probe) }),
+  })
+  // The scene's procedure sleeps, THEN bumps to 7 — so the snapshot is count:0 and the
+  // change can only reach the client via a server-pushed diff.
+  const server = serve({ scene: asyncCounterScene('30 millis'), transport: serverTransport })
+  try {
+    await server.start()
+    draw(client.node())
+    expect(probe.props).toEqual({ count: 0 })
+
+    await vi.waitFor(() => {
+      draw(client.node())
+      expect(probe.props).toEqual({ count: 7 })
+    })
+    // The client never sent a single Invoke — the frame was entirely server-initiated.
+    expect(invokes.count).toBe(0)
+  } finally {
+    client.dispose()
+    await server.dispose()
+  }
+})
+
+test('a fresh Snapshot replaces the client tree — stale nodes are dropped (reconnect semantics)', () => {
+  const { server: serverTransport, client: clientTransport } = inMemoryTransportPair<
+    ServerMessage,
+    unknown
+  >()
+
+  const rendered: Array<string> = []
+  class AUi extends ui('A', { props: S.Struct({}) }) {}
+  class BUi extends ui('B', { props: S.Struct({}) }) {}
+  const client = connect({
+    transport: clientTransport,
+    views: remoteViews<{ A: typeof AUi; B: typeof BUi }>({
+      A: Ui.make(AUi, () => (rendered.push('A'), null)),
+      B: Ui.make(BUi, () => (rendered.push('B'), null)),
+    }),
+  })
+
+  const node = (id: string, name: string) => ({
+    id,
+    name,
+    parentId: null,
+    childIndex: 0,
+    slot: null,
+    key: null,
+    props: [],
+  })
+
+  // First session: two roots.
+  serverTransport.send({ _tag: 'Snapshot', tree: [node('a', 'A'), node('b', 'B')] })
+  draw(client.node())
+  expect(rendered).toEqual(['A', 'B'])
+
+  // Reconnect: a fresh snapshot with only one root must drop the stale 'B'.
+  rendered.length = 0
+  serverTransport.send({ _tag: 'Snapshot', tree: [node('a', 'A')] })
+  draw(client.node())
+  expect(rendered).toEqual(['A'])
+
+  client.dispose()
+})
+
+test('two clients each get their own server runtime — state is isolated', async () => {
+  const one = inMemoryTransportPair<ServerMessage, InvokeMessage>()
+  const two = inMemoryTransportPair<ServerMessage, InvokeMessage>()
+
+  const probeOne: Probe = {}
+  const probeTwo: Probe = {}
+  const clientOne = connect({
+    transport: one.client,
+    views: remoteViews<{ Counter: typeof CounterUi }>({ Counter: probeView(probeOne) }),
+  })
+  const clientTwo = connect({
+    transport: two.client,
+    views: remoteViews<{ Counter: typeof CounterUi }>({ Counter: probeView(probeTwo) }),
+  })
+  const serverOne = serve({ scene: counterScene(), transport: one.server })
+  const serverTwo = serve({ scene: counterScene(), transport: two.server })
+  try {
+    await serverOne.start()
+    await serverTwo.start()
+    // Render once so each probe captures its event callbacks.
+    draw(clientOne.node())
+    draw(clientTwo.node())
+
+    probeOne.events?.['bump']?.({ by: 9 })
+    await vi.waitFor(() => {
+      draw(clientOne.node())
+      expect(probeOne.props).toEqual({ count: 9 })
+    })
+
+    // The second client's runtime never saw that bump.
+    draw(clientTwo.node())
+    expect(probeTwo.props).toEqual({ count: 0 })
+  } finally {
+    clientOne.dispose()
+    clientTwo.dispose()
+    await serverOne.dispose()
+    await serverTwo.dispose()
+  }
+})
+
+test('dispose detaches both ends: a post-dispose invoke no longer reaches the server', async () => {
+  const { server: serverTransport, client: clientTransport } = inMemoryTransportPair<
+    ServerMessage,
+    InvokeMessage
+  >()
+
+  const probe: Probe = {}
+  const client = connect({
+    transport: clientTransport,
+    views: remoteViews<{ Counter: typeof CounterUi }>({ Counter: probeView(probe) }),
+  })
+  const server = serve({ scene: counterScene(), transport: serverTransport })
+  await server.start()
+  draw(client.node())
+
+  await server.dispose()
+  client.dispose()
+
+  // After dispose the server's onMessage handler is detached; firing the stale
+  // callback is a no-op rather than a throw.
+  expect(() => probe.events?.['bump']?.({ by: 1 })).not.toThrow()
+})

package/src/transport.ts

@@ -0,0 +1,192 @@
+import { Match } from 'effect'
+import type { ReactNode } from 'react'
+import { Wire, type WirePatch, type WireTree } from '@playfast/reform'
+import type { Scene } from '@playfast/reform'
+import { makeRemoteServer } from './server'
+import { renderWireTree, type RemoteContract, type RemoteViewSet } from './client'
+
+/**
+ * Binds the server driver and the client renderer to a transport. The wire
+ * carries only serializable data — patches one way, trigger invocations the
+ * other — so any duplex channel (WebSocket, postMessage, in-memory) works; a
+ * concrete adapter just implements `RemoteTransport`. See REMOTE_UI.md §5.
+ */
+
+/**
+ * Server → client: the full current tree, replacing whatever the client holds.
+ * The first frame of every (re)connection — a fresh server runtime diffs from
+ * empty, so it can only *add* nodes; a snapshot is what lets a reconnecting
+ * client drop the stale tree it accumulated on the previous socket.
+ */
+export interface SnapshotMessage {
+  readonly _tag: 'Snapshot'
+  readonly tree: WireTree
+}
+
+/** Server → client: a batch of tree patches to fold with `Wire.apply`. */
+export interface PatchesMessage {
+  readonly _tag: 'Patches'
+  readonly patches: ReadonlyArray<WirePatch>
+}
+
+/** Everything the server sends the client: a fresh snapshot or incremental patches. */
+export type ServerMessage = SnapshotMessage | PatchesMessage
+
+/** Client → server: fire the trigger behind `handle` with an encoded payload. */
+export interface InvokeMessage {
+  readonly _tag: 'Invoke'
+  readonly handle: string
+  readonly payload: unknown
+}
+
+/** A duplex channel: send `Out`, receive `In`. */
+export interface RemoteTransport<Out, In> {
+  readonly send: (message: Out) => void
+  readonly onMessage: (handler: (message: In) => void) => () => void
+}
+
+export interface ServerBinding {
+  /** Render the first frame and push it. Call once the client is connected. */
+  readonly start: () => Promise<void>
+  readonly dispose: () => Promise<void>
+}
+
+/**
+ * Debounce window for SERVER-initiated frame pushes (background loads, scheduler ticks).
+ * Long enough that the engine drain has folded the change into state and a burst of facts
+ * coalesces into one render; short enough to feel live. Client invokes don't wait on this —
+ * they push immediately.
+ */
+const BACKGROUND_FLUSH_MS = 16
+
+/** Options for {@link serve} — a single named object so every reform-remote binding shares one shape. */
+export interface ServeOptions {
+  readonly scene: Scene
+  readonly transport: RemoteTransport<ServerMessage, InvokeMessage>
+}
+
+export const serve = (options: ServeOptions): ServerBinding => {
+  const { scene, transport } = options
+  const server = makeRemoteServer(scene)
+  // The first frame is a full snapshot (replace); every frame after is the diff since the
+  // last (apply). Both keep the server's `frame` baseline in step, so the diffs always
+  // reference what the client actually holds. Diffs are emitted both after a client invoke
+  // AND whenever the server's OWN state changes (a background load resolving, a scheduler
+  // tick) — without the latter, anything the user didn't directly trigger would never reach
+  // the client (it would sit on the snapshot's loading state forever).
+  //
+  // `started` gates pushes until the opening snapshot is sent: a diff that raced ahead of
+  // the snapshot would reference a tree the client has not received.
+  //
+  // `push` is a COALESCING single-flight render: at most one `renderDiff` runs at a time
+  // (concurrent ones would interleave the sink captures and corrupt the frame baseline). If
+  // a change arrives WHILE a render is in flight — e.g. an async procedure folds its result
+  // mid-render — `dirty` is set and a follow-up render runs when the current one settles, so
+  // a late state change is never dropped. Both a client invoke and a server-side change
+  // (the bus subscriber) funnel through here, so there is exactly one push path.
+  const started = { value: false }
+  const flight = { promise: null as Promise<void> | null, dirty: false }
+  const push = (): Promise<void> => {
+    if (!started.value) return Promise.resolve()
+    if (flight.promise !== null) {
+      flight.dirty = true
+      return flight.promise
+    }
+    const run = (async (): Promise<void> => {
+      const patches = await server.renderDiff()
+      if (patches.length > 0) transport.send({ _tag: 'Patches', patches })
+    })().finally(() => {
+      flight.promise = null
+      if (flight.dirty) {
+        flight.dirty = false
+        void push()
+      }
+    })
+    flight.promise = run
+    return run
+  }
+  // Server-initiated changes are flushed on a short DEBOUNCE rather than synchronously: it
+  // coalesces a burst (a procedure that dispatches several facts) into one render, and the
+  // delay lets the drain fold the change into state before we read it — so the diff reflects
+  // the settled result, and the background flush never races the synchronous invoke push
+  // above. A client invoke still pushes immediately (its own settle path), so user actions
+  // stay snappy; this path only carries updates no interaction triggered.
+  const debounce = { handle: null as ReturnType<typeof setTimeout> | null }
+  const scheduleFlush = (): void => {
+    if (!started.value || debounce.handle !== null) return
+    debounce.handle = setTimeout(() => {
+      debounce.handle = null
+      void push()
+    }, BACKGROUND_FLUSH_MS)
+  }
+  const start = async (): Promise<void> => {
+    const tree = await server.render()
+    transport.send({ _tag: 'Snapshot', tree })
+    started.value = true
+    // Flush anything that changed during the (async) opening render window.
+    scheduleFlush()
+  }
+  const off = transport.onMessage((message) => {
+    void server.invoke(message.handle, message.payload).then(push)
+  })
+  const offChange = server.subscribe(scheduleFlush)
+  return {
+    start,
+    dispose: async (): Promise<void> => {
+      off()
+      offChange()
+      if (debounce.handle !== null) clearTimeout(debounce.handle)
+      await server.dispose()
+    },
+  }
+}
+
+export interface ClientBinding {
+  /** The current rendered node — re-read on each `subscribe` notification. */
+  readonly node: () => ReactNode
+  /** Notified whenever applied patches change the tree. */
+  readonly subscribe: (listener: () => void) => () => void
+  /**
+   * The current wire tree — a stable reference that changes only when a frame is
+   * applied, so it is a valid `useSyncExternalStore` snapshot (the React binding
+   * builds on this).
+   */
+  readonly snapshot: () => WireTree
+  readonly dispose: () => void
+}
+
+/** Options for {@link connect} — a single named object, mirroring {@link ServeOptions}. */
+export interface ConnectOptions<C extends RemoteContract> {
+  readonly transport: RemoteTransport<InvokeMessage, ServerMessage>
+  readonly views: RemoteViewSet<C>
+}
+
+export const connect = <C extends RemoteContract>(options: ConnectOptions<C>): ClientBinding => {
+  const { transport, views } = options
+  const state: { tree: WireTree } = { tree: [] }
+  const listeners = new Set<() => void>()
+  const config = {
+    views,
+    invoke: (handle: string, payload: unknown): void =>
+      transport.send({ _tag: 'Invoke', handle, payload }),
+  }
+  const off = transport.onMessage((message) => {
+    // A snapshot replaces the tree wholesale (a fresh or reconnected session);
+    // patches fold into it. So a reconnect re-syncs without leaking stale nodes.
+    state.tree = Match.value(message).pipe(
+      Match.tag('Snapshot', ({ tree }) => tree),
+      Match.tag('Patches', ({ patches }) => Wire.apply(state.tree, patches)),
+      Match.exhaustive,
+    )
+    for (const listener of listeners) listener()
+  })
+  return {
+    node: () => renderWireTree(state.tree, config),
+    subscribe: (listener) => {
+      listeners.add(listener)
+      return () => void listeners.delete(listener)
+    },
+    snapshot: () => state.tree,
+    dispose: off,
+  }
+}

package/dist/client.d.ts

@@ -1,127 +0,0 @@
-import { type ReactNode } from 'react';
-import { Schema } from 'effect';
-import { type MadeView, Ui, type UiClass, type WireTree } from '@playfast/reform';
-/**
- * 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>, 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. */
-declare const ViewSetContract: unique symbol;
-/**
- * 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 declare const remoteContract: <const C extends RemoteContract>(contract: C) => C;
-/**
- * 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 declare const remoteViews: <C extends RemoteContract>(views: RemoteViews<C>) => RemoteViewSet<C>;
-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;
-}
-export declare const renderWireTree: <C extends RemoteContract>(tree: WireTree, config: ClientConfig<C>) => ReactNode;
-export {};
-//# sourceMappingURL=client.d.ts.map

package/dist/client.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,SAAS,EAAU,MAAM,OAAO,CAAA;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAC/B,OAAO,EACL,KAAK,QAAQ,EACb,EAAE,EACF,KAAK,OAAO,EAIZ,KAAK,QAAQ,EACd,MAAM,kBAAkB,CAAA;AAQzB;;;;;;;;;;;;;;;;;;;GAmBG;AAEH;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,CACvB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAG9B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,EAAE;IAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,KAAK,SAAS,CAAC,EAC/E,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC,KAC/C,SAAS,CAAA;AAEd;;;;qEAIqE;AACrE,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAA;IACzB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,CAAA;CACvE;AAED;;;;iFAIiF;AACjF,KAAK,YAAY,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC,CAAA;AAElE;;;iFAGiF;AACjF,QAAA,MAAM,eAAe,EAAE,OAAO,MAAsD,CAAA;AAEpF;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,cAAc,IAAI,YAAY,GAAG;IACnE,QAAQ,CAAC,CAAC,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,IAAI,CAAA;CAClD,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;AAEnE;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc,GAAI,KAAK,CAAC,CAAC,SAAS,cAAc,EAAE,UAAU,CAAC,KAAG,CAAa,CAAA;AAE1F;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,cAAc,IAAI;IAClD,QAAQ,EAAE,CAAC,IAAI,MAAM,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACrD,CAAA;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,cAAc,EAAE,OAAO,WAAW,CAAC,CAAC,CAAC,KAAG,aAAa,CAAC,CAAC,CAqB5F,CAAA;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,cAAc;IACpD,yFAAyF;IACzF,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAA;IAChC,yEAAyE;IACzE,QAAQ,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CAC5D;AAoGD,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,cAAc,EACrD,MAAM,QAAQ,EACd,QAAQ,YAAY,CAAC,CAAC,CAAC,KACtB,SAOA,CAAA"}

package/dist/client.js

@@ -1,127 +0,0 @@
-import { createElement, Fragment, useRef } from 'react';
-import { Schema } from 'effect';
-import { Ui, UiViewContract, Wire, } from '@playfast/reform';
-/** 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 = Symbol.for('reform-remote/view-set-contract');
-/**
- * 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 = (contract) => contract;
-/**
- * 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 = (views) => {
-    const list = Object.values(views);
-    const byName = Object.fromEntries(list.map((view) => {
-        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 = {
-            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) => { } });
-};
-/**
- * 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, }) => {
-    // 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({});
-    const registered = config.views[node.name];
-    if (registered === undefined)
-        return null;
-    const encoded = {};
-    const events = {};
-    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 = registered.propsSchema === undefined
-        ? encoded
-        : Schema.decodeUnknownSync(registered.propsSchema)(encoded);
-    const children = Wire.childrenOf(tree, node.id);
-    const slots = {};
-    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) => {
-                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 = (tree, config) => createElement(Fragment, null, ...Wire.roots(tree).map((node) => createElement(WireNodeView, { key: node.id, node, tree, config })));
-//# sourceMappingURL=client.js.map

package/dist/client.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"client.js","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAkB,MAAM,EAAE,MAAM,OAAO,CAAA;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAC/B,OAAO,EAEL,EAAE,EAEF,cAAc,EACd,IAAI,GAGL,MAAM,kBAAkB,CAAA;AA4DzB;;;iFAGiF;AACjF,MAAM,eAAe,GAAkB,MAAM,CAAC,GAAG,CAAC,iCAAiC,CAAC,CAAA;AAkCpF;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAiC,QAAW,EAAK,EAAE,CAAC,QAAQ,CAAA;AAa1F;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAA2B,KAAqB,EAAoB,EAAE;IAC/F,MAAM,IAAI,GAA+B,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IAC7D,MAAM,MAAM,GAAiB,MAAM,CAAC,WAAW,CAC7C,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAA2C,EAAE;QACzD,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,CAAA;QACzC,MAAM,WAAW,GAAG,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAA;QAC/C,+EAA+E;QAC/E,0EAA0E;QAC1E,MAAM,KAAK,GAAyB;YAClC,IAAI,EAAE,YAAY,CAAC,QAAQ,CAAC,IAAI;YAChC,IAAI;YACJ,GAAG,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;SACtD,CAAA;QACD,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;IAC5B,CAAC,CAAC,CACH,CAAA;IACD,wFAAwF;IACxF,yFAAyF;IACzF,uFAAuF;IACvF,mEAAmE;IACnE,OAAO,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,eAAe,CAAC,EAAE,CAAC,SAAY,EAAQ,EAAE,GAAE,CAAC,EAAE,CAAC,CAAA;AACjF,CAAC,CAAA;AAkBD;;;;;GAKG;AACH,MAAM,YAAY,GAAG,CAAC,EACpB,IAAI,EACJ,IAAI,EACJ,MAAM,GAKP,EAAa,EAAE;IACd,sFAAsF;IACtF,qFAAqF;IACrF,0BAA0B;IAC1B,MAAM,MAAM,GAAG,MAAM,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAA;IAC7C,MAAM,CAAC,OAAO,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAA;IACvC,2FAA2F;IAC3F,4FAA4F;IAC5F,2FAA2F;IAC3F,sFAAsF;IACtF,wFAAwF;IACxF,4FAA4F;IAC5F,8FAA8F;IAC9F,4FAA4F;IAC5F,oBAAoB;IACpB,MAAM,SAAS,GAAG,MAAM,CAAkC,EAAE,CAAC,CAAA;IAE7D,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC1C,IAAI,UAAU,KAAK,SAAS;QAAE,OAAO,IAAI,CAAA;IAEzC,MAAM,OAAO,GAA4B,EAAE,CAAA;IAC3C,MAAM,MAAM,GAA+C,EAAE,CAAA;IAC7D,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;QAC9B,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;YAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAA;;YACpD,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC3E,CAAC;IACD,MAAM,KAAK,GACT,UAAU,CAAC,WAAW,KAAK,SAAS;QAClC,CAAC,CAAC,OAAO;QACT,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,OAAO,CAAC,CAAA;IAE/D,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,CAAA;IAC/C,MAAM,KAAK,GAA6E,EAAE,CAAA;IAC1F,KAAK,MAAM,QAAQ,IAAI,IAAI,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;QACpE,IAAI,QAAQ,KAAK,IAAI;YAAE,SAAQ;QAC/B,uFAAuF;QACvF,0FAA0F;QAC1F,0FAA0F;QAC1F,2DAA2D;QAC3D,EAAE;QACF,4FAA4F;QAC5F,0FAA0F;QAC1F,6FAA6F;QAC7F,wFAAwF;QACxF,sFAAsF;QACtF,yDAAyD;QACzD,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;QAC1C,MAAM,MAAM,GACV,MAAM;YACN,CAAC,CAAC,SAAyC,EAAa,EAAE;gBACxD,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,MAAM,CAAC,OAAO,CAAA;gBACtF,MAAM,YAAY,GAAG,SAAS,EAAE,OAAO,CAAA;gBACvC,OAAO,aAAa,CAClB,QAAQ,EACR,IAAI,EACJ,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,WAAW,CAAC,EAAE,CAAC;qBAC5C,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC;qBAC1C,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,CAAC;qBAC3E,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CACb,aAAa,CAAC,YAAY,EAAE;oBAC1B,GAAG,EAAE,KAAK,CAAC,EAAE;oBACb,IAAI,EAAE,KAAK;oBACX,IAAI,EAAE,WAAW;oBACjB,MAAM,EAAE,aAAa;iBACtB,CAAC,CACH,CACJ,CAAA;YACH,CAAC,CAAC,CAAA;QACJ,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAA;QACpC,KAAK,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAA;IAC1B,CAAC;IAED,OAAO,UAAU,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;AAC9C,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,IAAc,EACd,MAAuB,EACZ,EAAE,CACb,aAAa,CACX,QAAQ,EACR,IAAI,EACJ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAC/B,aAAa,CAAC,YAAY,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAClE,CACF,CAAA"}