@vue/compat 3.5.0-alpha.5 → 3.5.0-beta.2

package/dist/vue.esm-bundler.js

@@ -1,5 +1,5 @@
 /**
-* @vue/compat v3.5.0-alpha.5
+* @vue/compat v3.5.0-beta.2
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -61,9 +61,11 @@ const cacheStringFunction = (fn) => {
   };
 };
 const camelizeRE = /-(\w)/g;
-const camelize = cacheStringFunction((str) => {
-  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
-});
+const camelize = cacheStringFunction(
+  (str) => {
+    return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
+  }
+);
 const hyphenateRE = /\B([A-Z])/g;
 const hyphenate = cacheStringFunction(
   (str) => str.replace(hyphenateRE, "-$1").toLowerCase()
@@ -71,10 +73,12 @@ const hyphenate = cacheStringFunction(
 const capitalize = cacheStringFunction((str) => {
   return str.charAt(0).toUpperCase() + str.slice(1);
 });
-const toHandlerKey = cacheStringFunction((str) => {
-  const s = str ? `on${capitalize(str)}` : ``;
-  return s;
-});
+const toHandlerKey = cacheStringFunction(
+  (str) => {
+    const s = str ? `on${capitalize(str)}` : ``;
+    return s;
+  }
+);
 const hasChanged = (value, oldValue) => !Object.is(value, oldValue);
 const invokeArrayFns = (fns, ...arg) => {
   for (let i = 0; i < fns.length; i++) {
@@ -386,6 +390,7 @@ class EffectScope {
      * @internal
      */
     this.cleanups = [];
