@fictjs/runtime 0.0.9 → 0.0.10

package/dist/index.cjs

@@ -807,10 +807,17 @@ function effectScopeOper() {
 }
 function batch(fn) {
   ++batchDepth;
+  let hasError = false;
   try {
     return fn();
+  } catch (e) {
+    hasError = true;
+    throw e;
   } finally {
-    if (--batchDepth === 0) flush();
+    --batchDepth;
+    if (!hasError && batchDepth === 0) {
+      flush();
+    }
   }
 }
 function setActiveSub(sub) {
@@ -866,7 +873,7 @@ function effectRunDevtools(node) {
 function createSelector(source, equalityFn = (a, b) => a === b) {
   let current = source();
   const observers = /* @__PURE__ */ new Map();
-  effect(() => {
+  const dispose = effect(() => {
     const next = source();
     if (equalityFn(current, next)) return;
     const prevSig = observers.get(current);
@@ -875,6 +882,10 @@ function createSelector(source, equalityFn = (a, b) => a === b) {
     if (nextSig) nextSig(true);
     current = next;
   });
+  registerRootCleanup(() => {
+    dispose();
+    observers.clear();
+  });
   return (key) => {
     let sig = observers.get(key);
     if (!sig) {
@@ -1062,7 +1073,8 @@ function createRenderEffect(fn) {
         cleanup = maybeCleanup;
       }
     } catch (err) {
-      if (handleError(err, { source: "effect" }, rootForError)) {
+      const handled = handleError(err, { source: "effect" }, rootForError);
+      if (handled) {
         return;
       }
       throw err;
@@ -1454,159 +1466,22 @@ var UnitlessStyles = /* @__PURE__ */ new Set([
 // src/jsx.ts
 var Fragment = Symbol("Fragment");
 
-// src/node-ops.ts
-function toNodeArray(node) {
-  try {
-    if (Array.isArray(node)) {
-      let allNodes = true;
-      for (const item of node) {
-        let isItemNode = false;
-        try {
-          isItemNode = item instanceof Node;
-        } catch {
-          isItemNode = false;
-        }
-        if (!isItemNode) {
-          allNodes = false;
-          break;
-        }
-      }
-      if (allNodes) {
-        return node;
-      }
-      const result = [];
-      for (const item of node) {
-        result.push(...toNodeArray(item));
-      }
-      return result;
-    }
-    if (node === null || node === void 0 || node === false) {
-      return [];
-    }
-  } catch {
-    return [];
-  }
-  let isNode = false;
-  try {
-    isNode = node instanceof Node;
-  } catch {
-    isNode = false;
-  }
-  if (isNode) {
-    try {
-      if (node instanceof DocumentFragment) {
-        return Array.from(node.childNodes);
-      }
-    } catch {
-    }
-    return [node];
-  }
-  try {
-    if (typeof node === "object" && node !== null && "marker" in node) {
-      return toNodeArray(node.marker);
-    }
-  } catch {
-  }
-  try {
-    return [document.createTextNode(String(node))];
-  } catch {
-    return [document.createTextNode("")];
-  }
-}
-function insertNodesBefore(parent, nodes, anchor) {
-  if (nodes.length === 0) return;
-  if (nodes.length === 1) {
-    const node = nodes[0];
-    if (node === void 0 || node === null) return;
-    if (node.ownerDocument !== parent.ownerDocument && parent.ownerDocument) {
-      parent.ownerDocument.adoptNode(node);
-    }
-    try {
-      parent.insertBefore(node, anchor);
-    } catch (e) {
-      if (parent.ownerDocument) {
-        try {
-          const clone = parent.ownerDocument.importNode(node, true);
-          parent.insertBefore(clone, anchor);
-          return;
-        } catch {
-        }
-      }
-      throw e;
-    }
-    return;
-  }
-  const doc = parent.ownerDocument;
-  if (doc) {
-    const frag = doc.createDocumentFragment();
-    for (let i = 0; i < nodes.length; i++) {
-      const node = nodes[i];
-      if (node === void 0 || node === null) continue;
-      if (node.nodeType === 11) {
-        const childrenArr = Array.from(node.childNodes);
-        for (let j = 0; j < childrenArr.length; j++) {
-          frag.appendChild(childrenArr[j]);
-        }
-      } else {
-        if (node.ownerDocument !== doc) {
-          doc.adoptNode(node);
-        }
-        frag.appendChild(node);
-      }
-    }
-    parent.insertBefore(frag, anchor);
-    return;
-  }
-  const insertSingle = (nodeToInsert, anchorNode) => {
-    if (nodeToInsert.ownerDocument !== parent.ownerDocument && parent.ownerDocument) {
-      parent.ownerDocument.adoptNode(nodeToInsert);
-    }
-    try {
-      parent.insertBefore(nodeToInsert, anchorNode);
-      return nodeToInsert;
-    } catch (e) {
-      if (parent.ownerDocument) {
-        try {
-          const clone = parent.ownerDocument.importNode(nodeToInsert, true);
-          parent.insertBefore(clone, anchorNode);
-          return clone;
-        } catch {
-        }
-      }
-      throw e;
-    }
-  };
-  for (let i = nodes.length - 1; i >= 0; i--) {
-    const node = nodes[i];
-    if (node === void 0 || node === null) continue;
-    const isFrag = node.nodeType === 11;
-    if (isFrag) {
-      const childrenArr = Array.from(node.childNodes);
-      for (let j = childrenArr.length - 1; j >= 0; j--) {
-        const child = childrenArr[j];
-        anchor = insertSingle(child, anchor);
-      }
-    } else {
-      anchor = insertSingle(node, anchor);
-    }
-  }
-}
-function removeNodes(nodes) {
-  for (const node of nodes) {
-    node.parentNode?.removeChild(node);
-  }
-}
-
 // src/hooks.ts
 var ctxStack = [];
+function assertRenderContext(ctx, hookName) {
+  if (!ctx.rendering) {
+    throw new Error(`${hookName} can only be used during render execution`);
+  }
+}
 function __fictUseContext() {
   if (ctxStack.length === 0) {
-    const ctx2 = { slots: [], cursor: 0 };
+    const ctx2 = { slots: [], cursor: 0, rendering: true };
     ctxStack.push(ctx2);
     return ctx2;
   }
   const ctx = ctxStack[ctxStack.length - 1];
   ctx.cursor = 0;
+  ctx.rendering = true;
   return ctx;
 }
 function __fictPushContext() {
@@ -1621,6 +1496,7 @@ function __fictResetContext() {
   ctxStack.length = 0;
 }
 function __fictUseSignal(ctx, initial, slot) {
+  assertRenderContext(ctx, "__fictUseSignal");
   const index = slot ?? ctx.cursor++;
   if (!ctx.slots[index]) {
     ctx.slots[index] = signal(initial);
@@ -1628,6 +1504,7 @@ function __fictUseSignal(ctx, initial, slot) {
   return ctx.slots[index];
 }
 function __fictUseMemo(ctx, fn, slot) {
+  assertRenderContext(ctx, "__fictUseMemo");
   const index = slot ?? ctx.cursor++;
   if (!ctx.slots[index]) {
     ctx.slots[index] = createMemo(fn);
@@ -1635,6 +1512,7 @@ function __fictUseMemo(ctx, fn, slot) {
   return ctx.slots[index];
 }
 function __fictUseEffect(ctx, fn, slot) {
+  assertRenderContext(ctx, "__fictUseEffect");
   const index = slot ?? ctx.cursor++;
   if (!ctx.slots[index]) {
     ctx.slots[index] = createEffect(fn);
@@ -1643,9 +1521,11 @@ function __fictUseEffect(ctx, fn, slot) {
 function __fictRender(ctx, fn) {
   ctxStack.push(ctx);
   ctx.cursor = 0;
+  ctx.rendering = true;
   try {
     return fn();
   } finally {
+    ctx.rendering = false;
     ctxStack.pop();
   }
 }
@@ -1886,6 +1766,14 @@ function createElementWithContext(node, namespace) {
       if (typeof handle.dispose === "function") {
         registerRootCleanup(handle.dispose);
       }
+      if (typeof handle.flush === "function") {
+        const runFlush = () => handle.flush && handle.flush();
+        if (typeof queueMicrotask === "function") {
+          queueMicrotask(runFlush);
+        } else {
+          Promise.resolve().then(runFlush).catch(() => void 0);
+        }
+      }
       return createElement(handle.marker);
     }
     const nodeRecord = node;
@@ -1933,18 +1821,18 @@ function createElementWithContext(node, namespace) {
       }
     });
     const props = createPropsProxy(baseProps);
+    __fictPushContext();
     try {
-      __fictPushContext();
       const rendered = vnode.type(props);
-      __fictPopContext();
       return createElementWithContext(rendered, namespace);
     } catch (err) {
-      __fictPopContext();
       if (handleSuspend(err)) {
         return document.createComment("fict:suspend");
       }
       handleError(err, { source: "render", componentName: vnode.type.name });
       throw err;
+    } finally {
+      __fictPopContext();
     }
   }
   if (vnode.type === Fragment) {
@@ -2236,6 +2124,149 @@ function eventNameFromProp(key) {
   return key.slice(2).toLowerCase();
 }
 
+// src/node-ops.ts
+function toNodeArray(node) {
+  try {
+    if (Array.isArray(node)) {
+      let allNodes = true;
+      for (const item of node) {
+        let isItemNode = false;
+        try {
+          isItemNode = item instanceof Node;
+        } catch {
+          isItemNode = false;
+        }
+        if (!isItemNode) {
+          allNodes = false;
+          break;
+        }
+      }
+      if (allNodes) {
+        return node;
+      }
+      const result = [];
+      for (const item of node) {
+        result.push(...toNodeArray(item));
+      }
+      return result;
+    }
+    if (node === null || node === void 0 || node === false) {
+      return [];
+    }
+  } catch {
+    return [];
+  }
+  let isNode = false;
+  try {
+    isNode = node instanceof Node;
+  } catch {
+    isNode = false;
+  }
+  if (isNode) {
+    try {
+      if (node instanceof DocumentFragment) {
+        return Array.from(node.childNodes);
+      }
+    } catch {
+    }
+    return [node];
+  }
+  try {
+    if (typeof node === "object" && node !== null && "marker" in node) {
+      return toNodeArray(node.marker);
+    }
+  } catch {
+  }
+  try {
+    return [document.createTextNode(String(node))];
+  } catch {
+    return [document.createTextNode("")];
+  }
+}
+function insertNodesBefore(parent, nodes, anchor) {
+  if (nodes.length === 0) return;
+  if (nodes.length === 1) {
+    const node = nodes[0];
+    if (node === void 0 || node === null) return;
+    if (node.ownerDocument !== parent.ownerDocument && parent.ownerDocument) {
+      parent.ownerDocument.adoptNode(node);
+    }
+    try {
+      parent.insertBefore(node, anchor);
+    } catch (e) {
+      if (parent.ownerDocument) {
+        try {
+          const clone = parent.ownerDocument.importNode(node, true);
+          parent.insertBefore(clone, anchor);
+          return;
+        } catch {
+        }
+      }
+      throw e;
+    }
+    return;
+  }
+  const doc = parent.ownerDocument;
+  if (doc) {
+    const frag = doc.createDocumentFragment();
+    for (let i = 0; i < nodes.length; i++) {
+      const node = nodes[i];
+      if (node === void 0 || node === null) continue;
+      if (node.nodeType === 11) {
+        const childrenArr = Array.from(node.childNodes);
+        for (let j = 0; j < childrenArr.length; j++) {
+          frag.appendChild(childrenArr[j]);
+        }
+      } else {
+        if (node.ownerDocument !== doc) {
+          doc.adoptNode(node);
+        }
+        frag.appendChild(node);
+      }
+    }
+    parent.insertBefore(frag, anchor);
+    return;
+  }
+  const insertSingle = (nodeToInsert, anchorNode) => {
+    if (nodeToInsert.ownerDocument !== parent.ownerDocument && parent.ownerDocument) {
+      parent.ownerDocument.adoptNode(nodeToInsert);
+    }
+    try {
+      parent.insertBefore(nodeToInsert, anchorNode);
+      return nodeToInsert;
+    } catch (e) {
+      if (parent.ownerDocument) {
+        try {
+          const clone = parent.ownerDocument.importNode(nodeToInsert, true);
+          parent.insertBefore(clone, anchorNode);
+          return clone;
+        } catch {
+        }
+      }
+      throw e;
+    }
+  };
+  for (let i = nodes.length - 1; i >= 0; i--) {
+    const node = nodes[i];
+    if (node === void 0 || node === null) continue;
+    const isFrag = node.nodeType === 11;
+    if (isFrag) {
+      const childrenArr = Array.from(node.childNodes);
+      for (let j = childrenArr.length - 1; j >= 0; j--) {
+        const child = childrenArr[j];
+        anchor = insertSingle(child, anchor);
+      }
+    } else {
+      anchor = insertSingle(node, anchor);
+    }
+  }
+}
+function removeNodes(nodes) {
+  for (const node of nodes) {
+    node.parentNode?.removeChild(node);
+  }
+}
+
 // src/reconcile.ts
 function reconcileArrays(parentNode, a, b) {
   const bLength = b.length;
@@ -2463,7 +2494,6 @@ function createKeyedBlock(key, item, index, render2, needsIndex = true, hostRoot
   } finally {
     setActiveSub(prevSub);
     popRoot(prevRoot);
-    flushOnMount(root);
   }
   return {
     key,
@@ -2495,13 +2525,24 @@ function createFineGrainedKeyedList(getItems, keyFn, renderItem, needsIndex) {
   const hostRoot = getCurrentRoot();
   const fragment = document.createDocumentFragment();
   fragment.append(container.startMarker, container.endMarker);
-  let pendingItems = null;
   let disposed = false;
+  let effectDispose;
+  let connectObserver = null;
+  let effectStarted = false;
+  let startScheduled = false;
+  const getConnectedParent = () => {
+    const endParent = container.endMarker.parentNode;
+    const startParent = container.startMarker.parentNode;
+    if (endParent && startParent && endParent === startParent && endParent.nodeType !== 11) {
+      return endParent;
+    }
+    return null;
+  };
   const performDiff = () => {
     if (disposed) return;
+    const parent = getConnectedParent();
+    if (!parent) return;
     batch2(() => {
-      const newItems = pendingItems || getItems();
-      pendingItems = null;
       const oldBlocks = container.blocks;
       const newBlocks = container.nextBlocks;
       const prevOrderedBlocks = container.orderedBlocks;
@@ -2510,20 +2551,17 @@ function createFineGrainedKeyedList(getItems, keyFn, renderItem, needsIndex) {
       newBlocks.clear();
       nextOrderedBlocks.length = 0;
       orderedIndexByKey.clear();
-      const endParent = container.endMarker.parentNode;
-      const startParent = container.startMarker.parentNode;
-      const parent = endParent && startParent && endParent === startParent && endParent.isConnected ? endParent : null;
-      if (!parent) {
-        pendingItems = newItems;
-        queueMicrotask(performDiff);
-        return;
-      }
+      const createdBlocks = [];
+      const newItems = getItems();
       if (newItems.length === 0) {
         if (oldBlocks.size > 0) {
           for (const block of oldBlocks.values()) {
             destroyRoot(block.root);
-            removeNodes(block.nodes);
           }
+          const range = document.createRange();
+          range.setStartAfter(container.startMarker);
+          range.setEndBefore(container.endMarker);
+          range.deleteContents();
         }
         oldBlocks.clear();
         newBlocks.clear();
@@ -2540,8 +2578,8 @@ function createFineGrainedKeyedList(getItems, keyFn, renderItem, needsIndex) {
       const appendedBlocks = [];
       newItems.forEach((item, index) => {
         const key = keyFn(item, index);
-        const existed = oldBlocks.has(key);
         let block = oldBlocks.get(key);
+        const existed = block !== void 0;
         if (block) {
           if (block.rawItem !== item) {
             block.rawItem = item;
@@ -2552,38 +2590,23 @@ function createFineGrainedKeyedList(getItems, keyFn, renderItem, needsIndex) {
             block.index(index);
           }
         }
-        const existingBlock = newBlocks.get(key);
-        if (existingBlock && existingBlock !== block) {
-          destroyRoot(existingBlock.root);
-          removeNodes(existingBlock.nodes);
-        }
         if (block) {
           newBlocks.set(key, block);
           oldBlocks.delete(key);
         } else {
-          const existingBlock2 = newBlocks.get(key);
-          if (existingBlock2) {
-            destroyRoot(existingBlock2.root);
-            removeNodes(existingBlock2.nodes);
+          const existingBlock = newBlocks.get(key);
+          if (existingBlock) {
+            destroyRoot(existingBlock.root);
+            removeNodes(existingBlock.nodes);
           }
           block = createKeyedBlock(key, item, index, renderItem, needsIndex, hostRoot);
+          createdBlocks.push(block);
         }
         const resolvedBlock = block;
         newBlocks.set(key, resolvedBlock);
         const position = orderedIndexByKey.get(key);
         if (position !== void 0) {
           appendCandidate = false;
-        }
-        if (appendCandidate) {
-          if (index < prevCount) {
-            if (!prevOrderedBlocks[index] || prevOrderedBlocks[index].key !== key) {
-              appendCandidate = false;
-            }
-          } else if (existed) {
-            appendCandidate = false;
-          }
-        }
-        if (position !== void 0) {
           const prior = nextOrderedBlocks[position];
           if (prior && prior !== resolvedBlock) {
             destroyRoot(prior.root);
@@ -2591,6 +2614,15 @@ function createFineGrainedKeyedList(getItems, keyFn, renderItem, needsIndex) {
           }
           nextOrderedBlocks[position] = resolvedBlock;
         } else {
+          if (appendCandidate) {
+            if (index < prevCount) {
+              if (!prevOrderedBlocks[index] || prevOrderedBlocks[index].key !== key) {
+                appendCandidate = false;
+              }
+            } else if (existed) {
+              appendCandidate = false;
+            }
+          }
           orderedIndexByKey.set(key, nextOrderedBlocks.length);
           nextOrderedBlocks.push(resolvedBlock);
         }
@@ -2619,6 +2651,11 @@ function createFineGrainedKeyedList(getItems, keyFn, renderItem, needsIndex) {
         container.nextBlocks = oldBlocks;
         container.orderedBlocks = nextOrderedBlocks;
         container.nextOrderedBlocks = prevOrderedBlocks;
+        for (const block of createdBlocks) {
+          if (newBlocks.get(block.key) === block) {
+            flushOnMount(block.root);
+          }
+        }
         return;
       }
       if (oldBlocks.size > 0) {
@@ -2648,22 +2685,87 @@ function createFineGrainedKeyedList(getItems, keyFn, renderItem, needsIndex) {
       container.nextBlocks = oldBlocks;
       container.orderedBlocks = nextOrderedBlocks;
       container.nextOrderedBlocks = prevOrderedBlocks;
+      for (const block of createdBlocks) {
+        if (newBlocks.get(block.key) === block) {
+          flushOnMount(block.root);
+        }
+      }
     });
   };
-  const effectDispose = createRenderEffect(performDiff);
+  const disconnectObserver = () => {
+    connectObserver?.disconnect();
+    connectObserver = null;
+  };
+  const ensureEffectStarted = () => {
+    if (disposed || effectStarted) return effectStarted;
+    const parent = getConnectedParent();
+    if (!parent) return false;
+    const start = () => {
+      effectDispose = createRenderEffect(performDiff);
+      effectStarted = true;
+    };
+    if (hostRoot) {
+      const prev = pushRoot(hostRoot);
+      try {
+        start();
+      } finally {
+        popRoot(prev);
+      }
+    } else {
+      start();
+    }
+    return true;
+  };
+  const waitForConnection = () => {
+    if (connectObserver || typeof MutationObserver === "undefined") return;
+    connectObserver = new MutationObserver(() => {
+      if (disposed) return;
+      if (getConnectedParent()) {
+        disconnectObserver();
+        if (ensureEffectStarted()) {
+          flush();
+        }
+      }
+    });
+    connectObserver.observe(document, { childList: true, subtree: true });
+  };
+  const scheduleStart = () => {
+    if (startScheduled || disposed || effectStarted) return;
+    startScheduled = true;
+    const run = () => {
+      startScheduled = false;
+      if (!ensureEffectStarted()) {
+        waitForConnection();
+      }
+    };
+    if (typeof queueMicrotask === "function") {
+      queueMicrotask(run);
+    } else {
+      Promise.resolve().then(run).catch(() => void 0);
+    }
+  };
+  scheduleStart();
   return {
-    marker: fragment,
+    get marker() {
+      scheduleStart();
+      return fragment;
+    },
     startMarker: container.startMarker,
     endMarker: container.endMarker,
     // Flush pending items - call after markers are inserted into DOM
     flush: () => {
-      if (pendingItems !== null) {
-        performDiff();
+      if (disposed) return;
+      scheduleStart();
+      if (ensureEffectStarted()) {
+        flush();
+      } else {
+        waitForConnection();
       }
     },
     dispose: () => {
       disposed = true;
       effectDispose?.();
+      disconnectObserver();
       container.dispose();
     }
   };
@@ -2863,8 +2965,17 @@ function createClassBinding(el, value) {
 }
 function bindClass(el, getValue) {
   let prev = {};
+  let prevString;
   return createRenderEffect(() => {
     const next = getValue();
+    if (typeof next === "string") {
+      if (next === prevString) return;
+      prevString = next;
+      el.className = next;
+      prev = {};
+      return;
+    }
+    prevString = void 0;
     prev = applyClass(el, next, prev);
   });
 }
@@ -3093,11 +3204,19 @@ function clearDelegatedEvents(doc = window.document) {
   }
 }
 function globalEventHandler(e) {
-  let node = e.target;
+  const asNode = (value) => value && typeof value.nodeType === "number" ? value : null;
+  const asElement = (value) => {
+    const n = asNode(value);
+    if (!n) return null;
+    if (n.nodeType === 1) return n;
+    return n.parentElement;
+  };
+  let node = asElement(e.target);
   const key = `$$${e.type}`;
   const dataKey = `${key}Data`;
   const oriTarget = e.target;
   const oriCurrentTarget = e.currentTarget;
+  let lastHandled = null;
   const retarget = (value) => Object.defineProperty(e, "target", {
     configurable: true,
     value
@@ -3120,23 +3239,28 @@ function globalEventHandler(e) {
       const rawData = node[dataKey];
       const hasData = rawData !== void 0;
       const resolvedNodeData = hasData ? resolveData(rawData) : void 0;
-      if (typeof handler === "function") {
-        callEventHandler(handler, e, node, hasData ? resolvedNodeData : void 0);
-      } else if (Array.isArray(handler)) {
-        const tupleData = resolveData(handler[1]);
-        callEventHandler(handler[0], e, node, tupleData);
-      }
+      batch2(() => {
+        if (typeof handler === "function") {
+          callEventHandler(handler, e, node, hasData ? resolvedNodeData : void 0);
+        } else if (Array.isArray(handler)) {
+          const tupleData = resolveData(handler[1]);
+          callEventHandler(handler[0], e, node, tupleData);
+        }
+      });
       if (e.cancelBubble) return false;
     }
     const shadowHost = node.host;
-    if (shadowHost && typeof shadowHost !== "string" && !shadowHost._$host && node.contains(e.target)) {
+    if (shadowHost && typeof shadowHost !== "string" && !shadowHost._$host && (() => {
+      const targetNode = asNode(e.target);
+      return targetNode ? node.contains(targetNode) : false;
+    })()) {
       retarget(shadowHost);
     }
     return true;
   };
   const walkUpTree = () => {
     while (handleNode() && node) {
-      node = node._$host || node.parentNode || node.host;
+      node = asElement(node._$host || node.parentNode || node.host);
     }
   };
   Object.defineProperty(e, "currentTarget", {
@@ -3149,8 +3273,11 @@ function globalEventHandler(e) {
     const path = e.composedPath();
     retarget(path[0]);
     for (let i = 0; i < path.length - 2; i++) {
-      node = path[i];
+      const nextNode = asElement(path[i]);
+      if (!nextNode || nextNode === lastHandled) continue;
+      node = nextNode;
       if (!handleNode()) break;
+      lastHandled = node;
       if (node._$host) {
         node = node._$host;
         walkUpTree();