@constela/runtime 0.16.5 → 0.16.6

package/dist/index.js

@@ -14539,6 +14539,8 @@ function hydrateChildren(children, parent, ctx) {
           hydrate(childNode, firstDomChild, ctx);
           domIndex += itemCount;
         }
+      } else {
+        hydrateEachEmpty(childNode, parent, domChildren[domIndex] || null, ctx);
       }
     } else {
       const domChild = domChildren[domIndex];
@@ -14766,6 +14768,162 @@ function hydrateIfWithoutDom(node, parent, nextSibling, ctx, branchInfo) {
     }
   });
 }
+function hydrateEachEmpty(node, parent, insertBefore, ctx) {
+  const anchor = document.createComment("each");
+  if (insertBefore) {
+    parent.insertBefore(anchor, insertBefore);
+  } else {
+    parent.appendChild(anchor);
+  }
+  const hasKey = !!node.key;
+  let itemStateMap = /* @__PURE__ */ new Map();
+  let currentNodes = [];
+  let itemCleanups = [];
+  const effectCleanup = createEffect(() => {
+    const items = evaluate(node.items, {
+      state: ctx.state,
+      locals: ctx.locals,
+      ...ctx.imports && { imports: ctx.imports },
+      ...ctx.route && { route: ctx.route }
+    });
+    if (!hasKey || !node.key) {
+      for (const cleanup of itemCleanups) {
+        cleanup();
+      }
+      itemCleanups = [];
+      for (const oldNode of currentNodes) {
+        if (oldNode.parentNode) {
+          oldNode.parentNode.removeChild(oldNode);
+        }
+      }
+      currentNodes = [];
+      if (Array.isArray(items)) {
+        items.forEach((item, index) => {
+          const itemLocals = {
+            ...ctx.locals,
+            [node.as]: item
+          };
+          if (node.index) {
+            itemLocals[node.index] = index;
+          }
+          const localCleanups = [];
+          const itemCtx = {
+            state: ctx.state,
+            actions: ctx.actions,
+            locals: itemLocals,
+            cleanups: localCleanups,
+            ...ctx.imports && { imports: ctx.imports }
+          };
+          const itemNode = render(node.body, itemCtx);
+          currentNodes.push(itemNode);
+          itemCleanups.push(...localCleanups);
+          if (anchor.parentNode) {
+            let refNode = anchor.nextSibling;
+            if (currentNodes.length > 1) {
+              const lastExisting = currentNodes[currentNodes.length - 2];
+              if (lastExisting) {
+                refNode = lastExisting.nextSibling;
+              }
+            }
+            anchor.parentNode.insertBefore(itemNode, refNode);
+          }
+        });
+      }
+      return;
+    }
+    const newItemStateMap = /* @__PURE__ */ new Map();
+    const newNodes = [];
+    const seenKeys = /* @__PURE__ */ new Set();
+    if (Array.isArray(items)) {
+      items.forEach((item, index) => {
+        const tempLocals = {
+          ...ctx.locals,
+          [node.as]: item,
+          ...node.index ? { [node.index]: index } : {}
+        };
+        const keyValue = evaluate(node.key, {
+          state: ctx.state,
+          locals: tempLocals,
+          ...ctx.imports && { imports: ctx.imports },
+          ...ctx.route && { route: ctx.route }
+        });
+        if (seenKeys.has(keyValue)) {
+          if (typeof process !== "undefined" && process.env?.["NODE_ENV"] !== "production") {
+            console.warn(`Duplicate key "${keyValue}" in each loop. Keys should be unique.`);
+          }
+        }
+        seenKeys.add(keyValue);
+        const existingState = itemStateMap.get(keyValue);
+        if (existingState) {
+          existingState.itemSignal.set(item);
+          existingState.indexSignal.set(index);
+          newItemStateMap.set(keyValue, existingState);
+          newNodes.push(existingState.node);
+        } else {
+          const itemSignal = createSignal(item);
+          const indexSignal = createSignal(index);
+          const reactiveLocals = createReactiveLocals2(
+            ctx.locals,
+            itemSignal,
+            indexSignal,
+            node.as,
+            node.index
+          );
+          const localCleanups = [];
+          const itemCtx = {
+            state: ctx.state,
+            actions: ctx.actions,
+            locals: reactiveLocals,
+            cleanups: localCleanups,
+            ...ctx.imports && { imports: ctx.imports }
+          };
+          const itemNode = render(node.body, itemCtx);
+          const newState = {
+            key: keyValue,
+            node: itemNode,
+            cleanups: localCleanups,
+            itemSignal,
+            indexSignal
+          };
+          newItemStateMap.set(keyValue, newState);
+          newNodes.push(itemNode);
+        }
+      });
+    }
+    for (const [key2, state] of itemStateMap) {
+      if (!newItemStateMap.has(key2)) {
+        for (const cleanup of state.cleanups) {
+          cleanup();
+        }
+        if (state.node.parentNode) {
+          state.node.parentNode.removeChild(state.node);
+        }
+      }
+    }
+    if (anchor.parentNode) {
+      let refNode = anchor;
+      for (const itemNode of newNodes) {
+        const nextSibling = refNode.nextSibling;
+        if (nextSibling !== itemNode) {
+          anchor.parentNode.insertBefore(itemNode, refNode.nextSibling);
+        }
+        refNode = itemNode;
+      }
+    }
+    itemStateMap = newItemStateMap;
+    currentNodes = newNodes;
+    itemCleanups = [];
+    for (const state of itemStateMap.values()) {
+      itemCleanups.push(...state.cleanups);
+    }
+  });
+  ctx.cleanups.push(effectCleanup);
+  ctx.cleanups.push(() => {
+    for (const cleanup of itemCleanups) {
+      cleanup();
+    }
+  });
+}
 function hydrateEach(node, firstItemDomNode, ctx) {
   const parent = firstItemDomNode.parentNode;
   if (!parent) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constela/runtime",
-  "version": "0.16.5",
+  "version": "0.16.6",
   "description": "Runtime DOM renderer for Constela UI framework",
   "type": "module",
   "main": "./dist/index.js",