@pyreon/runtime-dom 0.13.1 → 0.14.0

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

@@ -0,0 +1,99 @@
+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/runtime-dom.browser.test.ts

@@ -1,4 +1,4 @@
-import { For, h, Portal } from '@pyreon/core'
+import { For, h, Portal, _rp } from '@pyreon/core'
 import { signal } from '@pyreon/reactivity'
 import { flush, mountInBrowser } from '@pyreon/test-utils/browser'
 import { afterEach, describe, expect, it, vi } from 'vitest'
@@ -63,6 +63,68 @@ describe('runtime-dom in real browser', () => {
     unmount()
   })
 
+  it('keyed <For> with _rp-wrapped each (compiled JSX shape) renders + reacts to signal updates', async () => {
+    // Regression for the `<For each={signal}>` JSX form. The compiler emits
+    // `h(For, { each: _rp(() => rows()), ... })`. `makeReactiveProps` (via
+    // mountComponent) converts the `_rp`-branded function to a getter on
+    // `props.each`. `For()` then forwards those props onto a `ForSymbol`
+    // VNode, which reaches `mountChild`'s ForSymbol branch.
+    //
+    // Before the fix, that branch destructured `{ each, by, children }`
+    // eagerly — firing the getter and binding `each` to the *resolved
+    // array*, not the function. `mountFor` then crashed on `source()`
+    // (calling an array) and the list never rendered. This test produces
+    // the exact same vnode shape the compiler emits, so it catches the
+    // regression without needing a JSX transform pipeline in the test.
+    type Row = { id: number; label: string }
+    const rows = signal<Row[]>([
+      { id: 1, label: 'a' },
+      { id: 2, label: 'b' },
+      { id: 3, label: 'c' },
+    ])
+
+    const { container, unmount } = mountInBrowser(
+      h(
+        'ul',
+        { id: 'rp-list' },
+        h(For, {
+          each: _rp(() => rows()),
+          by: (r: Row) => r.id,
+          children: (r: Row) => h('li', { 'data-id': String(r.id) }, r.label),
+        }),
+      ),
+    )
+
+    let items = container.querySelectorAll<HTMLLIElement>('#rp-list li')
+    expect(items).toHaveLength(3)
+    expect(Array.from(items).map((el) => el.dataset.id)).toEqual(['1', '2', '3'])
+
+    // Signal-driven update — replace + reorder the list.
+    rows.set([
+      { id: 2, label: 'b' },
+      { id: 4, label: 'd' },
+      { id: 1, label: 'a' },
+    ])
+    await flush()
+
+    items = container.querySelectorAll<HTMLLIElement>('#rp-list li')
+    expect(items).toHaveLength(3)
+    expect(Array.from(items).map((el) => el.dataset.id)).toEqual(['2', '4', '1'])
+    expect(Array.from(items).map((el) => el.textContent)).toEqual(['b', 'd', 'a'])
+
+    // Append — confirms reactivity persists across multiple updates.
+    rows.set([
+      { id: 2, label: 'b' },
+      { id: 4, label: 'd' },
+      { id: 1, label: 'a' },
+      { id: 5, label: 'e' },
+    ])
+    await flush()
+    items = container.querySelectorAll<HTMLLIElement>('#rp-list li')
+    expect(items).toHaveLength(4)
+    unmount()
+  })
+
   it('creates SVG with the SVG namespace and updates reactive attributes via setAttribute', async () => {
     const x = signal(10)
     const { container, unmount } = mountInBrowser(

package/src/tests/template.test.ts

@@ -121,6 +121,70 @@ describe('_bindText', () => {
 
     dispose()
   })
+
+  test('skips DOM write when value unchanged (fast path)', () => {
+    const s = signal('same')
+    const node = document.createTextNode('')
+
+    const dispose = _bindText(s, node)
+    expect(node.data).toBe('same')
+
+    // Set same value — should skip the DOM write (next !== node.data is false)
+    s.set('same')
+    expect(node.data).toBe('same')
+
+    dispose()
+  })
+
+  test('fallback path: null/false/undefined → empty string', () => {
+    const s = signal<string | null | false | undefined>('text')
+    const getter = () => s()
+    const node = document.createTextNode('')
+
+    const dispose = _bindText(getter as unknown as Parameters<typeof _bindText>[0], node)
+    expect(node.data).toBe('text')
+
+    s.set(null)
+    expect(node.data).toBe('')
+
+    s.set(false)
+    expect(node.data).toBe('')
+
+    s.set(undefined)
+    expect(node.data).toBe('')
+
+    s.set('restored')
+    expect(node.data).toBe('restored')
+
+    dispose()
+  })
+
+  test('fallback path: skips DOM write when value unchanged', () => {
+    const s = signal('x')
+    const getter = () => s()
+    const node = document.createTextNode('')
+
+    const dispose = _bindText(getter as unknown as Parameters<typeof _bindText>[0], node)
+    expect(node.data).toBe('x')
+
+    s.set('x') // same value — skip
+    expect(node.data).toBe('x')
+
+    dispose()
+  })
+
+  test('number coercion via String()', () => {
+    const s = signal<number>(42)
+    const node = document.createTextNode('')
+
+    const dispose = _bindText(s, node)
+    expect(node.data).toBe('42')
+
+    s.set(0)
+    expect(node.data).toBe('0')
+
+    dispose()
+  })
 })
 
 // ─── _bindDirect ────────────────────────────────────────────────────────────

package/src/transition-entry.ts

@@ -0,0 +1,7 @@
+// Subpath entry for @pyreon/runtime-dom/transition
+// Apps that don't use animations can avoid importing this entirely.
+
+export type { TransitionProps } from './transition'
+export { Transition } from './transition'
+export type { TransitionGroupProps } from './transition-group'
+export { TransitionGroup } from './transition-group'