@estjs/template 0.0.11 → 0.0.12

package/dist/template.dev.esm.js

@@ -1,34 +1,75 @@
-import { isString, isFunction, isArray, isNil, startsWith, capitalizeFirstLetter, coerceArray, isObject, isFalsy, kebabCase } from '@estjs/shared';
-import { isSignal, useSignal, useEffect, signalObject, useReactive } from '@estjs/signal';
+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';
 
 /**
-* @estjs/template v0.0.11
+* @estjs/template v0.0.12
 * (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
 * @license MIT
 **/
-
-var _ComponentNode = class _ComponentNode {
-  constructor(template2, props) {
+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 _Hooks = class _Hooks {
+  constructor() {
+    this.hooks = {
+      mounted: /* @__PURE__ */ new Set(),
+      destroy: /* @__PURE__ */ new Set()
+    };
+  }
+  addEventListener() {
+  }
+  removeEventListener() {
+  }
+  addHook(hook, cb) {
+    var _a;
+    (_a = this.hooks[hook]) == null ? void 0 : _a.add(cb);
+  }
+  getContext(context) {
+    return _Hooks.context[context];
+  }
+  setContext(context, value) {
+    _Hooks.context[context] = value;
+  }
+  initRef() {
+    _Hooks.ref = this;
+  }
+  removeRef() {
+    _Hooks.ref = null;
+  }
+};
+_Hooks.ref = null;
+_Hooks.context = {};
+var Hooks = _Hooks;
+var ComponentNode = class extends Hooks {
+  constructor(template2, props, key) {
+    super();
     this.template = template2;
     this.props = props;
+    this.key = key;
     this.proxyProps = {};
-    this.context = {};
     this.emitter = /* @__PURE__ */ new Set();
     this.mounted = false;
     this.rootNode = null;
-    this.hooks = {
-      mounted: /* @__PURE__ */ new Set(),
-      destroy: /* @__PURE__ */ new Set()
-    };
+    this.context = {};
     this.trackMap = /* @__PURE__ */ new Map();
     this.proxyProps = signalObject(
       props,
-      (key) => startsWith(key, "on") || startsWith(key, "update")
+      (key2) => startsWith(key2, "on") || startsWith(key2, "update")
     );
-  }
-  addEventListener() {
-  }
-  removeEventListener() {
+    this.key = this.key || props.key;
   }
   get firstChild() {
     var _a, _b;
@@ -38,16 +79,6 @@ var _ComponentNode = class _ComponentNode {
     var _a, _b;
     return (_b = (_a = this.rootNode) == null ? void 0 : _a.isConnected) != null ? _b : false;
   }
-  addHook(hook, cb) {
-    var _a;
-    (_a = this.hooks[hook]) == null ? void 0 : _a.add(cb);
-  }
-  getContext(context) {
-    return _ComponentNode.context[context];
-  }
-  setContext(context, value) {
-    _ComponentNode.context[context] = value;
-  }
   inheritNode(node) {
     this.context = node.context;
     this.hooks = node.hooks;
@@ -66,9 +97,9 @@ var _ComponentNode = class _ComponentNode {
     if (this.isConnected) {
       return (_b = (_a = this.rootNode) == null ? void 0 : _a.mount(parent, before)) != null ? _b : [];
     }
-    _ComponentNode.ref = this;
+    this.initRef();
     this.rootNode = this.template(useReactive(this.proxyProps, ["children"]));
-    _ComponentNode.ref = null;
+    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());
@@ -98,7 +129,7 @@ var _ComponentNode = class _ComponentNode {
     return track;
   }
   patchProps(props) {
-    var _a, _b, _c, _d, _e;
+    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();
@@ -106,15 +137,11 @@ var _ComponentNode = class _ComponentNode {
         const cleanup = addEventListener(this.rootNode.nodes[0], event, listener);
         this.emitter.add(cleanup);
       } else if (key === "ref") {
-        if (isSignal(prop)) {
-          props[key].value = (_b = this.rootNode) == null ? void 0 : _b.nodes[0];
-        } else if (isFunction(prop)) {
-          props[key]((_c = this.rootNode) == null ? void 0 : _c.nodes[0]);
-        }
+        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 = (_e = (_d = this.proxyProps)[key]) != null ? _e : _d[key] = useSignal(prop);
+        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;
@@ -124,12 +151,9 @@ var _ComponentNode = class _ComponentNode {
     this.props = props;
   }
 };
-_ComponentNode.ref = null;
-_ComponentNode.context = {};
-var ComponentNode = _ComponentNode;
 
 // src/template.ts
-function h(_template, props) {
+function h(_template, props, key) {
   if (isString(_template)) {
     if (isHtmlTagName(_template)) {
       _template = convertToHtmlTag(_template);
@@ -144,15 +168,17 @@ function h(_template, props) {
     }
     _template = template(_template);
   }
-  return isFunction(_template) ? new ComponentNode(_template, props) : new TemplateNode(_template, props);
+  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) {
-  html = closeHtmlTags(html);
   const template2 = document.createElement("template");
-  template2.innerHTML = html;
+  template2.innerHTML = closeHtmlTags(html);
   return template2;
 }
 function Fragment(props) {
@@ -327,15 +353,6 @@ function convertToHtmlTag(tagName) {
     return `<${tagName}></${tagName}>`;
   }
 }
-function generateShortId() {
-  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  let result = "";
-  const charactersLength = characters.length;
-  for (let i = 0; i < 8; i++) {
-    result += characters.charAt(Math.floor(Math.random() * charactersLength));
-  }
-  return result;
-}
 
 // src/patch.ts
 function patchChildren(parent, childrenMap, nextChildren, before) {
@@ -452,6 +469,7 @@ var TemplateNode = class _TemplateNode {
     this.provides = {};
     this.trackMap = /* @__PURE__ */ new Map();
     this.parent = null;
+    this.key = this.key || props.key;
   }
   get firstChild() {
     var _a;
@@ -471,7 +489,6 @@ var TemplateNode = class _TemplateNode {
       this.nodes.forEach((node) => insertChild(parent, node, before));
       return this.nodes;
     }
-    this.key = this.key || generateShortId();
     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_")) {
@@ -575,11 +592,7 @@ var TemplateNode = class _TemplateNode {
           });
         }
       } else if (attr === "ref") {
-        if (isSignal(props[attr])) {
-          props[attr].value = node;
-        } else if (isFunction(props[attr])) {
-          props[attr](node);
-        }
+        props[attr].value = node;
       } else if (startsWith(attr, "on")) {
         const eventName = attr.slice(2).toLocaleLowerCase();
         const track = this.getNodeTrack(`${key}:${attr}`);
@@ -636,85 +649,151 @@ function patchChild(track, parent, child, before) {
     });
   }
 }
-
-// src/hooks.ts
 function onMount(cb) {
   var _a;
   throwIfOutsideComponent("onMounted");
-  (_a = ComponentNode.ref) == null ? void 0 : _a.addHook("mounted", cb);
+  (_a = Hooks.ref) == null ? void 0 : _a.addHook("mounted", cb);
 }
 function onDestroy(cb) {
   var _a;
   throwIfOutsideComponent("onDestroy");
-  (_a = ComponentNode.ref) == null ? void 0 : _a.addHook("destroy", cb);
+  (_a = Hooks.ref) == null ? void 0 : _a.addHook("destroy", cb);
 }
-function throwIfOutsideComponent(hook) {
-  if (!ComponentNode.ref) {
+function throwIfOutsideComponent(hook, key) {
+  if (!Hooks.ref) {
     console.error(
-      `"${hook}" can only be called within the component function body
+      `"${hook}"(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");
-  (_a = ComponentNode.ref) == null ? void 0 : _a.setContext(key, value);
+  throwIfOutsideComponent("useProvide", key);
+  (_a = Hooks.ref) == null ? void 0 : _a.setContext(key, value);
 }
 function useInject(key, defaultValue) {
   var _a;
-  throwIfOutsideComponent("useInject");
-  return ((_a = ComponentNode.ref) == null ? void 0 : _a.getContext(key)) || defaultValue;
-}
-function convertJsonToAttributes(json) {
-  return Object.entries(json).map(([key, value]) => `${key}=${JSON.stringify(escape(String(value)))}`).join(" ");
-}
-function renderTemplate(template2, props) {
-  if (isFunction(template2)) {
-    return template2(props);
-  }
-  const templateCollection = Array.isArray(template2) ? template2.reduce((acc, tmpl, index) => {
-    acc[index + 1] = { template: tmpl };
-    return acc;
-  }, {}) : template2;
-  const childNodesMap = {};
-  const processedTemplates = {};
-  if (isObject(templateCollection)) {
-    for (const [key, tmpl] of Object.entries(templateCollection)) {
-      const prop = props[key];
-      if (prop) {
-        for (const propKey in prop) {
-          if (startsWith(propKey, "on") && isFunction(prop[propKey])) {
-            delete prop[propKey];
-          }
-        }
+  throwIfOutsideComponent("useInject", key);
+  return ((_a = Hooks.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;
+    }
+  });
+}
+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);
+  }
+}
+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) {
-          for (const [child, idx] of prop.children) {
-            if (!childNodesMap[idx]) childNodesMap[idx] = [];
-            childNodesMap[idx].push(child);
-          }
-          delete 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);
+            }
+          });
         }
-      }
-      processedTemplates[key] = { template: tmpl.template, props: prop };
+        this.processedTemplates[key] = {
+          template: tmpl.template,
+          props: prop
+        };
+      });
     }
   }
