@vue/compat 3.2.21 → 3.2.25

package/dist/vue.runtime.global.js

@@ -37,7 +37,7 @@ var Vue = (function () {
   const isSpecialBooleanAttr = /*#__PURE__*/ makeMap(specialBooleanAttrs);
   /**
    * Boolean attributes should be included if the value is truthy or ''.
-   * e.g. <select multiple> compiles to { multiple: '' }
+   * e.g. `<select multiple>` compiles to `{ multiple: '' }`
    */
   function includeBooleanAttr(value) {
       return !!value || value === '';
@@ -269,7 +269,7 @@ var Vue = (function () {
       '' + parseInt(key, 10) === key;
   const isReservedProp = /*#__PURE__*/ makeMap(
   // the leading comma is intentional so empty string "" is also included
-  ',key,ref,' +
+  ',key,ref,ref_for,ref_key,' +
       'onVnodeBeforeMount,onVnodeMounted,' +
       'onVnodeBeforeUpdate,onVnodeUpdated,' +
       'onVnodeBeforeUnmount,onVnodeUnmounted');
@@ -458,7 +458,7 @@ var Vue = (function () {
   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.
    */
@@ -779,7 +779,7 @@ var Vue = (function () {
   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)) {
@@ -1364,21 +1364,25 @@ var Vue = (function () {
       return ret;
   }
   class ObjectRefImpl {
-      constructor(_object, _key) {
+      constructor(_object, _key, _defaultValue) {
           this._object = _object;
           this._key = _key;
+          this._defaultValue = _defaultValue;
           this.__v_isRef = true;
       }
       get value() {
-          return this._object[this._key];
+          const val = this._object[this._key];
+          return val === undefined ? this._defaultValue : val;
       }
       set value(newVal) {
           this._object[this._key] = newVal;
       }
   }
-  function toRef(object, key) {
+  function toRef(object, key, defaultValue) {
       const val = object[key];
-      return isRef(val) ? val : new ObjectRefImpl(object, key);
+      return isRef(val)
+          ? val
+          : new ObjectRefImpl(object, key, defaultValue);
   }
 
   class ComputedRefImpl {
@@ -1585,6 +1589,7 @@ var Vue = (function () {
       }
   }
   function setDevtoolsHook(hook, target) {
+      var _a, _b;
       devtools = hook;
       if (devtools) {
           devtools.enabled = true;
@@ -1597,7 +1602,10 @@ var Vue = (function () {
       // (#4815)
       // eslint-disable-next-line no-restricted-globals
       typeof window !== 'undefined' &&
-          !navigator.userAgent.includes('jsdom')) {
+          // 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) => {
@@ -1820,11 +1828,6 @@ var Vue = (function () {
               `Use "${newHook}" instead.`,
           link: `https://v3.vuejs.org/guide/migration/custom-directives.html`
       },
-      ["V_FOR_REF" /* V_FOR_REF */]: {
-          message: `Ref usage on v-for no longer creates array ref values in Vue 3. ` +
-              `Consider using function refs or refactor to avoid ref usage altogether.`,
-          link: `https://v3.vuejs.org/guide/migration/array-refs.html`
-      },
       ["V_ON_KEYCODE_MODIFIER" /* V_ON_KEYCODE_MODIFIER */]: {
           message: `Using keyCode as v-on modifier is no longer supported. ` +
               `Use kebab-case key name modifiers instead.`,
@@ -3231,7 +3234,8 @@ var Vue = (function () {
               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.
@@ -3877,7 +3881,7 @@ var Vue = (function () {
                   }
                   current = current.parent;
               }
-              hook();
+              return hook();
           });
       injectHook(type, wrappedHook, target);
       // In addition to registering it on the target instance, we walk up the parent
@@ -4655,7 +4659,7 @@ var Vue = (function () {
                           continue;
                       }
                   }
-                  if (value !== attrs[key]) {
+                  if (!(key in attrs) || value !== attrs[key]) {
                       attrs[key] = value;
                       hasAttrsChanged = true;
                   }
@@ -5236,7 +5240,7 @@ var Vue = (function () {
               return vm;
           }
       }
-      Vue.version = "3.2.21";
+      Vue.version = "3.2.25";
       Vue.config = singletonApp.config;
       Vue.use = (p, ...options) => {
           if (p && isFunction(p.install)) {
@@ -5587,7 +5591,7 @@ var Vue = (function () {
   ];
   const patched = new WeakSet();
   function defineReactive(obj, key, val) {
-      // it's possible for the orignial object to be mutated after being defined
+      // it's possible for the original object to be mutated after being defined
       // and expecting reactivity... we are covering it here because this seems to
       // be a bit more common.
       if (isObject(val) && !isReactive(val) && !patched.has(val)) {
@@ -5807,6 +5811,102 @@ var Vue = (function () {
       };
   }
 
+  /**
+   * Function for handling a template ref
+   */
+  function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
+      if (isArray(rawRef)) {
+          rawRef.forEach((r, i) => setRef(r, oldRawRef && (isArray(oldRawRef) ? oldRawRef[i] : oldRawRef), parentSuspense, vnode, isUnmount));
+          return;
+      }
+      if (isAsyncWrapper(vnode) && !isUnmount) {
+          // when mounting async components, nothing needs to be done,
+          // because the template ref is forwarded to inner component
+          return;
+      }
+      const refValue = vnode.shapeFlag & 4 /* STATEFUL_COMPONENT */
+          ? getExposeProxy(vnode.component) || vnode.component.proxy
+          : vnode.el;
+      const value = isUnmount ? null : refValue;
+      const { i: owner, r: ref } = rawRef;
+      if (!owner) {
+          warn$1(`Missing ref owner context. ref cannot be used on hoisted vnodes. ` +
+              `A vnode with ref must be created inside the render function.`);
+          return;
+      }
+      const oldRef = oldRawRef && oldRawRef.r;
+      const refs = owner.refs === EMPTY_OBJ ? (owner.refs = {}) : owner.refs;
+      const setupState = owner.setupState;
+      // dynamic ref changed. unset old ref
+      if (oldRef != null && oldRef !== ref) {
+          if (isString(oldRef)) {
+              refs[oldRef] = null;
+              if (hasOwn(setupState, oldRef)) {
+                  setupState[oldRef] = null;
+              }
+          }
+          else if (isRef(oldRef)) {
+              oldRef.value = null;
+          }
+      }
+      if (isFunction(ref)) {
+          callWithErrorHandling(ref, owner, 12 /* FUNCTION_REF */, [value, refs]);
+      }
+      else {
+          const _isString = isString(ref);
+          const _isRef = isRef(ref);
+          if (_isString || _isRef) {
+              const doSet = () => {
+                  if (rawRef.f) {
+                      const existing = _isString ? refs[ref] : ref.value;
+                      if (isUnmount) {
+                          isArray(existing) && remove(existing, refValue);
+                      }
+                      else {
+                          if (!isArray(existing)) {
+                              if (_isString) {
+                                  refs[ref] = [refValue];
+                              }
+                              else {
+                                  ref.value = [refValue];
+                                  if (rawRef.k)
+                                      refs[rawRef.k] = ref.value;
+                              }
+                          }
+                          else if (!existing.includes(refValue)) {
+                              existing.push(refValue);
+                          }
+                      }
+                  }
+                  else if (_isString) {
+                      refs[ref] = value;
+                      if (hasOwn(setupState, ref)) {
+                          setupState[ref] = value;
+                      }
+                  }
+                  else if (isRef(ref)) {
+                      ref.value = value;
+                      if (rawRef.k)
+                          refs[rawRef.k] = value;
+                  }
+                  else {
+                      warn$1('Invalid template ref type:', ref, `(${typeof ref})`);
+                  }
+              };
+              if (value) {
+                  doSet.id = -1;
+                  queuePostRenderEffect(doSet, parentSuspense);
+              }
+              else {
+                  doSet();
+              }
+          }
+          else {
+              warn$1('Invalid template ref type:', ref, `(${typeof ref})`);
+          }
+      }
+  }
+
   let hasMismatch = false;
   const isSVGContainer = (container) => /svg/.test(container.namespaceURI) && container.tagName !== 'foreignObject';
   const isComment = (node) => node.nodeType === 8 /* COMMENT */;
@@ -6168,44 +6268,6 @@ var Vue = (function () {
       return supported;
   }
 
-  function convertLegacyRefInFor(vnode) {
-      // refInFor
-      if (vnode.props && vnode.props.refInFor) {
-          delete vnode.props.refInFor;
-          if (vnode.ref) {
-              if (isArray(vnode.ref)) {
-                  vnode.ref.forEach(r => (r.f = true));
-              }
-              else {
-                  vnode.ref.f = true;
-              }
-          }
-      }
-  }
-  function registerLegacyRef(refs, key, value, owner, isInFor, isUnmount) {
-      const existing = refs[key];
-      if (isUnmount) {
-          if (isArray(existing)) {
-              remove(existing, value);
-          }
-          else {
-              refs[key] = null;
-          }
-      }
-      else if (isInFor) {
-          warnDeprecation("V_FOR_REF" /* V_FOR_REF */, owner);
-          if (!isArray(existing)) {
-              refs[key] = [value];
-          }
-          else if (!existing.includes(value)) {
-              existing.push(value);
-          }
-      }
-      else {
-          refs[key] = value;
-      }
-  }
-
   const queuePostRenderEffect = queueEffectWithSuspense
       ;
   /**
@@ -6477,12 +6539,15 @@ var Vue = (function () {
           const oldProps = n1.props || EMPTY_OBJ;
           const newProps = n2.props || EMPTY_OBJ;
           let vnodeHook;
+          // disable recurse in beforeUpdate hooks
+          parentComponent && toggleRecurse(parentComponent, false);
           if ((vnodeHook = newProps.onVnodeBeforeUpdate)) {
               invokeVNodeHook(vnodeHook, parentComponent, n2, n1);
           }
           if (dirs) {
               invokeDirectiveHook(n2, n1, parentComponent, 'beforeUpdate');
           }
+          parentComponent && toggleRecurse(parentComponent, true);
           if (isHmrUpdating) {
               // HMR updated, force full diff
               patchFlag = 0;
@@ -6766,7 +6831,7 @@ var Vue = (function () {
                   const { el, props } = initialVNode;
                   const { bm, m, parent } = instance;
                   const isAsyncWrapperVNode = isAsyncWrapper(initialVNode);
-                  effect.allowRecurse = false;
+                  toggleRecurse(instance, false);
                   // beforeMount hook
                   if (bm) {
                       invokeArrayFns(bm);
@@ -6779,7 +6844,7 @@ var Vue = (function () {
                   if (isCompatEnabled("INSTANCE_EVENT_HOOKS" /* INSTANCE_EVENT_HOOKS */, instance)) {
                       instance.emit('hook:beforeMount');
                   }
-                  effect.allowRecurse = true;
+                  toggleRecurse(instance, true);
                   if (el && hydrateNode) {
                       // vnode has adopted host node - perform hydration instead of mount.
                       const hydrateSubTree = () => {
@@ -6867,7 +6932,7 @@ var Vue = (function () {
                       pushWarningContext(next || instance.vnode);
                   }
                   // Disallow component effect recursion during pre-lifecycle hooks.
-                  effect.allowRecurse = false;
+                  toggleRecurse(instance, false);
                   if (next) {
                       next.el = vnode.el;
                       updateComponentPreRender(instance, next, optimized);
@@ -6886,7 +6951,7 @@ var Vue = (function () {
                   if (isCompatEnabled("INSTANCE_EVENT_HOOKS" /* INSTANCE_EVENT_HOOKS */, instance)) {
                       instance.emit('hook:beforeUpdate');
                   }
-                  effect.allowRecurse = true;
+                  toggleRecurse(instance, true);
                   // render
                   {
                       startMeasure(instance, `render`);
@@ -6935,13 +7000,13 @@ var Vue = (function () {
               }
           };
           // create reactive effect for rendering
-          const effect = new ReactiveEffect(componentUpdateFn, () => queueJob(instance.update), instance.scope // track it in component's effect scope
-          );
+          const effect = (instance.effect = new ReactiveEffect(componentUpdateFn, () => queueJob(instance.update), instance.scope // track it in component's effect scope
+          ));
           const update = (instance.update = effect.run.bind(effect));
           update.id = instance.uid;
           // allowRecurse
           // #1801, #2043 component render effects should allow recursive updates
-          effect.allowRecurse = update.allowRecurse = true;
+          toggleRecurse(instance, true);
           {
               effect.onTrack = instance.rtc
                   ? e => invokeArrayFns(instance.rtc, e)
@@ -7471,88 +7536,8 @@ var Vue = (function () {
           createApp: createAppAPI(render, hydrate)
       };
   }
-  function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
-      if (isArray(rawRef)) {
-          rawRef.forEach((r, i) => setRef(r, oldRawRef && (isArray(oldRawRef) ? oldRawRef[i] : oldRawRef), parentSuspense, vnode, isUnmount));
-          return;
-      }
-      if (isAsyncWrapper(vnode) && !isUnmount) {
-          // when mounting async components, nothing needs to be done,
-          // because the template ref is forwarded to inner component
-          return;
-      }
-      const refValue = vnode.shapeFlag & 4 /* STATEFUL_COMPONENT */
-          ? getExposeProxy(vnode.component) || vnode.component.proxy
-          : vnode.el;
-      const value = isUnmount ? null : refValue;
-      const { i: owner, r: ref } = rawRef;
-      if (!owner) {
-          warn$1(`Missing ref owner context. ref cannot be used on hoisted vnodes. ` +
-              `A vnode with ref must be created inside the render function.`);
-          return;
-      }
-      const oldRef = oldRawRef && oldRawRef.r;
-      const refs = owner.refs === EMPTY_OBJ ? (owner.refs = {}) : owner.refs;
-      const setupState = owner.setupState;
-      // dynamic ref changed. unset old ref
-      if (oldRef != null && oldRef !== ref) {
-          if (isString(oldRef)) {
-              refs[oldRef] = null;
-              if (hasOwn(setupState, oldRef)) {
-                  setupState[oldRef] = null;
-              }
-          }
-          else if (isRef(oldRef)) {
-              oldRef.value = null;
-          }
-      }
-      if (isString(ref)) {
-          const doSet = () => {
-              if (isCompatEnabled("V_FOR_REF" /* V_FOR_REF */, owner)) {
-                  registerLegacyRef(refs, ref, refValue, owner, rawRef.f, isUnmount);
-              }
-              else {
-                  refs[ref] = value;
-              }
-              if (hasOwn(setupState, ref)) {
-                  setupState[ref] = value;
-              }
-          };
-          // #1789: for non-null values, set them after render
-          // null values means this is unmount and it should not overwrite another
-          // ref with the same key
-          if (value) {
-              doSet.id = -1;
-              queuePostRenderEffect(doSet, parentSuspense);
-          }
-          else {
-              doSet();
-          }
-      }
-      else if (isRef(ref)) {
-          const doSet = () => {
-              ref.value = value;
-          };
-          if (value) {
-              doSet.id = -1;
-              queuePostRenderEffect(doSet, parentSuspense);
-          }
-          else {
-              doSet();
-          }
-      }
-      else if (isFunction(ref)) {
-          callWithErrorHandling(ref, owner, 12 /* FUNCTION_REF */, [value, refs]);
-      }
-      else {
-          warn$1('Invalid template ref type:', value, `(${typeof value})`);
-      }
-  }
-  function invokeVNodeHook(hook, instance, vnode, prevVNode = null) {
-      callWithAsyncErrorHandling(hook, instance, 7 /* VNODE_HOOK */, [
-          vnode,
-          prevVNode
-      ]);
+  function toggleRecurse({ effect, update }, allowed) {
+      effect.allowRecurse = update.allowRecurse = allowed;
   }
   /**
    * #1156
@@ -7562,8 +7547,8 @@ var Vue = (function () {
    *
    * #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;
@@ -8201,6 +8186,7 @@ var Vue = (function () {
       };
       Func.props = comp.props;
       Func.displayName = comp.name;
+      Func.compatConfig = comp.compatConfig;
       // v2 functional components do not inherit attrs
       Func.inheritAttrs = false;
       normalizedFunctionalComponentMap.set(comp, Func);
@@ -8346,10 +8332,10 @@ var Vue = (function () {
   };
   const InternalObjectKey = `__vInternal`;
   const normalizeKey = ({ key }) => key != null ? key : null;
-  const normalizeRef = ({ ref }) => {
+  const normalizeRef = ({ ref, ref_key, ref_for }) => {
       return (ref != null
           ? isString(ref) || isRef(ref) || isFunction(ref)
-              ? { i: currentRenderingInstance, r: ref }
+              ? { i: currentRenderingInstance, r: ref, k: ref_key, f: !!ref_for }
               : ref
           : null);
   };
@@ -8417,7 +8403,6 @@ var Vue = (function () {
       }
       {
           convertLegacyVModelProps(vnode);
-          convertLegacyRefInFor(vnode);
           defineLegacyVNodeProperties(vnode);
       }
       return vnode;
@@ -8690,7 +8675,8 @@ var Vue = (function () {
               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;
@@ -8702,6 +8688,12 @@ var Vue = (function () {
           }
       }
       return ret;
+  }
+  function invokeVNodeHook(hook, instance, vnode, prevVNode = null) {
+      callWithAsyncErrorHandling(hook, instance, 7 /* VNODE_HOOK */, [
+          vnode,
+          prevVNode
+      ]);
   }
 
   function getCompatChildren(instance) {
@@ -9134,23 +9126,23 @@ var Vue = (function () {
               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 (
@@ -9158,15 +9150,15 @@ var Vue = (function () {
               // 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];
@@ -9187,7 +9179,7 @@ var Vue = (function () {
           }
           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 (
@@ -9255,7 +9247,7 @@ var Vue = (function () {
       },
       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)) ||
@@ -9361,6 +9353,7 @@ var Vue = (function () {
           root: null,
           next: null,
           subTree: null,
+          effect: null,
           update: null,
           scope: new EffectScope(true /* detached */),
           render: null,
@@ -10825,7 +10818,7 @@ var Vue = (function () {
   }
 
   // Core API ------------------------------------------------------------------
-  const version = "3.2.21";
+  const version = "3.2.25";
   /**
    * SSR utils for \@vue/server-renderer. Only exposed in cjs builds.
    * @internal
@@ -11092,12 +11085,19 @@ var Vue = (function () {
           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) {
@@ -11493,7 +11493,7 @@ var Vue = (function () {
                   // 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;