@estjs/template 0.0.11 → 0.0.12

package/dist/template.d.ts

@@ -2217,8 +2217,8 @@ declare class TemplateNode$1 implements JSX.Element {
     template: HTMLTemplateElement;
     props: Record<string, unknown>;
     key?: string | undefined;
-    treeMap: Map<number, Node>;
     constructor(template: HTMLTemplateElement, props: Record<string, unknown>, key?: string | undefined);
+    treeMap: Map<number, Node>;
     mounted: boolean;
     nodes: Node[];
     provides: Record<string, unknown>;
@@ -2238,27 +2238,31 @@ declare class TemplateNode$1 implements JSX.Element {
 }
 
 type Hook = 'mounted' | 'destroy';
-declare class ComponentNode$1 implements JSX.Element {
-    template: EssorComponent;
-    props: Record<string, any>;
-    constructor(template: EssorComponent, props: Record<string, any>);
+declare class Hooks {
     addEventListener(): void;
     removeEventListener(): void;
-    static ref: ComponentNode$1 | null;
+    static ref: Hooks | null;
     static context: Record<symbol, Signal$1<any>>;
-    id?: string;
+    hooks: Record<Hook, Set<() => void>>;
+    addHook(hook: Hook, cb: () => void): void;
+    getContext<T>(context: symbol | string | number): T | undefined;
+    setContext<T>(context: symbol | string | number, value: T): void;
+    initRef(): void;
+    removeRef(): void;
+}
+declare class ComponentNode$1 extends Hooks implements JSX.Element {
+    template: EssorComponent;
+    props: Record<string, any>;
+    key?: string | undefined;
+    constructor(template: EssorComponent, props: Record<string, any>, key?: string | undefined);
     private proxyProps;
-    context: Record<symbol | string | number, any>;
     emitter: Set<Function>;
     mounted: boolean;
     rootNode: TemplateNode$1 | null;
-    hooks: Record<Hook, Set<() => void>>;
+    context: Record<symbol | string | number, any>;
     private trackMap;
     get firstChild(): Node | null;
     get isConnected(): boolean;
-    addHook(hook: Hook, cb: () => void): void;
-    getContext<T>(context: symbol | string | number): T | undefined;
-    setContext<T>(context: symbol | string | number, value: T): void;
     inheritNode(node: ComponentNode$1): void;
     mount(parent: Node, before?: Node | null): Node[];
     unmount(): void;
@@ -2266,7 +2270,8 @@ declare class ComponentNode$1 implements JSX.Element {
     patchProps(props: Record<string, any>): void;
 }
 
-declare function h<K extends keyof HTMLElementTagNameMap>(_template: EssorComponent | HTMLTemplateElement | K | '', props: Record<string, any>): JSX.Element;
+declare function h<K extends keyof HTMLElementTagNameMap>(_template: EssorComponent | HTMLTemplateElement | K | '', props: Record<string, unknown>, key?: string): JSX.Element;
+declare function isComponent(node: unknown): node is ComponentNode$1;
 declare function isJsxElement(node: unknown): node is EssorNode;
 declare function template(html: string): HTMLTemplateElement;
 declare function Fragment(props: {
@@ -2281,29 +2286,54 @@ interface InjectionKey<T> extends Symbol {
 }
 declare function useProvide<T, K = InjectionKey<T> | string | number>(key: K, value: K extends InjectionKey<infer V> ? V : T): void;
 declare function useInject<T, K = InjectionKey<T> | string | number>(key: K, defaultValue?: K extends InjectionKey<infer V> ? V : T): (K extends InjectionKey<infer V> ? V : T) | undefined;
-
-type Props = Record<string, any>;
 /**
- * Renders a template to a string based on provided props.
- * Handles both function-based and object-based templates.
- * @param template - The template to render, which can be an array, an object, or a function.
- * @param props - The properties used for rendering the template.
- * @returns The rendered template as a string.
+ * Creates a reactive ref that can be used to reference a DOM node
+ * or a component instance within the component function body.
+ *
+ * @returns a reactive ref signal
+ *
+ * @example
+ * const inputRef = useRef(')
+ *
+ * <input ref={inputRef} />
+ *
+ * inputRef.value // input element
  */
-declare function renderTemplate(template: string[] | EssorNode | Function, props: Props): string;
+declare function useRef<T>(): Signal$1<T | null>;
+
+type Props = Record<string, any>;
+declare class ServerNode extends Hooks {
+    private template;
+    private props;
+    key?: string | undefined;
+    private childNodesMap;
+    private processedTemplates;
+    constructor(template: string[] | EssorNode | Function, props?: Props, key?: string | undefined);
+    /**
+     * Mount and render the component
+     */
+    mount(): string;
+    /**
+     * Initialize template entries and props
+     */
+    private initTemplates;
+    /**
+     * Render component and its children into a string
+     */
+    render(): string;
+    /**
+     * Render child nodes into a string
+     */
+    private renderChildren;
+}
+type ServerNodeType = (props: Props) => ServerNode;
 /**
- * Renders a component to a string using the given properties.
- * @param component - The component function to be rendered.
- * @param props - The properties to be passed to the component.
- * @returns The rendered component as a string.
+ * Create ServerNode for server-side generation (SSG)
  */
-declare function renderToString(component: (...args: any[]) => string, props: Props): string;
+declare function ssg(component: string[] | ServerNodeType, props?: Props): ServerNode;
 /**
- * Renders a component to a string and sets it as the innerHTML of the specified root element.
- * @param component - The component function to be rendered.
- * @param root - The root element in which to render the component.
- * @param props - The properties to be passed to the component.
+ * Render a component to string for SSR
  */
-declare function renderSSG(component: any, root: HTMLElement, props?: Props): void;
+declare function renderToString(component: any, props?: Props): string;
 
-export { ComponentNode$1 as ComponentNode, type EssorComponent, type EssorNode, Fragment, type Hook$1 as Hook, type InjectionKey, type NodeTrack, type Output, TemplateNode$1 as TemplateNode, h, isJsxElement, nextTick, onDestroy, onMount, renderSSG, renderTemplate, renderToString, template, useInject, useProvide };
+export { ComponentNode$1 as ComponentNode, type EssorComponent, type EssorNode, Fragment, type Hook$1 as Hook, type InjectionKey, type NodeTrack, type Output, TemplateNode$1 as TemplateNode, h, isComponent, isJsxElement, nextTick, onDestroy, onMount, renderToString, ssg, template, useInject, useProvide, useRef };

package/dist/template.dev.cjs.js

@@ -4,33 +4,74 @@ var shared = require('@estjs/shared');
 var signal = require('@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 = signal.signalObject(
       props,
-      (key) => shared.startsWith(key, "on") || shared.startsWith(key, "update")
+      (key2) => shared.startsWith(key2, "on") || shared.startsWith(key2, "update")
     );
-  }
-  addEventListener() {
-  }
-  removeEventListener() {
+    this.key = this.key || props.key;
   }
   get firstChild() {
     var _a, _b;
@@ -40,16 +81,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;
@@ -68,9 +99,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(signal.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());
@@ -100,7 +131,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 (shared.startsWith(key, "on") && ((_a = this.rootNode) == null ? void 0 : _a.nodes)) {
         const event = key.slice(2).toLowerCase();
@@ -108,15 +139,11 @@ var _ComponentNode = class _ComponentNode {
         const cleanup = addEventListener(this.rootNode.nodes[0], event, listener);
         this.emitter.add(cleanup);
       } else if (key === "ref") {
-        if (signal.isSignal(prop)) {
-          props[key].value = (_b = this.rootNode) == null ? void 0 : _b.nodes[0];
-        } else if (shared.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 (shared.startsWith(key, "update")) {
         props[key] = signal.isSignal(prop) ? prop.value : prop;
       } else if (key !== "children") {
-        const newValue = (_e = (_d = this.proxyProps)[key]) != null ? _e : _d[key] = signal.useSignal(prop);
+        const newValue = (_d = (_c = this.proxyProps)[key]) != null ? _d : _c[key] = signal.useSignal(prop);
         const track = this.getNodeTrack(key);
         track.cleanup = signal.useEffect(() => {
           newValue.value = shared.isFunction(prop) ? prop() : prop;
@@ -126,12 +153,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 (shared.isString(_template)) {
     if (isHtmlTagName(_template)) {
       _template = convertToHtmlTag(_template);
@@ -146,15 +170,17 @@ function h(_template, props) {
     }
     _template = template(_template);
   }
-  return shared.isFunction(_template) ? new ComponentNode(_template, props) : new TemplateNode(_template, props);
+  return shared.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) {
@@ -329,15 +355,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) {
@@ -454,6 +471,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;
@@ -473,7 +491,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_")) {
@@ -577,11 +594,7 @@ var TemplateNode = class _TemplateNode {
           });
         }
       } else if (attr === "ref") {
-        if (signal.isSignal(props[attr])) {
-          props[attr].value = node;
-        } else if (shared.isFunction(props[attr])) {
-          props[attr](node);
-        }
+        props[attr].value = node;
       } else if (shared.startsWith(attr, "on")) {
         const eventName = attr.slice(2).toLocaleLowerCase();
         const track = this.getNodeTrack(`${key}:${attr}`);
@@ -638,98 +651,165 @@ 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: ${shared.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 (shared.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 (shared.isObject(templateCollection)) {
-    for (const [key, tmpl] of Object.entries(templateCollection)) {
-      const prop = props[key];
-      if (prop) {
-        for (const propKey in prop) {
-          if (shared.startsWith(propKey, "on") && shared.isFunction(prop[propKey])) {
-            delete prop[propKey];
-          }
-        }
+  throwIfOutsideComponent("useInject", key);
+  return ((_a = Hooks.ref) == null ? void 0 : _a.getContext(key)) || defaultValue;
+}
+function useRef() {
+  const ref = signal.shallowSignal(null);
+  return ref;
+}
+function generateAttributes(props) {
+  return Object.entries(props).map(([key, value]) => {
+    if (key === "children" || shared.isFunction(value)) return "";
+    return `${key}="${shared.escape(String(value))}"`;
+  }).filter(Boolean).join(" ");
+}
+function normalizeProps(props) {
+  Object.keys(props).forEach((propKey) => {
+    if (shared.isFunction(props[propKey])) {
+      delete props[propKey];
+    }
+    if (signal.isSignal(props[propKey])) {
+      props[propKey] = props[propKey].value;
+    }
+  });
+}
+function handleChildResult(result, prop, key, tmpl, childNodesMap, path) {
+  if (signal.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(
+      shared.isFunction(childResult) ? childResult(prop) : signal.isSignal(childResult) ? childResult.value : childResult
+    );
+  } else {
+    tmpl.template += shared.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 (shared.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] = shared.isArray(item) ? item : [item, null];
+            if (shared.isFunction(child)) {
+              const result = child(prop);
+              handleChildResult(result, prop, key, tmpl, this.childNodesMap, path);
+            } else {
+              tmpl.template += signal.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 (shared.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 shared.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();
 }
 
 exports.ComponentNode = ComponentNode;
 exports.Fragment = Fragment;
 exports.TemplateNode = TemplateNode;
 exports.h = h;
+exports.isComponent = isComponent;
 exports.isJsxElement = isJsxElement;
 exports.nextTick = nextTick;
 exports.onDestroy = onDestroy;
 exports.onMount = onMount;
-exports.renderSSG = renderSSG;
-exports.renderTemplate = renderTemplate;
 exports.renderToString = renderToString;
+exports.ssg = ssg;
 exports.template = template;
 exports.useInject = useInject;
 exports.useProvide = useProvide;
+exports.useRef = useRef;