@vue/compat 3.3.6 → 3.3.7

package/dist/vue.runtime.esm-bundler.js

@@ -540,7 +540,7 @@ function trigger(target, type, key, newValue, oldValue, oldTarget) {
   } else if (key === "length" && isArray(target)) {
     const newLength = Number(newValue);
     depsMap.forEach((dep, key2) => {
-      if (key2 === "length" || key2 >= newLength) {
+      if (key2 === "length" || !isSymbol(key2) && key2 >= newLength) {
         deps.push(dep);
       }
     });
@@ -1650,8 +1650,13 @@ function findInsertionIndex(id) {
   let end = queue.length;
   while (start < end) {
     const middle = start + end >>> 1;
-    const middleJobId = getId(queue[middle]);
-    middleJobId < id ? start = middle + 1 : end = middle;
+    const middleJob = queue[middle];
+    const middleJobId = getId(middleJob);
+    if (middleJobId < id || middleJobId === id && middleJob.pre) {
+      start = middle + 1;
+    } else {
+      end = middle;
+    }
   }
   return start;
 }
@@ -3242,14 +3247,16 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
         parentComponent: parentComponent2,
         container: container2
       } = suspense;
+      let delayEnter = false;
       if (suspense.isHydrating) {
         suspense.isHydrating = false;
       } else if (!resume) {
-        const delayEnter = activeBranch && pendingBranch.transition && pendingBranch.transition.mode === "out-in";
+        delayEnter = activeBranch && pendingBranch.transition && pendingBranch.transition.mode === "out-in";
         if (delayEnter) {
           activeBranch.transition.afterLeave = () => {
             if (pendingId === suspense.pendingId) {
               move(pendingBranch, container2, anchor2, 0);
+              queuePostFlushCb(effects);
             }
           };
         }
@@ -3275,7 +3282,7 @@ function createSuspenseBoundary(vnode, parentSuspense, parentComponent, containe
         }
         parent = parent.parent;
       }
-      if (!hasUnresolvedAncestor) {
+      if (!hasUnresolvedAncestor && !delayEnter) {
         queuePostFlushCb(effects);
       }
       suspense.effects = [];
@@ -6230,7 +6237,7 @@ function createCompatVue$1(createApp, createSingletonApp) {
       return vm;
     }
   }
-  Vue.version = `2.6.14-compat:${"3.3.6"}`;
+  Vue.version = `2.6.14-compat:${"3.3.7"}`;
   Vue.config = singletonApp.config;
   Vue.use = (p, ...options) => {
     if (p && isFunction(p.install)) {
@@ -7563,7 +7570,14 @@ function createHydrationFunctions(rendererInternals) {
         break;
       case Comment:
         if (domType !== 8 /* COMMENT */ || isFragmentStart) {
-          nextNode = onMismatch();
+          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();
+          }
         } else {
           nextNode = nextSibling(node);
         }
@@ -7605,7 +7619,7 @@ function createHydrationFunctions(rendererInternals) {
         break;
       default:
         if (shapeFlag & 1) {
-          if (domType !== 1 /* ELEMENT */ || vnode.type.toLowerCase() !== node.tagName.toLowerCase()) {
+          if ((domType !== 1 /* ELEMENT */ || vnode.type.toLowerCase() !== node.tagName.toLowerCase()) && !isTemplateNode(node)) {
             nextNode = onMismatch();
           } else {
             nextNode = hydrateElement(
@@ -7620,6 +7634,13 @@ function createHydrationFunctions(rendererInternals) {
         } else if (shapeFlag & 6) {
           vnode.slotScopeIds = slotScopeIds;
           const container = parentNode(node);
+          if (isFragmentStart) {
+            nextNode = locateClosingAnchor(node);
+          } else if (isComment(node) && node.data === "teleport start") {
+            nextNode = locateClosingAnchor(node, node.data, "teleport end");
+          } else {
+            nextNode = nextSibling(node);
+          }
           mountComponent(
             vnode,
             container,
@@ -7629,10 +7650,6 @@ function createHydrationFunctions(rendererInternals) {
             isSVGContainer(container),
             optimized
           );
-          nextNode = isFragmentStart ? locateClosingAsyncAnchor(node) : nextSibling(node);
-          if (nextNode && isComment(nextNode) && nextNode.data === "teleport end") {
-            nextNode = nextSibling(nextNode);
-          }
           if (isAsyncWrapper(vnode)) {
             let subTree;
             if (isFragmentStart) {
@@ -7682,7 +7699,7 @@ function createHydrationFunctions(rendererInternals) {
   };
   const hydrateElement = (el, vnode, parentComponent, parentSuspense, slotScopeIds, optimized) => {
     optimized = optimized || !!vnode.dynamicChildren;
-    const { type, props, patchFlag, shapeFlag, dirs } = vnode;
+    const { type, props, patchFlag, shapeFlag, dirs, transition } = vnode;
     const forcePatchValue = type === "input" && dirs || type === "option";
     if (!!(process.env.NODE_ENV !== "production") || forcePatchValue || patchFlag !== -1) {
       if (dirs) {
@@ -7719,12 +7736,23 @@ function createHydrationFunctions(rendererInternals) {
       if (vnodeHooks = props && props.onVnodeBeforeMount) {
         invokeVNodeHook(vnodeHooks, parentComponent, vnode);
       }
+      let needCallTransitionHooks = false;
+      if (isTemplateNode(el)) {
+        needCallTransitionHooks = needTransition(parentSuspense, transition) && parentComponent && parentComponent.vnode.props && parentComponent.vnode.props.appear;
+        const content = el.content.firstChild;
+        if (needCallTransitionHooks) {
+          transition.beforeEnter(content);
+        }
+        replaceNode(content, el, parentComponent);
+        vnode.el = el = content;
+      }
       if (dirs) {
         invokeDirectiveHook(vnode, null, parentComponent, "beforeMount");
       }
-      if ((vnodeHooks = props && props.onVnodeMounted) || dirs) {
+      if ((vnodeHooks = props && props.onVnodeMounted) || dirs || needCallTransitionHooks) {
         queueEffectWithSuspense(() => {
           vnodeHooks && invokeVNodeHook(vnodeHooks, parentComponent, vnode);
+          needCallTransitionHooks && transition.enter(el);
           dirs && invokeDirectiveHook(vnode, null, parentComponent, "mounted");
         }, parentSuspense);
       }
@@ -7842,7 +7870,7 @@ function createHydrationFunctions(rendererInternals) {
     );
     vnode.el = null;
     if (isFragment) {
-      const end = locateClosingAsyncAnchor(node);
+      const end = locateClosingAnchor(node);
       while (true) {
         const next2 = nextSibling(node);
         if (next2 && next2 !== end) {
@@ -7867,14 +7895,14 @@ function createHydrationFunctions(rendererInternals) {
     );
     return next;
   };
-  const locateClosingAsyncAnchor = (node) => {
+  const locateClosingAnchor = (node, open = "[", close = "]") => {
     let match = 0;
     while (node) {
       node = nextSibling(node);
       if (node && isComment(node)) {
-        if (node.data === "[")
+        if (node.data === open)
           match++;
-        if (node.data === "]") {
+        if (node.data === close) {
           if (match === 0) {
             return nextSibling(node);
           } else {
@@ -7885,6 +7913,23 @@ function createHydrationFunctions(rendererInternals) {
     }
     return node;
   };
+  const replaceNode = (newNode, oldNode, parentComponent) => {
+    const parentNode2 = oldNode.parentNode;
+    if (parentNode2) {
+      parentNode2.replaceChild(newNode, oldNode);
+    }
+    let parent = parentComponent;
+    while (parent) {
+      if (parent.vnode.el === oldNode) {
+        parent.vnode.el = newNode;
+        parent.subTree.el = newNode;
+      }
+      parent = parent.parent;
+    }
+  };
+  const isTemplateNode = (node) => {
+    return node.nodeType === 1 /* ELEMENT */ && node.tagName.toLowerCase() === "template";
+  };
   return [hydrate, hydrateNode];
 }
 
@@ -8235,7 +8280,7 @@ function baseCreateRenderer(options, createHydrationFns) {
     if (dirs) {
       invokeDirectiveHook(vnode, null, parentComponent, "beforeMount");
     }
-    const needCallTransitionHooks = (!parentSuspense || parentSuspense && !parentSuspense.pendingBranch) && transition && !transition.persisted;
+    const needCallTransitionHooks = needTransition(parentSuspense, transition);
     if (needCallTransitionHooks) {
       transition.beforeEnter(el);
     }
@@ -9163,8 +9208,8 @@ function baseCreateRenderer(options, createHydrationFns) {
       moveStaticNode(vnode, container, anchor);
       return;
     }
-    const needTransition = moveType !== 2 && shapeFlag & 1 && transition;
-    if (needTransition) {
+    const needTransition2 = moveType !== 2 && shapeFlag & 1 && transition;
+    if (needTransition2) {
       if (moveType === 0) {
         transition.beforeEnter(el);
         hostInsert(el, container, anchor);
@@ -9393,6 +9438,9 @@ function baseCreateRenderer(options, createHydrationFns) {
 function toggleRecurse({ effect, update }, allowed) {
   effect.allowRecurse = update.allowRecurse = allowed;
 }
+function needTransition(parentSuspense, transition) {
+  return (!parentSuspense || parentSuspense && !parentSuspense.pendingBranch) && transition && !transition.persisted;
+}
 function traverseStaticChildren(n1, n2, shallow = false) {
   const ch1 = n1.children;
   const ch2 = n2.children;
@@ -10829,7 +10877,7 @@ function isMemoSame(cached, memo) {
   return true;
 }
 
-const version = "3.3.6";
+const version = "3.3.7";
 const _ssrUtils = {
   createComponentInstance,
   setupComponent,

package/dist/vue.runtime.global.js

@@ -543,7 +543,7 @@ var Vue = (function () {
     } else if (key === "length" && isArray(target)) {
       const newLength = Number(newValue);
       depsMap.forEach((dep, key2) => {
-        if (key2 === "length" || key2 >= newLength) {
+        if (key2 === "length" || !isSymbol(key2) && key2 >= newLength) {
           deps.push(dep);
         }
       });
@@ -1639,8 +1639,13 @@ var Vue = (function () {
     let end = queue.length;
     while (start < end) {
       const middle = start + end >>> 1;
-      const middleJobId = getId(queue[middle]);
-      middleJobId < id ? start = middle + 1 : end = middle;
+      const middleJob = queue[middle];
+      const middleJobId = getId(middleJob);
+      if (middleJobId < id || middleJobId === id && middleJob.pre) {
+        start = middle + 1;
+      } else {
+        end = middle;
+      }
     }
     return start;
   }
@@ -3228,14 +3233,16 @@ Details: https://v3-migration.vuejs.org/breaking-changes/migration-build.html`
           parentComponent: parentComponent2,
           container: container2
         } = suspense;
+        let delayEnter = false;
         if (suspense.isHydrating) {
           suspense.isHydrating = false;
         } else if (!resume) {
-          const delayEnter = activeBranch && pendingBranch.transition && pendingBranch.transition.mode === "out-in";
+          delayEnter = activeBranch && pendingBranch.transition && pendingBranch.transition.mode === "out-in";
           if (delayEnter) {
             activeBranch.transition.afterLeave = () => {
               if (pendingId === suspense.pendingId) {
                 move(pendingBranch, container2, anchor2, 0);
+                queuePostFlushCb(effects);
               }
             };
           }
@@ -3261,7 +3268,7 @@ Details: https://v3-migration.vuejs.org/breaking-changes/migration-build.html`
           }
           parent = parent.parent;
         }
-        if (!hasUnresolvedAncestor) {
+        if (!hasUnresolvedAncestor && !delayEnter) {
           queuePostFlushCb(effects);
         }
         suspense.effects = [];
@@ -6185,7 +6192,7 @@ If this is a native custom element, make sure to exclude it from component resol
         return vm;
       }
     }
-    Vue.version = `2.6.14-compat:${"3.3.6"}`;
+    Vue.version = `2.6.14-compat:${"3.3.7"}`;
     Vue.config = singletonApp.config;
     Vue.use = (p, ...options) => {
       if (p && isFunction(p.install)) {
@@ -7515,7 +7522,14 @@ If you want to remount the same app, move your app creation logic into a factory
           break;
         case Comment:
           if (domType !== 8 /* COMMENT */ || isFragmentStart) {
-            nextNode = onMismatch();
+            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();
+            }
           } else {
             nextNode = nextSibling(node);
           }
@@ -7557,7 +7571,7 @@ If you want to remount the same app, move your app creation logic into a factory
           break;
         default:
           if (shapeFlag & 1) {
-            if (domType !== 1 /* ELEMENT */ || vnode.type.toLowerCase() !== node.tagName.toLowerCase()) {
+            if ((domType !== 1 /* ELEMENT */ || vnode.type.toLowerCase() !== node.tagName.toLowerCase()) && !isTemplateNode(node)) {
               nextNode = onMismatch();
             } else {
               nextNode = hydrateElement(
@@ -7572,6 +7586,13 @@ If you want to remount the same app, move your app creation logic into a factory
           } else if (shapeFlag & 6) {
             vnode.slotScopeIds = slotScopeIds;
             const container = parentNode(node);
+            if (isFragmentStart) {
+              nextNode = locateClosingAnchor(node);
+            } else if (isComment(node) && node.data === "teleport start") {
+              nextNode = locateClosingAnchor(node, node.data, "teleport end");
+            } else {
+              nextNode = nextSibling(node);
+            }
             mountComponent(
               vnode,
               container,
@@ -7581,10 +7602,6 @@ If you want to remount the same app, move your app creation logic into a factory
               isSVGContainer(container),
               optimized
             );
-            nextNode = isFragmentStart ? locateClosingAsyncAnchor(node) : nextSibling(node);
-            if (nextNode && isComment(nextNode) && nextNode.data === "teleport end") {
-              nextNode = nextSibling(nextNode);
-            }
             if (isAsyncWrapper(vnode)) {
               let subTree;
               if (isFragmentStart) {
@@ -7634,7 +7651,7 @@ 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 } = vnode;
+      const { type, props, patchFlag, shapeFlag, dirs, transition } = vnode;
       const forcePatchValue = type === "input" && dirs || type === "option";
       {
         if (dirs) {
@@ -7671,12 +7688,23 @@ If you want to remount the same app, move your app creation logic into a factory
         if (vnodeHooks = props && props.onVnodeBeforeMount) {
           invokeVNodeHook(vnodeHooks, parentComponent, vnode);
         }
+        let needCallTransitionHooks = false;
+        if (isTemplateNode(el)) {
+          needCallTransitionHooks = needTransition(parentSuspense, transition) && parentComponent && parentComponent.vnode.props && parentComponent.vnode.props.appear;
+          const content = el.content.firstChild;
+          if (needCallTransitionHooks) {
+            transition.beforeEnter(content);
+          }
+          replaceNode(content, el, parentComponent);
+          vnode.el = el = content;
+        }
         if (dirs) {
           invokeDirectiveHook(vnode, null, parentComponent, "beforeMount");
         }
-        if ((vnodeHooks = props && props.onVnodeMounted) || dirs) {
+        if ((vnodeHooks = props && props.onVnodeMounted) || dirs || needCallTransitionHooks) {
           queueEffectWithSuspense(() => {
             vnodeHooks && invokeVNodeHook(vnodeHooks, parentComponent, vnode);
+            needCallTransitionHooks && transition.enter(el);
             dirs && invokeDirectiveHook(vnode, null, parentComponent, "mounted");
           }, parentSuspense);
         }
@@ -7794,7 +7822,7 @@ If you want to remount the same app, move your app creation logic into a factory
       );
       vnode.el = null;
       if (isFragment) {
-        const end = locateClosingAsyncAnchor(node);
+        const end = locateClosingAnchor(node);
         while (true) {
           const next2 = nextSibling(node);
           if (next2 && next2 !== end) {
@@ -7819,14 +7847,14 @@ If you want to remount the same app, move your app creation logic into a factory
       );
       return next;
     };
-    const locateClosingAsyncAnchor = (node) => {
+    const locateClosingAnchor = (node, open = "[", close = "]") => {
       let match = 0;
       while (node) {
         node = nextSibling(node);
         if (node && isComment(node)) {
-          if (node.data === "[")
+          if (node.data === open)
             match++;
-          if (node.data === "]") {
+          if (node.data === close) {
             if (match === 0) {
               return nextSibling(node);
             } else {
@@ -7837,6 +7865,23 @@ If you want to remount the same app, move your app creation logic into a factory
       }
       return node;
     };
+    const replaceNode = (newNode, oldNode, parentComponent) => {
+      const parentNode2 = oldNode.parentNode;
+      if (parentNode2) {
+        parentNode2.replaceChild(newNode, oldNode);
+      }
+      let parent = parentComponent;
+      while (parent) {
+        if (parent.vnode.el === oldNode) {
+          parent.vnode.el = newNode;
+          parent.subTree.el = newNode;
+        }
+        parent = parent.parent;
+      }
+    };
+    const isTemplateNode = (node) => {
+      return node.nodeType === 1 /* ELEMENT */ && node.tagName.toLowerCase() === "template";
+    };
     return [hydrate, hydrateNode];
   }
 
@@ -8164,7 +8209,7 @@ If you want to remount the same app, move your app creation logic into a factory
       if (dirs) {
         invokeDirectiveHook(vnode, null, parentComponent, "beforeMount");
       }
-      const needCallTransitionHooks = (!parentSuspense || parentSuspense && !parentSuspense.pendingBranch) && transition && !transition.persisted;
+      const needCallTransitionHooks = needTransition(parentSuspense, transition);
       if (needCallTransitionHooks) {
         transition.beforeEnter(el);
       }
@@ -9081,8 +9126,8 @@ If you want to remount the same app, move your app creation logic into a factory
         moveStaticNode(vnode, container, anchor);
         return;
       }
-      const needTransition = moveType !== 2 && shapeFlag & 1 && transition;
-      if (needTransition) {
+      const needTransition2 = moveType !== 2 && shapeFlag & 1 && transition;
+      if (needTransition2) {
         if (moveType === 0) {
           transition.beforeEnter(el);
           hostInsert(el, container, anchor);
@@ -9311,6 +9356,9 @@ If you want to remount the same app, move your app creation logic into a factory
   function toggleRecurse({ effect, update }, allowed) {
     effect.allowRecurse = update.allowRecurse = allowed;
   }
+  function needTransition(parentSuspense, transition) {
+    return (!parentSuspense || parentSuspense && !parentSuspense.pendingBranch) && transition && !transition.persisted;
+  }
   function traverseStaticChildren(n1, n2, shallow = false) {
     const ch1 = n1.children;
     const ch2 = n2.children;
@@ -10713,7 +10761,7 @@ Component that was made reactive: `,
     return true;
   }
 
-  const version = "3.3.6";
+  const version = "3.3.7";
   const ssrUtils = null;
   const resolveFilter = resolveFilter$1 ;
   const _compatUtils = {