@pyreon/runtime-dom 0.12.13 → 0.12.14

package/lib/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index2.d.ts","names":[],"sources":["../../../src/delegate.ts","../../../src/devtools.ts","../../../src/hydrate.ts","../../../src/hydration-debug.ts","../../../src/keep-alive.ts","../../../src/mount.ts","../../../src/props.ts","../../../src/template.ts","../../../src/transition.ts","../../../src/transition-group.ts","../../../src/index.ts"],"mappings":"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"}
+{"version":3,"file":"index2.d.ts","names":[],"sources":["../../../src/delegate.ts","../../../src/devtools.ts","../../../src/hydrate.ts","../../../src/hydration-debug.ts","../../../src/keep-alive.ts","../../../src/mount.ts","../../../src/props.ts","../../../src/template.ts","../../../src/transition.ts","../../../src/transition-group.ts","../../../src/index.ts"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/runtime-dom",
-  "version": "0.12.13",
+  "version": "0.12.14",
   "description": "DOM renderer for Pyreon",
   "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/runtime-dom#readme",
   "bugs": {
@@ -37,18 +37,24 @@
     "build": "vl_rolldown_build",
     "dev": "vl_rolldown_build-watch",
     "test": "vitest run",
+    "test:browser": "vitest run --config ./vitest.browser.config.ts",
     "typecheck": "tsc --noEmit",
     "lint": "oxlint .",
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@pyreon/core": "^0.12.13",
-    "@pyreon/reactivity": "^0.12.13"
+    "@pyreon/core": "^0.12.14",
+    "@pyreon/reactivity": "^0.12.14"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.8.9",
-    "@pyreon/compiler": "^0.12.13",
-    "@pyreon/runtime-server": "^0.12.13",
-    "happy-dom": "^20.8.3"
+    "@pyreon/compiler": "^0.12.14",
+    "@pyreon/runtime-server": "^0.12.14",
+    "@pyreon/test-utils": "^0.12.10",
+    "@vitest/browser-playwright": "^4.1.4",
+    "esbuild": "^0.28.0",
+    "happy-dom": "^20.8.3",
+    "rolldown": "^1.0.0-rc.15",
+    "vite": "^8.0.8"
   }
 }

package/src/hydrate.ts

@@ -16,7 +16,7 @@
  * Falls back to mountChild() whenever DOM structure doesn't match the VNode.
  */
 
-import type { ComponentFn, Ref, VNode, VNodeChild } from '@pyreon/core'
+import type { ComponentFn, RefProp, VNode, VNodeChild } from '@pyreon/core'
 import {
   dispatchToErrorBoundary,
   ForSymbol,
@@ -114,9 +114,13 @@ function hydrateReactiveChild(
     )
   }
 
-  const marker = insertMarker(parent, domNode, 'pyreon')
-  const cleanup = mountReactive(child, parent, marker, mountChild)
+  // Reactive accessor that produces a VNode/NativeItem subtree.
   const next = domNode ? nextReal(domNode) : null
+  if (domNode && domNode.parentNode) {
+    domNode.parentNode.removeChild(domNode)
+  }
+  const marker = insertMarker(parent, next, 'pyreon')
+  const cleanup = mountReactive(child, parent, marker, mountChild)
   return [cleanup, next]
 }
 
@@ -213,6 +217,29 @@ function hydrateChild(
     return [cleanup, domNode]
   }
 
+  // NativeItem — output of the compiler's `_tpl()` template fast path. The
+  // client builds a fresh DOM subtree in memory (cloned + reactively bound).
+  // We don't yet have a true hydration mode for `_tpl` (which would adopt
+  // existing DOM nodes and rebind without remount). For now, swap the SSR
+  // subtree at this position for the freshly-mounted one — same final DOM,
+  // no duplication, reactivity intact. This is correctness-first; a true
+  // adopting hydration is a separate compiler-side change.
+  if ((child as unknown as { __isNative?: boolean })?.__isNative === true) {
+    const native = child as unknown as { __isNative: true; el: Node; cleanup?: () => void }
+    const next = domNode ? nextReal(domNode) : null
+    if (domNode && domNode.parentNode) {
+      domNode.parentNode.replaceChild(native.el, domNode)
+    } else {
+      parent.insertBefore(native.el, anchor)
+    }
+    const cleanup = () => {
+      native.cleanup?.()
+      const p = native.el.parentNode
+      if (p && (p as Element).isConnected !== false) p.removeChild(native.el)
+    }
+    return [cleanup, next]
+  }
+
   return hydrateVNode(child as VNode, domNode, parent, anchor, path)
 }
 
