@pyreon/runtime-dom 0.11.5 → 0.11.6

package/src/mount.ts

@@ -6,7 +6,7 @@ import type {
   RefProp,
   VNode,
   VNodeChild,
-} from "@pyreon/core"
+} from '@pyreon/core'
 import {
   dispatchToErrorBoundary,
   EMPTY_PROPS,
@@ -16,13 +16,13 @@ import {
   propagateError,
   reportError,
   runWithHooks,
-} from "@pyreon/core"
-import { effectScope, renderEffect, runUntracked, setCurrentScope } from "@pyreon/reactivity"
-import { registerComponent, unregisterComponent } from "./devtools"
-import { mountFor, mountKeyedList, mountReactive } from "./nodes"
-import { applyProps } from "./props"
+} from '@pyreon/core'
+import { effectScope, renderEffect, runUntracked, setCurrentScope } from '@pyreon/reactivity'
+import { registerComponent, unregisterComponent } from './devtools'
+import { mountFor, mountKeyedList, mountReactive } from './nodes'
+import { applyProps } from './props'
 
-const __DEV__ = typeof process !== "undefined" && process.env.NODE_ENV !== "production"
+const __DEV__ = typeof process !== 'undefined' && process.env.NODE_ENV !== 'production'
 
 type Cleanup = () => void
 const noop: Cleanup = () => {
@@ -51,7 +51,7 @@ export function mountChild(
   anchor: Node | null = null,
 ): Cleanup {
   // Reactive accessor — function that reads signals
-  if (typeof child === "function") {
+  if (typeof child === 'function') {
     const sample = runUntracked(() => (child as () => VNodeChild | VNodeChild[])())
     if (isKeyedArray(sample)) {
       const prevDepth = _elementDepth
@@ -63,12 +63,12 @@ export function mountChild(
       return cleanup
     }
     // Text fast path: reactive string/number/boolean — update text.data in-place
-    if (typeof sample === "string" || typeof sample === "number" || typeof sample === "boolean") {
-      const text = document.createTextNode(sample == null || sample === false ? "" : String(sample))
+    if (typeof sample === 'string' || typeof sample === 'number' || typeof sample === 'boolean') {
+      const text = document.createTextNode(sample === false ? '' : String(sample))
       parent.insertBefore(text, anchor)
       const dispose = renderEffect(() => {
         const v = (child as () => unknown)()
-        text.data = v == null || v === false ? "" : String(v as string | number)
+        text.data = v == null || v === false ? '' : String(v as string | number)
       })
       if (_elementDepth > 0) return dispose
       return () => {
@@ -91,7 +91,7 @@ export function mountChild(
   if (child == null || child === false) return noop
 
   // Primitive — text node (static, no reactive effects to tear down).
-  if (typeof child !== "object") {
+  if (typeof child !== 'object') {
     parent.insertBefore(document.createTextNode(String(child)), anchor)
     return noop
   }
@@ -132,23 +132,23 @@ export function mountChild(
   if (vnode.type === (PortalSymbol as unknown as string)) {
     const { target, children } = vnode.props as unknown as PortalProps
     if (__DEV__ && !target) {
-      console.warn("[Pyreon] <Portal> received a falsy `target`. Provide a valid DOM element.")
+      console.warn('[Pyreon] <Portal> received a falsy `target`. Provide a valid DOM element.')
       return noop
     }
     if (__DEV__ && !(target instanceof Node)) {
       console.warn(
         `[Pyreon] <Portal> target must be a DOM node. Received ${typeof target}. ` +
-          "Use document.getElementById() or a ref to get the target element.",
+          'Use document.getElementById() or a ref to get the target element.',
       )
     }
     return mountChild(children, target, null)
   }
 
-  if (typeof vnode.type === "function") {
+  if (typeof vnode.type === 'function') {
     return mountComponent(vnode as VNode & { type: ComponentFn }, parent, anchor)
   }
 
-  if (__DEV__ && typeof vnode.type !== "string") {
+  if (__DEV__ && typeof vnode.type !== 'string') {
     console.warn(
       `[Pyreon] Invalid VNode type: expected a string tag or component function, ` +
         `received ${typeof vnode.type} (${String(vnode.type)}). ` +
@@ -164,20 +164,20 @@ export function mountChild(
 
 // Void elements that cannot have children
 const VOID_ELEMENTS = new Set([
-  "area",
-  "base",
-  "br",
-  "col",
-  "embed",
-  "hr",
-  "img",
-  "input",
-  "link",
-  "meta",
-  "param",
-  "source",
-  "track",
-  "wbr",
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
 ])
 
 function mountElement(vnode: VNode, parent: Node, anchor: Node | null): Cleanup {
@@ -186,7 +186,7 @@ function mountElement(vnode: VNode, parent: Node, anchor: Node | null): Cleanup
   if (__DEV__ && (vnode.children?.length ?? 0) > 0 && VOID_ELEMENTS.has(vnode.type as string)) {
     console.warn(
       `[Pyreon] <${vnode.type as string}> is a void element and cannot have children. ` +
-        "Children passed to void elements will be ignored by the browser.",
+        'Children passed to void elements will be ignored by the browser.',
     )
   }
 
@@ -204,7 +204,7 @@ function mountElement(vnode: VNode, parent: Node, anchor: Node | null): Cleanup
   // Populate ref after the element is in the DOM
   const ref = props.ref as RefProp<Element> | null | undefined
   if (ref) {
-    if (typeof ref === "function") ref(el)
+    if (typeof ref === 'function') ref(el)
     else ref.current = el
   }
 
@@ -225,14 +225,14 @@ function mountElement(vnode: VNode, parent: Node, anchor: Node | null): Cleanup
       }
     const refToClean = ref
     return () => {
-      if (refToClean && typeof refToClean === "object") refToClean.current = null
+      if (refToClean && typeof refToClean === 'object') refToClean.current = null
       if (propCleanup) propCleanup()
       childCleanup()
     }
   }
 
   return () => {
-    if (ref && typeof ref === "object") ref.current = null
+    if (ref && typeof ref === 'object') ref.current = null
     if (propCleanup) propCleanup()
     childCleanup()
     const p = el.parentNode
@@ -250,10 +250,10 @@ function mountComponent(
   const scope = effectScope()
   setCurrentScope(scope)
 
-  let hooks: ReturnType<typeof runWithHooks>["hooks"]
+  let hooks: ReturnType<typeof runWithHooks>['hooks']
   let output: VNodeChild
 
-  const componentName = (vnode.type.name || "Anonymous") as string
+  const componentName = (vnode.type.name || 'Anonymous') as string
   const compId = `${componentName}-${Math.random().toString(36).slice(2, 9)}`
   const parentId = _mountingStack[_mountingStack.length - 1] ?? null
   _mountingStack.push(compId)
@@ -278,7 +278,7 @@ function mountComponent(
     scope.stop()
     reportError({
       component: componentName,
-      phase: "setup",
+      phase: 'setup',
       error: err,
       timestamp: Date.now(),
       props: vnode.props as Record<string, unknown>,
@@ -292,14 +292,14 @@ function mountComponent(
     setCurrentScope(null)
   }
 
-  if (__DEV__ && output != null && typeof output === "object") {
+  if (__DEV__ && output != null && typeof output === 'object') {
     if (output instanceof Promise) {
       console.warn(
         `[Pyreon] Component <${componentName}> returned a Promise. ` +
-          "Components must be synchronous — use lazy() + Suspense for async loading, " +
-          "or fetch data in onMount and store it in a signal.",
+          'Components must be synchronous — use lazy() + Suspense for async loading, ' +
+          'or fetch data in onMount and store it in a signal.',
       )
-    } else if (!("type" in output)) {
+    } else if (!('type' in output)) {
       console.warn(
         `[Pyreon] Component <${componentName}> returned an invalid value. Components must return a VNode, string, null, or function.`,
       )
@@ -320,7 +320,7 @@ function mountComponent(
     if (!handled) {
       reportError({
         component: componentName,
-        phase: "render",
+        phase: 'render',
         error: err,
         timestamp: Date.now(),
         props: vnode.props as Record<string, unknown>,
@@ -346,7 +346,7 @@ function mountComponent(
       if (cleanup) mountCleanups.push(cleanup)
     } catch (err) {
       console.error(`[Pyreon] Error in onMount hook of <${componentName}>:`, err)
-      reportError({ component: componentName, phase: "mount", error: err, timestamp: Date.now() })
+      reportError({ component: componentName, phase: 'mount', error: err, timestamp: Date.now() })
     }
   }
 
@@ -361,7 +361,7 @@ function mountComponent(
         console.error(`[Pyreon] Error in onUnmount hook of <${componentName}>:`, err)
         reportError({
           component: componentName,
-          phase: "unmount",
+          phase: 'unmount',
           error: err,
           timestamp: Date.now(),
         })
@@ -380,7 +380,7 @@ function mountChildren(children: VNodeChild[], parent: Node, anchor: Node | null
   if (children.length === 1) {
     const c = children[0] as VNodeChild
     if (c !== undefined) {
-      if (anchor === null && (typeof c === "string" || typeof c === "number")) {
+      if (anchor === null && (typeof c === 'string' || typeof c === 'number')) {
         ;(parent as HTMLElement).textContent = String(c)
         return noop
       }
@@ -419,7 +419,7 @@ function isKeyedArray(value: unknown): value is VNode[] {
   return value.every(
     (v) =>
       v !== null &&
-      typeof v === "object" &&
+      typeof v === 'object' &&
       !Array.isArray(v) &&
       (v as VNode).key !== null &&
       (v as VNode).key !== undefined,

package/src/nodes.ts

@@ -1,10 +1,11 @@
-import type { VNode, VNodeChild } from "@pyreon/core"
+import type { VNode, VNodeChild } from '@pyreon/core'
+import { captureContextStack, restoreContextStack } from '@pyreon/core'
 
 type MountFn = (child: VNodeChild, parent: Node, anchor: Node | null) => Cleanup
 
-import { effect, runUntracked } from "@pyreon/reactivity"
+import { effect, runUntracked } from '@pyreon/reactivity'
 
-const __DEV__ = typeof process !== "undefined" && process.env.NODE_ENV !== "production"
+const __DEV__ = typeof process !== 'undefined' && process.env.NODE_ENV !== 'production'
 
 type Cleanup = () => void
 
@@ -43,9 +44,15 @@ export function mountReactive(
   anchor: Node | null,
   mount: (child: VNodeChild, p: Node, a: Node | null) => Cleanup,
 ): Cleanup {
-  const marker = document.createComment("pyreon")
+  const marker = document.createComment('pyreon')
   parent.insertBefore(marker, anchor)
 
+  // Capture the context stack at creation time — ancestor provide() calls
+  // have already run, so this snapshot contains all parent contexts.
+  // When the effect re-mounts children later (e.g. Show toggling on),
+  // we restore this snapshot so children see ancestor providers.
+  const contextSnapshot = captureContextStack()
+
   let currentCleanup: Cleanup = () => {
     /* noop */
   }
@@ -61,13 +68,18 @@ export function mountReactive(
       /* noop */
     }
     const value = accessor()
-    if (__DEV__ && typeof value === "function") {
+    if (__DEV__ && typeof value === 'function') {
       console.warn(
-        "[Pyreon] Reactive accessor returned a function instead of a value. Did you forget to call the signal?",
+        '[Pyreon] Reactive accessor returned a function instead of a value. Did you forget to call the signal?',
       )
     }
     if (value != null && value !== false) {
-      const cleanup = mount(value, parent, marker)
+      // Restore ancestor context so children mounted here can read
+      // provider values via useContext() — without this, <Show> children
+      // wouldn't inherit context from components above the Show boundary.
+      const cleanup = restoreContextStack(contextSnapshot, () =>
+        mount(value, parent, marker),
+      )
       // Guard: a re-entrant signal update (e.g. ErrorBoundary catching a child
       // throw) may have already re-run this effect and updated currentCleanup.
       // In that case, discard our stale cleanup rather than overwriting the one
@@ -209,8 +221,8 @@ export function mountKeyedList(
   listAnchor: Node | null,
   mountVNode: (vnode: VNode, p: Node, a: Node | null) => Cleanup,
 ): Cleanup {
-  const startMarker = document.createComment("")
-  const tailMarker = document.createComment("")
+  const startMarker = document.createComment('')
+  const tailMarker = document.createComment('')
   parent.insertBefore(startMarker, listAnchor)
   parent.insertBefore(tailMarker, listAnchor)
 
@@ -255,7 +267,7 @@ export function mountKeyedList(
       const key = vnode.key
       if (key === null || key === undefined) continue
       if (cache.has(key)) continue
-      const anchor = document.createComment("")
+      const anchor = document.createComment('')
       _keyedAnchors.add(anchor)
       parent.insertBefore(anchor, tailMarker)
       const cleanup = mountVNode(vnode, parent, tailMarker)
@@ -427,13 +439,13 @@ function forLisReorder(
 export function mountFor<T>(
   source: () => T[],
   getKey: (item: T) => string | number,
-  renderItem: (item: T) => import("@pyreon/core").VNode | import("@pyreon/core").NativeItem,
+  renderItem: (item: T) => import('@pyreon/core').VNode | import('@pyreon/core').NativeItem,
   parent: Node,
   anchor: Node | null,
   mountChild: MountFn,
 ): Cleanup {
-  const startMarker = document.createComment("")
-  const tailMarker = document.createComment("")
+  const startMarker = document.createComment('')
+  const tailMarker = document.createComment('')
   parent.insertBefore(startMarker, anchor)
   parent.insertBefore(tailMarker, anchor)
 
@@ -453,8 +465,8 @@ export function mountFor<T>(
     if (!__DEV__ || !seen) return
     if (key == null) {
       console.warn(
-        "[Pyreon] <For> `by` function returned null/undefined. " +
-          "Keys must be strings or numbers. Check your `by` prop.",
+        '[Pyreon] <For> `by` function returned null/undefined. ' +
+          'Keys must be strings or numbers. Check your `by` prop.',
       )
     }
     if (seen.has(key)) {
@@ -472,18 +484,18 @@ export function mountFor<T>(
     before: Node | null,
   ) => {
     const result = renderItem(item)
-    if ((result as import("@pyreon/core").NativeItem).__isNative) {
-      const native = result as import("@pyreon/core").NativeItem
+    if ((result as import('@pyreon/core').NativeItem).__isNative) {
+      const native = result as import('@pyreon/core').NativeItem
       container.insertBefore(native.el, before)
       cache.set(key, { anchor: native.el, cleanup: native.cleanup, pos })
       if (native.cleanup) cleanupCount++
       return
     }
     const priorLast = before ? before.previousSibling : container.lastChild
-    const cl = mountChild(result as import("@pyreon/core").VNode, container, before)
+    const cl = mountChild(result as import('@pyreon/core').VNode, container, before)
     const firstMounted = priorLast ? priorLast.nextSibling : container.firstChild
     if (!firstMounted || firstMounted === before) {
-      const ph = document.createComment("")
+      const ph = document.createComment('')
       container.insertBefore(ph, before)
       cache.set(key, { anchor: ph, cleanup: cl, pos })
     } else {

package/src/props.ts

@@ -1,12 +1,12 @@
-import type { ClassValue, Props } from "@pyreon/core"
-import { cx, normalizeStyleValue, toKebabCase } from "@pyreon/core"
+import type { ClassValue, Props } from '@pyreon/core'
+import { cx, normalizeStyleValue, toKebabCase } from '@pyreon/core'
 
-import { batch, renderEffect } from "@pyreon/reactivity"
-import { DELEGATED_EVENTS, delegatedPropName } from "./delegate"
+import { batch, renderEffect } from '@pyreon/reactivity'
+import { DELEGATED_EVENTS, delegatedPropName } from './delegate'
 
 type Cleanup = () => void
 
-const __DEV__ = typeof process !== "undefined" && process.env.NODE_ENV !== "production"
+const __DEV__ = typeof process !== 'undefined' && process.env.NODE_ENV !== 'production'
 
 // ─── Configurable sanitizer ──────────────────────────────────────────────────
 
@@ -36,75 +36,75 @@ export function setSanitizer(fn: SanitizeFn | null): void {
 
 // Safe HTML tags allowed by the fallback sanitizer (block + inline, no scripts/embeds/forms)
 const SAFE_TAGS = new Set([
-  "a",
-  "abbr",
-  "address",
-  "article",
-  "aside",
-  "b",
-  "bdi",
-  "bdo",
-  "blockquote",
-  "br",
-  "caption",
-  "cite",
-  "code",
-  "col",
-  "colgroup",
-  "dd",
-  "del",
-  "details",
-  "dfn",
-  "div",
-  "dl",
-  "dt",
-  "em",
-  "figcaption",
-  "figure",
-  "footer",
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  "header",
-  "hr",
-  "i",
-  "ins",
-  "kbd",
-  "li",
-  "main",
-  "mark",
-  "nav",
-  "ol",
-  "p",
-  "pre",
-  "q",
-  "rp",
-  "rt",
-  "ruby",
-  "s",
-  "samp",
-  "section",
-  "small",
-  "span",
-  "strong",
-  "sub",
-  "summary",
-  "sup",
-  "table",
-  "tbody",
-  "td",
-  "tfoot",
-  "th",
-  "thead",
-  "time",
-  "tr",
-  "u",
-  "ul",
-  "var",
-  "wbr",
+  'a',
+  'abbr',
+  'address',
+  'article',
+  'aside',
+  'b',
+  'bdi',
+  'bdo',
+  'blockquote',
+  'br',
+  'caption',
+  'cite',
+  'code',
+  'col',
+  'colgroup',
+  'dd',
+  'del',
+  'details',
+  'dfn',
+  'div',
+  'dl',
+  'dt',
+  'em',
+  'figcaption',
+  'figure',
+  'footer',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'header',
+  'hr',
+  'i',
+  'ins',
+  'kbd',
+  'li',
+  'main',
+  'mark',
+  'nav',
+  'ol',
+  'p',
+  'pre',
+  'q',
+  'rp',
+  'rt',
+  'ruby',
+  's',
+  'samp',
+  'section',
+  'small',
+  'span',
+  'strong',
+  'sub',
+  'summary',
+  'sup',
+  'table',
+  'tbody',
+  'td',
+  'tfoot',
+  'th',
+  'thead',
+  'time',
+  'tr',
+  'u',
+  'ul',
+  'var',
+  'wbr',
 ])
 
 // Attributes that can carry executable code
@@ -116,7 +116,7 @@ const UNSAFE_ATTR_RE = /^on/i
  * and blocks javascript:/data: URLs in href/src/action attributes.
  */
 function fallbackSanitize(html: string): string {
-  const doc = new DOMParser().parseFromString(html, "text/html")
+  const doc = new DOMParser().parseFromString(html, 'text/html')
   sanitizeNode(doc.body)
   return doc.body.innerHTML
 }
@@ -173,7 +173,7 @@ export function applyProps(el: Element, props: Props): Cleanup | null {
   let first: Cleanup | null = null
   let cleanups: Cleanup[] | null = null
   for (const key in props) {
-    if (key === "key" || key === "ref" || key === "children") continue
+    if (key === 'key' || key === 'ref' || key === 'children') continue
     const c = applyProp(el, key, props[key])
     if (c) {
       if (!first) {
@@ -203,7 +203,7 @@ export function applyProps(el: Element, props: Props): Cleanup | null {
  * Bind an event handler (onClick → "click") with batching + delegation support.
  */
 function applyEventProp(el: Element, key: string, value: unknown): Cleanup | null {
-  if (typeof value !== "function") {
+  if (typeof value !== 'function') {
     if (__DEV__) {
       console.warn(
         `[Pyreon] Event handler "${key}" received a non-function value (${typeof value}). ` +
@@ -233,8 +233,8 @@ export function applyProp(el: Element, key: string, value: unknown): Cleanup | n
   if (EVENT_RE.test(key)) return applyEventProp(el, key, value)
 
   // innerHTML — sanitized via Sanitizer API or fallback allowlist sanitizer
-  if (key === "innerHTML") {
-    if (typeof (el as HTMLElement & { setHTML?: (h: string) => void }).setHTML === "function") {
+  if (key === 'innerHTML') {
+    if (typeof (el as HTMLElement & { setHTML?: (h: string) => void }).setHTML === 'function') {
       ;(el as HTMLElement & { setHTML: (h: string) => void }).setHTML(value as string)
     } else {
       ;(el as HTMLElement).innerHTML = sanitizeHtml(value as string)
@@ -242,10 +242,10 @@ export function applyProp(el: Element, key: string, value: unknown): Cleanup | n
     return null
   }
   // dangerouslySetInnerHTML — intentionally raw, developer owns sanitization (same as React)
-  if (key === "dangerouslySetInnerHTML") {
+  if (key === 'dangerouslySetInnerHTML') {
     if (__DEV__) {
       console.warn(
-        "[Pyreon] dangerouslySetInnerHTML bypasses sanitization. Ensure the HTML is trusted.",
+        '[Pyreon] dangerouslySetInnerHTML bypasses sanitization. Ensure the HTML is trusted.',
       )
     }
     ;(el as HTMLElement).innerHTML = (value as { __html: string }).__html
@@ -255,7 +255,7 @@ export function applyProp(el: Element, key: string, value: unknown): Cleanup | n
   // 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.
-  if (typeof value === "function") {
+  if (typeof value === 'function') {
     const dispose = renderEffect(() => setStaticProp(el, key, (value as () => unknown)()))
     return dispose
   }
@@ -265,42 +265,42 @@ export function applyProp(el: Element, key: string, value: unknown): Cleanup | n
 }
 
 // Attributes that carry URLs and must be guarded against javascript:/data: injection.
-const URL_ATTRS = new Set(["href", "src", "action", "formaction", "poster", "cite", "data"])
+const URL_ATTRS = new Set(['href', 'src', 'action', 'formaction', 'poster', 'cite', 'data'])
 const UNSAFE_URL_RE = /^\s*(?:javascript|data):/i
 
 /** Apply a style prop (string or object). */
 function applyStyleProp(el: HTMLElement, value: unknown): void {
-  if (typeof value === "string") {
+  if (typeof value === 'string') {
     el.style.cssText = value
-  } else if (value != null && typeof value === "object") {
+  } else if (value != null && typeof value === 'object') {
     const obj = value as Record<string, unknown>
     for (const k in obj) {
       const css = normalizeStyleValue(k, obj[k])
-      el.style.setProperty(k.startsWith("--") ? k : toKebabCase(k), css)
+      el.style.setProperty(k.startsWith('--') ? k : toKebabCase(k), css)
     }
   }
 }
 
 function applyClassProp(el: Element, value: unknown): void {
-  const resolved = typeof value === "string" ? value : cx(value as ClassValue)
-  el.setAttribute("class", resolved || "")
+  const resolved = typeof value === 'string' ? value : cx(value as ClassValue)
+  el.setAttribute('class', resolved || '')
 }
 
 function setStaticProp(el: Element, key: string, value: unknown): void {
   // Block javascript:/data: URI injection in URL-bearing attributes.
-  if (URL_ATTRS.has(key) && typeof value === "string" && UNSAFE_URL_RE.test(value)) {
+  if (URL_ATTRS.has(key) && typeof value === 'string' && UNSAFE_URL_RE.test(value)) {
     if (__DEV__) {
       console.warn(`[Pyreon] Blocked unsafe URL in "${key}" attribute: ${value}`)
     }
     return
   }
 
-  if (key === "class" || key === "className") {
+  if (key === 'class' || key === 'className') {
     applyClassProp(el, value)
     return
   }
 
-  if (key === "style") {
+  if (key === 'style') {
     applyStyleProp(el as HTMLElement, value)
     return
   }
@@ -310,8 +310,8 @@ function setStaticProp(el: Element, key: string, value: unknown): void {
     return
   }
 
-  if (typeof value === "boolean") {
-    if (value) el.setAttribute(key, "")
+  if (typeof value === 'boolean') {
+    if (value) el.setAttribute(key, '')
     else el.removeAttribute(key)
     return
   }