@pyreon/runtime-dom 0.2.1 → 0.3.0

package/src/delegate.ts

@@ -0,0 +1,82 @@
+/**
+ * Event delegation — single listener per event type on the mount container.
+ *
+ * Instead of calling addEventListener on every element, the compiler emits
+ * `el.__click = handler` (expando property). A single delegated listener on the
+ * container walks event.target up the DOM tree, checking for expandos.
+ *
+ * Benefits:
+ * - Saves ~2000 addEventListener calls for 1000 rows with 2 handlers each
+ * - Reduces memory per row (no per-element listener closure)
+ * - Faster initial mount (~0.4-0.8ms savings on 1000-row benchmarks)
+ */
+
+import { batch } from "@pyreon/reactivity"
+
+/**
+ * Events that are delegated (common bubbling events).
+ * Non-bubbling events (focus, blur, mouseenter, mouseleave, load, error, scroll)
+ * are NOT delegated — they must use addEventListener.
+ */
+export const DELEGATED_EVENTS = new Set([
+  "click",
+  "dblclick",
+  "contextmenu",
+  "focusin",
+  "focusout",
+  "input",
+  "change",
+  "keydown",
+  "keyup",
+  "mousedown",
+  "mouseup",
+  "mousemove",
+  "mouseover",
+  "mouseout",
+  "pointerdown",
+  "pointerup",
+  "pointermove",
+  "pointerover",
+  "pointerout",
+  "touchstart",
+  "touchend",
+  "touchmove",
+  "submit",
+])
+
+/**
+ * Property name used on DOM elements to store delegated event handlers.
+ * Format: `__ev_{eventName}` e.g. `__ev_click`, `__ev_input`
+ */
+export function delegatedPropName(eventName: string): string {
+  return `__ev_${eventName}`
+}
+
+// Track which containers already have delegation installed
+const _delegated = new WeakSet<Element>()
+
+/**
+ * Install delegation listeners on a container element.
+ * Called once from mount(). Idempotent — safe to call multiple times.
+ */
+export function setupDelegation(container: Element): void {
+  if (_delegated.has(container)) return
+  _delegated.add(container)
+
+  for (const eventName of DELEGATED_EVENTS) {
+    const prop = delegatedPropName(eventName)
+    container.addEventListener(eventName, (e: Event) => {
+      let el = e.target as (HTMLElement & Record<string, unknown>) | null
+      while (el && el !== container) {
+        const handler = el[prop] as EventListener | undefined
+        if (handler) {
+          batch(() => handler(e))
+          // Don't break — allow ancestor handlers too (consistent with addEventListener)
+          // But if stopPropagation was called, stop walking
+          if (e.cancelBubble) break
+        }
+        el = el.parentElement as (HTMLElement & Record<string, unknown>) | null
+      }
+    })
+  }
+}

package/src/hydrate.ts

@@ -25,7 +25,8 @@ import {
   reportError,
   runWithHooks,
 } from "@pyreon/core"
-import { effect, effectScope, runUntracked, setCurrentScope } from "@pyreon/reactivity"
+import { effectScope, renderEffect, runUntracked, setCurrentScope } from "@pyreon/reactivity"
+import { setupDelegation } from "./delegate"
 import { warnHydrationMismatch } from "./hydration-debug"
 import { mountChild } from "./mount"
 import { mountReactive } from "./nodes"
@@ -46,7 +47,7 @@ function firstReal(initialNode: ChildNode | null): ChildNode | null {
       node = node.nextSibling
       continue
     }
