what-core 0.6.0 → 0.6.2

package/dist/render.js

@@ -285,40 +285,47 @@ function scheduleMicrotask() {
     });
   }
 }
+var isFlushing = false;
 function flush() {
-  let iterations = 0;
-  while (pendingEffects.length > 0 && iterations < 25) {
-    const batch2 = pendingEffects;
-    pendingEffects = [];
-    if (batch2.length > 1 && pendingNeedSort) {
-      batch2.sort((a, b) => a._level - b._level);
-    }
-    pendingNeedSort = false;
-    for (let i = 0; i < batch2.length; i++) {
-      const e = batch2[i];
-      e._pending = false;
-      if (!e.disposed && !e._onNotify) {
-        const prevDepsLen = e.deps.length;
-        _runEffect(e);
-        if (!e._computed && e.deps.length !== prevDepsLen) {
-          _updateLevel(e);
+  if (isFlushing) return;
+  isFlushing = true;
+  try {
+    let iterations = 0;
+    while (pendingEffects.length > 0 && iterations < 25) {
+      const batch2 = pendingEffects;
+      pendingEffects = [];
+      if (batch2.length > 1 && pendingNeedSort) {
+        batch2.sort((a, b) => a._level - b._level);
+      }
+      pendingNeedSort = false;
+      for (let i = 0; i < batch2.length; i++) {
+        const e = batch2[i];
+        e._pending = false;
+        if (!e.disposed && !e._onNotify) {
+          const prevDepsLen = e.deps.length;
+          _runEffect(e);
+          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) {
+      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;
   }
 }
 function untrack(fn) {
@@ -718,8 +725,8 @@ function createComponent(vnode, parent, isSvg) {
 function createErrorBoundary(vnode, parent) {
   const { errorState, handleError, fallback, reset } = vnode.props;
   const children = vnode.children;
-  const wrapper = document.createElement("span");
-  wrapper.style.display = "contents";
+  const startComment = document.createComment("eb:start");
+  const endComment = document.createComment("eb:end");
   const boundaryCtx = {
     hooks: [],
     hookIndex: 0,
@@ -728,15 +735,24 @@ function createErrorBoundary(vnode, parent) {
     mounted: false,
     disposed: false,
     _parentCtx: componentStack[componentStack.length - 1] || null,
-    _errorBoundary: handleError
+    _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);
-    while (wrapper.firstChild) {
-      disposeTree(wrapper.firstChild);
-      wrapper.removeChild(wrapper.firstChild);
+    if (startComment.parentNode) {
+      while (startComment.nextSibling && startComment.nextSibling !== endComment) {
+        const old = startComment.nextSibling;
+        disposeTree(old);
+        old.parentNode.removeChild(old);
+      }
     }
     let vnodes;
     if (error) {
@@ -746,19 +762,25 @@ 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) {
+        if (endComment.parentNode) {
+          endComment.parentNode.insertBefore(node, endComment);
+        } else {
+          container.insertBefore(node, endComment);
+        }
+      }
     }
     componentStack.pop();
   });
   boundaryCtx.effects.push(dispose);
-  return wrapper;
+  return container;
 }
 function createSuspenseBoundary(vnode, parent) {
   const { boundary, fallback, loading } = vnode.props;
   const children = vnode.children;
-  const wrapper = document.createElement("span");
-  wrapper.style.display = "contents";
+  const startComment = document.createComment("sb:start");
+  const endComment = document.createComment("sb:end");
   const boundaryCtx = {
     hooks: [],
     hookIndex: 0,
@@ -766,26 +788,41 @@ function createSuspenseBoundary(vnode, parent) {
     cleanups: [],
     mounted: false,
     disposed: false,
-    _parentCtx: componentStack[componentStack.length - 1] || null
+    _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();
     const vnodes = isLoading ? [fallback] : children;
     const normalized = Array.isArray(vnodes) ? vnodes : [vnodes];
     componentStack.push(boundaryCtx);
-    while (wrapper.firstChild) {
-      disposeTree(wrapper.firstChild);
-      wrapper.removeChild(wrapper.firstChild);
+    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) {
+        if (endComment.parentNode) {
+          endComment.parentNode.insertBefore(node, endComment);
+        } else {
+          container.insertBefore(node, endComment);
+        }
+      }
     }
     componentStack.pop();
   });
   boundaryCtx.effects.push(dispose);
-  return wrapper;
+  return container;
 }
 function createPortalDOM(vnode, parent) {
   const { container } = vnode.props;
@@ -1135,6 +1172,12 @@ function sameNodeArray(a, b) {
   return true;
 }
 function reconcileInsert(parent, value, current, marker) {
+  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") {
     const oldNodes2 = asNodeArray(current);
@@ -1648,6 +1691,12 @@ function spread(el, props) {
   }
 }
 function setProp2(el, key, value) {
+  if (key === "ref") {
+    if (typeof value === "function") value(el);
+    else if (value && typeof value === "object") value.current = el;
+    return;
+  }
+  if (key === "key") return;
   if (URL_ATTRS.has(key) || URL_ATTRS.has(key.toLowerCase())) {
     if (!isSafeUrl(value)) {
       if (typeof console !== "undefined") {