@pyreon/core 0.15.0 → 0.18.0

package/src/manifest.ts

@@ -524,11 +524,19 @@ return wrapCompatComponent(type)(props)`,
     {
       name: 'ExtractProps',
       kind: 'type',
-      signature: 'type ExtractProps<T> = T extends ComponentFn<infer P> ? P : T',
+      signature:
+        'type ExtractProps<T> = /* matches up to 4 overloads, unions the props */ T extends ComponentFn<infer P> ? P : T',
       summary:
-        'Extracts the props type from a `ComponentFn`. Passes through unchanged if `T` is not a `ComponentFn`. Useful for HOC patterns and typed wrappers that need to infer the wrapped component\'s prop interface.',
-      example: `const Greet: ComponentFn<{ name: string }> = ({ name }) => <h1>{name}</h1>
-type Props = ExtractProps<typeof Greet>  // { name: string }`,
+        "Extracts the props type from a `ComponentFn`. Passes through unchanged if `T` is not a `ComponentFn`. **Multi-overload aware** — matches up to 4 call signatures and produces the UNION of their first-argument types. Critical for multi-overload primitives (Iterator, List, Element) whose loosest overload is last; without overload-aware extraction, HOC wrapping (`rocketstyle()`, `attrs()`) silently downgraded their public prop surface. Single-overload functions still work — the union of 4 copies of the same props type dedupes back to the single shape.",
+      example: `function Iterator<T extends SimpleValue>(p: { data: T[]; valueName?: string }): VNodeChild
+function Iterator<T extends ObjectValue>(p: { data: T[]; component: ComponentFn<T> }): VNodeChild
+type Props = ExtractProps<typeof Iterator>
+// → { data: SimpleValue[]; valueName?: string }
+//  | { data: ObjectValue[]; component: ComponentFn<ObjectValue> }`,
+      mistakes: [
+        'Assuming `ExtractProps<T>` returns only the LAST overload — pre-fix it did, post-fix it returns the UNION of up to 4 overloads. Functions with more than 4 overloads still drop the extras.',
+        'Using `T extends (props: infer P) => any ? P : never` directly in user code — that pattern captures only the LAST overload of a multi-overload function. Use `ExtractProps<T>` to get the full union.',
+      ],
       seeAlso: ['HigherOrderComponent'],
     },
     {

package/src/props.ts

@@ -140,6 +140,65 @@ export function _rp<T>(fn: () => T): () => T {
   return fn
 }
 
+/**
+ * Wrap a JSX spread source so its getter-shaped reactive props survive
+ * the JS-level object spread that esbuild's automatic JSX runtime emits
+ * for `<Comp {...source}>`.
+ *
+ * Without this wrapper, esbuild compiles `<Comp {...source}>` to
+ * `jsx(Comp, { ...source })` — and JS spread fires every getter on
+ * `source`, storing the resolved values as plain data properties. Any
+ * compiler-emitted reactive prop (`_rp(() => signal())` converted to a
+ * getter by `makeReactiveProps`) on `source` is collapsed to its
+ * initial value before the receiving component ever sees it.
+ *
+ * `_wrapSpread(source)` walks `source`'s own keys via `Reflect.ownKeys`
+ * (no getter firing) and returns a new object whose values are
+ * `_rp`-branded thunks `() => source[key]`. When `{ ..._wrapSpread(s) }`
+ * is spread by esbuild, the thunks are stored as plain data property
+ * values (no getters to fire), then `makeReactiveProps` in `mount.ts`
+ * converts the brands back into getters that lazily read from the
+ * original `source` — preserving the reactive subscription end-to-end.
+ *
+ * Fast path: when `source` has no getter descriptors, return the
+ * source object unchanged. JS spread will work correctly in that case
+ * because there's nothing reactive to preserve. Saves N thunk
+ * allocations per component render in the 99% case.
+ *
+ * Emitted by the compiler — not generally meant for hand-written code.
+ */
+export function _wrapSpread(
+  source: Record<string, unknown> | null | undefined,
+): Record<string, unknown> | null | undefined {
+  if (!source || typeof source !== 'object') return source
+  const descriptors = Object.getOwnPropertyDescriptors(source)
+  let hasGetter = false
+  for (const k in descriptors) {
+    if (descriptors[k]!.get) {
+      hasGetter = true
+      break
+    }
+  }
+  if (!hasGetter) return source
+
+  const result: Record<string, unknown> = {}
+  // Reflect.ownKeys covers symbol keys too — REACTIVE_PROP brands and
+  // other framework symbols must round-trip through the wrap.
+  for (const key of Reflect.ownKeys(source)) {
+    const desc = descriptors[key as string]
+    if (!desc) continue
+    if (desc.get) {
+      const fn: () => unknown = () => source[key as string]
+      ;(fn as unknown as Record<symbol, boolean>)[REACTIVE_PROP] = true
+      result[key as string] = fn
+    } else {
+      // Static data property — copy through as-is.
+      result[key as string] = desc.value
+    }
+  }
+  return result
+}
+
 /**
  * Convert compiler-emitted `_rp(() => expr)` prop values into getter properties.
  *

package/src/tests/core.test.ts

@@ -982,7 +982,7 @@ describe('lifecycle hooks', () => {
 
 describe('edge cases', () => {
   test('h() with empty children array', () => {
-    const node = h('div', null, ...[])
+    const node = h('div', null, )
     expect(node.children).toEqual([])
   })
 

package/src/tests/defer.test.ts

@@ -0,0 +1,359 @@
+import { signal } from '@pyreon/reactivity'
+import { _setupIdleTrigger, _setupVisibleTrigger, Defer } from '../defer'
+import { Fragment, h } from '../h'
+import type { ComponentFn, Props, VNode } from '../types'
+
+// Helper: pull the render-callback out of Defer's returned VNode shape.
+// `when` and `idle` modes return a Fragment whose `children[0]` is a
+// thunk. `visible` mode returns a div whose `children[0]` is the same
+// thunk. Both shapes return the same `renderContent` accessor.
+function getRenderThunk(vnode: VNode): () => unknown {
+  const children = vnode.children as unknown[]
+  const thunk = children[0]
+  if (typeof thunk !== 'function') throw new Error('Expected render thunk')
+  return thunk as () => unknown
+}
+
+describe('Defer — common shape', () => {
+  test('returns a VNode (Fragment or wrapper div per trigger mode)', () => {
+    const result = Defer({
+      chunk: () => new Promise<{ default: ComponentFn<Props> }>(() => {}),
+      when: () => false,
+    })
+    expect(result).toBeDefined()
+    expect((result as VNode).type).toBe(Fragment)
+  })
+
+  test('renders fallback before chunk resolves', () => {
+    const fallback = h('span', null, 'loading…')
+    const vnode = Defer<Props>({
+      chunk: () => new Promise<{ default: ComponentFn<Props> }>(() => {}), // never resolves
+      when: () => true,
+      fallback,
+    })
+    expect(getRenderThunk(vnode)()).toBe(fallback)
+  })
+
+  test('renders null when no fallback and chunk has not resolved', () => {
+    const vnode = Defer<Props>({
+      chunk: () => new Promise<{ default: ComponentFn<Props> }>(() => {}),
+      when: () => true,
+    })
+    expect(getRenderThunk(vnode)()).toBeNull()
+  })
+})
+
+describe('Defer — when (signal-driven)', () => {
+  test('does NOT load chunk while when is false', () => {
+    let calls = 0
+    const chunkFn = () => {
+      calls++
+      return Promise.resolve({ default: (() => null) as ComponentFn<Props> })
+    }
+    const flag = signal(false)
+    Defer<Props>({ chunk: chunkFn, when: flag })
+    expect(calls).toBe(0)
+  })
+
+  test('loads chunk when when flips to true', async () => {
+    const Inner: ComponentFn<{ msg: string }> = (p) => h('div', null, p.msg)
+    let calls = 0
+    const chunkFn = () => {
+      calls++
+      return Promise.resolve({ default: Inner })
+    }
+    const flag = signal(false)
+    const vnode = Defer<{ msg: string }>({
+      chunk: chunkFn,
+      when: flag,
+      children: (Comp) => h(Comp, { msg: 'hi' }),
+    })
+    expect(calls).toBe(0)
+    flag.set(true)
+    // Effect schedules synchronously; chunk fetch is microtask-resolved.
+    expect(calls).toBe(1)
+    await new Promise((r) => setTimeout(r, 0))
+    const result = getRenderThunk(vnode)() as VNode
+    expect(result.type).toBe(Inner)
+    expect(result.props).toEqual({ msg: 'hi' })
+  })
+
+  test('loads chunk EXACTLY ONCE when signal oscillates', async () => {
+    let calls = 0
+    const chunkFn = () => {
+      calls++
+      return Promise.resolve({ default: (() => null) as ComponentFn<Props> })
+    }
+    const flag = signal(false)
+    Defer<Props>({ chunk: chunkFn, when: flag })
+    flag.set(true)
+    flag.set(false)
+    flag.set(true)
+    flag.set(false)
+    flag.set(true)
+    await new Promise((r) => setTimeout(r, 0))
+    expect(calls).toBe(1)
+  })
+
+  test('accepts component re-exports without default wrapper', async () => {
+    const Inner: ComponentFn = () => h('span', null, 'ok')
+    const flag = signal(true)
+    const vnode = Defer<Props>({
+      chunk: () => Promise.resolve(Inner), // bare ComponentFn
+      when: flag,
+      children: (Comp) => h(Comp, {}),
+    })
+    await new Promise((r) => setTimeout(r, 0))
+    const result = getRenderThunk(vnode)() as VNode
+    expect(result.type).toBe(Inner)
+  })
+
+  test('throws when chunk() rejects (Suspense-style error propagation)', async () => {
+    const consoleSpy = (() => {
+      const orig = console.error
+      console.error = () => {} // silence dev-mode error log
+      return () => {
+        console.error = orig
+      }
+    })()
+    try {
+      const flag = signal(true)
+      const vnode = Defer<Props>({
+        chunk: () => Promise.reject(new Error('chunk boom')),
+        when: flag,
+      })
+      await new Promise((r) => setTimeout(r, 0))
+      expect(() => getRenderThunk(vnode)()).toThrow('chunk boom')
+    } finally {
+      consoleSpy()
+    }
+  })
+
+  test('renders default <Comp /> when children render-prop omitted', async () => {
+    const Inner: ComponentFn = () => h('div', null, 'no-children-prop')
+    const flag = signal(true)
+    const vnode = Defer<Props>({
+      chunk: () => Promise.resolve({ default: Inner }),
+      when: flag,
+    })
+    await new Promise((r) => setTimeout(r, 0))
+    const result = getRenderThunk(vnode)() as VNode
+    expect(result.type).toBe(Inner)
+    expect(result.props).toEqual({})
+  })
+})
+
+describe('Defer — on="visible"', () => {
+  test('returns a div wrapper with data-pyreon-defer="visible"', () => {
+    const vnode = Defer<Props>({
+      chunk: () => new Promise<{ default: ComponentFn<Props> }>(() => {}),
+      on: 'visible',
+    })
+    expect((vnode as VNode).type).toBe('div')
+    expect((vnode as VNode).props['data-pyreon-defer']).toBe('visible')
+  })
+
+  test('uses display: contents so wrapper is layout-transparent', () => {
+    const vnode = Defer<Props>({
+      chunk: () => new Promise<{ default: ComponentFn<Props> }>(() => {}),
+      on: 'visible',
+    })
+    expect((vnode as VNode).props.style).toBe('display: contents')
+  })
+
+  test('default rootMargin is 200px (not exposed via prop spread)', () => {
+    // The rootMargin is consumed by onMount; we can't directly observe
+    // it from the returned VNode. This test documents the default and
+    // would catch a regression in the constant.
+    const vnode = Defer<Props>({
+      chunk: () => new Promise<{ default: ComponentFn<Props> }>(() => {}),
+      on: 'visible',
+    })
+    // Wrapper has the structural attrs but no rootMargin leak to DOM.
+    expect((vnode as VNode).props.rootMargin).toBeUndefined()
+  })
+})
+
+describe('Defer — on="idle"', () => {
+  test('returns a Fragment (no wrapper element)', () => {
+    const vnode = Defer<Props>({
+      chunk: () => new Promise<{ default: ComponentFn<Props> }>(() => {}),
+      on: 'idle',
+    })
+    expect((vnode as VNode).type).toBe(Fragment)
+  })
+})
+
+// Browser-API helpers extracted from the onMount callbacks so they're
+// directly testable without happy-dom (core tests run in Node). The
+// onMount wrappers in `defer.ts` just delegate to these.
+describe('_setupIdleTrigger', () => {
+  // Use `Reflect.has` + property descriptors instead of plain assignment
+  // so the restore is symmetric — if the global wasn't defined at test
+  // start (Node), `delete` cleanly returns to the original state.
+  const orig = {
+    ric: (globalThis as { requestIdleCallback?: unknown }).requestIdleCallback,
+    cic: (globalThis as { cancelIdleCallback?: unknown }).cancelIdleCallback,
+  }
+  afterEach(() => {
+    if (orig.ric === undefined) delete (globalThis as { requestIdleCallback?: unknown }).requestIdleCallback
+    else (globalThis as { requestIdleCallback?: unknown }).requestIdleCallback = orig.ric
+    if (orig.cic === undefined) delete (globalThis as { cancelIdleCallback?: unknown }).cancelIdleCallback
+    else (globalThis as { cancelIdleCallback?: unknown }).cancelIdleCallback = orig.cic
+  })
+
+  test('uses requestIdleCallback when available', () => {
+    let captured: (() => void) | null = null
+    ;(globalThis as { requestIdleCallback?: unknown }).requestIdleCallback = (
+      cb: () => void,
+    ): number => {
+      captured = cb
+      return 42
+    }
+    let cancelledId: number | null = null
+    ;(globalThis as { cancelIdleCallback?: unknown }).cancelIdleCallback = (
+      id: number,
+    ): void => {
+      cancelledId = id
+    }
+    const startLoad = () => {}
+    const teardown = _setupIdleTrigger(startLoad)
+    expect(captured).toBe(startLoad)
+    teardown()
+    expect(cancelledId).toBe(42)
+  })
+
+  test('teardown is no-op when cancelIdleCallback is missing', () => {
+    ;(globalThis as { requestIdleCallback?: unknown }).requestIdleCallback = (
+      _cb: () => void,
+    ): number => 99
+    delete (globalThis as { cancelIdleCallback?: unknown }).cancelIdleCallback
+    const teardown = _setupIdleTrigger(() => {})
+    expect(() => teardown()).not.toThrow()
+  })
+
+  test('falls back to setTimeout when requestIdleCallback is absent', async () => {
+    delete (globalThis as { requestIdleCallback?: unknown }).requestIdleCallback
+    let loaded = false
+    const teardown = _setupIdleTrigger(() => {
+      loaded = true
+    })
+    // setTimeout(fn, 1) fires after a tick — await to observe.
+    await new Promise((r) => setTimeout(r, 5))
+    expect(loaded).toBe(true)
+    teardown() // safe to call after the timer fired
+  })
+
+  test('setTimeout fallback cancels via clearTimeout when teardown fires before tick', () => {
+    delete (globalThis as { requestIdleCallback?: unknown }).requestIdleCallback
+    let loaded = false
+    const teardown = _setupIdleTrigger(() => {
+      loaded = true
+    })
+    teardown() // cancel before the timer fires
+    return new Promise<void>((r) =>
+      setTimeout(() => {
+        expect(loaded).toBe(false)
+        r()
+      }, 10),
+    )
+  })
+})
+
+describe('_setupVisibleTrigger', () => {
+  const origObs = (globalThis as { IntersectionObserver?: unknown }).IntersectionObserver
+  afterEach(() => {
+    if (origObs === undefined) delete (globalThis as { IntersectionObserver?: unknown }).IntersectionObserver
+    else (globalThis as { IntersectionObserver?: unknown }).IntersectionObserver = origObs
+  })
+
+  test('loads immediately when el is null', () => {
+    let loaded = false
+    const teardown = _setupVisibleTrigger(null, () => {
+      loaded = true
+    }, '200px')
+    expect(loaded).toBe(true)
+    expect(typeof teardown).toBe('function')
+  })
+
+  test('loads immediately when IntersectionObserver is unavailable', () => {
+    delete (globalThis as { IntersectionObserver?: unknown }).IntersectionObserver
+    // Pass a stub element; without the global the trigger should bail early.
+    const stubEl = {} as unknown as HTMLElement
+    let loaded = false
+    _setupVisibleTrigger(stubEl, () => {
+      loaded = true
+    }, '200px')
+    expect(loaded).toBe(true)
+  })
+
+  test('creates an observer with the configured rootMargin', () => {
+    let capturedOptions: IntersectionObserverInit | undefined
+    let observed: Element | null = null
+    let disconnected = false
+    class StubObserver {
+      callback: IntersectionObserverCallback
+      constructor(cb: IntersectionObserverCallback, opts?: IntersectionObserverInit) {
+        this.callback = cb
+        capturedOptions = opts
+      }
+      observe(el: Element) {
+        observed = el
+      }
+      disconnect() {
+        disconnected = true
+      }
+      unobserve() {}
+      takeRecords() {
+        return []
+      }
+    }
+    ;(globalThis as { IntersectionObserver?: unknown }).IntersectionObserver = StubObserver
+    const stubEl = { tagName: 'DIV' } as unknown as HTMLElement
+    const teardown = _setupVisibleTrigger(stubEl, () => {}, '300px')
+    expect(observed).toBe(stubEl)
+    expect(capturedOptions?.rootMargin).toBe('300px')
+    teardown()
+    expect(disconnected).toBe(true)
+  })
+
+  test('fires startLoad on intersection, then disconnects', () => {
+    let captured: IntersectionObserverCallback | null = null
+    let disconnected = false
+    class StubObserver {
+      constructor(cb: IntersectionObserverCallback) {
+        captured = cb
+      }
+      observe() {}
+      disconnect() {
+        disconnected = true
+      }
+      unobserve() {}
+      takeRecords() {
+        return []
+      }
+    }
+    ;(globalThis as { IntersectionObserver?: unknown }).IntersectionObserver = StubObserver
+    let loaded = false
+    const stubEl = {} as unknown as HTMLElement
+    _setupVisibleTrigger(stubEl, () => {
+      loaded = true
+    }, '0px')
+
+    // Simulate non-intersecting entry — should NOT fire.
+    captured!(
+      [{ isIntersecting: false } as unknown as IntersectionObserverEntry],
+      {} as IntersectionObserver,
+    )
+    expect(loaded).toBe(false)
+    expect(disconnected).toBe(false)
+
+    // Simulate intersecting entry — fires and disconnects.
+    captured!(
+      [{ isIntersecting: true } as unknown as IntersectionObserverEntry],
+      {} as IntersectionObserver,
+    )
+    expect(loaded).toBe(true)
+    expect(disconnected).toBe(true)
+  })
+})

package/src/tests/extract-props-overloads.types.test.ts

@@ -0,0 +1,135 @@
+/**
+ * Compile-time type tests for `ExtractProps` multi-overload narrowing.
+ *
+ * Regression: pre-fix, `ExtractProps<T>` collapsed multi-overload functions
+ * to the LAST overload's props — TS's overload-resolution-against-conditional-
+ * types semantics. Multi-overload primitives (Iterator / List / Element in
+ * `@pyreon/elements`) silently downgraded their public prop surface to the
+ * loosest overload when wrapped through `rocketstyle()` / `attrs()`. The
+ * fix matches up to 4 call signatures via pattern matching and produces the
+ * UNION of every overload's first-argument type.
+ *
+ * Mirrors vitus-labs PR #222. Kept in sync across the 4 copies in
+ * `@pyreon/core`, `@pyreon/elements`, `@pyreon/attrs`, and `@pyreon/rocketstyle`
+ * — the canonical reference test lives here.
+ */
+
+import { describe, expectTypeOf, it } from 'vitest'
+import type { ComponentFn, ExtractProps, VNodeChild } from '../index'
+
+describe('ExtractProps — single-overload functions still work', () => {
+  it('extracts props from a ComponentFn<P>', () => {
+    type Greet = ComponentFn<{ name: string }>
+    expectTypeOf<ExtractProps<Greet>>().toEqualTypeOf<{ name: string }>()
+  })
+
+  it('extracts props from a bare (props: P) => any signature', () => {
+    type Fn = (props: { count: number }) => string
+    expectTypeOf<ExtractProps<Fn>>().toEqualTypeOf<{ count: number }>()
+  })
+
+  it('passes through a non-function shape unchanged', () => {
+    type Props = { id: string; value: number }
+    expectTypeOf<ExtractProps<Props>>().toEqualTypeOf<Props>()
+  })
+})
+
+describe('ExtractProps — multi-overload narrowing (load-bearing assertions)', () => {
+  it('unions both arms of a 2-overload function', () => {
+    interface TwoOverloads {
+      (props: { kind: 'a'; value: number }): VNodeChild
+      (props: { kind: 'b'; value: string }): VNodeChild
+    }
+    type Props = ExtractProps<TwoOverloads>
+    // Both shapes appear in the extracted union.
+    expectTypeOf<Props>().toEqualTypeOf<
+      { kind: 'a'; value: number } | { kind: 'b'; value: string }
+    >()
+  })
+
+  it('unions all three arms of a 3-overload function (Iterator/List/Element shape)', () => {
+    interface ThreeOverloads {
+      (props: { mode: 'simple'; data: string[] }): VNodeChild
+      (props: { mode: 'object'; data: { id: number }[] }): VNodeChild
+      (props: { mode: 'children'; children: unknown }): VNodeChild
+    }
+    type Props = ExtractProps<ThreeOverloads>
+    expectTypeOf<Props>().toEqualTypeOf<
+      | { mode: 'simple'; data: string[] }
+      | { mode: 'object'; data: { id: number }[] }
+      | { mode: 'children'; children: unknown }
+    >()
+  })
+
+  it('unions all four arms of a 4-overload function', () => {
+    interface FourOverloads {
+      (props: { variant: 'a' }): VNodeChild
+      (props: { variant: 'b' }): VNodeChild
+      (props: { variant: 'c' }): VNodeChild
+      (props: { variant: 'd' }): VNodeChild
+    }
+    type Props = ExtractProps<FourOverloads>
+    expectTypeOf<Props>().toEqualTypeOf<
+      { variant: 'a' } | { variant: 'b' } | { variant: 'c' } | { variant: 'd' }
+    >()
+  })
+})
+
+describe('ExtractProps — bisect-load-bearing: pre-fix shape would FAIL these', () => {
+  /**
+   * If `ExtractProps<T>` were reverted to `T extends ComponentFn<infer P> ? P : T`,
+   * each of these would extract only the LAST overload's props and the
+   * `toEqualTypeOf<union>` check would fail at compile time. This is the
+   * structural anchor — the load-bearing regression guard.
+   */
+
+  it('a 2-overload function MUST extract BOTH arms (not just the last)', () => {
+    interface OverloadedComp {
+      (props: { mode: 'a'; valueA: number }): VNodeChild
+      (props: { mode: 'b'; valueB: string }): VNodeChild
+    }
+    // The first arm `{ mode: 'a'; valueA: number }` must be present in the
+    // union. Pre-fix, the conditional collapsed to just the LAST arm.
+    type Props = ExtractProps<OverloadedComp>
+    // Assignability check: both shapes must be assignable to the extracted type.
+    const a: Props = { mode: 'a', valueA: 1 }
+    const b: Props = { mode: 'b', valueB: 'x' }
+    void a
+    void b
+  })
+
+  it("a 3-overload Iterator-shaped surface MUST surface SimpleProps + ObjectProps + ChildrenProps", () => {
+    // Synthetic Iterator overload-shape — mirrors the real
+    // `@pyreon/elements` Iterator. The structural failure mode pre-fix:
+    // `ExtractProps<typeof Iterator>` returned just `ChildrenProps`, so any
+    // HOC wrapping (rocketstyle, attrs) lost the SimpleProps + ObjectProps
+    // surfaces from the public typed API.
+    type SimpleItem = ComponentFn<{ value: string }>
+    type ObjectItem = ComponentFn<{ id: number }>
+    interface IteratorLike {
+      <T extends string | number>(props: {
+        data: T[]
+        component: SimpleItem
+        valueName?: string
+      }): VNodeChild
+      <T extends { id: number }>(props: {
+        data: T[]
+        component: ObjectItem
+      }): VNodeChild
+      (props: { children: VNodeChild }): VNodeChild
+    }
+    type Props = ExtractProps<IteratorLike>
+
+    const noopSimple: SimpleItem = () => null
+    const noopObject: ObjectItem = () => null
+    // SimpleProps arm assignable:
+    const simple: Props = { data: ['a', 'b'], component: noopSimple, valueName: 'text' }
+    // ObjectProps arm assignable:
+    const obj: Props = { data: [{ id: 1 }], component: noopObject }
+    // ChildrenProps arm assignable:
+    const ch: Props = { children: null }
+    void simple
+    void obj
+    void ch
+  })
+})

package/src/tests/for.test.ts

@@ -91,4 +91,27 @@ describe('For', () => {
     expect((result as VNode).type).toBe('li')
     expect((result as VNode).key).toBe(1)
   })
+
+  // Regression: `ForProps.each` previously typed as `() => T[]` only.
+  // Users writing `<For each={items}>` (with `items: T[]` directly) hit
+  // a confusing TS error: `Type 'T[]' is not assignable to type
+  // '() => T[]'`. The runtime in `runtime-dom/src/mount.ts:144-147`
+  // already accepted both shapes — only the type was forcing the
+  // accessor form. Type now accepts `T[] | (() => T[])` so users with
+  // already-resolved arrays don't need to wrap them in a thunk just to
+  // satisfy the type.
+  test('each accepts T[] directly (not just () => T[])', () => {
+    // TypeScript-level test: this would not compile pre-fix.
+    const items = [1, 2, 3]
+    const childFn = (n: number): VNode => h('li', { key: n }, String(n))
+    const node = For<number>({ each: items, by: (n) => n, children: childFn })
+    expect(node.type).toBe(ForSymbol as unknown as string)
+    // Both shapes still work — function form continues to typecheck.
+    const node2 = For<number>({
+      each: () => items,
+      by: (n) => n,
+      children: childFn,
+    })
+    expect(node2.type).toBe(ForSymbol as unknown as string)
+  })
 })

