what-core 0.2.0 → 0.3.0

package/dist/animation.js

@@ -2,8 +2,17 @@
 // Springs, tweens, gestures, and transition helpers
 
 import { signal, effect, untrack, batch } from './reactive.js';
+import { getCurrentComponent } from './dom.js';
 import { scheduleRead, scheduleWrite } from './scheduler.js';
 
+// Create an effect scoped to the current component's lifecycle
+function scopedEffect(fn) {
+  const ctx = getCurrentComponent?.();
+  const dispose = effect(fn);
+  if (ctx) ctx.effects.push(dispose);
+  return dispose;
+}
+
 // --- Spring Animation ---
 // Physics-based animation with natural feel
 
@@ -388,14 +397,14 @@ export function useGesture(element, handlers = {}) {
   // Attach listeners
   if (typeof element === 'function') {
     // Ref function
-    effect(() => {
+    scopedEffect(() => {
       const el = untrack(element);
       if (!el) return;
       return attachListeners(el);
     });
   } else if (element?.current !== undefined) {
     // Ref object
-    effect(() => {
+    scopedEffect(() => {
       const el = element.current;
       if (!el) return;
       return attachListeners(el);

package/dist/data.js

@@ -2,11 +2,21 @@
 // SWR-like data fetching with caching, revalidation, and optimistic updates
 
 import { signal, effect, batch, computed } from './reactive.js';
+import { getCurrentComponent } from './dom.js';
 
 // Global cache for requests
 const cache = new Map();
 const inFlightRequests = new Map();
 
+// Create an effect scoped to the current component's lifecycle.
+// When the component unmounts, the effect is automatically disposed.
+function scopedEffect(fn) {
+  const ctx = getCurrentComponent?.();
+  const dispose = effect(fn);
+  if (ctx) ctx.effects.push(dispose);
+  return dispose;
+}
+
 // --- useFetch Hook ---
 // Simple fetch with automatic JSON parsing and error handling
 
@@ -51,7 +61,7 @@ export function useFetch(url, options = {}) {
   }
 
   // Fetch on mount
-  effect(() => {
+  scopedEffect(() => {
     fetchData();
   });
 
@@ -120,13 +130,13 @@ export function useSWR(key, fetcher, options = {}) {
   }
 
   // Initial fetch
-  effect(() => {
+  scopedEffect(() => {
     revalidate().catch(() => {});
   });
 
   // Revalidate on focus
   if (revalidateOnFocus && typeof window !== 'undefined') {
-    effect(() => {
+    scopedEffect(() => {
       const handler = () => {
         if (document.visibilityState === 'visible') {
           revalidate().catch(() => {});
@@ -139,7 +149,7 @@ export function useSWR(key, fetcher, options = {}) {
 
   // Revalidate on reconnect
   if (revalidateOnReconnect && typeof window !== 'undefined') {
-    effect(() => {
+    scopedEffect(() => {
       const handler = () => revalidate().catch(() => {});
       window.addEventListener('online', handler);
       return () => window.removeEventListener('online', handler);
@@ -148,7 +158,7 @@ export function useSWR(key, fetcher, options = {}) {
 
   // Polling
   if (refreshInterval > 0) {
-    effect(() => {
+    scopedEffect(() => {
       const interval = setInterval(() => {
         revalidate().catch(() => {});
       }, refreshInterval);
@@ -269,7 +279,7 @@ export function useQuery(options) {
   }
 
   // Initial fetch
-  effect(() => {
+  scopedEffect(() => {
     if (enabled) {
       fetch().catch(() => {});
     }
@@ -277,7 +287,7 @@ export function useQuery(options) {
 
   // Refetch on focus
   if (refetchOnWindowFocus && typeof window !== 'undefined') {
-    effect(() => {
+    scopedEffect(() => {
       const handler = () => {
         if (document.visibilityState === 'visible') {
           fetch().catch(() => {});
@@ -290,7 +300,7 @@ export function useQuery(options) {
 
   // Polling
   if (refetchInterval) {
-    effect(() => {
+    scopedEffect(() => {
       const interval = setInterval(() => {
         fetch().catch(() => {});
       }, refetchInterval);
@@ -368,7 +378,7 @@ export function useInfiniteQuery(options) {
   }
 
   // Initial fetch
-  effect(() => {
+  scopedEffect(() => {
     fetchPage(initialPageParam).catch(() => {});
   });
 

package/dist/dom.js

@@ -1,8 +1,9 @@
 // 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
@@ -18,25 +19,71 @@ const SVG_ELEMENTS = new Set([
 ]);
 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, isSvg) {
-  if (vnode == null || vnode === false || vnode === true) return null;
+  // 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') {
@@ -55,7 +102,7 @@ function createDOM(vnode, parent, isSvg) {
 
   // Component
   if (typeof vnode.tag === 'function') {
-    return createComponent(vnode, parent);
+    return createComponent(vnode, parent, isSvg);
   }
 
   // Detect SVG context: either we're already in SVG, or this tag is an SVG element
@@ -85,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
@@ -104,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;
@@ -120,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;
       }
@@ -139,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
@@ -168,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
@@ -220,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 ---
@@ -253,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) {
@@ -275,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;
@@ -333,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]);
     }
   }
@@ -435,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
@@ -449,6 +501,7 @@ function patchNode(parent, domNode, vnode) {
       return domNode;
     }
     const newNode = document.createTextNode(text);
+    disposeTree(domNode);
     parent.replaceChild(newNode, domNode);
     return newNode;
   }
@@ -461,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;
@@ -484,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;
 }
@@ -505,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;

package/dist/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/dist/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/dist/store.js

@@ -77,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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "what-core",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "What Framework - The closest framework to vanilla JS",
   "type": "module",
   "main": "dist/what.js",

package/src/animation.js

@@ -2,8 +2,17 @@
 // Springs, tweens, gestures, and transition helpers
 
 import { signal, effect, untrack, batch } from './reactive.js';
+import { getCurrentComponent } from './dom.js';
 import { scheduleRead, scheduleWrite } from './scheduler.js';
 
+// Create an effect scoped to the current component's lifecycle
+function scopedEffect(fn) {
+  const ctx = getCurrentComponent?.();
+  const dispose = effect(fn);
+  if (ctx) ctx.effects.push(dispose);
+  return dispose;
+}
+
 // --- Spring Animation ---
 // Physics-based animation with natural feel
 
@@ -388,14 +397,14 @@ export function useGesture(element, handlers = {}) {
   // Attach listeners
   if (typeof element === 'function') {
     // Ref function
-    effect(() => {
+    scopedEffect(() => {
       const el = untrack(element);
       if (!el) return;
       return attachListeners(el);
     });
   } else if (element?.current !== undefined) {
     // Ref object
-    effect(() => {
+    scopedEffect(() => {
       const el = element.current;
       if (!el) return;
       return attachListeners(el);

package/src/data.js

@@ -2,11 +2,21 @@
 // SWR-like data fetching with caching, revalidation, and optimistic updates
 
 import { signal, effect, batch, computed } from './reactive.js';
+import { getCurrentComponent } from './dom.js';
 
 // Global cache for requests
 const cache = new Map();
 const inFlightRequests = new Map();
 
+// Create an effect scoped to the current component's lifecycle.
+// When the component unmounts, the effect is automatically disposed.
+function scopedEffect(fn) {
+  const ctx = getCurrentComponent?.();
+  const dispose = effect(fn);
+  if (ctx) ctx.effects.push(dispose);
+  return dispose;
+}
+
 // --- useFetch Hook ---
 // Simple fetch with automatic JSON parsing and error handling
 
@@ -51,7 +61,7 @@ export function useFetch(url, options = {}) {
   }
 
   // Fetch on mount
-  effect(() => {
+  scopedEffect(() => {
     fetchData();
   });
 
@@ -120,13 +130,13 @@ export function useSWR(key, fetcher, options = {}) {
   }
 
   // Initial fetch
-  effect(() => {
+  scopedEffect(() => {
     revalidate().catch(() => {});
   });
 
   // Revalidate on focus
   if (revalidateOnFocus && typeof window !== 'undefined') {
-    effect(() => {
+    scopedEffect(() => {
       const handler = () => {
         if (document.visibilityState === 'visible') {
           revalidate().catch(() => {});
@@ -139,7 +149,7 @@ export function useSWR(key, fetcher, options = {}) {
 
   // Revalidate on reconnect
   if (revalidateOnReconnect && typeof window !== 'undefined') {
-    effect(() => {
+    scopedEffect(() => {
       const handler = () => revalidate().catch(() => {});
       window.addEventListener('online', handler);
       return () => window.removeEventListener('online', handler);
@@ -148,7 +158,7 @@ export function useSWR(key, fetcher, options = {}) {
 
   // Polling
   if (refreshInterval > 0) {
-    effect(() => {
+    scopedEffect(() => {
       const interval = setInterval(() => {
         revalidate().catch(() => {});
       }, refreshInterval);
@@ -269,7 +279,7 @@ export function useQuery(options) {
   }
 
   // Initial fetch
-  effect(() => {
+  scopedEffect(() => {
     if (enabled) {
       fetch().catch(() => {});
     }
@@ -277,7 +287,7 @@ export function useQuery(options) {
 
   // Refetch on focus
   if (refetchOnWindowFocus && typeof window !== 'undefined') {
-    effect(() => {
+    scopedEffect(() => {
       const handler = () => {
         if (document.visibilityState === 'visible') {
           fetch().catch(() => {});
@@ -290,7 +300,7 @@ export function useQuery(options) {
 
   // Polling
   if (refetchInterval) {
-    effect(() => {
+    scopedEffect(() => {
       const interval = setInterval(() => {
         fetch().catch(() => {});
       }, refetchInterval);
@@ -368,7 +378,7 @@ export function useInfiniteQuery(options) {
   }
 
   // Initial fetch
-  effect(() => {
+  scopedEffect(() => {
     fetchPage(initialPageParam).catch(() => {});
   });
 

package/src/dom.js

@@ -1,8 +1,9 @@
 // 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
@@ -18,25 +19,71 @@ const SVG_ELEMENTS = new Set([
 ]);
 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, isSvg) {
-  if (vnode == null || vnode === false || vnode === true) return null;
+  // 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') {
@@ -55,7 +102,7 @@ function createDOM(vnode, parent, isSvg) {
 
   // Component
   if (typeof vnode.tag === 'function') {
-    return createComponent(vnode, parent);
+    return createComponent(vnode, parent, isSvg);
   }
 
   // Detect SVG context: either we're already in SVG, or this tag is an SVG element
@@ -85,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
@@ -104,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;
@@ -120,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;
       }
@@ -139,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
@@ -168,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
@@ -220,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 ---
@@ -253,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) {
@@ -275,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;
@@ -333,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]);
     }
   }
@@ -435,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
@@ -449,6 +501,7 @@ function patchNode(parent, domNode, vnode) {
       return domNode;
     }
     const newNode = document.createTextNode(text);
+    disposeTree(domNode);
     parent.replaceChild(newNode, domNode);
     return newNode;
   }
@@ -461,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;
@@ -484,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;
 }
@@ -505,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;

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/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

@@ -77,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) {