@@ -245,14 +272,17 @@ function hydrateElement(
     cleanups.push(childCleanup)
 
     // Set ref
-    const ref = vnode.props.ref as Ref<Element> | ((el: Element) => void) | undefined
+    const ref = vnode.props.ref as RefProp<Element> | undefined
     if (ref) {
       if (typeof ref === 'function') ref(el)
       else ref.current = el
     }
 
     const cleanup = () => {
-      if (ref && typeof ref === 'object') ref.current = null
+      if (ref) {
+        if (typeof ref === 'function') ref(null)
+        else ref.current = null
+      }
       for (const c of cleanups) c()
       el.remove()
     }

package/src/mount.ts

@@ -268,14 +268,20 @@ function mountElement(vnode: VNode, parent: Node, anchor: Node | null): Cleanup
       }
     const refToClean = ref
     return () => {
-      if (refToClean && typeof refToClean === 'object') refToClean.current = null
+      if (refToClean) {
+        if (typeof refToClean === 'function') refToClean(null)
+        else refToClean.current = null
+      }
       if (propCleanup) propCleanup()
       childCleanup()
     }
   }
 
   return () => {
-    if (ref && typeof ref === 'object') ref.current = null
+    if (ref) {
+      if (typeof ref === 'function') ref(null)
+      else ref.current = null
+    }
     if (propCleanup) propCleanup()
     childCleanup()
     const p = el.parentNode

package/src/props.ts

@@ -221,7 +221,15 @@ function applyEventProp(el: Element, key: string, value: unknown): Cleanup | nul
     }
     return null
   }
