@vue/compat 3.5.0-beta.1 → 3.5.0-beta.3

package/dist/vue.cjs.js

@@ -1,5 +1,5 @@
 /**
-* @vue/compat v3.5.0-beta.1
+* @vue/compat v3.5.0-beta.3
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -7,7 +7,7 @@
 
 var parser = require('@babel/parser');
 var estreeWalker = require('estree-walker');
-var decode_js = require('entities/dist/decode.js');
+var decode_js = require('entities/lib/decode.js');
 var sourceMapJs = require('source-map-js');
 
 /*! #__NO_SIDE_EFFECTS__ */
@@ -583,11 +583,11 @@ class ReactiveEffect {
     }
   }
   pause() {
-    this.flags |= 128;
+    this.flags |= 64;
   }
   resume() {
-    if (this.flags & 128) {
-      this.flags &= ~128;
+    if (this.flags & 64) {
+      this.flags &= ~64;
       if (pausedQueueEffects.has(this)) {
         pausedQueueEffects.delete(this);
         this.trigger();
@@ -601,9 +601,6 @@ class ReactiveEffect {
     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;
@@ -647,7 +644,7 @@ class ReactiveEffect {
     }
   }
   trigger() {
-    if (this.flags & 128) {
+    if (this.flags & 64) {
       pausedQueueEffects.add(this);
     } else if (this.scheduler) {
       this.scheduler();
@@ -677,6 +674,7 @@ function endBatch() {
     batchDepth--;
     return;
   }
+  batchDepth--;
   let error;
   while (batchedEffect) {
     let e = batchedEffect;
@@ -695,7 +693,6 @@ function endBatch() {
       e = next;
     }
   }
-  batchDepth--;
   if (error) throw error;
 }
 function prepareDeps(sub) {
@@ -1098,26 +1095,26 @@ const arrayInstrumentations = {
     });
   },
   every(fn, thisArg) {
-    return apply(this, "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));
+    return apply(this, "filter", fn, thisArg, (v) => v.map(toReactive), arguments);
   },
   find(fn, thisArg) {
-    return apply(this, "find", fn, thisArg, toReactive);
+    return apply(this, "find", fn, thisArg, toReactive, arguments);
   },
   findIndex(fn, thisArg) {
-    return apply(this, "findIndex", fn, thisArg);
+    return apply(this, "findIndex", fn, thisArg, void 0, arguments);
   },
   findLast(fn, thisArg) {
-    return apply(this, "findLast", fn, thisArg, toReactive);
+    return apply(this, "findLast", fn, thisArg, toReactive, arguments);
   },
   findLastIndex(fn, thisArg) {
-    return apply(this, "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);
+    return apply(this, "forEach", fn, thisArg, void 0, arguments);
   },
   includes(...args) {
     return searchProxy(this, "includes", args);
@@ -1133,7 +1130,7 @@ const arrayInstrumentations = {
     return searchProxy(this, "lastIndexOf", args);
   },
   map(fn, thisArg) {
-    return apply(this, "map", fn, thisArg);
+    return apply(this, "map", fn, thisArg, void 0, arguments);
   },
   pop() {
     return noTracking(this, "pop");
@@ -1152,7 +1149,7 @@ const arrayInstrumentations = {
   },
   // slice could use ARRAY_ITERATE but also seems to beg for range tracking
   some(fn, thisArg) {
-    return apply(this, "some", fn, thisArg);
+    return apply(this, "some", fn, thisArg, void 0, arguments);
   },
   splice(...args) {
     return noTracking(this, "splice", args);
@@ -1188,12 +1185,17 @@ function iterator(self, method, wrapValue) {
   }
   return iter;
 }
-function apply(self, method, fn, thisArg, wrappedRetFn) {
+const arrayProto = Array.prototype;
+function apply(self, method, fn, thisArg, wrappedRetFn, args) {
   const arr = shallowReadArray(self);
-  let needsWrap = false;
+  const needsWrap = arr !== self && !isShallow(self);
+  const methodFn = arr[method];
+  if (methodFn !== arrayProto[method]) {
+    const result2 = methodFn.apply(arr, args);
+    return needsWrap ? toReactive(result2) : result2;
+  }
   let wrappedFn = fn;
   if (arr !== self) {
-    needsWrap = !isShallow(self);
     if (needsWrap) {
       wrappedFn = function(item, index) {
         return fn.call(this, toReactive(item), index, self);
@@ -1204,7 +1206,7 @@ function apply(self, method, fn, thisArg, wrappedRetFn) {
       };
     }
   }
-  const result = arr[method](wrappedFn, thisArg);
+  const result = methodFn.call(arr, wrappedFn, thisArg);
   return needsWrap && wrappedRetFn ? wrappedRetFn(result) : result;
 }
 function reduce(self, method, fn, args) {
@@ -2055,6 +2057,220 @@ const TriggerOpTypes = {
   "CLEAR": "clear"
 };
 
+const INITIAL_WATCHER_VALUE = {};
+const cleanupMap = /* @__PURE__ */ new WeakMap();
+let activeWatcher = void 0;
+function getCurrentWatcher() {
+  return activeWatcher;
+}
+function onWatcherCleanup(cleanupFn, failSilently = false, owner = activeWatcher) {
+  if (owner) {
+    let cleanups = cleanupMap.get(owner);
+    if (!cleanups) cleanupMap.set(owner, cleanups = []);
+    cleanups.push(cleanupFn);
+  } else if (!failSilently) {
+    warn$2(
+      `onWatcherCleanup() was called when there was no active watcher to associate with.`
+    );
+  }
+}
+function watch$1(source, cb, options = EMPTY_OBJ) {
+  const { immediate, deep, once, scheduler, augmentJob, call } = options;
+  const warnInvalidSource = (s) => {
+    (options.onWarn || warn$2)(
+      `Invalid watch source: `,
+      s,
+      `A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.`
+    );
+  };
+  const reactiveGetter = (source2) => {
+    if (deep) return source2;
+    if (isShallow(source2) || deep === false || deep === 0)
+      return traverse(source2, 1);
+    return traverse(source2);
+  };
+  let effect;
+  let getter;
+  let cleanup;
+  let boundCleanup;
+  let forceTrigger = false;
+  let isMultiSource = false;
+  if (isRef(source)) {
+    getter = () => source.value;
+    forceTrigger = isShallow(source);
+  } else if (isReactive(source)) {
+    getter = () => reactiveGetter(source);
+    forceTrigger = true;
+  } else if (isArray(source)) {
+    isMultiSource = true;
+    forceTrigger = source.some((s) => isReactive(s) || isShallow(s));
+    getter = () => source.map((s) => {
+      if (isRef(s)) {
+        return s.value;
+      } else if (isReactive(s)) {
+        return reactiveGetter(s);
+      } else if (isFunction(s)) {
+        return call ? call(s, 2) : s();
+      } else {
+        warnInvalidSource(s);
+      }
+    });
+  } else if (isFunction(source)) {
+    if (cb) {
+      getter = call ? () => call(source, 2) : source;
+    } else {
+      getter = () => {
+        if (cleanup) {
+          pauseTracking();
+          try {
+            cleanup();
+          } finally {
+            resetTracking();
+          }
+        }
+        const currentEffect = activeWatcher;
+        activeWatcher = effect;
+        try {
+          return call ? call(source, 3, [boundCleanup]) : source(boundCleanup);
+        } finally {
+          activeWatcher = currentEffect;
+        }
+      };
+    }
+  } else {
+    getter = NOOP;
+    warnInvalidSource(source);
+  }
+  if (cb && deep) {
+    const baseGetter = getter;
+    const depth = deep === true ? Infinity : deep;
+    getter = () => traverse(baseGetter(), depth);
+  }
+  if (once) {
+    if (cb) {
+      const _cb = cb;
+      cb = (...args) => {
+        _cb(...args);
+        effect.stop();
+      };
+    } else {
+      const _getter = getter;
+      getter = () => {
+        _getter();
+        effect.stop();
+      };
+    }
+  }
+  let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
+  const job = (immediateFirstRun) => {
+    if (!(effect.flags & 1) || !effect.dirty && !immediateFirstRun) {
+      return;
+    }
+    if (cb) {
+      const newValue = effect.run();
+      if (deep || forceTrigger || (isMultiSource ? newValue.some((v, i) => hasChanged(v, oldValue[i])) : hasChanged(newValue, oldValue))) {
+        if (cleanup) {
+          cleanup();
+        }
+        const currentWatcher = activeWatcher;
+        activeWatcher = effect;
+        try {
+          const args = [
+            newValue,
+            // pass undefined as the old value when it's changed for the first time
+            oldValue === INITIAL_WATCHER_VALUE ? void 0 : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE ? [] : oldValue,
+            boundCleanup
+          ];
+          call ? call(cb, 3, args) : (
+            // @ts-expect-error
+            cb(...args)
+          );
+          oldValue = newValue;
+        } finally {
+          activeWatcher = currentWatcher;
+        }
+      }
+    } else {
+      effect.run();
+    }
+  };
+  if (augmentJob) {
+    augmentJob(job);
+  }
+  effect = new ReactiveEffect(getter);
+  effect.scheduler = scheduler ? () => scheduler(job, false) : job;
+  boundCleanup = (fn) => onWatcherCleanup(fn, false, effect);
+  cleanup = effect.onStop = () => {
+    const cleanups = cleanupMap.get(effect);
+    if (cleanups) {
+      if (call) {
+        call(cleanups, 4);
+      } else {
+        for (const cleanup2 of cleanups) cleanup2();
+      }
+      cleanupMap.delete(effect);
+    }
+  };
+  {
+    effect.onTrack = options.onTrack;
+    effect.onTrigger = options.onTrigger;
+  }
+  if (cb) {
+    if (immediate) {
+      job(true);
+    } else {
+      oldValue = effect.run();
+    }
+  } else if (scheduler) {
+    scheduler(job.bind(null, true), true);
+  } else {
+    effect.run();
+  }
+  const scope = getCurrentScope();
+  const watchHandle = () => {
+    effect.stop();
+    if (scope) {
+      remove(scope.effects, effect);
+    }
+  };
+  watchHandle.pause = effect.pause.bind(effect);
+  watchHandle.resume = effect.resume.bind(effect);
+  watchHandle.stop = watchHandle;
+  return watchHandle;
+}
+function traverse(value, depth = Infinity, seen) {
+  if (depth <= 0 || !isObject(value) || value["__v_skip"]) {
+    return value;
+  }
+  seen = seen || /* @__PURE__ */ new Set();
+  if (seen.has(value)) {
+    return value;
+  }
+  seen.add(value);
+  depth--;
+  if (isRef(value)) {
+    traverse(value.value, depth, seen);
+  } else if (isArray(value)) {
+    for (let i = 0; i < value.length; i++) {
+      traverse(value[i], depth, seen);
+    }
+  } else if (isSet(value) || isMap(value)) {
+    value.forEach((v) => {
+      traverse(v, depth, seen);
+    });
+  } else if (isPlainObject(value)) {
+    for (const key in value) {
+      traverse(value[key], depth, seen);
+    }
+    for (const key of Object.getOwnPropertySymbols(value)) {
+      if (Object.prototype.propertyIsEnumerable.call(value, key)) {
+        traverse(value[key], depth, seen);
+      }
+    }
+  }
+  return value;
+}
+
 const stack$1 = [];
 function pushWarningContext(vnode) {
   stack$1.push(vnode);
@@ -2182,12 +2398,6 @@ const ErrorCodes = {
   "0": "SETUP_FUNCTION",
   "RENDER_FUNCTION": 1,
   "1": "RENDER_FUNCTION",
-  "WATCH_GETTER": 2,
-  "2": "WATCH_GETTER",
-  "WATCH_CALLBACK": 3,
-  "3": "WATCH_CALLBACK",
-  "WATCH_CLEANUP": 4,
-  "4": "WATCH_CLEANUP",
   "NATIVE_EVENT_HANDLER": 5,
   "5": "NATIVE_EVENT_HANDLER",
   "COMPONENT_EVENT_HANDLER": 6,
@@ -2339,7 +2549,7 @@ function nextTick(fn) {
   return fn ? p.then(this ? fn.bind(this) : fn) : p;
 }
 function findInsertionIndex(id) {
-  let start = flushIndex + 1;
+  let start = isFlushing ? flushIndex + 1 : 0;
   let end = queue.length;
   while (start < end) {
     const middle = start + end >>> 1;
@@ -2355,15 +2565,13 @@ function findInsertionIndex(id) {
 }
 function queueJob(job) {
   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 >= (queue[queue.length - 1] && queue[queue.length - 1].id || 0)
-    ) {
+    const jobId = getId(job);
+    const lastJob = queue[queue.length - 1];
+    if (!lastJob || // fast path when the job id is larger than the tail
+    !(job.flags & 2) && jobId >= getId(lastJob)) {
       queue.push(job);
     } else {
-      queue.splice(findInsertionIndex(job.id), 0, job);
+      queue.splice(findInsertionIndex(jobId), 0, job);
     }
     if (!(job.flags & 4)) {
       job.flags |= 1;
@@ -2377,12 +2585,6 @@ function queueFlush() {
     currentFlushPromise = resolvedPromise.then(flushJobs);
   }
 }
-function invalidateJob(job) {
-  const i = queue.indexOf(job);
-  if (i > flushIndex) {
-    queue.splice(i, 1);
-  }
-}
 function queuePostFlushCb(cb) {
   if (!isArray(cb)) {
     if (activePostFlushCbs && cb.id === -1) {
@@ -2444,24 +2646,13 @@ function flushPostFlushCbs(seen) {
     postFlushIndex = 0;
   }
 }
-const getId = (job) => job.id == null ? Infinity : job.id;
-const comparator = (a, b) => {
-  const diff = getId(a) - getId(b);
-  if (diff === 0) {
-    const isAPre = a.flags & 2;
-    const isBPre = b.flags & 2;
-    if (isAPre && !isBPre) return -1;
-    if (isBPre && !isAPre) return 1;
-  }
-  return diff;
-};
+const getId = (job) => job.id == null ? job.flags & 2 ? -1 : Infinity : job.id;
 function flushJobs(seen) {
   isFlushPending = false;
   isFlushing = true;
   {
     seen = seen || /* @__PURE__ */ new Map();
   }
-  queue.sort(comparator);
   const check = (job) => checkRecursiveUpdates(seen, job) ;
   try {
     for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {
@@ -3102,7 +3293,7 @@ function on(instance, event, fn) {
 function once(instance, event, fn) {
   const wrapped = (...args) => {
     off(instance, event, wrapped);
-    fn.call(instance.proxy, ...args);
+    fn.apply(instance.proxy, args);
   };
   wrapped.fn = fn;
   on(instance, event, wrapped);
@@ -4140,6 +4331,7 @@ const logMismatchError = () => {
 const isSVGContainer = (container) => container.namespaceURI.includes("svg") && container.tagName !== "foreignObject";
 const isMathMLContainer = (container) => container.namespaceURI.includes("MathML");
 const getContainerType = (container) => {
+  if (container.nodeType !== 1) return void 0;
   if (isSVGContainer(container)) return "svg";
   if (isMathMLContainer(container)) return "mathml";
   return void 0;
@@ -5068,7 +5260,7 @@ const KeepAliveImpl = {
     function pruneCache(filter) {
       cache.forEach((vnode, key) => {
         const name = getComponentName(vnode.type);
-        if (name && (!filter || !filter(name))) {
+        if (name && !filter(name)) {
           pruneCacheEntry(key);
         }
       });
@@ -5190,6 +5382,7 @@ function matches(pattern, name) {
   } else if (isString(pattern)) {
     return pattern.split(",").includes(name);
   } else if (isRegExp(pattern)) {
+    pattern.lastIndex = 0;
     return pattern.test(name);
   }
   return false;
@@ -6634,23 +6827,43 @@ function callHook$1(hook, instance, type) {
   );
 }
 function createWatcher(raw, ctx, publicThis, key) {
-  const getter = key.includes(".") ? createPathGetter(publicThis, key) : () => publicThis[key];
+  let getter = key.includes(".") ? createPathGetter(publicThis, key) : () => publicThis[key];
+  const options = {};
+  {
+    const instance = currentInstance && getCurrentScope() === currentInstance.scope ? currentInstance : null;
+    const newValue = getter();
+    if (isArray(newValue) && isCompatEnabled$1("WATCH_ARRAY", instance)) {
+      options.deep = true;
+    }
+    const baseGetter = getter;
+    getter = () => {
+      const val = baseGetter();
+      if (isArray(val) && checkCompatEnabled$1("WATCH_ARRAY", instance)) {
+        traverse(val);
+      }
+      return val;
+    };
+  }
   if (isString(raw)) {
     const handler = ctx[raw];
     if (isFunction(handler)) {
-      watch(getter, handler);
+      {
+        watch(getter, handler, options);
+      }
     } else {
       warn$1(`Invalid watch handler specified by key "${raw}"`, handler);
     }
   } else if (isFunction(raw)) {
-    watch(getter, raw.bind(publicThis));
+    {
+      watch(getter, raw.bind(publicThis), options);
+    }
   } else if (isObject(raw)) {
     if (isArray(raw)) {
       raw.forEach((r) => createWatcher(r, ctx, publicThis, key));
     } else {
       const handler = isFunction(raw.handler) ? raw.handler.bind(publicThis) : ctx[raw.handler];
       if (isFunction(handler)) {
-        watch(getter, handler, raw);
+        watch(getter, handler, extend(raw, options) );
       } else {
         warn$1(`Invalid watch handler specified by key "${raw.handler}"`, handler);
       }
@@ -6874,7 +7087,7 @@ function createCompatVue$1(createApp, createSingletonApp) {
       return vm;
     }
   }
-  Vue.version = `2.6.14-compat:${"3.5.0-beta.1"}`;
+  Vue.version = `2.6.14-compat:${"3.5.0-beta.3"}`;
   Vue.config = singletonApp.config;
   Vue.use = (plugin, ...options) => {
     if (plugin && isFunction(plugin.install)) {
@@ -7206,7 +7419,7 @@ function defineReactive(obj, key, val) {
     if (isArray(val)) {
       methodsToPatch.forEach((m) => {
         val[m] = (...args) => {
-          Array.prototype[m].call(reactiveVal, ...args);
+          Array.prototype[m].apply(reactiveVal, args);
         };
       });
     } else {
@@ -8401,7 +8614,7 @@ function baseCreateRenderer(options, createHydrationFns) {
       if (subTree.patchFlag > 0 && subTree.patchFlag & 2048) {
         subTree = filterSingleRoot(subTree.children) || subTree;
       }
-      if (vnode === subTree) {
+      if (vnode === subTree || isSuspense(subTree.type) && (subTree.ssContent === vnode || subTree.ssFallback === vnode)) {
         const parentVNode = parentComponent.vnode;
         setScopeId(
           el,
@@ -8731,7 +8944,6 @@ function baseCreateRenderer(options, createHydrationFns) {
         return;
       } else {
         instance.next = n2;
-        invalidateJob(instance.update);
         instance.update();
       }
     } else {
@@ -9655,7 +9867,6 @@ function watchSyncEffect(effect, options) {
     extend({}, options, { flush: "sync" }) 
   );
 }
-const INITIAL_WATCHER_VALUE = {};
 function watch(source, cb, options) {
   if (!isFunction(cb)) {
     warn$1(
@@ -9664,21 +9875,8 @@ function watch(source, cb, options) {
   }
   return doWatch(source, cb, options);
 }
-function doWatch(source, cb, {
-  immediate,
-  deep,
-  flush,
-  once,
-  onTrack,
-  onTrigger
-} = EMPTY_OBJ) {
-  if (cb && once) {
-    const _cb = cb;
-    cb = (...args) => {
-      _cb(...args);
-      watchHandle();
-    };
-  }
+function doWatch(source, cb, options = EMPTY_OBJ) {
+  const { immediate, deep, flush, once } = options;
   if (!cb) {
     if (immediate !== void 0) {
       warn$1(
@@ -9696,174 +9894,53 @@ function doWatch(source, cb, {
       );
     }
   }
-  const warnInvalidSource = (s) => {
-    warn$1(
-      `Invalid watch source: `,
-      s,
-      `A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.`
-    );
-  };
-  const instance = currentInstance;
-  const reactiveGetter = (source2) => {
-    if (deep) return source2;
-    if (isShallow(source2) || deep === false || deep === 0)
-      return traverse(source2, 1);
-    return traverse(source2);
-  };
-  let getter;
-  let forceTrigger = false;
-  let isMultiSource = false;
-  if (isRef(source)) {
-    getter = () => source.value;
-    forceTrigger = isShallow(source);
-  } else if (isReactive(source)) {
-    getter = () => reactiveGetter(source);
-    forceTrigger = true;
-  } else if (isArray(source)) {
-    isMultiSource = true;
-    forceTrigger = source.some((s) => isReactive(s) || isShallow(s));
-    getter = () => source.map((s) => {
-      if (isRef(s)) {
-        return s.value;
-      } else if (isReactive(s)) {
-        return reactiveGetter(s);
-      } else if (isFunction(s)) {
-        return callWithErrorHandling(s, instance, 2);
-      } else {
-        warnInvalidSource(s);
-      }
-    });
-  } else if (isFunction(source)) {
-    if (cb) {
-      getter = () => callWithErrorHandling(source, instance, 2);
-    } else {
-      getter = () => {
-        if (cleanup) {
-          cleanup();
-        }
-        return callWithAsyncErrorHandling(
-          source,
-          instance,
-          3,
-          [onCleanup]
-        );
-      };
-    }
-  } else {
-    getter = NOOP;
-    warnInvalidSource(source);
-  }
-  if (cb && !deep) {
-    const baseGetter = getter;
-    getter = () => {
-      const val = baseGetter();
-      if (isArray(val) && checkCompatEnabled$1("WATCH_ARRAY", instance)) {
-        traverse(val);
-      }
-      return val;
-    };
-  }
-  if (cb && deep) {
-    const baseGetter = getter;
-    const depth = deep === true ? Infinity : deep;
-    getter = () => traverse(baseGetter(), depth);
-  }
-  let cleanup;
-  let onCleanup = (fn) => {
-    cleanup = effect.onStop = () => {
-      callWithErrorHandling(fn, instance, 4);
-      cleanup = effect.onStop = void 0;
-    };
-  };
+  const baseWatchOptions = extend({}, options);
+  baseWatchOptions.onWarn = warn$1;
   let ssrCleanup;
   if (isInSSRComponentSetup) {
-    onCleanup = NOOP;
-    if (!cb) {
-      getter();
-    } else if (immediate) {
-      callWithAsyncErrorHandling(cb, instance, 3, [
-        getter(),
-        isMultiSource ? [] : void 0,
-        onCleanup
-      ]);
-    }
     if (flush === "sync") {
       const ctx = useSSRContext();
       ssrCleanup = ctx.__watcherHandles || (ctx.__watcherHandles = []);
+    } else if (!cb || immediate) {
+      baseWatchOptions.once = true;
     } else {
-      const watchHandle2 = () => {
+      return {
+        stop: NOOP,
+        resume: NOOP,
+        pause: NOOP
       };
-      watchHandle2.stop = NOOP;
-      watchHandle2.resume = NOOP;
-      watchHandle2.pause = NOOP;
-      return watchHandle2;
     }
   }
-  let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
-  const job = (immediateFirstRun) => {
-    if (!(effect.flags & 1) || !effect.dirty && !immediateFirstRun) {
-      return;
-    }
-    if (cb) {
-      const newValue = effect.run();
-      if (deep || forceTrigger || (isMultiSource ? newValue.some((v, i) => hasChanged(v, oldValue[i])) : hasChanged(newValue, oldValue)) || isArray(newValue) && isCompatEnabled$1("WATCH_ARRAY", instance)) {
-        if (cleanup) {
-          cleanup();
-        }
-        callWithAsyncErrorHandling(cb, instance, 3, [
-          newValue,
-          // pass undefined as the old value when it's changed for the first time
-          oldValue === INITIAL_WATCHER_VALUE ? void 0 : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE ? [] : oldValue,
-          onCleanup
-        ]);
-        oldValue = newValue;
+  const instance = currentInstance;
+  baseWatchOptions.call = (fn, type, args) => callWithAsyncErrorHandling(fn, instance, type, args);
+  let isPre = false;
+  if (flush === "post") {
+    baseWatchOptions.scheduler = (job) => {
+      queuePostRenderEffect(job, instance && instance.suspense);
+    };
+  } else if (flush !== "sync") {
+    isPre = true;
+    baseWatchOptions.scheduler = (job, isFirstRun) => {
+      if (isFirstRun) {
+        job();
+      } else {
+        queueJob(job);
       }
-    } else {
-      effect.run();
-    }
-  };
-  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.flags |= 2;
-    if (instance) job.id = instance.uid;
-    scheduler = () => queueJob(job);
+    };
   }
-  effect.scheduler = scheduler;
-  const scope = getCurrentScope();
-  const watchHandle = () => {
-    effect.stop();
-    if (scope) {
-      remove(scope.effects, effect);
+  baseWatchOptions.augmentJob = (job) => {
+    if (cb) {
+      job.flags |= 4;
     }
-  };
-  watchHandle.pause = effect.pause.bind(effect);
-  watchHandle.resume = effect.resume.bind(effect);
-  watchHandle.stop = watchHandle;
-  {
-    effect.onTrack = onTrack;
-    effect.onTrigger = onTrigger;
-  }
-  if (cb) {
-    if (immediate) {
-      job(true);
-    } else {
-      oldValue = effect.run();
+    if (isPre) {
+      job.flags |= 2;
+      if (instance) {
+        job.id = instance.uid;
+        job.i = instance;
+      }
     }
-  } else if (flush === "post") {
-    queuePostRenderEffect(
-      effect.run.bind(effect),
-      instance && instance.suspense
-    );
-  } else {
-    effect.run();
-  }
+  };
+  const watchHandle = watch$1(source, cb, baseWatchOptions);
   if (ssrCleanup) ssrCleanup.push(watchHandle);
   return watchHandle;
 }
@@ -9892,38 +9969,6 @@ function createPathGetter(ctx, path) {
     return cur;
   };
 }
-function traverse(value, depth = Infinity, seen) {
-  if (depth <= 0 || !isObject(value) || value["__v_skip"]) {
-    return value;
-  }
-  seen = seen || /* @__PURE__ */ new Set();
-  if (seen.has(value)) {
-    return value;
-  }
-  seen.add(value);
-  depth--;
-  if (isRef(value)) {
-    traverse(value.value, depth, seen);
-  } else if (isArray(value)) {
-    for (let i = 0; i < value.length; i++) {
-      traverse(value[i], depth, seen);
-    }
-  } else if (isSet(value) || isMap(value)) {
-    value.forEach((v) => {
-      traverse(v, depth, seen);
-    });
-  } else if (isPlainObject(value)) {
-    for (const key in value) {
-      traverse(value[key], depth, seen);
-    }
-    for (const key of Object.getOwnPropertySymbols(value)) {
-      if (Object.prototype.propertyIsEnumerable.call(value, key)) {
-        traverse(value[key], depth, seen);
-      }
-    }
-  }
-  return value;
-}
 
 function useModel(props, name, options = EMPTY_OBJ) {
   const i = getCurrentInstance();
@@ -12178,7 +12223,7 @@ function isMemoSame(cached, memo) {
   return true;
 }
 
-const version = "3.5.0-beta.1";
+const version = "3.5.0-beta.3";
 const warn = warn$1 ;
 const ErrorTypeStrings = ErrorTypeStrings$1 ;
 const devtools = devtools$1 ;
@@ -13069,7 +13114,6 @@ class VueElement extends BaseClass {
     this._ob = null;
     if (this.shadowRoot && _createApp !== createApp) {
       this._root = this.shadowRoot;
-      this._mount(_def);
     } else {
       if (this.shadowRoot) {
         warn(
@@ -13082,9 +13126,9 @@ class VueElement extends BaseClass {
       } else {
         this._root = this;
       }
-      if (!this._def.__asyncLoader) {
-        this._resolveProps(this._def);
-      }
+    }
+    if (!this._def.__asyncLoader) {
+      this._resolveProps(this._def);
     }
   }
   connectedCallback() {
@@ -13284,6 +13328,7 @@ class VueElement extends BaseClass {
       vnode.ce = (instance) => {
         this._instance = instance;
         instance.ce = this;
+        instance.isCE = true;
         {
           instance.ceReload = (newStyles) => {
             if (this._styles) {
@@ -14154,6 +14199,7 @@ var runtimeDom = /*#__PURE__*/Object.freeze({
   effectScope: effectScope,
   getCurrentInstance: getCurrentInstance,
   getCurrentScope: getCurrentScope,
+  getCurrentWatcher: getCurrentWatcher,
   getTransitionRawChildren: getTransitionRawChildren,
   guardReactiveProps: guardReactiveProps,
   h: h,
@@ -14196,6 +14242,7 @@ var runtimeDom = /*#__PURE__*/Object.freeze({
   onServerPrefetch: onServerPrefetch,
   onUnmounted: onUnmounted,
   onUpdated: onUpdated,
+  onWatcherCleanup: onWatcherCleanup,
   openBlock: openBlock,
   popScopeId: popScopeId,
   provide: provide,
@@ -15759,6 +15806,9 @@ const isStaticProperty = (node) => node && (node.type === "ObjectProperty" || no
 const isStaticPropertyKey = (node, parent) => isStaticProperty(parent) && parent.key === node;
 function isReferenced(node, parent, grandparent) {
   switch (parent.type) {
+    // yes: PARENT[NODE]
+    // yes: NODE.child
+    // no: parent.NODE
     case "MemberExpression":
     case "OptionalMemberExpression":
       if (parent.property === node) {
@@ -15767,12 +15817,23 @@ function isReferenced(node, parent, grandparent) {
       return parent.object === node;
     case "JSXMemberExpression":
       return parent.object === node;
+    // no: let NODE = init;
+    // yes: let id = NODE;
     case "VariableDeclarator":
       return parent.init === node;
+    // yes: () => NODE
+    // no: (NODE) => {}
     case "ArrowFunctionExpression":
       return parent.body === node;
+    // no: class { #NODE; }
+    // no: class { get #NODE() {} }
+    // no: class { #NODE() {} }
+    // no: class { fn() { return this.#NODE; } }
     case "PrivateName":
       return false;
+    // no: class { NODE() {} }
+    // yes: class { [NODE]() {} }
+    // no: class { foo(NODE) {} }
     case "ClassMethod":
     case "ClassPrivateMethod":
     case "ObjectMethod":
@@ -15780,11 +15841,18 @@ function isReferenced(node, parent, grandparent) {
         return !!parent.computed;
       }
       return false;
+    // yes: { [NODE]: "" }
+    // no: { NODE: "" }
+    // depends: { NODE }
+    // depends: { key: NODE }
     case "ObjectProperty":
       if (parent.key === node) {
         return !!parent.computed;
       }
       return !grandparent;
+    // no: class { NODE = value; }
+    // yes: class { [NODE] = value; }
+    // yes: class { key = NODE; }
     case "ClassProperty":
       if (parent.key === node) {
         return !!parent.computed;
@@ -15792,47 +15860,80 @@ function isReferenced(node, parent, grandparent) {
       return true;
     case "ClassPrivateProperty":
       return parent.key !== node;
+    // no: class NODE {}
+    // yes: class Foo extends NODE {}
     case "ClassDeclaration":
     case "ClassExpression":
       return parent.superClass === node;
+    // yes: left = NODE;
+    // no: NODE = right;
     case "AssignmentExpression":
       return parent.right === node;
+    // no: [NODE = foo] = [];
+    // yes: [foo = NODE] = [];
     case "AssignmentPattern":
       return parent.right === node;
+    // no: NODE: for (;;) {}
     case "LabeledStatement":
       return false;
+    // no: try {} catch (NODE) {}
     case "CatchClause":
       return false;
+    // no: function foo(...NODE) {}
     case "RestElement":
       return false;
     case "BreakStatement":
     case "ContinueStatement":
       return false;
+    // no: function NODE() {}
+    // no: function foo(NODE) {}
     case "FunctionDeclaration":
     case "FunctionExpression":
       return false;
+    // no: export NODE from "foo";
+    // no: export * as NODE from "foo";
     case "ExportNamespaceSpecifier":
     case "ExportDefaultSpecifier":
       return false;
+    // no: export { foo as NODE };
+    // yes: export { NODE as foo };
+    // no: export { NODE as foo } from "foo";
     case "ExportSpecifier":
       return parent.local === node;
+    // no: import NODE from "foo";
+    // no: import * as NODE from "foo";
+    // no: import { NODE as foo } from "foo";
+    // no: import { foo as NODE } from "foo";
+    // no: import NODE from "bar";
     case "ImportDefaultSpecifier":
     case "ImportNamespaceSpecifier":
     case "ImportSpecifier":
       return false;
+    // no: import "foo" assert { NODE: "json" }
     case "ImportAttribute":
       return false;
+    // no: <div NODE="foo" />
     case "JSXAttribute":
       return false;
+    // no: [NODE] = [];
+    // no: ({ NODE }) = [];
     case "ObjectPattern":
     case "ArrayPattern":
       return false;
+    // no: new.NODE
+    // no: NODE.target
     case "MetaProperty":
       return false;
+    // yes: type X = { someProperty: NODE }
+    // no: type X = { NODE: OtherType }
     case "ObjectTypeProperty":
       return parent.key !== node;
+    // yes: enum X { Foo = NODE }
+    // no: enum X { NODE }
     case "TSEnumMember":
       return parent.id !== node;
+    // yes: { [NODE]: value }
+    // no: { NODE: value }
     case "TSPropertySignature":
       if (parent.key === node) {
         return !!parent.computed;
@@ -15880,10 +15981,11 @@ function isCoreComponent(tag) {
 }
 const nonIdentifierRE = /^\d|[^\$\w\xA0-\uFFFF]/;
 const isSimpleIdentifier = (name) => !nonIdentifierRE.test(name);
-const isMemberExpressionNode = (path, context) => {
+const getExpSource = (exp) => exp.type === 4 ? exp.content : exp.loc.source;
+const isMemberExpressionNode = (exp, context) => {
   try {
-    let ret = parser.parseExpression(path, {
-      plugins: context.expressionPlugins
+    let ret = exp.ast || parser.parseExpression(getExpSource(exp), {
+      plugins: context.expressionPlugins ? [...context.expressionPlugins, "typescript"] : ["typescript"]
     });
     ret = unwrapTSNode(ret);
     return ret.type === "MemberExpression" || ret.type === "OptionalMemberExpression" || ret.type === "Identifier" && ret.name !== "undefined";
@@ -15892,6 +15994,24 @@ const isMemberExpressionNode = (path, context) => {
   }
 };
 const isMemberExpression = isMemberExpressionNode;
+const isFnExpressionNode = (exp, context) => {
+  try {
+    let ret = exp.ast || parser.parseExpression(getExpSource(exp), {
+      plugins: context.expressionPlugins ? [...context.expressionPlugins, "typescript"] : ["typescript"]
+    });
+    if (ret.type === "Program") {
+      ret = ret.body[0];
+      if (ret.type === "ExpressionStatement") {
+        ret = ret.expression;
+      }
+    }
+    ret = unwrapTSNode(ret);
+    return ret.type === "FunctionExpression" || ret.type === "ArrowFunctionExpression";
+  } catch (e) {
+    return false;
+  }
+};
+const isFnExpression = isFnExpressionNode;
 function advancePositionWithClone(pos, source, numberOfCharacters = source.length) {
   return advancePositionWithMutation(
     {
@@ -16406,7 +16526,9 @@ const tokenizer = new Tokenizer(stack, {
         case 17:
         case 18:
         case 19:
+        // "
         case 20:
+        // '
         case 21:
           emitError(9, end);
           break;
@@ -17432,6 +17554,7 @@ function traverseNode(node, context) {
         context.helper(TO_DISPLAY_STRING);
       }
       break;
+    // for container types, further traverse downwards
     case 9:
       for (let i2 = 0; i2 < node.branches.length; i2++) {
         traverseNode(node.branches[i2], context);
@@ -17912,6 +18035,7 @@ function genNode(node, context) {
     case 21:
       genNodeList(node.body, context, true, false);
       break;
+    // SSR only types
     case 22:
       genTemplateLiteral(node, context);
       break;
@@ -17927,6 +18051,7 @@ function genNode(node, context) {
     case 26:
       genReturnStatement(node, context);
       break;
+    /* istanbul ignore next */
     case 10:
       break;
     default:
@@ -19993,7 +20118,6 @@ function processSlotOutlet(node, context) {
   };
 }
 
-const fnExpRE = /^\s*(async\s*)?(\([^)]*?\)|[\w$_]+)\s*(:[^=]+)?=>|^\s*(async\s+)?function(?:\s+[\w$]+)?\s*\(/;
 const transformOn$1 = (dir, node, context, augmentor) => {
   const { loc, modifiers, arg } = dir;
   if (!dir.exp && !modifiers.length) {
@@ -20037,8 +20161,8 @@ const transformOn$1 = (dir, node, context, augmentor) => {
   }
   let shouldCache = context.cacheHandlers && !exp && !context.inVOnce;
   if (exp) {
-    const isMemberExp = isMemberExpression(exp.content, context);
-    const isInlineStatement = !(isMemberExp || fnExpRE.test(exp.content));
+    const isMemberExp = isMemberExpression(exp, context);
+    const isInlineStatement = !(isMemberExp || isFnExpression(exp, context));
     const hasMultipleStatements = exp.content.includes(`;`);
     if (context.prefixIdentifiers) {
       isInlineStatement && context.addIdentifiers(`$event`);
@@ -20208,7 +20332,7 @@ const transformModel$1 = (dir, node, context) => {
     return createTransformProps();
   }
   const maybeRef = context.inline && (bindingType === "setup-let" || bindingType === "setup-ref" || bindingType === "setup-maybe-ref");
-  if (!expString.trim() || !isMemberExpression(expString, context) && !maybeRef) {
+  if (!expString.trim() || !isMemberExpression(exp, context) && !maybeRef) {
     context.onError(
       createCompilerError(42, exp.loc)
     );
@@ -20343,27 +20467,35 @@ function parseFilter(node, context) {
         case 34:
           inDouble = true;
           break;
+        // "
         case 39:
           inSingle = true;
           break;
+        // '
         case 96:
           inTemplateString = true;
           break;
+        // `
         case 40:
           paren++;
           break;
+        // (
         case 41:
           paren--;
           break;
+        // )
         case 91:
           square++;
           break;
+        // [
         case 93:
           square--;
           break;
+        // ]
         case 123:
           curly++;
           break;
+        // {
         case 125:
           curly--;
           break;