what-core 0.5.6 → 0.6.1

package/src/render.js

@@ -2,21 +2,151 @@
 // Solid-style rendering: components run once, signals create individual DOM effects.
 // No VDOM diffing — direct DOM manipulation with surgical signal-driven updates.
 
-import { effect, untrack, createRoot, signal } from './reactive.js';
-import { createDOM, disposeTree } from './dom.js';
+import { effect, untrack, createRoot, signal, __DEV__ } from './reactive.js';
+import { createDOM, disposeTree, getCurrentComponent, getComponentStack } from './dom.js';
 
 export { effect, untrack };
 
+// --- _$createComponent(Component, props, children) ---
+// Internal compiler target for component instantiation. The compiler emits calls
+// to this function instead of h() — keeping h() out of compiled output entirely.
+// Merges children into props and delegates to createDOM which calls createComponent.
+
+export function _$createComponent(Component, props, children) {
+  if (children && children.length > 0) {
+    const mergedChildren = children.length === 1 ? children[0] : children;
+    props = props ? { ...props, children: mergedChildren } : { children: mergedChildren };
+  }
+  // Build a VNode-like object and pass to createDOM which handles component execution
+  return createDOM({ tag: Component, props: props || {}, children: children || [], key: null, _vnode: true });
+}
+
+// --- URL Sanitization for DOM attributes ---
+// Rejects javascript:, data:, vbscript: protocols (case-insensitive, trimmed).
+
+const URL_ATTRS = new Set(['href', 'src', 'action', 'formaction', 'formAction']);
+
+function isSafeUrl(url) {
+  if (typeof url !== 'string') return true; // non-string values are not URL-injection risks
+  const normalized = url.trim().replace(/[\s\x00-\x1f]/g, '').toLowerCase();
+  if (normalized.startsWith('javascript:')) return false;
+  if (normalized.startsWith('data:')) return false;
+  if (normalized.startsWith('vbscript:')) return false;
+  return true;
+}
+
 // --- template(html) ---
 // Pre-parse HTML string into a <template> element. Returns a factory function
 // that clones the DOM tree via cloneNode(true) — 2-5x faster than createElement chains.
