@vue/runtime-dom 3.2.30 → 3.2.33

package/dist/runtime-dom.global.js

@@ -351,8 +351,17 @@ var VueRuntimeDOM = (function (exports) {
   let activeEffectScope;
   class EffectScope {
       constructor(detached = false) {
+          /**
+           * @internal
+           */
           this.active = true;
+          /**
+           * @internal
+           */
           this.effects = [];
+          /**
+           * @internal
+           */
           this.cleanups = [];
           if (!detached && activeEffectScope) {
               this.parent = activeEffectScope;
@@ -362,21 +371,30 @@ var VueRuntimeDOM = (function (exports) {
       }
       run(fn) {
           if (this.active) {
+              const currentEffectScope = activeEffectScope;
               try {
                   activeEffectScope = this;
                   return fn();
               }
               finally {
-                  activeEffectScope = this.parent;
+                  activeEffectScope = currentEffectScope;
               }
           }
           else {
               warn(`cannot run an inactive effect scope.`);
           }
       }
+      /**
+       * This should only be called on non-detached scopes
+       * @internal
+       */
       on() {
           activeEffectScope = this;
       }
+      /**
+       * This should only be called on non-detached scopes
+       * @internal
+       */
       off() {
           activeEffectScope = this.parent;
       }
@@ -518,10 +536,17 @@ var VueRuntimeDOM = (function (exports) {
               activeEffect = this.parent;
               shouldTrack = lastShouldTrack;
               this.parent = undefined;
+              if (this.deferStop) {
+                  this.stop();
+              }
           }
       }
       stop() {
-          if (this.active) {
+          // stopped while running itself - defer the cleanup
+          if (activeEffect === this) {
+              this.deferStop = true;
+          }
+          else if (this.active) {
               cleanupEffect(this);
               if (this.onStop) {
                   this.onStop();
@@ -600,9 +625,7 @@ var VueRuntimeDOM = (function (exports) {
           dep.add(activeEffect);
           activeEffect.deps.push(dep);
           if (activeEffect.onTrack) {
-              activeEffect.onTrack(Object.assign({
-                  effect: activeEffect
-              }, debuggerEventExtraInfo));
+              activeEffect.onTrack(Object.assign({ effect: activeEffect }, debuggerEventExtraInfo));
           }
       }
   }
@@ -698,7 +721,9 @@ var VueRuntimeDOM = (function (exports) {
   }
 
   const isNonTrackableKeys = /*#__PURE__*/ makeMap(`__proto__,__v_isRef,__isVue`);
-  const builtInSymbols = new Set(Object.getOwnPropertyNames(Symbol)
+  const builtInSymbols = new Set(
+  /*#__PURE__*/
+  Object.getOwnPropertyNames(Symbol)
       .map(key => Symbol[key])
       .filter(isSymbol));
   const get = /*#__PURE__*/ createGetter();
@@ -850,13 +875,13 @@ var VueRuntimeDOM = (function (exports) {
       get: readonlyGet,
       set(target, key) {
           {
-              console.warn(`Set operation on key "${String(key)}" failed: target is readonly.`, target);
+              warn(`Set operation on key "${String(key)}" failed: target is readonly.`, target);
           }
           return true;
       },
       deleteProperty(target, key) {
           {
-              console.warn(`Delete operation on key "${String(key)}" failed: target is readonly.`, target);
+              warn(`Delete operation on key "${String(key)}" failed: target is readonly.`, target);
           }
           return true;
       }
@@ -1684,7 +1709,7 @@ var VueRuntimeDOM = (function (exports) {
   const pendingPostFlushCbs = [];
   let activePostFlushCbs = null;
   let postFlushIndex = 0;
-  const resolvedPromise = Promise.resolve();
+  const resolvedPromise = /*#__PURE__*/ Promise.resolve();
   let currentFlushPromise = null;
   let currentPreFlushParentJob = null;
   const RECURSION_LIMIT = 100;
@@ -2099,6 +2124,8 @@ var VueRuntimeDOM = (function (exports) {
   }
 
   function emit$1(instance, event, ...rawArgs) {
+      if (instance.isUnmounted)
+          return;
       const props = instance.vnode.props || EMPTY_OBJ;
       {
           const { emitsOptions, propsOptions: [propsOptions] } = instance;
@@ -3086,12 +3113,10 @@ var VueRuntimeDOM = (function (exports) {
       return doWatch(effect, null, options);
   }
   function watchPostEffect(effect, options) {
-      return doWatch(effect, null, (Object.assign(options || {}, { flush: 'post' })
-          ));
+      return doWatch(effect, null, (Object.assign(Object.assign({}, options), { flush: 'post' }) ));
   }
   function watchSyncEffect(effect, options) {
-      return doWatch(effect, null, (Object.assign(options || {}, { flush: 'sync' })
-          ));
+      return doWatch(effect, null, (Object.assign(Object.assign({}, options), { flush: 'sync' }) ));
   }
   // initial value for watchers to trigger on undefined initial values
   const INITIAL_WATCHER_VALUE = {};
@@ -3377,10 +3402,22 @@ var VueRuntimeDOM = (function (exports) {
               if (!children || !children.length) {
                   return;
               }
-              // warn multiple elements
+              let child = children[0];
               if (children.length > 1) {
-                  warn$1('<transition> can only be used on a single element or component. Use ' +
-                      '<transition-group> for lists.');
+                  let hasFound = false;
+                  // locate first non-comment child
+                  for (const c of children) {
+                      if (c.type !== Comment) {
+                          if (hasFound) {
+                              // warn more than one non-comment child
+                              warn$1('<transition> can only be used on a single element or component. ' +
+                                  'Use <transition-group> for lists.');
+                              break;
+                          }
+                          child = c;
+                          hasFound = true;
+                      }
+                  }
               }
               // there's no need to track reactivity for these props so use the raw
               // props for a bit better perf
@@ -3388,11 +3425,11 @@ var VueRuntimeDOM = (function (exports) {
               const { mode } = rawProps;
               // check mode
               if (mode &&
-                  mode !== 'in-out' && mode !== 'out-in' && mode !== 'default') {
+                  mode !== 'in-out' &&
+                  mode !== 'out-in' &&
+                  mode !== 'default') {
                   warn$1(`invalid <transition> mode: ${mode}`);
               }
-              // at this point children has a guaranteed length of 1.
-              const child = children[0];
               if (state.isLeaving) {
                   return emptyPlaceholder(child);
               }
@@ -3615,20 +3652,24 @@ var VueRuntimeDOM = (function (exports) {
           vnode.transition = hooks;
       }
   }
-  function getTransitionRawChildren(children, keepComment = false) {
+  function getTransitionRawChildren(children, keepComment = false, parentKey) {
       let ret = [];
       let keyedFragmentCount = 0;
       for (let i = 0; i < children.length; i++) {
-          const child = children[i];
+          let child = children[i];
+          // #5360 inherit parent key in case of <template v-for>
+          const key = parentKey == null
+              ? child.key
+              : String(parentKey) + String(child.key != null ? child.key : i);
           // handle fragment children case, e.g. v-for
           if (child.type === Fragment) {
               if (child.patchFlag & 128 /* KEYED_FRAGMENT */)
                   keyedFragmentCount++;
-              ret = ret.concat(getTransitionRawChildren(child.children, keepComment));
+              ret = ret.concat(getTransitionRawChildren(child.children, keepComment, key));
           }
           // comment placeholders should be skipped, e.g. v-if
           else if (keepComment || child.type !== Comment) {
-              ret.push(child);
+              ret.push(key != null ? cloneVNode(child, { key }) : child);
           }
       }
       // #1126 if a transition children list contains multiple sub fragments, these
@@ -4594,6 +4635,10 @@ var VueRuntimeDOM = (function (exports) {
               const propsToUpdate = instance.vnode.dynamicProps;
               for (let i = 0; i < propsToUpdate.length; i++) {
                   let key = propsToUpdate[i];
+                  // skip if the prop key is a declared emit event listener
+                  if (isEmitListener(instance.emitsOptions, key)) {
+                      continue;
+                  }
                   // PROPS flag guarantees rawProps to be non-null
                   const value = rawProps[key];
                   if (options) {
@@ -5118,7 +5163,8 @@ var VueRuntimeDOM = (function (exports) {
           warn$1(`withDirectives can only be used inside render functions.`);
           return vnode;
       }
-      const instance = internalInstance.proxy;
+      const instance = getExposeProxy(internalInstance) ||
+          internalInstance.proxy;
       const bindings = vnode.dirs || (vnode.dirs = []);
       for (let i = 0; i < directives.length; i++) {
           let [dir, value, arg, modifiers = EMPTY_OBJ] = directives[i];
@@ -5190,6 +5236,9 @@ var VueRuntimeDOM = (function (exports) {
   let uid = 0;
   function createAppAPI(render, hydrate) {
       return function createApp(rootComponent, rootProps = null) {
+          if (!isFunction(rootComponent)) {
+              rootComponent = Object.assign({}, rootComponent);
+          }
           if (rootProps != null && !isObject(rootProps)) {
               warn$1(`root props passed to app.mount() must be an object.`);
               rootProps = null;
@@ -5386,6 +5435,9 @@ var VueRuntimeDOM = (function (exports) {
                           if (!isArray(existing)) {
                               if (_isString) {
                                   refs[ref] = [refValue];
+                                  if (hasOwn(setupState, ref)) {
+                                      setupState[ref] = refs[ref];
+                                  }
                               }
                               else {
                                   ref.value = [refValue];
@@ -5584,7 +5636,8 @@ var VueRuntimeDOM = (function (exports) {
           // e.g. <option :value="obj">, <input type="checkbox" :true-value="1">
           const forcePatchValue = (type === 'input' && dirs) || type === 'option';
           // skip props & children if this is hoisted static nodes
-          if (forcePatchValue || patchFlag !== -1 /* HOISTED */) {
+          // #5405 in dev, always hydrate children for HMR
+          {
               if (dirs) {
                   invokeDirectiveHook(vnode, null, parentComponent, 'created');
               }
@@ -5757,7 +5810,7 @@ var VueRuntimeDOM = (function (exports) {
           perf.mark(`vue-${type}-${instance.uid}`);
       }
       {
-          devtoolsPerfStart(instance, type, supported ? perf.now() : Date.now());
+          devtoolsPerfStart(instance, type, isSupported() ? perf.now() : Date.now());
       }
   }
   function endMeasure(instance, type) {
@@ -5770,7 +5823,7 @@ var VueRuntimeDOM = (function (exports) {
           perf.clearMarks(endTag);
       }
       {
-          devtoolsPerfEnd(instance, type, supported ? perf.now() : Date.now());
+          devtoolsPerfEnd(instance, type, isSupported() ? perf.now() : Date.now());
       }
   }
   function isSupported() {
@@ -6898,7 +6951,22 @@ var VueRuntimeDOM = (function (exports) {
       const remove = vnode => {
           const { type, el, anchor, transition } = vnode;
           if (type === Fragment) {
-              removeFragment(el, anchor);
+              if (vnode.patchFlag > 0 &&
+                  vnode.patchFlag & 2048 /* DEV_ROOT_FRAGMENT */ &&
+                  transition &&
+                  !transition.persisted) {
+                  vnode.children.forEach(child => {
+                      if (child.type === Comment) {
+                          hostRemove(child.el);
+                      }
+                      else {
+                          remove(child);
+                      }
+                  });
+              }
+              else {
+                  removeFragment(el, anchor);
+              }
               return;
           }
           if (type === Static) {
@@ -7917,7 +7985,10 @@ var VueRuntimeDOM = (function (exports) {
   // this is not a user-facing function, so the fallback is always generated by
   // the compiler and guaranteed to be a function returning an array
   fallback, noSlotted) {
-      if (currentRenderingInstance.isCE) {
+      if (currentRenderingInstance.isCE ||
+          (currentRenderingInstance.parent &&
+              isAsyncWrapper(currentRenderingInstance.parent) &&
+              currentRenderingInstance.parent.isCE)) {
           return createVNode('slot', name === 'default' ? null : { name }, fallback && fallback());
       }
       let slot = slots[name];
@@ -7990,7 +8061,10 @@ var VueRuntimeDOM = (function (exports) {
           return getExposeProxy(i) || i.proxy;
       return getPublicInstance(i.parent);
   };
-  const publicPropertiesMap = extend(Object.create(null), {
+  const publicPropertiesMap = 
+  // Move PURE marker to new line to workaround compiler discarding it
+  // due to type annotation
+  /*#__PURE__*/ extend(Object.create(null), {
       $: i => i,
       $el: i => i.vnode.el,
       $data: i => i.data,
@@ -8118,9 +8192,11 @@ var VueRuntimeDOM = (function (exports) {
           const { data, setupState, ctx } = instance;
           if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) {
               setupState[key] = value;
+              return true;
           }
           else if (data !== EMPTY_OBJ && hasOwn(data, key)) {
               data[key] = value;
+              return true;
           }
           else if (hasOwn(instance.props, key)) {
               warn$1(`Attempting to mutate prop "${key}". Props are readonly.`, instance);
@@ -8154,6 +8230,16 @@ var VueRuntimeDOM = (function (exports) {
               hasOwn(ctx, key) ||
               hasOwn(publicPropertiesMap, key) ||
               hasOwn(appContext.config.globalProperties, key));
+      },
+      defineProperty(target, key, descriptor) {
+          if (descriptor.get != null) {
+              // invalidate key cache of a getter based property #5417
+              target._.accessCache[key] = 0;
+          }
+          else if (hasOwn(descriptor, 'value')) {
+              this.set(target, key, descriptor.value, null);
+          }
+          return Reflect.defineProperty(target, key, descriptor);
       }
   };
   {
@@ -8356,6 +8442,7 @@ var VueRuntimeDOM = (function (exports) {
       return setupResult;
   }
   function setupStatefulComponent(instance, isSSR) {
+      var _a;
       const Component = instance.type;
       {
           if (Component.name) {
@@ -8413,6 +8500,13 @@ var VueRuntimeDOM = (function (exports) {
                   // async setup returned Promise.
                   // bail here and wait for re-entry.
                   instance.asyncDep = setupResult;
+                  if (!instance.suspense) {
+                      const name = (_a = Component.name) !== null && _a !== void 0 ? _a : 'Anonymous';
+                      warn$1(`Component <${name}>: setup function returned a promise, but no ` +
+                          `<Suspense> boundary was found in the parent component tree. ` +
+                          `A component with async setup() must be nested in a <Suspense> ` +
+                          `in order to be rendered.`);
+                  }
               }
           }
           else {
@@ -9024,7 +9118,7 @@ var VueRuntimeDOM = (function (exports) {
   }
 
   // Core API ------------------------------------------------------------------
-  const version = "3.2.30";
+  const version = "3.2.33";
   /**
    * SSR utils for \@vue/server-renderer. Only exposed in cjs builds.
    * @internal
@@ -9041,7 +9135,7 @@ var VueRuntimeDOM = (function (exports) {
 
   const svgNS = 'http://www.w3.org/2000/svg';
   const doc = (typeof document !== 'undefined' ? document : null);
-  const templateContainer = doc && doc.createElement('template');
+  const templateContainer = doc && /*#__PURE__*/ doc.createElement('template');
   const nodeOps = {
       insert: (child, parent, anchor) => {
           parent.insertBefore(child, anchor || null);
@@ -9192,6 +9286,8 @@ var VueRuntimeDOM = (function (exports) {
           val.forEach(v => setStyle(style, name, v));
       }
       else {
+          if (val == null)
+              val = '';
           if (name.startsWith('--')) {
               // custom property definition
               style.setProperty(name, val);
@@ -9286,31 +9382,28 @@ var VueRuntimeDOM = (function (exports) {
           }
           return;
       }
+      let needRemove = false;
       if (value === '' || value == null) {
           const type = typeof el[key];
           if (type === 'boolean') {
               // e.g. <select multiple> compiles to { multiple: '' }
-              el[key] = includeBooleanAttr(value);
-              return;
+              value = includeBooleanAttr(value);
           }
           else if (value == null && type === 'string') {
               // e.g. <div :id="null">
-              el[key] = '';
-              el.removeAttribute(key);
-              return;
+              value = '';
+              needRemove = true;
           }
           else if (type === 'number') {
               // e.g. <img :width="null">
               // the value of some IDL attr must be greater than 0, e.g. input.size = 0 -> error
-              try {
-                  el[key] = 0;
-              }
-              catch (_a) { }
-              el.removeAttribute(key);
-              return;
+              value = 0;
+              needRemove = true;
           }
       }
-      // some properties perform value validation and throw
+      // some properties perform value validation and throw,
+      // some properties has getter, no setter, will error in 'use strict'
+      // eg. <select :type="null"></select> <select :willValidate="null"></select>
       try {
           el[key] = value;
       }
@@ -9320,31 +9413,35 @@ var VueRuntimeDOM = (function (exports) {
                   `value ${value} is invalid.`, e);
           }
       }
+      needRemove && el.removeAttribute(key);
   }
 
   // Async edge case fix requires storing an event listener's attach timestamp.
-  let _getNow = Date.now;
-  let skipTimestampCheck = false;
-  if (typeof window !== 'undefined') {
-      // Determine what event timestamp the browser is using. Annoyingly, the
-      // timestamp can either be hi-res (relative to page load) or low-res
-      // (relative to UNIX epoch), so in order to compare time we have to use the
-      // same timestamp type when saving the flush timestamp.
-      if (_getNow() > document.createEvent('Event').timeStamp) {
-          // if the low-res timestamp which is bigger than the event timestamp
-          // (which is evaluated AFTER) it means the event is using a hi-res timestamp,
-          // and we need to use the hi-res version for event listeners as well.
-          _getNow = () => performance.now();
-      }
-      // #3485: Firefox <= 53 has incorrect Event.timeStamp implementation
-      // and does not fire microtasks in between event propagation, so safe to exclude.
-      const ffMatch = navigator.userAgent.match(/firefox\/(\d+)/i);
-      skipTimestampCheck = !!(ffMatch && Number(ffMatch[1]) <= 53);
-  }
+  const [_getNow, skipTimestampCheck] = /*#__PURE__*/ (() => {
+      let _getNow = Date.now;
+      let skipTimestampCheck = false;
+      if (typeof window !== 'undefined') {
+          // Determine what event timestamp the browser is using. Annoyingly, the
+          // timestamp can either be hi-res (relative to page load) or low-res
+          // (relative to UNIX epoch), so in order to compare time we have to use the
+          // same timestamp type when saving the flush timestamp.
+          if (Date.now() > document.createEvent('Event').timeStamp) {
+              // if the low-res timestamp which is bigger than the event timestamp
+              // (which is evaluated AFTER) it means the event is using a hi-res timestamp,
+              // and we need to use the hi-res version for event listeners as well.
+              _getNow = () => performance.now();
+          }
+          // #3485: Firefox <= 53 has incorrect Event.timeStamp implementation
+          // and does not fire microtasks in between event propagation, so safe to exclude.
+          const ffMatch = navigator.userAgent.match(/firefox\/(\d+)/i);
+          skipTimestampCheck = !!(ffMatch && Number(ffMatch[1]) <= 53);
+      }
+      return [_getNow, skipTimestampCheck];
+  })();
   // To avoid the overhead of repeatedly calling performance.now(), we cache
   // and use the same timestamp for all event listeners attached in the same tick.
   let cachedNow = 0;
-  const p = Promise.resolve();
+  const p = /*#__PURE__*/ Promise.resolve();
   const reset = () => {
       cachedNow = 0;
   };
@@ -9469,13 +9566,13 @@ var VueRuntimeDOM = (function (exports) {
           }
           return false;
       }
-      // spellcheck and draggable are numerated attrs, however their
-      // corresponding DOM properties are actually booleans - this leads to
-      // setting it with a string "false" value leading it to be coerced to
-      // `true`, so we need to always treat them as attributes.
+      // these are enumerated attrs, however their corresponding DOM properties
+      // are actually booleans - this leads to setting it with a string "false"
+      // value leading it to be coerced to `true`, so we need to always treat
+      // them as attributes.
       // Note that `contentEditable` doesn't have this problem: its DOM
       // property is also enumerated string values.
-      if (key === 'spellcheck' || key === 'draggable') {
+      if (key === 'spellcheck' || key === 'draggable' || key === 'translate') {
           return false;
       }
       // #1787, #2840 form property on form elements is readonly and must be set as
@@ -10530,7 +10627,7 @@ var VueRuntimeDOM = (function (exports) {
       el.style.display = value ? el._vod : 'none';
   }
 
-  const rendererOptions = extend({ patchProp }, nodeOps);
+  const rendererOptions = /*#__PURE__*/ extend({ patchProp }, nodeOps);
   // lazy create the renderer - this makes core renderer logic tree-shakable
   // in case the user only imports reactivity utilities from Vue.
   let renderer;