essor 0.0.12 → 0.0.13-beta.2

package/dist/essor.dev.cjs.js

@@ -1,13 +1,13 @@
 'use strict';
 
 /**
-* essor v0.0.12
+* essor v0.0.13-beta.2
 * (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
 * @license MIT
 **/
 
 // src/version.ts
-var essor_version = "0.0.12";
+var essor_version = "0.0.13-beta.2";
 
 // ../shared/dist/shared.js
 var isObject = (val) => val !== null && typeof val === "object";
@@ -18,16 +18,40 @@ function isString(val) {
 function isSymbol(val) {
   return typeof val === "symbol";
 }
-function isNil(x) {
-  return x === null || x === void 0;
+function isSet(val) {
+  return _toString.call(val) === "[object Set]";
+}
+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]";
+}
+function isNil(x2) {
+  return x2 === null || x2 === void 0;
 }
 var isFunction = (val) => typeof val === "function";
-function isFalsy(x) {
-  return x === false || x === null || x === void 0;
+function isFalsy(x2) {
+  return x2 === false || x2 === null || x2 === void 0;
+}
+var isPlainObject = (val) => _toString.call(val) === "[object Object]";
+function isStringNumber(val) {
+  if (!isString(val)) {
+    return false;
+  }
+  return !Number.isNaN(Number(val));
 }
+var _toString = Object.prototype.toString;
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var hasOwn = (val, key) => hasOwnProperty.call(val, key);
 function coerceArray(data) {
-  return Array.isArray(data) ? data.flat() : [data];
+  return isArray(data) ? data.flat() : [data];
 }
+var hasChanged = (value, oldValue) => value !== oldValue && (value === value || oldValue === oldValue);
+var noop = Function.prototype;
 function startsWith(str, searchString) {
   if (!isString(str)) {
     return false;
@@ -52,6 +76,9 @@ function escape(str) {
     }
   });
 }
