essor 0.0.14-beta.2 → 0.0.14-beta.21

package/dist/essor.dev.esm.js

@@ -1,11 +1,11 @@
 /**
-* essor v0.0.14-beta.2
+* essor v0.0.14-beta.21
 * (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
 * @license MIT
 **/
 
 // src/version.ts
-var essor_version = "0.0.14-beta.2";
+var essor_version = "0.0.14-beta.21";
 
 // ../shared/dist/shared.js
 var isObject = (val) => val !== null && typeof val === "object";
@@ -13,9 +13,6 @@ var isArray = Array.isArray;
 function isString(val) {
   return typeof val === "string";
 }
-function isNull(val) {
-  return val === null;
-}
 function isSymbol(val) {
   return typeof val === "symbol";
 }
@@ -38,7 +35,6 @@ var isFunction = (val) => typeof val === "function";
 function isFalsy(x) {
   return x === false || x === null || x === void 0;
 }
-var isPrimitive = (val) => ["string", "number", "boolean", "symbol", "undefined"].includes(typeof val) || isNull(val);
 function isHTMLElement(obj) {
   if (!obj) return false;
   return obj && typeof obj === "object" && obj.nodeType === 1 && typeof obj.nodeName === "string";
@@ -85,14 +81,22 @@ function escape(str) {
 function isExclude(key, exclude) {
   return isArray(exclude) ? exclude.includes(key) : isFunction(exclude) ? exclude(key) : false;
 }
-var kebabCase = (string) => {
-  return string.replaceAll(/[A-Z]+/g, (match, offset) => {
-    return `${offset > 0 ? "-" : ""}${match.toLocaleLowerCase()}`;
-  });
-};
-var capitalizeFirstLetter = (inputString) => {
-  return inputString.charAt(0).toUpperCase() + inputString.slice(1);
+var cacheStringFunction = (fn) => {
+  const cache = /* @__PURE__ */ Object.create(null);
+  return (str) => {
+    const hit = cache[str];
+    return hit || (cache[str] = fn(str));
+  };
 };
+var hyphenateRE = /\B([A-Z])/g;
+var kebabCase = cacheStringFunction(
+  (str) => str.replaceAll(hyphenateRE, "-$1").toLowerCase()
+);
+var capitalize = cacheStringFunction(
+  (str) => {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
+);
 function warn(msg, ...args) {
   console.warn.apply(console, [`[Essor warn]: ${msg}`].concat(args));
 }
@@ -164,14 +168,14 @@ function flushPreFlushCbs() {
     }
   }
 }
-function createScheduler(effect, flush) {
+function createScheduler(effect2, flush) {
   if (flush === "sync") {
-    return () => effect();
+    return () => effect2();
   } else if (flush === "pre") {
-    return () => queuePreFlushCb(effect);
+    return () => queuePreFlushCb(effect2);
   } else {
     return () => {
-      nextTick(() => queueJob(effect));
+      nextTick(() => queueJob(effect2));
     };
   }
 }
@@ -206,22 +210,31 @@ function trigger(target, key) {
   if (!depsMap) return;
   const dep = depsMap.get(key);
   if (dep) {
-    dep.forEach((effect) => {
-      if (hasOwn(effect, "active") && !effect.active) {
-        dep.delete(effect);
+    dep.forEach((effect2) => {
+      if (hasOwn(effect2, "active") && !effect2.active) {
+        dep.delete(effect2);
         return;
       }
-      inBatch ? batchQueue.add(effect) : effect();
+      inBatch ? batchQueue.add(effect2) : effect2();
     });
   }
 }
-var Signal = class {
+var FunctionExt = class extends Function {
+  constructor(f) {
+    super();
+    return Object.setPrototypeOf(f, new.target.prototype);
+  }
+};
+var SignalImpl = class extends FunctionExt {
   /**
    * Creates a new Signal instance.
    * @param {T} value - The initial value of the Signal.
    * @param {boolean} [shallow] - Whether to create a shallow Signal.
    */
   constructor(value, shallow = false) {
+    super(() => {
+      return this.value;
+    });
     this.__signal = true;
     this.__shallow = shallow;
     this.__value = value;
@@ -232,8 +245,8 @@ var Signal = class {
    */
   get value() {
     track(this, SignalValueKey);
-    if (isObject(this.__value) && !this.__shallow) {
-      return reactive(this.__value);
+    if (isObject(this.__value)) {
+      return ReactiveImpl(this.__value, this.__shallow);
     }
     return this.__value;
   }
@@ -257,23 +270,30 @@ var Signal = class {
   peek() {
     return this.__value;
   }
+  // call set value
+  // it equals to this.value = value
+  set(value) {
+    this.value = value;
+  }
+  // call update
+  // it equals to this.value = fn(this.value)
+  update(fn) {
+    this.set(fn(this.peek()));
+  }
 };
-function useSignal(value) {
+function signal(value) {
   if (isSignal(value)) {
     return value;
   }
-  return new Signal(value);
-}
-function useShallowSignal(value) {
-  return new Signal(value, true);
+  return new SignalImpl(value);
 }
 function shallowSignal(value) {
-  return new Signal(value, true);
+  return new SignalImpl(value, true);
 }
 function isSignal(value) {
   return !!(value && (value == null ? void 0 : value.__signal));
 }
-var Computed = class {
+var ComputedImpl = class {
   constructor(fn) {
     this.fn = fn;
     this.__computed = true;
@@ -306,13 +326,13 @@ var Computed = class {
     return this.__value;
   }
 };
-function useComputed(fn) {
-  return new Computed(fn);
+function computed(fn) {
+  return new ComputedImpl(fn);
 }
 function isComputed(value) {
   return !!(value && value.__computed);
 }
-function useEffect(fn, options = {}) {
+function effect(fn, options = {}) {
   const { flush = "pre", onTrack, onTrigger } = options;
   function effectFn() {
     const prev = activeEffect;
@@ -340,7 +360,7 @@ function signalObject(initialValues, exclude) {
     return initialValues;
   }
   const signals = Object.entries(initialValues).reduce((acc, [key, value]) => {
-    acc[key] = isExclude(key, exclude) || isSignal(value) ? value : useSignal(value);
+    acc[key] = isExclude(key, exclude) || isSignal(value) ? value : signal(value);
     return acc;
   }, {});
   return signals;
@@ -366,11 +386,11 @@ function toRaw(value) {
 function isReactive(obj) {
   return !!(obj && typeof obj === "object" && obj[ReactiveSymbol]);
 }
-function useReactive(initialValue, exclude) {
-  return reactive(initialValue, false, exclude);
+function reactive(initialValue, exclude) {
+  return ReactiveImpl(initialValue, false, exclude);
 }
 function shallowReactive(initialValue, exclude) {
-  return reactive(initialValue, true, exclude);
+  return ReactiveImpl(initialValue, true, exclude);
 }
 var basicHandler = (shallow, exclude) => {
   return {
@@ -384,7 +404,7 @@ var basicHandler = (shallow, exclude) => {
       }
       track(target, key);
       if (isObject(value) && !shallow) {
-        return reactive(value);
+        return ReactiveImpl(value);
       }
       return value;
     },
@@ -482,7 +502,7 @@ var ArrayHandler = (shallow, exclude) => {
       }
       track(target, "length");
       if (isObject(value) && !shallow) {
-        return reactive(value);
+        return ReactiveImpl(value);
       }
       return value;
     },
@@ -630,7 +650,7 @@ var weakInstrumentations = {
     return result;
   }
 };
-function reactive(initialValue, shallow = false, exclude) {
+function ReactiveImpl(initialValue, shallow = false, exclude) {
   if (!isObject(initialValue)) {
     return initialValue;
   }
@@ -693,11 +713,14 @@ function useBatch(fn) {
 }
 function runBatch() {
   if (batchQueue.size > 0) {
-    batchQueue.forEach((effect) => effect());
+    batchQueue.forEach((effect2) => effect2());
     batchQueue.clear();
   }
 }
-function useWatch(source, cb, options) {
+function ref() {
+  return shallowSignal(null);
+}
+function watch(source, cb, options) {
   return doWatch(source, cb, options);
 }
 var INITIAL_WATCHER_VALUE = void 0;
@@ -711,7 +734,7 @@ function queueWatcher(fn) {
   }
 }
 function flushWatchers() {
-  watcher == null ? void 0 : watcher();
+  watcher && watcher();
   watcher = null;
   flushing = false;
 }
@@ -753,7 +776,7 @@ function doWatch(source, cb, { deep, immediate } = {}) {
       !runCb && (oldValue = newValue);
     }
   };
-  const stop = useEffect(effectFn, { flush: "sync" });
+  const stop = effect(effectFn, { flush: "sync" });
   runCb = true;
   if (immediate) {
     effectFn();
@@ -797,7 +820,7 @@ function traverse(value, depth = Infinity, seen) {
 function createOptionsStore(options) {
   const { state, getters, actions } = options;
   const initState = __spreadValues({}, state);
-  const reactiveState = useReactive(state);
+  const reactiveState = reactive(state);
   const subscriptions = [];
   const actionCallbacks = [];
   const default_actions = {
@@ -831,7 +854,7 @@ function createOptionsStore(options) {
       if (getter) {
         Object.defineProperty(store, key, {
           get() {
-            return useComputed(() => getter.call(store, reactiveState)).value;
+            return computed(() => getter.call(store, reactiveState)).value;
           },
           enumerable: true,
           configurable: true
@@ -906,32 +929,27 @@ var CHILDREN_PROP = "children";
 var EMPTY_TEMPLATE = "";
 var FRAGMENT_PROP_KEY = "0";
 var SINGLE_PROP_KEY = "1";
+var REF_KEY = "ref";
 var PLACEHOLDER = " __PLACEHOLDER__ ";
 var RenderContext = class {
   constructor() {
     this.renderMode = 0;
   }
-  // Getter to check if the current mode is SSG
   get isSSG() {
     return this.renderMode === 1;
   }
-  // Getter to check if the current mode is SSR
   get isSSR() {
     return this.renderMode === 2;
   }
-  // Getter to check if the current mode is Client
   get isClient() {
     return this.renderMode === 0;
   }
-  // Set render mode to SSR
   setSSR() {
     this.renderMode = 2;
   }
-  // Set render mode to SSG
   setSSG() {
     this.renderMode = 1;
   }
-  // Set render mode to Client
   setClient() {
     this.renderMode = 0;
   }
@@ -971,11 +989,9 @@ var _LifecycleContext = class _LifecycleContext2 {
   setContext(context, value) {
     _LifecycleContext2.context[context] = value;
   }
-  // Initialize the static reference
   initRef() {
     _LifecycleContext2.ref = this;
   }
-  // Remove the static reference
   removeRef() {
     _LifecycleContext2.ref = null;
   }
@@ -1000,7 +1016,6 @@ var SSGNode = class extends LifecycleContext {
     enterComponent(template, componentIndex);
     this.templates = this.processTemplate();
   }
-  // Process the template and return an array of processed strings
   processTemplate() {
     if (isArray(this.template)) {
       const htmlString = this.template.join(PLACEHOLDER);
@@ -1009,7 +1024,6 @@ var SSGNode = class extends LifecycleContext {
     }
     return [];
   }
-  // Process HTML string by adding component index and handling text nodes
   processHtmlString(htmlString) {
     return htmlString.replaceAll(/(<[^>]+>)|([^<]+)/g, (match, p1, p2) => {
       if (p1) {
@@ -1023,14 +1037,12 @@ var SSGNode = class extends LifecycleContext {
       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);
@@ -1042,7 +1054,6 @@ var SSGNode = class extends LifecycleContext {
     }
     return this.renderTemplate();
   }
-  // Render the template by processing props and children
   renderTemplate() {
     Object.entries(this.props).forEach(([key, cur]) => {
       const children = cur.children;
@@ -1058,10 +1069,9 @@ var SSGNode = class extends LifecycleContext {
     });
     return this.templates.join("");
   }
-  // Normalize props by removing children and handling signals
   normalizeProps(props) {
     Object.entries(props).forEach(([key, value]) => {
-      if (key === "children") {
+      if (key === CHILDREN_PROP) {
         delete props[key];
       } else if (isFunction(value)) {
         delete props[key];
@@ -1070,11 +1080,9 @@ var SSGNode = class extends LifecycleContext {
       }
     });
   }
-  // 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(" ");
+    return Object.entries(props).filter(([key, value]) => key !== CHILDREN_PROP && !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++;
@@ -1082,12 +1090,11 @@ var SSGNode = class extends LifecycleContext {
       this.templates[findIndex] += renderedChild;
     });
   }
-  // Render a single child node
   renderChild(child) {
-    if (isFunction(child)) {
-      return this.renderChild(child(this.props));
-    } else if (isSignal(child)) {
+    if (isSignal(child)) {
       return `<!--${1}-${componentIndex}-->${child.value}<!$>`;
+    } else if (isFunction(child)) {
+      return this.renderChild(child(this.props));
     } else if (isSSGNode(child)) {
       const childResult = child.mount();
       return isFunction(childResult) ? childResult(this.props) : extractSignal(childResult);
@@ -1097,9 +1104,6 @@ var SSGNode = class extends LifecycleContext {
   }
 };
 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) {
   if (isJsxElement(data) || data instanceof Node || isSSGNode(data)) {
     return data;
@@ -1216,58 +1220,18 @@ function bindNode(node, setter) {
     });
   }
 }
-Promise.resolve();
 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 isHtmlTagName(tagName) {
-  return HTML_TAGS.includes(tagName);
-}
 function convertToHtmlTag(tagName) {
   return SELF_CLOSING_TAGS.includes(tagName) ? `<${tagName}/>` : `<${tagName}></${tagName}>`;
 }
-function extractSignal(signal) {
-  if (isSignal(signal)) {
-    return signal.value;
+function extractSignal(signal2) {
+  if (isSignal(signal2)) {
+    return signal2.value;
   } else {
-    return signal;
+    return signal2;
   }
 }
 var ComponentNode = class extends LifecycleContext {
@@ -1279,30 +1243,30 @@ var ComponentNode = class extends LifecycleContext {
     this.emitter = /* @__PURE__ */ new Set();
     this.rootNode = null;
     this.trackMap = /* @__PURE__ */ new Map();
-    this.key || (this.key = props == null ? void 0 : props.key);
-    this.proxyProps = this.createProxyProps(props);
+    this.nodes = [];
+    this.parent = null;
+    this.before = null;
+    this.key || (this.key = props && props.key);
+    this.proxyProps || (this.proxyProps = this.createProxyProps(props));
   }
-  // Create reactive props
   createProxyProps(props) {
     if (!props) return {};
-    return useReactive(
+    return shallowReactive(
       props,
       (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;
+    this.parent = parent;
     if (!isFunction(this.template)) {
       throw new Error("Template must be a function");
     }
@@ -1310,49 +1274,55 @@ var ComponentNode = class extends LifecycleContext {
       return (_b = (_a = this.rootNode) == null ? void 0 : _a.mount(parent, before)) != null ? _b : [];
     }
     this.initRef();
-    this.rootNode = this.template(this.proxyProps);
-    const mountedNode = (_d = (_c = this.rootNode) == null ? void 0 : _c.mount(parent, before)) != null ? _d : [];
+    this.rootNode = this.template(reactive(this.proxyProps, [CHILDREN_PROP]));
+    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;
   }
-  // Method to unmount the component from the DOM
   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());
   }
-  // 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();
   }
-  // Method to inherit properties from another ComponentNode
   inheritNode(node) {
     Object.assign(this.proxyProps, node.proxyProps);
     this.rootNode = node.rootNode;
     this.trackMap = node.trackMap;
     this.hooks = node.hooks;
-    const props = this.props;
-    this.props = node.props;
-    this.patchProps(props);
+    if (hasChanged(node.props, this.props)) {
+      const props = this.props;
+      this.props = node.props;
+      this.patchProps(props);
+    }
   }
-  // Private method to get or create a NodeTrack
   getNodeTrack(trackKey) {
     let track2 = this.trackMap.get(trackKey);
     if (!track2) {
@@ -1363,7 +1333,6 @@ var ComponentNode = class extends LifecycleContext {
     track2.cleanup();
     return track2;
   }
-  // Method to patch props onto the component
   patchProps(props) {
     var _a;
     if (!props) {
@@ -1372,7 +1341,7 @@ var ComponentNode = class extends LifecycleContext {
     for (const [key, prop] of Object.entries(props)) {
       if (startsWith(key, EVENT_PREFIX) && ((_a = this.rootNode) == null ? void 0 : _a.firstChild)) {
         this.patchEventListener(key, prop);
-      } else if (key === "ref") {
+      } else if (key === REF_KEY) {
         this.patchRef(prop);
       } else if (startsWith(key, UPDATE_PREFIX)) {
         this.patchUpdateHandler(key, prop);
@@ -1382,28 +1351,33 @@ var ComponentNode = class extends LifecycleContext {
     }
     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);
+    this.proxyProps[key] = extractSignal(prop);
   }
-  // Private method to patch normal props
   patchNormalProp(key, prop) {
     const track2 = this.getNodeTrack(key);
-    track2.cleanup = useEffect(() => {
+    track2.cleanup = effect(() => {
       this.proxyProps[key] = isFunction(prop) ? prop() : prop;
     });
   }
+  cleanup() {
+    this.trackMap.forEach((track2) => {
+      var _a;
+      return (_a = track2.cleanup) == null ? void 0 : _a.call(track2);
+    });
+    this.trackMap.clear();
+    this.emitter.forEach((cleanup) => cleanup());
+    this.emitter.clear();
+  }
 };
 function patchChildren(parent, childrenMap, nextChildren, before) {
   const result = /* @__PURE__ */ new Map();
@@ -1521,26 +1495,21 @@ var TemplateNode = class {
     this.trackMap = /* @__PURE__ */ new Map();
     this.bindValueKeys = [];
     this.parent = null;
-    this.key || (this.key = props == null ? void 0 : props.key);
     if (renderContext.isSSR) {
       this.componentIndex = getComponentIndex(this.template);
     }
   }
-  // Getter for the first child node
   get firstChild() {
     var _a;
     return (_a = this.nodes[0]) != null ? _a : null;
   }
-  // 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;
@@ -1555,7 +1524,7 @@ var TemplateNode = class {
     const firstChild = cloneNode.firstChild;
     if ((_a = firstChild == null ? void 0 : firstChild.hasAttribute) == null ? void 0 : _a.call(firstChild, "_svg_")) {
       firstChild.remove();
-      firstChild == null ? void 0 : firstChild.childNodes.forEach((node) => {
+      firstChild.childNodes.forEach((node) => {
         cloneNode.append(node);
       });
     }
@@ -1570,45 +1539,19 @@ var TemplateNode = class {
     this.mounted = true;
     return this.nodes;
   }
-  // Method to unmount the node from the DOM
   unmount() {
-    var _a, _b;
     this.trackMap.forEach((track2) => {
-      var _a2;
-      (_a2 = track2.cleanup) == null ? void 0 : _a2.call(track2);
+      track2.cleanup && track2.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 (isArray(children)) {
-          children.forEach((child) => {
-            this.deleteFragmentTextNode(child);
-          });
-        } else {
-          this.deleteFragmentTextNode(children);
-        }
-      }
-    }
     this.nodes = [];
     this.mounted = false;
-  }
-  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);
+    if (this.key) {
+      componentCache.delete(this.key);
     }
   }
-  // Method to inherit properties from another TemplateNode
   inheritNode(node) {
     this.mounted = node.mounted;
     this.nodes = node.nodes;
@@ -1618,12 +1561,11 @@ var TemplateNode = class {
     this.props = node.props;
     this.patchProps(props);
   }
-  // Private method to map SSG node tree
   mapSSGNodeTree(parent) {
     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);
@@ -1634,7 +1576,6 @@ var TemplateNode = class {
     };
     this.walkNodeTree(tree, handleNode);
   }
-  // Private method to walk through the node tree
   walkNodeTree(node, handler) {
     if (node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
       handler(node);
@@ -1645,7 +1586,6 @@ var TemplateNode = class {
       child = child.nextSibling;
     }
   }
-  // Private method to handle SSG nodes
   handleSSGNode(node) {
     var _a;
     if (node.nodeType === Node.COMMENT_NODE) {
@@ -1661,7 +1601,6 @@ var TemplateNode = class {
       }
     }
   }
-  // Method to patch props onto the node
   patchProps(props) {
     if (!props) return;
     Object.entries(props).forEach(([key, value]) => {
@@ -1673,15 +1612,14 @@ var TemplateNode = class {
     });
     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") {
+      } else if (attr === REF_KEY) {
         props[attr].value = node;
-      } else if (startsWith(attr, "on")) {
+      } else if (startsWith(attr, EVENT_PREFIX)) {
         this.patchEventListener(key, node, attr, value);
       } else {
         if (this.bindValueKeys.includes(attr)) return;
@@ -1691,14 +1629,12 @@ var TemplateNode = class {
     });
   }
   getBindUpdateValue(props, key, attr) {
-    const UPDATE_PREFIX2 = "update";
-    const updateKey = `${UPDATE_PREFIX2}${capitalizeFirstLetter(attr)}`;
+    const updateKey = `${UPDATE_PREFIX}${capitalize(attr)}`;
     if (updateKey && props[updateKey] && isFunction(props[updateKey])) {
       this.bindValueKeys.push(updateKey);
       return props[updateKey];
     }
   }
-  // Private method to patch children
   patchChildren(key, node, children, isRoot) {
     if (!isArray(children)) {
       const trackKey = `${key}:${CHILDREN_PROP}:0`;
@@ -1715,21 +1651,19 @@ var TemplateNode = class {
       });
     }
   }
-  // Private method to patch event listeners
   patchEventListener(key, node, attr, listener) {
     const eventName = attr.slice(2).toLowerCase();
     const track2 = this.getNodeTrack(`${key}:${attr}`);
     track2.cleanup = addEventListener(node, eventName, listener);
   }
-  // Private method to patch attributes
   patchAttribute(key, element, attr, value, updateFn) {
     const track2 = this.getNodeTrack(`${key}:${attr}`);
-    const val = isFunction(value) ? value() : value;
-    const triggerValue = isSignal(val) ? val : useSignal(val);
-    setAttribute(element, attr, triggerValue.value);
-    const cleanup = useEffect(() => {
-      const val2 = isFunction(value) ? value() : value;
-      triggerValue.value = isSignal(val2) ? val2.value : val2;
+    const triggerValue = shallowSignal();
+    const cleanup = effect(() => {
+      const unFnValue = isFunction(value) ? value() : value;
+      if (isPlainObject(unFnValue) && isPlainObject(triggerValue.peek()) && JSON.stringify(triggerValue.value) === JSON.stringify(unFnValue))
+        return;
+      triggerValue.value = isSignal(unFnValue) ? unFnValue.value : unFnValue;
       setAttribute(element, attr, triggerValue.value);
     });
     let cleanupBind;
@@ -1743,9 +1677,7 @@ var TemplateNode = class {
       cleanupBind && cleanupBind();
     };
   }
-  // Private method to get or create a NodeTrack
   getNodeTrack(trackKey, trackLastNodes, isRoot) {
-    var _a;
     let track2 = this.trackMap.get(trackKey);
     if (!track2) {
       track2 = { cleanup: () => {
@@ -1758,13 +1690,12 @@ var TemplateNode = class {
       }
       this.trackMap.set(trackKey, track2);
     }
-    (_a = track2.cleanup) == null ? void 0 : _a.call(track2);
+    track2.cleanup && track2.cleanup();
     return track2;
   }
-  // Private method to patch a child node
   patchChild(track2, parent, child, before) {
     if (isFunction(child)) {
-      track2.cleanup = useEffect(() => {
+      track2.cleanup = effect(() => {
         const nextNodes = coerceArray(child()).map(coerceNode);
         if (renderContext.isSSR) {
           track2.lastNodes = this.reconcileChildren(parent, nextNodes, before);
@@ -1785,7 +1716,6 @@ var TemplateNode = class {
       });
     }
   }
-  // Private method to reconcile children nodes
   reconcileChildren(parent, nextNodes, before) {
     const result = /* @__PURE__ */ new Map();
     const textNodes = Array.from(parent.childNodes).filter(
@@ -1810,18 +1740,36 @@ var TemplateNode = class {
     return result;
   }
 };
-function h(template, props, key) {
-  if (isString(template)) {
-    if (isHtmlTagName(template)) {
-      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);
+var componentCache = /* @__PURE__ */ new Map();
+function createNodeCache(NodeConstructor, template, props = {}, key) {
+  if (key) {
+    const cached = componentCache.get(key);
+    if (cached) {
+      return cached;
     }
   }
-  return isFunction(template) ? new ComponentNode(template, props, key) : new TemplateNode(template, props, key);
+  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 (isString(template)) {
+    const htmlTemplate = convertToHtmlTag(template);
+    const wrappedProps = { [SINGLE_PROP_KEY]: props };
+    return createNodeCache(TemplateNode, htmlTemplate, wrappedProps, key);
+  }
+  if (isFunction(template)) {
+    return createNodeCache(ComponentNode, template, props, key);
+  }
+  return createNodeCache(TemplateNode, template, props, key);
 }
 function isComponent(node) {
   return node instanceof ComponentNode;
@@ -1831,13 +1779,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(EMPTY_TEMPLATE, {
-    children: isArray(props.children) ? props.children.filter(Boolean) : [props.children]
-  });
+function Fragment(template, props) {
+  const processedProps = props.children ? {
+    [FRAGMENT_PROP_KEY]: {
+      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");
@@ -1855,18 +1807,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 shallowSignal(null);
-}
 function renderToString(component, props) {
   renderContext.setSSG();
   const ssrNode = new SSGNode(component, props || {});
@@ -1895,14 +1844,14 @@ if (globalThis) {
   globalThis.__essor_version__ = essor_version;
 }
 /**
-* @estjs/signal v0.0.14-beta.2
+* @estjs/signal v0.0.14-beta.21
 * (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
 * @license MIT
 **/
 /**
-* @estjs/template v0.0.14-beta.2
+* @estjs/template v0.0.14-beta.21
 * (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
 * @license MIT
 **/
 
-export { Fragment, clearReactive, createStore, essor_version, h, hydrate, isComponent, isComputed, isJsxElement, isReactive, isSignal, onDestroy, onMount, renderToString, shallowReactive, shallowSignal, signalObject, ssg, createTemplate as template, toRaw, useBatch, useComputed, useEffect, useInject, useProvide, useReactive, useRef, useShallowSignal, useSignal, useWatch };
+export { Fragment, clearReactive, computed, createStore, effect, essor_version, h, hydrate, inject, isComponent, isComputed, isJsxElement, isReactive, isSignal, nextTick, onDestroy, onMount, provide, reactive, ref, renderToString, shallowReactive, shallowSignal, signal, signalObject, ssg, createTemplate as template, toRaw, useBatch, watch };