@pyreon/runtime-dom 0.14.0 → 0.15.0

package/src/tests/mount.test.ts

@@ -7,12 +7,14 @@ import {
   For,
   Fragment,
   h,
+  lazy,
   Match,
   onMount,
   onUnmount,
   onUpdate,
   Portal,
   Show,
+  Suspense as _Suspense,
   Switch,
 } from '@pyreon/core'
 import { cell, signal } from '@pyreon/reactivity'
@@ -36,6 +38,7 @@ const Transition = _Transition as unknown as ComponentFn<Record<string, unknown>
 const TransitionGroup = _TransitionGroup as unknown as ComponentFn<Record<string, unknown>>
 const ErrorBoundary = _ErrorBoundary as unknown as ComponentFn<Record<string, unknown>>
 const KeepAlive = _KeepAlive as unknown as ComponentFn<Record<string, unknown>>
+const Suspense = _Suspense as unknown as ComponentFn<Record<string, unknown>>
 
 function container(): HTMLElement {
   const el = document.createElement('div')
@@ -773,6 +776,94 @@ describe('ErrorBoundary', () => {
     ;(el.querySelector('#fix') as HTMLButtonElement).click()
     expect(el.querySelector('#signal-ok')?.textContent).toBe('fixed')
   })
+
+  // ── lazy() + Suspense + ErrorBoundary integration ──
+  //
+  // The `lazy(loader)` wrapper throws synchronously when its loader's
+  // promise rejects (`error()` returns truthy → `throw err`).
+  //
+  // Pyreon components run ONCE — reactivity comes from reading signals
+  // inside reactive scopes. `lazy()`'s wrapper reads its `error` /
+  // `loaded` signals inline, so the surrounding context must be a
+  // reactive scope for signal changes to trigger re-render.
+  //
+  // `Suspense` wraps its children in `h(Fragment, null, () => ...)` —
+  // an explicit reactive accessor that calls `__loading()`. THAT
+  // accessor's reactive scope is what tracks lazy's signals: when the
+  // loader rejects, the accessor re-runs, the lazy child re-mounts,
+  // the wrapper throws, mountComponent catches, dispatches to the
+  // nearest `<ErrorBoundary>` on the boundary stack.
+  //
+  // Without Suspense, lazy()'s post-mount errors don't surface (no
+  // reactive scope to drive re-render). This is consistent with the
+  // framework's component-runs-once contract — but worth pinning
+  // down with explicit tests.
+
+  test('lazy() loader rejection surfaces to ErrorBoundary via Suspense', async () => {
+    const el = container()
+    const Comp = lazy<Record<string, never>>(() =>
+      Promise.reject(new Error('module load failed')),
+    )
+
+    mount(
+      h(ErrorBoundary, {
+        fallback: (err: unknown) =>
+          h('p', { id: 'lazy-fb' }, `Caught: ${(err as Error).message}`),
+        children: h(
+          Suspense,
+          { fallback: h('p', { id: 'spinner' }, 'loading...') },
+          h(Comp, {}),
+        ),
+      }),
+      el,
+    )
+
+    // Initial render: lazy is still loading → Suspense shows spinner,
+    // boundary fallback NOT triggered yet.
+    expect(el.querySelector('#spinner')).not.toBeNull()
+    expect(el.querySelector('#lazy-fb')).toBeNull()
+
+    // Wait for promise rejection to flush.
+    await new Promise((r) => setTimeout(r, 0))
+    // Reactive flush.
+    await Promise.resolve()
+
+    // After load fails: Suspense's reactive accessor re-runs → child
+    // wrapper throws → caught by mountComponent → dispatched to
+    // ErrorBoundary → fallback rendered.
+    expect(el.querySelector('#lazy-fb')?.textContent).toContain('module load failed')
+    expect(el.querySelector('#spinner')).toBeNull()
+  })
+
+  test('lazy() resolves successfully renders content without firing fallback', async () => {
+    const el = container()
+    const Inner: ComponentFn<Record<string, never>> = () =>
+      h('p', { id: 'loaded' }, 'content')
+    const Comp = lazy<Record<string, never>>(() => Promise.resolve({ default: Inner }))
+
+    let fallbackInvocations = 0
+    mount(
+      h(ErrorBoundary, {
+        fallback: () => {
+          fallbackInvocations++
+          return h('p', { id: 'should-not-appear' }, 'error')
+        },
+        children: h(
+          Suspense,
+          { fallback: h('p', { id: 'spinner' }, 'loading...') },
+          h(Comp, {}),
+        ),
+      }),
+      el,
+    )
+
+    await new Promise((r) => setTimeout(r, 0))
+    await Promise.resolve()
+
+    expect(el.querySelector('#loaded')?.textContent).toBe('content')
+    expect(el.querySelector('#should-not-appear')).toBeNull()
+    expect(fallbackInvocations).toBe(0)
+  })
 })
 
 // ─── Transition component ─────────────────────────────────────────────────────

package/src/tests/native-markers.test.ts

@@ -0,0 +1,19 @@
+import { isNativeCompat } from '@pyreon/core'
+import { describe, expect, it } from 'vitest'
+import { KeepAlive } from '../keep-alive'
+import { Transition } from '../transition'
+import { TransitionGroup } from '../transition-group'
+
+// Marker-presence assertion (PR 3 lock-in). Bisect-verified: removing
+// `nativeCompat(...)` from any of these files fails the corresponding test.
+describe('native-compat markers — @pyreon/runtime-dom', () => {
+  it('Transition is marked native', () => {
+    expect(isNativeCompat(Transition)).toBe(true)
+  })
+  it('TransitionGroup is marked native', () => {
+    expect(isNativeCompat(TransitionGroup)).toBe(true)
+  })
+  it('KeepAlive is marked native', () => {
+    expect(isNativeCompat(KeepAlive)).toBe(true)
+  })
+})

package/src/tests/runtime-dom.browser.test.ts

@@ -149,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(
@@ -177,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 ──────────────────────────────────────────────────────────────
 
@@ -311,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-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)