vue 3.3.8 → 3.3.10

package/dist/vue.esm-bundler.js

@@ -2,7 +2,7 @@ import * as runtimeDom from '@vue/runtime-dom';
 import { initCustomFormatter, registerRuntimeCompiler, warn } from '@vue/runtime-dom';
 export * from '@vue/runtime-dom';
 import { compile } from '@vue/compiler-dom';
-import { isString, NOOP, extend, generateCodeFrame } from '@vue/shared';
+import { isString, NOOP, extend, generateCodeFrame, EMPTY_OBJ } from '@vue/shared';
 
 function initDev() {
   {
@@ -13,7 +13,15 @@ function initDev() {
 if (!!(process.env.NODE_ENV !== "production")) {
   initDev();
 }
-const compileCache = /* @__PURE__ */ Object.create(null);
+const compileCache = /* @__PURE__ */ new WeakMap();
+function getCache(options) {
+  let c = compileCache.get(options != null ? options : EMPTY_OBJ);
+  if (!c) {
+    c = /* @__PURE__ */ Object.create(null);
+    compileCache.set(options != null ? options : EMPTY_OBJ, c);
+  }
+  return c;
+}
 function compileToFunction(template, options) {
   if (!isString(template)) {
     if (template.nodeType) {
@@ -24,7 +32,8 @@ function compileToFunction(template, options) {
     }
   }
   const key = template;
-  const cached = compileCache[key];
+  const cache = getCache(options);
+  const cached = cache[key];
   if (cached) {
     return cached;
   }
@@ -59,7 +68,7 @@ ${codeFrame}` : message);
   }
   const render = new Function("Vue", code)(runtimeDom);
   render._rc = true;
-  return compileCache[key] = render;
+  return cache[key] = render;
 }
 registerRuntimeCompiler(compileToFunction);
 

package/dist/vue.global.js

@@ -15,8 +15,8 @@ var Vue = (function (exports) {
   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) => {
@@ -107,7 +107,7 @@ var Vue = (function (exports) {
     [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 (exports) {
           toRaw(this)
         );
       }
-      return type === "delete" ? false : this;
+      return type === "delete" ? false : type === "clear" ? void 0 : this;
     };
   }
   function createInstrumentations() {
@@ -2275,9 +2275,19 @@ var Vue = (function (exports) {
     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,
@@ -2888,7 +2898,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);
               }
             };
@@ -2935,7 +2950,6 @@ If this is a native custom element, make sure to exclude it from component resol
         }
         const { vnode: vnode2, activeBranch, parentComponent: parentComponent2, container: container2, isSVG: isSVG2 } = suspense;
         triggerEvent(vnode2, "onFallback");
-        const anchor2 = next(activeBranch);
         const mountFallback = () => {
           if (!suspense.isInFallback) {
             return;
@@ -2944,7 +2958,7 @@ If this is a native custom element, make sure to exclude it from component resol
             null,
             fallbackVNode,
             container2,
-            anchor2,
+            next(activeBranch),
             parentComponent2,
             null,
             // fallback tree will not have suspense context
@@ -3239,6 +3253,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;
@@ -3709,7 +3724,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) {
@@ -5702,6 +5721,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);
@@ -5971,6 +5993,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;
@@ -6132,15 +6168,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,
@@ -7897,6 +7934,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 {
@@ -8318,7 +8356,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
@@ -8937,9 +8975,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)) {
@@ -9133,7 +9171,7 @@ Component that was made reactive: `,
     return true;
   }
 
-  const version = "3.3.8";
+  const version = "3.3.10";
   const ssrUtils = null;
   const resolveFilter = null;
   const compatUtils = null;
@@ -9745,7 +9783,8 @@ Component that was made reactive: `,
     }
   }
 
-  const nativeOnRE = /^on[a-z]/;
+  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, isSVG = false, prevChildren, parentComponent, parentSuspense, unmountChildren) => {
     if (key === "class") {
       patchClass(el, nextValue, isSVG);
@@ -9779,7 +9818,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;
@@ -9796,7 +9835,11 @@ 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;
+      return !(tag === "IMG" || tag === "VIDEO" || tag === "CANVAS" || tag === "SOURCE");
+    }
+    if (isNativeOn(key) && isString(value)) {
       return false;
     }
     return key in el;
@@ -10266,21 +10309,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) {
+        if (trim && el.value.trim() === newValue) {
           return;
         }
-        if ((number || el.type === "number") && looseToNumber(el.value) === value) {
-          return;
-        }
-      }
-      const newValue = value == null ? "" : value;
-      if (el.value !== newValue) {
-        el.value = newValue;
       }
+      el.value = newValue;
     }
   };
   const vModelCheckbox = {
@@ -10466,14 +10508,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",
@@ -10485,7 +10527,7 @@ Component that was made reactive: `,
     delete: "backspace"
   };
   const withKeys = (fn, modifiers) => {
-    return (event) => {
+    return fn._withKeys || (fn._withKeys = (event) => {
       if (!("key" in event)) {
         return;
       }
@@ -10493,7 +10535,7 @@ Component that was made reactive: `,
       if (modifiers.some((k) => k === eventKey || keyNames[k] === eventKey)) {
         return fn(event);
       }
-    };
+    });
   };
 
   const rendererOptions = /* @__PURE__ */ extend({ patchProp }, nodeOps);
@@ -11188,6 +11230,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 decodeRE = /&(gt|lt|amp|apos|quot);/g;
   const decodeMap = {
@@ -13416,7 +13459,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) {
@@ -13952,6 +13994,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;
         }
@@ -14005,7 +14050,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") {
@@ -14065,6 +14110,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);
@@ -14950,8 +14998,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,
@@ -15219,7 +15267,15 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
   {
     initDev();
   }
-  const compileCache = /* @__PURE__ */ Object.create(null);
+  const compileCache = /* @__PURE__ */ new WeakMap();
+  function getCache(options) {
+    let c = compileCache.get(options != null ? options : EMPTY_OBJ);
+    if (!c) {
+      c = /* @__PURE__ */ Object.create(null);
+      compileCache.set(options != null ? options : EMPTY_OBJ, c);
+    }
+    return c;
+  }
   function compileToFunction(template, options) {
     if (!isString(template)) {
       if (template.nodeType) {
@@ -15230,7 +15286,8 @@ Use a v-bind binding combined with a v-on listener that emits update:x event ins
       }
     }
     const key = template;
-    const cached = compileCache[key];
+    const cache = getCache(options);
+    const cached = cache[key];
     if (cached) {
       return cached;
     }
@@ -15265,7 +15322,7 @@ ${codeFrame}` : message);
     }
     const render = new Function(code)() ;
     render._rc = true;
-    return compileCache[key] = render;
+    return cache[key] = render;
   }
   registerRuntimeCompiler(compileToFunction);