essor 0.0.8 → 0.0.10-beta.21

package/dist/essor.dev.esm.js

@@ -1,3 +1,44 @@
+/**
+* essor v0.0.10-beta.20
+* (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
+* @license MIT
+**/
+
+// src/version.ts
+var essor_version = "0.0.10-beta.20";
+
+// ../shared/dist/essor-shared.js
+var isObject = (val) => val !== null && typeof val === "object";
+var isArray = Array.isArray;
+function isString(val) {
+  return typeof val === "string";
+}
+function isNil(x) {
+  return x === null || x === void 0;
+}
+var isFunction = (val) => typeof val === "function";
+function isFalsy(x) {
+  return x === false || x === null || x === void 0;
+}
+function coerceArray(data) {
+  return Array.isArray(data) ? data.flat() : [data];
+}
+function startsWith(str, searchString) {
+  if (!isString(str)) {
+    return false;
+  }
+  return str.indexOf(searchString) === 0;
+}
+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);
+};
+
+// ../signal/dist/signal.dev.esm.js
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -14,156 +55,47 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-
-// src/version.ts
-var essor_version = "0.0.7";
-
-// ../shared/dist/essor-shared.js
-var isObject = (val) => val !== null && typeof val === "object";
-var isArray = Array.isArray;
-function isString(val) {
+var isObject2 = (val) => val !== null && typeof val === "object";
+var isArray2 = Array.isArray;
+function isString2(val) {
   return typeof val === "string";
 }
 function isNull(val) {
   return val === null;
 }
-function isNil(x) {
-  return x === null || x === void 0;
+function isSet(val) {
+  return _toString.call(val) === "[object Set]";
 }
-var isFunction = (val) => typeof val === "function";
-function isFalsy(x) {
-  return x === false || x === null || x === void 0 || x === "";
+function isWeakMap(val) {
+  return _toString.call(val) === "[object WeakMap]";
+}
+function isWeakSet(val) {
+  return _toString.call(val) === "[object WeakSet]";
 }
+function isMap(val) {
+  return _toString.call(val) === "[object Map]";
+}
+var isFunction2 = (val) => typeof val === "function";
 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";
 }
-function coerceArray(data) {
-  return Array.isArray(data) ? data.flat() : [data];
-}
+var _toString = Object.prototype.toString;
 var hasChanged = (value, oldValue) => value !== oldValue && (value === value || oldValue === oldValue);
-var noop = Function.prototype;
-function startsWith(str, searchString) {
-  if (!isString(str)) {
+var noop2 = Function.prototype;
+function startsWith2(str, searchString) {
+  if (!isString2(str)) {
     return false;
   }
   return str.indexOf(searchString) === 0;
 }
-function deepClone(obj, hash = /* @__PURE__ */ new WeakMap()) {
-  if (obj === null || typeof obj !== "object") {
-    return obj;
-  }
-  if (hash.has(obj)) {
-    return hash.get(obj);
-  }
-  if (obj instanceof Date) {
-    return new Date(obj);
-  }
-  if (obj instanceof RegExp) {
-    return new RegExp(obj);
-  }
-  if (obj instanceof Map) {
-    const mapClone = /* @__PURE__ */ new Map();
-    hash.set(obj, mapClone);
-    obj.forEach((value, key) => {
-      mapClone.set(deepClone(key, hash), deepClone(value, hash));
-    });
-    return mapClone;
-  }
-  if (obj instanceof Set) {
-    const setClone = /* @__PURE__ */ new Set();
-    hash.set(obj, setClone);
-    obj.forEach((value) => {
-      setClone.add(deepClone(value, hash));
-    });
-    return setClone;
-  }
-  const cloneObj = Array.isArray(obj) ? [] : {};
-  hash.set(obj, cloneObj);
-  const keys = Object.keys(obj);
-  for (const key of keys) {
-    cloneObj[key] = deepClone(obj[key], hash);
-  }
-  return cloneObj;
-}
-function deepEqual(a, b, seen = /* @__PURE__ */ new WeakMap()) {
-  if (isPrimitive(a) && isPrimitive(b)) {
-    return a === b;
-  }
-  if (a === b) {
-    return true;
-  }
-  if (a == null || b == null || typeof a !== "object" || typeof b !== "object") {
-    return false;
-  }
-  if (a.constructor !== b.constructor) {
-    return false;
-  }
-  if (seen.has(a)) {
-    return seen.get(a) === b;
-  }
-  seen.set(a, b);
-  if (Array.isArray(a)) {
-    if (a.length !== b.length) {
-      return false;
-    }
-    for (const [i, element] of a.entries()) {
-      if (!deepEqual(element, b[i], seen)) {
-        return false;
-      }
-    }
-    return true;
-  }
-  if (a instanceof Map) {
-    if (a.size !== b.size) {
-      return false;
-    }
-    for (const [key, value] of a) {
-      if (!b.has(key) || !deepEqual(value, b.get(key), seen)) {
-        return false;
-      }
-    }
-    return true;
-  }
-  if (a instanceof Set) {
-    if (a.size !== b.size) {
-      return false;
-    }
-    const arrA = Array.from(a).sort();
-    const arrB = Array.from(b).sort();
-    for (const [i, element] of arrA.entries()) {
-      if (!deepEqual(element, arrB[i], seen)) {
-        return false;
-      }
-    }
-    return true;
-  }
-  const keysA = Object.keys(a);
-  const keysB = new Set(Object.keys(b));
-  if (keysA.length !== keysB.size) {
-    return false;
-  }
-  for (const key of keysA) {
-    if (!keysB.has(key) || !deepEqual(a[key], b[key], seen)) {
-      return false;
-    }
-  }
-  return true;
-}
 function isExclude(key, exclude) {
-  return Array.isArray(exclude) ? exclude.includes(key) : isFunction(exclude) ? exclude(key) : false;
+  return Array.isArray(exclude) ? exclude.includes(key) : isFunction2(exclude) ? exclude(key) : false;
+}
+function warn(msg, ...args) {
+  console.warn.apply(console, [`[Essor warn]: ${msg}`].concat(args));
 }
-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);
-};
-
-// src/signal/signal.ts
 var activeEffect = null;
 var activeComputed = null;
 var computedMap = /* @__PURE__ */ new WeakMap();
@@ -214,32 +146,30 @@ function trigger(target, key) {
   }
 }
 var Signal = class {
-  constructor(value) {
+  constructor(value, shallow = false) {
     this._value = value;
+    this._shallow = shallow;
   }
-  valueOf() {
-    track(this, "_sv");
-    this.__triggerObject();
-    return this._value;
-  }
-  toString() {
-    track(this, "_sv");
-    this.__triggerObject();
-    return String(this._value);
-  }
-  toJSON() {
-    return this._value;
-  }
+  /**
+   * Get the current value of the Signal and track its usage.
+   */
   get value() {
     track(this, "_sv");
     this.__triggerObject();
     return this._value;
   }
+  /**
+   * Trigger reactivity for non-primitive and non-HTMLElement values.
+   * Recursively applies reactivity to nested objects.
+   */
   __triggerObject() {
-    if (!isPrimitive(this._value) && !isHTMLElement(this._value)) {
+    if (!isPrimitive(this._value) && !isHTMLElement(this._value) && !this._shallow) {
       useReactive(this._value);
     }
   }
+  /**
+   * Set a new value to the Signal and trigger updates if the value has changed.
+   */
   set value(newValue) {
     if (isSignal(newValue)) {
       console.warn("Signal cannot be set to another signal, use .peek() instead");
@@ -253,12 +183,12 @@ var Signal = class {
       trigger(this, "_sv");
     }
   }
+  /**
+   * Peek at the current value of the Signal without tracking it.
+   */
   peek() {
     return this._value;
   }
-  update() {
-    trigger(this, "_sv");
-  }
 };
 function useSignal(value) {
   if (isSignal(value)) {
@@ -266,6 +196,9 @@ function useSignal(value) {
   }
   return new Signal(value);
 }
+function shallowSignal(value) {
+  return new Signal(value, true);
+}
 function isSignal(value) {
   return value instanceof Signal;
 }
@@ -277,9 +210,15 @@ var Computed = class {
     this._value = this.fn();
     activeComputed = prev;
   }
+  /**
+   * Get the current computed value without tracking it.
+   */
   peek() {
     return this._value;
   }
+  /**
+   * Run the computed function and update the value if it has changed.
+   */
   run() {
     const newValue = this.fn();
     if (hasChanged(newValue, this._value)) {
@@ -287,6 +226,9 @@ var Computed = class {
       trigger(this, "_cv");
     }
   }
+  /**
+   * Get the current computed value and track its usage.
+   */
   get value() {
     track(this, "_cv");
     return this._value;
@@ -324,15 +266,15 @@ function unSignal(signal, exclude) {
   if (isSignal(signal)) {
     return signal.peek();
   }
-  if (isArray(signal)) {
+  if (isArray2(signal)) {
     return signal.map((value) => unSignal(value, exclude));
   }
-  if (isObject(signal)) {
+  if (isObject2(signal)) {
     return Object.entries(signal).reduce((acc, [key, value]) => {
       if (isExclude(key, exclude)) {
         acc[key] = value;
       } else {
-        acc[key] = isSignal(value) ? value.peek() : value;
+        acc[key] = isSignal(value) ? value.peek() : isReactive(value) ? unReactive(value) : value;
       }
       return acc;
     }, {});
@@ -349,8 +291,32 @@ function unReactive(obj) {
   }
   return __spreadValues({}, obj);
 }
+function createArrayProxy(initialValue) {
+  arrayMethods.forEach((method) => {
+    const originalMethod = Array.prototype[method];
+    track(initialValue, "length");
+    Object.defineProperty(initialValue, method, {
+      value(...args) {
+        const result = originalMethod.apply(this, args);
+        if (["push", "pop", "shift", "unshift", "splice", "sort", "reverse"].includes(method)) {
+          trigger(initialValue, "length");
+        }
+        return result;
+      },
+      enumerable: false,
+      writable: true,
+      configurable: true
+    });
+  });
+}
 function useReactive(initialValue, exclude) {
-  if (!isObject(initialValue)) {
+  return reactive(initialValue, exclude, false);
+}
+function shallowReactive(initialValue, exclude) {
+  return reactive(initialValue, exclude, true);
+}
+function reactive(initialValue, exclude, shallow = false) {
+  if (!isObject2(initialValue)) {
     return initialValue;
   }
   if (isReactive(initialValue)) {
@@ -360,33 +326,21 @@ function useReactive(initialValue, exclude) {
     return reactiveMap.get(initialValue);
   }
   if (Array.isArray(initialValue)) {
-    arrayMethods.forEach((method) => {
-      const originalMethod = initialValue[method];
-      track(initialValue, "length");
-      Object.defineProperties(initialValue, {
-        [method]: {
-          value(...args) {
-            const result = originalMethod.apply(this, args);
-            trigger(initialValue, "length");
-            return result;
-          },
-          enumerable: false,
-          configurable: true,
-          writable: true
-        }
-      });
-    });
+    createArrayProxy(initialValue);
+  }
+  if (isSet(initialValue) || isMap(initialValue) || isWeakSet(initialValue) || isWeakMap(initialValue)) {
+    return initialValue;
   }
   const handler = {
     get(target, key, receiver) {
-      if (key === REACTIVE_MARKER || startsWith(key, "_")) return true;
+      if (key === REACTIVE_MARKER || startsWith2(key, "_")) return true;
       const getValue = Reflect.get(target, key, receiver);
       const value = isSignal(getValue) ? getValue.value : getValue;
       if (isExclude(key, exclude)) {
         return value;
       }
       track(target, key);
-      if (isObject(value)) {
+      if (isObject2(value) && !shallow) {
         return useReactive(value);
       }
       return value;
@@ -422,46 +376,34 @@ function useReactive(initialValue, exclude) {
   reactiveMap.set(initialValue, proxy);
   return proxy;
 }
-
-// src/warning.ts
-function warn(msg, ...args) {
-  console.warn.apply(console, [`[Essor warn]: ${msg}`].concat(args));
-}
-
-// src/signal/watch.ts
 function useWatch(source, cb, options) {
   return doWatch(source, cb, options);
 }
 function doWatch(source, cb, options) {
   let getter;
-  const deep = options == null ? void 0 : options.deep;
   if (isSignal(source) || isComputed(source)) {
     getter = () => source.value;
   } else if (isReactive(source)) {
     getter = () => __spreadValues({}, source);
-  } else if (isArray(source)) {
+  } else if (isArray2(source)) {
     getter = () => source.map((s) => {
       if (isSignal(s) || isComputed(s)) return s.value;
       if (isReactive(s)) return __spreadValues({}, s);
-      if (isFunction(s)) return s();
+      if (isFunction2(s)) return s();
       return warn("Invalid source", s);
     });
-  } else if (isFunction(source)) {
+  } else if (isFunction2(source)) {
     getter = source;
   } else {
     warn("Invalid source type", source);
-    getter = noop;
-  }
-  if (cb && deep) {
-    const baseGetter = getter;
-    getter = () => traverse(baseGetter());
+    getter = noop2;
   }
   let oldValue;
   const effectFn = () => {
-    const newValue = deepClone(getter());
-    if (!deepEqual(newValue, oldValue)) {
+    const newValue = getter();
+    if ((options == null ? void 0 : options.deep) || hasChanged(newValue, oldValue)) {
       cb && cb(newValue, oldValue);
-      oldValue = isPrimitive(newValue) ? newValue : deepClone(newValue);
+      oldValue = newValue;
     }
   };
   const stop = useEffect(effectFn);
@@ -470,35 +412,12 @@ function doWatch(source, cb, options) {
   }
   return stop;
 }
-function traverse(value, seen = /* @__PURE__ */ new Set()) {
-  if (!isObject(value) || seen.has(value)) return value;
-  seen.add(value);
-  if (isArray(value)) {
-    value.forEach((item) => traverse(item, seen));
-  } else if (value instanceof Map) {
-    value.forEach((v, k) => {
-      traverse(k, seen);
-      traverse(v, seen);
-    });
-  } else if (value instanceof Set) {
-    value.forEach((v) => traverse(v, seen));
-  } else {
-    Object.keys(value).forEach((key) => {
-      traverse(value[key], seen);
-    });
-  }
-  return value;
-}
-
-// src/signal/store.ts
 var _id = 0;
 var StoreMap = /* @__PURE__ */ new Map();
 function createOptionsStore(options) {
   const { state, getters, actions } = options;
   const initState = __spreadValues({}, state != null ? state : {});
-  const reactiveState = useReactive(state != null ? state : {}, (val) => {
-    return isFunction(val);
-  });
+  const reactiveState = useReactive(state != null ? state : {});
   const subscriptions = [];
   const actionCallbacks = [];
   const default_actions = {
@@ -529,7 +448,9 @@ function createOptionsStore(options) {
   for (const key in getters) {
     const getter = getters[key];
     if (getter) {
-      store[key] = useComputed(getter.bind(reactiveState, reactiveState));
+      useWatch(useComputed(getter.bind(reactiveState, reactiveState)), (value) => {
+        store[key] = value;
+      });
     }
   }
   for (const key in actions) {
@@ -551,8 +472,8 @@ function createStore(options) {
   };
 }
 
-// src/template/component-node.ts
-var _ComponentNode = class _ComponentNode {
+// ../template/dist/template.dev.esm.js
+var _ComponentNode = class _ComponentNode2 {
   constructor(template2, props) {
     this.template = template2;
     this.props = props;
@@ -588,10 +509,10 @@ var _ComponentNode = class _ComponentNode {
     (_a = this.hooks[hook]) == null ? void 0 : _a.add(cb);
   }
   getContext(context) {
-    return _ComponentNode.context[context];
+    return _ComponentNode2.context[context];
   }
   setContext(context, value) {
-    _ComponentNode.context[context] = value;
+    _ComponentNode2.context[context] = value;
   }
   inheritNode(node) {
     this.context = node.context;
@@ -603,17 +524,6 @@ var _ComponentNode = class _ComponentNode {
     this.props = node.props;
     this.patchProps(props);
   }
-  unmount() {
-    var _a;
-    this.hooks.destroy.forEach((handler) => handler());
-    Object.values(this.hooks).forEach((set) => set.clear());
-    (_a = this.rootNode) == null ? void 0 : _a.unmount();
-    this.rootNode = null;
-    this.proxyProps = {};
-    this.mounted = false;
-    this.emitter.forEach((emitter) => emitter());
-    _ComponentNode.context = {};
-  }
   mount(parent, before) {
     var _a, _b, _c, _d;
     if (!isFunction(this.template)) {
@@ -622,15 +532,25 @@ var _ComponentNode = class _ComponentNode {
     if (this.isConnected) {
       return (_b = (_a = this.rootNode) == null ? void 0 : _a.mount(parent, before)) != null ? _b : [];
     }
-    _ComponentNode.ref = this;
+    _ComponentNode2.ref = this;
     this.rootNode = this.template(useReactive(this.proxyProps, ["children"]));
-    _ComponentNode.ref = null;
+    _ComponentNode2.ref = null;
     this.mounted = true;
     const mountedNode = (_d = (_c = this.rootNode) == null ? void 0 : _c.mount(parent, before)) != null ? _d : [];
     this.hooks.mounted.forEach((handler) => handler());
     this.patchProps(this.props);
     return mountedNode;
   }
+  unmount() {
+    var _a;
+    this.hooks.destroy.forEach((handler) => handler());
+    Object.values(this.hooks).forEach((set) => set.clear());
+    (_a = this.rootNode) == null ? void 0 : _a.unmount();
+    this.rootNode = null;
+    this.proxyProps = {};
+    this.mounted = false;
+    this.emitter.forEach((emitter) => emitter());
+  }
   getNodeTrack(trackKey, suppressCleanupCall) {
     let track2 = this.trackMap.get(trackKey);
     if (!track2) {
@@ -673,8 +593,6 @@ var _ComponentNode = class _ComponentNode {
 _ComponentNode.ref = null;
 _ComponentNode.context = {};
 var ComponentNode = _ComponentNode;
-
-// src/template/template.ts
 function h(_template, props) {
   if (isString(_template)) {
     if (isHtmlTagName(_template)) {
@@ -704,8 +622,8 @@ function template(html) {
 function Fragment(props) {
   return props.children;
 }
-
-// src/template/utils.ts
+var selfClosingTags = "area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr";
+var htmlTags = "a,abbr,acronym,address,applet,area,article,aside,audio,b,base,basefont,bdi,bdo,bgsound,big,blink,blockquote,body,br,button,canvas,caption,center,cite,code,col,colgroup,command,content,data,datalist,dd,del,details,dfn,dialog,dir,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,frame,frameset,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,i,iframe,image,img,input,ins,kbd,keygen,label,legend,li,link,listing,main,map,mark,marquee,menu,menuitem,meta,meter,nav,nobr,noframes,noscript,object,ol,optgroup,option,output,p,param,picture,plaintext,pre,progress,q,rb,rp,rt,rtc,ruby,s,samp,script,section,select,shadow,small,source,spacer,span,strike,strong,style,sub,summary,sup,table,tbody,td,template,textarea,tfoot,th,thead,time,title,tr,track,tt,u,ul,var,video,wbr,xmp";
 function coerceNode(data) {
   if (isJsxElement(data) || data instanceof Node) {
     return data;
@@ -764,43 +682,43 @@ function setAttribute(element, attr, value) {
   } else if (value === true) {
     element.setAttribute(attr, "");
   } else {
-    element.setAttribute(attr, String(value));
+    if (element instanceof HTMLInputElement) {
+      element.value = String(value);
+    } else {
+      element.setAttribute(attr, String(value));
+    }
   }
 }
 function binNode(node, setter) {
   if (node instanceof HTMLInputElement) {
-    if (node.type === "checkbox") {
-      return addEventListener(node, "change", () => {
-        setter(Boolean(node.checked));
-      });
-    }
-    if (node.type === "date") {
-      return addEventListener(node, "change", () => {
-        setter(node.value ? node.value : "");
-      });
-    }
-    if (node.type === "file") {
-      return addEventListener(node, "change", () => {
-        if (node.files) {
-          setter(node.files);
-        }
-      });
-    }
-    if (node.type === "number") {
-      return addEventListener(node, "input", () => {
-        const value = Number.parseFloat(node.value);
-        setter(Number.isNaN(value) ? "" : String(value));
-      });
-    }
-    if (node.type === "radio") {
-      return addEventListener(node, "change", () => {
-        setter(node.checked ? node.value : "");
-      });
-    }
-    if (node.type === "text") {
-      return addEventListener(node, "input", () => {
-        setter(node.value);
-      });
+    switch (node.type) {
+      case "checkbox":
+        return addEventListener(node, "change", () => {
+          setter(Boolean(node.checked));
+        });
+      case "date":
+        return addEventListener(node, "change", () => {
+          setter(node.value ? node.value : "");
+        });
+      case "file":
+        return addEventListener(node, "change", () => {
+          if (node.files) {
+            setter(node.files);
+          }
+        });
+      case "number":
+        return addEventListener(node, "input", () => {
+          const value = Number.parseFloat(node.value);
+          setter(Number.isNaN(value) ? "" : String(value));
+        });
+      case "radio":
+        return addEventListener(node, "change", () => {
+          setter(node.checked ? node.value : "");
+        });
+      case "text":
+        return addEventListener(node, "input", () => {
+          setter(node.value);
+        });
     }
   }
   if (node instanceof HTMLSelectElement) {
@@ -822,164 +740,8 @@ function addEventListener(node, eventName, handler) {
   node.addEventListener(eventName, handler);
   return () => node.removeEventListener(eventName, handler);
 }
-var selfClosingTags = [
-  "area",
-  "base",
-  "br",
-  "col",
-  "embed",
-  "hr",
-  "img",
-  "input",
-  "link",
-  "meta",
-  "param",
-  "source",
-  "track",
-  "wbr"
-];
-var htmlTags = [
-  "a",
-  "abbr",
-  "acronym",
-  "address",
-  "applet",
-  "area",
-  "article",
-  "aside",
-  "audio",
-  "b",
-  "base",
-  "basefont",
-  "bdi",
-  "bdo",
-  "bgsound",
-  "big",
-  "blink",
-  "blockquote",
-  "body",
-  "br",
-  "button",
-  "canvas",
-  "caption",
-  "center",
-  "cite",
-  "code",
-  "col",
-  "colgroup",
-  "command",
-  "content",
-  "data",
-  "datalist",
-  "dd",
-  "del",
-  "details",
-  "dfn",
-  "dialog",
-  "dir",
-  "div",
-  "dl",
-  "dt",
-  "em",
-  "embed",
-  "fieldset",
-  "figcaption",
-  "figure",
-  "font",
-  "footer",
-  "form",
-  "frame",
-  "frameset",
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  "head",
-  "header",
-  "hgroup",
-  "hr",
-  "html",
-  "i",
-  "iframe",
-  "image",
-  "img",
-  "input",
-  "ins",
-  "kbd",
-  "keygen",
-  "label",
-  "legend",
-  "li",
-  "link",
-  "listing",
-  "main",
-  "map",
-  "mark",
-  "marquee",
-  "menu",
-  "menuitem",
-  "meta",
-  "meter",
-  "nav",
-  "nobr",
-  "noframes",
-  "noscript",
-  "object",
-  "ol",
-  "optgroup",
-  "option",
-  "output",
-  "p",
-  "param",
-  "picture",
-  "plaintext",
-  "pre",
-  "progress",
-  "q",
-  "rb",
-  "rp",
-  "rt",
-  "rtc",
-  "ruby",
-  "s",
-  "samp",
-  "script",
-  "section",
-  "select",
-  "shadow",
-  "small",
-  "source",
-  "spacer",
-  "span",
-  "strike",
-  "strong",
-  "style",
-  "sub",
-  "summary",
-  "sup",
-  "table",
-  "tbody",
-  "td",
-  "template",
-  "textarea",
-  "tfoot",
-  "th",
-  "thead",
-  "time",
-  "title",
-  "tr",
-  "track",
-  "tt",
-  "u",
-  "ul",
-  "var",
-  "video",
-  "wbr",
-  "xmp"
-];
 function closeHtmlTags(input) {
+  const selfClosingTagList = selfClosingTags.split(",");
   const tagStack = [];
   const output = [];
   const tagPattern = /<\/?([\da-z-]+)([^>]*)>/gi;
@@ -987,7 +749,7 @@ function closeHtmlTags(input) {
   while (true) {
     const match = tagPattern.exec(input);
     if (!match) break;
-    const [fullMatch, tagName, attributes] = match;
+    const [fullMatch, tagName] = match;
     const isEndTag = fullMatch[1] === "/";
     output.push(input.slice(lastIndex, match.index));
     lastIndex = match.index + fullMatch.length;
@@ -1000,16 +762,11 @@ function closeHtmlTags(input) {
       }
       if (tagStack.length > 0) {
         tagStack.pop();
-        output.push(fullMatch);
-      }
-    } else {
-      if (selfClosingTags.includes(tagName)) {
-        output.push(fullMatch);
-      } else {
-        tagStack.push(tagName);
-        output.push(`<${tagName}${attributes}>`);
       }
+    } else if (!selfClosingTagList.includes(tagName)) {
+      tagStack.push(tagName);
     }
+    output.push(fullMatch);
   }
   output.push(input.slice(lastIndex));
   while (tagStack.length > 0) {
@@ -1020,18 +777,18 @@ function closeHtmlTags(input) {
   }
   return output.join("");
 }
-function isHtmlTagName(str) {
-  return htmlTags.includes(str);
+function isHtmlTagName(tagName) {
+  const htmlTagsList = htmlTags.split(",");
+  return htmlTagsList.includes(tagName);
 }
-function convertToHtmlTag(tag) {
-  if (selfClosingTags.includes(tag)) {
-    return `<${tag}/>`;
+function convertToHtmlTag(tagName) {
+  const selfClosingTagList = selfClosingTags.split(",");
+  if (selfClosingTagList.includes(tagName)) {
+    return `<${tagName}/>`;
   } else {
-    return `<${tag}></${tag}>`;
+    return `<${tagName}></${tagName}>`;
   }
 }
-
-// src/template/patch.ts
 function patchChildren(parent, childrenMap, nextChildren, before) {
   const result = /* @__PURE__ */ new Map();
   const children = Array.from(childrenMap.values());
@@ -1129,8 +886,6 @@ function getKey(node, index) {
   const result = id === "" ? void 0 : id;
   return result != null ? result : `_$${index}$`;
 }
-
-// src/template/template-node.ts
 var TemplateNode = class _TemplateNode {
   constructor(template2, props) {
     this.template = template2;
@@ -1324,8 +1079,6 @@ function patchChild(track2, parent, child, before) {
     });
   }
 }
-
-// src/template/hooks.ts
 function onMount(cb) {
   var _a;
   throwIfOutsideComponent("onMounted");
@@ -1354,42 +1107,21 @@ function useInject(key, defaultValue) {
   throwIfOutsideComponent("useInject");
   return ((_a = ComponentNode.ref) == null ? void 0 : _a.getContext(key)) || defaultValue;
 }
-function useRef() {
-  let refValue = null;
-  return new Proxy({}, {
-    get(target, key) {
-      if (key === "__is_ref") {
-        return true;
-      }
-      return refValue;
-    },
-    set(target, prop, value) {
-      if (prop === "current") {
-        refValue = value;
-        return true;
-      }
-      refValue = value;
-      return true;
-    }
-  });
-}
-
-// src/server/index.ts
-function jsonToAttrs(json) {
+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 templates = Array.isArray(template2) ? template2.reduce((acc, tmpl, index) => {
+  const templateCollection = Array.isArray(template2) ? template2.reduce((acc, tmpl, index) => {
     acc[index + 1] = { template: tmpl };
     return acc;
   }, {}) : template2;
-  const childrenMap = {};
-  const newTemplate = {};
-  if (isObject(templates)) {
-    for (const [key, tmpl] of Object.entries(templates)) {
+  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) {
@@ -1399,30 +1131,30 @@ function renderTemplate(template2, props) {
         }
         if (prop.children) {
           for (const [child, idx] of prop.children) {
-            if (!childrenMap[idx]) childrenMap[idx] = [];
-            childrenMap[idx].push(child);
+            if (!childNodesMap[idx]) childNodesMap[idx] = [];
+            childNodesMap[idx].push(child);
           }
           delete prop.children;
         }
       }
-      newTemplate[key] = { template: tmpl.template, prop };
+      processedTemplates[key] = { template: tmpl.template, props: prop };
     }
   }
-  return Object.entries(newTemplate).map(([key, { template: tmpl, prop }]) => {
-    let str = tmpl;
+  return Object.entries(processedTemplates).map(([key, { template: tmpl, props: prop }]) => {
+    let renderedString = tmpl;
     if (prop) {
-      str += ` ${jsonToAttrs(prop)}`;
+      renderedString += ` ${convertJsonToAttributes(prop)}`;
     }
-    if (childrenMap[key]) {
-      str += childrenMap[key].map((child) => renderTemplate(child, prop)).join("");
+    if (childNodesMap[key]) {
+      renderedString += childNodesMap[key].map((child) => renderTemplate(child, prop)).join("");
     }
-    return str;
+    return renderedString;
   }).join("");
 }
 function renderToString(component, props) {
   return renderTemplate(component, props);
 }
-function ssgRender(component, root, props = {}) {
+function renderSSG(component, root, props = {}) {
   root.innerHTML = renderTemplate(component, props);
 }
 
@@ -1430,5 +1162,20 @@ function ssgRender(component, root, props = {}) {
 if (globalThis) {
   globalThis.__essor_version__ = essor_version;
 }
+/**
+* @estjs/shared v0.0.10-beta.20
+* (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
+* @license MIT
+**/
+/**
+* @estjs/signal v0.0.10-beta.20
+* (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
+* @license MIT
+**/
+/**
+* @estjs/template v0.0.10-beta.20
+* (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
+* @license MIT
+**/
 
-export { ComponentNode, Fragment, TemplateNode, createStore, essor_version, h, isComputed, isJsxElement, isReactive, isSignal, nextTick, onDestroy, onMount, renderTemplate, renderToString, signalObject, ssgRender, template, unReactive, unSignal, useComputed, useEffect, useInject, useProvide, useReactive, useRef, useSignal, useWatch };
+export { ComponentNode, Fragment, TemplateNode, createStore, essor_version, h, isComputed, isJsxElement, isReactive, isSignal, nextTick, onDestroy, onMount, renderSSG, renderTemplate, renderToString, shallowReactive, shallowSignal, signalObject, template, unReactive, unSignal, useComputed, useEffect, useInject, useProvide, useReactive, useSignal, useWatch };