@vue/runtime-dom 3.6.0-beta.5 → 3.6.0-beta.6

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

@@ -1,5 +1,5 @@
 /**
-  * @vue/runtime-dom v3.6.0-beta.5
+  * @vue/runtime-dom v3.6.0-beta.6
   * (c) 2018-present Yuxi (Evan) You and Vue contributors
   * @license MIT
   **/
@@ -1111,10 +1111,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()) : [];
@@ -1133,10 +1130,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;
@@ -1146,12 +1140,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];
@@ -1456,6 +1466,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) => {

package/dist/runtime-dom.global.js

@@ -1,5 +1,5 @@
 /**
-  * @vue/runtime-dom v3.6.0-beta.5
+  * @vue/runtime-dom v3.6.0-beta.6
   * (c) 2018-present Yuxi (Evan) You and Vue contributors
   * @license MIT
   **/
@@ -3202,36 +3202,44 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		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);
 	}
@@ -3254,13 +3262,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			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;
 	}
@@ -3438,7 +3446,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 					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]);
@@ -3446,6 +3454,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 					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();
 			},
@@ -3454,7 +3463,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 				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();
@@ -3464,6 +3473,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 					unsetLeavingNodeCache(el);
 				};
 				setLeavingNodeCache(el);
+				const done = el[leaveCbKey].bind(null, false);
 				if (onLeave) callAsyncHook(onLeave, [el, done]);
 				else done();
 			},
@@ -3561,8 +3571,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		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,
@@ -3573,6 +3582,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		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
@@ -3599,9 +3612,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		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);
@@ -3609,8 +3624,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 				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;
 			}
 		}
@@ -3628,7 +3643,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 							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);
@@ -3636,7 +3651,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 						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})`);
 				};
@@ -3654,11 +3669,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			} 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);
 		};
 	}
@@ -5765,7 +5781,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 				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 {
@@ -5784,10 +5800,16 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		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;
@@ -6294,13 +6316,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 			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) => {
@@ -6636,7 +6652,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 								updateComponentPreRender(instance, next, optimized);
 							}
 							nonHydratedAsyncRoot.asyncDep.then(() => {
-								if (!instance.isUnmounted) this.fn();
+								queuePostRenderEffect(() => {
+									if (!instance.isUnmounted) instance.update();
+								}, void 0, parentSuspense);
 							});
 							return;
 						}
@@ -7045,8 +7063,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 				}
 				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);
 		}
@@ -8287,7 +8307,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 //#endregion
 //#region packages/runtime-core/src/index.ts
-	const version = "3.6.0-beta.5";
+	const version = "3.6.0-beta.6";
 	const warn = warn$1;
 	/**
 	* Runtime error messages. Only exposed in dev or esm builds.
@@ -9389,10 +9409,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 					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()) : [];
@@ -9411,10 +9428,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		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;
@@ -9424,12 +9438,28 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 		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];
@@ -9716,6 +9746,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 	* @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) => {