@playfast/reform 0.0.8 → 0.0.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@playfast/reform",
   "playbook": "./playbook",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "type": "module",
   "description": "The renderer-neutral core of the reform framework — typed, headless state, events, reducers, derived values, async/remote data, and compositions built on Effect.",
   "keywords": [

package/src/calc/asyncCalc.invalidate.test.ts

@@ -0,0 +1,166 @@
+import { expect, it } from '@effect/vitest'
+import { Duration, Effect, Layer, Option, Schema as S } from 'effect'
+import { AsyncCalc, Engine, Queries, QueryStore, State, StateGroup } from '../index'
+
+// The data-oriented half of AsyncCalc: `invalidate` flips `isStale` only (no
+// fetch), `refetch` forces a run, a stale query with active readers (or a fresh
+// subscriber) refetches, and `persist` hydrates + writes through an optional
+// QueryStore. `isStale` is read off the `Queries` registry handle.
+
+const tick = (ms = 10) => Effect.sleep(Duration.millis(ms))
+
+const isStale = (name: string) =>
+  Effect.map(Queries, (q) => q.byName.get(name)?.snapshot().isStale ?? false)
+
+// An in-memory QueryStore, so persistence is exercised with no DOM.
+const fakeQueryStore = (seed: Record<string, unknown> = {}) => {
+  const map = new Map<string, unknown>(Object.entries(seed))
+  const layer = Layer.succeed(QueryStore, {
+    get: (key) => Effect.sync(() => Option.fromNullable(map.has(key) ? map.get(key) : undefined)),
+    set: (key, value) => Effect.sync(() => void map.set(key, value)),
+    remove: (key) => Effect.sync(() => void map.delete(key)),
+  })
+  return { map, layer }
+}
+
+it.live('invalidate marks stale without fetching; a fresh subscriber then refetches', () => {
+  class Count extends State.make('count', S.Number) {}
+  class Inputs extends StateGroup.make(Count) {}
+  const runs = { n: 0 }
+  class Q extends AsyncCalc.make('Q', {
+    inputs: [StateGroup.select(Inputs, 'count')],
+    output: S.Number,
+    alwaysOn: true,
+  }) {}
+  const QLive = AsyncCalc.live(Q, {
+    query: ({ count }) =>
+      Effect.sync(() => {
+        runs.n += 1
+        return count
+      }),
+  })
+  const TestLayer = QLive.pipe(
+    Layer.provideMerge(StateGroup.live(Inputs, { count: 1 })),
+    Layer.provideMerge(Engine),
+  )
+
+  return Effect.gen(function* () {
+    const store = yield* Q.store
+    yield* tick()
+    expect(runs.n).toBe(1)
+
+    // No active readers: invalidate flips the flag but fetches nothing.
+    yield* AsyncCalc.invalidate(Q)
+    yield* tick()
+    expect(yield* isStale('Q')).toBe(true)
+    expect(runs.n).toBe(1)
+
+    // A reader arriving over a stale query (the resubscribe/mount analog) refetches.
+    store.subscribe(() => {})
+    yield* tick()
+    expect(runs.n).toBe(2)
+    expect(yield* isStale('Q')).toBe(false)
+  }).pipe(Effect.provide(TestLayer))
+})
+
+it.live('invalidate with an active reader auto-refetches immediately, keeping the value', () => {
+  class Count extends State.make('count', S.Number) {}
+  class Inputs extends StateGroup.make(Count) {}
+  const runs = { n: 0 }
+  class Q extends AsyncCalc.make('Q', {
+    inputs: [StateGroup.select(Inputs, 'count')],
+    output: S.Number,
+    alwaysOn: true,
+  }) {}
+  const QLive = AsyncCalc.live(Q, {
+    query: ({ count }) =>
+      Effect.sync(() => {
+        runs.n += 1
+        return count
+      }).pipe(Effect.delay(Duration.millis(20))),
+  })
+  const TestLayer = QLive.pipe(
+    Layer.provideMerge(StateGroup.live(Inputs, { count: 7 })),
+    Layer.provideMerge(Engine),
+  )
+
+  return Effect.gen(function* () {
+    const store = yield* Q.store
+    store.subscribe(() => {}) // active reader
+    yield* tick(40)
+    expect(store.get()).toMatchObject({ _tag: 'Success', value: 7, refetching: false })
+    expect(runs.n).toBe(1)
+
+    // Stale + active ⇒ refetch now; the last value stays visible (SWR).
+    yield* AsyncCalc.invalidate(Q)
+    yield* tick(5)
+    expect(store.get()).toMatchObject({ _tag: 'Success', value: 7, refetching: true })
+    yield* tick(40)
+    expect(store.get()).toMatchObject({ _tag: 'Success', value: 7, refetching: false })
+    expect(runs.n).toBe(2)
+  }).pipe(Effect.provide(TestLayer))
+})
+
+it.live('refetch forces a run regardless of staleness', () => {
+  class Count extends State.make('count', S.Number) {}
+  class Inputs extends StateGroup.make(Count) {}
+  const runs = { n: 0 }
+  class Q extends AsyncCalc.make('Q', {
+    inputs: [StateGroup.select(Inputs, 'count')],
+    output: S.Number,
+    alwaysOn: true,
+  }) {}
+  const QLive = AsyncCalc.live(Q, {
+    query: ({ count }) =>
+      Effect.sync(() => {
+        runs.n += 1
+        return count
+      }),
+  })
+  const TestLayer = QLive.pipe(
+    Layer.provideMerge(StateGroup.live(Inputs, { count: 3 })),
+    Layer.provideMerge(Engine),
+  )
+
+  return Effect.gen(function* () {
+    yield* tick()
+    expect(runs.n).toBe(1)
+    expect(yield* isStale('Q')).toBe(false)
+
+    // Not stale, no key movement — refetch still runs.
+    yield* AsyncCalc.refetch(Q)
+    yield* tick()
+    expect(runs.n).toBe(2)
+  }).pipe(Effect.provide(TestLayer))
+})
+
+it.live('persist: hydrates from the QueryStore (stale) then writes the settled value through', () => {
+  class Count extends State.make('count', S.Number) {}
+  class Inputs extends StateGroup.make(Count) {}
+  const store = fakeQueryStore({ P: 99 }) // a previously-persisted value
+  class Q extends AsyncCalc.make('Q', {
+    inputs: [StateGroup.select(Inputs, 'count')],
+    output: S.Number,
+    alwaysOn: true,
+  }) {}
+  const QLive = AsyncCalc.live(Q, {
+    query: ({ count }) => Effect.succeed(count * 2).pipe(Effect.delay(Duration.millis(25))),
+    persist: { key: 'P' },
+  })
+  const TestLayer = QLive.pipe(
+    Layer.provideMerge(StateGroup.live(Inputs, { count: 5 })),
+    Layer.provideMerge(store.layer),
+    Layer.provideMerge(Engine),
+  )
+
+  return Effect.gen(function* () {
+    const view = yield* Q.store
+    // The persisted value shows instantly, marked refetching (stale-while-revalidate).
+    expect(view.get()).toMatchObject({ _tag: 'Success', value: 99, refetching: true })
+
+    // The fresh fetch lands and is written through to the store.
+    yield* tick(45)
+    expect(view.get()).toMatchObject({ _tag: 'Success', value: 10, refetching: false })
+    expect(store.map.get('P')).toBe(10)
+  }).pipe(Effect.provide(TestLayer))
+})

package/src/calc/asyncCalc.ts

@@ -18,6 +18,7 @@ import { type Store } from '../internal/store'
 import { readTracked } from '../internal/track'
 import * as Reducer from '../reducer/reducer'
 import { Reducers } from '../runtime/loop'
+import { Queries } from '../runtime/queries'
 import * as State from '../state/state'
 import { type AnySource } from '../state/token'
 import { type AsyncData, narrowStore } from './asyncData'
@@ -97,6 +98,15 @@ export type AsyncCalcLive<
    * `Calc`'s `reuse`; opt-in (one O(result) walk per settle).
    */
   readonly reuse?: boolean
+  /**
+   * Persist the `Success` value through an optional host `QueryStore` (e.g.
+   * `@playfast/reform-query-browser`'s localStorage layer): hydrate it on build
+   * so the value shows instantly (marked stale, so it still refetches) and write
+   * through on each settle. `true` keys it by the calc name; pass `{ key }` to
+   * override. Values (de)serialize through the calc's `output` schema. No host
+   * `QueryStore` in context ⇒ inert (no hard requirement added).
+   */
+  readonly persist?: boolean | { readonly key?: string }
 } & (Gated extends true
   ? { readonly disabled?: (inputs: InputsObject<Inputs>) => boolean }
   : { readonly disabled?: never })