-  const eventName = key[2]?.toLowerCase() + key.slice(3)
+  // `onPointerDown` -> `pointerdown`. Multi-word DOM event names are
+  // all-lowercase (`pointerdown`, `dblclick`, `mouseover`), so we
+  // lowercase the WHOLE name — not just the first letter, as a previous
+  // version did. That bug silently dropped delegation for every
+  // multi-word event (pointerdown/up/move, mousedown/up/move, dblclick,
+  // touchstart/end/move, etc.) — the handler was attached via
+  // `addEventListener('pointerDown', ...)` which never fires because
+  // real events use the lowercase name.
+  const eventName = (key[2]?.toLowerCase() + key.slice(3)).toLowerCase()
   const handler = value as EventListener
 
   if (DELEGATED_EVENTS.has(eventName)) {
@@ -275,16 +283,48 @@ export function applyProp(el: Element, key: string, value: unknown): Cleanup | n
 const URL_ATTRS = new Set(['href', 'src', 'action', 'formaction', 'poster', 'cite', 'data'])
 const UNSAFE_URL_RE = /^\s*(?:javascript|data):/i
 
+// Track the CSS property names an element's last-applied style object set,
+// so a reactive style going from `{ color, fontSize }` to `{ color }` removes
+// the stale `fontSize`. React/Vue/Solid all do this diff; previously Pyreon
+// only applied new keys, leaking the removed ones onto the DOM.
+const _prevStyleKeys: WeakMap<HTMLElement, Set<string>> = new WeakMap()
+
 /** Apply a style prop (string or object). */
 function applyStyleProp(el: HTMLElement, value: unknown): void {
   if (typeof value === 'string') {
+    // cssText replaces everything — drop any tracked object-mode keys.
     el.style.cssText = value
-  } else if (value != null && typeof value === 'object') {
+    _prevStyleKeys.delete(el)
+    return
+  }
+
+  const prev = _prevStyleKeys.get(el)
+
+  if (value == null) {
+    // Explicit null/undefined: clear whatever object-mode keys we set.
+    if (prev) {
+      for (const propName of prev) el.style.removeProperty(propName)
+      _prevStyleKeys.delete(el)
+    }
+    return
+  }
+
+  if (typeof value === 'object') {
     const obj = value as Record<string, unknown>
+    const next = new Set<string>()
     for (const k in obj) {
+      const propName = k.startsWith('--') ? k : toKebabCase(k)
+      next.add(propName)
       const css = normalizeStyleValue(k, obj[k])
-      el.style.setProperty(k.startsWith('--') ? k : toKebabCase(k), css)
+      el.style.setProperty(propName, css)
+    }
+    if (prev) {
+      for (const propName of prev) {
+        if (!next.has(propName)) el.style.removeProperty(propName)
+      }
     }
+    if (next.size === 0) _prevStyleKeys.delete(el)
+    else _prevStyleKeys.set(el, next)
   }
 }
 

package/src/tests/callback-ref-unmount.browser.test.ts

@@ -0,0 +1,62 @@
+import { h } from '@pyreon/core'
+import { mountInBrowser } from '@pyreon/test-utils/browser'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+// Real-Chromium smoke for the #233 callback-ref null-on-unmount fix.
+// happy-dom's element lifecycle isn't a fully faithful mirror of the
+// browser's — this suite checks the invocation sequence against a real
+// Chromium DOM removal path.
+
+describe('callback ref null on unmount (real browser)', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('invokes the callback with the element then null when unmounted', () => {
+    const calls: Array<Element | null> = []
+    const cb = (el: Element | null) => {
+      calls.push(el)
+    }
+
+    const { unmount } = mountInBrowser(h('div', { id: 'r1', ref: cb }, 'x'))
+
+    expect(calls.length).toBe(1)
+    expect(calls[0]?.id).toBe('r1')
+
+    unmount()
+
+    expect(calls.length).toBe(2)
+    expect(calls[1]).toBe(null)
+  })
+
+  it('invokes nested callback refs with null in child-then-parent order', () => {
+    const outer: Array<Element | null> = []
+    const inner: Array<Element | null> = []
+
+    const { unmount } = mountInBrowser(
+      h(
+        'section',
+        {
+          id: 'ro',
+          ref: (el: Element | null) => {
+            outer.push(el)
+          },
+        },
+        h('div', {
+          id: 'ri',
+          ref: (el: Element | null) => {
+            inner.push(el)
+          },
+        }),
+      ),
+    )
+
+    expect(outer[0]?.id).toBe('ro')
+    expect(inner[0]?.id).toBe('ri')
+
+    unmount()
+
+    expect(outer.at(-1)).toBe(null)
+    expect(inner.at(-1)).toBe(null)
+  })
+})

package/src/tests/callback-ref-unmount.test.ts

@@ -0,0 +1,52 @@
+import { h } from '@pyreon/core'
+import { mount } from '../index'
+
+describe('callback refs — called with null on unmount', () => {
+  let container: HTMLDivElement
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    container.remove()
+  })
+
+  it('invokes the callback with the element on mount and null on unmount', () => {
+    const calls: Array<Element | null> = []
+    const myRef = (el: Element | null) => {
+      calls.push(el)
+    }
+
+    const dispose = mount(h('div', { ref: myRef }), container)
+
+    expect(calls.length).toBe(1)
+    expect(calls[0]).toBe(container.querySelector('div'))
+
+    dispose()
+
+    expect(calls.length).toBe(2)
+    expect(calls[1]).toBe(null)
+  })
+
+  it('invokes the callback with null when a nested element unmounts', () => {
+    const calls: Array<Element | null> = []
+    const myRef = (el: Element | null) => {
+      calls.push(el)
+    }
+
+    const dispose = mount(
+      h('section', null, h('div', { ref: myRef })),
+      container,
+    )
+
+    expect(calls.length).toBe(1)
+    expect(calls[0]?.tagName).toBe('DIV')
+
+    dispose()
+
+    expect(calls.length).toBe(2)
+    expect(calls[1]).toBe(null)
+  })
+})

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

@@ -0,0 +1,40 @@
+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 pattern that
+// Vite/Rolldown can literal-replace at build time, NOT the broken
+// `typeof process` pattern that PR #200 cleaned up.
+//
+// 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.
+
+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 () => {
+      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 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.
+      expect(code).not.toMatch(/typeof\s+process\s*!==?\s*['"]undefined['"]/)
+    })
+  }
+})

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