@pyreon/runtime-dom 0.13.1 → 0.15.0

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(
@@ -87,6 +149,57 @@ describe('runtime-dom in real browser', () => {
     unmount()
   })
 
+  it('delegated event handler sees `currentTarget` as the bound element, not the listener root', async () => {
+    // Regression for a real Pyreon framework bug found via PR #329's form
+    // section. Pyreon's TargetedEvent<E> type promises `currentTarget` is
+    // the per-element type (e.g. HTMLInputElement), but native event
+    // delegation leaves `currentTarget` as the container (where the
+    // listener is registered). User code that writes
+    // `(ev.currentTarget as HTMLInputElement).value` would silently read
+    // from a <div> and get undefined.
+    //
+    // The fix is in delegate.ts: per-handler Object.defineProperty
+    // override of currentTarget, matching React/Vue/Solid behavior.
+    const { container, unmount } = mountInBrowser(
+      h(
+        'div',
+        { id: 'wrap' },
+        h('input', {
+          id: 'inp',
+          type: 'text',
+          'data-marker': 'real-input',
+          onInput: (ev: Event) => {
+            const ct = ev.currentTarget as HTMLInputElement | null
+            // Capture observable signals so the test can assert on them
+            ;(globalThis as { __test_ct_tag?: string | undefined }).__test_ct_tag = ct?.tagName
+            ;(globalThis as { __test_ct_value?: string | undefined }).__test_ct_value =
+              ct?.value
+            ;(globalThis as { __test_ct_marker?: string | null | undefined }).__test_ct_marker =
+              ct?.getAttribute('data-marker') ?? null
+          },
+        }),
+      ),
+    )
+
+    const inp = container.querySelector<HTMLInputElement>('#inp')!
+    inp.value = 'hello'
+    inp.dispatchEvent(new Event('input', { bubbles: true }))
+    await flush()
+
+    // Without the fix: tagName would be 'DIV' (or whatever container is),
+    // value would be undefined, marker would be null.
+    expect((globalThis as { __test_ct_tag?: string | undefined }).__test_ct_tag).toBe('INPUT')
+    expect((globalThis as { __test_ct_value?: string | undefined }).__test_ct_value).toBe('hello')
+    expect((globalThis as { __test_ct_marker?: string | null | undefined }).__test_ct_marker).toBe(
+      'real-input',
+    )
+
+    unmount()
+    delete (globalThis as { __test_ct_tag?: string | undefined }).__test_ct_tag
+    delete (globalThis as { __test_ct_value?: string | undefined }).__test_ct_value
+    delete (globalThis as { __test_ct_marker?: string | null | undefined }).__test_ct_marker
+  })
+
   it('dispatches a real PointerEvent and fires the onClick handler', async () => {
     const clicks = signal(0)
     const { container, unmount } = mountInBrowser(
@@ -115,12 +228,13 @@ describe('runtime-dom in real browser', () => {
     unmount()
   })
 
-  it('emits the duplicate-key __DEV__ warning under Vite (DEV=true)', async () => {
-    // import.meta.env.DEV is true in this dev-mode browser run, which is the
-    // exact replacement Vite/Rolldown apply at build-time. The warning must
-    // fire here. The companion `runtime-dom.prod-bundle.test.ts` Node test
-    // proves the same code path is dead in a prod bundle (DEV=false).
-    expect(import.meta.env.DEV).toBe(true)
+  it('emits the duplicate-key dev warning under non-production NODE_ENV', async () => {
+    // process.env.NODE_ENV !== 'production' in this dev browser run — the
+    // bundler-agnostic gate that every modern bundler auto-replaces at
+    // consumer build time. The warning must fire here. The companion
+    // `runtime-dom.prod-bundle.test.ts` Node test proves the same code path
+    // is dead in a prod bundle (NODE_ENV='production').
+    expect(process.env.NODE_ENV).not.toBe('production')
 
     const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
     const dupes = signal([

package/src/tests/show-context.test.ts

@@ -174,4 +174,97 @@ describe('context inheritance through reactive boundaries', () => {
     expect(collected.length).toBe(3)
     expect(collected.every((v) => v === 'parent-provided')).toBe(true)
   })
+
+  // ── Lock-in for the context-truncation fix (PR #406) ──────────────────────
+  //
+  // Pre-fix `mountReactive`'s `restoreContextStack` did
+  // `stack.length = savedLength` in its finally block — which destroyed
+  // every provider frame that the synchronous mount had pushed via
+  // `provide()`. Signal-driven re-runs of `_bind` / `renderEffect` inside
+  // the mounted subtree later saw a half-empty stack and `useContext()`
+  // silently fell back to the default. The original symptom was
+  // `<PyreonUI mode={signal()}>` toggling not propagating to consumers
+  // — discovered while writing PR #406's regression e2e and traced back
+  // through the binding subscription chain to this stack truncation.
+  //
+  // The fix has two cooperating layers; each provides defense-in-depth
+  // for the other, so this assertion would still pass if you revert
+  // EITHER alone — but reverting BOTH layers together fails it. To
+  // bisect-verify cleanly, revert both:
+  //   1. `packages/core/core/src/context.ts:restoreContextStack` — change
+  //      the finally block back to `stack.length = savedLength` (truncate
+  //      everything fn() pushed).
+  //   2. `packages/core/reactivity/src/effect.ts:_bind` — remove the
+  //      `_snapshotCapture` capture/restore wiring so re-runs call fn()
+  //      against whatever the live stack happens to be at re-run time.
+  //
+  // With both reverted, this test fails with `seen[1] === 'default'`.
+  //
+  // What the test exercises: a `_bind` text binding inside a child mounted
+  // through a reactive accessor (which goes through `mountReactive`). The
+  // binding subscribes to a signal and reads `useContext(Ctx)`. After
+  // initial mount, the provider frame is at risk of being truncated by
+  // `mountReactive`'s cleanup — toggling the signal forces the binding to
+  // re-run, which re-reads context. If either fix is in place, the
+  // re-read finds the provider frame and returns the provided value.
+  it('binding re-runs preserve context lookup across mountReactive cleanup boundary (PR #406 splice + snapshot capture)', async () => {
+    const Ctx = createContext('default')
+    const trigger = signal(0)
+    let lastSeen: string | undefined
+    let runCount = 0
+
+    function Inner() {
+      // JSX text accessor compiles to a `_bind` / renderEffect text binding
+      // that subscribes to `trigger` (signal read inside the body) AND
+      // captures the external context snapshot at setup time.
+      return h('span', null, () => {
+        trigger()
+        const v = useContext(Ctx)
+        lastSeen = v
+        runCount++
+        return v
+      })
+    }
+
+    function Provider() {
+      // CRITICAL for exercising the bug: `provide()` runs INSIDE the
+      // reactive child fn (the accessor `() => h(Provider)` returned by
+      // App below). That puts Ctx on the stack DURING `mountReactive`'s
+      // restoreContextStack(snapshot, fn) execution — and pre-fix the
+      // truncating finally block (`stack.length = savedLength`) destroyed
+      // the frame the moment fn returned. If Outer pushed Ctx in its OWN
+      // body BEFORE returning the accessor, the frame would already be on
+      // the stack at snapshot-capture time and survive truncation
+      // unrelated — so the test wouldn't actually exercise the bug.
+      provide(Ctx, 'provider-value')
+      return h(Inner, null)
+    }
+
+    function App() {
+      // No provide() here — the provider frame must be pushed strictly
+      // inside the reactive accessor body (= inside `mountReactive`'s fn)
+      // so the truncation-vs-splice path is reached.
+      return () => h(Provider, null)
+    }
+
+    const container = document.createElement('div')
+    mount(h(App, null), container)
+    await new Promise((r) => setTimeout(r, 20))
+    expect(lastSeen).toBe('provider-value')
+    const initialRunCount = runCount
+
+    // Force the binding's effect to re-run AFTER the synchronous mount
+    // has fully unwound. With the broken pre-fix shape, mountReactive's
+    // `stack.length = savedLength` finally block has already destroyed
+    // the Ctx frame Provider pushed, so this re-run reads useContext
+    // against a stack that no longer contains the provider — and
+    // `lastSeen` becomes `'default'`.
+    trigger.set(1)
+    await new Promise((r) => setTimeout(r, 20))
+    expect(lastSeen).toBe('provider-value')
+    // Sanity: the re-run actually happened. Otherwise the test could
+    // pass for the wrong reason (e.g. if the trigger subscription wasn't
+    // established because the accessor didn't read `trigger()` reactively).
+    expect(runCount).toBeGreaterThan(initialRunCount)
+  })
 })

package/src/tests/template.test.ts

@@ -1,5 +1,5 @@
 import { computed, signal } from '@pyreon/reactivity'
-import { _bindDirect, _bindText } from '../template'
+import { _bindDirect, _bindText, _clearTplCache, _tpl, _tplCacheSize } from '../template'
 
 // ─── _bindText ──────────────────────────────────────────────────────────────
 
@@ -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 ────────────────────────────────────────────────────────────
@@ -247,3 +311,73 @@ describe('_mountSlot', async () => {
     expect(parent.childNodes.length).toBe(0)
   })
 })
+
+// ─── Audit bug #5: _tplCache LRU eviction ───────────────────────────────────
+//
+// The cache is an LRU-bounded Map keyed on the HTML string. Typed JSX
+// produces a small bounded set of unique HTML strings — most apps stay in
+// the dozens-to-hundreds. But an app that constructs JSX from user input
+// or compiles many large dynamic templates could grow this unbounded
+// pre-fix. The cap at 1024 entries keeps memory predictable while being
+// generous enough that no realistic codebase hits it.
+
+describe('_tpl cache — LRU eviction (audit bug #5)', () => {
+  const TPL_CACHE_MAX = 1024
+
+  test('cache stays bounded when more than MAX unique templates are emitted', () => {
+    _clearTplCache()
+    const noBind = (): null => null
+
+    // Emit 1.5x the cap of unique templates — without LRU bound, cache
+    // would grow to 1536 entries.
+    const overshoot = Math.floor(TPL_CACHE_MAX * 1.5)
+    for (let i = 0; i < overshoot; i++) {
+      _tpl(`<div data-i="${i}">${i}</div>`, noBind)
+    }
+
+    expect(_tplCacheSize()).toBeLessThanOrEqual(TPL_CACHE_MAX)
+    expect(_tplCacheSize()).toBeGreaterThan(0)
+  })
+
+  test('eviction is oldest-first; recently-touched entries survive', () => {
+    _clearTplCache()
+    const noBind = (): null => null
+
+    // Fill the cache to the cap.
+    const baseHtml = (i: number): string => `<span data-i="${i}">${i}</span>`
+    for (let i = 0; i < TPL_CACHE_MAX; i++) _tpl(baseHtml(i), noBind)
+    expect(_tplCacheSize()).toBe(TPL_CACHE_MAX)
+
+    // Touch entry 0 (the oldest). Map insertion-order semantics mean a
+    // re-insert after delete moves it to the most-recent position.
+    _tpl(baseHtml(0), noBind)
+
+    // Add ONE new entry — the OLDEST untouched entry should evict, NOT entry 0.
+    _tpl('<p>brand-new</p>', noBind)
+
+    expect(_tplCacheSize()).toBe(TPL_CACHE_MAX)
+
+    // Touch entry 0 again — if eviction policy were broken and entry 0
+    // had been evicted, this re-creates it. We need a way to assert it
+    // was retained. Approach: count cache misses by checking size delta.
+    // Adding the brand-new entry above evicted ONE; the cache stayed at
+    // cap. If we now add 1 more brand-new entry without re-using existing
+    // keys, size stays at cap. If we re-touch entry 0, size also stays at
+    // cap (already cached). The assertion: re-emitting entry 0 must NOT
+    // grow the cache (cache hit, not miss).
+    const sizeBeforeReHit = _tplCacheSize()
+    _tpl(baseHtml(0), noBind)
+    expect(_tplCacheSize()).toBe(sizeBeforeReHit) // re-emit was a hit
+  })
+
+  test('repeated emit of same template produces ONE cached entry', () => {
+    _clearTplCache()
+    const noBind = (): null => null
+
+    for (let i = 0; i < 100; i++) {
+      _tpl('<div class="static"></div>', noBind)
+    }
+
+    expect(_tplCacheSize()).toBe(1)
+  })
+})

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'

package/src/transition-group.ts

@@ -1,5 +1,5 @@
 import type { Props, VNode, VNodeChild } from '@pyreon/core'
-import { createRef, h, onMount, onUnmount } from '@pyreon/core'
+import { createRef, h, nativeCompat, onMount, onUnmount } from '@pyreon/core'
 import { effect, runUntracked, signal } from '@pyreon/reactivity'
 import { mountChild } from './mount'
 
@@ -333,3 +333,8 @@ export function TransitionGroup<T = unknown>(props: TransitionGroupProps<T>): VN
 
   return h(tag, { ref: containerRef })
 }
+
+// Mark as native so compat-mode jsx() runtimes skip wrapCompatComponent —
+// TransitionGroup uses signal/effect/onMount/onUnmount + mountChild that
+// need Pyreon's setup frame.
+nativeCompat(TransitionGroup)

package/src/transition.ts

@@ -1,5 +1,5 @@
 import type { Props, VNode, VNodeChild } from '@pyreon/core'
-import { createRef, Fragment, h, onUnmount } from '@pyreon/core'
+import { createRef, Fragment, h, nativeCompat, onUnmount } from '@pyreon/core'
 import { effect, runUntracked, signal } from '@pyreon/reactivity'
 
 // Dev-mode gate: `import.meta.env.DEV` is the Vite/Rolldown standard,
@@ -7,8 +7,7 @@ import { effect, runUntracked, signal } from '@pyreon/reactivity'
 // pattern was dead code in real Vite browser bundles because Vite does not
 // polyfill `process` for the client — every wrapped warning silently never
 // fired in dev. Enforced by the `pyreon/no-process-dev-gate` lint rule.
-// @ts-ignore — `import.meta.env.DEV` is provided by Vite/Rolldown at build time
-const __DEV__ = import.meta.env?.DEV === true
+const __DEV__ = process.env.NODE_ENV !== 'production'
 
 export interface TransitionProps {
   /**
@@ -189,6 +188,11 @@ export function Transition(props: TransitionProps): VNodeChild {
     applyLeave(el)
   }
 
+  // queueMicrotask defers the appear-animation to after the DOM has
+  // committed the initial mount — that scheduling IS the reactive
+  // subscription's job here (it tracks `props.show()` and `props.appear`
+  // and schedules the visual transition). Not setup work.
+  // pyreon-lint-disable-next-line pyreon/no-imperative-effect-on-create
   effect(() => {
     const visible = props.show()
     if (!initialized) {
@@ -235,3 +239,7 @@ export function Transition(props: TransitionProps): VNodeChild {
     return { ...vnode, props: { ...vnode.props, ref } as Props }
   }) as unknown as VNode
 }
+
+// Mark as native so compat-mode jsx() runtimes skip wrapCompatComponent —
+// Transition uses signal/effect/onUnmount that need Pyreon's setup frame.
+nativeCompat(Transition)