-    if (node.nodeType === Node.TEXT_NODE && (node as Text).data.trim() === "") {
+    if (node.nodeType === Node.TEXT_NODE && isWhitespaceOnly((node as Text).data)) {
       node = node.nextSibling
       continue
     }
@@ -55,6 +56,16 @@ function firstReal(initialNode: ChildNode | null): ChildNode | null {
   return null
 }
 
+/** Check if a string is whitespace-only without allocating a trimmed copy. */
+function isWhitespaceOnly(s: string): boolean {
+  for (let i = 0; i < s.length; i++) {
+    const c = s.charCodeAt(i)
+    // space, tab, newline, carriage return, form feed
+    if (c !== 32 && c !== 9 && c !== 10 && c !== 13 && c !== 12) return false
+  }
+  return true
+}
+
 /** Advance past a node, skipping whitespace-only text and comments */
 function nextReal(node: ChildNode): ChildNode | null {
   return firstReal(node.nextSibling)
@@ -119,11 +130,11 @@ function hydrateReactiveText(
 ): [Cleanup, ChildNode | null] {
   if (domNode?.nodeType === Node.TEXT_NODE) {
     const textNode = domNode as Text
-    const e = effect(() => {
+    const dispose = renderEffect(() => {
       const v = child()
       textNode.data = v == null ? "" : String(v)
     })
-    return [() => e.dispose(), nextReal(domNode)]
+    return [dispose, nextReal(domNode)]
   }
   warnHydrationMismatch("text", "TextNode", domNode?.nodeType ?? "null", `${path} > reactive`)
   const cleanup = mountChild(child, parent, anchor)
@@ -265,6 +276,13 @@ function hydrateChildren(
   anchor: Node | null,
   path = "root",
 ): [Cleanup, ChildNode | null] {
+  if (children.length === 0) return [noop, domNode]
+
+  // Single-child fast path — avoids cleanups array allocation
+  if (children.length === 1) {
+    return hydrateChild(children[0] as VNodeChild, domNode, parent, anchor, path)
+  }
+
   const cleanups: Cleanup[] = []
   let cursor = domNode
   for (const child of children) {
@@ -379,6 +397,7 @@ function hydrateComponent(
  * const unmount = hydrateRoot(document.getElementById("app")!, h(App, null))
  */
 export function hydrateRoot(container: Element, vnode: VNodeChild): () => void {
+  setupDelegation(container)
   const firstChild = firstReal(container.firstChild as ChildNode | null)
   const [cleanup] = hydrateChild(vnode, firstChild, container, null)
   return cleanup

package/src/index.ts

@@ -1,5 +1,6 @@
 // @pyreon/runtime-dom — surgical signal-to-DOM renderer (no virtual DOM)
 
+export { DELEGATED_EVENTS, delegatedPropName, setupDelegation } from "./delegate"
 export type { DevtoolsComponentEntry, PyreonDevtools } from "./devtools"
 export { hydrateRoot } from "./hydrate"
 export { disableHydrationWarnings, enableHydrationWarnings } from "./hydration-debug"
@@ -8,13 +9,14 @@ export { KeepAlive } from "./keep-alive"
 export { mountChild } from "./mount"
 export type { Directive, SanitizeFn } from "./props"
 export { applyProp, applyProps, sanitizeHtml, setSanitizer } from "./props"
-export { _tpl, createTemplate } from "./template"
+export { _bindDirect, _bindText, _tpl, createTemplate } from "./template"
 export type { TransitionProps } from "./transition"
 export { Transition } from "./transition"
 export type { TransitionGroupProps } from "./transition-group"
 export { TransitionGroup } from "./transition-group"
 
 import type { VNodeChild } from "@pyreon/core"
+import { setupDelegation } from "./delegate"
 import { installDevTools } from "./devtools"
 import { mountChild } from "./mount"
 
@@ -35,6 +37,7 @@ export function mount(root: VNodeChild, container: Element): () => void {
     )
   }
   installDevTools()
+  setupDelegation(container)
   container.innerHTML = ""
   return mountChild(root, container, null)
 }

package/src/props.ts

@@ -1,5 +1,6 @@
 import type { Props } from "@pyreon/core"
 import { batch, renderEffect } from "@pyreon/reactivity"
+import { DELEGATED_EVENTS, delegatedPropName } from "./delegate"
 
 type Cleanup = () => void
 
@@ -214,10 +215,21 @@ export function applyProps(el: Element, props: Props): Cleanup | null {
  */
 export function applyProp(el: Element, key: string, value: unknown): Cleanup | null {
   // Event listener: onClick → "click"
-  // Wrapped in batch() so multiple signal writes from one handler coalesce into one DOM update.
+  // Delegated events use expando properties (picked up by the container's delegated listener).
+  // Non-delegated events use addEventListener directly.
+  // Both paths wrap in batch() so multiple signal writes coalesce into one DOM update.
   if (EVENT_RE.test(key)) {
     const eventName = key[2]?.toLowerCase() + key.slice(3)
     const handler = value as EventListener
+
+    if (DELEGATED_EVENTS.has(eventName)) {
+      const prop = delegatedPropName(eventName)
+      ;(el as unknown as Record<string, unknown>)[prop] = (e: Event) => batch(() => handler(e))
+      return () => {
+        ;(el as unknown as Record<string, unknown>)[prop] = undefined
+      }
+    }
+
     const batched: EventListener = (e) => batch(() => handler(e))
     el.addEventListener(eventName, batched)
     return () => el.removeEventListener(eventName, batched)

package/src/template.ts

@@ -40,6 +40,62 @@ export function createTemplate<T>(
   }
 }
 
+// ─── Direct text binding (bypasses effect system) ────────────────────────────
+
+/**
+ * Compiler-emitted direct text binding for single-signal text nodes.
+ *
+ * When the compiler detects `{signal()}` as the only reactive expression
+ * in a text binding, it emits `_bindText(signal, textNode)` instead of
+ * `_bind(() => { textNode.data = signal() })`.
+ *
+ * This bypasses the effect system entirely:
+ * - No deps array allocation
+ * - No withTracking / setDepsCollector overhead
+ * - No `run` closure
+ * - Signal.subscribe is used directly (O(1) subscribe + unsubscribe)
+ *
+ * @param source - A signal (anything with `._v` and `.direct`)
+ * @param node - The Text node to update
+ */
+export function _bindText(
+  source: { _v: unknown; direct: (fn: () => void) => () => void },
+  node: Text,
+): () => void {
+  const update = () => {
+    const v = source._v
+    node.data = v == null || v === false ? "" : String(v as string | number)
+  }
+  update()
+  return source.direct(update)
+}
+
+// ─── Direct signal binding (bypasses effect system) ──────────────────────────
+
+/**
+ * Compiler-emitted direct binding for single-signal reactive expressions.
+ *
+ * Like _bindText but for arbitrary DOM updates (attributes, className, style).
+ * When the compiler detects that a reactive expression depends on exactly one
+ * signal call, it emits `_bindDirect(signal, updater)` instead of
+ * `_bind(() => { updater() })`.
+ *
+ * Uses signal.direct() for zero-overhead registration:
+ * - Flat array instead of Set (no hashing)
+ * - Index-based disposal (no Set.delete)
+ * - No deps array, no withTracking, no run closure
+ *
+ * @param source - A signal (anything with `._v` and `.direct`)
+ * @param updater - Function that reads `source._v` and applies the DOM update
+ */
+export function _bindDirect(
+  source: { _v: unknown; direct: (fn: () => void) => () => void },
+  updater: (value: unknown) => void,
+): () => void {
+  updater(source._v)
+  return source.direct(() => updater(source._v))
+}
+
 // ─── Compiler-facing template API ─────────────────────────────────────────────
 
 // Cache parsed <template> elements by HTML string — parse once, clone many.

package/src/tests/mount.test.ts

@@ -1010,8 +1010,8 @@ describe("mount — props (extended)", () => {
       el,
     )
     const div = el.querySelector("div") as HTMLElement
-    div.dispatchEvent(new MouseEvent("mousedown"))
-    div.dispatchEvent(new MouseEvent("mouseup"))
+    div.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }))
+    div.dispatchEvent(new MouseEvent("mouseup", { bubbles: true }))
     expect(mouseDown).toBe(true)
     expect(mouseUp).toBe(true)
   })