@estjs/template 0.0.15-beta.9 → 0.0.15

package/dist/template.dev.esm.js

@@ -1,5 +1,5 @@
-import { error, isHTMLElement, isPrimitive, isFalsy, isHtmlInputElement, isHtmlSelectElement, isHtmlTextAreaElement, isFunction, isObject, startsWith, isString, normalizeClassName, isArray, camelCase, capitalize, warn, isSpecialBooleanAttr, isBooleanAttr, includeBooleanAttr, isSymbol, isUndefined, isPromise, isNumber, coerceArray, 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;
@@ -37,6 +37,108 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
+var LIFECYCLE = {
+  mount: "mount",
+  destroy: "destroy",
+  update: "update"
+};
+function registerScopedHook(scope, listKey, hook) {
+  let hookList = scope[listKey];
+  if (!hookList) {
+    hookList = scope[listKey] = [];
+  }
+  if (!hookList.includes(hook)) {
+    hookList.push(hook);
+  }
+}
+function executeHooks(hooks, scopeId2, phase) {
+  const len = hooks.length;
+  if (len === 0) return;
+  let pending;
+  for (let i = 0; i < len; i++) {
+    try {
+      const result = hooks[i]();
+      if (isPromise(result)) {
+        const safePromise = result.catch((error_) => {
+          if (true) {
+            error(`Scope(${scopeId2}): Async ${phase} hook rejected:`, error_);
+          }
+        });
+        (pending != null ? pending : pending = []).push(safePromise);
+      }
+    } catch (error_) {
+      {
+        error(`Scope(${scopeId2}): Error in ${phase} hook:`, error_);
+      }
+    }
+  }
+  if (!pending) return;
+  return Promise.all(pending).then(() => void 0);
+}
+function onMount(hook) {
+  const scope = getActiveScope();
+  if (!scope) {
+    error("onMount() must be called within a scope");
+    return;
+  }
+  if (scope.isMounted) {
+    try {
+      const result = hook();
+      if (isPromise(result)) {
+        result.catch((error_) => {
+          if (true) error(`Scope(${scope.id}): Async ${LIFECYCLE.mount} hook rejected:`, error_);
+        });
+      }
+    } catch (error_) {
+      error(`Scope(${scope.id}): Error in ${LIFECYCLE.mount} hook:`, error_);
+    }
+    return;
+  }
+  registerScopedHook(scope, "onMount", hook);
+}
+function onUpdate(hook) {
+  const scope = getActiveScope();
+  if (!scope) {
+    error("onUpdate() must be called within a scope");
+    return;
+  }
+  registerScopedHook(scope, "onUpdate", hook);
+}
+function onDestroy(hook) {
+  const scope = getActiveScope();
+  if (!scope) {
+    error("onDestroy() must be called within a scope");
+    return;
+  }
+  registerScopedHook(scope, "onDestroy", hook);
+}
+function triggerMountHooks(scope) {
+  var _a2;
+  if (scope.isDestroyed || !((_a2 = scope.onMount) == null ? void 0 : _a2.length)) {
+    scope.isMounted = true;
+    return;
+  }
+  const mountHooks = scope.onMount;
+  const result = runWithScope(scope, () => executeHooks(mountHooks, scope.id, LIFECYCLE.mount));
+  mountHooks.length = 0;
+  scope.isMounted = true;
+  return result;
+}
+function triggerUpdateHooks(scope) {
+  var _a2;
+  if (scope.isDestroyed || !((_a2 = scope.onUpdate) == null ? void 0 : _a2.length)) return;
+  const updateHooks = scope.onUpdate;
+  const result = runWithScope(scope, () => executeHooks(updateHooks, scope.id, "update"));
+  updateHooks.length = 0;
+  return result;
+}
+function triggerDestroyHooks(scope) {
+  var _a2;
+  if (scope.isDestroyed || !((_a2 = scope.onDestroy) == null ? void 0 : _a2.length)) return;
+  return runWithScope(scope, () => executeHooks(scope.onDestroy, scope.id, "destroy"));
+}
+
+// src/scope.ts
 var activeScope = null;
 var scopeId = 0;
 function getActiveScope() {
@@ -50,25 +152,19 @@ function createScope(parent = activeScope) {
     id: ++scopeId,
     parent,
     children: null,
-    // Lazy initialized
     provides: null,
-    // Lazy initialized
     cleanup: null,
-    // Lazy initialized
     onMount: null,
-    // Lazy initialized
     onUpdate: null,
-    // Lazy initialized
     onDestroy: null,
-    // Lazy initialized
     isMounted: false,
     isDestroyed: false
   };
   if (parent) {
     if (!parent.children) {
-      parent.children = /* @__PURE__ */ new Set();
+      parent.children = [];
     }
-    parent.children.add(scope);
+    parent.children.push(scope);
   }
   return scope;
 }
@@ -82,31 +178,22 @@ function runWithScope(scope, fn) {
   }
 }
 function disposeScope(scope) {
-  var _a2, _b, _c, _d, _e;
+  var _a2, _b, _c;
   if (!scope || scope.isDestroyed) {
     return;
   }
+  const parentScope = scope.parent;
   if (scope.children) {
-    while (scope.children.size > 0) {
-      const child = scope.children.values().next().value;
-      if (child) {
-        disposeScope(child);
-      }
+    for (const child of scope.children) {
+      disposeScope(child);
     }
+    scope.children.length = 0;
   }
-  if (scope.onDestroy) {
-    for (const hook of scope.onDestroy) {
-      try {
-        hook();
-      } catch (error_) {
-        {
-          error(`Scope(${scope.id}): Error in destroy hook:`, error_);
-        }
-      }
-    }
-    scope.onDestroy.clear();
+  if ((_a2 = scope.onDestroy) == null ? void 0 : _a2.length) {
+    triggerDestroyHooks(scope);
+    scope.onDestroy.length = 0;
   }
-  if (scope.cleanup) {
+  if ((_b = scope.cleanup) == null ? void 0 : _b.length) {
     for (const fn of scope.cleanup) {
       try {
         fn();
@@ -116,18 +203,22 @@ function disposeScope(scope) {
         }
       }
     }
-    scope.cleanup.clear();
+    scope.cleanup.length = 0;
   }
-  if ((_a2 = scope.parent) == null ? void 0 : _a2.children) {
-    scope.parent.children.delete(scope);
+  if (parentScope == null ? void 0 : parentScope.children) {
+    const idx = parentScope.children.indexOf(scope);
+    if (idx !== -1) {
+      parentScope.children.splice(idx, 1);
+    }
   }
-  (_b = scope.children) == null ? void 0 : _b.clear();
   (_c = scope.provides) == null ? void 0 : _c.clear();
-  (_d = scope.onMount) == null ? void 0 : _d.clear();
-  (_e = scope.onUpdate) == null ? void 0 : _e.clear();
-  setActiveScope(scope.parent);
+  if (scope.onMount) scope.onMount.length = 0;
+  if (scope.onUpdate) scope.onUpdate.length = 0;
   scope.parent = null;
   scope.isDestroyed = true;
+  if (activeScope === scope) {
+    activeScope = parentScope;
+  }
 }
 function onCleanup(fn) {
   const scope = activeScope;
@@ -138,9 +229,9 @@ function onCleanup(fn) {
     return;
   }
   if (!scope.cleanup) {
-    scope.cleanup = /* @__PURE__ */ new Set();
+    scope.cleanup = [];
   }
-  scope.cleanup.add(fn);
+  scope.cleanup.push(fn);
 }
 
 // src/constants.ts
@@ -151,6 +242,11 @@ var KEY_PROP = "key";
 var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 var XLINK_NAMESPACE = "http://www.w3.org/2000/xlink";
 var XMLNS_NAMESPACE = "http://www.w3.org/2000/xmlns/";
+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) {
@@ -273,62 +369,51 @@ function isSameNode(a, b) {
 }
 function shallowCompare(a, b) {
   if (a === b) return true;
-  if (!a || !b) return false;
-  if (Array.isArray(a) !== Array.isArray(b)) return false;
-  for (const key in a) {
-    if (a[key] !== b[key]) return false;
-  }
-  for (const key in b) {
-    if (!(key in a)) return false;
+  if (isNull(a) || isNull(b)) return false;
+  if (!isObject(a) || !isObject(b)) return false;
+  if (isArray(a) !== isArray(b)) return false;
+  const aRecord = a;
+  const bRecord = b;
+  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) {
@@ -639,18 +724,6 @@ function getSequence(arr) {
   return result;
 }
 
-// src/utils/shared.ts
-var isHydrationActive = false;
-function startHydration() {
-  isHydrationActive = true;
-}
-function endHydration() {
-  isHydrationActive = false;
-}
-function isHydrating() {
-  return isHydrationActive;
-}
-
 // src/binding.ts
 function addEventListener(element, event, handler, options) {
   element.addEventListener(event, handler, options);
@@ -718,28 +791,21 @@ function bindSelectElement(node, setter) {
     }
   });
 }
-var isFirstRun = true;
-function executeReactiveUpdate(ownerScope, parent, nodeFactory, before, renderedNodes) {
-  const executeUpdate = () => {
-    const rawNodes = isFunction(nodeFactory) ? nodeFactory() : nodeFactory;
-    const nodes = coerceArray(rawNodes).map((item) => isFunction(item) ? item() : item).flatMap((i) => i).map(normalizeNode);
-    if (isFirstRun && isHydrating()) {
-      isFirstRun = false;
-      return renderedNodes;
-    }
-    return patchChildren(parent, renderedNodes, nodes, before);
-  };
-  if (ownerScope && !ownerScope.isDestroyed) {
-    return runWithScope(ownerScope, executeUpdate);
-  }
-  return executeUpdate();
-}
 function insert(parent, nodeFactory, before) {
   if (!parent) return;
-  const ownerScope = getActiveScope();
   let renderedNodes = [];
+  const currentScope = getActiveScope();
   const cleanup = effect(() => {
-    renderedNodes = executeReactiveUpdate(ownerScope, parent, nodeFactory, before, renderedNodes);
+    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();
@@ -772,127 +838,40 @@ function mapNodes(template2, indexes) {
   walk(template2);
   return tree;
 }
-function registerMountHook(hook) {
-  const scope = getActiveScope();
-  if (!scope) {
-    {
-      error("onMount() must be called within a scope");
-    }
-    return;
-  }
-  if (scope.isMounted) {
-    try {
-      hook();
-    } catch (error_) {
-      {
-        error(`Scope(${scope.id}): Error in mount hook:`, error_);
-      }
-    }
-    return;
-  }
-  if (!scope.onMount) {
-    scope.onMount = /* @__PURE__ */ new Set();
-  }
-  scope.onMount.add(hook);
-}
-function registerUpdateHook(hook) {
-  const scope = getActiveScope();
-  if (!scope) {
-    {
-      error("onUpdate() must be called within a scope");
-    }
-    return;
-  }
-  if (!scope.onUpdate) {
-    scope.onUpdate = /* @__PURE__ */ new Set();
-  }
-  scope.onUpdate.add(hook);
-}
-function registerDestroyHook(hook) {
-  const scope = getActiveScope();
-  if (!scope) {
-    {
-      error("onDestroy() must be called within a scope");
-    }
-    return;
-  }
-  if (!scope.onDestroy) {
-    scope.onDestroy = /* @__PURE__ */ new Set();
-  }
-  scope.onDestroy.add(hook);
-}
-function triggerMountHooks(scope) {
-  if (!scope || scope.isDestroyed || scope.isMounted) {
-    return;
-  }
-  scope.isMounted = true;
-  if (scope.onMount) {
-    runWithScope(scope, () => {
-      for (const hook of scope.onMount) {
-        try {
-          hook();
-        } catch (error_) {
-          if (true) {
-            error(`Scope(${scope.id}): Error in mount hook:`, error_);
-          }
-        }
-      }
-    });
-  }
-}
-function triggerUpdateHooks(scope) {
-  if (!scope || scope.isDestroyed) {
-    return;
-  }
-  if (scope.onUpdate) {
-    for (const hook of scope.onUpdate) {
-      try {
-        hook();
-      } catch (error_) {
-        {
-          error(`Scope(${scope.id}): Error in update hook:`, error_);
-        }
-      }
-    }
-  }
-}
-function onMount(hook) {
-  registerMountHook(hook);
-}
-function onDestroy(hook) {
-  registerDestroyHook(hook);
-}
-function onUpdate(hook) {
-  registerUpdateHook(hook);
-}
 
 // src/component.ts
 var _a;
-_a = "normal" /* NORMAL */;
+_a = NORMAL_COMPONENT;
 var Component = class {
   constructor(component, props = {}) {
     this.component = component;
     this.props = props;
-    // component rendered nodes (supports arrays and fragments)
+    // Component rendered nodes (supports arrays and fragments)
     this.renderedNodes = [];
-    // component scope (unified context management)
+    // Component scope (unified context management)
     this.scope = null;
-    // component parent node
+    // Component parent node
     this.parentNode = void 0;
-    // component before node
+    // Component before node
     this.beforeNode = void 0;
-    // component reactive props
+    // Component props (reactive and snapshot)
     this.reactiveProps = {};
-    // component state
+    this._propSnapshots = {};
+    // Component lifecycle state
     this.state = 0 /* INITIAL */;
-    // parent scope captured at construction time
+    // Parent scope captured at construction time for correct hierarchy
     this.parentScope = null;
-    // component type
     // @ts-ignore
     this[_a] = true;
     this.key = props.key ? normalizeKey(props.key) : getComponentKey(component);
-    this.reactiveProps = shallowReactive(__spreadValues({}, props || {}));
+    this.reactiveProps = shallowReactive(__spreadValues({}, props));
     this.parentScope = getActiveScope();
+    for (const key in props) {
+      const val = props[key];
+      if (isObject(val)) {
+        this._propSnapshots[key] = isArray(val) ? [...val] : __spreadValues({}, val);
+      }
+    }
   }
   get isConnected() {
     return this.state === 2 /* MOUNTED */;
@@ -900,14 +879,12 @@ var Component = class {
   get firstChild() {
     for (const node of this.renderedNodes) {
       const dom = getFirstDOMNode(node);
-      if (dom) {
-        return dom;
-      }
+      if (dom) return dom;
     }
     return void 0;
   }
   mount(parentNode, beforeNode) {
-    var _a2;
+    var _a2, _b;
     this.parentNode = parentNode;
     this.beforeNode = beforeNode;
     this.state = 1 /* MOUNTING */;
@@ -918,28 +895,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;
-      }
-      const nodes = (_a3 = insert(parentNode, result, beforeNode)) != null ? _a3 : [];
-      return nodes;
-    });
+    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) {
@@ -954,91 +924,106 @@ var Component = class {
     this.renderedNodes = prevNode.renderedNodes;
     this.state = prevNode.state;
     this.reactiveProps = prevNode.reactiveProps;
-    if (!this.props || Object.keys(this.props).length === 0) {
-      if (!this.isConnected && this.parentNode) {
-        this.mount(this.parentNode, this.beforeNode);
-        return this;
-      }
-      if (this.scope) {
-        runWithScope(this.scope, () => {
-          this.applyProps(this.props || {});
-        });
-        triggerUpdateHooks(this.scope);
-      }
+    this._propSnapshots = prevNode._propSnapshots;
+    this._updateReactiveProps(this.props);
+    if (!this.isConnected && this.parentNode) {
+      this.mount(this.parentNode, this.beforeNode);
       return this;
     }
-    let hasChanges = false;
-    for (const key in this.props) {
+    if (this.scope) {
+      setActiveScope(this.scope);
+      this.applyProps(this.props);
+      triggerUpdateHooks(this.scope);
+    }
+    return this;
+  }
+  /**
+   * Update reactive props by comparing with current values
+   */
+  _updateReactiveProps(props) {
+    for (const key in props) {
       if (key === "key") continue;
-      const newValue = this.props[key];
+      const newValue = props[key];
       const oldValue = this.reactiveProps[key];
-      if (Object.is(oldValue, newValue)) {
-        continue;
-      }
-      if (isObject(oldValue) && isObject(newValue)) {
-        if (shallowCompare(oldValue, newValue)) {
-          continue;
+      if (newValue === oldValue && !this._propSnapshots[key]) continue;
+      const isNewValueObject = isObject(newValue);
+      if (isNewValueObject) {
+        const snapshot = this._propSnapshots[key];
+        if (snapshot && shallowCompare(newValue, snapshot)) continue;
+        const newSnapshot = isArray(newValue) ? [...newValue] : __spreadValues({}, newValue);
+        this.reactiveProps[key] = newSnapshot;
+        this._propSnapshots[key] = newSnapshot;
+      } else {
+        if (hasChanged(newValue, oldValue)) {
+          this.reactiveProps[key] = newValue;
+          if (this._propSnapshots[key]) {
+            delete this._propSnapshots[key];
+          }
         }
       }
-      this.reactiveProps[key] = newValue;
-      hasChanges = true;
     }
-    if (!this.isConnected && this.parentNode) {
-      this.mount(this.parentNode, this.beforeNode);
+  }
+  unwrapRenderResult(result) {
+    if (isFunction(result)) {
+      result = result(this.reactiveProps);
+    }
+    if (isSignal(result) || isComputed(result)) {
+      result = result.value;
+    }
+    if (isComponent(result)) {
+      result = result.mount(this.parentNode, this.beforeNode);
+    }
+    if (isPromise(result)) {
+      result = result.then((r) => this.unwrapRenderResult(r));
     }
-    if (this.scope && (hasChanges || !this.isConnected)) {
+    return result;
+  }
+  forceUpdate() {
+    if (this.state === 5 /* DESTROYED */ || !this.parentNode || !this.scope) {
+      return;
+    }
+    const originalNodes = [...this.renderedNodes];
+    try {
       runWithScope(this.scope, () => {
-        this.applyProps(this.props || {});
+        let result = this.component(this.reactiveProps);
+        if (isFunction(result)) {
+          result = result(this.reactiveProps);
+        }
+        if (isSignal(result) || isComputed(result)) {
+          result = result.value;
+        }
+        const newNodes = coerceArray(result);
+        const anchor = this._getAnchorNode();
+        if (!this.parentNode) return;
+        for (const node of this.renderedNodes) {
+          removeNode(node);
+        }
+        for (const node of newNodes) {
+          insertNode(this.parentNode, node, anchor);
+        }
+        this.renderedNodes = newNodes;
       });
-      if (hasChanges) {
+      if (this.scope) {
         triggerUpdateHooks(this.scope);
       }
+    } catch (error8) {
+      this.renderedNodes = originalNodes;
+      throw error8;
     }
-    return this;
   }
-  forceUpdate() {
-    return __async(this, null, function* () {
-      yield Promise.resolve();
-      if (this.state === 5 /* DESTROYED */ || !this.parentNode || !this.scope) {
-        return;
-      }
-      const originalNodes = [...this.renderedNodes];
-      try {
-        runWithScope(this.scope, () => {
-          let result = this.component(this.reactiveProps);
-          if (isFunction(result)) {
-            result = result(this.reactiveProps);
-          }
-          if (isSignal(result) || isComputed(result)) {
-            result = result.value;
-          }
-          const newNodes = coerceArray(result);
-          if (this.parentNode) {
-            let anchor = this.beforeNode;
-            if (!anchor && this.renderedNodes.length > 0) {
-              const lastNode = this.renderedNodes[this.renderedNodes.length - 1];
-              const lastDom = getFirstDOMNode(lastNode);
-              if (lastDom) {
-                anchor = lastDom.nextSibling;
-              }
-            }
-            for (const node of this.renderedNodes) {
-              removeNode(node);
-            }
-            for (const node of newNodes) {
-              insertNode(this.parentNode, node, anchor);
-            }
-            this.renderedNodes = newNodes;
-          }
-        });
-        if (this.scope) {
-          triggerUpdateHooks(this.scope);
-        }
-      } catch (error8) {
-        this.renderedNodes = originalNodes;
-        throw error8;
+  /**
+   * Get anchor node for insertion
+   */
+  _getAnchorNode() {
+    if (this.beforeNode) return this.beforeNode;
+    if (this.renderedNodes.length > 0) {
+      const lastNode = this.renderedNodes[this.renderedNodes.length - 1];
+      const lastDom = getFirstDOMNode(lastNode);
+      if (lastDom) {
+        return lastDom.nextSibling;
       }
-    });
+    }
+    return void 0;
   }
   /**
    * Destroy component
@@ -1048,14 +1033,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;
@@ -1065,16 +1050,13 @@ var Component = class {
     this.state = 5 /* DESTROYED */;
   }
   applyProps(props) {
-    if (!props) {
-      return;
-    }
+    if (!props) return;
     const firstElement = this.firstChild;
     for (const [propName, propValue] of Object.entries(props)) {
-      if (startsWith(propName, EVENT_PREFIX) && firstElement) {
-        const eventName = propName.slice(2).toLowerCase();
-        if (isHTMLElement(firstElement)) {
-          addEventListener(firstElement, eventName, propValue);
-        }
+      if (startsWith(propName, EVENT_PREFIX)) {
+        if (!firstElement || !isHTMLElement(firstElement)) return;
+        const eventName = propName.slice(EVENT_PREFIX.length).toLowerCase();
+        addEventListener(firstElement, eventName, propValue);
       } else if (propName === REF_KEY && isSignal(propValue)) {
         propValue.value = firstElement;
       }
@@ -1083,7 +1065,7 @@ var Component = class {
   }
 };
 function isComponent(node) {
-  return !!node && !!node["normal" /* NORMAL */];
+  return !!node && !!node[NORMAL_COMPONENT];
 }
 function createComponent(componentFn, props) {
   if (isComponent(componentFn)) {
@@ -1117,7 +1099,7 @@ function createApp(component, target) {
     error(`Target element is not empty, it will be delete: ${target}`);
     container.innerHTML = "";
   }
-  const rootComponent = createComponent(component);
+  const rootComponent = isComponent(component) ? component : createComponent(component);
   rootComponent.mount(container);
   return rootComponent;
 }
@@ -1154,53 +1136,59 @@ function inject(key, defaultValue) {
   }
   return defaultValue;
 }
-function eventHandler(e) {
-  let node = e.target;
-  const key = `${e.type}`;
-  const oriTarget = e.target;
-  const oriCurrentTarget = e.currentTarget;
-  const reTarget = (value) => Object.defineProperty(e, "target", {
+function reTarget(event, value) {
+  Object.defineProperty(event, "target", {
     configurable: true,
     value
   });
-  const handleNode = () => {
-    const handler = node[`_$${key}`];
-    if (handler && isFunction(handler) && !node.disabled) {
-      const data = node[`${key}Data`];
-      data ? handler.call(node, data, e) : handler.call(node, e);
-      if (e.cancelBubble) return false;
-    }
-    if (node.host && !isString(node.host) && !node.host._$host && isFunction(node.contains) && node.contains(e.target)) {
-      reTarget(node.host);
-    }
-    return true;
-  };
-  const walkUpTree = () => {
-    while (handleNode() && (node = node._$host || node.parentNode || node.host)) ;
-  };
-  Object.defineProperty(e, "currentTarget", {
+}
+function handleNodeEvent(node, event, key) {
+  const handler = node[`_$${key}`];
+  if (handler && isFunction(handler) && !node.disabled) {
+    const data = node[`${key}Data`];
+    data ? handler.call(node, data, event) : handler.call(node, event);
+    if (event.cancelBubble) return false;
+  }
+  if (node.host && !isString(node.host) && !node.host._$host && isFunction(node.contains) && node.contains(event.target)) {
+    reTarget(event, node.host);
+  }
+  return true;
+}
+function walkUpTree(startNode, event, key) {
+  let node = startNode;
+  while (handleNodeEvent(node, event, key) && (node = node._$host || node.parentNode || node.host)) ;
+  return node;
+}
+function eventHandler(event) {
+  let node = event.target;
+  const key = `${event.type}`;
+  const oriTarget = event.target;
+  const oriCurrentTarget = event.currentTarget;
+  Object.defineProperty(event, "currentTarget", {
     configurable: true,
     get() {
       return node || document;
     }
   });
-  if (e.composedPath) {
-    const path = e.composedPath();
-    reTarget(path[0]);
+  if (event.composedPath) {
+    const path = event.composedPath();
+    reTarget(event, path[0]);
     for (let i = 0; i < path.length - 2; i++) {
       node = path[i];
-      if (!handleNode()) break;
+      if (!handleNodeEvent(node, event, key)) break;
       if (node._$host) {
         node = node._$host;
-        walkUpTree();
+        node = walkUpTree(node, event, key);
         break;
       }
       if (node.parentNode === oriCurrentTarget) {
         break;
       }
     }
-  } else walkUpTree();
-  reTarget(oriTarget);
+  } else {
+    node = walkUpTree(node, event, key);
+  }
+  reTarget(event, oriTarget);
 }
 var $EVENTS = /* @__PURE__ */ Symbol("_$EVENTS");
 function delegateEvents(eventNames, document2 = window.document) {
@@ -1245,6 +1233,110 @@ function omitProps(target, keys) {
     }
   });
 }
+
+// src/hydration/shared.ts
+var isHydrationActive = false;
+function startHydration() {
+  isHydrationActive = true;
+}
+function endHydration() {
+  isHydrationActive = false;
+}
+function isHydrating() {
+  return isHydrationActive;
+}
+var hydrationCounter = 0;
+function getHydrationKey() {
+  return `${hydrationCounter++}`;
+}
+function resetHydrationKey() {
+  hydrationCounter = 0;
+}
+
+// src/hydration/hydration.ts
+var DATA_IDX_REGEX = /^\d+-\d+$/;
+function getRenderedElement(temp) {
+  return () => {
+    if (!isBrowser()) {
+      return null;
+    }
+    const key = getHydrationKey();
+    const node = document.querySelector(`[data-hk="${key}"]`);
+    if (node) {
+      return node;
+    }
+    return template(temp)();
+  };
+}
+function mapSSRNodes(templateEl, idx) {
+  const hk = templateEl.dataset.hk;
+  if (!hk) {
+    return mapNodes(templateEl, idx);
+  }
+  const nodesList = [];
+  const elements = templateEl.querySelectorAll(`[data-idx^="${hk}"]`);
+  if (elements.length > 0) {
+    nodesList.push(
+      ...Array.from(elements).filter((item) => {
+        const idxAttr = item.dataset.idx;
+        return idxAttr !== null && DATA_IDX_REGEX.test(idxAttr);
+      }).map((item) => {
+        const idxAttr = item.dataset.idx || "";
+        const [hkPart, idxPart] = idxAttr.split("-");
+        return {
+          hk: hkPart,
+          idx: idxPart,
+          node: item
+        };
+      })
+    );
+  }
+  const commentNodes = [];
+  const walkNodes = (node) => {
+    if (node.nodeType === Node.COMMENT_NODE && node.textContent && DATA_IDX_REGEX.test(node.textContent)) {
+      const [hkPart, idxPart] = node.textContent.split("-");
+      commentNodes.push({
+        hk: hkPart,
+        idx: idxPart,
+        node
+      });
+    }
+    let child = node.firstChild;
+    while (child) {
+      walkNodes(child);
+      child = child.nextSibling;
+    }
+  };
+  walkNodes(templateEl);
+  nodesList.push(...commentNodes);
+  const nodes = [templateEl];
+  idx.forEach((indexValue) => {
+    const node = nodesList.find((item) => item.idx === String(indexValue));
+    if (node) {
+      nodes.push(node.node);
+    }
+  });
+  return nodes;
+}
+function hydrate(component, container) {
+  startHydration();
+  resetHydrationKey();
+  try {
+    const rootElement = isString(container) ? document.querySelector(container) : container;
+    if (!rootElement) {
+      error("Hydration error: Root element not found");
+      return void 0;
+    }
+    const rootComponent = createComponent(component);
+    rootComponent.mount(rootElement);
+    endHydration();
+    return rootComponent;
+  } catch (error_) {
+    error("Hydration error:", error_);
+    endHydration();
+    return void 0;
+  }
+}
 function patchClass(el, prev, next, isSVG = false) {
   if (prev === next) {
     return;
@@ -1331,7 +1423,7 @@ function setStyle(style, name, val) {
     return;
   }
   const prefixed = autoPrefix(style, name);
-  if (typeof val === "string" && importantRE.test(val)) {
+  if (isString(val) && importantRE.test(val)) {
     style.setProperty(camelCase(prefixed), val.replace(importantRE, ""), "important");
   } else {
     style[prefixed] = val;
@@ -1421,7 +1513,7 @@ function patchAttr(el, key, prev, next) {
   }
   const attrValue = isSymbol(next) ? String(next) : next;
   const isUrlAttr = lowerKey === "href" || lowerKey === "src" || lowerKey === "xlink:href";
-  if (isUrlAttr && typeof attrValue === "string") {
+  if (isUrlAttr && isString(attrValue)) {
     const v = attrValue.trim().toLowerCase();
     if (v.startsWith("javascript:") || v.startsWith("data:")) {
       return;
@@ -1468,26 +1560,21 @@ function Fragment(props) {
       error("Fragment component requires props");
       return null;
     }
-    if (!props.children) {
-      error("Fragment component requires children");
-      return null;
-    }
   }
-  return props == null ? void 0 : props.children;
+  if (!(props == null ? void 0 : props.children)) {
+    error("Fragment component requires children");
+    return null;
+  }
+  const { children } = props;
+  return children;
 }
-Fragment["fragment" /* FRAGMENT */] = true;
+Fragment[FRAGMENT_COMPONENT] = true;
 function isFragment(node) {
-  return !!node && !!node["fragment" /* FRAGMENT */];
+  return !!node && !!node[FRAGMENT_COMPONENT];
 }
 function Portal(props) {
-  if (typeof document === "undefined") {
-    const children2 = props.children;
-    if (!children2) return "";
-    const childArray = isArray(children2) ? children2 : [children2];
-    return childArray.map((child) => String(child || "")).join("");
-  }
   const placeholder = document.createComment("portal");
-  placeholder["portal" /* PORTAL */] = true;
+  placeholder[PORTAL_COMPONENT] = true;
   const children = props.children;
   if (children) {
     const childArray = isArray(children) ? children : [children];
@@ -1495,7 +1582,7 @@ function Portal(props) {
     onMount(() => {
       const targetElement = isString(props.target) ? document.querySelector(props.target) : props.target;
       if (!targetElement) {
-        {
+        if (true) {
           warn(`[Portal] Target element not found: ${props.target}`);
         }
         return;
@@ -1511,7 +1598,7 @@ function Portal(props) {
       });
       onCleanup(() => {
         nodes.forEach((node) => {
-          if (typeof node !== "string" && node.parentNode === targetElement) {
+          if (!isString(node) && node.parentNode === targetElement) {
             targetElement.removeChild(node);
           }
         });
@@ -1520,9 +1607,9 @@ function Portal(props) {
   }
   return placeholder;
 }
-Portal["portal" /* PORTAL */] = true;
+Portal[PORTAL_COMPONENT] = true;
 function isPortal(node) {
-  return !!node && !!node["portal" /* PORTAL */];
+  return !!node && !!node[PORTAL_COMPONENT];
 }
 var SuspenseContext = /* @__PURE__ */ Symbol("SuspenseContext");
 function Suspense(props) {
@@ -1651,9 +1738,9 @@ function Suspense(props) {
   });
   return container;
 }
-Suspense["suspense" /* SUSPENSE */] = true;
+Suspense[SUSPENSE_COMPONENT] = true;
 function isSuspense(node) {
-  return !!node && !!node["suspense" /* SUSPENSE */];
+  return !!node && !!node[SUSPENSE_COMPONENT];
 }
 function createResource(fetcher, options) {
   const value = signal(options == null ? void 0 : options.initialValue);
@@ -1712,7 +1799,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, inject, insert, insertNode, isComponent, isFragment, isHydrating, isPortal, isSameNode, isSuspense, mapNodes, normalizeClass, normalizeNode, omitProps, onCleanup, onDestroy, onMount, onUpdate, patchAttr, patchClass, patchStyle, provide, removeNode, replaceNode, 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