@@ -214,8 +224,20 @@ export function live<
         readonly disabled?: (inputs: InputsObject<Inputs>) => boolean
         readonly coalesce?: 'switch' | 'trailing'
         readonly reuse?: boolean
+        readonly persist?: boolean | { readonly key?: string }
       }
 
+      // `persist: true` keys by the calc name; `{ key }` overrides. The driver
+      // (de)serializes through the calc's own `output` schema.
+      const persist =
+        cfg.persist === undefined || cfg.persist === false
+          ? undefined
+          : {
+              key:
+                cfg.persist === true ? calc.manifest.name : cfg.persist.key ?? calc.manifest.name,
+              schema: calc.manifest.output,
+            }
+
       // The hidden revision store, read requirement-free (`serviceOption`): the
       // assembly below always provides it alongside this driver, and feeding it
       // through `extraKey` (not `wireSources`) keeps it out of the snapshot —
@@ -236,6 +258,7 @@ export function live<
         disabled: cfg.disabled,
         coalesce: cfg.coalesce,
         reuse: cfg.reuse,
+        persist,
         extraKey:
           revision === undefined
             ? undefined
@@ -265,3 +288,24 @@ export function live<
     Layer.provide(State.live(revisionState, revisionZero)),
   )
 }
+
+/**
+ * Mark a query's value stale (`isStale := true`) — without fetching. A stale
+ * query with active readers (a mounted view) refetches; an unread one refetches
+ * when next subscribed. The imperative counterpart of `invalidateOn`, and what a
+ * focus/online provider layer calls. A no-op if the calc isn't live; resolves the
+ * `Queries` registry (part of `Engine`).
+ */
+export const invalidate = (calc: { readonly name: string }): Effect.Effect<void, never, Queries> =>
+  Effect.flatMap(Queries, (queries) =>
+    Effect.sync(() => queries.byName.get(calc.name)?.invalidate()),
+  )
+
+/**
+ * Force an immediate refetch of the current key, bypassing the no-op-key guard
+ * and independent of `isStale`. A no-op if the calc isn't live or is disabled.
+ */
+export const refetch = (calc: { readonly name: string }): Effect.Effect<void, never, Queries> =>
+  Effect.flatMap(Queries, (queries) =>
+    Effect.sync(() => queries.byName.get(calc.name)?.refetch()),
+  )

