vue 3.6.0-beta.5 → 3.6.0-beta.7

package/README.md

@@ -6,7 +6,7 @@
 
 - **`vue(.runtime).global(.prod).js`**:
   - For direct use via `<script src="...">` in the browser. Exposes the `Vue` global.
-  - Note that global builds are not [UMD](https://github.com/umdjs/umd) builds. They are built as [IIFEs](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) and is only meant for direct use via `<script src="...">`.
+  - Note that global builds are not [UMD](https://github.com/umdjs/umd) builds. They are built as [IIFEs](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) and are only meant for direct use via `<script src="...">`.
   - In-browser template compilation:
     - **`vue.global.js`** is the "full" build that includes both the compiler and the runtime so it supports compiling templates on the fly.
     - **`vue.runtime.global.js`** contains only the runtime and requires templates to be pre-compiled during a build step.

package/dist/vue.cjs.js

@@ -1,5 +1,5 @@
 /**
-  * vue v3.6.0-beta.5
+  * vue v3.6.0-beta.7
   * (c) 2018-present Yuxi (Evan) You and Vue contributors
   * @license MIT
   **/

package/dist/vue.cjs.prod.js

@@ -1,5 +1,5 @@
 /**
-  * vue v3.6.0-beta.5
+  * vue v3.6.0-beta.7
   * (c) 2018-present Yuxi (Evan) You and Vue contributors
   * @license MIT
   **/

package/dist/vue.esm-browser.js

@@ -1,5 +1,5 @@
 /**
-  * vue v3.6.0-beta.5
+  * vue v3.6.0-beta.7
   * (c) 2018-present Yuxi (Evan) You and Vue contributors
   * @license MIT
   **/
@@ -3300,36 +3300,44 @@ function moveTeleport(vnode, container, parentAnchor, { o: { insert }, m: move }
 	if (isReorder) insert(anchor, container, parentAnchor);
 }
 function hydrateTeleport(node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized, { o: { nextSibling, parentNode, querySelector, insert, createText } }, hydrateChildren) {
-	function hydrateDisabledTeleport(node, vnode, targetStart, targetAnchor) {
+	function hydrateAnchor(target, targetNode) {
+		let targetAnchor = targetNode;
+		while (targetAnchor) {
+			if (targetAnchor && targetAnchor.nodeType === 8) {
+				if (targetAnchor.data === "teleport start anchor") vnode.targetStart = targetAnchor;
+				else if (targetAnchor.data === "teleport anchor") {
+					vnode.targetAnchor = targetAnchor;
+					target._lpa = vnode.targetAnchor && nextSibling(vnode.targetAnchor);
+					break;
+				}
+			}
+			targetAnchor = nextSibling(targetAnchor);
+		}
+	}
+	function hydrateDisabledTeleport(node, vnode) {
 		vnode.anchor = hydrateChildren(nextSibling(node), vnode, parentNode(node), parentComponent, parentSuspense, slotScopeIds, optimized);
-		vnode.targetStart = targetStart;
-		vnode.targetAnchor = targetAnchor;
 	}
 	const target = vnode.target = resolveTarget(vnode.props, querySelector);
 	const disabled = isTeleportDisabled(vnode.props);
 	if (target) {
 		const targetNode = target._lpa || target.firstChild;
-		if (vnode.shapeFlag & 16) if (disabled) hydrateDisabledTeleport(node, vnode, targetNode, targetNode && nextSibling(targetNode));
-		else {
+		if (vnode.shapeFlag & 16) if (disabled) {
+			hydrateDisabledTeleport(node, vnode);
+			hydrateAnchor(target, targetNode);
+			if (!vnode.targetAnchor) prepareAnchor(target, vnode, createText, insert, parentNode(node) === target ? node : null);
+		} else {
 			vnode.anchor = nextSibling(node);
-			let targetAnchor = targetNode;
-			while (targetAnchor) {
-				if (targetAnchor && targetAnchor.nodeType === 8) {
-					if (targetAnchor.data === "teleport start anchor") vnode.targetStart = targetAnchor;
-					else if (targetAnchor.data === "teleport anchor") {
-						vnode.targetAnchor = targetAnchor;
-						target._lpa = vnode.targetAnchor && nextSibling(vnode.targetAnchor);
-						break;
-					}
-				}
-				targetAnchor = nextSibling(targetAnchor);
-			}
+			hydrateAnchor(target, targetNode);
 			if (!vnode.targetAnchor) prepareAnchor(target, vnode, createText, insert);
 			hydrateChildren(targetNode && nextSibling(targetNode), vnode, target, parentComponent, parentSuspense, slotScopeIds, optimized);
 		}
 		updateCssVars(vnode, disabled);
 	} else if (disabled) {
-		if (vnode.shapeFlag & 16) hydrateDisabledTeleport(node, vnode, node, nextSibling(node));
+		if (vnode.shapeFlag & 16) {
+			hydrateDisabledTeleport(node, vnode);
+			vnode.targetStart = node;
+			vnode.targetAnchor = nextSibling(node);
+		}
 	}
 	return vnode.anchor && nextSibling(vnode.anchor);
 }
@@ -3352,13 +3360,13 @@ function updateCssVars(vnode, isDisabled) {
 		ctx.ut();
 	}
 }
-function prepareAnchor(target, vnode, createText, insert) {
+function prepareAnchor(target, vnode, createText, insert, anchor = null) {
 	const targetStart = vnode.targetStart = createText("");
 	const targetAnchor = vnode.targetAnchor = createText("");
 	targetStart[TeleportEndKey] = targetAnchor;
 	if (target) {
-		insert(targetStart, target);
-		insert(targetAnchor, target);
+		insert(targetStart, target, anchor);
+		insert(targetAnchor, target, anchor);
 	}
 	return targetAnchor;
 }
@@ -3485,6 +3493,7 @@ function resolveTransitionHooks(vnode, props, state, instance, postClone) {
 	const key = String(vnode.key);
 	const leavingVNodesCache = getLeavingNodesForType(state, vnode);
 	return baseResolveTransitionHooks({
+		isLeaving: () => leavingVNodesCache[key] === vnode,
 		setLeavingNodeCache: () => {
 			leavingVNodesCache[key] = vnode;
 		},
@@ -3503,7 +3512,7 @@ function resolveTransitionHooks(vnode, props, state, instance, postClone) {
 	}, props, state, instance);
 }
 function baseResolveTransitionHooks(context, props, state, instance) {
-	const { setLeavingNodeCache, unsetLeavingNodeCache, earlyRemove, cloneHooks } = context;
+	const { isLeaving, setLeavingNodeCache, unsetLeavingNodeCache, earlyRemove, cloneHooks } = context;
 	const { appear, mode, persisted = false, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled, onBeforeAppear, onAppear, onAfterAppear, onAppearCancelled } = props;
 	const callHook = (hook, args) => {
 		hook && callWithAsyncErrorHandling(hook, instance, 9, args);
@@ -3527,6 +3536,7 @@ function baseResolveTransitionHooks(context, props, state, instance) {
 			callHook(hook, [el]);
 		},
 		enter(el) {
+			if (isLeaving()) return;
 			let hook = onEnter;
 			let afterHook = onAfterEnter;
 			let cancelHook = onEnterCancelled;
@@ -3536,7 +3546,7 @@ function baseResolveTransitionHooks(context, props, state, instance) {
 				cancelHook = onAppearCancelled || onEnterCancelled;
 			} else return;
 			let called = false;
-			const done = el[enterCbKey$1] = (cancelled) => {
+			el[enterCbKey$1] = (cancelled) => {
 				if (called) return;
 				called = true;
 				if (cancelled) callHook(cancelHook, [el]);
@@ -3544,6 +3554,7 @@ function baseResolveTransitionHooks(context, props, state, instance) {
 				if (hooks.delayedLeave) hooks.delayedLeave();
 				el[enterCbKey$1] = void 0;
 			};
+			const done = el[enterCbKey$1].bind(null, false);
 			if (hook) callAsyncHook(hook, [el, done]);
 			else done();
 		},
@@ -3552,7 +3563,7 @@ function baseResolveTransitionHooks(context, props, state, instance) {
 			if (state.isUnmounting) return remove();
 			callHook(onBeforeLeave, [el]);
 			let called = false;
-			const done = el[leaveCbKey] = (cancelled) => {
+			el[leaveCbKey] = (cancelled) => {
 				if (called) return;
 				called = true;
 				remove();
@@ -3562,6 +3573,7 @@ function baseResolveTransitionHooks(context, props, state, instance) {
 				unsetLeavingNodeCache(el);
 			};
 			setLeavingNodeCache(el);
+			const done = el[leaveCbKey].bind(null, false);
 			if (onLeave) callAsyncHook(onLeave, [el, done]);
 			else done();
 		},
@@ -3659,8 +3671,7 @@ function useTemplateRef(key) {
 	const r = /* @__PURE__ */ shallowRef(null);
 	if (i) {
 		const refs = i.refs === EMPTY_OBJ ? i.refs = {} : i.refs;
-		let desc;
-		if ((desc = Object.getOwnPropertyDescriptor(refs, key)) && !desc.configurable) warn$1(`useTemplateRef('${key}') already exists.`);
+		if (isTemplateRefKey(refs, key)) warn$1(`useTemplateRef('${key}') already exists.`);
 		else Object.defineProperty(refs, key, {
 			enumerable: true,
 			get: () => r.value,
@@ -3671,6 +3682,10 @@ function useTemplateRef(key) {
 	knownTemplateRefs.add(ret);
 	return ret;
 }
+function isTemplateRefKey(refs, key) {
+	let desc;
+	return !!((desc = Object.getOwnPropertyDescriptor(refs, key)) && !desc.configurable);
+}
 
 //#endregion
 //#region packages/runtime-core/src/rendererTemplateRef.ts
@@ -3697,9 +3712,11 @@ function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
 	const oldRef = oldRawRef && oldRawRef.r;
 	const refs = owner.refs === EMPTY_OBJ ? owner.refs = {} : owner.refs;
 	const setupState = owner.setupState;
-	const canSetSetupRef = createCanSetSetupRefChecker(setupState);
-	const canSetRef = (ref) => {
-		return !knownTemplateRefs.has(ref);
+	const canSetSetupRef = createCanSetSetupRefChecker(setupState, refs);
+	const canSetRef = (ref, key) => {
+		if (knownTemplateRefs.has(ref)) return false;
+		if (key && isTemplateRefKey(refs, key)) return false;
+		return true;
 	};
 	if (oldRef != null && oldRef !== ref) {
 		invalidatePendingSetRef(oldRawRef);
@@ -3707,8 +3724,8 @@ function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
 			refs[oldRef] = null;
 			if (canSetSetupRef(oldRef)) setupState[oldRef] = null;
 		} else if (/* @__PURE__ */ isRef(oldRef)) {
-			if (canSetRef(oldRef)) oldRef.value = null;
 			const oldRawRefAtom = oldRawRef;
+			if (canSetRef(oldRef, oldRawRefAtom.k)) oldRef.value = null;
 			if (oldRawRefAtom.k) refs[oldRawRefAtom.k] = null;
 		}
 	}
@@ -3726,7 +3743,7 @@ function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
 						if (canSetSetupRef(ref)) setupState[ref] = refs[ref];
 					} else {
 						const newVal = [refValue];
-						if (canSetRef(ref)) ref.value = newVal;
+						if (canSetRef(ref, rawRef.k)) ref.value = newVal;
 						if (rawRef.k) refs[rawRef.k] = newVal;
 					}
 					else if (!existing.includes(refValue)) existing.push(refValue);
@@ -3734,7 +3751,7 @@ function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
 					refs[ref] = value;
 					if (canSetSetupRef(ref)) setupState[ref] = value;
 				} else if (_isRef) {
-					if (canSetRef(ref)) ref.value = value;
+					if (canSetRef(ref, rawRef.k)) ref.value = value;
 					if (rawRef.k) refs[rawRef.k] = value;
 				} else warn$1("Invalid template ref type:", ref, `(${typeof ref})`);
 			};
@@ -3752,11 +3769,12 @@ function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount = false) {
 		} else warn$1("Invalid template ref type:", ref, `(${typeof ref})`);
 	}
 }
-function createCanSetSetupRefChecker(setupState) {
+function createCanSetSetupRefChecker(setupState, refs) {
 	const rawSetupState = /* @__PURE__ */ toRaw(setupState);
 	return setupState === void 0 || setupState === EMPTY_OBJ ? NO : (key) => {
 		if (hasOwn(rawSetupState, key) && !/* @__PURE__ */ isRef(rawSetupState[key])) warn$1(`Template ref "${key}" used on a non-ref value. It will not work in the production build.`);
 		if (knownTemplateRefs.has(rawSetupState[key])) return false;
+		if (isTemplateRefKey(refs, key)) return false;
 		return hasOwn(rawSetupState, key);
 	};
 }
@@ -4620,7 +4638,6 @@ function deactivate(vnode, container, { m: move }, parentComponent, parentSuspen
 		instance.isDeactivated = true;
 	}, void 0, parentSuspense);
 	devtoolsComponentAdded(instance);
-	instance.__keepAliveStorageContainer = container;
 }
 
 //#endregion
@@ -5164,11 +5181,16 @@ function withAsyncContext(getAwaitable) {
 	if (!ctx) warn$1("withAsyncContext called without active current instance. This is likely a bug.");
 	let awaitable = getAwaitable();
 	setCurrentInstance(null, void 0);
+	const cleanup = () => setCurrentInstance(null, void 0);
 	if (isPromise(awaitable)) awaitable = awaitable.catch((e) => {
 		setCurrentInstance(ctx);
+		Promise.resolve().then(() => Promise.resolve().then(cleanup));
 		throw e;
 	});
-	return [awaitable, () => setCurrentInstance(ctx)];
+	return [awaitable, () => {
+		setCurrentInstance(ctx);
+		Promise.resolve().then(cleanup);
+	}];
 }
 
 //#endregion
@@ -5863,7 +5885,7 @@ function shouldUpdateComponent(prevVNode, nextVNode, optimized) {
 			const dynamicProps = nextVNode.dynamicProps;
 			for (let i = 0; i < dynamicProps.length; i++) {
 				const key = dynamicProps[i];
-				if (nextProps[key] !== prevProps[key] && !isEmitListener(emits, key)) return true;
+				if (hasPropValueChanged(nextProps, prevProps, key) && !isEmitListener(emits, key)) return true;
 			}
 		}
 	} else {
@@ -5882,10 +5904,16 @@ function hasPropsChanged(prevProps, nextProps, emitsOptions) {
 	if (nextKeys.length !== Object.keys(prevProps).length) return true;
 	for (let i = 0; i < nextKeys.length; i++) {
 		const key = nextKeys[i];
-		if (nextProps[key] !== prevProps[key] && !isEmitListener(emitsOptions, key)) return true;
+		if (hasPropValueChanged(nextProps, prevProps, key) && !isEmitListener(emitsOptions, key)) return true;
 	}
 	return false;
 }
+function hasPropValueChanged(nextProps, prevProps, key) {
+	const nextProp = nextProps[key];
+	const prevProp = prevProps[key];
+	if (key === "style" && isObject(nextProp) && isObject(prevProp)) return !looseEqual(nextProp, prevProp);
+	return nextProp !== prevProp;
+}
 function updateHOCHostEl({ vnode, parent }, el) {
 	while (parent && !parent.vapor) {
 		const root = parent.subTree;
@@ -6377,7 +6405,7 @@ function baseCreateRenderer(options, createHydrationFns) {
 				processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized);
 				break;
 			case VaporSlot:
-				getVaporInterface(parentComponent, n2).slot(n1, n2, container, anchor, parentComponent);
+				getVaporInterface(parentComponent, n2).slot(n1, n2, container, anchor, parentComponent, parentSuspense);
 				break;
 			default: if (shapeFlag & 1) processElement(n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized);
 			else if (shapeFlag & 6) processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized);
@@ -6392,13 +6420,7 @@ function baseCreateRenderer(options, createHydrationFns) {
 		if (n1 == null) hostInsert(n2.el = hostCreateText(n2.children), container, anchor);
 		else {
 			const el = n2.el = n1.el;
-			if (n2.children !== n1.children) if (isHmrUpdating && n2.patchFlag === -1 && "__elIndex" in n1) {
-				const childNodes = container.childNodes;
-				const newChild = hostCreateText(n2.children);
-				const oldChild = childNodes[n2.__elIndex = n1.__elIndex];
-				hostInsert(newChild, container, oldChild);
-				hostRemove(oldChild);
-			} else hostSetText(el, n2.children);
+			if (n2.children !== n1.children) hostSetText(el, n2.children);
 		}
 	};
 	const processCommentNode = (n1, n2, container, anchor) => {
@@ -6734,7 +6756,9 @@ function baseCreateRenderer(options, createHydrationFns) {
 							updateComponentPreRender(instance, next, optimized);
 						}
 						nonHydratedAsyncRoot.asyncDep.then(() => {
-							if (!instance.isUnmounted) this.fn();
+							queuePostRenderEffect(() => {
+								if (!instance.isUnmounted) instance.update();
+							}, void 0, parentSuspense);
 						});
 						return;
 					}
@@ -7143,8 +7167,10 @@ function traverseStaticChildren(n1, n2, shallow = false) {
 			}
 			if (!shallow && c2.patchFlag !== -2) traverseStaticChildren(c1, c2);
 		}
-		if (c2.type === Text) if (c2.patchFlag !== -1) c2.el = c1.el;
-		else c2.__elIndex = i + (n1.type === Fragment ? 1 : 0);
+		if (c2.type === Text) {
+			if (c2.patchFlag === -1) c2 = ch2[i] = cloneIfMounted(c2);
+			c2.el = c1.el;
+		}
 		if (c2.type === Comment && !c2.el) c2.el = c1.el;
 		c2.el && (c2.el.__vnode = c2);
 	}
@@ -8385,7 +8411,7 @@ function isMemoSame(cached, memo) {
 
 //#endregion
 //#region packages/runtime-core/src/index.ts
-const version = "3.6.0-beta.5";
+const version = "3.6.0-beta.7";
 const warn = warn$1;
 /**
 * Runtime error messages. Only exposed in dev or esm builds.
@@ -9503,10 +9529,7 @@ const TransitionGroupImpl = /* @__PURE__ */ decorate({
 				if (child.el && child.el instanceof Element) {
 					prevChildren.push(child);
 					setTransitionHooks(child, resolveTransitionHooks(child, cssTransitionProps, state, instance));
-					positionMap.set(child, {
-						left: child.el.offsetLeft,
-						top: child.el.offsetTop
-					});
+					positionMap.set(child, getPosition(child.el));
 				}
 			}
 			children = slots.default ? getTransitionRawChildren(slots.default()) : [];
@@ -9525,10 +9548,7 @@ function callPendingCbs(el) {
 	if (el[enterCbKey]) el[enterCbKey]();
 }
 function recordPosition(c) {
-	newPositionMap.set(c, {
-		left: c.el.offsetLeft,
-		top: c.el.offsetTop
-	});
+	newPositionMap.set(c, getPosition(c.el));
 }
 function applyTranslation(c) {
 	if (baseApplyTranslation(positionMap.get(c), newPositionMap.get(c), c.el)) return c;
@@ -9538,12 +9558,28 @@ function baseApplyTranslation(oldPos, newPos, el) {
 	const dy = oldPos.top - newPos.top;
 	if (dx || dy) {
 		const s = el.style;
-		s.transform = s.webkitTransform = `translate(${dx}px,${dy}px)`;
+		const rect = el.getBoundingClientRect();
+		let scaleX = 1;
+		let scaleY = 1;
+		if (el.offsetWidth) scaleX = rect.width / el.offsetWidth;
+		if (el.offsetHeight) scaleY = rect.height / el.offsetHeight;
+		if (!Number.isFinite(scaleX) || scaleX === 0) scaleX = 1;
+		if (!Number.isFinite(scaleY) || scaleY === 0) scaleY = 1;
+		if (Math.abs(scaleX - 1) < .01) scaleX = 1;
+		if (Math.abs(scaleY - 1) < .01) scaleY = 1;
+		s.transform = s.webkitTransform = `translate(${dx / scaleX}px,${dy / scaleY}px)`;
 		s.transitionDuration = "0s";
 		return true;
 	}
 	return false;
 }
+function getPosition(el) {
+	const rect = el.getBoundingClientRect();
+	return {
+		left: rect.left,
+		top: rect.top
+	};
+}
 function hasCSSTransform(el, root, moveClass) {
 	const clone = el.cloneNode();
 	const _vtc = el[vtcKey];
@@ -9830,6 +9866,7 @@ const modifierGuards = {
 * @private
 */
 const withModifiers = (fn, modifiers) => {
+	if (!fn) return fn;
 	const cache = fn._withMods || (fn._withMods = {});
 	const cacheKey = modifiers.join(".");
 	return cache[cacheKey] || (cache[cacheKey] = ((event, ...args) => {