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

package/dist/runtime-dom.cjs.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
   **/
@@ -1029,10 +1029,7 @@ const TransitionGroupImpl = /* @__PURE__ */ decorate({
 				if (child.el && child.el instanceof Element) {
 					prevChildren.push(child);
 					(0, _vue_runtime_core.setTransitionHooks)(child, (0, _vue_runtime_core.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 ? (0, _vue_runtime_core.getTransitionRawChildren)(slots.default()) : [];
@@ -1051,10 +1048,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;
@@ -1064,12 +1058,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];
@@ -1374,6 +1384,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.cjs.prod.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
   **/
@@ -975,10 +975,7 @@ const TransitionGroupImpl = /* @__PURE__ */ decorate({
 				if (child.el && child.el instanceof Element) {
 					prevChildren.push(child);
 					(0, _vue_runtime_core.setTransitionHooks)(child, (0, _vue_runtime_core.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 ? (0, _vue_runtime_core.getTransitionRawChildren)(slots.default()) : [];
@@ -996,10 +993,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;
@@ -1009,12 +1003,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];
@@ -1316,6 +1326,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.esm-browser.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 @@ 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);
 }
@@ -3254,13 +3262,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;
 }
@@ -3438,7 +3446,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]);
@@ -3446,6 +3454,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();
 		},
@@ -3454,7 +3463,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();
@@ -3464,6 +3473,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();
 		},
@@ -3561,8 +3571,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,
@@ -3573,6 +3582,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
@@ -3599,9 +3612,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);
@@ -3609,8 +3624,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;
 		}
 	}
@@ -3628,7 +3643,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);
@@ -3636,7 +3651,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})`);
 			};
@@ -3654,11 +3669,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);
 	};
 }
@@ -5765,7 +5781,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 {
@@ -5784,10 +5800,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;
@@ -6294,13 +6316,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) => {
@@ -6636,7 +6652,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;
 					}
@@ -7045,8 +7063,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);
 	}
@@ -8287,7 +8307,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.6";
 const warn = warn$1;
 /**
 * Runtime error messages. Only exposed in dev or esm builds.
@@ -9405,10 +9425,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()) : [];
@@ -9427,10 +9444,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;
@@ -9440,12 +9454,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];
@@ -9732,6 +9762,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) => {