package/src/tests/h.test.ts

@@ -176,6 +176,27 @@ describe('h() — VNode creation', () => {
       expect(outer.children).toHaveLength(2)
       expect((outer.children[0] as VNode).type).toBe(Fragment)
     })
+
+    // Regression: pre-fix, `Fragment` was `Symbol('Pyreon.Fragment')` — a
+    // fresh symbol per module evaluation. When `h.ts` got bundled into BOTH
+    // `lib/index.js` AND `lib/jsx-runtime.js` (each a separate published
+    // entry point), each bundle created a DISTINCT Symbol identity. JSX
+    // `<>` compiles to `jsx(Fragment, ...)` referring to jsx-runtime's
+    // Fragment; `runtime-server` checks `vnode.type === Fragment` against
+    // `@pyreon/core`'s main-entry Fragment. The two never matched →
+    // fell through to `renderElement` → tried to stringify the Symbol →
+    // SSG crashed with `TypeError: Cannot convert a Symbol value to
+    // a string`.
+    //
+    // Fix: use `Symbol.for('Pyreon.Fragment')` — the global registry keys
+    // by string, so all bundles inlining h.ts share the same identity.
+    //
+    // This test asserts the global-registry contract: Fragment IS
+    // retrievable from the registry. Bisect-verifiable: reverting h.ts to
+    // `Symbol(...)` makes this fail.
+    test('Fragment uses Symbol.for() for cross-bundle identity stability', () => {
+      expect(Fragment).toBe(Symbol.for('Pyreon.Fragment'))
+    })
   })
 })