+function isExclude(key, exclude) {
+  return isArray(exclude) ? exclude.includes(key) : isFunction(exclude) ? exclude(key) : false;
+}
 var kebabCase = (string) => {
   return string.replaceAll(/[A-Z]+/g, (match, offset) => {
     return `${offset > 0 ? "-" : ""}${match.toLocaleLowerCase()}`;
@@ -60,827 +87,404 @@ var kebabCase = (string) => {
 var capitalizeFirstLetter = (inputString) => {
   return inputString.charAt(0).toUpperCase() + inputString.slice(1);
 };
+function warn(msg, ...args) {
+  console.warn.apply(console, [`[Essor warn]: ${msg}`].concat(args));
+}
 
-// ../signal/dist/signal.dev.esm.js
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
+// ../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;
 };
-var isObject2 = (val) => val !== null && typeof val === "object";
-var isArray2 = Array.isArray;
-function isString2(val) {
-  return typeof val === "string";
-}
-function isSet(val) {
-  return _toString.call(val) === "[object Set]";
-}
-function isWeakMap(val) {
-  return _toString.call(val) === "[object WeakMap]";
+var M = [];
+var F = [];
+var X = Promise.resolve();
+var K = false;
+function C(e) {
+  return e ? X.then(e) : X;
 }
-function isWeakSet(val) {
-  return _toString.call(val) === "[object WeakSet]";
-}
-function isMap(val) {
-  return _toString.call(val) === "[object Map]";
+function ge(e) {
+  M.includes(e) || (M.push(e), Y());
 }
-var isFunction2 = (val) => typeof val === "function";
-var isPlainObject = (val) => _toString.call(val) === "[object Object]";
-function isStringNumber(val) {
-  if (!isString2(val)) {
-    return false;
-  }
-  return !Number.isNaN(Number(val));
+function Y() {
+  K || (K = true, C(ve));
 }
-var _toString = Object.prototype.toString;
-var hasOwnProperty = Object.prototype.hasOwnProperty;
-var hasOwn = (val, key) => hasOwnProperty.call(val, key);
-var hasChanged = (value, oldValue) => value !== oldValue && (value === value || oldValue === oldValue);
-var noop2 = Function.prototype;
-function isExclude(key, exclude) {
-  return Array.isArray(exclude) ? exclude.includes(key) : isFunction2(exclude) ? exclude(key) : false;
+function _e(e) {
+  xe(e, F);
 }
-function warn(msg, ...args) {
-  console.warn.apply(console, [`[Essor warn]: ${msg}`].concat(args));
+function xe(e, t) {
+  t.includes(e) || (t.push(e), Y());
 }
-var queue = [];
-var activePreFlushCbs = [];
-var p = Promise.resolve();
-var isFlushPending = false;
-function nextTick(fn) {
-  return fn ? p.then(fn) : p;
+function ve() {
+  K = false, we();
+  let e;
+  for (; e = M.shift(); ) e && e();
 }
-function queueJob(job) {
-  if (!queue.includes(job)) {
-    queue.push(job);
-    queueFlush();
+function we() {
+  for (; F.length > 0; ) {
+    let e = F.shift();
+    e && e();
   }
 }
-function queueFlush() {
-  if (isFlushPending) {
-    return;
-  }
-  isFlushPending = true;
-  nextTick(flushJobs);
-}
-function queuePreFlushCb(cb) {
-  queueCb(cb, activePreFlushCbs);
-}
-function queueCb(cb, activeQueue) {
-  if (!activeQueue.includes(cb)) {
-    activeQueue.push(cb);
-    queueFlush();
-  }
-}
-function flushJobs() {
-  isFlushPending = false;
-  flushPreFlushCbs();
-  let job;
-  while (job = queue.shift()) {
-    if (job) {
-      job();
-    }
-  }
+function Z(e, t) {
+  return t === "sync" ? () => e() : t === "pre" ? () => _e(e) : () => {
+    C(() => ge(e));
+  };
 }
-function flushPreFlushCbs() {
-  while (activePreFlushCbs.length > 0) {
-    const cb = activePreFlushCbs.shift();
-    if (cb) {
-      cb();
+var T = null;
+var G = /* @__PURE__ */ new WeakMap();
+var H = /* @__PURE__ */ new WeakMap();
+var _ = Symbol("");
+var x = Symbol("");
+var te = Symbol("");
+var ne = Symbol("");
+var $ = Symbol("");
+var f = Symbol("");
+var S = Symbol("");
+var D = false;
+var E = /* @__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;
     }
-  }
-}
-var activeEffect = null;
-var activeComputed = 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 && !activeComputed) 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);
-  }
-  if (activeEffect) 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;
-      }
-      if (inBatch) {
-        batchQueue.add(effect);
-      } else {
-        effect();
-      }
-    });
-  }
+    D ? E.add(r) : r();
+  });
 }
-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) {
+var j = class {
+  constructor(t, n = false) {
     this.__signal = true;
-    this._shallow = shallow;
-    this._value = value;
+    this.__shallow = n, this.__value = t;
   }
-  /**
-   * Gets the current value of the Signal.
-   * @returns {T} The current value.
-   */
   get value() {
-    track(this, SignalValueKey);
-    if (isObject2(this._value) && !this._shallow) {
-      return useReactive(this._value);
-    }
-    return this._value;
+    return u(this, te), isObject(this.__value) && !this.__shallow ? v(this.__value) : this.__value;
   }
-  /**
-   * 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);
-    }
+  set value(t) {
+    h(t) && (t = t.peek()), hasChanged(t, this.__value) && (this.__value = t, p(this, te));
   }
-  /**
-   * Returns the current value without triggering reactivity.
-   * @returns {T} The current value.
-   */
   peek() {
-    return this._value;
+    return this.__value;
   }
 };
-function useSignal(value) {
-  if (isSignal(value)) {
-    return value;
-  }
-  return new Signal(value);
+function le(e) {
+  return h(e) ? e : new j(e);
 }
-function shallowSignal(value) {
-  return new Signal(value, true);
+function Re(e) {
+  return new j(e, true);
 }
-function isSignal(value) {
-  return !!(value && (value == null ? void 0 : value.__signal));
+function h(e) {
+  return !!(e && (e != null && e.__signal));
 }
-var Computed = class {
-  constructor(fn) {
-    this.fn = fn;
+var V = class {
+  constructor(t) {
+    this.fn = t;
     this.__computed = true;
-    const prev = activeEffect;
-    activeEffect = this.run.bind(this);
-    this._value = this.fn();
-    activeEffect = prev;
+    let n = T;
+    T = this.run.bind(this), this.__value = this.fn(), T = n;
   }
-  /**
-   * Get the current computed value without tracking it.
-   */
   peek() {
-    return this._value;
+    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)) {
-      this._value = newValue;
-      trigger(this, ComputedValueKey);
-    }
+    let t = this.fn();
+    hasChanged(t, this.__value) && (this.__value = t, p(this, ne));
   }
-  /**
-   * Get the current computed value and track its usage.
-   */
   get value() {
-    track(this, ComputedValueKey);
-    return this._value;
+    return u(this, ne), this.__value;
   }
 };
-function useComputed(fn) {
-  return new Computed(fn);
+function z(e) {
+  return new V(e);
 }
-function isComputed(value) {
-  return !!(value && value.__computed);
+function I(e) {
+  return !!(e && e.__computed);
 }
-function createScheduler(effect, flush) {
-  if (flush === "sync") {
-    return () => effect();
-  } else if (flush === "pre") {
-    return () => queuePreFlushCb(effect);
-  } else {
-    return () => {
-      nextTick(() => queueJob(effect));
-    };
+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 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;
+  let i = Z(s, n);
+  return s.scheduler = i, s.init = true, s.active = true, o && o(), s(), () => {
+    s.active = false, T = null;
   };
 }
-function signalObject(initialValues, exclude) {
-  if (!initialValues || !isObject2(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 unSignal(signal, exclude) {
-  if (!signal) return {};
-  if (isSignal(signal)) {
-    return signal.peek();
-  }
-  if (isArray2(signal)) {
-    return signal.map((value) => unSignal(value, exclude));
-  }
-  if (isPlainObject(signal)) {
-    return Object.entries(signal).reduce((acc, [key, value]) => {
-      if (isExclude(key, exclude)) {
-        acc[key] = value;
-      } else {
-        acc[key] = isSignal(value) ? value.peek() : isReactive(value) ? unReactive(value) : value;
-      }
-      return acc;
-    }, {});
-  }
-  return signal;
-}
-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 unReactive(target) {
-  if (!isObject2(target)) {
-    return target;
-  }
-  if (!isReactive(target)) {
-    return target;
-  }
-  return target[ReactivePeekSymbol];
-}
-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 (isObject2(value) && !shallow) {
-        return useReactive(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 = 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;
+function We(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[x] : 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[_]);
+}
+function L(e, t) {
+  return v(e, false, t);
+}
+function Ce(e, t) {
+  return v(e, true, t);
+}
+var Ee = (e, t) => ({ get(n, o, r) {
+  if (o === _) return true;
+  if (o === x) 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 = Pe();
+function Pe() {
+  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;
     };
-  });
-  ["push", "pop", "shift", "unshift", "splice", "sort", "reverse", "fill", "copyWithin"].forEach(
-    (key) => {
-      instrumentations2[key] = function(...args) {
-        const arr = unReactive(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((key) => {
-    instrumentations2[key] = function(...args) {
-      const arr = unReactive(this);
-      track(arr, reactiveArrayKey);
-      return arr[key].apply(this, args);
+  }), ["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;
+    };
+  }), ["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);
     };
+  }), e;
+}
+var je = (e, t) => ({ get(n, o, r) {
+  if (o === _) return true;
+  if (o === x) 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 Ae = { get(e, t) {
+  return t === _ ? true : t === x ? e : ((t === Symbol.iterator || t === "size") && u(e, f), Reflect.get(hasOwn(re, t) && t in e ? re : e, t, e));
+} };
+var Ie = { get(e, t) {
+  return t === _ ? true : t === x ? 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);
   });
-  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 (isObject2(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") {
-          trigger(target, "length");
-        }
-      }
-      return result;
-    }
+}, 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 = je(t, n)) : isSet(e) || isMap(e) ? (u(e, f), o = Ae) : isWeakSet(e) || isWeakMap(e) ? (u(e, S), o = Ie) : o = Ee(t, n);
+  let r = new Proxy(e, o);
+  return H.set(e, r), r;
+}
+function Oe(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];
+    });
+  }));
+}
+function fe(e) {
+  try {
+    D = true, e();
+  } finally {
+    D = false, Me();
+  }
+}
+function Me() {
+  E.size > 0 && (E.forEach((e) => e()), E.clear());
+}
+function De(e, t, n) {
+  return Je(e, t, n);
+}
+var pe = void 0;
+var w;
+var N = false;
+function Ve(e) {
+  w = e, N || (N = true, C(qe));
+}
+function qe() {
+  w == null || w(), w = null, N = false;
+}
+function Je(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) => ze(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 = () => k(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 && Ve(() => {
+      t(a, i), i = a;
+    }), !d && (i = a));
+  }, g = B(O, { flush: "sync" });
+  return d = true, o && O(), g;
+}
+function ze(e) {
+  return h(e) || I(e) ? e.value : b(e) ? y({}, e) : isFunction(e) ? e() : (warn("Invalid source", e), noop);
+}
+function k(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)) k(e.value, t, n);
+  else if (isArray(e)) for (let o of e) k(o, t, n);
+  else if (isSet(e) || isMap(e)) e.forEach((o) => {
+    k(o, t, n);
+  });
+  else if (isPlainObject(e)) for (let o in e) k(e[o], t, n);
+  return e;
+}
+function Be(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 Le(e) {
+  return function() {
+    return Be(e);
   };
-};
-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
-    );
+}
+
+// ../template/dist/template.dev.esm.js
+var componentMap = /* @__PURE__ */ new Map();
+var RenderContext = class {
+  constructor() {
+    this.renderMode = 0;
   }
-};
-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
-    );
+  get isSSG() {
+    return this.renderMode === 1;
   }
-};
-var instrumentations = {
-  get(key) {
-    const target = unReactive(this);
-    track(target, ReactiveCollectionKey);
-    return target.get(key);
-  },
-  set(key, value) {
-    const target = unReactive(this);
-    const result = target.set(key, value);
-    trigger(target, ReactiveCollectionKey);
-    return result;
-  },
-  add(value) {
-    const target = unReactive(this);
-    const result = target.add(value);
-    trigger(target, ReactiveCollectionKey);
-    return result;
-  },
-  has(key) {
-    const target = unReactive(this);
-    track(target, ReactiveCollectionKey);
-    return target.has(key);
-  },
-  delete(key) {
-    const target = unReactive(this);
-    const hadKey = target.has(key);
-    const result = target.delete(key);
-    if (hadKey) {
-      trigger(target, ReactiveCollectionKey);
-    }
-    return result;
-  },
-  clear() {
-    const target = unReactive(this);
-    const hadItems = target.size > 0;
-    const result = target.clear();
-    if (hadItems) {
-      trigger(target, ReactiveCollectionKey);
-    }
-    return result;
-  },
-  forEach(callback, thisArg) {
-    const target = unReactive(this);
-    track(target, ReactiveCollectionKey);
-    target.forEach((value, key) => {
-      callback.call(thisArg, value, key, target);
-    });
-  },
-  get size() {
-    const target = unReactive(this);
-    track(target, ReactiveCollectionKey);
-    return target.size;
-  },
-  keys() {
-    const target = unReactive(this);
-    track(target, ReactiveCollectionKey);
-    return target.keys();
-  },
-  values() {
-    const target = unReactive(this);
-    track(target, ReactiveCollectionKey);
-    return target.values();
-  },
-  entries() {
-    const target = unReactive(this);
-    track(target, ReactiveCollectionKey);
-    return target.entries();
-  },
-  [Symbol.iterator]() {
-    const target = unReactive(this);
-    track(target, ReactiveCollectionKey);
-    return target[Symbol.iterator]();
+  get isSSR() {
+    return this.renderMode === 2;
   }
-};
-var weakInstrumentations = {
-  get(key) {
-    const target = unReactive(this);
-    track(target, ReactiveWeakCollectionKey);
-    return target.get(key);
-  },
-  set(key, value) {
-    const target = unReactive(this);
-    const result = target.set(key, value);
-    trigger(target, ReactiveWeakCollectionKey);
-    return result;
-  },
-  add(value) {
-    const target = unReactive(this);
-    const result = target.add(value);
-    trigger(target, ReactiveWeakCollectionKey);
-    return result;
-  },
-  has(key) {
-    const target = unReactive(this);
-    track(target, ReactiveWeakCollectionKey);
-    return target.has(key);
-  },
-  delete(key) {
-    const target = unReactive(this);
-    const result = target.delete(key);
-    trigger(target, ReactiveWeakCollectionKey);
-    return result;
+  get isClient() {
+    return this.renderMode === 0;
   }
-};
-function reactive(initialValue, shallow = false, exclude) {
-  if (!isObject2(initialValue)) {
-    return initialValue;
-  }
-  if (isReactive(initialValue)) {
-    return initialValue;
-  }
-  if (reactiveMap.has(initialValue)) {
-    return reactiveMap.get(initialValue);
-  }
-  let handler;
-  if (isArray2(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);
+  setSSR() {
+    this.renderMode = 2;
   }
-  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;
+  setSSG() {
+    this.renderMode = 1;
   }
-  if (isWeakMap(reactiveObj) || isWeakSet(reactiveObj)) {
-    {
-      warn("clearReactive: WeakMap and WeakSet are not clearable");
-    }
-    return;
+  setClient() {
+    this.renderMode = 0;
   }
-  useBatch(() => {
-    if (isArray2(reactiveObj)) {
-      reactiveObj.length = 0;
-    } else if (isSet(reactiveObj) || isMap(reactiveObj)) {
-      reactiveObj.clear();
-    } else if (isObject2(reactiveObj)) {
-      Object.keys(reactiveObj).forEach((key) => {
-        delete reactiveObj[key];
-      });
-    }
+};
+var renderContext = new RenderContext();
+function enterComponent(temp, index) {
+  componentMap.set(temp, {
+    index
   });
 }
-function useBatch(fn) {
-  try {
-    inBatch = true;
-    fn();
-  } finally {
-    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 = isArray2(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 (isFunction2(source)) {
-    getter = source;
-  } else {
-    warn("Invalid source type", source);
-    return noop2;
-  }
-  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 (isFunction2(s)) return s();
-  warn("Invalid source", s);
-  return noop2;
-}
-function traverse(value, depth = Infinity, seen) {
-  if (depth <= 0 || !isObject2(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 (isArray2(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 != null ? state : {});
-  const reactiveState = useReactive(state != null ? 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({
-    state: reactiveState
-  }, default_actions);
-  for (const key in getters) {
-    const getter = getters[key];
-    if (getter) {
-      Object.defineProperty(store, key, {
-        get() {
-          return useComputed(getter.bind(reactiveState, reactiveState)).value;
-        },
-        enumerable: true,
-        configurable: true
-      });
-    }
-  }
-  for (const key in actions) {
-    const action = actions[key];
-    if (action) {
-      store[key] = action.bind(reactiveState);
-    }
-  }
-  return store;
+function getComponentIndex(temp) {
+  return componentMap.get(temp).index;
 }
-function createStore(options) {
-  return function() {
-    return createOptionsStore(options);
-  };
-}
-
-// ../template/dist/template.dev.esm.js
-var __defProp2 = Object.defineProperty;
-var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
-var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues2 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp2.call(b, prop))
-      __defNormalProp2(a, prop, b[prop]);
-  if (__getOwnPropSymbols2)
-    for (var prop of __getOwnPropSymbols2(b)) {
-      if (__propIsEnum2.call(b, prop))
-        __defNormalProp2(a, prop, b[prop]);
-    }
-  return a;
-};
-var _Hooks = class _Hooks2 {
+var _LifecycleContext = class _LifecycleContext2 {
   constructor() {
     this.hooks = {
       mounted: /* @__PURE__ */ new Set(),
@@ -896,154 +500,120 @@ var _Hooks = class _Hooks2 {
     (_a = this.hooks[hook]) == null ? void 0 : _a.add(cb);
   }
   getContext(context) {
-    return _Hooks2.context[context];
+    return _LifecycleContext2.context[context];
   }
   setContext(context, value) {
-    _Hooks2.context[context] = value;
+    _LifecycleContext2.context[context] = value;
   }
   initRef() {
-    _Hooks2.ref = this;
+    _LifecycleContext2.ref = this;
   }
   removeRef() {
-    _Hooks2.ref = null;
+    _LifecycleContext2.ref = null;
+  }
+  clearHooks() {
+    Object.values(this.hooks).forEach((set) => set.clear());
   }
 };
-_Hooks.ref = null;
-_Hooks.context = {};
-var Hooks = _Hooks;
-var ComponentNode = class extends Hooks {
-  constructor(template2, props, key) {
+_LifecycleContext.ref = null;
+_LifecycleContext.context = {};
+var LifecycleContext = _LifecycleContext;
+function isSSGNode(node) {
+  return node instanceof SSGNode;
+}
+var componentIndex = 1;
+var SSGNode = class extends LifecycleContext {
+  constructor(template, props = {}, key) {
     super();
-    this.template = template2;
+    this.template = template;
     this.props = props;
     this.key = key;
-    this.proxyProps = {};
-    this.emitter = /* @__PURE__ */ new Set();
-    this.mounted = false;
-    this.rootNode = null;
-    this.context = {};
-    this.trackMap = /* @__PURE__ */ new Map();
-    this.proxyProps = signalObject(
-      props,
-      (key2) => startsWith(key2, "on") || startsWith(key2, "update")
-    );
-    this.key = this.key || props.key;
-  }
-  get firstChild() {
-    var _a, _b;
-    return (_b = (_a = this.rootNode) == null ? void 0 : _a.firstChild) != null ? _b : null;
-  }
-  get isConnected() {
-    var _a, _b;
-    return (_b = (_a = this.rootNode) == null ? void 0 : _a.isConnected) != null ? _b : false;
-  }
-  inheritNode(node) {
-    this.context = node.context;
-    this.hooks = node.hooks;
-    Object.assign(this.proxyProps, node.proxyProps);
-    this.rootNode = node.rootNode;
-    this.trackMap = node.trackMap;
-    const props = this.props;
-    this.props = node.props;
-    this.patchProps(props);
-  }
-  mount(parent, before) {
-    var _a, _b, _c, _d;
-    if (!isFunction(this.template)) {
-      throw new Error("Template must be a function");
-    }
-    if (this.isConnected) {
-      return (_b = (_a = this.rootNode) == null ? void 0 : _a.mount(parent, before)) != null ? _b : [];
+    enterComponent(template, componentIndex);
+    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);
     }
+  }
+  mount() {
     this.initRef();
-    this.rootNode = this.template(useReactive(this.proxyProps, ["children"]));
+    const output = this.render();
     this.removeRef();
-    this.mounted = true;
-    const mountedNode = (_d = (_c = this.rootNode) == null ? void 0 : _c.mount(parent, before)) != null ? _d : [];
-    this.hooks.mounted.forEach((handler) => handler());
-    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());
+    return output;
   }
-  getNodeTrack(trackKey, suppressCleanupCall) {
-    let track2 = this.trackMap.get(trackKey);
-    if (!track2) {
-      track2 = { cleanup: () => {
-      } };
-      this.trackMap.set(trackKey, track2);
-    }
-    if (!suppressCleanupCall) {
-      track2.cleanup();
+  render() {
+    if (isFunction(this.template)) {
+      const root = this.template(this.props);
+      if (isSSGNode(root)) {
+        return root.mount();
+      } else {
+        return String(root);
+      }
     }
-    return track2;
-  }
-  patchProps(props) {
-    var _a, _b, _c, _d;
-    for (const [key, prop] of Object.entries(props)) {
-      if (startsWith(key, "on") && ((_a = this.rootNode) == null ? void 0 : _a.nodes)) {
-        const event = key.slice(2).toLowerCase();
-        const listener = prop;
-        const cleanup = addEventListener(this.rootNode.nodes[0], event, listener);
-        this.emitter.add(cleanup);
-      } else if (key === "ref") {
-        props[key].value = (_b = this.rootNode) == null ? void 0 : _b.nodes[0];
-      } else if (startsWith(key, "update")) {
-        props[key] = isSignal(prop) ? prop.value : prop;
-      } else if (key !== "children") {
-        const newValue = (_d = (_c = this.proxyProps)[key]) != null ? _d : _c[key] = useSignal(prop);
-        const track2 = this.getNodeTrack(key);
-        track2.cleanup = useEffect(() => {
-          newValue.value = isFunction(prop) ? prop() : prop;
+    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;
         });
       }
-    }
-    this.props = props;
+      this.template[findIndex].replaceAll(
+        `data-hk="${key}"`,
+        `data-hk="${key}" ${generateAttributes(cur)}`
+      );
+    });
+    return template.join("");
   }
 };
-function h(_template, props, key) {
-  if (isString(_template)) {
-    if (isHtmlTagName(_template)) {
-      _template = convertToHtmlTag(_template);
-      props = {
-        1: props
-      };
-    }
-    if (_template === "") {
-      props = {
-        0: props
-      };
+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;
     }
-    _template = template(_template);
-  }
-  return isFunction(_template) ? new ComponentNode(_template, props, key) : new TemplateNode(_template, props, key);
-}
-function isComponent(node) {
-  return node instanceof ComponentNode;
-}
-function isJsxElement(node) {
-  return node instanceof ComponentNode || node instanceof TemplateNode;
-}
-function template(html) {
-  const template2 = document.createElement("template");
-  template2.innerHTML = closeHtmlTags(html);
-  return template2;
-}
-function Fragment(props) {
-  return props.children;
+  });
 }
-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 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(
+  ","
+);
 function coerceNode(data) {
-  if (isJsxElement(data) || data instanceof Node) {
+  if (isJsxElement(data) || data instanceof Node || isSSGNode(data)) {
     return data;
   }
   const text = isFalsy(data) ? "" : String(data);
@@ -1051,11 +621,12 @@ function coerceNode(data) {
 }
 function insertChild(parent, child, before = null) {
   const beforeNode = isJsxElement(before) ? before.firstChild : before;
+  const ssr = renderContext.isSSR;
   if (isJsxElement(child)) {
     child.mount(parent, beforeNode);
-  } else if (beforeNode) {
+  } else if (beforeNode && !ssr) {
     beforeNode.before(child);
-  } else {
+  } else if (!ssr) {
     parent.append(child);
   }
 }
@@ -1077,7 +648,7 @@ function setAttribute(element, attr, value) {
   if (attr === "class") {
     if (typeof value === "string") {
       element.className = value;
-    } else if (Array.isArray(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();
@@ -1100,14 +671,14 @@ function setAttribute(element, attr, value) {
   } else if (value === true) {
     element.setAttribute(attr, "");
   } else {
-    if (element instanceof HTMLInputElement) {
+    if (element instanceof HTMLInputElement && attr === "value") {
       element.value = String(value);
     } else {
       element.setAttribute(attr, String(value));
     }
   }
 }
-function binNode(node, setter) {
+function bindNode(node, setter) {
   if (node instanceof HTMLInputElement) {
     switch (node.type) {
       case "checkbox":
@@ -1150,16 +721,12 @@ function binNode(node, setter) {
     });
   }
 }
-var p2 = Promise.resolve();
-function nextTick2(fn) {
-  return fn ? p2.then(fn) : p2;
-}
+Promise.resolve();
 function addEventListener(node, eventName, handler) {
   node.addEventListener(eventName, handler);
   return () => node.removeEventListener(eventName, handler);
 }
 function closeHtmlTags(input) {
-  const selfClosingTagList = selfClosingTags.split(",");
   const tagStack = [];
   const output = [];
   const tagPattern = /<\/?([\da-z-]+)([^>]*)>/gi;
@@ -1181,7 +748,7 @@ function closeHtmlTags(input) {
       if (tagStack.length > 0) {
         tagStack.pop();
       }
-    } else if (!selfClosingTagList.includes(tagName)) {
+    } else if (!selfClosingTags.includes(tagName)) {
       tagStack.push(tagName);
     }
     output.push(fullMatch);
@@ -1196,44 +763,145 @@ function closeHtmlTags(input) {
   return output.join("");
 }
 function isHtmlTagName(tagName) {
-  const htmlTagsList = htmlTags.split(",");
-  return htmlTagsList.includes(tagName);
+  return htmlTags.includes(tagName);
 }
 function convertToHtmlTag(tagName) {
-  const selfClosingTagList = selfClosingTags.split(",");
-  if (selfClosingTagList.includes(tagName)) {
+  if (selfClosingTags.includes(tagName)) {
     return `<${tagName}/>`;
   } else {
     return `<${tagName}></${tagName}>`;
   }
 }
+function extractSignal(signal) {
+  if (h(signal)) {
+    return signal.value;
+  } else {
+    return signal;
+  }
+}
+var ComponentNode = class extends LifecycleContext {
+  constructor(template, props, key) {
+    super();
+    this.template = template;
+    this.props = props;
+    this.key = key;
+    this.emitter = /* @__PURE__ */ new Set();
+    this.rootNode = null;
+    this.trackMap = /* @__PURE__ */ new Map();
+    this.proxyProps = props ? L(
+      props,
+      (key2) => startsWith(key2, "on") || startsWith(key2, "update") || key2 === "children"
+    ) : {};
+  }
+  get firstChild() {
+    var _a, _b;
+    return (_b = (_a = this.rootNode) == null ? void 0 : _a.firstChild) != null ? _b : null;
+  }
+  get isConnected() {
+    var _a, _b;
+    return (_b = (_a = this.rootNode) == null ? void 0 : _a.isConnected) != null ? _b : false;
+  }
+  mount(parent, before) {
+    var _a, _b, _c, _d;
+    if (!isFunction(this.template)) {
+      throw new Error("Template must be a function");
+    }
+    if (this.isConnected) {
+      return (_b = (_a = this.rootNode) == null ? void 0 : _a.mount(parent, before)) != null ? _b : [];
+    }
+    this.initRef();
+    this.rootNode = this.template(this.proxyProps);
+    const mountedNode = (_d = (_c = this.rootNode) == null ? void 0 : _c.mount(parent, before)) != null ? _d : [];
+    this.hooks.mounted.forEach((handler) => handler());
+    this.patchProps(this.props);
+    this.removeRef();
+    return mountedNode;
+  }
+  unmount() {
+    var _a;
+    this.hooks.destroy.forEach((handler) => handler());
+    this.clearHooks();
+    (_a = this.rootNode) == null ? void 0 : _a.unmount();
+    this.rootNode = null;
+    this.proxyProps = {};
+    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.
+   */
+  inheritNode(node) {
+    Object.assign(this.proxyProps, node.proxyProps);
+    this.rootNode = node.rootNode;
+    this.trackMap = node.trackMap;
+    this.hooks = node.hooks;
+    const props = this.props;
+    this.props = node.props;
+    this.patchProps(props);
+  }
+  /**
+   * 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.
+   */
+  getNodeTrack(trackKey) {
+    let track = this.trackMap.get(trackKey);
+    if (!track) {
+      track = { cleanup: () => {
+      } };
+      this.trackMap.set(trackKey, track);
+    }
+    track.cleanup();
+    return track;
+  }
+  /**
+   * 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.
+   */
+  patchProps(props) {
+    var _a, _b;
+    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);
+      } 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.props = props;
+  }
+};
 function patchChildren(parent, childrenMap, nextChildren, before) {
   const result = /* @__PURE__ */ new Map();
   const children = Array.from(childrenMap.values());
-  const childrenLength = children.length;
   if (childrenMap.size > 0 && nextChildren.length === 0) {
-    if (parent.childNodes.length === childrenLength + (before ? 1 : 0)) {
-      parent.innerHTML = "";
-      if (before) {
-        insertChild(parent, before);
-      }
-    } else {
-      const range = document.createRange();
-      const child = children[0];
-      const start = isJsxElement(child) ? child.firstChild : child;
-      range.setStartBefore(start);
-      if (before) {
-        range.setEndBefore(before);
-      } else {
-        range.setEndAfter(parent);
-      }
-      range.deleteContents();
-    }
-    children.forEach((node) => {
-      if (isJsxElement(node)) {
-        node.unmount();
-      }
-    });
+    clearChildren(parent, children, before);
     return result;
   }
   const replaces = [];
@@ -1274,6 +942,30 @@ function patchChildren(parent, childrenMap, nextChildren, before) {
   });
   return result;
 }
+function clearChildren(parent, children, before) {
+  if (parent.childNodes.length === children.length + (before ? 1 : 0)) {
+    parent.innerHTML = "";
+    if (before) {
+      insertChild(parent, before);
+    }
+  } else {
+    const range = document.createRange();
+    const child = children[0];
+    const start = isJsxElement(child) ? child.firstChild : child;
+    range.setStartBefore(start);
+    if (before) {
+      range.setEndBefore(before);
+    } else {
+      range.setEndAfter(parent);
+    }
+    range.deleteContents();
+  }
+  children.forEach((node) => {
+    if (isJsxElement(node)) {
+      node.unmount();
+    }
+  });
+}
 function patch(parent, node, next) {
   if (node === next) {
     return node;
@@ -1308,30 +1000,34 @@ function getKey(node, index) {
   }
   return `_$${index}$`;
 }
-var TemplateNode = class _TemplateNode {
-  constructor(template2, props, key) {
-    this.template = template2;
+var TemplateNode = class {
+  constructor(template, props, key) {
+    this.template = template;
     this.props = props;
     this.key = key;
     this.treeMap = /* @__PURE__ */ new Map();
     this.mounted = false;
     this.nodes = [];
-    this.provides = {};
     this.trackMap = /* @__PURE__ */ new Map();
+    this.bindValueKeys = [];
     this.parent = null;
-    this.key = this.key || props.key;
+    this.key || (this.key = props == null ? void 0 : props.key);
+    if (renderContext.isSSR) {
+      this.componentIndex = getComponentIndex(this.template);
+    }
+  }
+  addEventListener() {
+  }
+  removeEventListener() {
   }
   get firstChild() {
     var _a;
     return (_a = this.nodes[0]) != null ? _a : null;
   }
+  // is mounted
   get isConnected() {
     return this.mounted;
   }
-  addEventListener() {
-  }
-  removeEventListener() {
-  }
   mount(parent, before) {
     var _a;
     this.parent = parent;
@@ -1339,6 +1035,9 @@ var TemplateNode = class _TemplateNode {
       this.nodes.forEach((node) => insertChild(parent, node, before));
       return this.nodes;
     }
+    if (isArray(this.template)) {
+      this.template = createTemplate(this.template.join(""));
+    }
     const cloneNode = this.template.content.cloneNode(true);
     const firstChild = cloneNode.firstChild;
     if ((_a = firstChild == null ? void 0 : firstChild.hasAttribute) == null ? void 0 : _a.call(firstChild, "_svg_")) {
@@ -1348,23 +1047,20 @@ var TemplateNode = class _TemplateNode {
       });
     }
     this.nodes = Array.from(cloneNode.childNodes);
-    this.mapNodeTree(parent, cloneNode);
+    if (renderContext.isSSR) {
+      this.mapSSGNodeTree(parent);
+    } else {
+      this.mapNodeTree(parent, cloneNode);
+    }
     insertChild(parent, cloneNode, before);
-    this.patchNodes(this.props);
+    this.patchProps(this.props);
     this.mounted = true;
     return this.nodes;
   }
   unmount() {
-    this.trackMap.forEach((track2) => {
-      var _a, _b;
-      (_a = track2.cleanup) == null ? void 0 : _a.call(track2);
-      (_b = track2.lastNodes) == null ? void 0 : _b.forEach((node) => {
-        if (track2.isRoot) {
-          removeChild(node);
-        } else if (node instanceof _TemplateNode) {
-          node.unmount();
-        }
-      });
+    this.trackMap.forEach((track) => {
+      var _a;
+      (_a = track.cleanup) == null ? void 0 : _a.call(track);
     });
     this.trackMap.clear();
     this.treeMap.clear();
@@ -1372,6 +1068,52 @@ var TemplateNode = class _TemplateNode {
     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;
+  }
+  inheritNode(node) {
+    this.mounted = node.mounted;
+    this.nodes = node.nodes;
+    this.trackMap = node.trackMap;
+    this.treeMap = node.treeMap;
+    const props = this.props;
+    this.props = node.props;
+    this.patchProps(props);
+  }
+  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);
+  }
   mapNodeTree(parent, tree) {
     let index = 1;
     this.treeMap.set(0, parent);
@@ -1387,84 +1129,78 @@ var TemplateNode = class _TemplateNode {
     };
     walk(tree);
   }
-  patchNodes(props) {
-    for (const key in props) {
-      const index = Number(key);
-      const node = this.treeMap.get(index);
-      if (node) {
-        const value = this.props[key];
-        this.patchNode(key, node, value, index === 0);
-      }
-    }
-    this.props = 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.
+   * @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) {
     var _a;
-    let track2 = this.trackMap.get(trackKey);
-    if (!track2) {
-      track2 = { cleanup: () => {
+    let track = this.trackMap.get(trackKey);
+    if (!track) {
+      track = { cleanup: () => {
       } };
       if (trackLastNodes) {
-        track2.lastNodes = /* @__PURE__ */ new Map();
+        track.lastNodes = /* @__PURE__ */ new Map();
       }
       if (isRoot) {
-        track2.isRoot = true;
+        track.isRoot = true;
       }
-      this.trackMap.set(trackKey, track2);
+      this.trackMap.set(trackKey, track);
     }
-    (_a = track2.cleanup) == null ? void 0 : _a.call(track2);
-    return track2;
-  }
-  inheritNode(node) {
-    this.mounted = node.mounted;
-    this.nodes = node.nodes;
-    this.trackMap = node.trackMap;
-    this.treeMap = node.treeMap;
-    const props = this.props;
-    this.props = node.props;
-    this.patchNodes(props);
+    (_a = track.cleanup) == null ? void 0 : _a.call(track);
+    return track;
   }
-  patchNode(key, node, props, isRoot) {
+  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 track2 = this.getNodeTrack(trackKey, true, isRoot);
-          patchChild(track2, node, props.children, null);
+          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 track2 = this.getNodeTrack(trackKey, true, isRoot);
-            patchChild(track2, node, child, before);
+            const track = this.getNodeTrack(trackKey, true, isRoot);
+            patchChild(track, node, child, before);
           });
         }
       } else if (attr === "ref") {
         props[attr].value = node;
       } else if (startsWith(attr, "on")) {
         const eventName = attr.slice(2).toLocaleLowerCase();
-        const track2 = this.getNodeTrack(`${key}:${attr}`);
+        const track = this.getNodeTrack(`${key}:${attr}`);
         const listener = props[attr];
-        track2.cleanup = addEventListener(node, eventName, listener);
-      } else if (!startsWith(attr, "update")) {
-        const track2 = this.getNodeTrack(`${key}:${attr}`);
+        track.cleanup = addEventListener(node, eventName, listener);
+      } 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 = isSignal(val) ? val : useSignal(val);
-        patchAttribute(track2, node, attr, triggerValue.value);
-        const cleanup = useEffect(() => {
-          triggerValue.value = isSignal(val) ? val.value : val;
-          patchAttribute(track2, node, attr, triggerValue.value);
+        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;
-        const updateKey = `update${capitalizeFirstLetter(attr)}`;
-        if (props[updateKey]) {
-          cleanupBind = binNode(node, (value) => {
+        if (props[updateKey] && !isComponent(attr)) {
+          cleanupBind = bindNode(node, (value) => {
             props[updateKey](value);
           });
         }
-        track2.cleanup = () => {
+        track.cleanup = () => {
           cleanup && cleanup();
           cleanupBind && cleanupBind();
         };
@@ -1472,178 +1208,144 @@ var TemplateNode = class _TemplateNode {
     }
   }
 };
-function patchAttribute(track2, node, attr, data) {
+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);
+      }
+    });
+  }
+}
+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);
+        }
+      });
+    } else {
+      insertChild(parent, node, before);
+    }
+    result.set(key, node);
+  });
+  return result;
+}
+function patchAttribute(track, node, attr, data) {
   const element = node;
   if (!element.setAttribute) {
     return;
   }
   if (isFunction(data)) {
-    track2.cleanup = useEffect(() => {
+    track.cleanup = B(() => {
       setAttribute(element, attr, data());
     });
   } else {
     setAttribute(element, attr, data);
   }
 }
-function patchChild(track2, parent, child, before) {
-  if (isFunction(child)) {
-    track2.cleanup = useEffect(() => {
-      const nextNodes = coerceArray(child()).map(coerceNode);
-      track2.lastNodes = patchChildren(parent, track2.lastNodes, nextNodes, before);
-    });
-  } else {
-    coerceArray(child).forEach((node, i) => {
-      const newNode = coerceNode(node);
-      track2.lastNodes.set(String(i), newNode);
-      insertChild(parent, newNode, before);
-    });
+function h2(template, props, key) {
+  if (isString(template)) {
+    if (isHtmlTagName(template)) {
+      template = convertToHtmlTag(template);
+      props = { "1": props };
+    } else if (template === "") {
+      props = { "0": props };
+    }
+    template = createTemplate(template);
   }
+  return isFunction(template) ? new ComponentNode(template, props, key) : new TemplateNode(template, props, key);
+}
+function isComponent(node) {
+  return node instanceof ComponentNode;
+}
+function isJsxElement(node) {
+  return node instanceof ComponentNode || node instanceof TemplateNode;
+}
+function createTemplate(html) {
+  const template = document.createElement("template");
+  template.innerHTML = closeHtmlTags(html);
+  return template;
+}
+function Fragment(props) {
+  return props.children;
 }
 function onMount(cb) {
   var _a;
-  throwIfOutsideComponent("onMounted");
-  (_a = Hooks.ref) == null ? void 0 : _a.addHook("mounted", cb);
+  assertInsideComponent("onMounted");
+  (_a = LifecycleContext.ref) == null ? void 0 : _a.addHook("mounted", cb);
 }
 function onDestroy(cb) {
   var _a;
-  throwIfOutsideComponent("onDestroy");
-  (_a = Hooks.ref) == null ? void 0 : _a.addHook("destroy", cb);
+  assertInsideComponent("onDestroy");
+  (_a = LifecycleContext.ref) == null ? void 0 : _a.addHook("destroy", cb);
 }
-function throwIfOutsideComponent(hook, key) {
-  if (!Hooks.ref) {
+function assertInsideComponent(hookName, key) {
+  if (!LifecycleContext.ref && true) {
     console.error(
-      `"${hook}"(key: ${isSymbol(key) ? key.toString() : key}) can only be called within the component function body
+      `"${hookName}"(key: ${isSymbol(key) ? key.toString() : key}) can only be called within the component function body
       and cannot be used in asynchronous or deferred calls.`
     );
   }
 }
 function useProvide(key, value) {
   var _a;
-  throwIfOutsideComponent("useProvide", key);
-  (_a = Hooks.ref) == null ? void 0 : _a.setContext(key, value);
+  assertInsideComponent("useProvide", key);
+  (_a = LifecycleContext.ref) == null ? void 0 : _a.setContext(key, value);
 }
 function useInject(key, defaultValue) {
   var _a;
-  throwIfOutsideComponent("useInject", key);
-  return ((_a = Hooks.ref) == null ? void 0 : _a.getContext(key)) || defaultValue;
+  assertInsideComponent("useInject", key);
+  return ((_a = LifecycleContext.ref) == null ? void 0 : _a.getContext(key)) || defaultValue;
 }
 function useRef() {
-  const ref = shallowSignal(null);
+  const ref = Re(null);
   return ref;
 }
-function generateAttributes(props) {
-  return Object.entries(props).map(([key, value]) => {
-    if (key === "children" || isFunction(value)) return "";
-    return `${key}="${escape(String(value))}"`;
-  }).filter(Boolean).join(" ");
-}
-function normalizeProps(props) {
-  Object.keys(props).forEach((propKey) => {
-    if (isFunction(props[propKey])) {
-      delete props[propKey];
-    }
-    if (isSignal(props[propKey])) {
-      props[propKey] = props[propKey].value;
-    }
-  });
+function renderToString(component, props) {
+  renderContext.setSSG();
+  const ssrNode = new SSGNode(component, props || {});
+  const html = ssrNode.mount();
+  renderContext.setClient();
+  return html;
 }
-function handleChildResult(result, prop, key, tmpl, childNodesMap, path) {
-  if (isSignal(result)) {
-    tmpl.template += result.value;
-  } else if (result instanceof ServerNode) {
-    const mapKey = path ? String(path) : `${key}`;
-    if (!childNodesMap[mapKey]) childNodesMap[mapKey] = [];
-    const childResult = result.mount();
-    childNodesMap[mapKey].push(
-      isFunction(childResult) ? childResult(prop) : isSignal(childResult) ? childResult.value : childResult
-    );
-  } else {
-    tmpl.template += isFunction(result) ? result(prop) : String(result);
+function hydrate(component, container) {
+  const rootElement = typeof container === "string" ? document.querySelector(container) : container;
+  if (!rootElement) {
+    throw new Error(`Could not find container: ${container}`);
   }
+  renderContext.setSSR();
+  h2(component).mount(rootElement);
+  renderContext.setClient();
 }
-var ServerNode = class _ServerNode extends Hooks {
-  constructor(template2, props = {}, key) {
-    super();
-    this.template = template2;
-    this.props = props;
-    this.key = key;
-    this.childNodesMap = {};
-    this.processedTemplates = {};
-  }
-  /**
-   * Mount and render the component
-   */
-  mount() {
-    this.initRef();
-    const output = this.render();
-    this.removeRef();
-    return output;
-  }
-  /**
-   * Initialize template entries and props
-   */
-  initTemplates() {
-    const templateCollection = Array.isArray(this.template) ? this.template.reduce((acc, tmpl, index) => {
-      acc[index + 1] = { template: tmpl };
-      return acc;
-    }, {}) : this.template;
-    if (isObject(templateCollection)) {
-      Object.entries(templateCollection).forEach(([key, tmpl]) => {
-        const prop = __spreadValues2({}, this.props[key]);
-        normalizeProps(prop);
-        if (prop.children) {
-          prop.children.forEach((item) => {
-            const [child, path] = isArray(item) ? item : [item, null];
-            if (isFunction(child)) {
-              const result = child(prop);
-              handleChildResult(result, prop, key, tmpl, this.childNodesMap, path);
-            } else {
-              tmpl.template += isSignal(child) ? child.value : String(child);
-            }
-          });
-        }
-        this.processedTemplates[key] = {
-          template: tmpl.template,
-          props: prop
-        };
-      });
-    }
-  }
-  /**
-   * Render component and its children into a string
-   */
-  render() {
-    if (isFunction(this.template)) {
-      const root = this.template(this.props);
-      return root instanceof _ServerNode ? root.mount() : String(root);
-    }
-    if (this.template instanceof _ServerNode) {
-      return this.template.mount();
-    }
-    this.initTemplates();
-    return Object.entries(this.processedTemplates).map(([key, { template: template2, props }]) => {
-      let content = template2;
-      if (props && Object.keys(props).length > 0) {
-        content += ` ${generateAttributes(props)}`;
-      }
-      if (this.childNodesMap[key]) {
-        content = content.replace("<!>", this.renderChildren(this.childNodesMap[key]));
-      }
-      return content;
-    }).join("");
-  }
-  /**
-   * Render child nodes into a string
-   */
-  renderChildren(children) {
-    return coerceArray(children).map(String).join("");
-  }
-};
 function ssg(component, props) {
-  return new ServerNode(component, props);
-}
-function renderToString(component, props) {
-  return ssg(component, props).mount();
+  if (renderContext.isSSG) {
+    return new SSGNode(component, props);
+  }
+  return h2(component, props);
 }
 
 // src/index.ts
@@ -1651,50 +1353,42 @@ if (globalThis) {
   globalThis.__essor_version__ = essor_version;
 }
 /**
-* @estjs/shared v0.0.12
-* (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
-* @license MIT
-**/
-/**
-* @estjs/signal v0.0.12
+* @estjs/signal v0.0.13-beta.2
 * (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
 * @license MIT
 **/
 /**
-* @estjs/template v0.0.12
+* @estjs/template v0.0.13-beta.2
 * (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
 * @license MIT
 **/
 
-exports.ComponentNode = ComponentNode;
 exports.Fragment = Fragment;
-exports.TemplateNode = TemplateNode;
-exports.clearReactive = clearReactive;
-exports.createStore = createStore;
+exports.clearReactive = Oe;
+exports.createStore = Le;
 exports.essor_version = essor_version;
-exports.h = h;
+exports.h = h2;
+exports.hydrate = hydrate;
 exports.isComponent = isComponent;
-exports.isComputed = isComputed;
+exports.isComputed = I;
 exports.isJsxElement = isJsxElement;
-exports.isReactive = isReactive;
-exports.isSignal = isSignal;
-exports.nextTick = nextTick2;
+exports.isReactive = b;
+exports.isSignal = h;
 exports.onDestroy = onDestroy;
 exports.onMount = onMount;
 exports.renderToString = renderToString;
-exports.shallowReactive = shallowReactive;
-exports.shallowSignal = shallowSignal;
-exports.signalObject = signalObject;
+exports.shallowReactive = Ce;
+exports.shallowSignal = Re;
+exports.signalObject = We;
 exports.ssg = ssg;
-exports.template = template;
-exports.unReactive = unReactive;
-exports.unSignal = unSignal;
-exports.useBatch = useBatch;
-exports.useComputed = useComputed;
-exports.useEffect = useEffect;
+exports.template = createTemplate;
+exports.toRaw = c;
+exports.useBatch = fe;
+exports.useComputed = z;
+exports.useEffect = B;
 exports.useInject = useInject;
 exports.useProvide = useProvide;
-exports.useReactive = useReactive;
+exports.useReactive = L;
 exports.useRef = useRef;
-exports.useSignal = useSignal;
-exports.useWatch = useWatch;
+exports.useSignal = le;
+exports.useWatch = De;