@vue/compiler-vapor 3.6.0-beta.14 → 3.6.0-beta.16

package/dist/compiler-vapor.cjs.js

@@ -1,5 +1,5 @@
 /**
-  * @vue/compiler-vapor v3.6.0-beta.14
+  * @vue/compiler-vapor v3.6.0-beta.16
   * (c) 2018-present Yuxi (Evan) You and Vue contributors
   * @license MIT
   **/
@@ -152,7 +152,7 @@ const EMPTY_EXPRESSION = (0, _vue_compiler_dom.createSimpleExpression)("", true)
 //#region packages/compiler-vapor/src/utils.ts
 const findProp$1 = _vue_compiler_dom.findProp;
 /** find directive */
-const findDir$2 = _vue_compiler_dom.findDir;
+const findDir$3 = _vue_compiler_dom.findDir;
 function propToExpression(prop) {
 	return prop.type === 6 ? prop.value ? (0, _vue_compiler_dom.createSimpleExpression)(prop.value.content, true, prop.value.loc) : EMPTY_EXPRESSION : prop.exp;
 }
@@ -193,6 +193,13 @@ function getLiteralExpressionValue(exp, excludeNumber) {
 	}
 	return exp.isStatic ? exp.content : null;
 }
+function isInTransition(context) {
+	const parentNode = context.parent && context.parent.node;
+	return !!(parentNode && isTransitionNode(parentNode));
+}
+function isTransitionNode(node) {
+	return node.type === 1 && isTransitionTag(node.tag);
+}
 function isTransitionTag(tag) {
 	tag = tag.toLowerCase();
 	return tag === "transition" || tag === "vaportransition";
@@ -424,6 +431,7 @@ const defaultOptions = {
 	bindingMetadata: _vue_shared.EMPTY_OBJ,
 	inline: false,
 	isTS: false,
+	eventDelegation: true,
 	onError: _vue_compiler_dom.defaultOnError,
 	onWarn: _vue_compiler_dom.defaultOnWarn
 };
@@ -663,6 +671,8 @@ function genPrependNode(oper, { helper }) {
 function genExpression(node, context, assignment) {
 	node = context.getExpressionReplacement(node);
 	const { content, ast, isStatic, loc } = node;
+	const { options } = context;
+	const { inline } = options;
 	if (isStatic) return [[
 		JSON.stringify(content),
 		-2,
@@ -684,23 +694,31 @@ function genExpression(node, context, assignment) {
 	let hasMemberExpression = false;
 	if (ids.length) {
 		const [frag, push] = buildCodeFragment();
-		ids.sort((a, b) => a.start - b.start).forEach((id, i) => {
-			const start = id.start - 1;
-			const end = id.end - 1;
-			const last = ids[i - 1];
-			const leadingText = content.slice(last ? last.end - 1 : 0, start);
-			if (leadingText.length) push([leadingText, -3]);
-			const source = content.slice(start, end);
+		let lastEnd = 0;
+		ids.sort((a, b) => a.start - b.start).forEach((id) => {
+			const idStart = id.start - 1;
+			const idEnd = id.end - 1;
+			const source = content.slice(idStart, idEnd);
 			const parentStack = parentStackMap.get(id);
 			const parent = parentStack[parentStack.length - 1];
+			let start = idStart;
+			let end = idEnd;
+			if (inline && options.bindingMetadata && options.bindingMetadata[source] === "setup-let" && parent && parent.type === "UpdateExpression" && parent.argument === id) {
+				start = parent.start - 1;
+				end = parent.end - 1;
+			}
+			if (start < lastEnd) return;
+			const leadingText = content.slice(lastEnd, start);
+			if (leadingText.length) push([leadingText, -3]);
 			hasMemberExpression || (hasMemberExpression = parent && (parent.type === "MemberExpression" || parent.type === "OptionalMemberExpression"));
 			push(...genIdentifier(source, context, {
 				start: (0, _vue_compiler_dom.advancePositionWithClone)(node.loc.start, source, start),
 				end: (0, _vue_compiler_dom.advancePositionWithClone)(node.loc.start, source, end),
 				source
-			}, hasMemberExpression ? void 0 : assignment, id, parent, parentStack));
-			if (i === ids.length - 1 && end < content.length) push([content.slice(end), -3]);
+			}, hasMemberExpression ? void 0 : assignment, id, parent, parentStack, node));
+			lastEnd = end;
 		});
+		if (lastEnd < content.length) push([content.slice(lastEnd), -3]);
 		if (assignment && hasMemberExpression) push(` = ${assignment}`);
 		return frag;
 	} else return [[
@@ -709,7 +727,7 @@ function genExpression(node, context, assignment) {
 		loc
 	]];
 }
-function genIdentifier(raw, context, loc, assignment, id, parent, parentStack) {
+function genIdentifier(raw, context, loc, assignment, id, parent, parentStack, sourceNode) {
 	const { options, helper, identifiers } = context;
 	const { inline, bindingMetadata } = options;
 	let name = raw;
@@ -729,19 +747,49 @@ function genIdentifier(raw, context, loc, assignment, id, parent, parentStack) {
 		else return genExpression(replacement, context, assignment);
 	}
 	let prefix;
-	if ((0, _vue_compiler_dom.isStaticProperty)(parent) && parent.shorthand) prefix = `${raw}: `;
 	const type = bindingMetadata && bindingMetadata[raw];
+	const isDestructureAssignment = parent && (0, _vue_compiler_dom.isInDestructureAssignment)(parent, parentStack || []);
+	const isAssignmentLVal = parent && parent.type === "AssignmentExpression" && parent.left === id;
+	const isUpdateArg = parent && parent.type === "UpdateExpression" && parent.argument === id;
+	if ((0, _vue_compiler_dom.isStaticProperty)(parent) && parent.shorthand && !(inline && type === "setup-let" && isDestructureAssignment)) prefix = `${raw}: `;
 	if (inline) switch (type) {
 		case "setup-let":
-			name = raw = assignment ? `_isRef(${raw}) ? (${raw}.value = ${assignment}) : (${raw} = ${assignment})` : unref();
+			if (isAssignmentLVal) {
+				const { right, operator } = parent;
+				const source = sourceNode;
+				const sourceContent = source.content;
+				const rightStart = right.start - 1;
+				const rightEnd = right.end - 1;
+				const rightContent = sourceContent.slice(rightStart, rightEnd);
+				const rightExp = (0, _vue_compiler_dom.createSimpleExpression)(rightContent, false, {
+					start: (0, _vue_compiler_dom.advancePositionWithClone)(source.loc.start, sourceContent, rightStart),
+					end: (0, _vue_compiler_dom.advancePositionWithClone)(source.loc.start, sourceContent, rightEnd),
+					source: rightContent
+				});
+				rightExp.ast = parseExp(context, rightContent);
+				return [
+					prefix,
+					`${helper("isRef")}(${raw}) ? ${raw}.value ${operator} `,
+					...genExpression(rightExp, context),
+					` : `,
+					[
+						raw,
+						-2,
+						loc,
+						name
+					]
+				];
+			} else if (isUpdateArg) {
+				const { prefix: isPrefix, operator } = parent;
+				const updatePrefix = isPrefix ? operator : ``;
+				const updatePostfix = isPrefix ? `` : operator;
+				raw = `${helper("isRef")}(${raw}) ? ${updatePrefix}${raw}.value${updatePostfix} : ${updatePrefix}${raw}${updatePostfix}`;
+			} else if (!isDestructureAssignment) name = raw = assignment ? `${helper("isRef")}(${raw}) ? (${raw}.value = ${assignment}) : (${raw} = ${assignment})` : unref();
 			break;
 		case "setup-ref":
 			name = raw = withAssignment(`${raw}.value`);
 			break;
 		case "setup-maybe-ref":
-			const isDestructureAssignment = parent && (0, _vue_compiler_dom.isInDestructureAssignment)(parent, parentStack || []);
-			const isAssignmentLVal = parent && parent.type === "AssignmentExpression" && parent.left === id;
-			const isUpdateArg = parent && parent.type === "UpdateExpression" && parent.argument === id;
 			raw = isAssignmentLVal || isUpdateArg || isDestructureAssignment ? name = `${raw}.value` : assignment ? `${helper("isRef")}(${raw}) ? (${raw}.value = ${assignment}) : null` : unref();
 			break;
 		case "props":
@@ -1645,7 +1693,12 @@ function genPropKey({ key: node, modifier, runtimeCamelize, handler, handlerModi
 	if (runtimeCamelize) {
 		key.push(" || \"\"");
 		key = genCall(helper("camelize"), key);
-	}
+	} else if (modifier) key = [
+		"(",
+		...key,
+		" || \"\"",
+		")"
+	];
 	if (handler) key = genCall(helper("toHandlerKey"), key);
 	return [
 		"[",
@@ -1737,6 +1790,11 @@ function genVShow(oper, context) {
 	])];
 }
 //#endregion
+//#region packages/compiler-vapor/src/generators/modifier.ts
+function genDirectiveModifiers(modifiers) {
+	return modifiers.map((value) => `${(0, _vue_compiler_dom.isSimpleIdentifier)(value) ? value : JSON.stringify(value)}: true`).join(", ");
+}
+//#endregion
 //#region packages/compiler-vapor/src/generators/vModel.ts
 const helperMap = {
 	text: "applyTextModel",
@@ -1751,7 +1809,7 @@ function genVModel(oper, context) {
 		`() => (`,
 		...genExpression(exp, context),
 		`)`
-	], genModelHandler(exp, context), modifiers.length ? `{ ${modifiers.map((e) => e.content + ": true").join(",")} }` : void 0)];
+	], genModelHandler(exp, context), modifiers.length ? `{ ${genDirectiveModifiers(modifiers.map((e) => e.content))} }` : void 0)];
 }
 function genModelHandler(exp, context) {
 	return [
@@ -1793,14 +1851,15 @@ function genCustomDirectives(opers, context) {
 		return genMulti(DELIMITERS_ARRAY.concat("void 0"), directiveVar, value, argument, modifiers);
 	}
 }
-function genDirectiveModifiers(modifiers) {
-	return modifiers.map((value) => `${(0, _vue_compiler_dom.isSimpleIdentifier)(value) ? value : JSON.stringify(value)}: true`).join(", ");
-}
 function filterCustomDirectives(id, operations) {
 	return operations.filter((oper) => oper.type === 14 && oper.element === id && !oper.builtin);
 }
 //#endregion
 //#region packages/compiler-vapor/src/generators/component.ts
+function genStaticModifierPropKey(name) {
+	const key = (0, _vue_shared.getModifierPropName)(name);
+	return [(0, _vue_compiler_dom.isSimpleIdentifier)(key) ? key : JSON.stringify(key)];
+}
 function genCreateComponent(operation, context) {
 	const { helper } = context;
 	const singleUseAssetComponentNames = context.singleUseAssetComponentNames;
@@ -1942,7 +2001,7 @@ function genStaticProps(props, context, dynamicProps, directStaticLiteralProps =
 			}
 			const { key, modelModifiers } = prop;
 			if (modelModifiers && modelModifiers.length) {
-				const modifiersKey = key.isStatic ? [(0, _vue_shared.getModifierPropName)(key.content)] : [
+				const modifiersKey = key.isStatic ? genStaticModifierPropKey(key.content) : [
 					"[",
 					...genExpression(key, context),
 					" + \"Modifiers\"]"
@@ -1985,7 +2044,7 @@ function genDynamicProps(props, context, directStaticLiteralProps = false) {
 			]);
 			const { modelModifiers } = p;
 			if (modelModifiers && modelModifiers.length) {
-				const modifiersKey = p.key.isStatic ? [(0, _vue_shared.getModifierPropName)(p.key.content)] : [
+				const modifiersKey = p.key.isStatic ? genStaticModifierPropKey(p.key.content) : [
 					"[",
 					...genExpression(p.key, context),
 					" + \"Modifiers\"]"
@@ -2110,7 +2169,7 @@ function genDynamicSlot(slot, context, withFunction = false) {
 }
 function genBasicDynamicSlot(slot, context) {
 	const { name, fn } = slot;
-	return genMulti(DELIMITERS_OBJECT_NEWLINE, ["name: ", ...genExpression(name, context)], ["fn: ", ...genSlotBlockWithProps(fn, context)]);
+	return genMulti(DELIMITERS_OBJECT_NEWLINE, ["name: ", ...genExpression(name, context)], ["fn: ", ...genSlotBlockWithProps(fn, context, false)]);
 }
 function genLoopSlot(slot, context) {
 	const { name, fn, loop } = slot;
@@ -2122,7 +2181,7 @@ function genLoopSlot(slot, context) {
 	if (rawValue) idMap[rawValue] = rawValue;
 	if (rawKey) idMap[rawKey] = rawKey;
 	if (rawIndex) idMap[rawIndex] = rawIndex;
-	const slotExpr = genMulti(DELIMITERS_OBJECT_NEWLINE, ["name: ", ...context.withId(() => genExpression(name, context), idMap)], ["fn: ", ...context.withId(() => genSlotBlockWithProps(fn, context), idMap)]);
+	const slotExpr = genMulti(DELIMITERS_OBJECT_NEWLINE, ["name: ", ...context.withId(() => genExpression(name, context), idMap)], ["fn: ", ...context.withId(() => genSlotBlockWithProps(fn, context, false), idMap)]);
 	return [...genCall(context.helper("createForSlots"), genExpression(source, context), [
 		...genMulti([
 			"(",
@@ -2148,7 +2207,7 @@ function genConditionalSlot(slot, context) {
 		INDENT_END
 	];
 }
-function genSlotBlockWithProps(oper, context) {
+function genSlotBlockWithProps(oper, context, emitNonStableFlag = true) {
 	let propsName;
 	let exitScope;
 	let depth;
@@ -2163,10 +2222,45 @@ function genSlotBlockWithProps(oper, context) {
 	const exitSlotBlock = context.enterSlotBlock();
 	markSlotRootOperations(oper);
 	let blockFn = context.withId(() => genBlock(oper, context, propsName ? [propsName] : []), idMap);
+	if (emitNonStableFlag && !hasStableSlotRoot(oper, context)) blockFn = genCall(context.helper("extend"), blockFn, `{ _: 8 }`);
 	exitSlotBlock();
 	exitScope && exitScope();
 	return blockFn;
 }
+const commentOnlyTemplateRE = /^(?:<!--[\s\S]*?-->)+$/;
+function hasStableSlotRoot(block, context) {
+	let hasValidRoot = false;
+	for (let i = 0; i < block.returns.length; i++) {
+		const id = block.returns[i];
+		const child = findReturnedDynamic$1(block, id);
+		const operation = child && child.operation;
+		if (!operation) {
+			if (child && isStableTemplateSlotRoot(child, context)) hasValidRoot = true;
+			continue;
+		}
+		switch (operation.type) {
+			case 12:
+				if (!operation.dynamic || operation.dynamic.isStatic) {
+					hasValidRoot = true;
+					continue;
+				}
+				return false;
+			case 17:
+				if (hasStableSlotRoot(operation.block, context)) {
+					hasValidRoot = true;
+					continue;
+				}
+				return false;
+			default: return false;
+		}
+	}
+	return hasValidRoot;
+}
+function isStableTemplateSlotRoot(child, context) {
+	if (child.template == null) return false;
+	const content = context.ir.template.entries[child.template].content;
+	return content !== "" && !commentOnlyTemplateRE.test(content.trim());
+}
 //#endregion
 //#region packages/compiler-vapor/src/generators/slotOutlet.ts
 function genSlotOutlet(oper, context) {
@@ -2503,7 +2597,7 @@ function genBlockContent(block, context, root, genEffectsExtraFrag) {
 	else if (genEffectsExtraFrag) push(...genEffects([], context, genEffectsExtraFrag));
 	push(NEWLINE, `return `);
 	const returnNodes = returns.map((n) => `n${n}`);
-	push(...returnNodes.length > 1 ? genMulti(DELIMITERS_ARRAY, ...returnNodes) : [returnNodes[0] || "null"]);
+	push(...returnNodes.length > 1 ? genMulti(DELIMITERS_ARRAY, ...returnNodes) : [returnNodes[0] || "[]"]);
 	resetBlock();
 	context.singleUseAssetComponentNames = prevSingleUseAssetComponentNames;
 	return frag;
@@ -2842,11 +2936,36 @@ const transformVBind = (dir, node, context) => {
 	};
 };
 //#endregion
+//#region packages/compiler-vapor/src/transforms/vHtml.ts
+function ignoreVHtmlChildren(node, context, clear) {
+	if (!node.children.length) return;
+	const dir = (0, _vue_compiler_dom.findDir)(node, "html");
+	if (!dir) return;
+	context.options.onError((0, _vue_compiler_dom.createDOMCompilerError)(55, dir.loc));
+	if (clear === "node") node.children.length = 0;
+	else context.childrenTemplate.length = 0;
+}
+const transformVHtml = (dir, node, context) => {
+	let { exp, loc } = dir;
+	if (!exp) {
+		context.options.onError((0, _vue_compiler_dom.createDOMCompilerError)(54, loc));
+		exp = EMPTY_EXPRESSION;
+	}
+	ignoreVHtmlChildren(node, context, "template");
+	context.registerEffect([exp], {
+		type: 8,
+		element: context.reference(),
+		value: exp,
+		isComponent: node.tagType === 1
+	});
+};
+//#endregion
 //#region packages/compiler-vapor/src/transforms/transformElement.ts
 const isReservedProp = /* @__PURE__ */ (0, _vue_shared.makeMap)(",key,ref,ref_for,ref_key,");
 const transformElement = (node, context) => {
 	let effectIndex = context.block.effect.length;
 	const getEffectIndex = () => effectIndex++;
+	if (node.type === 1 && node.children.length) ignoreVHtmlChildren(node, context, "node");
 	let parentSlots;
 	if (node.type === 1 && (node.tagType === 1 || context.options.isCustomElement(node.tag))) {
 		parentSlots = context.slots;
@@ -2977,7 +3096,6 @@ function transformNativeElement(node, propsResult, staticKey, singleRoot, contex
 	let template = "";
 	template += `<${tag}`;
 	if (scopeId) template += ` ${scopeId}`;
-	const dynamicProps = [];
 	if (propsResult[0]) {
 		const [, dynamicArgs, expressions] = propsResult;
 		context.registerEffect(expressions, {
@@ -2998,54 +3116,25 @@ function transformNativeElement(node, propsResult, staticKey, singleRoot, contex
 		};
 		for (const prop of propsResult[1]) {
 			const { key, values } = prop;
-			if (context.imports.some((imported) => values[0].content.includes(imported.exp.content))) {
+			const canStringifyAttrName = key.isStatic && !UNSAFE_ATTR_NAME_RE.test(key.content);
+			let foldedValue;
+			if (canStringifyAttrName && context.imports.some((imported) => values[0].content.includes(imported.exp.content))) {
 				if (!prevWasQuoted) template += ` `;
 				template += `${key.content}="${IMPORT_EXP_START}${values[0].content}${IMPORT_EXP_END}"`;
 				prevWasQuoted = true;
-			} else if (key.isStatic && !prop.modifier && (0, _vue_shared.isBooleanAttr)(key.content)) if (values.length === 1 && (values[0].isStatic || values[0].content === "''") && !dynamicKeys.includes(key.content)) {
+			} else if (canStringifyAttrName && values.length === 1 && (values[0].isStatic || values[0].content === "''") && !dynamicKeys.includes(key.content)) {
 				const value = values[0].content === "''" ? "" : values[0].content;
 				appendTemplateProp(key.content, value);
-			} else {
-				const include = foldBooleanAttrValue(values);
-				if (include != null) {
-					if (include) appendTemplateProp(key.content);
-				} else {
-					dynamicProps.push(key.content);
-					context.registerEffect(values, {
-						type: 3,
-						element: context.reference(),
-						prop,
-						tag
-					}, getEffectIndex);
-				}
-			}
-			else if (key.isStatic && !prop.modifier && hasBoundValue(values)) {
-				let foldedValue;
-				if (key.content === "class") foldedValue = foldClassValues(values);
-				else if (key.content === "style") foldedValue = foldStyleValues(values);
-				if (foldedValue != null) {
-					if (foldedValue) appendTemplateProp(key.content, foldedValue, true);
-				} else {
-					dynamicProps.push(key.content);
-					context.registerEffect(values, {
-						type: 3,
-						element: context.reference(),
-						prop,
-						tag
-					}, getEffectIndex);
-				}
-			} else if (key.isStatic && values.length === 1 && (values[0].isStatic || values[0].content === "''") && !dynamicKeys.includes(key.content)) {
-				const value = values[0].content === "''" ? "" : values[0].content;
-				appendTemplateProp(key.content, value);
-			} else {
-				dynamicProps.push(key.content);
-				context.registerEffect(values, {
-					type: 3,
-					element: context.reference(),
-					prop,
-					tag
-				}, getEffectIndex);
-			}
+			} else if (canStringifyAttrName && !prop.modifier && (0, _vue_shared.isBooleanAttr)(key.content) && (foldedValue = foldBooleanAttrValue(values)) != null) {
+				if (foldedValue) appendTemplateProp(key.content);
+			} else if (canStringifyAttrName && !prop.modifier && hasBoundValue(values) && (foldedValue = key.content === "class" ? foldClassValues(values) : key.content === "style" ? foldStyleValues(values) : void 0) != null) {
+				if (foldedValue) appendTemplateProp(key.content, foldedValue, true);
+			} else context.registerEffect(values, {
+				type: 3,
+				element: context.reference(),
+				prop,
+				tag
+			}, getEffectIndex);
 		}
 	}
 	template += `>` + context.childrenTemplate.join("");
@@ -3558,25 +3647,6 @@ const transformVOnce = (node, context) => {
 	if (node.type === 1 && (0, _vue_compiler_dom.findDir)(node, "once", true)) context.inVOnce = true;
 };
 //#endregion
-//#region packages/compiler-vapor/src/transforms/vHtml.ts
-const transformVHtml = (dir, node, context) => {
-	let { exp, loc } = dir;
-	if (!exp) {
-		context.options.onError((0, _vue_compiler_dom.createDOMCompilerError)(54, loc));
-		exp = EMPTY_EXPRESSION;
-	}
-	if (node.children.length) {
-		context.options.onError((0, _vue_compiler_dom.createDOMCompilerError)(55, loc));
-		context.childrenTemplate.length = 0;
-	}
-	context.registerEffect([exp], {
-		type: 8,
-		element: context.reference(),
-		value: exp,
-		isComponent: node.tagType === 1
-	});
-};
-//#endregion
 //#region packages/shared/src/makeMap.ts
 /**
 * Make a map and return a function for checking if a key
@@ -3794,12 +3864,10 @@ const transformVOn = (dir, node, context) => {
 	const { keyModifiers, nonKeyModifiers, eventOptionModifiers } = (0, _vue_compiler_dom.resolveModifiers)(arg.isStatic ? `on${arg.content}` : arg, modifiers, null, loc);
 	let keyOverride;
 	const isStaticClick = arg.isStatic && arg.content.toLowerCase() === "click";
-	if (nonKeyModifiers.includes("middle")) {
-		if (keyOverride) {}
-		if (!isStaticClick && !arg.isStatic) keyOverride = ["click", "mouseup"];
-	}
 	if (nonKeyModifiers.includes("right")) {
 		if (!isStaticClick && !arg.isStatic) keyOverride = ["click", "contextmenu"];
+	} else if (nonKeyModifiers.includes("middle")) {
+		if (!isStaticClick && !arg.isStatic) keyOverride = ["click", "mouseup"];
 	}
 	arg = normalizeStaticEventArg(arg, nonKeyModifiers);
 	if (keyModifiers.length && (0, _vue_compiler_dom.isStaticExp)(arg) && !(0, _vue_compiler_dom.isKeyboardEvent)(`on${arg.content.toLowerCase()}`)) keyModifiers.length = 0;
@@ -3813,7 +3881,7 @@ const transformVOn = (dir, node, context) => {
 			options: eventOptionModifiers
 		}
 	};
-	const delegate = arg.isStatic && !eventOptionModifiers.length && !hasStopHandlerForStaticEvent(node, arg.content) && delegatedEvents(arg.content);
+	const delegate = context.options.eventDelegation && arg.isStatic && !eventOptionModifiers.length && !hasStopHandlerForStaticEvent(node, arg.content) && delegatedEvents(arg.content);
 	const operation = {
 		type: 6,
 		element: context.reference(),
@@ -3834,8 +3902,8 @@ function normalizeStaticEventArg(arg, nonKeyModifiers) {
 	if (!arg.isStatic) return arg;
 	let normalized = arg;
 	const isStaticClick = arg.content.toLowerCase() === "click";
-	if (nonKeyModifiers.includes("middle") && isStaticClick) normalized = (0, _vue_shared.extend)({}, normalized, { content: "mouseup" });
 	if (nonKeyModifiers.includes("right") && isStaticClick) normalized = (0, _vue_shared.extend)({}, normalized, { content: "contextmenu" });
+	else if (nonKeyModifiers.includes("middle") && isStaticClick) normalized = (0, _vue_shared.extend)({}, normalized, { content: "mouseup" });
 	return normalized;
 }
 function hasStopHandlerForStaticEvent(node, eventName) {
@@ -4035,11 +4103,14 @@ function processIf(node, dir, context) {
 		}
 		while (lastIfNode.negative && lastIfNode.negative.type === 15) lastIfNode = lastIfNode.negative;
 		if (dir.name === "else-if" && lastIfNode.negative) context.options.onError((0, _vue_compiler_dom.createCompilerError)(30, node.loc));
-		if (context.root.comment.length) {
-			node = wrapTemplate(node, ["else-if", "else"]);
-			context.node = node = (0, _vue_shared.extend)({}, node, { children: [...context.comment, ...node.children] });
+		const comments = context.comment;
+		if (comments.length) {
+			if (!isInTransition(context)) {
+				node = wrapTemplate(node, ["else-if", "else"]);
+				context.node = node = (0, _vue_shared.extend)({}, node, { children: [...comments, ...node.children] });
+			}
+			comments.length = 0;
 		}
-		context.root.comment = [];
 		const [branch, onExit] = createIfBranch(node, context);
 		if (dir.name === "else") lastIfNode.negative = branch;
 		else lastIfNode.negative = {
@@ -4217,7 +4288,7 @@ function createFallback(node, context) {
 //#region packages/compiler-vapor/src/transforms/vSlot.ts
 const transformVSlot = (node, context) => {
 	if (node.type !== 1) return;
-	const dir = findDir$2(node, "slot", true);
+	const dir = findDir$3(node, "slot", true);
 	const { tagType, children } = node;
 	const { parent } = context;
 	const isComponent = tagType === 1;
@@ -4268,9 +4339,9 @@ function transformTemplateSlot(node, dir, context) {
 	const resolvedArg = dir.arg && resolveExpression(dir.arg);
 	let arg = resolvedArg;
 	if (!arg) arg = (0, _vue_compiler_dom.createSimpleExpression)("default", true);
-	const vFor = findDir$2(node, "for");
-	const vIf = findDir$2(node, "if");
-	const vElse = findDir$2(node, /^else(-if)?$/, true);
+	const vFor = findDir$3(node, "for");
+	const vIf = findDir$3(node, "if");
+	const vElse = findDir$3(node, /^else(-if)?$/, true);
 	const { slots } = context;
 	const [block, onExit] = createSlotBlock(node, dir, context);
 	if (!vFor && !vIf && !vElse) {
@@ -4288,7 +4359,7 @@ function transformTemplateSlot(node, dir, context) {
 	});
 	else if (vElse) {
 		const vIfSlot = slots[slots.length - 1];
-		if (vIfSlot.slotType === 3) {
+		if (vIfSlot && vIfSlot.slotType === 3) {
 			let ifNode = vIfSlot;
 			while (ifNode.negative && ifNode.negative.slotType === 3) ifNode = ifNode.negative;
 			const negative = vElse.exp ? {
@@ -4351,7 +4422,7 @@ function isNonWhitespaceContent(node) {
 	return !!node.content.trim();
 }
 function isSlotTemplateChild(node) {
-	return node.type === 1 && (0, _vue_compiler_dom.isTemplateNode)(node) && !!findDir$2(node, "slot", true);
+	return node.type === 1 && (0, _vue_compiler_dom.isTemplateNode)(node) && !!findDir$3(node, "slot", true);
 }
 //#endregion
 //#region packages/compiler-vapor/src/transforms/transformTransition.ts
@@ -4364,17 +4435,17 @@ function hasMultipleChildren(node) {
 	const children = node.children = node.children.filter((c) => c.type !== 3 && !(c.type === 2 && !c.content.trim()));
 	const first = children[0];
 	if (children.length === 1 && first.type === 1) {
-		if (findDir$2(first, "for")) return true;
+		if (findDir$3(first, "for")) return true;
 		if ((0, _vue_compiler_dom.isTemplateNode)(first)) return hasMultipleChildren(first);
 	}
-	const hasElse = (node) => findDir$2(node, "else-if") || findDir$2(node, "else", true);
-	if (children.length > 0 && children.every((c, index) => c.type === 1 && (!(0, _vue_compiler_dom.isTemplateNode)(c) || !hasMultipleChildren(c)) && !findDir$2(c, "for") && (index === 0 ? findDir$2(c, "if") : hasElse(c)))) return false;
+	const hasElse = (node) => findDir$3(node, "else-if") || findDir$3(node, "else", true);
+	if (children.length > 0 && children.every((c, index) => c.type === 1 && (!(0, _vue_compiler_dom.isTemplateNode)(c) || !hasMultipleChildren(c)) && !findDir$3(c, "for") && (index === 0 ? findDir$3(c, "if") : hasElse(c)))) return false;
 	return children.length !== 1;
 }
 //#endregion
 //#region packages/compiler-vapor/src/transforms/transformKey.ts
 const transformKey = (node, context) => {
-	if (node.type !== 1 || context.inVOnce || findDir$2(node, "for")) return;
+	if (node.type !== 1 || context.inVOnce || findDir$3(node, "for")) return;
 	const dir = findProp$1(node, "key", true, true);
 	if (!dir || dir.type === 6) return;
 	let value;

package/dist/compiler-vapor.d.ts

@@ -1,5 +1,5 @@
 import { AllNode, BaseCodegenResult, CodegenOptions as CodegenOptions$1, CodegenSourceMapGenerator, CommentNode, CompilerCompatOptions, CompilerError, CompilerOptions as CompilerOptions$1, CompoundExpressionNode, DirectiveNode, ElementNode, RootNode, SimpleExpressionNode, SourceLocation, TemplateChildNode, TemplateNode, TransformOptions, parse } from "@vue/compiler-dom";
-import { IfAny, IsKeyValues, LooseRequired, Namespace, NormalizedStyle, OverloadParameters, PatchFlags, Prettify, SlotFlags, UnionToIntersection, camelize, capitalize, normalizeClass, normalizeProps, normalizeStyle, toDisplayString, toHandlerKey } from "@vue/shared";
+import { IfAny, IsKeyValues, LooseRequired, Namespace, NormalizedStyle, OverloadParameters, PatchFlags, Prettify, SlotFlags, UnionToIntersection, VaporSlotFlags, camelize, capitalize, extend, normalizeClass, normalizeProps, normalizeStyle, toDisplayString, toHandlerKey } from "@vue/shared";
 //#endregion
 //#region packages/reactivity/src/constants.d.ts
 declare enum TrackOpTypes {
@@ -1410,6 +1410,7 @@ declare let isHydrating: boolean;
 type RootHydrateFunction = (vnode: VNode<Node, Element>, container: (Element | ShadowRoot) & {
   _vnode?: VNode;
 }) => void;
+declare const logMismatchError: () => void;
 declare function createHydrationFunctions(rendererInternals: RendererInternals<Node, Element>): [RootHydrateFunction, (node: Node, vnode: VNode, parentComponent: ComponentInternalInstance | null, parentSuspense: SuspenseBoundary | null, slotScopeIds: string[] | null, optimized?: boolean) => Node | null];
 declare const isTemplateNode: (node: Node) => node is HTMLTemplateElement;
 declare function getAttributeMismatch(el: Element, key: string, clientValue: any): {
@@ -3072,7 +3073,7 @@ type AsyncComponentContext<T, C = ConcreteComponent> = {
   setPendingRequest: (request: Promise<C> | null) => void;
 };
 declare function createAsyncComponentContext<T, C = ConcreteComponent>(source: AsyncComponentLoader<T> | AsyncComponentOptions<T>): AsyncComponentContext<T, C>;
-declare const useAsyncComponentState: (delay: number | undefined, timeout: number | undefined, onError: (err: Error) => void) => {
+declare const useAsyncComponentState: (delay: number | undefined, timeout: number | undefined, onError: (err: Error) => void, instance?: GenericComponentInstance | null) => {
   loaded: Ref<boolean>;
   error: Ref<Error | undefined>;
   delayed: Ref<boolean>;
@@ -25232,10 +25233,13 @@ declare function setVarsOnNode(el: Node, vars: Record<string, string>): void;
 type Style = string | null | undefined | Record<string, unknown>;
 declare function patchStyle(el: Element, prev: Style, next: Style): void;
 //#endregion
+//#region packages/runtime-dom/src/modules/events.d.ts
+declare function parseEventName(name: string): [string, EventListenerOptions | undefined];
+//#endregion
 //#region packages/runtime-dom/src/modules/attrs.d.ts
 declare const xlinkNS = "http://www.w3.org/1999/xlink";
 declare namespace index_d_exports$1 {
-  export { AllowedAttrs, AllowedComponentProps, AnchorHTMLAttributes, App, AppConfig, AppContext, AppMountFn, AppUnmountFn, AreaHTMLAttributes, AriaAttributes, AsyncComponentInternalOptions, AsyncComponentLoader, AsyncComponentOptions, Attrs, AudioHTMLAttributes, BaseHTMLAttributes, BaseTransition, BaseTransitionProps, BaseTransitionPropsValidators, BlockquoteHTMLAttributes, ButtonHTMLAttributes, CSSProperties, CanvasHTMLAttributes, ClassValue, ColHTMLAttributes, ColgroupHTMLAttributes, Comment$2 as Comment, CompatVue, Component, ComponentCustomElementInterface, ComponentCustomOptions, ComponentCustomProperties, ComponentCustomProps, ComponentInjectOptions, ComponentInstance, ComponentInternalInstance, ComponentInternalOptions, ComponentObjectPropsOptions, ComponentOptions, ComponentOptionsBase, ComponentOptionsMixin, ComponentOptionsWithArrayProps, ComponentOptionsWithObjectProps, ComponentOptionsWithoutProps, ComponentPropsOptions, ComponentProvideOptions, ComponentPublicInstance, ComponentTypeEmits, ComputedGetter, ComputedOptions, ComputedRef, ComputedSetter, ConcreteComponent, CreateAppFunction, CreateComponentPublicInstance, CreateComponentPublicInstanceWithMixins, CustomElementOptions, CustomRefFactory, DataHTMLAttributes, DebuggerEvent, DebuggerEventExtraInfo, DebuggerOptions, DeepReadonly, DefineComponent, DefineProps, DefineSetupFnComponent, DelHTMLAttributes, DeprecationTypes, DetailsHTMLAttributes, DialogHTMLAttributes, Directive$1 as Directive, DirectiveArguments$1 as DirectiveArguments, DirectiveBinding, DirectiveHook, DirectiveModifiers, EffectScheduler, EffectScope, ElementNamespace, ElementWithTransition, EmbedHTMLAttributes, EmitFn, EmitsOptions, EmitsToProps, ErrorCodes, ErrorTypeStrings, Events, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, FieldsetHTMLAttributes, FormHTMLAttributes, Fragment, FunctionDirective, FunctionPlugin, FunctionalComponent, GenericAppContext, GenericComponent, GenericComponentInstance, GlobalComponents, GlobalDirectives, HMRRuntime, HTMLAttributes, HtmlHTMLAttributes, HydrationRenderer, HydrationStrategy, HydrationStrategyFactory, IframeHTMLAttributes, ImgHTMLAttributes, InjectionKey, InputAutoCompleteAttribute, InputHTMLAttributes, InputTypeHTMLAttribute, InsHTMLAttributes, IntrinsicElementAttributes, KeepAlive, KeepAliveContext, KeepAliveProps, KeygenHTMLAttributes, LabelHTMLAttributes, LegacyConfig, LiHTMLAttributes, LifecycleHook, LinkHTMLAttributes, MapHTMLAttributes, MaybeRef, MaybeRefOrGetter, MediaHTMLAttributes, MenuHTMLAttributes, MetaHTMLAttributes, MeterHTMLAttributes, MethodOptions, MismatchTypes, ModelRef, MoveType, MultiWatchSources, NULL_DYNAMIC_COMPONENT, NativeElements, NormalizedPropsOptions, ObjectDirective, ObjectEmitsOptions, ObjectHTMLAttributes, ObjectPlugin, OlHTMLAttributes, OptgroupHTMLAttributes, OptionHTMLAttributes, OptionMergeFunction, OutputHTMLAttributes, ParamHTMLAttributes, Plugin, ProgressHTMLAttributes, Prop, PropType, PublicProps, QuoteHTMLAttributes, Raw, Reactive, ReactiveEffect, ReactiveEffectOptions, ReactiveEffectRunner, ReactiveFlags$1 as ReactiveFlags, Ref, RenderFunction, Renderer, RendererElement, RendererInternals, RendererNode, RendererOptions, ReservedProps, RootHydrateFunction, RootRenderFunction, RuntimeCompilerOptions, SVGAttributes, SchedulerJob, SchedulerJobFlags, ScriptHTMLAttributes, SelectHTMLAttributes, SetupContext, ShallowReactive, ShallowRef, ShallowUnwrapRef, ShortEmitsToObject, Slot, Slots, SlotsType, SourceHTMLAttributes, Static, StyleHTMLAttributes, StyleValue, Suspense, SuspenseBoundary, SuspenseProps, TableHTMLAttributes, TdHTMLAttributes, Teleport, TeleportProps, TeleportTargetElement, TemplateRef, Text$1 as Text, TextareaHTMLAttributes, ThHTMLAttributes, TimeHTMLAttributes, ToRef, ToRefs, TrackHTMLAttributes, TrackOpTypes, Transition, TransitionElement, TransitionGroup, TransitionGroupProps, TransitionHooks, TransitionHooksContext, TransitionProps, TransitionPropsValidators, TransitionState, TriggerOpTypes, TypeEmitsToOptions, UnwrapNestedRefs, UnwrapRef, VNode, VNodeArrayChildren, VNodeChild, VNodeNormalizedChildren, VNodeNormalizedRef, VNodeProps, VNodeRef, VNodeTypes, VShowElement, VaporInteropInterface, VaporSlot$1 as VaporSlot, VideoHTMLAttributes, VueElement, VueElementBase, VueElementConstructor, WatchCallback, WatchEffect, WatchHandle, WatchOptions, WatchEffectOptions as WatchOptionsBase, WatchSource, WatchStopHandle, WebViewHTMLAttributes, WritableComputedOptions, WritableComputedRef, activate, assertNumber, baseApplyTranslation, baseEmit, baseNormalizePropsOptions, baseResolveTransitionHooks, baseUseCssVars, callPendingCbs, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, checkTransitionMode, cloneVNode, compatUtils, computed, createApp, createAppAPI, createAsyncComponentContext, createBlock, createCanSetSetupRefChecker, createCommentVNode, createElementBlock, createBaseVNode as createElementVNode, createHydrationRenderer, createInternalObject, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, currentInstance, customRef, deactivate, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineModel, defineOptions, defineProps, defineSSRCustomElement, defineSlots, devtools, devtoolsComponentAdded, effect, effectScope, endMeasure, ensureHydrationRenderer, ensureRenderer, ensureValidVNode, ensureVaporSlotFallback, expose, flushOnAppMount, forceReflow, getAttributeMismatch, getComponentName, getCurrentInstance, getCurrentScope, getCurrentWatcher, getFunctionalFallthrough, getInheritedScopeIds, getTransitionRawChildren, guardReactiveProps, h, handleError, handleMovedChildren, hasCSSTransform, hasInjectionContext, hydrate, hydrateOnIdle, hydrateOnInteraction, hydrateOnMediaQuery, hydrateOnVisible, initCustomFormatter, initDirectivesForSSR, initFeatureFlags, inject, invalidateMount, invokeDirectiveHook, isAsyncWrapper, isEmitListener, isHydrating, isKeepAlive, isMapEqual, isMemoSame, isMismatchAllowed, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isSetEqual, isShallow, isTeleportDeferred, isTeleportDisabled, isTemplateNode, isTemplateRefKey, isVNode, isValidHtmlOrSvgAttribute, knownTemplateRefs, leaveCbKey, markAsyncBoundary, markRaw, matches, mergeDefaults, mergeModels, mergeProps, nextTick, nextUid, nodeOps, normalizeClass, normalizeContainer, normalizeProps, normalizeRef, normalizeStyle, normalizeVNode, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, onWatcherCleanup, openBlock, patchProp, patchStyle, performAsyncHydrate, performTransitionEnter, performTransitionLeave, popScopeId, popWarningContext, provide, proxyRefs, pushScopeId, pushWarningContext, queueJob, queuePostFlushCb, reactive, readonly, ref$1 as ref, registerHMR, registerRuntimeCompiler, render, renderList, renderSlot, resetShapeFlag, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolvePropValue, resolveTarget as resolveTeleportTarget, resolveTransitionHooks, resolveTransitionProps, setBlockTracking, setCurrentInstance, setCurrentRenderingInstance, setDevtoolsHook, setIsHydratingEnabled, setRef, setTransitionHooks, setVarsOnNode, shallowReactive, shallowReadonly, shallowRef, shouldSetAsProp, shouldSetAsPropForVueCE, shouldUpdateComponent, simpleSetCurrentInstance, ssrContextKey, ssrUtils, startMeasure, stop, svgNS, toClassSet, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, toStyleMap, toValue, transformVNodeArgs, triggerRef, unref, unregisterHMR, unsafeToTrustedHTML, useAsyncComponentState, useAttrs, useCssModule, useCssVars, useHost, useId, useInstanceOption, useModel, useSSRContext, useShadowRoot, useSlots, useTemplateRef, useTransitionState, vModelCheckbox, vModelCheckboxInit, vModelCheckboxUpdate, vModelDynamic, getValue as vModelGetValue, vModelRadio, vModelSelect, vModelSelectInit, vModelSetSelected, vModelText, vModelTextInit, vModelTextUpdate, vShow, vShowHidden, vShowOriginalDisplay, validateComponentName, validateProps, version, warn, warnExtraneousAttributes, warnPropMismatch, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext$1 as withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId, xlinkNS };
+  export { AllowedAttrs, AllowedComponentProps, AnchorHTMLAttributes, App, AppConfig, AppContext, AppMountFn, AppUnmountFn, AreaHTMLAttributes, AriaAttributes, AsyncComponentInternalOptions, AsyncComponentLoader, AsyncComponentOptions, Attrs, AudioHTMLAttributes, BaseHTMLAttributes, BaseTransition, BaseTransitionProps, BaseTransitionPropsValidators, BlockquoteHTMLAttributes, ButtonHTMLAttributes, CSSProperties, CanvasHTMLAttributes, ClassValue, ColHTMLAttributes, ColgroupHTMLAttributes, Comment$2 as Comment, CompatVue, Component, ComponentCustomElementInterface, ComponentCustomOptions, ComponentCustomProperties, ComponentCustomProps, ComponentInjectOptions, ComponentInstance, ComponentInternalInstance, ComponentInternalOptions, ComponentObjectPropsOptions, ComponentOptions, ComponentOptionsBase, ComponentOptionsMixin, ComponentOptionsWithArrayProps, ComponentOptionsWithObjectProps, ComponentOptionsWithoutProps, ComponentPropsOptions, ComponentProvideOptions, ComponentPublicInstance, ComponentTypeEmits, ComputedGetter, ComputedOptions, ComputedRef, ComputedSetter, ConcreteComponent, CreateAppFunction, CreateComponentPublicInstance, CreateComponentPublicInstanceWithMixins, CustomElementOptions, CustomRefFactory, DataHTMLAttributes, DebuggerEvent, DebuggerEventExtraInfo, DebuggerOptions, DeepReadonly, DefineComponent, DefineProps, DefineSetupFnComponent, DelHTMLAttributes, DeprecationTypes, DetailsHTMLAttributes, DialogHTMLAttributes, Directive$1 as Directive, DirectiveArguments$1 as DirectiveArguments, DirectiveBinding, DirectiveHook, DirectiveModifiers, EffectScheduler, EffectScope, ElementNamespace, ElementWithTransition, EmbedHTMLAttributes, EmitFn, EmitsOptions, EmitsToProps, ErrorCodes, ErrorTypeStrings, Events, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, FieldsetHTMLAttributes, FormHTMLAttributes, Fragment, FunctionDirective, FunctionPlugin, FunctionalComponent, GenericAppContext, GenericComponent, GenericComponentInstance, GlobalComponents, GlobalDirectives, HMRRuntime, HTMLAttributes, HtmlHTMLAttributes, HydrationRenderer, HydrationStrategy, HydrationStrategyFactory, IframeHTMLAttributes, ImgHTMLAttributes, InjectionKey, InputAutoCompleteAttribute, InputHTMLAttributes, InputTypeHTMLAttribute, InsHTMLAttributes, IntrinsicElementAttributes, KeepAlive, KeepAliveContext, KeepAliveProps, KeygenHTMLAttributes, LabelHTMLAttributes, LegacyConfig, LiHTMLAttributes, LifecycleHook, LinkHTMLAttributes, MapHTMLAttributes, MaybeRef, MaybeRefOrGetter, MediaHTMLAttributes, MenuHTMLAttributes, MetaHTMLAttributes, MeterHTMLAttributes, MethodOptions, MismatchTypes, ModelRef, MoveType, MultiWatchSources, NULL_DYNAMIC_COMPONENT, NativeElements, NormalizedPropsOptions, ObjectDirective, ObjectEmitsOptions, ObjectHTMLAttributes, ObjectPlugin, OlHTMLAttributes, OptgroupHTMLAttributes, OptionHTMLAttributes, OptionMergeFunction, OutputHTMLAttributes, ParamHTMLAttributes, Plugin, ProgressHTMLAttributes, Prop, PropType, PublicProps, QuoteHTMLAttributes, Raw, Reactive, ReactiveEffect, ReactiveEffectOptions, ReactiveEffectRunner, ReactiveFlags$1 as ReactiveFlags, Ref, RenderFunction, Renderer, RendererElement, RendererInternals, RendererNode, RendererOptions, ReservedProps, RootHydrateFunction, RootRenderFunction, RuntimeCompilerOptions, SVGAttributes, SchedulerJob, SchedulerJobFlags, ScriptHTMLAttributes, SelectHTMLAttributes, SetupContext, ShallowReactive, ShallowRef, ShallowUnwrapRef, ShortEmitsToObject, Slot, Slots, SlotsType, SourceHTMLAttributes, Static, StyleHTMLAttributes, StyleValue, Suspense, SuspenseBoundary, SuspenseProps, TableHTMLAttributes, TdHTMLAttributes, Teleport, TeleportProps, TeleportTargetElement, TemplateRef, Text$1 as Text, TextareaHTMLAttributes, ThHTMLAttributes, TimeHTMLAttributes, ToRef, ToRefs, TrackHTMLAttributes, TrackOpTypes, Transition, TransitionElement, TransitionGroup, TransitionGroupProps, TransitionHooks, TransitionHooksContext, TransitionProps, TransitionPropsValidators, TransitionState, TriggerOpTypes, TypeEmitsToOptions, UnwrapNestedRefs, UnwrapRef, VNode, VNodeArrayChildren, VNodeChild, VNodeNormalizedChildren, VNodeNormalizedRef, VNodeProps, VNodeRef, VNodeTypes, VShowElement, VaporInteropInterface, VaporSlot$1 as VaporSlot, VideoHTMLAttributes, VueElement, VueElementBase, VueElementConstructor, WatchCallback, WatchEffect, WatchHandle, WatchOptions, WatchEffectOptions as WatchOptionsBase, WatchSource, WatchStopHandle, WebViewHTMLAttributes, WritableComputedOptions, WritableComputedRef, activate, assertNumber, baseApplyTranslation, baseEmit, baseNormalizePropsOptions, baseResolveTransitionHooks, baseUseCssVars, callPendingCbs, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, checkTransitionMode, cloneVNode, compatUtils, computed, createApp, createAppAPI, createAsyncComponentContext, createBlock, createCanSetSetupRefChecker, createCommentVNode, createElementBlock, createBaseVNode as createElementVNode, createHydrationRenderer, createInternalObject, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, currentInstance, customRef, deactivate, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineModel, defineOptions, defineProps, defineSSRCustomElement, defineSlots, devtools, devtoolsComponentAdded, effect, effectScope, endMeasure, ensureHydrationRenderer, ensureRenderer, ensureValidVNode, ensureVaporSlotFallback, expose, flushOnAppMount, forceReflow, getAttributeMismatch, getComponentName, getCurrentInstance, getCurrentScope, getCurrentWatcher, getFunctionalFallthrough, getInheritedScopeIds, getTransitionRawChildren, guardReactiveProps, h, handleError, handleMovedChildren, hasCSSTransform, hasInjectionContext, hydrate, hydrateOnIdle, hydrateOnInteraction, hydrateOnMediaQuery, hydrateOnVisible, initCustomFormatter, initDirectivesForSSR, initFeatureFlags, inject, invalidateMount, invokeDirectiveHook, isAsyncWrapper, isEmitListener, isHydrating, isKeepAlive, isMapEqual, isMemoSame, isMismatchAllowed, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isSetEqual, isShallow, isTeleportDeferred, isTeleportDisabled, isTemplateNode, isTemplateRefKey, isVNode, isValidHtmlOrSvgAttribute, knownTemplateRefs, leaveCbKey, logMismatchError, markAsyncBoundary, markRaw, matches, mergeDefaults, mergeModels, mergeProps, nextTick, nextUid, nodeOps, normalizeClass, normalizeContainer, normalizeProps, normalizeRef, normalizeStyle, normalizeVNode, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, onWatcherCleanup, openBlock, parseEventName, patchProp, patchStyle, performAsyncHydrate, performTransitionEnter, performTransitionLeave, popScopeId, popWarningContext, provide, proxyRefs, pushScopeId, pushWarningContext, queueJob, queuePostFlushCb, reactive, readonly, ref$1 as ref, registerHMR, registerRuntimeCompiler, render, renderList, renderSlot, resetShapeFlag, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolvePropValue, resolveTarget as resolveTeleportTarget, resolveTransitionHooks, resolveTransitionProps, setBlockTracking, setCurrentInstance, setCurrentRenderingInstance, setDevtoolsHook, setIsHydratingEnabled, setRef, setTransitionHooks, setVarsOnNode, shallowReactive, shallowReadonly, shallowRef, shouldSetAsProp, shouldSetAsPropForVueCE, shouldUpdateComponent, simpleSetCurrentInstance, ssrContextKey, ssrUtils, startMeasure, stop, svgNS, toClassSet, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, toStyleMap, toValue, transformVNodeArgs, triggerRef, unref, unregisterHMR, unsafeToTrustedHTML, useAsyncComponentState, useAttrs, useCssModule, useCssVars, useHost, useId, useInstanceOption, useModel, useSSRContext, useShadowRoot, useSlots, useTemplateRef, useTransitionState, vModelCheckbox, vModelCheckboxInit, vModelCheckboxUpdate, vModelDynamic, getValue as vModelGetValue, vModelRadio, vModelSelect, vModelSelectInit, vModelSetSelected, vModelText, vModelTextInit, vModelTextUpdate, vShow, vShowHidden, vShowOriginalDisplay, validateComponentName, validateProps, version, warn, warnExtraneousAttributes, warnPropMismatch, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext$1 as withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId, xlinkNS };
 }
 /**
 * This is a stub implementation to prevent the need to use dom types.
@@ -25291,22 +25295,36 @@ declare function createTemplateRefSetter(): setRefFn;
 declare function setStaticTemplateRef(el: RefEl, ref: NodeRef, refFor?: boolean, refKey?: string): NodeRef | undefined;
 declare function setTemplateRefBinding(el: RefEl, getter: () => any, setter?: setRefFn, refFor?: boolean, refKey?: string): void;
 //#endregion
+//#region packages/runtime-vapor/src/slotBoundary.d.ts
+interface SlotBoundaryContext {
+  parent: SlotBoundaryContext | null;
+  getFallback: () => BlockFn | undefined;
+  run<R>(fn: () => R, scope?: EffectScope): R;
+  markDirty: () => void;
+  redirected?: SlotBoundaryContext;
+}
+//#endregion
 //#region packages/runtime-vapor/src/keepAlive.d.ts
 interface VaporKeepAliveContext {
+  acquireBranchScope(key: any): EffectScope | undefined;
+  runBranchRender(frag: DynamicFragment, fn: () => void): void;
   processShapeFlag(block: Block$1): any | false;
   cacheBlock(block?: Block$1): void;
   cacheScope(cacheKey: any, scopeLookupKey: any, scope: EffectScope): void;
-  getScope(key: any): EffectScope | undefined;
 }
 //#endregion
 //#region packages/runtime-vapor/src/fragment.d.ts
 declare class VaporFragment<T extends Block$1 = Block$1> implements TransitionOptions {
+  /**
+  * @internal marker for duck typing to avoid direct instanceof check
+  * which prevents tree-shaking of VaporFragment
+  */
+  readonly __vf = true;
   $key?: any;
   $transition?: VaporTransitionHooks | undefined;
   nodes: T;
   vnode?: VNode | null;
   anchor?: Node;
-  parentComponent?: GenericComponentInstance | null;
   validityPending?: boolean;
   isBlockValid?: () => boolean;
   insert?: (parent: ParentNode, anchor: Node | null, transitionHooks?: TransitionHooks) => void;
@@ -25317,6 +25335,9 @@ declare class VaporFragment<T extends Block$1 = Block$1> implements TransitionOp
   onBeforeRemove?: ((scope: EffectScope) => boolean)[];
   onBeforeUpdate?: (() => void)[];
   onUpdated?: ((nodes?: Block$1) => void)[];
+  constructor(nodes: T);
+}
+declare class RenderContextFragment<T extends Block$1 = Block$1> extends VaporFragment<T> {
   readonly renderInstance: GenericComponentInstance | null;
   readonly slotOwner: VaporComponentInstance | null;
   readonly keepAliveCtx?: VaporKeepAliveContext | null;
@@ -25329,7 +25350,12 @@ declare class ForFragment extends VaporFragment<Block$1[]> {
   constructor(nodes: Block$1[], trackSlotBoundary: boolean);
   onReset(fn: () => void): void;
 }
-declare class DynamicFragment extends VaporFragment {
+declare class DynamicFragment extends RenderContextFragment {
+  /**
+  * @internal marker for duck typing to avoid direct instanceof check
+  * which prevents tree-shaking of DynamicFragment
+  */
+  readonly __df = true;
   anchor: Node;
   scope: EffectScope | undefined;
   current?: BlockFn;
@@ -25341,21 +25367,16 @@ declare class DynamicFragment extends VaporFragment {
   anchorLabel?: string;
   keyed?: boolean;
   isSlot?: boolean;
+  forwarded?: boolean;
   inTransition?: boolean;
   hasFallthroughAttrs?: true;
-  constructor(anchorLabel?: string, keyed?: boolean, locate?: boolean, trackSlotBoundary?: boolean);
-  update(render?: BlockFn, key?: any, noScope?: boolean, shouldInsert?: boolean): void;
+  readonly autoHydrate: boolean;
+  constructor(anchorLabel?: string, keyed?: boolean, locate?: boolean, trackSlotBoundary?: boolean, autoHydrate?: boolean);
+  update(render?: BlockFn, key?: any, noScope?: boolean): void;
+  protected getBranchParent(): ParentNode | null;
   renderBranch(render: BlockFn | undefined, transition: VaporTransitionHooks | undefined, parent: ParentNode | null, key: any, noScope?: boolean, notifyUpdated?: boolean): void;
-  hydrate(isEmpty?: boolean): void;
 }
-interface SlotBoundaryContext {
-  parent: SlotBoundaryContext | null;
-  getFallback: () => BlockFn | undefined;
-  run<R>(fn: () => R, scope?: EffectScope): R;
-  markDirty: () => void;
-  redirected?: SlotBoundaryContext;
-}
-declare function isFragment(val: NonNullable<unknown>): val is VaporFragment;
+declare function isFragment(val: unknown): val is VaporFragment;
 //#endregion
 //#region packages/runtime-vapor/src/block.d.ts
 interface VaporTransitionHooks extends TransitionHooks {
@@ -25408,7 +25429,9 @@ type LooseRawSlots = VaporSlot | (Record<string, VaporSlot | DynamicSlotSource[]
   $?: DynamicSlotSource[];
 });
 type StaticSlots = Record<string, VaporSlot>;
-type VaporSlot = BlockFn;
+type VaporSlot = BlockFn & {
+  _?: VaporSlotFlags.NON_STABLE;
+};
 type DynamicSlot = {
   name: string;
   fn: VaporSlot;
@@ -25832,7 +25855,7 @@ declare const VaporTransition: FunctionalVaporComponent<TransitionProps>;
 //#region packages/runtime-vapor/src/components/TransitionGroup.d.ts
 declare const VaporTransitionGroup: DefineVaporComponent<{}, string, TransitionGroupProps>;
 declare namespace index_d_exports {
-  export { Block$1 as Block, DefineVaporComponent, DynamicFragment, FunctionalVaporComponent, VaporComponent, VaporComponentInstance, VaporComponentOptions, VaporDirective, VaporElement, VaporElementConstructor, VaporFragment, VaporKeepAlive, VaporKeepAliveContext, VaporPublicProps, VaporRenderResult, VaporSlot, VaporTeleport, VaporTransition, VaporTransitionGroup, VaporTransitionHooks, applyCheckboxModel, applyDynamicModel, applyRadioModel, applySelectModel, applyTextModel, applyVShow, child, createAssetComponent, createComponent, createComponentWithFallback, createDynamicComponent, createFor, createForSlots, createIf, createInvoker, createKeyedFragment, createPlainElement, createSelector, createSlot, createTemplateRefSetter, createTextNode, createVaporApp, createVaporSSRApp, defineVaporAsyncComponent, defineVaporComponent, defineVaporCustomElement, defineVaporSSRCustomElement, delegate, delegateEvents, getDefaultValue, getRestElement, insert$1 as insert, isFragment, isVaporComponent, next, nthChild, on, onBinding, prepend, remove, renderEffect, setAttr, setBlockHtml, setBlockKey, setBlockText, setClass, setClassName, setDOMProp, setDynamicEvents, setDynamicProps, setElementText, setHtml, setInsertionState, setProp, setStaticTemplateRef, setStyle, setTemplateRefBinding, setText, setValue, template, txt, useVaporCssVars, vaporInteropPlugin, withAsyncContext, withVaporDirectives, withVaporKeys, withVaporModifiers };
+  export { Block$1 as Block, DefineVaporComponent, DynamicFragment, FunctionalVaporComponent, VaporComponent, VaporComponentInstance, VaporComponentOptions, VaporDirective, VaporElement, VaporElementConstructor, VaporFragment, VaporKeepAlive, VaporKeepAliveContext, VaporPublicProps, VaporRenderResult, VaporSlot, VaporTeleport, VaporTransition, VaporTransitionGroup, VaporTransitionHooks, applyCheckboxModel, applyDynamicModel, applyRadioModel, applySelectModel, applyTextModel, applyVShow, child, createAssetComponent, createComponent, createComponentWithFallback, createDynamicComponent, createFor, createForSlots, createIf, createInvoker, createKeyedFragment, createPlainElement, createSelector, createSlot, createTemplateRefSetter, createTextNode, createVaporApp, createVaporSSRApp, defineVaporAsyncComponent, defineVaporComponent, defineVaporCustomElement, defineVaporSSRCustomElement, delegate, delegateEvents, extend, getDefaultValue, getRestElement, insert$1 as insert, isFragment, isVaporComponent, next, nthChild, on, onBinding, prepend, remove, renderEffect, setAttr, setBlockHtml, setBlockKey, setBlockText, setClass, setClassName, setDOMProp, setDynamicEvents, setDynamicProps, setElementText, setHtml, setInsertionState, setProp, setStaticTemplateRef, setStyle, setTemplateRefBinding, setText, setValue, template, txt, useVaporCssVars, vaporInteropPlugin, withAsyncContext, withVaporDirectives, withVaporKeys, withVaporModifiers };
 }
 //#endregion
 //#region temp/packages/compiler-vapor/src/ir/component.d.ts
@@ -26166,7 +26189,7 @@ interface ImportItem {
 //#region packages/compiler-core/src/transforms/transformElement.d.ts
 type PropsExpression = ObjectExpression | CallExpression | ExpressionNode;
 //#endregion
-//#region node_modules/.pnpm/@babel+types@7.29.0/node_modules/@babel/types/lib/index-legacy.d.ts
+//#region node_modules/.pnpm/@babel+types@7.29.7/node_modules/@babel/types/lib/index-legacy.d.ts
 // NOTE: This file is autogenerated. Do not modify.
 // See packages/babel-types/scripts/generators/typescript-legacy.ts for script used.
 interface BaseComment {

package/dist/compiler-vapor.esm-browser.js

@@ -1,5 +1,5 @@
 /**
-  * @vue/compiler-vapor v3.6.0-beta.14
+  * @vue/compiler-vapor v3.6.0-beta.16
   * (c) 2018-present Yuxi (Evan) You and Vue contributors
   * @license MIT
   **/
@@ -16248,7 +16248,7 @@ const tokenizer = new Tokenizer(stack, {
 		}
 	},
 	oncdata(start, end) {
-		if (stack[0].ns !== 0) onText(getSlice(start, end), start, end);
+		if ((stack[0] ? stack[0].ns : currentOptions.ns) !== 0) onText(getSlice(start, end), start, end);
 		else emitError(1, start - 9);
 	},
 	onprocessinginstruction(start) {
@@ -19134,6 +19134,13 @@ function getLiteralExpressionValue(exp, excludeNumber) {
 	}
 	return exp.isStatic ? exp.content : null;
 }
+function isInTransition(context) {
+	const parentNode = context.parent && context.parent.node;
+	return !!(parentNode && isTransitionNode(parentNode));
+}
+function isTransitionNode(node) {
+	return node.type === 1 && isTransitionTag(node.tag);
+}
 function isTransitionTag(tag) {
 	tag = tag.toLowerCase();
 	return tag === "transition" || tag === "vaportransition";
@@ -19365,6 +19372,7 @@ const defaultOptions = {
 	bindingMetadata: EMPTY_OBJ,
 	inline: false,
 	isTS: false,
+	eventDelegation: true,
 	onError: defaultOnError,
 	onWarn: defaultOnWarn
 };
@@ -19666,6 +19674,8 @@ function _objectSpread2(e) {
 function genExpression(node, context, assignment) {
 	node = context.getExpressionReplacement(node);
 	const { content, ast, isStatic, loc } = node;
+	const { options } = context;
+	const { inline } = options;
 	if (isStatic) return [[
 		JSON.stringify(content),
 		-2,
@@ -19687,23 +19697,31 @@ function genExpression(node, context, assignment) {
 	let hasMemberExpression = false;
 	if (ids.length) {
 		const [frag, push] = buildCodeFragment();
-		ids.sort((a, b) => a.start - b.start).forEach((id, i) => {
-			const start = id.start - 1;
-			const end = id.end - 1;
-			const last = ids[i - 1];
-			const leadingText = content.slice(last ? last.end - 1 : 0, start);
-			if (leadingText.length) push([leadingText, -3]);
-			const source = content.slice(start, end);
+		let lastEnd = 0;
+		ids.sort((a, b) => a.start - b.start).forEach((id) => {
+			const idStart = id.start - 1;
+			const idEnd = id.end - 1;
+			const source = content.slice(idStart, idEnd);
 			const parentStack = parentStackMap.get(id);
 			const parent = parentStack[parentStack.length - 1];
+			let start = idStart;
+			let end = idEnd;
+			if (inline && options.bindingMetadata && options.bindingMetadata[source] === "setup-let" && parent && parent.type === "UpdateExpression" && parent.argument === id) {
+				start = parent.start - 1;
+				end = parent.end - 1;
+			}
+			if (start < lastEnd) return;
+			const leadingText = content.slice(lastEnd, start);
+			if (leadingText.length) push([leadingText, -3]);
 			hasMemberExpression || (hasMemberExpression = parent && (parent.type === "MemberExpression" || parent.type === "OptionalMemberExpression"));
 			push(...genIdentifier(source, context, {
 				start: advancePositionWithClone(node.loc.start, source, start),
 				end: advancePositionWithClone(node.loc.start, source, end),
 				source
-			}, hasMemberExpression ? void 0 : assignment, id, parent, parentStack));
-			if (i === ids.length - 1 && end < content.length) push([content.slice(end), -3]);
+			}, hasMemberExpression ? void 0 : assignment, id, parent, parentStack, node));
+			lastEnd = end;
 		});
+		if (lastEnd < content.length) push([content.slice(lastEnd), -3]);
 		if (assignment && hasMemberExpression) push(` = ${assignment}`);
 		return frag;
 	} else return [[
@@ -19712,7 +19730,7 @@ function genExpression(node, context, assignment) {
 		loc
 	]];
 }
-function genIdentifier(raw, context, loc, assignment, id, parent, parentStack) {
+function genIdentifier(raw, context, loc, assignment, id, parent, parentStack, sourceNode) {
 	const { options, helper, identifiers } = context;
 	const { inline, bindingMetadata } = options;
 	let name = raw;
@@ -19732,19 +19750,49 @@ function genIdentifier(raw, context, loc, assignment, id, parent, parentStack) {
 		else return genExpression(replacement, context, assignment);
 	}
 	let prefix;
-	if (isStaticProperty(parent) && parent.shorthand) prefix = `${raw}: `;
 	const type = bindingMetadata && bindingMetadata[raw];
+	const isDestructureAssignment = parent && isInDestructureAssignment(parent, parentStack || []);
+	const isAssignmentLVal = parent && parent.type === "AssignmentExpression" && parent.left === id;
+	const isUpdateArg = parent && parent.type === "UpdateExpression" && parent.argument === id;
+	if (isStaticProperty(parent) && parent.shorthand && !(inline && type === "setup-let" && isDestructureAssignment)) prefix = `${raw}: `;
 	if (inline) switch (type) {
 		case "setup-let":
-			name = raw = assignment ? `_isRef(${raw}) ? (${raw}.value = ${assignment}) : (${raw} = ${assignment})` : unref();
+			if (isAssignmentLVal) {
+				const { right, operator } = parent;
+				const source = sourceNode;
+				const sourceContent = source.content;
+				const rightStart = right.start - 1;
+				const rightEnd = right.end - 1;
+				const rightContent = sourceContent.slice(rightStart, rightEnd);
+				const rightExp = createSimpleExpression(rightContent, false, {
+					start: advancePositionWithClone(source.loc.start, sourceContent, rightStart),
+					end: advancePositionWithClone(source.loc.start, sourceContent, rightEnd),
+					source: rightContent
+				});
+				rightExp.ast = parseExp(context, rightContent);
+				return [
+					prefix,
+					`${helper("isRef")}(${raw}) ? ${raw}.value ${operator} `,
+					...genExpression(rightExp, context),
+					` : `,
+					[
+						raw,
+						-2,
+						loc,
+						name
+					]
+				];
+			} else if (isUpdateArg) {
+				const { prefix: isPrefix, operator } = parent;
+				const updatePrefix = isPrefix ? operator : ``;
+				const updatePostfix = isPrefix ? `` : operator;
+				raw = `${helper("isRef")}(${raw}) ? ${updatePrefix}${raw}.value${updatePostfix} : ${updatePrefix}${raw}${updatePostfix}`;
+			} else if (!isDestructureAssignment) name = raw = assignment ? `${helper("isRef")}(${raw}) ? (${raw}.value = ${assignment}) : (${raw} = ${assignment})` : unref();
 			break;
 		case "setup-ref":
 			name = raw = withAssignment(`${raw}.value`);
 			break;
 		case "setup-maybe-ref":
-			const isDestructureAssignment = parent && isInDestructureAssignment(parent, parentStack || []);
-			const isAssignmentLVal = parent && parent.type === "AssignmentExpression" && parent.left === id;
-			const isUpdateArg = parent && parent.type === "UpdateExpression" && parent.argument === id;
 			raw = isAssignmentLVal || isUpdateArg || isDestructureAssignment ? name = `${raw}.value` : assignment ? `${helper("isRef")}(${raw}) ? (${raw}.value = ${assignment}) : null` : unref();
 			break;
 		case "props":
@@ -20645,7 +20693,12 @@ function genPropKey({ key: node, modifier, runtimeCamelize, handler, handlerModi
 	if (runtimeCamelize) {
 		key.push(" || \"\"");
 		key = genCall(helper("camelize"), key);
-	}
+	} else if (modifier) key = [
+		"(",
+		...key,
+		" || \"\"",
+		")"
+	];
 	if (handler) key = genCall(helper("toHandlerKey"), key);
 	return [
 		"[",
@@ -20737,6 +20790,11 @@ function genVShow(oper, context) {
 	])];
 }
 //#endregion
+//#region packages/compiler-vapor/src/generators/modifier.ts
+function genDirectiveModifiers(modifiers) {
+	return modifiers.map((value) => `${isSimpleIdentifier(value) ? value : JSON.stringify(value)}: true`).join(", ");
+}
+//#endregion
 //#region packages/compiler-vapor/src/generators/vModel.ts
 const helperMap = {
 	text: "applyTextModel",
@@ -20751,7 +20809,7 @@ function genVModel(oper, context) {
 		`() => (`,
 		...genExpression(exp, context),
 		`)`
-	], genModelHandler(exp, context), modifiers.length ? `{ ${modifiers.map((e) => e.content + ": true").join(",")} }` : void 0)];
+	], genModelHandler(exp, context), modifiers.length ? `{ ${genDirectiveModifiers(modifiers.map((e) => e.content))} }` : void 0)];
 }
 function genModelHandler(exp, context) {
 	return [
@@ -20793,14 +20851,15 @@ function genCustomDirectives(opers, context) {
 		return genMulti(DELIMITERS_ARRAY.concat("void 0"), directiveVar, value, argument, modifiers);
 	}
 }
-function genDirectiveModifiers(modifiers) {
-	return modifiers.map((value) => `${isSimpleIdentifier(value) ? value : JSON.stringify(value)}: true`).join(", ");
-}
 function filterCustomDirectives(id, operations) {
 	return operations.filter((oper) => oper.type === 14 && oper.element === id && !oper.builtin);
 }
 //#endregion
 //#region packages/compiler-vapor/src/generators/component.ts
+function genStaticModifierPropKey(name) {
+	const key = getModifierPropName(name);
+	return [isSimpleIdentifier(key) ? key : JSON.stringify(key)];
+}
 function genCreateComponent(operation, context) {
 	const { helper } = context;
 	const singleUseAssetComponentNames = context.singleUseAssetComponentNames;
@@ -20942,7 +21001,7 @@ function genStaticProps(props, context, dynamicProps, directStaticLiteralProps =
 			}
 			const { key, modelModifiers } = prop;
 			if (modelModifiers && modelModifiers.length) {
-				const modifiersKey = key.isStatic ? [getModifierPropName(key.content)] : [
+				const modifiersKey = key.isStatic ? genStaticModifierPropKey(key.content) : [
 					"[",
 					...genExpression(key, context),
 					" + \"Modifiers\"]"
@@ -20985,7 +21044,7 @@ function genDynamicProps(props, context, directStaticLiteralProps = false) {
 			]);
 			const { modelModifiers } = p;
 			if (modelModifiers && modelModifiers.length) {
-				const modifiersKey = p.key.isStatic ? [getModifierPropName(p.key.content)] : [
+				const modifiersKey = p.key.isStatic ? genStaticModifierPropKey(p.key.content) : [
 					"[",
 					...genExpression(p.key, context),
 					" + \"Modifiers\"]"
@@ -21110,7 +21169,7 @@ function genDynamicSlot(slot, context, withFunction = false) {
 }
 function genBasicDynamicSlot(slot, context) {
 	const { name, fn } = slot;
-	return genMulti(DELIMITERS_OBJECT_NEWLINE, ["name: ", ...genExpression(name, context)], ["fn: ", ...genSlotBlockWithProps(fn, context)]);
+	return genMulti(DELIMITERS_OBJECT_NEWLINE, ["name: ", ...genExpression(name, context)], ["fn: ", ...genSlotBlockWithProps(fn, context, false)]);
 }
 function genLoopSlot(slot, context) {
 	const { name, fn, loop } = slot;
@@ -21122,7 +21181,7 @@ function genLoopSlot(slot, context) {
 	if (rawValue) idMap[rawValue] = rawValue;
 	if (rawKey) idMap[rawKey] = rawKey;
 	if (rawIndex) idMap[rawIndex] = rawIndex;
-	const slotExpr = genMulti(DELIMITERS_OBJECT_NEWLINE, ["name: ", ...context.withId(() => genExpression(name, context), idMap)], ["fn: ", ...context.withId(() => genSlotBlockWithProps(fn, context), idMap)]);
+	const slotExpr = genMulti(DELIMITERS_OBJECT_NEWLINE, ["name: ", ...context.withId(() => genExpression(name, context), idMap)], ["fn: ", ...context.withId(() => genSlotBlockWithProps(fn, context, false), idMap)]);
 	return [...genCall(context.helper("createForSlots"), genExpression(source, context), [
 		...genMulti([
 			"(",
@@ -21148,7 +21207,7 @@ function genConditionalSlot(slot, context) {
 		INDENT_END
 	];
 }
-function genSlotBlockWithProps(oper, context) {
+function genSlotBlockWithProps(oper, context, emitNonStableFlag = true) {
 	let propsName;
 	let exitScope;
 	let depth;
@@ -21163,10 +21222,45 @@ function genSlotBlockWithProps(oper, context) {
 	const exitSlotBlock = context.enterSlotBlock();
 	markSlotRootOperations(oper);
 	let blockFn = context.withId(() => genBlock(oper, context, propsName ? [propsName] : []), idMap);
+	if (emitNonStableFlag && !hasStableSlotRoot(oper, context)) blockFn = genCall(context.helper("extend"), blockFn, `{ _: 8 }`);
 	exitSlotBlock();
 	exitScope && exitScope();
 	return blockFn;
 }
+const commentOnlyTemplateRE = /^(?:<!--[\s\S]*?-->)+$/;
+function hasStableSlotRoot(block, context) {
+	let hasValidRoot = false;
+	for (let i = 0; i < block.returns.length; i++) {
+		const id = block.returns[i];
+		const child = findReturnedDynamic$1(block, id);
+		const operation = child && child.operation;
+		if (!operation) {
+			if (child && isStableTemplateSlotRoot(child, context)) hasValidRoot = true;
+			continue;
+		}
+		switch (operation.type) {
+			case 12:
+				if (!operation.dynamic || operation.dynamic.isStatic) {
+					hasValidRoot = true;
+					continue;
+				}
+				return false;
+			case 17:
+				if (hasStableSlotRoot(operation.block, context)) {
+					hasValidRoot = true;
+					continue;
+				}
+				return false;
+			default: return false;
+		}
+	}
+	return hasValidRoot;
+}
+function isStableTemplateSlotRoot(child, context) {
+	if (child.template == null) return false;
+	const content = context.ir.template.entries[child.template].content;
+	return content !== "" && !commentOnlyTemplateRE.test(content.trim());
+}
 //#endregion
 //#region packages/compiler-vapor/src/generators/slotOutlet.ts
 function genSlotOutlet(oper, context) {
@@ -21503,7 +21597,7 @@ function genBlockContent(block, context, root, genEffectsExtraFrag) {
 	else if (genEffectsExtraFrag) push(...genEffects([], context, genEffectsExtraFrag));
 	push(NEWLINE, `return `);
 	const returnNodes = returns.map((n) => `n${n}`);
-	push(...returnNodes.length > 1 ? genMulti(DELIMITERS_ARRAY, ...returnNodes) : [returnNodes[0] || "null"]);
+	push(...returnNodes.length > 1 ? genMulti(DELIMITERS_ARRAY, ...returnNodes) : [returnNodes[0] || "[]"]);
 	resetBlock();
 	context.singleUseAssetComponentNames = prevSingleUseAssetComponentNames;
 	return frag;
@@ -21842,11 +21936,36 @@ const transformVBind = (dir, node, context) => {
 	};
 };
 //#endregion
+//#region packages/compiler-vapor/src/transforms/vHtml.ts
+function ignoreVHtmlChildren(node, context, clear) {
+	if (!node.children.length) return;
+	const dir = findDir$1(node, "html");
+	if (!dir) return;
+	context.options.onError(createDOMCompilerError(55, dir.loc));
+	if (clear === "node") node.children.length = 0;
+	else context.childrenTemplate.length = 0;
+}
+const transformVHtml = (dir, node, context) => {
+	let { exp, loc } = dir;
+	if (!exp) {
+		context.options.onError(createDOMCompilerError(54, loc));
+		exp = EMPTY_EXPRESSION;
+	}
+	ignoreVHtmlChildren(node, context, "template");
+	context.registerEffect([exp], {
+		type: 8,
+		element: context.reference(),
+		value: exp,
+		isComponent: node.tagType === 1
+	});
+};
+//#endregion
 //#region packages/compiler-vapor/src/transforms/transformElement.ts
 const isReservedProp = /* @__PURE__ */ makeMap(",key,ref,ref_for,ref_key,");
 const transformElement = (node, context) => {
 	let effectIndex = context.block.effect.length;
 	const getEffectIndex = () => effectIndex++;
+	if (node.type === 1 && node.children.length) ignoreVHtmlChildren(node, context, "node");
 	let parentSlots;
 	if (node.type === 1 && (node.tagType === 1 || context.options.isCustomElement(node.tag))) {
 		parentSlots = context.slots;
@@ -21977,7 +22096,6 @@ function transformNativeElement(node, propsResult, staticKey, singleRoot, contex
 	let template = "";
 	template += `<${tag}`;
 	if (scopeId) template += ` ${scopeId}`;
-	const dynamicProps = [];
 	if (propsResult[0]) {
 		const [, dynamicArgs, expressions] = propsResult;
 		context.registerEffect(expressions, {
@@ -21998,54 +22116,25 @@ function transformNativeElement(node, propsResult, staticKey, singleRoot, contex
 		};
 		for (const prop of propsResult[1]) {
 			const { key, values } = prop;
-			if (context.imports.some((imported) => values[0].content.includes(imported.exp.content))) {
+			const canStringifyAttrName = key.isStatic && !UNSAFE_ATTR_NAME_RE.test(key.content);
+			let foldedValue;
+			if (canStringifyAttrName && context.imports.some((imported) => values[0].content.includes(imported.exp.content))) {
 				if (!prevWasQuoted) template += ` `;
 				template += `${key.content}="${IMPORT_EXP_START}${values[0].content}${IMPORT_EXP_END}"`;
 				prevWasQuoted = true;
-			} else if (key.isStatic && !prop.modifier && isBooleanAttr(key.content)) if (values.length === 1 && (values[0].isStatic || values[0].content === "''") && !dynamicKeys.includes(key.content)) {
-				const value = values[0].content === "''" ? "" : values[0].content;
-				appendTemplateProp(key.content, value);
-			} else {
-				const include = foldBooleanAttrValue(values);
-				if (include != null) {
-					if (include) appendTemplateProp(key.content);
-				} else {
-					dynamicProps.push(key.content);
-					context.registerEffect(values, {
-						type: 3,
-						element: context.reference(),
-						prop,
-						tag
-					}, getEffectIndex);
-				}
-			}
-			else if (key.isStatic && !prop.modifier && hasBoundValue(values)) {
-				let foldedValue;
-				if (key.content === "class") foldedValue = foldClassValues(values);
-				else if (key.content === "style") foldedValue = foldStyleValues(values);
-				if (foldedValue != null) {
-					if (foldedValue) appendTemplateProp(key.content, foldedValue, true);
-				} else {
-					dynamicProps.push(key.content);
-					context.registerEffect(values, {
-						type: 3,
-						element: context.reference(),
-						prop,
-						tag
-					}, getEffectIndex);
-				}
-			} else if (key.isStatic && values.length === 1 && (values[0].isStatic || values[0].content === "''") && !dynamicKeys.includes(key.content)) {
+			} else if (canStringifyAttrName && values.length === 1 && (values[0].isStatic || values[0].content === "''") && !dynamicKeys.includes(key.content)) {
 				const value = values[0].content === "''" ? "" : values[0].content;
 				appendTemplateProp(key.content, value);
-			} else {
-				dynamicProps.push(key.content);
-				context.registerEffect(values, {
-					type: 3,
-					element: context.reference(),
-					prop,
-					tag
-				}, getEffectIndex);
-			}
+			} else if (canStringifyAttrName && !prop.modifier && isBooleanAttr(key.content) && (foldedValue = foldBooleanAttrValue(values)) != null) {
+				if (foldedValue) appendTemplateProp(key.content);
+			} else if (canStringifyAttrName && !prop.modifier && hasBoundValue(values) && (foldedValue = key.content === "class" ? foldClassValues(values) : key.content === "style" ? foldStyleValues(values) : void 0) != null) {
+				if (foldedValue) appendTemplateProp(key.content, foldedValue, true);
+			} else context.registerEffect(values, {
+				type: 3,
+				element: context.reference(),
+				prop,
+				tag
+			}, getEffectIndex);
 		}
 	}
 	template += `>` + context.childrenTemplate.join("");
@@ -22558,25 +22647,6 @@ const transformVOnce = (node, context) => {
 	if (node.type === 1 && findDir$1(node, "once", true)) context.inVOnce = true;
 };
 //#endregion
-//#region packages/compiler-vapor/src/transforms/vHtml.ts
-const transformVHtml = (dir, node, context) => {
-	let { exp, loc } = dir;
-	if (!exp) {
-		context.options.onError(createDOMCompilerError(54, loc));
-		exp = EMPTY_EXPRESSION;
-	}
-	if (node.children.length) {
-		context.options.onError(createDOMCompilerError(55, loc));
-		context.childrenTemplate.length = 0;
-	}
-	context.registerEffect([exp], {
-		type: 8,
-		element: context.reference(),
-		value: exp,
-		isComponent: node.tagType === 1
-	});
-};
-//#endregion
 //#region packages/compiler-vapor/src/transforms/transformText.ts
 const seen = /* @__PURE__ */ new WeakMap();
 function markNonTemplate(node, context) {
@@ -22774,12 +22844,10 @@ const transformVOn = (dir, node, context) => {
 	const { keyModifiers, nonKeyModifiers, eventOptionModifiers } = resolveModifiers(arg.isStatic ? `on${arg.content}` : arg, modifiers, null, loc);
 	let keyOverride;
 	const isStaticClick = arg.isStatic && arg.content.toLowerCase() === "click";
-	if (nonKeyModifiers.includes("middle")) {
-		if (keyOverride) {}
-		if (!isStaticClick && !arg.isStatic) keyOverride = ["click", "mouseup"];
-	}
 	if (nonKeyModifiers.includes("right")) {
 		if (!isStaticClick && !arg.isStatic) keyOverride = ["click", "contextmenu"];
+	} else if (nonKeyModifiers.includes("middle")) {
+		if (!isStaticClick && !arg.isStatic) keyOverride = ["click", "mouseup"];
 	}
 	arg = normalizeStaticEventArg(arg, nonKeyModifiers);
 	if (keyModifiers.length && isStaticExp(arg) && !isKeyboardEvent(`on${arg.content.toLowerCase()}`)) keyModifiers.length = 0;
@@ -22793,7 +22861,7 @@ const transformVOn = (dir, node, context) => {
 			options: eventOptionModifiers
 		}
 	};
-	const delegate = arg.isStatic && !eventOptionModifiers.length && !hasStopHandlerForStaticEvent(node, arg.content) && delegatedEvents(arg.content);
+	const delegate = context.options.eventDelegation && arg.isStatic && !eventOptionModifiers.length && !hasStopHandlerForStaticEvent(node, arg.content) && delegatedEvents(arg.content);
 	const operation = {
 		type: 6,
 		element: context.reference(),
@@ -22814,8 +22882,8 @@ function normalizeStaticEventArg(arg, nonKeyModifiers) {
 	if (!arg.isStatic) return arg;
 	let normalized = arg;
 	const isStaticClick = arg.content.toLowerCase() === "click";
-	if (nonKeyModifiers.includes("middle") && isStaticClick) normalized = extend({}, normalized, { content: "mouseup" });
 	if (nonKeyModifiers.includes("right") && isStaticClick) normalized = extend({}, normalized, { content: "contextmenu" });
+	else if (nonKeyModifiers.includes("middle") && isStaticClick) normalized = extend({}, normalized, { content: "mouseup" });
 	return normalized;
 }
 function hasStopHandlerForStaticEvent(node, eventName) {
@@ -23015,11 +23083,14 @@ function processIf(node, dir, context) {
 		}
 		while (lastIfNode.negative && lastIfNode.negative.type === 15) lastIfNode = lastIfNode.negative;
 		if (dir.name === "else-if" && lastIfNode.negative) context.options.onError(createCompilerError(30, node.loc));
-		if (context.root.comment.length) {
-			node = wrapTemplate(node, ["else-if", "else"]);
-			context.node = node = extend({}, node, { children: [...context.comment, ...node.children] });
+		const comments = context.comment;
+		if (comments.length) {
+			if (!isInTransition(context)) {
+				node = wrapTemplate(node, ["else-if", "else"]);
+				context.node = node = extend({}, node, { children: [...comments, ...node.children] });
+			}
+			comments.length = 0;
 		}
-		context.root.comment = [];
 		const [branch, onExit] = createIfBranch(node, context);
 		if (dir.name === "else") lastIfNode.negative = branch;
 		else lastIfNode.negative = {
@@ -23268,7 +23339,7 @@ function transformTemplateSlot(node, dir, context) {
 	});
 	else if (vElse) {
 		const vIfSlot = slots[slots.length - 1];
-		if (vIfSlot.slotType === 3) {
+		if (vIfSlot && vIfSlot.slotType === 3) {
 			let ifNode = vIfSlot;
 			while (ifNode.negative && ifNode.negative.slotType === 3) ifNode = ifNode.negative;
 			const negative = vElse.exp ? {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-vapor",
-  "version": "3.6.0-beta.14",
+  "version": "3.6.0-beta.16",
   "description": "@vue/compiler-vapor",
   "main": "dist/compiler-vapor.cjs.js",
   "module": "dist/compiler-vapor.esm-browser.js",
@@ -42,10 +42,10 @@
   },
   "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-vapor#readme",
   "dependencies": {
-    "@babel/parser": "^7.29.3",
+    "@babel/parser": "^7.29.7",
     "estree-walker": "^2.0.2",
     "source-map-js": "^1.2.1",
-    "@vue/compiler-dom": "3.6.0-beta.14",
-    "@vue/shared": "3.6.0-beta.14"
+    "@vue/compiler-dom": "3.6.0-beta.16",
+    "@vue/shared": "3.6.0-beta.16"
   }
 }