vue 3.2.18 → 3.2.22

package/dist/vue.global.js

@@ -1527,19 +1527,22 @@ var Vue = (function (exports) {
       const id = instance.type.__hmrId;
       let record = map.get(id);
       if (!record) {
-          createRecord(id);
+          createRecord(id, instance.type);
           record = map.get(id);
       }
-      record.add(instance);
+      record.instances.add(instance);
   }
   function unregisterHMR(instance) {
-      map.get(instance.type.__hmrId).delete(instance);
+      map.get(instance.type.__hmrId).instances.delete(instance);
   }
-  function createRecord(id) {
+  function createRecord(id, initialDef) {
       if (map.has(id)) {
           return false;
       }
-      map.set(id, new Set());
+      map.set(id, {
+          initialDef: normalizeClassComponent(initialDef),
+          instances: new Set()
+      });
       return true;
   }
   function normalizeClassComponent(component) {
@@ -1550,7 +1553,9 @@ var Vue = (function (exports) {
       if (!record) {
           return;
       }
-      [...record].forEach(instance => {
+      // update initial record (for not-yet-rendered component)
+      record.initialDef.render = newRender;
+      [...record.instances].forEach(instance => {
           if (newRender) {
               instance.render = newRender;
               normalizeClassComponent(instance.type).render = newRender;
@@ -1567,17 +1572,16 @@ var Vue = (function (exports) {
       if (!record)
           return;
       newComp = normalizeClassComponent(newComp);
+      // update initial def (for not-yet-rendered components)
+      updateComponentDef(record.initialDef, newComp);
       // create a snapshot which avoids the set being mutated during updates
-      const instances = [...record];
+      const instances = [...record.instances];
       for (const instance of instances) {
           const oldComp = normalizeClassComponent(instance.type);
           if (!hmrDirtyComponents.has(oldComp)) {
               // 1. Update existing comp definition to match new one
-              extend(oldComp, newComp);
-              for (const key in oldComp) {
-                  if (key !== '__file' && !(key in newComp)) {
-                      delete oldComp[key];
-                  }
+              if (oldComp !== record.initialDef) {
+                  updateComponentDef(oldComp, newComp);
               }
               // 2. mark definition dirty. This forces the renderer to replace the
               // component on patch.
@@ -1623,6 +1627,14 @@ var Vue = (function (exports) {
           }
       });
   }
+  function updateComponentDef(oldComp, newComp) {
+      extend(oldComp, newComp);
+      for (const key in oldComp) {
+          if (key !== '__file' && !(key in newComp)) {
+              delete oldComp[key];
+          }
+      }
+  }
   function tryWrap(fn) {
       return (id, arg) => {
           try {
@@ -1637,27 +1649,52 @@ 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) => {
               setDevtoolsHook(newHook, target);
           });
+          // clear buffer after 3s - the user probably doesn't have devtools installed
+          // at all, and keeping the buffer will cause memory leaks (#4738)
+          setTimeout(() => {
+              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) {
@@ -4446,7 +4483,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);
@@ -6363,8 +6400,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;
@@ -7144,7 +7181,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;
@@ -8676,15 +8714,21 @@ var Vue = (function (exports) {
    * only.
    * @internal
    */
-  function mergeDefaults(
-  // the base props is compiler-generated and guaranteed to be in this shape.
-  props, defaults) {
+  function mergeDefaults(raw, defaults) {
+      const props = isArray(raw)
+          ? raw.reduce((normalized, p) => ((normalized[p] = {}), normalized), {})
+          : raw;
       for (const key in defaults) {
-          const val = props[key];
-          if (val) {
-              val.default = defaults[key];
+          const opt = props[key];
+          if (opt) {
+              if (isArray(opt) || isFunction(opt)) {
+                  props[key] = { type: opt, default: defaults[key] };
+              }
+              else {
+                  opt.default = defaults[key];
+              }
           }
-          else if (val === null) {
+          else if (opt === null) {
               props[key] = { default: defaults[key] };
           }
           else {
@@ -8693,6 +8737,23 @@ var Vue = (function (exports) {
       }
       return props;
   }
+  /**
+   * Used to create a proxy for the rest element when destructuring props with
+   * defineProps().
+   * @internal
+   */
+  function createPropsRestProxy(props, excludedKeys) {
+      const ret = {};
+      for (const key in props) {
+          if (!excludedKeys.includes(key)) {
+              Object.defineProperty(ret, key, {
+                  enumerable: true,
+                  get: () => props[key]
+              });
+          }
+      }
+      return ret;
+  }
   /**
    * `<script setup>` helper for persisting the current instance context over
    * async/await flows.
@@ -8980,7 +9041,7 @@ var Vue = (function (exports) {
   }
 
   // Core API ------------------------------------------------------------------
-  const version = "3.2.18";
+  const version = "3.2.22";
   /**
    * SSR utils for \@vue/server-renderer. Only exposed in cjs builds.
    * @internal
@@ -9102,16 +9163,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]);
           }
@@ -9123,11 +9176,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$/;
@@ -9473,22 +9537,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() {
@@ -9507,8 +9560,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) : [];
@@ -9523,14 +9586,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
@@ -9544,7 +9604,10 @@ var Vue = (function (exports) {
                       }
                   });
               }
+              // apply CSS
               this._applyStyles(styles);
+              // initial render
+              this._update();
           };
           const asyncDef = this._def.__asyncLoader;
           if (asyncDef) {
@@ -9570,10 +9633,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
@@ -11006,7 +11069,7 @@ var Vue = (function (exports) {
   const isMemberExpression = isMemberExpressionBrowser
       ;
   function getInnerRange(loc, offset, length) {
-      const source = loc.source.substr(offset, length);
+      const source = loc.source.slice(offset, offset + length);
       const newLoc = {
           source,
           start: advancePositionWithClone(loc.start, loc.source, offset),
@@ -11833,10 +11896,10 @@ var Vue = (function (exports) {
                   isStatic = false;
                   if (!content.endsWith(']')) {
                       emitError(context, 27 /* X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END */);
-                      content = content.substr(1);
+                      content = content.slice(1);
                   }
                   else {
-                      content = content.substr(1, content.length - 2);
+                      content = content.slice(1, content.length - 1);
                   }
               }
               else if (isSlot) {
@@ -11862,7 +11925,7 @@ var Vue = (function (exports) {
               valueLoc.end = advancePositionWithClone(valueLoc.start, value.content);
               valueLoc.source = valueLoc.source.slice(1, -1);
           }
-          const modifiers = match[3] ? match[3].substr(1).split('.') : [];
+          const modifiers = match[3] ? match[3].slice(1).split('.') : [];
           if (isPropShorthand)
               modifiers.push('prop');
           return {
@@ -12072,7 +12135,7 @@ var Vue = (function (exports) {
   }
   function startsWithEndTagOpen(source, tag) {
       return (startsWith(source, '</') &&
-          source.substr(2, tag.length).toLowerCase() === tag.toLowerCase() &&
+          source.slice(2, 2 + tag.length).toLowerCase() === tag.toLowerCase() &&
           /[\t\r\n\f />]/.test(source[2 + tag.length] || '>'));
   }
 
@@ -14478,7 +14541,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) => {
@@ -15469,6 +15532,7 @@ var Vue = (function (exports) {
   exports.createElementBlock = createElementBlock;
   exports.createElementVNode = createBaseVNode;
   exports.createHydrationRenderer = createHydrationRenderer;
+  exports.createPropsRestProxy = createPropsRestProxy;
   exports.createRenderer = createRenderer;
   exports.createSSRApp = createSSRApp;
   exports.createSlots = createSlots;