@estjs/template 0.0.14-beta.9 → 0.0.14

package/dist/template.d.cts

@@ -4,6 +4,17 @@ import * as csstype from 'csstype';
 type EssorComponent = (props: Record<string, unknown>) => JSX.Element | TemplateNode;
 type Hook = 'mounted' | 'destroy';
 
+interface NodeTrack {
+  cleanup: () => void;
+  isRoot?: boolean;
+  lastNodes?: Map<string, Node | JSX.Element>;
+}
+interface NodeTrack {
+  cleanup: () => void;
+  isRoot?: boolean;
+  lastNodes?: Map<string, Node | JSX.Element>;
+}
+
 type Props = Record<string, any>;
 
 interface EssorNode<T = Record<string, any>> {
@@ -2212,30 +2223,71 @@ declare class LifecycleContext {
     clearHooks(): void;
 }
 
+declare class TemplateNode$1 implements JSX.Element {
+    template: HTMLTemplateElement;
+    props: Props;
+    key?: string | undefined;
+    protected treeMap: Map<number, Node>;
+    protected mounted: boolean;
+    protected nodes: Node[];
+    protected trackMap: Map<string, NodeTrack>;
+    protected bindValueKeys: string[];
+    protected componentIndex: number;
+    protected parent: Node | null;
+    constructor(template: HTMLTemplateElement, props: Props, key?: string | undefined);
+    get firstChild(): Node | null;
+    get isConnected(): boolean;
+    addEventListener(): void;
+    removeEventListener(): void;
+    mount(parent: Node, before?: Node | null): Node[];
+    unmount(): void;
+    inheritNode(node: TemplateNode$1): void;
+    protected mapSSGNodeTree(parent: Node): void;
+    protected mapNodeTree(parent: Node, tree: Node): void;
+    protected walkNodeTree(node: Node, handler: (node: Node) => void): void;
+    protected handleSSGNode(node: Node): void;
+    protected patchProps(props: Record<string, Record<string, unknown>> | undefined): void;
+    protected patchProp(key: string, node: Node, props: Record<string, unknown>, isRoot: boolean): void;
+    protected getBindUpdateValue(props: Record<string, any>, key: string, attr: string): any;
+    protected patchChildren(key: string, node: Node, children: unknown, isRoot: boolean): void;
+    protected patchEventListener(key: string, node: Node, attr: string, listener: EventListener): void;
+    protected patchAttribute(key: string, element: HTMLElement, attr: string, value: unknown, updateFn?: Function): void;
+    protected getNodeTrack(trackKey: string, trackLastNodes?: boolean, isRoot?: boolean): NodeTrack;
+    protected patchChild(track: NodeTrack, parent: Node, child: unknown, before: Node | null): void;
+    protected reconcileChildren(parent: Node, nextNodes: Node[], before: Node | null): Map<string, Node>;
+}
+
 declare class ComponentNode$1 extends LifecycleContext implements JSX.Element {
     template: EssorComponent;
-    props?: Props | undefined;
+    props: Props;
     key?: string | undefined;
-    private proxyProps;
-    private emitter;
-    private rootNode;
-    private trackMap;
-    constructor(template: EssorComponent, props?: Props | undefined, key?: string | undefined);
-    private createProxyProps;
+    protected proxyProps: Record<string, Signal$1<unknown>>;
+    protected emitter: Set<() => void>;
+    protected rootNode: TemplateNode$1 | null;
+    protected trackMap: Map<string, NodeTrack>;
+    protected nodes: Node[];
+    protected parent: Node | null;
+    protected before: Node | null;
+    constructor(template: EssorComponent, props: Props, key?: string | undefined);
     get firstChild(): Node | null;
     get isConnected(): boolean;
-    mount(parent: Node, before?: Node | null): Node[];
+    mount(parent: Node, before: Node | null): Node[];
     unmount(): void;
-    private callMountHooks;
-    private callDestroyHooks;
-    private clearEmitter;
+    private resetState;
+    protected callLifecycleHooks(type: 'mounted' | 'destroy'): void;
+    protected callMountHooks(): void;
+    protected callDestroyHooks(): void;
+    protected clearEmitter(): void;
     inheritNode(node: ComponentNode$1): void;
-    private getNodeTrack;
+    protected getNodeTrack(trackKey: string): NodeTrack;
     patchProps(props: Record<string, any> | undefined): void;
-    private patchEventListener;
-    private patchRef;
-    private patchUpdateHandler;
-    private patchNormalProp;
+    protected patchEventListener(key: string, prop: any): void;
+    protected patchRef(prop: {
+        value: Node | null;
+    }): void;
+    protected patchUpdateHandler(key: string, prop: any): void;
+    protected patchNormalProp(key: string, prop: any): void;
+    protected cleanup(): void;
 }
 
 /**
@@ -2270,14 +2322,12 @@ declare function isJsxElement(node: unknown): node is EssorNode;
  * @returns A new HTML template element.
  */
 declare function createTemplate(html: string): HTMLTemplateElement;
-/**
- * @param props - An object containing the `children` prop.
- * @param props.children - The children to be rendered. Can be a single JSX element, string, number, boolean,
- *                         or an array of these. Falsy values in arrays will be filtered out.
- * @returns A JSX element representing the fragment, wrapping the filtered children.
- */
-declare function Fragment<T extends JSX.JSXElement | string | number | boolean | (JSX.JSXElement | string | number | boolean)[]>(props: {
+declare function Fragment<T extends JSX.JSXElement | string | number | boolean | Array<JSX.JSXElement | string | number | boolean>>(template: HTMLTemplateElement | '', props: {
     children: T;
+} | {
+    [key: string]: {
+        children: T;
+    };
 }): JSX.Element;
 
 /**
@@ -2309,7 +2359,7 @@ interface InjectionKey<T> extends Symbol {
  * @param key - The key to store the value in the LifecycleContext with.
  * @param value - The value to store in the LifecycleContext with the given key.
  */
-declare function useProvide<T, K = InjectionKey<T> | string | number>(key: K, value: K extends InjectionKey<infer V> ? V : T): void;
+declare function provide<T, K = InjectionKey<T> | string | number>(key: K, value: K extends InjectionKey<infer V> ? V : T): void;
 /**
  * Injects a value from the current component LifecycleContext.
  *
@@ -2322,21 +2372,7 @@ declare function useProvide<T, K = InjectionKey<T> | string | number>(key: K, va
  * @returns The value stored in the LifecycleContext with the given key, or the default
  * value if the key is not present in the LifecycleContext.
  */
-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;
-/**
- * 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<HTMLInputElement>()
- *
- * <input ref={inputRef} />
- *
- * inputRef.value // input element
- */
-declare function useRef<T>(): Signal$1<T | null>;
+declare function inject<T, K = InjectionKey<T> | string | number>(key: K, defaultValue?: K extends InjectionKey<infer V> ? V : T): (K extends InjectionKey<infer V> ? V : T) | undefined;
 
 declare class SSGNode extends LifecycleContext {
     private template;
@@ -2386,4 +2422,4 @@ declare function hydrate(component: EssorComponent, container: string | Element)
  */
 declare function ssg(component: EssorComponent, props?: Props): SSGNode | JSX.Element;
 
-export { Fragment, type InjectionKey, h, hydrate, isComponent, isJsxElement, onDestroy, onMount, renderToString, ssg, createTemplate as template, useInject, useProvide, useRef };
+export { Fragment, type InjectionKey, h, hydrate, inject, isComponent, isJsxElement, onDestroy, onMount, provide, renderToString, ssg, createTemplate as template };

package/dist/template.d.ts

@@ -4,6 +4,17 @@ import * as csstype from 'csstype';
 type EssorComponent = (props: Record<string, unknown>) => JSX.Element | TemplateNode;
 type Hook = 'mounted' | 'destroy';
 
+interface NodeTrack {
+  cleanup: () => void;
+  isRoot?: boolean;
+  lastNodes?: Map<string, Node | JSX.Element>;
+}
+interface NodeTrack {
+  cleanup: () => void;
+  isRoot?: boolean;
+  lastNodes?: Map<string, Node | JSX.Element>;
+}
+
 type Props = Record<string, any>;
 
 interface EssorNode<T = Record<string, any>> {
@@ -2212,30 +2223,71 @@ declare class LifecycleContext {
     clearHooks(): void;
 }
 
+declare class TemplateNode$1 implements JSX.Element {
+    template: HTMLTemplateElement;
+    props: Props;
+    key?: string | undefined;
+    protected treeMap: Map<number, Node>;
+    protected mounted: boolean;
+    protected nodes: Node[];
+    protected trackMap: Map<string, NodeTrack>;
+    protected bindValueKeys: string[];
+    protected componentIndex: number;
+    protected parent: Node | null;
+    constructor(template: HTMLTemplateElement, props: Props, key?: string | undefined);
+    get firstChild(): Node | null;
+    get isConnected(): boolean;
+    addEventListener(): void;
+    removeEventListener(): void;
+    mount(parent: Node, before?: Node | null): Node[];
+    unmount(): void;
+    inheritNode(node: TemplateNode$1): void;
+    protected mapSSGNodeTree(parent: Node): void;
+    protected mapNodeTree(parent: Node, tree: Node): void;
+    protected walkNodeTree(node: Node, handler: (node: Node) => void): void;
+    protected handleSSGNode(node: Node): void;
+    protected patchProps(props: Record<string, Record<string, unknown>> | undefined): void;
+    protected patchProp(key: string, node: Node, props: Record<string, unknown>, isRoot: boolean): void;
+    protected getBindUpdateValue(props: Record<string, any>, key: string, attr: string): any;
+    protected patchChildren(key: string, node: Node, children: unknown, isRoot: boolean): void;
+    protected patchEventListener(key: string, node: Node, attr: string, listener: EventListener): void;
+    protected patchAttribute(key: string, element: HTMLElement, attr: string, value: unknown, updateFn?: Function): void;
+    protected getNodeTrack(trackKey: string, trackLastNodes?: boolean, isRoot?: boolean): NodeTrack;
+    protected patchChild(track: NodeTrack, parent: Node, child: unknown, before: Node | null): void;
+    protected reconcileChildren(parent: Node, nextNodes: Node[], before: Node | null): Map<string, Node>;
+}
+
 declare class ComponentNode$1 extends LifecycleContext implements JSX.Element {
     template: EssorComponent;
-    props?: Props | undefined;
+    props: Props;
     key?: string | undefined;
-    private proxyProps;
-    private emitter;
-    private rootNode;
-    private trackMap;
-    constructor(template: EssorComponent, props?: Props | undefined, key?: string | undefined);
-    private createProxyProps;
+    protected proxyProps: Record<string, Signal$1<unknown>>;
+    protected emitter: Set<() => void>;
+    protected rootNode: TemplateNode$1 | null;
+    protected trackMap: Map<string, NodeTrack>;
+    protected nodes: Node[];
+    protected parent: Node | null;
+    protected before: Node | null;
+    constructor(template: EssorComponent, props: Props, key?: string | undefined);
     get firstChild(): Node | null;
     get isConnected(): boolean;
-    mount(parent: Node, before?: Node | null): Node[];
+    mount(parent: Node, before: Node | null): Node[];
     unmount(): void;
-    private callMountHooks;
-    private callDestroyHooks;
-    private clearEmitter;
+    private resetState;
+    protected callLifecycleHooks(type: 'mounted' | 'destroy'): void;
+    protected callMountHooks(): void;
+    protected callDestroyHooks(): void;
+    protected clearEmitter(): void;
     inheritNode(node: ComponentNode$1): void;
-    private getNodeTrack;
+    protected getNodeTrack(trackKey: string): NodeTrack;
     patchProps(props: Record<string, any> | undefined): void;
-    private patchEventListener;
-    private patchRef;
-    private patchUpdateHandler;
-    private patchNormalProp;
+    protected patchEventListener(key: string, prop: any): void;
+    protected patchRef(prop: {
+        value: Node | null;
+    }): void;
+    protected patchUpdateHandler(key: string, prop: any): void;
+    protected patchNormalProp(key: string, prop: any): void;
+    protected cleanup(): void;
 }
 
 /**
@@ -2270,14 +2322,12 @@ declare function isJsxElement(node: unknown): node is EssorNode;
  * @returns A new HTML template element.
  */
 declare function createTemplate(html: string): HTMLTemplateElement;
-/**
- * @param props - An object containing the `children` prop.
- * @param props.children - The children to be rendered. Can be a single JSX element, string, number, boolean,
- *                         or an array of these. Falsy values in arrays will be filtered out.
- * @returns A JSX element representing the fragment, wrapping the filtered children.
- */
-declare function Fragment<T extends JSX.JSXElement | string | number | boolean | (JSX.JSXElement | string | number | boolean)[]>(props: {
+declare function Fragment<T extends JSX.JSXElement | string | number | boolean | Array<JSX.JSXElement | string | number | boolean>>(template: HTMLTemplateElement | '', props: {
     children: T;
+} | {
+    [key: string]: {
+        children: T;
+    };
 }): JSX.Element;
 
 /**
@@ -2309,7 +2359,7 @@ interface InjectionKey<T> extends Symbol {
  * @param key - The key to store the value in the LifecycleContext with.
  * @param value - The value to store in the LifecycleContext with the given key.
  */
-declare function useProvide<T, K = InjectionKey<T> | string | number>(key: K, value: K extends InjectionKey<infer V> ? V : T): void;
+declare function provide<T, K = InjectionKey<T> | string | number>(key: K, value: K extends InjectionKey<infer V> ? V : T): void;
 /**
  * Injects a value from the current component LifecycleContext.
  *
@@ -2322,21 +2372,7 @@ declare function useProvide<T, K = InjectionKey<T> | string | number>(key: K, va
  * @returns The value stored in the LifecycleContext with the given key, or the default
  * value if the key is not present in the LifecycleContext.
  */
-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;
-/**
- * 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<HTMLInputElement>()
- *
- * <input ref={inputRef} />
- *
- * inputRef.value // input element
- */
-declare function useRef<T>(): Signal$1<T | null>;
+declare function inject<T, K = InjectionKey<T> | string | number>(key: K, defaultValue?: K extends InjectionKey<infer V> ? V : T): (K extends InjectionKey<infer V> ? V : T) | undefined;
 
 declare class SSGNode extends LifecycleContext {
     private template;
@@ -2386,4 +2422,4 @@ declare function hydrate(component: EssorComponent, container: string | Element)
  */
 declare function ssg(component: EssorComponent, props?: Props): SSGNode | JSX.Element;
 
-export { Fragment, type InjectionKey, h, hydrate, isComponent, isJsxElement, onDestroy, onMount, renderToString, ssg, createTemplate as template, useInject, useProvide, useRef };
+export { Fragment, type InjectionKey, h, hydrate, inject, isComponent, isJsxElement, onDestroy, onMount, provide, renderToString, ssg, createTemplate as template };

package/dist/template.dev.cjs.js

@@ -4,7 +4,7 @@ var shared = require('@estjs/shared');
 var signal = require('@estjs/signal');
 
 /**
-* @estjs/template v0.0.14-beta.9
+* @estjs/template v0.0.14
 * (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
 * @license MIT
 **/
@@ -184,10 +184,10 @@ var SSGNode = class extends LifecycleContext {
     });
   }
   renderChild(child) {
-    if (shared.isFunction(child)) {
-      return this.renderChild(child(this.props));
-    } else if (signal.isSignal(child)) {
+    if (signal.isSignal(child)) {
       return `<!--${1 /* TEXT_COMPONENT */}-${componentIndex}-->${child.value}<!$>`;
+    } else if (shared.isFunction(child)) {
+      return this.renderChild(child(this.props));
     } else if (isSSGNode(child)) {
       const childResult = child.mount();
       return shared.isFunction(childResult) ? childResult(this.props) : extractSignal(childResult);
@@ -319,42 +319,6 @@ function addEventListener(node, eventName, handler) {
   node.addEventListener(eventName, handler);
   return () => node.removeEventListener(eventName, handler);
 }
-function closeHtmlTags(input) {
-  const tagStack = [];
-  const output = [];
-  const tagPattern = /<\/?([\da-z-]+)([^>]*)>/gi;
-  let lastIndex = 0;
-  while (true) {
-    const match = tagPattern.exec(input);
-    if (!match) break;
-    const [fullMatch, tagName] = match;
-    const isEndTag = fullMatch[1] === "/";
-    output.push(input.slice(lastIndex, match.index));
-    lastIndex = match.index + fullMatch.length;
-    if (isEndTag) {
-      while (tagStack.length > 0 && tagStack[tagStack.length - 1] !== tagName) {
-        const unclosedTag = tagStack.pop();
-        if (unclosedTag) {
-          output.push(`</${unclosedTag}>`);
-        }
-      }
-      if (tagStack.length > 0) {
-        tagStack.pop();
-      }
-    } else if (!SELF_CLOSING_TAGS.includes(tagName)) {
-      tagStack.push(tagName);
-    }
-    output.push(fullMatch);
-  }
-  output.push(input.slice(lastIndex));
-  while (tagStack.length > 0) {
-    const unclosedTag = tagStack.pop();
-    if (unclosedTag) {
-      output.push(`</${unclosedTag}>`);
-    }
-  }
-  return output.join("");
-}
 function convertToHtmlTag(tagName) {
   return SELF_CLOSING_TAGS.includes(tagName) ? `<${tagName}/>` : `<${tagName}></${tagName}>`;
 }
@@ -374,15 +338,11 @@ var ComponentNode = class extends LifecycleContext {
     this.emitter = /* @__PURE__ */ new Set();
     this.rootNode = null;
     this.trackMap = /* @__PURE__ */ new Map();
+    this.nodes = [];
+    this.parent = null;
+    this.before = null;
     this.key || (this.key = props && props.key);
-    this.proxyProps = this.createProxyProps(props);
-  }
-  createProxyProps(props) {
-    if (!props) return {};
-    return signal.signalObject(
-      props,
-      (key) => shared.startsWith(key, EVENT_PREFIX) || shared.startsWith(key, UPDATE_PREFIX) || key === CHILDREN_PROP
-    );
+    this.proxyProps || (this.proxyProps = signal.shallowReactive(props || {}));
   }
   get firstChild() {
     var _a, _b;
@@ -394,6 +354,7 @@ var ComponentNode = class extends LifecycleContext {
   }
   mount(parent, before) {
     var _a, _b, _c, _d;
+    this.parent = parent;
     if (!shared.isFunction(this.template)) {
       throw new Error("Template must be a function");
     }
@@ -402,20 +363,30 @@ var ComponentNode = class extends LifecycleContext {
     }
     this.initRef();
     this.rootNode = this.template(signal.useReactive(this.proxyProps, [CHILDREN_PROP]));
-    const mountedNode = (_d = (_c = this.rootNode) == null ? void 0 : _c.mount(parent, before)) != null ? _d : [];
+    this.nodes = (_d = (_c = this.rootNode) == null ? void 0 : _c.mount(parent, before)) != null ? _d : [];
     this.callMountHooks();
     this.patchProps(this.props);
     this.removeRef();
-    return mountedNode;
+    return this.nodes;
   }
   unmount() {
     var _a;
-    this.callDestroyHooks();
-    this.clearHooks();
+    this.callLifecycleHooks("destroy");
+    this.cleanup();
     (_a = this.rootNode) == null ? void 0 : _a.unmount();
+    this.resetState();
+    if (this.key) {
+      componentCache.delete(this.key);
+    }
+  }
+  resetState() {
     this.rootNode = null;
     this.proxyProps = {};
-    this.clearEmitter();
+    this.nodes = [];
+    this.parent = null;
+  }
+  callLifecycleHooks(type) {
+    this.hooks[type].forEach((handler) => handler());
   }
   callMountHooks() {
     this.hooks.mounted.forEach((handler) => handler());
@@ -434,9 +405,11 @@ var ComponentNode = class extends LifecycleContext {
     this.rootNode = node.rootNode;
     this.trackMap = node.trackMap;
     this.hooks = node.hooks;
-    const props = this.props;
-    this.props = node.props;
-    this.patchProps(props);
+    if (shared.hasChanged(node.props, this.props)) {
+      const props = this.props;
+      this.props = node.props;
+      this.patchProps(props);
+    }
   }
   getNodeTrack(trackKey) {
     let track = this.trackMap.get(trackKey);
@@ -476,16 +449,23 @@ var ComponentNode = class extends LifecycleContext {
     prop.value = (_b = (_a = this.rootNode) == null ? void 0 : _a.firstChild) != null ? _b : null;
   }
   patchUpdateHandler(key, prop) {
-    this.props[key] = extractSignal(prop);
+    this.proxyProps[key] = extractSignal(prop);
   }
   patchNormalProp(key, prop) {
-    var _a, _b;
-    const newValue = (_b = (_a = this.proxyProps)[key]) != null ? _b : _a[key] = signal.useSignal(prop);
     const track = this.getNodeTrack(key);
     track.cleanup = signal.useEffect(() => {
-      newValue.value = shared.isFunction(prop) ? prop() : prop;
+      this.proxyProps[key] = shared.isFunction(prop) ? prop() : prop;
     });
   }
+  cleanup() {
+    this.trackMap.forEach((track) => {
+      var _a;
+      return (_a = track.cleanup) == null ? void 0 : _a.call(track);
+    });
+    this.trackMap.clear();
+    this.emitter.forEach((cleanup) => cleanup());
+    this.emitter.clear();
+  }
 };
 
 // src/patch.ts
@@ -601,14 +581,12 @@ 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 = [];
     this.trackMap = /* @__PURE__ */ new Map();
     this.bindValueKeys = [];
     this.parent = null;
-    this.key || (this.key = props && props.key);
     if (renderContext.isSSR) {
       this.componentIndex = getComponentIndex(this.template);
     }
@@ -654,39 +632,16 @@ var TemplateNode = class {
     return this.nodes;
   }
   unmount() {
-    var _a, _b;
     this.trackMap.forEach((track) => {
       track.cleanup && track.cleanup();
     });
     this.trackMap.clear();
     this.treeMap.clear();
     this.nodes.forEach((node) => removeChild(node));
-    if (!this.template.innerHTML && !this.nodes.length) {
-      const children = (_b = (_a = this.props) == null ? void 0 : _a[FRAGMENT_PROP_KEY]) == null ? void 0 : _b.children;
-      if (children) {
-        if (shared.isArray(children)) {
-          children.forEach((child) => {
-            this.deleteFragmentTextNode(child);
-          });
-        } else {
-          this.deleteFragmentTextNode(children);
-        }
-      }
-    }
     this.nodes = [];
     this.mounted = false;
-  }
-  deleteFragmentTextNode(child) {
-    if (shared.isPrimitive(child)) {
-      if (this.parent && this.parent.childNodes.length) {
-        this.parent.childNodes.forEach((node) => {
-          if (node.nodeType === Node.TEXT_NODE && node.textContent === `${child}`) {
-            this.parent.removeChild(node);
-          }
-        });
-      }
-    } else {
-      removeChild(child);
+    if (this.key) {
+      componentCache.delete(this.key);
     }
   }
   inheritNode(node) {
@@ -702,7 +657,7 @@ var TemplateNode = class {
     this.treeMap.set(0, parent);
     this.walkNodeTree(parent, this.handleSSGNode.bind(this));
   }
-  // Private method to map node tree
+  // protected method to map node tree
   mapNodeTree(parent, tree) {
     let index = 1;
     this.treeMap.set(0, parent);
@@ -795,14 +750,9 @@ var TemplateNode = class {
   }
   patchAttribute(key, element, attr, value, updateFn) {
     const track = this.getNodeTrack(`${key}:${attr}`);
-    const val = shared.isFunction(value) ? value() : value;
-    const triggerValue = signal.isSignal(val) ? val : signal.shallowSignal(val);
-    setAttribute(element, attr, triggerValue.value);
+    const triggerValue = signal.shallowSignal();
     const cleanup = signal.useEffect(() => {
-      const val2 = shared.isFunction(value) ? value() : value;
-      if (shared.isPlainObject(val2) && shared.isPlainObject(triggerValue.peek()) && JSON.stringify(triggerValue.value) === JSON.stringify(val2))
-        return;
-      triggerValue.value = signal.isSignal(val2) ? val2.value : val2;
+      triggerValue.value = signal.isSignal(value) || signal.isComputed(value) ? value.value : value;
       setAttribute(element, attr, triggerValue.value);
     });
     let cleanupBind;
@@ -881,17 +831,36 @@ var TemplateNode = class {
 };
 
 // src/jsxRenderer.ts
-function h(template, props, key) {
+var componentCache = /* @__PURE__ */ new Map();
+function createNodeCache(NodeConstructor, template, props = {}, key) {
+  if (key) {
+    const cached = componentCache.get(key);
+    if (cached) {
+      return cached;
+    }
+  }
+  if (typeof template === "string") {
+    template = createTemplate(template);
+  }
+  const newNode = new NodeConstructor(template, props, key);
+  if (key && newNode instanceof ComponentNode) {
+    componentCache.set(key, newNode);
+  }
+  return newNode;
+}
+function h(template, props = {}, key) {
+  if (template === EMPTY_TEMPLATE) {
+    return Fragment(template, props);
+  }
   if (shared.isString(template)) {
-    const isEmptyTemplate = template === EMPTY_TEMPLATE;
-    const htmlTemplate = isEmptyTemplate ? EMPTY_TEMPLATE : convertToHtmlTag(template);
-    props = { [isEmptyTemplate ? FRAGMENT_PROP_KEY : SINGLE_PROP_KEY]: props };
-    return new TemplateNode(createTemplate(htmlTemplate), props, key);
+    const htmlTemplate = convertToHtmlTag(template);
+    const wrappedProps = { [SINGLE_PROP_KEY]: props };
+    return createNodeCache(TemplateNode, htmlTemplate, wrappedProps, key);
   }
   if (shared.isFunction(template)) {
-    return new ComponentNode(template, props, key);
+    return createNodeCache(ComponentNode, template, props, key);
   }
-  return new TemplateNode(template, props, key);
+  return createNodeCache(TemplateNode, template, props, key);
 }
 function isComponent(node) {
   return node instanceof ComponentNode;
@@ -901,15 +870,17 @@ function isJsxElement(node) {
 }
 function createTemplate(html) {
   const template = document.createElement("template");
-  template.innerHTML = closeHtmlTags(html);
+  template.innerHTML = html;
   return template;
 }
-function Fragment(props) {
-  return h(createTemplate(EMPTY_TEMPLATE), {
+function Fragment(template, props) {
+  const processedProps = props.children ? {
     [FRAGMENT_PROP_KEY]: {
-      children: shared.isArray(props.children) ? props.children.filter(Boolean) : [props.children]
+      children: Array.isArray(props.children) ? props.children.filter(Boolean) : [props.children]
     }
-  });
+  } : props;
+  const templateElement = template === EMPTY_TEMPLATE ? createTemplate(EMPTY_TEMPLATE) : template;
+  return createNodeCache(TemplateNode, templateElement, processedProps);
 }
 function onMount(cb) {
   assertInsideComponent("onMounted");
@@ -927,18 +898,15 @@ function assertInsideComponent(hookName, key) {
     );
   }
 }
-function useProvide(key, value) {
-  assertInsideComponent("useProvide", key);
+function provide(key, value) {
+  assertInsideComponent("provide", key);
   LifecycleContext.ref && LifecycleContext.ref.setContext(key, value);
 }
-function useInject(key, defaultValue) {
+function inject(key, defaultValue) {
   var _a;
-  assertInsideComponent("useInject", key);
+  assertInsideComponent("inject", key);
   return (_a = LifecycleContext.ref && LifecycleContext.ref.getContext(key)) != null ? _a : defaultValue;
 }
-function useRef() {
-  return signal.shallowSignal(null);
-}
 
 // src/server.ts
 function renderToString(component, props) {
@@ -967,13 +935,12 @@ function ssg(component, props) {
 exports.Fragment = Fragment;
 exports.h = h;
 exports.hydrate = hydrate;
+exports.inject = inject;
 exports.isComponent = isComponent;
 exports.isJsxElement = isJsxElement;
 exports.onDestroy = onDestroy;
 exports.onMount = onMount;
+exports.provide = provide;
 exports.renderToString = renderToString;
 exports.ssg = ssg;
 exports.template = createTemplate;
-exports.useInject = useInject;
-exports.useProvide = useProvide;
-exports.useRef = useRef;