-  return Object.entries(processedTemplates).map(([key, { template: tmpl, props: prop }]) => {
-    let renderedString = tmpl;
-    if (prop) {
-      renderedString += ` ${convertJsonToAttributes(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 (childNodesMap[key]) {
-      renderedString += childNodesMap[key].map((child) => renderTemplate(child, prop)).join("");
+    if (this.template instanceof _ServerNode) {
+      return this.template.mount();
     }
-    return renderedString;
-  }).join("");
+    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 renderTemplate(component, props);
-}
-function renderSSG(component, root, props = {}) {
-  root.innerHTML = renderTemplate(component, props);
+  return ssg(component, props).mount();
 }
 
-export { ComponentNode, Fragment, TemplateNode, h, isJsxElement, nextTick, onDestroy, onMount, renderSSG, renderTemplate, renderToString, template, useInject, useProvide };
+export { ComponentNode, Fragment, TemplateNode, h, isComponent, isJsxElement, nextTick, onDestroy, onMount, renderToString, ssg, template, useInject, useProvide, useRef };

package/dist/template.esm.js

@@ -1,14 +1,14 @@
-import { isString, isFunction, isArray, isNil, startsWith, capitalizeFirstLetter, coerceArray, isObject, isFalsy, kebabCase } from '@estjs/shared';
-import { isSignal, useSignal, useEffect, signalObject, useReactive } from '@estjs/signal';
+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';
 
 /**
-* @estjs/template v0.0.11
+* @estjs/template v0.0.12
 * (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
 * @license MIT
 **/
-var N=class N{constructor(e,n){this.template=e;this.props=n;this.proxyProps={};this.context={};this.emitter=new Set;this.mounted=!1;this.rootNode=null;this.hooks={mounted:new Set,destroy:new Set};this.trackMap=new Map;this.proxyProps=signalObject(n,o=>startsWith(o,"on")||startsWith(o,"update"));}addEventListener(){}removeEventListener(){}get firstChild(){var e,n;return (n=(e=this.rootNode)==null?void 0:e.firstChild)!=null?n:null}get isConnected(){var e,n;return (n=(e=this.rootNode)==null?void 0:e.isConnected)!=null?n:!1}addHook(e,n){var o;(o=this.hooks[e])==null||o.add(n);}getContext(e){return N.context[e]}setContext(e,n){N.context[e]=n;}inheritNode(e){this.context=e.context,this.hooks=e.hooks,Object.assign(this.proxyProps,e.proxyProps),this.rootNode=e.rootNode,this.trackMap=e.trackMap;let n=this.props;this.props=e.props,this.patchProps(n);}mount(e,n){var r,s,c,i;if(!isFunction(this.template))throw new Error("Template must be a function");if(this.isConnected)return (s=(r=this.rootNode)==null?void 0:r.mount(e,n))!=null?s:[];N.ref=this,this.rootNode=this.template(useReactive(this.proxyProps,["children"])),N.ref=null,this.mounted=!0;let o=(i=(c=this.rootNode)==null?void 0:c.mount(e,n))!=null?i:[];return this.hooks.mounted.forEach(a=>a()),this.patchProps(this.props),o}unmount(){var e;this.hooks.destroy.forEach(n=>n()),Object.values(this.hooks).forEach(n=>n.clear()),(e=this.rootNode)==null||e.unmount(),this.rootNode=null,this.proxyProps={},this.mounted=!1,this.emitter.forEach(n=>n());}getNodeTrack(e,n){let o=this.trackMap.get(e);return o||(o={cleanup:()=>{}},this.trackMap.set(e,o)),n||o.cleanup(),o}patchProps(e){var n,o,r,s,c;for(let[i,a]of Object.entries(e))if(startsWith(i,"on")&&((n=this.rootNode)!=null&&n.nodes)){let u=i.slice(2).toLowerCase(),l=a,d=m(this.rootNode.nodes[0],u,l);this.emitter.add(d);}else if(i==="ref")isSignal(a)?e[i].value=(o=this.rootNode)==null?void 0:o.nodes[0]:isFunction(a)&&e[i]((r=this.rootNode)==null?void 0:r.nodes[0]);else if(startsWith(i,"update"))e[i]=isSignal(a)?a.value:a;else if(i!=="children"){let u=(c=(s=this.proxyProps)[i])!=null?c:s[i]=useSignal(a),l=this.getNodeTrack(i);l.cleanup=useEffect(()=>{u.value=isFunction(a)?a():a;});}this.props=e;}};N.ref=null,N.context={};var f=N;function ie(t,e){return isString(t)&&(O(t)&&(t=X(t),e={1:e}),t===""&&(e={0:e}),t=J(t)),isFunction(t)?new f(t,e):new E(t,e)}function h(t){return t instanceof f||t instanceof E}function J(t){t=F(t);let e=document.createElement("template");return e.innerHTML=t,e}function ce(t){return t.children}var D="area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr",le="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";function w(t){if(h(t)||t instanceof Node)return t;let e=isFalsy(t)?"":String(t);return document.createTextNode(e)}function g(t,e,n=null){let o=h(n)?n.firstChild:n;h(e)?e.mount(t,o):o?o.before(e):t.append(e);}function x(t){h(t)?t.unmount():t.parentNode&&t.remove();}function A(t,e,n){g(t,e,n),x(n);}function H(t,e,n){if(e==="class"){typeof n=="string"?t.className=n:Array.isArray(n)?t.className=n.join(" "):n&&typeof n=="object"&&(t.className=Object.entries(n).reduce((o,[r,s])=>o+(s?` ${r}`:""),"").trim());return}if(e==="style"){if(typeof n=="string")t.style.cssText=n;else if(n&&typeof n=="object"){let o=n;Object.keys(o).forEach(r=>{t.style.setProperty(kebabCase(r),String(o[r]));});}return}isFalsy(n)?t.removeAttribute(e):n===!0?t.setAttribute(e,""):t instanceof HTMLInputElement?t.value=String(n):t.setAttribute(e,String(n));}function q(t,e){if(t instanceof HTMLInputElement)switch(t.type){case"checkbox":return m(t,"change",()=>{e(!!t.checked);});case"date":return m(t,"change",()=>{e(t.value?t.value:"");});case"file":return m(t,"change",()=>{t.files&&e(t.files);});case"number":return m(t,"input",()=>{let n=Number.parseFloat(t.value);e(Number.isNaN(n)?"":String(n));});case"radio":return m(t,"change",()=>{e(t.checked?t.value:"");});case"text":return m(t,"input",()=>{e(t.value);})}if(t instanceof HTMLSelectElement)return m(t,"change",()=>{e(t.value);});if(t instanceof HTMLTextAreaElement)return m(t,"input",()=>{e(t.value);})}var V=Promise.resolve();function ue(t){return t?V.then(t):V}function m(t,e,n){return t.addEventListener(e,n),()=>t.removeEventListener(e,n)}function F(t){let e=D.split(","),n=[],o=[],r=/<\/?([\da-z-]+)([^>]*)>/gi,s=0;for(;;){let c=r.exec(t);if(!c)break;let[i,a]=c,u=i[1]==="/";if(o.push(t.slice(s,c.index)),s=c.index+i.length,u){for(;n.length>0&&n[n.length-1]!==a;){let l=n.pop();l&&o.push(`</${l}>`);}n.length>0&&n.pop();}else e.includes(a)||n.push(a);o.push(i);}for(o.push(t.slice(s));n.length>0;){let c=n.pop();c&&o.push(`</${c}>`);}return o.join("")}function O(t){return le.split(",").includes(t)}function X(t){return D.split(",").includes(t)?`<${t}/>`:`<${t}></${t}>`}function z(){let t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",e="",n=t.length;for(let o=0;o<8;o++)e+=t.charAt(Math.floor(Math.random()*n));return e}function G(t,e,n,o){let r=new Map,s=Array.from(e.values()),c=s.length;if(e.size>0&&n.length===0){if(t.childNodes.length===c+(o?1:0))t.innerHTML="",o&&g(t,o);else {let l=document.createRange(),d=s[0],p=h(d)?d.firstChild:d;l.setStartBefore(p),o?l.setEndBefore(o):l.setEndAfter(t),l.deleteContents();}return s.forEach(l=>{h(l)&&l.unmount();}),r}let i=[],a=pe(n),u=0;for(let[l,d]of n.entries()){let p=s[u],b=k(p,l);for(;p&&!a.has(b);)x(p),e.delete(b),p=s[++u],b=k(p,l);let P=k(d,l),L=e.get(P);if(L&&(d=de(t,L,d)),p)if(p===L)u++;else {let R=document.createComment("");g(t,R,p),i.push([R,d]);}else g(t,d,o);r.set(P,d);}return i.forEach(([l,d])=>A(t,d,l)),e.forEach((l,d)=>{l.isConnected&&!r.has(d)&&x(l);}),r}function de(t,e,n){return e===n?e:h(e)&&h(n)&&e.template===n.template?(n.inheritNode(e),n):e instanceof Text&&n instanceof Text?(e.textContent!==n.textContent&&(e.textContent=n.textContent),e):(A(t,n,e),n)}function pe(t){let e=new Map;for(let[n,o]of t.entries()){let r=k(o,n);e.set(r,o);}return e}function k(t,e){if(h(t)){let n=t.key;if(n!=null)return String(n)}return `_$${e}$`}var E=class t{constructor(e,n,o){this.template=e;this.props=n;this.key=o;this.treeMap=new Map;this.mounted=!1;this.nodes=[];this.provides={};this.trackMap=new Map;this.parent=null;}get firstChild(){var e;return (e=this.nodes[0])!=null?e:null}get isConnected(){return this.mounted}addEventListener(){}removeEventListener(){}mount(e,n){var s;if(this.parent=e,this.isConnected)return this.nodes.forEach(c=>g(e,c,n)),this.nodes;this.key=this.key||z();let o=this.template.content.cloneNode(!0),r=o.firstChild;return (s=r==null?void 0:r.hasAttribute)!=null&&s.call(r,"_svg_")&&(r.remove(),r==null||r.childNodes.forEach(c=>{o.append(c);})),this.nodes=Array.from(o.childNodes),this.mapNodeTree(e,o),g(e,o,n),this.patchNodes(this.props),this.mounted=!0,this.nodes}unmount(){this.trackMap.forEach(e=>{var n,o;(n=e.cleanup)==null||n.call(e),(o=e.lastNodes)==null||o.forEach(r=>{e.isRoot?x(r):r instanceof t&&r.unmount();});}),this.trackMap.clear(),this.treeMap.clear(),this.nodes.forEach(e=>x(e)),this.nodes=[],this.mounted=!1;}mapNodeTree(e,n){let o=1;this.treeMap.set(0,e);let r=s=>{s.nodeType!==Node.DOCUMENT_FRAGMENT_NODE&&this.treeMap.set(o++,s);let c=s.firstChild;for(;c;)r(c),c=c.nextSibling;};r(n);}patchNodes(e){for(let n in e){let o=Number(n),r=this.treeMap.get(o);if(r){let s=this.props[n];this.patchNode(n,r,s,o===0);}}this.props=e;}getNodeTrack(e,n,o){var s;let r=this.trackMap.get(e);return r||(r={cleanup:()=>{}},n&&(r.lastNodes=new Map),o&&(r.isRoot=!0),this.trackMap.set(e,r)),(s=r.cleanup)==null||s.call(r),r}inheritNode(e){this.mounted=e.mounted,this.nodes=e.nodes,this.trackMap=e.trackMap,this.treeMap=e.treeMap;let n=this.props;this.props=e.props,this.patchNodes(n);}patchNode(e,n,o,r){for(let s in o)if(s==="children"&&o.children)if(isArray(o.children))o.children.filter(Boolean).forEach((c,i)=>{var b;let[a,u]=isArray(c)?c:[c,null],l=isNil(u)?null:(b=this.treeMap.get(u))!=null?b:null,d=`${e}:${s}:${i}`,p=this.getNodeTrack(d,!0,r);Z(p,n,a,l);});else {let c=`${e}:${s}:0`,i=this.getNodeTrack(c,!0,r);Z(i,n,o.children,null);}else if(s==="ref")isSignal(o[s])?o[s].value=n:isFunction(o[s])&&o[s](n);else if(startsWith(s,"on")){let c=s.slice(2).toLocaleLowerCase(),i=this.getNodeTrack(`${e}:${s}`),a=o[s];i.cleanup=m(n,c,a);}else if(!startsWith(s,"update")){let c=this.getNodeTrack(`${e}:${s}`),i=o[s],a=isSignal(i)?i:useSignal(i);Y(c,n,s,a.value);let u=useEffect(()=>{a.value=isSignal(i)?i.value:i,Y(c,n,s,a.value);}),l,d=`update${capitalizeFirstLetter(s)}`;o[d]&&(l=q(n,p=>{o[d](p);})),c.cleanup=()=>{u&&u(),l&&l();};}}};function Y(t,e,n,o){let r=e;r.setAttribute&&(isFunction(o)?t.cleanup=useEffect(()=>{H(r,n,o());}):H(r,n,o));}function Z(t,e,n,o){isFunction(n)?t.cleanup=useEffect(()=>{let r=coerceArray(n()).map(w);t.lastNodes=G(e,t.lastNodes,r,o);}):coerceArray(n).forEach((r,s)=>{let c=w(r);t.lastNodes.set(String(s),c),g(e,c,o);});}function ge(t){var e;C("onMounted"),(e=f.ref)==null||e.addHook("mounted",t);}function Ne(t){var e;C("onDestroy"),(e=f.ref)==null||e.addHook("destroy",t);}function C(t){f.ref||console.error(`"${t}" can only be called within the component function body
-      and cannot be used in asynchronous or deferred calls.`);}function ye(t,e){var n;C("useProvide"),(n=f.ref)==null||n.setContext(t,e);}function Te(t,e){var n;return C("useInject"),((n=f.ref)==null?void 0:n.getContext(t))||e}function Ee(t){return Object.entries(t).map(([e,n])=>`${e}=${JSON.stringify(escape(String(n)))}`).join(" ")}function M(t,e){if(isFunction(t))return t(e);let n=Array.isArray(t)?t.reduce((s,c,i)=>(s[i+1]={template:c},s),{}):t,o={},r={};if(isObject(n))for(let[s,c]of Object.entries(n)){let i=e[s];if(i){for(let a in i)startsWith(a,"on")&&isFunction(i[a])&&delete i[a];if(i.children){for(let[a,u]of i.children)o[u]||(o[u]=[]),o[u].push(a);delete i.children;}}r[s]={template:c.template,props:i};}return Object.entries(r).map(([s,{template:c,props:i}])=>{let a=c;return i&&(a+=` ${Ee(i)}`),o[s]&&(a+=o[s].map(u=>M(u,i)).join("")),a}).join("")}function ve(t,e){return M(t,e)}function ke(t,e,n={}){e.innerHTML=M(t,n);}
+var re=Object.defineProperty;var I=Object.getOwnPropertySymbols;var ie=Object.prototype.hasOwnProperty,se=Object.prototype.propertyIsEnumerable;var O=(t,n,e)=>n in t?re(t,n,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[n]=e,J=(t,n)=>{for(var e in n||(n={}))ie.call(n,e)&&O(t,e,n[e]);if(I)for(var e of I(n))se.call(n,e)&&O(t,e,n[e]);return t};var N=class N{constructor(){this.hooks={mounted:new Set,destroy:new Set};}addEventListener(){}removeEventListener(){}addHook(n,e){var o;(o=this.hooks[n])==null||o.add(e);}getContext(n){return N.context[n]}setContext(n,e){N.context[n]=e;}initRef(){N.ref=this;}removeRef(){N.ref=null;}};N.ref=null,N.context={};var h=N,y=class extends h{constructor(e,o,r){super();this.template=e;this.props=o;this.key=r;this.proxyProps={};this.emitter=new Set;this.mounted=!1;this.rootNode=null;this.context={};this.trackMap=new Map;this.proxyProps=signalObject(o,i=>startsWith(i,"on")||startsWith(i,"update")),this.key=this.key||o.key;}get firstChild(){var e,o;return (o=(e=this.rootNode)==null?void 0:e.firstChild)!=null?o:null}get isConnected(){var e,o;return (o=(e=this.rootNode)==null?void 0:e.isConnected)!=null?o:!1}inheritNode(e){this.context=e.context,this.hooks=e.hooks,Object.assign(this.proxyProps,e.proxyProps),this.rootNode=e.rootNode,this.trackMap=e.trackMap;let o=this.props;this.props=e.props,this.patchProps(o);}mount(e,o){var i,s,a,l;if(!isFunction(this.template))throw new Error("Template must be a function");if(this.isConnected)return (s=(i=this.rootNode)==null?void 0:i.mount(e,o))!=null?s:[];this.initRef(),this.rootNode=this.template(useReactive(this.proxyProps,["children"])),this.removeRef(),this.mounted=!0;let r=(l=(a=this.rootNode)==null?void 0:a.mount(e,o))!=null?l:[];return this.hooks.mounted.forEach(d=>d()),this.patchProps(this.props),r}unmount(){var e;this.hooks.destroy.forEach(o=>o()),Object.values(this.hooks).forEach(o=>o.clear()),(e=this.rootNode)==null||e.unmount(),this.rootNode=null,this.proxyProps={},this.mounted=!1,this.emitter.forEach(o=>o());}getNodeTrack(e,o){let r=this.trackMap.get(e);return r||(r={cleanup:()=>{}},this.trackMap.set(e,r)),o||r.cleanup(),r}patchProps(e){var o,r,i,s;for(let[a,l]of Object.entries(e))if(startsWith(a,"on")&&((o=this.rootNode)!=null&&o.nodes)){let d=a.slice(2).toLowerCase(),c=l,u=m(this.rootNode.nodes[0],d,c);this.emitter.add(u);}else if(a==="ref")e[a].value=(r=this.rootNode)==null?void 0:r.nodes[0];else if(startsWith(a,"update"))e[a]=isSignal(l)?l.value:l;else if(a!=="children"){let d=(s=(i=this.proxyProps)[a])!=null?s:i[a]=useSignal(l),c=this.getNodeTrack(a);c.cleanup=useEffect(()=>{d.value=isFunction(l)?l():l;});}this.props=e;}};function fe(t,n,e){return isString(t)&&(B(t)&&(t=D(t),n={1:n}),t===""&&(n={0:n}),t=X(t)),isFunction(t)?new y(t,n,e):new E(t,n,e)}function he(t){return t instanceof y}function f(t){return t instanceof y||t instanceof E}function X(t){let n=document.createElement("template");return n.innerHTML=V(t),n}function ge(t){return t.children}var W="area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr",ye="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";function j(t){if(f(t)||t instanceof Node)return t;let n=isFalsy(t)?"":String(t);return document.createTextNode(n)}function g(t,n,e=null){let o=f(e)?e.firstChild:e;f(n)?n.mount(t,o):o?o.before(n):t.append(n);}function b(t){f(t)?t.unmount():t.parentNode&&t.remove();}function H(t,n,e){g(t,n,e),b(e);}function R(t,n,e){if(n==="class"){typeof e=="string"?t.className=e:Array.isArray(e)?t.className=e.join(" "):e&&typeof e=="object"&&(t.className=Object.entries(e).reduce((o,[r,i])=>o+(i?` ${r}`:""),"").trim());return}if(n==="style"){if(typeof e=="string")t.style.cssText=e;else if(e&&typeof e=="object"){let o=e;Object.keys(o).forEach(r=>{t.style.setProperty(kebabCase(r),String(o[r]));});}return}isFalsy(e)?t.removeAttribute(n):e===!0?t.setAttribute(n,""):t instanceof HTMLInputElement?t.value=String(e):t.setAttribute(n,String(e));}function G(t,n){if(t instanceof HTMLInputElement)switch(t.type){case"checkbox":return m(t,"change",()=>{n(!!t.checked);});case"date":return m(t,"change",()=>{n(t.value?t.value:"");});case"file":return m(t,"change",()=>{t.files&&n(t.files);});case"number":return m(t,"input",()=>{let e=Number.parseFloat(t.value);n(Number.isNaN(e)?"":String(e));});case"radio":return m(t,"change",()=>{n(t.checked?t.value:"");});case"text":return m(t,"input",()=>{n(t.value);})}if(t instanceof HTMLSelectElement)return m(t,"change",()=>{n(t.value);});if(t instanceof HTMLTextAreaElement)return m(t,"input",()=>{n(t.value);})}var z=Promise.resolve();function Te(t){return t?z.then(t):z}function m(t,n,e){return t.addEventListener(n,e),()=>t.removeEventListener(n,e)}function V(t){let n=W.split(","),e=[],o=[],r=/<\/?([\da-z-]+)([^>]*)>/gi,i=0;for(;;){let s=r.exec(t);if(!s)break;let[a,l]=s,d=a[1]==="/";if(o.push(t.slice(i,s.index)),i=s.index+a.length,d){for(;e.length>0&&e[e.length-1]!==l;){let c=e.pop();c&&o.push(`</${c}>`);}e.length>0&&e.pop();}else n.includes(l)||e.push(l);o.push(a);}for(o.push(t.slice(i));e.length>0;){let s=e.pop();s&&o.push(`</${s}>`);}return o.join("")}function B(t){return ye.split(",").includes(t)}function D(t){return W.split(",").includes(t)?`<${t}/>`:`<${t}></${t}>`}function U(t,n,e,o){let r=new Map,i=Array.from(n.values()),s=i.length;if(n.size>0&&e.length===0){if(t.childNodes.length===s+(o?1:0))t.innerHTML="",o&&g(t,o);else {let c=document.createRange(),u=i[0],p=f(u)?u.firstChild:u;c.setStartBefore(p),o?c.setEndBefore(o):c.setEndAfter(t),c.deleteContents();}return i.forEach(c=>{f(c)&&c.unmount();}),r}let a=[],l=be(e),d=0;for(let[c,u]of e.entries()){let p=i[d],x=M(p,c);for(;p&&!l.has(x);)b(p),n.delete(x),p=i[++d],x=M(p,c);let $=M(u,c),A=n.get($);if(A&&(u=ve(t,A,u)),p)if(p===A)d++;else {let K=document.createComment("");g(t,K,p),a.push([K,u]);}else g(t,u,o);r.set($,u);}return a.forEach(([c,u])=>H(t,u,c)),n.forEach((c,u)=>{c.isConnected&&!r.has(u)&&b(c);}),r}function ve(t,n,e){return n===e?n:f(n)&&f(e)&&n.template===e.template?(e.inheritNode(n),e):n instanceof Text&&e instanceof Text?(n.textContent!==e.textContent&&(n.textContent=e.textContent),n):(H(t,e,n),e)}function be(t){let n=new Map;for(let[e,o]of t.entries()){let r=M(o,e);n.set(r,o);}return n}function M(t,n){if(f(t)){let e=t.key;if(e!=null)return String(e)}return `_$${n}$`}var E=class t{constructor(n,e,o){this.template=n;this.props=e;this.key=o;this.treeMap=new Map;this.mounted=!1;this.nodes=[];this.provides={};this.trackMap=new Map;this.parent=null;this.key=this.key||e.key;}get firstChild(){var n;return (n=this.nodes[0])!=null?n:null}get isConnected(){return this.mounted}addEventListener(){}removeEventListener(){}mount(n,e){var i;if(this.parent=n,this.isConnected)return this.nodes.forEach(s=>g(n,s,e)),this.nodes;let o=this.template.content.cloneNode(!0),r=o.firstChild;return (i=r==null?void 0:r.hasAttribute)!=null&&i.call(r,"_svg_")&&(r.remove(),r==null||r.childNodes.forEach(s=>{o.append(s);})),this.nodes=Array.from(o.childNodes),this.mapNodeTree(n,o),g(n,o,e),this.patchNodes(this.props),this.mounted=!0,this.nodes}unmount(){this.trackMap.forEach(n=>{var e,o;(e=n.cleanup)==null||e.call(n),(o=n.lastNodes)==null||o.forEach(r=>{n.isRoot?b(r):r instanceof t&&r.unmount();});}),this.trackMap.clear(),this.treeMap.clear(),this.nodes.forEach(n=>b(n)),this.nodes=[],this.mounted=!1;}mapNodeTree(n,e){let o=1;this.treeMap.set(0,n);let r=i=>{i.nodeType!==Node.DOCUMENT_FRAGMENT_NODE&&this.treeMap.set(o++,i);let s=i.firstChild;for(;s;)r(s),s=s.nextSibling;};r(e);}patchNodes(n){for(let e in n){let o=Number(e),r=this.treeMap.get(o);if(r){let i=this.props[e];this.patchNode(e,r,i,o===0);}}this.props=n;}getNodeTrack(n,e,o){var i;let r=this.trackMap.get(n);return r||(r={cleanup:()=>{}},e&&(r.lastNodes=new Map),o&&(r.isRoot=!0),this.trackMap.set(n,r)),(i=r.cleanup)==null||i.call(r),r}inheritNode(n){this.mounted=n.mounted,this.nodes=n.nodes,this.trackMap=n.trackMap,this.treeMap=n.treeMap;let e=this.props;this.props=n.props,this.patchNodes(e);}patchNode(n,e,o,r){for(let i in o)if(i==="children"&&o.children)if(isArray(o.children))o.children.filter(Boolean).forEach((s,a)=>{var x;let[l,d]=isArray(s)?s:[s,null],c=isNil(d)?null:(x=this.treeMap.get(d))!=null?x:null,u=`${n}:${i}:${a}`,p=this.getNodeTrack(u,!0,r);te(p,e,l,c);});else {let s=`${n}:${i}:0`,a=this.getNodeTrack(s,!0,r);te(a,e,o.children,null);}else if(i==="ref")o[i].value=e;else if(startsWith(i,"on")){let s=i.slice(2).toLocaleLowerCase(),a=this.getNodeTrack(`${n}:${i}`),l=o[i];a.cleanup=m(e,s,l);}else if(!startsWith(i,"update")){let s=this.getNodeTrack(`${n}:${i}`),a=o[i],l=isSignal(a)?a:useSignal(a);ee(s,e,i,l.value);let d=useEffect(()=>{l.value=isSignal(a)?a.value:a,ee(s,e,i,l.value);}),c,u=`update${capitalizeFirstLetter(i)}`;o[u]&&(c=G(e,p=>{o[u](p);})),s.cleanup=()=>{d&&d(),c&&c();};}}};function ee(t,n,e,o){let r=n;r.setAttribute&&(isFunction(o)?t.cleanup=useEffect(()=>{R(r,e,o());}):R(r,e,o));}function te(t,n,e,o){isFunction(e)?t.cleanup=useEffect(()=>{let r=coerceArray(e()).map(j);t.lastNodes=U(n,t.lastNodes,r,o);}):coerceArray(e).forEach((r,i)=>{let s=j(r);t.lastNodes.set(String(i),s),g(n,s,o);});}function Se(t){var n;S("onMounted"),(n=h.ref)==null||n.addHook("mounted",t);}function we(t){var n;S("onDestroy"),(n=h.ref)==null||n.addHook("destroy",t);}function S(t,n){h.ref||console.error(`"${t}"(key: ${isSymbol(n)?n.toString():n}) can only be called within the component function body
+      and cannot be used in asynchronous or deferred calls.`);}function Le(t,n){var e;S("useProvide",t),(e=h.ref)==null||e.setContext(t,n);}function Ae(t,n){var e;return S("useInject",t),((e=h.ref)==null?void 0:e.getContext(t))||n}function je(){return shallowSignal(null)}function Ke(t){return Object.entries(t).map(([n,e])=>n==="children"||isFunction(e)?"":`${n}="${escape(String(e))}"`).filter(Boolean).join(" ")}function Ie(t){Object.keys(t).forEach(n=>{isFunction(t[n])&&delete t[n],isSignal(t[n])&&(t[n]=t[n].value);});}function Oe(t,n,e,o,r,i){if(isSignal(t))o.template+=t.value;else if(t instanceof L){let s=i?String(i):`${e}`;r[s]||(r[s]=[]);let a=t.mount();r[s].push(isFunction(a)?a(n):isSignal(a)?a.value:a);}else o.template+=isFunction(t)?t(n):String(t);}var L=class t extends h{constructor(e,o={},r){super();this.template=e;this.props=o;this.key=r;this.childNodesMap={};this.processedTemplates={};}mount(){this.initRef();let e=this.render();return this.removeRef(),e}initTemplates(){let e=Array.isArray(this.template)?this.template.reduce((o,r,i)=>(o[i+1]={template:r},o),{}):this.template;isObject(e)&&Object.entries(e).forEach(([o,r])=>{let i=J({},this.props[o]);Ie(i),i.children&&i.children.forEach(s=>{let[a,l]=isArray(s)?s:[s,null];if(isFunction(a)){let d=a(i);Oe(d,i,o,r,this.childNodesMap,l);}else r.template+=isSignal(a)?a.value:String(a);}),this.processedTemplates[o]={template:r.template,props:i};});}render(){if(isFunction(this.template)){let e=this.template(this.props);return e instanceof t?e.mount():String(e)}return this.template instanceof t?this.template.mount():(this.initTemplates(),Object.entries(this.processedTemplates).map(([e,{template:o,props:r}])=>{let i=o;return r&&Object.keys(r).length>0&&(i+=` ${Ke(r)}`),this.childNodesMap[e]&&(i=i.replace("<!>",this.renderChildren(this.childNodesMap[e]))),i}).join(""))}renderChildren(e){return coerceArray(e).map(String).join("")}};function oe(t,n){return new L(t,n)}function Je(t,n){return oe(t,n).mount()}
 
-export { f as ComponentNode, ce as Fragment, E as TemplateNode, ie as h, h as isJsxElement, ue as nextTick, Ne as onDestroy, ge as onMount, ke as renderSSG, M as renderTemplate, ve as renderToString, J as template, Te as useInject, ye as useProvide };
+export { y as ComponentNode, ge as Fragment, E as TemplateNode, fe as h, he as isComponent, f as isJsxElement, Te as nextTick, we as onDestroy, Se as onMount, Je as renderToString, oe as ssg, X as template, Ae as useInject, Le as useProvide, je as useRef };
 //# sourceMappingURL=template.esm.js.map
 //# sourceMappingURL=template.esm.js.map