essor 0.0.11 → 0.0.12

package/dist/essor.dev.esm.js

@@ -1,11 +1,11 @@
 /**
-* essor v0.0.11
+* essor v0.0.12
 * (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
 * @license MIT
 **/
 
 // src/version.ts
-var essor_version = "0.0.11";
+var essor_version = "0.0.12";
 
 // ../shared/dist/shared.js
 var isObject = (val) => val !== null && typeof val === "object";
@@ -13,6 +13,9 @@ var isArray = Array.isArray;
 function isString(val) {
   return typeof val === "string";
 }
+function isSymbol(val) {
+  return typeof val === "symbol";
+}
 function isNil(x) {
   return x === null || x === void 0;
 }
@@ -29,6 +32,24 @@ function startsWith(str, searchString) {
   }
   return str.indexOf(searchString) === 0;
 }
+function escape(str) {
+  return str.replaceAll(/["&'<>]/g, (char) => {
+    switch (char) {
+      case "&":
+        return "&amp;";
+      case "<":
+        return "&lt;";
+      case ">":
+        return "&gt;";
+      case '"':
+        return "&quot;";
+      case "'":
+        return "&#039;";
+      default:
+        return char;
+    }
+  });
+}
 var kebabCase = (string) => {
   return string.replaceAll(/[A-Z]+/g, (match, offset) => {
     return `${offset > 0 ? "-" : ""}${match.toLocaleLowerCase()}`;
@@ -60,9 +81,6 @@ var isArray2 = Array.isArray;
 function isString2(val) {
   return typeof val === "string";
 }
-function isNull(val) {
-  return val === null;
-}
 function isSet(val) {
   return _toString.call(val) === "[object Set]";
 }
@@ -76,41 +94,90 @@ function isMap(val) {
   return _toString.call(val) === "[object Map]";
 }
 var isFunction2 = (val) => typeof val === "function";
-var isPrimitive = (val) => ["string", "number", "boolean", "symbol", "undefined"].includes(typeof val) || isNull(val);
-function isHTMLElement(obj) {
-  if (!obj) return false;
-  return obj && typeof obj === "object" && obj.nodeType === 1 && typeof obj.nodeName === "string";
+var isPlainObject = (val) => _toString.call(val) === "[object Object]";
+function isStringNumber(val) {
+  if (!isString2(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);
 var hasChanged = (value, oldValue) => value !== oldValue && (value === value || oldValue === oldValue);
 var noop2 = Function.prototype;
-function startsWith2(str, searchString) {
-  if (!isString2(str)) {
-    return false;
-  }
-  return str.indexOf(searchString) === 0;
-}
 function isExclude(key, exclude) {
   return Array.isArray(exclude) ? exclude.includes(key) : isFunction2(exclude) ? exclude(key) : false;
 }
 function warn(msg, ...args) {
   console.warn.apply(console, [`[Essor warn]: ${msg}`].concat(args));
 }
+var 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 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 flushPreFlushCbs() {
+  while (activePreFlushCbs.length > 0) {
+    const cb = activePreFlushCbs.shift();
+    if (cb) {
+      cb();
+    }
+  }
+}
 var activeEffect = null;
 var activeComputed = null;
-var computedMap = /* @__PURE__ */ new WeakMap();
-var signalMap = /* @__PURE__ */ new WeakMap();
-var effectDeps = /* @__PURE__ */ new Set();
+var triggerMap = /* @__PURE__ */ new WeakMap();
 var reactiveMap = /* @__PURE__ */ new WeakMap();
-var arrayMethods = ["push", "pop", "shift", "unshift", "splice", "sort", "reverse"];
+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 = signalMap.get(target);
+  let depsMap = triggerMap.get(target);
   if (!depsMap) {
     depsMap = /* @__PURE__ */ new Map();
-    signalMap.set(target, depsMap);
+    triggerMap.set(target, depsMap);
   }
   let dep = depsMap.get(key);
   if (!dep) {
@@ -118,75 +185,63 @@ function track(target, key) {
     depsMap.set(key, dep);
   }
   if (activeEffect) dep.add(activeEffect);
-  let computedDepsMap = computedMap.get(target);
-  if (!computedDepsMap) {
-    computedDepsMap = /* @__PURE__ */ new Map();
-    computedMap.set(target, computedDepsMap);
-  }
-  let computedDeps = computedDepsMap.get(key);
-  if (!computedDeps) {
-    computedDeps = /* @__PURE__ */ new Set();
-    computedDepsMap.set(key, computedDeps);
-  }
-  if (activeComputed) {
-    computedDeps.add(activeComputed);
-  }
 }
 function trigger(target, key) {
-  const depsMap = signalMap.get(target);
+  const depsMap = triggerMap.get(target);
   if (!depsMap) return;
   const dep = depsMap.get(key);
   if (dep) {
-    dep.forEach((effect) => effectDeps.has(effect) && effect());
-  }
-  const computedDepsMap = computedMap.get(target);
-  if (computedDepsMap) {
-    const computeds = computedDepsMap.get(key);
-    if (computeds) {
-      computeds.forEach((computed) => computed.run());
-    }
+    dep.forEach((effect) => {
+      if (hasOwn(effect, "active") && !effect.active) {
+        dep.delete(effect);
+        return;
+      }
+      if (inBatch) {
+        batchQueue.add(effect);
+      } else {
+        effect();
+      }
+    });
   }
 }
 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._value = value;
+    this.__signal = true;
     this._shallow = shallow;
+    this._value = value;
   }
   /**
-   * Get the current value of the Signal and track its usage.
+   * Gets the current value of the Signal.
+   * @returns {T} The current value.
    */
   get value() {
-    track(this, "_sv");
-    this.__triggerObject();
-    return this._value;
-  }
-  /**
-   * Trigger reactivity for non-primitive and non-HTMLElement values.
-   * Recursively applies reactivity to nested objects.
-   */
-  __triggerObject() {
-    if (!isPrimitive(this._value) && !isHTMLElement(this._value) && !this._shallow) {
-      useReactive(this._value);
+    track(this, SignalValueKey);
+    if (isObject2(this._value) && !this._shallow) {
+      return useReactive(this._value);
     }
+    return this._value;
   }
   /**
-   * Set a new value to the Signal and trigger updates if the value has changed.
+   * Sets a new value for the Signal.
+   * @param {T} newValue - The new value to set.
    */
   set value(newValue) {
     if (isSignal(newValue)) {
-      console.warn("Signal cannot be set to another signal, use .peek() instead");
       newValue = newValue.peek();
     }
     if (hasChanged(newValue, this._value)) {
       this._value = newValue;
-      if (!isPrimitive(this._value) && !isHTMLElement(this._value)) {
-        this.__triggerObject();
-      }
-      trigger(this, "_sv");
+      trigger(this, SignalValueKey);
     }
   }
   /**
-   * Peek at the current value of the Signal without tracking it.
+   * Returns the current value without triggering reactivity.
+   * @returns {T} The current value.
    */
   peek() {
     return this._value;
@@ -202,15 +257,16 @@ function shallowSignal(value) {
   return new Signal(value, true);
 }
 function isSignal(value) {
-  return value instanceof Signal;
+  return !!(value && (value == null ? void 0 : value.__signal));
 }
 var Computed = class {
   constructor(fn) {
     this.fn = fn;
-    const prev = activeComputed;
-    activeComputed = this;
+    this.__computed = true;
+    const prev = activeEffect;
+    activeEffect = this.run.bind(this);
     this._value = this.fn();
-    activeComputed = prev;
+    activeEffect = prev;
   }
   /**
    * Get the current computed value without tracking it.
@@ -225,14 +281,14 @@ var Computed = class {
     const newValue = this.fn();
     if (hasChanged(newValue, this._value)) {
       this._value = newValue;
-      trigger(this, "_cv");
+      trigger(this, ComputedValueKey);
     }
   }
   /**
    * Get the current computed value and track its usage.
    */
   get value() {
-    track(this, "_cv");
+    track(this, ComputedValueKey);
     return this._value;
   }
 };
@@ -240,23 +296,46 @@ function useComputed(fn) {
   return new Computed(fn);
 }
 function isComputed(value) {
-  return value instanceof Computed;
+  return !!(value && value.__computed);
+}
+function createScheduler(effect, flush) {
+  if (flush === "sync") {
+    return () => effect();
+  } else if (flush === "pre") {
+    return () => queuePreFlushCb(effect);
+  } else {
+    return () => {
+      nextTick(() => queueJob(effect));
+    };
+  }
 }
-function useEffect(fn) {
+function useEffect(fn, options = {}) {
+  const { flush = "pre", onTrack, onTrigger } = options;
   function effectFn() {
     const prev = activeEffect;
-    activeEffect = effectFn;
+    activeEffect = effectFn.init ? effectFn : effectFn.scheduler;
     fn();
+    onTrigger && onTrigger();
     activeEffect = prev;
   }
-  effectDeps.add(effectFn);
+  const scheduler = createScheduler(effectFn, flush);
+  effectFn.scheduler = scheduler;
+  effectFn.init = true;
+  effectFn.active = true;
+  onTrack && onTrack();
   effectFn();
   return () => {
-    effectDeps.delete(effectFn);
+    effectFn.active = false;
     activeEffect = 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;
@@ -271,7 +350,7 @@ function unSignal(signal, exclude) {
   if (isArray2(signal)) {
     return signal.map((value) => unSignal(value, exclude));
   }
-  if (isObject2(signal)) {
+  if (isPlainObject(signal)) {
     return Object.entries(signal).reduce((acc, [key, value]) => {
       if (isExclude(key, exclude)) {
         acc[key] = value;
@@ -283,33 +362,14 @@ function unSignal(signal, exclude) {
   }
   return signal;
 }
-var REACTIVE_MARKER = Symbol("useReactive");
 function isReactive(obj) {
-  return obj && obj[REACTIVE_MARKER] === true;
-}
-function createArrayProxy(initialValue) {
-  arrayMethods.forEach((method) => {
-    const originalMethod = Array.prototype[method];
-    track(initialValue, "length");
-    Object.defineProperty(initialValue, method, {
-      value(...args) {
-        const result = originalMethod.apply(this, args);
-        if (["push", "pop", "shift", "unshift", "splice", "sort", "reverse"].includes(method)) {
-          trigger(initialValue, "length");
-        }
-        return result;
-      },
-      enumerable: false,
-      writable: true,
-      configurable: true
-    });
-  });
+  return !!(obj && typeof obj === "object" && obj[ReactiveSymbol]);
 }
 function useReactive(initialValue, exclude) {
-  return reactive(initialValue, exclude, false);
+  return reactive(initialValue, false, exclude);
 }
 function shallowReactive(initialValue, exclude) {
-  return reactive(initialValue, exclude, true);
+  return reactive(initialValue, true, exclude);
 }
 function unReactive(target) {
   if (!isObject2(target)) {
@@ -318,40 +378,13 @@ function unReactive(target) {
   if (!isReactive(target)) {
     return target;
   }
-  const unReactiveObj = Array.isArray(target) ? [] : {};
-  for (const key in target) {
-    if (hasOwn(target, key)) {
-      const value = target[key];
-      if (isReactive(value)) {
-        unReactiveObj[key] = unReactive(value);
-      } else if (isSignal(value)) {
-        unReactiveObj[key] = value.peek();
-      } else {
-        unReactiveObj[key] = value;
-      }
-    }
-  }
-  return unReactiveObj;
+  return target[ReactivePeekSymbol];
 }
-function reactive(initialValue, exclude, shallow = false) {
-  if (!isObject2(initialValue)) {
-    return initialValue;
-  }
-  if (isReactive(initialValue)) {
-    return initialValue;
-  }
-  if (reactiveMap.has(initialValue)) {
-    return reactiveMap.get(initialValue);
-  }
-  if (Array.isArray(initialValue)) {
-    createArrayProxy(initialValue);
-  }
-  if (isSet(initialValue) || isMap(initialValue) || isWeakSet(initialValue) || isWeakMap(initialValue)) {
-    return initialValue;
-  }
-  const handler = {
+var basicHandler = (shallow, exclude) => {
+  return {
     get(target, key, receiver) {
-      if (key === REACTIVE_MARKER || startsWith2(key, "_")) return true;
+      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)) {
@@ -381,6 +414,7 @@ function reactive(initialValue, exclude, shallow = false) {
       }
       return obj;
     },
+    // handle  delete
     deleteProperty(target, key) {
       const oldValue = Reflect.get(target, key);
       const result = Reflect.deleteProperty(target, key);
@@ -390,48 +424,386 @@ function reactive(initialValue, exclude, shallow = false) {
       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;
+    };
+  });
+  ["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);
+    };
+  });
+  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;
+    }
+  };
+};
+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 = 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]();
+  }
+};
+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;
+  }
+};
+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);
+  }
   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 (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];
+      });
+    }
+  });
+}
+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);
 }
