@vue/runtime-dom 3.4.26 → 3.5.0-alpha.2

package/dist/runtime-dom.global.js

@@ -1,5 +1,5 @@
 /**
-* @vue/runtime-dom v3.4.26
+* @vue/runtime-dom v3.5.0-alpha.2
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -388,156 +388,280 @@ var VueRuntimeDOM = (function (exports) {
   function effectScope(detached) {
     return new EffectScope(detached);
   }
-  function recordEffectScope(effect, scope = activeEffectScope) {
-    if (scope && scope.active) {
-      scope.effects.push(effect);
-    }
-  }
   function getCurrentScope() {
     return activeEffectScope;
   }
-  function onScopeDispose(fn) {
+  function onScopeDispose(fn, failSilently = false) {
     if (activeEffectScope) {
       activeEffectScope.cleanups.push(fn);
-    } else {
+    } else if (!failSilently) {
       warn$2(
         `onScopeDispose() is called when there is no active effect scope to be associated with.`
       );
     }
   }
 
-  let activeEffect;
+  let activeSub;
   class ReactiveEffect {
-    constructor(fn, trigger, scheduler, scope) {
+    constructor(fn) {
       this.fn = fn;
-      this.trigger = trigger;
-      this.scheduler = scheduler;
-      this.active = true;
-      this.deps = [];
       /**
        * @internal
        */
-      this._dirtyLevel = 4;
+      this.deps = void 0;
       /**
        * @internal
        */
-      this._trackId = 0;
+      this.depsTail = void 0;
       /**
        * @internal
        */
-      this._runnings = 0;
+      this.flags = 1 | 4;
       /**
        * @internal
        */
-      this._shouldSchedule = false;
+      this.nextEffect = void 0;
       /**
        * @internal
        */
