@pyreon/runtime-dom 0.24.5 → 0.24.6

package/src/tests/lifecycle-integration.test.tsx

@@ -1,342 +0,0 @@
-import { defineComponent, For, h, onMount, onUnmount, Show } from '@pyreon/core'
-import { signal } from '@pyreon/reactivity'
-import { mount } from '../index'
-
-// ─── Helpers ────────────────────────────────────────────────────────────────
-
-function container(): HTMLElement {
-  const el = document.createElement('div')
-  document.body.appendChild(el)
-  return el
-}
-
-afterEach(() => {
-  document.body.innerHTML = ''
-})
-
-// ─── Show toggle ────────────────────────────────────────────────────────────
-
-describe('lifecycle — Show toggle', () => {
-  test('show=true — child mounts, signal reactive', () => {
-    const el = container()
-    const text = signal('hello')
-    mount(
-      h(Show, { when: () => true }, h('div', null, () => text())),
-      el,
-    )
-    expect(el.textContent).toBe('hello')
-    text.set('world')
-    expect(el.textContent).toBe('world')
-  })
-
-  test('show=false — child unmounts', () => {
-    const el = container()
-    const visible = signal(false)
-    mount(
-      h(Show, { when: visible }, h('div', { id: 'child' }, 'content')),
-      el,
-    )
-    expect(el.querySelector('#child')).toBeNull()
-  })
-
-  test('show=true again — fresh mount, signal still reactive', () => {
-    const el = container()
-    const visible = signal(true)
-    const text = signal('initial')
-    mount(
-      h(Show, { when: visible }, h('div', { id: 'child' }, () => text())),
-      el,
-    )
-    expect(el.querySelector('#child')?.textContent).toBe('initial')
-
-    // Hide
-    visible.set(false)
-    expect(el.querySelector('#child')).toBeNull()
-
-    // Show again
-    visible.set(true)
-    expect(el.querySelector('#child')).not.toBeNull()
-
-    // Signal should still be reactive in new mount
-    text.set('updated')
-    expect(el.querySelector('#child')?.textContent).toBe('updated')
-  })
-
-  test('rapid toggle (true -> false -> true) — no duplicate effects', () => {
-    const el = container()
-    const visible = signal(true)
-    let mountCount = 0
-
-    const Child = defineComponent(() => {
-      mountCount++
-      return h('div', null, 'child')
-    })
-
-    mount(h(Show, { when: visible }, h(Child, null)), el)
-    expect(mountCount).toBe(1)
-
-    // Rapid toggle
-    visible.set(false)
-    visible.set(true)
-    // After rapid toggle, component should be mounted exactly once more
-    expect(mountCount).toBe(2)
-
-    visible.set(false)
-    visible.set(true)
-    expect(mountCount).toBe(3)
-  })
-})
-
-// ─── For list ───────────────────────────────────────────────────────────────
-
-describe('lifecycle — For list', () => {
-  type Item = { id: number; label: string }
-
-  test('render list of 3 items — 3 DOM nodes', () => {
-    const el = container()
-    const items = signal<Item[]>([
-      { id: 1, label: 'Alice' },
-      { id: 2, label: 'Bob' },
-      { id: 3, label: 'Charlie' },
-    ])
-    mount(
-      h(
-        'ul',
-        null,
-        For({ each: items, by: (r) => r.id, children: (r) => h('li', { key: r.id }, r.label) }),
-      ),
-      el,
-    )
-    expect(el.querySelectorAll('li').length).toBe(3)
-    expect(el.querySelectorAll('li')[0]?.textContent).toBe('Alice')
-    expect(el.querySelectorAll('li')[1]?.textContent).toBe('Bob')
-    expect(el.querySelectorAll('li')[2]?.textContent).toBe('Charlie')
-  })
-
-  test('add item — 4 DOM nodes, existing unchanged', () => {
-    const el = container()
-    const items = signal<Item[]>([
-      { id: 1, label: 'Alice' },
-      { id: 2, label: 'Bob' },
-      { id: 3, label: 'Charlie' },
-    ])
-    mount(
-      h(
-        'ul',
-        null,
-        For({ each: items, by: (r) => r.id, children: (r) => h('li', { key: r.id }, r.label) }),
-      ),
-      el,
-    )
-    const firstLi = el.querySelectorAll('li')[0]
-
-    items.set([...items(), { id: 4, label: 'Dave' }])
-    expect(el.querySelectorAll('li').length).toBe(4)
-    expect(el.querySelectorAll('li')[3]?.textContent).toBe('Dave')
-    // Existing nodes should be reused (same DOM identity)
-    expect(el.querySelectorAll('li')[0]).toBe(firstLi)
-  })
-
-  test('remove item — 2 DOM nodes', () => {
-    const el = container()
-    const items = signal<Item[]>([
-      { id: 1, label: 'Alice' },
-      { id: 2, label: 'Bob' },
-      { id: 3, label: 'Charlie' },
-    ])
-    mount(
-      h(
-        'ul',
-        null,
-        For({ each: items, by: (r) => r.id, children: (r) => h('li', { key: r.id }, r.label) }),
-      ),
-      el,
-    )
-    items.set([{ id: 1, label: 'Alice' }, { id: 3, label: 'Charlie' }])
-    expect(el.querySelectorAll('li').length).toBe(2)
-    expect(el.querySelectorAll('li')[0]?.textContent).toBe('Alice')
-    expect(el.querySelectorAll('li')[1]?.textContent).toBe('Charlie')
-  })
-
-  test('update item signal — only that item DOM changes', () => {
-    const el = container()
-    const items = signal([
-      { id: 1, name: signal('Alice') },
-      { id: 2, name: signal('Bob') },
-    ])
-    mount(
-      h(
-        'ul',
-        null,
-        For({
-          each: items,
-          by: (r) => r.id,
-          children: (r) => h('li', { key: r.id }, () => r.name()),
-        }),
-      ),
-      el,
-    )
-    expect(el.querySelectorAll('li')[0]?.textContent).toBe('Alice')
-
-    // Update only the first item's signal
-    items()[0]!.name.set('Alicia')
-    expect(el.querySelectorAll('li')[0]?.textContent).toBe('Alicia')
-    // Second item unchanged
-    expect(el.querySelectorAll('li')[1]?.textContent).toBe('Bob')
-  })
-
-  test('reorder items — DOM reordered without remount', () => {
-    const el = container()
-    const r1: Item = { id: 1, label: 'a' }
-    const r2: Item = { id: 2, label: 'b' }
-    const r3: Item = { id: 3, label: 'c' }
-    const items = signal<Item[]>([r1, r2, r3])
-    mount(
-      h(
-        'ul',
-        null,
-        For({ each: items, by: (r) => r.id, children: (r) => h('li', { key: r.id }, r.label) }),
-      ),
-      el,
-    )
-    const origLi1 = el.querySelectorAll('li')[0]
-    const origLi2 = el.querySelectorAll('li')[1]
-    const origLi3 = el.querySelectorAll('li')[2]
-
-    // Reverse order
-    items.set([r3, r2, r1])
-    const lis = el.querySelectorAll('li')
-    expect(lis[0]?.textContent).toBe('c')
-    expect(lis[1]?.textContent).toBe('b')
-    expect(lis[2]?.textContent).toBe('a')
-    // DOM nodes should be reused (moved, not recreated)
-    expect(lis[0]).toBe(origLi3)
-    expect(lis[1]).toBe(origLi2)
-    expect(lis[2]).toBe(origLi1)
-  })
-})
-
-// ─── Effect cleanup ─────────────────────────────────────────────────────────
-
-describe('lifecycle — effect cleanup', () => {
-  test('effect inside component — runs on mount', () => {
-    const el = container()
-    let effectRan = false
-    const Comp = defineComponent(() => {
-      onMount(() => {
-        effectRan = true
-      })
-      return h('div', null, 'mounted')
-    })
-    mount(h(Comp, null), el)
-    expect(effectRan).toBe(true)
-  })
-
-  test('unmount component — effect cleaned up (verify via mock)', () => {
-    const el = container()
-    let cleanupCalled = false
-    const Comp = defineComponent(() => {
-      onMount(() => {
-        return () => {
-          cleanupCalled = true
-        }
-      })
-      return h('div', null, 'with-cleanup')
-    })
-    const unmount = mount(h(Comp, null), el)
-    expect(cleanupCalled).toBe(false)
-
-    unmount()
-    expect(cleanupCalled).toBe(true)
-  })
-
-  test('mount 10 components — unmount all — verify no lingering effects', () => {
-    const el = container()
-    let cleanupCount = 0
-    const totalComponents = 10
-
-    const Comp = defineComponent(() => {
-      onUnmount(() => {
-        cleanupCount++
-      })
-      return h('span', null, 'item')
-    })
-
-    const unmount = mount(
-      h(
-        'div',
-        null,
-        ...Array.from({ length: totalComponents }, (_, i) => h(Comp, { key: i })),
-      ),
-      el,
-    )
-    expect(el.querySelectorAll('span').length).toBe(totalComponents)
-
-    unmount()
-    expect(cleanupCount).toBe(totalComponents)
-  })
-})
-
-// ─── Deep nesting ───────────────────────────────────────────────────────────
-
-describe('lifecycle — deep nesting', () => {
-  test('4 levels of components with signals — all reactive', () => {
-    const el = container()
-    const s1 = signal('L1')
-    const s2 = signal('L2')
-    const s3 = signal('L3')
-    const s4 = signal('L4')
-
-    const Level4 = () => h('span', { class: 'l4' }, () => s4())
-    const Level3 = () => h('div', { class: 'l3' }, () => s3(), h(Level4, null))
-    const Level2 = () => h('div', { class: 'l2' }, () => s2(), h(Level3, null))
-    const Level1 = () => h('div', { class: 'l1' }, () => s1(), h(Level2, null))
-
-    mount(h(Level1, null), el)
-    expect(el.textContent).toContain('L1')
-    expect(el.textContent).toContain('L2')
-    expect(el.textContent).toContain('L3')
-    expect(el.textContent).toContain('L4')
-
-    s1.set('L1-updated')
-    expect(el.textContent).toContain('L1-updated')
-
-    s4.set('L4-updated')
-    expect(el.textContent).toContain('L4-updated')
-
-    // Middle levels also reactive
-    s2.set('L2-updated')
-    s3.set('L3-updated')
-    expect(el.textContent).toContain('L2-updated')
-    expect(el.textContent).toContain('L3-updated')
-  })
-
-  test('unmount root — all nested effects cleaned', () => {
-    const el = container()
-    let cleanupCount = 0
-
-    const Level4 = defineComponent(() => {
-      onUnmount(() => { cleanupCount++ })
-      return h('span', null, 'l4')
-    })
-    const Level3 = defineComponent(() => {
-      onUnmount(() => { cleanupCount++ })
-      return h('div', null, 'l3', h(Level4, null))
-    })
-    const Level2 = defineComponent(() => {
-      onUnmount(() => { cleanupCount++ })
-      return h('div', null, 'l2', h(Level3, null))
-    })
-    const Level1 = defineComponent(() => {
-      onUnmount(() => { cleanupCount++ })
-      return h('div', null, 'l1', h(Level2, null))
-    })
-
-    const unmount = mount(h(Level1, null), el)
-    expect(el.textContent).toContain('l1')
-    expect(el.textContent).toContain('l4')
-
-    unmount()
-    expect(cleanupCount).toBe(4)
-  })
-})

