@vue/runtime-dom 3.3.6 → 3.4.0-alpha.1

package/dist/runtime-dom.global.js

@@ -357,117 +357,120 @@ var VueRuntimeDOM = (function (exports) {
     }
   }
 
-  const createDep = (effects) => {
-    const dep = new Set(effects);
-    dep.w = 0;
-    dep.n = 0;
-    return dep;
-  };
-  const wasTracked = (dep) => (dep.w & trackOpBit) > 0;
-  const newTracked = (dep) => (dep.n & trackOpBit) > 0;
-  const initDepMarkers = ({ deps }) => {
-    if (deps.length) {
-      for (let i = 0; i < deps.length; i++) {
-        deps[i].w |= trackOpBit;
-      }
-    }
-  };
-  const finalizeDepMarkers = (effect) => {
-    const { deps } = effect;
-    if (deps.length) {
-      let ptr = 0;
-      for (let i = 0; i < deps.length; i++) {
-        const dep = deps[i];
-        if (wasTracked(dep) && !newTracked(dep)) {
-          dep.delete(effect);
-        } else {
-          deps[ptr++] = dep;
-        }
-        dep.w &= ~trackOpBit;
-        dep.n &= ~trackOpBit;
-      }
-      deps.length = ptr;
-    }
-  };
-
-  const targetMap = /* @__PURE__ */ new WeakMap();
-  let effectTrackDepth = 0;
-  let trackOpBit = 1;
-  const maxMarkerBits = 30;
   let activeEffect;
