@pyreon/runtime-dom 0.13.1 → 0.15.0

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

@@ -8,22 +8,27 @@ 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 pattern that
-// Vite/Rolldown can literal-replace at build time, NOT the broken
-// `typeof process` pattern that PR #200 cleaned up.
+// 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` (introduced in PR #220) 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.
+// 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 import.meta.env.DEV, not typeof process`, async () => {
+    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.
@@ -31,10 +36,11 @@ describe('runtime-dom dev-warning gate (source pattern)', () => {
         .replace(/\/\*[\s\S]*?\*\//g, '')
         .replace(/(^|[^:])\/\/.*$/gm, '$1')
 
-      // The gate constant must exist, defined via Vite's literal-replaced env.
-      expect(code).toMatch(/const\s+__DEV__\s*=\s*import\.meta\.env\??\.DEV/)
-      // The broken pattern must not appear anywhere in executable code.
+      // 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

@@ -8,28 +8,24 @@ import { build } from 'vite'
 const here = path.dirname(fileURLToPath(import.meta.url))
 const SRC = path.resolve(here, '..')
 
-// Bundle-level regression test for the T1.1 C-2 finding.
+// Bundle-level regression test for the dev-warning gate.
 //
-// Background — the shape of the problem from PR #227 bring-up:
-//   Raw `esbuild --minify` preserves chained `__DEV__ && cond &&
-//   console.warn(...)` patterns even when `import.meta.env.DEV` is
-//   defined to `false`. That tempted a pattern-rewrite across all
-//   Pyreon sources.
+// 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.
 //
-// What the C-2 investigation actually found:
-//   Pyreon's real consumer path is Vite (which uses Rolldown under the
-//   hood plus its own import.meta.env replacement + tree-shake passes).
-//   Vite's production build DOES eliminate the chained patterns
-//   correctly — the raw esbuild baseline was misleading. Raw Rolldown
-//   alone also doesn't replicate Vite's behavior because Rolldown's
-//   `define` doesn't rewrite optional-chain access paths.
+// 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.
 //
-// This test bundles a runtime-dom entry through Vite's production
-// build and asserts dev-warning strings are GONE. If Vite's handling
-// ever regresses, this catches it.
-//
-// Scope note: the existing `dev-gate-pattern.test.ts` is the cheap
-// source-level guard (grep for `typeof process`, require `import.meta.env.DEV`).
+// 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 {
@@ -84,19 +80,17 @@ const FILES_UNDER_TEST: FileContract[] = [
 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. `define` on
-    // `import.meta.env` isn't usually needed (Vite sets it automatically
-    // based on mode), but `mode: 'production'` flips DEV to false.
+    // 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'] },
-      // Explicit define — Vite in lib mode doesn't always apply the
-      // default production env replacement, so we set it ourselves.
       define: {
-        'import.meta.env.DEV': JSON.stringify(dev),
-        'import.meta.env': JSON.stringify({ DEV: dev, PROD: !dev, MODE: dev ? 'development' : 'production' }),
+        'process.env.NODE_ENV': JSON.stringify(dev ? 'development' : 'production'),
       },
       build: {
         // PINNED minifier: 'esbuild' is what Pyreon's reference consumers

package/src/tests/hydration-integration.test.tsx

@@ -5,7 +5,7 @@
  * hydrate on client, verify signals work and DOM is reused.
  */
 import type { VNodeChild } from '@pyreon/core'
-import { For, Fragment, h, Show } from '@pyreon/core'
+import { _rp, For, Fragment, h, Show } from '@pyreon/core'
 import { signal } from '@pyreon/reactivity'
 import { renderToString } from '@pyreon/runtime-server'
 import { disableHydrationWarnings, enableHydrationWarnings, hydrateRoot } from '../index'
@@ -373,3 +373,168 @@ describe('hydration integration — mismatch recovery', () => {
     cleanup()
   })
 })
+
+// ─── onHydrationMismatch telemetry hook ────────────────────────────────────
+//
+// Pre-fix: runtime-dom emitted hydration mismatches via console.warn ONLY,
+// gated on __DEV__. Production deployments (Sentry, Datadog) had no
+// integration point — mismatches surfaced as silent recovery (text
+// rewritten or DOM remounted) with no telemetry signal. The asymmetry
+// with `@pyreon/core`'s `registerErrorHandler` (which captures component
+// + reactivity errors via the `__pyreon_report_error__` bridge) was the
+// gap.
+//
+// Post-fix: `onHydrationMismatch(handler)` registers a callback fired on
+// EVERY mismatch in dev AND prod, independent of the warn toggle.
+// Mirrors core's `registerErrorHandler` shape.
+describe('hydration integration — onHydrationMismatch telemetry hook', () => {
+  test('handler fires with full mismatch context on tag mismatch', async () => {
+    const { onHydrationMismatch } = await import('../hydration-debug')
+    const captured: Array<{ type: string; expected: unknown; actual: unknown; path: string; timestamp: number }> = []
+    const unsub = onHydrationMismatch((ctx) => {
+      captured.push({
+        type: ctx.type,
+        expected: ctx.expected,
+        actual: ctx.actual,
+        path: ctx.path,
+        timestamp: ctx.timestamp,
+      })
+    })
+
+    const el = container()
+    el.innerHTML = '<div>server content</div>'
+
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const cleanup = hydrateRoot(el, h('span', null, 'client content'))
+
+    expect(captured.length).toBeGreaterThan(0)
+    const tagMismatch = captured.find((c) => c.type === 'tag')
+    expect(tagMismatch).toBeDefined()
+    expect(tagMismatch?.expected).toBe('span')
+    expect(typeof tagMismatch?.path).toBe('string')
+    expect(typeof tagMismatch?.timestamp).toBe('number')
+
+    cleanup()
+    unsub()
+    warnSpy.mockRestore()
+  })
+
+  test('handler fires for tag mismatch in production-style silence (warn disabled)', () => {
+    const el = container()
+    el.innerHTML = '<div>server content</div>'
+
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    disableHydrationWarnings() // simulate production: warns silenced
+
+    return import('../hydration-debug').then(({ onHydrationMismatch }) => {
+      const captured: Array<{ type: string }> = []
+      const unsub = onHydrationMismatch((ctx) => {
+        captured.push({ type: ctx.type })
+      })
+
+      const cleanup = hydrateRoot(el, h('span', null, 'client content'))
+
+      // Telemetry hook fired even with warn disabled — independent.
+      expect(captured.length).toBeGreaterThan(0)
+      expect(captured.some((c) => c.type === 'tag')).toBe(true)
+      // console.warn was NOT called (production-style silence).
+      expect(warnSpy).not.toHaveBeenCalled()
+
+      cleanup()
+      unsub()
+      warnSpy.mockRestore()
+      enableHydrationWarnings()
+    })
+  })
+
+  test('multiple handlers all receive forwarded mismatches; unsub stops one cleanly', async () => {
+    const { onHydrationMismatch } = await import('../hydration-debug')
+    let count1 = 0
+    let count2 = 0
+    const unsub1 = onHydrationMismatch(() => count1++)
+    const unsub2 = onHydrationMismatch(() => count2++)
+
+    const el = container()
+    el.innerHTML = '<div>server</div>'
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+    const cleanup = hydrateRoot(el, h('span', null, 'client'))
+
+    expect(count1).toBeGreaterThan(0)
+    expect(count1).toBe(count2)
+
+    // Unsubscribe one — only the other fires next time.
+    unsub1()
+    const before2 = count2
+    const el2 = container()
+    el2.innerHTML = '<p>foo</p>'
+    const cleanup2 = hydrateRoot(el2, h('article', null, 'bar'))
+
+    expect(count2).toBeGreaterThan(before2)
+
+    cleanup()
+    cleanup2()
+    unsub2()
+    warnSpy.mockRestore()
+  })
+
+  test('handler errors do not propagate into hydration', async () => {
+    const { onHydrationMismatch } = await import('../hydration-debug')
+    let goodHandlerFired = false
+    const unsubBad = onHydrationMismatch(() => {
+      throw new Error('telemetry SDK exploded')
+    })
+    const unsubGood = onHydrationMismatch(() => {
+      goodHandlerFired = true
+    })
+
+    const el = container()
+    el.innerHTML = '<div>server</div>'
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    disableHydrationWarnings()
+
+    // Hydration must complete without throwing despite bad handler.
+    const cleanup = hydrateRoot(el, h('span', null, 'client'))
+    expect(goodHandlerFired).toBe(true)
+    // Client content still rendered — recovery worked.
+    expect(el.textContent).toContain('client')
+
+    cleanup()
+    unsubBad()
+    unsubGood()
+    warnSpy.mockRestore()
+    enableHydrationWarnings()
+  })
+})
+
+// ─── _rp prop forwarding through SSR -> hydrate ─────────────────────────────
+
+describe('hydration integration — `_rp`-wrapped component props (regression)', () => {
+  // Pre-fix, hydrate.ts skipped `makeReactiveProps` on the way into a
+  // component, so `props.x` returned the raw `_rp` function instead of the
+  // resolved value. mount.ts already did the right thing, so the failure mode
+  // surfaced only on cold-start SSR/hydrate (the fundamentals NavItem layout
+  // shape — see e2e/fundamentals/playground.spec.ts). Lock in BOTH the SSR
+  // emit and the post-hydration value.
+  test('SSR emits resolved string from `_rp` prop, hydration preserves it', async () => {
+    const Link = (props: { to: string }) =>
+      h('a', { href: `#${props.to}`, id: 'lnk' }, () => props.to)
+
+    const html = await renderToString(
+      h(Link, { to: _rp(() => '/about') as unknown as string }),
+    )
+    expect(html).toBe('<a href="#/about" id="lnk">/about</a>')
+    expect(html).not.toContain('=>')
+
+    const el = container()
+    el.innerHTML = html
+    const cleanup = hydrateRoot(
+      el,
+      h(Link, { to: _rp(() => '/about') as unknown as string }),
+    )
+    const link = el.querySelector<HTMLAnchorElement>('#lnk')!
+    expect(link.getAttribute('href')).toBe('#/about')
+    expect(link.textContent).toBe('/about')
+    cleanup()
+  })
+})

package/src/tests/lis-prepend.browser.test.ts

@@ -0,0 +1,99 @@
+import { For, h } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
+import { flush, mountInBrowser } from '@pyreon/test-utils/browser'
+import { describe, expect, it } from 'vitest'
+
+// Real-Chromium coverage for the `computeForLis` known-slot fast path.
+// happy-dom is fine for op-counting the LIS probes but doesn't prove the
+// reconciler actually lays out the DOM in the right order after a prepend.
+// A bug in the fast path would silently corrupt the DOM under real CSS
+// layout — caught here, not in the vitest happy-dom suite.
+
+function buildRows(count: number, offset = 0): Array<{ id: number; label: string }> {
+  return Array.from({ length: count }, (_, i) => ({
+    id: i + offset,
+    label: `row-${i + offset}`,
+  }))
+}
+
+describe('runtime-dom LIS prepend fast path', () => {
+  it('prepends 100 rows to a 100-row list, DOM matches the signal order', async () => {
+    type Row = { id: number; label: string }
+    const rows = signal<Row[]>(buildRows(100, 0))
+    const { container, unmount } = mountInBrowser(
+      h(
+        'ul',
+        { id: 'list' },
+        For({
+          each: rows,
+          by: (r: Row) => r.id,
+          children: (r: Row) => h('li', { 'data-id': String(r.id) }, r.label),
+        }),
+      ),
+    )
+
+    let items = container.querySelectorAll<HTMLLIElement>('#list li')
+    expect(items).toHaveLength(100)
+    expect(items[0]?.dataset.id).toBe('0')
+    expect(items[99]?.dataset.id).toBe('99')
+
+    // Prepend 100 new rows with ids 100..199. Final list: [100..199, 0..99].
+    const prepended = buildRows(100, 100)
+    rows.set([...prepended, ...rows()])
+    await flush()
+
+    items = container.querySelectorAll<HTMLLIElement>('#list li')
+    expect(items).toHaveLength(200)
+    // First 100 items must be the prepended rows in order.
+    expect(items[0]?.dataset.id).toBe('100')
+    expect(items[99]?.dataset.id).toBe('199')
+    // Next 100 must be the original rows in original order.
+    expect(items[100]?.dataset.id).toBe('0')
+    expect(items[199]?.dataset.id).toBe('99')
+    unmount()
+  })
+
+  it('measured prepend wall-clock stays in the expected range', async () => {
+    // HONEST framing: the LIS fast path saves ~50-100 µs on a 1k prepend.
+    // The full prepend cost is dominated by DOM work (~5-20 ms in real
+    // Chromium for 1k <li> nodes). This test measures the full wall-clock
+    // to give a realistic upper bound — the LIS save is a single-digit
+    // percent improvement, not a headline win.
+    //
+    // Assertion bound is intentionally loose (< 500 ms). The purpose is
+    // to anchor a "is this catastrophically slow" ceiling, not to prove
+    // the LIS fix is responsible for any particular chunk of time.
+    type Row = { id: number; label: string }
+    const rows = signal<Row[]>(buildRows(1000, 0))
+    const { container, unmount } = mountInBrowser(
+      h(
+        'ul',
+        { id: 'perf-list' },
+        For({
+          each: rows,
+          by: (r: Row) => r.id,
+          children: (r: Row) => h('li', { 'data-id': String(r.id) }, r.label),
+        }),
+      ),
+    )
+
+    // Warm up — first mount allocates backing arrays.
+    await flush()
+    expect(container.querySelectorAll('#perf-list li')).toHaveLength(1000)
+
+    const prepended = buildRows(1000, 1000)
+    const t0 = performance.now()
+    rows.set([...prepended, ...rows()])
+    await flush()
+    const elapsed = performance.now() - t0
+
+    // oxlint-disable-next-line no-console
+    console.log(`[lis-prepend] 1k→2k prepend wall-clock: ${elapsed.toFixed(2)}ms`)
+
+    expect(container.querySelectorAll('#perf-list li')).toHaveLength(2000)
+    // Loose ceiling. Real Chromium typically lands at 10-50ms. We're not
+    // asserting the LIS win — we're asserting the whole path didn't break.
+    expect(elapsed).toBeLessThan(500)
+    unmount()
+  })
+})

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)
+  })
+})