what-core 0.1.1 → 0.3.0

package/src/dom.js

@@ -1,32 +1,89 @@
 // What Framework - DOM Reconciler
 // Surgical DOM updates. Diff props, diff children, patch only what changed.
+// Components use <what-c> wrapper elements (display:contents) for clean reconciliation.
 // No virtual DOM tree kept in memory — we diff against the live DOM.
 
-import { effect, batch, untrack } from './reactive.js';
+import { effect, batch, untrack, signal } 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';
+
+// Track all mounted component contexts for disposal
+const mountedComponents = new Set();
+
+// Dispose a component: run effect cleanups, hook cleanups, onCleanup callbacks
+function disposeComponent(ctx) {
+  if (ctx.disposed) return;
+  ctx.disposed = true;
+
+  // Run useEffect cleanup functions
+  for (const hook of ctx.hooks) {
+    if (hook && typeof hook === 'object' && 'cleanup' in hook && hook.cleanup) {
+      try { hook.cleanup(); } catch (e) { console.error('[what] cleanup error:', e); }
+    }
+  }
+
+  // Run onCleanup callbacks
+  if (ctx._cleanupCallbacks) {
+    for (const fn of ctx._cleanupCallbacks) {
+      try { fn(); } catch (e) { console.error('[what] onCleanup error:', e); }
+    }
+  }
+
+  // Dispose reactive effects
+  for (const dispose of ctx.effects) {
+    try { dispose(); } catch (e) { /* effect already disposed */ }
+  }
+
+  mountedComponents.delete(ctx);
+}
+
+// Dispose all components attached to a DOM subtree
+function disposeTree(node) {
+  if (!node) return;
+  if (node._componentCtx) {
+    disposeComponent(node._componentCtx);
+  }
+  if (node.childNodes) {
+    for (const child of node.childNodes) {
+      disposeTree(child);
+    }
+  }
+}
+
 // Mount a component tree into a DOM container
 export function mount(vnode, container) {
   if (typeof container === 'string') {
     container = document.querySelector(container);
   }
+  disposeTree(container); // Clean up any previous mount
   container.textContent = '';
   const node = createDOM(vnode, container);
   if (node) container.appendChild(node);
   return () => {
-    // Unmount: clean up effects, remove DOM
+    disposeTree(container);
     container.textContent = '';
-    // Disposal is handled by effect cleanup
   };
 }
 
 // --- Create DOM from VNode ---
 
-function createDOM(vnode, parent) {
-  if (vnode == null || vnode === false || vnode === true) return null;
-
-  // Real DOM node (from compiler runtime) — pass through
-  if (typeof Node !== 'undefined' && vnode instanceof Node) return vnode;
+function createDOM(vnode, parent, isSvg) {
+  // Null/false/true → placeholder comment (preserves child indices for reconciliation)
+  if (vnode == null || vnode === false || vnode === true) {
+    return document.createComment('');
+  }
 
   // Text
   if (typeof vnode === 'string' || typeof vnode === 'number') {
@@ -37,7 +94,7 @@ function createDOM(vnode, parent) {
   if (Array.isArray(vnode)) {
     const frag = document.createDocumentFragment();
     for (const child of vnode) {
-      const node = createDOM(child, parent);
+      const node = createDOM(child, parent, isSvg);
       if (node) frag.appendChild(node);
     }
     return frag;
@@ -45,14 +102,20 @@ function createDOM(vnode, parent) {
 
   // Component
   if (typeof vnode.tag === 'function') {
-    return createComponent(vnode, parent);
+    return createComponent(vnode, parent, isSvg);
   }
 
-  // HTML Element
-  const el = document.createElement(vnode.tag);
-  applyProps(el, vnode.props, {});
+  // 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);
+    const node = createDOM(child, el, svgContext && vnode.tag !== 'foreignObject');
     if (node) el.appendChild(node);
   }
 
@@ -69,7 +132,11 @@ export function getCurrentComponent() {
   return componentStack[componentStack.length - 1];
 }
 
-function createComponent(vnode, parent) {
+export function getComponentStack() {
+  return componentStack;
+}
+
+function createComponent(vnode, parent, isSvg) {
   const { tag: Component, props, children } = vnode;
 
   // Handle special boundary components
@@ -88,14 +155,29 @@ function createComponent(vnode, parent) {
     cleanups: [],
     mounted: false,
     disposed: false,
+    Component, // Store for identity check in patchNode
   };
 
-  // Create a marker for this component's position
-  const marker = document.createComment(`w:${Component.name || 'anon'}`);
+  // Wrapper element: <what-c display:contents> for HTML, <g> for SVG
+  let wrapper;
+  if (isSvg) {
+    wrapper = document.createElementNS(SVG_NS, 'g');
+  } else {
+    wrapper = document.createElement('what-c');
+    wrapper.style.display = 'contents';
+  }
+  wrapper._componentCtx = ctx;
+  wrapper._isSvg = !!isSvg;
+  ctx._wrapper = wrapper;
+
+  // Track for disposal
+  mountedComponents.add(ctx);
 
-  // Reactive render: re-renders when signals used inside change
-  let currentNodes = [];
+  // Props signal for reactive updates from parent
+  const propsSignal = signal({ ...props, children });
+  ctx._propsSignal = propsSignal;
 
+  // Reactive render: re-renders when signals used inside change
   const dispose = effect(() => {
     if (ctx.disposed) return;
     ctx.hookIndex = 0;
@@ -104,12 +186,10 @@ function createComponent(vnode, parent) {
 
     let result;
     try {
-      result = Component({ ...props, children });
+      result = Component(propsSignal());
     } 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;
       }
@@ -123,28 +203,29 @@ function createComponent(vnode, parent) {
     if (!ctx.mounted) {
       // Initial mount
       ctx.mounted = true;
+
+      // Run onMount callbacks after DOM is ready
+      if (ctx._mountCallbacks) {
+        queueMicrotask(() => {
+          if (ctx.disposed) return;
+          for (const fn of ctx._mountCallbacks) {
+            try { fn(); } catch (e) { console.error('[what] onMount error:', e); }
+          }
+        });
+      }
+
       for (const v of vnodes) {
-        const node = createDOM(v, parent);
-        if (node) {
-          currentNodes.push(node);
-        }
+        const node = createDOM(v, wrapper, isSvg);
+        if (node) wrapper.appendChild(node);
       }
     } else {
-      // Update: reconcile
-      reconcile(marker.parentNode, currentNodes, vnodes, marker);
+      // Update: reconcile children inside wrapper
+      reconcileChildren(wrapper, vnodes);
     }
   });
 
   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;
+  return wrapper;
 }
 
 // Error boundary component handler
@@ -152,51 +233,35 @@ function createErrorBoundary(vnode, parent) {
   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 wrapper = document.createElement('what-c');
+  wrapper.style.display = 'contents';
 
   const dispose = effect(() => {
     const error = errorState();
 
-    // Push boundary to stack so children can find it
-    errorBoundaryStack.push(boundary);
+    errorBoundaryStack.push({ handleError });
 
     let vnodes;
     if (error) {
-      // Render fallback
-      if (typeof fallback === 'function') {
-        vnodes = [fallback({ error, reset })];
-      } else {
-        vnodes = [fallback];
-      }
+      vnodes = typeof fallback === 'function' ? [fallback({ error, reset })] : [fallback];
     } else {
       vnodes = children;
     }
 
     errorBoundaryStack.pop();
-
     vnodes = Array.isArray(vnodes) ? vnodes : [vnodes];
 
-    if (currentNodes.length === 0) {
-      // Initial mount
+    if (wrapper.childNodes.length === 0) {
       for (const v of vnodes) {
-        const node = createDOM(v, parent);
-        if (node) currentNodes.push(node);
+        const node = createDOM(v, wrapper);
+        if (node) wrapper.appendChild(node);
       }
     } else {
-      reconcile(marker.parentNode, currentNodes, vnodes, marker);
+      reconcileChildren(wrapper, vnodes);
     }
   });
 
-  const frag = document.createDocumentFragment();
-  frag.appendChild(marker);
-  for (const node of currentNodes) {
-    frag.appendChild(node);
-  }
-  return frag;
+  return wrapper;
 }
 
 // Suspense boundary component handler
@@ -204,30 +269,25 @@ function createSuspenseBoundary(vnode, parent) {
   const { boundary, fallback, loading } = vnode.props;
   const children = vnode.children;
 
-  const marker = document.createComment('w:suspense');
-  let currentNodes = [];
+  const wrapper = document.createElement('what-c');
+  wrapper.style.display = 'contents';
 
   const dispose = effect(() => {
     const isLoading = loading();
     const vnodes = isLoading ? [fallback] : children;
     const normalized = Array.isArray(vnodes) ? vnodes : [vnodes];
 
-    if (currentNodes.length === 0) {
+    if (wrapper.childNodes.length === 0) {
       for (const v of normalized) {
-        const node = createDOM(v, parent);
-        if (node) currentNodes.push(node);
+        const node = createDOM(v, wrapper);
+        if (node) wrapper.appendChild(node);
       }
     } else {
-      reconcile(marker.parentNode, currentNodes, normalized, marker);
+      reconcileChildren(wrapper, normalized);
     }
   });
 
-  const frag = document.createDocumentFragment();
-  frag.appendChild(marker);
-  for (const node of currentNodes) {
-    frag.appendChild(node);
-  }
-  return frag;
+  return wrapper;
 }
 
 // --- Reconciliation ---
@@ -237,7 +297,6 @@ function createSuspenseBoundary(vnode, parent) {
 function reconcile(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) {
@@ -259,6 +318,7 @@ function reconcileUnkeyed(parent, oldNodes, newVNodes, beforeMarker) {
     if (i >= newVNodes.length) {
       // Remove extra old nodes
       if (oldNode && oldNode.parentNode) {
+        disposeTree(oldNode);
         oldNode.parentNode.removeChild(oldNode);
       }
       continue;
@@ -317,6 +377,7 @@ function reconcileKeyed(parent, oldNodes, newVNodes, beforeMarker) {
   // Remove nodes that aren't reused
   for (let i = 0; i < oldNodes.length; i++) {
     if (!reused.has(i) && oldNodes[i]?.parentNode) {
+      disposeTree(oldNodes[i]);
       oldNodes[i].parentNode.removeChild(oldNodes[i]);
     }
   }
@@ -419,10 +480,17 @@ function getInsertionRef(nodes, marker) {
 }
 
 function patchNode(parent, domNode, vnode) {
-  // Null/removed
+  // Null/removed → keep placeholder or replace with one
   if (vnode == null || vnode === false || vnode === true) {
-    if (domNode && domNode.parentNode) domNode.parentNode.removeChild(domNode);
-    return null;
+    if (domNode && domNode.nodeType === 8 && !domNode._componentCtx) {
+      return domNode; // already a placeholder comment
+    }
+    const placeholder = document.createComment('');
+    if (domNode && domNode.parentNode) {
+      disposeTree(domNode);
+      parent.replaceChild(placeholder, domNode);
+    }
+    return placeholder;
   }
 
   // Text
@@ -433,6 +501,7 @@ function patchNode(parent, domNode, vnode) {
       return domNode;
     }
     const newNode = document.createTextNode(text);
+    disposeTree(domNode);
     parent.replaceChild(newNode, domNode);
     return newNode;
   }
@@ -445,13 +514,22 @@ function patchNode(parent, domNode, vnode) {
       const node = createDOM(v, parent);
       if (node) frag.appendChild(node);
     }
+    disposeTree(domNode);
     parent.replaceChild(frag, domNode);
     return frag;
   }
 
   // Component
   if (typeof vnode.tag === 'function') {
-    // Re-create component (future: memoize + diff props)
+    // Check if old node is a component wrapper for the same component
+    if (domNode._componentCtx && !domNode._componentCtx.disposed
+        && domNode._componentCtx.Component === vnode.tag) {
+      // Same component — update props reactively, let its effect re-render
+      domNode._componentCtx._propsSignal.set({ ...vnode.props, children: vnode.children });
+      return domNode;
+    }
+    // Different component or not a component — dispose old, create new
+    disposeTree(domNode);
     const node = createComponent(vnode, parent);
     parent.replaceChild(node, domNode);
     return node;
@@ -468,6 +546,7 @@ function patchNode(parent, domNode, vnode) {
 
   // Different tag: replace entirely
   const newNode = createDOM(vnode, parent);
+  disposeTree(domNode);
   parent.replaceChild(newNode, domNode);
   return newNode;
 }
@@ -489,6 +568,7 @@ function reconcileChildren(parent, newChildVNodes) {
       if (i >= newChildVNodes.length) {
         // Remove extra
         if (oldChildren[i]?.parentNode) {
+          disposeTree(oldChildren[i]);
           parent.removeChild(oldChildren[i]);
         }
         continue;
@@ -509,7 +589,7 @@ function reconcileChildren(parent, newChildVNodes) {
 // --- Prop Diffing ---
 // Only touch DOM for props that actually changed.
 
-function applyProps(el, newProps, oldProps) {
+function applyProps(el, newProps, oldProps, isSvg) {
   newProps = newProps || {};
   oldProps = oldProps || {};
 
@@ -525,7 +605,7 @@ function applyProps(el, newProps, oldProps) {
   for (const key in newProps) {
     if (key === 'key' || key === 'ref' || key === 'children') continue;
     if (newProps[key] !== oldProps[key]) {
-      setProp(el, key, newProps[key]);
+      setProp(el, key, newProps[key], isSvg);
     }
   }
 
@@ -536,7 +616,7 @@ function applyProps(el, newProps, oldProps) {
   }
 }
 
-function setProp(el, key, value) {
+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) {
@@ -549,13 +629,19 @@ function setProp(el, key, value) {
     const wrappedHandler = (e) => untrack(() => value(e));
     wrappedHandler._original = value;
     el._events[event] = wrappedHandler;
-    el.addEventListener(event, wrappedHandler);
+    // Check for _eventOpts (once/capture/passive from compiler)
+    const eventOpts = value._eventOpts;
+    el.addEventListener(event, wrappedHandler, eventOpts || undefined);
     return;
   }
 
-  // className
+  // className / class
   if (key === 'className' || key === 'class') {
-    el.className = value || '';
+    if (isSvg) {
+      el.setAttribute('class', value || '');
+    } else {
+      el.className = value || '';
+    }
     return;
   }
 
@@ -590,6 +676,16 @@ function setProp(el, 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;

package/src/hooks.js

@@ -2,7 +2,7 @@
 // React-familiar hooks backed by signals. Zero overhead when deps don't change.
 
 import { signal, computed, effect, batch, untrack } from './reactive.js';
-import { getCurrentComponent } from './dom.js';
+import { getCurrentComponent, getComponentStack as _getComponentStack } from './dom.js';
 
 function getCtx() {
   const ctx = getCurrentComponent();
@@ -128,24 +128,36 @@ export function useRef(initial) {
 }
 
 // --- useContext ---
-// Read from a context created by createContext().
+// Read from the nearest Provider in the component tree, or the default value.
 
 export function useContext(context) {
-  return context._value;
+  // Walk up the component stack to find the nearest provider for this context
+  const stack = _getComponentStack();
+  for (let i = stack.length - 1; i >= 0; i--) {
+    const ctx = stack[i];
+    if (ctx._contextValues && ctx._contextValues.has(context)) {
+      return ctx._contextValues.get(context);
+    }
+  }
+  return context._defaultValue;
 }
 
 // --- createContext ---
-// Simple context: set a default, override with Provider component.
+// Tree-scoped context: Provider sets value for its subtree only.
+// Multiple providers can coexist — each subtree sees its own value.
 
 export function createContext(defaultValue) {
-  const ctx = {
-    _value: defaultValue,
+  const context = {
+    _defaultValue: defaultValue,
     Provider: ({ value, children }) => {
-      ctx._value = value;
+      // Store context value on the current component's context
+      const ctx = getCtx();
+      if (!ctx._contextValues) ctx._contextValues = new Map();
+      ctx._contextValues.set(context, value);
       return children;
     },
   };
-  return ctx;
+  return context;
 }
 
 // --- useReducer ---
@@ -173,7 +185,7 @@ export function useReducer(reducer, initialState, init) {
 
 export function onMount(fn) {
   const ctx = getCtx();
-  if (!ctx._mounted) {
+  if (!ctx.mounted) {
     ctx._mountCallbacks = ctx._mountCallbacks || [];
     ctx._mountCallbacks.push(fn);
   }
@@ -214,7 +226,7 @@ export function createResource(fetcher, options = {}) {
         loading.set(false);
       }
     } catch (e) {
-      if (currentFetch === fetcher) {
+      if (currentFetch === fetchPromise) {
         error.set(e);
         loading.set(false);
       }

package/src/index.js

@@ -28,10 +28,10 @@ export {
 } from './hooks.js';
 
 // Component helpers
-export { memo, lazy, Suspense, ErrorBoundary, Show, For, Switch, Match } from './components.js';
+export { memo, lazy, Suspense, ErrorBoundary, Show, For, Switch, Match, Island } from './components.js';
 
 // Store
-export { createStore, atom } from './store.js';
+export { createStore, storeComputed, atom } from './store.js';
 
 // Head management
 export { Head, clearHead } from './head.js';

package/src/reactive.js

@@ -109,10 +109,19 @@ function _createEffect(fn, opts = {}) {
 function _runEffect(e) {
   if (e.disposed) return;
   cleanup(e);
+  // Run effect cleanup from previous run
+  if (e._cleanup) {
+    try { e._cleanup(); } catch (err) { /* cleanup error */ }
+    e._cleanup = null;
+  }
   const prev = currentEffect;
   currentEffect = e;
   try {
-    e.fn();
+    const result = e.fn();
+    // Capture cleanup function if returned
+    if (typeof result === 'function') {
+      e._cleanup = result;
+    }
   } finally {
     currentEffect = prev;
   }
@@ -121,6 +130,11 @@ function _runEffect(e) {
 function _disposeEffect(e) {
   e.disposed = true;
   cleanup(e);
+  // Run cleanup on dispose
+  if (e._cleanup) {
+    try { e._cleanup(); } catch (err) { /* cleanup error */ }
+    e._cleanup = null;
+  }
 }
 
 function cleanup(e) {

package/src/store.js

@@ -4,15 +4,32 @@
 
 import { signal, computed, batch } from './reactive.js';
 
+// --- storeComputed ---
+// Marker wrapper to explicitly tag a function as a computed in createStore.
+// Without this, createStore can't distinguish computed(state => ...) from action(item => ...).
+//
+// Usage:
+//   const useCounter = createStore({
+//     count: 0,
+//     doubled: storeComputed(state => state.count * 2),
+//     addItem(item) { /* this is an action */ },
+//   });
+
+export function storeComputed(fn) {
+  fn._storeComputed = true;
+  return fn;
+}
+
 // --- createStore ---
 // Creates a reactive store with actions. Each key becomes a signal.
 //
 // Usage:
 //   const useCounter = createStore({
 //     count: 0,
-//     doubled: (state) => state.count * 2,  // computed
-//     increment() { this.count++; },         // action
+//     doubled: storeComputed(state => state.count * 2),  // computed
+//     increment() { this.count++; },                      // action
 //     decrement() { this.count--; },
+//     addItem(item) { this.items.push(item); },           // action (not confused with computed)
 //   });
 //
 //   function Counter() {
@@ -27,12 +44,13 @@ export function createStore(definition) {
   const state = {};
 
   // Separate state, computeds, and actions
+  // Use explicit _storeComputed marker instead of function.length heuristic
   for (const [key, value] of Object.entries(definition)) {
-    if (typeof value === 'function' && value.length > 0 && key !== 'constructor') {
-      // Computed: function that takes state
+    if (typeof value === 'function' && value._storeComputed) {
+      // Computed: explicitly marked with storeComputed()
       computeds[key] = value;
     } else if (typeof value === 'function') {
-      // Action: function with no args that uses `this`
+      // Action: any other function
       actions[key] = value;
     } else {
       // State: initial value
@@ -59,6 +77,7 @@ export function createStore(definition) {
         const proxy = new Proxy({}, {
           get(_, prop) {
             if (signals[prop]) return signals[prop].peek();
+            if (computeds[prop]) return computeds[prop].peek();
             return undefined;
           },
           set(_, prop, val) {