essor 0.0.13-beta.7 → 0.0.13

package/dist/essor.dev.cjs.js

@@ -1,13 +1,13 @@
 'use strict';
 
 /**
-* essor v0.0.13-beta.7
+* essor v0.0.13
 * (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
 * @license MIT
 **/
 
 // src/version.ts
-var essor_version = "0.0.13-beta.7";
+var essor_version = "0.0.13";
 
 // ../shared/dist/shared.js
 var isObject = (val) => val !== null && typeof val === "object";
@@ -33,12 +33,12 @@ function isWeakSet(val) {
 function isMap(val) {
   return _toString.call(val) === "[object Map]";
 }
-function isNil(x2) {
-  return x2 === null || x2 === void 0;
+function isNil(x) {
+  return x === null || x === void 0;
 }
 var isFunction = (val) => typeof val === "function";
-function isFalsy(x2) {
-  return x2 === false || x2 === null || x2 === void 0;
+function isFalsy(x) {
+  return x === false || x === null || x === void 0;
 }
 var isPrimitive = (val) => ["string", "number", "boolean", "symbol", "undefined"].includes(typeof val) || isNull(val);
 var isPlainObject = (val) => _toString.call(val) === "[object Object]";
@@ -95,401 +95,855 @@ function warn(msg, ...args) {
   console.warn.apply(console, [`[Essor warn]: ${msg}`].concat(args));
 }
 
-// ../signal/dist/signal.esm.js
-var ye = Object.defineProperty;
-var U = Object.getOwnPropertySymbols;
-var Se = Object.prototype.hasOwnProperty;
-var me = Object.prototype.propertyIsEnumerable;
-var Q = (e, t, n) => t in e ? ye(e, t, { enumerable: true, configurable: true, writable: true, value: n }) : e[t] = n;
-var y = (e, t) => {
-  for (var n in t || (t = {})) Se.call(t, n) && Q(e, n, t[n]);
-  if (U) for (var n of U(t)) me.call(t, n) && Q(e, n, t[n]);
-  return e;
+// ../signal/dist/signal.dev.esm.js
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
 };
-var M = [];
-var F = [];
-var X = Promise.resolve();
-var K = false;
-function E(e) {
-  return e ? X.then(e) : X;
-}
-function ge(e) {
-  M.includes(e) || (M.push(e), Y());
-}
-function Y() {
-  K || (K = true, E(we));
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var queue = [];
+var activePreFlushCbs = [];
+var p = Promise.resolve();
+var isFlushPending = false;
+function nextTick(fn) {
+  return fn ? p.then(fn) : p;
+}
+function queueJob(job) {
+  if (!queue.includes(job)) {
+    queue.push(job);
+    queueFlush();
+  }
+}
+function queueFlush() {
+  if (isFlushPending) {
+    return;
+  }
+  isFlushPending = true;
+  nextTick(flushJobs);
 }
-function _e(e) {
-  xe(e, F);
+function queuePreFlushCb(cb) {
+  queueCb(cb, activePreFlushCbs);
 }
-function xe(e, t) {
-  t.includes(e) || (t.push(e), Y());
+function queueCb(cb, activeQueue) {
+  if (!activeQueue.includes(cb)) {
+    activeQueue.push(cb);
+    queueFlush();
+  }
 }
-function we() {
-  K = false, ve();
-  let e;
-  for (; e = M.shift(); ) e && e();
+function flushJobs() {
+  isFlushPending = false;
+  flushPreFlushCbs();
+  let job;
+  while (job = queue.shift()) {
+    if (job) {
+      job();
+    }
+  }
 }
-function ve() {
-  for (; F.length > 0; ) {
-    let e = F.shift();
-    e && e();
+function flushPreFlushCbs() {
+  while (activePreFlushCbs.length > 0) {
+    const cb = activePreFlushCbs.shift();
+    if (cb) {
+      cb();
+    }
   }
 }
-function Z(e, t) {
-  return t === "sync" ? () => e() : t === "pre" ? () => _e(e) : () => {
-    E(() => ge(e));
-  };
+function createScheduler(effect, flush) {
+  if (flush === "sync") {
+    return () => effect();
+  } else if (flush === "pre") {
+    return () => queuePreFlushCb(effect);
+  } else {
+    return () => {
+      nextTick(() => queueJob(effect));
+    };
+  }
 }
-var T = null;
-var G = /* @__PURE__ */ new WeakMap();
-var H = /* @__PURE__ */ new WeakMap();
-var x = Symbol("");
-var w = Symbol("");
-var te = Symbol("");
-var ne = Symbol("");
-var $ = Symbol("");
-var f = Symbol("");
-var S = Symbol("");
-var D = false;
-var P = /* @__PURE__ */ new Set();
-function u(e, t) {
-  if (!T) return;
-  let n = G.get(e);
-  n || (n = /* @__PURE__ */ new Map(), G.set(e, n));
-  let o = n.get(t);
-  o || (o = /* @__PURE__ */ new Set(), n.set(t, o)), T && o.add(T);
-}
-function p(e, t) {
-  let n = G.get(e);
-  if (!n) return;
-  let o = n.get(t);
-  o && o.forEach((r) => {
-    if (hasOwn(r, "active") && !r.active) {
-      o.delete(r);
-      return;
-    }
-    D ? P.add(r) : r();
-  });
+var activeEffect = null;
+var triggerMap = /* @__PURE__ */ new WeakMap();
+var reactiveMap = /* @__PURE__ */ new WeakMap();
+var ReactiveSymbol = Symbol("ReactiveSymbol");
+var ReactivePeekSymbol = Symbol("__raw");
+var SignalValueKey = Symbol("SignalValueKey");
+var ComputedValueKey = Symbol("ComputedValueKey");
+var reactiveArrayKey = Symbol("ReactiveArrayKey");
+var ReactiveCollectionKey = Symbol("ReactiveCollectionKey");
+var ReactiveWeakCollectionKey = Symbol("ReactiveWeakCollectionKey");
+var inBatch = false;
+var batchQueue = /* @__PURE__ */ new Set();
+function track(target, key) {
+  if (!activeEffect) return;
+  let depsMap = triggerMap.get(target);
+  if (!depsMap) {
+    depsMap = /* @__PURE__ */ new Map();
+    triggerMap.set(target, depsMap);
+  }
+  let dep = depsMap.get(key);
+  if (!dep) {
+    dep = /* @__PURE__ */ new Set();
+    depsMap.set(key, dep);
+  }
+  dep.add(activeEffect);
+}
+function trigger(target, key) {
+  const depsMap = triggerMap.get(target);
+  if (!depsMap) return;
+  const dep = depsMap.get(key);
+  if (dep) {
+    dep.forEach((effect) => {
+      if (hasOwn(effect, "active") && !effect.active) {
+        dep.delete(effect);
+        return;
+      }
+      inBatch ? batchQueue.add(effect) : effect();
+    });
+  }
 }
-var _ = class {
-  constructor(t, n = false) {
+var Signal = class {
+  /**
+   * 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) {
     this.__signal = true;
-    this.__shallow = n, this.__value = t;
+    this.__shallow = shallow;
+    this.__value = value;
   }
+  /**
+   * Gets the current value of the Signal.
+   * @returns {T} The current value.
+   */
   get value() {
-    return u(this, te), isObject(this.__value) && !this.__shallow ? v(this.__value) : this.__value;
+    track(this, SignalValueKey);
+    if (isObject(this.__value) && !this.__shallow) {
+      return reactive(this.__value);
+    }
+    return this.__value;
   }
-  set value(t) {
-    h(t) && (t = t.peek()), hasChanged(t, this.__value) && (this.__value = t, p(this, te));
+  /**
+   * Sets a new value for the Signal.
+   * @param {T} newValue - The new value to set.
+   */
+  set value(newValue) {
+    if (isSignal(newValue)) {
+      newValue = newValue.peek();
+    }
+    if (hasChanged(newValue, this.__value)) {
+      this.__value = newValue;
+      trigger(this, SignalValueKey);
+    }
   }
+  /**
+   * Returns the current value without triggering reactivity.
+   * @returns {T} The current value.
+   */
   peek() {
     return this.__value;
   }
 };
-function le(e) {
-  return h(e) ? e : new _(e);
+function useSignal(value) {
+  if (isSignal(value)) {
+    return value;
+  }
+  return new Signal(value);
 }
-function Re(e) {
-  return new _(e, true);
+function useShallowSignal(value) {
+  return new Signal(value, true);
 }
-function We(e) {
-  return new _(e, true);
+function shallowSignal(value) {
+  return new Signal(value, true);
 }
-function h(e) {
-  return !!(e && (e != null && e.__signal));
+function isSignal(value) {
+  return !!(value && (value == null ? void 0 : value.__signal));
 }
-var V = class {
-  constructor(t) {
-    this.fn = t;
+var Computed = class {
+  constructor(fn) {
+    this.fn = fn;
     this.__computed = true;
-    let n = T;
-    T = this.run.bind(this), this.__value = this.fn(), T = n;
+    const prev = activeEffect;
+    activeEffect = this.run.bind(this);
+    this.__value = this.fn();
+    activeEffect = 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() {
-    let t = this.fn();
-    hasChanged(t, this.__value) && (this.__value = t, p(this, ne));
+    const newValue = this.fn();
+    if (hasChanged(newValue, this.__value)) {
+      this.__value = newValue;
+      trigger(this, ComputedValueKey);
+    }
   }
+  /**
+   * Get the current computed value and track its usage.
+   */
   get value() {
-    return u(this, ne), this.__value;
+    track(this, ComputedValueKey);
+    return this.__value;
   }
 };
-function z(e) {
-  return new V(e);
+function useComputed(fn) {
+  return new Computed(fn);
+}
+function isComputed(value) {
+  return !!(value && value.__computed);
+}
+function useEffect(fn, options = {}) {
+  const { flush = "pre", onTrack, onTrigger } = options;
+  function effectFn() {
+    const prev = activeEffect;
+    activeEffect = effectFn.init ? effectFn : effectFn.scheduler;
+    fn();
+    onTrigger && onTrigger();
+    activeEffect = prev;
+  }
+  const scheduler = createScheduler(effectFn, flush);
+  effectFn.scheduler = scheduler;
+  effectFn.init = true;
+  effectFn.active = true;
+  onTrack && onTrack();
+  effectFn();
+  return () => {
+    effectFn.active = false;
+    activeEffect = null;
+  };
 }
-function I(e) {
-  return !!(e && e.__computed);
+function signalObject(initialValues, exclude) {
+  if (!initialValues || !isObject(initialValues)) {
+    {
+      warn("initialValues must be an object,will return initial value!", initialValues);
+    }
+    return initialValues;
+  }
+  const signals = Object.entries(initialValues).reduce((acc, [key, value]) => {
+    acc[key] = isExclude(key, exclude) || isSignal(value) ? value : useSignal(value);
+    return acc;
+  }, {});
+  return signals;
 }
-function B(e, t = {}) {
-  let { flush: n = "pre", onTrack: o, onTrigger: r } = t;
-  function s() {
-    let d = T;
-    T = s.init ? s : s.scheduler, e(), r && r(), T = d;
+function toRaw(value) {
+  if (!value) return value;
+  if (isReactive(value)) {
+    return value[ReactivePeekSymbol];
   }
-  let i = Z(s, n);
-  return s.scheduler = i, s.init = true, s.active = true, o && o(), s(), () => {
-    s.active = false, T = null;
-  };
+  if (isSignal(value)) {
+    return value.peek();
+  }
+  if (isArray(value)) {
+    return value.map((value2) => toRaw(value2));
+  }
+  if (isPlainObject(value)) {
+    return Object.fromEntries(
+      Object.entries(value).map(([key, value2]) => [key, toRaw(value2)])
+    );
+  }
+  return value;
+}
+function isReactive(obj) {
+  return !!(obj && typeof obj === "object" && obj[ReactiveSymbol]);
+}
+function useReactive(initialValue, exclude) {
+  return reactive(initialValue, false, exclude);
+}
+function shallowReactive(initialValue, exclude) {
+  return reactive(initialValue, true, exclude);
 }
-function Ce(e, t) {
-  return !e || !isObject(e) ? e : Object.entries(e).reduce((o, [r, s]) => (o[r] = isExclude(r, t) || h(s) ? s : le(s), o), {});
-}
-function c(e) {
-  return e && (b(e) ? e[w] : h(e) ? e.peek() : isArray(e) ? e.map((t) => c(t)) : isPlainObject(e) ? Object.fromEntries(Object.entries(e).map(([t, n]) => [t, c(n)])) : e);
-}
-function b(e) {
-  return !!(e && typeof e == "object" && e[x]);
-}
-function L(e, t) {
-  return v(e, false, t);
-}
-function Ee(e, t) {
-  return v(e, true, t);
-}
-var Pe = (e, t) => ({ get(n, o, r) {
-  if (o === x) return true;
-  if (o === w) return n;
-  let s = Reflect.get(n, o, r), i = h(s) ? s.value : s;
-  return isExclude(o, t) ? i : (u(n, o), isObject(i) && !e ? v(i) : i);
-}, set(n, o, r, s) {
-  if (isExclude(o, t)) return Reflect.set(n, o, r, s), true;
-  let i = Reflect.get(n, o, s);
-  h(i) && (i = i.value), h(r) && (r = r.value);
-  let d = Reflect.set(n, o, r, s);
-  return hasChanged(r, i) && p(n, o), d;
-}, deleteProperty(n, o) {
-  let r = Reflect.get(n, o), s = Reflect.deleteProperty(n, o);
-  return r !== void 0 && p(n, o), s;
-} });
-var oe = je();
-function je() {
-  let e = {};
-  return ["includes", "indexOf", "lastIndexOf"].forEach((t) => {
-    e[t] = function(...n) {
-      let o = c(this);
-      for (let s = 0, i = this.length; s < i; s++) u(o, `${s}`);
-      let r = o[t](...n);
-      return r === -1 || r === false ? o[t](...n) : r;
+var basicHandler = (shallow, exclude) => {
+  return {
+    get(target, key, receiver) {
+      if (key === ReactiveSymbol) return true;
+      if (key === ReactivePeekSymbol) return target;
+      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) && !shallow) {
+        return reactive(value);
+      }
+      return value;
+    },
+    set(target, key, value, receiver) {
+      if (isExclude(key, exclude)) {
+        Reflect.set(target, key, value, receiver);
+        return true;
+      }
+      let oldValue = Reflect.get(target, key, receiver);
+      if (isSignal(oldValue)) {
+        oldValue = oldValue.value;
+      }
+      if (isSignal(value)) {
+        value = value.value;
+      }
+      const obj = Reflect.set(target, key, value, receiver);
+      if (hasChanged(value, oldValue)) {
+        trigger(target, key);
+      }
+      return obj;
+    },
+    // handle  delete
+    deleteProperty(target, key) {
+      const oldValue = Reflect.get(target, key);
+      const result = Reflect.deleteProperty(target, key);
+      if (oldValue !== void 0) {
+        trigger(target, key);
+      }
+      return result;
+    }
+  };
+};
+var arrayInstrumentations = createArrayInstrumentations();
+function createArrayInstrumentations() {
+  const instrumentations2 = {};
+  ["includes", "indexOf", "lastIndexOf"].forEach((key) => {
+    instrumentations2[key] = function(...args) {
+      const arr = toRaw(this);
+      for (let i = 0, l = this.length; i < l; i++) {
+        track(arr, `${i}`);
+      }
+      const res = arr[key](...args);
+      if (res === -1 || res === false) {
+        return arr[key](...args);
+      }
+      return res;
     };
-  }), ["push", "pop", "shift", "unshift", "splice", "sort", "reverse"].forEach((t) => {
-    e[t] = function(...n) {
-      let o = c(this), r = o[t].apply(this, n);
-      return p(o, $), r;
+  });
+  ["push", "pop", "shift", "unshift", "splice", "sort", "reverse"].forEach((key) => {
+    instrumentations2[key] = function(...args) {
+      const arr = toRaw(this);
+      const res = arr[key].apply(this, args);
+      trigger(arr, reactiveArrayKey);
+      return res;
     };
-  }), ["forEach", "map", "filter", "reduce", "reduceRight", "some", "every", "find", "findIndex", "findLast", "findLastIndex", "entries", "keys", "values"].forEach((t) => {
-    e[t] = function(...n) {
-      let o = c(this);
-      return u(o, $), o[t].apply(this, n);
+  });
+  [
+    "forEach",
+    "map",
+    "filter",
+    "reduce",
+    "reduceRight",
+    "some",
+    "every",
+    "find",
+    "findIndex",
+    "findLast",
+    "findLastIndex",
+    "entries",
+    "keys",
+    "values"
+  ].forEach((key) => {
+    instrumentations2[key] = function(...args) {
+      const arr = toRaw(this);
+      track(arr, reactiveArrayKey);
+      return arr[key].apply(this, args);
     };
-  }), e;
-}
-var Ae = (e, t) => ({ get(n, o, r) {
-  if (o === x) return true;
-  if (o === w) return n;
-  if (oe.hasOwnProperty(o)) return Reflect.get(oe, o, r);
-  let s = Reflect.get(n, o, r);
-  return isExclude(o, t) ? s : (isStringNumber(o) && u(n, o), u(n, "length"), isObject(s) && !e ? v(s) : s);
-}, set(n, o, r, s) {
-  let i = Reflect.get(n, o, s), d = Reflect.set(n, o, r, s);
-  return hasChanged(r, i) && (isStringNumber(o) && p(n, o), (o === "length" || !i) && p(n, "length")), d;
-} });
-var Ie = { get(e, t) {
-  return t === x ? true : t === w ? e : ((t === Symbol.iterator || t === "size") && u(e, f), Reflect.get(hasOwn(re, t) && t in e ? re : e, t, e));
-} };
-var Oe = { get(e, t) {
-  return t === x ? true : t === w ? e : Reflect.get(hasOwn(se, t) && t in e ? se : e, t, e);
-} };
-var re = { get(e) {
-  let t = c(this);
-  return u(t, f), t.get(e);
-}, set(e, t) {
-  let n = c(this), o = n.set(e, t);
-  return p(n, f), o;
-}, add(e) {
-  let t = c(this), n = t.add(e);
-  return p(t, f), n;
-}, has(e) {
-  let t = c(this);
-  return u(t, f), t.has(e);
-}, delete(e) {
-  let t = c(this), n = t.has(e), o = t.delete(e);
-  return n && p(t, f), o;
-}, clear() {
-  let e = c(this), t = e.size > 0, n = e.clear();
-  return t && p(e, f), n;
-}, forEach(e, t) {
-  let n = c(this);
-  u(n, f), n.forEach((o, r) => {
-    e.call(t, o, r, n);
   });
-}, get size() {
-  let e = c(this);
-  return u(e, f), e.size;
-}, keys() {
-  let e = c(this);
-  return u(e, f), e.keys();
-}, values() {
-  let e = c(this);
-  return u(e, f), e.values();
-}, entries() {
-  let e = c(this);
-  return u(e, f), e.entries();
-}, [Symbol.iterator]() {
-  let e = c(this);
-  return u(e, f), e[Symbol.iterator]();
-} };
-var se = { get(e) {
-  let t = c(this);
-  return u(t, S), t.get(e);
-}, set(e, t) {
-  let n = c(this), o = n.set(e, t);
-  return p(n, S), o;
-}, add(e) {
-  let t = c(this), n = t.add(e);
-  return p(t, S), n;
-}, has(e) {
-  let t = c(this);
-  return u(t, S), t.has(e);
-}, delete(e) {
-  let t = c(this), n = t.delete(e);
-  return p(t, S), n;
-} };
-function v(e, t = false, n) {
-  if (!isObject(e) || b(e)) return e;
-  if (H.has(e)) return H.get(e);
-  let o;
-  isArray(e) ? (u(e, $), o = Ae(t, n)) : isSet(e) || isMap(e) ? (u(e, f), o = Ie) : isWeakSet(e) || isWeakMap(e) ? (u(e, S), o = Oe) : o = Pe(t, n);
-  let r = new Proxy(e, o);
-  return H.set(e, r), r;
-}
-function Me(e) {
-  b(e) && (isWeakMap(e) || isWeakSet(e) || fe(() => {
-    isArray(e) ? e.length = 0 : isSet(e) || isMap(e) ? e.clear() : isObject(e) && Object.keys(e).forEach((t) => {
-      delete e[t];
+  return instrumentations2;
+}
+var ArrayHandler = (shallow, exclude) => {
+  return {
+    get(target, key, receiver) {
+      if (key === ReactiveSymbol) return true;
+      if (key === ReactivePeekSymbol) return target;
+      if (arrayInstrumentations.hasOwnProperty(key)) {
+        return Reflect.get(arrayInstrumentations, key, receiver);
+      }
+      const value = Reflect.get(target, key, receiver);
+      if (isExclude(key, exclude)) {
+        return value;
+      }
+      if (isStringNumber(key)) {
+        track(target, key);
+      }
+      track(target, "length");
+      if (isObject(value) && !shallow) {
+        return reactive(value);
+      }
+      return value;
+    },
+    set(target, key, value, receiver) {
+      const oldValue = Reflect.get(target, key, receiver);
+      const result = Reflect.set(target, key, value, receiver);
+      if (hasChanged(value, oldValue)) {
+        if (isStringNumber(key)) {
+          trigger(target, key);
+        }
+        if (key === "length" || !oldValue) {
+          trigger(target, "length");
+        }
+      }
+      return result;
+    }
+  };
+};
+var collectionHandlers = {
+  get(target, key) {
+    if (key === ReactiveSymbol) return true;
+    if (key === ReactivePeekSymbol) return target;
+    if (key === Symbol.iterator || key === "size") {
+      track(target, ReactiveCollectionKey);
+    }
+    return Reflect.get(
+      hasOwn(instrumentations, key) && key in target ? instrumentations : target,
+      key,
+      target
+    );
+  }
+};
+var weakCollectionHandlers = {
+  get(target, key) {
+    if (key === ReactiveSymbol) return true;
+    if (key === ReactivePeekSymbol) return target;
+    return Reflect.get(
+      hasOwn(weakInstrumentations, key) && key in target ? weakInstrumentations : target,
+      key,
+      target
+    );
+  }
+};
+var instrumentations = {
+  get(key) {
+    const target = toRaw(this);
+    track(target, ReactiveCollectionKey);
+    return target.get(key);
+  },
+  set(key, value) {
+    const target = toRaw(this);
+    const result = target.set(key, value);
+    trigger(target, ReactiveCollectionKey);
+    return result;
+  },
+  add(value) {
+    const target = toRaw(this);
+    const result = target.add(value);
+    trigger(target, ReactiveCollectionKey);
+    return result;
+  },
+  has(key) {
+    const target = toRaw(this);
+    track(target, ReactiveCollectionKey);
+    return target.has(key);
+  },
+  delete(key) {
+    const target = toRaw(this);
+    const hadKey = target.has(key);
+    const result = target.delete(key);
+    if (hadKey) {
+      trigger(target, ReactiveCollectionKey);
+    }
+    return result;
+  },
+  clear() {
+    const target = toRaw(this);
+    const hadItems = target.size > 0;
+    const result = target.clear();
+    if (hadItems) {
+      trigger(target, ReactiveCollectionKey);
+    }
+    return result;
+  },
+  forEach(callback, thisArg) {
+    const target = toRaw(this);
+    track(target, ReactiveCollectionKey);
+    target.forEach((value, key) => {
+      callback.call(thisArg, value, key, target);
     });
-  }));
+  },
+  get size() {
+    const target = toRaw(this);
+    track(target, ReactiveCollectionKey);
+    return target.size;
+  },
+  keys() {
+    const target = toRaw(this);
+    track(target, ReactiveCollectionKey);
+    return target.keys();
+  },
+  values() {
+    const target = toRaw(this);
+    track(target, ReactiveCollectionKey);
+    return target.values();
+  },
+  entries() {
+    const target = toRaw(this);
+    track(target, ReactiveCollectionKey);
+    return target.entries();
+  },
+  [Symbol.iterator]() {
+    const target = toRaw(this);
+    track(target, ReactiveCollectionKey);
+    return target[Symbol.iterator]();
+  }
+};
+var weakInstrumentations = {
+  get(key) {
+    const target = toRaw(this);
+    track(target, ReactiveWeakCollectionKey);
+    return target.get(key);
+  },
+  set(key, value) {
+    const target = toRaw(this);
+    const result = target.set(key, value);
+    trigger(target, ReactiveWeakCollectionKey);
+    return result;
+  },
+  add(value) {
+    const target = toRaw(this);
+    const result = target.add(value);
+    trigger(target, ReactiveWeakCollectionKey);
+    return result;
+  },
+  has(key) {
+    const target = toRaw(this);
+    track(target, ReactiveWeakCollectionKey);
+    return target.has(key);
+  },
+  delete(key) {
+    const target = toRaw(this);
+    const result = target.delete(key);
+    trigger(target, ReactiveWeakCollectionKey);
+    return result;
+  }
+};
+function reactive(initialValue, shallow = false, exclude) {
+  if (!isObject(initialValue)) {
+    return initialValue;
+  }
+  if (isReactive(initialValue)) {
+    return initialValue;
+  }
+  if (reactiveMap.has(initialValue)) {
+    return reactiveMap.get(initialValue);
+  }
+  let handler;
+  if (isArray(initialValue)) {
+    track(initialValue, reactiveArrayKey);
+    handler = ArrayHandler(shallow, exclude);
+  } else if (isSet(initialValue) || isMap(initialValue)) {
+    track(initialValue, ReactiveCollectionKey);
+    handler = collectionHandlers;
+  } else if (isWeakSet(initialValue) || isWeakMap(initialValue)) {
+    track(initialValue, ReactiveWeakCollectionKey);
+    handler = weakCollectionHandlers;
+  } else {
+    handler = basicHandler(shallow, exclude);
+  }
+  const proxy = new Proxy(initialValue, handler);
+  reactiveMap.set(initialValue, proxy);
+  return proxy;
+}
+function clearReactive(reactiveObj) {
+  if (!isReactive(reactiveObj)) {
+    {
+      warn("clearReactive: argument must be a reactive object");
+    }
+    return;
+  }
+  if (isWeakMap(reactiveObj) || isWeakSet(reactiveObj)) {
+    {
+      warn("clearReactive: WeakMap and WeakSet are not clearable");
+    }
+    return;
+  }
+  useBatch(() => {
+    if (isArray(reactiveObj)) {
+      reactiveObj.length = 0;
+    } else if (isSet(reactiveObj) || isMap(reactiveObj)) {
+      reactiveObj.clear();
+    } else if (isObject(reactiveObj)) {
+      Object.keys(reactiveObj).forEach((key) => {
+        delete reactiveObj[key];
+      });
+    }
+  });
 }
-function fe(e) {
+function useBatch(fn) {
   try {
-    D = true, e();
+    inBatch = true;
+    fn();
   } finally {
-    D = false, Fe();
-  }
-}
-function Fe() {
-  P.size > 0 && (P.forEach((e) => e()), P.clear());
-}
-function Ve(e, t, n) {
-  return ze(e, t, n);
-}
-var pe = void 0;
-var k;
-var N = false;
-function qe(e) {
-  k = e, N || (N = true, E(Je));
-}
-function Je() {
-  k == null || k(), k = null, N = false;
-}
-function ze(e, t, { deep: n, immediate: o } = {}) {
-  let r, s = isArray(e);
-  if (h(e) || I(e)) r = () => e.value;
-  else if (b(e)) r = () => y({}, e);
-  else if (s) r = () => e.map((a) => Be(a));
-  else if (isFunction(e)) r = e;
-  else return warn("Invalid source type", e), noop;
-  if (t && n) {
-    let a = r, l = n === true ? 1 / 0 : n;
-    r = () => R(a(), l);
-  }
-  let i = s ? Array.from({ length: e.length }).fill(pe) : pe, d = false, O = () => {
-    let a = r();
-    hasChanged(a, i) && (o && t && (t(a, i), i = a), d && t && qe(() => {
-      t(a, i), i = a;
-    }), !d && (i = a));
-  }, g = B(O, { flush: "sync" });
-  return d = true, o && O(), g;
-}
-function Be(e) {
-  return h(e) || I(e) ? e.value : b(e) ? y({}, e) : isFunction(e) ? e() : (warn("Invalid source", e), noop);
-}
-function R(e, t = 1 / 0, n) {
-  if (t <= 0 || !isObject(e) || (n = n || /* @__PURE__ */ new Set(), n.has(e))) return e;
-  if (n.add(e), t--, h(e)) R(e.value, t, n);
-  else if (isArray(e)) for (let o of e) R(o, t, n);
-  else if (isSet(e) || isMap(e)) e.forEach((o) => {
-    R(o, t, n);
-  });
-  else if (isPlainObject(e)) for (let o in e) R(e[o], t, n);
-  return e;
-}
-function Le(e) {
-  let { state: t, getters: n, actions: o } = e, r = y({}, t != null ? t : {}), s = L(t != null ? t : {}), i = [], d = [], g = y({ state: s }, { patch$(a) {
-    Object.assign(s, a), i.forEach((l) => l(s)), d.forEach((l) => l(s));
-  }, subscribe$(a) {
-    i.push(a);
-  }, unsubscribe$(a) {
-    let l = i.indexOf(a);
-    l !== -1 && i.splice(l, 1);
-  }, onAction$(a) {
-    d.push(a);
-  }, reset$() {
-    Object.assign(s, r);
-  } });
-  for (let a in n) {
-    let l = n[a];
-    l && Object.defineProperty(g, a, { get() {
-      return z(l.bind(s, s)).value;
-    }, enumerable: true, configurable: true });
-  }
-  for (let a in o) {
-    let l = o[a];
-    l && (g[a] = l.bind(s));
-  }
-  return g;
-}
-function Ne(e) {
+    inBatch = false;
+    runBatch();
+  }
+}
+function runBatch() {
+  if (batchQueue.size > 0) {
+    batchQueue.forEach((effect) => effect());
+    batchQueue.clear();
+  }
+}
+function useWatch(source, cb, options) {
+  return doWatch(source, cb, options);
+}
+var INITIAL_WATCHER_VALUE = void 0;
+var watcher;
+var flushing = false;
+function queueWatcher(fn) {
+  watcher = fn;
+  if (!flushing) {
+    flushing = true;
+    nextTick(flushWatchers);
+  }
+}
+function flushWatchers() {
+  watcher == null ? void 0 : watcher();
+  watcher = null;
+  flushing = false;
+}
+function doWatch(source, cb, { deep, immediate } = {}) {
+  let getter;
+  const isMultiSource = isArray(source);
+  if (isSignal(source) || isComputed(source)) {
+    getter = () => source.value;
+  } else if (isReactive(source)) {
+    getter = () => __spreadValues({}, source);
+  } else if (isMultiSource) {
+    getter = () => source.map((s) => resolveSource(s));
+  } else if (isFunction(source)) {
+    getter = source;
+  } else {
+    warn("Invalid source type", source);
+    return noop;
+  }
+  if (cb && deep) {
+    const baseGetter = getter;
+    const depth = deep === true ? Infinity : deep;
+    getter = () => traverse(baseGetter(), depth);
+  }
+  let oldValue = isMultiSource ? Array.from({ length: source.length }).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
+  let runCb = false;
+  const effectFn = () => {
+    const newValue = getter();
+    if (hasChanged(newValue, oldValue)) {
+      if (immediate && cb) {
+        cb(newValue, oldValue);
+        oldValue = newValue;
+      }
+      if (runCb && cb) {
+        queueWatcher(() => {
+          cb(newValue, oldValue);
+          oldValue = newValue;
+        });
+      }
+      !runCb && (oldValue = newValue);
+    }
+  };
+  const stop = useEffect(effectFn, { flush: "sync" });
+  runCb = true;
+  if (immediate) {
+    effectFn();
+  }
+  return stop;
+}
+function resolveSource(s) {
+  if (isSignal(s) || isComputed(s)) return s.value;
+  if (isReactive(s)) return __spreadValues({}, s);
+  if (isFunction(s)) return s();
+  warn("Invalid source", s);
+  return noop;
+}
+function traverse(value, depth = Infinity, seen) {
+  if (depth <= 0 || !isObject(value)) {
+    return value;
+  }
+  seen = seen || /* @__PURE__ */ new Set();
+  if (seen.has(value)) {
+    return value;
+  }
+  seen.add(value);
+  depth--;
+  if (isSignal(value)) {
+    traverse(value.value, depth, seen);
+  } else if (isArray(value)) {
+    for (const element of value) {
+      traverse(element, depth, seen);
+    }
+  } else if (isSet(value) || isMap(value)) {
+    value.forEach((v) => {
+      traverse(v, depth, seen);
+    });
+  } else if (isPlainObject(value)) {
+    for (const key in value) {
+      traverse(value[key], depth, seen);
+    }
+  }
+  return value;
+}
+function createOptionsStore(options) {
+  const { state, getters, actions } = options;
+  const initState = __spreadValues({}, state);
+  const reactiveState = useReactive(state);
+  const subscriptions = [];
+  const actionCallbacks = [];
+  const default_actions = {
+    patch$(payload) {
+      Object.assign(reactiveState, payload);
+      subscriptions.forEach((callback) => callback(reactiveState));
+      actionCallbacks.forEach((callback) => callback(reactiveState));
+    },
+    subscribe$(callback) {
+      subscriptions.push(callback);
+    },
+    unsubscribe$(callback) {
+      const index = subscriptions.indexOf(callback);
+      if (index !== -1) {
+        subscriptions.splice(index, 1);
+      }
+    },
+    onAction$(callback) {
+      actionCallbacks.push(callback);
+    },
+    reset$() {
+      Object.assign(reactiveState, initState);
+    }
+  };
+  const store = __spreadValues(__spreadProps(__spreadValues({}, reactiveState), {
+    state: reactiveState
+  }), default_actions);
+  if (getters) {
+    for (const key in getters) {
+      const getter = getters[key];
+      if (getter) {
+        Object.defineProperty(store, key, {
+          get() {
+            return useComputed(() => getter.call(store, reactiveState)).value;
+          },
+          enumerable: true,
+          configurable: true
+        });
+      }
+    }
+  }
+  if (actions) {
+    for (const key in actions) {
+      const action = actions[key];
+      if (action) {
+        store[key] = function(...args) {
+          const result = action.apply(reactiveState, args);
+          actionCallbacks.forEach((callback) => callback(reactiveState));
+          return result;
+        };
+      }
+    }
+  }
+  return store;
+}
+function createStore(storeDefinition) {
   return function() {
-    return Le(e);
+    let options;
+    if (typeof storeDefinition === "function") {
+      options = createClassStore(storeDefinition);
+    } else {
+      options = storeDefinition;
+    }
+    const store = createOptionsStore(options);
+    if (typeof storeDefinition === "function") {
+      Object.keys(options.actions || {}).forEach((key) => {
+        store[key] = options.actions[key].bind(store);
+      });
+    }
+    return store;
+  };
+}
+function createClassStore(StoreClass) {
+  const instance = new StoreClass();
+  const state = /* @__PURE__ */ Object.create(null);
+  const getters = {};
+  const actions = {};
+  Object.getOwnPropertyNames(instance).forEach((key) => {
+    state[key] = instance[key];
+  });
+  Object.getOwnPropertyNames(StoreClass.prototype).forEach((key) => {
+    const descriptor = Object.getOwnPropertyDescriptor(StoreClass.prototype, key);
+    if (descriptor) {
+      if (typeof descriptor.get === "function") {
+        getters[key] = function() {
+          return descriptor.get.call(this);
+        };
+      } else if (typeof descriptor.value === "function" && key !== "constructor") {
+        actions[key] = function(...args) {
+          return descriptor.value.apply(this, args);
+        };
+      }
+    }
+  });
+  return {
+    state,
+    getters,
+    actions
   };
 }
 
 // ../template/dist/template.dev.esm.js
-var componentMap = /* @__PURE__ */ new Map();
+var EVENT_PREFIX = "on";
+var UPDATE_PREFIX = "update";
+var CHILDREN_PROP = "children";
+var EMPTY_TEMPLATE = "";
+var FRAGMENT_PROP_KEY = "0";
+var SINGLE_PROP_KEY = "1";
+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;
   }
 };
 var renderContext = new RenderContext();
+var componentMap = /* @__PURE__ */ new Map();
 function enterComponent(temp, index) {
   componentMap.set(temp, {
     index
   });
 }
 function getComponentIndex(temp) {
-  return componentMap.get(temp).index;
+  var _a;
+  return (_a = componentMap.get(temp)) == null ? void 0 : _a.index;
 }
 var _LifecycleContext = class _LifecycleContext2 {
   constructor() {
@@ -502,22 +956,28 @@ var _LifecycleContext = class _LifecycleContext2 {
   }
   removeEventListener() {
   }
+  // Add a hook for a specific lifecycle stage
   addHook(hook, cb) {
     var _a;
     (_a = this.hooks[hook]) == null ? void 0 : _a.add(cb);
   }
+  // Get a value from the static context
   getContext(context) {
     return _LifecycleContext2.context[context];
   }
+  // Set a value in the static context
   setContext(context, value) {
     _LifecycleContext2.context[context] = value;
   }
+  // Initialize the static reference
   initRef() {
     _LifecycleContext2.ref = this;
   }
+  // Remove the static reference
   removeRef() {
     _LifecycleContext2.ref = null;
   }
+  // Clear all hooks
   clearHooks() {
     Object.values(this.hooks).forEach((set) => set.clear());
   }
@@ -536,29 +996,39 @@ var SSGNode = class extends LifecycleContext {
     this.props = props;
     this.key = key;
     enterComponent(template, componentIndex);
+    this.templates = this.processTemplate();
+  }
+  // Process the template and return an array of processed strings
+  processTemplate() {
     if (isArray(this.template)) {
-      const PLACEHOLDER = " __PLACEHOLDER__ ";
       const htmlString = this.template.join(PLACEHOLDER);
-      const processedString = htmlString.replaceAll(/(<[^>]+>)|([^<]+)/g, (match, p1, p2) => {
-        if (p1) {
-          if (p1.includes("data-ci")) return match;
-          return p1.replace(/<\s*([\da-z]+)(\s[^>]*)?>/i, (_2, tagName, attrs) => {
-            return `<${tagName} data-ci="${componentIndex}"${attrs || ""}>`;
-          });
-        } else if (p2 && p2.replace(PLACEHOLDER, "").trim()) {
-          return `<!--${0}-${componentIndex}-->${p2}<!$>`;
-        }
-        return match;
-      });
-      this.template = processedString.split(PLACEHOLDER);
+      const processedString = this.processHtmlString(htmlString);
+      return processedString.split(PLACEHOLDER);
     }
+    return [];
+  }
+  // Process HTML string by adding component index and handling text nodes
+  processHtmlString(htmlString) {
+    return htmlString.replaceAll(/(<[^>]+>)|([^<]+)/g, (match, p1, p2) => {
+      if (p1) {
+        if (p1.includes("data-ci")) return match;
+        return p1.replace(/<\s*([\da-z]+)(\s[^>]*)?>/i, (_, tagName, attrs) => {
+          return `<${tagName} data-ci="${componentIndex}"${attrs || ""}>`;
+        });
+      } else if (p2 && p2.replace(PLACEHOLDER, "").trim()) {
+        return `<!--${0}-${componentIndex}-->${p2}<!$>`;
+      }
+      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);
@@ -568,55 +1038,64 @@ var SSGNode = class extends LifecycleContext {
         return String(root);
       }
     }
-    const template = this.template;
-    Object.keys(this.props).forEach((key) => {
-      const cur = this.props[key];
-      const childrens = cur.children;
-      normalizeProp(cur);
-      const findIndex = template.findIndex((t) => t.includes(`data-hk="${key}"`));
-      if (childrens) {
-        childrens.forEach(([child]) => {
-          componentIndex++;
-          const children = renderChildren(child, cur);
-          this.template[findIndex] += children;
-        });
+    return this.renderTemplate();
+  }
+  // Render the template by processing props and children
+  renderTemplate() {
+    Object.entries(this.props).forEach(([key, cur]) => {
+      const children = cur.children;
+      this.normalizeProps(cur);
+      const findIndex = this.templates.findIndex((t) => t.includes(`data-hk="${key}"`));
+      if (children) {
+        this.renderChildren(children, findIndex);
       }
-      this.template[findIndex].replaceAll(
+      this.templates[findIndex] = this.templates[findIndex].replace(
         `data-hk="${key}"`,
-        `data-hk="${key}" ${generateAttributes(cur)}`
+        `data-hk="${key}" ${this.generateAttributes(cur)}`
       );
     });
-    return template.join("");
+    return this.templates.join("");
   }
-};
-function normalizeProp(props) {
-  Object.entries(props).forEach(([key, value]) => {
-    if (key === "children") {
-      delete props[key];
-    } else if (isFunction(value)) {
-      delete props[key];
-    } else if (h(value)) {
-      props[key] = value.value;
+  // Normalize props by removing children and handling signals
+  normalizeProps(props) {
+    Object.entries(props).forEach(([key, value]) => {
+      if (key === "children") {
+        delete props[key];
+      } else if (isFunction(value)) {
+        delete props[key];
+      } else if (isSignal(value)) {
+        props[key] = value.value;
+      }
+    });
+  }
+  // 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(" ");
+  }
+  // Render children and append them to the template
+  renderChildren(children, findIndex) {
+    children.forEach(([child]) => {
+      componentIndex++;
+      const renderedChild = this.renderChild(child);
+      this.templates[findIndex] += renderedChild;
+    });
+  }
+  // Render a single child node
+  renderChild(child) {
+    if (isFunction(child)) {
+      return this.renderChild(child(this.props));
+    } else if (isSignal(child)) {
+      return `<!--${1}-${componentIndex}-->${child.value}<!$>`;
+    } else if (isSSGNode(child)) {
+      const childResult = child.mount();
+      return isFunction(childResult) ? childResult(this.props) : extractSignal(childResult);
+    } else {
+      return `<!--${1}-${componentIndex}-->${child}<!$>`;
     }
-  });
-}
-function generateAttributes(props) {
-  return Object.entries(props).filter(([key, value]) => key !== "children" && !isFunction(value)).map(([key, value]) => `${key}="${escape(String(value))}"`).join(" ");
-}
-function renderChildren(children, prop) {
-  if (isFunction(children)) {
-    return renderChildren(children(prop), prop);
-  } else if (h(children)) {
-    return `<!--${1}-${componentIndex}-->${children.value}<!$>`;
-  } else if (isSSGNode(children)) {
-    const childResult = children.mount();
-    return isFunction(childResult) ? childResult(prop) : extractSignal(childResult);
-  } else {
-    return `<!--${1}-${componentIndex}-->${children}<!$>`;
   }
-}
-var selfClosingTags = "area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr".split(",");
-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".split(
+};
+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) {
@@ -653,26 +1132,33 @@ function replaceChild(parent, node, child) {
 }
 function setAttribute(element, attr, value) {
   if (attr === "class") {
-    if (typeof value === "string") {
-      element.className = value;
-    } else if (isArray(value)) {
-      element.className = value.join(" ");
-    } else if (value && typeof value === "object") {
-      element.className = Object.entries(value).reduce((acc, [key, value2]) => acc + (value2 ? ` ${key}` : ""), "").trim();
-    }
-    return;
+    setClassAttribute(element, value);
+  } else if (attr === "style") {
+    setStyleAttribute(element, value);
+  } else {
+    setGenericAttribute(element, attr, value);
   }
-  if (attr === "style") {
-    if (typeof value === "string") {
-      element.style.cssText = value;
-    } else if (value && typeof value === "object") {
-      const obj = value;
-      Object.keys(obj).forEach((key) => {
-        element.style.setProperty(kebabCase(key), String(obj[key]));
-      });
-    }
-    return;
+}
+function setClassAttribute(element, value) {
+  if (typeof value === "string") {
+    element.className = value;
+  } else if (isArray(value)) {
+    element.className = value.join(" ");
+  } else if (value && typeof value === "object") {
+    element.className = Object.entries(value).reduce((acc, [key, value2]) => acc + (value2 ? ` ${key}` : ""), "").trim();
+  }
+}
+function setStyleAttribute(element, value) {
+  if (typeof value === "string") {
+    element.style.cssText = value;
+  } else if (value && typeof value === "object") {
+    const obj = value;
+    Object.entries(obj).forEach(([key, value2]) => {
+      element.style.setProperty(kebabCase(key), String(value2));
+    });
   }
+}
+function setGenericAttribute(element, attr, value) {
   if (isFalsy(value)) {
     element.removeAttribute(attr);
   } else if (value === true) {
@@ -755,7 +1241,7 @@ function closeHtmlTags(input) {
       if (tagStack.length > 0) {
         tagStack.pop();
       }
-    } else if (!selfClosingTags.includes(tagName)) {
+    } else if (!SELF_CLOSING_TAGS.includes(tagName)) {
       tagStack.push(tagName);
     }
     output.push(fullMatch);
@@ -770,17 +1256,13 @@ function closeHtmlTags(input) {
   return output.join("");
 }
 function isHtmlTagName(tagName) {
-  return htmlTags.includes(tagName);
+  return HTML_TAGS.includes(tagName);
 }
 function convertToHtmlTag(tagName) {
-  if (selfClosingTags.includes(tagName)) {
-    return `<${tagName}/>`;
-  } else {
-    return `<${tagName}></${tagName}>`;
-  }
+  return SELF_CLOSING_TAGS.includes(tagName) ? `<${tagName}/>` : `<${tagName}></${tagName}>`;
 }
 function extractSignal(signal) {
-  if (h(signal)) {
+  if (isSignal(signal)) {
     return signal.value;
   } else {
     return signal;
@@ -795,19 +1277,28 @@ var ComponentNode = class extends LifecycleContext {
     this.emitter = /* @__PURE__ */ new Set();
     this.rootNode = null;
     this.trackMap = /* @__PURE__ */ new Map();
-    this.proxyProps = props ? L(
+    this.key || (this.key = props == null ? void 0 : props.key);
+    this.proxyProps = this.createProxyProps(props);
+  }
+  // Create reactive props
+  createProxyProps(props) {
+    if (!props) return {};
+    return useReactive(
       props,
-      (key2) => startsWith(key2, "on") || startsWith(key2, "update") || key2 === "children"
-    ) : {};
+      (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;
     if (!isFunction(this.template)) {
@@ -819,32 +1310,37 @@ var ComponentNode = class extends LifecycleContext {
     this.initRef();
     this.rootNode = this.template(this.proxyProps);
     const mountedNode = (_d = (_c = this.rootNode) == null ? void 0 : _c.mount(parent, before)) != null ? _d : [];
-    this.hooks.mounted.forEach((handler) => handler());
+    this.callMountHooks();
     this.patchProps(this.props);
     this.removeRef();
     return mountedNode;
   }
+  // Method to unmount the component from the DOM
   unmount() {
     var _a;
-    this.hooks.destroy.forEach((handler) => handler());
+    this.callDestroyHooks();
     this.clearHooks();
     (_a = this.rootNode) == null ? void 0 : _a.unmount();
     this.rootNode = null;
     this.proxyProps = {};
+    this.clearEmitter();
+  }
+  // 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();
   }
-  /**
-   * Inherit props and state from another ComponentNode.
-   * It will:
-   * 1. Copy props from the node to this proxyProps.
-   * 2. Copy the rootNode, trackMap and hooks from the node.
-   * 3. Copy the props from the node to this.
-   * 4. Patch props from the props passed in the constructor.
-   * @param node The node to inherit from.
-   */
+  // Method to inherit properties from another ComponentNode
   inheritNode(node) {
     Object.assign(this.proxyProps, node.proxyProps);
     this.rootNode = node.rootNode;
@@ -854,55 +1350,58 @@ var ComponentNode = class extends LifecycleContext {
     this.props = node.props;
     this.patchProps(props);
   }
-  /**
-   * Get a NodeTrack from the trackMap. If the track is not in the trackMap, create a new one.
-   * Then, call the cleanup function to remove any previously registered hooks.
-   * @param trackKey the key of the node track to get.
-   * @returns the NodeTrack, cleaned up and ready to use.
-   */
+  // Private method to get or create a NodeTrack
   getNodeTrack(trackKey) {
-    let track = this.trackMap.get(trackKey);
-    if (!track) {
-      track = { cleanup: () => {
+    let track2 = this.trackMap.get(trackKey);
+    if (!track2) {
+      track2 = { cleanup: () => {
       } };
-      this.trackMap.set(trackKey, track);
+      this.trackMap.set(trackKey, track2);
     }
-    track.cleanup();
-    return track;
+    track2.cleanup();
+    return track2;
   }
-  /**
-   * Patch the props of this node.
-   * It will:
-   * 1. Iterate the props and patch it.
-   * 2. If the prop is a event handler, add a event listener to the first child of the node.
-   * 3. If the prop is a ref, set the first child of the node to the ref.
-   * 4. If the prop is a update handler, update the prop in the node's props.
-   * 5. If the prop is a normal prop, create a signal for it and then patch it.
-   * @param props The props to patch.
-   */
+  // Method to patch props onto the component
   patchProps(props) {
-    var _a, _b;
+    var _a;
     if (!props) {
       return;
     }
     for (const [key, prop] of Object.entries(props)) {
-      if (startsWith(key, "on") && ((_a = this.rootNode) == null ? void 0 : _a.firstChild)) {
-        const event = key.slice(2).toLowerCase();
-        const cleanup = addEventListener(this.rootNode.nodes[0], event, prop);
-        this.emitter.add(cleanup);
+      if (startsWith(key, EVENT_PREFIX) && ((_a = this.rootNode) == null ? void 0 : _a.firstChild)) {
+        this.patchEventListener(key, prop);
       } else if (key === "ref") {
-        prop.value = (_b = this.rootNode) == null ? void 0 : _b.firstChild;
-      } else if (startsWith(key, "update")) {
-        this.props[key] = extractSignal(prop);
-      } else if (key !== "children") {
-        const track = this.getNodeTrack(key);
-        track.cleanup = B(() => {
-          this.proxyProps[key] = isFunction(prop) ? prop() : prop;
-        });
+        this.patchRef(prop);
+      } else if (startsWith(key, UPDATE_PREFIX)) {
+        this.patchUpdateHandler(key, prop);
+      } else if (key !== CHILDREN_PROP) {
+        this.patchNormalProp(key, prop);
       }
     }
     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);
+  }
+  // Private method to patch normal props
+  patchNormalProp(key, prop) {
+    const track2 = this.getNodeTrack(key);
+    track2.cleanup = useEffect(() => {
+      this.proxyProps[key] = isFunction(prop) ? prop() : prop;
+    });
+  }
 };
 function patchChildren(parent, childrenMap, nextChildren, before) {
   const result = /* @__PURE__ */ new Map();
@@ -1025,18 +1524,21 @@ var TemplateNode = class {
       this.componentIndex = getComponentIndex(this.template);
     }
   }
-  addEventListener() {
-  }
-  removeEventListener() {
-  }
+  // Getter for the first child node
   get firstChild() {
     var _a;
     return (_a = this.nodes[0]) != null ? _a : null;
   }
-  // is mounted
+  // 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;
@@ -1066,44 +1568,45 @@ var TemplateNode = class {
     this.mounted = true;
     return this.nodes;
   }
+  // Method to unmount the node from the DOM
   unmount() {
     var _a, _b;
-    this.trackMap.forEach((track) => {
+    this.trackMap.forEach((track2) => {
       var _a2;
-      (_a2 = track.cleanup) == null ? void 0 : _a2.call(track);
+      (_a2 = track2.cleanup) == null ? void 0 : _a2.call(track2);
     });
     this.trackMap.clear();
     this.treeMap.clear();
     this.nodes.forEach((node) => removeChild(node));
     if (!this.template.innerHTML && !this.nodes.length) {
-      ((_b = (_a = this.props) == null ? void 0 : _a[0]) == null ? void 0 : _b.children) && this.props[0].children.forEach((i) => {
-        var _a2;
-        if (isPrimitive(i)) {
-          (_a2 = this.parent) == null ? void 0 : _a2.childNodes.forEach((node) => {
-            var _a3;
-            if (node.nodeType === Node.TEXT_NODE && node.textContent === `${i}`) {
-              (_a3 = this.parent) == null ? void 0 : _a3.removeChild(node);
-            }
+      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 {
-          removeChild(i);
+          this.deleteFragmentTextNode(children);
         }
-      });
+      }
     }
     this.nodes = [];
     this.mounted = false;
   }
-  patchProps(props) {
-    if (!props) return;
-    Object.entries(props).forEach(([key, value]) => {
-      const index = Number(key);
-      const node = this.treeMap.get(index);
-      if (node) {
-        this.patchProp(key, node, value, index === 0);
-      }
-    });
-    this.props = props;
+  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);
+    }
   }
+  // Method to inherit properties from another TemplateNode
   inheritNode(node) {
     this.mounted = node.mounted;
     this.nodes = node.nodes;
@@ -1113,194 +1616,205 @@ var TemplateNode = class {
     this.props = node.props;
     this.patchProps(props);
   }
+  // Private method to map SSG node tree
   mapSSGNodeTree(parent) {
     this.treeMap.set(0, parent);
-    const walk = (node) => {
-      var _a;
-      if (node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
-        if (node.nodeType === Node.COMMENT_NODE) {
-          const [type, index] = ((_a = node.textContent) == null ? void 0 : _a.split("-")) || "";
-          if (0 === +type && +index === this.componentIndex) {
-            const textNode = node.nextSibling;
-            this.treeMap.set(+index, textNode);
-          }
-        } else if (node.nodeType !== Node.TEXT_NODE) {
-          const { ci = "-1", hk } = (node == null ? void 0 : node.dataset) || {};
-          if (hk && +ci === this.componentIndex) {
-            this.treeMap.set(+hk, node);
-          }
-        }
-      }
-      let child = node.firstChild;
-      while (child) {
-        walk(child);
-        child = child.nextSibling;
-      }
-    };
-    walk(parent);
+    this.walkNodeTree(parent, this.handleSSGNode.bind(this));
   }
+  // Private method to map node tree
   mapNodeTree(parent, tree) {
     let index = 1;
     this.treeMap.set(0, parent);
-    const walk = (node) => {
+    const handleNode = (node) => {
       if (node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
         this.treeMap.set(index++, node);
       }
-      let child = node.firstChild;
-      while (child) {
-        walk(child);
-        child = child.nextSibling;
-      }
     };
-    walk(tree);
+    this.walkNodeTree(tree, handleNode);
   }
-  /**
-   * Get a NodeTrack from the trackMap. If the track is not in the trackMap, create a new one.
-   * Then, call the cleanup function to remove any previously registered hooks.
-   * @param trackKey the key of the node track to get.
-   * @param trackLastNodes if true, the track will record the last nodes it has rendered.
-   * @param isRoot if true, the track will be treated as a root track.
-   * @returns the NodeTrack, cleaned up and ready to use.
-   */
-  getNodeTrack(trackKey, trackLastNodes, isRoot) {
+  // Private method to walk through the node tree
+  walkNodeTree(node, handler) {
+    if (node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
+      handler(node);
+    }
+    let child = node.firstChild;
+    while (child) {
+      this.walkNodeTree(child, handler);
+      child = child.nextSibling;
+    }
+  }
+  // Private method to handle SSG nodes
+  handleSSGNode(node) {
     var _a;
-    let track = this.trackMap.get(trackKey);
-    if (!track) {
-      track = { cleanup: () => {
-      } };
-      if (trackLastNodes) {
-        track.lastNodes = /* @__PURE__ */ new Map();
+    if (node.nodeType === Node.COMMENT_NODE) {
+      const [type, index] = ((_a = node.textContent) == null ? void 0 : _a.split("-")) || [];
+      if (0 === +type && +index === this.componentIndex) {
+        const textNode = node.nextSibling;
+        this.treeMap.set(+index, textNode);
       }
-      if (isRoot) {
-        track.isRoot = true;
+    } else if (node.nodeType !== Node.TEXT_NODE) {
+      const { ci = "-1", hk } = (node == null ? void 0 : node.dataset) || {};
+      if (hk && +ci === this.componentIndex) {
+        this.treeMap.set(+hk, node);
       }
-      this.trackMap.set(trackKey, track);
     }
-    (_a = track.cleanup) == null ? void 0 : _a.call(track);
-    return track;
   }
+  // Method to patch props onto the node
+  patchProps(props) {
+    if (!props) return;
+    Object.entries(props).forEach(([key, value]) => {
+      const index = Number(key);
+      const node = this.treeMap.get(index);
+      if (node) {
+        this.patchProp(key, node, value, index === 0);
+      }
+    });
+    this.props = props;
+  }
+  // Private method to patch a single prop
   patchProp(key, node, props, isRoot) {
-    for (const attr in props) {
-      if (attr === "children" && props.children) {
-        if (!isArray(props.children)) {
-          const trackKey = `${key}:${attr}:${0}`;
-          const track = this.getNodeTrack(trackKey, true, isRoot);
-          patchChild(track, node, props.children, null);
-        } else {
-          props.children.filter(Boolean).forEach((item, index) => {
-            var _a;
-            const [child, path] = isArray(item) ? item : [item, null];
-            const before = isNil(path) ? null : (_a = this.treeMap.get(path)) != null ? _a : null;
-            const trackKey = `${key}:${attr}:${index}`;
-            const track = this.getNodeTrack(trackKey, true, isRoot);
-            patchChild(track, node, child, before);
-          });
-        }
+    if (!props) return;
+    Object.entries(props).forEach(([attr, value]) => {
+      if (attr === CHILDREN_PROP && value) {
+        this.patchChildren(key, node, value, isRoot);
       } else if (attr === "ref") {
         props[attr].value = node;
       } else if (startsWith(attr, "on")) {
-        const eventName = attr.slice(2).toLocaleLowerCase();
-        const track = this.getNodeTrack(`${key}:${attr}`);
-        const listener = props[attr];
-        track.cleanup = addEventListener(node, eventName, listener);
+        this.patchEventListener(key, node, attr, value);
       } else {
-        const updateKey = `update${capitalizeFirstLetter(attr)}`;
-        if (this.bindValueKeys.includes(attr)) {
-          break;
-        }
-        if (props[updateKey]) {
-          this.bindValueKeys.push(updateKey);
-        }
-        const track = this.getNodeTrack(`${key}:${attr}`);
-        const val = props[attr];
-        const triggerValue = h(val) ? val : le(val);
-        patchAttribute(track, node, attr, triggerValue.value);
-        const cleanup = B(() => {
-          triggerValue.value = h(val) ? val.value : val;
-          patchAttribute(track, node, attr, triggerValue.value);
-        });
-        let cleanupBind;
-        if (props[updateKey] && !isComponent(attr)) {
-          cleanupBind = bindNode(node, (value) => {
-            props[updateKey](value);
-          });
-        }
-        track.cleanup = () => {
-          cleanup && cleanup();
-          cleanupBind && cleanupBind();
-        };
+        this.patchAttribute(key, node, attr, value);
       }
+    });
+  }
+  // Private method to patch children
+  patchChildren(key, node, children, isRoot) {
+    if (!isArray(children)) {
+      const trackKey = `${key}:${CHILDREN_PROP}:0`;
+      const track2 = this.getNodeTrack(trackKey, true, isRoot);
+      this.patchChild(track2, node, children, null);
+    } else {
+      children.filter(Boolean).forEach((item, index) => {
+        var _a;
+        const [child, path] = isArray(item) ? item : [item, null];
+        const before = isNil(path) ? null : (_a = this.treeMap.get(path)) != null ? _a : null;
+        const trackKey = `${key}:${CHILDREN_PROP}:${index}`;
+        const track2 = this.getNodeTrack(trackKey, true, isRoot);
+        this.patchChild(track2, node, child, before);
+      });
     }
   }
-};
-function patchChild(track, parent, child, before) {
-  if (isFunction(child)) {
-    track.cleanup = B(() => {
-      const nextNodes = coerceArray(child()).map(coerceNode);
-      if (renderContext.isSSR) {
-        track.lastNodes = reconcileChildren(parent, nextNodes, before);
-      } else {
-        track.lastNodes = patchChildren(parent, track.lastNodes, nextNodes, before);
-      }
-    });
-  } else {
-    coerceArray(child).forEach((node, index) => {
-      const newNode = coerceNode(node);
-      const key = getKey(newNode, index);
-      if (renderContext.isSSR) {
-        track.lastNodes = reconcileChildren(parent, [newNode], before);
-      } else {
-        track.lastNodes.set(key, newNode);
-        insertChild(parent, newNode, before);
-      }
+  // 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) {
+    var _a, _b;
+    const updateKey = `update${capitalizeFirstLetter(attr)}`;
+    if (this.bindValueKeys.includes(attr)) {
+      return;
+    }
+    if ((_a = this.props) == null ? void 0 : _a[updateKey]) {
+      this.bindValueKeys.push(updateKey);
+    }
+    const track2 = this.getNodeTrack(`${key}:${attr}`);
+    const triggerValue = isSignal(value) ? value : useSignal(value);
+    setAttribute(element, attr, triggerValue.value);
+    const cleanup = useEffect(() => {
+      triggerValue.value = isSignal(value) ? value.value : value;
+      setAttribute(element, attr, triggerValue.value);
     });
+    let cleanupBind;
+    if (((_b = this.props) == null ? void 0 : _b[updateKey]) && !isComponent(attr)) {
+      cleanupBind = bindNode(element, (value2) => {
+        var _a2;
+        (_a2 = this.props) == null ? void 0 : _a2[updateKey](value2);
+      });
+    }
+    track2.cleanup = () => {
+      cleanup && cleanup();
+      cleanupBind && cleanupBind();
+    };
   }
-}
-function reconcileChildren(parent, nextNodes, before) {
-  const result = /* @__PURE__ */ new Map();
-  const textNodes = Array.from(parent.childNodes).filter(
-    (node) => {
-      var _a, _b;
-      return node.nodeType === Node.TEXT_NODE && ((_a = node.previousSibling) == null ? void 0 : _a.nodeType) === Node.COMMENT_NODE && ((_b = node.nextSibling) == null ? void 0 : _b.nodeType) === Node.COMMENT_NODE;
-    }
-  );
-  nextNodes.forEach((node, index) => {
-    const key = getKey(node, index);
-    if (node.nodeType === Node.TEXT_NODE) {
-      textNodes.forEach((ne2) => {
-        if (node.textContent === ne2.textContent) {
-          parent.replaceChild(node, ne2);
+  // Private method to get or create a NodeTrack
+  getNodeTrack(trackKey, trackLastNodes, isRoot) {
+    var _a;
+    let track2 = this.trackMap.get(trackKey);
+    if (!track2) {
+      track2 = { cleanup: () => {
+      } };
+      if (trackLastNodes) {
+        track2.lastNodes = /* @__PURE__ */ new Map();
+      }
+      if (isRoot) {
+        track2.isRoot = true;
+      }
+      this.trackMap.set(trackKey, track2);
+    }
+    (_a = track2.cleanup) == null ? void 0 : _a.call(track2);
+    return track2;
+  }
+  // Private method to patch a child node
+  patchChild(track2, parent, child, before) {
+    if (isFunction(child)) {
+      track2.cleanup = useEffect(() => {
+        const nextNodes = coerceArray(child()).map(coerceNode);
+        if (renderContext.isSSR) {
+          track2.lastNodes = this.reconcileChildren(parent, nextNodes, before);
+        } else {
+          track2.lastNodes = patchChildren(parent, track2.lastNodes, nextNodes, before);
         }
       });
     } else {
-      insertChild(parent, node, before);
+      coerceArray(child).forEach((node, index) => {
+        const newNode = coerceNode(node);
+        const key = getKey(newNode, index);
+        if (renderContext.isSSR) {
+          track2.lastNodes = this.reconcileChildren(parent, [newNode], before);
+        } else {
+          track2.lastNodes.set(key, newNode);
+          insertChild(parent, newNode, before);
+        }
+      });
     }
-    result.set(key, node);
-  });
-  return result;
-}
-function patchAttribute(track, node, attr, data) {
-  const element = node;
-  if (!element.setAttribute) {
-    return;
   }
-  if (isFunction(data)) {
-    track.cleanup = B(() => {
-      setAttribute(element, attr, data());
+  // Private method to reconcile children nodes
+  reconcileChildren(parent, nextNodes, before) {
+    const result = /* @__PURE__ */ new Map();
+    const textNodes = Array.from(parent.childNodes).filter(
+      (node) => {
+        var _a, _b;
+        return node.nodeType === Node.TEXT_NODE && ((_a = node.previousSibling) == null ? void 0 : _a.nodeType) === Node.COMMENT_NODE && ((_b = node.nextSibling) == null ? void 0 : _b.nodeType) === Node.COMMENT_NODE;
+      }
+    );
+    nextNodes.forEach((node, index) => {
+      const key = getKey(node, index);
+      if (node.nodeType === Node.TEXT_NODE) {
+        textNodes.forEach((ne) => {
+          if (node.textContent === ne.textContent) {
+            parent.replaceChild(node, ne);
+          }
+        });
+      } else {
+        insertChild(parent, node, before);
+      }
+      result.set(key, node);
     });
-  } else {
-    setAttribute(element, attr, data);
+    return result;
   }
-}
-function h2(template, props, key) {
+};
+function h(template, props, key) {
   if (isString(template)) {
     if (isHtmlTagName(template)) {
-      template = convertToHtmlTag(template);
-      props = { "1": props };
-    } else if (template === "") {
-      props = { "0": props };
+      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);
     }
-    template = createTemplate(template);
   }
   return isFunction(template) ? new ComponentNode(template, props, key) : new TemplateNode(template, props, key);
 }
@@ -1316,19 +1830,17 @@ function createTemplate(html) {
   return template;
 }
 function Fragment(props) {
-  return h2("", {
-    children: Array.isArray(props.children) ? props.children.filter(Boolean) : [props.children]
+  return h(EMPTY_TEMPLATE, {
+    children: isArray(props.children) ? props.children.filter(Boolean) : [props.children]
   });
 }
 function onMount(cb) {
-  var _a;
   assertInsideComponent("onMounted");
-  (_a = LifecycleContext.ref) == null ? void 0 : _a.addHook("mounted", cb);
+  LifecycleContext.ref && LifecycleContext.ref.addHook("mounted", cb);
 }
 function onDestroy(cb) {
-  var _a;
   assertInsideComponent("onDestroy");
-  (_a = LifecycleContext.ref) == null ? void 0 : _a.addHook("destroy", cb);
+  LifecycleContext.ref && LifecycleContext.ref.addHook("destroy", cb);
 }
 function assertInsideComponent(hookName, key) {
   if (!LifecycleContext.ref && true) {
@@ -1339,18 +1851,16 @@ function assertInsideComponent(hookName, key) {
   }
 }
 function useProvide(key, value) {
-  var _a;
   assertInsideComponent("useProvide", key);
-  (_a = LifecycleContext.ref) == null ? void 0 : _a.setContext(key, value);
+  LifecycleContext.ref && LifecycleContext.ref.setContext(key, value);
 }
 function useInject(key, defaultValue) {
   var _a;
   assertInsideComponent("useInject", key);
-  return ((_a = LifecycleContext.ref) == null ? void 0 : _a.getContext(key)) || defaultValue;
+  return (_a = LifecycleContext.ref && LifecycleContext.ref.getContext(key)) != null ? _a : defaultValue;
 }
 function useRef() {
-  const ref = We(null);
-  return ref;
+  return shallowSignal(null);
 }
 function renderToString(component, props) {
   renderContext.setSSG();
@@ -1365,14 +1875,14 @@ function hydrate(component, container) {
     throw new Error(`Could not find container: ${container}`);
   }
   renderContext.setSSR();
-  h2(component).mount(rootElement);
+  h(component).mount(rootElement);
   renderContext.setClient();
 }
 function ssg(component, props) {
   if (renderContext.isSSG) {
     return new SSGNode(component, props);
   }
-  return h2(component, props);
+  return h(component, props);
 }
 
 // src/index.ts
@@ -1380,43 +1890,43 @@ if (globalThis) {
   globalThis.__essor_version__ = essor_version;
 }
 /**
-* @estjs/signal v0.0.13-beta.7
+* @estjs/signal v0.0.13
 * (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
 * @license MIT
 **/
 /**
-* @estjs/template v0.0.13-beta.7
+* @estjs/template v0.0.13
 * (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
 * @license MIT
 **/
 
 exports.Fragment = Fragment;
-exports.clearReactive = Me;
-exports.createStore = Ne;
+exports.clearReactive = clearReactive;
+exports.createStore = createStore;
 exports.essor_version = essor_version;
-exports.h = h2;
+exports.h = h;
 exports.hydrate = hydrate;
 exports.isComponent = isComponent;
-exports.isComputed = I;
+exports.isComputed = isComputed;
 exports.isJsxElement = isJsxElement;
-exports.isReactive = b;
-exports.isSignal = h;
+exports.isReactive = isReactive;
+exports.isSignal = isSignal;
 exports.onDestroy = onDestroy;
 exports.onMount = onMount;
 exports.renderToString = renderToString;
-exports.shallowReactive = Ee;
-exports.shallowSignal = We;
-exports.signalObject = Ce;
+exports.shallowReactive = shallowReactive;
+exports.shallowSignal = shallowSignal;
+exports.signalObject = signalObject;
 exports.ssg = ssg;
 exports.template = createTemplate;
-exports.toRaw = c;
-exports.useBatch = fe;
-exports.useComputed = z;
-exports.useEffect = B;
+exports.toRaw = toRaw;
+exports.useBatch = useBatch;
+exports.useComputed = useComputed;
+exports.useEffect = useEffect;
 exports.useInject = useInject;
 exports.useProvide = useProvide;
-exports.useReactive = L;
+exports.useReactive = useReactive;
 exports.useRef = useRef;
-exports.useShallowSignal = Re;
-exports.useSignal = le;
-exports.useWatch = Ve;
+exports.useShallowSignal = useShallowSignal;
+exports.useSignal = useSignal;
+exports.useWatch = useWatch;