@estjs/template 0.0.13-beta.6 → 0.0.13

package/dist/template.dev.esm.js

@@ -1,51 +1,66 @@
-import { isString, isFunction, isSymbol, isArray, escape, startsWith, isPrimitive, isNil, capitalizeFirstLetter, coerceArray, isFalsy, kebabCase } from '@estjs/shared';
+import { isString, isFunction, isArray, isSymbol, escape, startsWith, isPrimitive, isNil, capitalizeFirstLetter, coerceArray, isFalsy, kebabCase } from '@estjs/shared';
 import { shallowSignal, isSignal, useReactive, useEffect, useSignal } from '@estjs/signal';
 
 /**
-* @estjs/template v0.0.13-beta.6
+* @estjs/template v0.0.13
 * (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
 * @license MIT
 **/
 
 
 // src/shared-config.ts
-var componentMap = /* @__PURE__ */ new Map();
+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 PLACEHOLDER = " __PLACEHOLDER__ ";
 var RenderContext = class {
   constructor() {
     this.renderMode = 0 /* CLIENT */;
   }
+  // Getter to check if the current mode is SSG
   get isSSG() {
     return this.renderMode === 1 /* SSG */;
   }
+  // Getter to check if the current mode is SSR
   get isSSR() {
     return this.renderMode === 2 /* SSR */;
   }
+  // Getter to check if the current mode is Client
   get isClient() {
     return this.renderMode === 0 /* CLIENT */;
   }
+  // Set render mode to SSR
   setSSR() {
     this.renderMode = 2 /* SSR */;
   }
+  // Set render mode to SSG
   setSSG() {
     this.renderMode = 1 /* SSG */;
   }
+  // Set render mode to Client
   setClient() {
     this.renderMode = 0 /* CLIENT */;
   }
 };
 var renderContext = new RenderContext();
+var componentMap = /* @__PURE__ */ new Map();
 function enterComponent(temp, index) {
   componentMap.set(temp, {
     index
   });
 }
 function getComponentIndex(temp) {
-  return componentMap.get(temp).index;
+  var _a;
+  return (_a = componentMap.get(temp)) == null ? void 0 : _a.index;
 }
 
 // src/lifecycle-context.ts
 var _LifecycleContext = class _LifecycleContext {
   constructor() {
+    // Hooks for different lifecycle stages
     this.hooks = {
       mounted: /* @__PURE__ */ new Set(),
       destroy: /* @__PURE__ */ new Set()
@@ -55,28 +70,35 @@ var _LifecycleContext = class _LifecycleContext {
   }
   removeEventListener() {
   }
+  // Add a hook for a specific lifecycle stage
   addHook(hook, cb) {
     var _a;
     (_a = this.hooks[hook]) == null ? void 0 : _a.add(cb);
   }
+  // Get a value from the static context
   getContext(context) {
     return _LifecycleContext.context[context];
   }
+  // Set a value in the static context
   setContext(context, value) {
     _LifecycleContext.context[context] = value;
   }
+  // Initialize the static reference
   initRef() {
     _LifecycleContext.ref = this;
   }
+  // Remove the static reference
   removeRef() {
     _LifecycleContext.ref = null;
   }
+  // Clear all hooks
   clearHooks() {
     Object.values(this.hooks).forEach((set) => set.clear());
   }
 };
-// current context ref
+// Static reference to the current context
 _LifecycleContext.ref = null;
+// Static context to store shared values
 _LifecycleContext.context = {};
 var LifecycleContext = _LifecycleContext;
 
@@ -92,29 +114,39 @@ var SSGNode = class extends LifecycleContext {
     this.props = props;
     this.key = key;
     enterComponent(template, componentIndex);
+    this.templates = this.processTemplate();
+  }
+  // Process the template and return an array of processed strings
+  processTemplate() {
     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);
-    }
+      const processedString = this.processHtmlString(htmlString);
+      return processedString.split(PLACEHOLDER);
+    }
+    return [];
+  }
+  // Process HTML string by adding component index and handling text nodes
+  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;
+    });
   }