+    this._isPaused = false;
     this.parent = activeEffectScope;
     if (!detached && activeEffectScope) {
       this.index = (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(
@@ -396,6 +401,37 @@ class EffectScope {
   get active() {
     return this._active;
   }
+  pause() {
+    if (this._active) {
+      this._isPaused = true;
+      if (this.scopes) {
+        for (let i = 0, l = this.scopes.length; i < l; i++) {
+          this.scopes[i].pause();
+        }
+      }
+      for (let i = 0, l = this.effects.length; i < l; i++) {
+        this.effects[i].pause();
+      }
+    }
+  }
+  /**
+   * Resumes the effect scope, including all child scopes and effects.
+   */
+  resume() {
+    if (this._active) {
+      if (this._isPaused) {
+        this._isPaused = false;
+        if (this.scopes) {
+          for (let i = 0, l = this.scopes.length; i < l; i++) {
+            this.scopes[i].resume();
+          }
+        }
+        for (let i = 0, l = this.effects.length; i < l; i++) {
+          this.effects[i].resume();
+        }
+      }
+    }
+  }
   run(fn) {
     if (this._active) {
       const currentEffectScope = activeEffectScope;
@@ -466,6 +502,7 @@ function onScopeDispose(fn, failSilently = false) {
 }
 
 let activeSub;
+const pausedQueueEffects = /* @__PURE__ */ new WeakSet();
 class ReactiveEffect {
   constructor(fn) {
     this.fn = fn;
@@ -494,6 +531,18 @@ class ReactiveEffect {
       activeEffectScope.effects.push(this);
     }
   }
+  pause() {
+    this.flags |= 64;
+  }
+  resume() {
+    if (this.flags & 64) {
+      this.flags &= ~64;
+      if (pausedQueueEffects.has(this)) {
+        pausedQueueEffects.delete(this);
+        this.trigger();
+      }
+    }
+  }
   /**
    * @internal
    */
@@ -501,9 +550,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;
@@ -547,7 +593,9 @@ class ReactiveEffect {
     }
   }
   trigger() {
-    if (this.scheduler) {
+    if (this.flags & 64) {
+      pausedQueueEffects.add(this);
+    } else if (this.scheduler) {
       this.scheduler();
     } else {
       this.runIfDirty();
@@ -575,6 +623,7 @@ function endBatch() {
     batchDepth--;
     return;
   }
+  batchDepth--;
   let error;
   while (batchedEffect) {
     let e = batchedEffect;
@@ -593,7 +642,6 @@ function endBatch() {
       e = next;
     }
   }
-  batchDepth--;
   if (error) throw error;
 }
 function prepareDeps(sub) {
@@ -867,9 +915,15 @@ function addSub(link) {
   link.dep.subs = link;
 }
 const targetMap = /* @__PURE__ */ new WeakMap();
-const ITERATE_KEY = Symbol(!!(process.env.NODE_ENV !== "production") ? "Object iterate" : "");
-const MAP_KEY_ITERATE_KEY = Symbol(!!(process.env.NODE_ENV !== "production") ? "Map keys iterate" : "");
-const ARRAY_ITERATE_KEY = Symbol(!!(process.env.NODE_ENV !== "production") ? "Array iterate" : "");
+const ITERATE_KEY = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? "Object iterate" : ""
+);
+const MAP_KEY_ITERATE_KEY = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? "Map keys iterate" : ""
+);
+const ARRAY_ITERATE_KEY = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? "Array iterate" : ""
+);
 function track(target, type, key) {
   if (shouldTrack && activeSub) {
     let depsMap = targetMap.get(target);
@@ -994,26 +1048,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);
@@ -1029,7 +1083,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");
@@ -1048,7 +1102,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);
@@ -1084,8 +1138,13 @@ 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 methodFn;
+  if ((methodFn = arr[method]) !== arrayProto[method]) {
+    return methodFn.apply(arr, args);
+  }
   let needsWrap = false;
   let wrappedFn = fn;
   if (arr !== self) {
@@ -1100,7 +1159,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) {
@@ -1163,7 +1222,7 @@ class BaseReactiveHandler {
       return isShallow2;
     } else if (key === "__v_raw") {
       if (receiver === (isReadonly2 ? isShallow2 ? shallowReadonlyMap : readonlyMap : isShallow2 ? shallowReactiveMap : reactiveMap).get(target) || // receiver is not the reactive proxy, but has the same prototype
-      // this means the reciever is a user proxy of the reactive proxy
+      // this means the receiver is a user proxy of the reactive proxy
       Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) {
         return target;
       }
@@ -1287,9 +1346,7 @@ class ReadonlyReactiveHandler extends BaseReactiveHandler {
 }
 const mutableHandlers = /* @__PURE__ */ new MutableReactiveHandler();
 const readonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler();
-const shallowReactiveHandlers = /* @__PURE__ */ new MutableReactiveHandler(
-  true
-);
+const shallowReactiveHandlers = /* @__PURE__ */ new MutableReactiveHandler(true);
 const shallowReadonlyHandlers = /* @__PURE__ */ new ReadonlyReactiveHandler(true);
 
 const toShallow = (value) => value;
@@ -1790,13 +1847,14 @@ function proxyRefs(objectWithRefs) {
 class CustomRefImpl {
   constructor(factory) {
     this["__v_isRef"] = true;
+    this._value = void 0;
     const dep = this.dep = new Dep();
     const { get, set } = factory(dep.track.bind(dep), dep.trigger.bind(dep));
     this._get = get;
     this._set = set;
   }
   get value() {
-    return this._get();
+    return this._value = this._get();
   }
   set value(newVal) {
     this._set(newVal);
@@ -1821,10 +1879,11 @@ class ObjectRefImpl {
     this._key = _key;
     this._defaultValue = _defaultValue;
     this["__v_isRef"] = true;
+    this._value = void 0;
   }
   get value() {
     const val = this._object[this._key];
-    return val === void 0 ? this._defaultValue : val;
+    return this._value = val === void 0 ? this._defaultValue : val;
   }
   set value(newVal) {
     this._object[this._key] = newVal;
@@ -1838,9 +1897,10 @@ class GetterRefImpl {
     this._getter = _getter;
     this["__v_isRef"] = true;
     this["__v_isReadonly"] = true;
+    this._value = void 0;
   }
   get value() {
-    return this._getter();
+    return this._value = this._getter();
   }
 }
 function toRef(source, key, defaultValue) {
@@ -1874,7 +1934,8 @@ class ComputedRefImpl {
     /**
      * @internal
      */
-    this["__v_isRef"] = true;
+    this.__v_isRef = true;
+    // TODO isolatedDeclarations "__v_isReadonly"
     // A computed is also a subscriber that tracks other deps
     /**
      * @internal
@@ -2504,6 +2565,9 @@ function reload(id, newComp) {
         "[HMR] Root or manually mounted instance modified. Full reload required."
       );
     }
+    if (instance.root.ce && instance !== instance.root) {
+      instance.root.ce._removeChildStyle(oldComp);
+    }
   }
   queuePostFlushCb(() => {
     hmrDirtyComponents.clear();
@@ -2583,9 +2647,7 @@ function devtoolsInitApp(app, version) {
 function devtoolsUnmountApp(app) {
   emit$2("app:unmount" /* APP_UNMOUNT */, app);
 }
-const devtoolsComponentAdded = /* @__PURE__ */ createDevtoolsComponentHook(
-  "component:added" /* COMPONENT_ADDED */
-);
+const devtoolsComponentAdded = /* @__PURE__ */ createDevtoolsComponentHook("component:added" /* COMPONENT_ADDED */);
 const devtoolsComponentUpdated = /* @__PURE__ */ createDevtoolsComponentHook("component:updated" /* COMPONENT_UPDATED */);
 const _devtoolsComponentRemoved = /* @__PURE__ */ createDevtoolsComponentHook(
   "component:removed" /* COMPONENT_REMOVED */
@@ -2609,12 +2671,8 @@ function createDevtoolsComponentHook(hook) {
     );
   };
 }
-const devtoolsPerfStart = /* @__PURE__ */ createDevtoolsPerformanceHook(
-  "perf:start" /* PERFORMANCE_START */
-);
-const devtoolsPerfEnd = /* @__PURE__ */ createDevtoolsPerformanceHook(
-  "perf:end" /* PERFORMANCE_END */
-);
+const devtoolsPerfStart = /* @__PURE__ */ createDevtoolsPerformanceHook("perf:start" /* PERFORMANCE_START */);
+const devtoolsPerfEnd = /* @__PURE__ */ createDevtoolsPerformanceHook("perf:end" /* PERFORMANCE_END */);
 function createDevtoolsPerformanceHook(hook) {
   return (component, type, time) => {
     emit$2(hook, component.appContext.app, component.uid, component, type, time);
@@ -4052,6 +4110,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;
@@ -4327,6 +4386,7 @@ Server rendered element contains more child nodes than client vdom.`
       }
       if (props) {
         if (!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ || forcePatch || !optimized || patchFlag & (16 | 32)) {
+          const isCustomElement = el.tagName.includes("-");
           for (const key in props) {
             if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_HYDRATION_MISMATCH_DETAILS__) && // #11189 skip if this node has directives that have created hooks
             // as it could have mutated the DOM in any possible way
@@ -4334,7 +4394,7 @@ Server rendered element contains more child nodes than client vdom.`
               logMismatchError();
             }
             if (forcePatch && (key.endsWith("value") || key === "indeterminate") || isOn(key) && !isReservedProp(key) || // force hydrate v-bind with .prop modifiers
-            key[0] === ".") {
+            key[0] === "." || isCustomElement) {
               patchProp(el, key, null, props[key], void 0, parentComponent);
             }
           }
@@ -4670,24 +4730,19 @@ function isMismatchAllowed(el, allowedType) {
   }
 }
 
-const hydrateOnIdle = () => (hydrate) => {
-  const id = requestIdleCallback(hydrate);
+const hydrateOnIdle = (timeout = 1e4) => (hydrate) => {
+  const id = requestIdleCallback(hydrate, { timeout });
   return () => cancelIdleCallback(id);
 };
-const hydrateOnVisible = (margin = 0) => (hydrate, forEach) => {
-  const ob = new IntersectionObserver(
-    (entries) => {
-      for (const e of entries) {
-        if (!e.isIntersecting) continue;
-        ob.disconnect();
-        hydrate();
-        break;
-      }
-    },
-    {
-      rootMargin: isString(margin) ? margin : margin + "px"
+const hydrateOnVisible = (opts) => (hydrate, forEach) => {
+  const ob = new IntersectionObserver((entries) => {
+    for (const e of entries) {
+      if (!e.isIntersecting) continue;
+      ob.disconnect();
+      hydrate();
+      break;
     }
-  );
+  }, opts);
   forEach((el) => ob.observe(el));
   return () => ob.disconnect();
 };
@@ -4995,14 +5050,14 @@ 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);
         }
       });
     }
     function pruneCacheEntry(key) {
       const cached = cache.get(key);
-      if (!current || !isSameVNodeType(cached, current)) {
+      if (cached && (!current || !isSameVNodeType(cached, current))) {
         unmount(cached);
       } else if (current) {
         resetShapeFlag(current);
@@ -5064,6 +5119,10 @@ const KeepAliveImpl = {
         return rawVNode;
       }
       let vnode = getInnerChild(rawVNode);
+      if (vnode.type === Comment) {
+        current = null;
+        return vnode;
+      }
       const comp = vnode.type;
       const name = getComponentName(
         isAsyncWrapper(vnode) ? vnode.type.__asyncResolved || {} : comp
@@ -5113,6 +5172,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;
@@ -5196,17 +5256,19 @@ const createHook = (lifecycle) => (hook, target = currentInstance) => {
 };
 const onBeforeMount = createHook("bm");
 const onMounted = createHook("m");
-const onBeforeUpdate = createHook("bu");
+const onBeforeUpdate = createHook(
+  "bu"
+);
 const onUpdated = createHook("u");
-const onBeforeUnmount = createHook("bum");
-const onUnmounted = createHook("um");
-const onServerPrefetch = createHook("sp");
-const onRenderTriggered = createHook(
-  "rtg"
+const onBeforeUnmount = createHook(
+  "bum"
 );
-const onRenderTracked = createHook(
-  "rtc"
+const onUnmounted = createHook("um");
+const onServerPrefetch = createHook(
+  "sp"
 );
+const onRenderTriggered = createHook("rtg");
+const onRenderTracked = createHook("rtc");
 function onErrorCaptured(hook, target = currentInstance) {
   injectHook("ec", hook, target);
 }
@@ -5620,9 +5682,14 @@ function createSlots(slots, dynamicSlots) {
 }
 
 function renderSlot(slots, name, props = {}, fallback, noSlotted) {
-  if (currentRenderingInstance.isCE || currentRenderingInstance.parent && isAsyncWrapper(currentRenderingInstance.parent) && currentRenderingInstance.parent.isCE) {
+  if (currentRenderingInstance.ce || currentRenderingInstance.parent && isAsyncWrapper(currentRenderingInstance.parent) && currentRenderingInstance.parent.ce) {
     if (name !== "default") props.name = name;
-    return createVNode("slot", props, fallback && fallback());
+    return openBlock(), createBlock(
+      Fragment,
+      null,
+      [createVNode("slot", props, fallback && fallback())],
+      64
+    );
   }
   let slot = slots[name];
   if (!!(process.env.NODE_ENV !== "production") && slot && slot.length > 1) {
@@ -5924,6 +5991,7 @@ const publicPropertiesMap = (
     $refs: (i) => !!(process.env.NODE_ENV !== "production") ? shallowReadonly(i.refs) : i.refs,
     $parent: (i) => getPublicInstance(i.parent),
     $root: (i) => getPublicInstance(i.root),
+    $host: (i) => i.ce,
     $emit: (i) => i.emit,
     $options: (i) => __VUE_OPTIONS_API__ ? resolveMergedOptions(i) : i.type,
     $forceUpdate: (i) => i.f || (i.f = () => {
@@ -6084,29 +6152,25 @@ if (!!(process.env.NODE_ENV !== "production") && true) {
     return Reflect.ownKeys(target);
   };
 }
-const RuntimeCompiledPublicInstanceProxyHandlers = /* @__PURE__ */ extend(
-  {},
-  PublicInstanceProxyHandlers,
-  {
-    get(target, key) {
-      if (key === Symbol.unscopables) {
-        return;
-      }
-      return PublicInstanceProxyHandlers.get(target, key, target);
-    },
-    has(_, key) {
-      const has = key[0] !== "_" && !isGloballyAllowed(key);
-      if (!!(process.env.NODE_ENV !== "production") && !has && PublicInstanceProxyHandlers.has(_, key)) {
-        warn$1(
-          `Property ${JSON.stringify(
-            key
-          )} should not start with _ which is a reserved prefix for Vue internals.`
-        );
-      }
-      return has;
+const RuntimeCompiledPublicInstanceProxyHandlers = /* @__PURE__ */ extend({}, PublicInstanceProxyHandlers, {
+  get(target, key) {
+    if (key === Symbol.unscopables) {
+      return;
+    }
+    return PublicInstanceProxyHandlers.get(target, key, target);
+  },
+  has(_, key) {
+    const has = key[0] !== "_" && !isGloballyAllowed(key);
+    if (!!(process.env.NODE_ENV !== "production") && !has && PublicInstanceProxyHandlers.has(_, key)) {
+      warn$1(
+        `Property ${JSON.stringify(
+          key
+        )} should not start with _ which is a reserved prefix for Vue internals.`
+      );
     }
+    return has;
   }
-);
+});
 function createDevRenderContext(instance) {
   const target = {};
   Object.defineProperty(target, `_`, {
@@ -6795,7 +6859,7 @@ function createCompatVue$1(createApp, createSingletonApp) {
       return vm;
     }
   }
-  Vue.version = `2.6.14-compat:${"3.5.0-alpha.5"}`;
+  Vue.version = `2.6.14-compat:${"3.5.0-beta.2"}`;
   Vue.config = singletonApp.config;
   Vue.use = (plugin, ...options) => {
     if (plugin && isFunction(plugin.install)) {
@@ -7068,7 +7132,7 @@ function installCompatMount(app, context, render) {
           /* skip options */
         );
       }
-      container.innerHTML = "";
+      container.textContent = "";
       render(vnode, container, namespace);
       if (container instanceof Element) {
         container.removeAttribute("v-cloak");
@@ -7282,7 +7346,7 @@ function createAppAPI(render, hydrate) {
  If you want to mount another app on the same host container, you need to unmount the previous app by calling \`app.unmount()\` first.`
             );
           }
-          const vnode = createVNode(rootComponent, rootProps);
+          const vnode = app._ceVNode || createVNode(rootComponent, rootProps);
           vnode.appContext = context;
           if (namespace === true) {
             namespace = "svg";
@@ -7387,7 +7451,7 @@ function provide(key, value) {
 function inject(key, defaultValue, treatDefaultAsFactory = false) {
   const instance = currentInstance || currentRenderingInstance;
   if (instance || currentApp) {
-    const provides = instance ? instance.parent == null ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides : currentApp._context.provides;
+    const provides = currentApp ? currentApp._context.provides : instance ? instance.parent == null ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides : void 0;
     if (provides && key in provides) {
       return provides[key];
     } else if (arguments.length > 1) {
@@ -7661,6 +7725,9 @@ function resolvePropValue(options, props, key, value, instance, isAbsent) {
       } else {
         value = defaultValue;
       }
+      if (instance.ce) {
+        instance.ce._setProp(key, value);
+      }
     }
     if (opt[0 /* shouldCast */]) {
       if (isAbsent && !hasDefault) {
@@ -8701,8 +8768,8 @@ function baseCreateRenderer(options, createHydrationFns) {
     const componentUpdateFn = () => {
       if (!instance.isMounted) {
         let vnodeHook;
-        const { el, props, type } = initialVNode;
-        const { bm, m, parent } = instance;
+        const { el, props } = initialVNode;
+        const { bm, m, parent, root, type } = instance;
         const isAsyncWrapperVNode = isAsyncWrapper(initialVNode);
         toggleRecurse(instance, false);
         if (bm) {
@@ -8748,6 +8815,9 @@ function baseCreateRenderer(options, createHydrationFns) {
             hydrateSubTree();
           }
         } else {
+          if (root.ce) {
+            root.ce._injectChildStyle(type);
+          }
           if (!!(process.env.NODE_ENV !== "production")) {
             startMeasure(instance, `render`);
           }
@@ -9451,13 +9521,13 @@ function baseCreateRenderer(options, createHydrationFns) {
         namespace
       );
     }
+    container._vnode = vnode;
     if (!isFlushing) {
       isFlushing = true;
       flushPreFlushCbs();
       flushPostFlushCbs();
       isFlushing = false;
     }
-    container._vnode = vnode;
   };
   const internals = {
     p: patch,
@@ -9631,14 +9701,9 @@ function doWatch(source, cb, {
     const _cb = cb;
     cb = (...args) => {
       _cb(...args);
-      unwatch();
+      watchHandle();
     };
   }
-  if (!!(process.env.NODE_ENV !== "production") && deep !== void 0 && typeof deep === "number") {
-    warn$1(
-      `watch() "deep" option with number value will be used as watch depth in future versions. Please use a boolean instead to avoid potential breakage.`
-    );
-  }
   if (!!(process.env.NODE_ENV !== "production") && !cb) {
     if (immediate !== void 0) {
       warn$1(
@@ -9664,10 +9729,12 @@ function doWatch(source, cb, {
     );
   };
   const instance = currentInstance;
-  const reactiveGetter = (source2) => deep === true ? source2 : (
-    // for deep: false, only traverse root-level properties
-    traverse(source2, deep === false ? 1 : void 0)
-  );
+  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;
@@ -9723,7 +9790,8 @@ function doWatch(source, cb, {
   }
   if (cb && deep) {
     const baseGetter = getter;
-    getter = () => traverse(baseGetter());
+    const depth = deep === true ? Infinity : deep;
+    getter = () => traverse(baseGetter(), depth);
   }
   let cleanup;
   let onCleanup = (fn) => {
@@ -9748,7 +9816,12 @@ function doWatch(source, cb, {
       const ctx = useSSRContext();
       ssrCleanup = ctx.__watcherHandles || (ctx.__watcherHandles = []);
     } else {
-      return NOOP;
+      const watchHandle2 = () => {
+      };
+      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;
@@ -9778,7 +9851,6 @@ function doWatch(source, cb, {
   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);
@@ -9789,12 +9861,15 @@ function doWatch(source, cb, {
   }
   effect.scheduler = scheduler;
   const scope = getCurrentScope();
-  const unwatch = () => {
+  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;
   if (!!(process.env.NODE_ENV !== "production")) {
     effect.onTrack = onTrack;
     effect.onTrigger = onTrigger;
@@ -9813,8 +9888,8 @@ function doWatch(source, cb, {
   } else {
     effect.run();
   }
-  if (ssrCleanup) ssrCleanup.push(unwatch);
-  return unwatch;
+  if (ssrCleanup) ssrCleanup.push(watchHandle);
+  return watchHandle;
 }
 function instanceWatch(source, value, options) {
   const publicThis = this.proxy;
@@ -9904,7 +9979,8 @@ function useModel(props, name, options = EMPTY_OBJ) {
         return options.get ? options.get(localValue) : localValue;
       },
       set(value) {
-        if (!hasChanged(value, localValue) && !(prevSetValue !== EMPTY_OBJ && hasChanged(value, prevSetValue))) {
+        const emittedValue = options.set ? options.set(value) : value;
+        if (!hasChanged(emittedValue, localValue) && !(prevSetValue !== EMPTY_OBJ && hasChanged(value, prevSetValue))) {
           return;
         }
         const rawProps = i.vnode.props;
@@ -9913,7 +9989,6 @@ function useModel(props, name, options = EMPTY_OBJ) {
           localValue = value;
           trigger();
         }
-        const emittedValue = options.set ? options.set(value) : value;
         i.emit(`update:${name}`, emittedValue);
         if (hasChanged(value, emittedValue) && hasChanged(value, prevSetValue) && !hasChanged(emittedValue, prevEmittedValue)) {
           trigger();
@@ -9951,9 +10026,9 @@ function emit(instance, event, ...rawArgs) {
     } = instance;
     if (emitsOptions) {
       if (!(event in emitsOptions) && !(event.startsWith("hook:") || event.startsWith(compatModelEventPrefix))) {
-        if (!propsOptions || !(toHandlerKey(event) in propsOptions)) {
+        if (!propsOptions || !(toHandlerKey(camelize(event)) in propsOptions)) {
           warn$1(
-            `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${toHandlerKey(event)}" prop.`
+            `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${toHandlerKey(camelize(event))}" prop.`
           );
         }
       } else {
@@ -11898,11 +11973,16 @@ function useTemplateRef(key) {
   const r = shallowRef(null);
   if (i) {
     const refs = i.refs === EMPTY_OBJ ? i.refs = {} : i.refs;
-    Object.defineProperty(refs, key, {
-      enumerable: true,
-      get: () => r.value,
-      set: (val) => r.value = val
-    });
+    let desc;
+    if (!!(process.env.NODE_ENV !== "production") && (desc = Object.getOwnPropertyDescriptor(refs, key)) && !desc.configurable) {
+      warn$1(`useTemplateRef('${key}') already exists.`);
+    } else {
+      Object.defineProperty(refs, key, {
+        enumerable: true,
+        get: () => r.value,
+        set: (val) => r.value = val
+      });
+    }
   } else if (!!(process.env.NODE_ENV !== "production")) {
     warn$1(
       `useTemplateRef() is called when there is no active component instance to be associated with.`
@@ -12136,7 +12216,7 @@ function isMemoSame(cached, memo) {
   return true;
 }
 
-const version = "3.5.0-alpha.5";
+const version = "3.5.0-beta.2";
 const warn = !!(process.env.NODE_ENV !== "production") ? warn$1 : NOOP;
 const ErrorTypeStrings = ErrorTypeStrings$1 ;
 const devtools = !!(process.env.NODE_ENV !== "production") || true ? devtools$1 : void 0;
@@ -12148,7 +12228,8 @@ const _ssrUtils = {
   setCurrentRenderingInstance,
   isVNode: isVNode,
   normalizeVNode,
-  getComponentPublicInstance
+  getComponentPublicInstance,
+  ensureValidVNode
 };
 const ssrUtils = _ssrUtils ;
 const resolveFilter = resolveFilter$1 ;
@@ -12162,6 +12243,18 @@ const _compatUtils = {
 const compatUtils = _compatUtils ;
 const DeprecationTypes = DeprecationTypes$1 ;
 
+let policy = void 0;
+const tt = typeof window !== "undefined" && window.trustedTypes;
+if (tt) {
+  try {
+    policy = /* @__PURE__ */ tt.createPolicy("vue", {
+      createHTML: (val) => val
+    });
+  } catch (e) {
+    !!(process.env.NODE_ENV !== "production") && warn(`Error creating trusted types policy: ${e}`);
+  }
+}
+const unsafeToTrustedHTML = policy ? (val) => policy.createHTML(val) : (val) => val;
 const svgNS = "http://www.w3.org/2000/svg";
 const mathmlNS = "http://www.w3.org/1998/Math/MathML";
 const doc = typeof document !== "undefined" ? document : null;
@@ -12209,7 +12302,9 @@ const nodeOps = {
         if (start === end || !(start = start.nextSibling)) break;
       }
     } else {
-      templateContainer.innerHTML = namespace === "svg" ? `<svg>${content}</svg>` : namespace === "mathml" ? `<math>${content}</math>` : content;
+      templateContainer.innerHTML = unsafeToTrustedHTML(
+        namespace === "svg" ? `<svg>${content}</svg>` : namespace === "mathml" ? `<math>${content}</math>` : content
+      );
       const template = templateContainer.content;
       if (namespace === "svg" || namespace === "mathml") {
         const wrapper = template.firstChild;
@@ -12616,11 +12711,17 @@ function useCssVars(getter) {
   }
   const setVars = () => {
     const vars = getter(instance.proxy);
-    setVarsOnVNode(instance.subTree, vars);
+    if (instance.ce) {
+      setVarsOnNode(instance.ce, vars);
+    } else {
+      setVarsOnVNode(instance.subTree, vars);
+    }
     updateTeleports(vars);
   };
-  onMounted(() => {
+  onBeforeMount(() => {
     watchPostEffect(setVars);
+  });
+  onMounted(() => {
     const ob = new MutationObserver(setVars);
     ob.observe(instance.subTree.el.parentNode, { childList: true });
     onUnmounted(() => ob.disconnect());
@@ -13017,16 +13118,24 @@ function shouldSetAsProp(el, key, value, isSVG) {
   if (isNativeOn(key) && isString(value)) {
     return false;
   }
-  return key in el;
+  if (key in el) {
+    return true;
+  }
+  if (el._isVueCE && (/[A-Z]/.test(key) || !isString(value))) {
+    return true;
+  }
+  return false;
 }
 
+const REMOVAL = {};
 /*! #__NO_SIDE_EFFECTS__ */
 // @__NO_SIDE_EFFECTS__
-function defineCustomElement(options, extraOptions, hydrate2) {
+function defineCustomElement(options, extraOptions, _createApp) {
   const Comp = defineComponent(options, extraOptions);
+  if (isPlainObject(Comp)) extend(Comp, extraOptions);
   class VueCustomElement extends VueElement {
     constructor(initialProps) {
-      super(Comp, initialProps, hydrate2);
+      super(Comp, initialProps, _createApp);
     }
   }
   VueCustomElement.def = Comp;
@@ -13034,47 +13143,87 @@ function defineCustomElement(options, extraOptions, hydrate2) {
 }
 /*! #__NO_SIDE_EFFECTS__ */
 const defineSSRCustomElement = /* @__NO_SIDE_EFFECTS__ */ (options, extraOptions) => {
-  return /* @__PURE__ */ defineCustomElement(options, extraOptions, hydrate);
+  return /* @__PURE__ */ defineCustomElement(options, extraOptions, createSSRApp);
 };
 const BaseClass = typeof HTMLElement !== "undefined" ? HTMLElement : class {
 };
 class VueElement extends BaseClass {
-  constructor(_def, _props = {}, hydrate2) {
+  constructor(_def, _props = {}, _createApp = createApp) {
     super();
     this._def = _def;
     this._props = _props;
+    this._createApp = _createApp;
+    this._isVueCE = true;
     /**
      * @internal
      */
     this._instance = null;
+    /**
+     * @internal
+     */
+    this._app = null;
+    /**
+     * @internal
+     */
+    this._nonce = this._def.nonce;
     this._connected = false;
     this._resolved = false;
     this._numberProps = null;
+    this._styleChildren = /* @__PURE__ */ new WeakSet();
     this._ob = null;
-    if (this.shadowRoot && hydrate2) {
-      hydrate2(this._createVNode(), this.shadowRoot);
+    if (this.shadowRoot && _createApp !== createApp) {
+      this._root = this.shadowRoot;
     } else {
       if (!!(process.env.NODE_ENV !== "production") && this.shadowRoot) {
         warn(
           `Custom element has pre-rendered declarative shadow root but is not defined as hydratable. Use \`defineSSRCustomElement\`.`
         );
       }
-      this.attachShadow({ mode: "open" });
-      if (!this._def.__asyncLoader) {
-        this._resolveProps(this._def);
+      if (_def.shadowRoot !== false) {
+        this.attachShadow({ mode: "open" });
+        this._root = this.shadowRoot;
+      } else {
+        this._root = this;
       }
     }
+    if (!this._def.__asyncLoader) {
+      this._resolveProps(this._def);
+    }
   }
   connectedCallback() {
+    if (!this.shadowRoot) {
+      this._parseSlots();
+    }
     this._connected = true;
+    let parent = this;
+    while (parent = parent && (parent.parentNode || parent.host)) {
+      if (parent instanceof VueElement) {
+        this._parent = parent;
+        break;
+      }
+    }
     if (!this._instance) {
       if (this._resolved) {
+        this._setParent();
         this._update();
       } else {
-        this._resolveDef();
+        if (parent && parent._pendingResolve) {
+          this._pendingResolve = parent._pendingResolve.then(() => {
+            this._pendingResolve = void 0;
+            this._resolveDef();
+          });
+        } else {
+          this._resolveDef();
+        }
       }
     }
   }
+  _setParent(parent = this._parent) {
+    if (parent) {
+      this._instance.parent = parent._instance;
+      this._instance.provides = parent._instance.provides;
+    }
+  }
   disconnectedCallback() {
     this._connected = false;
     nextTick(() => {
@@ -13083,8 +13232,9 @@ class VueElement extends BaseClass {
           this._ob.disconnect();
           this._ob = null;
         }
-        render(null, this.shadowRoot);
-        this._instance = null;
+        this._app && this._app.unmount();
+        this._instance.ce = void 0;
+        this._app = this._instance = null;
       }
     });
   }
@@ -13092,7 +13242,9 @@ class VueElement extends BaseClass {
    * resolve inner component definition (handle possible async component)
    */
   _resolveDef() {
-    this._resolved = true;
+    if (this._pendingResolve) {
+      return;
+    }
     for (let i = 0; i < this.attributes.length; i++) {
       this._setAttr(this.attributes[i].name);
     }
@@ -13103,6 +13255,8 @@ class VueElement extends BaseClass {
     });
     this._ob.observe(this, { attributes: true });
     const resolve = (def, isAsync = false) => {
+      this._resolved = true;
+      this._pendingResolve = void 0;
       const { props, styles } = def;
       let numberProps;
       if (props && !isArray(props)) {
@@ -13120,22 +13274,53 @@ class VueElement extends BaseClass {
       if (isAsync) {
         this._resolveProps(def);
       }
-      this._applyStyles(styles);
-      this._update();
+      if (this.shadowRoot) {
+        this._applyStyles(styles);
+      } else if (!!(process.env.NODE_ENV !== "production") && styles) {
+        warn(
+          "Custom element style injection is not supported when using shadowRoot: false"
+        );
+      }
+      this._mount(def);
     };
     const asyncDef = this._def.__asyncLoader;
     if (asyncDef) {
-      asyncDef().then((def) => resolve(def, true));
+      this._pendingResolve = asyncDef().then(
+        (def) => resolve(this._def = def, true)
+      );
     } else {
       resolve(this._def);
     }
   }
+  _mount(def) {
+    if ((!!(process.env.NODE_ENV !== "production") || __VUE_PROD_DEVTOOLS__) && !def.name) {
+      def.name = "VueElement";
+    }
+    this._app = this._createApp(def);
+    if (def.configureApp) {
+      def.configureApp(this._app);
+    }
+    this._app._ceVNode = this._createVNode();
+    this._app.mount(this._root);
+    const exposed = this._instance && this._instance.exposed;
+    if (!exposed) return;
+    for (const key in exposed) {
+      if (!hasOwn(this, key)) {
+        Object.defineProperty(this, key, {
+          // unwrap ref to be consistent with public instance behavior
+          get: () => unref(exposed[key])
+        });
+      } else if (!!(process.env.NODE_ENV !== "production")) {
+        warn(`Exposed property "${key}" already exists on custom element.`);
+      }
+    }
+  }
   _resolveProps(def) {
     const { props } = def;
     const declaredPropKeys = isArray(props) ? props : Object.keys(props || {});
     for (const key of Object.keys(this)) {
       if (key[0] !== "_" && declaredPropKeys.includes(key)) {
-        this._setProp(key, this[key], true, false);
+        this._setProp(key, this[key]);
       }
     }
     for (const key of declaredPropKeys.map(camelize)) {
@@ -13144,18 +13329,20 @@ class VueElement extends BaseClass {
           return this._getProp(key);
         },
         set(val) {
-          this._setProp(key, val);
+          this._setProp(key, val, true, true);
         }
       });
     }
   }
   _setAttr(key) {
-    let value = this.hasAttribute(key) ? this.getAttribute(key) : void 0;
+    if (key.startsWith("data-v-")) return;
+    const has = this.hasAttribute(key);
+    let value = has ? this.getAttribute(key) : REMOVAL;
     const camelKey = camelize(key);
-    if (this._numberProps && this._numberProps[camelKey]) {
+    if (has && this._numberProps && this._numberProps[camelKey]) {
       value = toNumber(value);
     }
-    this._setProp(camelKey, value, false);
+    this._setProp(camelKey, value, false, true);
   }
   /**
    * @internal
@@ -13166,9 +13353,13 @@ class VueElement extends BaseClass {
   /**
    * @internal
    */
-  _setProp(key, val, shouldReflect = true, shouldUpdate = true) {
+  _setProp(key, val, shouldReflect = true, shouldUpdate = false) {
     if (val !== this._props[key]) {
-      this._props[key] = val;
+      if (val === REMOVAL) {
+        delete this._props[key];
+      } else {
+        this._props[key] = val;
+      }
       if (shouldUpdate && this._instance) {
         this._update();
       }
@@ -13184,18 +13375,23 @@ class VueElement extends BaseClass {
     }
   }
   _update() {
-    render(this._createVNode(), this.shadowRoot);
+    render(this._createVNode(), this._root);
   }
   _createVNode() {
-    const vnode = createVNode(this._def, extend({}, this._props));
+    const baseProps = {};
+    if (!this.shadowRoot) {
+      baseProps.onVnodeMounted = baseProps.onVnodeUpdated = this._renderSlots.bind(this);
+    }
+    const vnode = createVNode(this._def, extend(baseProps, this._props));
     if (!this._instance) {
       vnode.ce = (instance) => {
         this._instance = instance;
+        instance.ce = this;
         instance.isCE = true;
         if (!!(process.env.NODE_ENV !== "production")) {
           instance.ceReload = (newStyles) => {
             if (this._styles) {
-              this._styles.forEach((s) => this.shadowRoot.removeChild(s));
+              this._styles.forEach((s) => this._root.removeChild(s));
               this._styles.length = 0;
             }
             this._applyStyles(newStyles);
@@ -13205,9 +13401,10 @@ class VueElement extends BaseClass {
         }
         const dispatch = (event, args) => {
           this.dispatchEvent(
-            new CustomEvent(event, {
-              detail: args
-            })
+            new CustomEvent(
+              event,
+              isPlainObject(args[0]) ? extend({ detail: args }, args[0]) : { detail: args }
+            )
           );
         };
         instance.emit = (event, ...args) => {
@@ -13216,30 +13413,126 @@ class VueElement extends BaseClass {
             dispatch(hyphenate(event), args);
           }
         };
-        let parent = this;
-        while (parent = parent && (parent.parentNode || parent.host)) {
-          if (parent instanceof VueElement) {
-            instance.parent = parent._instance;
-            instance.provides = parent._instance.provides;
-            break;
-          }
-        }
+        this._setParent();
       };
     }
     return vnode;
   }
-  _applyStyles(styles) {
-    if (styles) {
-      styles.forEach((css) => {
-        const s = document.createElement("style");
-        s.textContent = css;
-        this.shadowRoot.appendChild(s);
-        if (!!(process.env.NODE_ENV !== "production")) {
+  _applyStyles(styles, owner) {
+    if (!styles) return;
+    if (owner) {
+      if (owner === this._def || this._styleChildren.has(owner)) {
+        return;
+      }
+      this._styleChildren.add(owner);
+    }
+    const nonce = this._nonce;
+    for (let i = styles.length - 1; i >= 0; i--) {
+      const s = document.createElement("style");
+      if (nonce) s.setAttribute("nonce", nonce);
+      s.textContent = styles[i];
+      this.shadowRoot.prepend(s);
+      if (!!(process.env.NODE_ENV !== "production")) {
+        if (owner) {
+          if (owner.__hmrId) {
+            if (!this._childStyles) this._childStyles = /* @__PURE__ */ new Map();
+            let entry = this._childStyles.get(owner.__hmrId);
+            if (!entry) {
+              this._childStyles.set(owner.__hmrId, entry = []);
+            }
+            entry.push(s);
+          }
+        } else {
           (this._styles || (this._styles = [])).push(s);
         }
-      });
+      }
+    }
+  }
+  /**
+   * Only called when shaddowRoot is false
+   */
+  _parseSlots() {
+    const slots = this._slots = {};
+    let n;
+    while (n = this.firstChild) {
+      const slotName = n.nodeType === 1 && n.getAttribute("slot") || "default";
+      (slots[slotName] || (slots[slotName] = [])).push(n);
+      this.removeChild(n);
+    }
+  }
+  /**
+   * Only called when shaddowRoot is false
+   */
+  _renderSlots() {
+    const outlets = this.querySelectorAll("slot");
+    const scopeId = this._instance.type.__scopeId;
+    for (let i = 0; i < outlets.length; i++) {
+      const o = outlets[i];
+      const slotName = o.getAttribute("name") || "default";
+      const content = this._slots[slotName];
+      const parent = o.parentNode;
+      if (content) {
+        for (const n of content) {
+          if (scopeId && n.nodeType === 1) {
+            const id = scopeId + "-s";
+            const walker = document.createTreeWalker(n, 1);
+            n.setAttribute(id, "");
+            let child;
+            while (child = walker.nextNode()) {
+              child.setAttribute(id, "");
+            }
+          }
+          parent.insertBefore(n, o);
+        }
+      } else {
+        while (o.firstChild) parent.insertBefore(o.firstChild, o);
+      }
+      parent.removeChild(o);
+    }
+  }
+  /**
+   * @internal
+   */
+  _injectChildStyle(comp) {
+    this._applyStyles(comp.styles, comp);
+  }
+  /**
+   * @internal
+   */
+  _removeChildStyle(comp) {
+    if (!!(process.env.NODE_ENV !== "production")) {
+      this._styleChildren.delete(comp);
+      if (this._childStyles && comp.__hmrId) {
+        const oldStyles = this._childStyles.get(comp.__hmrId);
+        if (oldStyles) {
+          oldStyles.forEach((s) => this._root.removeChild(s));
+          oldStyles.length = 0;
+        }
+      }
+    }
+  }
+}
+function useHost(caller) {
+  const instance = getCurrentInstance();
+  const el = instance && instance.ce;
+  if (el) {
+    return el;
+  } else if (!!(process.env.NODE_ENV !== "production")) {
+    if (!instance) {
+      warn(
+        `${caller || "useHost"} called without an active component instance.`
+      );
+    } else {
+      warn(
+        `${caller || "useHost"} can only be used in components defined via defineCustomElement.`
+      );
     }
   }
+  return null;
+}
+function useShadowRoot() {
+  const el = !!(process.env.NODE_ENV !== "production") ? useHost("useShadowRoot") : useHost();
+  return el && el.shadowRoot;
 }
 
 function useCssModule(name = "$style") {
@@ -13798,7 +14091,7 @@ const createApp = (...args) => {
     const component = app._component;
     if (!isFunction(component) && !component.render && !component.template) {
       component.template = container.innerHTML;
-      if (!!(process.env.NODE_ENV !== "production")) {
+      if (!!(process.env.NODE_ENV !== "production") && container.nodeType === 1) {
         for (let i = 0; i < container.attributes.length; i++) {
           const attr = container.attributes[i];
           if (attr.name !== "v-cloak" && /^(v-|:|@)/.test(attr.name)) {
@@ -13811,7 +14104,9 @@ const createApp = (...args) => {
         }
       }
     }
-    container.innerHTML = "";
+    if (container.nodeType === 1) {
+      container.textContent = "";
+    }
     const proxy = mount(container, false, resolveRootNamespace(container));
     if (container instanceof Element) {
       container.removeAttribute("v-cloak");
@@ -14045,9 +14340,11 @@ var runtimeDom = /*#__PURE__*/Object.freeze({
   useAttrs: useAttrs,
   useCssModule: useCssModule,
   useCssVars: useCssVars,
+  useHost: useHost,
   useId: useId,
   useModel: useModel,
   useSSRContext: useSSRContext,
+  useShadowRoot: useShadowRoot,
   useSlots: useSlots,
   useTemplateRef: useTemplateRef,
   useTransitionState: useTransitionState,
@@ -14103,36 +14400,70 @@ const FRAGMENT = Symbol(!!(process.env.NODE_ENV !== "production") ? `Fragment` :
 const TELEPORT = Symbol(!!(process.env.NODE_ENV !== "production") ? `Teleport` : ``);
 const SUSPENSE = Symbol(!!(process.env.NODE_ENV !== "production") ? `Suspense` : ``);
 const KEEP_ALIVE = Symbol(!!(process.env.NODE_ENV !== "production") ? `KeepAlive` : ``);
-const BASE_TRANSITION = Symbol(!!(process.env.NODE_ENV !== "production") ? `BaseTransition` : ``);
+const BASE_TRANSITION = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? `BaseTransition` : ``
+);
 const OPEN_BLOCK = Symbol(!!(process.env.NODE_ENV !== "production") ? `openBlock` : ``);
 const CREATE_BLOCK = Symbol(!!(process.env.NODE_ENV !== "production") ? `createBlock` : ``);
-const CREATE_ELEMENT_BLOCK = Symbol(!!(process.env.NODE_ENV !== "production") ? `createElementBlock` : ``);
+const CREATE_ELEMENT_BLOCK = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? `createElementBlock` : ``
+);
 const CREATE_VNODE = Symbol(!!(process.env.NODE_ENV !== "production") ? `createVNode` : ``);
-const CREATE_ELEMENT_VNODE = Symbol(!!(process.env.NODE_ENV !== "production") ? `createElementVNode` : ``);
-const CREATE_COMMENT = Symbol(!!(process.env.NODE_ENV !== "production") ? `createCommentVNode` : ``);
-const CREATE_TEXT = Symbol(!!(process.env.NODE_ENV !== "production") ? `createTextVNode` : ``);
-const CREATE_STATIC = Symbol(!!(process.env.NODE_ENV !== "production") ? `createStaticVNode` : ``);
-const RESOLVE_COMPONENT = Symbol(!!(process.env.NODE_ENV !== "production") ? `resolveComponent` : ``);
+const CREATE_ELEMENT_VNODE = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? `createElementVNode` : ``
+);
+const CREATE_COMMENT = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? `createCommentVNode` : ``
+);
+const CREATE_TEXT = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? `createTextVNode` : ``
+);
+const CREATE_STATIC = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? `createStaticVNode` : ``
+);
+const RESOLVE_COMPONENT = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? `resolveComponent` : ``
+);
 const RESOLVE_DYNAMIC_COMPONENT = Symbol(
   !!(process.env.NODE_ENV !== "production") ? `resolveDynamicComponent` : ``
 );
-const RESOLVE_DIRECTIVE = Symbol(!!(process.env.NODE_ENV !== "production") ? `resolveDirective` : ``);
-const RESOLVE_FILTER = Symbol(!!(process.env.NODE_ENV !== "production") ? `resolveFilter` : ``);
-const WITH_DIRECTIVES = Symbol(!!(process.env.NODE_ENV !== "production") ? `withDirectives` : ``);
+const RESOLVE_DIRECTIVE = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? `resolveDirective` : ``
+);
+const RESOLVE_FILTER = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? `resolveFilter` : ``
+);
+const WITH_DIRECTIVES = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? `withDirectives` : ``
+);
 const RENDER_LIST = Symbol(!!(process.env.NODE_ENV !== "production") ? `renderList` : ``);
 const RENDER_SLOT = Symbol(!!(process.env.NODE_ENV !== "production") ? `renderSlot` : ``);
 const CREATE_SLOTS = Symbol(!!(process.env.NODE_ENV !== "production") ? `createSlots` : ``);
-const TO_DISPLAY_STRING = Symbol(!!(process.env.NODE_ENV !== "production") ? `toDisplayString` : ``);
+const TO_DISPLAY_STRING = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? `toDisplayString` : ``
+);
 const MERGE_PROPS = Symbol(!!(process.env.NODE_ENV !== "production") ? `mergeProps` : ``);
-const NORMALIZE_CLASS = Symbol(!!(process.env.NODE_ENV !== "production") ? `normalizeClass` : ``);
-const NORMALIZE_STYLE = Symbol(!!(process.env.NODE_ENV !== "production") ? `normalizeStyle` : ``);
-const NORMALIZE_PROPS = Symbol(!!(process.env.NODE_ENV !== "production") ? `normalizeProps` : ``);
-const GUARD_REACTIVE_PROPS = Symbol(!!(process.env.NODE_ENV !== "production") ? `guardReactiveProps` : ``);
+const NORMALIZE_CLASS = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? `normalizeClass` : ``
+);
+const NORMALIZE_STYLE = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? `normalizeStyle` : ``
+);
+const NORMALIZE_PROPS = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? `normalizeProps` : ``
+);
+const GUARD_REACTIVE_PROPS = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? `guardReactiveProps` : ``
+);
 const TO_HANDLERS = Symbol(!!(process.env.NODE_ENV !== "production") ? `toHandlers` : ``);
 const CAMELIZE = Symbol(!!(process.env.NODE_ENV !== "production") ? `camelize` : ``);
 const CAPITALIZE = Symbol(!!(process.env.NODE_ENV !== "production") ? `capitalize` : ``);
-const TO_HANDLER_KEY = Symbol(!!(process.env.NODE_ENV !== "production") ? `toHandlerKey` : ``);
-const SET_BLOCK_TRACKING = Symbol(!!(process.env.NODE_ENV !== "production") ? `setBlockTracking` : ``);
+const TO_HANDLER_KEY = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? `toHandlerKey` : ``
+);
+const SET_BLOCK_TRACKING = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? `setBlockTracking` : ``
+);
 const PUSH_SCOPE_ID = Symbol(!!(process.env.NODE_ENV !== "production") ? `pushScopeId` : ``);
 const POP_SCOPE_ID = Symbol(!!(process.env.NODE_ENV !== "production") ? `popScopeId` : ``);
 const WITH_CTX = Symbol(!!(process.env.NODE_ENV !== "production") ? `withCtx` : ``);
@@ -15301,8 +15632,9 @@ const isSimpleIdentifier = (name) => !nonIdentifierRE.test(name);
 const validFirstIdentCharRE = /[A-Za-z_$\xA0-\uFFFF]/;
 const validIdentCharRE = /[\.\?\w$\xA0-\uFFFF]/;
 const whitespaceRE = /\s+[.[]\s*|\s*[.[]\s+/g;
-const isMemberExpressionBrowser = (path) => {
-  path = path.trim().replace(whitespaceRE, (s) => s.trim());
+const getExpSource = (exp) => exp.type === 4 ? exp.content : exp.loc.source;
+const isMemberExpressionBrowser = (exp) => {
+  const path = getExpSource(exp).trim().replace(whitespaceRE, (s) => s.trim());
   let state = 0 /* inMemberExp */;
   let stateStack = [];
   let currentOpenBracketCount = 0;
@@ -15364,6 +15696,9 @@ const isMemberExpressionBrowser = (path) => {
   return !currentOpenBracketCount && !currentOpenParensCount;
 };
 const isMemberExpression = isMemberExpressionBrowser ;
+const fnExpRE = /^\s*(async\s*)?(\([^)]*?\)|[\w$_]+)\s*(:[^=]+)?=>|^\s*(async\s+)?function(?:\s+[\w$]+)?\s*\(/;
+const isFnExpressionBrowser = (exp) => fnExpRE.test(getExpSource(exp));
+const isFnExpression = isFnExpressionBrowser ;
 function assert(condition, msg) {
   if (!condition) {
     throw new Error(msg || `unexpected compiler condition`);
@@ -18357,7 +18692,7 @@ function resolveComponentType(node, context, ssr = false) {
       } else {
         exp = isProp.exp;
         if (!exp) {
-          exp = createSimpleExpression(`is`, false, isProp.loc);
+          exp = createSimpleExpression(`is`, false, isProp.arg.loc);
         }
       }
       if (exp) {
@@ -18861,7 +19196,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) {
@@ -18905,8 +19239,8 @@ const transformOn$1 = (dir, node, context, augmentor) => {
   }
   let shouldCache = context.cacheHandlers && !exp && !context.inVOnce;
   if (exp) {
-    const isMemberExp = isMemberExpression(exp.content);
-    const isInlineStatement = !(isMemberExp || fnExpRE.test(exp.content));
+    const isMemberExp = isMemberExpression(exp);
+    const isInlineStatement = !(isMemberExp || isFnExpression(exp));
     const hasMultipleStatements = exp.content.includes(`;`);
     if (!!(process.env.NODE_ENV !== "production") && true) {
       validateBrowserExpression(
@@ -19054,7 +19388,7 @@ const transformModel$1 = (dir, node, context) => {
     return createTransformProps();
   }
   const maybeRef = false;
-  if (!expString.trim() || !isMemberExpression(expString) && !maybeRef) {
+  if (!expString.trim() || !isMemberExpression(exp) && !maybeRef) {
     context.onError(
       createCompilerError(42, exp.loc)
     );
@@ -19330,15 +19664,27 @@ function baseCompile(source, options = {}) {
 const noopDirectiveTransform = () => ({ props: [] });
 
 const V_MODEL_RADIO = Symbol(!!(process.env.NODE_ENV !== "production") ? `vModelRadio` : ``);
-const V_MODEL_CHECKBOX = Symbol(!!(process.env.NODE_ENV !== "production") ? `vModelCheckbox` : ``);
+const V_MODEL_CHECKBOX = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? `vModelCheckbox` : ``
+);
 const V_MODEL_TEXT = Symbol(!!(process.env.NODE_ENV !== "production") ? `vModelText` : ``);
-const V_MODEL_SELECT = Symbol(!!(process.env.NODE_ENV !== "production") ? `vModelSelect` : ``);
-const V_MODEL_DYNAMIC = Symbol(!!(process.env.NODE_ENV !== "production") ? `vModelDynamic` : ``);
-const V_ON_WITH_MODIFIERS = Symbol(!!(process.env.NODE_ENV !== "production") ? `vOnModifiersGuard` : ``);
-const V_ON_WITH_KEYS = Symbol(!!(process.env.NODE_ENV !== "production") ? `vOnKeysGuard` : ``);
+const V_MODEL_SELECT = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? `vModelSelect` : ``
+);
+const V_MODEL_DYNAMIC = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? `vModelDynamic` : ``
+);
+const V_ON_WITH_MODIFIERS = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? `vOnModifiersGuard` : ``
+);
+const V_ON_WITH_KEYS = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? `vOnKeysGuard` : ``
+);
 const V_SHOW = Symbol(!!(process.env.NODE_ENV !== "production") ? `vShow` : ``);
 const TRANSITION = Symbol(!!(process.env.NODE_ENV !== "production") ? `Transition` : ``);
-const TRANSITION_GROUP = Symbol(!!(process.env.NODE_ENV !== "production") ? `TransitionGroup` : ``);
+const TRANSITION_GROUP = Symbol(
+  !!(process.env.NODE_ENV !== "production") ? `TransitionGroup` : ``
+);
 registerRuntimeHelpers({
   [V_MODEL_RADIO]: `vModelRadio`,
   [V_MODEL_CHECKBOX]: `vModelCheckbox`,
@@ -20022,6 +20368,6 @@ registerRuntimeCompiler(compileToFunction);
 const Vue = createCompatVue();
 Vue.compile = compileToFunction;
 
-const { configureCompat } = Vue;
+const configureCompat = Vue.configureCompat;
 
-export { BaseTransition, BaseTransitionPropsValidators, Comment, DeprecationTypes, EffectScope, ErrorCodes, ErrorTypeStrings, Fragment, KeepAlive, ReactiveEffect, Static, Suspense, Teleport, Text, TrackOpTypes, Transition, TransitionGroup, TriggerOpTypes, VueElement, assertNumber, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, computed, configureCompat, createApp, createBlock, createCommentVNode, createElementBlock, createBaseVNode as createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, Vue as default, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineModel, defineOptions, defineProps, defineSSRCustomElement, defineSlots, devtools, effect, effectScope, getCurrentInstance, getCurrentScope, getTransitionRawChildren, guardReactiveProps, h, handleError, hasInjectionContext, hydrate, hydrateOnIdle, hydrateOnInteraction, hydrateOnMediaQuery, hydrateOnVisible, initCustomFormatter, initDirectivesForSSR, inject, isMemoSame, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isShallow, isVNode, markRaw, mergeDefaults, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, stop, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, toValue, transformVNodeArgs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useId, useModel, useSSRContext, useSlots, useTemplateRef, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId };
+export { BaseTransition, BaseTransitionPropsValidators, Comment, DeprecationTypes, EffectScope, ErrorCodes, ErrorTypeStrings, Fragment, KeepAlive, ReactiveEffect, Static, Suspense, Teleport, Text, TrackOpTypes, Transition, TransitionGroup, TriggerOpTypes, VueElement, assertNumber, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, computed, configureCompat, createApp, createBlock, createCommentVNode, createElementBlock, createBaseVNode as createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, Vue as default, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineModel, defineOptions, defineProps, defineSSRCustomElement, defineSlots, devtools, effect, effectScope, getCurrentInstance, getCurrentScope, getTransitionRawChildren, guardReactiveProps, h, handleError, hasInjectionContext, hydrate, hydrateOnIdle, hydrateOnInteraction, hydrateOnMediaQuery, hydrateOnVisible, initCustomFormatter, initDirectivesForSSR, inject, isMemoSame, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isShallow, isVNode, markRaw, mergeDefaults, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, stop, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, toValue, transformVNodeArgs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useHost, useId, useModel, useSSRContext, useShadowRoot, useSlots, useTemplateRef, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId };