@vue/compat 3.2.34-beta.1 → 3.2.36

package/dist/vue.esm-bundler.js

@@ -4563,7 +4563,10 @@ const KeepAliveImpl = {
         // if the internal renderer is not registered, it indicates that this is server-side rendering,
         // for KeepAlive, we just need to render its children
         if (!sharedContext.renderer) {
-            return slots.default;
+            return () => {
+                const children = slots.default && slots.default();
+                return children && children.length === 1 ? children[0] : children;
+            };
         }
         const cache = new Map();
         const keys = new Set();
@@ -7176,7 +7179,7 @@ function createCompatVue(createApp, createSingletonApp) {
             return vm;
         }
     }
-    Vue.version = `2.6.14-compat:${"3.2.34-beta.1"}`;
+    Vue.version = `2.6.14-compat:${"3.2.36"}`;
     Vue.config = singletonApp.config;
     Vue.use = (p, ...options) => {
         if (p && isFunction(p.install)) {
@@ -7343,9 +7346,11 @@ function installLegacyAPIs(app) {
     });
 }
 function applySingletonAppMutations(app) {
-    ['mixins', 'components', 'directives', 'filters', 'deopt'].forEach(key => {
+    // copy over asset registries and deopt flag
+    app._context.mixins = [...singletonApp._context.mixins];
+    ['components', 'directives', 'filters'].forEach(key => {
         // @ts-ignore
-        app._context[key] = singletonApp._context[key];
+        app._context[key] = Object.create(singletonApp._context[key]);
     });
     // copy over global config mutations
     isCopyingConfig = true;
@@ -7358,7 +7363,7 @@ function applySingletonAppMutations(app) {
         }
         const val = singletonApp.config[key];
         // @ts-ignore
-        app.config[key] = val;
+        app.config[key] = isObject(val) ? Object.create(val) : val;
         // compat for runtime ignoredElements -> isCustomElement
         if (key === 'ignoredElements' &&
             isCompatEnabled("CONFIG_IGNORED_ELEMENTS" /* CONFIG_IGNORED_ELEMENTS */, null) &&
@@ -7867,7 +7872,7 @@ const isComment = (node) => node.nodeType === 8 /* COMMENT */;
 // Hydration also depends on some renderer internal logic which needs to be
 // passed in via arguments.
 function createHydrationFunctions(rendererInternals) {
-    const { mt: mountComponent, p: patch, o: { patchProp, nextSibling, parentNode, remove, insert, createComment } } = rendererInternals;
+    const { mt: mountComponent, p: patch, o: { patchProp, createText, nextSibling, parentNode, remove, insert, createComment } } = rendererInternals;
     const hydrate = (vnode, container) => {
         if (!container.hasChildNodes()) {
             (process.env.NODE_ENV !== 'production') &&
@@ -7899,7 +7904,15 @@ function createHydrationFunctions(rendererInternals) {
         switch (type) {
             case Text:
                 if (domType !== 3 /* TEXT */) {
-                    nextNode = onMismatch();
+                    // #5728 empty text node inside a slot can cause hydration failure
+                    // because the server rendered HTML won't contain a text node
+                    if (vnode.children === '') {
+                        insert((vnode.el = createText('')), parentNode(node), node);
+                        nextNode = node;
+                    }
+                    else {
+                        nextNode = onMismatch();
+                    }
                 }
                 else {
                     if (node.data !== vnode.children) {
@@ -7974,6 +7987,12 @@ function createHydrationFunctions(rendererInternals) {
                     nextNode = isFragmentStart
                         ? locateClosingAsyncAnchor(node)
                         : nextSibling(node);
+                    // #4293 teleport as component root
+                    if (nextNode &&
+                        isComment(nextNode) &&
+                        nextNode.data === 'teleport end') {
+                        nextNode = nextSibling(nextNode);
+                    }
                     // #3787
                     // if component is async, it may get moved / unmounted before its
                     // inner component is loaded, so we need to give it a placeholder
@@ -8681,8 +8700,10 @@ function baseCreateRenderer(options, createHydrationFns) {
         const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateText(''));
         const fragmentEndAnchor = (n2.anchor = n1 ? n1.anchor : hostCreateText(''));
         let { patchFlag, dynamicChildren, slotScopeIds: fragmentSlotScopeIds } = n2;
-        if ((process.env.NODE_ENV !== 'production') && isHmrUpdating) {
-            // HMR updated, force full diff
+        if ((process.env.NODE_ENV !== 'production') &&
+            // #5523 dev root fragment may inherit directives
+            (isHmrUpdating || patchFlag & 2048 /* DEV_ROOT_FRAGMENT */)) {
+            // HMR updated / Dev root fragment (w/ comments), force full diff
             patchFlag = 0;
             optimized = false;
             dynamicChildren = null;
@@ -8704,8 +8725,6 @@ function baseCreateRenderer(options, createHydrationFns) {
         else {
             if (patchFlag > 0 &&
                 patchFlag & 64 /* STABLE_FRAGMENT */ &&
-                // #5523 dev root fragment may inherit directives so always force update
-                !((process.env.NODE_ENV !== 'production') && patchFlag & 2048 /* DEV_ROOT_FRAGMENT */) &&
                 dynamicChildren &&
                 // #2715 the previous fragment could've been a BAILed one as a result
                 // of renderSlot() with no valid children
@@ -9821,10 +9840,23 @@ function hydrateTeleport(node, vnode, parentComponent, parentSuspense, slotScope
             }
             else {
                 vnode.anchor = nextSibling(node);
-                vnode.targetAnchor = hydrateChildren(targetNode, vnode, target, parentComponent, parentSuspense, slotScopeIds, optimized);
+                // lookahead until we find the target anchor
+                // we cannot rely on return value of hydrateChildren() because there
+                // could be nested teleports
+                let targetAnchor = targetNode;
+                while (targetAnchor) {
+                    targetAnchor = nextSibling(targetAnchor);
+                    if (targetAnchor &&
+                        targetAnchor.nodeType === 8 &&
+                        targetAnchor.data === 'teleport anchor') {
+                        vnode.targetAnchor = targetAnchor;
+                        target._lpa =
+                            vnode.targetAnchor && nextSibling(vnode.targetAnchor);
+                        break;
+                    }
+                }
+                hydrateChildren(targetNode, vnode, target, parentComponent, parentSuspense, slotScopeIds, optimized);
             }
-            target._lpa =
-                vnode.targetAnchor && nextSibling(vnode.targetAnchor);
         }
     }
     return vnode.anchor && nextSibling(vnode.anchor);
@@ -11220,7 +11252,7 @@ function isMemoSame(cached, memo) {
 }
 
 // Core API ------------------------------------------------------------------
-const version = "3.2.34-beta.1";
+const version = "3.2.36";
 const _ssrUtils = {
     createComponentInstance,
     setupComponent,
@@ -11585,7 +11617,7 @@ const [_getNow, skipTimestampCheck] = /*#__PURE__*/ (() => {
             // 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();
+            _getNow = performance.now.bind(performance);
         }
         // #3485: Firefox <= 53 has incorrect Event.timeStamp implementation
         // and does not fire microtasks in between event propagation, so safe to exclude.
@@ -12137,9 +12169,8 @@ function resolveTransitionProps(rawProps) {
         removeTransitionClass(el, isAppear ? appearActiveClass : enterActiveClass);
         done && done();
     };
-    let isLeaving = false;
     const finishLeave = (el, done) => {
-        isLeaving = false;
+        el._isLeaving = false;
         removeTransitionClass(el, leaveFromClass);
         removeTransitionClass(el, leaveToClass);
         removeTransitionClass(el, leaveActiveClass);
@@ -12182,7 +12213,7 @@ function resolveTransitionProps(rawProps) {
         onEnter: makeEnterHook(false),
         onAppear: makeEnterHook(true),
         onLeave(el, done) {
-            isLeaving = true;
+            el._isLeaving = true;
             const resolve = () => finishLeave(el, done);
             addTransitionClass(el, leaveFromClass);
             if (legacyClassEnabled) {
@@ -12192,7 +12223,7 @@ function resolveTransitionProps(rawProps) {
             forceReflow();
             addTransitionClass(el, leaveActiveClass);
             nextFrame(() => {
-                if (!isLeaving) {
+                if (!el._isLeaving) {
                     // cancelled
                     return;
                 }
@@ -12725,27 +12756,25 @@ const vModelDynamic = {
         callModelHook(el, binding, vnode, prevVNode, 'updated');
     }
 };
-function callModelHook(el, binding, vnode, prevVNode, hook) {
-    let modelToUse;
-    switch (el.tagName) {
+function resolveDynamicModel(tagName, type) {
+    switch (tagName) {
         case 'SELECT':
-            modelToUse = vModelSelect;
-            break;
+            return vModelSelect;
         case 'TEXTAREA':
-            modelToUse = vModelText;
-            break;
+            return vModelText;
         default:
-            switch (vnode.props && vnode.props.type) {
+            switch (type) {
                 case 'checkbox':
-                    modelToUse = vModelCheckbox;
-                    break;
+                    return vModelCheckbox;
                 case 'radio':
-                    modelToUse = vModelRadio;
-                    break;
+                    return vModelRadio;
                 default:
-                    modelToUse = vModelText;
+                    return vModelText;
             }
     }
+}
+function callModelHook(el, binding, vnode, prevVNode, hook) {
+    const modelToUse = resolveDynamicModel(el.tagName, vnode.props && vnode.props.type);
     const fn = modelToUse[hook];
     fn && fn(el, binding, vnode, prevVNode);
 }
@@ -12773,6 +12802,17 @@ function initVModelForSSR() {
             return { checked: true };
         }
     };
+    vModelDynamic.getSSRProps = (binding, vnode) => {
+        if (typeof vnode.type !== 'string') {
+            return;
+        }
+        const modelToUse = resolveDynamicModel(
+        // resolveDynamicModel expects an uppercase tag name, but vnode.type is lowercase
+        vnode.type.toUpperCase(), vnode.props && vnode.props.type);
+        if (modelToUse.getSSRProps) {
+            return modelToUse.getSSRProps(binding, vnode);
+        }
+    };
 }
 
 const systemModifiers = ['ctrl', 'shift', 'alt', 'meta'];
@@ -14929,6 +14969,14 @@ function getConstantType(node, context) {
                 // static then they don't need to be blocks since there will be no
                 // nested updates.
                 if (codegenNode.isBlock) {
+                    // except set custom directives.
+                    for (let i = 0; i < node.props.length; i++) {
+                        const p = node.props[i];
+                        if (p.type === 7 /* DIRECTIVE */) {
+                            constantCache.set(node, 0 /* NOT_CONSTANT */);
+                            return 0 /* NOT_CONSTANT */;
+                        }
+                    }
                     context.removeHelper(OPEN_BLOCK);
                     context.removeHelper(getVNodeBlockHelper(context.inSSR, codegenNode.isComponent));
                     codegenNode.isBlock = false;
@@ -16691,7 +16739,7 @@ const transformElement = (node, context) => {
                 (tag === 'svg' || tag === 'foreignObject'));
         // props
         if (props.length > 0) {
-            const propsBuildResult = buildProps(node, context);
+            const propsBuildResult = buildProps(node, context, undefined, isComponent, isDynamicComponent);
             vnodeProps = propsBuildResult.props;
             patchFlag = propsBuildResult.patchFlag;
             dynamicPropNames = propsBuildResult.dynamicPropNames;
@@ -16833,9 +16881,8 @@ function resolveComponentType(node, context, ssr = false) {
     context.components.add(tag);
     return toValidAssetId(tag, `component`);
 }
-function buildProps(node, context, props = node.props, ssr = false) {
+function buildProps(node, context, props = node.props, isComponent, isDynamicComponent, ssr = false) {
     const { tag, loc: elementLoc, children } = node;
-    const isComponent = node.tagType === 1 /* COMPONENT */;
     let properties = [];
     const mergeArgs = [];
     const runtimeDirectives = [];
@@ -16854,8 +16901,8 @@ function buildProps(node, context, props = node.props, ssr = false) {
         if (isStaticExp(key)) {
             const name = key.content;
             const isEventHandler = isOn(name);
-            if (!isComponent &&
-                isEventHandler &&
+            if (isEventHandler &&
+                (!isComponent || isDynamicComponent) &&
                 // omit the flag for click handlers because hydration gives click
                 // dedicated fast path.
                 name.toLowerCase() !== 'onclick' &&
@@ -17293,7 +17340,7 @@ function processSlotOutlet(node, context) {
         }
     }
     if (nonNameProps.length > 0) {
-        const { props, directives } = buildProps(node, context, nonNameProps);
+        const { props, directives } = buildProps(node, context, nonNameProps, false, false);
         slotProps = props;
         if (directives.length) {
             context.onError(createCompilerError(36 /* X_V_SLOT_UNEXPECTED_DIRECTIVE_ON_SLOT_OUTLET */, directives[0].loc));

package/dist/vue.global.js

@@ -4513,11 +4513,6 @@ var Vue = (function () {
           // The whole point of this is to avoid importing KeepAlive directly in the
           // renderer to facilitate tree-shaking.
           const sharedContext = instance.ctx;
-          // if the internal renderer is not registered, it indicates that this is server-side rendering,
-          // for KeepAlive, we just need to render its children
-          if (!sharedContext.renderer) {
-              return slots.default;
-          }
           const cache = new Map();
           const keys = new Set();
           let current = null;
@@ -7116,7 +7111,7 @@ var Vue = (function () {
               return vm;
           }
       }
-      Vue.version = `2.6.14-compat:${"3.2.34-beta.1"}`;
+      Vue.version = `2.6.14-compat:${"3.2.36"}`;
       Vue.config = singletonApp.config;
       Vue.use = (p, ...options) => {
           if (p && isFunction(p.install)) {
@@ -7282,9 +7277,11 @@ var Vue = (function () {
       });
   }
   function applySingletonAppMutations(app) {
-      ['mixins', 'components', 'directives', 'filters', 'deopt'].forEach(key => {
+      // copy over asset registries and deopt flag
+      app._context.mixins = [...singletonApp._context.mixins];
+      ['components', 'directives', 'filters'].forEach(key => {
           // @ts-ignore
-          app._context[key] = singletonApp._context[key];
+          app._context[key] = Object.create(singletonApp._context[key]);
       });
       // copy over global config mutations
       isCopyingConfig = true;
@@ -7297,7 +7294,7 @@ var Vue = (function () {
           }
           const val = singletonApp.config[key];
           // @ts-ignore
-          app.config[key] = val;
+          app.config[key] = isObject(val) ? Object.create(val) : val;
           // compat for runtime ignoredElements -> isCustomElement
           if (key === 'ignoredElements' &&
               isCompatEnabled("CONFIG_IGNORED_ELEMENTS" /* CONFIG_IGNORED_ELEMENTS */, null) &&
@@ -7802,7 +7799,7 @@ var Vue = (function () {
   // Hydration also depends on some renderer internal logic which needs to be
   // passed in via arguments.
   function createHydrationFunctions(rendererInternals) {
-      const { mt: mountComponent, p: patch, o: { patchProp, nextSibling, parentNode, remove, insert, createComment } } = rendererInternals;
+      const { mt: mountComponent, p: patch, o: { patchProp, createText, nextSibling, parentNode, remove, insert, createComment } } = rendererInternals;
       const hydrate = (vnode, container) => {
           if (!container.hasChildNodes()) {
               warn$1(`Attempting to hydrate existing markup but container is empty. ` +
@@ -7833,7 +7830,15 @@ var Vue = (function () {
           switch (type) {
               case Text:
                   if (domType !== 3 /* TEXT */) {
-                      nextNode = onMismatch();
+                      // #5728 empty text node inside a slot can cause hydration failure
+                      // because the server rendered HTML won't contain a text node
+                      if (vnode.children === '') {
+                          insert((vnode.el = createText('')), parentNode(node), node);
+                          nextNode = node;
+                      }
+                      else {
+                          nextNode = onMismatch();
+                      }
                   }
                   else {
                       if (node.data !== vnode.children) {
@@ -7907,6 +7912,12 @@ var Vue = (function () {
                       nextNode = isFragmentStart
                           ? locateClosingAsyncAnchor(node)
                           : nextSibling(node);
+                      // #4293 teleport as component root
+                      if (nextNode &&
+                          isComment(nextNode) &&
+                          nextNode.data === 'teleport end') {
+                          nextNode = nextSibling(nextNode);
+                      }
                       // #3787
                       // if component is async, it may get moved / unmounted before its
                       // inner component is loaded, so we need to give it a placeholder
@@ -8570,8 +8581,9 @@ var Vue = (function () {
           const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateText(''));
           const fragmentEndAnchor = (n2.anchor = n1 ? n1.anchor : hostCreateText(''));
           let { patchFlag, dynamicChildren, slotScopeIds: fragmentSlotScopeIds } = n2;
-          if (isHmrUpdating) {
-              // HMR updated, force full diff
+          if (// #5523 dev root fragment may inherit directives
+              (isHmrUpdating || patchFlag & 2048 /* DEV_ROOT_FRAGMENT */)) {
+              // HMR updated / Dev root fragment (w/ comments), force full diff
               patchFlag = 0;
               optimized = false;
               dynamicChildren = null;
@@ -8593,8 +8605,6 @@ var Vue = (function () {
           else {
               if (patchFlag > 0 &&
                   patchFlag & 64 /* STABLE_FRAGMENT */ &&
-                  // #5523 dev root fragment may inherit directives so always force update
-                  !(patchFlag & 2048 /* DEV_ROOT_FRAGMENT */) &&
                   dynamicChildren &&
                   // #2715 the previous fragment could've been a BAILed one as a result
                   // of renderSlot() with no valid children
@@ -9705,10 +9715,23 @@ var Vue = (function () {
               }
               else {
                   vnode.anchor = nextSibling(node);
-                  vnode.targetAnchor = hydrateChildren(targetNode, vnode, target, parentComponent, parentSuspense, slotScopeIds, optimized);
+                  // lookahead until we find the target anchor
+                  // we cannot rely on return value of hydrateChildren() because there
+                  // could be nested teleports
+                  let targetAnchor = targetNode;
+                  while (targetAnchor) {
+                      targetAnchor = nextSibling(targetAnchor);
+                      if (targetAnchor &&
+                          targetAnchor.nodeType === 8 &&
+                          targetAnchor.data === 'teleport anchor') {
+                          vnode.targetAnchor = targetAnchor;
+                          target._lpa =
+                              vnode.targetAnchor && nextSibling(vnode.targetAnchor);
+                          break;
+                      }
+                  }
+                  hydrateChildren(targetNode, vnode, target, parentComponent, parentSuspense, slotScopeIds, optimized);
               }
-              target._lpa =
-                  vnode.targetAnchor && nextSibling(vnode.targetAnchor);
           }
       }
       return vnode.anchor && nextSibling(vnode.anchor);
@@ -11074,7 +11097,7 @@ var Vue = (function () {
   }
 
   // Core API ------------------------------------------------------------------
-  const version = "3.2.34-beta.1";
+  const version = "3.2.36";
   /**
    * SSR utils for \@vue/server-renderer. Only exposed in cjs builds.
    * @internal
@@ -11430,7 +11453,7 @@ var Vue = (function () {
               // 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();
+              _getNow = performance.now.bind(performance);
           }
           // #3485: Firefox <= 53 has incorrect Event.timeStamp implementation
           // and does not fire microtasks in between event propagation, so safe to exclude.
@@ -11968,9 +11991,8 @@ var Vue = (function () {
           removeTransitionClass(el, isAppear ? appearActiveClass : enterActiveClass);
           done && done();
       };
-      let isLeaving = false;
       const finishLeave = (el, done) => {
-          isLeaving = false;
+          el._isLeaving = false;
           removeTransitionClass(el, leaveFromClass);
           removeTransitionClass(el, leaveToClass);
           removeTransitionClass(el, leaveActiveClass);
@@ -12013,7 +12035,7 @@ var Vue = (function () {
           onEnter: makeEnterHook(false),
           onAppear: makeEnterHook(true),
           onLeave(el, done) {
-              isLeaving = true;
+              el._isLeaving = true;
               const resolve = () => finishLeave(el, done);
               addTransitionClass(el, leaveFromClass);
               if (legacyClassEnabled) {
@@ -12023,7 +12045,7 @@ var Vue = (function () {
               forceReflow();
               addTransitionClass(el, leaveActiveClass);
               nextFrame(() => {
-                  if (!isLeaving) {
+                  if (!el._isLeaving) {
                       // cancelled
                       return;
                   }
@@ -12554,27 +12576,25 @@ var Vue = (function () {
           callModelHook(el, binding, vnode, prevVNode, 'updated');
       }
   };
-  function callModelHook(el, binding, vnode, prevVNode, hook) {
-      let modelToUse;
-      switch (el.tagName) {
+  function resolveDynamicModel(tagName, type) {
+      switch (tagName) {
           case 'SELECT':
-              modelToUse = vModelSelect;
-              break;
+              return vModelSelect;
           case 'TEXTAREA':
-              modelToUse = vModelText;
-              break;
+              return vModelText;
           default:
-              switch (vnode.props && vnode.props.type) {
+              switch (type) {
                   case 'checkbox':
-                      modelToUse = vModelCheckbox;
-                      break;
+                      return vModelCheckbox;
                   case 'radio':
-                      modelToUse = vModelRadio;
-                      break;
+                      return vModelRadio;
                   default:
-                      modelToUse = vModelText;
+                      return vModelText;
               }
       }
+  }
+  function callModelHook(el, binding, vnode, prevVNode, hook) {
+      const modelToUse = resolveDynamicModel(el.tagName, vnode.props && vnode.props.type);
       const fn = modelToUse[hook];
       fn && fn(el, binding, vnode, prevVNode);
   }
@@ -14716,6 +14736,14 @@ var Vue = (function () {
                   // static then they don't need to be blocks since there will be no
                   // nested updates.
                   if (codegenNode.isBlock) {
+                      // except set custom directives.
+                      for (let i = 0; i < node.props.length; i++) {
+                          const p = node.props[i];
+                          if (p.type === 7 /* DIRECTIVE */) {
+                              constantCache.set(node, 0 /* NOT_CONSTANT */);
+                              return 0 /* NOT_CONSTANT */;
+                          }
+                      }
                       context.removeHelper(OPEN_BLOCK);
                       context.removeHelper(getVNodeBlockHelper(context.inSSR, codegenNode.isComponent));
                       codegenNode.isBlock = false;
@@ -16471,7 +16499,7 @@ var Vue = (function () {
                   (tag === 'svg' || tag === 'foreignObject'));
           // props
           if (props.length > 0) {
-              const propsBuildResult = buildProps(node, context);
+              const propsBuildResult = buildProps(node, context, undefined, isComponent, isDynamicComponent);
               vnodeProps = propsBuildResult.props;
               patchFlag = propsBuildResult.patchFlag;
               dynamicPropNames = propsBuildResult.dynamicPropNames;
@@ -16610,9 +16638,8 @@ var Vue = (function () {
       context.components.add(tag);
       return toValidAssetId(tag, `component`);
   }
-  function buildProps(node, context, props = node.props, ssr = false) {
+  function buildProps(node, context, props = node.props, isComponent, isDynamicComponent, ssr = false) {
       const { tag, loc: elementLoc, children } = node;
-      const isComponent = node.tagType === 1 /* COMPONENT */;
       let properties = [];
       const mergeArgs = [];
       const runtimeDirectives = [];
@@ -16631,8 +16658,8 @@ var Vue = (function () {
           if (isStaticExp(key)) {
               const name = key.content;
               const isEventHandler = isOn(name);
-              if (!isComponent &&
-                  isEventHandler &&
+              if (isEventHandler &&
+                  (!isComponent || isDynamicComponent) &&
                   // omit the flag for click handlers because hydration gives click
                   // dedicated fast path.
                   name.toLowerCase() !== 'onclick' &&
@@ -17070,7 +17097,7 @@ var Vue = (function () {
           }
       }
       if (nonNameProps.length > 0) {
-          const { props, directives } = buildProps(node, context, nonNameProps);
+          const { props, directives } = buildProps(node, context, nonNameProps, false, false);
           slotProps = props;
           if (directives.length) {
               context.onError(createCompilerError(36 /* X_V_SLOT_UNEXPECTED_DIRECTIVE_ON_SLOT_OUTLET */, directives[0].loc));