@playfast/reform-remote 1.0.2 → 1.1.0

package/src/fixtures.ts

@@ -3,49 +3,83 @@ import { Duration, Effect, Layer, Option, Schema as S } from 'effect'
 import {
   Channel,
   Composition,
+  type CapturedScene,
   type DerivedContract,
   Engine,
   Event,
   type EventOf,
   Procedure,
-  Props,
   Reducer,
-  type Scene,
   State,
   StateGroup,
   Ui,
-  type WiredUi,
   each,
   mount,
   one,
   provide,
   scene,
   slot,
+  type SlotService,
   ui,
 } from '@playfast/reform'
+import {
+  type CompositionChildSummary,
+  type EngineServices,
+  type WiredUi,
+} from '@playfast/reform/internal'
 
-class Count extends State.make('count', S.Number) {}
+const CountBase: State.StateDefinition<'count', number, typeof S.Number> = State.make(
+  'count',
+  S.Number,
+)
+class Count extends CountBase {}
 class Counters extends StateGroup.make(Count) {}
 class Bumped extends Event.make('Bumped', S.Struct({ by: S.Number })) {}
-class Bump extends Reducer.make('Bump', { states: [Count], events: [Bumped] }) {}
+class Bump extends Reducer.make('Bump', {
+  states: [Count],
+  events: [Bumped],
+}) {}
 const CounterUiBase: WiredUi<
   DerivedContract<{
     props: S.Struct<{ count: typeof S.Number }>
     events: { bump: S.Struct<{ by: typeof S.Number }> }
-  }>
+  }>,
+  'Counter'
 > = ui('Counter', {
   props: S.Struct({ count: S.Number }),
   events: { bump: S.Struct({ by: S.Number }) },
 })
 export class CounterUi extends CounterUiBase {}
-class Counter extends Composition.make('Counter', { title: 'Counter', ui: CounterUi, states: [Count] }) {}
+
+class Counter extends Composition.make('Counter', {
+  title: 'Counter',
+  ui: CounterUi,
+  states: [Count],
+})<Counter>() {}
+
+type CounterScene = CapturedScene<
+  typeof CounterUi.Contract,
+  readonly [typeof Count],
+  | EngineServices
+  | State.StateStore<'count', number>
+  | Ui.UiService<'Counter'>
+  | Composition.CompositionId<'Counter', Counter, never>,
+  unknown,
+  'Counter',
+  Counter
+>
 
 export const bumpedBy = (amount: number): EventOf<'Bumped', { by: number }> =>
   Event.construct(Bumped, { by: amount })
 
