@pyreon/runtime-dom 0.12.12 → 0.12.14

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', () => {

package/src/tests/props.test.ts

@@ -258,14 +258,15 @@ describe('applyProp — innerHTML', () => {
     expect(el.innerHTML).not.toContain('<script>')
   })
 
-  test('dangerouslySetInnerHTML bypasses sanitization', () => {
+  test('dangerouslySetInnerHTML bypasses sanitization (no warning — name is the warning, like React)', () => {
     const el = document.createElement('div')
     const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
     applyProp(el, 'dangerouslySetInnerHTML', { __html: '<em>raw</em>' })
     expect(el.innerHTML).toBe('<em>raw</em>')
-    expect(warnSpy).toHaveBeenCalledWith(
-      expect.stringContaining('dangerouslySetInnerHTML bypasses sanitization'),
-    )
+    // No warning — the name "dangerouslySetInnerHTML" is the warning.
+    // React doesn't log here, neither do we. Previously this warned on
+    // every prop application, flooding the console on every re-render.
+    expect(warnSpy).not.toHaveBeenCalled()
     warnSpy.mockRestore()
   })
 })

package/src/tests/runtime-dom.browser.test.ts

@@ -0,0 +1,295 @@
+import { For, h, Portal } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
+import { flush, mountInBrowser } from '@pyreon/test-utils/browser'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { hydrateRoot, mount, Transition } from '../index'
+
+// Real-Chromium smoke suite for @pyreon/runtime-dom. Catches environment-
+// divergence bugs that happy-dom hides: SVG namespace property setters,
+// real PointerEvent sequencing, `import.meta.env.DEV` literal-replacement,
+// and the keyed reconciler under live signal updates.
+
+describe('runtime-dom in real browser', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('mounts and patches DOM when a signal updates', async () => {
+    const count = signal(0)
+    const { container, unmount } = mountInBrowser(
+      h('span', { id: 'n' }, () => String(count())),
+    )
+    expect(container.querySelector('#n')?.textContent).toBe('0')
+
+    count.set(42)
+    await flush()
+    expect(container.querySelector('#n')?.textContent).toBe('42')
+    unmount()
+  })
+
+  it('keyed <For> reconciler inserts at the right index when a list grows', async () => {
+    type Row = { id: number; label: string }
+    const rows = signal<Row[]>([
+      { id: 1, label: 'a' },
+      { id: 2, label: 'b' },
+    ])
+    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(2)
+    expect(Array.from(items).map((el) => el.textContent)).toEqual(['a', 'b'])
+
+    rows.set([
+      { id: 1, label: 'a' },
+      { id: 3, label: 'c' },
+      { id: 2, label: 'b' },
+    ])
+    await flush()
+
+    items = container.querySelectorAll<HTMLLIElement>('#list li')
+    expect(items).toHaveLength(3)
+    expect(Array.from(items).map((el) => el.dataset.id)).toEqual(['1', '3', '2'])
+    expect(Array.from(items).map((el) => el.textContent)).toEqual(['a', 'c', 'b'])
+    unmount()
+  })
+
+  it('creates SVG with the SVG namespace and updates reactive attributes via setAttribute', async () => {
+    const x = signal(10)
+    const { container, unmount } = mountInBrowser(
+      h(
+        'svg',
+        { id: 'svg', width: '100', height: '100' },
+        h('rect', { id: 'r', x: () => x(), y: '0', width: '20', height: '20' }),
+      ),
+    )
+
+    const svg = container.querySelector('#svg')
+    const rect = container.querySelector('#r')
+    expect(svg?.namespaceURI).toBe('http://www.w3.org/2000/svg')
+    expect(rect?.namespaceURI).toBe('http://www.w3.org/2000/svg')
+    // SVGRectElement.x is a read-only SVGAnimatedLength getter — applying
+    // via property would crash. setAttribute is the only safe path.
+    expect(rect?.getAttribute('x')).toBe('10')
+
+    x.set(55)
+    await flush()
+    expect(rect?.getAttribute('x')).toBe('55')
+    unmount()
+  })
+
+  it('dispatches a real PointerEvent and fires the onClick handler', async () => {
+    const clicks = signal(0)
+    const { container, unmount } = mountInBrowser(
+      h(
+        'button',
+        {
+          id: 'btn',
+          onClick: () => clicks.set(clicks() + 1),
+        },
+        () => `clicks: ${clicks()}`,
+      ),
+    )
+
+    const btn = container.querySelector<HTMLButtonElement>('#btn')!
+    expect(btn.textContent).toBe('clicks: 0')
+
+    btn.dispatchEvent(
+      new PointerEvent('pointerdown', { bubbles: true, pointerType: 'mouse' }),
+    )
+    btn.dispatchEvent(
+      new PointerEvent('pointerup', { bubbles: true, pointerType: 'mouse' }),
+    )
+    btn.click()
+    await flush()
+    expect(btn.textContent).toBe('clicks: 1')
+    unmount()
+  })
+
+  it('emits the duplicate-key __DEV__ warning under Vite (DEV=true)', async () => {
+    // import.meta.env.DEV is true in this dev-mode browser run, which is the
+    // exact replacement Vite/Rolldown apply at build-time. The warning must
+    // fire here. The companion `runtime-dom.prod-bundle.test.ts` Node test
+    // proves the same code path is dead in a prod bundle (DEV=false).
+    expect(import.meta.env.DEV).toBe(true)
+
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const dupes = signal([
+      { id: 1, label: 'a' },
+      { id: 1, label: 'b' },
+    ])
+    const { unmount } = mountInBrowser(
+      h(
+        'div',
+        null,
+        For({
+          each: dupes,
+          by: (r: { id: number }) => r.id,
+          children: (r: { id: number; label: string }) => h('span', { class: 'dup' }, r.label),
+        }),
+      ),
+    )
+    await flush()
+
+    const calls = warn.mock.calls.flat().join('\n')
+    expect(calls).toMatch(/Duplicate key/i)
+    unmount()
+  })
+
+  it('hydrateRoot — attaches reactive listeners to existing SSR markup without rerender', async () => {
+    // Simulate SSR-rendered HTML in the container.
+    const container = document.createElement('div')
+    container.innerHTML = '<button id="ssr-btn" type="button">clicks: 0</button>'
+    document.body.appendChild(container)
+
+    const ssrButtonRef = container.querySelector<HTMLButtonElement>('#ssr-btn')!
+    const count = signal(0)
+    const cleanup = hydrateRoot(
+      container,
+      h(
+        'button',
+        {
+          id: 'ssr-btn',
+          type: 'button',
+          onClick: () => count.set(count() + 1),
+        },
+        () => `clicks: ${count()}`,
+      ),
+    )
+
+    // Same DOM node — hydrate adopts it, doesn't replace.
+    expect(container.querySelector('#ssr-btn')).toBe(ssrButtonRef)
+
+    // Click triggers the hydrated handler + reactive text update.
+    ssrButtonRef.click()
+    await flush()
+    expect(ssrButtonRef.textContent).toBe('clicks: 1')
+
+    cleanup()
+    container.remove()
+  })
+
+  it('Portal — children render in a different DOM subtree (not the wrapper)', async () => {
+    const target = document.createElement('div')
+    target.id = 'portal-target'
+    document.body.appendChild(target)
+
+    const { container, unmount } = mountInBrowser(
+      h(
+        'div',
+        { id: 'src' },
+        h(Portal, { target }, h('span', { id: 'teleported' }, 'over there')),
+      ),
+    )
+
+    // Portal child is in target, NOT in container.
+    expect(container.querySelector('#teleported')).toBeNull()
+    expect(target.querySelector('#teleported')?.textContent).toBe('over there')
+    unmount()
+    target.remove()
+  })
+
+  it('Transition — show=false applies leave classes; transitionend removes element', async () => {
+    const visible = signal(true)
+    const { container, unmount } = mountInBrowser(
+      h(
+        Transition,
+        { name: 'fade', show: () => visible() },
+        // Real CSS transition so transitionend actually fires when the
+        // class swap changes opacity (not just instantly).
+        h('div', { id: 'fading', style: 'transition: opacity 30ms; opacity: 1' }, 'hello'),
+      ),
+    )
+    await flush()
+    expect(container.querySelector('#fading')).not.toBeNull()
+
+    visible.set(false)
+    // After two rAFs the leave-active + leave-to classes are applied.
+    await new Promise<void>((r) => requestAnimationFrame(() => r()))
+    await new Promise<void>((r) => requestAnimationFrame(() => r()))
+
+    const stillRendered = container.querySelector('#fading')
+    if (stillRendered) {
+      // Expect at least one of the fade-leave classes during the
+      // active phase.
+      expect(stillRendered.className).toMatch(/fade-leave/)
+      // Manually fire transitionend to short-circuit the 5s safety
+      // timeout (we don't care about real timing here, only that the
+      // event-driven cleanup path works).
+      stillRendered.dispatchEvent(new Event('transitionend', { bubbles: true }))
+    }
+    await flush()
+    await new Promise<void>((r) => setTimeout(r, 16))
+    expect(container.querySelector('#fading')).toBeNull()
+    unmount()
+  })
+
+  it('two mount() roots stay isolated — events on one do not affect the other', async () => {
+    const c1 = signal(0)
+    const c2 = signal(0)
+    const root1 = document.createElement('div')
+    const root2 = document.createElement('div')
+    document.body.append(root1, root2)
+
+    const u1 = mount(
+      h('button', { id: 'b1', onClick: () => c1.set(c1() + 1) }, () => `c1=${c1()}`),
+      root1,
+    )
+    const u2 = mount(
+      h('button', { id: 'b2', onClick: () => c2.set(c2() + 1) }, () => `c2=${c2()}`),
+      root2,
+    )
+
+    root1.querySelector<HTMLButtonElement>('#b1')!.click()
+    root1.querySelector<HTMLButtonElement>('#b1')!.click()
+    root2.querySelector<HTMLButtonElement>('#b2')!.click()
+    await flush()
+
+    expect(c1()).toBe(2)
+    expect(c2()).toBe(1)
+
+    u1()
+    u2()
+    root1.remove()
+    root2.remove()
+  })
+
+  it('event delegation — multi-word event names like onPointerDown actually fire', async () => {
+    // Regression for the bug fixed alongside this PR:
+    // `onPointerDown` was being lowercased to `pointerDown` for the
+    // DELEGATED_EVENTS lookup, missing the all-lowercase entry, so the
+    // handler was attached via addEventListener('pointerDown', ...) which
+    // never fires. Same for mousedown, dblclick, touchstart, etc.
+    let pointerDownFired = 0
+    let dblClickFired = 0
+    const { container, unmount } = mountInBrowser(
+      h('div', {
+        id: 'evt',
+        onPointerDown: () => {
+          pointerDownFired++
+        },
+        onDblClick: () => {
+          dblClickFired++
+        },
+      }),
+    )
+    const target = container.querySelector('#evt')!
+    target.dispatchEvent(
+      new PointerEvent('pointerdown', { bubbles: true, pointerId: 1 }),
+    )
+    target.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
+    await flush()
+    expect(pointerDownFired).toBe(1)
+    expect(dblClickFired).toBe(1)
+    unmount()
+  })
+})