@vue/compat 3.4.0-alpha.3 → 3.4.0-beta.1

package/dist/vue.global.js

@@ -11,8 +11,8 @@ var Vue = (function () {
   const NOOP = () => {
   };
   const NO = () => false;
-  const onRE = /^on[^a-z]/;
-  const isOn = (key) => onRE.test(key);
+  const isOn = (key) => key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && // uppercase letter
+  (key.charCodeAt(2) > 122 || key.charCodeAt(2) < 97);
   const isModelListener = (key) => key.startsWith("onUpdate:");
   const extend = Object.assign;
   const remove = (arr, el) => {
@@ -120,7 +120,7 @@ var Vue = (function () {
     [3]: "FORWARDED"
   };
 
-  const GLOBALS_ALLOWED = "Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt,console";
+  const GLOBALS_ALLOWED = "Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt,console,Error";
   const isGloballyAllowed = /* @__PURE__ */ makeMap(GLOBALS_ALLOWED);
 
   const range = 2;
@@ -193,6 +193,20 @@ var Vue = (function () {
     });
     return ret;
   }
+  function stringifyStyle(styles) {
+    let ret = "";
+    if (!styles || isString(styles)) {
+      return ret;
+    }
+    for (const key in styles) {
+      const value = styles[key];
+      const normalizedKey = key.startsWith(`--`) ? key : hyphenate(key);
+      if (isString(value) || typeof value === "number") {
+        ret += `${normalizedKey}:${value};`;
+      }
+    }
+    return ret;
+  }
   function normalizeClass(value) {
     let res = "";
     if (isString(value)) {
@@ -228,16 +242,27 @@ var Vue = (function () {
 
   const HTML_TAGS = "html,body,base,head,link,meta,style,title,address,article,aside,footer,header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,summary,template,blockquote,iframe,tfoot";
   const SVG_TAGS = "svg,animate,animateMotion,animateTransform,circle,clipPath,color-profile,defs,desc,discard,ellipse,feBlend,feColorMatrix,feComponentTransfer,feComposite,feConvolveMatrix,feDiffuseLighting,feDisplacementMap,feDistantLight,feDropShadow,feFlood,feFuncA,feFuncB,feFuncG,feFuncR,feGaussianBlur,feImage,feMerge,feMergeNode,feMorphology,feOffset,fePointLight,feSpecularLighting,feSpotLight,feTile,feTurbulence,filter,foreignObject,g,hatch,hatchpath,image,line,linearGradient,marker,mask,mesh,meshgradient,meshpatch,meshrow,metadata,mpath,path,pattern,polygon,polyline,radialGradient,rect,set,solidcolor,stop,switch,symbol,text,textPath,title,tspan,unknown,use,view";
+  const MATH_TAGS = "math,maction,annotation,annotation-xml,menclose,merror,mfenced,mfrac,mi,mmultiscripts,mn,mo,mover,mpadded,mphantom,mprescripts,mroot,mrow,ms,semantics,mspace,msqrt,mstyle,msub,msup,msubsup,mtable,mtd,mtext,mtr,munder,munderover";
   const VOID_TAGS = "area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr";
   const isHTMLTag = /* @__PURE__ */ makeMap(HTML_TAGS);
   const isSVGTag = /* @__PURE__ */ makeMap(SVG_TAGS);
+  const isMathMLTag = /* @__PURE__ */ makeMap(MATH_TAGS);
   const isVoidTag = /* @__PURE__ */ makeMap(VOID_TAGS);
 
   const specialBooleanAttrs = `itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly`;
   const isSpecialBooleanAttr = /* @__PURE__ */ makeMap(specialBooleanAttrs);
+  const isBooleanAttr = /* @__PURE__ */ makeMap(
+    specialBooleanAttrs + `,async,autofocus,autoplay,controls,default,defer,disabled,hidden,inert,loop,open,required,reversed,scoped,seamless,checked,muted,multiple,selected`
+  );
   function includeBooleanAttr(value) {
     return !!value || value === "";
   }
+  const isKnownHtmlAttr = /* @__PURE__ */ makeMap(
+    `accept,accept-charset,accesskey,action,align,allow,alt,async,autocapitalize,autocomplete,autofocus,autoplay,background,bgcolor,border,buffered,capture,challenge,charset,checked,cite,class,code,codebase,color,cols,colspan,content,contenteditable,contextmenu,controls,coords,crossorigin,csp,data,datetime,decoding,default,defer,dir,dirname,disabled,download,draggable,dropzone,enctype,enterkeyhint,for,form,formaction,formenctype,formmethod,formnovalidate,formtarget,headers,height,hidden,high,href,hreflang,http-equiv,icon,id,importance,inert,integrity,ismap,itemprop,keytype,kind,label,lang,language,loading,list,loop,low,manifest,max,maxlength,minlength,media,min,multiple,muted,name,novalidate,open,optimum,pattern,ping,placeholder,poster,preload,radiogroup,readonly,referrerpolicy,rel,required,reversed,rows,rowspan,sandbox,scope,scoped,selected,shape,size,sizes,slot,span,spellcheck,src,srcdoc,srclang,srcset,start,step,style,summary,tabindex,target,title,translate,type,usemap,value,width,wrap`
+  );
+  const isKnownSvgAttr = /* @__PURE__ */ makeMap(
+    `xmlns,accent-height,accumulate,additive,alignment-baseline,alphabetic,amplitude,arabic-form,ascent,attributeName,attributeType,azimuth,baseFrequency,baseline-shift,baseProfile,bbox,begin,bias,by,calcMode,cap-height,class,clip,clipPathUnits,clip-path,clip-rule,color,color-interpolation,color-interpolation-filters,color-profile,color-rendering,contentScriptType,contentStyleType,crossorigin,cursor,cx,cy,d,decelerate,descent,diffuseConstant,direction,display,divisor,dominant-baseline,dur,dx,dy,edgeMode,elevation,enable-background,end,exponent,fill,fill-opacity,fill-rule,filter,filterRes,filterUnits,flood-color,flood-opacity,font-family,font-size,font-size-adjust,font-stretch,font-style,font-variant,font-weight,format,from,fr,fx,fy,g1,g2,glyph-name,glyph-orientation-horizontal,glyph-orientation-vertical,glyphRef,gradientTransform,gradientUnits,hanging,height,href,hreflang,horiz-adv-x,horiz-origin-x,id,ideographic,image-rendering,in,in2,intercept,k,k1,k2,k3,k4,kernelMatrix,kernelUnitLength,kerning,keyPoints,keySplines,keyTimes,lang,lengthAdjust,letter-spacing,lighting-color,limitingConeAngle,local,marker-end,marker-mid,marker-start,markerHeight,markerUnits,markerWidth,mask,maskContentUnits,maskUnits,mathematical,max,media,method,min,mode,name,numOctaves,offset,opacity,operator,order,orient,orientation,origin,overflow,overline-position,overline-thickness,panose-1,paint-order,path,pathLength,patternContentUnits,patternTransform,patternUnits,ping,pointer-events,points,pointsAtX,pointsAtY,pointsAtZ,preserveAlpha,preserveAspectRatio,primitiveUnits,r,radius,referrerPolicy,refX,refY,rel,rendering-intent,repeatCount,repeatDur,requiredExtensions,requiredFeatures,restart,result,rotate,rx,ry,scale,seed,shape-rendering,slope,spacing,specularConstant,specularExponent,speed,spreadMethod,startOffset,stdDeviation,stemh,stemv,stitchTiles,stop-color,stop-opacity,strikethrough-position,strikethrough-thickness,string,stroke,stroke-dasharray,stroke-dashoffset,stroke-linecap,stroke-linejoin,stroke-miterlimit,stroke-opacity,stroke-width,style,surfaceScale,systemLanguage,tabindex,tableValues,target,targetX,targetY,text-anchor,text-decoration,text-rendering,textLength,to,transform,transform-origin,type,u1,u2,underline-position,underline-thickness,unicode,unicode-bidi,unicode-range,units-per-em,v-alphabetic,v-hanging,v-ideographic,v-mathematical,values,vector-effect,version,vert-adv-y,vert-origin-x,vert-origin-y,viewBox,viewTarget,visibility,width,widths,word-spacing,writing-mode,x,x-height,x1,x2,xChannelSelector,xlink:actuate,xlink:arcrole,xlink:href,xlink:role,xlink:show,xlink:title,xlink:type,xmlns:xlink,xml:base,xml:lang,xml:space,y,y1,y2,yChannelSelector,z,zoomAndPan`
+  );
 
   function looseCompareArrays(a, b) {
     if (a.length !== b.length)
@@ -299,20 +324,29 @@ var Vue = (function () {
       return replacer(_key, val.value);
     } else if (isMap(val)) {
       return {
-        [`Map(${val.size})`]: [...val.entries()].reduce((entries, [key, val2]) => {
-          entries[`${key} =>`] = val2;
-          return entries;
-        }, {})
+        [`Map(${val.size})`]: [...val.entries()].reduce(
+          (entries, [key, val2], i) => {
+            entries[stringifySymbol(key, i) + " =>"] = val2;
+            return entries;
+          },
+          {}
+        )
       };
     } else if (isSet(val)) {
       return {
-        [`Set(${val.size})`]: [...val.values()]
+        [`Set(${val.size})`]: [...val.values()].map((v) => stringifySymbol(v))
       };
+    } else if (isSymbol(val)) {
+      return stringifySymbol(val);
     } else if (isObject(val) && !isArray(val) && !isPlainObject(val)) {
       return String(val);
     }
     return val;
   };
+  const stringifySymbol = (v, i = "") => {
+    var _a;
+    return isSymbol(v) ? `Symbol(${(_a = v.description) != null ? _a : i})` : v;
+  };
 
   function warn$1(msg, ...args) {
     console.warn(`[Vue warn] ${msg}`, ...args);
@@ -761,8 +795,13 @@ var Vue = (function () {
         return isReadonly2;
       } else if (key === "__v_isShallow") {
         return shallow;
-      } else if (key === "__v_raw" && receiver === (isReadonly2 ? shallow ? shallowReadonlyMap : readonlyMap : shallow ? shallowReactiveMap : reactiveMap).get(target)) {
-        return target;
+      } else if (key === "__v_raw") {
+        if (receiver === (isReadonly2 ? shallow ? shallowReadonlyMap : readonlyMap : shallow ? 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
+        Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) {
+          return target;
+        }
+        return;
       }
       const targetIsArray = isArray(target);
       if (!isReadonly2) {
@@ -798,17 +837,19 @@ var Vue = (function () {
     }
     set(target, key, value, receiver) {
       let oldValue = target[key];
-      if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
-        return false;
-      }
       if (!this._shallow) {
+        const isOldValueReadonly = isReadonly(oldValue);
         if (!isShallow(value) && !isReadonly(value)) {
           oldValue = toRaw(oldValue);
           value = toRaw(value);
         }
         if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
-          oldValue.value = value;
-          return true;
+          if (isOldValueReadonly) {
+            return false;
+          } else {
+            oldValue.value = value;
+            return true;
+          }
         }
       }
       const hadKey = isArray(target) && isIntegerKey(key) ? Number(key) < target.length : hasOwn(target, key);
@@ -1501,6 +1542,18 @@ var Vue = (function () {
     return isRef(val) ? val : new ObjectRefImpl(source, key, defaultValue);
   }
 
+  const TrackOpTypes = {
+    "GET": "get",
+    "HAS": "has",
+    "ITERATE": "iterate"
+  };
+  const TriggerOpTypes = {
+    "SET": "set",
+    "ADD": "add",
+    "DELETE": "delete",
+    "CLEAR": "clear"
+  };
+
   const stack$1 = [];
   function pushWarningContext(vnode) {
     stack$1.push(vnode);
@@ -1615,6 +1668,38 @@ var Vue = (function () {
     }
   }
 
+  const ErrorCodes = {
+    "SETUP_FUNCTION": 0,
+    "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,
+    "6": "COMPONENT_EVENT_HANDLER",
+    "VNODE_HOOK": 7,
+    "7": "VNODE_HOOK",
+    "DIRECTIVE_HOOK": 8,
+    "8": "DIRECTIVE_HOOK",
+    "TRANSITION_HOOK": 9,
+    "9": "TRANSITION_HOOK",
+    "APP_ERROR_HANDLER": 10,
+    "10": "APP_ERROR_HANDLER",
+    "APP_WARN_HANDLER": 11,
+    "11": "APP_WARN_HANDLER",
+    "FUNCTION_REF": 12,
+    "12": "FUNCTION_REF",
+    "ASYNC_COMPONENT_LOADER": 13,
+    "13": "ASYNC_COMPONENT_LOADER",
+    "SCHEDULER": 14,
+    "14": "SCHEDULER"
+  };
   const ErrorTypeStrings$1 = {
     ["sp"]: "serverPrefetch hook",
     ["bc"]: "beforeCreate hook",
@@ -1786,13 +1871,16 @@ var Vue = (function () {
     }
     queueFlush();
   }
-  function flushPreFlushCbs(seen, i = isFlushing ? flushIndex + 1 : 0) {
+  function flushPreFlushCbs(instance, seen, i = isFlushing ? flushIndex + 1 : 0) {
     {
       seen = seen || /* @__PURE__ */ new Map();
     }
     for (; i < queue.length; i++) {
       const cb = queue[i];
       if (cb && cb.pre) {
+        if (instance && cb.id !== instance.uid) {
+          continue;
+        }
         if (checkRecursiveUpdates(seen, cb)) {
           continue;
         }
@@ -2097,6 +2185,50 @@ var Vue = (function () {
     );
   }
 
+  const DeprecationTypes$1 = {
+    "GLOBAL_MOUNT": "GLOBAL_MOUNT",
+    "GLOBAL_MOUNT_CONTAINER": "GLOBAL_MOUNT_CONTAINER",
+    "GLOBAL_EXTEND": "GLOBAL_EXTEND",
+    "GLOBAL_PROTOTYPE": "GLOBAL_PROTOTYPE",
+    "GLOBAL_SET": "GLOBAL_SET",
+    "GLOBAL_DELETE": "GLOBAL_DELETE",
+    "GLOBAL_OBSERVABLE": "GLOBAL_OBSERVABLE",
+    "GLOBAL_PRIVATE_UTIL": "GLOBAL_PRIVATE_UTIL",
+    "CONFIG_SILENT": "CONFIG_SILENT",
+    "CONFIG_DEVTOOLS": "CONFIG_DEVTOOLS",
+    "CONFIG_KEY_CODES": "CONFIG_KEY_CODES",
+    "CONFIG_PRODUCTION_TIP": "CONFIG_PRODUCTION_TIP",
+    "CONFIG_IGNORED_ELEMENTS": "CONFIG_IGNORED_ELEMENTS",
+    "CONFIG_WHITESPACE": "CONFIG_WHITESPACE",
+    "CONFIG_OPTION_MERGE_STRATS": "CONFIG_OPTION_MERGE_STRATS",
+    "INSTANCE_SET": "INSTANCE_SET",
+    "INSTANCE_DELETE": "INSTANCE_DELETE",
+    "INSTANCE_DESTROY": "INSTANCE_DESTROY",
+    "INSTANCE_EVENT_EMITTER": "INSTANCE_EVENT_EMITTER",
+    "INSTANCE_EVENT_HOOKS": "INSTANCE_EVENT_HOOKS",
+    "INSTANCE_CHILDREN": "INSTANCE_CHILDREN",
+    "INSTANCE_LISTENERS": "INSTANCE_LISTENERS",
+    "INSTANCE_SCOPED_SLOTS": "INSTANCE_SCOPED_SLOTS",
+    "INSTANCE_ATTRS_CLASS_STYLE": "INSTANCE_ATTRS_CLASS_STYLE",
+    "OPTIONS_DATA_FN": "OPTIONS_DATA_FN",
+    "OPTIONS_DATA_MERGE": "OPTIONS_DATA_MERGE",
+    "OPTIONS_BEFORE_DESTROY": "OPTIONS_BEFORE_DESTROY",
+    "OPTIONS_DESTROYED": "OPTIONS_DESTROYED",
+    "WATCH_ARRAY": "WATCH_ARRAY",
+    "PROPS_DEFAULT_THIS": "PROPS_DEFAULT_THIS",
+    "V_ON_KEYCODE_MODIFIER": "V_ON_KEYCODE_MODIFIER",
+    "CUSTOM_DIR": "CUSTOM_DIR",
+    "ATTR_FALSE_VALUE": "ATTR_FALSE_VALUE",
+    "ATTR_ENUMERATED_COERCION": "ATTR_ENUMERATED_COERCION",
+    "TRANSITION_CLASSES": "TRANSITION_CLASSES",
+    "TRANSITION_GROUP_ROOT": "TRANSITION_GROUP_ROOT",
+    "COMPONENT_ASYNC": "COMPONENT_ASYNC",
+    "COMPONENT_FUNCTIONAL": "COMPONENT_FUNCTIONAL",
+    "COMPONENT_V_MODEL": "COMPONENT_V_MODEL",
+    "RENDER_FUNCTION": "RENDER_FUNCTION",
+    "FILTERS": "FILTERS",
+    "PRIVATE_APIS": "PRIVATE_APIS"
+  };
   const deprecationData$1 = {
     ["GLOBAL_MOUNT"]: {
       message: `The global app bootstrapping API has changed: vm.$mount() and the "el" option have been removed. Use createApp(RootComponent).mount() instead.`,
@@ -3025,9 +3157,17 @@ Details: https://v3-migration.vuejs.org/breaking-changes/migration-build.html`
     return false;
   }
   function updateHOCHostEl({ vnode, parent }, el) {
-    while (parent && parent.subTree === vnode) {
-      (vnode = parent.vnode).el = el;
-      parent = parent.parent;
+    while (parent) {
+      const root = parent.subTree;
+      if (root.suspense && root.suspense.activeBranch === vnode) {
+        root.el = vnode.el;
+      }
+      if (root === vnode) {
+        (vnode = parent.vnode).el = el;
+        parent = parent.parent;
+      } else {
+        break;
+      }
     }
   }
 
@@ -3091,6 +3231,7 @@ If this is a native custom element, make sure to exclude it from component resol
   }
 
   const isSuspense = (type) => type.__isSuspense;
+  let suspenseId = 0;
   const SuspenseImpl = {
     name: "Suspense",
     // In order to make Suspense tree-shakable, we need to avoid importing it
@@ -3098,7 +3239,7 @@ If this is a native custom element, make sure to exclude it from component resol
     // on a vnode's type and calls the `process` method, passing in renderer
     // internals.
     __isSuspense: true,
-    process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, rendererInternals) {
+    process(n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized, rendererInternals) {
       if (n1 == null) {
         mountSuspense(
           n2,
@@ -3106,7 +3247,7 @@ If this is a native custom element, make sure to exclude it from component resol
           anchor,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
           optimized,
           rendererInternals
@@ -3118,7 +3259,7 @@ If this is a native custom element, make sure to exclude it from component resol
           container,
           anchor,
           parentComponent,
-          isSVG,
+          namespace,
           slotScopeIds,
           optimized,
           rendererInternals
@@ -3136,7 +3277,7 @@ If this is a native custom element, make sure to exclude it from component resol
       eventListener();
     }
   }
-  function mountSuspense(vnode, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, rendererInternals) {
+  function mountSuspense(vnode, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized, rendererInternals) {
     const {
       p: patch,
       o: { createElement }
@@ -3149,7 +3290,7 @@ If this is a native custom element, make sure to exclude it from component resol
       container,
       hiddenContainer,
       anchor,
-      isSVG,
+      namespace,
       slotScopeIds,
       optimized,
       rendererInternals
@@ -3161,7 +3302,7 @@ If this is a native custom element, make sure to exclude it from component resol
       null,
       parentComponent,
       suspense,
-      isSVG,
+      namespace,
       slotScopeIds
     );
     if (suspense.deps > 0) {
@@ -3175,7 +3316,7 @@ If this is a native custom element, make sure to exclude it from component resol
         parentComponent,
         null,
         // fallback tree will not have suspense context
-        isSVG,
+        namespace,
         slotScopeIds
       );
       setActiveBranch(suspense, vnode.ssFallback);
@@ -3183,7 +3324,7 @@ If this is a native custom element, make sure to exclude it from component resol
       suspense.resolve(false, true);
     }
   }
-  function patchSuspense(n1, n2, container, anchor, parentComponent, isSVG, slotScopeIds, optimized, { p: patch, um: unmount, o: { createElement } }) {
+  function patchSuspense(n1, n2, container, anchor, parentComponent, namespace, slotScopeIds, optimized, { p: patch, um: unmount, o: { createElement } }) {
     const suspense = n2.suspense = n1.suspense;
     suspense.vnode = n2;
     n2.el = n1.el;
@@ -3200,29 +3341,31 @@ If this is a native custom element, make sure to exclude it from component resol
           null,
           parentComponent,
           suspense,
-          isSVG,
+          namespace,
           slotScopeIds,
           optimized
         );
         if (suspense.deps <= 0) {
           suspense.resolve();
         } else if (isInFallback) {
-          patch(
-            activeBranch,
-            newFallback,
-            container,
-            anchor,
-            parentComponent,
-            null,
-            // fallback tree will not have suspense context
-            isSVG,
-            slotScopeIds,
-            optimized
-          );
-          setActiveBranch(suspense, newFallback);
+          if (!isHydrating) {
+            patch(
+              activeBranch,
+              newFallback,
+              container,
+              anchor,
+              parentComponent,
+              null,
+              // fallback tree will not have suspense context
+              namespace,
+              slotScopeIds,
+              optimized
+            );
+            setActiveBranch(suspense, newFallback);
+          }
         }
       } else {
-        suspense.pendingId++;
+        suspense.pendingId = suspenseId++;
         if (isHydrating) {
           suspense.isHydrating = false;
           suspense.activeBranch = pendingBranch;
@@ -3240,7 +3383,7 @@ If this is a native custom element, make sure to exclude it from component resol
             null,
             parentComponent,
             suspense,
-            isSVG,
+            namespace,
             slotScopeIds,
             optimized
           );
@@ -3255,7 +3398,7 @@ If this is a native custom element, make sure to exclude it from component resol
               parentComponent,
               null,
               // fallback tree will not have suspense context
-              isSVG,
+              namespace,
               slotScopeIds,
               optimized
             );
@@ -3269,7 +3412,7 @@ If this is a native custom element, make sure to exclude it from component resol
             anchor,
             parentComponent,
             suspense,
-            isSVG,
+            namespace,
             slotScopeIds,
             optimized
           );
@@ -3282,7 +3425,7 @@ If this is a native custom element, make sure to exclude it from component resol
             null,
             parentComponent,
             suspense,
-            isSVG,
+            namespace,
             slotScopeIds,
             optimized
           );
@@ -3300,7 +3443,7 @@ If this is a native custom element, make sure to exclude it from component resol
           anchor,
           parentComponent,
           suspense,
-          isSVG,
+          namespace,
           slotScopeIds,
           optimized
         );
@@ -3308,7 +3451,11 @@ If this is a native custom element, make sure to exclude it from component resol
       } else {
         triggerEvent(n2, "onPending");
         suspense.pendingBranch = newBranch;
-        suspense.pendingId++;
+        if (newBranch.shapeFlag & 512) {
+          suspense.pendingId = newBranch.component.suspenseId;
+        } else {
+          suspense.pendingId = suspenseId++;
+        }
         patch(
           null,
           newBranch,
@@ -3316,7 +3463,7 @@ If this is a native custom element, make sure to exclude it from component resol
           null,
           parentComponent,
           suspense,
-          isSVG,
+          namespace,
           slotScopeIds,
           optimized
         );
@@ -3338,7 +3485,7 @@ If this is a native custom element, make sure to exclude it from component resol
     }
   }
   let hasWarned = false;
-  function createSuspenseBoundary(vnode, parentSuspense, parentComponent, container, hiddenContainer, anchor, isSVG, slotScopeIds, optimized, rendererInternals, isHydrating = false) {
+  function createSuspenseBoundary(vnode, parentSuspense, parentComponent, container, hiddenContainer, anchor, namespace, slotScopeIds, optimized, rendererInternals, isHydrating = false) {
     if (!hasWarned) {
       hasWarned = true;
       console[console.info ? "info" : "log"](
@@ -3368,7 +3515,7 @@ If this is a native custom element, make sure to exclude it from component resol
       vnode,
       parent: parentSuspense,
       parentComponent,
-      isSVG,
+      namespace,
       container,
       hiddenContainer,
       anchor,
@@ -3377,7 +3524,7 @@ If this is a native custom element, make sure to exclude it from component resol
       timeout: typeof timeout === "number" ? timeout : -1,
       activeBranch: null,
       pendingBranch: null,
-      isInFallback: true,
+      isInFallback: !isHydrating,
       isHydrating,
       isUnmounted: false,
       effects: [],
@@ -3411,7 +3558,12 @@ If this is a native custom element, make sure to exclude it from component resol
           if (delayEnter) {
             activeBranch.transition.afterLeave = () => {
               if (pendingId === suspense.pendingId) {
-                move(pendingBranch, container2, anchor2, 0);
+                move(
+                  pendingBranch,
+                  container2,
+                  next(activeBranch),
+                  0
+                );
                 queuePostFlushCb(effects);
               }
             };
@@ -3456,7 +3608,7 @@ If this is a native custom element, make sure to exclude it from component resol
         if (!suspense.pendingBranch) {
           return;
         }
-        const { vnode: vnode2, activeBranch, parentComponent: parentComponent2, container: container2, isSVG: isSVG2 } = suspense;
+        const { vnode: vnode2, activeBranch, parentComponent: parentComponent2, container: container2, namespace: namespace2 } = suspense;
         triggerEvent(vnode2, "onFallback");
         const anchor2 = next(activeBranch);
         const mountFallback = () => {
@@ -3471,7 +3623,7 @@ If this is a native custom element, make sure to exclude it from component resol
             parentComponent2,
             null,
             // fallback tree will not have suspense context
-            isSVG2,
+            namespace2,
             slotScopeIds,
             optimized
           );
@@ -3534,7 +3686,7 @@ If this is a native custom element, make sure to exclude it from component resol
             // consider the comment placeholder case.
             hydratedEl ? null : next(instance.subTree),
             suspense,
-            isSVG,
+            namespace,
             optimized
           );
           if (placeholder) {
@@ -3571,7 +3723,7 @@ If this is a native custom element, make sure to exclude it from component resol
     };
     return suspense;
   }
-  function hydrateSuspense(node, vnode, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, rendererInternals, hydrateNode) {
+  function hydrateSuspense(node, vnode, parentComponent, parentSuspense, namespace, slotScopeIds, optimized, rendererInternals, hydrateNode) {
     const suspense = vnode.suspense = createSuspenseBoundary(
       vnode,
       parentSuspense,
@@ -3579,7 +3731,7 @@ If this is a native custom element, make sure to exclude it from component resol
       node.parentNode,
       document.createElement("div"),
       null,
-      isSVG,
+      namespace,
       slotScopeIds,
       optimized,
       rendererInternals,
@@ -4521,7 +4673,7 @@ If this is a native custom element, make sure to exclude it from component resol
         }
       } = sharedContext;
       const storageContainer = createElement("div");
-      sharedContext.activate = (vnode, container, anchor, isSVG, optimized) => {
+      sharedContext.activate = (vnode, container, anchor, namespace, optimized) => {
         const instance2 = vnode.component;
         move(vnode, container, anchor, 0, parentSuspense);
         patch(
@@ -4531,7 +4683,7 @@ If this is a native custom element, make sure to exclude it from component resol
           anchor,
           instance2,
           parentSuspense,
-          isSVG,
+          namespace,
           vnode.slotScopeIds,
           optimized
         );
@@ -5719,7 +5871,7 @@ If this is a native custom element, make sure to exclude it from component resol
   function useAttrs() {
     return getContext().attrs;
   }
-  function useModel(props, name, options) {
+  function useModel(props, name) {
     const i = getCurrentInstance();
     if (!i) {
       warn(`useModel() called without active instance.`);
@@ -5729,29 +5881,24 @@ If this is a native custom element, make sure to exclude it from component resol
       warn(`useModel() called with prop "${name}" which is not declared.`);
       return ref();
     }
-    if (options && options.local) {
-      const proxy = ref(props[name]);
-      watch(
-        () => props[name],
-        (v) => proxy.value = v
-      );
-      watch(proxy, (value) => {
-        if (value !== props[name]) {
-          i.emit(`update:${name}`, value);
-        }
-      });
-      return proxy;
-    } else {
-      return {
-        __v_isRef: true,
-        get value() {
-          return props[name];
-        },
-        set value(value) {
-          i.emit(`update:${name}`, value);
+    let localValue;
+    watchSyncEffect(() => {
+      localValue = props[name];
+    });
+    return customRef((track, trigger) => ({
+      get() {
+        track();
+        return localValue;
+      },
+      set(value) {
+        const rawProps = i.vnode.props;
+        if (!(rawProps && name in rawProps) && hasChanged(value, localValue)) {
+          localValue = value;
+          trigger();
         }
-      };
-    }
+        i.emit(`update:${name}`, value);
+      }
+    }));
   }
   function getContext() {
     const i = getCurrentInstance();
@@ -6325,7 +6472,7 @@ If this is a native custom element, make sure to exclude it from component resol
         return vm;
       }
     }
-    Vue.version = `2.6.14-compat:${"3.4.0-alpha.3"}`;
+    Vue.version = `2.6.14-compat:${"3.4.0-beta.1"}`;
     Vue.config = singletonApp.config;
     Vue.use = (p, ...options) => {
       if (p && isFunction(p.install)) {
@@ -6570,12 +6717,16 @@ If this is a native custom element, make sure to exclude it from component resol
         } else {
           container = selectorOrEl || document.createElement("div");
         }
-        const isSVG = container instanceof SVGElement;
+        let namespace;
+        if (container instanceof SVGElement)
+          namespace = "svg";
+        else if (typeof MathMLElement === "function" && container instanceof MathMLElement)
+          namespace = "mathml";
         {
           context.reload = () => {
             const cloned = cloneVNode(vnode);
             cloned.component = null;
-            render(cloned, container, isSVG);
+            render(cloned, container, namespace);
           };
         }
         if (hasNoRender && instance.render === emptyRender) {
@@ -6598,7 +6749,7 @@ If this is a native custom element, make sure to exclude it from component resol
           );
         }
         container.innerHTML = "";
-        render(vnode, container, isSVG);
+        render(vnode, container, namespace);
         if (container instanceof Element) {
           container.removeAttribute("v-cloak");
           container.setAttribute("data-v-app", "");
@@ -6726,18 +6877,6 @@ If this is a native custom element, make sure to exclude it from component resol
         rootProps = null;
       }
       const context = createAppContext();
-      {
-        Object.defineProperty(context.config, "unwrapInjectedRef", {
-          get() {
-            return true;
-          },
-          set() {
-            warn(
-              `app.config.unwrapInjectedRef has been deprecated. 3.3 now always unwraps injected refs in Options API.`
-            );
-          }
-        });
-      }
       const installedPlugins = /* @__PURE__ */ new WeakSet();
       let isMounted = false;
       const app = context.app = {
@@ -6812,7 +6951,7 @@ If this is a native custom element, make sure to exclude it from component resol
           context.directives[name] = directive;
           return app;
         },
-        mount(rootContainer, isHydrate, isSVG) {
+        mount(rootContainer, isHydrate, namespace) {
           if (!isMounted) {
             if (rootContainer.__vue_app__) {
               warn(
@@ -6822,15 +6961,24 @@ If this is a native custom element, make sure to exclude it from component resol
             }
             const vnode = createVNode(rootComponent, rootProps);
             vnode.appContext = context;
+            if (namespace === true) {
+              namespace = "svg";
+            } else if (namespace === false) {
+              namespace = void 0;
+            }
             {
               context.reload = () => {
-                render(cloneVNode(vnode), rootContainer, isSVG);
+                render(
+                  cloneVNode(vnode),
+                  rootContainer,
+                  namespace
+                );
               };
             }
             if (isHydrate && hydrate) {
               hydrate(vnode, rootContainer);
             } else {
-              render(vnode, rootContainer, isSVG);
+              render(vnode, rootContainer, namespace);
             }
             isMounted = true;
             app._container = rootContainer;
@@ -7295,11 +7443,12 @@ If you want to remount the same app, move your app creation logic into a factory
         key,
         resolvedValues[key],
         opt,
+        shallowReadonly(resolvedValues) ,
         !hasOwn(rawProps, key) && !hasOwn(rawProps, hyphenate(key))
       );
     }
   }
-  function validateProp(name, value, prop, isAbsent) {
+  function validateProp(name, value, prop, props, isAbsent) {
     const { type, required, validator, skipCheck } = prop;
     if (required && isAbsent) {
       warn('Missing required prop: "' + name + '"');
@@ -7322,7 +7471,7 @@ If you want to remount the same app, move your app creation logic into a factory
         return;
       }
     }
-    if (validator && !validator(value)) {
+    if (validator && !validator(value, props)) {
       warn('Invalid prop: custom validator check failed for prop "' + name + '".');
     }
   }
@@ -7580,7 +7729,15 @@ If you want to remount the same app, move your app creation logic into a factory
   }
 
   let hasMismatch = false;
-  const isSVGContainer = (container) => /svg/.test(container.namespaceURI) && container.tagName !== "foreignObject";
+  const isSVGContainer = (container) => container.namespaceURI.includes("svg") && container.tagName !== "foreignObject";
+  const isMathMLContainer = (container) => container.namespaceURI.includes("MathML");
+  const getContainerType = (container) => {
+    if (isSVGContainer(container))
+      return "svg";
+    if (isMathMLContainer(container))
+      return "mathml";
+    return void 0;
+  };
   const isComment = (node) => node.nodeType === 8 /* COMMENT */;
   function createHydrationFunctions(rendererInternals) {
     const {
@@ -7659,11 +7816,13 @@ If you want to remount the same app, move your app creation logic into a factory
             if (node.data !== vnode.children) {
               hasMismatch = true;
               warn(
-                `Hydration text mismatch:
-- Server rendered: ${JSON.stringify(
+                `Hydration text mismatch in`,
+                node.parentNode,
+                `
+  - rendered on server: ${JSON.stringify(
                 node.data
               )}
-- Client rendered: ${JSON.stringify(vnode.children)}`
+  - expected on client: ${JSON.stringify(vnode.children)}`
               );
               node.data = vnode.children;
             }
@@ -7749,7 +7908,7 @@ If you want to remount the same app, move your app creation logic into a factory
               null,
               parentComponent,
               parentSuspense,
-              isSVGContainer(container),
+              getContainerType(container),
               optimized
             );
             if (isAsyncWrapper(vnode)) {
@@ -7784,7 +7943,7 @@ If you want to remount the same app, move your app creation logic into a factory
               vnode,
               parentComponent,
               parentSuspense,
-              isSVGContainer(parentNode(node)),
+              getContainerType(parentNode(node)),
               slotScopeIds,
               optimized,
               rendererInternals,
@@ -7807,38 +7966,6 @@ If you want to remount the same app, move your app creation logic into a factory
         if (dirs) {
           invokeDirectiveHook(vnode, null, parentComponent, "created");
         }
-        if (props) {
-          if (forcePatch || !optimized || patchFlag & (16 | 32)) {
-            for (const key in props) {
-              if (forcePatch && (key.endsWith("value") || key === "indeterminate") || isOn(key) && !isReservedProp(key) || // force hydrate v-bind with .prop modifiers
-              key[0] === ".") {
-                patchProp(
-                  el,
-                  key,
-                  null,
-                  props[key],
-                  false,
-                  void 0,
-                  parentComponent
-                );
-              }
-            }
-          } else if (props.onClick) {
-            patchProp(
-              el,
-              "onClick",
-              null,
-              props.onClick,
-              false,
-              void 0,
-              parentComponent
-            );
-          }
-        }
-        let vnodeHooks;
-        if (vnodeHooks = props && props.onVnodeBeforeMount) {
-          invokeVNodeHook(vnodeHooks, parentComponent, vnode);
-        }
         let needCallTransitionHooks = false;
         if (isTemplateNode(el)) {
           needCallTransitionHooks = needTransition(parentSuspense, transition) && parentComponent && parentComponent.vnode.props && parentComponent.vnode.props.appear;
@@ -7849,16 +7976,6 @@ If you want to remount the same app, move your app creation logic into a factory
           replaceNode(content, el, parentComponent);
           vnode.el = el = content;
         }
-        if (dirs) {
-          invokeDirectiveHook(vnode, null, parentComponent, "beforeMount");
-        }
-        if ((vnodeHooks = props && props.onVnodeMounted) || dirs || needCallTransitionHooks) {
-          queueEffectWithSuspense(() => {
-            vnodeHooks && invokeVNodeHook(vnodeHooks, parentComponent, vnode);
-            needCallTransitionHooks && transition.enter(el);
-            dirs && invokeDirectiveHook(vnode, null, parentComponent, "mounted");
-          }, parentSuspense);
-        }
         if (shapeFlag & 16 && // skip if element has innerHTML / textContent
         !(props && (props.innerHTML || props.textContent))) {
           let next = hydrateChildren(
@@ -7875,7 +7992,10 @@ If you want to remount the same app, move your app creation logic into a factory
             hasMismatch = true;
             if (!hasWarned) {
               warn(
-                `Hydration children mismatch in <${vnode.type}>: server rendered element contains more child nodes than client vdom.`
+                `Hydration children mismatch on`,
+                el,
+                `
+Server rendered element contains more child nodes than client vdom.`
               );
               hasWarned = true;
             }
@@ -7887,13 +8007,50 @@ If you want to remount the same app, move your app creation logic into a factory
           if (el.textContent !== vnode.children) {
             hasMismatch = true;
             warn(
-              `Hydration text content mismatch in <${vnode.type}>:
-- Server rendered: ${el.textContent}
-- Client rendered: ${vnode.children}`
+              `Hydration text content mismatch on`,
+              el,
+              `
+  - rendered on server: ${el.textContent}
+  - expected on client: ${vnode.children}`
             );
             el.textContent = vnode.children;
           }
         }
+        if (props) {
+          {
+            for (const key in props) {
+              if (propHasMismatch(el, key, props[key])) {
+                hasMismatch = true;
+              }
+              if (forcePatch && (key.endsWith("value") || key === "indeterminate") || isOn(key) && !isReservedProp(key) || // force hydrate v-bind with .prop modifiers
+              key[0] === ".") {
+                patchProp(
+                  el,
+                  key,
+                  null,
+                  props[key],
+                  void 0,
+                  void 0,
+                  parentComponent
+                );
+              }
+            }
+          }
+        }
+        let vnodeHooks;
+        if (vnodeHooks = props && props.onVnodeBeforeMount) {
+          invokeVNodeHook(vnodeHooks, parentComponent, vnode);
+        }
+        if (dirs) {
+          invokeDirectiveHook(vnode, null, parentComponent, "beforeMount");
+        }
+        if ((vnodeHooks = props && props.onVnodeMounted) || dirs || needCallTransitionHooks) {
+          queueEffectWithSuspense(() => {
+            vnodeHooks && invokeVNodeHook(vnodeHooks, parentComponent, vnode);
+            needCallTransitionHooks && transition.enter(el);
+            dirs && invokeDirectiveHook(vnode, null, parentComponent, "mounted");
+          }, parentSuspense);
+        }
       }
       return el.nextSibling;
     };
@@ -7919,7 +8076,10 @@ If you want to remount the same app, move your app creation logic into a factory
           hasMismatch = true;
           if (!hasWarned) {
             warn(
-              `Hydration children mismatch in <${container.tagName.toLowerCase()}>: server rendered element contains fewer child nodes than client vdom.`
+              `Hydration children mismatch on`,
+              container,
+              `
+Server rendered element contains fewer child nodes than client vdom.`
             );
             hasWarned = true;
           }
@@ -7930,7 +8090,7 @@ If you want to remount the same app, move your app creation logic into a factory
             null,
             parentComponent,
             parentSuspense,
-            isSVGContainer(container),
+            getContainerType(container),
             slotScopeIds
           );
         }
@@ -7964,12 +8124,12 @@ If you want to remount the same app, move your app creation logic into a factory
       hasMismatch = true;
       warn(
         `Hydration node mismatch:
-- Client vnode:`,
-        vnode.type,
-        `
-- Server rendered DOM:`,
+- rendered on server:`,
         node,
-        node.nodeType === 3 /* TEXT */ ? `(text)` : isComment(node) && node.data === "[" ? `(start of fragment)` : ``
+        node.nodeType === 3 /* TEXT */ ? `(text)` : isComment(node) && node.data === "[" ? `(start of fragment)` : ``,
+        `
+- expected on client:`,
+        vnode.type
       );
       vnode.el = null;
       if (isFragment) {
@@ -7993,7 +8153,7 @@ If you want to remount the same app, move your app creation logic into a factory
         next,
         parentComponent,
         parentSuspense,
-        isSVGContainer(container),
+        getContainerType(container),
         slotScopeIds
       );
       return next;
@@ -8034,6 +8194,46 @@ If you want to remount the same app, move your app creation logic into a factory
     };
     return [hydrate, hydrateNode];
   }
+  function propHasMismatch(el, key, clientValue) {
+    let mismatchType;
+    let mismatchKey;
+    let actual;
+    let expected;
+    if (key === "class") {
+      actual = el.className;
+      expected = normalizeClass(clientValue);
+      if (actual !== expected) {
+        mismatchType = mismatchKey = `class`;
+      }
+    } else if (key === "style") {
+      actual = el.getAttribute("style");
+      expected = isString(clientValue) ? clientValue : stringifyStyle(normalizeStyle(clientValue));
+      if (actual !== expected) {
+        mismatchType = mismatchKey = "style";
+      }
+    } else if (el instanceof SVGElement && isKnownSvgAttr(key) || el instanceof HTMLElement && (isBooleanAttr(key) || isKnownHtmlAttr(key))) {
+      actual = el.hasAttribute(key) && el.getAttribute(key);
+      expected = isBooleanAttr(key) ? includeBooleanAttr(clientValue) ? "" : false : clientValue == null ? false : String(clientValue);
+      if (actual !== expected) {
+        mismatchType = `attribute`;
+        mismatchKey = key;
+      }
+    }
+    if (mismatchType) {
+      const format = (v) => v === false ? `(not rendered)` : `${mismatchKey}="${v}"`;
+      warn(
+        `Hydration ${mismatchType} mismatch on`,
+        el,
+        `
+  - rendered on server: ${format(actual)}
+  - expected on client: ${format(expected)}
+  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
+  You should fix the source of the mismatch.`
+      );
+      return true;
+    }
+    return false;
+  }
 
   let supported;
   let perf;
@@ -8102,7 +8302,7 @@ If you want to remount the same app, move your app creation logic into a factory
       setScopeId: hostSetScopeId = NOOP,
       insertStaticContent: hostInsertStaticContent
     } = options;
-    const patch = (n1, n2, container, anchor = null, parentComponent = null, parentSuspense = null, isSVG = false, slotScopeIds = null, optimized = isHmrUpdating ? false : !!n2.dynamicChildren) => {
+    const patch = (n1, n2, container, anchor = null, parentComponent = null, parentSuspense = null, namespace = void 0, slotScopeIds = null, optimized = isHmrUpdating ? false : !!n2.dynamicChildren) => {
       if (n1 === n2) {
         return;
       }
@@ -8125,9 +8325,9 @@ If you want to remount the same app, move your app creation logic into a factory
           break;
         case Static:
           if (n1 == null) {
-            mountStaticNode(n2, container, anchor, isSVG);
+            mountStaticNode(n2, container, anchor, namespace);
           } else {
-            patchStaticNode(n1, n2, container, isSVG);
+            patchStaticNode(n1, n2, container, namespace);
           }
           break;
         case Fragment:
@@ -8138,7 +8338,7 @@ If you want to remount the same app, move your app creation logic into a factory
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
             optimized
           );
@@ -8152,7 +8352,7 @@ If you want to remount the same app, move your app creation logic into a factory
               anchor,
               parentComponent,
               parentSuspense,
-              isSVG,
+              namespace,
               slotScopeIds,
               optimized
             );
@@ -8164,7 +8364,7 @@ If you want to remount the same app, move your app creation logic into a factory
               anchor,
               parentComponent,
               parentSuspense,
-              isSVG,
+              namespace,
               slotScopeIds,
               optimized
             );
@@ -8176,7 +8376,7 @@ If you want to remount the same app, move your app creation logic into a factory
               anchor,
               parentComponent,
               parentSuspense,
-              isSVG,
+              namespace,
               slotScopeIds,
               optimized,
               internals
@@ -8189,7 +8389,7 @@ If you want to remount the same app, move your app creation logic into a factory
               anchor,
               parentComponent,
               parentSuspense,
-              isSVG,
+              namespace,
               slotScopeIds,
               optimized,
               internals
@@ -8227,17 +8427,17 @@ If you want to remount the same app, move your app creation logic into a factory
         n2.el = n1.el;
       }
     };
-    const mountStaticNode = (n2, container, anchor, isSVG) => {
+    const mountStaticNode = (n2, container, anchor, namespace) => {
       [n2.el, n2.anchor] = hostInsertStaticContent(
         n2.children,
         container,
         anchor,
-        isSVG,
+        namespace,
         n2.el,
         n2.anchor
       );
     };
-    const patchStaticNode = (n1, n2, container, isSVG) => {
+    const patchStaticNode = (n1, n2, container, namespace) => {
       if (n2.children !== n1.children) {
         const anchor = hostNextSibling(n1.anchor);
         removeStaticNode(n1);
@@ -8245,7 +8445,7 @@ If you want to remount the same app, move your app creation logic into a factory
           n2.children,
           container,
           anchor,
-          isSVG
+          namespace
         );
       } else {
         n2.el = n1.el;
@@ -8270,8 +8470,12 @@ If you want to remount the same app, move your app creation logic into a factory
       }
       hostRemove(anchor);
     };
-    const processElement = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
-      isSVG = isSVG || n2.type === "svg";
+    const processElement = (n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
+      if (n2.type === "svg") {
+        namespace = "svg";
+      } else if (n2.type === "math") {
+        namespace = "mathml";
+      }
       if (n1 == null) {
         mountElement(
           n2,
@@ -8279,7 +8483,7 @@ If you want to remount the same app, move your app creation logic into a factory
           anchor,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
           optimized
         );
@@ -8289,19 +8493,19 @@ If you want to remount the same app, move your app creation logic into a factory
           n2,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
           optimized
         );
       }
     };
-    const mountElement = (vnode, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
+    const mountElement = (vnode, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
       let el;
       let vnodeHook;
-      const { type, props, shapeFlag, transition, dirs } = vnode;
+      const { props, shapeFlag, transition, dirs } = vnode;
       el = vnode.el = hostCreateElement(
         vnode.type,
-        isSVG,
+        namespace,
         props && props.is,
         props
       );
@@ -8314,7 +8518,7 @@ If you want to remount the same app, move your app creation logic into a factory
           null,
           parentComponent,
           parentSuspense,
-          isSVG && type !== "foreignObject",
+          resolveChildrenNamespace(vnode, namespace),
           slotScopeIds,
           optimized
         );
@@ -8331,7 +8535,7 @@ If you want to remount the same app, move your app creation logic into a factory
               key,
               null,
               props[key],
-              isSVG,
+              namespace,
               vnode.children,
               parentComponent,
               parentSuspense,
@@ -8340,7 +8544,7 @@ If you want to remount the same app, move your app creation logic into a factory
           }
         }
         if ("value" in props) {
-          hostPatchProp(el, "value", null, props.value);
+          hostPatchProp(el, "value", null, props.value, namespace);
         }
         if (vnodeHook = props.onVnodeBeforeMount) {
           invokeVNodeHook(vnodeHook, parentComponent, vnode);
@@ -8398,7 +8602,7 @@ If you want to remount the same app, move your app creation logic into a factory
         }
       }
     };
-    const mountChildren = (children, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, start = 0) => {
+    const mountChildren = (children, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized, start = 0) => {
       for (let i = start; i < children.length; i++) {
         const child = children[i] = optimized ? cloneIfMounted(children[i]) : normalizeVNode(children[i]);
         patch(
@@ -8408,13 +8612,13 @@ If you want to remount the same app, move your app creation logic into a factory
           anchor,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
           optimized
         );
       }
     };
-    const patchElement = (n1, n2, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
+    const patchElement = (n1, n2, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
       const el = n2.el = n1.el;
       let { patchFlag, dynamicChildren, dirs } = n2;
       patchFlag |= n1.patchFlag & 16;
@@ -8434,7 +8638,6 @@ If you want to remount the same app, move your app creation logic into a factory
         optimized = false;
         dynamicChildren = null;
       }
-      const areChildrenSVG = isSVG && n2.type !== "foreignObject";
       if (dynamicChildren) {
         patchBlockChildren(
           n1.dynamicChildren,
@@ -8442,7 +8645,7 @@ If you want to remount the same app, move your app creation logic into a factory
           el,
           parentComponent,
           parentSuspense,
-          areChildrenSVG,
+          resolveChildrenNamespace(n2, namespace),
           slotScopeIds
         );
         {
@@ -8456,7 +8659,7 @@ If you want to remount the same app, move your app creation logic into a factory
           null,
           parentComponent,
           parentSuspense,
-          areChildrenSVG,
+          resolveChildrenNamespace(n2, namespace),
           slotScopeIds,
           false
         );
@@ -8470,16 +8673,16 @@ If you want to remount the same app, move your app creation logic into a factory
             newProps,
             parentComponent,
             parentSuspense,
-            isSVG
+            namespace
           );
         } else {
           if (patchFlag & 2) {
             if (oldProps.class !== newProps.class) {
-              hostPatchProp(el, "class", null, newProps.class, isSVG);
+              hostPatchProp(el, "class", null, newProps.class, namespace);
             }
           }
           if (patchFlag & 4) {
-            hostPatchProp(el, "style", oldProps.style, newProps.style, isSVG);
+            hostPatchProp(el, "style", oldProps.style, newProps.style, namespace);
           }
           if (patchFlag & 8) {
             const propsToUpdate = n2.dynamicProps;
@@ -8493,7 +8696,7 @@ If you want to remount the same app, move your app creation logic into a factory
                   key,
                   prev,
                   next,
-                  isSVG,
+                  namespace,
                   n1.children,
                   parentComponent,
                   parentSuspense,
@@ -8516,7 +8719,7 @@ If you want to remount the same app, move your app creation logic into a factory
           newProps,
           parentComponent,
           parentSuspense,
-          isSVG
+          namespace
         );
       }
       if ((vnodeHook = newProps.onVnodeUpdated) || dirs) {
@@ -8526,7 +8729,7 @@ If you want to remount the same app, move your app creation logic into a factory
         }, parentSuspense);
       }
     };
-    const patchBlockChildren = (oldChildren, newChildren, fallbackContainer, parentComponent, parentSuspense, isSVG, slotScopeIds) => {
+    const patchBlockChildren = (oldChildren, newChildren, fallbackContainer, parentComponent, parentSuspense, namespace, slotScopeIds) => {
       for (let i = 0; i < newChildren.length; i++) {
         const oldVNode = oldChildren[i];
         const newVNode = newChildren[i];
@@ -8551,13 +8754,13 @@ If you want to remount the same app, move your app creation logic into a factory
           null,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
           true
         );
       }
     };
-    const patchProps = (el, vnode, oldProps, newProps, parentComponent, parentSuspense, isSVG) => {
+    const patchProps = (el, vnode, oldProps, newProps, parentComponent, parentSuspense, namespace) => {
       if (oldProps !== newProps) {
         if (oldProps !== EMPTY_OBJ) {
           for (const key in oldProps) {
@@ -8567,7 +8770,7 @@ If you want to remount the same app, move your app creation logic into a factory
                 key,
                 oldProps[key],
                 null,
-                isSVG,
+                namespace,
                 vnode.children,
                 parentComponent,
                 parentSuspense,
@@ -8587,7 +8790,7 @@ If you want to remount the same app, move your app creation logic into a factory
               key,
               prev,
               next,
-              isSVG,
+              namespace,
               vnode.children,
               parentComponent,
               parentSuspense,
@@ -8596,11 +8799,11 @@ If you want to remount the same app, move your app creation logic into a factory
           }
         }
         if ("value" in newProps) {
-          hostPatchProp(el, "value", oldProps.value, newProps.value);
+          hostPatchProp(el, "value", oldProps.value, newProps.value, namespace);
         }
       }
     };
-    const processFragment = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
+    const processFragment = (n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
       const fragmentStartAnchor = n2.el = n1 ? n1.el : hostCreateText("");
       const fragmentEndAnchor = n2.anchor = n1 ? n1.anchor : hostCreateText("");
       let { patchFlag, dynamicChildren, slotScopeIds: fragmentSlotScopeIds } = n2;
@@ -8624,7 +8827,7 @@ If you want to remount the same app, move your app creation logic into a factory
           fragmentEndAnchor,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
           optimized
         );
@@ -8638,7 +8841,7 @@ If you want to remount the same app, move your app creation logic into a factory
             container,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds
           );
           {
@@ -8652,14 +8855,14 @@ If you want to remount the same app, move your app creation logic into a factory
             fragmentEndAnchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
             optimized
           );
         }
       }
     };
-    const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
+    const processComponent = (n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
       n2.slotScopeIds = slotScopeIds;
       if (n1 == null) {
         if (n2.shapeFlag & 512) {
@@ -8667,7 +8870,7 @@ If you want to remount the same app, move your app creation logic into a factory
             n2,
             container,
             anchor,
-            isSVG,
+            namespace,
             optimized
           );
         } else {
@@ -8677,7 +8880,7 @@ If you want to remount the same app, move your app creation logic into a factory
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             optimized
           );
         }
@@ -8685,7 +8888,7 @@ If you want to remount the same app, move your app creation logic into a factory
         updateComponent(n1, n2, optimized);
       }
     };
-    const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {
+    const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, namespace, optimized) => {
       const compatMountInstance = initialVNode.isCompatRoot && initialVNode.component;
       const instance = compatMountInstance || (initialVNode.component = createComponentInstance(
         initialVNode,
@@ -8717,17 +8920,17 @@ If you want to remount the same app, move your app creation logic into a factory
           const placeholder = instance.subTree = createVNode(Comment);
           processCommentNode(null, placeholder, container, anchor);
         }
-        return;
+      } else {
+        setupRenderEffect(
+          instance,
+          initialVNode,
+          container,
+          anchor,
+          parentSuspense,
+          namespace,
+          optimized
+        );
       }
-      setupRenderEffect(
-        instance,
-        initialVNode,
-        container,
-        anchor,
-        parentSuspense,
-        isSVG,
-        optimized
-      );
       {
         popWarningContext();
         endMeasure(instance, `mount`);
@@ -8756,7 +8959,7 @@ If you want to remount the same app, move your app creation logic into a factory
         instance.vnode = n2;
       }
     };
-    const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized) => {
+    const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, namespace, optimized) => {
       const componentUpdateFn = () => {
         if (!instance.isMounted) {
           let vnodeHook;
@@ -8826,7 +9029,7 @@ If you want to remount the same app, move your app creation logic into a factory
               anchor,
               instance,
               parentSuspense,
-              isSVG
+              namespace
             );
             {
               endMeasure(instance, `patch`);
@@ -8865,6 +9068,21 @@ If you want to remount the same app, move your app creation logic into a factory
           initialVNode = container = anchor = null;
         } else {
           let { next, bu, u, parent, vnode } = instance;
+          {
+            const nonHydratedAsyncRoot = locateNonHydratedAsyncRoot(instance);
+            if (nonHydratedAsyncRoot) {
+              if (next) {
+                next.el = vnode.el;
+                updateComponentPreRender(instance, next, optimized);
+              }
+              nonHydratedAsyncRoot.asyncDep.then(() => {
+                if (!instance.isUnmounted) {
+                  componentUpdateFn();
+                }
+              });
+              return;
+            }
+          }
           let originNext = next;
           let vnodeHook;
           {
@@ -8908,7 +9126,7 @@ If you want to remount the same app, move your app creation logic into a factory
             getNextHostNode(prevTree),
             instance,
             parentSuspense,
-            isSVG
+            namespace
           );
           {
             endMeasure(instance, `patch`);
@@ -8969,10 +9187,10 @@ If you want to remount the same app, move your app creation logic into a factory
       updateProps(instance, nextVNode.props, prevProps, optimized);
       updateSlots(instance, nextVNode.children, optimized);
       pauseTracking();
-      flushPreFlushCbs();
+      flushPreFlushCbs(instance);
       resetTracking();
     };
-    const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized = false) => {
+    const patchChildren = (n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized = false) => {
       const c1 = n1 && n1.children;
       const prevShapeFlag = n1 ? n1.shapeFlag : 0;
       const c2 = n2.children;
@@ -8986,7 +9204,7 @@ If you want to remount the same app, move your app creation logic into a factory
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
             optimized
           );
@@ -8999,7 +9217,7 @@ If you want to remount the same app, move your app creation logic into a factory
             anchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
             optimized
           );
@@ -9023,7 +9241,7 @@ If you want to remount the same app, move your app creation logic into a factory
               anchor,
               parentComponent,
               parentSuspense,
-              isSVG,
+              namespace,
               slotScopeIds,
               optimized
             );
@@ -9041,7 +9259,7 @@ If you want to remount the same app, move your app creation logic into a factory
               anchor,
               parentComponent,
               parentSuspense,
-              isSVG,
+              namespace,
               slotScopeIds,
               optimized
             );
@@ -9049,7 +9267,7 @@ If you want to remount the same app, move your app creation logic into a factory
         }
       }
     };
-    const patchUnkeyedChildren = (c1, c2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
+    const patchUnkeyedChildren = (c1, c2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
       c1 = c1 || EMPTY_ARR;
       c2 = c2 || EMPTY_ARR;
       const oldLength = c1.length;
@@ -9065,7 +9283,7 @@ If you want to remount the same app, move your app creation logic into a factory
           null,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
           optimized
         );
@@ -9086,14 +9304,14 @@ If you want to remount the same app, move your app creation logic into a factory
           anchor,
           parentComponent,
           parentSuspense,
-          isSVG,
+          namespace,
           slotScopeIds,
           optimized,
           commonLength
         );
       }
     };
-    const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
+    const patchKeyedChildren = (c1, c2, container, parentAnchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized) => {
       let i = 0;
       const l2 = c2.length;
       let e1 = c1.length - 1;
@@ -9109,7 +9327,7 @@ If you want to remount the same app, move your app creation logic into a factory
             null,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
             optimized
           );
@@ -9129,7 +9347,7 @@ If you want to remount the same app, move your app creation logic into a factory
             null,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
             optimized
           );
@@ -9151,7 +9369,7 @@ If you want to remount the same app, move your app creation logic into a factory
               anchor,
               parentComponent,
               parentSuspense,
-              isSVG,
+              namespace,
               slotScopeIds,
               optimized
             );
@@ -9221,7 +9439,7 @@ If you want to remount the same app, move your app creation logic into a factory
               null,
               parentComponent,
               parentSuspense,
-              isSVG,
+              namespace,
               slotScopeIds,
               optimized
             );
@@ -9242,7 +9460,7 @@ If you want to remount the same app, move your app creation logic into a factory
               anchor,
               parentComponent,
               parentSuspense,
-              isSVG,
+              namespace,
               slotScopeIds,
               optimized
             );
@@ -9472,13 +9690,21 @@ If you want to remount the same app, move your app creation logic into a factory
       }
       return hostNextSibling(vnode.anchor || vnode.el);
     };
-    const render = (vnode, container, isSVG) => {
+    const render = (vnode, container, namespace) => {
       if (vnode == null) {
         if (container._vnode) {
           unmount(container._vnode, null, null, true);
         }
       } else {
-        patch(container._vnode || null, vnode, container, null, null, null, isSVG);
+        patch(
+          container._vnode || null,
+          vnode,
+          container,
+          null,
+          null,
+          null,
+          namespace
+        );
       }
       flushPreFlushCbs();
       flushPostFlushCbs();
@@ -9509,6 +9735,9 @@ If you want to remount the same app, move your app creation logic into a factory
       createApp: createAppAPI(render, hydrate)
     };
   }
+  function resolveChildrenNamespace({ type, props }, currentNamespace) {
+    return currentNamespace === "svg" && type === "foreignObject" || currentNamespace === "mathml" && type === "annotation-xml" && props && props.encoding && props.encoding.includes("html") ? void 0 : currentNamespace;
+  }
   function toggleRecurse({ effect, update }, allowed) {
     effect.allowRecurse = update.allowRecurse = allowed;
   }
@@ -9579,10 +9808,21 @@ If you want to remount the same app, move your app creation logic into a factory
     }
     return result;
   }
+  function locateNonHydratedAsyncRoot(instance) {
+    const subComponent = instance.subTree.component;
+    if (subComponent) {
+      if (subComponent.asyncDep && !subComponent.asyncResolved) {
+        return subComponent;
+      } else {
+        return locateNonHydratedAsyncRoot(subComponent);
+      }
+    }
+  }
 
   const isTeleport = (type) => type.__isTeleport;
   const isTeleportDisabled = (props) => props && (props.disabled || props.disabled === "");
   const isTargetSVG = (target) => typeof SVGElement !== "undefined" && target instanceof SVGElement;
+  const isTargetMathML = (target) => typeof MathMLElement === "function" && target instanceof MathMLElement;
   const resolveTarget = (props, select) => {
     const targetSelector = props && props.to;
     if (isString(targetSelector)) {
@@ -9610,7 +9850,7 @@ If you want to remount the same app, move your app creation logic into a factory
   const TeleportImpl = {
     name: "Teleport",
     __isTeleport: true,
-    process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, internals) {
+    process(n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized, internals) {
       const {
         mc: mountChildren,
         pc: patchChildren,
@@ -9632,7 +9872,11 @@ If you want to remount the same app, move your app creation logic into a factory
         const targetAnchor = n2.targetAnchor = createText("");
         if (target) {
           insert(targetAnchor, target);
-          isSVG = isSVG || isTargetSVG(target);
+          if (namespace === "svg" || isTargetSVG(target)) {
+            namespace = "svg";
+          } else if (namespace === "mathml" || isTargetMathML(target)) {
+            namespace = "mathml";
+          }
         } else if (!disabled) {
           warn("Invalid Teleport target on mount:", target, `(${typeof target})`);
         }
@@ -9644,7 +9888,7 @@ If you want to remount the same app, move your app creation logic into a factory
               anchor2,
               parentComponent,
               parentSuspense,
-              isSVG,
+              namespace,
               slotScopeIds,
               optimized
             );
@@ -9663,7 +9907,11 @@ If you want to remount the same app, move your app creation logic into a factory
         const wasDisabled = isTeleportDisabled(n1.props);
         const currentContainer = wasDisabled ? container : target;
         const currentAnchor = wasDisabled ? mainAnchor : targetAnchor;
-        isSVG = isSVG || isTargetSVG(target);
+        if (namespace === "svg" || isTargetSVG(target)) {
+          namespace = "svg";
+        } else if (namespace === "mathml" || isTargetMathML(target)) {
+          namespace = "mathml";
+        }
         if (dynamicChildren) {
           patchBlockChildren(
             n1.dynamicChildren,
@@ -9671,7 +9919,7 @@ If you want to remount the same app, move your app creation logic into a factory
             currentContainer,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds
           );
           traverseStaticChildren(n1, n2, true);
@@ -9683,7 +9931,7 @@ If you want to remount the same app, move your app creation logic into a factory
             currentAnchor,
             parentComponent,
             parentSuspense,
-            isSVG,
+            namespace,
             slotScopeIds,
             false
           );
@@ -10367,10 +10615,14 @@ Component that was made reactive: `,
   let currentInstance = null;
   const getCurrentInstance = () => currentInstance || currentRenderingInstance;
   let internalSetCurrentInstance;
+  let setInSSRSetupState;
   {
     internalSetCurrentInstance = (i) => {
       currentInstance = i;
     };
+    setInSSRSetupState = (v) => {
+      isInSSRComponentSetup = v;
+    };
   }
   const setCurrentInstance = (instance) => {
     internalSetCurrentInstance(instance);
@@ -10394,13 +10646,13 @@ Component that was made reactive: `,
   }
   let isInSSRComponentSetup = false;
   function setupComponent(instance, isSSR = false) {
-    isInSSRComponentSetup = isSSR;
+    isSSR && setInSSRSetupState(isSSR);
     const { props, children } = instance.vnode;
     const isStateful = isStatefulComponent(instance);
     initProps(instance, props, isStateful, isSSR);
     initSlots(instance, children);
     const setupResult = isStateful ? setupStatefulComponent(instance, isSSR) : void 0;
-    isInSSRComponentSetup = false;
+    isSSR && setInSSRSetupState(false);
     return setupResult;
   }
   function setupStatefulComponent(instance, isSSR) {
@@ -10722,9 +10974,9 @@ Component that was made reactive: `,
       return;
     }
     const vueStyle = { style: "color:#3ba776" };
-    const numberStyle = { style: "color:#0b1bc9" };
-    const stringStyle = { style: "color:#b62e24" };
-    const keywordStyle = { style: "color:#9d288c" };
+    const numberStyle = { style: "color:#1677ff" };
+    const stringStyle = { style: "color:#f5222d" };
+    const keywordStyle = { style: "color:#eb2f96" };
     const formatter = {
       header(obj) {
         if (!isObject(obj)) {
@@ -10918,7 +11170,7 @@ Component that was made reactive: `,
     return true;
   }
 
-  const version = "3.4.0-alpha.3";
+  const version = "3.4.0-beta.1";
   const ErrorTypeStrings = ErrorTypeStrings$1 ;
   const ssrUtils = null;
   const resolveFilter = resolveFilter$1 ;
@@ -10930,8 +11182,10 @@ Component that was made reactive: `,
     softAssertCompatEnabled
   };
   const compatUtils = _compatUtils ;
+  const DeprecationTypes = DeprecationTypes$1 ;
 
   const svgNS = "http://www.w3.org/2000/svg";
+  const mathmlNS = "http://www.w3.org/1998/Math/MathML";
   const doc = typeof document !== "undefined" ? document : null;
   const templateContainer = doc && /* @__PURE__ */ doc.createElement("template");
   const nodeOps = {
@@ -10944,8 +11198,8 @@ Component that was made reactive: `,
         parent.removeChild(child);
       }
     },
-    createElement: (tag, isSVG, is, props) => {
-      const el = isSVG ? doc.createElementNS(svgNS, tag) : doc.createElement(tag, is ? { is } : void 0);
+    createElement: (tag, namespace, is, props) => {
+      const el = namespace === "svg" ? doc.createElementNS(svgNS, tag) : namespace === "mathml" ? doc.createElementNS(mathmlNS, tag) : doc.createElement(tag, is ? { is } : void 0);
       if (tag === "select" && props && props.multiple != null) {
         el.setAttribute("multiple", props.multiple);
       }
@@ -10969,7 +11223,7 @@ Component that was made reactive: `,
     // Reason: innerHTML.
     // Static content here can only come from compiled templates.
     // As long as the user only uses trusted templates, this is safe.
-    insertStaticContent(content, parent, anchor, isSVG, start, end) {
+    insertStaticContent(content, parent, anchor, namespace, start, end) {
       const before = anchor ? anchor.previousSibling : parent.lastChild;
       if (start && (start === end || start.nextSibling)) {
         while (true) {
@@ -10978,9 +11232,9 @@ Component that was made reactive: `,
             break;
         }
       } else {
-        templateContainer.innerHTML = isSVG ? `<svg>${content}</svg>` : content;
+        templateContainer.innerHTML = namespace === "svg" ? `<svg>${content}</svg>` : namespace === "mathml" ? `<math>${content}</math>` : content;
         const template = templateContainer.content;
-        if (isSVG) {
+        if (namespace === "svg" || namespace === "mathml") {
           const wrapper = template.firstChild;
           while (wrapper.firstChild) {
             template.appendChild(wrapper.firstChild);
@@ -11618,8 +11872,10 @@ Component that was made reactive: `,
     }
   }
 
-  const nativeOnRE = /^on[a-z]/;
-  const patchProp = (el, key, prevValue, nextValue, isSVG = false, prevChildren, parentComponent, parentSuspense, unmountChildren) => {
+  const isNativeOn = (key) => key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && // lowercase letter
+  key.charCodeAt(2) > 96 && key.charCodeAt(2) < 123;
+  const patchProp = (el, key, prevValue, nextValue, namespace, prevChildren, parentComponent, parentSuspense, unmountChildren) => {
+    const isSVG = namespace === "svg";
     if (key === "class") {
       patchClass(el, nextValue, isSVG);
     } else if (key === "style") {
@@ -11652,7 +11908,7 @@ Component that was made reactive: `,
       if (key === "innerHTML" || key === "textContent") {
         return true;
       }
-      if (key in el && nativeOnRE.test(key) && isFunction(value)) {
+      if (key in el && isNativeOn(key) && isFunction(value)) {
         return true;
       }
       return false;
@@ -11669,7 +11925,13 @@ Component that was made reactive: `,
     if (key === "type" && el.tagName === "TEXTAREA") {
       return false;
     }
-    if (nativeOnRE.test(key) && isString(value)) {
+    if (key === "width" || key === "height") {
+      const tag = el.tagName;
+      if (tag === "IMG" || tag === "VIDEO" || tag === "CANVAS" || tag === "SOURCE") {
+        return false;
+      }
+    }
+    if (isNativeOn(key) && isString(value)) {
       return false;
     }
     return key in el;
@@ -12347,14 +12609,14 @@ Component that was made reactive: `,
     exact: (e, modifiers) => systemModifiers.some((m) => e[`${m}Key`] && !modifiers.includes(m))
   };
   const withModifiers = (fn, modifiers) => {
-    return (event, ...args) => {
+    return fn._withMods || (fn._withMods = (event, ...args) => {
       for (let i = 0; i < modifiers.length; i++) {
         const guard = modifierGuards[modifiers[i]];
         if (guard && guard(event, modifiers))
           return;
       }
       return fn(event, ...args);
-    };
+    });
   };
   const keyNames = {
     esc: "escape",
@@ -12382,7 +12644,7 @@ Component that was made reactive: `,
         );
       }
     }
-    return (event) => {
+    return fn._withKeys || (fn._withKeys = (event) => {
       if (!("key" in event)) {
         return;
       }
@@ -12410,7 +12672,7 @@ Component that was made reactive: `,
           }
         }
       }
-    };
+    });
   };
 
   const rendererOptions = /* @__PURE__ */ extend({ patchProp }, nodeOps);
@@ -12458,7 +12720,7 @@ Component that was made reactive: `,
         }
       }
       container.innerHTML = "";
-      const proxy = mount(container, false, container instanceof SVGElement);
+      const proxy = mount(container, false, resolveRootNamespace(container));
       if (container instanceof Element) {
         container.removeAttribute("v-cloak");
         container.setAttribute("data-v-app", "");
@@ -12477,14 +12739,22 @@ Component that was made reactive: `,
     app.mount = (containerOrSelector) => {
       const container = normalizeContainer(containerOrSelector);
       if (container) {
-        return mount(container, true, container instanceof SVGElement);
+        return mount(container, true, resolveRootNamespace(container));
       }
     };
     return app;
   };
+  function resolveRootNamespace(container) {
+    if (container instanceof SVGElement) {
+      return "svg";
+    }
+    if (typeof MathMLElement === "function" && container instanceof MathMLElement) {
+      return "mathml";
+    }
+  }
   function injectNativeTagCheck(app) {
     Object.defineProperty(app.config, "isNativeTag", {
-      value: (tag) => isHTMLTag(tag) || isSVGTag(tag),
+      value: (tag) => isHTMLTag(tag) || isSVGTag(tag) || isMathMLTag(tag),
       writable: false
     });
   }
@@ -12541,7 +12811,9 @@ Component that was made reactive: `,
     BaseTransition: BaseTransition,
     BaseTransitionPropsValidators: BaseTransitionPropsValidators,
     Comment: Comment,
+    DeprecationTypes: DeprecationTypes,
     EffectScope: EffectScope,
+    ErrorCodes: ErrorCodes,
     ErrorTypeStrings: ErrorTypeStrings,
     Fragment: Fragment,
     KeepAlive: KeepAlive,
@@ -12550,8 +12822,10 @@ Component that was made reactive: `,
     Suspense: Suspense,
     Teleport: Teleport,
     Text: Text,
+    TrackOpTypes: TrackOpTypes,
     Transition: Transition,
     TransitionGroup: TransitionGroup,
+    TriggerOpTypes: TriggerOpTypes,
     VueElement: VueElement,
     assertNumber: assertNumber,
     callWithAsyncErrorHandling: callWithAsyncErrorHandling,
@@ -13023,7 +13297,9 @@ Make sure to use the production build (*.prod.js) when deploying for production.
       this.inRCDATA = false;
       /** For disabling RCDATA tags handling */
       this.inXML = false;
-      /** Reocrd newline positions for fast line / column calculation */
+      /** For disabling interpolation parsing in v-pre */
+      this.inVPre = false;
+      /** Record newline positions for fast line / column calculation */
       this.newlines = [];
       this.mode = 0;
       this.delimiterOpen = defaultDelimitersOpen;
@@ -13042,6 +13318,7 @@ Make sure to use the production build (*.prod.js) when deploying for production.
       this.sectionStart = 0;
       this.index = 0;
       this.baseState = 1;
+      this.inRCDATA = false;
       this.currentSequence = void 0;
       this.newlines.length = 0;
       this.delimiterOpen = defaultDelimitersOpen;
@@ -13080,7 +13357,7 @@ Make sure to use the production build (*.prod.js) when deploying for production.
         }
         this.state = 5;
         this.sectionStart = this.index;
-      } else if (c === this.delimiterOpen[0]) {
+      } else if (!this.inVPre && c === this.delimiterOpen[0]) {
         this.state = 2;
         this.delimiterIndex = 0;
         this.stateInterpolationOpen(c);
@@ -13895,16 +14172,14 @@ Make sure to use the production build (*.prod.js) when deploying for production.
 Use a v-bind binding combined with a v-on listener that emits update:x event instead.`,
     [45]: `Error parsing JavaScript expression: `,
     [46]: `<KeepAlive> expects exactly one child component.`,
+    [51]: `@vnode-* hooks in templates are deprecated. Use the vue: prefix instead. For example, @vnode-mounted should be changed to @vue:mounted. @vnode-* hooks support will be removed in 3.4.`,
     // generic errors
     [47]: `"prefixIdentifiers" option is not supported in this build of compiler.`,
     [48]: `ES module mode is not supported in this build of compiler.`,
     [49]: `"cacheHandlers" option is only supported when the "prefixIdentifiers" option is enabled.`,
     [50]: `"scopeId" option is only supported in module mode.`,
-    // deprecations
-    [51]: `@vnode-* hooks in templates are deprecated. Use the vue: prefix instead. For example, @vnode-mounted should be changed to @vue:mounted. @vnode-* hooks support will be removed in 3.4.`,
-    [52]: `v-is="component-name" has been deprecated. Use is="vue:component-name" instead. v-is support will be removed in 3.4.`,
     // just to fulfill types
-    [53]: ``
+    [52]: ``
   };
 
   const isStaticExp = (p) => p.type === 4 && p.isStatic;
@@ -14147,7 +14422,8 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     isCustomElement: NO,
     onError: defaultOnError,
     onWarn: defaultOnWarn,
-    comments: true
+    comments: true,
+    prefixIdentifiers: false
   };
   let currentOptions = defaultParserOptions;
   let currentRoot = null;
@@ -14189,7 +14465,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       }
       addNode({
         type: 5,
-        content: createSimpleExpression(exp, false, getLoc(innerStart, innerEnd)),
+        content: createExp(exp, false, getLoc(innerStart, innerEnd)),
         loc: getLoc(start, end)
       });
     },
@@ -14282,7 +14558,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
           loc: getLoc(start)
         };
         if (name === "pre") {
-          inVPre = true;
+          inVPre = tokenizer.inVPre = true;
           currentVPreBoundary = currentOpenTag;
           const props = currentOpenTag.props;
           for (let i = 0; i < props.length; i++) {
@@ -14302,7 +14578,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
         setLocEnd(currentProp.nameLoc, end);
       } else {
         const isStatic = arg[0] !== `[`;
-        currentProp.arg = createSimpleExpression(
+        currentProp.arg = createExp(
           isStatic ? arg : arg.slice(1, -1),
           isStatic,
           getLoc(start, end),
@@ -14375,10 +14651,13 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
               tokenizer.enterRCDATA(toCharCodes(`</template`), 0);
             }
           } else {
-            currentProp.exp = createSimpleExpression(
+            let expParseMode = 0 /* Normal */;
+            currentProp.exp = createExp(
               currentAttrValue,
               false,
-              getLoc(currentAttrStartIndex, currentAttrEndIndex)
+              getLoc(currentAttrStartIndex, currentAttrEndIndex),
+              0,
+              expParseMode
             );
             if (currentProp.name === "for") {
               currentProp.forParseResult = parseForExpression(currentProp.exp);
@@ -14481,10 +14760,16 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     if (!inMatch)
       return;
     const [, LHS, RHS] = inMatch;
-    const createAliasExpression = (content, offset) => {
+    const createAliasExpression = (content, offset, asParam = false) => {
       const start = loc.start.offset + offset;
       const end = start + content.length;
-      return createSimpleExpression(content, false, getLoc(start, end));
+      return createExp(
+        content,
+        false,
+        getLoc(start, end),
+        0,
+        asParam ? 1 /* Params */ : 0 /* Normal */
+      );
     };
     const result = {
       source: createAliasExpression(RHS.trim(), exp.indexOf(RHS, LHS.length)),
@@ -14502,7 +14787,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       let keyOffset;
       if (keyContent) {
         keyOffset = exp.indexOf(keyContent, trimmedOffset + valueContent.length);
-        result.key = createAliasExpression(keyContent, keyOffset);
+        result.key = createAliasExpression(keyContent, keyOffset, true);
       }
       if (iteratorMatch[2]) {
         const indexContent = iteratorMatch[2].trim();
@@ -14512,13 +14797,14 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
             exp.indexOf(
               indexContent,
               result.key ? keyOffset + keyContent.length : trimmedOffset + valueContent.length
-            )
+            ),
+            true
           );
         }
       }
     }
     if (valueContent) {
-      result.value = createAliasExpression(valueContent, trimmedOffset);
+      result.value = createAliasExpression(valueContent, trimmedOffset, true);
     }
     return result;
   }
@@ -14596,7 +14882,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       inPre--;
     }
     if (currentVPreBoundary === el) {
-      inVPre = false;
+      inVPre = tokenizer.inVPre = false;
       currentVPreBoundary = null;
     }
     if (tokenizer.inXML && (stack[0] ? stack[0].ns : currentOptions.ns) === 0) {
@@ -14831,8 +15117,14 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     }
     return attr;
   }
-  function emitError(code, index) {
-    currentOptions.onError(createCompilerError(code, getLoc(index, index)));
+  function createExp(content, isStatic = false, loc, constType = 0, parseMode = 0 /* Normal */) {
+    const exp = createSimpleExpression(content, isStatic, loc, constType);
+    return exp;
+  }
+  function emitError(code, index, message) {
+    currentOptions.onError(
+      createCompilerError(code, getLoc(index, index), void 0, message)
+    );
   }
   function reset() {
     tokenizer.reset();
@@ -14863,6 +15155,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       }
     }
     tokenizer.mode = currentOptions.parseMode === "html" ? 1 : currentOptions.parseMode === "sfc" ? 2 : 0;
+    tokenizer.inXML = currentOptions.ns === 1 || currentOptions.ns === 2;
     const delimiters = options == null ? void 0 : options.delimiters;
     if (delimiters) {
       tokenizer.delimiterOpen = toCharCodes(delimiters[0]);
@@ -15147,6 +15440,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     const nameMatch = filename.replace(/\?.*$/, "").match(/([^/\\]+)\.\w+$/);
     const context = {
       // options
+      filename,
       selfName: nameMatch && capitalize(camelize(nameMatch[1])),
       prefixIdentifiers,
       hoistStatic: hoistStatic2,
@@ -16909,6 +17203,9 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
         if (isEventHandler && isReservedProp(name)) {
           hasVnodeHook = true;
         }
+        if (isEventHandler && value.type === 14) {
+          value = value.arguments[0];
+        }
         if (value.type === 20 || (value.type === 4 || value.type === 8) && getConstantType(value, context) > 0) {
           return;
         }
@@ -17361,9 +17658,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       if (arg.isStatic) {
         let rawName = arg.content;
         if (rawName.startsWith("vnode")) {
-          context.onWarn(
-            createCompilerError(51, arg.loc)
-          );
+          context.onError(createCompilerError(51, arg.loc));
         }
         if (rawName.startsWith("vue:")) {
           rawName = `vnode-${rawName.slice(4)}`;
@@ -17856,12 +18151,14 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
     if (options.scopeId && !isModuleMode) {
       onError(createCompilerError(50));
     }
-    const ast = isString(source) ? baseParse(source, options) : source;
+    const resolvedOptions = extend({}, options, {
+      prefixIdentifiers
+    });
+    const ast = isString(source) ? baseParse(source, resolvedOptions) : source;
     const [nodeTransforms, directiveTransforms] = getBaseTransformPreset();
     transform(
       ast,
-      extend({}, options, {
-        prefixIdentifiers,
+      extend({}, resolvedOptions, {
         nodeTransforms: [
           ...nodeTransforms,
           ...options.nodeTransforms || []
@@ -17875,12 +18172,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
         )
       })
     );
-    return generate(
-      ast,
-      extend({}, options, {
-        prefixIdentifiers
-      })
-    );
+    return generate(ast, resolvedOptions);
   }
 
   const noopDirectiveTransform = () => ({ props: [] });
@@ -17925,7 +18217,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
   const parserOptions = {
     parseMode: "html",
     isVoidTag,
-    isNativeTag: (tag) => isHTMLTag(tag) || isSVGTag(tag),
+    isNativeTag: (tag) => isHTMLTag(tag) || isSVGTag(tag) || isMathMLTag(tag),
     isPreTag: (tag) => tag === "pre",
     decodeEntities: decodeHtmlBrowser ,
     isBuiltInComponent: (tag) => {