what-core 0.1.1 → 0.2.0

package/dist/dom.js

@@ -1,443 +1,654 @@
+// What Framework - DOM Reconciler
+// Surgical DOM updates. Diff props, diff children, patch only what changed.
+// No virtual DOM tree kept in memory — we diff against the live DOM.
+
 import { effect, batch, untrack } from './reactive.js';
 import { errorBoundaryStack, reportError } from './components.js';
+
+// SVG elements that need namespace
+const SVG_ELEMENTS = new Set([
+  'svg', 'path', 'circle', 'rect', 'line', 'polyline', 'polygon', 'ellipse',
+  'g', 'defs', 'use', 'symbol', 'clipPath', 'mask', 'pattern', 'image',
+  'text', 'tspan', 'textPath', 'foreignObject', 'linearGradient', 'radialGradient', 'stop',
+  'marker', 'animate', 'animateTransform', 'animateMotion', 'set', 'filter',
+  'feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix',
+  'feDiffuseLighting', 'feDisplacementMap', 'feFlood', 'feGaussianBlur', 'feImage',
+  'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'feSpecularLighting',
+  'feTile', 'feTurbulence',
+]);
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+// Mount a component tree into a DOM container
 export function mount(vnode, container) {
-if (typeof container === 'string') {
-container = document.querySelector(container);
-}
-container.textContent = '';
-const node = createDOM(vnode, container);
-if (node) container.appendChild(node);
-return () => {
-container.textContent = '';
-};
-}
-function createDOM(vnode, parent) {
-if (vnode == null || vnode === false || vnode === true) return null;
-if (typeof vnode === 'string' || typeof vnode === 'number') {
-return document.createTextNode(String(vnode));
-}
-if (Array.isArray(vnode)) {
-const frag = document.createDocumentFragment();
-for (const child of vnode) {
-const node = createDOM(child, parent);
-if (node) frag.appendChild(node);
-}
-return frag;
-}
-if (typeof vnode.tag === 'function') {
-return createComponent(vnode, parent);
-}
-const el = document.createElement(vnode.tag);
-applyProps(el, vnode.props, {});
-for (const child of vnode.children) {
-const node = createDOM(child, el);
-if (node) el.appendChild(node);
-}
-el._vnode = vnode;
-return el;
-}
+  if (typeof container === 'string') {
+    container = document.querySelector(container);
+  }
+  container.textContent = '';
+  const node = createDOM(vnode, container);
+  if (node) container.appendChild(node);
+  return () => {
+    // Unmount: clean up effects, remove DOM
+    container.textContent = '';
+    // Disposal is handled by effect cleanup
+  };
+}
+
+// --- Create DOM from VNode ---
+
+function createDOM(vnode, parent, isSvg) {
+  if (vnode == null || vnode === false || vnode === true) return null;
+
+  // Text
+  if (typeof vnode === 'string' || typeof vnode === 'number') {
+    return document.createTextNode(String(vnode));
+  }
+
+  // Array (fragment)
+  if (Array.isArray(vnode)) {
+    const frag = document.createDocumentFragment();
+    for (const child of vnode) {
+      const node = createDOM(child, parent, isSvg);
+      if (node) frag.appendChild(node);
+    }
+    return frag;
+  }
+
+  // Component
+  if (typeof vnode.tag === 'function') {
+    return createComponent(vnode, parent);
+  }
+
+  // Detect SVG context: either we're already in SVG, or this tag is an SVG element
+  const svgContext = isSvg || vnode.tag === 'svg' || SVG_ELEMENTS.has(vnode.tag);
+
+  // HTML or SVG Element
+  const el = svgContext
+    ? document.createElementNS(SVG_NS, vnode.tag)
+    : document.createElement(vnode.tag);
+
+  applyProps(el, vnode.props, {}, svgContext);
+  for (const child of vnode.children) {
+    const node = createDOM(child, el, svgContext && vnode.tag !== 'foreignObject');
+    if (node) el.appendChild(node);
+  }
+
+  // Store vnode on element for diffing
+  el._vnode = vnode;
+  return el;
+}
+
+// --- Component Rendering ---
+
 const componentStack = [];
+
 export function getCurrentComponent() {
-return componentStack[componentStack.length - 1];
+  return componentStack[componentStack.length - 1];
 }
+
 function createComponent(vnode, parent) {
-const { tag: Component, props, children } = vnode;
-if (Component === '__errorBoundary' || vnode.tag === '__errorBoundary') {
-return createErrorBoundary(vnode, parent);
-}
-if (Component === '__suspense' || vnode.tag === '__suspense') {
-return createSuspenseBoundary(vnode, parent);
-}
-const ctx = {
-hooks: [],
-hookIndex: 0,
-effects: [],
-cleanups: [],
-mounted: false,
-disposed: false,
-};
-const marker = document.createComment(`w:${Component.name || 'anon'}`);
-let currentNodes = [];
-const dispose = effect(() => {
-if (ctx.disposed) return;
-ctx.hookIndex = 0;
-componentStack.push(ctx);
-let result;
-try {
-result = Component({ ...props, children });
-} catch (error) {
-componentStack.pop();
-if (!reportError(error)) {
-console.error('[what] Uncaught error in component:', Component.name || 'Anonymous', error);
-throw error;
-}
-return;
-}
-componentStack.pop();
-const vnodes = Array.isArray(result) ? result : [result];
-if (!ctx.mounted) {
-ctx.mounted = true;
-for (const v of vnodes) {
-const node = createDOM(v, parent);
-if (node) {
-currentNodes.push(node);
-}
-}
-} else {
-reconcile(marker.parentNode, currentNodes, vnodes, marker);
-}
-});
-ctx.effects.push(dispose);
-const frag = document.createDocumentFragment();
-frag.appendChild(marker);
-for (const node of currentNodes) {
-frag.appendChild(node);
-}
-return frag;
-}
+  const { tag: Component, props, children } = vnode;
+
+  // Handle special boundary components
+  if (Component === '__errorBoundary' || vnode.tag === '__errorBoundary') {
+    return createErrorBoundary(vnode, parent);
+  }
+  if (Component === '__suspense' || vnode.tag === '__suspense') {
+    return createSuspenseBoundary(vnode, parent);
+  }
+
+  // Component context for hooks
+  const ctx = {
+    hooks: [],
+    hookIndex: 0,
+    effects: [],
+    cleanups: [],
+    mounted: false,
+    disposed: false,
+  };
+
+  // Create a marker for this component's position
+  const marker = document.createComment(`w:${Component.name || 'anon'}`);
+
+  // Reactive render: re-renders when signals used inside change
+  let currentNodes = [];
+
+  const dispose = effect(() => {
+    if (ctx.disposed) return;
+    ctx.hookIndex = 0;
+
+    componentStack.push(ctx);
+
+    let result;
+    try {
+      result = Component({ ...props, children });
+    } catch (error) {
+      componentStack.pop();
+      // Try to report to nearest error boundary
+      if (!reportError(error)) {
+        // No boundary, re-throw
+        console.error('[what] Uncaught error in component:', Component.name || 'Anonymous', error);
+        throw error;
+      }
+      return;
+    }
+
+    componentStack.pop();
+
+    const vnodes = Array.isArray(result) ? result : [result];
+
+    if (!ctx.mounted) {
+      // Initial mount
+      ctx.mounted = true;
+      for (const v of vnodes) {
+        const node = createDOM(v, parent);
+        if (node) {
+          currentNodes.push(node);
+        }
+      }
+    } else {
+      // Update: reconcile
+      reconcile(marker.parentNode, currentNodes, vnodes, marker);
+    }
+  });
+
+  ctx.effects.push(dispose);
+
+  // Return a fragment with marker + rendered nodes
+  const frag = document.createDocumentFragment();
+  frag.appendChild(marker);
+  for (const node of currentNodes) {
+    frag.appendChild(node);
+  }
+
+  return frag;
+}
+
+// Error boundary component handler
 function createErrorBoundary(vnode, parent) {
-const { errorState, handleError, fallback, reset } = vnode.props;
-const children = vnode.children;
-const marker = document.createComment('w:errorBoundary');
-let currentNodes = [];
-const boundary = { handleError };
-const dispose = effect(() => {
-const error = errorState();
-errorBoundaryStack.push(boundary);
-let vnodes;
-if (error) {
-if (typeof fallback === 'function') {
-vnodes = [fallback({ error, reset })];
-} else {
-vnodes = [fallback];
-}
-} else {
-vnodes = children;
-}
-errorBoundaryStack.pop();
-vnodes = Array.isArray(vnodes) ? vnodes : [vnodes];
-if (currentNodes.length === 0) {
-for (const v of vnodes) {
-const node = createDOM(v, parent);
-if (node) currentNodes.push(node);
-}
-} else {
-reconcile(marker.parentNode, currentNodes, vnodes, marker);
-}
-});
-const frag = document.createDocumentFragment();
-frag.appendChild(marker);
-for (const node of currentNodes) {
-frag.appendChild(node);
-}
-return frag;
-}
+  const { errorState, handleError, fallback, reset } = vnode.props;
+  const children = vnode.children;
+
+  const marker = document.createComment('w:errorBoundary');
+  let currentNodes = [];
+
+  // Register this boundary
+  const boundary = { handleError };
+
+  const dispose = effect(() => {
+    const error = errorState();
+
+    // Push boundary to stack so children can find it
+    errorBoundaryStack.push(boundary);
+
+    let vnodes;
+    if (error) {
+      // Render fallback
+      if (typeof fallback === 'function') {
+        vnodes = [fallback({ error, reset })];
+      } else {
+        vnodes = [fallback];
+      }
+    } else {
+      vnodes = children;
+    }
+
+    errorBoundaryStack.pop();
+
+    vnodes = Array.isArray(vnodes) ? vnodes : [vnodes];
+
+    if (currentNodes.length === 0) {
+      // Initial mount
+      for (const v of vnodes) {
+        const node = createDOM(v, parent);
+        if (node) currentNodes.push(node);
+      }
+    } else {
+      reconcile(marker.parentNode, currentNodes, vnodes, marker);
+    }
+  });
+
+  const frag = document.createDocumentFragment();
+  frag.appendChild(marker);
+  for (const node of currentNodes) {
+    frag.appendChild(node);
+  }
+  return frag;
+}
+
+// Suspense boundary component handler
 function createSuspenseBoundary(vnode, parent) {
-const { boundary, fallback, loading } = vnode.props;
-const children = vnode.children;
-const marker = document.createComment('w:suspense');
-let currentNodes = [];
-const dispose = effect(() => {
-const isLoading = loading();
-const vnodes = isLoading ? [fallback] : children;
-const normalized = Array.isArray(vnodes) ? vnodes : [vnodes];
-if (currentNodes.length === 0) {
-for (const v of normalized) {
-const node = createDOM(v, parent);
-if (node) currentNodes.push(node);
-}
-} else {
-reconcile(marker.parentNode, currentNodes, normalized, marker);
-}
-});
-const frag = document.createDocumentFragment();
-frag.appendChild(marker);
-for (const node of currentNodes) {
-frag.appendChild(node);
-}
-return frag;
-}
+  const { boundary, fallback, loading } = vnode.props;
+  const children = vnode.children;
+
+  const marker = document.createComment('w:suspense');
+  let currentNodes = [];
+
+  const dispose = effect(() => {
+    const isLoading = loading();
+    const vnodes = isLoading ? [fallback] : children;
+    const normalized = Array.isArray(vnodes) ? vnodes : [vnodes];
+
+    if (currentNodes.length === 0) {
+      for (const v of normalized) {
+        const node = createDOM(v, parent);
+        if (node) currentNodes.push(node);
+      }
+    } else {
+      reconcile(marker.parentNode, currentNodes, normalized, marker);
+    }
+  });
+
+  const frag = document.createDocumentFragment();
+  frag.appendChild(marker);
+  for (const node of currentNodes) {
+    frag.appendChild(node);
+  }
+  return frag;
+}
+
+// --- Reconciliation ---
+// Diff old DOM nodes against new VNodes, patch in place.
+// Uses keyed reconciliation with LIS (Longest Increasing Subsequence) for minimal DOM moves.
+
 function reconcile(parent, oldNodes, newVNodes, beforeMarker) {
-if (!parent) return;
-const hasKeys = newVNodes.some(v => v && typeof v === 'object' && v.key != null);
-if (hasKeys) {
-reconcileKeyed(parent, oldNodes, newVNodes, beforeMarker);
-} else {
-reconcileUnkeyed(parent, oldNodes, newVNodes, beforeMarker);
-}
-}
+  if (!parent) return;
+
+  // Check if we have keyed children
+  const hasKeys = newVNodes.some(v => v && typeof v === 'object' && v.key != null);
+
+  if (hasKeys) {
+    reconcileKeyed(parent, oldNodes, newVNodes, beforeMarker);
+  } else {
+    reconcileUnkeyed(parent, oldNodes, newVNodes, beforeMarker);
+  }
+}
+
+// Unkeyed reconciliation (index-based, fast for static lists)
 function reconcileUnkeyed(parent, oldNodes, newVNodes, beforeMarker) {
-const maxLen = Math.max(oldNodes.length, newVNodes.length);
-const newNodes = [];
-for (let i = 0; i < maxLen; i++) {
-const oldNode = oldNodes[i];
-const newVNode = newVNodes[i];
-if (i >= newVNodes.length) {
-if (oldNode && oldNode.parentNode) {
-oldNode.parentNode.removeChild(oldNode);
-}
-continue;
-}
-if (i >= oldNodes.length) {
-const node = createDOM(newVNode, parent);
-if (node) {
-const ref = getInsertionRef(oldNodes, beforeMarker);
-parent.insertBefore(node, ref);
-newNodes.push(node);
-}
-continue;
-}
-const patched = patchNode(parent, oldNode, newVNode);
-newNodes.push(patched);
-}
-oldNodes.length = 0;
-oldNodes.push(...newNodes);
-}
+  const maxLen = Math.max(oldNodes.length, newVNodes.length);
+  const newNodes = [];
+
+  for (let i = 0; i < maxLen; i++) {
+    const oldNode = oldNodes[i];
+    const newVNode = newVNodes[i];
+
+    if (i >= newVNodes.length) {
+      // Remove extra old nodes
+      if (oldNode && oldNode.parentNode) {
+        oldNode.parentNode.removeChild(oldNode);
+      }
+      continue;
+    }
+
+    if (i >= oldNodes.length) {
+      // Append new nodes
+      const node = createDOM(newVNode, parent);
+      if (node) {
+        const ref = getInsertionRef(oldNodes, beforeMarker);
+        parent.insertBefore(node, ref);
+        newNodes.push(node);
+      }
+      continue;
+    }
+
+    // Patch existing node
+    const patched = patchNode(parent, oldNode, newVNode);
+    newNodes.push(patched);
+  }
+
+  // Update the reference array
+  oldNodes.length = 0;
+  oldNodes.push(...newNodes);
+}
+
+// Keyed reconciliation with LIS algorithm for O(n log n) minimal moves
 function reconcileKeyed(parent, oldNodes, newVNodes, beforeMarker) {
-const oldKeyMap = new Map();
-for (let i = 0; i < oldNodes.length; i++) {
-const node = oldNodes[i];
-const key = node._vnode?.key;
-if (key != null) {
-oldKeyMap.set(key, { node, index: i });
-}
-}
-const newNodes = [];
-const newLen = newVNodes.length;
-const sources = new Array(newLen).fill(-1); 
-const reused = new Set();
-for (let i = 0; i < newLen; i++) {
-const vnode = newVNodes[i];
-const key = vnode?.key;
-if (key != null && oldKeyMap.has(key)) {
-const { node: oldNode, index: oldIndex } = oldKeyMap.get(key);
-sources[i] = oldIndex;
-reused.add(oldIndex);
-}
-}
-for (let i = 0; i < oldNodes.length; i++) {
-if (!reused.has(i) && oldNodes[i]?.parentNode) {
-oldNodes[i].parentNode.removeChild(oldNodes[i]);
-}
-}
-const lis = longestIncreasingSubsequence(sources.filter(s => s !== -1));
-const lisSet = new Set(lis.map((_, i) => {
-let count = 0;
-for (let j = 0; j < sources.length; j++) {
-if (sources[j] !== -1) {
-if (count === lis[i]) return j;
-count++;
-}
-}
-return -1;
-}));
-let lastInserted = beforeMarker?.nextSibling || null;
-for (let i = newLen - 1; i >= 0; i--) {
-const vnode = newVNodes[i];
-const key = vnode?.key;
-const oldEntry = key != null ? oldKeyMap.get(key) : null;
-if (oldEntry && sources[i] !== -1) {
-const oldNode = oldEntry.node;
-const patched = patchNode(parent, oldNode, vnode);
-newNodes[i] = patched;
-if (!lisSet.has(i) && patched.parentNode) {
-parent.insertBefore(patched, lastInserted);
-}
-lastInserted = patched;
-} else {
-const node = createDOM(vnode, parent);
-if (node) {
-parent.insertBefore(node, lastInserted);
-lastInserted = node;
-}
-newNodes[i] = node;
-}
-}
-oldNodes.length = 0;
-oldNodes.push(...newNodes.filter(Boolean));
-}
+  // Build old key -> { node, index } map
+  const oldKeyMap = new Map();
+  for (let i = 0; i < oldNodes.length; i++) {
+    const node = oldNodes[i];
+    const key = node._vnode?.key;
+    if (key != null) {
+      oldKeyMap.set(key, { node, index: i });
+    }
+  }
+
+  const newNodes = [];
+  const newLen = newVNodes.length;
+
+  // First pass: match keys and find reusable nodes
+  const sources = new Array(newLen).fill(-1); // Maps new index to old index
+  const reused = new Set();
+
+  for (let i = 0; i < newLen; i++) {
+    const vnode = newVNodes[i];
+    const key = vnode?.key;
+    if (key != null && oldKeyMap.has(key)) {
+      const { node: oldNode, index: oldIndex } = oldKeyMap.get(key);
+      sources[i] = oldIndex;
+      reused.add(oldIndex);
+    }
+  }
+
+  // Remove nodes that aren't reused
+  for (let i = 0; i < oldNodes.length; i++) {
+    if (!reused.has(i) && oldNodes[i]?.parentNode) {
+      oldNodes[i].parentNode.removeChild(oldNodes[i]);
+    }
+  }
+
+  // Find LIS of old indices to determine which nodes don't need to move
+  const lis = longestIncreasingSubsequence(sources.filter(s => s !== -1));
+  const lisSet = new Set(lis.map((_, i) => {
+    let count = 0;
+    for (let j = 0; j < sources.length; j++) {
+      if (sources[j] !== -1) {
+        if (count === lis[i]) return j;
+        count++;
+      }
+    }
+    return -1;
+  }));
+
+  // Build new nodes array and move/create as needed
+  let lastInserted = beforeMarker?.nextSibling || null;
+
+  // Process in reverse order for correct insertion
+  for (let i = newLen - 1; i >= 0; i--) {
+    const vnode = newVNodes[i];
+    const key = vnode?.key;
+    const oldEntry = key != null ? oldKeyMap.get(key) : null;
+
+    if (oldEntry && sources[i] !== -1) {
+      // Reuse existing node
+      const oldNode = oldEntry.node;
+      // Patch props/children
+      const patched = patchNode(parent, oldNode, vnode);
+      newNodes[i] = patched;
+
+      // Move if not in LIS
+      if (!lisSet.has(i) && patched.parentNode) {
+        parent.insertBefore(patched, lastInserted);
+      }
+      lastInserted = patched;
+    } else {
+      // Create new node
+      const node = createDOM(vnode, parent);
+      if (node) {
+        parent.insertBefore(node, lastInserted);
+        lastInserted = node;
+      }
+      newNodes[i] = node;
+    }
+  }
+
+  // Update the reference array
+  oldNodes.length = 0;
+  oldNodes.push(...newNodes.filter(Boolean));
+}
+
+// Longest Increasing Subsequence - O(n log n)
+// Returns indices of elements that form the LIS
 function longestIncreasingSubsequence(arr) {
-if (arr.length === 0) return [];
-const n = arr.length;
-const dp = new Array(n).fill(1);      
-const parent = new Array(n).fill(-1); 
-const tails = [0];                     
-for (let i = 1; i < n; i++) {
-if (arr[i] > arr[tails[tails.length - 1]]) {
-parent[i] = tails[tails.length - 1];
-tails.push(i);
-} else {
-let lo = 0, hi = tails.length - 1;
-while (lo < hi) {
-const mid = (lo + hi) >> 1;
-if (arr[tails[mid]] < arr[i]) lo = mid + 1;
-else hi = mid;
-}
-if (arr[i] < arr[tails[lo]]) {
-if (lo > 0) parent[i] = tails[lo - 1];
-tails[lo] = i;
-}
-}
-}
-const result = [];
-let k = tails[tails.length - 1];
-while (k !== -1) {
-result.push(k);
-k = parent[k];
-}
-return result.reverse();
-}
+  if (arr.length === 0) return [];
+
+  const n = arr.length;
+  const dp = new Array(n).fill(1);      // Length of LIS ending at i
+  const parent = new Array(n).fill(-1); // Parent index for reconstruction
+  const tails = [0];                     // Indices of smallest tail elements
+
+  for (let i = 1; i < n; i++) {
+    if (arr[i] > arr[tails[tails.length - 1]]) {
+      parent[i] = tails[tails.length - 1];
+      tails.push(i);
+    } else {
+      // Binary search for the smallest element >= arr[i]
+      let lo = 0, hi = tails.length - 1;
+      while (lo < hi) {
+        const mid = (lo + hi) >> 1;
+        if (arr[tails[mid]] < arr[i]) lo = mid + 1;
+        else hi = mid;
+      }
+      if (arr[i] < arr[tails[lo]]) {
+        if (lo > 0) parent[i] = tails[lo - 1];
+        tails[lo] = i;
+      }
+    }
+  }
+
+  // Reconstruct LIS
+  const result = [];
+  let k = tails[tails.length - 1];
+  while (k !== -1) {
+    result.push(k);
+    k = parent[k];
+  }
+  return result.reverse();
+}
+
 function getInsertionRef(nodes, marker) {
-if (nodes.length > 0) {
-const last = nodes[nodes.length - 1];
-return last.nextSibling;
-}
-return marker ? marker.nextSibling : null;
+  if (nodes.length > 0) {
+    const last = nodes[nodes.length - 1];
+    return last.nextSibling;
+  }
+  return marker ? marker.nextSibling : null;
 }