package/src/calc/queryState.ts

@@ -0,0 +1,52 @@
+import { Option } from 'effect'
+import { type AnyAsyncData, AsyncData } from './asyncData'
+
+// `QueryState` is the data-oriented value an `AsyncCalc` is driven by: the four
+// axes of a query, stored *flat and independent* so each can move on its own.
+// `data`/`error` survive a refetch (stale-while-revalidate for free); `isFetching`
+// (activity) and `isStale` (freshness) are orthogonal to both — which is exactly
+// what lets `invalidate` (flip `isStale`) and `refetch` (drive `isFetching`) be
+// separate operations. The matchable `AsyncData` union is *derived* from this
+// (`toAsyncData`), so view code and `RemoteState` keep their arm dispatch.
+
+export interface QueryState<A, E> {
+  /** Last resolved value — kept across a refetch. */
+  readonly data: Option.Option<A>
+  /** Last failure — kept across a refetch. */
+  readonly error: Option.Option<E>
+  /** Activity axis: a run is in flight. */
+  readonly isFetching: boolean
+  /** Freshness axis: the value has been marked invalid (drives auto-refetch). */
+  readonly isStale: boolean
+}
+
+/** The empty cell. `fetching` seeds the first-kick `Loading` for an enabled query. */
+export const empty = (fetching: boolean): QueryState<never, never> => ({
+  data: Option.none(),
+  error: Option.none(),
+  isFetching: fetching,
+  isStale: false,
+})
+
+/**
+ * Project the flat state onto the public `AsyncData` union (the view contract) —
+ * the single `Match`-able view of a query, so call sites keep `Match.tag`-ing the
+ * arms. `error` wins over `data` so a failed refetch surfaces the `Error` arm,
+ * matching the pre-`QueryState` driver; `isFetching` becomes the arm's
+ * `refetching` flag. The data-less case is `Loading` while fetching (or for a
+ * non-gated query, which always fetches) and `Idle` only for a switched-off
+ * gateable query.
+ */
+export const toAsyncData = <A, E>(s: QueryState<A, E>, gated: boolean): AnyAsyncData<A, E> =>
+  Option.match(s.error, {
+    onSome: (error) => AsyncData.error(error, s.isFetching),
+    onNone: () =>
+      Option.match(s.data, {
+        onSome: (value) => AsyncData.success(value, s.isFetching),
+        onNone: () => (s.isFetching || !gated ? AsyncData.loading : AsyncData.idle),
+      }),
+  })
+
+/** `Loading` in the React-Query sense: fetching with nothing to show yet. */
+export const isLoading = <A, E>(s: QueryState<A, E>): boolean =>
+  s.isFetching && Option.isNone(s.data)

