@pyreon/runtime-dom 0.21.0 → 0.23.0

package/lib/transition-entry.js

@@ -1,5 +1,5 @@
-import { Fragment, createRef, h, nativeCompat, onUnmount } from "@pyreon/core";
 import { effect, runUntracked, signal } from "@pyreon/reactivity";
+import { Fragment, createRef, h, nativeCompat, onUnmount } from "@pyreon/core";
 
 //#region src/transition.ts
 const __DEV__ = process.env.NODE_ENV !== "production";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/runtime-dom",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "description": "DOM renderer for Pyreon",
   "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/runtime-dom#readme",
   "bugs": {
@@ -54,15 +54,15 @@
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@pyreon/core": "^0.21.0",
-    "@pyreon/reactivity": "^0.21.0"
+    "@pyreon/core": "^0.23.0",
+    "@pyreon/reactivity": "^0.23.0"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.8.9",
-    "@pyreon/compiler": "^0.21.0",
+    "@pyreon/compiler": "^0.23.0",
     "@pyreon/manifest": "0.13.1",
-    "@pyreon/runtime-server": "^0.21.0",
-    "@pyreon/test-utils": "^0.13.8",
+    "@pyreon/runtime-server": "^0.23.0",
+    "@pyreon/test-utils": "^0.13.10",
     "@vitest/browser-playwright": "^4.1.4",
     "esbuild": "^0.28.0",
     "happy-dom": "^20.8.3",

package/src/tests/ctx-stack-growth-repro.test.tsx

@@ -0,0 +1,158 @@
+/**
+ * REGRESSION: context stack does not grow unboundedly under repeated reactive
+ * remounts.
+ *
+ * User-reported symptom (`@pyreon/core@<=0.22.0`):
+ *   1 GB heap; 33 effect snapshots × ~10,000 frames each; live context stack
+ *   contained 321,024 entries but only 47 distinct provider Map instances.
+ *   The same handful of providers were re-referenced thousands of times each.
+ *
+ * Root cause:
+ *   `mountReactive`'s effect re-fire flow runs the previous-mount subtree
+ *   cleanup INSIDE the effect's snapshot-restore window. The descendant's
+ *   `onUnmount` calls `popContext()` (position-based, `stack.pop()`) — but
+ *   the top of the stack at that moment is the snapshot-pushed frame, NOT
+ *   the descendant's own provider frame. `popContext()` pops the snapshot
+ *   frame; the descendant's frame is orphaned on the live stack. Geometric
+ *   amplification across nested reactive boundaries × repeated toggles
+ *   produces the 321k-frame state.
+ *
+ * Fix: `provide()` registers `onUnmount(removeContextFrame(frame))` — an
+ * identity-based splice that finds the specific frame regardless of its
+ * position on the stack.
+ */
+import { captureContextStack, createContext, h, provide, useContext } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
+import { describe, expect, it } from 'vitest'
+import { mount } from '..'
+
+describe('Context stack — growth under repeated remounts', () => {
+  it('single reactive boundary cycling a Provider — stack stays bounded', () => {
+    const Ctx = createContext<string>('root')
+    const container = document.createElement('div')
+
+    const baseLen = captureContextStack().length
+    const cond = signal(true)
+
+    function InnerProvider() {
+      provide(Ctx, 'inner')
+      return h('span', null, useContext(Ctx))
+    }
+
+    const App = () =>
+      h('div', null, () => (cond() ? h(InnerProvider, null) : null))
+
+    const unmount = mount(h(App, null), container)
+
+    for (let i = 0; i < 1000; i++) {
+      cond.set(false)
+      cond.set(true)
+    }
+
+    const finalLen = captureContextStack().length
+    expect(finalLen - baseLen).toBeLessThan(10)
+
+    unmount()
+  })
+
+  it('REGRESSION: nested reactive boundaries with providers — no orphan frames', () => {
+    // The exact shape that produced the 321k-entry live stack in 0.22.0:
+    // two NESTED reactive boundaries, each containing a provider. The
+    // outer's cleanup chain unmounts the inner; the inner's provider's
+    // onUnmount popContext used to pop the wrong (snapshot) frame, orphaning
+    // the provider's frame on the live stack.
+    const A = createContext<string>('A_default')
+    const B = createContext<string>('B_default')
+    const container = document.createElement('div')
+    const baseLen = captureContextStack().length
+
+    const toggleA = signal(true)
+    const toggleB = signal(true)
+
+    function PA() {
+      provide(A, 'A_value')
+      return h('div', null, () => (toggleB() ? h(PB, null) : null))
+    }
+    function PB() {
+      provide(B, 'B_value')
+      return h('span', null, `${useContext(A)}/${useContext(B)}`)
+    }
+
+    const App = () =>
+      h('div', null, () => (toggleA() ? h(PA, null) : null))
+
+    const unmount = mount(h(App, null), container)
+
+    // 500 full cycles. Without the fix, the stack grows ~1 frame per cycle
+    // (502 after 500 iterations of toggleB/toggleA off/on).
+    for (let i = 0; i < 500; i++) {
+      toggleB.set(false)
+      toggleB.set(true)
+      toggleA.set(false)
+      toggleA.set(true)
+    }
+
+    const finalLen = captureContextStack().length
+    expect(finalLen - baseLen).toBeLessThan(10)
+
+    unmount()
+  })
+
+  it('signal-driven re-mount of a provider — stack stays bounded across many updates', () => {
+    const Ctx = createContext<string>('root')
+    const container = document.createElement('div')
+    const baseLen = captureContextStack().length
+    const inner = signal('a')
+
+    function InnerProvider() {
+      provide(Ctx, inner())
+      return h('span', null, useContext(Ctx))
+    }
+
+    const App = () => h('div', null, () => h(InnerProvider, null))
+    const unmount = mount(h(App, null), container)
+
+    for (let i = 0; i < 2000; i++) inner.set(`v${i}`)
+
+    const finalLen = captureContextStack().length
+    expect(finalLen - baseLen).toBeLessThan(10)
+
+    unmount()
+  })
+
+  it('contextSnapshot used in restoreContextStack still finds inherited providers post-remount', () => {
+    // Read-side correctness: the snapshot mechanism's whole point is that
+    // useContext from a descendant inside a reactive boundary still finds
+    // the ancestor provider. The fix must not break this.
+    const Ctx = createContext<string>('root')
+    const container = document.createElement('div')
+    const cond = signal(true)
+    const seen: string[] = []
+
+    function Reader() {
+      seen.push(useContext(Ctx))
+      return h('span', null, useContext(Ctx))
+    }
+
+    function Provider() {
+      provide(Ctx, 'inherited')
+      return h('div', null, () => (cond() ? h(Reader, null) : null))
+    }
+
+    const unmount = mount(h(Provider, null), container)
+
+    // Initial render must see 'inherited'
+    expect(seen[seen.length - 1]).toBe('inherited')
+
+    // Toggle a few times — every re-mount of Reader must see the inherited
+    // value, NOT the default 'root'.
+    for (let i = 0; i < 10; i++) {
+      cond.set(false)
+      cond.set(true)
+    }
+    // The most recent mount also saw inherited
+    expect(seen[seen.length - 1]).toBe('inherited')
+
+    unmount()
+  })
+})

package/src/tests/error-boundary-stack-leak-repro.test.tsx

@@ -0,0 +1,133 @@
+/**
+ * REPRODUCTION + REGRESSION: the `_errorBoundaryStack.pop()` cleanup is
+ * position-based — same bug class as the `popContext()` bug fixed in #725.
+ *
+ * Scenario: two or more sibling `<ErrorBoundary>` boundaries. When a NON-LAST
+ * boundary unmounts (keyed `<For>` removing the first item, `<Show>` flipping
+ * the first of several siblings, route nav unmounting the outer of nested
+ * routes, etc.), its `onUnmount` calls `popErrorBoundary()` → `stack.pop()`
+ * → pops the LAST (innermost) boundary's handler — the wrong one.
+ *
+ * Outcome:
+ *   - Subsequent errors in the SURVIVING boundary's children route to whatever
+ *     handler is now at `stack[length-1]`, which is the stale handler of an
+ *     ALREADY-UNMOUNTED boundary. Calling `error.set(err)` on that handler's
+ *     captured signal is a no-op → the error is silently swallowed AND the
+ *     surviving boundary's fallback never renders.
+ *
+ * Fix (#725-class): `popErrorBoundary(handler)` uses `lastIndexOf + splice`
+ * to remove by IDENTITY. Each ErrorBoundary's `onUnmount` passes its own
+ * handler reference, so unmount in any order correctly removes the right
+ * handler.
+ */
+import type { VNodeChild } from '@pyreon/core'
+import { ErrorBoundary, h, Show } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount } from '..'
+
+describe('ErrorBoundary — module-level stack cleanup is identity-safe (#725 class)', () => {
+  let container: HTMLElement
+  let errorSpy: ReturnType<typeof vi.spyOn>
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    errorSpy = vi.spyOn(console, 'error').mockImplementation(() => undefined)
+  })
+  afterEach(() => {
+    container.remove()
+    errorSpy.mockRestore()
+  })
+
+  // Tiny `h`-builder helpers so the tests stay readable.
+  const eb = (testId: string, ...children: VNodeChild[]) =>
+    h(
+      ErrorBoundary,
+      {
+        fallback: (err: unknown) =>
+          h('div', { 'data-testid': `fb-${testId}` }, `caught(${testId}): ${String(err)}`),
+        children: children.length === 1 ? children[0] : children,
+      },
+    )
+
+  const showWhen = (when: () => boolean, child: () => VNodeChild) =>
+    h(Show, { when, children: child })
+
+  it('REGRESSION: surviving sibling boundary still catches errors after a sibling unmounts (FIRST unmounted)', () => {
+    const showA = signal(false)
+    const showB = signal(false)
+    const aliveA = signal(true)
+
+    function Bomb({ name }: { name: string }): never {
+      throw new Error(`boom-${name}`)
+    }
+
+    const App = () =>
+      h(
+        'div',
+        null,
+        // Boundary A — wrapped in Show so we can UNMOUNT it without
+        // touching boundary B.
+        showWhen(
+          () => aliveA(),
+          () => eb('A', showWhen(() => showA(), () => h(Bomb, { name: 'A' }))),
+        ),
+        // Boundary B — always mounted.
+        eb('B', showWhen(() => showB(), () => h(Bomb, { name: 'B' }))),
+      )
+
+    const unmount = mount(h(App, null), container)
+
+    expect(container.querySelector('[data-testid="fb-A"]')).toBeNull()
+    expect(container.querySelector('[data-testid="fb-B"]')).toBeNull()
+
+    // UNMOUNT boundary A (FIRST sibling). Pre-fix: popErrorBoundary() pops
+    // the LAST frame — B's handler — instead of A's.
+    aliveA.set(false)
+
+    // Now trigger a throw inside B's children. With B's handler correctly
+    // still on the stack (post-fix), B's fallback should render.
+    showB.set(true)
+
+    const fbB = container.querySelector('[data-testid="fb-B"]')
+    expect(fbB).toBeTruthy()
+    expect(fbB?.textContent).toContain('caught(B): Error: boom-B')
+
+    // And the throw must NOT have been routed to A's (stale) fallback.
+    expect(container.querySelector('[data-testid="fb-A"]')).toBeNull()
+
+    unmount()
+  })
+
+  it('LIFO case: surviving FIRST boundary catches errors after a LATER sibling unmounts', () => {
+    // Pre-fix this case worked (LIFO held for last-unmount). Included
+    // as a guard against the fix regressing the LIFO case.
+    const showA = signal(false)
+    const aliveB = signal(true)
+
+    function Bomb({ name }: { name: string }): never {
+      throw new Error(`boom-${name}`)
+    }
+
+    const App = () =>
+      h(
+        'div',
+        null,
+        eb('A', showWhen(() => showA(), () => h(Bomb, { name: 'A' }))),
+        showWhen(() => aliveB(), () => eb('B', null)),
+      )
+
+    const unmount = mount(h(App, null), container)
+
+    // Unmount B — LIFO case (last sibling). Both pre- and post-fix correct.
+    aliveB.set(false)
+
+    showA.set(true)
+    const fbA = container.querySelector('[data-testid="fb-A"]')
+    expect(fbA).toBeTruthy()
+    expect(fbA?.textContent).toContain('caught(A): Error: boom-A')
+
+    unmount()
+  })
+})