+  // Mount the SSGNode and return the rendered string
   mount() {
     this.initRef();
     const output = this.render();
     this.removeRef();
     return output;
   }
+  // Render the SSGNode
   render() {
     if (isFunction(this.template)) {
       const root = this.template(this.props);
@@ -124,57 +156,66 @@ var SSGNode = class extends LifecycleContext {
         return String(root);
       }
     }
-    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;
-        });
+    return this.renderTemplate();
+  }
+  // Render the template by processing props and children
+  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.template[findIndex].replaceAll(
+      this.templates[findIndex] = this.templates[findIndex].replace(
         `data-hk="${key}"`,
-        `data-hk="${key}" ${generateAttributes(cur)}`
+        `data-hk="${key}" ${this.generateAttributes(cur)}`
       );
     });
-    return template.join("");
+    return this.templates.join("");
   }
-};
-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;
+  // Normalize props by removing children and handling signals
+  normalizeProps(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;
+      }
+    });
+  }
+  // Generate HTML attributes string from props
+  generateAttributes(props) {
+    return Object.entries(props).filter(([key, value]) => key !== "children" && !isFunction(value)).map(([key, value]) => `${key}="${escape(String(value))}"`).join(" ");
+  }
+  // Render children and append them to the template
+  renderChildren(children, findIndex) {
+    children.forEach(([child]) => {
+      componentIndex++;
+      const renderedChild = this.renderChild(child);
+      this.templates[findIndex] += renderedChild;
+    });
+  }
+  // Render a single child node
+  renderChild(child) {
+    if (isFunction(child)) {
+      return this.renderChild(child(this.props));
+    } else if (isSignal(child)) {
+      return `<!--${1 /* TEXT_COMPONENT */}-${componentIndex}-->${child.value}<!$>`;
+    } else if (isSSGNode(child)) {
+      const childResult = child.mount();
+      return isFunction(childResult) ? childResult(this.props) : extractSignal(childResult);
+    } else {
+      return `<!--${1 /* TEXT_COMPONENT */}-${componentIndex}-->${child}<!$>`;
     }
-  });
-}
-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".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(
+var SELF_CLOSING_TAGS = "area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr".split(",");
+var HTML_TAGS = "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) {
@@ -211,26 +252,33 @@ function replaceChild(parent, node, child) {
 }
 function setAttribute(element, attr, value) {
   if (attr === "class") {
-    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();
-    }
-    return;
-  }
-  if (attr === "style") {
-    if (typeof value === "string") {
-      element.style.cssText = value;
-    } else if (value && typeof value === "object") {
-      const obj = value;
-      Object.keys(obj).forEach((key) => {
-        element.style.setProperty(kebabCase(key), String(obj[key]));
-      });
-    }
-    return;
+    setClassAttribute(element, value);
+  } else if (attr === "style") {
+    setStyleAttribute(element, value);
+  } else {
+    setGenericAttribute(element, attr, value);
+  }
+}
+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 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));
+    });
   }
