@pyreon/runtime-dom 0.14.0 → 0.16.0

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/tests/transition.test.ts

@@ -118,7 +118,11 @@ describe('Transition', () => {
     const target = el.querySelector('.lifecycle') as HTMLElement
     if (target) {
       target.dispatchEvent(new Event('transitionend'))
-      await new Promise<void>((r) => setTimeout(r, 10))
+      // 10ms was too tight under CI scheduling pressure — the dispatched
+      // event's listener callback runs on next-tick + microtask flush,
+      // and shared CI runners can have 10-30ms scheduling latency. 50ms
+      // gives enough headroom without slowing the test meaningfully.
+      await new Promise<void>((r) => setTimeout(r, 50))
       expect(onAfterEnter).toHaveBeenCalled()
     }
   })

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'
 
@@ -199,12 +199,22 @@ export function TransitionGroup<T = unknown>(props: TransitionGroupProps<T>): VN
       const key = props.keyFn(item, i)
       if (entries.has(key)) continue
       const itemRef = createRef<HTMLElement>()
-      const rawVNode = runUntracked(() => props.render(item, i))
-      const vnode: VNode =
-        typeof rawVNode.type === 'string'
-          ? { ...rawVNode, props: { ...rawVNode.props, ref: itemRef } as Props }
-          : rawVNode
-      const cleanup = mountChild(vnode, container, null)
+      // Both render AND mountChild must run untracked — child component
+      // setup (signal reads inside the render callback's resulting tree,
+      // useTheme / useQuery's options() construction etc.) must NOT
+      // subscribe this effect. Otherwise an unrelated signal flip re-runs
+      // the TransitionGroup effect, runCleanup() disposes the children's
+      // inner effects, and the next mount path skips re-rendering kept
+      // entries → the inner reactivity is lost. Same shape as the
+      // mountFor / mountKeyedList fix in nodes.ts.
+      const cleanup = runUntracked(() => {
+        const rawVNode = props.render(item, i)
+        const vnode: VNode =
+          typeof rawVNode.type === 'string'
+            ? { ...rawVNode, props: { ...rawVNode.props, ref: itemRef } as Props }
+            : rawVNode
+        return mountChild(vnode, container, null)
+      })
       const entry: ItemEntry = { key, ref: itemRef, cleanup, leaving: false, cancelTransition: null }
       entries.set(key, entry)
       newEntries.push(entry)
@@ -333,3 +343,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)