package/src/compose/composition.ts

@@ -4,21 +4,30 @@ import { type Manifest, definitionClass } from '../definition/definition'
 import { type Ctx } from '../internal/ctx'
 import type { Tracker } from '../internal/track'
 import { CurrentTracker } from '../internal/track'
-import { CurrentSlots, type SlotHost } from './host'
-import type { Node, SlotClass } from './slot'
+import type { SlotClass } from './slot'
+import type { Structure } from './structure'
 import type { UiClass, UiContract } from './ui'
 import { Props } from './props'
 
-/** Everything the host injects per render: the instance props, the dependency tracker, and slot bindings. */
+/**
+ * What a composition's logic returns for one frame: a serializable {@link Structure}
+ * value — its computed props, per-slot fills, and event triggers, all as DATA. A body
+ * never returns (nor evaluates) a React node, so the engine, the wire server, and the
+ * proof harness consume the frame without React; presentation resolves the contract's
+ * view separately, by name, on a host.
+ */
+export type Frame<C extends UiContract = UiContract> = Structure<C>
+
+/** Everything the host injects per render: the instance props and the dependency tracker. */
 export interface RenderEnv {
   readonly props: unknown
   readonly tracker: Tracker
-  readonly slots: SlotHost
 }
 
-/** A mounted composition: given a render environment, produces the current frame's node. */
+/** A mounted composition: given a render environment, produces the current frame —
+ *  a {@link Structure} value (see `Frame`). */
 export interface CompositionService {
-  readonly render: (env: RenderEnv) => Effect.Effect<Node, never, never>
+  readonly render: (env: RenderEnv) => Effect.Effect<Frame, never, never>
 }
 
 export interface CompositionConfig {
@@ -39,7 +48,20 @@ export interface CompositionConfig {
 
 type PropsOf<Config> = Config extends { props: Schema.Schema<infer P, any> } ? P : unknown
 
-export interface CompositionClass<out P, out C extends UiContract = UiContract> {
+/**
+ * The composition's state-group tuple, recovered from the `const`-inferred config
+ * so consumers can type its seeds. Erased to `readonly []` when no `states` are
+ * declared; entries that are not state groups contribute no seed keys (`SeedsOf`).
+ */
+type StatesOf<Config> = Config extends { states: infer S extends ReadonlyArray<unknown> }
+  ? S
+  : readonly []
+
+export interface CompositionClass<
+  out P,
+  out C extends UiContract = UiContract,
+  out S extends ReadonlyArray<unknown> = ReadonlyArray<unknown>,
+> {
   new (): {}
   readonly manifest: Manifest & { readonly kind: 'Composition' } & CompositionConfig
   /** Phantom carrying the props type for `provide(slot, composition)` checks. */
@@ -51,6 +73,11 @@ export interface CompositionClass<out P, out C extends UiContract = UiContract>
    * invariant `impl` tag is never stored here, so no variance regression.
    */
   readonly Contract: C
+  /**
+   * Phantom carrying the state-group tuple, so `seedScene` can type a scene's
+   * seeds against the actual state members. Same erasure trick as `Contract`.
+   */
+  readonly States: S
   readonly tag: Context.Tag<CompositionService, CompositionService>
 }
 
@@ -66,12 +93,12 @@ export const make = <const Config extends CompositionConfig, C extends UiContrac
   // manifest still sees only the erased `{ manifest }` carrier (CompositionConfig),
   // so the manifest type — and its variance — is unchanged.
   config: Config & { readonly ui: UiClass<C> },
-): CompositionClass<PropsOf<Config>, C> => {
+): CompositionClass<PropsOf<Config>, C, StatesOf<Config>> => {
   const tag = Context.GenericTag<CompositionService, CompositionService>(
     `reform/composition/${name}`,
   )
   const manifest = { kind: 'Composition' as const, name, ...config }
-  return definitionClass<CompositionClass<PropsOf<Config>, C>>({ manifest, tag })
+  return definitionClass<CompositionClass<PropsOf<Config>, C, StatesOf<Config>>>({ manifest, tag })
 }
 
 /**
@@ -80,33 +107,40 @@ export const make = <const Config extends CompositionConfig, C extends UiContrac
  * host injects per render) surface as the Layer's `RIn`; the runtime runs the
  * body per render within the captured context.
  */
-export const live = <P, Eff extends YieldWrap<Effect.Effect<unknown, never, unknown>>>(
-  // `live` doesn't use the contract type; accept any composition.
-  composition: CompositionClass<P, any>,
-  body: () => Generator<Eff, Node, never>,
+export const live = <
+  P,
+  C extends UiContract,
+  Eff extends YieldWrap<Effect.Effect<unknown, never, unknown>>,
+>(
+  // The contract `C` is captured (not erased to `any`) so the body's returned
+  // `Structure` is checked against the composition's contract.
+  composition: CompositionClass<P, C>,
+  body: () => Generator<Eff, Frame<C>, never>,
 ): Layer.Layer<CompositionService, never, Exclude<Ctx<Eff>, Props>> => {
   const logic = Effect.gen(body)
   return Layer.effect(
     composition.tag,
     Effect.gen(function* () {
-      // Capture the build-time context (state stores, calc, ui, bus). `Props`,
-      // the tracker, and slots are injected per render below.
+      // Capture the build-time context (state stores, calc, ui, bus). `Props` and
+      // the tracker are injected per render below.
       const context = yield* Effect.context<Exclude<Ctx<Eff>, Props>>()
-      const render = (env: RenderEnv): Effect.Effect<Node, never, never> =>
-        // Total once fully provided: the body is synchronous, reads can't fail,
-        // and every requirement is now satisfied (D2). `Effect.gen` widens the
-        // error channel to `unknown` for a generic body, so we restate it.
+      const render = (env: RenderEnv): Effect.Effect<Frame, never, never> =>
+        // The per-render erasure seam: the body is total once fully provided (it is
+        // synchronous, reads can't fail, every requirement is now satisfied — D2) and
+        // its `Structure<C>` erases to the service's contract-agnostic `Frame`. `gen`
+        // widens the error channel to the body's inferred `E` for a generic body, so
+        // narrowing it (and the contract) back to the erased service type needs the
+        // `unknown` bridge — the one cast this render boundary has always required.
         logic.pipe(
           Effect.provideService(Props, env.props),
           Effect.provideService(CurrentTracker, env.tracker),
-          Effect.provideService(CurrentSlots, env.slots),
           Effect.provide(context),
-        ) as Effect.Effect<Node, never, never>
+        ) as unknown as Effect.Effect<Frame, never, never>
       return { render }
     }),
   )
 }
 
-/** Run a mounted composition for one frame, producing its node. */
-export const render = (service: CompositionService, env: RenderEnv): Effect.Effect<Node, never, never> =>
+/** Run a mounted composition for one frame, producing its `Frame` (a `Structure`). */
+export const render = (service: CompositionService, env: RenderEnv): Effect.Effect<Frame, never, never> =>
   service.render(env)

package/src/compose/host.ts

@@ -1,18 +1,12 @@
-import { Context } from 'effect'
 import type { Node } from './slot'
 
 /**
- * Binds a parent's slots to concrete child renderers. The host package
- * (`@reform/react`) builds one per composition instance from the manifest's
- * slot map; the `ui` read consults it so `<slots.Item .../>` renders the wired
- * child. Core stays renderer-neutral — it only defines this hole.
+ * A slot handle the host hands a presentation: BOTH renderable (call it / use as a
+ * component to place the keyed children) AND inspectable (`.props` — the array of
+ * per-child fill props the structure carried, one entry per mounted child). The
+ * structure host (`renderStructure`) populates `.props` from the fills. Plan 06.
  */
-export interface SlotHost {
-  slot(name: string): (props: unknown) => Node
+export interface SlotRenderer {
+  (props: unknown): Node
+  readonly props: ReadonlyArray<unknown>
 }
-
-const CurrentSlotsBase: Context.TagClass<CurrentSlots, 'reform/Slots', SlotHost> =
-  Context.Tag('reform/Slots')<CurrentSlots, SlotHost>()
-
-/** The active composition's slot bindings, provided per render by the host. */
-export class CurrentSlots extends CurrentSlotsBase {}

package/src/compose/structure.test.ts

@@ -0,0 +1,90 @@
+import { Schema as S } from 'effect'
+import { describe, expect, test } from 'vitest'
+import { Composition } from '../index'
+import { slot } from './slot'
+import { type Contract, ui } from './ui'
+import { absent, each, isStructure, mount, one, structureEquals, when } from './structure'
+
+type List = Contract<typeof ListUi>
+
+// A minimal parent/child contract pair: a list parent with one keyed slot, so the
+// type-level `mount` checks have a real contract to bind against. Row carries a
+// props schema so its external props (`Comp['Props']`) are `{ label: string }`,
+// which is what each fill is checked against.
+class RowUi extends ui('Row')<{ props: { label: string } }>() {}
+class Row extends Composition.make('Row', {
+  title: 'Row',
+  props: S.Struct({ label: S.String }),
+  ui: RowUi,
+}) {}
+class RowSlot extends slot('Row')<typeof Row>() {}
+
+class ListUi extends ui('List')<{
+  props: { total: number }
+  slots: { Row: RowSlot }
+}>() {}
+
+describe('structure combinators', () => {
+  test('each produces one keyed entry per item, props mapped', () => {
+    const fill = each([{ id: 'a' }, { id: 'b' }], { key: (t) => t.id, props: (t) => ({ label: t.id }) })
+    expect(fill).toEqual({
+      _tag: 'Each',
+      items: [
+        { key: 'a', props: { label: 'a' } },
+        { key: 'b', props: { label: 'b' } },
+      ],
+    })
+  })
+
+  test('one and absent / when', () => {
+    expect(one({ label: 'x' })).toEqual({ _tag: 'One', props: { label: 'x' } })
+    expect(absent).toEqual({ _tag: 'Absent' })
+    expect(when(true, one({ label: 'y' }))).toEqual({ _tag: 'One', props: { label: 'y' } })
+    expect(when(false, one({ label: 'y' }))).toEqual({ _tag: 'Absent' })
+  })
+
+  test('mount stamps the Structure brand; isStructure discriminates it from a node', () => {
+    const s = mount<List>({
+      props: { total: 2 },
+      slots: { Row: each([{ id: 'a' }], { key: (t) => t.id, props: (t) => ({ label: t.id }) }) },
+    })
+    expect(isStructure(s)).toBe(true)
+    expect(isStructure({ type: 'div' })).toBe(false)
+    expect(isStructure(null)).toBe(false)
+    expect(s.props).toEqual({ total: 2 })
+  })
+
+  test('structureEquals detects a two-frame fixpoint vs a change', () => {
+    const make = (label: string) =>
+      mount<List>({
+        props: { total: 1 },
+        slots: { Row: each([{ id: 'a' }], { key: (t) => t.id, props: () => ({ label }) }) },
+      })
+    expect(structureEquals(make('same'), make('same'))).toBe(true)
+    expect(structureEquals(make('a'), make('b'))).toBe(false)
+  })
+})
+
+// Type-level contract enforcement — never called; exists only so the negative
+// cases are typechecked. Each `@ts-expect-error` must sit on the line that errors.
+export const _typeChecks = (): void => {
+  mount<List>({
+    props: { total: 1 },
+    slots: {
+      // @ts-expect-error 'Nope' is not a declared slot of ListUi
+      Nope: one({ label: 'x' }),
+    },
+  })
+  mount<List>({
+    props: { total: 1 },
+    slots: {
+      // @ts-expect-error Row's child props are { label: string }, not { wrong: number }
+      Row: each([1], { key: () => 'k', props: () => ({ wrong: 1 }) }),
+    },
+  })
+  mount<List>({
+    // @ts-expect-error List's props are { total: number }, not { total: string }
+    props: { total: 'two' },
+    slots: { Row: absent },
+  })
+}