@vue/compat 3.4.0-beta.2 → 3.4.0-beta.4

package/dist/vue.cjs.js

@@ -250,7 +250,7 @@ function normalizeProps(props) {
 
 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 MATH_TAGS = "annotation,annotation-xml,maction,maligngroup,malignmark,math,menclose,merror,mfenced,mfrac,mfraction,mglyph,mi,mlabeledtr,mlongdiv,mmultiscripts,mn,mo,mover,mpadded,mphantom,mprescripts,mroot,mrow,ms,mscarries,mscarry,msgroup,msline,mspace,msqrt,msrow,mstack,mstyle,msub,msubsup,msup,mtable,mtd,mtext,mtr,munder,munderover,none,semantics";
 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);
@@ -2009,8 +2009,10 @@ function checkRecursiveUpdates(seen, fn) {
     if (count > RECURSION_LIMIT) {
       const instance = fn.ownerInstance;
       const componentName = instance && getComponentName(instance.type);
-      warn(
-        `Maximum recursive updates exceeded${componentName ? ` in component <${componentName}>` : ``}. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.`
+      handleError(
+        `Maximum recursive updates exceeded${componentName ? ` in component <${componentName}>` : ``}. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.`,
+        null,
+        10
       );
       return true;
     } else {
@@ -3205,6 +3207,8 @@ function hasPropsChanged(prevProps, nextProps, emitsOptions) {
   return false;
 }
 function updateHOCHostEl({ vnode, parent }, el) {
+  if (!el)
+    return;
   while (parent) {
     const root = parent.subTree;
     if (root.suspense && root.suspense.activeBranch === vnode) {
@@ -5956,24 +5960,30 @@ function useModel(props, name) {
     warn(`useModel() called with prop "${name}" which is not declared.`);
     return ref();
   }
-  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;
+  return customRef((track, trigger) => {
+    let localValue;
+    watchSyncEffect(() => {
+      const propValue = props[name];
+      if (hasChanged(localValue, propValue)) {
+        localValue = propValue;
         trigger();
       }
-      i.emit(`update:${name}`, value);
-    }
-  }));
+    });
+    return {
+      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();
@@ -6547,7 +6557,7 @@ function createCompatVue$1(createApp, createSingletonApp) {
       return vm;
     }
   }
-  Vue.version = `2.6.14-compat:${"3.4.0-beta.2"}`;
+  Vue.version = `2.6.14-compat:${"3.4.0-beta.4"}`;
   Vue.config = singletonApp.config;
   Vue.use = (p, ...options) => {
     if (p && isFunction(p.install)) {
@@ -8275,7 +8285,7 @@ function propHasMismatch(el, key, clientValue) {
   let actual;
   let expected;
   if (key === "class") {
-    actual = el.className;
+    actual = el.getAttribute("class");
     expected = normalizeClass(clientValue);
     if (actual !== expected) {
       mismatchType = mismatchKey = `class`;
@@ -11268,7 +11278,7 @@ function isMemoSame(cached, memo) {
   return true;
 }
 
-const version = "3.4.0-beta.2";
+const version = "3.4.0-beta.4";
 const ErrorTypeStrings = ErrorTypeStrings$1 ;
 const _ssrUtils = {
   createComponentInstance,
@@ -11725,6 +11735,11 @@ function initVShowForSSR() {
   };
 }
 
+const CSS_VAR_TEXT = Symbol("CSS_VAR_TEXT" );
+function useCssVars(getter) {
+  return;
+}
+
 function patchStyle(el, prev, next) {
   const style = el.style;
   const isCssString = isString(next);
@@ -11743,6 +11758,10 @@ function patchStyle(el, prev, next) {
     const currentDisplay = style.display;
     if (isCssString) {
       if (prev !== next) {
+        const cssVarText = style[CSS_VAR_TEXT];
+        if (cssVarText) {
+          next += ";" + cssVarText;
+        }
         style.cssText = next;
       }
     } else if (prev) {
@@ -12293,10 +12312,6 @@ function useCssModule(name = "$style") {
   }
 }
 
-function useCssVars(getter) {
-  return;
-}
-
 const positionMap = /* @__PURE__ */ new WeakMap();
 const newPositionMap = /* @__PURE__ */ new WeakMap();
 const moveCbKey = Symbol("_moveCb");
@@ -12713,7 +12728,9 @@ const modifierGuards = {
   exact: (e, modifiers) => systemModifiers.some((m) => e[`${m}Key`] && !modifiers.includes(m))
 };
 const withModifiers = (fn, modifiers) => {
-  return fn._withMods || (fn._withMods = (event, ...args) => {
+  const cache = fn._withMods || (fn._withMods = {});
+  const cacheKey = modifiers.join(".");
+  return cache[cacheKey] || (cache[cacheKey] = (event, ...args) => {
     for (let i = 0; i < modifiers.length; i++) {
       const guard = modifierGuards[modifiers[i]];
       if (guard && guard(event, modifiers))
@@ -12748,7 +12765,9 @@ const withKeys = (fn, modifiers) => {
       );
     }
   }
-  return fn._withKeys || (fn._withKeys = (event) => {
+  const cache = fn._withKeys || (fn._withKeys = {});
+  const cacheKey = modifiers.join(".");
+  return cache[cacheKey] || (cache[cacheKey] = (event) => {
     if (!("key" in event)) {
       return;
     }
@@ -14330,7 +14349,7 @@ const errorMessages = {
 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.`,
+  [51]: `@vnode-* hooks in templates are no longer supported. Use the vue: prefix instead. For example, @vnode-mounted should be changed to @vue:mounted. @vnode-* hooks support has been 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.`,
@@ -14357,12 +14376,23 @@ function walkIdentifiers(root, onIdentifier, includeAll = false, parentStack = [
       } else if (node.type === "ObjectProperty" && parent.type === "ObjectPattern") {
         node.inPattern = true;
       } else if (isFunctionType(node)) {
-        walkFunctionParams(node, (id) => markScopeIdentifier(node, id, knownIds));
+        if (node.scopeIds) {
+          node.scopeIds.forEach((id) => markKnownIds(id, knownIds));
+        } else {
+          walkFunctionParams(
+            node,
+            (id) => markScopeIdentifier(node, id, knownIds)
+          );
+        }
       } else if (node.type === "BlockStatement") {
-        walkBlockDeclarations(
-          node,
-          (id) => markScopeIdentifier(node, id, knownIds)
-        );
+        if (node.scopeIds) {
+          node.scopeIds.forEach((id) => markKnownIds(id, knownIds));
+        } else {
+          walkBlockDeclarations(
+            node,
+            (id) => markScopeIdentifier(node, id, knownIds)
+          );
+        }
       }
     },
     leave(node, parent) {
@@ -14481,16 +14511,19 @@ function extractIdentifiers(param, nodes = []) {
   }
   return nodes;
 }
-function markScopeIdentifier(node, child, knownIds) {
-  const { name } = child;
-  if (node.scopeIds && node.scopeIds.has(name)) {
-    return;
-  }
+function markKnownIds(name, knownIds) {
   if (name in knownIds) {
     knownIds[name]++;
   } else {
     knownIds[name] = 1;
   }
+}
+function markScopeIdentifier(node, child, knownIds) {
+  const { name } = child;
+  if (node.scopeIds && node.scopeIds.has(name)) {
+    return;
+  }
+  markKnownIds(name, knownIds);
   (node.scopeIds || (node.scopeIds = /* @__PURE__ */ new Set())).add(name);
 }
 const isFunctionType = (node) => {
@@ -14630,7 +14663,7 @@ const isMemberExpressionNode = (path, context) => {
       plugins: context.expressionPlugins
     });
     ret = unwrapTSNode(ret);
-    return ret.type === "MemberExpression" || ret.type === "OptionalMemberExpression" || ret.type === "Identifier";
+    return ret.type === "MemberExpression" || ret.type === "OptionalMemberExpression" || ret.type === "Identifier" && ret.name !== "undefined";
   } catch (e) {
     return false;
   }

package/dist/vue.cjs.prod.js

@@ -187,7 +187,7 @@ function normalizeProps(props) {
 
 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 MATH_TAGS = "annotation,annotation-xml,maction,maligngroup,malignmark,math,menclose,merror,mfenced,mfrac,mfraction,mglyph,mi,mlabeledtr,mlongdiv,mmultiscripts,mn,mo,mover,mpadded,mphantom,mprescripts,mroot,mrow,ms,mscarries,mscarry,msgroup,msline,mspace,msqrt,msrow,mstack,mstyle,msub,msubsup,msup,mtable,mtd,mtext,mtr,munder,munderover,none,semantics";
 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);
@@ -2285,6 +2285,8 @@ function hasPropsChanged(prevProps, nextProps, emitsOptions) {
   return false;
 }
 function updateHOCHostEl({ vnode, parent }, el) {
+  if (!el)
+    return;
   while (parent) {
     const root = parent.subTree;
     if (root.suspense && root.suspense.activeBranch === vnode) {
@@ -4768,24 +4770,30 @@ function useAttrs() {
 }
 function useModel(props, name) {
   const i = getCurrentInstance();
-  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;
+  return customRef((track, trigger) => {
+    let localValue;
+    watchSyncEffect(() => {
+      const propValue = props[name];
+      if (hasChanged(localValue, propValue)) {
+        localValue = propValue;
         trigger();
       }
-      i.emit(`update:${name}`, value);
-    }
-  }));
+    });
+    return {
+      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();
@@ -5246,7 +5254,7 @@ function createCompatVue$1(createApp, createSingletonApp) {
       return vm;
     }
   }
-  Vue.version = `2.6.14-compat:${"3.4.0-beta.2"}`;
+  Vue.version = `2.6.14-compat:${"3.4.0-beta.4"}`;
   Vue.config = singletonApp.config;
   Vue.use = (p, ...options) => {
     if (p && isFunction(p.install)) {
@@ -9055,7 +9063,7 @@ function isMemoSame(cached, memo) {
   return true;
 }
 
-const version = "3.4.0-beta.2";
+const version = "3.4.0-beta.4";
 const ErrorTypeStrings = null;
 const _ssrUtils = {
   createComponentInstance,
@@ -9509,6 +9517,11 @@ function initVShowForSSR() {
   };
 }
 
+const CSS_VAR_TEXT = Symbol("");
+function useCssVars(getter) {
+  return;
+}
+
 function patchStyle(el, prev, next) {
   const style = el.style;
   const isCssString = isString(next);
@@ -9527,6 +9540,10 @@ function patchStyle(el, prev, next) {
     const currentDisplay = style.display;
     if (isCssString) {
       if (prev !== next) {
+        const cssVarText = style[CSS_VAR_TEXT];
+        if (cssVarText) {
+          next += ";" + cssVarText;
+        }
         style.cssText = next;
       }
     } else if (prev) {
@@ -10036,10 +10053,6 @@ function useCssModule(name = "$style") {
   }
 }
 
-function useCssVars(getter) {
-  return;
-}
-
 const positionMap = /* @__PURE__ */ new WeakMap();
 const newPositionMap = /* @__PURE__ */ new WeakMap();
 const moveCbKey = Symbol("_moveCb");
@@ -10451,7 +10464,9 @@ const modifierGuards = {
   exact: (e, modifiers) => systemModifiers.some((m) => e[`${m}Key`] && !modifiers.includes(m))
 };
 const withModifiers = (fn, modifiers) => {
-  return fn._withMods || (fn._withMods = (event, ...args) => {
+  const cache = fn._withMods || (fn._withMods = {});
+  const cacheKey = modifiers.join(".");
+  return cache[cacheKey] || (cache[cacheKey] = (event, ...args) => {
     for (let i = 0; i < modifiers.length; i++) {
       const guard = modifierGuards[modifiers[i]];
       if (guard && guard(event, modifiers))
@@ -10480,7 +10495,9 @@ const withKeys = (fn, modifiers) => {
       }
     }
   }
-  return fn._withKeys || (fn._withKeys = (event) => {
+  const cache = fn._withKeys || (fn._withKeys = {});
+  const cacheKey = modifiers.join(".");
+  return cache[cacheKey] || (cache[cacheKey] = (event) => {
     if (!("key" in event)) {
       return;
     }
@@ -11946,7 +11963,7 @@ const errorMessages = {
 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.`,
+  [51]: `@vnode-* hooks in templates are no longer supported. Use the vue: prefix instead. For example, @vnode-mounted should be changed to @vue:mounted. @vnode-* hooks support has been 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.`,
@@ -11973,12 +11990,23 @@ function walkIdentifiers(root, onIdentifier, includeAll = false, parentStack = [
       } else if (node.type === "ObjectProperty" && parent.type === "ObjectPattern") {
         node.inPattern = true;
       } else if (isFunctionType(node)) {
-        walkFunctionParams(node, (id) => markScopeIdentifier(node, id, knownIds));
+        if (node.scopeIds) {
+          node.scopeIds.forEach((id) => markKnownIds(id, knownIds));
+        } else {
+          walkFunctionParams(
+            node,
+            (id) => markScopeIdentifier(node, id, knownIds)
+          );
+        }
       } else if (node.type === "BlockStatement") {
-        walkBlockDeclarations(
-          node,
-          (id) => markScopeIdentifier(node, id, knownIds)
-        );
+        if (node.scopeIds) {
+          node.scopeIds.forEach((id) => markKnownIds(id, knownIds));
+        } else {
+          walkBlockDeclarations(
+            node,
+            (id) => markScopeIdentifier(node, id, knownIds)
+          );
+        }
       }
     },
     leave(node, parent) {
@@ -12097,16 +12125,19 @@ function extractIdentifiers(param, nodes = []) {
   }
   return nodes;
 }
-function markScopeIdentifier(node, child, knownIds) {
-  const { name } = child;
-  if (node.scopeIds && node.scopeIds.has(name)) {
-    return;
-  }
+function markKnownIds(name, knownIds) {
   if (name in knownIds) {
     knownIds[name]++;
   } else {
     knownIds[name] = 1;
   }
+}
+function markScopeIdentifier(node, child, knownIds) {
+  const { name } = child;
+  if (node.scopeIds && node.scopeIds.has(name)) {
+    return;
+  }
+  markKnownIds(name, knownIds);
   (node.scopeIds || (node.scopeIds = /* @__PURE__ */ new Set())).add(name);
 }
 const isFunctionType = (node) => {
@@ -12246,7 +12277,7 @@ const isMemberExpressionNode = (path, context) => {
       plugins: context.expressionPlugins
     });
     ret = unwrapTSNode(ret);
-    return ret.type === "MemberExpression" || ret.type === "OptionalMemberExpression" || ret.type === "Identifier";
+    return ret.type === "MemberExpression" || ret.type === "OptionalMemberExpression" || ret.type === "Identifier" && ret.name !== "undefined";
   } catch (e) {
     return false;
   }