what-core 0.6.0 → 0.6.1

package/src/dom.js

@@ -372,26 +372,38 @@ function createErrorBoundary(vnode, parent) {
   const { errorState, handleError, fallback, reset } = vnode.props;
   const children = vnode.children;
 
-  const wrapper = document.createElement('span');
-  wrapper.style.display = 'contents';
+  // Use comment node boundaries instead of <span style="display:contents">
+  // to avoid DOM pollution, CSS selector breakage, and a11y issues.
+  const startComment = document.createComment('eb:start');
+  const endComment = document.createComment('eb:end');
 
   const boundaryCtx = {
     hooks: [], hookIndex: 0, effects: [], cleanups: [],
     mounted: false, disposed: false,
     _parentCtx: componentStack[componentStack.length - 1] || null,
     _errorBoundary: handleError,
+    _startComment: startComment,
+    _endComment: endComment,
   };
-  wrapper._componentCtx = boundaryCtx;
+  _commentCtxMap.set(startComment, boundaryCtx);
+
+  const container = document.createDocumentFragment();
+  container._componentCtx = boundaryCtx;
+  container.appendChild(startComment);
+  container.appendChild(endComment);
 
   const dispose = effect(() => {
     const error = errorState();
 
     componentStack.push(boundaryCtx);
 
-    // Remove old content
-    while (wrapper.firstChild) {
-      disposeTree(wrapper.firstChild);
-      wrapper.removeChild(wrapper.firstChild);
+    // Remove old content between comment boundaries
+    if (startComment.parentNode) {
+      while (startComment.nextSibling && startComment.nextSibling !== endComment) {
+        const old = startComment.nextSibling;
+        disposeTree(old);
+        old.parentNode.removeChild(old);
+      }
     }
 
     let vnodes;
@@ -404,15 +416,23 @@ function createErrorBoundary(vnode, parent) {
     vnodes = Array.isArray(vnodes) ? vnodes : [vnodes];
 
     for (const v of vnodes) {
-      const node = createDOM(v, wrapper);
-      if (node) wrapper.appendChild(node);
+      const node = createDOM(v, parent);
+      if (node) {
+        // Insert before endComment
+        if (endComment.parentNode) {
+          endComment.parentNode.insertBefore(node, endComment);
+        } else {
+          // Still in fragment before first mount
+          container.insertBefore(node, endComment);
+        }
+      }
     }
 
     componentStack.pop();
   });
 
   boundaryCtx.effects.push(dispose);
-  return wrapper;
+  return container;
 }
 
 // Suspense boundary component handler
@@ -420,15 +440,24 @@ function createSuspenseBoundary(vnode, parent) {
   const { boundary, fallback, loading } = vnode.props;
   const children = vnode.children;
 
-  const wrapper = document.createElement('span');
-  wrapper.style.display = 'contents';
+  // Use comment node boundaries instead of <span style="display:contents">
+  // to avoid DOM pollution, CSS selector breakage, and a11y issues.
+  const startComment = document.createComment('sb:start');
+  const endComment = document.createComment('sb:end');
 
   const boundaryCtx = {
     hooks: [], hookIndex: 0, effects: [], cleanups: [],
     mounted: false, disposed: false,
     _parentCtx: componentStack[componentStack.length - 1] || null,
+    _startComment: startComment,
+    _endComment: endComment,
   };
-  wrapper._componentCtx = boundaryCtx;
+  _commentCtxMap.set(startComment, boundaryCtx);
+
+  const container = document.createDocumentFragment();
+  container._componentCtx = boundaryCtx;
+  container.appendChild(startComment);
+  container.appendChild(endComment);
 
   const dispose = effect(() => {
     const isLoading = loading();
@@ -437,22 +466,33 @@ function createSuspenseBoundary(vnode, parent) {
 
     componentStack.push(boundaryCtx);
 
-    // Remove old content
-    while (wrapper.firstChild) {
-      disposeTree(wrapper.firstChild);
-      wrapper.removeChild(wrapper.firstChild);
+    // Remove old content between comment boundaries
+    if (startComment.parentNode) {
+      while (startComment.nextSibling && startComment.nextSibling !== endComment) {
+        const old = startComment.nextSibling;
+        disposeTree(old);
+        old.parentNode.removeChild(old);
+      }
     }
 
     for (const v of normalized) {
-      const node = createDOM(v, wrapper);
-      if (node) wrapper.appendChild(node);
+      const node = createDOM(v, parent);
+      if (node) {
+        // Insert before endComment
+        if (endComment.parentNode) {
+          endComment.parentNode.insertBefore(node, endComment);
+        } else {
+          // Still in fragment before first mount
+          container.insertBefore(node, endComment);
+        }
+      }
     }
 
     componentStack.pop();
   });
 
   boundaryCtx.effects.push(dispose);
-  return wrapper;
+  return container;
 }
 
 // Portal component handler

package/src/reactive.js

@@ -504,51 +504,65 @@ function scheduleMicrotask() {
   }
 }
 
+let isFlushing = false;
+
 function flush() {
-  let iterations = 0;
-  while (pendingEffects.length > 0 && iterations < 25) {
-    const batch = pendingEffects;
-    pendingEffects = [];
-
-    // Topological sort: execute effects in level order (lowest first).
-    // Fast paths:
-    // 1. Single effect — no sort needed (most common case for microtask flush)
-    // 2. Already sorted — skip sort (common when effects added in level order)
-    // 3. Multiple effects at different levels — sort required
-    if (batch.length > 1 && pendingNeedSort) {
-      batch.sort((a, b) => a._level - b._level);
-    }
-    pendingNeedSort = false;
-
-    for (let i = 0; i < batch.length; i++) {
-      const e = batch[i];
-      e._pending = false;
-      if (!e.disposed && !e._onNotify) {
-        const prevDepsLen = e.deps.length;
-        _runEffect(e);
-        // Update level only if deps changed (graph structure change)
-        if (!e._computed && e.deps.length !== prevDepsLen) {
-          _updateLevel(e);
+  // Re-entrancy guard: if flush() is called during an active flush (e.g., via
+  // flushSync() inside a component render or effect), skip to prevent infinite
+  // recursion. Pending effects will be picked up by the outer flush's while-loop.
+  if (isFlushing) return;
+  isFlushing = true;
+
+  try {
+    let iterations = 0;
+    while (pendingEffects.length > 0 && iterations < 25) {
+      const batch = pendingEffects;
+      pendingEffects = [];
+
+      // Topological sort: execute effects in level order (lowest first).
+      // Fast paths:
+      // 1. Single effect — no sort needed (most common case for microtask flush)
+      // 2. Already sorted — skip sort (common when effects added in level order)
+      // 3. Multiple effects at different levels — sort required
+      if (batch.length > 1 && pendingNeedSort) {
+        batch.sort((a, b) => a._level - b._level);
+      }
+      pendingNeedSort = false;
+
+      for (let i = 0; i < batch.length; i++) {
+        const e = batch[i];
+        e._pending = false;
+        if (!e.disposed && !e._onNotify) {
+          const prevDepsLen = e.deps.length;
+          _runEffect(e);
+          // Update level only if deps changed (graph structure change)
+          if (!e._computed && e.deps.length !== prevDepsLen) {
+            _updateLevel(e);
+          }
         }
       }
+      iterations++;
     }
-    iterations++;
-  }
-  if (iterations >= 25) {
-    if (__DEV__) {
-      const remaining = pendingEffects.slice(0, 3);
-      const effectNames = remaining.map(e => e.fn?.name || e.fn?.toString().slice(0, 60) || '(anonymous)');
-      console.warn(
-        `[what] Possible infinite effect loop detected (25 iterations). ` +
-        `Likely cause: an effect writes to a signal it also reads, creating a cycle. ` +
-        `Use untrack() to read signals without subscribing. ` +
-        `Looping effects: ${effectNames.join(', ')}`
-      );
-    } else {
-      console.warn('[what] Possible infinite effect loop detected');
+    if (iterations >= 25) {
+      // Clear pending effects to prevent further damage
+      for (let i = 0; i < pendingEffects.length; i++) pendingEffects[i]._pending = false;
+      pendingEffects.length = 0;
+
+      if (__DEV__) {
+        const remaining = pendingEffects.slice(0, 3);
+        const effectNames = remaining.map(e => e.fn?.name || e.fn?.toString().slice(0, 60) || '(anonymous)');
+        console.warn(
+          `[what] Possible infinite effect loop detected (25 iterations). ` +
+          `Likely cause: an effect writes to a signal it also reads, creating a cycle. ` +
+          `Use untrack() to read signals without subscribing. ` +
+          `Looping effects: ${effectNames.join(', ')}`
+        );
+      } else {
+        console.warn('[what] Possible infinite effect loop detected');
+      }
     }
-    for (let i = 0; i < pendingEffects.length; i++) pendingEffects[i]._pending = false;
-    pendingEffects.length = 0;
+  } finally {
+    isFlushing = false;
   }
 }
 
@@ -613,7 +627,31 @@ export function memo(fn) {
 
 // --- flushSync ---
 // Force all pending effects to run synchronously. Use sparingly.
+// Calling during render or effect execution is a no-op (prevents infinite loops).
 export function flushSync() {
+  if (isFlushing) {
+    // Re-entrant call — silently skip (Solid approach).
+    // This prevents infinite loops when flushSync() is called during component
+    // render or effect execution. Pending effects will be picked up by the
+    // outer flush's while-loop.
+    if (__DEV__) {
+      console.warn(
+        '[what] flushSync() called during an active flush (e.g., inside a component render or effect). ' +
+        'This is a no-op to prevent infinite loops. Move flushSync() to an event handler or onMount callback.'
+      );
+    }
+    return;
+  }
+  if (currentEffect) {
+    // Called inside an effect/render — skip with warning
+    if (__DEV__) {
+      console.warn(
+        '[what] flushSync() called during effect execution. ' +
+        'This is a no-op to prevent infinite loops. Move flushSync() to an event handler or onMount callback.'
+      );
+    }
+    return;
+  }
   microtaskScheduled = false;
   flush();
 }

package/src/render.js

@@ -225,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') {
@@ -848,6 +858,13 @@ 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)) {