-function 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 (isArray2(source)) {
-    getter = () => source.map((s) => {
-      if (isSignal(s) || isComputed(s)) return s.value;
-      if (isReactive(s)) return __spreadValues({}, s);
-      if (isFunction2(s)) return s();
-      return warn("Invalid source", s);
-    });
+  } else if (isMultiSource) {
+    getter = () => source.map((s) => resolveSource(s));
   } else if (isFunction2(source)) {
     getter = source;
   } else {
     warn("Invalid source type", source);
-    getter = noop2;
+    return noop2;
   }
-  let oldValue;
+  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 ((options == null ? void 0 : options.deep) || hasChanged(newValue, oldValue)) {
-      cb && cb(newValue, oldValue);
-      oldValue = newValue;
+    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);
-  if (options == null ? void 0 : options.immediate) {
+  const stop = useEffect(effectFn, { flush: "sync" });
+  runCb = true;
+  if (immediate) {
     effectFn();
   }
   return stop;
 }
-var _id = 0;
-var StoreMap = /* @__PURE__ */ new Map();
+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 : {});
@@ -466,8 +838,12 @@ function createOptionsStore(options) {
   for (const key in getters) {
     const getter = getters[key];
     if (getter) {
-      useWatch(useComputed(getter.bind(reactiveState, reactiveState)), (value) => {
-        store[key] = value;
+      Object.defineProperty(store, key, {
+        get() {
+          return useComputed(getter.bind(reactiveState, reactiveState)).value;
+        },
+        enumerable: true,
+        configurable: true
       });
     }
   }
@@ -477,42 +853,79 @@ function createOptionsStore(options) {
       store[key] = action.bind(reactiveState);
     }
   }
-  StoreMap.set(_id, store);
-  ++_id;
   return store;
 }
 function createStore(options) {
   return function() {
-    if (StoreMap.has(_id)) {
-      return StoreMap.get(_id);
-    }
     return createOptionsStore(options);
   };
 }
 
 // ../template/dist/template.dev.esm.js
-var _ComponentNode = class _ComponentNode2 {
-  constructor(template2, props) {
+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 {
+  constructor() {
+    this.hooks = {
+      mounted: /* @__PURE__ */ new Set(),
+      destroy: /* @__PURE__ */ new Set()
+    };
+  }
+  addEventListener() {
+  }
+  removeEventListener() {
+  }
+  addHook(hook, cb) {
+    var _a;
+    (_a = this.hooks[hook]) == null ? void 0 : _a.add(cb);
+  }
+  getContext(context) {
+    return _Hooks2.context[context];
+  }
+  setContext(context, value) {
+    _Hooks2.context[context] = value;
+  }
+  initRef() {
+    _Hooks2.ref = this;
+  }
+  removeRef() {
+    _Hooks2.ref = null;
+  }
+};
+_Hooks.ref = null;
+_Hooks.context = {};
+var Hooks = _Hooks;
+var ComponentNode = class extends Hooks {
+  constructor(template2, props, key) {
+    super();
     this.template = template2;
     this.props = props;
+    this.key = key;
     this.proxyProps = {};
-    this.context = {};
     this.emitter = /* @__PURE__ */ new Set();
     this.mounted = false;
     this.rootNode = null;
-    this.hooks = {
-      mounted: /* @__PURE__ */ new Set(),
-      destroy: /* @__PURE__ */ new Set()
-    };
+    this.context = {};
     this.trackMap = /* @__PURE__ */ new Map();
     this.proxyProps = signalObject(
       props,
-      (key) => startsWith(key, "on") || startsWith(key, "update")
+      (key2) => startsWith(key2, "on") || startsWith(key2, "update")
     );
-  }
-  addEventListener() {
-  }
-  removeEventListener() {
+    this.key = this.key || props.key;
   }
   get firstChild() {
     var _a, _b;
@@ -522,16 +935,6 @@ var _ComponentNode = class _ComponentNode2 {
     var _a, _b;
     return (_b = (_a = this.rootNode) == null ? void 0 : _a.isConnected) != null ? _b : false;
   }
-  addHook(hook, cb) {
-    var _a;
-    (_a = this.hooks[hook]) == null ? void 0 : _a.add(cb);
-  }
-  getContext(context) {
-    return _ComponentNode2.context[context];
-  }
-  setContext(context, value) {
-    _ComponentNode2.context[context] = value;
-  }
   inheritNode(node) {
     this.context = node.context;
     this.hooks = node.hooks;
@@ -550,9 +953,9 @@ var _ComponentNode = class _ComponentNode2 {
     if (this.isConnected) {
       return (_b = (_a = this.rootNode) == null ? void 0 : _a.mount(parent, before)) != null ? _b : [];
     }
-    _ComponentNode2.ref = this;
+    this.initRef();
     this.rootNode = this.template(useReactive(this.proxyProps, ["children"]));
-    _ComponentNode2.ref = null;
+    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());
@@ -582,7 +985,7 @@ var _ComponentNode = class _ComponentNode2 {
     return track2;
   }
   patchProps(props) {
-    var _a, _b, _c, _d, _e;
+    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();
@@ -590,15 +993,11 @@ var _ComponentNode = class _ComponentNode2 {
         const cleanup = addEventListener(this.rootNode.nodes[0], event, listener);
         this.emitter.add(cleanup);
       } else if (key === "ref") {
-        if (isSignal(prop)) {
-          props[key].value = (_b = this.rootNode) == null ? void 0 : _b.nodes[0];
-        } else if (isFunction(prop)) {
-          props[key]((_c = this.rootNode) == null ? void 0 : _c.nodes[0]);
-        }
+        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 = (_e = (_d = this.proxyProps)[key]) != null ? _e : _d[key] = useSignal(prop);
+        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;
@@ -608,10 +1007,7 @@ var _ComponentNode = class _ComponentNode2 {
     this.props = props;
   }
 };
-_ComponentNode.ref = null;
-_ComponentNode.context = {};
-var ComponentNode = _ComponentNode;
-function h(_template, props) {
+function h(_template, props, key) {
   if (isString(_template)) {
     if (isHtmlTagName(_template)) {
       _template = convertToHtmlTag(_template);
@@ -626,15 +1022,17 @@ function h(_template, props) {
     }
     _template = template(_template);
   }
-  return isFunction(_template) ? new ComponentNode(_template, props) : new TemplateNode(_template, props);
+  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) {
-  html = closeHtmlTags(html);
   const template2 = document.createElement("template");
-  template2.innerHTML = html;
+  template2.innerHTML = closeHtmlTags(html);
   return template2;
 }
 function Fragment(props) {
@@ -750,9 +1148,9 @@ function binNode(node, setter) {
     });
   }
 }
-var p = Promise.resolve();
-function nextTick(fn) {
-  return fn ? p.then(fn) : p;
+var p2 = Promise.resolve();
+function nextTick2(fn) {
+  return fn ? p2.then(fn) : p2;
 }
 function addEventListener(node, eventName, handler) {
   node.addEventListener(eventName, handler);
@@ -807,15 +1205,6 @@ function convertToHtmlTag(tagName) {
     return `<${tagName}></${tagName}>`;
   }
 }
-function generateShortId() {
-  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  let result = "";
-  const charactersLength = characters.length;
-  for (let i = 0; i < 8; i++) {
-    result += characters.charAt(Math.floor(Math.random() * charactersLength));
-  }
-  return result;
-}
 function patchChildren(parent, childrenMap, nextChildren, before) {
   const result = /* @__PURE__ */ new Map();
   const children = Array.from(childrenMap.values());
@@ -928,6 +1317,7 @@ var TemplateNode = class _TemplateNode {
     this.provides = {};
     this.trackMap = /* @__PURE__ */ new Map();
     this.parent = null;
+    this.key = this.key || props.key;
   }
   get firstChild() {
     var _a;
@@ -947,7 +1337,6 @@ var TemplateNode = class _TemplateNode {
       this.nodes.forEach((node) => insertChild(parent, node, before));
       return this.nodes;
     }
-    this.key = this.key || generateShortId();
     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_")) {
@@ -1051,11 +1440,7 @@ var TemplateNode = class _TemplateNode {
           });
         }
       } else if (attr === "ref") {
-        if (isSignal(props[attr])) {
-          props[attr].value = node;
-        } else if (isFunction(props[attr])) {
-          props[attr](node);
-        }
+        props[attr].value = node;
       } else if (startsWith(attr, "on")) {
         const eventName = attr.slice(2).toLocaleLowerCase();
         const track2 = this.getNodeTrack(`${key}:${attr}`);
@@ -1115,80 +1500,148 @@ function patchChild(track2, parent, child, before) {
 function onMount(cb) {
   var _a;
   throwIfOutsideComponent("onMounted");
-  (_a = ComponentNode.ref) == null ? void 0 : _a.addHook("mounted", cb);
+  (_a = Hooks.ref) == null ? void 0 : _a.addHook("mounted", cb);
 }
 function onDestroy(cb) {
   var _a;
   throwIfOutsideComponent("onDestroy");
-  (_a = ComponentNode.ref) == null ? void 0 : _a.addHook("destroy", cb);
+  (_a = Hooks.ref) == null ? void 0 : _a.addHook("destroy", cb);
 }
-function throwIfOutsideComponent(hook) {
-  if (!ComponentNode.ref) {
+function throwIfOutsideComponent(hook, key) {
+  if (!Hooks.ref) {
     console.error(
-      `"${hook}" can only be called within the component function body
+      `"${hook}"(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");
-  (_a = ComponentNode.ref) == null ? void 0 : _a.setContext(key, value);
+  throwIfOutsideComponent("useProvide", key);
+  (_a = Hooks.ref) == null ? void 0 : _a.setContext(key, value);
 }
 function useInject(key, defaultValue) {
   var _a;
-  throwIfOutsideComponent("useInject");
-  return ((_a = ComponentNode.ref) == null ? void 0 : _a.getContext(key)) || defaultValue;
+  throwIfOutsideComponent("useInject", key);
+  return ((_a = Hooks.ref) == null ? void 0 : _a.getContext(key)) || defaultValue;
+}
+function useRef() {
+  const ref = shallowSignal(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 convertJsonToAttributes(json) {
-  return Object.entries(json).map(([key, value]) => `${key}=${JSON.stringify(escape(String(value)))}`).join(" ");
+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 renderTemplate(template2, props) {
-  if (isFunction(template2)) {
-    return template2(props);
+var ServerNode = class _ServerNode extends Hooks {
+  constructor(template2, props = {}, key) {
+    super();
+    this.template = template2;
+    this.props = props;
+    this.key = key;
+    this.childNodesMap = {};
+    this.processedTemplates = {};
   }
-  const templateCollection = Array.isArray(template2) ? template2.reduce((acc, tmpl, index) => {
-    acc[index + 1] = { template: tmpl };
-    return acc;
-  }, {}) : template2;
-  const childNodesMap = {};
-  const processedTemplates = {};
-  if (isObject(templateCollection)) {
-    for (const [key, tmpl] of Object.entries(templateCollection)) {
-      const prop = props[key];
-      if (prop) {
-        for (const propKey in prop) {
-          if (startsWith(propKey, "on") && isFunction(prop[propKey])) {
-            delete prop[propKey];
-          }
-        }
+  /**
+   * 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) {
-          for (const [child, idx] of prop.children) {
-            if (!childNodesMap[idx]) childNodesMap[idx] = [];
-            childNodesMap[idx].push(child);
-          }
-          delete 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);
+            }
+          });
         }
-      }
-      processedTemplates[key] = { template: tmpl.template, props: prop };
+        this.processedTemplates[key] = {
+          template: tmpl.template,
+          props: prop
+        };
+      });
     }
   }
-  return Object.entries(processedTemplates).map(([key, { template: tmpl, props: prop }]) => {
-    let renderedString = tmpl;
-    if (prop) {
-      renderedString += ` ${convertJsonToAttributes(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 (childNodesMap[key]) {
-      renderedString += childNodesMap[key].map((child) => renderTemplate(child, prop)).join("");
+    if (this.template instanceof _ServerNode) {
+      return this.template.mount();
     }
-    return renderedString;
-  }).join("");
+    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 renderTemplate(component, props);
-}
-function renderSSG(component, root, props = {}) {
-  root.innerHTML = renderTemplate(component, props);
+  return ssg(component, props).mount();
 }
 
 // src/index.ts
@@ -1196,19 +1649,19 @@ if (globalThis) {
   globalThis.__essor_version__ = essor_version;
 }
 /**
-* @estjs/shared v0.0.11
+* @estjs/shared v0.0.12
 * (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
 * @license MIT
 **/
 /**
-* @estjs/signal v0.0.11
+* @estjs/signal v0.0.12
 * (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
 * @license MIT
 **/
 /**
-* @estjs/template v0.0.11
+* @estjs/template v0.0.12
 * (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
 * @license MIT
 **/
 
-export { ComponentNode, Fragment, TemplateNode, createStore, essor_version, h, isComputed, isJsxElement, isReactive, isSignal, nextTick, onDestroy, onMount, renderSSG, renderTemplate, renderToString, shallowReactive, shallowSignal, signalObject, template, unReactive, unSignal, useComputed, useEffect, useInject, useProvide, useReactive, useSignal, useWatch };
+export { ComponentNode, Fragment, TemplateNode, clearReactive, createStore, essor_version, h, isComponent, isComputed, isJsxElement, isReactive, isSignal, nextTick2 as nextTick, onDestroy, onMount, renderToString, shallowReactive, shallowSignal, signalObject, ssg, template, unReactive, unSignal, useBatch, useComputed, useEffect, useInject, useProvide, useReactive, useRef, useSignal, useWatch };