-  const ITERATE_KEY = Symbol("iterate" );
-  const MAP_KEY_ITERATE_KEY = Symbol("Map key iterate" );
   class ReactiveEffect {
-    constructor(fn, scheduler = null, scope) {
+    constructor(fn, trigger, scheduler, scope) {
       this.fn = fn;
+      this.trigger = trigger;
       this.scheduler = scheduler;
       this.active = true;
       this.deps = [];
-      this.parent = void 0;
+      /**
+       * @internal
+       */
+      this._dirtyLevel = 3;
+      /**
+       * @internal
+       */
+      this._trackId = 0;
+      /**
+       * @internal
+       */
+      this._runnings = 0;
+      /**
+       * @internal
+       */
+      this._queryings = 0;
+      /**
+       * @internal
+       */
+      this._depsLength = 0;
       recordEffectScope(this, scope);
     }
+    get dirty() {
+      if (this._dirtyLevel === 1) {
+        this._dirtyLevel = 0;
+        this._queryings++;
+        pauseTracking();
+        for (const dep of this.deps) {
+          if (dep.computed) {
+            triggerComputed(dep.computed);
+            if (this._dirtyLevel >= 2) {
+              break;
+            }
+          }
+        }
+        resetTracking();
+        this._queryings--;
+      }
+      return this._dirtyLevel >= 2;
+    }
+    set dirty(v) {
+      this._dirtyLevel = v ? 3 : 0;
+    }
     run() {
+      this._dirtyLevel = 0;
       if (!this.active) {
         return this.fn();
       }
-      let parent = activeEffect;
       let lastShouldTrack = shouldTrack;
-      while (parent) {
-        if (parent === this) {
-          return;
-        }
-        parent = parent.parent;
-      }
+      let lastEffect = activeEffect;
       try {
-        this.parent = activeEffect;
-        activeEffect = this;
         shouldTrack = true;
-        trackOpBit = 1 << ++effectTrackDepth;
-        if (effectTrackDepth <= maxMarkerBits) {
-          initDepMarkers(this);
-        } else {
-          cleanupEffect(this);
-        }
+        activeEffect = this;
+        this._runnings++;
+        preCleanupEffect(this);
         return this.fn();
       } finally {
-        if (effectTrackDepth <= maxMarkerBits) {
-          finalizeDepMarkers(this);
-        }
-        trackOpBit = 1 << --effectTrackDepth;
-        activeEffect = this.parent;
+        postCleanupEffect(this);
+        this._runnings--;
+        activeEffect = lastEffect;
         shouldTrack = lastShouldTrack;
-        this.parent = void 0;
-        if (this.deferStop) {
-          this.stop();
-        }
       }
     }
     stop() {
-      if (activeEffect === this) {
-        this.deferStop = true;
-      } else if (this.active) {
-        cleanupEffect(this);
-        if (this.onStop) {
-          this.onStop();
-        }
+      var _a;
+      if (this.active) {
+        preCleanupEffect(this);
+        postCleanupEffect(this);
+        (_a = this.onStop) == null ? void 0 : _a.call(this);
         this.active = false;
       }
     }
   }
-  function cleanupEffect(effect2) {
-    const { deps } = effect2;
-    if (deps.length) {
-      for (let i = 0; i < deps.length; i++) {
-        deps[i].delete(effect2);
+  function triggerComputed(computed) {
+    return computed.value;
+  }
+  function preCleanupEffect(effect2) {
+    effect2._trackId++;
+    effect2._depsLength = 0;
+  }
+  function postCleanupEffect(effect2) {
+    if (effect2.deps && effect2.deps.length > effect2._depsLength) {
+      for (let i = effect2._depsLength; i < effect2.deps.length; i++) {
+        cleanupDepEffect(effect2.deps[i], effect2);
+      }
+      effect2.deps.length = effect2._depsLength;
+    }
+  }
+  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();
       }
-      deps.length = 0;
     }
   }
   function effect(fn, options) {
     if (fn.effect instanceof ReactiveEffect) {
       fn = fn.effect.fn;
     }
-    const _effect = new ReactiveEffect(fn);
+    const _effect = new ReactiveEffect(fn, NOOP, () => {
+      if (_effect.dirty) {
+        _effect.run();
+      }
+    });
     if (options) {
       extend(_effect, options);
       if (options.scope)
@@ -484,6 +487,7 @@ var VueRuntimeDOM = (function (exports) {
     runner.effect.stop();
   }
   let shouldTrack = true;
+  let pauseScheduleStack = 0;
   const trackStack = [];
   function pauseTracking() {
     trackStack.push(shouldTrack);
@@ -493,6 +497,68 @@ 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 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++;
+      }
+      {
+        (_a = effect2.onTrack) == null ? void 0 : _a.call(effect2, extend({ effect: effect2 }, debuggerEventExtraInfo));
+      }
+    }
+  }
+  const queueEffectSchedulers = [];
+  function triggerEffects(dep, dirtyLevel, debuggerEventExtraInfo) {
+    var _a;
+    pauseScheduling();
+    for (const effect2 of dep.keys()) {
+      if (!effect2.allowRecurse && effect2._runnings) {
+        continue;
+      }
+      if (effect2._dirtyLevel < dirtyLevel && (!effect2._runnings || dirtyLevel !== 2)) {
+        const lastDirtyLevel = effect2._dirtyLevel;
+        effect2._dirtyLevel = dirtyLevel;
+        if (lastDirtyLevel === 0 && (!effect2._queryings || dirtyLevel !== 2)) {
+          {
+            (_a = effect2.onTrigger) == null ? void 0 : _a.call(effect2, extend({ effect: effect2 }, debuggerEventExtraInfo));
+          }
+          effect2.trigger();
+          if (effect2.scheduler) {
+            queueEffectSchedulers.push(effect2.scheduler);
+          }
+        }
+      }
+    }
+    resetScheduling();
+  }
+
+  const createDep = (cleanup, computed) => {
+    const dep = /* @__PURE__ */ new Map();
+    dep.cleanup = cleanup;
+    dep.computed = computed;
+    return dep;
+  };
+
+  const targetMap = /* @__PURE__ */ new WeakMap();
+  const ITERATE_KEY = Symbol("iterate" );
+  const MAP_KEY_ITERATE_KEY = Symbol("Map key iterate" );
   function track(target, type, key) {
     if (shouldTrack && activeEffect) {
       let depsMap = targetMap.get(target);
@@ -501,35 +567,17 @@ var VueRuntimeDOM = (function (exports) {
       }
       let dep = depsMap.get(key);
       if (!dep) {
-        depsMap.set(key, dep = createDep());
-      }
-      const eventInfo = { effect: activeEffect, target, type, key } ;
-      trackEffects(dep, eventInfo);
-    }
-  }
-  function trackEffects(dep, debuggerEventExtraInfo) {
-    let shouldTrack2 = false;
-    if (effectTrackDepth <= maxMarkerBits) {
-      if (!newTracked(dep)) {
-        dep.n |= trackOpBit;
-        shouldTrack2 = !wasTracked(dep);
-      }
-    } else {
-      shouldTrack2 = !dep.has(activeEffect);
-    }
-    if (shouldTrack2) {
-      dep.add(activeEffect);
-      activeEffect.deps.push(dep);
-      if (activeEffect.onTrack) {
-        activeEffect.onTrack(
-          extend(
-            {
-              effect: activeEffect
-            },
-            debuggerEventExtraInfo
-          )
-        );
+        depsMap.set(key, dep = createDep(() => depsMap.delete(key)));
       }
+      trackEffect(
+        activeEffect,
+        dep,
+        {
+          target,
+          type,
+          key
+        } 
+      );
     }
   }
   function trigger(target, type, key, newValue, oldValue, oldTarget) {
@@ -543,7 +591,7 @@ var VueRuntimeDOM = (function (exports) {
     } else if (key === "length" && isArray(target)) {
       const newLength = Number(newValue);
       depsMap.forEach((dep, key2) => {
-        if (key2 === "length" || key2 >= newLength) {
+        if (key2 === "length" || !isSymbol(key2) && key2 >= newLength) {
           deps.push(dep);
         }
       });
@@ -577,49 +625,24 @@ var VueRuntimeDOM = (function (exports) {
           break;
       }
     }
-    const eventInfo = { target, type, key, newValue, oldValue, oldTarget } ;
-    if (deps.length === 1) {
-      if (deps[0]) {
-        {
-          triggerEffects(deps[0], eventInfo);
-        }
-      }
-    } else {
-      const effects = [];
-      for (const dep of deps) {
-        if (dep) {
-          effects.push(...dep);
-        }
-      }
-      {
-        triggerEffects(createDep(effects), eventInfo);
-      }
-    }
-  }
-  function triggerEffects(dep, debuggerEventExtraInfo) {
-    const effects = isArray(dep) ? dep : [...dep];
-    for (const effect2 of effects) {
-      if (effect2.computed) {
-        triggerEffect(effect2, debuggerEventExtraInfo);
-      }
-    }
-    for (const effect2 of effects) {
-      if (!effect2.computed) {
-        triggerEffect(effect2, debuggerEventExtraInfo);
-      }
-    }
-  }
-  function triggerEffect(effect2, debuggerEventExtraInfo) {
-    if (effect2 !== activeEffect || effect2.allowRecurse) {
-      if (effect2.onTrigger) {
-        effect2.onTrigger(extend({ effect: effect2 }, debuggerEventExtraInfo));
-      }
-      if (effect2.scheduler) {
-        effect2.scheduler();
-      } else {
-        effect2.run();
+    pauseScheduling();
+    for (const dep of deps) {
+      if (dep) {
+        triggerEffects(
+          dep,
+          3,
+          {
+            target,
+            type,
+            key,
+            newValue,
+            oldValue,
+            oldTarget
+          } 
+        );
       }
     }
+    resetScheduling();
   }
   function getDepFromReactive(object, key) {
     var _a;
@@ -650,7 +673,9 @@ var VueRuntimeDOM = (function (exports) {
     ["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;
       };
@@ -1189,30 +1214,93 @@ var VueRuntimeDOM = (function (exports) {
   const toReactive = (value) => isObject(value) ? reactive(value) : value;
   const toReadonly = (value) => isObject(value) ? readonly(value) : value;
 
+  class ComputedRefImpl {
+    constructor(getter, _setter, isReadonly, isSSR) {
+      this._setter = _setter;
+      this.dep = void 0;
+      this.__v_isRef = true;
+      this["__v_isReadonly"] = false;
+      this.effect = new ReactiveEffect(getter, () => {
+        triggerRefValue(this, 1);
+      });
+      this.effect.computed = this;
+      this.effect.active = this._cacheable = !isSSR;
+      this["__v_isReadonly"] = isReadonly;
+    }
+    get value() {
+      const self = toRaw(this);
+      trackRefValue(self);
+      if (!self._cacheable || self.effect.dirty) {
+        if (hasChanged(self._value, self._value = self.effect.run())) {
+          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 = () => {
+        console.warn("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) {
     if (shouldTrack && activeEffect) {
       ref2 = toRaw(ref2);
-      {
-        trackEffects(ref2.dep || (ref2.dep = createDep()), {
+      trackEffect(
+        activeEffect,
+        ref2.dep || (ref2.dep = createDep(
+          () => ref2.dep = void 0,
+          ref2 instanceof ComputedRefImpl ? ref2 : void 0
+        )),
+        {
           target: ref2,
           type: "get",
           key: "value"
-        });
-      }
+        } 
+      );
     }
   }
-  function triggerRefValue(ref2, newVal) {
+  function triggerRefValue(ref2, dirtyLevel = 3, newVal) {
     ref2 = toRaw(ref2);
     const dep = ref2.dep;
     if (dep) {
-      {
-        triggerEffects(dep, {
+      triggerEffects(
+        dep,
+        dirtyLevel,
+        {
           target: ref2,
           type: "set",
           key: "value",
           newValue: newVal
-        });
-      }
+        } 
+      );
     }
   }
   function isRef(r) {
@@ -1248,12 +1336,12 @@ var VueRuntimeDOM = (function (exports) {
       if (hasChanged(newVal, this._rawValue)) {
         this._rawValue = newVal;
         this._value = useDirectValue ? newVal : toReactive(newVal);
-        triggerRefValue(this, newVal);
+        triggerRefValue(this, 3, newVal);
       }
     }
   }
   function triggerRef(ref2) {
-    triggerRefValue(ref2, ref2.value );
+    triggerRefValue(ref2, 3, ref2.value );
   }
   function unref(ref2) {
     return isRef(ref2) ? ref2.value : ref2;
@@ -1351,57 +1439,6 @@ var VueRuntimeDOM = (function (exports) {
     return isRef(val) ? val : new ObjectRefImpl(source, key, defaultValue);
   }
 
-  class ComputedRefImpl {
-    constructor(getter, _setter, isReadonly, isSSR) {
-      this._setter = _setter;
-      this.dep = void 0;
-      this.__v_isRef = true;
-      this["__v_isReadonly"] = false;
-      this._dirty = true;
-      this.effect = new ReactiveEffect(getter, () => {
-        if (!this._dirty) {
-          this._dirty = true;
-          triggerRefValue(this);
-        }
-      });
-      this.effect.computed = this;
-      this.effect.active = this._cacheable = !isSSR;
-      this["__v_isReadonly"] = isReadonly;
-    }
-    get value() {
-      const self = toRaw(this);
-      trackRefValue(self);
-      if (self._dirty || !self._cacheable) {
-        self._dirty = false;
-        self._value = self.effect.run();
-      }
-      return self._value;
-    }
-    set value(newValue) {
-      this._setter(newValue);
-    }
-  }
-  function computed$1(getterOrOptions, debugOptions, isSSR = false) {
-    let getter;
-    let setter;
-    const onlyGetter = isFunction(getterOrOptions);
-    if (onlyGetter) {
-      getter = getterOrOptions;
-      setter = () => {
-        console.warn("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;
-  }
-
   const stack = [];
   function pushWarningContext(vnode) {
     stack.push(vnode);
@@ -1516,7 +1553,7 @@ var VueRuntimeDOM = (function (exports) {
     }
   }
 
-  const ErrorTypeStrings = {
+  const ErrorTypeStrings$1 = {
     ["sp"]: "serverPrefetch hook",
     ["bc"]: "beforeCreate hook",
     ["c"]: "created hook",
@@ -1577,7 +1614,7 @@ var VueRuntimeDOM = (function (exports) {
     if (instance) {
       let cur = instance.parent;
       const exposedInstance = instance.proxy;
-      const errorInfo = ErrorTypeStrings[type] ;
+      const errorInfo = ErrorTypeStrings$1[type] ;
       while (cur) {
         const errorCapturedHooks = cur.ec;
         if (errorCapturedHooks) {
@@ -1604,7 +1641,7 @@ var VueRuntimeDOM = (function (exports) {
   }
   function logError(err, type, contextVNode, throwInDev = true) {
     {
-      const info = ErrorTypeStrings[type];
+      const info = ErrorTypeStrings$1[type];
       if (contextVNode) {
         pushWarningContext(contextVNode);
       }
@@ -1639,8 +1676,13 @@ var VueRuntimeDOM = (function (exports) {
     let end = queue.length;
     while (start < end) {
       const middle = start + end >>> 1;
-      const middleJobId = getId(queue[middle]);
-      middleJobId < id ? start = middle + 1 : end = middle;
+      const middleJob = queue[middle];
+      const middleJobId = getId(middleJob);
+      if (middleJobId < id || middleJobId === id && middleJob.pre) {
+        start = middle + 1;
+      } else {
+        end = middle;
+      }
     }
     return start;
   }
@@ -1827,6 +1869,7 @@ var VueRuntimeDOM = (function (exports) {
       }
       instance.renderCache = [];
       isHmrUpdating = true;
+      instance.effect.dirty = true;
       instance.update();
       isHmrUpdating = false;
     });
@@ -1854,6 +1897,7 @@ var VueRuntimeDOM = (function (exports) {
         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();
@@ -2755,14 +2799,16 @@ var VueRuntimeDOM = (function (exports) {
           parentComponent: parentComponent2,
           container: container2
         } = suspense;
+        let delayEnter = false;
         if (suspense.isHydrating) {
           suspense.isHydrating = false;
         } else if (!resume) {
-          const delayEnter = activeBranch && pendingBranch.transition && pendingBranch.transition.mode === "out-in";
+          delayEnter = activeBranch && pendingBranch.transition && pendingBranch.transition.mode === "out-in";
           if (delayEnter) {
             activeBranch.transition.afterLeave = () => {
               if (pendingId === suspense.pendingId) {
                 move(pendingBranch, container2, anchor2, 0);
+                queuePostFlushCb(effects);
               }
             };
           }
@@ -2788,7 +2834,7 @@ var VueRuntimeDOM = (function (exports) {
           }
           parent = parent.parent;
         }
-        if (!hasUnresolvedAncestor) {
+        if (!hasUnresolvedAncestor && !delayEnter) {
           queuePostFlushCb(effects);
         }
         suspense.effects = [];
@@ -3036,8 +3082,15 @@ var VueRuntimeDOM = (function (exports) {
     }
     return doWatch(source, cb, options);
   }
-  function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EMPTY_OBJ) {
+  function doWatch(source, cb, { immediate, deep, flush, once, onTrack, onTrigger } = EMPTY_OBJ) {
     var _a;
+    if (cb && once) {
+      const _cb = cb;
+      cb = (...args) => {
+        _cb(...args);
+        unwatch();
+      };
+    }
     if (!cb) {
       if (immediate !== void 0) {
         warn(
@@ -3049,6 +3102,11 @@ var VueRuntimeDOM = (function (exports) {
           `watch() "deep" option is only respected when using the watch(source, callback, options?) signature.`
         );
       }
+      if (once !== void 0) {
+        warn(
+          `watch() "once" option is only respected when using the watch(source, callback, options?) signature.`
+        );
+      }
     }
     const warnInvalidSource = (s) => {
       warn(
@@ -3116,7 +3174,7 @@ var VueRuntimeDOM = (function (exports) {
     };
     let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
     const job = () => {
-      if (!effect.active) {
+      if (!effect.active || !effect.dirty) {
         return;
       }
       if (cb) {
@@ -3149,7 +3207,13 @@ var VueRuntimeDOM = (function (exports) {
         job.id = instance.uid;
       scheduler = () => queueJob(job);
     }
-    const effect = new ReactiveEffect(getter, scheduler);
+    const effect = new ReactiveEffect(getter, NOOP, scheduler);
+    const unwatch = () => {
+      effect.stop();
+      if (instance && instance.scope) {
+        remove(instance.scope.effects, effect);
+      }
+    };
     {
       effect.onTrack = onTrack;
       effect.onTrigger = onTrigger;
@@ -3168,12 +3232,6 @@ var VueRuntimeDOM = (function (exports) {
     } else {
       effect.run();
     }
-    const unwatch = () => {
-      effect.stop();
-      if (instance && instance.scope) {
-        remove(instance.scope.effects, effect);
-      }
-    };
     return unwatch;
   }
   function instanceWatch(source, value, options) {
@@ -3403,6 +3461,7 @@ var VueRuntimeDOM = (function (exports) {
             leavingHooks.afterLeave = () => {
               state.isLeaving = false;
               if (instance.update.active !== false) {
+                instance.effect.dirty = true;
                 instance.update();
               }
             };
@@ -3738,6 +3797,7 @@ var VueRuntimeDOM = (function (exports) {
         load().then(() => {
           loaded.value = true;
           if (instance.parent && isKeepAlive(instance.parent.vnode)) {
+            instance.parent.effect.dirty = true;
             queueJob(instance.parent.update);
           }
         }).catch((err) => {
@@ -4032,7 +4092,7 @@ var VueRuntimeDOM = (function (exports) {
       }
       return wrappedHook;
     } else {
-      const apiName = toHandlerKey(ErrorTypeStrings[type].replace(/ hook$/, ""));
+      const apiName = toHandlerKey(ErrorTypeStrings$1[type].replace(/ hook$/, ""));
       warn(
         `${apiName} is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup().` + (` If you are using async setup(), make sure to register lifecycle hooks before the first await statement.` )
       );
@@ -4254,7 +4314,10 @@ If this is a native custom element, make sure to exclude it from component resol
       $root: (i) => getPublicInstance(i.root),
       $emit: (i) => i.emit,
       $options: (i) => resolveMergedOptions(i) ,
-      $forceUpdate: (i) => i.f || (i.f = () => queueJob(i.update)),
+      $forceUpdate: (i) => i.f || (i.f = () => {
+        i.effect.dirty = true;
+        queueJob(i.update);
+      }),
       $nextTick: (i) => i.n || (i.n = nextTick.bind(i.proxy)),
       $watch: (i) => instanceWatch.bind(i) 
     })
@@ -5930,7 +5993,14 @@ If you want to remount the same app, move your app creation logic into a factory
           break;
         case Comment:
           if (domType !== 8 /* COMMENT */ || isFragmentStart) {
-            nextNode = onMismatch();
+            if (node.tagName.toLowerCase() === "template") {
+              const content = vnode.el.content.firstChild;
+              replaceNode(content, node, parentComponent);
+              vnode.el = node = content;
+              nextNode = nextSibling(node);
+            } else {
+              nextNode = onMismatch();
+            }
           } else {
             nextNode = nextSibling(node);
           }
@@ -5972,7 +6042,7 @@ If you want to remount the same app, move your app creation logic into a factory
           break;
         default:
           if (shapeFlag & 1) {
-            if (domType !== 1 /* ELEMENT */ || vnode.type.toLowerCase() !== node.tagName.toLowerCase()) {
+            if ((domType !== 1 /* ELEMENT */ || vnode.type.toLowerCase() !== node.tagName.toLowerCase()) && !isTemplateNode(node)) {
               nextNode = onMismatch();
             } else {
               nextNode = hydrateElement(
@@ -5987,6 +6057,13 @@ If you want to remount the same app, move your app creation logic into a factory
           } else if (shapeFlag & 6) {
             vnode.slotScopeIds = slotScopeIds;
             const container = parentNode(node);
+            if (isFragmentStart) {
+              nextNode = locateClosingAnchor(node);
+            } else if (isComment(node) && node.data === "teleport start") {
+              nextNode = locateClosingAnchor(node, node.data, "teleport end");
+            } else {
+              nextNode = nextSibling(node);
+            }
             mountComponent(
               vnode,
               container,
@@ -5996,10 +6073,6 @@ If you want to remount the same app, move your app creation logic into a factory
               isSVGContainer(container),
               optimized
             );
-            nextNode = isFragmentStart ? locateClosingAsyncAnchor(node) : nextSibling(node);
-            if (nextNode && isComment(nextNode) && nextNode.data === "teleport end") {
-              nextNode = nextSibling(nextNode);
-            }
             if (isAsyncWrapper(vnode)) {
               let subTree;
               if (isFragmentStart) {
@@ -6049,7 +6122,7 @@ If you want to remount the same app, move your app creation logic into a factory
     };
     const hydrateElement = (el, vnode, parentComponent, parentSuspense, slotScopeIds, optimized) => {
       optimized = optimized || !!vnode.dynamicChildren;
-      const { type, props, patchFlag, shapeFlag, dirs } = vnode;
+      const { type, props, patchFlag, shapeFlag, dirs, transition } = vnode;
       const forcePatchValue = type === "input" && dirs || type === "option";
       {
         if (dirs) {
@@ -6086,12 +6159,23 @@ If you want to remount the same app, move your app creation logic into a factory
         if (vnodeHooks = props && props.onVnodeBeforeMount) {
           invokeVNodeHook(vnodeHooks, parentComponent, vnode);
         }
+        let needCallTransitionHooks = false;
+        if (isTemplateNode(el)) {
+          needCallTransitionHooks = needTransition(parentSuspense, transition) && parentComponent && parentComponent.vnode.props && parentComponent.vnode.props.appear;
+          const content = el.content.firstChild;
+          if (needCallTransitionHooks) {
+            transition.beforeEnter(content);
+          }
+          replaceNode(content, el, parentComponent);
+          vnode.el = el = content;
+        }
         if (dirs) {
           invokeDirectiveHook(vnode, null, parentComponent, "beforeMount");
         }
-        if ((vnodeHooks = props && props.onVnodeMounted) || dirs) {
+        if ((vnodeHooks = props && props.onVnodeMounted) || dirs || needCallTransitionHooks) {
           queueEffectWithSuspense(() => {
             vnodeHooks && invokeVNodeHook(vnodeHooks, parentComponent, vnode);
+            needCallTransitionHooks && transition.enter(el);
             dirs && invokeDirectiveHook(vnode, null, parentComponent, "mounted");
           }, parentSuspense);
         }
@@ -6209,7 +6293,7 @@ If you want to remount the same app, move your app creation logic into a factory
       );
       vnode.el = null;
       if (isFragment) {
-        const end = locateClosingAsyncAnchor(node);
+        const end = locateClosingAnchor(node);
         while (true) {
           const next2 = nextSibling(node);
           if (next2 && next2 !== end) {
@@ -6234,14 +6318,14 @@ If you want to remount the same app, move your app creation logic into a factory
       );
       return next;
     };
-    const locateClosingAsyncAnchor = (node) => {
+    const locateClosingAnchor = (node, open = "[", close = "]") => {
       let match = 0;
       while (node) {
         node = nextSibling(node);
         if (node && isComment(node)) {
-          if (node.data === "[")
+          if (node.data === open)
             match++;
-          if (node.data === "]") {
+          if (node.data === close) {
             if (match === 0) {
               return nextSibling(node);
             } else {
@@ -6252,6 +6336,23 @@ If you want to remount the same app, move your app creation logic into a factory
       }
       return node;
     };
+    const replaceNode = (newNode, oldNode, parentComponent) => {
+      const parentNode2 = oldNode.parentNode;
+      if (parentNode2) {
+        parentNode2.replaceChild(newNode, oldNode);
+      }
+      let parent = parentComponent;
+      while (parent) {
+        if (parent.vnode.el === oldNode) {
+          parent.vnode.el = newNode;
+          parent.subTree.el = newNode;
+        }
+        parent = parent.parent;
+      }
+    };
+    const isTemplateNode = (node) => {
+      return node.nodeType === 1 /* ELEMENT */ && node.tagName.toLowerCase() === "template";
+    };
     return [hydrate, hydrateNode];
   }
 
@@ -6579,7 +6680,7 @@ If you want to remount the same app, move your app creation logic into a factory
       if (dirs) {
         invokeDirectiveHook(vnode, null, parentComponent, "beforeMount");
       }
-      const needCallTransitionHooks = (!parentSuspense || parentSuspense && !parentSuspense.pendingBranch) && transition && !transition.persisted;
+      const needCallTransitionHooks = needTransition(parentSuspense, transition);
       if (needCallTransitionHooks) {
         transition.beforeEnter(el);
       }
@@ -6967,6 +7068,7 @@ If you want to remount the same app, move your app creation logic into a factory
         } else {
           instance.next = n2;
           invalidateJob(instance.update);
+          instance.effect.dirty = true;
           instance.update();
         }
       } else {
@@ -7136,11 +7238,16 @@ If you want to remount the same app, move your app creation logic into a factory
       };
       const effect = instance.effect = new ReactiveEffect(
         componentUpdateFn,
+        NOOP,
         () => queueJob(update),
         instance.scope
         // track it in component's effect scope
       );
-      const update = instance.update = () => effect.run();
+      const update = instance.update = () => {
+        if (effect.dirty) {
+          effect.run();
+        }
+      };
       update.id = instance.uid;
       toggleRecurse(instance, true);
       {
@@ -7471,8 +7578,8 @@ If you want to remount the same app, move your app creation logic into a factory
         moveStaticNode(vnode, container, anchor);
         return;
       }
-      const needTransition = moveType !== 2 && shapeFlag & 1 && transition;
-      if (needTransition) {
+      const needTransition2 = moveType !== 2 && shapeFlag & 1 && transition;
+      if (needTransition2) {
         if (moveType === 0) {
           transition.beforeEnter(el);
           hostInsert(el, container, anchor);
@@ -7692,6 +7799,9 @@ If you want to remount the same app, move your app creation logic into a factory
   function toggleRecurse({ effect, update }, allowed) {
     effect.allowRecurse = update.allowRecurse = allowed;
   }
+  function needTransition(parentSuspense, transition) {
+    return (!parentSuspense || parentSuspense && !parentSuspense.pendingBranch) && transition && !transition.persisted;
+  }
   function traverseStaticChildren(n1, n2, shallow = false) {
     const ch1 = n1.children;
     const ch2 = n2.children;
@@ -9021,7 +9131,8 @@ Component that was made reactive: `,
     return true;
   }
 
-  const version = "3.3.6";
+  const version = "3.4.0-alpha.1";
+  const ErrorTypeStrings = ErrorTypeStrings$1 ;
   const ssrUtils = null;
   const resolveFilter = null;
   const compatUtils = null;
@@ -10499,6 +10610,7 @@ Component that was made reactive: `,
   exports.BaseTransitionPropsValidators = BaseTransitionPropsValidators;
   exports.Comment = Comment;
   exports.EffectScope = EffectScope;
+  exports.ErrorTypeStrings = ErrorTypeStrings;
   exports.Fragment = Fragment;
   exports.KeepAlive = KeepAlive;
   exports.ReactiveEffect = ReactiveEffect;