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

package/dist/template.d.cts

@@ -578,4 +578,19 @@ interface ResourceOptions<T> {
  */
 declare function createResource<T>(fetcher: () => Promise<T>, options?: ResourceOptions<T>): [Resource<T>, ResourceActions<T>];
 
-export { Component, type ComponentFn, type ComponentProps, Fragment, type FragmentProps, type InjectionKey, Portal, type PortalProps, type Scope, Suspense, type SuspenseProps, 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 };
+interface ForProps<T> {
+    each: T[] | Signal<T[]> | (() => T[]);
+    children: (item: T, index: number) => AnyNode;
+    keyFn?: (item: T) => unknown;
+    fallback?: () => AnyNode;
+}
+/**
+ * Optimized For Component
+ * - Uses createDetachedScope to avoid parent.children Set overhead (SolidJS style)
+ * - Uses DocumentFragment batching for mass creation
+ * - Inlines scope switching for performance
+ */
+declare function For<T>(props: ForProps<T>): Node;
+declare namespace For { }
+
+export { Component, type ComponentFn, type ComponentProps, For, type ForProps, Fragment, type FragmentProps, type InjectionKey, Portal, type PortalProps, type Scope, Suspense, type SuspenseProps, 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 };

package/dist/template.d.ts

@@ -578,4 +578,19 @@ interface ResourceOptions<T> {
  */
 declare function createResource<T>(fetcher: () => Promise<T>, options?: ResourceOptions<T>): [Resource<T>, ResourceActions<T>];
 
-export { Component, type ComponentFn, type ComponentProps, Fragment, type FragmentProps, type InjectionKey, Portal, type PortalProps, type Scope, Suspense, type SuspenseProps, 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 };
+interface ForProps<T> {
+    each: T[] | Signal<T[]> | (() => T[]);
+    children: (item: T, index: number) => AnyNode;
+    keyFn?: (item: T) => unknown;
+    fallback?: () => AnyNode;
+}
+/**
+ * Optimized For Component
+ * - Uses createDetachedScope to avoid parent.children Set overhead (SolidJS style)
+ * - Uses DocumentFragment batching for mass creation
+ * - Inlines scope switching for performance
+ */
+declare function For<T>(props: ForProps<T>): Node;
+declare namespace For { }
+
+export { Component, type ComponentFn, type ComponentProps, For, type ForProps, Fragment, type FragmentProps, type InjectionKey, Portal, type PortalProps, type Scope, Suspense, type SuspenseProps, 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 };

package/dist/template.dev.cjs.js

@@ -157,6 +157,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) {
@@ -284,60 +285,46 @@ function shallowCompare(a, b) {
   if (shared.isArray(a) !== shared.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) {
-    shared.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) {
-          shared.error("insertNode: child is not a Node", child);
-        }
-      }
-      parent.appendChild(child);
-    }
-  } catch (_error) {
-    shared.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) {
-    shared.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) {
@@ -718,10 +705,18 @@ function bindSelectElement(node, setter) {
 function insert(parent, nodeFactory, before) {
   if (!parent) return;
   let renderedNodes = [];
+  const currentScope = getActiveScope();
   const cleanup = signals.effect(() => {
-    const rawNodes = shared.isFunction(nodeFactory) ? nodeFactory() : nodeFactory;
-    const nodes = shared.coerceArray(rawNodes).map((item) => shared.isFunction(item) ? item() : item).flatMap(normalizeNode);
-    renderedNodes = patchChildren(parent, renderedNodes, nodes, before);
+    const run = () => {
+      const rawNodes = shared.isFunction(nodeFactory) ? nodeFactory() : nodeFactory;
+      const nodes = shared.coerceArray(rawNodes).map((item) => shared.isFunction(item) ? item() : item).flatMap(normalizeNode);
+      renderedNodes = patchChildren(parent, renderedNodes, nodes, before);
+    };
+    if (currentScope) {
+      runWithScope(currentScope, run);
+    } else {
+      run();
+    }
   });
   onCleanup(() => {
     cleanup();
@@ -893,7 +888,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 */;
@@ -904,27 +899,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 (shared.isFunction(result)) {
-        result = result(this.reactiveProps);
-      }
-      if (signals.isSignal(result) || signals.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 (shared.isFunction(result)) {
+      result = result(this.reactiveProps);
+    }
+    if (signals.isSignal(result) || signals.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) {
@@ -946,9 +935,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;
@@ -1022,9 +1010,9 @@ var Component = class {
       if (this.scope) {
         triggerUpdateHooks(this.scope);
       }
-    } catch (error9) {
+    } catch (error8) {
       this.renderedNodes = originalNodes;
-      throw error9;
+      throw error8;
     }
   }
   /**
@@ -1049,14 +1037,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;
@@ -1711,9 +1699,9 @@ function Suspense(props) {
         if (pendingCount === 0) {
           showChildren();
         }
-      }).catch((error9) => {
+      }).catch((error8) => {
         {
-          shared.warn("[Suspense] Resource failed:", error9);
+          shared.warn("[Suspense] Resource failed:", error8);
         }
         if (!isMounted) return;
         pendingCount--;
@@ -1761,7 +1749,7 @@ function isSuspense(node) {
 function createResource(fetcher, options) {
   const value = signals.signal(options == null ? void 0 : options.initialValue);
   const loading = signals.signal(true);
-  const error9 = signals.signal(null);
+  const error8 = signals.signal(null);
   const state = signals.signal("pending");
   let fetchId = 0;
   let currentPromise = null;
@@ -1769,7 +1757,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(() => {
@@ -1783,7 +1771,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;
       }
@@ -1800,14 +1788,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();
@@ -1815,8 +1803,175 @@ 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 (signals.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);
+    }
+  };
+  signals.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 };
+      }
+      signals.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;
 
 exports.Component = Component;
+exports.For = For;
 exports.Fragment = Fragment;
 exports.Portal = Portal;
 exports.Suspense = Suspense;