vue 3.2.20 → 3.2.24

package/dist/vue.global.js

@@ -533,7 +533,7 @@ var Vue = (function (exports) {
   let effectTrackDepth = 0;
   let trackOpBit = 1;
   /**
-   * The bitwise track markers support at most 30 levels op recursion.
+   * The bitwise track markers support at most 30 levels of recursion.
    * This value is chosen to enable modern JS engines to use a SMI on all platforms.
    * When recursion depth is greater, fall back to using a full cleanup.
    */
@@ -854,7 +854,7 @@ var Vue = (function (exports) {
   function createSetter(shallow = false) {
       return function set(target, key, value, receiver) {
           let oldValue = target[key];
-          if (!shallow) {
+          if (!shallow && !isReadonly(value)) {
               value = toRaw(value);
               oldValue = toRaw(oldValue);
               if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
@@ -1649,22 +1649,33 @@ var Vue = (function (exports) {
   }
 
   let buffer = [];
+  let devtoolsNotInstalled = false;
   function emit(event, ...args) {
       if (exports.devtools) {
           exports.devtools.emit(event, ...args);
       }
-      else {
+      else if (!devtoolsNotInstalled) {
           buffer.push({ event, args });
       }
   }
   function setDevtoolsHook(hook, target) {
+      var _a, _b;
       exports.devtools = hook;
       if (exports.devtools) {
           exports.devtools.enabled = true;
           buffer.forEach(({ event, args }) => exports.devtools.emit(event, ...args));
           buffer = [];
       }
-      else {
+      else if (
+      // handle late devtools injection - only do this if we are in an actual
+      // browser environment to avoid the timer handle stalling test runner exit
+      // (#4815)
+      // eslint-disable-next-line no-restricted-globals
+      typeof window !== 'undefined' &&
+          // some envs mock window but not fully
+          window.HTMLElement &&
+          // also exclude jsdom
+          !((_b = (_a = window.navigator) === null || _a === void 0 ? void 0 : _a.userAgent) === null || _b === void 0 ? void 0 : _b.includes('jsdom'))) {
           const replay = (target.__VUE_DEVTOOLS_HOOK_REPLAY__ =
               target.__VUE_DEVTOOLS_HOOK_REPLAY__ || []);
           replay.push((newHook) => {
@@ -1673,9 +1684,18 @@ var Vue = (function (exports) {
           // clear buffer after 3s - the user probably doesn't have devtools installed
           // at all, and keeping the buffer will cause memory leaks (#4738)
           setTimeout(() => {
-              buffer = [];
+              if (!exports.devtools) {
+                  target.__VUE_DEVTOOLS_HOOK_REPLAY__ = null;
+                  devtoolsNotInstalled = true;
+                  buffer = [];
+              }
           }, 3000);
       }
+      else {
+          // non-browser env, assume not installed
+          devtoolsNotInstalled = true;
+          buffer = [];
+      }
   }
   function devtoolsInitApp(app, version) {
       emit("app:init" /* APP_INIT */, app, version, {
@@ -2749,7 +2769,8 @@ var Vue = (function (exports) {
               const rawProps = toRaw(props);
               const { mode } = rawProps;
               // check mode
-              if (mode && !['in-out', 'out-in', 'default'].includes(mode)) {
+              if (mode &&
+                  mode !== 'in-out' && mode !== 'out-in' && mode !== 'default') {
                   warn$1(`invalid <transition> mode: ${mode}`);
               }
               // at this point children has a guaranteed length of 1.
@@ -3389,7 +3410,7 @@ var Vue = (function (exports) {
                   }
                   current = current.parent;
               }
-              hook();
+              return hook();
           });
       injectHook(type, wrappedHook, target);
       // In addition to registering it on the target instance, we walk up the parent
@@ -4051,7 +4072,7 @@ var Vue = (function (exports) {
                   }
               }
               else if (!isEmitListener(instance.emitsOptions, key)) {
-                  if (value !== attrs[key]) {
+                  if (!(key in attrs) || value !== attrs[key]) {
                       attrs[key] = value;
                       hasAttrsChanged = true;
                   }
@@ -4463,7 +4484,7 @@ var Vue = (function (exports) {
     [bar, this.y]
   ])
   */
-  const isBuiltInDirective = /*#__PURE__*/ makeMap('bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text');
+  const isBuiltInDirective = /*#__PURE__*/ makeMap('bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo');
   function validateDirectiveName(name) {
       if (isBuiltInDirective(name)) {
           warn$1('Do not use built-in directive ids as custom directive id: ' + name);
@@ -6380,8 +6401,8 @@ var Vue = (function (exports) {
    *
    * #2080
    * Inside keyed `template` fragment static children, if a fragment is moved,
-   * the children will always moved so that need inherit el form previous nodes
-   * to ensure correct moved position.
+   * the children will always be moved. Therefore, in order to ensure correct move
+   * position, el should be inherited from previous nodes.
    */
   function traverseStaticChildren(n1, n2, shallow = false) {
       const ch1 = n1.children;
@@ -7161,7 +7182,8 @@ var Vue = (function (exports) {
               else if (isOn(key)) {
                   const existing = ret[key];
                   const incoming = toMerge[key];
-                  if (existing !== incoming) {
+                  if (existing !== incoming &&
+                      !(isArray(existing) && existing.includes(incoming))) {
                       ret[key] = existing
                           ? [].concat(existing, incoming)
                           : incoming;
@@ -7364,23 +7386,23 @@ var Vue = (function (exports) {
               const n = accessCache[key];
               if (n !== undefined) {
                   switch (n) {
-                      case 0 /* SETUP */:
+                      case 1 /* SETUP */:
                           return setupState[key];
-                      case 1 /* DATA */:
+                      case 2 /* DATA */:
                           return data[key];
-                      case 3 /* CONTEXT */:
+                      case 4 /* CONTEXT */:
                           return ctx[key];
-                      case 2 /* PROPS */:
+                      case 3 /* PROPS */:
                           return props[key];
                       // default: just fallthrough
                   }
               }
               else if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) {
-                  accessCache[key] = 0 /* SETUP */;
+                  accessCache[key] = 1 /* SETUP */;
                   return setupState[key];
               }
               else if (data !== EMPTY_OBJ && hasOwn(data, key)) {
-                  accessCache[key] = 1 /* DATA */;
+                  accessCache[key] = 2 /* DATA */;
                   return data[key];
               }
               else if (
@@ -7388,15 +7410,15 @@ var Vue = (function (exports) {
               // props
               (normalizedProps = instance.propsOptions[0]) &&
                   hasOwn(normalizedProps, key)) {
-                  accessCache[key] = 2 /* PROPS */;
+                  accessCache[key] = 3 /* PROPS */;
                   return props[key];
               }
               else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {
-                  accessCache[key] = 3 /* CONTEXT */;
+                  accessCache[key] = 4 /* CONTEXT */;
                   return ctx[key];
               }
               else if (shouldCacheAccess) {
-                  accessCache[key] = 4 /* OTHER */;
+                  accessCache[key] = 0 /* OTHER */;
               }
           }
           const publicGetter = publicPropertiesMap[key];
@@ -7417,7 +7439,7 @@ var Vue = (function (exports) {
           }
           else if (ctx !== EMPTY_OBJ && hasOwn(ctx, key)) {
               // user may set custom properties to `this` that start with `$`
-              accessCache[key] = 3 /* CONTEXT */;
+              accessCache[key] = 4 /* CONTEXT */;
               return ctx[key];
           }
           else if (
@@ -7478,7 +7500,7 @@ var Vue = (function (exports) {
       },
       has({ _: { data, setupState, accessCache, ctx, appContext, propsOptions } }, key) {
           let normalizedProps;
-          return (accessCache[key] !== undefined ||
+          return (!!accessCache[key] ||
               (data !== EMPTY_OBJ && hasOwn(data, key)) ||
               (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) ||
               ((normalizedProps = propsOptions[0]) && hasOwn(normalizedProps, key)) ||
@@ -9020,7 +9042,7 @@ var Vue = (function (exports) {
   }
 
   // Core API ------------------------------------------------------------------
-  const version = "3.2.20";
+  const version = "3.2.24";
   /**
    * SSR utils for \@vue/server-renderer. Only exposed in cjs builds.
    * @internal
@@ -9142,16 +9164,8 @@ var Vue = (function (exports) {
 
   function patchStyle(el, prev, next) {
       const style = el.style;
-      const currentDisplay = style.display;
-      if (!next) {
-          el.removeAttribute('style');
-      }
-      else if (isString(next)) {
-          if (prev !== next) {
-              style.cssText = next;
-          }
-      }
-      else {
+      const isCssString = isString(next);
+      if (next && !isCssString) {
           for (const key in next) {
               setStyle(style, key, next[key]);
           }
@@ -9163,11 +9177,22 @@ var Vue = (function (exports) {
               }
           }
       }
-      // indicates that the `display` of the element is controlled by `v-show`,
-      // so we always keep the current `display` value regardless of the `style` value,
-      // thus handing over control to `v-show`.
-      if ('_vod' in el) {
-          style.display = currentDisplay;
+      else {
+          const currentDisplay = style.display;
+          if (isCssString) {
+              if (prev !== next) {
+                  style.cssText = next;
+              }
+          }
+          else if (prev) {
+              el.removeAttribute('style');
+          }
+          // indicates that the `display` of the element is controlled by `v-show`,
+          // so we always keep the current `display` value regardless of the `style`
+          // value, thus handing over control to `v-show`.
+          if ('_vod' in el) {
+              style.display = currentDisplay;
+          }
       }
   }
   const importantRE = /\s*!important$/;
@@ -9250,12 +9275,19 @@ var Vue = (function (exports) {
           el[key] = value == null ? '' : value;
           return;
       }
-      if (key === 'value' && el.tagName !== 'PROGRESS') {
+      if (key === 'value' &&
+          el.tagName !== 'PROGRESS' &&
+          // custom elements may use _value internally
+          !el.tagName.includes('-')) {
           // store value as _value as well since
           // non-string values will be stringified.
           el._value = value;
           const newValue = value == null ? '' : value;
-          if (el.value !== newValue) {
+          if (el.value !== newValue ||
+              // #4956: always set for OPTION elements because its value falls back to
+              // textContent if no value attribute is present. And setting .value for
+              // OPTION has no side effect
+              el.tagName === 'OPTION') {
               el.value = newValue;
           }
           if (value == null) {
@@ -9513,22 +9545,11 @@ var Vue = (function (exports) {
               }
               this.attachShadow({ mode: 'open' });
           }
-          // set initial attrs
-          for (let i = 0; i < this.attributes.length; i++) {
-              this._setAttr(this.attributes[i].name);
-          }
-          // watch future attr changes
-          new MutationObserver(mutations => {
-              for (const m of mutations) {
-                  this._setAttr(m.attributeName);
-              }
-          }).observe(this, { attributes: true });
       }
       connectedCallback() {
           this._connected = true;
           if (!this._instance) {
               this._resolveDef();
-              this._update();
           }
       }
       disconnectedCallback() {
@@ -9547,8 +9568,18 @@ var Vue = (function (exports) {
           if (this._resolved) {
               return;
           }
+          this._resolved = true;
+          // set initial attrs
+          for (let i = 0; i < this.attributes.length; i++) {
+              this._setAttr(this.attributes[i].name);
+          }
+          // watch future attr changes
+          new MutationObserver(mutations => {
+              for (const m of mutations) {
+                  this._setAttr(m.attributeName);
+              }
+          }).observe(this, { attributes: true });
           const resolve = (def) => {
-              this._resolved = true;
               const { props, styles } = def;
               const hasOptions = !isArray(props);
               const rawKeys = props ? (hasOptions ? Object.keys(props) : props) : [];
@@ -9563,14 +9594,11 @@ var Vue = (function (exports) {
                       }
                   }
               }
-              if (numberProps) {
-                  this._numberProps = numberProps;
-                  this._update();
-              }
+              this._numberProps = numberProps;
               // check if there are props set pre-upgrade or connect
               for (const key of Object.keys(this)) {
                   if (key[0] !== '_') {
-                      this._setProp(key, this[key]);
+                      this._setProp(key, this[key], true, false);
                   }
               }
               // defining getter/setters on prototype
@@ -9584,7 +9612,10 @@ var Vue = (function (exports) {
                       }
                   });
               }
+              // apply CSS
               this._applyStyles(styles);
+              // initial render
+              this._update();
           };
           const asyncDef = this._def.__asyncLoader;
           if (asyncDef) {
@@ -9610,10 +9641,10 @@ var Vue = (function (exports) {
       /**
        * @internal
        */
-      _setProp(key, val, shouldReflect = true) {
+      _setProp(key, val, shouldReflect = true, shouldUpdate = true) {
           if (val !== this._props[key]) {
               this._props[key] = val;
-              if (this._instance) {
+              if (shouldUpdate && this._instance) {
                   this._update();
               }
               // reflect
@@ -9642,7 +9673,7 @@ var Vue = (function (exports) {
                   // HMR
                   {
                       instance.ceReload = newStyles => {
-                          // alawys reset styles
+                          // always reset styles
                           if (this._styles) {
                               this._styles.forEach(s => this.shadowRoot.removeChild(s));
                               this._styles.length = 0;
@@ -11155,7 +11186,6 @@ var Vue = (function (exports) {
   }
   function injectProp(node, prop, context) {
       let propsWithInjection;
-      const originalProps = node.type === 13 /* VNODE_CALL */ ? node.props : node.arguments[2];
       /**
        * 1. mergeProps(...)
        * 2. toHandlers(...)
@@ -11164,7 +11194,7 @@ var Vue = (function (exports) {
        *
        * we need to get the real props before normalization
        */
-      let props = originalProps;
+      let props = node.type === 13 /* VNODE_CALL */ ? node.props : node.arguments[2];
       let callPath = [];
       let parentCall;
       if (props &&
@@ -12129,15 +12159,6 @@ var Vue = (function (exports) {
           !isSlotOutlet(child));
   }
   function walk(node, context, doNotHoistNode = false) {
-      // Some transforms, e.g. transformAssetUrls from @vue/compiler-sfc, replaces
-      // static bindings with expressions. These expressions are guaranteed to be
-      // constant so they are still eligible for hoisting, but they are only
-      // available at runtime and therefore cannot be evaluated ahead of time.
-      // This is only a concern for pre-stringification (via transformHoist by
-      // @vue/compiler-dom), but doing it here allows us to perform only one full
-      // walk of the AST and allow `stringifyStatic` to stop walking as soon as its
-      // stringification threshold is met.
-      let canStringify = true;
       const { children } = node;
       const originalCount = children.length;
       let hoistedCount = 0;
@@ -12150,9 +12171,6 @@ var Vue = (function (exports) {
                   ? 0 /* NOT_CONSTANT */
                   : getConstantType(child, context);
               if (constantType > 0 /* NOT_CONSTANT */) {
-                  if (constantType < 3 /* CAN_STRINGIFY */) {
-                      canStringify = false;
-                  }
                   if (constantType >= 2 /* CAN_HOIST */) {
                       child.codegenNode.patchFlag =
                           -1 /* HOISTED */ + (` /* HOISTED */` );
@@ -12183,17 +12201,10 @@ var Vue = (function (exports) {
                   }
               }
           }
-          else if (child.type === 12 /* TEXT_CALL */) {
-              const contentType = getConstantType(child.content, context);
-              if (contentType > 0) {
-                  if (contentType < 3 /* CAN_STRINGIFY */) {
-                      canStringify = false;
-                  }
-                  if (contentType >= 2 /* CAN_HOIST */) {
-                      child.codegenNode = context.hoist(child.codegenNode);
-                      hoistedCount++;
-                  }
-              }
+          else if (child.type === 12 /* TEXT_CALL */ &&
+              getConstantType(child.content, context) >= 2 /* CAN_HOIST */) {
+              child.codegenNode = context.hoist(child.codegenNode);
+              hoistedCount++;
           }
           // walk further
           if (child.type === 1 /* ELEMENT */) {
@@ -12217,7 +12228,7 @@ var Vue = (function (exports) {
               }
           }
       }
-      if (canStringify && hoistedCount && context.transformHoist) {
+      if (hoistedCount && context.transformHoist) {
           context.transformHoist(children, context, node);
       }
       // all children were hoisted - the entire children array is hoistable.
@@ -14518,7 +14529,7 @@ var Vue = (function (exports) {
       return propsNamesString + `]`;
   }
   function isComponentTag(tag) {
-      return tag[0].toLowerCase() + tag.slice(1) === 'component';
+      return tag === 'component' || tag === 'Component';
   }
 
   const transformSlotOutlet = (node, context) => {