-export const counterScene = (boot?: ReadonlyArray<EventOf<'Bumped', { by: number }>>): Scene => {
+const makeCounterScene = (
+  boot?: ReadonlyArray<EventOf<'Bumped', { by: number }>>,
+): CounterScene => {
   const presentation = Layer.mergeAll(
-    provide(CounterUi, Ui.make(CounterUi, ({ count }) => `count:${count}`)),
+    provide(
+      CounterUi,
+      Ui.make(CounterUi, ({ count }) => `count:${count}`),
+    ),
     StateGroup.live(Counters, { count: 0 }),
   )
   const app = Layer.mergeAll(
@@ -58,10 +92,14 @@ export const counterScene = (boot?: ReadonlyArray<EventOf<'Bumped', { by: number
   ).pipe(Layer.provideMerge(presentation), Layer.provideMerge(Engine))
   return scene(Counter, boot === undefined ? { provide: [app] } : { provide: [app], boot })
 }
+export const counterScene: typeof makeCounterScene = makeCounterScene
 
-export const structureCounterScene = (): Scene => {
+const makeStructureCounterScene = (): CounterScene => {
   const presentation = Layer.mergeAll(
-    provide(CounterUi, Ui.make(CounterUi, ({ count }) => `count:${count}`)),
+    provide(
+      CounterUi,
+      Ui.make(CounterUi, ({ count }) => `count:${count}`),
+    ),
     StateGroup.live(Counters, { count: 0 }),
   )
   const app = Layer.mergeAll(
@@ -74,18 +112,45 @@ export const structureCounterScene = (): Scene => {
   ).pipe(Layer.provideMerge(presentation), Layer.provideMerge(Engine))
   return scene(Counter, { provide: [app] })
 }
+export const structureCounterScene: typeof makeStructureCounterScene = makeStructureCounterScene
 
-class Label extends State.make('label', S.OptionFromSelf(S.String)) {}
+const LabelBase: State.StateDefinition<
+  'label',
+  Option.Option<string>,
+  S.OptionFromSelf<typeof S.String>
+> = State.make('label', S.OptionFromSelf(S.String))
+class Label extends LabelBase {}
 class Labels extends StateGroup.make(Label) {}
 const OptionalUiBase: WiredUi<
-  DerivedContract<{ props: S.Struct<{ label: S.Option<typeof S.String> }> }>
+  DerivedContract<{ props: S.Struct<{ label: S.Option<typeof S.String> }> }>,
+  'Optional'
 > = ui('Optional', { props: S.Struct({ label: S.Option(S.String) }) })
 export class OptionalUi extends OptionalUiBase {}
-class Optional extends Composition.make('Optional', { title: 'Optional', ui: OptionalUi, states: [Label] }) {}
 
-export const optionScene = (initial: Option.Option<string> = Option.some('hi')): Scene => {
+class Optional extends Composition.make('Optional', {
+  title: 'Optional',
+  ui: OptionalUi,
+  states: [Label],
+})<Optional>() {}
+
+type OptionalScene = CapturedScene<
+  typeof OptionalUi.Contract,
+  readonly [typeof Label],
+  | EngineServices
+  | State.StateStore<'label', Option.Option<string>>
+  | Ui.UiService<'Optional'>
+  | Composition.CompositionId<'Optional', Optional, never>,
+  unknown,
+  'Optional',
+  Optional
+>
+
+const makeOptionScene = (initial: Option.Option<string> = Option.some('hi')): OptionalScene => {
   const presentation = Layer.mergeAll(
-    provide(OptionalUi, Ui.make(OptionalUi, () => null)),
+    provide(
+      OptionalUi,
+      Ui.make(OptionalUi, () => null),
+    ),
     StateGroup.live(Labels, { label: initial }),
   )
   const app = Layer.mergeAll(
@@ -96,25 +161,82 @@ export const optionScene = (initial: Option.Option<string> = Option.some('hi')):
   ).pipe(Layer.provideMerge(presentation), Layer.provideMerge(Engine))
   return scene(Optional, { provide: [app] })
 }
+export const optionScene: typeof makeOptionScene = makeOptionScene
 
-class Greeting extends State.make('greeting', S.String) {}
+const GreetingBase: State.StateDefinition<'greeting', string, typeof S.String> = State.make(
+  'greeting',
+  S.String,
+)
+class Greeting extends GreetingBase {}
 class Greeted extends Event.make('Greeted', S.Struct({ text: S.String })) {}
 class Cleared extends Event.make('Cleared', S.Struct({})) {}
-class SetGreeting extends Reducer.make('SetGreeting', { states: [Greeting], events: [Greeted] }) {}
-class ClearGreeting extends Reducer.make('ClearGreeting', { states: [Greeting], events: [Cleared] }) {}
-class PanelUi extends ui('Panel', {
+class SetGreeting extends Reducer.make('SetGreeting', {
+  states: [Greeting],
+  events: [Greeted],
+}) {}
+class ClearGreeting extends Reducer.make('ClearGreeting', {
+  states: [Greeting],
+  events: [Cleared],
+}) {}
+const PanelUiBase: WiredUi<
+  DerivedContract<{
+    props: S.Struct<{ greeting: typeof S.String }>
+    events: {
+      greet: S.Struct<{ text: typeof S.String }>
+      clear: S.Struct<{}>
+    }
+  }>,
+  'Panel'
+> = ui('Panel', {
   props: S.Struct({ greeting: S.String }),
   events: { greet: S.Struct({ text: S.String }), clear: S.Struct({}) },
-}) {}
-class Panel extends Composition.make('Panel', { title: 'Panel', ui: PanelUi, states: [Greeting] }) {}
-class MainSlot extends slot('Main')<typeof Panel>() {}
-class ShellUi extends ui('Shell')<{ props: {}; slots: { Main: MainSlot } }>() {}
-class Shell extends Composition.make('Shell', { title: 'Shell', slots: { Main: MainSlot }, ui: ShellUi }) {}
+})
+class PanelUi extends PanelUiBase {}
+
+class Panel extends Composition.make('Panel', {
+  title: 'Panel',
+  ui: PanelUi,
+  states: [Greeting],
+})<Panel>() {}
+
+class MainSlot extends slot('Main')<MainSlot, typeof Panel>() {}
+const ShellUiBase: Ui.UiClass<{ props: {}; slots: { Main: MainSlot } }, 'Shell'> = ui('Shell')<{
+  props: {}
+  slots: { Main: MainSlot }
+}>()
+class ShellUi extends ShellUiBase {}
 
-export const slottedScene = (): Scene => {
+class Shell extends Composition.make('Shell', {
+  title: 'Shell',
+  slots: { Main: MainSlot },
+  ui: ShellUi,
+})<Shell>() {}
+
+type SlottedScene = CapturedScene<
+  typeof ShellUi.Contract,
+  readonly [],
+  | EngineServices
+  | State.StateStore<'greeting', string>
+  | Ui.UiService<'Panel'>
+  | Ui.UiService<'Shell'>
+  | Composition.CompositionId<'Shell', Shell, MainSlot>
+  | Composition.CompositionId<'Panel', Panel, never>
+  | SlotService<'Main', MainSlot, CompositionChildSummary<Panel>>,
+  unknown,
+  'Shell',
+  Shell
+>
+
+const makeSlottedScene = (): SlottedScene => {
   const presentation = Layer.mergeAll(
-    provide(ShellUi, Ui.make(ShellUi, (_props, slots) => createElement(slots.Main, {}))),
-    provide(PanelUi, Ui.make(PanelUi, ({ greeting }) => greeting)),
+    provide(
+      ShellUi,
+      Ui.make(ShellUi, (_props, slots) => createElement(slots.Main, {})),
+    ),
+    provide(
+      PanelUi,
+      Ui.make(PanelUi, ({ greeting }) => greeting),
+    ),
     provide(MainSlot, Panel),
     State.live(Greeting, 'hi'),
   )
@@ -128,62 +250,132 @@ export const slottedScene = (): Scene => {
       const greet = yield* Event.trigger(Greeted)
       const clearTrigger = yield* Event.trigger(Cleared)
       const clear = (): void => clearTrigger({})
-      return mount({ props: { greeting }, slots: {}, events: { greet, clear } })
+      return mount({
+        props: { greeting },
+        slots: {},
+        events: { greet, clear },
+      })
     }),
     Reducer.live(SetGreeting, (_greeting, event) => event.text),
     Reducer.live(ClearGreeting, () => ''),
   ).pipe(Layer.provideMerge(presentation), Layer.provideMerge(Engine))
   return scene(Shell, { provide: [app] })
 }
+export const slottedScene: typeof makeSlottedScene = makeSlottedScene
 
-const ListItem = S.Struct({ id: S.String, label: S.String })
-class Items extends State.make('items', S.Array(ListItem)) {}
+const ListItem: S.Struct<{ id: typeof S.String; label: typeof S.String }> = S.Struct({
+  id: S.String,
+  label: S.String,
+})
+const ItemsBase: State.StateDefinition<
+  'items',
+  ReadonlyArray<{ readonly id: string; readonly label: string }>,
+  S.Array$<typeof ListItem>
+> = State.make('items', S.Array(ListItem))
+class Items extends ItemsBase {}
 class Added extends Event.make('Added', ListItem) {}
 class Removed extends Event.make('Removed', S.Struct({ id: S.String })) {}
-class AddItem extends Reducer.make('AddItem', { states: [Items], events: [Added] }) {}
-class RemoveItem extends Reducer.make('RemoveItem', { states: [Items], events: [Removed] }) {}
+class AddItem extends Reducer.make('AddItem', {
+  states: [Items],
+  events: [Added],
+}) {}
+class RemoveItem extends Reducer.make('RemoveItem', {
+  states: [Items],
+  events: [Removed],
+}) {}
+
+const BarUiBase: WiredUi<
+  DerivedContract<{
+    props: S.Struct<{}>
+    events: { add: typeof ListItem }
+  }>,
+  'Bar'
+> = ui('Bar', {
+  props: S.Struct({}),
+  events: { add: ListItem },
+})
+class BarUi extends BarUiBase {}
+
+class Bar extends Composition.make('Bar', { title: 'Bar', ui: BarUi })<Bar>() {}
+const ItemUiBase: WiredUi<
+  DerivedContract<{
+    props: S.Struct<{ label: typeof S.String }>
+    events: { remove: S.Struct<{}> }
+  }>,
+  'Item'
+> = ui('Item', {
+  props: S.Struct({ label: S.String }),
+  events: { remove: S.Struct({}) },
+})
+class ItemUi extends ItemUiBase {}
 
-class BarUi extends ui('Bar', { props: S.Struct({}), events: { add: ListItem } }) {}
-class Bar extends Composition.make('Bar', { title: 'Bar', ui: BarUi }) {}
-class ItemUi extends ui('Item', { props: S.Struct({ label: S.String }), events: { remove: S.Struct({}) } }) {}
 class ItemComp extends Composition.make('Item', {
   title: 'Item',
   ui: ItemUi,
   props: ListItem,
-}) {}
-class BarSlot extends slot('Bar')<typeof Bar>() {}
-class ItemSlot extends slot('Item')<typeof ItemComp>() {}
-class ListUi extends ui('List')<{
+})<ItemComp>() {}
+
+class BarSlot extends slot('Bar')<BarSlot, typeof Bar>() {}
+
+class ItemSlot extends slot('Item')<ItemSlot, typeof ItemComp>() {}
+const ListUiBase: Ui.UiClass<
+  {
+    props: { items: ReadonlyArray<{ id: string; label: string }> }
+    slots: { Bar: BarSlot; Item: ItemSlot }
+  },
+  'List'
+> = ui('List')<{
   props: { items: ReadonlyArray<{ id: string; label: string }> }
   slots: { Bar: BarSlot; Item: ItemSlot }
-}>() {}
+}>()
+class ListUi extends ListUiBase {}
+
 class ListComp extends Composition.make('List', {
   title: 'List',
   slots: { Bar: BarSlot, Item: ItemSlot },
   ui: ListUi,
   states: [Items],
-}) {}
+})<ListComp>() {}
+
+type ListScene = CapturedScene<
+  typeof ListUi.Contract,
+  readonly [typeof Items],
+  | EngineServices
+  | Ui.UiService<'Item'>
+  | State.StateStore<'items', ReadonlyArray<{ readonly id: string; readonly label: string }>>
+  | Ui.UiService<'Bar'>
+  | Ui.UiService<'List'>
+  | Composition.CompositionId<'List', ListComp, BarSlot | ItemSlot>
+  | Composition.CompositionId<'Bar', Bar, never>
+  | Composition.CompositionId<'Item', ItemComp, never>
+  | SlotService<'Bar', BarSlot, CompositionChildSummary<Bar>>
+  | SlotService<'Item', ItemSlot, CompositionChildSummary<ItemComp>>,
+  unknown,
+  'List',
+  ListComp
+>
 
-export const listScene = (
+const makeListScene = (
   initial: ReadonlyArray<{ id: string; label: string }> = [
     { id: 'a', label: 'A' },
     { id: 'b', label: 'B' },
   ],
-): Scene => {
+): ListScene => {
   const presentation = Layer.mergeAll(
     provide(
       ListUi,
       Ui.make(ListUi, (_props, slots) =>
-        createElement(
-          Fragment,
-          null,
-          createElement(slots.Bar, {}),
-          createElement(slots.Item, {}),
-        ),
+        createElement(Fragment, null, createElement(slots.Bar, {}), createElement(slots.Item, {})),
       ),
     ),
-    provide(BarUi, Ui.make(BarUi, () => null)),
-    provide(ItemUi, Ui.make(ItemUi, ({ label }) => label)),
+    provide(
+      BarUi,
+      Ui.make(BarUi, () => null),
+    ),
+    provide(
+      ItemUi,
+      Ui.make(ItemUi, ({ label }) => label),
+    ),
     provide(BarSlot, Bar),
     provide(ItemSlot, ItemComp),
     State.live(Items, initial),
@@ -207,26 +399,36 @@ export const listScene = (
       return mount({ props: {}, slots: {}, events: { add } })
     }),
     Composition.live(ItemComp, function* () {
-      const itemProps = S.decodeUnknownSync(ListItem)(yield* Props)
+      const itemProps = yield* ItemComp.props
       const removeTrigger = yield* Event.trigger(Removed)
-      // Item binds its own id into remove so the wire event has empty payload.
+      // The item binds its id so the wire event carries no payload.
       const remove = (): void => removeTrigger({ id: itemProps.id })
-      return mount({ props: { label: itemProps.label }, slots: {}, events: { remove } })
+      return mount({
+        props: { label: itemProps.label },
+        slots: {},
+        events: { remove },
+      })
     }),
     Reducer.live(AddItem, (current, event) => [...current, { id: event.id, label: event.label }]),
     Reducer.live(RemoveItem, (current, event) => current.filter((entry) => entry.id !== event.id)),
   ).pipe(Layer.provideMerge(presentation), Layer.provideMerge(Engine))
   return scene(ListComp, { provide: [app] })
 }
+export const listScene: typeof makeListScene = makeListScene
 
-// Boot Kick → DelayedBump sleeps past opening snapshot, then Bumped — only path for server-pushed diffs.
 class Kick extends Event.make('Kick', S.Struct({ to: S.Number })) {}
 class Loader extends Channel.make('Loader', { policy: { _tag: 'latest' } }) {}
-class DelayedBump extends Procedure.make('DelayedBump', { channel: Loader, events: [Kick] }) {}
+class DelayedBump extends Procedure.make('DelayedBump', {
+  channel: Loader,
+  events: [Kick],
+}) {}
 
-export const asyncCounterScene = (delay: Duration.DurationInput = '40 millis'): Scene => {
+const makeAsyncCounterScene = (delay: Duration.DurationInput = '40 millis'): CounterScene => {
   const presentation = Layer.mergeAll(
-    provide(CounterUi, Ui.make(CounterUi, ({ count }) => `count:${count}`)),
+    provide(
+      CounterUi,
+      Ui.make(CounterUi, ({ count }) => `count:${count}`),
+    ),
     StateGroup.live(Counters, { count: 0 }),
   )
   const app = Layer.mergeAll(
@@ -243,5 +445,9 @@ export const asyncCounterScene = (delay: Duration.DurationInput = '40 millis'):
     // Without Channel.live the boot Kick is dropped.
     Channel.live(Loader),
   ).pipe(Layer.provideMerge(presentation), Layer.provideMerge(Engine))
-  return scene(Counter, { provide: [app], boot: [Event.construct(Kick, { to: 7 })] })
+  return scene(Counter, {
+    provide: [app],
+    boot: [Event.construct(Kick, { to: 7 })],
+  })
 }
+export const asyncCounterScene: typeof makeAsyncCounterScene = makeAsyncCounterScene

package/src/react.ts

@@ -1,10 +1,5 @@
 import { type ReactNode, useEffect, useState, useSyncExternalStore } from 'react'
-import {
-  connect,
-  type InvokeMessage,
-  type RemoteTransport,
-  type ServerMessage,
-} from './transport'
+import { connect, type InvokeMessage, type RemoteTransport, type ServerMessage } from './transport'
 import type { RemoteContract, RemoteViewSet } from './client'
 
 export const useRemoteUI = <C extends RemoteContract>(

package/src/remote-view.typecheck.ts

@@ -31,8 +31,9 @@ Ui.make(FooUi, (_props, _slots, events) => {
   return null
 })
 
-class FooComp extends Composition.make('FooComp', { title: 'Foo', ui: FooUi }) {}
-class FooSlot extends slot('Foo')<typeof FooComp>() {}
+class FooComp extends Composition.make('FooComp', { title: 'Foo', ui: FooUi })<FooComp>() {}
+
+class FooSlot extends slot('Foo')<FooSlot, typeof FooComp>() {}
 class ShellUi extends ui('Shell', { props: S.Struct({}), slots: { Main: FooSlot } }) {}
 
 const shellView = Ui.make(ShellUi, (_props, slots) => createElement(slots.Main, {}))

package/src/server.test.ts

@@ -2,8 +2,14 @@ import { createElement, Fragment, type ReactNode } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { expect, test } from 'vitest'
 import { Option } from 'effect'
-import { Ui, Wire } from '@playfast/reform'
-import type { WireNode, WirePatch, WireProp, WireTree } from '@playfast/reform'
+import { Ui } from '@playfast/reform'
+import {
+  Wire,
+  type WireNode,
+  type WirePatch,
+  type WireProp,
+  type WireTree,
+} from '@playfast/reform/internal'
 import { makeRemoteServer } from './server'
 import { remoteViews, renderWireTree } from './client'
 import {
@@ -17,15 +23,20 @@ import {
   structureCounterScene,
 } from './fixtures'
 
-const draw = (node: ReactNode): void => void renderToStaticMarkup(createElement(Fragment, null, node))
+const draw = (node: ReactNode): void =>
+  void renderToStaticMarkup(createElement(Fragment, null, node))
 
 const dataOf = (node: WireNode, name: string): WireProp | undefined =>
   node.props.find((prop) => prop._tag === 'Data' && prop.name === name)
 
 const eventOf = (node: WireNode, name: string): Extract<WireProp, { _tag: 'Event' }> | undefined =>
-  node.props.find((prop): prop is Extract<WireProp, { _tag: 'Event' }> => prop._tag === 'Event' && prop.name === name)
+  node.props.find(
+    (prop): prop is Extract<WireProp, { _tag: 'Event' }> =>
+      prop._tag === 'Event' && prop.name === name,
+  )
 
-const byId = (tree: WireTree, id: string): WireNode | undefined => tree.find((node) => node.id === id)
+const byId = (tree: WireTree, id: string): WireNode | undefined =>
+  tree.find((node) => node.id === id)
 
 const upsertIds = (patches: ReadonlyArray<WirePatch>): ReadonlyArray<string> =>
   patches.flatMap((patch) => (patch._tag === 'Upsert' ? [patch.node.id] : []))
@@ -62,7 +73,6 @@ test('invoking a trigger handle dispatches into the runtime and the next render
   }
 })
 
-
 test('a mount(...)-returning body registers its event from structure.events and invoking it dispatches', async () => {
   const server = makeRemoteServer(structureCounterScene())
   try {
@@ -110,7 +120,10 @@ test('renderDiff streams patches a client folds back to the current tree', async
 
 test('end to end: client reconstructs props + event callbacks that drive the server', async () => {
   const server = makeRemoteServer(counterScene())
-  const captured: { props?: Record<string, unknown>; events?: Record<string, (p: { by: number }) => void> } = {}
+  const captured: {
+    props?: Record<string, unknown>
+    events?: Record<string, (p: { by: number }) => void>
+  } = {}
   const sent: Array<[string, unknown]> = []
   try {
     const tree = await server.render()
@@ -149,7 +162,6 @@ test('boot events are applied before the first render', async () => {
   }
 })
 
-
 test('a slotted child renders nested with its own encoded props and handle', async () => {
   const server = makeRemoteServer(slottedScene())
   try {
@@ -197,16 +209,19 @@ test('two events on one node register distinct handles and each fires independen
     expect(eventOf(before, 'clear')?.handle).toBe('0.Main.0:clear')
 
     await server.invoke('0.Main.0:greet', { text: 'hello' })
-    expect(dataOf(byId(await server.render(), '0.Main.0')!, 'greeting')).toMatchObject({ value: 'hello' })
+    expect(dataOf(byId(await server.render(), '0.Main.0')!, 'greeting')).toMatchObject({
+      value: 'hello',
+    })
 
     await server.invoke('0.Main.0:clear', {})
-    expect(dataOf(byId(await server.render(), '0.Main.0')!, 'greeting')).toMatchObject({ value: '' })
+    expect(dataOf(byId(await server.render(), '0.Main.0')!, 'greeting')).toMatchObject({
+      value: '',
+    })
   } finally {
     await server.dispose()
   }
 })
 
-
 test('a list renders one child per item under a single slot, in order', async () => {
   const server = makeRemoteServer(listScene())
   try {
@@ -255,7 +270,6 @@ test("a removed node's handle is revoked — a stale client invocation rejects",
   }
 })
 
-
 test('an Option prop round-trips through JSON as a real Option (symmetric schema decode)', async () => {
   const server = makeRemoteServer(optionScene(Option.some('hi')))
   const captured: { label?: unknown } = {}