@estjs/template 0.0.14 → 0.0.15-beta.5

package/dist/template.dev.esm.js

@@ -1,933 +1,1939 @@
-import { isString, isFunction, isSymbol, isArray, escape, hasChanged, startsWith, capitalize, isNil, isHTMLElement, coerceArray, isFalsy, kebabCase } from '@estjs/shared';
-import { isSignal, shallowReactive, useReactive, useEffect, shallowSignal, isComputed } from '@estjs/signal';
+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';
 
 /**
-* @estjs/template v0.0.14
+* @estjs/template v0.0.15-beta.5
 * (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
 * @license MIT
 **/
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+var activeScope = null;
+var scopeId = 0;
+var scopeStack = [];
+function getActiveScope() {
+  return activeScope;
+}
+function setActiveScope(scope) {
+  activeScope = scope;
+}
+function createScope(parent = activeScope) {
+  const scope = {
+    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.add(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;
+  }
+}
+function disposeScope(scope) {
+  var _a2, _b, _c, _d, _e;
+  if (!scope || scope.isDestroyed) {
+    return;
+  }
+  if (scope.children) {
+    const children = Array.from(scope.children);
+    for (const child of children) {
+      disposeScope(child);
+    }
+  }
+  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 (scope.cleanup) {
+    for (const fn of scope.cleanup) {
+      try {
+        fn();
+      } catch (error_) {
+        {
+          error(`Scope(${scope.id}): Error in cleanup:`, error_);
+        }
+      }
+    }
+    scope.cleanup.clear();
+  }
+  if ((_a2 = scope.parent) == null ? void 0 : _a2.children) {
+    scope.parent.children.delete(scope);
+  }
+  (_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);
+  scope.parent = null;
+  scope.isDestroyed = true;
+}
+function onCleanup(fn) {
+  const scope = activeScope;
+  if (!scope) {
+    {
+      error("onCleanup() must be called within a scope");
+    }
+    return;
+  }
+  if (!scope.cleanup) {
+    scope.cleanup = /* @__PURE__ */ new Set();
+  }
+  scope.cleanup.add(fn);
+}
 
-
-// src/sharedConfig.ts
+// src/constants.ts
 var EVENT_PREFIX = "on";
-var UPDATE_PREFIX = "update";
-var CHILDREN_PROP = "children";
-var EMPTY_TEMPLATE = "";
-var FRAGMENT_PROP_KEY = "0";
-var SINGLE_PROP_KEY = "1";
+var SPREAD_NAME = "_$spread$";
 var REF_KEY = "ref";
-var PLACEHOLDER = " __PLACEHOLDER__ ";
-var RenderContext = class {
-  constructor() {
-    this.renderMode = 0 /* CLIENT */;
-  }
-  get isSSG() {
-    return this.renderMode === 1 /* SSG */;
+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 MAX_KEY_LENGTH = 1e3;
+var componentKeyPrefixCache = /* @__PURE__ */ new WeakMap();
+function getComponentKey(type) {
+  let prefix = componentKeyPrefixCache.get(type);
+  if (!prefix) {
+    const name = type.name || "anonymous";
+    const hash = simpleHash(type.toString()).toString(36);
+    prefix = `${name}_${hash}`;
+    componentKeyPrefixCache.set(type, prefix);
+  }
+  return prefix;
+}
+function simpleHash(str) {
+  let hash = 0;
+  const len = str.length < 100 ? str.length : 100;
+  for (let i = 0; i < len; i++) {
+    hash = Math.trunc((hash << 5) - hash + str.charCodeAt(i));
   }
-  get isSSR() {
-    return this.renderMode === 2 /* SSR */;
+  return hash < 0 ? -hash : hash;
+}
+var symbolIdCounter = 0;
+function normalizeKey(key) {
+  if (isFalsy(key)) {
+    return void 0;
+  }
+  if (isString(key)) {
+    if (key.length <= MAX_KEY_LENGTH) {
+      return key;
+    }
+    {
+      warn(
+        `[Key System] Key length exceeds ${MAX_KEY_LENGTH} characters. Consider using a shorter identifier.`
+      );
+    }
+    return `${key.slice(0, MAX_KEY_LENGTH - 10)}_${simpleHash(key).toString(36)}`;
   }
-  get isClient() {
-    return this.renderMode === 0 /* CLIENT */;
+  if (isNumber(key)) {
+    {
+      if (key !== key) {
+        warn("[Key System] NaN cannot be used as a key");
+        return void 0;
+      }
+      if (!Number.isFinite(key)) {
+        warn("[Key System] Infinity cannot be used as a key");
+        return void 0;
+      }
+    }
+    return String(key);
   }
-  setSSR() {
-    this.renderMode = 2 /* SSR */;
+  if (isSymbol(key)) {
+    const globalKey = Symbol.keyFor(key);
+    if (globalKey) {
+      return `_s.${globalKey}`;
+    }
+    const desc = key.description;
+    return desc ? `_s.${desc}` : `${symbolIdCounter++}`;
   }
-  setSSG() {
-    this.renderMode = 1 /* SSG */;
+  return String(key);
+}
+var NODE_KEY_SYMBOL = Symbol("essor.key");
+function setNodeKey(node, key) {
+  if (isComponent(node)) {
+    return;
+  }
+  if (!node || node.nodeType === Node.DOCUMENT_NODE) {
+    {
+      warn("[Key System] Cannot set key on invalid node");
+    }
+    return;
   }
-  setClient() {
-    this.renderMode = 0 /* CLIENT */;
+  const normalizedKey = normalizeKey(key);
+  if (isFalsy(normalizedKey)) {
+    delete node[NODE_KEY_SYMBOL];
+  } else {
+    node[NODE_KEY_SYMBOL] = normalizedKey;
   }
-};
-var renderContext = new RenderContext();
-var componentMap = /* @__PURE__ */ new Map();
-function enterComponent(temp, index) {
-  componentMap.set(temp, {
-    index
-  });
 }
-function getComponentIndex(temp) {
-  var _a;
-  return (_a = componentMap.get(temp)) == null ? void 0 : _a.index;
+function getNodeKey(node) {
+  if (!node) return void 0;
+  return isComponent(node) ? node.key : node[NODE_KEY_SYMBOL];
 }
 
-// src/lifecycleContext.ts
-var _LifecycleContext = class _LifecycleContext {
-  constructor() {
-    // Hooks for different lifecycle stages
-    this.hooks = {
-      mounted: /* @__PURE__ */ new Set(),
-      destroy: /* @__PURE__ */ new Set()
-    };
+// 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);
   }
-  addEventListener() {
+}
+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);
   }
-  removeEventListener() {
+}
+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);
   }
-  // Add a hook for a specific lifecycle stage
-  addHook(hook, cb) {
-    var _a;
-    (_a = this.hooks[hook]) == null ? void 0 : _a.add(cb);
+}
+function getFirstDOMNode(node) {
+  if (!node) {
+    return;
   }
-  // Get a value from the static context
-  getContext(context) {
-    return _LifecycleContext.context[context];
+  if (isComponent(node)) {
+    return node.firstChild;
   }
-  // Set a value in the static context
-  setContext(context, value) {
-    _LifecycleContext.context[context] = value;
+  if (isPrimitive(node)) {
+    return void 0;
   }
-  initRef() {
-    _LifecycleContext.ref = this;
+  return node;
+}
+function isSameNode(a, b) {
+  const keyA = getNodeKey(a);
+  const keyB = getNodeKey(b);
+  if (keyA !== keyB) {
+    return false;
   }
-  removeRef() {
-    _LifecycleContext.ref = null;
+  const aIsComponent = isComponent(a);
+  const bIsComponent = isComponent(b);
+  if (aIsComponent && bIsComponent) {
+    return a.component === b.component;
   }
-  // Clear all hooks
-  clearHooks() {
-    Object.values(this.hooks).forEach((set) => set.clear());
+  if (aIsComponent !== bIsComponent) {
+    return false;
   }
-};
-_LifecycleContext.ref = null;
-_LifecycleContext.context = {};
-var LifecycleContext = _LifecycleContext;
-
-// src/ssgNode.ts
-function isSSGNode(node) {
-  return node instanceof SSGNode;
-}
-var componentIndex = 1;
-var SSGNode = class extends LifecycleContext {
-  constructor(template, props = {}, key) {
-    super();
-    this.template = template;
-    this.props = props;
-    this.key = key;
-    enterComponent(template, componentIndex);
-    this.templates = this.processTemplate();
+  if (isPrimitive(a) || isPrimitive(b)) {
+    return a === b;
   }
-  processTemplate() {
-    if (isArray(this.template)) {
-      const htmlString = this.template.join(PLACEHOLDER);
-      const processedString = this.processHtmlString(htmlString);
-      return processedString.split(PLACEHOLDER);
-    }
-    return [];
+  const aNode = a;
+  const bNode = b;
+  if (aNode.nodeType !== bNode.nodeType) {
+    return false;
   }
-  processHtmlString(htmlString) {
-    return htmlString.replaceAll(/(<[^>]+>)|([^<]+)/g, (match, p1, p2) => {
-      if (p1) {
-        if (p1.includes("data-ci")) return match;
-        return p1.replace(/<\s*([\da-z]+)(\s[^>]*)?>/i, (_, tagName, attrs) => {
-          return `<${tagName} data-ci="${componentIndex}"${attrs || ""}>`;
-        });
-      } else if (p2 && p2.replace(PLACEHOLDER, "").trim()) {
-        return `<!--${0 /* TEXT */}-${componentIndex}-->${p2}<!$>`;
-      }
-      return match;
-    });
+  if (aNode.nodeType === Node.ELEMENT_NODE) {
+    return aNode.tagName === bNode.tagName;
   }
-  mount() {
-    this.initRef();
-    const output = this.render();
-    this.removeRef();
-    return output;
-  }
-  render() {
-    if (isFunction(this.template)) {
-      const root = this.template(this.props);
-      if (isSSGNode(root)) {
-        return root.mount();
-      } else {
-        return String(root);
+  return true;
+}
+function normalizeNode(node) {
+  if (isHTMLElement(node)) {
+    return node;
+  }
+  if (isPrimitive(node)) {
+    const textContent = isFalsy(node) ? "" : String(node);
+    return document.createTextNode(textContent);
+  }
+  return node;
+}
+function isHtmlInputElement(val) {
+  return val instanceof HTMLInputElement;
+}
+function isHtmlSelectElement(val) {
+  return val instanceof HTMLSelectElement;
+}
+function isHtmlTextAreaElement(val) {
+  return val instanceof HTMLTextAreaElement;
+}
+function isHtmLTextElement(val) {
+  return val instanceof Text;
+}
+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;
+  }
+  return true;
+}
+function transferKey(oldNode, newNode) {
+  if (isComponent(oldNode) || isComponent(newNode)) {
+    return;
+  }
+  const oldKey = getNodeKey(oldNode);
+  if (oldKey && !getNodeKey(newNode)) {
+    setNodeKey(newNode, oldKey);
+  }
+}
+function patch(parent, oldNode, newNode) {
+  if (newNode === oldNode) {
+    return oldNode;
+  }
+  const oldIsElement = isHTMLElement(oldNode);
+  const newIsElement = isHTMLElement(newNode);
+  if (newIsElement && oldIsElement) {
+    if (newNode.isEqualNode(oldNode)) {
+      return oldNode;
+    }
+    if (oldNode.tagName === newNode.tagName) {
+      const oldAttrs = oldNode.attributes;
+      const newAttrs = newNode.attributes;
+      for (let i = oldAttrs.length - 1; i >= 0; i--) {
+        const attrName = oldAttrs[i].name;
+        if (!newNode.hasAttribute(attrName)) {
+          oldNode.removeAttribute(attrName);
+        }
       }
+      for (let i = 0, len = newAttrs.length; i < len; i++) {
+        const attr = newAttrs[i];
+        if (oldNode.getAttribute(attr.name) !== attr.value) {
+          oldNode.setAttribute(attr.name, attr.value);
+        }
+      }
+      transferKey(oldNode, newNode);
+      return oldNode;
     }
-    return this.renderTemplate();
   }
-  renderTemplate() {
-    Object.entries(this.props).forEach(([key, cur]) => {
-      const children = cur.children;
-      this.normalizeProps(cur);
-      const findIndex = this.templates.findIndex((t) => t.includes(`data-hk="${key}"`));
-      if (children) {
-        this.renderChildren(children, findIndex);
-      }
-      this.templates[findIndex] = this.templates[findIndex].replace(
-        `data-hk="${key}"`,
-        `data-hk="${key}" ${this.generateAttributes(cur)}`
-      );
-    });
-    return this.templates.join("");
+  if (isHtmLTextElement(oldNode) && isHtmLTextElement(newNode)) {
+    if (oldNode.textContent !== newNode.textContent) {
+      oldNode.textContent = newNode.textContent;
+    }
+    transferKey(oldNode, newNode);
+    return oldNode;
+  }
+  const oldIsComponent = isComponent(oldNode);
+  const newIsComponent = isComponent(newNode);
+  if (oldIsComponent && newIsComponent) {
+    if (oldNode.component === newNode.component) {
+      return newNode.update(oldNode);
+    }
   }
-  normalizeProps(props) {
-    Object.entries(props).forEach(([key, value]) => {
-      if (key === CHILDREN_PROP) {
-        delete props[key];
-      } else if (isFunction(value)) {
-        delete props[key];
-      } else if (isSignal(value)) {
-        props[key] = value.value;
-      }
-    });
+  replaceNode(parent, newNode, oldNode);
+  return newNode;
+}
+function patchChildren(parent, oldChildren, newChildren, anchor) {
+  const oldLength = oldChildren.length;
+  const newLength = newChildren.length;
+  if (oldLength === 0 && newLength === 0) {
+    return [];
   }
-  generateAttributes(props) {
-    return Object.entries(props).filter(([key, value]) => key !== CHILDREN_PROP && !isFunction(value)).map(([key, value]) => `${key}="${escape(String(value))}"`).join(" ");
+  if (oldLength === 0) {
+    for (let i = 0; i < newLength; i++) {
+      insertNode(parent, newChildren[i], anchor);
+    }
+    return newChildren;
   }
-  renderChildren(children, findIndex) {
-    children.forEach(([child]) => {
-      componentIndex++;
-      const renderedChild = this.renderChild(child);
-      this.templates[findIndex] += renderedChild;
-    });
+  if (newLength === 0) {
+    for (let i = 0; i < oldLength; i++) {
+      removeNode(oldChildren[i]);
+    }
+    return [];
   }
-  renderChild(child) {
-    if (isSignal(child)) {
-      return `<!--${1 /* TEXT_COMPONENT */}-${componentIndex}-->${child.value}<!$>`;
-    } else if (isFunction(child)) {
-      return this.renderChild(child(this.props));
-    } else if (isSSGNode(child)) {
-      const childResult = child.mount();
-      return isFunction(childResult) ? childResult(this.props) : extractSignal(childResult);
+  if (oldLength === 1 && newLength === 1) {
+    const oldNode = oldChildren[0];
+    const newNode = newChildren[0];
+    if (isSameNode(oldNode, newNode)) {
+      patch(parent, oldNode, newNode);
+      newChildren[0] = oldNode;
     } else {
-      return `<!--${1 /* TEXT_COMPONENT */}-${componentIndex}-->${child}<!$>`;
+      replaceNode(parent, newNode, oldNode);
     }
-  }
-};
-
-// src/utils.ts
-var SELF_CLOSING_TAGS = "area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr".split(",");
-function coerceNode(data) {
-  if (isJsxElement(data) || data instanceof Node || isSSGNode(data)) {
-    return data;
-  }
-  const text = isFalsy(data) ? "" : String(data);
-  return document.createTextNode(text);
-}
-function insertChild(parent, child, before = null) {
-  const beforeNode = isJsxElement(before) ? before.firstChild : before;
-  const ssr = renderContext.isSSR;
-  if (isJsxElement(child)) {
-    child.mount(parent, beforeNode);
-  } else if (beforeNode && !ssr) {
-    beforeNode.before(child);
-  } else if (!ssr) {
-    parent.append(child);
-  }
-}
-function removeChild(child) {
-  if (isJsxElement(child)) {
-    child.unmount();
-  } else {
-    const parent = child.parentNode;
-    if (parent) {
-      child.remove();
+    return newChildren;
+  }
+  if (oldLength === 2 && newLength === 2) {
+    const o0 = oldChildren[0];
+    const o1 = oldChildren[1];
+    const n0 = newChildren[0];
+    const n1 = newChildren[1];
+    if (isSameNode(o0, n0) && isSameNode(o1, n1)) {
+      patch(parent, o0, n0);
+      patch(parent, o1, n1);
+      newChildren[0] = o0;
+      newChildren[1] = o1;
+      return newChildren;
+    }
+    if (isSameNode(o0, n1) && isSameNode(o1, n0)) {
+      patch(parent, o0, n1);
+      patch(parent, o1, n0);
+      const dom1 = getFirstDOMNode(o1);
+      const dom0 = getFirstDOMNode(o0);
+      if (dom1 && dom0 && dom1.parentNode === parent) {
+        parent.insertBefore(dom1, dom0);
+      }
+      newChildren[0] = o1;
+      newChildren[1] = o0;
+      return newChildren;
     }
   }
+  return patchKeyedChildren(parent, oldChildren, newChildren, anchor);
 }
-function replaceChild(parent, node, child) {
-  insertChild(parent, node, child);
-  removeChild(child);
-}
-function setAttribute(element, attr, value) {
-  if (attr === "class") {
-    setClassAttribute(element, value);
-  } else if (attr === "style") {
-    setStyleAttribute(element, value);
+function patchKeyedChildren(parent, oldChildren, newChildren, anchor) {
+  let oldStartIdx = 0;
+  let newStartIdx = 0;
+  let oldEndIdx = oldChildren.length - 1;
+  let newEndIdx = newChildren.length - 1;
+  let oldStartNode = oldChildren[0];
+  let oldEndNode = oldChildren[oldEndIdx];
+  let newStartNode = newChildren[0];
+  let newEndNode = newChildren[newEndIdx];
+  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
+    if (!oldStartNode) {
+      oldStartNode = oldChildren[++oldStartIdx];
+    } else if (!oldEndNode) {
+      oldEndNode = oldChildren[--oldEndIdx];
+    } else if (isSameNode(oldStartNode, newStartNode)) {
+      patch(parent, oldStartNode, newStartNode);
+      newChildren[newStartIdx] = oldStartNode;
+      oldStartNode = oldChildren[++oldStartIdx];
+      newStartNode = newChildren[++newStartIdx];
+    } else {
+      break;
+    }
+  }
+  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
+    if (!oldStartNode) {
+      oldStartNode = oldChildren[++oldStartIdx];
+    } else if (!oldEndNode) {
+      oldEndNode = oldChildren[--oldEndIdx];
+    } else if (isSameNode(oldEndNode, newEndNode)) {
+      patch(parent, oldEndNode, newEndNode);
+      newChildren[newEndIdx] = oldEndNode;
+      oldEndNode = oldChildren[--oldEndIdx];
+      newEndNode = newChildren[--newEndIdx];
+    } else {
+      break;
+    }
+  }
+  if (oldStartIdx > oldEndIdx) {
+    if (newStartIdx <= newEndIdx) {
+      const anchorNode = newEndIdx + 1 < newChildren.length ? getFirstDOMNode(newChildren[newEndIdx + 1]) : anchor;
+      for (let i = newStartIdx; i <= newEndIdx; i++) {
+        insertNode(parent, newChildren[i], anchorNode);
+      }
+    }
+  } else if (newStartIdx > newEndIdx) {
+    for (let i = oldStartIdx; i <= oldEndIdx; i++) {
+      const node = oldChildren[i];
+      if (node) {
+        removeNode(node);
+      }
+    }
   } else {
-    setGenericAttribute(element, attr, value);
+    patchUnknownSequence(
+      parent,
+      oldChildren,
+      newChildren,
+      oldStartIdx,
+      oldEndIdx,
+      newStartIdx,
+      newEndIdx,
+      anchor
+    );
   }
+  return newChildren;
 }
-function setClassAttribute(element, value) {
-  if (typeof value === "string") {
-    element.className = value;
-  } else if (isArray(value)) {
-    element.className = value.join(" ");
-  } else if (value && typeof value === "object") {
-    element.className = Object.entries(value).reduce((acc, [key, value2]) => acc + (value2 ? ` ${key}` : ""), "").trim();
+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]);
+    if (key !== void 0) {
+      if (!keyToNewIndexMap) {
+        keyToNewIndexMap = /* @__PURE__ */ Object.create(null);
+      }
+      keyToNewIndexMap[key] = i;
+    }
   }
-}
-function setStyleAttribute(element, value) {
-  if (typeof value === "string") {
-    element.style.cssText = value;
-  } else if (value && typeof value === "object") {
-    const obj = value;
-    Object.entries(obj).forEach(([key, value2]) => {
-      element.style.setProperty(kebabCase(key), String(value2));
-    });
+  const newIndexToOldIndexMap = new Int32Array(newLength);
+  let moved = false;
+  let maxNewIndexSoFar = 0;
+  let patched = 0;
+  for (let i = oldStartIdx; i <= oldEndIdx; i++) {
+    const oldNode = oldChildren[i];
+    if (!oldNode) continue;
+    if (patched >= newLength) {
+      removeNode(oldNode);
+      continue;
+    }
+    let newIndex;
+    const oldKey = getNodeKey(oldNode);
+    if (oldKey !== void 0 && keyToNewIndexMap && oldKey in keyToNewIndexMap) {
+      newIndex = keyToNewIndexMap[oldKey];
+    } else {
+      for (let j2 = newStartIdx; j2 <= newEndIdx; j2++) {
+        if (newIndexToOldIndexMap[j2 - newStartIdx] === 0 && oldKey === void 0 && getNodeKey(newChildren[j2]) === void 0 && isSameNode(oldNode, newChildren[j2])) {
+          newIndex = j2;
+          break;
+        }
+      }
+    }
+    if (newIndex === void 0) {
+      removeNode(oldNode);
+    } else {
+      newIndexToOldIndexMap[newIndex - newStartIdx] = i + 1;
+      if (newIndex >= maxNewIndexSoFar) {
+        maxNewIndexSoFar = newIndex;
+      } else {
+        moved = true;
+      }
+      patch(parent, oldNode, newChildren[newIndex]);
+      newChildren[newIndex] = oldNode;
+      patched++;
+    }
+  }
+  const increasingNewIndexSequence = moved ? getSequence(newIndexToOldIndexMap) : [];
+  let j = increasingNewIndexSequence.length - 1;
+  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);
+    } else if (moved) {
+      if (j < 0 || i !== increasingNewIndexSequence[j]) {
+        const domNode = getFirstDOMNode(nextNode);
+        if (domNode && domNode.parentNode === parent) {
+          insertNode(parent, domNode, nextAnchor);
+        }
+      } else {
+        j--;
+      }
+    }
   }
 }
-function setGenericAttribute(element, attr, value) {
-  if (isFalsy(value)) {
-    element.removeAttribute(attr);
-  } else if (value === true) {
-    element.setAttribute(attr, "");
-  } else {
-    if (element instanceof HTMLInputElement && attr === "value") {
-      element.value = String(value);
-    } else {
-      element.setAttribute(attr, String(value));
+function getSequence(arr) {
+  const len = arr.length;
+  if (len === 0) return [];
+  if (len === 1) return arr[0] !== 0 ? [0] : [];
+  const result = [];
+  const p = new Int32Array(len);
+  let i;
+  let j;
+  let u;
+  let v;
+  let c;
+  for (i = 0; i < len; i++) {
+    const arrI = arr[i];
+    if (arrI !== 0) {
+      j = result[result.length - 1];
+      if (result.length === 0 || arr[j] < arrI) {
+        p[i] = j;
+        result.push(i);
+        continue;
+      }
+      u = 0;
+      v = result.length - 1;
+      while (u < v) {
+        c = u + v >> 1;
+        if (arr[result[c]] < arrI) {
+          u = c + 1;
+        } else {
+          v = c;
+        }
+      }
+      if (arrI < arr[result[u]]) {
+        if (u > 0) {
+          p[i] = result[u - 1];
+        }
+        result[u] = i;
+      }
     }
   }
+  u = result.length;
+  v = result[u - 1];
+  while (u-- > 0) {
+    result[u] = v;
+    v = p[v];
+  }
+  return result;
 }
-function bindNode(node, setter) {
-  if (node instanceof HTMLInputElement) {
+
+// src/binding.ts
+function addEventListener(element, event, handler, options) {
+  element.addEventListener(event, handler, options);
+  onCleanup(() => {
+    element.removeEventListener(event, handler, options);
+  });
+}
+function bindElement(node, key, defaultValue, setter) {
+  if (isHtmlInputElement(node)) {
     switch (node.type) {
       case "checkbox":
-        return addEventListener(node, "change", () => {
+        addEventListener(node, "change", () => {
           setter(Boolean(node.checked));
         });
-      case "date":
-        return addEventListener(node, "change", () => {
-          setter(node.value ? node.value : "");
+        break;
+      case "radio":
+        addEventListener(node, "change", () => {
+          setter(node.checked ? node.value : "");
         });
+        break;
       case "file":
-        return addEventListener(node, "change", () => {
-          if (node.files) {
-            setter(node.files);
-          }
+        addEventListener(node, "change", () => {
+          setter(node.files);
         });
+        break;
       case "number":
-        return addEventListener(node, "input", () => {
-          const value = Number.parseFloat(node.value);
-          setter(Number.isNaN(value) ? "" : String(value));
+      case "range":
+        addEventListener(node, "input", () => {
+          setter(node.value || "");
         });
-      case "radio":
-        return addEventListener(node, "change", () => {
-          setter(node.checked ? node.value : "");
+        break;
+      case "date":
+      case "datetime-local":
+      case "month":
+      case "time":
+      case "week":
+        addEventListener(node, "change", () => {
+          setter(node.value || "");
         });
-      case "text":
-        return addEventListener(node, "input", () => {
+        break;
+      default:
+        addEventListener(node, "input", () => {
           setter(node.value);
         });
+        break;
     }
-  }
-  if (node instanceof HTMLSelectElement) {
-    return addEventListener(node, "change", () => {
-      setter(node.value);
+  } 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);
+      }
     });
-  }
-  if (node instanceof HTMLTextAreaElement) {
-    return addEventListener(node, "input", () => {
+  } else if (isHtmlTextAreaElement(node)) {
+    addEventListener(node, "input", () => {
       setter(node.value);
     });
   }
 }
-function addEventListener(node, eventName, handler) {
-  node.addEventListener(eventName, handler);
-  return () => node.removeEventListener(eventName, handler);
+function insert(parent, nodeFactory, before) {
+  if (!parent) return;
+  const ownerScope = getActiveScope();
+  let renderedNodes = [];
+  const cleanup = effect(() => {
+    const executeUpdate = () => {
+      const rawNodes = isFunction(nodeFactory) ? nodeFactory() : nodeFactory;
+      const nodes = coerceArray(rawNodes).map((item) => isFunction(item) ? item() : item).flatMap((i) => i).map(normalizeNode);
+      renderedNodes = patchChildren(parent, renderedNodes, nodes, before);
+    };
+    if (ownerScope && !ownerScope.isDestroyed) {
+      runWithScope(ownerScope, executeUpdate);
+    } else {
+      executeUpdate();
+    }
+  });
+  onCleanup(() => {
+    cleanup();
+    renderedNodes.forEach((node) => removeNode(node));
+    renderedNodes.length = 0;
+  });
+  return renderedNodes;
 }
-function convertToHtmlTag(tagName) {
-  return SELF_CLOSING_TAGS.includes(tagName) ? `<${tagName}/>` : `<${tagName}></${tagName}>`;
+function mapNodes(template2, indexes) {
+  const len = indexes.length;
+  const tree = new Array(len);
+  const indexSet = new Set(indexes);
+  let index = 1;
+  let found = 0;
+  const walk = (node) => {
+    if (node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
+      if (indexSet.has(index)) {
+        tree[found++] = node;
+        if (found === len) return true;
+      }
+      index++;
+    }
+    let child = node.firstChild;
+    while (child) {
+      if (walk(child)) return true;
+      child = child.nextSibling;
+    }
+    return false;
+  };
+  walk(template2);
+  return tree;
 }
-function extractSignal(signal) {
-  if (isSignal(signal)) {
-    return signal.value;
-  } else {
-    return signal;
+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);
 }
-var ComponentNode = class extends LifecycleContext {
-  constructor(template, props, key) {
-    super();
-    this.template = template;
-    this.props = props;
-    this.key = key;
-    this.emitter = /* @__PURE__ */ new Set();
-    this.rootNode = null;
-    this.trackMap = /* @__PURE__ */ new Map();
-    this.nodes = [];
-    this.parent = null;
-    this.before = null;
-    this.key || (this.key = props && props.key);
-    this.proxyProps || (this.proxyProps = shallowReactive(props || {}));
+function registerUpdateHook(hook) {
+  const scope = getActiveScope();
+  if (!scope) {
+    {
+      error("onUpdate() must be called within a scope");
+    }
+    return;
   }
-  get firstChild() {
-    var _a, _b;
-    return (_b = (_a = this.rootNode) == null ? void 0 : _a.firstChild) != null ? _b : null;
+  if (!scope.onUpdate) {
+    scope.onUpdate = /* @__PURE__ */ new Set();
   }
-  get isConnected() {
-    var _a, _b;
-    return (_b = (_a = this.rootNode) == null ? void 0 : _a.isConnected) != null ? _b : false;
-  }
-  mount(parent, before) {
-    var _a, _b, _c, _d;
-    this.parent = parent;
-    if (!isFunction(this.template)) {
-      throw new Error("Template must be a function");
-    }
-    if (this.isConnected) {
-      return (_b = (_a = this.rootNode) == null ? void 0 : _a.mount(parent, before)) != null ? _b : [];
-    }
-    this.initRef();
-    this.rootNode = this.template(useReactive(this.proxyProps, [CHILDREN_PROP]));
-    this.nodes = (_d = (_c = this.rootNode) == null ? void 0 : _c.mount(parent, before)) != null ? _d : [];
-    this.callMountHooks();
-    this.patchProps(this.props);
-    this.removeRef();
-    return this.nodes;
-  }
-  unmount() {
-    var _a;
-    this.callLifecycleHooks("destroy");
-    this.cleanup();
-    (_a = this.rootNode) == null ? void 0 : _a.unmount();
-    this.resetState();
-    if (this.key) {
-      componentCache.delete(this.key);
-    }
-  }
-  resetState() {
-    this.rootNode = null;
-    this.proxyProps = {};
-    this.nodes = [];
-    this.parent = null;
-  }
-  callLifecycleHooks(type) {
-    this.hooks[type].forEach((handler) => handler());
-  }
-  callMountHooks() {
-    this.hooks.mounted.forEach((handler) => handler());
-  }
-  callDestroyHooks() {
-    this.hooks.destroy.forEach((handler) => handler());
-  }
-  clearEmitter() {
-    for (const cleanup of this.emitter) {
-      cleanup();
-    }
-    this.emitter.clear();
-  }
-  inheritNode(node) {
-    Object.assign(this.proxyProps, node.proxyProps);
-    this.rootNode = node.rootNode;
-    this.trackMap = node.trackMap;
-    this.hooks = node.hooks;
-    if (hasChanged(node.props, this.props)) {
-      const props = this.props;
-      this.props = node.props;
-      this.patchProps(props);
-    }
-  }
-  getNodeTrack(trackKey) {
-    let track = this.trackMap.get(trackKey);
-    if (!track) {
-      track = { cleanup: () => {
-      } };
-      this.trackMap.set(trackKey, track);
-    }
-    track.cleanup();
-    return track;
-  }
-  patchProps(props) {
-    var _a;
-    if (!props) {
-      return;
+  scope.onUpdate.add(hook);
+}
+function registerDestroyHook(hook) {
+  const scope = getActiveScope();
+  if (!scope) {
+    {
+      error("onDestroy() must be called within a scope");
     }
-    for (const [key, prop] of Object.entries(props)) {
-      if (startsWith(key, EVENT_PREFIX) && ((_a = this.rootNode) == null ? void 0 : _a.firstChild)) {
-        this.patchEventListener(key, prop);
-      } else if (key === REF_KEY) {
-        this.patchRef(prop);
-      } else if (startsWith(key, UPDATE_PREFIX)) {
-        this.patchUpdateHandler(key, prop);
-      } else if (key !== CHILDREN_PROP) {
-        this.patchNormalProp(key, prop);
+    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 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 == null ? void 0 : props.key) ? normalizeKey(props.key) : getComponentKey(component);
+    this.reactiveProps = shallowReactive(__spreadValues({}, this.props || {}));
+    this.parentScope = getActiveScope();
   }
-  patchEventListener(key, prop) {
-    const event = key.slice(2).toLowerCase();
-    const cleanup = addEventListener(this.rootNode.nodes[0], event, prop);
-    this.emitter.add(cleanup);
+  get isConnected() {
+    return this.state === 2 /* MOUNTED */;
   }
-  patchRef(prop) {
-    var _a, _b;
-    prop.value = (_b = (_a = this.rootNode) == null ? void 0 : _a.firstChild) != null ? _b : null;
+  get firstChild() {
+    for (const node of this.renderedNodes) {
+      const dom = getFirstDOMNode(node);
+      if (dom) {
+        return dom;
+      }
+    }
+    return void 0;
+  }
+  mount(parentNode, beforeNode) {
+    var _a2;
+    this.parentNode = parentNode;
+    this.beforeNode = beforeNode;
+    this.state = 1 /* MOUNTING */;
+    if (this.renderedNodes.length > 0) {
+      for (const node of this.renderedNodes) {
+        insertNode(parentNode, node, beforeNode);
+      }
+      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;
+    });
+    this.renderedNodes = renderedNodes;
+    runWithScope(this.scope, () => {
+      this.applyProps(this.props || {});
+    });
+    this.state = 2 /* MOUNTED */;
+    if (this.scope) {
+      triggerMountHooks(this.scope);
+    }
+    return this.renderedNodes;
   }
-  patchUpdateHandler(key, prop) {
-    this.proxyProps[key] = extractSignal(prop);
+  update(prevNode) {
+    if (this.key !== prevNode.key) {
+      this.mount(prevNode.parentNode, prevNode.beforeNode);
+      return this;
+    }
+    this.parentNode = prevNode.parentNode;
+    this.beforeNode = prevNode.beforeNode;
+    this.scope = prevNode.scope;
+    this.parentScope = prevNode.parentScope;
+    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;
+      }
+    }
+    if (!this.isConnected && this.parentNode) {
+      this.mount(this.parentNode, this.beforeNode);
+    }
+    if (this.scope) {
+      runWithScope(this.scope, () => {
+        this.applyProps(this.props || {});
+      });
+      triggerUpdateHooks(this.scope);
+    }
+    return this;
   }
-  patchNormalProp(key, prop) {
-    const track = this.getNodeTrack(key);
-    track.cleanup = useEffect(() => {
-      this.proxyProps[key] = isFunction(prop) ? prop() : prop;
+  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 (error10) {
+        this.renderedNodes = originalNodes;
+        throw error10;
+      }
     });
   }
-  cleanup() {
-    this.trackMap.forEach((track) => {
-      var _a;
-      return (_a = track.cleanup) == null ? void 0 : _a.call(track);
-    });
-    this.trackMap.clear();
-    this.emitter.forEach((cleanup) => cleanup());
-    this.emitter.clear();
+  /**
+   * Destroy component
+   */
+  destroy() {
+    if (this.state === 4 /* DESTROYING */ || this.state === 5 /* DESTROYED */) {
+      return;
+    }
+    this.state = 4 /* DESTROYING */;
+    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;
+    this.parentScope = null;
+    this.reactiveProps = {};
+    this.props = void 0;
+    this.state = 5 /* DESTROYED */;
+  }
+  applyProps(props) {
+    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);
+        }
+      } else if (propName === REF_KEY && isSignal(propValue)) {
+        propValue.value = firstElement;
+      }
+    }
+    this.props = props;
   }
 };
+function isComponent(node) {
+  return !!node && !!node["normal" /* NORMAL */];
+}
+function createComponent(componentFn, props) {
+  if (isComponent(componentFn)) {
+    return componentFn;
+  }
+  return new Component(componentFn, props);
+}
 
-// src/patch.ts
-function patchChildren(parent, childrenMap, nextChildren, before) {
-  const result = /* @__PURE__ */ new Map();
-  const children = Array.from(childrenMap.values());
-  if (children.length && nextChildren.length === 0) {
-    clearChildren(parent, children, before);
-    return result;
-  }
-  const replaces = [];
-  const nextChildrenMap = mapKeys(nextChildren);
-  let childIndex = 0;
-  for (let [i, child] of nextChildren.entries()) {
-    let currChild = children[childIndex];
-    let currKey = getKey(currChild, i);
-    while (currChild && !nextChildrenMap.has(currKey)) {
-      removeChild(currChild);
-      childrenMap.delete(currKey);
-      currChild = children[++childIndex];
-      currKey = getKey(currChild, i);
-    }
-    const key = getKey(child, i);
-    const origChild = childrenMap.get(key);
-    if (origChild) {
-      child = patch(parent, origChild, child);
-    }
-    if (currChild) {
-      if (currChild === origChild) {
-        childIndex++;
-      } else {
-        const placeholder = document.createComment("");
-        insertChild(parent, placeholder, currChild);
-        replaces.push([placeholder, child]);
+// src/renderer.ts
+function template(html) {
+  let node;
+  const create = () => {
+    const template2 = document.createElement("template");
+    template2.innerHTML = html;
+    const firstChild = template2.content.firstChild;
+    if (!firstChild) {
+      throw new Error("Invalid template: empty content");
+    }
+    return firstChild;
+  };
+  return () => (node || (node = create())).cloneNode(true);
+}
+function createApp(component, target) {
+  const container = isString(target) ? document.querySelector(target) : target;
+  if (!container) {
+    error(`Target element not found: ${target}`);
+    return;
+  }
+  const existingContext = container.innerHTML;
+  if (existingContext) {
+    error(`Target element is not empty, it will be delete: ${target}`);
+    container.innerHTML = "";
+  }
+  const rootComponent = createComponent(component);
+  rootComponent.mount(container);
+  return rootComponent;
+}
+function provide(key, value) {
+  const scope = getActiveScope();
+  if (!scope) {
+    {
+      error("provide() must be called within a scope");
+    }
+    return;
+  }
+  if (!scope.provides) {
+    scope.provides = /* @__PURE__ */ new Map();
+  }
+  scope.provides.set(key, value);
+}
+function inject(key, defaultValue) {
+  const scope = getActiveScope();
+  console.log(scope);
+  if (!scope) {
+    {
+      error("inject() must be called within a scope");
+    }
+    return defaultValue;
+  }
+  let current = scope;
+  while (current) {
+    if (current.provides) {
+      console.log(current.provides);
+      const value = current.provides.get(key);
+      if (value) {
+        return value;
       }
-    } else {
-      insertChild(parent, child, before);
     }
-    result.set(key, child);
+    current = current.parent;
   }
-  replaces.forEach(([placeholder, child]) => {
-    replaceChild(parent, child, placeholder);
+  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", {
+    configurable: true,
+    value
   });
-  childrenMap.forEach((child, key) => {
-    if (child.isConnected && !result.has(key)) {
-      removeChild(child);
+  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", {
+    configurable: true,
+    get() {
+      return node || document;
     }
   });
-  return result;
+  if (e.composedPath) {
+    const path = e.composedPath();
+    reTarget(path[0]);
+    for (let i = 0; i < path.length - 2; i++) {
+      node = path[i];
+      if (!handleNode()) break;
+      if (node._$host) {
+        node = node._$host;
+        walkUpTree();
+        break;
+      }
+      if (node.parentNode === oriCurrentTarget) {
+        break;
+      }
+    }
+  } else walkUpTree();
+  reTarget(oriTarget);
 }
-function clearChildren(parent, children, before) {
-  if (parent.childNodes.length === children.length + (before ? 1 : 0)) {
-    parent.innerHTML = "";
-    if (before) {
-      insertChild(parent, before);
+var $EVENTS = Symbol("_$EVENTS");
+function delegateEvents(eventNames, document2 = window.document) {
+  const docWithEvents = document2;
+  const eventSet = docWithEvents[$EVENTS] || (docWithEvents[$EVENTS] = /* @__PURE__ */ new Set());
+  for (const name of eventNames) {
+    if (!eventSet.has(name)) {
+      eventSet.add(name);
+      document2.addEventListener(name, eventHandler);
     }
+  }
+}
+function patchClass(el, prev, next, isSVG = false) {
+  if (prev === next) {
+    return;
+  }
+  const normalizedNext = normalizeClass(next);
+  const normalizedPrev = normalizeClass(prev);
+  if (normalizedNext && normalizedPrev === normalizedNext) {
+    return;
+  }
+  if (!normalizedNext) {
+    el.removeAttribute("class");
+  } else if (isSVG) {
+    el.setAttribute("class", normalizedNext);
   } else {
-    const range = document.createRange();
-    const child = children[0];
-    const start = isJsxElement(child) ? child.firstChild : child;
-    range.setStartBefore(start);
-    if (before) {
-      range.setEndBefore(before);
-    } else {
-      range.setEndAfter(parent);
-    }
-    range.deleteContents();
+    el.className = normalizedNext;
   }
-  children.forEach((node) => {
-    if (isJsxElement(node)) {
-      node.unmount();
-    }
-  });
 }
-function patch(parent, node, next) {
-  if (node === next) {
-    return node;
+function normalizeClass(value) {
+  if (value == null) {
+    return "";
+  }
+  if (typeof value === "string") {
+    return value.trim();
   }
-  if (isJsxElement(node) && isJsxElement(next) && node.template === next.template) {
-    next.inheritNode(node);
-    return next;
+  if (isArray(value)) {
+    return value.map(normalizeClass).filter(Boolean).join(" ");
   }
-  if (node instanceof Text && next instanceof Text) {
-    if (node.textContent !== next.textContent) {
-      node.textContent = next.textContent;
+  if (isObject(value)) {
+    const result = [];
+    for (const key in value) {
+      if (value[key]) {
+        result.push(key);
+      }
     }
-    return node;
+    return result.join(" ");
   }
-  replaceChild(parent, next, node);
-  return next;
+  return String(value).trim();
 }
-function mapKeys(children) {
-  const result = /* @__PURE__ */ new Map();
-  for (const [i, child] of children.entries()) {
-    const key = getKey(child, i);
-    result.set(key, child);
+var importantRE = /\s*!important$/;
+var prefixes = ["Webkit", "Moz", "ms"];
+var prefixCache = {};
+function patchStyle(el, prev, next) {
+  const style = el.style;
+  const isCssString = isString(next);
+  if (next && isCssString) {
+    if (prev !== next) {
+      style.cssText = next;
+    }
+    return;
   }
-  return result;
-}
-function getKey(node, index) {
-  if (isJsxElement(node)) {
-    const jsxKey = node.key;
-    if (jsxKey !== void 0 && jsxKey !== null) {
-      return String(jsxKey);
+  if (!next) {
+    if (prev) {
+      el.removeAttribute("style");
     }
+    return;
   }
-  return `_$${index}$`;
-}
-
-// src/templateNode.ts
-var TemplateNode = class {
-  constructor(template, props, key) {
-    this.template = template;
-    this.props = props;
-    this.key = key;
-    this.treeMap = /* @__PURE__ */ new Map();
-    this.mounted = false;
-    this.nodes = [];
-    this.trackMap = /* @__PURE__ */ new Map();
-    this.bindValueKeys = [];
-    this.parent = null;
-    if (renderContext.isSSR) {
-      this.componentIndex = getComponentIndex(this.template);
+  if (prev && !isString(prev)) {
+    for (const key in prev) {
+      if (!next || next[key] == null) {
+        setStyle(style, key, "");
+      }
+    }
+  } else if (prev && isString(prev)) {
+    const prevStyles = prev.split(";");
+    for (const stylePart of prevStyles) {
+      const colonIndex = stylePart.indexOf(":");
+      if (colonIndex > 0) {
+        const key = stylePart.slice(0, colonIndex).trim();
+        if (next && isObject(next) && next[key] == null) {
+          setStyle(style, key, "");
+        }
+      }
     }
   }
-  get firstChild() {
-    var _a;
-    return (_a = this.nodes[0]) != null ? _a : null;
+  if (next && !isString(next)) {
+    for (const key in next) {
+      const value = next[key];
+      if ((!prev || isString(prev) || prev[key] !== value) && value != null) {
+        setStyle(style, key, value);
+      }
+    }
   }
-  get isConnected() {
-    return this.mounted;
+}
+function setStyle(style, name, val) {
+  if (isArray(val)) {
+    for (const element of val) {
+      setStyle(style, name, element);
+    }
+    return;
   }
-  addEventListener() {
+  if (val == null || val === "") {
+    val = "";
   }
-  removeEventListener() {
+  if (name.startsWith("--")) {
+    style.setProperty(name, val);
+    return;
   }
-  mount(parent, before) {
-    var _a;
-    this.parent = parent;
-    if (this.isConnected) {
-      this.nodes.forEach((node) => insertChild(parent, node, before));
-      return this.nodes;
+  const prefixed = autoPrefix(style, name);
+  if (typeof val === "string" && importantRE.test(val)) {
+    style.setProperty(camelCase(prefixed), val.replace(importantRE, ""), "important");
+  } else {
+    style[prefixed] = val;
+  }
+}
+function autoPrefix(style, rawName) {
+  const cached = prefixCache[rawName];
+  if (cached) {
+    return cached;
+  }
+  let name = camelCase(rawName);
+  if (name !== "filter" && name in style) {
+    return prefixCache[rawName] = name;
+  }
+  name = capitalize(name);
+  for (const prefix of prefixes) {
+    const prefixed = prefix + name;
+    if (prefixed in style) {
+      return prefixCache[rawName] = prefixed;
     }
-    if (isArray(this.template)) {
-      this.template = createTemplate(this.template.join(""));
+  }
+  return rawName;
+}
+function patchAttr(el, key, prev, next) {
+  if (key === KEY_PROP) {
+    if (next == null) {
+      setNodeKey(el, void 0);
+    } else {
+      setNodeKey(el, String(next));
     }
-    const cloneNode = this.template.content.cloneNode(true);
-    const firstChild = cloneNode.firstChild;
-    if ((_a = firstChild == null ? void 0 : firstChild.hasAttribute) == null ? void 0 : _a.call(firstChild, "_svg_")) {
-      firstChild.remove();
-      firstChild.childNodes.forEach((node) => {
-        cloneNode.append(node);
-      });
+    return;
+  }
+  if (key === SPREAD_NAME) {
+    {
+      if (!isObject(next)) {
+        warn("spread attribute must be an object");
+      }
     }
-    this.nodes = Array.from(cloneNode.childNodes);
-    if (renderContext.isSSR) {
-      this.mapSSGNodeTree(parent);
+    Object.keys(next).forEach((k) => {
+      patchAttr(el, k, prev == null ? void 0 : prev[k], next == null ? void 0 : next[k]);
+    });
+    return;
+  }
+  const elementIsSVG = (el == null ? void 0 : el.namespaceURI) === SVG_NAMESPACE;
+  const isXlink = elementIsSVG && key.startsWith("xlink:");
+  const isXmlns = elementIsSVG && key.startsWith("xmlns:");
+  const isBoolean = isSpecialBooleanAttr(key) || isBooleanAttr(key);
+  if (prev === next) {
+    return;
+  }
+  const lowerKey = key.toLowerCase();
+  if (/^on[a-z]+/.test(lowerKey)) {
+    return;
+  }
+  if (lowerKey === "innerhtml") {
+    return;
+  }
+  if (next == null) {
+    if (isXlink) {
+      el.removeAttributeNS(XLINK_NAMESPACE, key.slice(6));
+    } else if (isXmlns) {
+      const localName = key.slice(6);
+      el.removeAttributeNS(XMLNS_NAMESPACE, localName);
     } else {
-      this.mapNodeTree(parent, cloneNode);
+      el.removeAttribute(key);
     }
-    insertChild(parent, cloneNode, before);
-    this.patchProps(this.props);
-    this.mounted = true;
-    return this.nodes;
+    return;
   }
-  unmount() {
-    this.trackMap.forEach((track) => {
-      track.cleanup && track.cleanup();
-    });
-    this.trackMap.clear();
-    this.treeMap.clear();
-    this.nodes.forEach((node) => removeChild(node));
-    this.nodes = [];
-    this.mounted = false;
-    if (this.key) {
-      componentCache.delete(this.key);
-    }
-  }
-  inheritNode(node) {
-    this.mounted = node.mounted;
-    this.nodes = node.nodes;
-    this.trackMap = node.trackMap;
-    this.treeMap = node.treeMap;
-    const props = this.props;
-    this.props = node.props;
-    this.patchProps(props);
-  }
-  mapSSGNodeTree(parent) {
-    this.treeMap.set(0, parent);
-    this.walkNodeTree(parent, this.handleSSGNode.bind(this));
-  }
-  // protected method to map node tree
-  mapNodeTree(parent, tree) {
-    let index = 1;
-    this.treeMap.set(0, parent);
-    const handleNode = (node) => {
-      if (node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
-        this.treeMap.set(index++, node);
-      }
-    };
-    this.walkNodeTree(tree, handleNode);
+  if (isXlink) {
+    el.setAttributeNS(XLINK_NAMESPACE, key, String(next));
+    return;
   }
-  walkNodeTree(node, handler) {
-    if (node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
-      handler(node);
+  if (isXmlns) {
+    el.setAttributeNS(XMLNS_NAMESPACE, key, String(next));
+    return;
+  }
+  if (isBoolean) {
+    if (includeBooleanAttr(next)) {
+      el.setAttribute(key, "");
+    } else {
+      el.removeAttribute(key);
     }
-    let child = node.firstChild;
-    while (child) {
-      this.walkNodeTree(child, handler);
-      child = child.nextSibling;
+    return;
+  }
+  const attrValue = isSymbol(next) ? String(next) : next;
+  const isUrlAttr = lowerKey === "href" || lowerKey === "src" || lowerKey === "xlink:href";
+  if (isUrlAttr && typeof attrValue === "string") {
+    const v = attrValue.trim().toLowerCase();
+    if (v.startsWith("javascript:") || v.startsWith("data:")) {
+      return;
     }
   }
-  handleSSGNode(node) {
-    var _a;
-    if (node.nodeType === Node.COMMENT_NODE) {
-      const [type, index] = ((_a = node.textContent) == null ? void 0 : _a.split("-")) || [];
-      if (0 /* TEXT */ === +type && +index === this.componentIndex) {
-        const textNode = node.nextSibling;
-        this.treeMap.set(+index, textNode);
-      }
-    } else if (node.nodeType !== Node.TEXT_NODE) {
-      const { ci = "-1", hk } = (node == null ? void 0 : node.dataset) || {};
-      if (hk && +ci === this.componentIndex) {
-        this.treeMap.set(+hk, node);
+  if (elementIsSVG) {
+    el.setAttribute(key, String(attrValue));
+  } else {
+    if (key in el) {
+      try {
+        el[key] = attrValue;
+      } catch (e) {
+        el.setAttribute(key, String(attrValue));
       }
+    } else {
+      el.setAttribute(key, String(attrValue));
     }
   }
-  patchProps(props) {
-    if (!props) return;
-    Object.entries(props).forEach(([key, value]) => {
-      const index = Number(key);
-      const node = this.treeMap.get(index);
-      if (node) {
-        this.patchProp(key, node, value, index === 0);
-      }
-    });
-    this.props = props;
+}
+
+// src/operations/event.ts
+function addEvent(el, event, handler, options) {
+  if (!(options == null ? void 0 : options.delegate)) {
+    el.addEventListener(event, handler, options);
+    return () => el.removeEventListener(event, handler, options);
+  }
+  const selector = options.delegate;
+  const wrappedHandler = (e) => {
+    const target = e.target;
+    if (target.matches(selector) || target.closest(selector)) {
+      handler.call(el, e);
+    }
+  };
+  const cleanOptions = __spreadValues({}, options);
+  cleanOptions.delegate = void 0;
+  el.addEventListener(event, wrappedHandler, cleanOptions);
+  return () => {
+    el.removeEventListener(event, wrappedHandler, cleanOptions);
+  };
+}
+function Fragment(props) {
+  {
+    if (!props) {
+      error("Fragment component requires props");
+      return null;
+    }
+    if (!props.children) {
+      error("Fragment component requires children");
+      return null;
+    }
   }
-  patchProp(key, node, props, isRoot) {
-    if (!props) return;
-    Object.entries(props).forEach(([attr, value]) => {
-      if (attr === CHILDREN_PROP && value) {
-        this.patchChildren(key, node, value, isRoot);
-      } else if (attr === REF_KEY) {
-        props[attr].value = node;
-      } else if (startsWith(attr, EVENT_PREFIX)) {
-        this.patchEventListener(key, node, attr, value);
-      } else {
-        if (this.bindValueKeys.includes(attr)) return;
-        const updateFn = this.getBindUpdateValue(props, key, attr);
-        this.patchAttribute(key, node, attr, value, updateFn);
+  return props == null ? void 0 : props.children;
+}
+Fragment["fragment" /* FRAGMENT */] = true;
+function isFragment(node) {
+  return !!node && !!node["fragment" /* FRAGMENT */];
+}
+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;
+  const children = props.children;
+  if (children) {
+    const childArray = isArray(children) ? children : [children];
+    const nodes = [];
+    onMount(() => {
+      const targetElement = isString(props.target) ? document.querySelector(props.target) : props.target;
+      if (!targetElement) {
+        {
+          warn(`[Portal] Target element not found: ${props.target}`);
+        }
+        return;
       }
+      childArray.forEach((child) => {
+        if (child != null) {
+          const normalized = normalizeNode(child);
+          if (normalized) {
+            insertNode(targetElement, normalized);
+            nodes.push(normalized);
+          }
+        }
+      });
+      onCleanup(() => {
+        nodes.forEach((node) => {
+          if (typeof node !== "string" && node.parentNode === targetElement) {
+            targetElement.removeChild(node);
+          }
+        });
+      });
     });
   }
-  getBindUpdateValue(props, key, attr) {
-    const updateKey = `${UPDATE_PREFIX}${capitalize(attr)}`;
-    if (updateKey && props[updateKey] && isFunction(props[updateKey])) {
-      this.bindValueKeys.push(updateKey);
-      return props[updateKey];
+  return placeholder;
+}
+Portal["portal" /* PORTAL */] = true;
+function isPortal(node) {
+  return !!node && !!node["portal" /* PORTAL */];
+}
+var SuspenseContext = Symbol("SuspenseContext");
+function Suspense(props) {
+  if (isUndefined(document)) {
+    const fallback = props.fallback;
+    if (fallback) {
+      return String(fallback || "");
     }
-  }
-  patchChildren(key, node, children, isRoot) {
-    if (!isArray(children)) {
-      const trackKey = `${key}:${CHILDREN_PROP}:0`;
-      const track = this.getNodeTrack(trackKey, true, isRoot);
-      this.patchChild(track, node, children, null);
-    } else {
-      children.filter(Boolean).forEach((item, index) => {
-        var _a;
-        const [child, path] = isArray(item) ? item : [item, null];
-        const before = isNil(path) ? null : (_a = this.treeMap.get(path)) != null ? _a : null;
-        const trackKey = `${key}:${CHILDREN_PROP}:${index}`;
-        const track = this.getNodeTrack(trackKey, true, isRoot);
-        this.patchChild(track, node, child, before);
-      });
+    return "";
+  }
+  const container = document.createElement("div");
+  container.style.display = "contents";
+  let isMounted = true;
+  let pendingCount = 0;
+  let isShowingFallback = false;
+  let resolvedChildren = null;
+  const showFallback = () => {
+    if (isShowingFallback) return;
+    isShowingFallback = true;
+    while (container.firstChild) {
+      container.removeChild(container.firstChild);
     }
-  }
-  patchEventListener(key, node, attr, listener) {
-    const eventName = attr.slice(2).toLowerCase();
-    const track = this.getNodeTrack(`${key}:${attr}`);
-    track.cleanup = addEventListener(node, eventName, listener);
-  }
-  patchAttribute(key, element, attr, value, updateFn) {
-    const track = this.getNodeTrack(`${key}:${attr}`);
-    const triggerValue = shallowSignal();
-    const cleanup = useEffect(() => {
-      triggerValue.value = isSignal(value) || isComputed(value) ? value.value : value;
-      setAttribute(element, attr, triggerValue.value);
-    });
-    let cleanupBind;
-    if (updateFn && isHTMLElement(element)) {
-      cleanupBind = bindNode(element, (value2) => {
-        updateFn(value2);
-      });
+    if (props.fallback != null) {
+      const normalized = normalizeNode(props.fallback);
+      if (normalized) {
+        insertNode(container, normalized);
+      }
     }
-    track.cleanup = () => {
-      cleanup && cleanup();
-      cleanupBind && cleanupBind();
-    };
-  }
-  getNodeTrack(trackKey, trackLastNodes, isRoot) {
-    let track = this.trackMap.get(trackKey);
-    if (!track) {
-      track = { cleanup: () => {
-      } };
-      if (trackLastNodes) {
-        track.lastNodes = /* @__PURE__ */ new Map();
+  };
+  const showChildren = () => {
+    if (!isShowingFallback) return;
+    const hasContent = resolvedChildren || props.children != null && !isPromise(props.children);
+    if (!hasContent) {
+      return;
+    }
+    isShowingFallback = false;
+    while (container.firstChild) {
+      container.removeChild(container.firstChild);
+    }
+    if (resolvedChildren) {
+      renderChildren(resolvedChildren);
+    } else if (props.children != null && !isPromise(props.children)) {
+      renderChildren(props.children);
+    }
+  };
+  const renderChildren = (children2) => {
+    while (container.firstChild) {
+      container.removeChild(container.firstChild);
+    }
+    if (children2 == null) return;
+    const currentScope = getActiveScope();
+    const childArray = isArray(children2) ? children2 : [children2];
+    childArray.forEach((child) => {
+      if (child != null) {
+        if (isComponent(child)) {
+          child.parentContext = currentScope;
+        }
+        const normalized = normalizeNode(child);
+        if (normalized) {
+          insertNode(container, normalized);
+        }
+      }
+    });
+    if (isShowingFallback) {
+      while (container.firstChild) {
+        container.removeChild(container.firstChild);
       }
-      if (isRoot) {
-        track.isRoot = true;
+      if (props.fallback != null) {
+        const normalized = normalizeNode(props.fallback);
+        if (normalized) {
+          insertNode(container, normalized);
+        }
       }
-      this.trackMap.set(trackKey, track);
     }
-    track.cleanup && track.cleanup();
-    return track;
-  }
-  patchChild(track, parent, child, before) {
-    if (isFunction(child)) {
-      track.cleanup = useEffect(() => {
-        const nextNodes = coerceArray(child()).map(coerceNode);
-        if (renderContext.isSSR) {
-          track.lastNodes = this.reconcileChildren(parent, nextNodes, before);
-        } else {
-          track.lastNodes = patchChildren(parent, track.lastNodes, nextNodes, before);
+  };
+  const suspenseContext = {
+    register: (promise) => {
+      pendingCount++;
+      showFallback();
+      promise.then(() => {
+        if (!isMounted) return;
+        pendingCount--;
+        if (pendingCount === 0) {
+          showChildren();
         }
-      });
-    } else {
-      coerceArray(child).forEach((node, index) => {
-        const newNode = coerceNode(node);
-        const key = getKey(newNode, index);
-        if (renderContext.isSSR) {
-          track.lastNodes = this.reconcileChildren(parent, [newNode], before);
-        } else {
-          track.lastNodes.set(key, newNode);
-          insertChild(parent, newNode, before);
+      }).catch((error10) => {
+        {
+          warn("[Suspense] Resource failed:", error10);
+        }
+        if (!isMounted) return;
+        pendingCount--;
+        if (pendingCount === 0) {
+          showChildren();
         }
       });
+    },
+    increment: () => {
+      pendingCount++;
+      showFallback();
+    },
+    decrement: () => {
+      pendingCount--;
+      if (pendingCount === 0) {
+        showChildren();
+      }
     }
+  };
+  provide(SuspenseContext, suspenseContext);
+  const children = props.children;
+  if (isPromise(children)) {
+    children.then((resolved) => {
+      resolvedChildren = resolved;
+    }).catch(() => {
+    });
+    suspenseContext.register(children);
+  } else if (children != null) {
+    renderChildren(children);
+  } else {
+    showFallback();
   }
-  reconcileChildren(parent, nextNodes, before) {
-    const result = /* @__PURE__ */ new Map();
-    const textNodes = Array.from(parent.childNodes).filter(
-      (node) => {
-        var _a, _b;
-        return node.nodeType === Node.TEXT_NODE && ((_a = node.previousSibling) == null ? void 0 : _a.nodeType) === Node.COMMENT_NODE && ((_b = node.nextSibling) == null ? void 0 : _b.nodeType) === Node.COMMENT_NODE;
+  onDestroy(() => {
+    isMounted = false;
+    while (container.firstChild) {
+      container.removeChild(container.firstChild);
+    }
+  });
+  return container;
+}
+Suspense["suspense" /* SUSPENSE */] = true;
+function isSuspense(node) {
+  return !!node && !!node["suspense" /* SUSPENSE */];
+}
+function createResource(fetcher, options) {
+  const value = signal(options == null ? void 0 : options.initialValue);
+  const loading = signal(true);
+  const error10 = signal(null);
+  const state = signal("pending");
+  let fetchId = 0;
+  let currentPromise = null;
+  const fetch = () => __async(null, null, function* () {
+    const currentFetchId = ++fetchId;
+    loading.value = true;
+    state.value = "pending";
+    error10.value = null;
+    const promise = fetcher();
+    currentPromise = promise.then(() => {
+    });
+    try {
+      const result = yield promise;
+      if (currentFetchId === fetchId) {
+        value.value = result;
+        state.value = "ready";
+        loading.value = false;
       }
-    );
-    nextNodes.forEach((node, index) => {
-      const key = getKey(node, index);
-      if (node.nodeType === Node.TEXT_NODE) {
-        textNodes.forEach((ne) => {
-          if (node.textContent === ne.textContent) {
-            parent.replaceChild(node, ne);
-          }
-        });
-      } else {
-        insertChild(parent, node, before);
+    } catch (error_) {
+      if (currentFetchId === fetchId) {
+        error10.value = error_ instanceof Error ? error_ : new Error(String(error_));
+        state.value = "errored";
+        loading.value = false;
+      }
+    }
+  });
+  fetch();
+  const resource = (() => {
+    if (loading.value && currentPromise) {
+      const suspenseContext = inject(SuspenseContext, null);
+      if (suspenseContext) {
+        suspenseContext.register(currentPromise);
       }
-      result.set(key, node);
-    });
-    return result;
-  }
-};
-
-// src/jsxRenderer.ts
-var componentCache = /* @__PURE__ */ new Map();
-function createNodeCache(NodeConstructor, template, props = {}, key) {
-  if (key) {
-    const cached = componentCache.get(key);
-    if (cached) {
-      return cached;
     }
+    return value.value;
+  });
+  resource.loading = loading;
+  resource.error = error10;
+  resource.state = state;
+  const actions = {
+    mutate: (newValue) => {
+      value.value = newValue;
+      state.value = "ready";
+      loading.value = false;
+      error10.value = null;
+    },
+    refetch: () => __async(null, null, function* () {
+      yield fetch();
+    })
+  };
+  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 (typeof template === "string") {
-    template = createTemplate(template);
+  if (isString(content)) {
+    return content;
   }
-  const newNode = new NodeConstructor(template, props, key);
-  if (key && newNode instanceof ComponentNode) {
-    componentCache.set(key, newNode);
+  if (isArray(content)) {
+    return content.map((item) => convertToString(item, isSvg)).join("");
   }
-  return newNode;
+  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;
 }
-function h(template, props = {}, key) {
-  if (template === EMPTY_TEMPLATE) {
-    return Fragment(template, props);
+
+// src/server/render.ts
+function renderToString(component, props) {
+  if (!isFunction(component)) {
+    error("Component must be a function");
+    return "";
   }
-  if (isString(template)) {
-    const htmlTemplate = convertToHtmlTag(template);
-    const wrappedProps = { [SINGLE_PROP_KEY]: props };
-    return createNodeCache(TemplateNode, htmlTemplate, wrappedProps, key);
+  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);
+      }
+    }
   }
-  if (isFunction(template)) {
-    return createNodeCache(ComponentNode, template, props, key);
+  const result = addAttributes(content, hydrationKey);
+  return result;
+}
+function createSSGComponent(component, props = {}) {
+  if (!isFunction(component)) {
+    error("create ssg component: Component is not a function");
+    return "";
   }
-  return createNodeCache(TemplateNode, template, props, key);
+  const result = component(props);
+  return convertToString(result);
 }
-function isComponent(node) {
-  return node instanceof ComponentNode;
-}
-function isJsxElement(node) {
-  return node instanceof ComponentNode || node instanceof TemplateNode;
-}
-function createTemplate(html) {
-  const template = document.createElement("template");
-  template.innerHTML = html;
-  return template;
-}
-function Fragment(template, props) {
-  const processedProps = props.children ? {
-    [FRAGMENT_PROP_KEY]: {
-      children: Array.isArray(props.children) ? props.children.filter(Boolean) : [props.children]
-    }
-  } : props;
-  const templateElement = template === EMPTY_TEMPLATE ? createTemplate(EMPTY_TEMPLATE) : template;
-  return createNodeCache(TemplateNode, templateElement, processedProps);
-}
-function onMount(cb) {
-  assertInsideComponent("onMounted");
-  LifecycleContext.ref && LifecycleContext.ref.addHook("mounted", cb);
-}
-function onDestroy(cb) {
-  assertInsideComponent("onDestroy");
-  LifecycleContext.ref && LifecycleContext.ref.addHook("destroy", cb);
-}
-function assertInsideComponent(hookName, key) {
-  if (!LifecycleContext.ref && true) {
-    console.error(
-      `"${hookName}"(key: ${isSymbol(key) ? key.toString() : key}) can only be called within the component function body
-      and cannot be used in asynchronous or deferred calls.`
-    );
+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 normalizedStyleObject;
   }
+  if (isString(styleValue) || isObject(styleValue)) {
+    return styleValue;
+  }
+  return void 0;
 }
-function provide(key, value) {
-  assertInsideComponent("provide", key);
-  LifecycleContext.ref && LifecycleContext.ref.setContext(key, value);
+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();
+      }
+    }
+  });
+  return styleObject;
 }
-function inject(key, defaultValue) {
-  var _a;
-  assertInsideComponent("inject", key);
-  return (_a = LifecycleContext.ref && LifecycleContext.ref.getContext(key)) != null ? _a : defaultValue;
+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};`;
+    }
+  }
+  return cssText;
 }
-
-// src/server.ts
-function renderToString(component, props) {
-  renderContext.setSSG();
-  const ssrNode = new SSGNode(component, props || {});
-  const html = ssrNode.mount();
-  renderContext.setClient();
-  return html;
+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} `;
+      }
+    }
+  } else if (isObject(classValue)) {
+    for (const className in classValue) {
+      if (classValue[className]) {
+        resultClassName += `${className} `;
+      }
+    }
+  }
+  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 "";
+    }
+    if (isString(normalizedStyle)) {
+      return ` style="${normalizedStyle}"`;
+    }
+    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 hydrate(component, container) {
-  const rootElement = typeof container === "string" ? document.querySelector(container) : container;
-  if (!rootElement) {
-    throw new Error(`Could not find container: ${container}`);
+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
+        };
+      })
+    );
   }
-  renderContext.setSSR();
-  h(component).mount(rootElement);
-  renderContext.setClient();
+  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(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);
+    }
+  });
+  return nodes;
 }
-function ssg(component, props) {
-  if (renderContext.isSSG) {
-    return new SSGNode(component, props);
+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 h(component, props);
 }
 
-export { Fragment, h, hydrate, inject, isComponent, isJsxElement, onDestroy, onMount, provide, renderToString, ssg, createTemplate as template };
+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 };