-      this._depsLength = 0;
-      recordEffectScope(this, scope);
-    }
-    get dirty() {
-      if (this._dirtyLevel === 2 || this._dirtyLevel === 3) {
-        this._dirtyLevel = 1;
-        pauseTracking();
-        for (let i = 0; i < this._depsLength; i++) {
-          const dep = this.deps[i];
-          if (dep.computed) {
-            triggerComputed(dep.computed);
-            if (this._dirtyLevel >= 4) {
-              break;
-            }
-          }
-        }
-        if (this._dirtyLevel === 1) {
-          this._dirtyLevel = 0;
-        }
-        resetTracking();
+      this.cleanup = void 0;
+      this.scheduler = void 0;
+      if (activeEffectScope && activeEffectScope.active) {
+        activeEffectScope.effects.push(this);
       }
-      return this._dirtyLevel >= 4;
     }
-    set dirty(v) {
-      this._dirtyLevel = v ? 4 : 0;
+    /**
+     * @internal
+     */
+    notify() {
+      if (this.flags & 2 && !(this.flags & 32)) {
+        return;
+      }
+      if (this.flags & 64) {
+        return this.trigger();
+      }
+      if (!(this.flags & 8)) {
+        this.flags |= 8;
+        this.nextEffect = batchedEffect;
+        batchedEffect = this;
+      }
     }
     run() {
-      this._dirtyLevel = 0;
-      if (!this.active) {
+      if (!(this.flags & 1)) {
         return this.fn();
       }
-      let lastShouldTrack = shouldTrack;
-      let lastEffect = activeEffect;
+      this.flags |= 2;
+      cleanupEffect(this);
+      prepareDeps(this);
+      const prevEffect = activeSub;
+      const prevShouldTrack = shouldTrack;
+      activeSub = this;
+      shouldTrack = true;
       try {
-        shouldTrack = true;
-        activeEffect = this;
-        this._runnings++;
-        preCleanupEffect(this);
         return this.fn();
       } finally {
-        postCleanupEffect(this);
-        this._runnings--;
-        activeEffect = lastEffect;
-        shouldTrack = lastShouldTrack;
+        if (activeSub !== this) {
+          warn$2(
+            "Active effect was not restored correctly - this is likely a Vue internal bug."
+          );
+        }
+        cleanupDeps(this);
+        activeSub = prevEffect;
+        shouldTrack = prevShouldTrack;
+        this.flags &= ~2;
       }
     }
     stop() {
-      if (this.active) {
-        preCleanupEffect(this);
-        postCleanupEffect(this);
+      if (this.flags & 1) {
+        for (let link = this.deps; link; link = link.nextDep) {
+          removeSub(link);
+        }
+        this.deps = this.depsTail = void 0;
+        cleanupEffect(this);
         this.onStop && this.onStop();
-        this.active = false;
+        this.flags &= ~1;
       }
     }
+    trigger() {
+      if (this.scheduler) {
+        this.scheduler();
+      } else {
+        this.runIfDirty();
+      }
+    }
+    /**
+     * @internal
+     */
+    runIfDirty() {
+      if (isDirty(this)) {
+        this.run();
+      }
+    }
+    get dirty() {
+      return isDirty(this);
+    }
   }
-  function triggerComputed(computed) {
-    return computed.value;
+  let batchDepth = 0;
+  let batchedEffect;
+  function startBatch() {
+    batchDepth++;
   }
-  function preCleanupEffect(effect2) {
-    effect2._trackId++;
-    effect2._depsLength = 0;
+  function endBatch() {
+    if (batchDepth > 1) {
+      batchDepth--;
+      return;
+    }
+    let error;
+    while (batchedEffect) {
+      let e = batchedEffect;
+      batchedEffect = void 0;
+      while (e) {
+        const next = e.nextEffect;
+        e.nextEffect = void 0;
+        e.flags &= ~8;
+        if (e.flags & 1) {
+          try {
+            e.trigger();
+          } catch (err) {
+            if (!error)
+              error = err;
+          }
+        }
+        e = next;
+      }
+    }
+    batchDepth--;
+    if (error)
+      throw error;
   }
-  function postCleanupEffect(effect2) {
-    if (effect2.deps.length > effect2._depsLength) {
-      for (let i = effect2._depsLength; i < effect2.deps.length; i++) {
-        cleanupDepEffect(effect2.deps[i], effect2);
+  function prepareDeps(sub) {
+    for (let link = sub.deps; link; link = link.nextDep) {
+      link.version = -1;
+      link.prevActiveLink = link.dep.activeLink;
+      link.dep.activeLink = link;
+    }
+  }
+  function cleanupDeps(sub) {
+    let head;
+    let tail = sub.depsTail;
+    for (let link = tail; link; link = link.prevDep) {
+      if (link.version === -1) {
+        if (link === tail)
+          tail = link.prevDep;
+        removeSub(link);
+        removeDep(link);
+      } else {
+        head = link;
       }
-      effect2.deps.length = effect2._depsLength;
+      link.dep.activeLink = link.prevActiveLink;
+      link.prevActiveLink = void 0;
     }
+    sub.deps = head;
+    sub.depsTail = tail;
   }
-  function cleanupDepEffect(dep, effect2) {
-    const trackId = dep.get(effect2);
-    if (trackId !== void 0 && effect2._trackId !== trackId) {
-      dep.delete(effect2);
-      if (dep.size === 0) {
-        dep.cleanup();
+  function isDirty(sub) {
+    for (let link = sub.deps; link; link = link.nextDep) {
+      if (link.dep.version !== link.version || link.dep.computed && refreshComputed(link.dep.computed) === false || link.dep.version !== link.version) {
+        return true;
       }
     }
+    if (sub._dirty) {
+      return true;
+    }
+    return false;
+  }
+  function refreshComputed(computed) {
+    if (computed.flags & 2) {
+      return false;
+    }
+    if (computed.flags & 4 && !(computed.flags & 16)) {
+      return;
+    }
+    computed.flags &= ~16;
+    if (computed.globalVersion === globalVersion) {
+      return;
+    }
+    computed.globalVersion = globalVersion;
+    const dep = computed.dep;
+    computed.flags |= 2;
+    if (dep.version > 0 && !computed.isSSR && !isDirty(computed)) {
+      computed.flags &= ~2;
+      return;
+    }
+    const prevSub = activeSub;
+    const prevShouldTrack = shouldTrack;
+    activeSub = computed;
+    shouldTrack = true;
+    try {
+      prepareDeps(computed);
+      const value = computed.fn();
+      if (dep.version === 0 || hasChanged(value, computed._value)) {
+        computed._value = value;
+        dep.version++;
+      }
+    } catch (err) {
+      dep.version++;
+      throw err;
+    } finally {
+      activeSub = prevSub;
+      shouldTrack = prevShouldTrack;
+      cleanupDeps(computed);
+      computed.flags &= ~2;
+    }
+  }
+  function removeSub(link) {
+    const { dep, prevSub, nextSub } = link;
+    if (prevSub) {
+      prevSub.nextSub = nextSub;
+      link.prevSub = void 0;
+    }
+    if (nextSub) {
+      nextSub.prevSub = prevSub;
+      link.nextSub = void 0;
+    }
+    if (dep.subs === link) {
+      dep.subs = prevSub;
+    }
+    if (!dep.subs && dep.computed) {
+      dep.computed.flags &= ~4;
+      for (let l = dep.computed.deps; l; l = l.nextDep) {
+        removeSub(l);
+      }
+    }
+  }
+  function removeDep(link) {
+    const { prevDep, nextDep } = link;
+    if (prevDep) {
+      prevDep.nextDep = nextDep;
+      link.prevDep = void 0;
+    }
+    if (nextDep) {
+      nextDep.prevDep = prevDep;
+      link.nextDep = void 0;
+    }
   }
   function effect(fn, options) {
     if (fn.effect instanceof ReactiveEffect) {
       fn = fn.effect.fn;
     }
-    const _effect = new ReactiveEffect(fn, NOOP, () => {
-      if (_effect.dirty) {
-        _effect.run();
-      }
-    });
+    const e = new ReactiveEffect(fn);
     if (options) {
-      extend(_effect, options);
-      if (options.scope)
-        recordEffectScope(_effect, options.scope);
+      extend(e, options);
     }
-    if (!options || !options.lazy) {
-      _effect.run();
+    try {
+      e.run();
+    } catch (err) {
+      e.stop();
+      throw err;
     }
-    const runner = _effect.run.bind(_effect);
-    runner.effect = _effect;
+    const runner = e.run.bind(e);
+    runner.effect = e;
     return runner;
   }
   function stop(runner) {
     runner.effect.stop();
   }
   let shouldTrack = true;
-  let pauseScheduleStack = 0;
   const trackStack = [];
   function pauseTracking() {
     trackStack.push(shouldTrack);
@@ -547,192 +671,414 @@ var VueRuntimeDOM = (function (exports) {
     const last = trackStack.pop();
     shouldTrack = last === void 0 ? true : last;
   }
-  function pauseScheduling() {
-    pauseScheduleStack++;
-  }
-  function resetScheduling() {
-    pauseScheduleStack--;
-    while (!pauseScheduleStack && queueEffectSchedulers.length) {
-      queueEffectSchedulers.shift()();
+  function cleanupEffect(e) {
+    const { cleanup } = e;
+    e.cleanup = void 0;
+    if (cleanup) {
+      const prevSub = activeSub;
+      activeSub = void 0;
+      try {
+        cleanup();
+      } finally {
+        activeSub = prevSub;
+      }
     }
   }
-  function trackEffect(effect2, dep, debuggerEventExtraInfo) {
-    var _a;
-    if (dep.get(effect2) !== effect2._trackId) {
-      dep.set(effect2, effect2._trackId);
-      const oldDep = effect2.deps[effect2._depsLength];
-      if (oldDep !== dep) {
-        if (oldDep) {
-          cleanupDepEffect(oldDep, effect2);
-        }
-        effect2.deps[effect2._depsLength++] = dep;
-      } else {
-        effect2._depsLength++;
-      }
+
+  let globalVersion = 0;
+  class Dep {
+    constructor(computed) {
+      this.computed = computed;
+      this.version = 0;
+      /**
+       * Link between this dep and the current active effect
+       */
+      this.activeLink = void 0;
+      /**
+       * Doubly linked list representing the subscribing effects (tail)
+       */
+      this.subs = void 0;
       {
-        (_a = effect2.onTrack) == null ? void 0 : _a.call(effect2, extend({ effect: effect2 }, debuggerEventExtraInfo));
+        this.subsHead = void 0;
       }
     }
-  }
-  const queueEffectSchedulers = [];
-  function triggerEffects(dep, dirtyLevel, debuggerEventExtraInfo) {
-    var _a;
-    pauseScheduling();
-    for (const effect2 of dep.keys()) {
-      let tracking;
-      if (effect2._dirtyLevel < dirtyLevel && (tracking != null ? tracking : tracking = dep.get(effect2) === effect2._trackId)) {
-        effect2._shouldSchedule || (effect2._shouldSchedule = effect2._dirtyLevel === 0);
-        effect2._dirtyLevel = dirtyLevel;
-      }
-      if (effect2._shouldSchedule && (tracking != null ? tracking : tracking = dep.get(effect2) === effect2._trackId)) {
-        {
-          (_a = effect2.onTrigger) == null ? void 0 : _a.call(effect2, extend({ effect: effect2 }, debuggerEventExtraInfo));
+    track(debugInfo) {
+      if (!activeSub || !shouldTrack) {
+        return;
+      }
+      let link = this.activeLink;
+      if (link === void 0 || link.sub !== activeSub) {
+        link = this.activeLink = {
+          dep: this,
+          sub: activeSub,
+          version: this.version,
+          nextDep: void 0,
+          prevDep: void 0,
+          nextSub: void 0,
+          prevSub: void 0,
+          prevActiveLink: void 0
+        };
+        if (!activeSub.deps) {
+          activeSub.deps = activeSub.depsTail = link;
+        } else {
+          link.prevDep = activeSub.depsTail;
+          activeSub.depsTail.nextDep = link;
+          activeSub.depsTail = link;
+        }
+        if (activeSub.flags & 4) {
+          addSub(link);
         }
-        effect2.trigger();
-        if ((!effect2._runnings || effect2.allowRecurse) && effect2._dirtyLevel !== 2) {
-          effect2._shouldSchedule = false;
-          if (effect2.scheduler) {
-            queueEffectSchedulers.push(effect2.scheduler);
+      } else if (link.version === -1) {
+        link.version = this.version;
+        if (link.nextDep) {
+          const next = link.nextDep;
+          next.prevDep = link.prevDep;
+          if (link.prevDep) {
+            link.prevDep.nextDep = next;
+          }
+          link.prevDep = activeSub.depsTail;
+          link.nextDep = void 0;
+          activeSub.depsTail.nextDep = link;
+          activeSub.depsTail = link;
+          if (activeSub.deps === link) {
+            activeSub.deps = next;
           }
         }
       }
+      if (activeSub.onTrack) {
+        activeSub.onTrack(
+          extend(
+            {
+              effect: activeSub
+            },
+            debugInfo
+          )
+        );
+      }
+      return link;
+    }
+    trigger(debugInfo) {
+      this.version++;
+      globalVersion++;
+      this.notify(debugInfo);
+    }
+    notify(debugInfo) {
+      startBatch();
+      try {
+        if (true) {
+          for (let head = this.subsHead; head; head = head.nextSub) {
+            if (head.sub.onTrigger && !(head.sub.flags & 8)) {
+              head.sub.onTrigger(
+                extend(
+                  {
+                    effect: head.sub
+                  },
+                  debugInfo
+                )
+              );
+            }
+          }
+        }
+        for (let link = this.subs; link; link = link.prevSub) {
+          link.sub.notify();
+        }
+      } finally {
+        endBatch();
+      }
     }
-    resetScheduling();
   }
-
-  const createDep = (cleanup, computed) => {
-    const dep = /* @__PURE__ */ new Map();
-    dep.cleanup = cleanup;
-    dep.computed = computed;
-    return dep;
-  };
-
+  function addSub(link) {
+    const computed = link.dep.computed;
+    if (computed && !link.dep.subs) {
+      computed.flags |= 4 | 16;
+      for (let l = computed.deps; l; l = l.nextDep) {
+        addSub(l);
+      }
+    }
+    const currentTail = link.dep.subs;
+    if (currentTail !== link) {
+      link.prevSub = currentTail;
+      if (currentTail)
+        currentTail.nextSub = link;
+    }
+    if (link.dep.subsHead === void 0) {
+      link.dep.subsHead = link;
+    }
+    link.dep.subs = link;
+  }
   const targetMap = /* @__PURE__ */ new WeakMap();
-  const ITERATE_KEY = Symbol("iterate" );
-  const MAP_KEY_ITERATE_KEY = Symbol("Map key iterate" );
+  const ITERATE_KEY = Symbol("Object iterate" );
+  const MAP_KEY_ITERATE_KEY = Symbol("Map keys iterate" );
+  const ARRAY_ITERATE_KEY = Symbol("Array iterate" );
   function track(target, type, key) {
-    if (shouldTrack && activeEffect) {
+    if (shouldTrack && activeSub) {
       let depsMap = targetMap.get(target);
       if (!depsMap) {
         targetMap.set(target, depsMap = /* @__PURE__ */ new Map());
       }
       let dep = depsMap.get(key);
       if (!dep) {
-        depsMap.set(key, dep = createDep(() => depsMap.delete(key)));
+        depsMap.set(key, dep = new Dep());
       }
-      trackEffect(
-        activeEffect,
-        dep,
-        {
+      {
+        dep.track({
           target,
           type,
           key
-        } 
-      );
+        });
+      }
     }
   }
   function trigger(target, type, key, newValue, oldValue, oldTarget) {
     const depsMap = targetMap.get(target);
     if (!depsMap) {
+      globalVersion++;
       return;
     }
     let deps = [];
     if (type === "clear") {
       deps = [...depsMap.values()];
-    } else if (key === "length" && isArray(target)) {
-      const newLength = Number(newValue);
-      depsMap.forEach((dep, key2) => {
-        if (key2 === "length" || !isSymbol(key2) && key2 >= newLength) {
-          deps.push(dep);
-        }
-      });
     } else {
-      if (key !== void 0) {
-        deps.push(depsMap.get(key));
-      }
-      switch (type) {
-        case "add":
-          if (!isArray(target)) {
-            deps.push(depsMap.get(ITERATE_KEY));
-            if (isMap(target)) {
-              deps.push(depsMap.get(MAP_KEY_ITERATE_KEY));
-            }
-          } else if (isIntegerKey(key)) {
-            deps.push(depsMap.get("length"));
+      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) {
+            deps.push(dep);
           }
-          break;
-        case "delete":
-          if (!isArray(target)) {
-            deps.push(depsMap.get(ITERATE_KEY));
+        });
+      } else {
+        const push = (dep) => dep && deps.push(dep);
+        if (key !== void 0) {
+          push(depsMap.get(key));
+        }
+        if (isArrayIndex) {
+          push(depsMap.get(ARRAY_ITERATE_KEY));
+        }
+        switch (type) {
+          case "add":
+            if (!targetIsArray) {
+              push(depsMap.get(ITERATE_KEY));
+              if (isMap(target)) {
+                push(depsMap.get(MAP_KEY_ITERATE_KEY));
+              }
+            } else if (isArrayIndex) {
+              push(depsMap.get("length"));
+            }
+            break;
+          case "delete":
+            if (!targetIsArray) {
+              push(depsMap.get(ITERATE_KEY));
+              if (isMap(target)) {
+                push(depsMap.get(MAP_KEY_ITERATE_KEY));
+              }
+            }
+            break;
+          case "set":
             if (isMap(target)) {
-              deps.push(depsMap.get(MAP_KEY_ITERATE_KEY));
+              push(depsMap.get(ITERATE_KEY));
             }
-          }
-          break;
-        case "set":
-          if (isMap(target)) {
-            deps.push(depsMap.get(ITERATE_KEY));
-          }
-          break;
+            break;
+        }
       }
     }
-    pauseScheduling();
+    startBatch();
     for (const dep of deps) {
-      if (dep) {
-        triggerEffects(
-          dep,
-          4,
-          {
-            target,
-            type,
-            key,
-            newValue,
-            oldValue,
-            oldTarget
-          } 
-        );
+      {
+        dep.trigger({
+          target,
+          type,
+          key,
+          newValue,
+          oldValue,
+          oldTarget
+        });
       }
     }
-    resetScheduling();
+    endBatch();
   }
   function getDepFromReactive(object, key) {
-    const depsMap = targetMap.get(object);
-    return depsMap && depsMap.get(key);
+    var _a;
+    return (_a = targetMap.get(object)) == null ? void 0 : _a.get(key);
+  }
+
+  function reactiveReadArray(array) {
+    const raw = toRaw(array);
+    if (raw === array)
+      return raw;
+    track(raw, "iterate", ARRAY_ITERATE_KEY);
+    return isShallow(array) ? raw : raw.map(toReactive);
+  }
+  function shallowReadArray(arr) {
+    track(arr = toRaw(arr), "iterate", ARRAY_ITERATE_KEY);
+    return arr;
+  }
+  const arrayInstrumentations = {
+    __proto__: null,
+    [Symbol.iterator]() {
+      return iterator(this, Symbol.iterator, toReactive);
+    },
+    concat(...args) {
+      return reactiveReadArray(this).concat(
+        ...args.map((x) => reactiveReadArray(x))
+      );
+    },
+    entries() {
+      return iterator(this, "entries", (value) => {
+        value[1] = toReactive(value[1]);
+        return value;
+      });
+    },
+    every(fn, thisArg) {
+      return apply(this, "every", fn, thisArg);
+    },
+    filter(fn, thisArg) {
+      const result = apply(this, "filter", fn, thisArg);
+      return isProxy(this) && !isShallow(this) ? result.map(toReactive) : result;
+    },
+    find(fn, thisArg) {
+      const result = apply(this, "find", fn, thisArg);
+      return isProxy(this) && !isShallow(this) ? toReactive(result) : result;
+    },
+    findIndex(fn, thisArg) {
+      return apply(this, "findIndex", fn, thisArg);
+    },
+    findLast(fn, thisArg) {
+      const result = apply(this, "findLast", fn, thisArg);
+      return isProxy(this) && !isShallow(this) ? toReactive(result) : result;
+    },
+    findLastIndex(fn, thisArg) {
+      return apply(this, "findLastIndex", fn, thisArg);
+    },
+    // flat, flatMap could benefit from ARRAY_ITERATE but are not straight-forward to implement
+    forEach(fn, thisArg) {
+      return apply(this, "forEach", fn, thisArg);
+    },
+    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);
+    },
+    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);
+    },
+    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(self, method, wrapValue) {
+    const arr = shallowReadArray(self);
+    const iter = arr[method]();
+    if (arr !== self && !isShallow(self)) {
+      iter._next = iter.next;
+      iter.next = () => {
+        const result = iter._next();
+        if (result.value) {
+          result.value = wrapValue(result.value);
+        }
+        return result;
+      };
+    }
+    return iter;
+  }
+  function apply(self, method, fn, thisArg) {
+    const arr = shallowReadArray(self);
+    let wrappedFn = fn;
+    if (arr !== self) {
+      if (!isShallow(self)) {
+        wrappedFn = function(item, index) {
+          return fn.call(this, toReactive(item), index, self);
+        };
+      } else if (fn.length > 2) {
+        wrappedFn = function(item, index) {
+          return fn.call(this, item, index, self);
+        };
+      }
+    }
+    return arr[method](wrappedFn, thisArg);
+  }
+  function reduce(self, method, fn, args) {
+    const arr = shallowReadArray(self);
+    let wrappedFn = fn;
+    if (arr !== self) {
+      if (!isShallow(self)) {
+        wrappedFn = function(acc, item, index) {
+          return fn.call(this, acc, toReactive(item), index, self);
+        };
+      } else if (fn.length > 3) {
+        wrappedFn = function(acc, item, index) {
+          return fn.call(this, acc, item, index, self);
+        };
+      }
+    }
+    return arr[method](wrappedFn, ...args);
+  }
+  function searchProxy(self, method, args) {
+    const arr = toRaw(self);
+    track(arr, "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(self, method, args = []) {
+    pauseTracking();
+    startBatch();
+    const res = toRaw(self)[method].apply(self, args);
+    endBatch();
+    resetTracking();
+    return res;
   }
 
   const isNonTrackableKeys = /* @__PURE__ */ makeMap(`__proto__,__v_isRef,__isVue`);
   const builtInSymbols = new Set(
     /* @__PURE__ */ Object.getOwnPropertyNames(Symbol).filter((key) => key !== "arguments" && key !== "caller").map((key) => Symbol[key]).filter(isSymbol)
   );
-  const arrayInstrumentations = /* @__PURE__ */ createArrayInstrumentations();
-  function createArrayInstrumentations() {
-    const instrumentations = {};
-    ["includes", "indexOf", "lastIndexOf"].forEach((key) => {
-      instrumentations[key] = function(...args) {
-        const arr = toRaw(this);
-        for (let i = 0, l = this.length; i < l; i++) {
-          track(arr, "get", i + "");
-        }
-        const res = arr[key](...args);
-        if (res === -1 || res === false) {
-          return arr[key](...args.map(toRaw));
-        } else {
-          return res;
-        }
-      };
-    });
-    ["push", "pop", "shift", "unshift", "splice"].forEach((key) => {
-      instrumentations[key] = function(...args) {
-        pauseTracking();
-        pauseScheduling();
-        const res = toRaw(this)[key].apply(this, args);
-        resetScheduling();
-        resetTracking();
-        return res;
-      };
-    });
-    return instrumentations;
-  }
   function hasOwnProperty(key) {
     if (!isSymbol(key))
       key = String(key);
@@ -763,14 +1109,22 @@ var VueRuntimeDOM = (function (exports) {
       }
       const targetIsArray = isArray(target);
       if (!isReadonly2) {
-        if (targetIsArray && hasOwn(arrayInstrumentations, key)) {
-          return Reflect.get(arrayInstrumentations, key, receiver);
+        let fn;
+        if (targetIsArray && (fn = arrayInstrumentations[key])) {
+          return fn;
         }
         if (key === "hasOwnProperty") {
           return hasOwnProperty;
         }
       }
-      const res = Reflect.get(target, key, receiver);
+      const res = Reflect.get(
+        target,
+        key,
+        // if this is a proxy wrapping a ref, return methods using the raw ref
+        // as receiver so that we don't have to call `toRaw` on the ref in all
+        // its class methods
+        isRef(target) ? target : receiver
+      );
       if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
         return res;
       }
@@ -1269,110 +1623,8 @@ var VueRuntimeDOM = (function (exports) {
   const toReactive = (value) => isObject(value) ? reactive(value) : value;
   const toReadonly = (value) => isObject(value) ? readonly(value) : value;
 
-  const COMPUTED_SIDE_EFFECT_WARN = `Computed is still dirty after getter evaluation, likely because a computed is mutating its own dependency in its getter. State mutations in computed getters should be avoided.  Check the docs for more details: https://vuejs.org/guide/essentials/computed.html#getters-should-be-side-effect-free`;
-  class ComputedRefImpl {
-    constructor(getter, _setter, isReadonly, isSSR) {
-      this.getter = getter;
-      this._setter = _setter;
-      this.dep = void 0;
-      this.__v_isRef = true;
-      this["__v_isReadonly"] = false;
-      this.effect = new ReactiveEffect(
-        () => getter(this._value),
-        () => triggerRefValue(
-          this,
-          this.effect._dirtyLevel === 2 ? 2 : 3
-        )
-      );
-      this.effect.computed = this;
-      this.effect.active = this._cacheable = !isSSR;
-      this["__v_isReadonly"] = isReadonly;
-    }
-    get value() {
-      const self = toRaw(this);
-      if ((!self._cacheable || self.effect.dirty) && hasChanged(self._value, self._value = self.effect.run())) {
-        triggerRefValue(self, 4);
-      }
-      trackRefValue(self);
-      if (self.effect._dirtyLevel >= 2) {
-        if (this._warnRecursive) {
-          warn$2(COMPUTED_SIDE_EFFECT_WARN, `
-
-getter: `, this.getter);
-        }
-        triggerRefValue(self, 2);
-      }
-      return self._value;
-    }
-    set value(newValue) {
-      this._setter(newValue);
-    }
-    // #region polyfill _dirty for backward compatibility third party code for Vue <= 3.3.x
-    get _dirty() {
-      return this.effect.dirty;
-    }
-    set _dirty(v) {
-      this.effect.dirty = v;
-    }
-    // #endregion
-  }
-  function computed$1(getterOrOptions, debugOptions, isSSR = false) {
-    let getter;
-    let setter;
-    const onlyGetter = isFunction(getterOrOptions);
-    if (onlyGetter) {
-      getter = getterOrOptions;
-      setter = () => {
-        warn$2("Write operation failed: computed value is readonly");
-      } ;
-    } else {
-      getter = getterOrOptions.get;
-      setter = getterOrOptions.set;
-    }
-    const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter, isSSR);
-    if (debugOptions && !isSSR) {
-      cRef.effect.onTrack = debugOptions.onTrack;
-      cRef.effect.onTrigger = debugOptions.onTrigger;
-    }
-    return cRef;
-  }
-
-  function trackRefValue(ref2) {
-    var _a;
-    if (shouldTrack && activeEffect) {
-      ref2 = toRaw(ref2);
-      trackEffect(
-        activeEffect,
-        (_a = ref2.dep) != null ? _a : ref2.dep = createDep(
-          () => ref2.dep = void 0,
-          ref2 instanceof ComputedRefImpl ? ref2 : void 0
-        ),
-        {
-          target: ref2,
-          type: "get",
-          key: "value"
-        } 
-      );
-    }
-  }
-  function triggerRefValue(ref2, dirtyLevel = 4, newVal) {
-    ref2 = toRaw(ref2);
-    const dep = ref2.dep;
-    if (dep) {
-      triggerEffects(
-        dep,
-        dirtyLevel,
-        {
-          target: ref2,
-          type: "set",
-          key: "value",
-          newValue: newVal
-        } 
-      );
-    }
-  }
   function isRef(r) {
-    return !!(r && r.__v_isRef === true);
+    return r ? r.__v_isRef === true : false;
   }
   function ref(value) {
     return createRef(value, false);
@@ -1389,27 +1641,49 @@ getter: `, this.getter);
   class RefImpl {
     constructor(value, __v_isShallow) {
       this.__v_isShallow = __v_isShallow;
-      this.dep = void 0;
+      this.dep = new Dep();
       this.__v_isRef = true;
       this._rawValue = __v_isShallow ? value : toRaw(value);
       this._value = __v_isShallow ? value : toReactive(value);
     }
     get value() {
-      trackRefValue(this);
+      {
+        this.dep.track({
+          target: this,
+          type: "get",
+          key: "value"
+        });
+      }
       return this._value;
     }
-    set value(newVal) {
-      const useDirectValue = this.__v_isShallow || isShallow(newVal) || isReadonly(newVal);
-      newVal = useDirectValue ? newVal : toRaw(newVal);
-      if (hasChanged(newVal, this._rawValue)) {
-        this._rawValue = newVal;
-        this._value = useDirectValue ? newVal : toReactive(newVal);
-        triggerRefValue(this, 4, newVal);
+    set value(newValue) {
+      const oldValue = this._rawValue;
+      const useDirectValue = this.__v_isShallow || isShallow(newValue) || isReadonly(newValue);
+      newValue = useDirectValue ? newValue : toRaw(newValue);
+      if (hasChanged(newValue, oldValue)) {
+        this._rawValue = newValue;
+        this._value = useDirectValue ? newValue : toReactive(newValue);
+        {
+          this.dep.trigger({
+            target: this,
+            type: "set",
+            key: "value",
+            newValue,
+            oldValue
+          });
+        }
       }
     }
   }
   function triggerRef(ref2) {
-    triggerRefValue(ref2, 4, ref2.value );
+    {
+      ref2.dep.trigger({
+        target: ref2,
+        type: "set",
+        key: "value",
+        newValue: ref2._value
+      });
+    }
   }
   function unref(ref2) {
     return isRef(ref2) ? ref2.value : ref2;
@@ -1434,12 +1708,9 @@ getter: `, this.getter);
   }
   class CustomRefImpl {
     constructor(factory) {
-      this.dep = void 0;
       this.__v_isRef = true;
-      const { get, set } = factory(
-        () => trackRefValue(this),
-        () => triggerRefValue(this)
-      );
+      const dep = this.dep = new Dep();
+      const { get, set } = factory(dep.track.bind(dep), dep.trigger.bind(dep));
       this._get = get;
       this._set = set;
     }
@@ -1507,6 +1778,90 @@ getter: `, this.getter);
     return isRef(val) ? val : new ObjectRefImpl(source, key, defaultValue);
   }
 
+  class ComputedRefImpl {
+    constructor(fn, setter, isSSR) {
+      this.fn = fn;
+      this.setter = setter;
+      /**
+       * @internal
+       */
+      this._value = void 0;
+      /**
+       * @internal
+       */
+      this.dep = new Dep(this);
+      /**
+       * @internal
+       */
+      this.__v_isRef = true;
+      // A computed is also a subscriber that tracks other deps
+      /**
+       * @internal
+       */
+      this.deps = void 0;
+      /**
+       * @internal
+       */
+      this.depsTail = void 0;
+      /**
+       * @internal
+       */
+      this.flags = 16;
+      /**
+       * @internal
+       */
+      this.globalVersion = globalVersion - 1;
+      // for backwards compat
+      this.effect = this;
+      this.__v_isReadonly = !setter;
+      this.isSSR = isSSR;
+    }
+    /**
+     * @internal
+     */
+    notify() {
+      if (activeSub !== this) {
+        this.flags |= 16;
+        this.dep.notify();
+      }
+    }
+    get value() {
+      const link = this.dep.track({
+        target: this,
+        type: "get",
+        key: "value"
+      }) ;
+      refreshComputed(this);
+      if (link) {
+        link.version = this.dep.version;
+      }
+      return this._value;
+    }
+    set value(newValue) {
+      if (this.setter) {
+        this.setter(newValue);
+      } else {
+        warn$2("Write operation failed: computed value is readonly");
+      }
+    }
+  }
+  function computed$1(getterOrOptions, debugOptions, isSSR = false) {
+    let getter;
+    let setter;
+    if (isFunction(getterOrOptions)) {
+      getter = getterOrOptions;
+    } else {
+      getter = getterOrOptions.get;
+      setter = getterOrOptions.set;
+    }
+    const cRef = new ComputedRefImpl(getter, setter, isSSR);
+    if (debugOptions && !isSSR) {
+      cRef.onTrack = debugOptions.onTrack;
+      cRef.onTrigger = debugOptions.onTrigger;
+    }
+    return cRef;
+  }
+
   const TrackOpTypes = {
     "GET": "get",
     "HAS": "has",
@@ -1666,7 +2021,9 @@ getter: `, this.getter);
     "ASYNC_COMPONENT_LOADER": 13,
     "13": "ASYNC_COMPONENT_LOADER",
     "SCHEDULER": 14,
-    "14": "SCHEDULER"
+    "14": "SCHEDULER",
+    "APP_UNMOUNT_CLEANUP": 15,
+    "15": "APP_UNMOUNT_CLEANUP"
   };
   const ErrorTypeStrings$1 = {
     ["sp"]: "serverPrefetch hook",
@@ -1697,7 +2054,8 @@ getter: `, this.getter);
     [11]: "app warnHandler",
     [12]: "ref function",
     [13]: "async component loader",
-    [14]: "scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core ."
+    [14]: "scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core .",
+    [15]: "app unmount cleanup function"
   };
   function callWithErrorHandling(fn, instance, type, args) {
     try {
@@ -1799,7 +2157,7 @@ getter: `, this.getter);
       const middle = start + end >>> 1;
       const middleJob = queue[middle];
       const middleJobId = getId(middleJob);
-      if (middleJobId < id || middleJobId === id && middleJob.pre) {
+      if (middleJobId < id || middleJobId === id && middleJob.flags & 2) {
         start = middle + 1;
       } else {
         end = middle;
@@ -1808,15 +2166,21 @@ getter: `, this.getter);
     return start;
   }
   function queueJob(job) {
-    if (!queue.length || !queue.includes(
-      job,
-      isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex
-    )) {
+    var _a;
+    if (!(job.flags & 1)) {
       if (job.id == null) {
         queue.push(job);
+      } else if (
+        // fast path when the job id is larger than the tail
+        !(job.flags & 2) && job.id >= (((_a = queue[queue.length - 1]) == null ? void 0 : _a.id) || 0)
+      ) {
+        queue.push(job);
       } else {
         queue.splice(findInsertionIndex(job.id), 0, job);
       }
+      if (!(job.flags & 4)) {
+        job.flags |= 1;
+      }
       queueFlush();
     }
   }
@@ -1834,11 +2198,11 @@ getter: `, this.getter);
   }
   function queuePostFlushCb(cb) {
     if (!isArray(cb)) {
-      if (!activePostFlushCbs || !activePostFlushCbs.includes(
-        cb,
-        cb.allowRecurse ? postFlushIndex + 1 : postFlushIndex
-      )) {
+      if (!(cb.flags & 1)) {
         pendingPostFlushCbs.push(cb);
+        if (!(cb.flags & 4)) {
+          cb.flags |= 1;
+        }
       }
     } else {
       pendingPostFlushCbs.push(...cb);
@@ -1851,7 +2215,7 @@ getter: `, this.getter);
     }
     for (; i < queue.length; i++) {
       const cb = queue[i];
-      if (cb && cb.pre) {
+      if (cb && cb.flags & 2) {
         if (instance && cb.id !== instance.uid) {
           continue;
         }
@@ -1861,6 +2225,7 @@ getter: `, this.getter);
         queue.splice(i, 1);
         i--;
         cb();
+        cb.flags &= ~1;
       }
     }
   }
@@ -1883,6 +2248,7 @@ getter: `, this.getter);
           continue;
         }
         activePostFlushCbs[postFlushIndex]();
+        activePostFlushCbs[postFlushIndex].flags &= ~1;
       }
       activePostFlushCbs = null;
       postFlushIndex = 0;
@@ -1892,9 +2258,11 @@ getter: `, this.getter);
   const comparator = (a, b) => {
     const diff = getId(a) - getId(b);
     if (diff === 0) {
-      if (a.pre && !b.pre)
+      const isAPre = a.flags & 2;
+      const isBPre = b.flags & 2;
+      if (isAPre && !isBPre)
         return -1;
-      if (b.pre && !a.pre)
+      if (isBPre && !isAPre)
         return 1;
     }
     return diff;
@@ -1910,11 +2278,12 @@ getter: `, this.getter);
     try {
       for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {
         const job = queue[flushIndex];
-        if (job && job.active !== false) {
+        if (job && !(job.flags & 8)) {
           if (check(job)) {
             continue;
           }
           callWithErrorHandling(job, null, 14);
+          job.flags &= ~1;
         }
       }
     } finally {
@@ -1996,7 +2365,6 @@ getter: `, this.getter);
       }
       instance.renderCache = [];
       isHmrUpdating = true;
-      instance.effect.dirty = true;
       instance.update();
       isHmrUpdating = false;
     });
@@ -2024,7 +2392,6 @@ getter: `, this.getter);
         instance.ceReload(newComp.styles);
         hmrDirtyComponents.delete(oldComp);
       } else if (instance.parent) {
-        instance.parent.effect.dirty = true;
         queueJob(instance.parent.update);
       } else if (instance.appContext.reload) {
         instance.appContext.reload();
@@ -3424,8 +3791,8 @@ If this is a native custom element, make sure to exclude it from component resol
       };
     };
     let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
-    const job = () => {
-      if (!effect.active || !effect.dirty) {
+    const job = (immediateFirstRun) => {
+      if (!(effect.flags & 1) || !effect.dirty && !immediateFirstRun) {
         return;
       }
       if (cb) {
@@ -3446,19 +3813,22 @@ If this is a native custom element, make sure to exclude it from component resol
         effect.run();
       }
     };
-    job.allowRecurse = !!cb;
+    if (cb)
+      job.flags |= 4;
+    const effect = new ReactiveEffect(getter);
     let scheduler;
     if (flush === "sync") {
+      effect.flags |= 64;
       scheduler = job;
     } else if (flush === "post") {
       scheduler = () => queuePostRenderEffect(job, instance && instance.suspense);
     } else {
-      job.pre = true;
+      job.flags |= 2;
       if (instance)
         job.id = instance.uid;
       scheduler = () => queueJob(job);
     }
-    const effect = new ReactiveEffect(getter, NOOP, scheduler);
+    effect.scheduler = scheduler;
     const scope = getCurrentScope();
     const unwatch = () => {
       effect.stop();
@@ -3472,7 +3842,7 @@ If this is a native custom element, make sure to exclude it from component resol
     }
     if (cb) {
       if (immediate) {
-        job();
+        job(true);
       } else {
         oldValue = effect.run();
       }
@@ -3646,22 +4016,7 @@ If this is a native custom element, make sure to exclude it from component resol
         if (!children || !children.length) {
           return;
         }
-        let child = children[0];
-        if (children.length > 1) {
-          let hasFound = false;
-          for (const c of children) {
-            if (c.type !== Comment) {
-              if (hasFound) {
-                warn$1(
-                  "<transition> can only be used on a single element or component. Use <transition-group> for lists."
-                );
-                break;
-              }
-              child = c;
-              hasFound = true;
-            }
-          }
-        }
+        const child = findNonCommentChild(children);
         const rawProps = toRaw(props);
         const { mode } = rawProps;
         if (mode && mode !== "in-out" && mode !== "out-in" && mode !== "default") {
@@ -3670,7 +4025,7 @@ If this is a native custom element, make sure to exclude it from component resol
         if (state.isLeaving) {
           return emptyPlaceholder(child);
         }
-        const innerChild = getKeepAliveChild(child);
+        const innerChild = getInnerChild$1(child);
         if (!innerChild) {
           return emptyPlaceholder(child);
         }
@@ -3682,7 +4037,7 @@ If this is a native custom element, make sure to exclude it from component resol
         );
         setTransitionHooks(innerChild, enterHooks);
         const oldChild = instance.subTree;
-        const oldInnerChild = oldChild && getKeepAliveChild(oldChild);
+        const oldInnerChild = oldChild && getInnerChild$1(oldChild);
         if (oldInnerChild && oldInnerChild.type !== Comment && !isSameVNodeType(innerChild, oldInnerChild)) {
           const leavingHooks = resolveTransitionHooks(
             oldInnerChild,
@@ -3695,8 +4050,7 @@ If this is a native custom element, make sure to exclude it from component resol
             state.isLeaving = true;
             leavingHooks.afterLeave = () => {
               state.isLeaving = false;
-              if (instance.update.active !== false) {
-                instance.effect.dirty = true;
+              if (!(instance.job.flags & 8)) {
                 instance.update();
               }
             };
@@ -3721,6 +4075,25 @@ If this is a native custom element, make sure to exclude it from component resol
       };
     }
   };
+  function findNonCommentChild(children) {
+    let child = children[0];
+    if (children.length > 1) {
+      let hasFound = false;
+      for (const c of children) {
+        if (c.type !== Comment) {
+          if (hasFound) {
+            warn$1(
+              "<transition> can only be used on a single element or component. Use <transition-group> for lists."
+            );
+            break;
+          }
+          child = c;
+          hasFound = true;
+        }
+      }
+    }
+    return child;
+  }
   const BaseTransition = BaseTransitionImpl;
   function getLeavingNodesForType(state, vnode) {
     const { leavingVNodes } = state;
@@ -3875,8 +4248,11 @@ If this is a native custom element, make sure to exclude it from component resol
       return vnode;
     }
   }
-  function getKeepAliveChild(vnode) {
+  function getInnerChild$1(vnode) {
     if (!isKeepAlive(vnode)) {
+      if (isTeleport(vnode.type) && vnode.children) {
+        return findNonCommentChild(vnode.children);
+      }
       return vnode;
     }
     if (vnode.component) {
@@ -4045,7 +4421,6 @@ If this is a native custom element, make sure to exclude it from component resol
         load().then(() => {
           loaded.value = true;
           if (instance.parent && isKeepAlive(instance.parent.vnode)) {
-            instance.parent.effect.dirty = true;
             queueJob(instance.parent.update);
           }
         }).catch((err) => {
@@ -4370,10 +4745,20 @@ If this is a native custom element, make sure to exclude it from component resol
   function renderList(source, renderItem, cache, index) {
     let ret;
     const cached = cache && cache[index];
-    if (isArray(source) || isString(source)) {
+    const sourceIsArray = isArray(source);
+    const sourceIsReactiveArray = sourceIsArray && isReactive(source);
+    if (sourceIsArray || isString(source)) {
+      if (sourceIsReactiveArray) {
+        source = shallowReadArray(source);
+      }
       ret = new Array(source.length);
       for (let i = 0, l = source.length; i < l; i++) {
-        ret[i] = renderItem(source[i], i, void 0, cached && cached[i]);
+        ret[i] = renderItem(
+          sourceIsReactiveArray ? toReactive(source[i]) : source[i],
+          i,
+          void 0,
+          cached && cached[i]
+        );
       }
     } else if (typeof source === "number") {
       if (!Number.isInteger(source)) {
@@ -4508,7 +4893,6 @@ If this is a native custom element, make sure to exclude it from component resol
       $emit: (i) => i.emit,
       $options: (i) => resolveMergedOptions(i) ,
       $forceUpdate: (i) => i.f || (i.f = () => {
-        i.effect.dirty = true;
         queueJob(i.update);
       }),
       $nextTick: (i) => i.n || (i.n = nextTick.bind(i.proxy)),
@@ -5303,6 +5687,7 @@ If this is a native custom element, make sure to exclude it from component resol
       }
       const context = createAppContext();
       const installedPlugins = /* @__PURE__ */ new WeakSet();
+      const pluginCleanupFns = [];
       let isMounted = false;
       const app = context.app = {
         _uid: uid$1++,
@@ -5420,8 +5805,21 @@ If you want to remount the same app, move your app creation logic into a factory
             );
           }
         },
+        onUnmount(cleanupFn) {
+          if (typeof cleanupFn !== "function") {
+            warn$1(
+              `Expected function as first argument to app.onUnmount(), but got ${typeof cleanupFn}`
+            );
+          }
+          pluginCleanupFns.push(cleanupFn);
+        },
         unmount() {
           if (isMounted) {
+            callWithAsyncErrorHandling(
+              pluginCleanupFns,
+              app._instance,
+              15
+            );
             render(null, app._container);
             {
               app._instance = null;
@@ -5841,7 +6239,9 @@ If you want to remount the same app, move your app creation logic into a factory
   function assertType(value, type) {
     let valid;
     const expectedType = getType(type);
-    if (isSimpleType(expectedType)) {
+    if (expectedType === "null") {
+      valid = value === null;
+    } else if (isSimpleType(expectedType)) {
       const t = typeof value;
       valid = t === expectedType.toLowerCase();
       if (!valid && t === "object") {
@@ -5851,8 +6251,6 @@ If you want to remount the same app, move your app creation logic into a factory
       valid = isObject(value);
     } else if (expectedType === "Array") {
       valid = isArray(value);
-    } else if (expectedType === "null") {
-      valid = value === null;
     } else {
       valid = value instanceof type;
     }
@@ -7376,7 +7774,6 @@ Server rendered element contains fewer child nodes than client vdom.`
         } else {
           instance.next = n2;
           invalidateJob(instance.update);
-          instance.effect.dirty = true;
           instance.update();
         }
       } else {
@@ -7559,24 +7956,18 @@ Server rendered element contains fewer child nodes than client vdom.`
           }
         }
       };
-      const effect = instance.effect = new ReactiveEffect(
-        componentUpdateFn,
-        NOOP,
-        () => queueJob(update),
-        instance.scope
-        // track it in component's effect scope
-      );
-      const update = instance.update = () => {
-        if (effect.dirty) {
-          effect.run();
-        }
-      };
-      update.id = instance.uid;
+      instance.scope.on();
+      const effect = instance.effect = new ReactiveEffect(componentUpdateFn);
+      instance.scope.off();
+      const update = instance.update = effect.run.bind(effect);
+      const job = instance.job = effect.runIfDirty.bind(effect);
+      job.id = instance.uid;
+      effect.scheduler = () => queueJob(job);
       toggleRecurse(instance, true);
       {
         effect.onTrack = instance.rtc ? (e) => invokeArrayFns(instance.rtc, e) : void 0;
         effect.onTrigger = instance.rtg ? (e) => invokeArrayFns(instance.rtg, e) : void 0;
-        update.ownerInstance = instance;
+        job.ownerInstance = instance;
       }
       update();
     };
@@ -8043,13 +8434,13 @@ Server rendered element contains fewer child nodes than client vdom.`
       if (instance.type.__hmrId) {
         unregisterHMR(instance);
       }
-      const { bum, scope, update, subTree, um } = instance;
+      const { bum, scope, job, subTree, um } = instance;
       if (bum) {
         invokeArrayFns(bum);
       }
       scope.stop();
-      if (update) {
-        update.active = false;
+      if (job) {
+        job.flags |= 8;
         unmount(subTree, instance, parentSuspense, doRemove);
       }
       if (um) {
@@ -8135,8 +8526,14 @@ Server rendered element contains fewer child nodes than client vdom.`
   function resolveChildrenNamespace({ type, props }, currentNamespace) {
     return currentNamespace === "svg" && type === "foreignObject" || currentNamespace === "mathml" && type === "annotation-xml" && props && props.encoding && props.encoding.includes("html") ? void 0 : currentNamespace;
   }
-  function toggleRecurse({ effect, update }, allowed) {
-    effect.allowRecurse = update.allowRecurse = allowed;
+  function toggleRecurse({ effect, job }, allowed) {
+    if (allowed) {
+      effect.flags |= 32;
+      job.flags |= 4;
+    } else {
+      effect.flags &= ~32;
+      job.flags &= ~4;
+    }
   }
   function needTransition(parentSuspense, transition) {
     return (!parentSuspense || parentSuspense && !parentSuspense.pendingBranch) && transition && !transition.persisted;
@@ -8876,6 +9273,7 @@ Component that was made reactive: `,
       effect: null,
       update: null,
       // will be set synchronously right after creation
+      job: null,
       scope: new EffectScope(
         true
         /* detached */
@@ -9369,7 +9767,8 @@ Component that was made reactive: `,
             {},
             ["span", vueStyle, genRefFlag(obj)],
             "<",
-            formatValue(obj.value),
+            // avoid debugger accessing value affecting behavior
+            formatValue("_value" in obj ? obj._value : obj),
             `>`
           ];
         } else if (isReactive(obj)) {
@@ -9549,7 +9948,7 @@ Component that was made reactive: `,
     return true;
   }
 
-  const version = "3.4.26";
+  const version = "3.5.0-alpha.2";
   const warn = warn$1 ;
   const ErrorTypeStrings = ErrorTypeStrings$1 ;
   const devtools = devtools$1 ;
@@ -10992,7 +11391,9 @@ Expected function or array of functions, received type ${typeof value}.`
         return;
       }
       const eventKey = hyphenate(event.key);
-      if (modifiers.some((k) => k === eventKey || keyNames[k] === eventKey)) {
+      if (modifiers.some(
+        (k) => k === eventKey || keyNames[k] === eventKey
+      )) {
         return fn(event);
       }
     });