@vue/runtime-dom 3.4.0-alpha.1 → 3.4.0-alpha.2

package/dist/runtime-dom.global.js

@@ -2,12 +2,8 @@ var VueRuntimeDOM = (function (exports) {
   'use strict';
 
   function makeMap(str, expectsLowerCase) {
-    const map = /* @__PURE__ */ Object.create(null);
-    const list = str.split(",");
-    for (let i = 0; i < list.length; i++) {
-      map[list[i]] = true;
-    }
-    return expectsLowerCase ? (val) => !!map[val.toLowerCase()] : (val) => !!map[val];
+    const set = new Set(str.split(","));
+    return expectsLowerCase ? (val) => set.has(val.toLowerCase()) : (val) => set.has(val);
   }
 
   const EMPTY_OBJ = Object.freeze({}) ;
@@ -964,7 +960,7 @@ var VueRuntimeDOM = (function (exports) {
           toRaw(this)
         );
       }
-      return type === "delete" ? false : this;
+      return type === "delete" ? false : type === "clear" ? void 0 : this;
     };
   }
   function createInstrumentations() {
@@ -1220,9 +1216,10 @@ var VueRuntimeDOM = (function (exports) {
       this.dep = void 0;
       this.__v_isRef = true;
       this["__v_isReadonly"] = false;
-      this.effect = new ReactiveEffect(getter, () => {
-        triggerRefValue(this, 1);
-      });
+      this.effect = new ReactiveEffect(
+        () => getter(this._value),
+        () => triggerRefValue(this, 1)
+      );
       this.effect.computed = this;
       this.effect.active = this._cacheable = !isSSR;
       this["__v_isReadonly"] = isReadonly;
@@ -2249,9 +2246,19 @@ var VueRuntimeDOM = (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,
@@ -2486,6 +2493,61 @@ var VueRuntimeDOM = (function (exports) {
     }
   }
 
+  const COMPONENTS = "components";
+  const DIRECTIVES = "directives";
+  function resolveComponent(name, maybeSelfReference) {
+    return resolveAsset(COMPONENTS, name, true, maybeSelfReference) || name;
+  }
+  const NULL_DYNAMIC_COMPONENT = Symbol.for("v-ndc");
+  function resolveDynamicComponent(component) {
+    if (isString(component)) {
+      return resolveAsset(COMPONENTS, component, false) || component;
+    } else {
+      return component || NULL_DYNAMIC_COMPONENT;
+    }
+  }
+  function resolveDirective(name) {
+    return resolveAsset(DIRECTIVES, name);
+  }
+  function resolveAsset(type, name, warnMissing = true, maybeSelfReference = false) {
+    const instance = currentRenderingInstance || currentInstance;
+    if (instance) {
+      const Component = instance.type;
+      if (type === COMPONENTS) {
+        const selfName = getComponentName(
+          Component,
+          false
+          /* do not include inferred name to avoid breaking existing code */
+        );
+        if (selfName && (selfName === name || selfName === camelize(name) || selfName === capitalize(camelize(name)))) {
+          return Component;
+        }
+      }
+      const res = (
+        // local registration
+        // check instance[type] first which is resolved for options API
+        resolve(instance[type] || Component[type], name) || // global registration
+        resolve(instance.appContext[type], name)
+      );
+      if (!res && maybeSelfReference) {
+        return Component;
+      }
+      if (warnMissing && !res) {
+        const extra = type === COMPONENTS ? `
+If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.` : ``;
+        warn(`Failed to resolve ${type.slice(0, -1)}: ${name}${extra}`);
+      }
+      return res;
+    } else {
+      warn(
+        `resolve${capitalize(type.slice(0, -1))} can only be used in render() or setup().`
+      );
+    }
+  }
+  function resolve(registry, name) {
+    return registry && (registry[name] || registry[camelize(name)] || registry[capitalize(camelize(name))]);
+  }
+
   const isSuspense = (type) => type.__isSuspense;
   const SuspenseImpl = {
     name: "Suspense",
@@ -3020,7 +3082,7 @@ var VueRuntimeDOM = (function (exports) {
     }
     if (isArray(s)) {
       const singleChild = filterSingleRoot(s);
-      if (!singleChild) {
+      if (!singleChild && s.filter((child) => child !== NULL_DYNAMIC_COMPONENT).length > 0) {
         warn(`<Suspense> slots expect a single root node.`);
       }
       s = singleChild;
@@ -3170,6 +3232,7 @@ var VueRuntimeDOM = (function (exports) {
     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;
@@ -3641,7 +3704,11 @@ var VueRuntimeDOM = (function (exports) {
     }
   }
   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) {
@@ -4119,61 +4186,6 @@ var VueRuntimeDOM = (function (exports) {
     injectHook("ec", hook, target);
   }
 
-  const COMPONENTS = "components";
-  const DIRECTIVES = "directives";
-  function resolveComponent(name, maybeSelfReference) {
-    return resolveAsset(COMPONENTS, name, true, maybeSelfReference) || name;
-  }
-  const NULL_DYNAMIC_COMPONENT = Symbol.for("v-ndc");
-  function resolveDynamicComponent(component) {
-    if (isString(component)) {
-      return resolveAsset(COMPONENTS, component, false) || component;
-    } else {
-      return component || NULL_DYNAMIC_COMPONENT;
-    }
-  }
-  function resolveDirective(name) {
-    return resolveAsset(DIRECTIVES, name);
-  }
-  function resolveAsset(type, name, warnMissing = true, maybeSelfReference = false) {
-    const instance = currentRenderingInstance || currentInstance;
-    if (instance) {
-      const Component = instance.type;
-      if (type === COMPONENTS) {
-        const selfName = getComponentName(
-          Component,
-          false
-          /* do not include inferred name to avoid breaking existing code */
-        );
-        if (selfName && (selfName === name || selfName === camelize(name) || selfName === capitalize(camelize(name)))) {
-          return Component;
-        }
-      }
-      const res = (
-        // local registration
-        // check instance[type] first which is resolved for options API
-        resolve(instance[type] || Component[type], name) || // global registration
-        resolve(instance.appContext[type], name)
-      );
-      if (!res && maybeSelfReference) {
-        return Component;
-      }
-      if (warnMissing && !res) {
-        const extra = type === COMPONENTS ? `
-If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.` : ``;
-        warn(`Failed to resolve ${type.slice(0, -1)}: ${name}${extra}`);
-      }
-      return res;
-    } else {
-      warn(
-        `resolve${capitalize(type.slice(0, -1))} can only be used in render() or setup().`
-      );
-    }
-  }
-  function resolve(registry, name) {
-    return registry && (registry[name] || registry[camelize(name)] || registry[capitalize(camelize(name))]);
-  }
-
   function renderList(source, renderItem, cache, index) {
     let ret;
     const cached = cache && cache[index];
@@ -5693,6 +5705,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);
@@ -5962,6 +5977,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;
@@ -5992,15 +6021,15 @@ If you want to remount the same app, move your app creation logic into a factory
           }
           break;
         case Comment:
-          if (domType !== 8 /* COMMENT */ || isFragmentStart) {
-            if (node.tagName.toLowerCase() === "template") {
-              const content = vnode.el.content.firstChild;
-              replaceNode(content, node, parentComponent);
-              vnode.el = node = content;
-              nextNode = nextSibling(node);
-            } else {
-              nextNode = onMismatch();
-            }
+          if (isTemplateNode(node)) {
+            nextNode = nextSibling(node);
+            replaceNode(
+              vnode.el = node.content.firstChild,
+              node,
+              parentComponent
+            );
+          } else if (domType !== 8 /* COMMENT */ || isFragmentStart) {
+            nextNode = onMismatch();
           } else {
             nextNode = nextSibling(node);
           }
@@ -6123,15 +6152,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,
@@ -6344,8 +6374,7 @@ If you want to remount the same app, move your app creation logic into a factory
       let parent = parentComponent;
       while (parent) {
         if (parent.vnode.el === oldNode) {
-          parent.vnode.el = newNode;
-          parent.subTree.el = newNode;
+          parent.vnode.el = parent.subTree.el = newNode;
         }
         parent = parent.parent;
       }
@@ -7895,6 +7924,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 {
@@ -8316,7 +8346,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
@@ -9131,7 +9161,7 @@ Component that was made reactive: `,
     return true;
   }
 
-  const version = "3.4.0-alpha.1";
+  const version = "3.4.0-alpha.2";
   const ErrorTypeStrings = ErrorTypeStrings$1 ;
   const ssrUtils = null;
   const resolveFilter = null;
@@ -10265,21 +10295,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) {
-          return;
-        }
-        if ((number || el.type === "number") && looseToNumber(el.value) === value) {
+        if (trim && el.value.trim() === newValue) {
           return;
         }
       }
-      const newValue = value == null ? "" : value;
-      if (el.value !== newValue) {
-        el.value = newValue;
-      }
+      el.value = newValue;
     }
   };
   const vModelCheckbox = {