@playfast/reform-remote 1.2.0 → 1.3.0

package/src/wire-identity.test.ts

@@ -0,0 +1,369 @@
+// @vitest-environment happy-dom
+//
+// Wire-level identity/attribution defects in @playfast/reform-remote.
+// Every test here asserts the behaviour the package is *supposed* to have; each
+// one currently FAILS. Nothing in this file fixes anything.
+import { act, createElement, StrictMode, useState } from 'react'
+import { createRoot } from 'react-dom/client'
+import { expect, test } from 'vitest'
+import { Data, Layer, Schema as S } from 'effect'
+import {
+  Composition,
+  Engine,
+  Event,
+  Reducer,
+  State,
+  Ui,
+  each,
+  mount,
+  provide,
+  scene,
+  slot,
+  ui,
+} from '@playfast/reform'
+import type { WireNode, WireTree } from '@playfast/reform/internal'
+import { makeRemoteServer } from './server'
+import { remoteViews, renderWireTree } from './client'
+import { RemoteUI, type RemoteUIProps } from './react'
+import { connect, serve, type InvokeMessage, type ServerMessage } from './transport'
+import { inMemoryTransportPair } from './memory'
+import { CounterUi, counterScene } from './fixtures'
+
+// ---------------------------------------------------------------------------
+// polling helper — no fixed waits, every poll stops the moment it is satisfied
+// ---------------------------------------------------------------------------
+
+const PollTimeoutBase: new (args: { readonly detail: string }) => Error & {
+  readonly _tag: 'regress/PollTimeout'
+} & Readonly<{ readonly detail: string }> = Data.TaggedError('regress/PollTimeout')<{
+  readonly detail: string
+}>
+
+class PollTimeout extends PollTimeoutBase {
+  override get message(): string {
+    return `condition never became true — ${this.detail}`
+  }
+}
+
+const until = async (detail: string, predicate: () => boolean, rounds = 200): Promise<void> => {
+  if (predicate()) {
+    return
+  }
+  if (rounds <= 0) {
+    throw new PollTimeout({ detail })
+  }
+  await new Promise<void>((resolve) => {
+    // oxlint-disable-next-line reform-rules/no-wall-clock-wait-in-test -- turn hop inside a bounded structural poll, not a fixed wait
+    setTimeout(resolve, 0)
+  })
+  return until(detail, predicate, rounds - 1)
+}
+
+// ---------------------------------------------------------------------------
+// a keyed, reorderable list scene
+// ---------------------------------------------------------------------------
+
+const Row = S.Struct({ id: S.String, label: S.String })
+
+class Rows extends State.make('identity.rows', S.Array(Row)) {}
+class Reversed extends Event.make('identity.Reversed', S.Struct({})) {}
+class ReverseRows extends Reducer.make('identity.ReverseRows', {
+  states: [Rows],
+  events: [Reversed],
+}) {}
+
+class RowUi extends ui('RegressRow', {
+  props: S.Struct({ label: S.String }),
+  events: { ping: S.Struct({}) },
+}) {}
+class RowComp extends Composition.make('RegressRow', {
+  title: 'RegressRow',
+  ui: RowUi,
+  props: Row,
+})<RowComp>() {}
+class RowSlot extends slot('RegressRow')<RowSlot, typeof RowComp>() {}
+
+class ListUi extends ui('RegressList', {
+  props: S.Struct({}),
+  events: { reverse: S.Struct({}) },
+  slots: { Row: RowSlot },
+}) {}
+class ListComp extends Composition.make('RegressList', {
+  title: 'RegressList',
+  ui: ListUi,
+  slots: { Row: RowSlot },
+  states: [Rows],
+})<ListComp>() {}
+
+const identityScene = (initial: ReadonlyArray<{ readonly id: string; readonly label: string }>) => {
+  const presentation = Layer.mergeAll(
+    provide(
+      ListUi,
+      Ui.make(ListUi, () => null),
+    ),
+    provide(
+      RowUi,
+      Ui.make(RowUi, ({ label }) => label),
+    ),
+    provide(RowSlot, RowComp),
+    State.live(Rows, initial),
+  )
+  const app = Layer.mergeAll(
+    Composition.live(ListComp, function* () {
+      const rows = yield* Rows
+      const reverse = yield* Event.trigger(Reversed)
+      return mount({
+        props: {},
+        events: { reverse },
+        slots: {
+          Row: each(rows, {
+            key: (entry) => entry.id,
+            props: (entry) => ({ id: entry.id, label: entry.label }),
+          }),
+        },
+      })
+    }),
+    Composition.live(RowComp, function* () {
+      const rowProps = yield* RowComp.props
+      const pingTrigger = yield* Event.trigger(Reversed)
+      const ping = (): void => pingTrigger({})
+      return mount({ props: { label: rowProps.label }, slots: {}, events: { ping } })
+    }),
+    Reducer.live(ReverseRows, (current) => [...current].reverse()),
+  ).pipe(Layer.provideMerge(presentation), Layer.provideMerge(Engine))
+  return scene(ListComp, { provide: [app] })
+}
+
+const rowsOf = (tree: WireTree): ReadonlyArray<WireNode> =>
+  tree.filter((node) => node.slot === 'Row')
+
+// ---------------------------------------------------------------------------
+// BUG 1 — a keyed slot child's client identity follows its POSITION, not its key.
+//
+// `each({ key: … })` labels every child, the server ships that label as
+// `WireNode.key`, and `@playfast/reform-react` (the local host for the same
+// scene) reconciles React by exactly that key —
+// packages/react/src/structure.ts:106 `key: placement.key`.
+// The remote client instead keys React by the wire node id
+// (packages/reform-remote/src/client.ts:158 `key: child.id`), and that id is
+// minted positionally as `${parent}.${slot}.${index}`
+// (packages/reform-remote/src/wireRender.ts:104). Reorder a keyed list and every
+// node id keeps its slot position while its `key` slides underneath it, so each
+// client component instance — and all of its local state — is silently
+// re-attached to a different item.
+// ---------------------------------------------------------------------------
+
+test('a reordered keyed slot keeps each item on its own client instance', async () => {
+  const server = makeRemoteServer(
+    identityScene([
+      { id: 'a', label: 'A' },
+      { id: 'b', label: 'B' },
+      { id: 'c', label: 'C' },
+    ]),
+  )
+  const mounts = { n: 0 }
+  const views = remoteViews<{ RegressList: typeof ListUi; RegressRow: typeof RowUi }>({
+    RegressList: Ui.make(ListUi, (_props, slots) =>
+      createElement('div', null, createElement(slots.Row)),
+    ),
+    // Per-row client state: which instance is rendering this row?
+    RegressRow: Ui.make(RowUi, ({ label }) => {
+      const [instance] = useState(() => {
+        mounts.n += 1
+        return `instance-${mounts.n}`
+      })
+      return createElement('span', { 'data-label': label, 'data-instance': instance }, label)
+    }),
+  })
+
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+  const root = createRoot(container)
+
+  const rendered = (): ReadonlyArray<readonly [string, string]> =>
+    [...container.querySelectorAll('[data-label]')].map(
+      (element) =>
+        [
+          element.getAttribute('data-label') ?? '',
+          element.getAttribute('data-instance') ?? '',
+        ] as const,
+    )
+  const instanceByLabel = (): Record<string, string> => Object.fromEntries(rendered())
+
+  try {
+    const before = await server.render()
+    expect(rowsOf(before).map((node) => node.key)).toEqual(['a', 'b', 'c'])
+    await act(async () => {
+      root.render(renderWireTree(before, { views, invoke: () => undefined }))
+    })
+    const ownerBefore = instanceByLabel()
+    expect(ownerBefore).toEqual({ A: 'instance-1', B: 'instance-2', C: 'instance-3' })
+
+    // Reverse the list server-side: same three keys, new order.
+    await server.invoke('0:reverse', {})
+    const after = await server.render()
+    expect(rowsOf(after).map((node) => node.key)).toEqual(['c', 'b', 'a'])
+    await act(async () => {
+      root.render(renderWireTree(after, { views, invoke: () => undefined }))
+    })
+
+    // The reorder itself did land in the DOM…
+    expect(rendered().map(([label]) => label)).toEqual(['C', 'B', 'A'])
+    // …and nothing remounted, so every instance is still alive.
+    expect(mounts.n).toBe(3)
+    // Each key must therefore still be rendered by the instance that owned it.
+    // Actual today: A→instance-3, C→instance-1 — the state stayed at the slot
+    // position and the items swapped underneath it.
+    expect(instanceByLabel()).toEqual(ownerBefore)
+  } finally {
+    await act(async () => {
+      root.unmount()
+    })
+    await server.dispose()
+  }
+})
+
+// ---------------------------------------------------------------------------
+// BUG 2 — a failed invoke escapes serve()'s message pump as an unhandled
+// promise rejection.
+//
+// packages/reform-remote/src/transport.ts:108-113 (and the identical
+// `serveShared` pump at :215-220) wrap `server.invoke` in `Effect.promise`,
+// which turns a rejection into a defect, then drop the resulting promise with
+// `void Effect.runPromise(…)`. `registry.invoke` legitimately FAILS for a
+// revoked handle (`UnknownTrigger`) or a payload that misses its schema —
+// exactly the "stale client invoke fails cleanly" path the playbook documents —
+// so any client frame that loses that race detonates in the server process.
+// Under Node's default `--unhandled-rejections=throw` that takes down the
+// WebSocket server for every other connected client.
+// ---------------------------------------------------------------------------
+
+test('a stale invoke fails cleanly instead of escaping serve() unhandled', async () => {
+  const rejections: Array<unknown> = []
+  const onRejection = (reason: unknown): void => void rejections.push(reason)
+  process.on('unhandledRejection', onRejection)
+
+  const { server: serverTransport, client: clientTransport } = inMemoryTransportPair<
+    ServerMessage,
+    InvokeMessage
+  >()
+  const client = connect({
+    transport: clientTransport,
+    views: remoteViews<{ Counter: typeof CounterUi }>({
+      Counter: Ui.make(CounterUi, () => null),
+    }),
+  })
+  const server = serve({ scene: counterScene(), transport: serverTransport })
+
+  const countOnClient = (): unknown => {
+    const prop = client
+      .snapshot()
+      .find((node) => node.id === '0')
+      ?.props.find((candidate) => candidate._tag === 'Data' && candidate.name === 'count')
+    return prop !== undefined && 'value' in prop ? prop.value : undefined
+  }
+
+  try {
+    await server.start()
+    await until('the client received the initial snapshot', () => countOnClient() === 0)
+
+    // A handle the server does not know: the everyday outcome of clicking a row
+    // whose node was deleted by a background patch still in flight.
+    clientTransport.send({ _tag: 'Invoke', handle: '0:gone', payload: {} })
+    // A well-formed invoke behind it, used purely as the landing signal.
+    clientTransport.send({ _tag: 'Invoke', handle: '0:bump', payload: { by: 3 } })
+    await until('the following invoke round-tripped', () => countOnClient() === 3)
+
+    expect(rejections).toEqual([])
+  } finally {
+    process.off('unhandledRejection', onRejection)
+    client.dispose()
+    await server.dispose()
+  }
+})
+
+// ---------------------------------------------------------------------------
+// BUG 3 — <RemoteUI> renders nothing under <StrictMode>.
+//
+// packages/reform-remote/src/react.ts:9-10 creates the transport subscription
+// inside a `useState` initializer — `connect()` calls `transport.onMessage`
+// eagerly — but tears it down from an effect cleanup. StrictMode double-invokes
+// the initializer (two bindings, one orphaned but still subscribed) and then
+// double-invokes the effect: setup → cleanup → setup. The cleanup calls
+// `binding.dispose()` on the binding React kept, and the second setup does
+// nothing to re-subscribe it, so the binding that is actually rendered is deaf
+// for the rest of its life. `@playfast/reform-react` deliberately avoids this
+// shape ("Capture once: committed construction avoids leaking runtimes from
+// abandoned renders", packages/react/src/index.ts:116).
+// ---------------------------------------------------------------------------
+
+const counterNode: WireNode = {
+  id: '0',
+  name: 'Counter',
+  parentId: null,
+  childIndex: 0,
+  slot: null,
+  key: null,
+  props: [{ _tag: 'Data', name: 'count', value: 41 }],
+}
+
+type CounterContract = { Counter: typeof CounterUi }
+
+test('RemoteUI stays subscribed to its transport under StrictMode', async () => {
+  const views = remoteViews<CounterContract>({
+    Counter: Ui.make(CounterUi, ({ count }) =>
+      createElement('i', { 'data-count': String(count) }, String(count)),
+    ),
+  })
+
+  const control = inMemoryTransportPair<ServerMessage, InvokeMessage>()
+  const controlContainer = document.createElement('div')
+  document.body.appendChild(controlContainer)
+  const controlRoot = createRoot(controlContainer)
+
+  const strict = inMemoryTransportPair<ServerMessage, InvokeMessage>()
+  const strictContainer = document.createElement('div')
+  document.body.appendChild(strictContainer)
+  const strictRoot = createRoot(strictContainer)
+
+  try {
+    // Control: the very same mount without StrictMode, so a failure below can
+    // only be StrictMode's double-invocation and not a broken harness.
+    await act(async () => {
+      controlRoot.render(
+        createElement<RemoteUIProps<CounterContract>>(RemoteUI, {
+          transport: control.client,
+          views,
+        }),
+      )
+    })
+    await act(async () => {
+      control.server.send({ _tag: 'Snapshot', tree: [counterNode] })
+    })
+    expect(controlContainer.querySelector('[data-count]')?.getAttribute('data-count')).toBe('41')
+
+    await act(async () => {
+      strictRoot.render(
+        createElement(
+          StrictMode,
+          null,
+          createElement<RemoteUIProps<CounterContract>>(RemoteUI, {
+            transport: strict.client,
+            views,
+          }),
+        ),
+      )
+    })
+    await act(async () => {
+      strict.server.send({ _tag: 'Snapshot', tree: [counterNode] })
+    })
+    // Actual today: null — the snapshot reached an orphaned binding, and the
+    // rendered one had already been unsubscribed by StrictMode's effect cleanup.
+    expect(strictContainer.querySelector('[data-count]')?.getAttribute('data-count')).toBe('41')
+  } finally {
+    await act(async () => {
+      controlRoot.unmount()
+      strictRoot.unmount()
+    })
+  }
+})