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

package/dist/vue.esm-bundler.js

@@ -239,7 +239,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);
@@ -3163,6 +3163,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) {
@@ -5916,24 +5918,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();
@@ -6509,7 +6517,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.3"}`;
   Vue.config = singletonApp.config;
   Vue.use = (p, ...options) => {
     if (p && isFunction(p.install)) {
@@ -11297,7 +11305,7 @@ function isMemoSame(cached, memo) {
   return true;
 }
 
-const version = "3.4.0-beta.2";
+const version = "3.4.0-beta.3";
 const ErrorTypeStrings = ErrorTypeStrings$1 ;
 const _ssrUtils = {
   createComponentInstance,
@@ -11754,6 +11762,69 @@ function initVShowForSSR() {
   };
 }
 
+const CSS_VAR_TEXT = Symbol(!!(process.env.NODE_ENV !== "production") ? "CSS_VAR_TEXT" : "");
+function useCssVars(getter) {
+  const instance = getCurrentInstance();
+  if (!instance) {
+    !!(process.env.NODE_ENV !== "production") && warn(`useCssVars is called without current active component instance.`);
+    return;
+  }
+  const updateTeleports = instance.ut = (vars = getter(instance.proxy)) => {
+    Array.from(
+      document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)
+    ).forEach((node) => setVarsOnNode(node, vars));
+  };
+  const setVars = () => {
+    const vars = getter(instance.proxy);
+    setVarsOnVNode(instance.subTree, vars);
+    updateTeleports(vars);
+  };
+  watchPostEffect(setVars);
+  onMounted(() => {
+    const ob = new MutationObserver(setVars);
+    ob.observe(instance.subTree.el.parentNode, { childList: true });
+    onUnmounted(() => ob.disconnect());
+  });
+}
+function setVarsOnVNode(vnode, vars) {
+  if (vnode.shapeFlag & 128) {
+    const suspense = vnode.suspense;
+    vnode = suspense.activeBranch;
+    if (suspense.pendingBranch && !suspense.isHydrating) {
+      suspense.effects.push(() => {
+        setVarsOnVNode(suspense.activeBranch, vars);
+      });
+    }
+  }
+  while (vnode.component) {
+    vnode = vnode.component.subTree;
+  }
+  if (vnode.shapeFlag & 1 && vnode.el) {
+    setVarsOnNode(vnode.el, vars);
+  } else if (vnode.type === Fragment) {
+    vnode.children.forEach((c) => setVarsOnVNode(c, vars));
+  } else if (vnode.type === Static) {
+    let { el, anchor } = vnode;
+    while (el) {
+      setVarsOnNode(el, vars);
+      if (el === anchor)
+        break;
+      el = el.nextSibling;
+    }
+  }
+}
+function setVarsOnNode(el, vars) {
+  if (el.nodeType === 1) {
+    const style = el.style;
+    let cssText = "";
+    for (const key in vars) {
+      style.setProperty(`--${key}`, vars[key]);
+      cssText += `--${key}: ${vars[key]};`;
+    }
+    style[CSS_VAR_TEXT] = cssText;
+  }
+}
+
 function patchStyle(el, prev, next) {
   const style = el.style;
   const isCssString = isString(next);
@@ -11772,6 +11843,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) {
@@ -12322,65 +12397,6 @@ function useCssModule(name = "$style") {
   }
 }
 
-function useCssVars(getter) {
-  const instance = getCurrentInstance();
-  if (!instance) {
-    !!(process.env.NODE_ENV !== "production") && warn(`useCssVars is called without current active component instance.`);
-    return;
-  }
-  const updateTeleports = instance.ut = (vars = getter(instance.proxy)) => {
-    Array.from(
-      document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)
-    ).forEach((node) => setVarsOnNode(node, vars));
-  };
-  const setVars = () => {
-    const vars = getter(instance.proxy);
-    setVarsOnVNode(instance.subTree, vars);
-    updateTeleports(vars);
-  };
-  watchPostEffect(setVars);
-  onMounted(() => {
-    const ob = new MutationObserver(setVars);
-    ob.observe(instance.subTree.el.parentNode, { childList: true });
-    onUnmounted(() => ob.disconnect());
-  });
-}
-function setVarsOnVNode(vnode, vars) {
-  if (vnode.shapeFlag & 128) {
-    const suspense = vnode.suspense;
-    vnode = suspense.activeBranch;
-    if (suspense.pendingBranch && !suspense.isHydrating) {
-      suspense.effects.push(() => {
-        setVarsOnVNode(suspense.activeBranch, vars);
-      });
-    }
-  }
-  while (vnode.component) {
-    vnode = vnode.component.subTree;
-  }
-  if (vnode.shapeFlag & 1 && vnode.el) {
-    setVarsOnNode(vnode.el, vars);
-  } else if (vnode.type === Fragment) {
-    vnode.children.forEach((c) => setVarsOnVNode(c, vars));
-  } else if (vnode.type === Static) {
-    let { el, anchor } = vnode;
-    while (el) {
-      setVarsOnNode(el, vars);
-      if (el === anchor)
-        break;
-      el = el.nextSibling;
-    }
-  }
-}
-function setVarsOnNode(el, vars) {
-  if (el.nodeType === 1) {
-    const style = el.style;
-    for (const key in vars) {
-      style.setProperty(`--${key}`, vars[key]);
-    }
-  }
-}
-
 const positionMap = /* @__PURE__ */ new WeakMap();
 const newPositionMap = /* @__PURE__ */ new WeakMap();
 const moveCbKey = Symbol("_moveCb");
@@ -14361,7 +14377,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.`,

package/dist/vue.global.js

@@ -242,7 +242,7 @@ 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 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);
@@ -3157,6 +3157,8 @@ Details: https://v3-migration.vuejs.org/breaking-changes/migration-build.html`
     return false;
   }
   function updateHOCHostEl({ vnode, parent }, el) {
+    if (!el)
+      return;
     while (parent) {
       const root = parent.subTree;
       if (root.suspense && root.suspense.activeBranch === vnode) {
@@ -5881,24 +5883,30 @@ 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();
     }
-    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();
@@ -6472,7 +6480,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-beta.2"}`;
+    Vue.version = `2.6.14-compat:${"3.4.0-beta.3"}`;
     Vue.config = singletonApp.config;
     Vue.use = (p, ...options) => {
       if (p && isFunction(p.install)) {
@@ -11170,7 +11178,7 @@ Component that was made reactive: `,
     return true;
   }
 
-  const version = "3.4.0-beta.2";
+  const version = "3.4.0-beta.3";
   const ErrorTypeStrings = ErrorTypeStrings$1 ;
   const ssrUtils = null;
   const resolveFilter = resolveFilter$1 ;
@@ -11612,6 +11620,69 @@ Component that was made reactive: `,
     el.style.display = value ? el[vShowOldKey] : "none";
   }
 
+  const CSS_VAR_TEXT = Symbol("CSS_VAR_TEXT" );
+  function useCssVars(getter) {
+    const instance = getCurrentInstance();
+    if (!instance) {
+      warn(`useCssVars is called without current active component instance.`);
+      return;
+    }
+    const updateTeleports = instance.ut = (vars = getter(instance.proxy)) => {
+      Array.from(
+        document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)
+      ).forEach((node) => setVarsOnNode(node, vars));
+    };
+    const setVars = () => {
+      const vars = getter(instance.proxy);
+      setVarsOnVNode(instance.subTree, vars);
+      updateTeleports(vars);
+    };
+    watchPostEffect(setVars);
+    onMounted(() => {
+      const ob = new MutationObserver(setVars);
+      ob.observe(instance.subTree.el.parentNode, { childList: true });
+      onUnmounted(() => ob.disconnect());
+    });
+  }
+  function setVarsOnVNode(vnode, vars) {
+    if (vnode.shapeFlag & 128) {
+      const suspense = vnode.suspense;
+      vnode = suspense.activeBranch;
+      if (suspense.pendingBranch && !suspense.isHydrating) {
+        suspense.effects.push(() => {
+          setVarsOnVNode(suspense.activeBranch, vars);
+        });
+      }
+    }
+    while (vnode.component) {
+      vnode = vnode.component.subTree;
+    }
+    if (vnode.shapeFlag & 1 && vnode.el) {
+      setVarsOnNode(vnode.el, vars);
+    } else if (vnode.type === Fragment) {
+      vnode.children.forEach((c) => setVarsOnVNode(c, vars));
+    } else if (vnode.type === Static) {
+      let { el, anchor } = vnode;
+      while (el) {
+        setVarsOnNode(el, vars);
+        if (el === anchor)
+          break;
+        el = el.nextSibling;
+      }
+    }
+  }
+  function setVarsOnNode(el, vars) {
+    if (el.nodeType === 1) {
+      const style = el.style;
+      let cssText = "";
+      for (const key in vars) {
+        style.setProperty(`--${key}`, vars[key]);
+        cssText += `--${key}: ${vars[key]};`;
+      }
+      style[CSS_VAR_TEXT] = cssText;
+    }
+  }
+
   function patchStyle(el, prev, next) {
     const style = el.style;
     const isCssString = isString(next);
@@ -11630,6 +11701,10 @@ Component that was made reactive: `,
       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) {
@@ -12168,65 +12243,6 @@ Component that was made reactive: `,
     }
   }
 
-  function useCssVars(getter) {
-    const instance = getCurrentInstance();
-    if (!instance) {
-      warn(`useCssVars is called without current active component instance.`);
-      return;
-    }
-    const updateTeleports = instance.ut = (vars = getter(instance.proxy)) => {
-      Array.from(
-        document.querySelectorAll(`[data-v-owner="${instance.uid}"]`)
-      ).forEach((node) => setVarsOnNode(node, vars));
-    };
-    const setVars = () => {
-      const vars = getter(instance.proxy);
-      setVarsOnVNode(instance.subTree, vars);
-      updateTeleports(vars);
-    };
-    watchPostEffect(setVars);
-    onMounted(() => {
-      const ob = new MutationObserver(setVars);
-      ob.observe(instance.subTree.el.parentNode, { childList: true });
-      onUnmounted(() => ob.disconnect());
-    });
-  }
-  function setVarsOnVNode(vnode, vars) {
-    if (vnode.shapeFlag & 128) {
-      const suspense = vnode.suspense;
-      vnode = suspense.activeBranch;
-      if (suspense.pendingBranch && !suspense.isHydrating) {
-        suspense.effects.push(() => {
-          setVarsOnVNode(suspense.activeBranch, vars);
-        });
-      }
-    }
-    while (vnode.component) {
-      vnode = vnode.component.subTree;
-    }
-    if (vnode.shapeFlag & 1 && vnode.el) {
-      setVarsOnNode(vnode.el, vars);
-    } else if (vnode.type === Fragment) {
-      vnode.children.forEach((c) => setVarsOnVNode(c, vars));
-    } else if (vnode.type === Static) {
-      let { el, anchor } = vnode;
-      while (el) {
-        setVarsOnNode(el, vars);
-        if (el === anchor)
-          break;
-        el = el.nextSibling;
-      }
-    }
-  }
-  function setVarsOnNode(el, vars) {
-    if (el.nodeType === 1) {
-      const style = el.style;
-      for (const key in vars) {
-        style.setProperty(`--${key}`, vars[key]);
-      }
-    }
-  }
-
   const positionMap = /* @__PURE__ */ new WeakMap();
   const newPositionMap = /* @__PURE__ */ new WeakMap();
   const moveCbKey = Symbol("_moveCb");
@@ -14172,7 +14188,7 @@ 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.`,
+    [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.`,