package/src/tests/lis-prepend.browser.test.ts

@@ -1,99 +0,0 @@
-import { For, h } from '@pyreon/core'
-import { signal } from '@pyreon/reactivity'
-import { flush, mountInBrowser } from '@pyreon/test-utils/browser'
-import { describe, expect, it } from 'vitest'
-
-// Real-Chromium coverage for the `computeForLis` known-slot fast path.
-// happy-dom is fine for op-counting the LIS probes but doesn't prove the
-// reconciler actually lays out the DOM in the right order after a prepend.
-// A bug in the fast path would silently corrupt the DOM under real CSS
-// layout — caught here, not in the vitest happy-dom suite.
-
-function buildRows(count: number, offset = 0): Array<{ id: number; label: string }> {
-  return Array.from({ length: count }, (_, i) => ({
-    id: i + offset,
-    label: `row-${i + offset}`,
-  }))
-}
-
-describe('runtime-dom LIS prepend fast path', () => {
-  it('prepends 100 rows to a 100-row list, DOM matches the signal order', async () => {
-    type Row = { id: number; label: string }
-    const rows = signal<Row[]>(buildRows(100, 0))
-    const { container, unmount } = mountInBrowser(
-      h(
-        'ul',
-        { id: 'list' },
-        For({
-          each: rows,
-          by: (r: Row) => r.id,
-          children: (r: Row) => h('li', { 'data-id': String(r.id) }, r.label),
-        }),
-      ),
-    )
-
-    let items = container.querySelectorAll<HTMLLIElement>('#list li')
-    expect(items).toHaveLength(100)
-    expect(items[0]?.dataset.id).toBe('0')
-    expect(items[99]?.dataset.id).toBe('99')
-
-    // Prepend 100 new rows with ids 100..199. Final list: [100..199, 0..99].
-    const prepended = buildRows(100, 100)
-    rows.set([...prepended, ...rows()])
-    await flush()
-
-    items = container.querySelectorAll<HTMLLIElement>('#list li')
-    expect(items).toHaveLength(200)
-    // First 100 items must be the prepended rows in order.
-    expect(items[0]?.dataset.id).toBe('100')
-    expect(items[99]?.dataset.id).toBe('199')
-    // Next 100 must be the original rows in original order.
-    expect(items[100]?.dataset.id).toBe('0')
-    expect(items[199]?.dataset.id).toBe('99')
-    unmount()
-  })
-
-  it('measured prepend wall-clock stays in the expected range', async () => {
-    // HONEST framing: the LIS fast path saves ~50-100 µs on a 1k prepend.
-    // The full prepend cost is dominated by DOM work (~5-20 ms in real
-    // Chromium for 1k <li> nodes). This test measures the full wall-clock
-    // to give a realistic upper bound — the LIS save is a single-digit
-    // percent improvement, not a headline win.
-    //
-    // Assertion bound is intentionally loose (< 500 ms). The purpose is
-    // to anchor a "is this catastrophically slow" ceiling, not to prove
-    // the LIS fix is responsible for any particular chunk of time.
-    type Row = { id: number; label: string }
-    const rows = signal<Row[]>(buildRows(1000, 0))
-    const { container, unmount } = mountInBrowser(
-      h(
-        'ul',
-        { id: 'perf-list' },
-        For({
-          each: rows,
-          by: (r: Row) => r.id,
-          children: (r: Row) => h('li', { 'data-id': String(r.id) }, r.label),
-        }),
-      ),
-    )
-
-    // Warm up — first mount allocates backing arrays.
-    await flush()
-    expect(container.querySelectorAll('#perf-list li')).toHaveLength(1000)
-
-    const prepended = buildRows(1000, 1000)
-    const t0 = performance.now()
-    rows.set([...prepended, ...rows()])
-    await flush()
-    const elapsed = performance.now() - t0
-
-    // oxlint-disable-next-line no-console
-    console.log(`[lis-prepend] 1k→2k prepend wall-clock: ${elapsed.toFixed(2)}ms`)
-
-    expect(container.querySelectorAll('#perf-list li')).toHaveLength(2000)
-    // Loose ceiling. Real Chromium typically lands at 10-50ms. We're not
-    // asserting the LIS win — we're asserting the whole path didn't break.
-    expect(elapsed).toBeLessThan(500)
-    unmount()
-  })
-})

package/src/tests/manifest-snapshot.test.ts

@@ -1,85 +0,0 @@
-import {
-  renderApiReferenceEntries,
-  renderLlmsFullSection,
-  renderLlmsTxtLine,
-} from '@pyreon/manifest'
-import runtimeDomManifest from '../manifest'
-
-describe('gen-docs — runtime-dom snapshot', () => {
-  it('renders @pyreon/runtime-dom to its expected llms.txt bullet', () => {
-    expect(renderLlmsTxtLine(runtimeDomManifest)).toMatchInlineSnapshot(`"- @pyreon/runtime-dom — DOM renderer, mount, hydrateRoot, Transition, TransitionGroup, KeepAlive, SVG/MathML namespace, custom elements. SVG and MathML elements ALWAYS use \`setAttribute()\` for prop forwarding, never property assignment. Many SVG properties (\`markerWidth\`, \`refX\`, etc.) are read-only \`SVGAnimatedLength\` getters — \`el[key] = value\` crashes. Detected by \`el.namespaceURI !== "http://www.w3.org/1999/xhtml"\`."`)
-  })
-
-  it('renders @pyreon/runtime-dom to its expected llms-full.txt section — full body snapshot', () => {
-    expect(renderLlmsFullSection(runtimeDomManifest)).toMatchInlineSnapshot(`
-      "## @pyreon/runtime-dom — DOM Renderer
-
-      Surgical signal-to-DOM renderer with zero virtual DOM overhead. The compiler emits \`_tpl()\` (cloneNode-based template instantiation) + \`_bind()\` (per-node reactive bindings) calls that mount directly to the DOM without VNode diffing. Reactive text uses \`TextNode.data\` assignment (not \`.textContent\`) for minimal DOM mutation. Supports SVG/MathML namespace auto-detection (67 tags), custom elements (props as properties), CSS transitions via \`<Transition>\` / \`<TransitionGroup>\`, and component caching via \`<KeepAlive>\`. Dev-mode warnings use \`import.meta.env.DEV\` (not \`typeof process\`) so they tree-shake to zero bytes in production Vite builds.
-
-      \`\`\`typescript
-      import { mount, hydrateRoot, Transition, TransitionGroup, KeepAlive } from "@pyreon/runtime-dom"
-      import { signal } from "@pyreon/reactivity"
-      import { Show, For } from "@pyreon/core"
-
-      // Mount — clears container, returns unmount function
-      const unmount = mount(<App />, document.getElementById("app")!)
-
-      // Hydrate SSR-rendered HTML (preserves existing DOM)
-      hydrateRoot(<App />, document.getElementById("app")!)
-
-      // Transition — CSS-based enter/leave animations
-      const visible = signal(true)
-      const FadeExample = () => (
-        <Transition name="fade" mode="out-in">
-          <Show when={visible()}>
-            <div>Content</div>
-          </Show>
-        </Transition>
-      )
-      // CSS: .fade-enter-active, .fade-leave-active { transition: opacity 0.3s }
-      //      .fade-enter-from, .fade-leave-to { opacity: 0 }
-
-      // TransitionGroup — animate list items entering/leaving
-      const items = signal([1, 2, 3])
-      const ListExample = () => (
-        <TransitionGroup name="list">
-          <For each={items()} by={i => i}>
-            {item => <div>{item}</div>}
-          </For>
-        </TransitionGroup>
-      )
-
-      // KeepAlive — cache component state across mount/unmount cycles
-      const tab = signal<"a" | "b">("a")
-      const TabExample = () => (
-        <KeepAlive>
-          <Show when={tab() === "a"}><ExpensiveA /></Show>
-          <Show when={tab() === "b"}><ExpensiveB /></Show>
-        </KeepAlive>
-      )
-      \`\`\`
-
-      > **SVG/MathML uses setAttribute only**: SVG and MathML elements ALWAYS use \`setAttribute()\` for prop forwarding, never property assignment. Many SVG properties (\`markerWidth\`, \`refX\`, etc.) are read-only \`SVGAnimatedLength\` getters — \`el[key] = value\` crashes. Detected by \`el.namespaceURI !== "http://www.w3.org/1999/xhtml"\`.
-      >
-      > **Custom elements use property assignment**: Elements with a hyphen in their tag name (custom elements) get props set as JS properties, not HTML attributes. This matches the web components spec — attributes are strings, properties can be any type.
-      >
-      > **Transition 5s safety timeout**: If \`transitionend\` or \`animationend\` never fires (missing CSS, display:none, zero-duration), the transition completes automatically after 5 seconds to prevent stuck UI.
-      >
-      > **Dev warnings use import.meta.env.DEV**: All dev-mode warnings (\`mount()\` null container, duplicate keys, raw signal children) use \`import.meta.env.DEV\` — NOT \`typeof process\`. Vite/Rolldown literal-replaces it at build time; production bundles contain zero warning bytes. Tests run in vitest which sets DEV=true automatically.
-      >
-      > **Event delegation**: \`setupDelegation(container)\` is called by \`mount()\` — common events are delegated to the container root for performance. Direct event binding (non-delegated) is used for events that do not bubble (focus, blur, scroll, etc.).
-      "
-    `)
-  })
-
-  it('renders @pyreon/runtime-dom to MCP api-reference entries — one per api[] item', () => {
-    const record = renderApiReferenceEntries(runtimeDomManifest)
-    // +1: __PYREON_DEVTOOLS__ (reactive-devtools hook surface).
-    expect(Object.keys(record).length).toBe(10)
-    expect(Object.keys(record)).toContain('runtime-dom/mount')
-    // Spot-check the flagship API — mount is the primary entry point
-    const mount = record['runtime-dom/mount']!
-    expect(mount.notes).toContain('container')
-    expect(mount.mistakes?.split('\n').length).toBeGreaterThan(2)
-  })
-})