@vue/compat 3.3.8 → 3.3.9

package/dist/vue.esm-bundler.js

@@ -104,7 +104,7 @@ const PatchFlagNames = {
   [4]: `STYLE`,
   [8]: `PROPS`,
   [16]: `FULL_PROPS`,
-  [32]: `HYDRATE_EVENTS`,
+  [32]: `NEED_HYDRATION`,
   [64]: `STABLE_FRAGMENT`,
   [128]: `KEYED_FRAGMENT`,
   [256]: `UNKEYED_FRAGMENT`,
@@ -1005,7 +1005,7 @@ function createReadonlyMethod(type) {
         toRaw(this)
       );
     }
-    return type === "delete" ? false : this;
+    return type === "delete" ? false : type === "clear" ? void 0 : this;
   };
 }
 function createInstrumentations() {
@@ -2746,9 +2746,19 @@ function renderComponentRoot(instance) {
   try {
     if (vnode.shapeFlag & 4) {
       const proxyToUse = withProxy || proxy;
+      const thisProxy = !!(process.env.NODE_ENV !== "production") && setupState.__isScriptSetup ? new Proxy(proxyToUse, {
+        get(target, key, receiver) {
+          warn(
+            `Property '${String(
+              key
+            )}' was accessed via 'this'. Avoid using 'this' in templates.`
+          );
+          return Reflect.get(target, key, receiver);
+        }
+      }) : proxyToUse;
       result = normalizeVNode(
         render.call(
-          proxyToUse,
+          thisProxy,
           proxyToUse,
           renderCache,
           props,
@@ -3778,6 +3788,7 @@ function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EM
   let onCleanup = (fn) => {
     cleanup = effect.onStop = () => {
       callWithErrorHandling(fn, instance, 4);
+      cleanup = effect.onStop = void 0;
     };
   };
   let ssrCleanup;
@@ -4277,7 +4288,11 @@ function emptyPlaceholder(vnode) {
   }
 }
 function getKeepAliveChild(vnode) {
-  return isKeepAlive(vnode) ? vnode.children ? vnode.children[0] : void 0 : vnode;
+  return isKeepAlive(vnode) ? (
+    // #7121 ensure get the child component subtree in case
+    // it's been replaced during HMR
+    !!(process.env.NODE_ENV !== "production") && vnode.component ? vnode.component.subTree : vnode.children ? vnode.children[0] : void 0
+  ) : vnode;
 }
 function setTransitionHooks(vnode, hooks) {
   if (vnode.shapeFlag & 6 && vnode.component) {
@@ -6302,7 +6317,7 @@ function createCompatVue$1(createApp, createSingletonApp) {
       return vm;
     }
   }
-  Vue.version = `2.6.14-compat:${"3.3.8"}`;
+  Vue.version = `2.6.14-compat:${"3.3.9"}`;
   Vue.config = singletonApp.config;
   Vue.use = (p, ...options) => {
     if (p && isFunction(p.install)) {
@@ -7333,6 +7348,9 @@ function assertType(value, type) {
   };
 }
 function getInvalidTypeMessage(name, value, expectedTypes) {
+  if (expectedTypes.length === 0) {
+    return `Prop type [] for prop "${name}" won't match anything. Did you mean to use type Array instead?`;
+  }
   let message = `Invalid prop: type check failed for prop "${name}". Expected ${expectedTypes.map(capitalize).join(" | ")}`;
   const expectedType = expectedTypes[0];
   const receivedType = toRawType(value);
@@ -7604,6 +7622,20 @@ function createHydrationFunctions(rendererInternals) {
     const { type, ref, shapeFlag, patchFlag } = vnode;
     let domType = node.nodeType;
     vnode.el = node;
+    if (!!(process.env.NODE_ENV !== "production") || __VUE_PROD_DEVTOOLS__) {
+      if (!("__vnode" in node)) {
+        Object.defineProperty(node, "__vnode", {
+          value: vnode,
+          enumerable: false
+        });
+      }
+      if (!("__vueParentComponent" in node)) {
+        Object.defineProperty(node, "__vueParentComponent", {
+          value: parentComponent,
+          enumerable: false
+        });
+      }
+    }
     if (patchFlag === -2) {
       optimized = false;
       vnode.dynamicChildren = null;
@@ -7765,15 +7797,16 @@ function createHydrationFunctions(rendererInternals) {
   const hydrateElement = (el, vnode, parentComponent, parentSuspense, slotScopeIds, optimized) => {
     optimized = optimized || !!vnode.dynamicChildren;
     const { type, props, patchFlag, shapeFlag, dirs, transition } = vnode;
-    const forcePatchValue = type === "input" && dirs || type === "option";
-    if (!!(process.env.NODE_ENV !== "production") || forcePatchValue || patchFlag !== -1) {
+    const forcePatch = type === "input" || type === "option";
+    if (!!(process.env.NODE_ENV !== "production") || forcePatch || patchFlag !== -1) {
       if (dirs) {
         invokeDirectiveHook(vnode, null, parentComponent, "created");
       }
       if (props) {
-        if (forcePatchValue || !optimized || patchFlag & (16 | 32)) {
+        if (forcePatch || !optimized || patchFlag & (16 | 32)) {
           for (const key in props) {
-            if (forcePatchValue && key.endsWith("value") || isOn(key) && !isReservedProp(key)) {
+            if (forcePatch && (key.endsWith("value") || key === "indeterminate") || isOn(key) && !isReservedProp(key) || // force hydrate v-bind with .prop modifiers
+            key[0] === ".") {
               patchProp(
                 el,
                 key,
@@ -9598,6 +9631,7 @@ const resolveTarget = (props, select) => {
   }
 };
 const TeleportImpl = {
+  name: "Teleport",
   __isTeleport: true,
   process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, internals) {
     const {
@@ -10077,7 +10111,7 @@ function _createVNode(type, props = null, children = null, patchFlag = 0, dynami
   if (!!(process.env.NODE_ENV !== "production") && shapeFlag & 4 && isProxy(type)) {
     type = toRaw(type);
     warn(
-      `Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with \`markRaw\` or using \`shallowRef\` instead of \`ref\`.`,
+      `Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with \`markRaw\` or using \`shallowRef\` instead of \`ref\`.`,
       `
 Component that was made reactive: `,
       type
@@ -10941,7 +10975,7 @@ function isMemoSame(cached, memo) {
   return true;
 }
 
-const version = "3.3.8";
+const version = "3.3.9";
 const _ssrUtils = {
   createComponentInstance,
   setupComponent,
@@ -12197,21 +12231,20 @@ const vModelText = {
     el[assignKey] = getModelAssigner(vnode);
     if (el.composing)
       return;
+    const elValue = number || el.type === "number" ? looseToNumber(el.value) : el.value;
+    const newValue = value == null ? "" : value;
+    if (elValue === newValue) {
+      return;
+    }
     if (document.activeElement === el && el.type !== "range") {
       if (lazy) {
         return;
       }
-      if (trim && el.value.trim() === value) {
-        return;
-      }
-      if ((number || el.type === "number") && looseToNumber(el.value) === value) {
+      if (trim && el.value.trim() === newValue) {
         return;
       }
     }
-    const newValue = value == null ? "" : value;
-    if (el.value !== newValue) {
-      el.value = newValue;
-    }
+    el.value = newValue;
   }
 };
 const vModelCheckbox = {
@@ -13379,6 +13412,7 @@ function getMemoedVNodeCall(node) {
     return node;
   }
 }
+const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/;
 
 const deprecationData = {
   ["COMPILER_IS_ON_ELEMENT"]: {
@@ -15777,7 +15811,6 @@ function processFor(node, dir, context, processCodegen) {
       onExit();
   };
 }
-const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/;
 const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/;
 const stripParensRE = /^\(|\)$/g;
 function parseForExpression(input, context) {
@@ -16377,7 +16410,7 @@ function buildProps(node, context, props = node.props, isComponent, isDynamicCom
         )
       );
     } else {
-      const { name, arg, exp, loc } = prop;
+      const { name, arg, exp, loc, modifiers } = prop;
       const isVBind = name === "bind";
       const isVOn = name === "on";
       if (name === "slot") {
@@ -16470,6 +16503,9 @@ function buildProps(node, context, props = node.props, isComponent, isDynamicCom
         }
         continue;
       }
+      if (isVBind && modifiers.includes("prop")) {
+        patchFlag |= 32;
+      }
       const directiveTransform = context.directiveTransforms[name];
       if (directiveTransform) {
         const { props: props2, needRuntime } = directiveTransform(prop, node, context);
@@ -17502,8 +17538,8 @@ const transformModel = (dir, node, context) => {
     );
   }
   function checkDuplicatedValue() {
-    const value = findProp(node, "value");
-    if (value) {
+    const value = findDir(node, "bind");
+    if (value && isStaticArgOf(value.arg, "value")) {
       context.onError(
         createDOMCompilerError(
           60,

package/dist/vue.global.js

@@ -107,7 +107,7 @@ var Vue = (function () {
     [4]: `STYLE`,
     [8]: `PROPS`,
     [16]: `FULL_PROPS`,
-    [32]: `HYDRATE_EVENTS`,
+    [32]: `NEED_HYDRATION`,
     [64]: `STABLE_FRAGMENT`,
     [128]: `KEYED_FRAGMENT`,
     [256]: `UNKEYED_FRAGMENT`,
@@ -1004,7 +1004,7 @@ var Vue = (function () {
           toRaw(this)
         );
       }
-      return type === "delete" ? false : this;
+      return type === "delete" ? false : type === "clear" ? void 0 : this;
     };
   }
   function createInstrumentations() {
@@ -2732,9 +2732,19 @@ Details: https://v3-migration.vuejs.org/breaking-changes/migration-build.html`
     try {
       if (vnode.shapeFlag & 4) {
         const proxyToUse = withProxy || proxy;
+        const thisProxy = setupState.__isScriptSetup ? new Proxy(proxyToUse, {
+          get(target, key, receiver) {
+            warn(
+              `Property '${String(
+              key
+            )}' was accessed via 'this'. Avoid using 'this' in templates.`
+            );
+            return Reflect.get(target, key, receiver);
+          }
+        }) : proxyToUse;
         result = normalizeVNode(
           render.call(
-            proxyToUse,
+            thisProxy,
             proxyToUse,
             renderCache,
             props,
@@ -3764,6 +3774,7 @@ If this is a native custom element, make sure to exclude it from component resol
     let onCleanup = (fn) => {
       cleanup = effect.onStop = () => {
         callWithErrorHandling(fn, instance, 4);
+        cleanup = effect.onStop = void 0;
       };
     };
     let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
@@ -4240,7 +4251,11 @@ If this is a native custom element, make sure to exclude it from component resol
     }
   }
   function getKeepAliveChild(vnode) {
-    return isKeepAlive(vnode) ? vnode.children ? vnode.children[0] : void 0 : vnode;
+    return isKeepAlive(vnode) ? (
+      // #7121 ensure get the child component subtree in case
+      // it's been replaced during HMR
+      vnode.component ? vnode.component.subTree : vnode.children ? vnode.children[0] : void 0
+    ) : vnode;
   }
   function setTransitionHooks(vnode, hooks) {
     if (vnode.shapeFlag & 6 && vnode.component) {
@@ -6257,7 +6272,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.3.8"}`;
+    Vue.version = `2.6.14-compat:${"3.3.9"}`;
     Vue.config = singletonApp.config;
     Vue.use = (p, ...options) => {
       if (p && isFunction(p.install)) {
@@ -7285,6 +7300,9 @@ If you want to remount the same app, move your app creation logic into a factory
     };
   }
   function getInvalidTypeMessage(name, value, expectedTypes) {
+    if (expectedTypes.length === 0) {
+      return `Prop type [] for prop "${name}" won't match anything. Did you mean to use type Array instead?`;
+    }
     let message = `Invalid prop: type check failed for prop "${name}". Expected ${expectedTypes.map(capitalize).join(" | ")}`;
     const expectedType = expectedTypes[0];
     const receivedType = toRawType(value);
@@ -7556,6 +7574,20 @@ If you want to remount the same app, move your app creation logic into a factory
       const { type, ref, shapeFlag, patchFlag } = vnode;
       let domType = node.nodeType;
       vnode.el = node;
+      {
+        if (!("__vnode" in node)) {
+          Object.defineProperty(node, "__vnode", {
+            value: vnode,
+            enumerable: false
+          });
+        }
+        if (!("__vueParentComponent" in node)) {
+          Object.defineProperty(node, "__vueParentComponent", {
+            value: parentComponent,
+            enumerable: false
+          });
+        }
+      }
       if (patchFlag === -2) {
         optimized = false;
         vnode.dynamicChildren = null;
@@ -7717,15 +7749,16 @@ If you want to remount the same app, move your app creation logic into a factory
     const hydrateElement = (el, vnode, parentComponent, parentSuspense, slotScopeIds, optimized) => {
       optimized = optimized || !!vnode.dynamicChildren;
       const { type, props, patchFlag, shapeFlag, dirs, transition } = vnode;
-      const forcePatchValue = type === "input" && dirs || type === "option";
+      const forcePatch = type === "input" || type === "option";
       {
         if (dirs) {
           invokeDirectiveHook(vnode, null, parentComponent, "created");
         }
         if (props) {
-          if (forcePatchValue || !optimized || patchFlag & (16 | 32)) {
+          if (forcePatch || !optimized || patchFlag & (16 | 32)) {
             for (const key in props) {
-              if (forcePatchValue && key.endsWith("value") || isOn(key) && !isReservedProp(key)) {
+              if (forcePatch && (key.endsWith("value") || key === "indeterminate") || isOn(key) && !isReservedProp(key) || // force hydrate v-bind with .prop modifiers
+              key[0] === ".") {
                 patchProp(
                   el,
                   key,
@@ -9516,6 +9549,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) {
       const {
@@ -9995,7 +10029,7 @@ If you want to remount the same app, move your app creation logic into a factory
     if (shapeFlag & 4 && isProxy(type)) {
       type = toRaw(type);
       warn(
-        `Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with \`markRaw\` or using \`shallowRef\` instead of \`ref\`.`,
+        `Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with \`markRaw\` or using \`shallowRef\` instead of \`ref\`.`,
         `
 Component that was made reactive: `,
         type
@@ -10825,7 +10859,7 @@ Component that was made reactive: `,
     return true;
   }
 
-  const version = "3.3.8";
+  const version = "3.3.9";
   const ssrUtils = null;
   const resolveFilter = resolveFilter$1 ;
   const _compatUtils = {
@@ -12054,21 +12088,20 @@ Component that was made reactive: `,
       el[assignKey] = getModelAssigner(vnode);
       if (el.composing)
         return;
+      const elValue = number || el.type === "number" ? looseToNumber(el.value) : el.value;
+      const newValue = value == null ? "" : value;
+      if (elValue === newValue) {
+        return;
+      }
       if (document.activeElement === el && el.type !== "range") {
         if (lazy) {
           return;
         }
-        if (trim && el.value.trim() === value) {
-          return;
-        }
-        if ((number || el.type === "number") && looseToNumber(el.value) === value) {
+        if (trim && el.value.trim() === newValue) {
           return;
         }
       }
-      const newValue = value == null ? "" : value;
-      if (el.value !== newValue) {
-        el.value = newValue;
-      }
+      el.value = newValue;
     }
   };
   const vModelCheckbox = {
@@ -13201,6 +13234,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       return node;
     }
   }
+  const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/;
 
   const deprecationData = {
     ["COMPILER_IS_ON_ELEMENT"]: {
@@ -15598,7 +15632,6 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
         onExit();
     };
   }
-  const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/;
   const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/;
   const stripParensRE = /^\(|\)$/g;
   function parseForExpression(input, context) {
@@ -16196,7 +16229,7 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
           )
         );
       } else {
-        const { name, arg, exp, loc } = prop;
+        const { name, arg, exp, loc, modifiers } = prop;
         const isVBind = name === "bind";
         const isVOn = name === "on";
         if (name === "slot") {
@@ -16289,6 +16322,9 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
           }
           continue;
         }
+        if (isVBind && modifiers.includes("prop")) {
+          patchFlag |= 32;
+        }
         const directiveTransform = context.directiveTransforms[name];
         if (directiveTransform) {
           const { props: props2, needRuntime } = directiveTransform(prop, node, context);
@@ -17321,8 +17357,8 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       );
     }
     function checkDuplicatedValue() {
-      const value = findProp(node, "value");
-      if (value) {
+      const value = findDir(node, "bind");
+      if (value && isStaticArgOf(value.arg, "value")) {
         context.onError(
           createDOMCompilerError(
             60,