@pyreon/runtime-dom 0.24.5 → 0.24.6

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

@@ -1,158 +0,0 @@
-/**
- * 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/dev-gate-pattern.test.ts

@@ -1,46 +0,0 @@
-import { readFile } from 'node:fs/promises'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { describe, expect, it } from 'vitest'
-
-const here = path.dirname(fileURLToPath(import.meta.url))
-const SRC = path.resolve(here, '..')
-
-// Source-pattern regression test for the dev-mode warning gate. Pairs with
-// the browser test in `runtime-dom.browser.test.ts` (which proves the gate
-// fires in dev) — this asserts the gate is written using the bundler-agnostic
-// pattern (`process.env.NODE_ENV !== 'production'`) that every modern bundler
-// (Vite, Webpack/Next.js, esbuild, Rollup, Parcel, Bun) literal-replaces at
-// consumer build time. The two previously-shipped broken patterns must not
-// appear:
-//   1. `typeof process !== 'undefined' && process.env.NODE_ENV !== 'production'`
-//      — dead in Vite browser bundles.
-//   2. `import.meta.env.DEV` — Vite/Rolldown-only; undefined and silent in
-//      Webpack/Next.js, esbuild, Rollup, Parcel, Bun.
-//
-// Same shape as `flow/src/tests/integration.test.ts:warnIgnoredOptions`.
-//
-// The lint rule `pyreon/no-process-dev-gate` is the CI-wide enforcement for
-// this. This test is the narrow, package-local safety net so a regression in
-// runtime-dom is caught even if the lint configuration drifts.
-
-const FILES_WITH_DEV_GATE = ['nodes.ts', 'hydration-debug.ts']
-
-describe('runtime-dom dev-warning gate (source pattern)', () => {
-  for (const file of FILES_WITH_DEV_GATE) {
-    it(`${file} uses bundler-agnostic process.env.NODE_ENV`, async () => {
-      const source = await readFile(path.join(SRC, file), 'utf8')
-      // Strip line + block comments so referencing the broken pattern in
-      // documentation doesn't false-positive.
-      const code = source
-        .replace(/\/\*[\s\S]*?\*\//g, '')
-        .replace(/(^|[^:])\/\/.*$/gm, '$1')
-
-      // The bundler-agnostic gate must appear (bare `process.env.NODE_ENV`).
-      expect(code).toMatch(/process\.env\.NODE_ENV/)
-      // Neither broken pattern may appear in executable code.
-      expect(code).not.toMatch(/typeof\s+process\s*!==?\s*['"]undefined['"]/)
-      expect(code).not.toMatch(/import\.meta\.env\??\.DEV/)
-    })
-  }
-})

package/src/tests/dev-gate-treeshake.test.ts

@@ -1,256 +0,0 @@
-import { mkdtempSync, rmSync } from 'node:fs'
-import path from 'node:path'
-import { tmpdir } from 'node:os'
-import { fileURLToPath } from 'node:url'
-import { describe, expect, it } from 'vitest'
-import { build } from 'vite'
-
-const here = path.dirname(fileURLToPath(import.meta.url))
-const SRC = path.resolve(here, '..')
-
-// Bundle-level regression test for the dev-warning gate.
-//
-// runtime-dom uses bundler-agnostic `process.env.NODE_ENV !== 'production'`
-// for dev gates — the cross-bundler library convention used by React, Vue,
-// Preact, Solid, MobX, Redux. Every modern bundler (Vite, Webpack/Next.js,
-// esbuild, Rollup, Parcel, Bun) auto-replaces `process.env.NODE_ENV` at
-// consumer build time. This test bundles each representative runtime-dom
-// file through Vite's production build and asserts dev-warning strings
-// are GONE from the output — proving literal-replacement + dead-code
-// elimination work end-to-end.
-//
-// The test uses Vite because that's Pyreon's reference consumer pipeline
-// today; the same files under Webpack / esbuild / Rollup etc. tree-shake
-// equivalently because they all replace `process.env.NODE_ENV`. Vite is
-// just the most-tested path.
-//
-// Scope note: `dev-gate-pattern.test.ts` is the cheap source-level guard
-// (grep for the broken patterns, require bare `process.env.NODE_ENV`).
-// This test is the expensive end-to-end guard for the bundle path.
-
-interface FileContract {
-  file: string
-  /** Dev-warning strings that MUST be eliminated from the prod bundle. */
-  devWarningStrings: string[]
-}
-
-// Coverage strategy: pick representative files across the runtime-dom
-// dev-gate landscape so a regression in any of the typical patterns is
-// caught. `nodes.ts` covers the chained `&&` form (the original
-// problem). `mount.ts` covers the simple `if (__DEV__)` form across
-// multiple Portal/VNode call sites. `props.ts` covers attribute-validation
-// warnings inside small inline `if (__DEV__) { ... }` blocks.
-// `transition.ts` covers a single `if (__DEV__) { console.warn() }`.
-//
-// These four files exercise every shape of dev gate currently used in
-// runtime-dom; if the contract holds for all of them, it holds for the
-// rest of the file set.
-const FILES_UNDER_TEST: FileContract[] = [
-  {
-    file: 'nodes.ts',
-    devWarningStrings: [
-      '[Pyreon] <For> `by` function returned null/undefined',
-      '[Pyreon] Duplicate key',
-    ],
-  },
-  {
-    file: 'mount.ts',
-    devWarningStrings: [
-      '[Pyreon] <Portal> received a falsy `target`',
-      '[Pyreon] <Portal> target must be a DOM node',
-      '[Pyreon] Invalid VNode type',
-      'is a void element and cannot have children',
-    ],
-  },
-  {
-    file: 'props.ts',
-    devWarningStrings: [
-      '[Pyreon] Event handler',
-      '[Pyreon] Blocked unsafe URL',
-    ],
-  },
-  {
-    file: 'transition.ts',
-    devWarningStrings: [
-      '[Pyreon] Transition child is a component',
-    ],
-  },
-]
-
-async function bundleWithVite(entry: string, dev: boolean): Promise<string> {
-  const outDir = mkdtempSync(path.join(tmpdir(), 'pyreon-vite-treeshake-'))
-  try {
-    // Vite library-mode build with explicit minify. The bundler-agnostic
-    // gate uses `process.env.NODE_ENV` — Vite's library mode doesn't apply
-    // the default replacement automatically, so we set it ourselves to
-    // match what every modern bundler does at consumer build time.
-    await build({
-      mode: dev ? 'development' : 'production',
-      logLevel: 'error',
-      configFile: false,
-      resolve: { conditions: ['bun'] },
-      define: {
-        'process.env.NODE_ENV': JSON.stringify(dev ? 'development' : 'production'),
-      },
-      build: {
-        // PINNED minifier: 'esbuild' is what Pyreon's reference consumers
-        // (Zero, the example apps) effectively use. If a future Vite
-        // version flips the default to oxc-minify or terser, behavior
-        // could differ silently — pinning keeps this test honest.
-        minify: dev ? false : 'esbuild',
-        target: 'esnext',
-        write: true,
-        outDir,
-        emptyOutDir: true,
-        lib: {
-          entry,
-          formats: ['es'],
-          fileName: 'out',
-        },
-        // Bundle everything — we want the tested file's strings visible
-        // in the output, not aliased to an external import.
-        rollupOptions: {
-          external: ['@pyreon/core', '@pyreon/reactivity', '@pyreon/runtime-server'],
-        },
-      },
-    })
-    const outPath = path.join(outDir, 'out.js')
-    const fs = await import('node:fs')
-    return fs.readFileSync(outPath, 'utf8')
-  } finally {
-    rmSync(outDir, { recursive: true, force: true })
-  }
-}
-
-describe('runtime-dom dev-warning gate (Vite production bundle)', () => {
-  for (const { file, devWarningStrings } of FILES_UNDER_TEST) {
-    it(`${file} → dev warnings eliminated in Vite production bundle`, async () => {
-      const code = await bundleWithVite(path.join(SRC, file), false)
-
-      for (const warn of devWarningStrings) {
-        expect(code, `"${warn}" survived prod tree-shake`).not.toContain(warn)
-      }
-      expect(code.length).toBeGreaterThan(0)
-    }, 5000)
-
-    it(`${file} → dev warnings PRESERVED in Vite dev bundle (sanity)`, async () => {
-      // Gate for the eliminated-when-prod test: if the strings were
-      // deleted from source entirely, the previous test would pass
-      // trivially. Bundling in dev mode should keep them.
-      if (devWarningStrings.length === 0) return
-
-      const code = await bundleWithVite(path.join(SRC, file), true)
-
-      for (const warn of devWarningStrings) {
-        expect(code, `"${warn}" missing from dev bundle (did source change?)`).toContain(warn)
-      }
-    }, 5000)
-  }
-})
-
-// ─── Non-Vite consumer runtime correctness ─────────────────────────────────
-//
-// What the CLAUDE.md doc claims for non-Vite consumers (webpack,
-// bunchee, raw esbuild bundles): the dev-warning STRINGS may stay in
-// the bundle as data, but the warnings themselves don't fire because
-// the `import.meta.env?.DEV === true` gate evaluates to `false` when
-// `import.meta.env.DEV` is undefined at runtime.
-//
-// This block bundles `nodes.ts` with raw esbuild (no `define` for
-// import.meta.env, simulating a less-aware bundler), then asserts:
-//
-//   1. The dev-warning strings DO survive (proving we picked a real
-//      bundle to test, not Vite-equivalent behavior).
-//   2. The strings are still gated — they appear next to a check
-//      involving `import.meta.env` rather than being unconditional.
-//
-// (2) is what makes the runtime claim true: at runtime `import.meta.env`
-// is `undefined` in non-Vite-aware environments, so `?.DEV` returns
-// `undefined`, `=== true` returns `false`, and the warn never fires.
-// If a future refactor unconditionally calls console.warn (no gate),
-// this assertion catches that the runtime contract regressed.
-
-describe('non-Vite consumer runtime correctness', () => {
-  it('raw esbuild bundle: warning strings remain in bundle (proves we test the non-Vite path)', async () => {
-    const { build } = await import('esbuild')
-    const result = await build({
-      entryPoints: [path.join(SRC, 'nodes.ts')],
-      bundle: true,
-      write: false,
-      minify: true,
-      format: 'esm',
-      platform: 'browser',
-      external: ['@pyreon/core', '@pyreon/reactivity', '@pyreon/runtime-server'],
-      // Intentionally no `define` — simulates a non-Vite-aware bundler.
-    })
-    const code = result.outputFiles[0]?.text ?? ''
-    expect(code).toContain('Duplicate key')
-  }, 5000)
-
-  it('raw esbuild bundle: dev gate evaluates to false at runtime when import.meta.env is undefined', async () => {
-    // The real claim is RUNTIME — even when warning strings are in the
-    // bundle, the gate stops `console.warn` from firing. This test
-    // EXECUTES the bundled module with `import.meta.env` undefined
-    // (the non-Vite case) and verifies `console.warn` is never called.
-    //
-    // Bundle a synthetic harness that exposes the gated callsite as a
-    // standalone exported function, replacing the cross-package
-    // imports so we don't need a full Pyreon runtime to execute. The
-    // harness mirrors the EXACT gate pattern used in nodes.ts.
-    const { build } = await import('esbuild')
-    const harness = `
-      // Same module-scope const pattern used in real Pyreon source.
-      // @ts-ignore — \`import.meta.env\` is provided by Vite at build time
-      const __DEV__ = import.meta.env?.DEV === true
-      export function maybeWarn(seen: Set<string>, key: string): void {
-        // Mirrors nodes.ts: a chained \`__DEV__ && cond && warn\` form
-        // (Pattern B from the C-2 probe).
-        if (seen.has(key)) {
-          if (__DEV__) {
-            console.warn(\`[Pyreon] Duplicate key "\${String(key)}" in <For> list.\`)
-          }
-        }
-        seen.add(key)
-      }
-    `
-    const result = await build({
-      stdin: { contents: harness, loader: 'ts', resolveDir: SRC },
-      bundle: true,
-      write: false,
-      minify: true,
-      format: 'esm',
-      platform: 'browser',
-      // No `define` — same as a non-Vite consumer.
-    })
-    const code = result.outputFiles[0]?.text ?? ''
-
-    // The string MUST be in the bundle (proves this is the non-Vite path).
-    expect(code).toContain('Duplicate key')
-
-    // Now actually execute the bundled module with `import.meta.env`
-    // resembling the non-Vite environment (undefined). Use a data:
-    // import to load the bundled ESM module. Bun supports this.
-    const dataUrl = `data:text/javascript;base64,${Buffer.from(code).toString('base64')}`
-    const mod = (await import(/* @vite-ignore */ dataUrl)) as {
-      maybeWarn: (s: Set<string>, k: string) => void
-    }
-
-    // Spy on console.warn — the real runtime check.
-    const calls: unknown[][] = []
-    const original = console.warn
-    console.warn = (...args: unknown[]) => {
-      calls.push(args)
-    }
-    try {
-      const seen = new Set<string>()
-      mod.maybeWarn(seen, 'foo')
-      mod.maybeWarn(seen, 'foo') // second call → seen.has('foo') is true → would warn if gate broken
-    } finally {
-      console.warn = original
-    }
-
-    // The runtime contract: warning string is in the bundle (data),
-    // but the gate stops it from firing.
-    expect(calls).toEqual([])
-  }, 5000)
-})

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

@@ -1,133 +0,0 @@
-/**
- * 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()
-  })
-})