@estjs/template 0.0.15-beta.8 → 0.0.15

package/dist/template.dev.esm.js

@@ -1,12 +1,6 @@
-import { isObject, startsWith, isHTMLElement, isString, error, isArray, camelCase, capitalize, warn, isSpecialBooleanAttr, isBooleanAttr, includeBooleanAttr, isSymbol, isUndefined, isPromise, isFunction, coerceArray, isFalsy, isNumber, isPrimitive, isNil, kebabCase } from '@estjs/shared';
-export { escapeHTML } from '@estjs/shared';
-import { effect, shallowReactive, isSignal, signal, isComputed } 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';
 
-/**
-* @estjs/template v0.0.15-beta.8
-* (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
-* @license MIT
-**/
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -43,9 +37,110 @@ 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;
-var scopeStack = [];
 function getActiveScope() {
   return activeScope;
 }
@@ -57,64 +152,48 @@ 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;
 }
 function runWithScope(scope, fn) {
   const prevScope = activeScope;
-  if (prevScope) {
-    scopeStack.push(prevScope);
-  }
   activeScope = scope;
   try {
     return fn();
   } finally {
-    activeScope = scopeStack.length > 0 ? scopeStack.pop() : prevScope;
+    activeScope = prevScope;
   }
 }
 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) {
-    const children = Array.from(scope.children);
-    for (const child of children) {
+    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();
@@ -124,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;
@@ -146,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
@@ -159,7 +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 DATA_IDX_REGEX = /^\d+-\d+$/;
+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) {
@@ -219,7 +306,7 @@ function normalizeKey(key) {
   }
   return String(key);
 }
-var NODE_KEY_SYMBOL = Symbol("essor.key");
+var NODE_KEY_SYMBOL = /* @__PURE__ */ Symbol("essor.key");
 function setNodeKey(node, key) {
   if (isComponent(node)) {
     return;
@@ -242,93 +329,14 @@ function getNodeKey(node) {
   return isComponent(node) ? node.key : node[NODE_KEY_SYMBOL];
 }
 
-// src/utils.ts
-function omitProps(target, keys) {
-  const excludeSet = new Set(keys);
-  return new Proxy(target, {
-    // Intercept property reads
-    get(obj, prop) {
-      if (excludeSet.has(prop)) {
-        return void 0;
-      }
-      return Reflect.get(obj, prop);
-    },
-    // Intercept property enumeration (for...in, Object.keys, etc.)
-    ownKeys(obj) {
-      return Reflect.ownKeys(obj).filter((key) => !excludeSet.has(key));
-    },
-    // Intercept property descriptor retrieval
-    getOwnPropertyDescriptor(obj, prop) {
-      if (excludeSet.has(prop)) {
-        return void 0;
-      }
-      return Reflect.getOwnPropertyDescriptor(obj, prop);
-    },
-    // Intercept the 'in' operator
-    has(obj, prop) {
-      if (excludeSet.has(prop)) {
-        return false;
-      }
-      return Reflect.has(obj, prop);
-    }
-  });
-}
-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);
-  }
-}
-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);
-  }
-}
-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);
-  }
-}
-function getFirstDOMNode(node) {
-  if (!node) {
-    return;
-  }
-  if (isComponent(node)) {
-    return node.firstChild;
+// src/utils/node.ts
+function normalizeNode(node) {
+  if (isHTMLElement(node)) {
+    return node;
   }
   if (isPrimitive(node)) {
-    return void 0;
+    const textContent = isFalsy(node) ? "" : String(node);
+    return document.createTextNode(textContent);
   }
   return node;
 }
@@ -359,39 +367,65 @@ function isSameNode(a, b) {
   }
   return true;
 }
-function normalizeNode(node) {
-  if (isHTMLElement(node)) {
-    return node;
-  }
-  if (isPrimitive(node)) {
-    const textContent = isFalsy(node) ? "" : String(node);
-    return document.createTextNode(textContent);
+function shallowCompare(a, b) {
+  if (a === b) return true;
+  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 node;
-}
-function isHtmlInputElement(val) {
-  return val instanceof HTMLInputElement;
+  return true;
 }
-function isHtmlSelectElement(val) {
-  return val instanceof HTMLSelectElement;
+function removeNode(node) {
+  if (!node) return;
+  if (isComponent(node)) {
+    node.destroy();
+    return;
+  }
+  const element = node;
+  if (element.parentElement) {
+    element.remove();
+  }
 }
-function isHtmlTextAreaElement(val) {
-  return val instanceof HTMLTextAreaElement;
+function insertNode(parent, child, before) {
+  if (!parent || !child) return;
+  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 isHtmLTextElement(val) {
-  return val instanceof Text;
+function replaceNode(parent, newNode, oldNode) {
+  if (!parent || !newNode || !oldNode || newNode === oldNode) return;
+  const beforeNode = isComponent(oldNode) ? oldNode.beforeNode : oldNode.nextSibling;
+  removeNode(oldNode);
+  insertNode(parent, newNode, beforeNode);
 }
-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;
+function getFirstDOMNode(node) {
+  if (!node) {
+    return;
   }
-  for (const key in b) {
-    if (!(key in a)) return false;
+  if (isComponent(node)) {
+    return node.firstChild;
   }
-  return true;
+  if (isPrimitive(node)) {
+    return void 0;
+  }
+  return node;
 }
 function transferKey(oldNode, newNode) {
   if (isComponent(oldNode) || isComponent(newNode)) {
@@ -431,7 +465,7 @@ function patch(parent, oldNode, newNode) {
       return oldNode;
     }
   }
-  if (isHtmLTextElement(oldNode) && isHtmLTextElement(newNode)) {
+  if (isTextNode(oldNode) && isTextNode(newNode)) {
     if (oldNode.textContent !== newNode.textContent) {
       oldNode.textContent = newNode.textContent;
     }
@@ -571,7 +605,6 @@ function patchKeyedChildren(parent, oldChildren, newChildren, anchor) {
 }
 function patchUnknownSequence(parent, oldChildren, newChildren, oldStartIdx, oldEndIdx, newStartIdx, newEndIdx, anchor) {
   const newLength = newEndIdx - newStartIdx + 1;
-  const newChildrenLen = newChildren.length;
   let keyToNewIndexMap;
   for (let i = newStartIdx; i <= newEndIdx; i++) {
     const key = getNodeKey(newChildren[i]);
@@ -621,21 +654,26 @@ function patchUnknownSequence(parent, oldChildren, newChildren, oldStartIdx, old
   }
   const increasingNewIndexSequence = moved ? getSequence(newIndexToOldIndexMap) : [];
   let j = increasingNewIndexSequence.length - 1;
+  let cachedAnchor = anchor;
   for (let i = newLength - 1; i >= 0; i--) {
     const nextIndex = newStartIdx + i;
     const nextNode = newChildren[nextIndex];
-    const nextAnchor = nextIndex + 1 < newChildrenLen ? getFirstDOMNode(newChildren[nextIndex + 1]) : anchor;
     if (newIndexToOldIndexMap[i] === 0) {
-      insertNode(parent, nextNode, nextAnchor);
+      insertNode(parent, nextNode, cachedAnchor);
+      cachedAnchor = getFirstDOMNode(nextNode) || cachedAnchor;
     } else if (moved) {
       if (j < 0 || i !== increasingNewIndexSequence[j]) {
         const domNode = getFirstDOMNode(nextNode);
         if (domNode && domNode.parentNode === parent) {
-          insertNode(parent, domNode, nextAnchor);
+          insertNode(parent, domNode, cachedAnchor);
         }
+        cachedAnchor = domNode || cachedAnchor;
       } else {
+        cachedAnchor = getFirstDOMNode(nextNode) || cachedAnchor;
         j--;
       }
+    } else {
+      cachedAnchor = getFirstDOMNode(nextNode) || cachedAnchor;
     }
   }
 }
@@ -695,72 +733,78 @@ function addEventListener(element, event, handler, options) {
 }
 function bindElement(node, key, defaultValue, setter) {
   if (isHtmlInputElement(node)) {
-    switch (node.type) {
-      case "checkbox":
-        addEventListener(node, "change", () => {
-          setter(Boolean(node.checked));
-        });
-        break;
-      case "radio":
-        addEventListener(node, "change", () => {
-          setter(node.checked ? node.value : "");
-        });
-        break;
-      case "file":
-        addEventListener(node, "change", () => {
-          setter(node.files);
-        });
-        break;
-      case "number":
-      case "range":
-        addEventListener(node, "input", () => {
-          setter(node.value || "");
-        });
-        break;
-      case "date":
-      case "datetime-local":
-      case "month":
-      case "time":
-      case "week":
-        addEventListener(node, "change", () => {
-          setter(node.value || "");
-        });
-        break;
-      default:
-        addEventListener(node, "input", () => {
-          setter(node.value);
-        });
-        break;
-    }
+    bindInputElement(node, setter);
   } else if (isHtmlSelectElement(node)) {
-    addEventListener(node, "change", () => {
-      if (node.multiple) {
-        const values = Array.from(node.options).filter((option) => option.selected).map((option) => option.value);
-        setter(values);
-      } else {
-        setter(node.value);
-      }
-    });
+    bindSelectElement(node, setter);
   } else if (isHtmlTextAreaElement(node)) {
     addEventListener(node, "input", () => {
       setter(node.value);
     });
   }
 }
+function bindInputElement(node, setter) {
+  switch (node.type) {
+    case "checkbox":
+      addEventListener(node, "change", () => {
+        setter(Boolean(node.checked));
+      });
+      break;
+    case "radio":
+      addEventListener(node, "change", () => {
+        setter(node.checked ? node.value : "");
+      });
+      break;
+    case "file":
+      addEventListener(node, "change", () => {
+        setter(node.files);
+      });
+      break;
+    case "number":
+    case "range":
+      addEventListener(node, "input", () => {
+        setter(node.value || "");
+      });
+      break;
+    case "date":
+    case "datetime-local":
+    case "month":
+    case "time":
+    case "week":
+      addEventListener(node, "change", () => {
+        setter(node.value || "");
+      });
+      break;
+    default:
+      addEventListener(node, "input", () => {
+        setter(node.value);
+      });
+      break;
+  }
+}
+function bindSelectElement(node, setter) {
+  addEventListener(node, "change", () => {
+    if (node.multiple) {
+      const values = Array.from(node.options).filter((option) => option.selected).map((option) => option.value);
+      setter(values);
+    } else {
+      setter(node.value);
+    }
+  });
+}
 function insert(parent, nodeFactory, before) {
   if (!parent) return;
-  const ownerScope = getActiveScope();
   let renderedNodes = [];
+  const currentScope = getActiveScope();
   const cleanup = effect(() => {
-    const executeUpdate = () => {
+    const run = () => {
       const rawNodes = isFunction(nodeFactory) ? nodeFactory() : nodeFactory;
-      const nodes = coerceArray(rawNodes).map((item) => isFunction(item) ? item() : item).flatMap((i) => i).map(normalizeNode);
+      const nodes = coerceArray(rawNodes).map((item) => isFunction(item) ? item() : item).flatMap(normalizeNode);
       renderedNodes = patchChildren(parent, renderedNodes, nodes, before);
     };
-    if (ownerScope && !ownerScope.isDestroyed) {
-      runWithScope(ownerScope, executeUpdate);
+    if (currentScope) {
+      runWithScope(currentScope, run);
     } else {
-      executeUpdate();
+      run();
     }
   });
   onCleanup(() => {
@@ -794,142 +838,53 @@ 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_);
+
+// src/component.ts
+var _a;
+_a = NORMAL_COMPONENT;
+var Component = class {
+  constructor(component, props = {}) {
+    this.component = component;
+    this.props = props;
+    // Component rendered nodes (supports arrays and fragments)
+    this.renderedNodes = [];
+    // Component scope (unified context management)
+    this.scope = null;
+    // Component parent node
+    this.parentNode = void 0;
+    // Component before node
+    this.beforeNode = void 0;
+    // Component props (reactive and snapshot)
+    this.reactiveProps = {};
+    this._propSnapshots = {};
+    // Component lifecycle state
+    this.state = 0 /* INITIAL */;
+    // Parent scope captured at construction time for correct hierarchy
+    this.parentScope = null;
+    // @ts-ignore
+    this[_a] = true;
+    this.key = props.key ? normalizeKey(props.key) : getComponentKey(component);
+    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);
       }
     }
-    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();
+  get isConnected() {
+    return this.state === 2 /* MOUNTED */;
   }
-  scope.onUpdate.add(hook);
-}
-function registerDestroyHook(hook) {
-  const scope = getActiveScope();
-  if (!scope) {
-    {
-      error("onDestroy() must be called within a scope");
+  get firstChild() {
+    for (const node of this.renderedNodes) {
+      const dom = getFirstDOMNode(node);
+      if (dom) return dom;
     }
-    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 */;
-var Component = class {
-  constructor(component, props = {}) {
-    this.component = component;
-    this.props = props;
-    // component rendered nodes (supports arrays and fragments)
-    this.renderedNodes = [];
-    // component scope (unified context management)
-    this.scope = null;
-    // component parent node
-    this.parentNode = void 0;
-    // component before node
-    this.beforeNode = void 0;
-    // component reactive props
-    this.reactiveProps = {};
-    // component state
-    this.state = 0 /* INITIAL */;
-    // parent scope captured at construction time
-    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.parentScope = getActiveScope();
-  }
-  get isConnected() {
-    return this.state === 2 /* MOUNTED */;
-  }
-  get firstChild() {
-    for (const node of this.renderedNodes) {
-      const dom = getFirstDOMNode(node);
-      if (dom) {
-        return dom;
-      }
-    }
-    return void 0;
+    return void 0;
   }
   mount(parentNode, beforeNode) {
-    var _a2;
+    var _a2, _b;
     this.parentNode = parentNode;
     this.beforeNode = beforeNode;
     this.state = 1 /* MOUNTING */;
@@ -940,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) {
@@ -976,76 +924,106 @@ var Component = class {
     this.renderedNodes = prevNode.renderedNodes;
     this.state = prevNode.state;
     this.reactiveProps = prevNode.reactiveProps;
-    if (this.props) {
-      for (const key in this.props) {
-        if (key === "key") continue;
-        const newValue = this.props[key];
-        const oldValue = this.reactiveProps[key];
-        if (Object.is(oldValue, newValue)) {
-          continue;
-        }
-        if (isObject(oldValue) && isObject(newValue)) {
-          if (shallowCompare(oldValue, newValue)) {
-            continue;
-          }
-        }
-        this.reactiveProps[key] = newValue;
-      }
-    }
+    this._propSnapshots = prevNode._propSnapshots;
+    this._updateReactiveProps(this.props);
     if (!this.isConnected && this.parentNode) {
       this.mount(this.parentNode, this.beforeNode);
+      return this;
     }
     if (this.scope) {
-      runWithScope(this.scope, () => {
-        this.applyProps(this.props || {});
-      });
+      setActiveScope(this.scope);
+      this.applyProps(this.props);
       triggerUpdateHooks(this.scope);
     }
     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;
+  /**
+   * Update reactive props by comparing with current values
+   */
+  _updateReactiveProps(props) {
+    for (const key in props) {
+      if (key === "key") continue;
+      const newValue = props[key];
+      const oldValue = this.reactiveProps[key];
+      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];
           }
-        });
-        if (this.scope) {
-          triggerUpdateHooks(this.scope);
         }
-      } catch (error10) {
-        this.renderedNodes = originalNodes;
-        throw error10;
       }
-    });
+    }
+  }
+  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));
+    }
+    return result;
+  }
+  forceUpdate() {
+    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);
+        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 (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
@@ -1055,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;
@@ -1072,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;
       }
@@ -1090,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)) {
@@ -1124,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;
 }
@@ -1161,55 +1136,61 @@ 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 = Symbol("_$EVENTS");
+var $EVENTS = /* @__PURE__ */ Symbol("_$EVENTS");
 function delegateEvents(eventNames, document2 = window.document) {
   const docWithEvents = document2;
   const eventSet = docWithEvents[$EVENTS] || (docWithEvents[$EVENTS] = /* @__PURE__ */ new Set());
@@ -1220,10 +1201,149 @@ function delegateEvents(eventNames, document2 = window.document) {
     }
   }
 }
+
+// src/utils/props.ts
+function omitProps(target, keys) {
+  const excludeSet = new Set(keys);
+  return new Proxy(target, {
+    // Intercept property reads
+    get(obj, prop) {
+      if (excludeSet.has(prop)) {
+        return void 0;
+      }
+      return Reflect.get(obj, prop);
+    },
+    // Intercept property enumeration (for...in, Object.keys, etc.)
+    ownKeys(obj) {
+      return Reflect.ownKeys(obj).filter((key) => !excludeSet.has(key));
+    },
+    // Intercept property descriptor retrieval
+    getOwnPropertyDescriptor(obj, prop) {
+      if (excludeSet.has(prop)) {
+        return void 0;
+      }
+      return Reflect.getOwnPropertyDescriptor(obj, prop);
+    },
+    // Intercept the 'in' operator
+    has(obj, prop) {
+      if (excludeSet.has(prop)) {
+        return false;
+      }
+      return Reflect.has(obj, prop);
+    }
+  });
+}
+
+// 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;
   }
+  if (isHydrating()) {
+    return;
+  }
   const normalizedNext = normalizeClass(next);
   const normalizedPrev = normalizeClass(prev);
   if (normalizedNext && normalizedPrev === normalizedNext) {
@@ -1238,25 +1358,7 @@ function patchClass(el, prev, next, isSVG = false) {
   }
 }
 function normalizeClass(value) {
-  if (value == null) {
-    return "";
-  }
-  if (typeof value === "string") {
-    return value.trim();
-  }
-  if (isArray(value)) {
-    return value.map(normalizeClass).filter(Boolean).join(" ");
-  }
-  if (isObject(value)) {
-    const result = [];
-    for (const key in value) {
-      if (value[key]) {
-        result.push(key);
-      }
-    }
-    return result.join(" ");
-  }
-  return String(value).trim();
+  return normalizeClassName(value);
 }
 var importantRE = /\s*!important$/;
 var prefixes = ["Webkit", "Moz", "ms"];
@@ -1264,6 +1366,9 @@ var prefixCache = {};
 function patchStyle(el, prev, next) {
   const style = el.style;
   const isCssString = isString(next);
+  if (isHydrating()) {
+    return;
+  }
   if (next && isCssString) {
     if (prev !== next) {
       style.cssText = next;
@@ -1318,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;
@@ -1362,6 +1467,9 @@ function patchAttr(el, key, prev, next) {
     });
     return;
   }
+  if (isHydrating()) {
+    return;
+  }
   const elementIsSVG = (el == null ? void 0 : el.namespaceURI) === SVG_NAMESPACE;
   const isXlink = elementIsSVG && key.startsWith("xlink:");
   const isXmlns = elementIsSVG && key.startsWith("xmlns:");
@@ -1370,7 +1478,7 @@ function patchAttr(el, key, prev, next) {
     return;
   }
   const lowerKey = key.toLowerCase();
-  if (/^on[a-z]+/.test(lowerKey)) {
+  if (lowerKey.length > 2 && lowerKey.charCodeAt(0) === 111 && lowerKey.charCodeAt(1) === 110) {
     return;
   }
   if (lowerKey === "innerhtml") {
@@ -1405,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;
@@ -1452,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];
@@ -1479,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;
@@ -1495,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);
           }
         });
@@ -1504,11 +1607,11 @@ 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 = Symbol("SuspenseContext");
+var SuspenseContext = /* @__PURE__ */ Symbol("SuspenseContext");
 function Suspense(props) {
   if (isUndefined(document)) {
     const fallback = props.fallback;
@@ -1592,9 +1695,9 @@ function Suspense(props) {
         if (pendingCount === 0) {
           showChildren();
         }
-      }).catch((error10) => {
+      }).catch((error8) => {
         {
-          warn("[Suspense] Resource failed:", error10);
+          warn("[Suspense] Resource failed:", error8);
         }
         if (!isMounted) return;
         pendingCount--;
@@ -1635,14 +1738,14 @@ 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);
   const loading = signal(true);
-  const error10 = signal(null);
+  const error8 = signal(null);
   const state = signal("pending");
   let fetchId = 0;
   let currentPromise = null;
@@ -1650,7 +1753,7 @@ function createResource(fetcher, options) {
     const currentFetchId = ++fetchId;
     loading.value = true;
     state.value = "pending";
-    error10.value = null;
+    error8.value = null;
     try {
       const promise = fetcher();
       currentPromise = promise.then(() => {
@@ -1664,7 +1767,7 @@ function createResource(fetcher, options) {
       }
     } catch (error_) {
       if (currentFetchId === fetchId) {
-        error10.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;
       }
@@ -1681,14 +1784,14 @@ function createResource(fetcher, options) {
     return value.value;
   });
   resource.loading = loading;
-  resource.error = error10;
+  resource.error = error8;
   resource.state = state;
   const actions = {
     mutate: (newValue) => {
       value.value = newValue;
       state.value = "ready";
       loading.value = false;
-      error10.value = null;
+      error8.value = null;
     },
     refetch: () => __async(null, null, function* () {
       yield fetch();
@@ -1696,243 +1799,173 @@ function createResource(fetcher, options) {
   };
   return [resource, actions];
 }
-var hydrationCounter = 0;
-function getHydrationKey() {
-  return `${hydrationCounter++}`;
-}
-function resetHydrationKey() {
-  hydrationCounter = 0;
-}
-function endHydration() {
-}
-function convertToString(content, isSvg = false) {
-  if (isNil(content)) {
-    return "";
-  }
-  if (isString(content)) {
-    return content;
-  }
-  if (isArray(content)) {
-    return content.map((item) => convertToString(item, isSvg)).join("");
-  }
-  if (isFunction(content)) {
-    return convertToString(content(), isSvg);
-  }
-  return String(content);
-}
-function addAttributes(htmlContent, hydrationId) {
-  const rootElementRegex = /^<([a-z]+)(\s*)([^>]*)>/i;
-  const indexAttributeRegex = /data-idx="(\d+)"/g;
-  const commentRegex = /<!--(.*?)-->/g;
-  const enhancedHtml = htmlContent.replace(rootElementRegex, `<$1$2$3 data-hk="${hydrationId}">`).replaceAll(indexAttributeRegex, `data-idx="${hydrationId}-$1"`).replaceAll(commentRegex, `<!--${hydrationId}-$1-->`);
-  return enhancedHtml;
-}
-
-// src/server/render.ts
-function renderToString(component, props = {}) {
-  if (!isFunction(component)) {
-    error("Component must be a function");
-    return "";
-  }
-  resetHydrationKey();
-  const result = component(props);
-  return convertToString(result);
-}
-function render(templates, hydrationKey, ...components) {
-  let content = "";
-  let index = 0;
-  for (const template2 of templates) {
-    content += template2;
-    if (index < components.length) {
-      const component = components[index++];
-      if (component) {
-        content += convertToString(component);
+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);
     }
-  }
-  const result = addAttributes(content, hydrationKey);
-  return result;
-}
-function createSSGComponent(component, props = {}) {
-  if (!isFunction(component)) {
-    error("create ssg component: Component is not a function");
-    return "";
-  }
-  const result = component(props);
-  return convertToString(result);
-}
-function normalizeStyle(styleValue) {
-  if (isArray(styleValue)) {
-    const normalizedStyleObject = {};
-    for (const styleItem of styleValue) {
-      const normalizedItem = isString(styleItem) ? parseStyleString(styleItem) : normalizeStyle(styleItem);
-      if (normalizedItem) {
-        for (const key in normalizedItem) {
-          normalizedStyleObject[key] = normalizedItem[key];
+    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: []
     }
-    return normalizedStyleObject;
-  }
-  if (isString(styleValue) || isObject(styleValue)) {
-    return styleValue;
-  }
-  return void 0;
-}
-var styleSeparatorRegex = /;(?![^(]*\))/g;
-var propertyValueSeparatorRegex = /:([\s\S]+)/;
-var styleCommentRegex = /\/\*[\s\S]*?\*\//g;
-function parseStyleString(cssText) {
-  const styleObject = {};
-  cssText.replaceAll(styleCommentRegex, "").split(styleSeparatorRegex).forEach((styleItem) => {
-    if (styleItem) {
-      const parts = styleItem.split(propertyValueSeparatorRegex);
-      if (parts.length > 1) {
-        styleObject[parts[0].trim()] = parts[1].trim();
+  );
+  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;
     }
-  });
-  return styleObject;
-}
-function styleObjectToString(styleValue) {
-  if (!styleValue) {
-    return "";
-  }
-  if (isString(styleValue)) {
-    return styleValue;
-  }
-  let cssText = "";
-  for (const propName in styleValue) {
-    const propValue = styleValue[propName];
-    if (isString(propValue) || isNumber(propValue)) {
-      const normalizedPropName = propName.startsWith("--") ? propName : kebabCase(propName);
-      cssText += `${normalizedPropName}:${propValue};`;
+    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;
     }
-  }
-  return cssText;
-}
-function normalizeClassName(classValue) {
-  let resultClassName = "";
-  if (isString(classValue)) {
-    resultClassName = classValue;
-  } else if (isArray(classValue)) {
-    for (const item of classValue) {
-      const normalizedItem = normalizeClassName(item);
-      if (normalizedItem) {
-        resultClassName += `${normalizedItem} `;
+    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]);
       }
     }
-  } else if (isObject(classValue)) {
-    for (const className in classValue) {
-      if (classValue[className]) {
-        resultClassName += `${className} `;
+    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);
       }
     }
-  }
-  return resultClassName.trim();
-}
-function setSSGAttr(attrName, attrValue, hydrationId) {
-  if (isSignal(attrValue) || isComputed(attrValue)) {
-    return setSSGAttr(attrName, attrValue.value);
-  }
-  if (!attrValue && attrValue !== 0) {
-    return "";
-  }
-  if (attrName === "style") {
-    const normalizedStyle = normalizeStyle(attrValue);
-    if (!normalizedStyle) {
-      return "";
+    for (const list of oldKeyMap.values()) {
+      for (const entry of list) {
+        toRemove.push(entry);
+      }
     }
-    if (isString(normalizedStyle)) {
-      return ` style="${normalizedStyle}"`;
+    for (const entry of toRemove) {
+      disposeItem(entry);
     }
-    return ` style="${styleObjectToString(normalizedStyle)}"`;
-  }
-  if (attrName === "class") {
-    const normalizedClassName = normalizeClassName(attrValue);
-    return normalizedClassName ? ` class="${normalizedClassName}"` : "";
-  }
-  if (attrName.startsWith("on")) {
-    return "";
-  }
-  if (attrValue === true) {
-    return ` ${attrName}`;
-  }
-  return ` ${attrName}="${attrValue}"`;
-}
-function getRenderedElement(temp) {
-  return () => {
-    const key = getHydrationKey();
-    const node = document.querySelector(`[data-hk="${key}"]`);
-    return node || template(temp)();
-  };
-}
-function mapSSRNodes(template2, idx) {
-  const hk = template2.dataset.hk;
-  if (!hk) {
-    return mapNodes(template2, idx);
-  }
-  const nodesList = [];
-  const elements = template2.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
-        };
-      })
-    );
+    for (let i = 0; i < newLen; i++) {
+      const node = newEntries[i].node;
+      parent.insertBefore(node, marker);
+    }
+    entries = newEntries;
   }
-  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
-      });
+  onCleanup(() => {
+    for (const entry of entries) {
+      disposeItem(entry);
     }
-    let child = node.firstChild;
-    while (child) {
-      walkNodes(child);
-      child = child.nextSibling;
+    if (fallbackNode && fallbackNode.parentNode) {
+      fallbackNode.parentNode.removeChild(fallbackNode);
     }
-  };
-  walkNodes(template2);
-  nodesList.push(...commentNodes);
-  const nodes = [template2];
-  idx.forEach((indexValue) => {
-    const node = nodesList.find((item) => item.idx === String(indexValue));
-    if (node) {
-      nodes.push(node.node);
+    if (marker.parentNode) {
+      marker.parentNode.removeChild(marker);
     }
   });
-  return nodes;
-}
-function hydrate(component, container, props = {}) {
-  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, props);
-    rootComponent.mount(rootElement);
-    endHydration();
-    return rootComponent;
-  } catch (error_) {
-    error("Hydration error:", error_);
-    return void 0;
-  }
+  return fragment;
 }
+For[FOR_COMPONENT] = true;
 
-export { Component, Fragment, Portal, Suspense, SuspenseContext, addEvent, addEventListener, bindElement, createApp, createComponent, createResource, createSSGComponent, delegateEvents, getHydrationKey, getRenderedElement, hydrate, inject, insert, isComponent, isFragment, isPortal, isSuspense, mapNodes, mapSSRNodes, normalizeClass, omitProps, onDestroy, onMount, onUpdate, patchAttr, patchClass, patchStyle, provide, render, renderToString, setSSGAttr, setStyle, 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