@estjs/template 0.0.12 → 0.0.13-beta.2

package/dist/template.dev.esm.js

@@ -1,28 +1,50 @@
-import { startsWith, isFunction, isString, isArray, isNil, capitalizeFirstLetter, coerceArray, isSymbol, isFalsy, kebabCase, isObject, escape } from '@estjs/shared';
-import { signalObject, useReactive, isSignal, useSignal, useEffect, shallowSignal } from '@estjs/signal';
+import { isString, isFunction, isSymbol, isArray, escape, startsWith, isNil, capitalizeFirstLetter, coerceArray, isFalsy, kebabCase } from '@estjs/shared';
+import { shallowSignal, isSignal, useReactive, useEffect, useSignal } from '@estjs/signal';
 
 /**
-* @estjs/template v0.0.12
+* @estjs/template v0.0.13-beta.2
 * (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;
+
+
+// src/shared-config.ts
+var componentMap = /* @__PURE__ */ new Map();
+var RenderContext = class {
+  constructor() {
+    this.renderMode = 0 /* CLIENT */;
+  }
+  get isSSG() {
+    return this.renderMode === 1 /* SSG */;
+  }
+  get isSSR() {
+    return this.renderMode === 2 /* SSR */;
+  }
+  get isClient() {
+    return this.renderMode === 0 /* CLIENT */;
+  }
+  setSSR() {
+    this.renderMode = 2 /* SSR */;
+  }
+  setSSG() {
+    this.renderMode = 1 /* SSG */;
+  }
+  setClient() {
+    this.renderMode = 0 /* CLIENT */;
+  }
 };
