@pyreon/runtime-dom 0.12.13 → 0.12.15

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

@@ -0,0 +1,262 @@
+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 T1.1 C-2 finding.
+//
+// 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.
+//
+// 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.
+//
+// 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`).
+// 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. `define` on
+    // `import.meta.env` isn't usually needed (Vite sets it automatically
+    // based on mode), but `mode: 'production'` flips DEV to false.
+    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' }),
+      },
+      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/mount.test.ts

@@ -219,21 +219,22 @@ describe('mount — refs', () => {
     expect(refEl).toBeInstanceOf(HTMLDivElement)
   })
 
-  test('callback ref element is not nulled on unmount', () => {
+  test('callback ref is invoked with null on unmount', () => {
     const el = container()
     let refEl: Element | null = null
     const unmount = mount(
       h('div', {
-        ref: (e: Element) => {
+        ref: (e: Element | null) => {
           refEl = e
         },
       }),
       el,
     )
-    expect(refEl).not.toBeNull()
-    unmount()
-    // Callback refs don't get called with null on cleanup
     expect(refEl).toBeInstanceOf(HTMLDivElement)
+    unmount()
+    // Fixed: callback refs are now called with null on cleanup
+    // to match React/Solid/Vue behavior and the RefCallback<T> type.
+    expect(refEl).toBeNull()
   })
 
   test('ref is not emitted as an HTML attribute', () => {
@@ -3176,6 +3177,95 @@ describe('TransitionGroup — cleanup', () => {
   })
 })
 
+// ─── TransitionGroup — leak regression tests ─────────────────────────────────
+// Regression for the two fixes:
+// 1. No safety timeout on applyLeave meant an item whose transition never
+//    fired stayed in the `entries` Map forever (`entries.delete(key)` was
+//    gated on the `done` callback firing).
+// 2. Unmount during in-flight transition left the 5s safety timer running,
+//    firing `onAfterEnter` / `onAfterLeave` on detached elements.
+
+describe('TransitionGroup — leak regressions', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  test('onAfterLeave fires via 5s safety timeout when transitionend never fires', async () => {
+    const el = container()
+    const items = signal([{ id: 1 }, { id: 2 }])
+    const onAfterLeave = vi.fn()
+    mount(
+      h(TransitionGroup, {
+        tag: 'div',
+        name: 'fade',
+        items,
+        keyFn: (item: { id: number }) => item.id,
+        render: (item: { id: number }) => h('span', { class: 'item' }, String(item.id)),
+        onAfterLeave,
+      }),
+      el,
+    )
+    await vi.advanceTimersByTimeAsync(20)
+    items.set([{ id: 1 }])
+    await vi.advanceTimersByTimeAsync(20)
+    // transitionend never fires — before the fix this would leak forever.
+    expect(onAfterLeave).not.toHaveBeenCalled()
+    await vi.advanceTimersByTimeAsync(5100)
+    expect(onAfterLeave).toHaveBeenCalledTimes(1)
+  })
+
+  test('onAfterEnter does NOT fire after container unmount during in-flight enter', async () => {
+    const el = container()
+    const items = signal<{ id: number }[]>([])
+    const onAfterEnter = vi.fn()
+    const dispose = mount(
+      h(TransitionGroup, {
+        tag: 'div',
+        name: 'fade',
+        items,
+        keyFn: (item: { id: number }) => item.id,
+        render: (item: { id: number }) => h('span', { class: 'item' }, String(item.id)),
+        onAfterEnter,
+      }),
+      el,
+    )
+    await vi.advanceTimersByTimeAsync(20)
+    items.set([{ id: 1 }])
+    await vi.advanceTimersByTimeAsync(20)
+    // Mid-transition — unmount. The 5s safety timer must NOT fire the
+    // callback on a detached element.
+    dispose()
+    await vi.advanceTimersByTimeAsync(6000)
+    expect(onAfterEnter).not.toHaveBeenCalled()
+  })
+
+  test('onAfterLeave does NOT fire after container unmount during in-flight leave', async () => {
+    const el = container()
+    const items = signal([{ id: 1 }])
+    const onAfterLeave = vi.fn()
+    const dispose = mount(
+      h(TransitionGroup, {
+        tag: 'div',
+        name: 'fade',
+        items,
+        keyFn: (item: { id: number }) => item.id,
+        render: (item: { id: number }) => h('span', { class: 'item' }, String(item.id)),
+        onAfterLeave,
+      }),
+      el,
+    )
+    await vi.advanceTimersByTimeAsync(20)
+    items.set([])
+    await vi.advanceTimersByTimeAsync(20)
+    dispose()
+    await vi.advanceTimersByTimeAsync(6000)
+    expect(onAfterLeave).not.toHaveBeenCalled()
+  })
+})
+
 // ─── Error paths (no ErrorBoundary) ──────────────────────────────────────────
 
 describe('mount — error paths', () => {

package/src/tests/props.test.ts

@@ -269,6 +269,123 @@ describe('applyProp — innerHTML', () => {
     expect(warnSpy).not.toHaveBeenCalled()
     warnSpy.mockRestore()
   })
+
+  test('reactive innerHTML accessor — function value is called, not stringified', async () => {
+    // Regression: the JSX compiler emits `innerHTML={getIcon(props.x ? "a" : "b")}`
+    // as a `() => …` accessor. Without function-value handling here, the
+    // closure was set as literal text — `() => getIcon(...)` rendered
+    // verbatim instead of the SVG.
+    const { signal } = await import('@pyreon/reactivity')
+    const el = document.createElement('div')
+    const which = signal<'a' | 'b'>('a')
+    const cleanup = applyProp(el, 'innerHTML', () => `<span data-x="${which()}">x</span>`)
+    expect(el.querySelector('[data-x="a"]')).not.toBeNull()
+    expect(el.innerHTML).not.toContain('=>')
+    which.set('b')
+    expect(el.querySelector('[data-x="b"]')).not.toBeNull()
+    cleanup?.()
+  })
+
+  test('reactive dangerouslySetInnerHTML accessor — function value is called, not stringified', async () => {
+    const { signal } = await import('@pyreon/reactivity')
+    const el = document.createElement('div')
+    const html = signal('<em>one</em>')
+    const cleanup = applyProp(el, 'dangerouslySetInnerHTML', () => ({ __html: html() }))
+    expect(el.innerHTML).toBe('<em>one</em>')
+    html.set('<em>two</em>')
+    expect(el.innerHTML).toBe('<em>two</em>')
+    cleanup?.()
+  })
+
+  test('dev warning fires if a function reaches applyStaticProp directly (defensive guard)', () => {
+    // applyStaticProp is internal — reachable only if a future special-case
+    // branch in applyProp bypasses the reactive-wrap dance. The dev guard
+    // catches that regression at first render.
+    const el = document.createElement('div')
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    // Indirect: trigger by routing a function through `applyProp` for a
+    // key that DOESN'T have a special case — exercises the reactive path,
+    // which calls the accessor + passes the result. The accessor itself
+    // returning a function would surface the warning.
+    applyProp(el, 'innerHTML', () => () => '<em>nested</em>')
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining('applyStaticProp received a function for "innerHTML"'),
+    )
+    warnSpy.mockRestore()
+  })
+})
+
+// Comprehensive sweep: every string-typed sink must handle reactive
+// (function) values. The original bug was specific to innerHTML, but the
+// structural fix should cover ALL sinks the same way. These tests assert
+// that.
+describe('applyProp — reactive function values across all sink kinds', () => {
+  test('reactive href accessor on <a>', async () => {
+    const { signal } = await import('@pyreon/reactivity')
+    const el = document.createElement('a')
+    const path = signal('/one')
+    const cleanup = applyProp(el, 'href', () => path())
+    expect(el.getAttribute('href')).toBe('/one')
+    path.set('/two')
+    expect(el.getAttribute('href')).toBe('/two')
+    cleanup?.()
+  })
+
+  test('reactive src accessor on <img>', async () => {
+    const { signal } = await import('@pyreon/reactivity')
+    const el = document.createElement('img')
+    const url = signal('/a.png')
+    const cleanup = applyProp(el, 'src', () => url())
+    // <img> exposes `src` as a normalized absolute URL — assert via getAttribute
+    expect(el.getAttribute('src')).toBe('/a.png')
+    url.set('/b.png')
+    expect(el.getAttribute('src')).toBe('/b.png')
+    cleanup?.()
+  })
+
+  test('reactive value accessor on <input>', async () => {
+    const { signal } = await import('@pyreon/reactivity')
+    const el = document.createElement('input')
+    const val = signal('alpha')
+    const cleanup = applyProp(el, 'value', () => val())
+    expect((el as HTMLInputElement).value).toBe('alpha')
+    val.set('beta')
+    expect((el as HTMLInputElement).value).toBe('beta')
+    cleanup?.()
+  })
+
+  test('reactive title accessor (data attribute pattern)', async () => {
+    const { signal } = await import('@pyreon/reactivity')
+    const el = document.createElement('div')
+    const tip = signal('hello')
+    const cleanup = applyProp(el, 'title', () => tip())
+    expect(el.getAttribute('title')).toBe('hello')
+    tip.set('world')
+    expect(el.getAttribute('title')).toBe('world')
+    cleanup?.()
+  })
+
+  test('reactive class accessor (string form)', async () => {
+    const { signal } = await import('@pyreon/reactivity')
+    const el = document.createElement('div')
+    const cls = signal('one')
+    const cleanup = applyProp(el, 'class', () => cls())
+    expect(el.className).toBe('one')
+    cls.set('two')
+    expect(el.className).toBe('two')
+    cleanup?.()
+  })
+
+  test('reactive style accessor (object form)', async () => {
+    const { signal } = await import('@pyreon/reactivity')
+    const el = document.createElement('div')
+    const color = signal('red')
+    const cleanup = applyProp(el, 'style', () => ({ color: color() }))
+    expect(el.style.color).toBe('red')
+    color.set('blue')
+    expect(el.style.color).toBe('blue')
+    cleanup?.()
+  })
 })
 
 // ─── applyProp — URL safety ──────────────────────────────────────────────────