@estjs/template 0.0.15-beta.12 → 0.0.15-beta.13

package/dist/template.dev.esm.js

@@ -1,5 +1,5 @@
-import { error, isHTMLElement, isPrimitive, isFalsy, isNull, isObject, isArray, isHtmlInputElement, isHtmlSelectElement, isHtmlTextAreaElement, isFunction, coerceArray, hasChanged, isPromise, startsWith, isString, isBrowser, normalizeClassName, camelCase, capitalize, warn, isSpecialBooleanAttr, isBooleanAttr, includeBooleanAttr, isSymbol, isUndefined, isNumber, isTextNode } from '@estjs/shared';
-import { effect, shallowReactive, isSignal, isComputed, signal } from '@estjs/signals';
+import { error, isHTMLElement, isPrimitive, isFalsy, isNull, isObject, isArray, isHtmlInputElement, isHtmlSelectElement, isHtmlTextAreaElement, isFunction, hasChanged, isPromise, coerceArray, startsWith, isString, isBrowser, normalizeClassName, camelCase, capitalize, warn, isSpecialBooleanAttr, isBooleanAttr, includeBooleanAttr, isSymbol, isUndefined, isNumber, isTextNode } from '@estjs/shared';
+import { effect, shallowReactive, isSignal, isComputed, signal, memoEffect, untrack } from '@estjs/signals';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -155,6 +155,7 @@ var NORMAL_COMPONENT = /* @__PURE__ */ Symbol("Normal Component" );
 var FRAGMENT_COMPONENT = /* @__PURE__ */ Symbol("Fragment Component" );
 var PORTAL_COMPONENT = /* @__PURE__ */ Symbol("Portal Component" );
 var SUSPENSE_COMPONENT = /* @__PURE__ */ Symbol("Suspense Component" );
+var FOR_COMPONENT = /* @__PURE__ */ Symbol("For Component" );
 var MAX_KEY_LENGTH = 1e3;
 var componentKeyPrefixCache = /* @__PURE__ */ new WeakMap();
 function getComponentKey(type) {
@@ -282,60 +283,46 @@ function shallowCompare(a, b) {
   if (isArray(a) !== isArray(b)) return false;
   const aRecord = a;
   const bRecord = b;
-  for (const key in aRecord) {
-    if (aRecord[key] !== bRecord[key]) return false;
-  }
-  for (const key in bRecord) {
-    if (!(key in aRecord)) return false;
+  const aKeys = Object.keys(aRecord);
+  const bKeys = Object.keys(bRecord);
+  if (aKeys.length !== bKeys.length) return false;
+  for (const key of aKeys) {
+    if (!(key in bRecord) || aRecord[key] !== bRecord[key]) {
+      return false;
+    }
   }
   return true;
 }
 function removeNode(node) {
   if (!node) return;
-  try {
-    if (isComponent(node)) {
-      node.destroy();
-    } else {
-      const element = node;
-      if (element.parentElement) {
-        element.remove();
-      }
-    }
-  } catch (_error) {
-    error("Failed to remove node:", _error);
+  if (isComponent(node)) {
+    node.destroy();
+    return;
+  }
+  const element = node;
+  if (element.parentElement) {
+    element.remove();
   }
 }
 function insertNode(parent, child, before) {
   if (!parent || !child) return;
-  try {
-    const beforeNode = isComponent(before) ? before.firstChild : before;
-    if (isComponent(child)) {
-      child.mount(parent, beforeNode);
-      return;
-    }
-    if (beforeNode) {
-      parent.insertBefore(child, beforeNode);
-    } else {
-      if (true) {
-        if (!child) {
-          error("insertNode: child is not a Node", child);
-        }
-      }
-      parent.appendChild(child);
-    }
-  } catch (_error) {
-    error("Failed to insert node:", _error);
+  if (isComponent(child)) {
+    const beforeNode2 = isComponent(before) ? before.firstChild : before;
+    child.mount(parent, beforeNode2);
+    return;
+  }
+  const beforeNode = isComponent(before) ? before.firstChild : before;
+  if (beforeNode) {
+    parent.insertBefore(child, beforeNode);
+  } else {
+    parent.appendChild(child);
   }
 }
 function replaceNode(parent, newNode, oldNode) {
   if (!parent || !newNode || !oldNode || newNode === oldNode) return;
-  try {
-    const beforeNode = isComponent(oldNode) ? oldNode.beforeNode : oldNode.nextSibling;
-    removeNode(oldNode);
-    insertNode(parent, newNode, beforeNode);
-  } catch (_error) {
-    error("Failed to replace node:", _error);
-  }
+  const beforeNode = isComponent(oldNode) ? oldNode.beforeNode : oldNode.nextSibling;
+  removeNode(oldNode);
+  insertNode(parent, newNode, beforeNode);
 }
 function getFirstDOMNode(node) {
   if (!node) {
@@ -716,10 +703,18 @@ function bindSelectElement(node, setter) {
 function insert(parent, nodeFactory, before) {
   if (!parent) return;
   let renderedNodes = [];
+  const currentScope = getActiveScope();
   const cleanup = effect(() => {
-    const rawNodes = isFunction(nodeFactory) ? nodeFactory() : nodeFactory;
-    const nodes = coerceArray(rawNodes).map((item) => isFunction(item) ? item() : item).flatMap(normalizeNode);
-    renderedNodes = patchChildren(parent, renderedNodes, nodes, before);
+    const run = () => {
+      const rawNodes = isFunction(nodeFactory) ? nodeFactory() : nodeFactory;
+      const nodes = coerceArray(rawNodes).map((item) => isFunction(item) ? item() : item).flatMap(normalizeNode);
+      renderedNodes = patchChildren(parent, renderedNodes, nodes, before);
+    };
+    if (currentScope) {
+      runWithScope(currentScope, run);
+    } else {
+      run();
+    }
   });
   onCleanup(() => {
     cleanup();
@@ -891,7 +886,7 @@ var Component = class {
     return void 0;
   }
   mount(parentNode, beforeNode) {
-    var _a2;
+    var _a2, _b;
     this.parentNode = parentNode;
     this.beforeNode = beforeNode;
     this.state = 1 /* MOUNTING */;
@@ -902,27 +897,21 @@ var Component = class {
       this.state = 2 /* MOUNTED */;
       return this.renderedNodes;
     }
-    const parent = (_a2 = this.parentScope) != null ? _a2 : getActiveScope();
-    this.scope = createScope(parent);
-    const renderedNodes = runWithScope(this.scope, () => {
-      var _a3;
-      let result = this.component(this.reactiveProps);
-      if (isFunction(result)) {
-        result = result(this.reactiveProps);
-      }
-      if (isSignal(result) || isComputed(result)) {
-        result = result.value;
-      }
-      return (_a3 = insert(parentNode, result, beforeNode)) != null ? _a3 : [];
-    });
+    const parentScope = (_a2 = this.parentScope) != null ? _a2 : getActiveScope();
+    this.scope = createScope(parentScope);
+    setActiveScope(this.scope);
+    let result = this.component(this.reactiveProps);
+    if (isFunction(result)) {
+      result = result(this.reactiveProps);
+    }
+    if (isSignal(result) || isComputed(result)) {
+      result = result.value;
+    }
+    const renderedNodes = (_b = insert(parentNode, result, beforeNode)) != null ? _b : [];
     this.renderedNodes = renderedNodes;
-    runWithScope(this.scope, () => {
-      this.applyProps(this.props);
-    });
+    this.applyProps(this.props);
     this.state = 2 /* MOUNTED */;
-    if (this.scope) {
-      triggerMountHooks(this.scope);
-    }
+    triggerMountHooks(this.scope);
     return this.renderedNodes;
   }
   update(prevNode) {
@@ -944,9 +933,8 @@ var Component = class {
       return this;
     }
     if (this.scope) {
-      runWithScope(this.scope, () => {
-        this.applyProps(this.props);
-      });
+      setActiveScope(this.scope);
+      this.applyProps(this.props);
       triggerUpdateHooks(this.scope);
     }
     return this;
@@ -1020,9 +1008,9 @@ var Component = class {
       if (this.scope) {
         triggerUpdateHooks(this.scope);
       }
-    } catch (error9) {
+    } catch (error8) {
       this.renderedNodes = originalNodes;
-      throw error9;
+      throw error8;
     }
   }
   /**
@@ -1047,14 +1035,14 @@ var Component = class {
       return;
     }
     this.state = 4 /* DESTROYING */;
+    for (const node of this.renderedNodes) {
+      removeNode(node);
+    }
     const scope = this.scope;
     if (scope) {
       disposeScope(scope);
       this.scope = null;
     }
-    for (const node of this.renderedNodes) {
-      removeNode(node);
-    }
     this.renderedNodes = [];
     this.parentNode = void 0;
     this.beforeNode = void 0;
@@ -1709,9 +1697,9 @@ function Suspense(props) {
         if (pendingCount === 0) {
           showChildren();
         }
-      }).catch((error9) => {
+      }).catch((error8) => {
         {
-          warn("[Suspense] Resource failed:", error9);
+          warn("[Suspense] Resource failed:", error8);
         }
         if (!isMounted) return;
         pendingCount--;
@@ -1759,7 +1747,7 @@ function isSuspense(node) {
 function createResource(fetcher, options) {
   const value = signal(options == null ? void 0 : options.initialValue);
   const loading = signal(true);
-  const error9 = signal(null);
+  const error8 = signal(null);
   const state = signal("pending");
   let fetchId = 0;
   let currentPromise = null;
@@ -1767,7 +1755,7 @@ function createResource(fetcher, options) {
     const currentFetchId = ++fetchId;
     loading.value = true;
     state.value = "pending";
-    error9.value = null;
+    error8.value = null;
     try {
       const promise = fetcher();
       currentPromise = promise.then(() => {
@@ -1781,7 +1769,7 @@ function createResource(fetcher, options) {
       }
     } catch (error_) {
       if (currentFetchId === fetchId) {
-        error9.value = error_ instanceof Error ? error_ : new Error(String(error_));
+        error8.value = error_ instanceof Error ? error_ : new Error(String(error_));
         state.value = "errored";
         loading.value = false;
       }
@@ -1798,14 +1786,14 @@ function createResource(fetcher, options) {
     return value.value;
   });
   resource.loading = loading;
-  resource.error = error9;
+  resource.error = error8;
   resource.state = state;
   const actions = {
     mutate: (newValue) => {
       value.value = newValue;
       state.value = "ready";
       loading.value = false;
-      error9.value = null;
+      error8.value = null;
     },
     refetch: () => __async(null, null, function* () {
       yield fetch();
@@ -1813,7 +1801,173 @@ function createResource(fetcher, options) {
   };
   return [resource, actions];
 }
+function For(props) {
+  const fragment = document.createDocumentFragment();
+  const marker = document.createComment("");
+  fragment.appendChild(marker);
+  let entries = [];
+  let fallbackNode = null;
+  const keyFn = props.keyFn;
+  const renderFn = props.children;
+  const getList = () => {
+    var _a2, _b;
+    const input = props.each;
+    if (isSignal(input)) return (_a2 = input.value) != null ? _a2 : [];
+    if (typeof input === "function") return (_b = input()) != null ? _b : [];
+    return input != null ? input : [];
+  };
+  const getKey = (item) => keyFn ? keyFn(item) : item;
+  const renderItem = (item, index, parent, before) => {
+    var _a2;
+    const prevScope = getActiveScope();
+    const scope = createScope(prevScope);
+    setActiveScope(scope);
+    let node;
+    try {
+      const result = renderFn(item, index);
+      if (isComponent(result)) {
+        result.mount(parent, before);
+        node = (_a2 = result.firstChild) != null ? _a2 : document.createComment("empty");
+      } else {
+        node = result;
+        if (!node.parentNode) {
+          if (before) {
+            parent.insertBefore(node, before);
+          } else {
+            parent.appendChild(node);
+          }
+        }
+      }
+    } finally {
+      setActiveScope(prevScope);
+    }
+    return { key: getKey(item), node, scope };
+  };
+  const disposeItem = (entry) => {
+    disposeScope(entry.scope);
+    if (entry.node.parentNode) {
+      entry.node.parentNode.removeChild(entry.node);
+    }
+  };
+  memoEffect(
+    ({ prev }) => {
+      var _a2;
+      const newItems = getList();
+      if (prev === newItems) return { prev: newItems };
+      const parent = marker.parentNode;
+      if (!parent) {
+        if (newItems.length === 0) {
+          if (props.fallback) {
+            const fb = props.fallback();
+            if (isComponent(fb)) {
+              fb.mount(fragment, marker);
+              fallbackNode = (_a2 = fb.firstChild) != null ? _a2 : document.createComment("empty");
+            } else {
+              fallbackNode = fb;
+              fragment.insertBefore(fallbackNode, marker);
+            }
+          }
+          return { prev: newItems };
+        }
+        entries = new Array(newItems.length);
+        for (const [i, newItem] of newItems.entries()) {
+          entries[i] = renderItem(newItem, i, fragment, marker);
+        }
+        return { prev: newItems };
+      }
+      untrack(() => reconcile(parent, newItems));
+      return { prev: newItems };
+    },
+    {
+      prev: []
+    }
+  );
+  function reconcile(parent, newItems) {
+    var _a2;
+    const oldLen = entries.length;
+    const newLen = newItems.length;
+    if (newLen === 0) {
+      for (let i = 0; i < oldLen; i++) {
+        disposeItem(entries[i]);
+      }
+      entries = [];
+      if (props.fallback && !fallbackNode) {
+        const fb = props.fallback();
+        if (isComponent(fb)) {
+          fb.mount(parent, marker);
+          fallbackNode = (_a2 = fb.firstChild) != null ? _a2 : document.createComment("empty");
+        } else {
+          fallbackNode = fb;
+          parent.insertBefore(fallbackNode, marker);
+        }
+      }
+      return;
+    }
+    if (oldLen === 0 || fallbackNode) {
+      if (fallbackNode) {
+        if (fallbackNode.parentNode) fallbackNode.parentNode.removeChild(fallbackNode);
+        fallbackNode = null;
+      }
+      entries = new Array(newLen);
+      const batchFragment2 = document.createDocumentFragment();
+      for (let i = 0; i < newLen; i++) {
+        entries[i] = renderItem(newItems[i], i, batchFragment2, null);
+      }
+      parent.insertBefore(batchFragment2, marker);
+      return;
+    }
+    const oldKeyMap = /* @__PURE__ */ new Map();
+    for (let i = 0; i < oldLen; i++) {
+      const entry = entries[i];
+      const list = oldKeyMap.get(entry.key);
+      if (list) {
+        list.push(entry);
+      } else {
+        oldKeyMap.set(entry.key, [entry]);
+      }
+    }
+    const newEntries = new Array(newLen);
+    const toRemove = [];
+    const batchFragment = document.createDocumentFragment();
+    for (let i = 0; i < newLen; i++) {
+      const item = newItems[i];
+      const key = getKey(item);
+      const oldList = oldKeyMap.get(key);
+      if (oldList && oldList.length > 0) {
+        newEntries[i] = oldList.shift();
+      } else {
+        newEntries[i] = renderItem(item, i, batchFragment, null);
+      }
+    }
+    for (const list of oldKeyMap.values()) {
+      for (const entry of list) {
+        toRemove.push(entry);
+      }
+    }
+    for (const entry of toRemove) {
+      disposeItem(entry);
+    }
+    for (let i = 0; i < newLen; i++) {
+      const node = newEntries[i].node;
+      parent.insertBefore(node, marker);
+    }
+    entries = newEntries;
+  }
+  onCleanup(() => {
+    for (const entry of entries) {
+      disposeItem(entry);
+    }
+    if (fallbackNode && fallbackNode.parentNode) {
+      fallbackNode.parentNode.removeChild(fallbackNode);
+    }
+    if (marker.parentNode) {
+      marker.parentNode.removeChild(marker);
+    }
+  });
+  return fragment;
+}
+For[FOR_COMPONENT] = true;
 
-export { Component, Fragment, Portal, Suspense, addEvent, addEventListener, bindElement, createApp, createComponent, createResource, createScope, delegateEvents, disposeScope, endHydration, getActiveScope, getFirstDOMNode, getHydrationKey, getRenderedElement, hydrate, inject, insert, insertNode, isComponent, isFragment, isHydrating, isPortal, isSameNode, isSuspense, mapNodes, mapSSRNodes, normalizeClass, normalizeNode, omitProps, onCleanup, onDestroy, onMount, onUpdate, patchAttr, patchClass, patchStyle, provide, removeNode, replaceNode, resetHydrationKey, runWithScope, setActiveScope, setStyle, shallowCompare, startHydration, template };
+export { Component, For, Fragment, Portal, Suspense, addEvent, addEventListener, bindElement, createApp, createComponent, createResource, createScope, delegateEvents, disposeScope, endHydration, getActiveScope, getFirstDOMNode, getHydrationKey, getRenderedElement, hydrate, inject, insert, insertNode, isComponent, isFragment, isHydrating, isPortal, isSameNode, isSuspense, mapNodes, mapSSRNodes, normalizeClass, normalizeNode, omitProps, onCleanup, onDestroy, onMount, onUpdate, patchAttr, patchClass, patchStyle, provide, removeNode, replaceNode, resetHydrationKey, runWithScope, setActiveScope, setStyle, shallowCompare, startHydration, template };
 //# sourceMappingURL=template.dev.esm.js.map
 //# sourceMappingURL=template.dev.esm.js.map