-var _Hooks = class _Hooks {
+var renderContext = new RenderContext();
+function enterComponent(temp, index) {
+  componentMap.set(temp, {
+    index
+  });
+}
+function getComponentIndex(temp) {
+  return componentMap.get(temp).index;
+}
+
+// src/lifecycle-context.ts
+var _LifecycleContext = class _LifecycleContext {
   constructor() {
     this.hooks = {
       mounted: /* @__PURE__ */ new Set(),
@@ -38,158 +60,125 @@ var _Hooks = class _Hooks {
     (_a = this.hooks[hook]) == null ? void 0 : _a.add(cb);
   }
   getContext(context) {
-    return _Hooks.context[context];
+    return _LifecycleContext.context[context];
   }
   setContext(context, value) {
-    _Hooks.context[context] = value;
+    _LifecycleContext.context[context] = value;
   }
   initRef() {
-    _Hooks.ref = this;
+    _LifecycleContext.ref = this;
   }
   removeRef() {
-    _Hooks.ref = null;
+    _LifecycleContext.ref = null;
+  }
+  clearHooks() {
+    Object.values(this.hooks).forEach((set) => set.clear());
   }
 };
-_Hooks.ref = null;
-_Hooks.context = {};
-var Hooks = _Hooks;
-var ComponentNode = class extends Hooks {
-  constructor(template2, props, key) {
+// current context ref
+_LifecycleContext.ref = null;
+_LifecycleContext.context = {};
+var LifecycleContext = _LifecycleContext;
+
+// src/ssg-node.ts
+function isSSGNode(node) {
+  return node instanceof SSGNode;
+}
+var componentIndex = 1;
+var SSGNode = class extends LifecycleContext {
+  constructor(template, props = {}, key) {
     super();
-    this.template = template2;
+    this.template = template;
     this.props = props;
     this.key = key;
-    this.proxyProps = {};
-    this.emitter = /* @__PURE__ */ new Set();
-    this.mounted = false;
-    this.rootNode = null;
-    this.context = {};
-    this.trackMap = /* @__PURE__ */ new Map();
-    this.proxyProps = signalObject(
-      props,
-      (key2) => startsWith(key2, "on") || startsWith(key2, "update")
-    );
-    this.key = this.key || props.key;
-  }
-  get firstChild() {
-    var _a, _b;
-    return (_b = (_a = this.rootNode) == null ? void 0 : _a.firstChild) != null ? _b : null;
-  }
-  get isConnected() {
-    var _a, _b;
-    return (_b = (_a = this.rootNode) == null ? void 0 : _a.isConnected) != null ? _b : false;
-  }
-  inheritNode(node) {
-    this.context = node.context;
-    this.hooks = node.hooks;
-    Object.assign(this.proxyProps, node.proxyProps);
-    this.rootNode = node.rootNode;
-    this.trackMap = node.trackMap;
-    const props = this.props;
-    this.props = node.props;
-    this.patchProps(props);
-  }
-  mount(parent, before) {
-    var _a, _b, _c, _d;
-    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 : [];
+    enterComponent(template, componentIndex);
+    if (isArray(this.template)) {
+      const PLACEHOLDER = " __PLACEHOLDER__ ";
+      const htmlString = this.template.join(PLACEHOLDER);
+      const processedString = 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;
+      });
+      this.template = processedString.split(PLACEHOLDER);
     }
+  }
+  mount() {
     this.initRef();
-    this.rootNode = this.template(useReactive(this.proxyProps, ["children"]));
+    const output = this.render();
     this.removeRef();
-    this.mounted = true;
-    const mountedNode = (_d = (_c = this.rootNode) == null ? void 0 : _c.mount(parent, before)) != null ? _d : [];
-    this.hooks.mounted.forEach((handler) => handler());
-    this.patchProps(this.props);
-    return mountedNode;
-  }
-  unmount() {
-    var _a;
-    this.hooks.destroy.forEach((handler) => handler());
-    Object.values(this.hooks).forEach((set) => set.clear());
-    (_a = this.rootNode) == null ? void 0 : _a.unmount();
-    this.rootNode = null;
-    this.proxyProps = {};
-    this.mounted = false;
-    this.emitter.forEach((emitter) => emitter());
+    return output;
   }
-  getNodeTrack(trackKey, suppressCleanupCall) {
-    let track = this.trackMap.get(trackKey);
-    if (!track) {
-      track = { cleanup: () => {
-      } };
-      this.trackMap.set(trackKey, track);
-    }
-    if (!suppressCleanupCall) {
-      track.cleanup();
+  render() {
+    if (isFunction(this.template)) {
+      const root = this.template(this.props);
+      if (isSSGNode(root)) {
+        return root.mount();
+      } else {
+        return String(root);
+      }
     }
-    return track;
-  }
-  patchProps(props) {
-    var _a, _b, _c, _d;
-    for (const [key, prop] of Object.entries(props)) {
-      if (startsWith(key, "on") && ((_a = this.rootNode) == null ? void 0 : _a.nodes)) {
-        const event = key.slice(2).toLowerCase();
-        const listener = prop;
-        const cleanup = addEventListener(this.rootNode.nodes[0], event, listener);
-        this.emitter.add(cleanup);
-      } else if (key === "ref") {
-        props[key].value = (_b = this.rootNode) == null ? void 0 : _b.nodes[0];
-      } else if (startsWith(key, "update")) {
-        props[key] = isSignal(prop) ? prop.value : prop;
-      } else if (key !== "children") {
-        const newValue = (_d = (_c = this.proxyProps)[key]) != null ? _d : _c[key] = useSignal(prop);
-        const track = this.getNodeTrack(key);
-        track.cleanup = useEffect(() => {
-          newValue.value = isFunction(prop) ? prop() : prop;
+    const template = this.template;
+    Object.keys(this.props).forEach((key) => {
+      const cur = this.props[key];
+      const childrens = cur.children;
+      normalizeProp(cur);
+      const findIndex = template.findIndex((t) => t.includes(`data-hk="${key}"`));
+      if (childrens) {
+        childrens.forEach(([child]) => {
+          componentIndex++;
+          const children = renderChildren(child, cur);
+          this.template[findIndex] += children;
         });
       }
-    }
-    this.props = props;
+      this.template[findIndex].replaceAll(
+        `data-hk="${key}"`,
+        `data-hk="${key}" ${generateAttributes(cur)}`
+      );
+    });
+    return template.join("");
   }
 };
-
-// src/template.ts
-function h(_template, props, key) {
-  if (isString(_template)) {
-    if (isHtmlTagName(_template)) {
-      _template = convertToHtmlTag(_template);
-      props = {
-        1: props
-      };
-    }
-    if (_template === "") {
-      props = {
-        0: props
-      };
+function normalizeProp(props) {
+  Object.entries(props).forEach(([key, value]) => {
+    if (key === "children") {
+      delete props[key];
+    } else if (isFunction(value)) {
+      delete props[key];
+    } else if (isSignal(value)) {
+      props[key] = value.value;
     }
-    _template = template(_template);
-  }
-  return isFunction(_template) ? new ComponentNode(_template, props, key) : new TemplateNode(_template, props, key);
-}
-function isComponent(node) {
-  return node instanceof ComponentNode;
-}
-function isJsxElement(node) {
-  return node instanceof ComponentNode || node instanceof TemplateNode;
-}
-function template(html) {
-  const template2 = document.createElement("template");
-  template2.innerHTML = closeHtmlTags(html);
-  return template2;
+  });
 }
-function Fragment(props) {
-  return props.children;
+function generateAttributes(props) {
+  return Object.entries(props).filter(([key, value]) => key !== "children" && !isFunction(value)).map(([key, value]) => `${key}="${escape(String(value))}"`).join(" ");
+}
+function renderChildren(children, prop) {
+  if (isFunction(children)) {
+    return renderChildren(children(prop), prop);
+  } else if (isSignal(children)) {
+    return `<!--${1 /* TEXT_COMPONENT */}-${componentIndex}-->${children.value}<!$>`;
+  } else if (isSSGNode(children)) {
+    const childResult = children.mount();
+    return isFunction(childResult) ? childResult(prop) : extractSignal(childResult);
+  } else {
+    return `<!--${1 /* TEXT_COMPONENT */}-${componentIndex}-->${children}<!$>`;
+  }
 }
 
 // src/utils.ts
-var selfClosingTags = "area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr";
-var htmlTags = "a,abbr,acronym,address,applet,area,article,aside,audio,b,base,basefont,bdi,bdo,bgsound,big,blink,blockquote,body,br,button,canvas,caption,center,cite,code,col,colgroup,command,content,data,datalist,dd,del,details,dfn,dialog,dir,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,frame,frameset,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,i,iframe,image,img,input,ins,kbd,keygen,label,legend,li,link,listing,main,map,mark,marquee,menu,menuitem,meta,meter,nav,nobr,noframes,noscript,object,ol,optgroup,option,output,p,param,picture,plaintext,pre,progress,q,rb,rp,rt,rtc,ruby,s,samp,script,section,select,shadow,small,source,spacer,span,strike,strong,style,sub,summary,sup,table,tbody,td,template,textarea,tfoot,th,thead,time,title,tr,track,tt,u,ul,var,video,wbr,xmp";
+var selfClosingTags = "area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr".split(",");
+var htmlTags = "a,abbr,acronym,address,applet,area,article,aside,audio,b,base,basefont,bdi,bdo,bgsound,big,blink,blockquote,body,br,button,canvas,caption,center,cite,code,col,colgroup,command,content,data,datalist,dd,del,details,dfn,dialog,dir,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,frame,frameset,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,i,iframe,image,img,input,ins,kbd,keygen,label,legend,li,link,listing,main,map,mark,marquee,menu,menuitem,meta,meter,nav,nobr,noframes,noscript,object,ol,optgroup,option,output,p,param,picture,plaintext,pre,progress,q,rb,rp,rt,rtc,ruby,s,samp,script,section,select,shadow,small,source,spacer,span,strike,strong,style,sub,summary,sup,table,tbody,td,template,textarea,tfoot,th,thead,time,title,tr,track,tt,u,ul,var,video,wbr,xmp".split(
+  ","
+);
 function coerceNode(data) {
-  if (isJsxElement(data) || data instanceof Node) {
+  if (isJsxElement(data) || data instanceof Node || isSSGNode(data)) {
     return data;
   }
   const text = isFalsy(data) ? "" : String(data);
@@ -197,11 +186,12 @@ function coerceNode(data) {
 }
 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) {
+  } else if (beforeNode && !ssr) {
     beforeNode.before(child);
-  } else {
+  } else if (!ssr) {
     parent.append(child);
   }
 }
@@ -223,7 +213,7 @@ function setAttribute(element, attr, value) {
   if (attr === "class") {
     if (typeof value === "string") {
       element.className = value;
-    } else if (Array.isArray(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();
@@ -246,14 +236,14 @@ function setAttribute(element, attr, value) {
   } else if (value === true) {
     element.setAttribute(attr, "");
   } else {
-    if (element instanceof HTMLInputElement) {
+    if (element instanceof HTMLInputElement && attr === "value") {
       element.value = String(value);
     } else {
       element.setAttribute(attr, String(value));
     }
   }
 }
-function binNode(node, setter) {
+function bindNode(node, setter) {
   if (node instanceof HTMLInputElement) {
     switch (node.type) {
       case "checkbox":
@@ -296,16 +286,12 @@ function binNode(node, setter) {
     });
   }
 }
-var p = Promise.resolve();
-function nextTick(fn) {
-  return fn ? p.then(fn) : p;
-}
+Promise.resolve();
 function addEventListener(node, eventName, handler) {
   node.addEventListener(eventName, handler);
   return () => node.removeEventListener(eventName, handler);
 }
 function closeHtmlTags(input) {
-  const selfClosingTagList = selfClosingTags.split(",");
   const tagStack = [];
   const output = [];
   const tagPattern = /<\/?([\da-z-]+)([^>]*)>/gi;
@@ -327,7 +313,7 @@ function closeHtmlTags(input) {
       if (tagStack.length > 0) {
         tagStack.pop();
       }
-    } else if (!selfClosingTagList.includes(tagName)) {
+    } else if (!selfClosingTags.includes(tagName)) {
       tagStack.push(tagName);
     }
     output.push(fullMatch);
@@ -342,46 +328,147 @@ function closeHtmlTags(input) {
   return output.join("");
 }
 function isHtmlTagName(tagName) {
-  const htmlTagsList = htmlTags.split(",");
-  return htmlTagsList.includes(tagName);
+  return htmlTags.includes(tagName);
 }
 function convertToHtmlTag(tagName) {
-  const selfClosingTagList = selfClosingTags.split(",");
-  if (selfClosingTagList.includes(tagName)) {
+  if (selfClosingTags.includes(tagName)) {
     return `<${tagName}/>`;
   } else {
     return `<${tagName}></${tagName}>`;
   }
 }
+function extractSignal(signal) {
+  if (isSignal(signal)) {
+    return signal.value;
+  } else {
+    return signal;
+  }
+}
+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.proxyProps = props ? useReactive(
+      props,
+      (key2) => startsWith(key2, "on") || startsWith(key2, "update") || key2 === "children"
+    ) : {};
+  }
+  get firstChild() {
+    var _a, _b;
+    return (_b = (_a = this.rootNode) == null ? void 0 : _a.firstChild) != null ? _b : null;
+  }
+  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;
+    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(this.proxyProps);
+    const mountedNode = (_d = (_c = this.rootNode) == null ? void 0 : _c.mount(parent, before)) != null ? _d : [];
+    this.hooks.mounted.forEach((handler) => handler());
+    this.patchProps(this.props);
+    this.removeRef();
+    return mountedNode;
+  }
+  unmount() {
+    var _a;
+    this.hooks.destroy.forEach((handler) => handler());
+    this.clearHooks();
+    (_a = this.rootNode) == null ? void 0 : _a.unmount();
+    this.rootNode = null;
+    this.proxyProps = {};
+    for (const cleanup of this.emitter) {
+      cleanup();
+    }
+    this.emitter.clear();
+  }
+  /**
+   * Inherit props and state from another ComponentNode.
+   * It will:
+   * 1. Copy props from the node to this proxyProps.
+   * 2. Copy the rootNode, trackMap and hooks from the node.
+   * 3. Copy the props from the node to this.
+   * 4. Patch props from the props passed in the constructor.
+   * @param node The node to inherit from.
+   */
+  inheritNode(node) {
+    Object.assign(this.proxyProps, node.proxyProps);
+    this.rootNode = node.rootNode;
+    this.trackMap = node.trackMap;
+    this.hooks = node.hooks;
+    const props = this.props;
+    this.props = node.props;
+    this.patchProps(props);
+  }
+  /**
+   * Get a NodeTrack from the trackMap. If the track is not in the trackMap, create a new one.
+   * Then, call the cleanup function to remove any previously registered hooks.
+   * @param trackKey the key of the node track to get.
+   * @returns the NodeTrack, cleaned up and ready to use.
+   */
+  getNodeTrack(trackKey) {
+    let track = this.trackMap.get(trackKey);
+    if (!track) {
+      track = { cleanup: () => {
+      } };
+      this.trackMap.set(trackKey, track);
+    }
+    track.cleanup();
+    return track;
+  }
+  /**
+   * Patch the props of this node.
+   * It will:
+   * 1. Iterate the props and patch it.
+   * 2. If the prop is a event handler, add a event listener to the first child of the node.
+   * 3. If the prop is a ref, set the first child of the node to the ref.
+   * 4. If the prop is a update handler, update the prop in the node's props.
+   * 5. If the prop is a normal prop, create a signal for it and then patch it.
+   * @param props The props to patch.
+   */
+  patchProps(props) {
+    var _a, _b;
+    if (!props) {
+      return;
+    }
+    for (const [key, prop] of Object.entries(props)) {
+      if (startsWith(key, "on") && ((_a = this.rootNode) == null ? void 0 : _a.firstChild)) {
+        const event = key.slice(2).toLowerCase();
+        const cleanup = addEventListener(this.rootNode.nodes[0], event, prop);
+        this.emitter.add(cleanup);
+      } else if (key === "ref") {
+        prop.value = (_b = this.rootNode) == null ? void 0 : _b.firstChild;
+      } else if (startsWith(key, "update")) {
+        this.props[key] = extractSignal(prop);
+      } else if (key !== "children") {
+        const track = this.getNodeTrack(key);
+        track.cleanup = useEffect(() => {
+          this.proxyProps[key] = isFunction(prop) ? prop() : prop;
+        });
+      }
+    }
+    this.props = props;
+  }
+};
 
 // src/patch.ts
 function patchChildren(parent, childrenMap, nextChildren, before) {
   const result = /* @__PURE__ */ new Map();
   const children = Array.from(childrenMap.values());
-  const childrenLength = children.length;
   if (childrenMap.size > 0 && nextChildren.length === 0) {
-    if (parent.childNodes.length === childrenLength + (before ? 1 : 0)) {
-      parent.innerHTML = "";
-      if (before) {
-        insertChild(parent, before);
-      }
-    } 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();
-    }
-    children.forEach((node) => {
-      if (isJsxElement(node)) {
-        node.unmount();
-      }
-    });
+    clearChildren(parent, children, before);
     return result;
   }
   const replaces = [];
@@ -422,6 +509,30 @@ function patchChildren(parent, childrenMap, nextChildren, before) {
   });
   return result;
 }
+function clearChildren(parent, children, before) {
+  if (parent.childNodes.length === children.length + (before ? 1 : 0)) {
+    parent.innerHTML = "";
+    if (before) {
+      insertChild(parent, before);
+    }
+  } 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();
+  }
+  children.forEach((node) => {
+    if (isJsxElement(node)) {
+      node.unmount();
+    }
+  });
+}
 function patch(parent, node, next) {
   if (node === next) {
     return node;
@@ -458,30 +569,34 @@ function getKey(node, index) {
 }
 
 // src/template-node.ts
-var TemplateNode = class _TemplateNode {
-  constructor(template2, props, key) {
-    this.template = template2;
+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.provides = {};
     this.trackMap = /* @__PURE__ */ new Map();
+    this.bindValueKeys = [];
     this.parent = null;
-    this.key = this.key || props.key;
+    this.key || (this.key = props == null ? void 0 : props.key);
+    if (renderContext.isSSR) {
+      this.componentIndex = getComponentIndex(this.template);
+    }
+  }
+  addEventListener() {
+  }
+  removeEventListener() {
   }
   get firstChild() {
     var _a;
     return (_a = this.nodes[0]) != null ? _a : null;
   }
+  // is mounted
   get isConnected() {
     return this.mounted;
   }
-  addEventListener() {
-  }
-  removeEventListener() {
-  }
   mount(parent, before) {
     var _a;
     this.parent = parent;
@@ -489,6 +604,9 @@ var TemplateNode = class _TemplateNode {
       this.nodes.forEach((node) => insertChild(parent, node, before));
       return this.nodes;
     }
+    if (isArray(this.template)) {
+      this.template = createTemplate(this.template.join(""));
+    }
     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_")) {
@@ -498,23 +616,20 @@ var TemplateNode = class _TemplateNode {
       });
     }
     this.nodes = Array.from(cloneNode.childNodes);
-    this.mapNodeTree(parent, cloneNode);
+    if (renderContext.isSSR) {
+      this.mapSSGNodeTree(parent);
+    } else {
+      this.mapNodeTree(parent, cloneNode);
+    }
     insertChild(parent, cloneNode, before);
-    this.patchNodes(this.props);
+    this.patchProps(this.props);
     this.mounted = true;
     return this.nodes;
   }
   unmount() {
     this.trackMap.forEach((track) => {
-      var _a, _b;
+      var _a;
       (_a = track.cleanup) == null ? void 0 : _a.call(track);
-      (_b = track.lastNodes) == null ? void 0 : _b.forEach((node) => {
-        if (track.isRoot) {
-          removeChild(node);
-        } else if (node instanceof _TemplateNode) {
-          node.unmount();
-        }
-      });
     });
     this.trackMap.clear();
     this.treeMap.clear();
@@ -522,6 +637,52 @@ var TemplateNode = class _TemplateNode {
     this.nodes = [];
     this.mounted = false;
   }
+  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;
+  }
+  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);
+    const walk = (node) => {
+      var _a;
+      if (node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
+        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);
+          }
+        }
+      }
+      let child = node.firstChild;
+      while (child) {
+        walk(child);
+        child = child.nextSibling;
+      }
+    };
+    walk(parent);
+  }
   mapNodeTree(parent, tree) {
     let index = 1;
     this.treeMap.set(0, parent);
@@ -537,17 +698,14 @@ var TemplateNode = class _TemplateNode {
     };
     walk(tree);
   }
-  patchNodes(props) {
-    for (const key in props) {
-      const index = Number(key);
-      const node = this.treeMap.get(index);
-      if (node) {
-        const value = this.props[key];
-        this.patchNode(key, node, value, index === 0);
-      }
-    }
-    this.props = props;
-  }
+  /**
+   * Get a NodeTrack from the trackMap. If the track is not in the trackMap, create a new one.
+   * Then, call the cleanup function to remove any previously registered hooks.
+   * @param trackKey the key of the node track to get.
+   * @param trackLastNodes if true, the track will record the last nodes it has rendered.
+   * @param isRoot if true, the track will be treated as a root track.
+   * @returns the NodeTrack, cleaned up and ready to use.
+   */
   getNodeTrack(trackKey, trackLastNodes, isRoot) {
     var _a;
     let track = this.trackMap.get(trackKey);
@@ -565,16 +723,7 @@ var TemplateNode = class _TemplateNode {
     (_a = track.cleanup) == null ? void 0 : _a.call(track);
     return track;
   }
-  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.patchNodes(props);
-  }
-  patchNode(key, node, props, isRoot) {
+  patchProp(key, node, props, isRoot) {
     for (const attr in props) {
       if (attr === "children" && props.children) {
         if (!isArray(props.children)) {
@@ -598,7 +747,14 @@ var TemplateNode = class _TemplateNode {
         const track = this.getNodeTrack(`${key}:${attr}`);
         const listener = props[attr];
         track.cleanup = addEventListener(node, eventName, listener);
-      } else if (!startsWith(attr, "update")) {
+      } else {
+        const updateKey = `update${capitalizeFirstLetter(attr)}`;
+        if (this.bindValueKeys.includes(attr)) {
+          break;
+        }
+        if (props[updateKey]) {
+          this.bindValueKeys.push(updateKey);
+        }
         const track = this.getNodeTrack(`${key}:${attr}`);
         const val = props[attr];
         const triggerValue = isSignal(val) ? val : useSignal(val);
@@ -608,9 +764,8 @@ var TemplateNode = class _TemplateNode {
           patchAttribute(track, node, attr, triggerValue.value);
         });
         let cleanupBind;
-        const updateKey = `update${capitalizeFirstLetter(attr)}`;
-        if (props[updateKey]) {
-          cleanupBind = binNode(node, (value) => {
+        if (props[updateKey] && !isComponent(attr)) {
+          cleanupBind = bindNode(node, (value) => {
             props[updateKey](value);
           });
         }
@@ -622,6 +777,52 @@ var TemplateNode = class _TemplateNode {
     }
   }
 };
+function patchChild(track, parent, child, before) {
+  if (isFunction(child)) {
+    track.cleanup = useEffect(() => {
+      const nextNodes = coerceArray(child()).map(coerceNode);
+      if (renderContext.isSSR) {
+        track.lastNodes = reconcileChildren(parent, nextNodes, before);
+      } else {
+        track.lastNodes = patchChildren(parent, track.lastNodes, nextNodes, before);
+      }
+    });
+  } else {
+    coerceArray(child).forEach((node, index) => {
+      const newNode = coerceNode(node);
+      const key = getKey(newNode, index);
+      if (renderContext.isSSR) {
+        track.lastNodes = reconcileChildren(parent, [newNode], before);
+      } else {
+        track.lastNodes.set(key, newNode);
+        insertChild(parent, newNode, before);
+      }
+    });
+  }
+}
+function 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;
+    }
+  );
+  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);
+    }
+    result.set(key, node);
+  });
+  return result;
+}
 function patchAttribute(track, node, attr, data) {
   const element = node;
   if (!element.setAttribute) {
@@ -635,165 +836,89 @@ function patchAttribute(track, node, attr, data) {
     setAttribute(element, attr, data);
   }
 }
-function patchChild(track, parent, child, before) {
-  if (isFunction(child)) {
-    track.cleanup = useEffect(() => {
-      const nextNodes = coerceArray(child()).map(coerceNode);
-      track.lastNodes = patchChildren(parent, track.lastNodes, nextNodes, before);
-    });
-  } else {
-    coerceArray(child).forEach((node, i) => {
-      const newNode = coerceNode(node);
-      track.lastNodes.set(String(i), newNode);
-      insertChild(parent, newNode, before);
-    });
+
+// src/jsx-renderer.ts
+function h(template, props, key) {
+  if (isString(template)) {
+    if (isHtmlTagName(template)) {
+      template = convertToHtmlTag(template);
+      props = { "1": props };
+    } else if (template === "") {
+      props = { "0": props };
+    }
+    template = createTemplate(template);
   }
+  return isFunction(template) ? new ComponentNode(template, props, key) : new TemplateNode(template, props, key);
+}
+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 = closeHtmlTags(html);
+  return template;
+}
+function Fragment(props) {
+  return props.children;
 }
 function onMount(cb) {
   var _a;
-  throwIfOutsideComponent("onMounted");
-  (_a = Hooks.ref) == null ? void 0 : _a.addHook("mounted", cb);
+  assertInsideComponent("onMounted");
+  (_a = LifecycleContext.ref) == null ? void 0 : _a.addHook("mounted", cb);
 }
 function onDestroy(cb) {
   var _a;
-  throwIfOutsideComponent("onDestroy");
-  (_a = Hooks.ref) == null ? void 0 : _a.addHook("destroy", cb);
+  assertInsideComponent("onDestroy");
+  (_a = LifecycleContext.ref) == null ? void 0 : _a.addHook("destroy", cb);
 }
-function throwIfOutsideComponent(hook, key) {
-  if (!Hooks.ref) {
+function assertInsideComponent(hookName, key) {
+  if (!LifecycleContext.ref && true) {
     console.error(
-      `"${hook}"(key: ${isSymbol(key) ? key.toString() : key}) can only be called within the component function body
+      `"${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 useProvide(key, value) {
   var _a;
-  throwIfOutsideComponent("useProvide", key);
-  (_a = Hooks.ref) == null ? void 0 : _a.setContext(key, value);
+  assertInsideComponent("useProvide", key);
+  (_a = LifecycleContext.ref) == null ? void 0 : _a.setContext(key, value);
 }
 function useInject(key, defaultValue) {
   var _a;
-  throwIfOutsideComponent("useInject", key);
-  return ((_a = Hooks.ref) == null ? void 0 : _a.getContext(key)) || defaultValue;
+  assertInsideComponent("useInject", key);
+  return ((_a = LifecycleContext.ref) == null ? void 0 : _a.getContext(key)) || defaultValue;
 }
 function useRef() {
   const ref = shallowSignal(null);
   return ref;
 }
-function generateAttributes(props) {
-  return Object.entries(props).map(([key, value]) => {
-    if (key === "children" || isFunction(value)) return "";
-    return `${key}="${escape(String(value))}"`;
-  }).filter(Boolean).join(" ");
-}
-function normalizeProps(props) {
-  Object.keys(props).forEach((propKey) => {
-    if (isFunction(props[propKey])) {
-      delete props[propKey];
-    }
-    if (isSignal(props[propKey])) {
-      props[propKey] = props[propKey].value;
-    }
-  });
+
+// src/hydration.ts
+function renderToString(component, props) {
+  renderContext.setSSG();
+  const ssrNode = new SSGNode(component, props || {});
+  const html = ssrNode.mount();
+  renderContext.setClient();
+  return html;
 }
-function handleChildResult(result, prop, key, tmpl, childNodesMap, path) {
-  if (isSignal(result)) {
-    tmpl.template += result.value;
-  } else if (result instanceof ServerNode) {
-    const mapKey = path ? String(path) : `${key}`;
-    if (!childNodesMap[mapKey]) childNodesMap[mapKey] = [];
-    const childResult = result.mount();
-    childNodesMap[mapKey].push(
-      isFunction(childResult) ? childResult(prop) : isSignal(childResult) ? childResult.value : childResult
-    );
-  } else {
-    tmpl.template += isFunction(result) ? result(prop) : String(result);
+function hydrate(component, container) {
+  const rootElement = typeof container === "string" ? document.querySelector(container) : container;
+  if (!rootElement) {
+    throw new Error(`Could not find container: ${container}`);
   }
+  renderContext.setSSR();
+  h(component).mount(rootElement);
+  renderContext.setClient();
 }
-var ServerNode = class _ServerNode extends Hooks {
-  constructor(template2, props = {}, key) {
-    super();
-    this.template = template2;
-    this.props = props;
-    this.key = key;
-    this.childNodesMap = {};
-    this.processedTemplates = {};
-  }
-  /**
-   * Mount and render the component
-   */
-  mount() {
-    this.initRef();
-    const output = this.render();
-    this.removeRef();
-    return output;
-  }
-  /**
-   * Initialize template entries and props
-   */
-  initTemplates() {
-    const templateCollection = Array.isArray(this.template) ? this.template.reduce((acc, tmpl, index) => {
-      acc[index + 1] = { template: tmpl };
-      return acc;
-    }, {}) : this.template;
-    if (isObject(templateCollection)) {
-      Object.entries(templateCollection).forEach(([key, tmpl]) => {
-        const prop = __spreadValues({}, this.props[key]);
-        normalizeProps(prop);
-        if (prop.children) {
-          prop.children.forEach((item) => {
-            const [child, path] = isArray(item) ? item : [item, null];
-            if (isFunction(child)) {
-              const result = child(prop);
-              handleChildResult(result, prop, key, tmpl, this.childNodesMap, path);
-            } else {
-              tmpl.template += isSignal(child) ? child.value : String(child);
-            }
-          });
-        }
-        this.processedTemplates[key] = {
-          template: tmpl.template,
-          props: prop
-        };
-      });
-    }
-  }
-  /**
-   * Render component and its children into a string
-   */
-  render() {
-    if (isFunction(this.template)) {
-      const root = this.template(this.props);
-      return root instanceof _ServerNode ? root.mount() : String(root);
-    }
-    if (this.template instanceof _ServerNode) {
-      return this.template.mount();
-    }
-    this.initTemplates();
-    return Object.entries(this.processedTemplates).map(([key, { template: template2, props }]) => {
-      let content = template2;
-      if (props && Object.keys(props).length > 0) {
-        content += ` ${generateAttributes(props)}`;
-      }
-      if (this.childNodesMap[key]) {
-        content = content.replace("<!>", this.renderChildren(this.childNodesMap[key]));
-      }
-      return content;
-    }).join("");
-  }
-  /**
-   * Render child nodes into a string
-   */
-  renderChildren(children) {
-    return coerceArray(children).map(String).join("");
-  }
-};
 function ssg(component, props) {
-  return new ServerNode(component, props);
-}
-function renderToString(component, props) {
-  return ssg(component, props).mount();
+  if (renderContext.isSSG) {
+    return new SSGNode(component, props);
+  }
+  return h(component, props);
 }
 
-export { ComponentNode, Fragment, TemplateNode, h, isComponent, isJsxElement, nextTick, onDestroy, onMount, renderToString, ssg, template, useInject, useProvide, useRef };
+export { Fragment, h, hydrate, isComponent, isJsxElement, onDestroy, onMount, renderToString, ssg, createTemplate as template, useInject, useProvide, useRef };