+}
+function setGenericAttribute(element, attr, value) {
   if (isFalsy(value)) {
     element.removeAttribute(attr);
   } else if (value === true) {
@@ -313,7 +361,7 @@ function closeHtmlTags(input) {
       if (tagStack.length > 0) {
         tagStack.pop();
       }
-    } else if (!selfClosingTags.includes(tagName)) {
+    } else if (!SELF_CLOSING_TAGS.includes(tagName)) {
       tagStack.push(tagName);
     }
     output.push(fullMatch);
@@ -328,14 +376,10 @@ function closeHtmlTags(input) {
   return output.join("");
 }
 function isHtmlTagName(tagName) {
-  return htmlTags.includes(tagName);
+  return HTML_TAGS.includes(tagName);
 }
 function convertToHtmlTag(tagName) {
-  if (selfClosingTags.includes(tagName)) {
-    return `<${tagName}/>`;
-  } else {
-    return `<${tagName}></${tagName}>`;
-  }
+  return SELF_CLOSING_TAGS.includes(tagName) ? `<${tagName}/>` : `<${tagName}></${tagName}>`;
 }
 function extractSignal(signal) {
   if (isSignal(signal)) {
@@ -353,19 +397,28 @@ var ComponentNode = class extends LifecycleContext {
     this.emitter = /* @__PURE__ */ new Set();
     this.rootNode = null;
     this.trackMap = /* @__PURE__ */ new Map();
-    this.proxyProps = props ? useReactive(
+    this.key || (this.key = props == null ? void 0 : props.key);
+    this.proxyProps = this.createProxyProps(props);
+  }
+  // Create reactive props
+  createProxyProps(props) {
+    if (!props) return {};
+    return useReactive(
       props,
-      (key2) => startsWith(key2, "on") || startsWith(key2, "update") || key2 === "children"
-    ) : {};
+      (key) => startsWith(key, EVENT_PREFIX) || startsWith(key, UPDATE_PREFIX) || key === CHILDREN_PROP
+    );
   }
+  // Getter for the first child node
   get firstChild() {
     var _a, _b;
     return (_b = (_a = this.rootNode) == null ? void 0 : _a.firstChild) != null ? _b : null;
   }
+  // Getter to check if the node is connected to the DOM
   get isConnected() {
     var _a, _b;
     return (_b = (_a = this.rootNode) == null ? void 0 : _a.isConnected) != null ? _b : false;
   }
+  // Method to mount the component to the DOM
   mount(parent, before) {
     var _a, _b, _c, _d;
     if (!isFunction(this.template)) {
@@ -377,32 +430,37 @@ var ComponentNode = class extends LifecycleContext {
     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.callMountHooks();
     this.patchProps(this.props);
     this.removeRef();
     return mountedNode;
   }
+  // Method to unmount the component from the DOM
   unmount() {
     var _a;
-    this.hooks.destroy.forEach((handler) => handler());
+    this.callDestroyHooks();
     this.clearHooks();
     (_a = this.rootNode) == null ? void 0 : _a.unmount();
     this.rootNode = null;
     this.proxyProps = {};
+    this.clearEmitter();
+  }
+  // Private method to call mount hooks
+  callMountHooks() {
+    this.hooks.mounted.forEach((handler) => handler());
+  }
+  // Private method to call destroy hooks
+  callDestroyHooks() {
+    this.hooks.destroy.forEach((handler) => handler());
+  }
+  // Private method to clear the event emitter
+  clearEmitter() {
     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.
-   */
+  // Method to inherit properties from another ComponentNode
   inheritNode(node) {
     Object.assign(this.proxyProps, node.proxyProps);
     this.rootNode = node.rootNode;
@@ -412,12 +470,7 @@ var ComponentNode = class extends LifecycleContext {
     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.
-   */
+  // Private method to get or create a NodeTrack
   getNodeTrack(trackKey) {
     let track = this.trackMap.get(trackKey);
     if (!track) {
@@ -428,39 +481,47 @@ var ComponentNode = class extends LifecycleContext {
     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.
-   */
+  // Method to patch props onto the component
   patchProps(props) {
-    var _a, _b;
+    var _a;
     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);
+      if (startsWith(key, EVENT_PREFIX) && ((_a = this.rootNode) == null ? void 0 : _a.firstChild)) {
+        this.patchEventListener(key, prop);
       } 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.patchRef(prop);
+      } else if (startsWith(key, UPDATE_PREFIX)) {
+        this.patchUpdateHandler(key, prop);
+      } else if (key !== CHILDREN_PROP) {
+        this.patchNormalProp(key, prop);
       }
     }
     this.props = props;
   }
+  // Private method to patch event listeners
+  patchEventListener(key, prop) {
+    const event = key.slice(2).toLowerCase();
+    const cleanup = addEventListener(this.rootNode.nodes[0], event, prop);
+    this.emitter.add(cleanup);
+  }
+  // Private method to patch ref
+  patchRef(prop) {
+    var _a, _b;
+    prop.value = (_b = (_a = this.rootNode) == null ? void 0 : _a.firstChild) != null ? _b : null;
+  }
+  // Private method to patch update handlers
+  patchUpdateHandler(key, prop) {
+    this.props[key] = extractSignal(prop);
+  }
+  // Private method to patch normal props
+  patchNormalProp(key, prop) {
+    const track = this.getNodeTrack(key);
+    track.cleanup = useEffect(() => {
+      this.proxyProps[key] = isFunction(prop) ? prop() : prop;
+    });
+  }
 };
 
 // src/patch.ts
@@ -576,6 +637,7 @@ var TemplateNode = class {
     this.template = template;
     this.props = props;
     this.key = key;
+    // Private properties for managing the node's state
     this.treeMap = /* @__PURE__ */ new Map();
     this.mounted = false;
     this.nodes = [];
@@ -587,18 +649,21 @@ var TemplateNode = class {
       this.componentIndex = getComponentIndex(this.template);
     }
   }
-  addEventListener() {
-  }
-  removeEventListener() {
-  }
+  // Getter for the first child node
   get firstChild() {
     var _a;
     return (_a = this.nodes[0]) != null ? _a : null;
   }
-  // is mounted
+  // Getter to check if the node is connected to the DOM
   get isConnected() {
     return this.mounted;
   }
+  // Placeholder methods for event handling
+  addEventListener() {
+  }
+  removeEventListener() {
+  }
+  // Method to mount the node to the DOM
   mount(parent, before) {
     var _a;
     this.parent = parent;
@@ -628,43 +693,45 @@ var TemplateNode = class {
     this.mounted = true;
     return this.nodes;
   }
+  // Method to unmount the node from the DOM
   unmount() {
+    var _a, _b;
     this.trackMap.forEach((track) => {
-      var _a;
-      (_a = track.cleanup) == null ? void 0 : _a.call(track);
+      var _a2;
+      (_a2 = track.cleanup) == null ? void 0 : _a2.call(track);
     });
     this.trackMap.clear();
     this.treeMap.clear();
     this.nodes.forEach((node) => removeChild(node));
     if (!this.template.innerHTML && !this.nodes.length) {
-      this.props && this.props[0].children.forEach((i) => {
-        var _a;
-        if (isPrimitive(i)) {
-          (_a = this.parent) == null ? void 0 : _a.childNodes.forEach((node) => {
-            var _a2;
-            if (node.nodeType === Node.TEXT_NODE && node.textContent === `${i}`) {
-              (_a2 = this.parent) == null ? void 0 : _a2.removeChild(node);
-            }
+      const children = (_b = (_a = this.props) == null ? void 0 : _a[FRAGMENT_PROP_KEY]) == null ? void 0 : _b.children;
+      if (children) {
+        if (isArray(children)) {
+          children.forEach((child) => {
+            this.deleteFragmentTextNode(child);
           });
         } else {
-          removeChild(i);
+          this.deleteFragmentTextNode(children);
         }
-      });
+      }
     }
     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;
+  deleteFragmentTextNode(child) {
+    var _a;
+    if (isPrimitive(child)) {
+      (_a = this.parent) == null ? void 0 : _a.childNodes.forEach((node) => {
+        var _a2;
+        if (node.nodeType === Node.TEXT_NODE && node.textContent === `${child}`) {
+          (_a2 = this.parent) == null ? void 0 : _a2.removeChild(node);
+        }
+      });
+    } else {
+      removeChild(child);
+    }
   }
+  // Method to inherit properties from another TemplateNode
   inheritNode(node) {
     this.mounted = node.mounted;
     this.nodes = node.nodes;
@@ -674,55 +741,129 @@ var TemplateNode = class {
     this.props = node.props;
     this.patchProps(props);
   }
+  // Private method to map SSG node tree
   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);
+    this.walkNodeTree(parent, this.handleSSGNode.bind(this));
   }
+  // Private method to map node tree
   mapNodeTree(parent, tree) {
     let index = 1;
     this.treeMap.set(0, parent);
-    const walk = (node) => {
+    const handleNode = (node) => {
       if (node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
         this.treeMap.set(index++, node);
       }
-      let child = node.firstChild;
-      while (child) {
-        walk(child);
-        child = child.nextSibling;
+    };
+    this.walkNodeTree(tree, handleNode);
+  }
+  // Private method to walk through the node tree
+  walkNodeTree(node, handler) {
+    if (node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
+      handler(node);
+    }
+    let child = node.firstChild;
+    while (child) {
+      this.walkNodeTree(child, handler);
+      child = child.nextSibling;
+    }
+  }
+  // Private method to handle SSG nodes
+  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);
       }
+    }
+  }
+  // Method to patch props onto the node
+  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;
+  }
+  // Private method to patch a single prop
+  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") {
+        props[attr].value = node;
+      } else if (startsWith(attr, "on")) {
+        this.patchEventListener(key, node, attr, value);
+      } else {
+        this.patchAttribute(key, node, attr, value);
+      }
+    });
+  }
+  // Private method to patch children
+  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);
+      });
+    }
+  }
+  // Private method to patch event listeners
+  patchEventListener(key, node, attr, listener) {
+    const eventName = attr.slice(2).toLowerCase();
+    const track = this.getNodeTrack(`${key}:${attr}`);
+    track.cleanup = addEventListener(node, eventName, listener);
+  }
+  // Private method to patch attributes
+  patchAttribute(key, element, attr, value) {
+    var _a, _b;
+    const updateKey = `update${capitalizeFirstLetter(attr)}`;
+    if (this.bindValueKeys.includes(attr)) {
+      return;
+    }
+    if ((_a = this.props) == null ? void 0 : _a[updateKey]) {
+      this.bindValueKeys.push(updateKey);
+    }
+    const track = this.getNodeTrack(`${key}:${attr}`);
+    const triggerValue = isSignal(value) ? value : useSignal(value);
+    setAttribute(element, attr, triggerValue.value);
+    const cleanup = useEffect(() => {
+      triggerValue.value = isSignal(value) ? value.value : value;
+      setAttribute(element, attr, triggerValue.value);
+    });
+    let cleanupBind;
+    if (((_b = this.props) == null ? void 0 : _b[updateKey]) && !isComponent(attr)) {
+      cleanupBind = bindNode(element, (value2) => {
+        var _a2;
+        (_a2 = this.props) == null ? void 0 : _a2[updateKey](value2);
+      });
+    }
+    track.cleanup = () => {
+      cleanup && cleanup();
+      cleanupBind && cleanupBind();
     };
-    walk(tree);
-  }
-  /**
-   * 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.
-   */
+  }
+  // Private method to get or create a NodeTrack
   getNodeTrack(trackKey, trackLastNodes, isRoot) {
     var _a;
     let track = this.trackMap.get(trackKey);
@@ -740,131 +881,67 @@ var TemplateNode = class {
     (_a = track.cleanup) == null ? void 0 : _a.call(track);
     return track;
   }
-  patchProp(key, node, props, isRoot) {
-    for (const attr in props) {
-      if (attr === "children" && props.children) {
-        if (!isArray(props.children)) {
-          const trackKey = `${key}:${attr}:${0}`;
-          const track = this.getNodeTrack(trackKey, true, isRoot);
-          patchChild(track, node, props.children, null);
+  // Private method to patch a child node
+  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 {
-          props.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}:${attr}:${index}`;
-            const track = this.getNodeTrack(trackKey, true, isRoot);
-            patchChild(track, node, child, before);
-          });
+          track.lastNodes = patchChildren(parent, track.lastNodes, nextNodes, before);
         }
-      } else if (attr === "ref") {
-        props[attr].value = node;
-      } else if (startsWith(attr, "on")) {
-        const eventName = attr.slice(2).toLocaleLowerCase();
-        const track = this.getNodeTrack(`${key}:${attr}`);
-        const listener = props[attr];
-        track.cleanup = addEventListener(node, eventName, listener);
-      } 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);
-        patchAttribute(track, node, attr, triggerValue.value);
-        const cleanup = useEffect(() => {
-          triggerValue.value = isSignal(val) ? val.value : val;
-          patchAttribute(track, node, attr, triggerValue.value);
-        });
-        let cleanupBind;
-        if (props[updateKey] && !isComponent(attr)) {
-          cleanupBind = bindNode(node, (value) => {
-            props[updateKey](value);
-          });
+      });
+    } 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);
         }
-        track.cleanup = () => {
-          cleanup && cleanup();
-          cleanupBind && cleanupBind();
-        };
-      }
+      });
     }
   }
-};
-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);
+  // Private method to reconcile children nodes
+  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;
       }
-      console.log(track.lastNodes, nextNodes);
-    });
-  } else {
-    coerceArray(child).forEach((node, index) => {
-      const newNode = coerceNode(node);
-      const key = getKey(newNode, index);
-      if (renderContext.isSSR) {
-        track.lastNodes = reconcileChildren(parent, [newNode], before);
+    );
+    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 {
-        track.lastNodes.set(key, newNode);
-        insertChild(parent, newNode, before);
+        insertChild(parent, node, before);
       }
+      result.set(key, node);
     });
+    return result;
   }
-}
-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) {
-    return;
-  }
-  if (isFunction(data)) {
-    track.cleanup = useEffect(() => {
-      setAttribute(element, attr, data());
-    });
-  } else {
-    setAttribute(element, attr, data);
-  }
-}
+};
 
 // 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 };
+      const htmlTemplate = convertToHtmlTag(template);
+      props = { [SINGLE_PROP_KEY]: props };
+      return new TemplateNode(createTemplate(htmlTemplate), props, key);
+    } else if (template === EMPTY_TEMPLATE) {
+      props = { [FRAGMENT_PROP_KEY]: props };
+      return new TemplateNode(createTemplate(EMPTY_TEMPLATE), props, key);
     }
-    template = createTemplate(template);
   }
   return isFunction(template) ? new ComponentNode(template, props, key) : new TemplateNode(template, props, key);
 }
@@ -880,19 +957,17 @@ function createTemplate(html) {
   return template;
 }
 function Fragment(props) {
-  return h("", {
-    children: Array.isArray(props.children) ? props.children.filter(Boolean) : [props.children]
+  return h(EMPTY_TEMPLATE, {
+    children: isArray(props.children) ? props.children.filter(Boolean) : [props.children]
   });
 }
 function onMount(cb) {
-  var _a;
   assertInsideComponent("onMounted");
-  (_a = LifecycleContext.ref) == null ? void 0 : _a.addHook("mounted", cb);
+  LifecycleContext.ref && LifecycleContext.ref.addHook("mounted", cb);
 }
 function onDestroy(cb) {
-  var _a;
   assertInsideComponent("onDestroy");
-  (_a = LifecycleContext.ref) == null ? void 0 : _a.addHook("destroy", cb);
+  LifecycleContext.ref && LifecycleContext.ref.addHook("destroy", cb);
 }
 function assertInsideComponent(hookName, key) {
   if (!LifecycleContext.ref && true) {
@@ -903,21 +978,19 @@ function assertInsideComponent(hookName, key) {
   }
 }
 function useProvide(key, value) {
-  var _a;
   assertInsideComponent("useProvide", key);
-  (_a = LifecycleContext.ref) == null ? void 0 : _a.setContext(key, value);
+  LifecycleContext.ref && LifecycleContext.ref.setContext(key, value);
 }
 function useInject(key, defaultValue) {
   var _a;
   assertInsideComponent("useInject", key);
-  return ((_a = LifecycleContext.ref) == null ? void 0 : _a.getContext(key)) || defaultValue;
+  return (_a = LifecycleContext.ref && LifecycleContext.ref.getContext(key)) != null ? _a : defaultValue;
 }
 function useRef() {
-  const ref = shallowSignal(null);
-  return ref;
+  return shallowSignal(null);
 }
 
-// src/hydration.ts
+// src/server.ts
 function renderToString(component, props) {
   renderContext.setSSG();
   const ssrNode = new SSGNode(component, props || {});