@pyreon/runtime-dom 0.12.13 → 0.12.15

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.15",
   "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.15",
+    "@pyreon/reactivity": "^0.12.15"
   },
   "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.15",
+    "@pyreon/runtime-server": "^0.12.15",
+    "@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)) {
@@ -237,37 +245,76 @@ function applyEventProp(el: Element, key: string, value: unknown): Cleanup | nul
   return () => el.removeEventListener(eventName, batched)
 }
 
-export function applyProp(el: Element, key: string, value: unknown): Cleanup | null {
-  // Event listener: onClick → "click"
-  if (EVENT_RE.test(key)) return applyEventProp(el, key, value)
+/**
+ * Sink for a single prop's CALLED value (always a primitive / object /
+ * `null` — never a function). Called both directly for static values and
+ * from the reactive `renderEffect` for accessor-bound values.
+ *
+ * NOTE on architecture: extracting the special-cased sinks
+ * (`innerHTML` / `dangerouslySetInnerHTML`) into this single dispatch
+ * function ensures every prop kind goes through the same reactive
+ * wrapping at `applyProp`'s entry. Previously each special case had its
+ * own early-return branch that needed to remember to handle function
+ * values; missing the dance once meant the closure was stringified and
+ * set as literal text. The structural fix (one reactive-wrap, then
+ * dispatch) eliminates the entire bug class.
+ */
+function applyStaticProp(el: Element, key: string, value: unknown): void {
+  if (__DEV__ && typeof value === 'function') {
+    // Defensive: function values must be unwrapped via `renderEffect`
+    // before reaching here. If we see one, a NEW special-case branch
+    // somewhere upstream skipped the reactive-wrapping dance — exactly
+    // the bug class the structural refactor was meant to eliminate.
+    console.warn(
+      `[Pyreon] applyStaticProp received a function for "${key}". ` +
+        `This likely means a new special-cased prop sink in applyProp() ` +
+        `bypassed the reactive-wrap path. The closure would be stringified ` +
+        `and set as a literal value. Verify the dispatch in applyProp().`,
+    )
+  }
 
-  // innerHTML — sanitized via Sanitizer API or fallback allowlist sanitizer
+  // innerHTML — sanitized via Sanitizer API or fallback allowlist sanitizer.
   if (key === 'innerHTML') {
+    const html = String(value ?? '')
     if (typeof (el as HTMLElement & { setHTML?: (h: string) => void }).setHTML === 'function') {
-      ;(el as HTMLElement & { setHTML: (h: string) => void }).setHTML(value as string)
+      ;(el as HTMLElement & { setHTML: (h: string) => void }).setHTML(html)
     } else {
-      ;(el as HTMLElement).innerHTML = sanitizeHtml(value as string)
+      ;(el as HTMLElement).innerHTML = sanitizeHtml(html)
     }
-    return null
+    return
   }
-  // dangerouslySetInnerHTML — intentionally raw, developer owns sanitization (same as React).
-  // The name itself is the warning — React doesn't log, neither should we.
-  // Previously this warned on every prop application, flooding the console
-  // on re-renders (one warning per render per instance).
+
+  // dangerouslySetInnerHTML — intentionally raw, developer owns sanitization
+  // (same as React). The name itself is the warning — React doesn't log,
+  // neither should we.
   if (key === 'dangerouslySetInnerHTML') {
-    ;(el as HTMLElement).innerHTML = (value as { __html: string }).__html
-    return null
+    const v = value as { __html: string } | null | undefined
+    ;(el as HTMLElement).innerHTML = v?.__html ?? ''
+    return
   }
 
-  // Reactive prop — function that returns the actual value
-  // Uses renderEffect (lighter than effect — no scope registration, no WeakMap)
-  // since lifecycle is managed by mountElement's cleanup array.
+  setStaticProp(el, key, value)
+}
+
+export function applyProp(el: Element, key: string, value: unknown): Cleanup | null {
+  // Event listener: onClick → "click"
+  if (EVENT_RE.test(key)) return applyEventProp(el, key, value)
+
+  // Reactive prop — function value is an accessor closure. The JSX compiler
+  // emits `prop={someExpr(signal())}` as a `() => someExpr(signal())` thunk
+  // so the prop tracks the signal automatically. We wrap in `renderEffect`
+  // ONCE here, before any prop-kind dispatch, so EVERY sink gets the same
+  // reactive treatment. Previously special-cased sinks (innerHTML etc.) had
+  // early-return branches that bypassed this wrap and stringified the
+  // closure — the bug fixed by this restructure.
+  //
+  // Uses renderEffect (lighter than effect — no scope registration, no
+  // WeakMap) since lifecycle is managed by mountElement's cleanup array.
   if (typeof value === 'function') {
-    const dispose = renderEffect(() => setStaticProp(el, key, (value as () => unknown)()))
-    return dispose
+    return renderEffect(() => applyStaticProp(el, key, (value as () => unknown)()))
   }
 
-  setStaticProp(el, key, value)
+  applyStaticProp(el, key, value)
   return null
 }
 
@@ -275,16 +322,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['"]/)
+    })
+  }
+})