@feng3d/reactivity 0.0.1 → 1.0.2

package/dist/index.umd.cjs

@@ -2,102 +2,1062 @@
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.feng3d = {}));
 })(this, function(exports2) {
   "use strict";
-  function ref(value) {
-    return new ValueReactiveNode(value);
-  }
-  function computed(func) {
-    return new FunctionReactiveNode(func);
-  }
-  let activeReactiveNode;
-  class ReactiveNode {
+  class Reactivity {
     constructor() {
-      this.parents = /* @__PURE__ */ new Set();
-      this.dirty = true;
+      this._parents = /* @__PURE__ */ new Map();
     }
     /**
-     * 当前节点值。
+     * 获取当前节点值。
+     *
+     * 取值时将会建立与父节点的依赖关系。
      */
     get value() {
-      this.run();
+      this.track();
       return this._value;
     }
     /**
-     * 执行当前节点。
+     * 捕捉。
+     *
+     * 建立与父节点的依赖关系。
      */
-    run() {
-      const parentReactiveNode = activeReactiveNode;
-      activeReactiveNode = this;
-      let node = this.invalidChildren;
-      while (node) {
-        if (node.value !== node.node.value) {
-          this.markDirty();
-        }
-        node = node.next;
+    track() {
+      if (!_shouldTrack)
+        return;
+      const parent = Reactivity.activeReactivity;
+      if (parent) {
+        this._parents.set(parent, parent._version);
       }
-      this.invalidChildren = void 0;
-      if (this.dirty) {
-        this._value = this._runSelf();
-        if (parentReactiveNode) {
-          this.parents.add(parentReactiveNode);
-        }
-        this.dirty = false;
+    }
+    /**
+     * 触发。
+     *
+     * 冒泡到所有父节点，设置失效子节点字典。
+     */
+    trigger() {
+      this._parents.forEach((version, parent) => {
+        if (parent._version !== version)
+          return;
+        parent.trigger();
+        parent._children.set(this, this._value);
+      });
+      this._parents.clear();
+    }
+  }
+  function forceTrack(fn) {
+    const preShouldTrack = _shouldTrack;
+    _shouldTrack = true;
+    const result = fn();
+    _shouldTrack = preShouldTrack;
+    return result;
+  }
+  function noTrack(fn) {
+    const preShouldTrack = _shouldTrack;
+    _shouldTrack = false;
+    const result = fn();
+    _shouldTrack = preShouldTrack;
+    return result;
+  }
+  let _shouldTrack = true;
+  function batch(dep, isRunning) {
+    if (isRunning) {
+      _isRunedDeps.push(dep);
+    } else {
+      _needEffectDeps.push(dep);
+    }
+  }
+  function batchRun(fn) {
+    _batchDepth++;
+    const result = fn();
+    if (--_batchDepth > 0) {
+      return;
+    }
+    if (_isRunedDeps.length > 0) {
+      _isRunedDeps.forEach((dep) => {
+        dep._children.forEach((version, node) => {
+          node._parents.set(dep, dep._version);
+        });
+        dep._children.clear();
+      });
+      _isRunedDeps.length = 0;
+    }
+    if (_needEffectDeps.length > 0) {
+      _needEffectDeps.forEach((dep) => {
+        const pre = Reactivity.activeReactivity;
+        Reactivity.activeReactivity = null;
+        dep.runIfDirty();
+        Reactivity.activeReactivity = pre;
+      });
+      _needEffectDeps.length = 0;
+    }
+    return result;
+  }
+  let _batchDepth = 0;
+  const _needEffectDeps = [];
+  const _isRunedDeps = [];
+  function computed(func) {
+    return new ComputedReactivity(func);
+  }
+  class ComputedReactivity extends Reactivity {
+    /**
+     * 创建计算依赖。
+     * @param func 检测的可能包含响应式的函数。
+     */
+    constructor(func) {
+      super();
+      this.__v_isRef = true;
+      this._children = /* @__PURE__ */ new Map();
+      this._isDirty = true;
+      this._version = -1;
+      this._func = func;
+    }
+    /**
+     * 捕捉。
+     *
+     * 建立与父节点的依赖关系。
+     */
+    track() {
+      this.runIfDirty();
+      super.track();
+    }
+    /**
+     * 触发。
+     *
+     * 冒泡到所有父节点，设置失效子节点字典。
+     *
+     * 把触发节点添加到失效子节点字典队列中。
+     */
+    trigger() {
+      if (Reactivity.activeReactivity === this) {
+        batch(this, Reactivity.activeReactivity === this);
       }
-      activeReactiveNode = parentReactiveNode;
+      super.trigger();
     }
     /**
-     * 标记为脏，触发更新。
+     * 执行当前节点。
      */
-    markDirty() {
-      if (this.dirty) {
-        return;
+    run() {
+      forceTrack(() => {
+        const parentReactiveNode = Reactivity.activeReactivity;
+        Reactivity.activeReactivity = this;
+        this._version++;
+        this._value = this._func(this._value);
+        Reactivity.activeReactivity = parentReactiveNode;
+      });
+    }
+    /**
+     * 检查当前节点是否脏。
+     *
+     * 如果脏，则执行计算。
+     */
+    runIfDirty() {
+      this._isDirty = this._isDirty || this.isChildrenChanged();
+      if (this._isDirty) {
+        this._isDirty = false;
+        this.run();
       }
-      this.dirty = true;
-      this.invalidate();
-      this.parents.clear();
     }
-    invalidate() {
-      if (this.parents.size > 0) {
-        this.parents.forEach((parent) => {
-          const node = { node: this, value: this._value, next: parent.invalidChildren };
-          parent.invalidChildren = node;
-          parent.invalidate();
+    /**
+     * 判断子节点是否发生变化。
+     */
+    isChildrenChanged() {
+      if (this._children.size === 0)
+        return false;
+      let isChanged = false;
+      const preReactiveNode = Reactivity.activeReactivity;
+      Reactivity.activeReactivity = null;
+      this._children.forEach((value, node) => {
+        if (isChanged)
+          return;
+        if (node.value !== value) {
+          isChanged = true;
+          return;
+        }
+      });
+      Reactivity.activeReactivity = preReactiveNode;
+      if (!isChanged) {
+        this._children.forEach((version, node) => {
+          node._parents.set(this, this._version);
         });
       }
+      this._children.clear();
+      return isChanged;
+    }
+  }
+  function effect(fn) {
+    return new EffectReactivity(fn);
+  }
+  const _EffectReactivity = class _EffectReactivity2 extends ComputedReactivity {
+    constructor(func) {
+      super(func);
+      this._isEnable = true;
+      this.runIfDirty();
+    }
+    pause() {
+      this._isEnable = false;
+    }
+    resume() {
+      if (this._isEnable)
+        return;
+      this._isEnable = true;
+      if (_EffectReactivity2.pausedQueueEffects.has(this)) {
+        _EffectReactivity2.pausedQueueEffects.delete(this);
+        this.trigger();
+      }
+    }
+    trigger() {
+      batchRun(() => {
+        super.trigger();
+        if (this._isEnable) {
+          batch(this, Reactivity.activeReactivity === this);
+        } else {
+          _EffectReactivity2.pausedQueueEffects.add(this);
+        }
+      });
     }
     /**
-     * 执行当前节点自身。
+     * 执行当前节点。
+     *
+     * 当暂停时将会直接执行被包装的函数。
      */
-    _runSelf() {
-      return this._value;
+    run() {
+      if (this._isEnable) {
+        super.run();
+      } else {
+        this._func(this._value);
+      }
+    }
+  };
+  _EffectReactivity.pausedQueueEffects = /* @__PURE__ */ new WeakSet();
+  let EffectReactivity = _EffectReactivity;
+  var ReactiveFlags = /* @__PURE__ */ ((ReactiveFlags2) => {
+    ReactiveFlags2["IS_REACTIVE"] = "__v_isReactive";
+    ReactiveFlags2["RAW"] = "__v_raw";
+    ReactiveFlags2["IS_REF"] = "__v_isRef";
+    return ReactiveFlags2;
+  })(ReactiveFlags || {});
+  var TargetType = /* @__PURE__ */ ((TargetType2) => {
+    TargetType2[TargetType2["INVALID"] = 0] = "INVALID";
+    TargetType2[TargetType2["COMMON"] = 1] = "COMMON";
+    TargetType2[TargetType2["COLLECTION"] = 2] = "COLLECTION";
+    return TargetType2;
+  })(TargetType || {});
+  var TrackOpTypes = /* @__PURE__ */ ((TrackOpTypes2) => {
+    TrackOpTypes2["GET"] = "get";
+    TrackOpTypes2["HAS"] = "has";
+    TrackOpTypes2["ITERATE"] = "iterate";
+    return TrackOpTypes2;
+  })(TrackOpTypes || {});
+  var TriggerOpTypes = /* @__PURE__ */ ((TriggerOpTypes2) => {
+    TriggerOpTypes2["SET"] = "set";
+    TriggerOpTypes2["ADD"] = "add";
+    TriggerOpTypes2["DELETE"] = "delete";
+    TriggerOpTypes2["CLEAR"] = "clear";
+    return TriggerOpTypes2;
+  })(TriggerOpTypes || {});
+  const ITERATE_KEY = Symbol("");
+  const MAP_KEY_ITERATE_KEY = Symbol("");
+  const ARRAY_ITERATE_KEY = Symbol("");
+  globalThis.__DEV__ ?? (globalThis.__DEV__ = true);
+  const isObject = (val) => val !== null && typeof val === "object";
+  const isArray = Array.isArray;
+  const isSymbol = (val) => typeof val === "symbol";
+  const isString = (val) => typeof val === "string";
+  const isIntegerKey = (key) => isString(key) && key !== "NaN" && key[0] !== "-" && `${parseInt(key, 10)}` === key;
+  const isMap = (val) => toTypeString(val) === "[object Map]";
+  const hasOwn = (val, key) => Object.prototype.hasOwnProperty.call(val, key);
+  const hasChanged = (value, oldValue) => !Object.is(value, oldValue);
+  function targetTypeMap(rawType) {
+    switch (rawType) {
+      case "Object":
+      case "Array":
+        return TargetType.COMMON;
+      case "Map":
+      case "Set":
+      case "WeakMap":
+      case "WeakSet":
+        return TargetType.COLLECTION;
+      default:
+        return TargetType.COMMON;
     }
   }
-  class FunctionReactiveNode extends ReactiveNode {
-    constructor(func) {
-      super();
-      this.func = func;
+  function getTargetType(value) {
+    if (!Object.isExtensible(value))
+      return TargetType.INVALID;
+    return targetTypeMap(toRawType(value));
+  }
+  const toTypeString = (value) => Object.prototype.toString.call(value);
+  const toRawType = (value) => (
+    // 从类似 "[object RawType]" 的字符串中提取 "RawType"
+    toTypeString(value).slice(8, -1)
+  );
+  function toRaw(observed) {
+    const raw = observed && observed[ReactiveFlags.RAW];
+    return raw ? toRaw(raw) : observed;
+  }
+  // @__NO_SIDE_EFFECTS__
+  function makeMap(str) {
+    const map = /* @__PURE__ */ Object.create(null);
+    for (const key of str.split(","))
+      map[key] = 1;
+    return (val) => val in map;
+  }
+  function property(target, key) {
+    let depsMap = PropertyReactivity._targetMap.get(target);
+    if (!depsMap) {
+      depsMap = /* @__PURE__ */ new Map();
+      PropertyReactivity._targetMap.set(target, depsMap);
     }
-    _runSelf() {
-      return this.func();
+    let dep = depsMap.get(key);
+    if (!dep) {
+      dep = new PropertyReactivity(target, key);
+      depsMap.set(key, dep);
     }
+    return dep;
   }
-  class ValueReactiveNode extends ReactiveNode {
+  class PropertyReactivity extends Reactivity {
+    constructor(target, key) {
+      super();
+      this._target = target;
+      this._key = key;
+      if (target instanceof Map || target instanceof WeakMap) {
+        this._value = target.get(key);
+      } else if (target instanceof Set || target instanceof WeakSet) {
+        this._value = target.has(key);
+      } else {
+        this._value = target[key];
+      }
+    }
+    /**
+     * 获取当前节点值。
+     *
+     * 取值时将会建立与父节点的依赖关系。
+     */
     get value() {
-      this.run();
+      this.track();
       return this._value;
     }
     set value(v) {
-      if (this._value === v)
+      if (this._key === "length") {
+        v = this._target["length"];
+      } else if (isSymbol(this._key)) {
+        v = ~~this._value + 1;
+      }
+      if (v === this._value)
         return;
-      this.markDirty();
+      this.trigger();
       this._value = v;
     }
+    triggerIfChanged() {
+    }
+    /**
+     * 追踪属性的变化。
+     *
+     * 当属性被访问时，将会追踪属性的变化。
+     *
+     * @param target 目标对象。
+     * @param key  属性名。
+     * @returns
+     */
+    static track(target, type, key) {
+      const dep = property(target, key);
+      dep.track();
+    }
+    /**
+     * 触发属性的变化。
+     *
+     * @param target 目标对象。
+     * @param type    操作类型。
+     * @param key 属性名。
+     * @param newValue 新值。
+     * @param oldValue 旧值。
+     * @returns
+     */
+    static trigger(target, type, key, newValue, oldValue) {
+      const depsMap = this._targetMap.get(target);
+      if (!depsMap)
+        return;
+      const run = (dep) => {
+        if (dep) {
+          dep.value = newValue;
+        }
+      };
+      batchRun(() => {
+        if (type === TriggerOpTypes.CLEAR) {
+          depsMap.forEach(run);
+        } else {
+          const targetIsArray = isArray(target);
+          const isArrayIndex = targetIsArray && isIntegerKey(key);
+          if (targetIsArray && key === "length") {
+            const newLength = Number(newValue);
+            depsMap.forEach((dep, key2) => {
+              if (key2 === "length" || key2 === ARRAY_ITERATE_KEY || !isSymbol(key2) && key2 >= newLength) {
+                run(dep);
+              }
+            });
+          } else {
+            if (key !== void 0 || depsMap.has(void 0)) {
+              run(depsMap.get(key));
+            }
+            if (isArrayIndex) {
+              run(depsMap.get(ARRAY_ITERATE_KEY));
+            }
+            switch (type) {
+              case TriggerOpTypes.ADD:
+                if (!targetIsArray) {
+                  run(depsMap.get(ITERATE_KEY));
+                  if (isMap(target)) {
+                    run(depsMap.get(MAP_KEY_ITERATE_KEY));
+                  }
+                } else if (isArrayIndex) {
+                  run(depsMap.get("length"));
+                }
+                break;
+              case TriggerOpTypes.DELETE:
+                if (!targetIsArray) {
+                  run(depsMap.get(ITERATE_KEY));
+                  if (isMap(target)) {
+                    run(depsMap.get(MAP_KEY_ITERATE_KEY));
+                  }
+                }
+                break;
+              case TriggerOpTypes.SET:
+                if (isMap(target)) {
+                  run(depsMap.get(ITERATE_KEY));
+                }
+                break;
+            }
+          }
+        }
+      });
+    }
+  }
+  PropertyReactivity._targetMap = /* @__PURE__ */ new WeakMap();
+  const arrayInstrumentations = {
+    __proto__: null,
+    /**
+     * 返回一个迭代器，用于遍历数组的响应式值
+     */
+    [Symbol.iterator]() {
+      return iterator(this, Symbol.iterator, toReactive);
+    },
+    /**
+     * 连接数组并返回新数组，处理响应式数组
+     */
+    concat(...args) {
+      return reactiveReadArray(this).concat(
+        ...args.map((x) => isArray(x) ? reactiveReadArray(x) : x)
+      );
+    },
+    /**
+     * 返回一个迭代器，用于遍历数组的键值对，并将值转换为响应式
+     */
+    entries() {
+      return iterator(this, "entries", (value) => {
+        value[1] = toReactive(value[1]);
+        return value;
+      });
+    },
+    /**
+     * 测试数组中的所有元素是否都通过了指定函数的测试
+     */
+    every(fn, thisArg) {
+      return apply(this, "every", fn, thisArg, void 0, arguments);
+    },
+    /**
+     * 创建一个新数组，包含通过指定函数测试的所有元素
+     */
+    filter(fn, thisArg) {
+      return apply(this, "filter", fn, thisArg, (v) => v.map(toReactive), arguments);
+    },
+    /**
+     * 返回数组中满足指定测试函数的第一个元素
+     */
+    find(fn, thisArg) {
+      return apply(this, "find", fn, thisArg, toReactive, arguments);
+    },
+    /**
+     * 返回数组中满足指定测试函数的第一个元素的索引
+     */
+    findIndex(fn, thisArg) {
+      return apply(this, "findIndex", fn, thisArg, void 0, arguments);
+    },
+    /**
+     * 返回数组中满足指定测试函数的最后一个元素
+     */
+    findLast(fn, thisArg) {
+      return apply(this, "findLast", fn, thisArg, toReactive, arguments);
+    },
+    /**
+     * 返回数组中满足指定测试函数的最后一个元素的索引
+     */
+    findLastIndex(fn, thisArg) {
+      return apply(this, "findLastIndex", fn, thisArg, void 0, arguments);
+    },
+    // flat, flatMap could benefit from ARRAY_ITERATE but are not straight-forward to implement
+    /**
+     * 对数组中的每个元素执行指定函数
+     */
+    forEach(fn, thisArg) {
+      return apply(this, "forEach", fn, thisArg, void 0, arguments);
+    },
+    /**
+     * 判断数组是否包含指定元素，处理响应式值
+     */
+    includes(...args) {
+      return searchProxy(this, "includes", args);
+    },
+    /**
+     * 返回数组中指定元素第一次出现的索引，处理响应式值
+     */
+    indexOf(...args) {
+      return searchProxy(this, "indexOf", args);
+    },
+    /**
+     * 将数组的所有元素连接成一个字符串
+     */
+    join(separator) {
+      return reactiveReadArray(this).join(separator);
+    },
+    // keys() iterator only reads `length`, no optimisation required
+    /**
+     * 返回数组中指定元素最后一次出现的索引，处理响应式值
+     */
+    lastIndexOf(...args) {
+      return searchProxy(this, "lastIndexOf", args);
+    },
+    /**
+     * 创建一个新数组，包含对原数组每个元素调用指定函数的结果
+     */
+    map(fn, thisArg) {
+      return apply(this, "map", fn, thisArg, void 0, arguments);
+    },
+    /**
+     * 移除数组的最后一个元素并返回该元素，避免跟踪长度变化
+     */
+    pop() {
+      return noTracking(this, "pop");
+    },
+    /**
+     * 向数组末尾添加一个或多个元素，并返回新的长度，避免跟踪长度变化
+     */
+    push(...args) {
+      return noTracking(this, "push", args);
+    },
+    /**
+     * 对数组中的每个元素执行累加器函数，并返回最终结果
+     */
+    reduce(fn, ...args) {
+      return reduce(this, "reduce", fn, args);
+    },
+    /**
+     * 从右到左对数组中的每个元素执行累加器函数，并返回最终结果
+     */
+    reduceRight(fn, ...args) {
+      return reduce(this, "reduceRight", fn, args);
+    },
+    /**
+     * 移除数组的第一个元素并返回该元素，避免跟踪长度变化
+     */
+    shift() {
+      return noTracking(this, "shift");
+    },
+    // slice could use ARRAY_ITERATE but also seems to beg for range tracking
+    /**
+     * 测试数组中的某些元素是否通过了指定函数的测试
+     */
+    some(fn, thisArg) {
+      return apply(this, "some", fn, thisArg, void 0, arguments);
+    },
+    /**
+     * 通过删除或替换现有元素或添加新元素来修改数组，避免跟踪长度变化
+     */
+    splice(...args) {
+      return noTracking(this, "splice", args);
+    },
+    /**
+     * 返回一个新数组，包含原数组的反转副本
+     */
+    toReversed() {
+      return reactiveReadArray(this).toReversed();
+    },
+    /**
+     * 返回一个新数组，包含原数组的排序副本
+     */
+    toSorted(comparer) {
+      return reactiveReadArray(this).toSorted(comparer);
+    },
+    /**
+     * 返回一个新数组，包含原数组的切片副本
+     */
+    toSpliced(...args) {
+      return reactiveReadArray(this).toSpliced(...args);
+    },
+    /**
+     * 向数组开头添加一个或多个元素，并返回新的长度，避免跟踪长度变化
+     */
+    unshift(...args) {
+      return noTracking(this, "unshift", args);
+    },
+    /**
+     * 返回一个迭代器，用于遍历数组的响应式值
+     */
+    values() {
+      return iterator(this, "values", toReactive);
+    }
+  };
+  function iterator(self2, method, wrapValue) {
+    const arr = shallowReadArray(self2);
+    const iter = arr[method]();
+    if (arr !== self2) {
+      iter._next = iter.next;
+      iter.next = () => {
+        const result = iter._next();
+        if (result.value) {
+          result.value = wrapValue(result.value);
+        }
+        return result;
+      };
+    }
+    return iter;
+  }
+  function shallowReadArray(arr) {
+    PropertyReactivity.track(arr = toRaw(arr), TrackOpTypes.ITERATE, ARRAY_ITERATE_KEY);
+    return arr;
+  }
+  function reactiveReadArray(array) {
+    const raw = toRaw(array);
+    if (raw === array)
+      return raw;
+    PropertyReactivity.track(raw, TrackOpTypes.ITERATE, ARRAY_ITERATE_KEY);
+    return raw.map(toReactive);
+  }
+  function apply(self2, method, fn, thisArg, wrappedRetFn, args) {
+    const arr = shallowReadArray(self2);
+    const needsWrap = arr !== self2;
+    const methodFn = arr[method];
+    if (methodFn !== Array.prototype[method]) {
+      const result2 = methodFn.apply(self2, args);
+      return needsWrap ? toReactive(result2) : result2;
+    }
+    let wrappedFn = fn;
+    if (arr !== self2) {
+      if (needsWrap) {
+        wrappedFn = function(item, index) {
+          return fn.call(this, toReactive(item), index, self2);
+        };
+      } else if (fn.length > 2) {
+        wrappedFn = function(item, index) {
+          return fn.call(this, item, index, self2);
+        };
+      }
+    }
+    const result = methodFn.call(arr, wrappedFn, thisArg);
+    return needsWrap && wrappedRetFn ? wrappedRetFn(result) : result;
+  }
+  function reduce(self2, method, fn, args) {
+    const arr = shallowReadArray(self2);
+    let wrappedFn = fn;
+    if (arr !== self2) {
+      wrappedFn = function(acc, item, index) {
+        return fn.call(this, acc, toReactive(item), index, self2);
+      };
+    }
+    return arr[method](wrappedFn, ...args);
+  }
+  function searchProxy(self2, method, args) {
+    const arr = toRaw(self2);
+    PropertyReactivity.track(arr, TrackOpTypes.ITERATE, ARRAY_ITERATE_KEY);
+    const res = arr[method](...args);
+    if ((res === -1 || res === false) && isProxy(args[0])) {
+      args[0] = toRaw(args[0]);
+      return arr[method](...args);
+    }
+    return res;
+  }
+  function noTracking(self2, method, args = []) {
+    const res = batchRun(
+      () => noTrack(
+        () => toRaw(self2)[method].apply(self2, args)
+      )
+    );
+    return res;
+  }
+  var _a;
+  function ref(value) {
+    if (isRef(value)) {
+      return value;
+    }
+    return new RefReactivity(value);
+  }
+  function isRef(r) {
+    return r ? r[ReactiveFlags.IS_REF] === true : false;
+  }
+  class RefReactivity extends Reactivity {
     constructor(value) {
       super();
-      this._value = value;
+      this[_a] = true;
+      this._rawValue = toRaw(value);
+      this._value = toReactive(value);
+    }
+    get value() {
+      this.track();
+      return this._value;
+    }
+    set value(v) {
+      const oldValue = this._rawValue;
+      const newValue = toRaw(v);
+      if (!hasChanged(oldValue, newValue))
+        return;
+      batchRun(() => {
+        this.trigger();
+        this._rawValue = newValue;
+        this._value = toReactive(newValue);
+      });
+    }
+  }
+  _a = ReactiveFlags.IS_REF;
+  class BaseReactiveHandler {
+    /**
+     * 获取对象的属性值。
+     *
+     * @param target 对象本身
+     * @param key 属性名
+     * @param receiver 代理对象
+     * @returns
+     */
+    get(target, key, receiver) {
+      if (key === ReactiveFlags.IS_REACTIVE) {
+        return true;
+      } else if (key === ReactiveFlags.RAW) {
+        if (receiver === reactiveMap.get(target) || Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) {
+          return target;
+        }
+        return;
+      }
+      const targetIsArray = isArray(target);
+      let fn;
+      if (targetIsArray && (fn = arrayInstrumentations[key])) {
+        return fn;
+      }
+      if (key === "hasOwnProperty") {
+        return hasOwnProperty;
+      }
+      const res = Reflect.get(
+        target,
+        key,
+        isRef(target) ? target : receiver
+      );
+      if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
+        return res;
+      }
+      PropertyReactivity.track(target, TrackOpTypes.GET, key);
+      if (isRef(res)) {
+        return targetIsArray && isIntegerKey(key) ? res : res.value;
+      }
+      if (isObject(res)) {
+        return reactive(res);
+      }
+      return res;
+    }
+  }
+  class MutableReactiveHandler extends BaseReactiveHandler {
+    /**
+     * 设置对象的属性值。
+     * @param target 被代理的对象。
+     * @param key 属性名。
+     * @param value 新值。
+     * @param receiver 代理对象。
+     * @returns 设置是否成功。
+     */
+    set(target, key, value, receiver) {
+      let oldValue = target[key];
+      oldValue = toRaw(oldValue);
+      value = toRaw(value);
+      if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
+        oldValue.value = value;
+        return true;
+      }
+      const hadKey = isArray(target) && isIntegerKey(key) ? Number(key) < target.length : hasOwn(target, key);
+      const result = Reflect.set(
+        target,
+        key,
+        value,
+        isRef(target) ? target : receiver
+      );
+      if (target === toRaw(receiver)) {
+        if (!hadKey) {
+          PropertyReactivity.trigger(target, TriggerOpTypes.ADD, key, value);
+        } else if (hasChanged(value, oldValue)) {
+          PropertyReactivity.trigger(target, TriggerOpTypes.SET, key, value, oldValue);
+        }
+      }
+      return result;
+    }
+    /**
+     * 删除对象的属性。
+     *
+     * @param target 被代理的对象。
+     * @param key 属性名。
+     * @returns 删除是否成功。
+     */
+    deleteProperty(target, key) {
+      const hadKey = hasOwn(target, key);
+      const oldValue = target[key];
+      const result = Reflect.deleteProperty(target, key);
+      if (result && hadKey) {
+        PropertyReactivity.trigger(target, TriggerOpTypes.DELETE, key, void 0, oldValue);
+      }
+      return result;
+    }
+    has(target, key) {
+      const result = Reflect.has(target, key);
+      if (!isSymbol(key) || !builtInSymbols.has(key)) {
+        PropertyReactivity.track(target, TrackOpTypes.HAS, key);
+      }
+      return result;
+    }
+    ownKeys(target) {
+      PropertyReactivity.track(
+        target,
+        TrackOpTypes.ITERATE,
+        isArray(target) ? "length" : ITERATE_KEY
+      );
+      return Reflect.ownKeys(target);
+    }
+  }
+  const mutableHandlers = new MutableReactiveHandler();
+  function hasOwnProperty(key) {
+    if (!isSymbol(key))
+      key = String(key);
+    const obj = toRaw(this);
+    PropertyReactivity.track(obj, TrackOpTypes.HAS, key);
+    return obj.hasOwnProperty(key);
+  }
+  const builtInSymbols = new Set(
+    /* @__PURE__ */ Object.getOwnPropertyNames(Symbol).filter((key) => key !== "arguments" && key !== "caller").map((key) => Symbol[key]).filter(isSymbol)
+  );
+  const isNonTrackableKeys = /* @__PURE__ */ makeMap(`__proto__,__v_isRef,__isVue`);
+  const mutableCollectionHandlers = {
+    get: createInstrumentationGetter()
+  };
+  function createInstrumentationGetter() {
+    const instrumentations = createInstrumentations();
+    return (target, key, receiver) => {
+      if (key === ReactiveFlags.IS_REACTIVE) {
+        return true;
+      } else if (key === ReactiveFlags.RAW) {
+        return target;
+      }
+      return Reflect.get(
+        hasOwn(instrumentations, key) && key in target ? instrumentations : target,
+        key,
+        receiver
+      );
+    };
+  }
+  function createInstrumentations() {
+    const instrumentations = {
+      get(key) {
+        const target = this[ReactiveFlags.RAW];
+        const rawTarget = toRaw(target);
+        const rawKey = toRaw(key);
+        if (hasChanged(key, rawKey)) {
+          PropertyReactivity.track(rawTarget, TrackOpTypes.GET, key);
+        }
+        PropertyReactivity.track(rawTarget, TrackOpTypes.GET, rawKey);
+        const { has } = getProto(rawTarget);
+        const wrap = toReactive;
+        if (has.call(rawTarget, key)) {
+          return wrap(target.get(key));
+        } else if (has.call(rawTarget, rawKey)) {
+          return wrap(target.get(rawKey));
+        } else if (target !== rawTarget) {
+          target.get(key);
+        }
+      },
+      get size() {
+        const target = this[ReactiveFlags.RAW];
+        PropertyReactivity.track(toRaw(target), TrackOpTypes.ITERATE, ITERATE_KEY);
+        return Reflect.get(target, "size", target);
+      },
+      has(key) {
+        const target = this[ReactiveFlags.RAW];
+        const rawTarget = toRaw(target);
+        const rawKey = toRaw(key);
+        if (hasChanged(key, rawKey)) {
+          PropertyReactivity.track(rawTarget, TrackOpTypes.HAS, key);
+        }
+        PropertyReactivity.track(rawTarget, TrackOpTypes.HAS, rawKey);
+        return key === rawKey ? target.has(key) : target.has(key) || target.has(rawKey);
+      },
+      forEach(callback, thisArg) {
+        const observed = this;
+        const target = observed[ReactiveFlags.RAW];
+        const rawTarget = toRaw(target);
+        const wrap = toReactive;
+        PropertyReactivity.track(rawTarget, TrackOpTypes.ITERATE, ITERATE_KEY);
+        return target.forEach(
+          (value, key) => (
+            // important: make sure the callback is
+            // 1. invoked with the reactive map as `this` and 3rd arg
+            // 2. the value received should be a corresponding reactive/readonly.
+            callback.call(thisArg, wrap(value), wrap(key), observed)
+          )
+        );
+      },
+      add(value) {
+        value = toRaw(value);
+        const target = toRaw(this);
+        const proto = getProto(target);
+        const hadKey = proto.has.call(target, value);
+        if (!hadKey) {
+          target.add(value);
+          PropertyReactivity.trigger(target, TriggerOpTypes.ADD, value, value);
+        }
+        return this;
+      },
+      set(key, value) {
+        value = toRaw(value);
+        const target = toRaw(this);
+        const { has, get } = getProto(target);
+        let hadKey = has.call(target, key);
+        if (!hadKey) {
+          key = toRaw(key);
+          hadKey = has.call(target, key);
+        }
+        const oldValue = get.call(target, key);
+        target.set(key, value);
+        if (!hadKey) {
+          PropertyReactivity.trigger(target, TriggerOpTypes.ADD, key, value);
+        } else if (hasChanged(value, oldValue)) {
+          PropertyReactivity.trigger(target, TriggerOpTypes.SET, key, value, oldValue);
+        }
+        return this;
+      },
+      delete(key) {
+        const target = toRaw(this);
+        const { has, get } = getProto(target);
+        let hadKey = has.call(target, key);
+        if (!hadKey) {
+          key = toRaw(key);
+          hadKey = has.call(target, key);
+        }
+        const oldValue = get ? get.call(target, key) : void 0;
+        const result = target.delete(key);
+        if (hadKey) {
+          PropertyReactivity.trigger(target, TriggerOpTypes.DELETE, key, void 0, oldValue);
+        }
+        return result;
+      },
+      clear() {
+        const target = toRaw(this);
+        const hadItems = target.size !== 0;
+        const oldTarget = void 0;
+        const result = target.clear();
+        if (hadItems) {
+          PropertyReactivity.trigger(
+            target,
+            TriggerOpTypes.CLEAR,
+            void 0,
+            void 0,
+            oldTarget
+          );
+        }
+        return result;
+      }
+    };
+    const iteratorMethods = [
+      "keys",
+      "values",
+      "entries",
+      Symbol.iterator
+    ];
+    iteratorMethods.forEach((method) => {
+      instrumentations[method] = createIterableMethod(method);
+    });
+    return instrumentations;
+  }
+  function createIterableMethod(method) {
+    return function(...args) {
+      const target = this[ReactiveFlags.RAW];
+      const rawTarget = toRaw(target);
+      const targetIsMap = isMap(rawTarget);
+      const isPair = method === "entries" || method === Symbol.iterator && targetIsMap;
+      const isKeyOnly = method === "keys" && targetIsMap;
+      const innerIterator = target[method](...args);
+      const wrap = toReactive;
+      PropertyReactivity.track(
+        rawTarget,
+        TrackOpTypes.ITERATE,
+        isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY
+      );
+      return {
+        // iterator protocol
+        next() {
+          const { value, done } = innerIterator.next();
+          return done ? { value, done } : {
+            value: isPair ? [wrap(value[0]), wrap(value[1])] : wrap(value),
+            done
+          };
+        },
+        // iterable protocol
+        [Symbol.iterator]() {
+          return this;
+        }
+      };
+    };
+  }
+  const getProto = (v) => Reflect.getPrototypeOf(v);
+  function reactive(target) {
+    if (!isObject(target)) {
+      return target;
+    }
+    if (target[ReactiveFlags.RAW]) {
+      return target;
+    }
+    const targetType = getTargetType(target);
+    if (targetType === TargetType.INVALID) {
+      return target;
+    }
+    const existingProxy = reactiveMap.get(target);
+    if (existingProxy) {
+      return existingProxy;
+    }
+    const proxy = new Proxy(
+      target,
+      targetType === TargetType.COLLECTION ? mutableCollectionHandlers : mutableHandlers
+    );
+    reactiveMap.set(target, proxy);
+    return proxy;
+  }
+  const reactiveMap = /* @__PURE__ */ new WeakMap();
+  function isReactive(value) {
+    return !!(value && value[ReactiveFlags.IS_REACTIVE]);
+  }
+  const toReactive = (value) => {
+    if (isObject(value)) {
+      return reactive(value);
     }
+    return value;
+  };
+  function isProxy(value) {
+    return value ? !!value[ReactiveFlags.RAW] : false;
   }
+  exports2.ComputedDep = ComputedReactivity;
+  exports2.Dep = Reactivity;
+  exports2.EffectDep = EffectReactivity;
+  exports2.RefReactivity = RefReactivity;
+  exports2.batchRun = batchRun;
   exports2.computed = computed;
+  exports2.effect = effect;
+  exports2.forceTrack = forceTrack;
+  exports2.isProxy = isProxy;
+  exports2.isReactive = isReactive;
+  exports2.isRef = isRef;
+  exports2.noTrack = noTrack;
+  exports2.reactive = reactive;
   exports2.ref = ref;
+  exports2.toRaw = toRaw;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });
 //# sourceMappingURL=index.umd.cjs.map