+
 function patchNode(parent, domNode, vnode) {
-if (vnode == null || vnode === false || vnode === true) {
-if (domNode && domNode.parentNode) domNode.parentNode.removeChild(domNode);
-return null;
-}
-if (typeof vnode === 'string' || typeof vnode === 'number') {
-const text = String(vnode);
-if (domNode.nodeType === 3) {
-if (domNode.textContent !== text) domNode.textContent = text;
-return domNode;
-}
-const newNode = document.createTextNode(text);
-parent.replaceChild(newNode, domNode);
-return newNode;
-}
-if (Array.isArray(vnode)) {
-const frag = document.createDocumentFragment();
-for (const v of vnode) {
-const node = createDOM(v, parent);
-if (node) frag.appendChild(node);
-}
-parent.replaceChild(frag, domNode);
-return frag;
-}
-if (typeof vnode.tag === 'function') {
-const node = createComponent(vnode, parent);
-parent.replaceChild(node, domNode);
-return node;
-}
-if (domNode.nodeType === 1 && domNode.tagName.toLowerCase() === vnode.tag) {
-const oldProps = domNode._vnode?.props || {};
-applyProps(domNode, vnode.props, oldProps);
-reconcileChildren(domNode, vnode.children);
-domNode._vnode = vnode;
-return domNode;
-}
-const newNode = createDOM(vnode, parent);
-parent.replaceChild(newNode, domNode);
-return newNode;
-}
+  // Null/removed
+  if (vnode == null || vnode === false || vnode === true) {
+    if (domNode && domNode.parentNode) domNode.parentNode.removeChild(domNode);
+    return null;
+  }
+
+  // Text
+  if (typeof vnode === 'string' || typeof vnode === 'number') {
+    const text = String(vnode);
+    if (domNode.nodeType === 3) {
+      if (domNode.textContent !== text) domNode.textContent = text;
+      return domNode;
+    }
+    const newNode = document.createTextNode(text);
+    parent.replaceChild(newNode, domNode);
+    return newNode;
+  }
+
+  // Array
+  if (Array.isArray(vnode)) {
+    // For now, flatten and reconcile as children
+    const frag = document.createDocumentFragment();
+    for (const v of vnode) {
+      const node = createDOM(v, parent);
+      if (node) frag.appendChild(node);
+    }
+    parent.replaceChild(frag, domNode);
+    return frag;
+  }
+
+  // Component
+  if (typeof vnode.tag === 'function') {
+    // Re-create component (future: memoize + diff props)
+    const node = createComponent(vnode, parent);
+    parent.replaceChild(node, domNode);
+    return node;
+  }
+
+  // Element: same tag? Patch props + children
+  if (domNode.nodeType === 1 && domNode.tagName.toLowerCase() === vnode.tag) {
+    const oldProps = domNode._vnode?.props || {};
+    applyProps(domNode, vnode.props, oldProps);
+    reconcileChildren(domNode, vnode.children);
+    domNode._vnode = vnode;
+    return domNode;
+  }
+
+  // Different tag: replace entirely
+  const newNode = createDOM(vnode, parent);
+  parent.replaceChild(newNode, domNode);
+  return newNode;
+}
+
 function reconcileChildren(parent, newChildVNodes) {
-const oldChildren = Array.from(parent.childNodes);
-const hasKeys = newChildVNodes.some(v => v && typeof v === 'object' && v.key != null);
-if (hasKeys) {
-reconcileKeyed(parent, oldChildren, newChildVNodes, null);
-} else {
-const maxLen = Math.max(oldChildren.length, newChildVNodes.length);
-for (let i = 0; i < maxLen; i++) {
-if (i >= newChildVNodes.length) {
-if (oldChildren[i]?.parentNode) {
-parent.removeChild(oldChildren[i]);
-}
-continue;
-}
-if (i >= oldChildren.length) {
-const node = createDOM(newChildVNodes[i], parent);
-if (node) parent.appendChild(node);
-continue;
-}
-patchNode(parent, oldChildren[i], newChildVNodes[i]);
-}
-}
-}
-function applyProps(el, newProps, oldProps) {
-newProps = newProps || {};
-oldProps = oldProps || {};
-for (const key in oldProps) {
-if (key === 'key' || key === 'ref' || key === 'children') continue;
-if (!(key in newProps)) {
-removeProp(el, key, oldProps[key]);
-}
-}
-for (const key in newProps) {
-if (key === 'key' || key === 'ref' || key === 'children') continue;
-if (newProps[key] !== oldProps[key]) {
-setProp(el, key, newProps[key]);
-}
-}
-if (newProps.ref && newProps.ref !== oldProps.ref) {
-if (typeof newProps.ref === 'function') newProps.ref(el);
-else newProps.ref.current = el;
-}
-}
-function setProp(el, key, value) {
-if (key.startsWith('on') && key.length > 2) {
-const event = key.slice(2).toLowerCase();
-const old = el._events?.[event];
-if (old) el.removeEventListener(event, old);
-if (!el._events) el._events = {};
-const wrappedHandler = (e) => untrack(() => value(e));
-wrappedHandler._original = value;
-el._events[event] = wrappedHandler;
-el.addEventListener(event, wrappedHandler);
-return;
-}
-if (key === 'className' || key === 'class') {
-el.className = value || '';
-return;
-}
-if (key === 'style') {
-if (typeof value === 'string') {
-el.style.cssText = value;
-} else if (typeof value === 'object') {
-for (const prop in value) {
-el.style[prop] = value[prop] ?? '';
-}
-}
-return;
-}
-if (key === 'dangerouslySetInnerHTML') {
-el.innerHTML = value.__html;
-return;
-}
-if (typeof value === 'boolean') {
-if (value) el.setAttribute(key, '');
-else el.removeAttribute(key);
-return;
-}
-if (key.startsWith('data-') || key.startsWith('aria-')) {
-el.setAttribute(key, value);
-return;
-}
-if (key in el) {
-el[key] = value;
-} else {
-el.setAttribute(key, value);
-}
-}
+  const oldChildren = Array.from(parent.childNodes);
+
+  // Check for keyed children
+  const hasKeys = newChildVNodes.some(v => v && typeof v === 'object' && v.key != null);
+
+  if (hasKeys) {
+    // Use keyed reconciliation
+    reconcileKeyed(parent, oldChildren, newChildVNodes, null);
+  } else {
+    // Unkeyed reconciliation
+    const maxLen = Math.max(oldChildren.length, newChildVNodes.length);
+
+    for (let i = 0; i < maxLen; i++) {
+      if (i >= newChildVNodes.length) {
+        // Remove extra
+        if (oldChildren[i]?.parentNode) {
+          parent.removeChild(oldChildren[i]);
+        }
+        continue;
+      }
+
+      if (i >= oldChildren.length) {
+        // Append new
+        const node = createDOM(newChildVNodes[i], parent);
+        if (node) parent.appendChild(node);
+        continue;
+      }
+
+      patchNode(parent, oldChildren[i], newChildVNodes[i]);
+    }
+  }
+}
+
+// --- Prop Diffing ---
+// Only touch DOM for props that actually changed.
+
+function applyProps(el, newProps, oldProps, isSvg) {
+  newProps = newProps || {};
+  oldProps = oldProps || {};
+
+  // Remove old props not in new
+  for (const key in oldProps) {
+    if (key === 'key' || key === 'ref' || key === 'children') continue;
+    if (!(key in newProps)) {
+      removeProp(el, key, oldProps[key]);
+    }
+  }
+
+  // Set new/changed props
+  for (const key in newProps) {
+    if (key === 'key' || key === 'ref' || key === 'children') continue;
+    if (newProps[key] !== oldProps[key]) {
+      setProp(el, key, newProps[key], isSvg);
+    }
+  }
+
+  // Handle ref
+  if (newProps.ref && newProps.ref !== oldProps.ref) {
+    if (typeof newProps.ref === 'function') newProps.ref(el);
+    else newProps.ref.current = el;
+  }
+}
+
+function setProp(el, key, value, isSvg) {
+  // Event handlers: onClick -> click
+  // Wrap in untrack so signal reads in handlers don't create subscriptions
+  if (key.startsWith('on') && key.length > 2) {
+    const event = key.slice(2).toLowerCase();
+    // Store handler for removal
+    const old = el._events?.[event];
+    if (old) el.removeEventListener(event, old);
+    if (!el._events) el._events = {};
+    // Wrap handler to untrack signal reads
+    const wrappedHandler = (e) => untrack(() => value(e));
+    wrappedHandler._original = value;
+    el._events[event] = wrappedHandler;
+    // Check for _eventOpts (once/capture/passive from compiler)
+    const eventOpts = value._eventOpts;
+    el.addEventListener(event, wrappedHandler, eventOpts || undefined);
+    return;
+  }
+
+  // className / class
+  if (key === 'className' || key === 'class') {
+    if (isSvg) {
+      el.setAttribute('class', value || '');
+    } else {
+      el.className = value || '';
+    }
+    return;
+  }
+
+  // Style object
+  if (key === 'style') {
+    if (typeof value === 'string') {
+      el.style.cssText = value;
+    } else if (typeof value === 'object') {
+      for (const prop in value) {
+        el.style[prop] = value[prop] ?? '';
+      }
+    }
+    return;
+  }
+
+  // dangerouslySetInnerHTML
+  if (key === 'dangerouslySetInnerHTML') {
+    el.innerHTML = value.__html;
+    return;
+  }
+
+  // Boolean attributes
+  if (typeof value === 'boolean') {
+    if (value) el.setAttribute(key, '');
+    else el.removeAttribute(key);
+    return;
+  }
+
+  // data-* and aria-* as attributes
+  if (key.startsWith('data-') || key.startsWith('aria-')) {
+    el.setAttribute(key, value);
+    return;
+  }
+
+  // SVG: always use setAttribute (SVG properties don't work as DOM properties)
+  if (isSvg) {
+    if (value === false || value == null) {
+      el.removeAttribute(key);
+    } else {
+      el.setAttribute(key, value === true ? '' : String(value));
+    }
+    return;
+  }
+
+  // Default: set as property if it exists, otherwise attribute
+  if (key in el) {
+    el[key] = value;
+  } else {
+    el.setAttribute(key, value);
+  }
+}
+
 function removeProp(el, key, oldValue) {
-if (key.startsWith('on') && key.length > 2) {
-const event = key.slice(2).toLowerCase();
-if (el._events?.[event]) {
-el.removeEventListener(event, el._events[event]);
-delete el._events[event];
-}
-return;
-}
-if (key === 'className' || key === 'class') {
-el.className = '';
-return;
-}
-if (key === 'style') {
-el.style.cssText = '';
-return;
+  if (key.startsWith('on') && key.length > 2) {
+    const event = key.slice(2).toLowerCase();
+    if (el._events?.[event]) {
+      el.removeEventListener(event, el._events[event]);
+      delete el._events[event];
+    }
+    return;
+  }
+
+  if (key === 'className' || key === 'class') {
+    el.className = '';
+    return;
+  }
+
+  if (key === 'style') {
+    el.style.cssText = '';
+    return;
+  }
+
+  el.removeAttribute(key);
 }
-el.removeAttribute(key);
-}