+// INTERNAL: Used by the compiler. Not intended for direct use by application code.
+// Exported as both `template` (for compiler output) and `_template` (to signal internal use).
+
+// Table child elements that need special parent wrapping for innerHTML parsing.
+// Browsers auto-correct bare <tr>, <td>, etc. when orphaned — wrapping prevents silent drops.
+const TABLE_WRAPPERS = {
+  tr:       { depth: 2, wrap: '<table><tbody>',        unwrap: '</tbody></table>' },
+  td:       { depth: 3, wrap: '<table><tbody><tr>',     unwrap: '</tr></tbody></table>' },
+  th:       { depth: 3, wrap: '<table><tbody><tr>',     unwrap: '</tr></tbody></table>' },
+  thead:    { depth: 1, wrap: '<table>',               unwrap: '</table>' },
+  tbody:    { depth: 1, wrap: '<table>',               unwrap: '</table>' },
+  tfoot:    { depth: 1, wrap: '<table>',               unwrap: '</table>' },
+  colgroup: { depth: 1, wrap: '<table>',               unwrap: '</table>' },
+  col:      { depth: 1, wrap: '<table>',               unwrap: '</table>' },
+  caption:  { depth: 1, wrap: '<table>',               unwrap: '</table>' },
+};
+
+// SVG element tags that must be created in an SVG namespace context.
+const SVG_ELEMENTS = new Set([
+  'svg', 'path', 'circle', 'rect', 'line', 'polyline', 'polygon', 'ellipse',
+  'g', 'defs', 'use', 'text', 'tspan', 'foreignObject', 'clipPath', 'mask',
+  'pattern', 'linearGradient', 'radialGradient', 'stop', 'marker', 'symbol',
+  'image', 'animate', 'animateTransform', 'animateMotion', 'set',
+  'filter', 'feGaussianBlur', 'feOffset', 'feMerge', 'feMergeNode',
+  'feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite',
+  'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap',
+  'feFlood', 'feImage', 'feMorphology', 'feSpecularLighting',
+  'feTile', 'feTurbulence', 'feDistantLight', 'fePointLight', 'feSpotLight',
+]);
+
+function getLeadingTag(html) {
+  const m = html.match(/^<([a-zA-Z][a-zA-Z0-9]*)/);
+  return m ? m[1] : '';
+}
+
+// Internal implementation — no warnings. Used by compiler via _$template.
+function _$templateImpl(html) {
+  const trimmed = html.trim();
+  const tag = getLeadingTag(trimmed);
+
+  // SVG namespace: parse inside an SVG container then extract
+  if (SVG_ELEMENTS.has(tag)) {
+    return svgTemplate(trimmed);
+  }
+
+  // Table element wrapping: parse inside proper table parent then extract
+  const tableInfo = TABLE_WRAPPERS[tag];
+  if (tableInfo) {
+    const t = document.createElement('template');
+    t.innerHTML = tableInfo.wrap + trimmed + tableInfo.unwrap;
+    // Navigate down through the wrapper to reach the actual element
+    return () => {
+      let node = t.content.firstChild;
+      for (let i = 0; i < tableInfo.depth; i++) {
+        node = node.firstChild;
+      }
+      return node.cloneNode(true);
+    };
+  }
 
-export function template(html) {
   const t = document.createElement('template');
-  t.innerHTML = html.trim();
+  t.innerHTML = trimmed;
   return () => t.content.firstChild.cloneNode(true);
 }
 
+// Public export — warns in dev mode that this is a compiler internal.
+// Application code should use JSX, which the compiler transforms into _$template calls.
+let _templateWarned = false;
+export function template(html) {
+  if (__DEV__ && !_templateWarned) {
+    _templateWarned = true;
+    console.warn(
+      '[what] template() is a compiler internal. Use JSX instead. ' +
+      'Direct calls with user input can lead to XSS vulnerabilities.'
+    );
+  }
+  return _$templateImpl(html);
+}
+
+// Compiler-internal alias — preferred name for compiled output (no warning)
+export { _$templateImpl as _$template };
+
+// Legacy alias kept for backwards compat
+export { template as _template };
+
+// --- svgTemplate(html) ---
+// Parse SVG content inside an SVG namespace container. Without this, innerHTML on a
+// <template> element creates HTML-namespace nodes, making SVG elements invisible.
+// If the HTML is a complete <svg> tag, it is parsed inside a temporary <div> so the
+// browser uses the correct SVG namespace. For inner SVG elements (path, circle, etc.),
+// they are wrapped in an <svg> container for parsing and then extracted.
+
+export function svgTemplate(html) {
+  const trimmed = html.trim();
+  const tag = getLeadingTag(trimmed);
+
+  if (tag === 'svg') {
+    // Complete <svg> element — parse in a div (browsers handle the namespace)
+    const t = document.createElement('template');
+    t.innerHTML = trimmed;
+    return () => t.content.firstChild.cloneNode(true);
+  }
+
+  // Inner SVG element (path, circle, g, etc.) — wrap in <svg> for namespace context
+  const t = document.createElement('template');
+  t.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg">${trimmed}</svg>`;
+  return () => t.content.firstChild.firstChild.cloneNode(true);
+}
+
 // --- insert(parent, child, marker?) ---
 // Reactive child insertion. Handles all child types:
 // - string/number → text node
@@ -95,6 +225,16 @@ function sameNodeArray(a, b) {
 }
 
 function reconcileInsert(parent, value, current, marker) {
+  // Guard: parent must be a node that supports child operations.
+  // This catches cases where a stale DOM reference (e.g., a comment node from
+  // shifted childNodes indices) is mistakenly passed as the parent.
+  if (!parent || typeof parent.insertBefore !== 'function') {
+    if (__DEV__) {
+      console.warn('[what] reconcileInsert called with invalid parent:', parent);
+    }
+    return current;
+  }
+
   const targetMarker = marker || null;
 
   if (value == null || typeof value === 'boolean') {
@@ -190,11 +330,15 @@ function reconcileList(parent, endMarker, oldItems, newItems, mappedNodes, dispo
   const oldLen = oldItems.length;
 
   if (newLen === 0) {
-    // Fast path: clear all
+    // Fast path: clear all — remove only this list's nodes, not all parent content
     if (oldLen > 0) {
-      for (let i = 0; i < oldLen; i++) disposeFns[i]?.();
-      parent.textContent = '';
-      parent.appendChild(endMarker);
+      for (let i = 0; i < oldLen; i++) {
+        disposeFns[i]?.();
+        if (mappedNodes[i]?.parentNode === parent) {
+          disposeTree(mappedNodes[i]);
+          parent.removeChild(mappedNodes[i]);
+        }
+      }
       mappedNodes.length = 0;
       disposeFns.length = 0;
     }
@@ -427,11 +571,15 @@ function reconcileKeyed(parent, endMarker, oldItems, newItems, mappedNodes, disp
   // --- Fast path: clear all ---
   if (newLen === 0) {
     if (oldLen > 0) {
-      // Skip individual disposal: per-row effects only subscribe to their item signal,
-      // which is also being discarded. Both become unreachable → GC collects them.
-      // Bulk DOM removal: clear parent, re-add marker.
-      parent.textContent = '';
-      parent.appendChild(endMarker);
+      // Call dispose functions to run cleanup callbacks (onCleanup, effect cleanups).
+      // Without this, cleanup callbacks leak.
+      for (let i = 0; i < oldLen; i++) {
+        disposeFns[i]?.();
+        if (mappedNodes[i]?.parentNode === parent) {
+          disposeTree(mappedNodes[i]);
+          parent.removeChild(mappedNodes[i]);
+        }
+      }
       mappedNodes.length = 0;
       disposeFns.length = 0;
       if (keyedState) keyedState.clear();
@@ -710,6 +858,23 @@ export function spread(el, props) {
 }
 
 export function setProp(el, key, value) {
+  // Ref handling — assign element to ref object/callback (defense in depth)
+  if (key === 'ref') {
+    if (typeof value === 'function') value(el);
+    else if (value && typeof value === 'object') value.current = el;
+    return;
+  }
+
+  // Sanitize URL attributes — reject dangerous protocols
+  if (URL_ATTRS.has(key) || URL_ATTRS.has(key.toLowerCase())) {
+    if (!isSafeUrl(value)) {
+      if (typeof console !== 'undefined') {
+        console.warn(`[what] Blocked unsafe URL in "${key}" attribute: ${value}`);
+      }
+      return;
+    }
+  }
+
   if (key === 'class' || key === 'className') {
     el.className = value || '';
   } else if (key === 'dangerouslySetInnerHTML') {
@@ -718,7 +883,13 @@ export function setProp(el, key, value) {
     if (value && typeof value === 'object' && '__html' in value) {
       el.innerHTML = value.__html ?? '';
     } else {
-      el.innerHTML = value ?? '';
+      // Plain string innerHTML is rejected for security — use { __html: string } form
+      if (typeof console !== 'undefined' && value != null && value !== '') {
+        console.warn(
+          '[what] Plain string innerHTML is not allowed. Use { __html: "..." } or dangerouslySetInnerHTML={{ __html: "..." }} instead.'
+        );
+      }
+      // Ignored — do not set innerHTML from plain string
     }
   } else if (key === 'style') {
     if (typeof value === 'string') {
@@ -784,3 +955,280 @@ export function classList(el, classes) {
     }
   });
 }
+
+// =========================================================================
+// DOM Hydration
+// =========================================================================
+// Reuses server-rendered DOM instead of creating new nodes.
+// After hydration is complete, switches to normal rendering for updates.
+
+let _isHydrating = false;
+let _hydrationCursor = null;
+
+export function isHydrating() {
+  return _isHydrating;
+}
+
+/**
+ * hydrate(vnode, container)
+ * Walk existing DOM nodes in `container`, match them against the vnode tree,
+ * attach reactive bindings, and skip cloneNode. Once done, switch to normal rendering.
+ */
+export function hydrate(vnode, container) {
+  _isHydrating = true;
+  _hydrationCursor = { parent: container, index: 0 };
+
+  try {
+    const result = hydrateNode(vnode, container);
+    return result;
+  } finally {
+    _isHydrating = false;
+    _hydrationCursor = null;
+  }
+}
+
+/**
+ * Claim the next DOM node from the hydration cursor.
+ * Returns the existing DOM node or null if none available.
+ */
+function claimNode(parent) {
+  const children = parent.childNodes;
+  while (_hydrationCursor.index < children.length) {
+    const node = children[_hydrationCursor.index];
+    // Skip hydration comment markers
+    if (node.nodeType === 8) { // Comment node
+      const text = node.textContent;
+      if (text === '$' || text === '/$' || text === '[]' || text === '/[]') {
+        _hydrationCursor.index++;
+        continue;
+      }
+    }
+    _hydrationCursor.index++;
+    return node;
+  }
+  return null;
+}
+
+function isDevMode() {
+  return typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production';
+}
+
+function hydrateNode(vnode, parent) {
+  if (vnode == null || typeof vnode === 'boolean') {
+    return null;
+  }
+
+  // Text node
+  if (typeof vnode === 'string' || typeof vnode === 'number') {
+    const existing = claimNode(parent);
+    const text = String(vnode);
+
+    if (existing && existing.nodeType === 3) {
+      // Reuse text node — check for mismatch in dev
+      if (isDevMode() && existing.textContent !== text) {
+        console.warn(
+          `[what] Hydration mismatch: expected text "${text}", got "${existing.textContent}"`
+        );
+        existing.textContent = text;
+      }
+      return existing;
+    }
+
+    // Mismatch: expected text node, got element or nothing
+    if (isDevMode()) {
+      console.warn(
+        `[what] Hydration mismatch: expected text node "${text}", got ${existing ? existing.nodeName : 'nothing'}. Falling back to client render.`
+      );
+    }
+    const textNode = document.createTextNode(text);
+    if (existing) {
+      parent.replaceChild(textNode, existing);
+    } else {
+      parent.appendChild(textNode);
+    }
+    return textNode;
+  }
+
+  // Reactive function child — attach effect to existing node
+  if (typeof vnode === 'function') {
+    // Unwrap to get the initial value for hydration
+    const initialValue = vnode();
+    let current = hydrateNode(initialValue, parent);
+
+    // Set up reactive effect for future updates (normal rendering path)
+    effect(() => {
+      const value = vnode();
+      // After hydration, this runs as normal insert
+      if (!_isHydrating) {
+        current = reconcileInsert(parent, value, current, null);
+      }
+    });
+    return current;
+  }
+
+  // Array — hydrate each child
+  if (Array.isArray(vnode)) {
+    const nodes = [];
+    for (const child of vnode) {
+      const node = hydrateNode(child, parent);
+      if (node) nodes.push(node);
+    }
+    return nodes.length === 1 ? nodes[0] : nodes;
+  }
+
+  // VNode — component or element
+  if (typeof vnode === 'object' && vnode._vnode) {
+    // Component — route through component context so hooks work during hydration
+    if (typeof vnode.tag === 'function') {
+      const componentStack = getComponentStack();
+      const Component = vnode.tag;
+      const props = vnode.props || {};
+      const children = vnode.children || [];
+
+      // Set up component context (mirrors createComponent in dom.js)
+      const ctx = {
+        hooks: [],
+        hookIndex: 0,
+        effects: [],
+        cleanups: [],
+        mounted: false,
+        disposed: false,
+        Component,
+        _parentCtx: componentStack[componentStack.length - 1] || null,
+        _errorBoundary: null,
+      };
+
+      // Push context so hooks can access it
+      componentStack.push(ctx);
+
+      let result;
+      try {
+        const propsChildren = children.length === 0 ? undefined
+          : children.length === 1 ? children[0] : children;
+        result = Component({ ...props, children: propsChildren });
+      } catch (error) {
+        componentStack.pop();
+        console.error('[what] Error in component during hydration:', Component.name || 'Anonymous', error);
+        return null;
+      }
+
+      componentStack.pop();
+      ctx.mounted = true;
+
+      // Run onMount callbacks after hydration
+      if (ctx._mountCallbacks) {
+        queueMicrotask(() => {
+          if (ctx.disposed) return;
+          for (const fn of ctx._mountCallbacks) {
+            try { fn(); } catch (e) { console.error('[what] onMount error:', e); }
+          }
+        });
+      }
+
+      return hydrateNode(result, parent);
+    }
+
+    // Element — claim existing DOM element
+    const existing = claimNode(parent);
+    const expectedTag = vnode.tag.toUpperCase();
+
+    if (existing && existing.nodeType === 1 && existing.nodeName === expectedTag) {
+      // Match! Reuse this element. Apply props/bindings.
+      hydrateElementProps(existing, vnode.props || {});
+
+      // Hydrate children
+      const savedCursor = _hydrationCursor;
+      _hydrationCursor = { parent: existing, index: 0 };
+
+      const rawInner = vnode.props?.dangerouslySetInnerHTML?.__html;
+      if (rawInner == null) {
+        for (const child of vnode.children) {
+          hydrateNode(child, existing);
+        }
+      }
+
+      _hydrationCursor = savedCursor;
+      return existing;
+    }
+
+    // Mismatch — fall back to client render for this subtree
+    if (isDevMode()) {
+      console.warn(
+        `[what] Hydration mismatch: expected <${vnode.tag}>, got ${existing ? existing.nodeName : 'nothing'}. Falling back to client render.`
+      );
+    }
+
+    // Create the element from scratch
+    const newEl = document.createElement(vnode.tag);
+    for (const key in vnode.props || {}) {
+      if (key === 'children' || key === 'key') continue;
+      setProp(newEl, key, vnode.props[key]);
+    }
+    for (const child of vnode.children) {
+      reconcileInsert(newEl, child, null, null);
+    }
+    if (existing) {
+      parent.replaceChild(newEl, existing);
+    } else {
+      parent.appendChild(newEl);
+    }
+    return newEl;
+  }
+
+  // DOM node — use directly
+  if (isDomNode(vnode)) {
+    return vnode;
+  }
+
+  // Fallback — create text node
+  const textNode = document.createTextNode(String(vnode));
+  parent.appendChild(textNode);
+  return textNode;
+}
+
+/**
+ * Apply props to an existing hydrated element.
+ * Attaches event handlers and reactive bindings without re-creating the element.
+ */
+function hydrateElementProps(el, props) {
+  for (const key in props) {
+    if (key === 'children' || key === 'key' || key === 'ref') continue;
+    if (key === 'dangerouslySetInnerHTML' || key === 'innerHTML') continue;
+
+    const value = props[key];
+
+    // Event handlers — always attach (they don't exist in SSR HTML)
+    if (key.startsWith('on') && key.length > 2) {
+      const event = key.slice(2).toLowerCase();
+      el.addEventListener(event, value);
+      continue;
+    }
+
+    // Delegated events ($$click etc.)
+    if (key.startsWith('$$')) {
+      el[key] = value;
+      continue;
+    }
+
+    // Reactive props — set up effects
+    if (typeof value === 'function' && !key.startsWith('on')) {
+      if (key === 'class' || key === 'className') {
+        effect(() => { el.className = value() || ''; });
+      } else if (key === 'style' && typeof value() === 'object') {
+        effect(() => {
+          const styles = value();
+          for (const prop in styles) {
+            el.style[prop] = styles[prop] ?? '';
+          }
+        });
+      } else {
+        effect(() => { setProp(el, key, value()); });
+      }
+      continue;
+    }
+
+    // Static props — skip attributes already set from SSR
+    // Only attach non-serializable props or ones that may differ
+    if (key === 'data-hk') continue;
+  }
+}