@vue/compiler-vapor 3.6.0-beta.15 → 3.6.0-beta.17

package/dist/compiler-vapor.cjs.js

@@ -1,5 +1,5 @@
 /**
-  * @vue/compiler-vapor v3.6.0-beta.15
+  * @vue/compiler-vapor v3.6.0-beta.17
   * (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$4 = _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;
 }
@@ -230,6 +230,7 @@ function getBlockShape(block) {
 //#endregion
 //#region packages/compiler-vapor/src/transform.ts
 const generatedVarRE = /^[nxr](\d+)$/;
+const childContextInfoCache = /* @__PURE__ */ new WeakMap();
 var TransformContext = class TransformContext {
 	constructor(ir, node, options = {}) {
 		this.ir = ir;
@@ -255,6 +256,7 @@ var TransformContext = class TransformContext {
 		this.operationIndex = this.block.operation.length;
 		this.isLastEffectiveChild = true;
 		this.isOnRightmostPath = true;
+		this.isSingleRoot = false;
 		this.templateCloseTags = void 0;
 		this.templateCloseBlocks = false;
 		this.globalId = 0;
@@ -380,8 +382,10 @@ var TransformContext = class TransformContext {
 	create(node, index) {
 		let effectiveParent = this;
 		while (effectiveParent && effectiveParent.node.type === 1 && effectiveParent.node.tagType === 3) effectiveParent = effectiveParent.parent;
-		const isLastEffectiveChild = this.isEffectivelyLastChild(index);
+		const childInfo = this.getChildContextInfo();
+		const isLastEffectiveChild = childInfo.isLastEffectiveChild[index];
 		const isOnRightmostPath = this.isOnRightmostPath && isLastEffectiveChild;
+		const isSingleRoot = this.isSingleRootChild(childInfo);
 		return Object.assign(Object.create(TransformContext.prototype), this, {
 			node,
 			parent: this,
@@ -396,6 +400,7 @@ var TransformContext = class TransformContext {
 			effectiveParent,
 			isLastEffectiveChild,
 			isOnRightmostPath,
+			isSingleRoot,
 			templateCloseTags: this.templateCloseTags,
 			templateCloseBlocks: this.templateCloseBlocks
 		});
@@ -405,12 +410,59 @@ var TransformContext = class TransformContext {
 		if (operation && isBlockOperation(operation) && operation.effectIndex !== void 0 && operation.effectIndex >= index) operation.effectIndex++;
 		for (const child of dynamic.children) this.shiftEffectBoundaries(index, child);
 	}
-	isEffectivelyLastChild(index) {
-		const children = this.node.children;
-		if (!children) return true;
-		return children.every((c, i) => i <= index || c.type === 1 && c.tagType === 1);
+	getChildContextInfo() {
+		const node = this.node;
+		if (node.type !== 0 && node.type !== 1) return {
+			node,
+			hasSingleRootChild: true,
+			isLastEffectiveChild: []
+		};
+		const cached = childContextInfoCache.get(this);
+		if (cached && cached.node === node) return cached;
+		const { children } = node;
+		const isLastEffectiveChild = new Array(children.length);
+		let hasFollowingEffectiveChild = false;
+		for (let i = children.length - 1; i >= 0; i--) {
+			isLastEffectiveChild[i] = !hasFollowingEffectiveChild;
+			if (!isComponentChild(children[i])) hasFollowingEffectiveChild = true;
+		}
+		const childInfo = {
+			node,
+			hasSingleRootChild: hasSingleRootChild(children),
+			isLastEffectiveChild
+		};
+		childContextInfoCache.set(this, childInfo);
+		return childInfo;
+	}
+	isSingleRootChild(childInfo) {
+		if (this.inVFor || !childInfo.hasSingleRootChild) return false;
+		if (this.node.type === 0) return true;
+		return this.node.type === 1 && this.node.tagType === 3 && !!this.parent && this.isSingleRoot;
 	}
 };
+function hasSingleRootChild(children) {
+	let nonCommentChildren = 0;
+	let hasEncounteredIf = false;
+	let isSingleIfBlock = true;
+	for (const child of children) {
+		if ((0, _vue_compiler_dom.isCommentOrWhitespace)(child)) continue;
+		nonCommentChildren++;
+		if (isIfChild(child)) {
+			if (hasEncounteredIf) isSingleIfBlock = false;
+			hasEncounteredIf = true;
+		} else if (!hasEncounteredIf || !isElseChild(child)) isSingleIfBlock = false;
+	}
+	return nonCommentChildren === 1 || isSingleIfBlock;
+}
+function isComponentChild(child) {
+	return child.type === 1 && child.tagType === 1;
+}
+function isIfChild(child) {
+	return child.type === 9 || child.type === 1 && !!(0, _vue_compiler_dom.findDir)(child, "if");
+}
+function isElseChild(child) {
+	return child.type === 1 && !!(0, _vue_compiler_dom.findDir)(child, /^else(-if)?$/, true);
+}
 const defaultOptions = {
 	filename: "",
 	prefixIdentifiers: true,
@@ -671,6 +723,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,
@@ -692,23 +746,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 [[
@@ -717,7 +779,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;
@@ -737,19 +799,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":
@@ -785,10 +877,10 @@ function canPrefix(name) {
 }
 function processExpressions(context, expressions, shouldDeclare) {
 	const expressionReplacements = /* @__PURE__ */ new Map();
-	const { seenVariable, variableToExpMap, expToVariableMap, seenIdentifier, updatedVariable } = analyzeExpressions(expressions);
+	const { seenVariable, variableToExpMap, expressionRecords, seenIdentifier, updatedVariable } = analyzeExpressions(expressions);
 	const reservedNames = new Set(seenIdentifier);
-	const varDeclarations = processRepeatedVariables(context, seenVariable, variableToExpMap, expToVariableMap, seenIdentifier, updatedVariable, reservedNames, expressionReplacements);
-	const expDeclarations = processRepeatedExpressions(context, expressions, varDeclarations, updatedVariable, expToVariableMap, reservedNames, expressionReplacements);
+	const varDeclarations = processRepeatedVariables(context, seenVariable, variableToExpMap, expressionRecords, seenIdentifier, updatedVariable, reservedNames, expressionReplacements);
+	const expDeclarations = processRepeatedExpressions(context, expressions, varDeclarations, updatedVariable, expressionRecords, reservedNames, expressionReplacements);
 	return {
 		...genDeclarations([...varDeclarations, ...expDeclarations], context, shouldDeclare),
 		expressionReplacements
@@ -797,19 +889,22 @@ function processExpressions(context, expressions, shouldDeclare) {
 function analyzeExpressions(expressions) {
 	const seenVariable = Object.create(null);
 	const variableToExpMap = /* @__PURE__ */ new Map();
-	const expToVariableMap = /* @__PURE__ */ new Map();
+	const expressionRecords = /* @__PURE__ */ new Map();
 	const seenIdentifier = /* @__PURE__ */ new Set();
 	const updatedVariable = /* @__PURE__ */ new Set();
+	const getRecord = (exp) => {
+		let record = expressionRecords.get(exp);
+		if (!record) expressionRecords.set(exp, record = { variables: [] });
+		return record;
+	};
 	const registerVariable = (name, exp, isIdentifier, loc, parentStack = []) => {
 		if (isIdentifier) seenIdentifier.add(name);
 		seenVariable[name] = (seenVariable[name] || 0) + 1;
 		variableToExpMap.set(name, (variableToExpMap.get(name) || /* @__PURE__ */ new Set()).add(exp));
-		const variables = expToVariableMap.get(exp) || [];
-		variables.push({
+		getRecord(exp).variables.push({
 			name,
 			loc
 		});
-		expToVariableMap.set(exp, variables);
 		if (parentStack.some((p) => p.type === "UpdateExpression" || p.type === "AssignmentExpression")) updatedVariable.add(name);
 	};
 	for (const exp of expressions) {
@@ -846,7 +941,7 @@ function analyzeExpressions(expressions) {
 		seenVariable,
 		seenIdentifier,
 		variableToExpMap,
-		expToVariableMap,
+		expressionRecords,
 		updatedVariable
 	};
 }
@@ -856,9 +951,10 @@ function getProcessedExpression(exp, expressionReplacements) {
 function setExpressionReplacement(expressionReplacements, exp, content, ast) {
 	expressionReplacements.set(exp, (0, _vue_shared.extend)({ ast }, (0, _vue_compiler_dom.createSimpleExpression)(content, exp.isStatic, exp.loc, exp.constType)));
 }
-function processRepeatedVariables(context, seenVariable, variableToExpMap, expToVariableMap, seenIdentifier, updatedVariable, reservedNames, expressionReplacements) {
+function processRepeatedVariables(context, seenVariable, variableToExpMap, expressionRecords, seenIdentifier, updatedVariable, reservedNames, expressionReplacements) {
 	const declarations = [];
-	const expToReplacementMap = /* @__PURE__ */ new Map();
+	const declaredNames = /* @__PURE__ */ new Set();
+	const replacementPlan = /* @__PURE__ */ new Map();
 	for (const [name, exps] of variableToExpMap) {
 		if (updatedVariable.has(name)) continue;
 		if ((0, _vue_shared.isGloballyAllowed)(name)) continue;
@@ -867,96 +963,201 @@ function processRepeatedVariables(context, seenVariable, variableToExpMap, expTo
 			const varName = isIdentifier ? name : getUniqueDeclarationName(genVarName(name), reservedNames);
 			exps.forEach((node) => {
 				if (node.ast && varName !== name) {
-					const replacements = expToReplacementMap.get(node) || [];
-					replacements.push({
-						name: varName,
-						locs: expToVariableMap.get(node).reduce((locs, v) => {
-							if (v.name === name && v.loc) locs.push(v.loc);
-							return locs;
-						}, [])
+					for (const variable of getExpressionVariables(expressionRecords, node)) if (variable.name === name && variable.loc) queueContentReplacement(replacementPlan, node, {
+						start: variable.loc.start - 1,
+						end: variable.loc.end - 1,
+						content: varName
 					});
-					expToReplacementMap.set(node, replacements);
 				}
 			});
-			if (!declarations.some((d) => d.name === varName) && (!isIdentifier || shouldDeclareVariable(name, expToVariableMap, exps))) declarations.push({
-				name: varName,
-				isIdentifier,
-				value: (0, _vue_shared.extend)({ ast: isIdentifier ? null : parseExp(context, name) }, (0, _vue_compiler_dom.createSimpleExpression)(name)),
-				rawName: name,
-				exps,
-				seenCount: seenVariable[name]
-			});
+			if (!declaredNames.has(varName) && (!isIdentifier || shouldDeclareVariable(name, expressionRecords, exps))) {
+				declaredNames.add(varName);
+				declarations.push({
+					name: varName,
+					isIdentifier,
+					value: (0, _vue_shared.extend)({ ast: isIdentifier ? null : parseExp(context, name) }, (0, _vue_compiler_dom.createSimpleExpression)(name)),
+					rawName: name,
+					exps,
+					seenCount: seenVariable[name]
+				});
+			}
 		}
 	}
-	for (const [exp, replacements] of expToReplacementMap) {
-		let content = getProcessedExpression(exp, expressionReplacements).content;
-		replacements.flatMap(({ name, locs }) => locs.map(({ start, end }) => ({
-			start,
-			end,
-			name
-		}))).sort((a, b) => b.end - a.end).forEach(({ start, end, name }) => {
-			content = content.slice(0, start - 1) + name + content.slice(end - 1);
-		});
-		setExpressionReplacement(expressionReplacements, exp, content, parseExp(context, content));
-	}
+	applyReplacementPlan(context, expressionReplacements, replacementPlan);
 	return declarations;
 }
-function shouldDeclareVariable(name, expToVariableMap, exps) {
-	const vars = Array.from(exps, (exp) => expToVariableMap.get(exp).map((v) => v.name));
-	if (vars.every((v) => v.length === 1)) return true;
-	if (vars.some((v) => v.filter((e) => e === name).length > 1)) return true;
-	const first = vars[0];
-	if (vars.some((v) => v.length !== first.length)) {
-		if (vars.some((v) => v.length > first.length && v.every((e) => first.includes(e))) || vars.some((v) => first.length > v.length && first.every((e) => v.includes(e)))) return false;
+function shouldDeclareVariable(name, expressionRecords, exps) {
+	const variableUsages = [];
+	let allSingleVariable = true;
+	let hasRepeatedName = false;
+	let hasDifferentLength = false;
+	outer: for (const exp of exps) {
+		const variables = getExpressionVariables(expressionRecords, exp);
+		if (allSingleVariable && variables.length !== 1) allSingleVariable = false;
+		if (!hasDifferentLength && variableUsages.length > 0 && variables.length !== variableUsages[0].length) hasDifferentLength = true;
+		let nameCount = 0;
+		for (const variable of variables) if (variable.name === name && ++nameCount > 1) {
+			hasRepeatedName = true;
+			break outer;
+		}
+		variableUsages.push(variables);
+	}
+	if (allSingleVariable) return true;
+	if (hasRepeatedName) return true;
+	const first = variableUsages[0];
+	if (hasDifferentLength) {
+		for (const variables of variableUsages) {
+			if (variables.length === first.length) continue;
+			const longer = variables.length > first.length ? variables : first;
+			const shorter = variables.length > first.length ? first : variables;
+			const shorterNames = /* @__PURE__ */ new Set();
+			for (const variable of shorter) shorterNames.add(variable.name);
+			let isSubset = true;
+			for (const variable of longer) if (!shorterNames.has(variable.name)) {
+				isSubset = false;
+				break;
+			}
+			if (isSubset) return false;
+		}
 		return true;
 	}
-	if (vars.every((v) => v.every((e, idx) => e === first[idx]))) return false;
-	return true;
+	for (const variables of variableUsages) for (let i = 0; i < variables.length; i++) if (variables[i].name !== first[i].name) return true;
+	return false;
 }
-function processRepeatedExpressions(context, expressions, varDeclarations, updatedVariable, expToVariableMap, reservedNames, expressionReplacements) {
+function processRepeatedExpressions(context, expressions, varDeclarations, updatedVariable, expressionRecords, reservedNames, expressionReplacements) {
 	const declarations = [];
-	const seenExp = expressions.reduce((acc, exp) => {
-		const vars = expToVariableMap.get(exp);
-		if (!vars) return acc;
+	const seenExp = /* @__PURE__ */ new Map();
+	for (const exp of expressions) {
+		var _expressionRecords$ge;
+		const vars = (_expressionRecords$ge = expressionRecords.get(exp)) === null || _expressionRecords$ge === void 0 ? void 0 : _expressionRecords$ge.variables;
+		if (!vars) continue;
 		const processed = getProcessedExpression(exp, expressionReplacements);
-		const variables = vars.map((v) => v.name);
-		if (processed.ast && processed.ast.type !== "Identifier" && !(variables && variables.some((v) => updatedVariable.has(v))) && !variables.some((v) => (0, _vue_shared.isGloballyAllowed)(v))) acc[processed.content] = (acc[processed.content] || 0) + 1;
-		return acc;
-	}, Object.create(null));
-	Object.entries(seenExp).forEach(([content, count]) => {
-		if (count > 1) {
-			const delVars = {};
-			for (let i = varDeclarations.length - 1; i >= 0; i--) {
-				const item = varDeclarations[i];
-				if (!item.exps || !item.seenCount) continue;
-				if ([...item.exps].every((node) => getProcessedExpression(node, expressionReplacements).content === content && item.seenCount === count)) {
-					delVars[item.name] = item.rawName;
-					reservedNames.delete(item.name);
-					varDeclarations.splice(i, 1);
-				}
-			}
-			const value = (0, _vue_shared.extend)({}, getProcessedExpression(expressions.find((exp) => getProcessedExpression(exp, expressionReplacements).content === content), expressionReplacements));
-			Object.keys(delVars).forEach((name) => {
-				value.content = value.content.replace(name, delVars[name]);
-				if (value.ast) value.ast = parseExp(context, value.content);
-			});
-			const varName = getUniqueDeclarationName(genVarName(content), reservedNames);
-			declarations.push({
-				name: varName,
-				value
+		if (canCacheExpression(processed, vars, updatedVariable)) {
+			const seen = seenExp.get(processed.content);
+			if (seen) seen.count++;
+			else seenExp.set(processed.content, {
+				count: 1,
+				first: exp
 			});
-			expressions.forEach((exp) => {
-				const processed = getProcessedExpression(exp, expressionReplacements);
-				if (processed.content === content) setExpressionReplacement(expressionReplacements, exp, varName, null);
-				else if (processed.content.includes(content)) {
-					const replacedContent = processed.content.replace(new RegExp(escapeRegExp(content), "g"), varName);
+		}
+	}
+	const repeatedExpressions = [...seenExp].sort(([contentA], [contentB]) => contentB.length - contentA.length);
+	for (const [content, { count, first }] of repeatedExpressions) if (count > 1) {
+		const removedDeclarations = [];
+		for (let i = varDeclarations.length - 1; i >= 0; i--) {
+			const item = varDeclarations[i];
+			if (!item.exps || !item.seenCount) continue;
+			if ([...item.exps].every((node) => getProcessedExpression(node, expressionReplacements).content === content && item.seenCount === count)) {
+				removedDeclarations.push({
+					name: item.name,
+					rawName: item.rawName
+				});
+				reservedNames.delete(item.name);
+				varDeclarations.splice(i, 1);
+			}
+		}
+		const value = (0, _vue_shared.extend)({}, getProcessedExpression(first, expressionReplacements));
+		const restorePlan = [];
+		for (const { name, rawName } of removedDeclarations) restorePlan.push(...findIdentifierReplacements(value, name, rawName));
+		if (restorePlan.length) {
+			value.content = applyContentReplacements(value.content, restorePlan);
+			if (value.ast) value.ast = parseExp(context, value.content);
+		}
+		const varName = getUniqueDeclarationName(genVarName(content), reservedNames);
+		declarations.push({
+			name: varName,
+			value
+		});
+		for (const exp of expressions) {
+			const processed = getProcessedExpression(exp, expressionReplacements);
+			if (processed.content === content) setExpressionReplacement(expressionReplacements, exp, varName, null);
+			else if (processed.content.includes(content)) {
+				const replacements = findContentReplacements(processed, content, varName);
+				if (replacements.length) {
+					const replacedContent = applyContentReplacements(processed.content, replacements);
 					setExpressionReplacement(expressionReplacements, exp, replacedContent, parseExp(context, replacedContent));
 				}
-			});
+			}
 		}
-	});
+	}
 	return declarations;
 }
+function canCacheExpression(processed, vars, updatedVariable) {
+	if (!processed.ast || processed.ast.type === "Identifier") return false;
+	for (const { name } of vars) if (updatedVariable.has(name) || (0, _vue_shared.isGloballyAllowed)(name)) return false;
+	return true;
+}
+function getExpressionVariables(expressionRecords, exp) {
+	var _expressionRecords$ge2;
+	return ((_expressionRecords$ge2 = expressionRecords.get(exp)) === null || _expressionRecords$ge2 === void 0 ? void 0 : _expressionRecords$ge2.variables) || [];
+}
+function queueContentReplacement(replacementPlan, exp, replacement) {
+	const replacements = replacementPlan.get(exp);
+	if (replacements) replacements.push(replacement);
+	else replacementPlan.set(exp, [replacement]);
+}
+function applyReplacementPlan(context, expressionReplacements, replacementPlan) {
+	for (const [exp, replacements] of replacementPlan) {
+		if (!replacements.length) continue;
+		const content = applyContentReplacements(getProcessedExpression(exp, expressionReplacements).content, replacements);
+		setExpressionReplacement(expressionReplacements, exp, content, parseExp(context, content));
+	}
+}
+function findContentReplacements(exp, content, replacement) {
+	const identifiers = getIdentifierRanges(exp);
+	if (!identifiers.length) return [];
+	const replacements = [];
+	let searchStart = 0;
+	let start = exp.content.indexOf(content, searchStart);
+	while (start !== -1) {
+		const end = start + content.length;
+		let canReplace = false;
+		for (const identifier of identifiers) {
+			if (start >= identifier.end || end <= identifier.start) continue;
+			if (start > identifier.start || end < identifier.end) {
+				canReplace = false;
+				break;
+			}
+			canReplace = true;
+		}
+		if (canReplace) {
+			replacements.push({
+				start,
+				end,
+				content: replacement
+			});
+			searchStart = end;
+		} else searchStart = start + 1;
+		start = exp.content.indexOf(content, searchStart);
+	}
+	return replacements;
+}
+function findIdentifierReplacements(exp, name, replacement) {
+	const replacements = [];
+	for (const { start, end } of getIdentifierRanges(exp)) if (exp.content.slice(start, end) === name) replacements.push({
+		start,
+		end,
+		content: replacement
+	});
+	return replacements;
+}
+function getIdentifierRanges(exp) {
+	if (!exp.ast || typeof exp.ast !== "object") return [];
+	const identifiers = [];
+	(0, _vue_compiler_dom.walkIdentifiers)(exp.ast, (id) => {
+		identifiers.push({
+			start: id.start - 1,
+			end: id.end - 1
+		});
+	}, false);
+	return identifiers;
+}
+function applyContentReplacements(content, replacements) {
+	replacements.sort((a, b) => b.start - a.start).forEach(({ start, end, content: replacement }) => {
+		content = content.slice(0, start) + replacement + content.slice(end);
+	});
+	return content;
+}
 function genDeclarations(declarations, context, shouldDeclare) {
 	const [frag, push] = buildCodeFragment();
 	const ids = Object.create(null);
@@ -984,9 +1185,6 @@ function genDeclarations(declarations, context, shouldDeclare) {
 		varNames: [...varNames]
 	};
 }
-function escapeRegExp(string) {
-	return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
 function parseExp(context, content) {
 	return (0, _babel_parser.parseExpression)(`(${content})`, getParserOptions(context.options.expressionPlugins));
 }
@@ -1177,7 +1375,7 @@ function genFor(oper, context) {
 		idMap[rawIndex] = `${indexVar}.value`;
 		idMap[indexVar] = null;
 	}
-	const { selectorPatterns, keyOnlyBindingPatterns } = matchPatterns(render, keyProp, idMap, context);
+	const { selectorPatterns, keyOnlyBindingPatterns, skippedEffectIndexes } = matchPatterns(render, keyProp, idMap, context);
 	const selectorDeclarations = [];
 	const selectorName = (i) => selectorPatterns.length > 1 ? `_selector${id}_${i}` : `_selector${id}`;
 	for (let i = 0; i < selectorPatterns.length; i++) {
@@ -1197,26 +1395,20 @@ function genFor(oper, context) {
 			}
 			for (const { effect } of keyOnlyBindingPatterns) for (const oper of effect.operations) patternFrag.push(...genOperation(oper, context));
 			return patternFrag;
-		}));
+		}, skippedEffectIndexes));
 		else frag.push(...genBlockContent(render, context));
 		frag.push(INDENT_END, NEWLINE, "}");
 		return frag;
 	}, idMap);
 	exitScope();
-	let flags = 0;
-	if (onlyChild) flags |= 1;
-	if (component) flags |= 2;
-	if (isFragmentBlock(render)) flags |= 16;
-	if (!component && isSingleNodeBlock(render)) flags |= 8;
-	if (once) flags |= 4;
-	if (slotRoot) flags |= 32;
+	const flags = genForFlags(onlyChild, component, isFragmentBlock(render), !component && isSingleNodeBlock(render), once, slotRoot);
 	const onResetCalls = [];
 	for (let i = 0; i < selectorPatterns.length; i++) onResetCalls.push(NEWLINE, `n${id}.onReset(${selectorName(i)}.reset)`);
 	return [
 		NEWLINE,
 		...selectorDeclarations,
 		`const n${id} = `,
-		...genCall([helper("createFor"), "undefined"], sourceExpr, blockFn, genCallback(keyProp), flags ? String(flags) : void 0),
+		...genCall([helper("createFor"), "undefined"], sourceExpr, blockFn, genCallback(keyProp), flags),
 		...onResetCalls
 	];
 	function genCallback(expr) {
@@ -1241,6 +1433,36 @@ function genFor(oper, context) {
 		return idMap;
 	}
 }
+function genForFlags(onlyChild, component, isFragment, isSingleNode, once, slotRoot) {
+	let flags = 0;
+	const names = [];
+	if (onlyChild) {
+		flags |= 1;
+		names.push("FAST_REMOVE");
+	}
+	if (component) {
+		flags |= 2;
+		names.push("IS_COMPONENT");
+	}
+	if (isFragment) {
+		flags |= 16;
+		names.push("IS_FRAGMENT");
+	}
+	if (isSingleNode) {
+		flags |= 8;
+		names.push("IS_SINGLE_NODE");
+	}
+	if (once) {
+		flags |= 4;
+		names.push("ONCE");
+	}
+	if (slotRoot) {
+		flags |= 32;
+		names.push("SLOT_ROOT");
+	}
+	if (!flags) return;
+	return `${flags} /* ${names.join(", ")} */`;
+}
 function isSingleNodeBlock(block) {
 	const child = getSingleReturnedChild(block);
 	return !!child && child.template != null;
@@ -1327,39 +1549,35 @@ function buildDestructureIdMap(idToPathMap, baseAccessor, plugins) {
 function matchPatterns(render, keyProp, idMap, context) {
 	const selectorPatterns = [];
 	const keyOnlyBindingPatterns = [];
-	const removedEffectIndexes = [];
-	render.effect = render.effect.filter((effect, index) => {
-		if (keyProp !== void 0) {
-			const selector = matchSelectorPattern(effect, keyProp.content, idMap, context);
-			if (selector) {
-				selectorPatterns.push(selector);
-				removedEffectIndexes.push(index);
-				return false;
-			}
-			const keyOnly = matchKeyOnlyBindingPattern(effect, keyProp.content);
-			if (keyOnly) {
-				keyOnlyBindingPatterns.push(keyOnly);
-				removedEffectIndexes.push(index);
-				return false;
-			}
+	let skippedEffectIndexes;
+	if (keyProp === void 0) return {
+		keyOnlyBindingPatterns,
+		selectorPatterns,
+		skippedEffectIndexes
+	};
+	for (let index = 0; index < render.effect.length; index++) {
+		const effect = render.effect[index];
+		const selector = matchSelectorPattern(effect, keyProp.content, idMap, context);
+		if (selector) {
+			selectorPatterns.push(selector);
+			skipEffect(index);
+			continue;
 		}
-		return true;
-	});
-	if (removedEffectIndexes.length) shiftEffectBoundaries(render.dynamic, removedEffectIndexes);
+		const keyOnly = matchKeyOnlyBindingPattern(effect, keyProp.content);
+		if (keyOnly) {
+			keyOnlyBindingPatterns.push(keyOnly);
+			skipEffect(index);
+		}
+	}
 	return {
 		keyOnlyBindingPatterns,
-		selectorPatterns
+		selectorPatterns,
+		skippedEffectIndexes
 	};
-}
-function shiftEffectBoundaries(dynamic, removedEffectIndexes) {
-	const operation = dynamic.operation;
-	if (operation && isBlockOperation(operation) && operation.effectIndex !== void 0) {
-		let offset = 0;
-		for (const removedIndex of removedEffectIndexes) if (removedIndex < operation.effectIndex) offset++;
-		else break;
-		operation.effectIndex -= offset;
+	function skipEffect(index) {
+		if (!skippedEffectIndexes) skippedEffectIndexes = /* @__PURE__ */ new Set();
+		skippedEffectIndexes.add(index);
 	}
-	for (const child of dynamic.children) shiftEffectBoundaries(child, removedEffectIndexes);
 }
 function matchKeyOnlyBindingPattern(effect, key) {
 	if (effect.expressions.length === 1) {
@@ -1464,14 +1682,25 @@ function genIfFlags(blockShape, once, slotRoot, index) {
 	return `${flags} /* ${genIfFlagNames(once, slotRoot, index, blockShape)} */`;
 }
 function genIfFlagNames(once, slotRoot, index, blockShape) {
-	const names = ["BLOCK_SHAPE"];
+	const names = [`TRUE_${genBlockShapeName(blockShape)}`];
+	const falseShape = blockShape >> 2;
+	const hasFalseBranch = (falseShape & 3) !== 0;
+	if (hasFalseBranch) names.push(`FALSE_${genBlockShapeName(falseShape)}`);
 	if (blockShape & 32) names.push("TRUE_NO_SCOPE");
-	if (blockShape & 64) names.push("FALSE_NO_SCOPE");
+	if (hasFalseBranch && blockShape & 64) names.push("FALSE_NO_SCOPE");
 	if (once) names.push("ONCE");
 	if (slotRoot) names.push("SLOT_ROOT");
-	if (!once && index !== void 0) names.push("INDEX_SHIFT");
+	if (!once && index !== void 0) names.push(`KEYED_INDEX_${index}`);
 	return names.join(", ");
 }
+function genBlockShapeName(flags) {
+	switch (flags & 3) {
+		case 0: return "EMPTY";
+		case 1: return "SINGLE_ROOT";
+		case 2: return "MULTI_ROOT";
+	}
+	return "UNKNOWN";
+}
 //#endregion
 //#region packages/compiler-vapor/src/generators/prop.ts
 const helpers = {
@@ -1653,7 +1882,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 [
 		"[",
@@ -1745,6 +1979,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",
@@ -1759,7 +1998,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 [
@@ -1801,14 +2040,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;
@@ -1817,7 +2057,7 @@ function genCreateComponent(operation, context) {
 	const tag = genTag();
 	const { root, props, slots, once, slotRoot } = operation;
 	const isRuntimeDynamicComponent = !!(operation.dynamic && !operation.dynamic.isStatic);
-	const dynamicComponentFlags = isRuntimeDynamicComponent ? (root ? 1 : 0) | (once ? 2 : 0) | (slotRoot ? 4 : 0) : 0;
+	const dynamicComponentFlags = isRuntimeDynamicComponent ? genDynamicComponentFlags(root, once, slotRoot) : false;
 	const rawSlots = genRawSlots(slots, context);
 	const [ids, handlers] = processInlineHandlers(props, context);
 	const rawProps = context.withId(() => genRawProps(props, context, true), ids);
@@ -1833,7 +2073,7 @@ function genCreateComponent(operation, context) {
 			];
 		}, []),
 		`const n${operation.id} = `,
-		...genCall(isRuntimeDynamicComponent ? helper("createDynamicComponent") : operation.useCreateElement ? helper("createPlainElement") : useAssetComponentHelper ? helper("createAssetComponent") : operation.asset ? helper("createComponentWithFallback") : helper("createComponent"), tag, rawProps, rawSlots, isRuntimeDynamicComponent ? dynamicComponentFlags ? String(dynamicComponentFlags) : false : root ? "true" : false, isRuntimeDynamicComponent ? false : once && "true", isRuntimeDynamicComponent ? false : maybeSelfReference && "true"),
+		...genCall(isRuntimeDynamicComponent ? helper("createDynamicComponent") : operation.useCreateElement ? helper("createPlainElement") : useAssetComponentHelper ? helper("createAssetComponent") : operation.asset ? helper("createComponentWithFallback") : helper("createComponent"), tag, rawProps, rawSlots, isRuntimeDynamicComponent ? dynamicComponentFlags : root ? "true" : false, isRuntimeDynamicComponent ? false : once && "true", isRuntimeDynamicComponent ? false : maybeSelfReference && "true"),
 		...genDirectivesForElement(operation.id, context)
 	];
 	function genTag() {
@@ -1859,6 +2099,24 @@ function genCreateComponent(operation, context) {
 		}
 	}
 }
+function genDynamicComponentFlags(root, once, slotRoot) {
+	let flags = 0;
+	const names = [];
+	if (root) {
+		flags |= 1;
+		names.push("SINGLE_ROOT");
+	}
+	if (once) {
+		flags |= 2;
+		names.push("ONCE");
+	}
+	if (slotRoot) {
+		flags |= 4;
+		names.push("SLOT_ROOT");
+	}
+	if (!flags) return false;
+	return `${flags} /* ${names.join(", ")} */`;
+}
 function getUniqueHandlerName(context, name) {
 	const { seenInlineHandlerNames } = context;
 	name = genVarName(name);
@@ -1950,7 +2208,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\"]"
@@ -1993,7 +2251,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\"]"
@@ -2118,7 +2376,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;
@@ -2130,7 +2388,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([
 			"(",
@@ -2156,7 +2414,7 @@ function genConditionalSlot(slot, context) {
 		INDENT_END
 	];
 }
-function genSlotBlockWithProps(oper, context) {
+function genSlotBlockWithProps(oper, context, emitNonStableFlag = true) {
 	let propsName;
 	let exitScope;
 	let depth;
@@ -2169,12 +2427,56 @@ function genSlotBlockWithProps(oper, context) {
 	const idMap = idToPathMap.size ? buildDestructureIdMap(idToPathMap, propsName || "", context.options.expressionPlugins) : {};
 	if (propsName) idMap[propsName] = null;
 	const exitSlotBlock = context.enterSlotBlock();
-	markSlotRootOperations(oper);
+	const hasStableRoot = hasStableSlotRoot(oper, context);
+	if (!hasStableRoot) markSlotRootOperations(oper);
 	let blockFn = context.withId(() => genBlock(oper, context, propsName ? [propsName] : []), idMap);
+	if (emitNonStableFlag && !hasStableRoot) blockFn = genCall(context.helper("extend"), blockFn, [`{ _: ${genSlotFlags$1(8)} }`]);
 	exitSlotBlock();
 	exitScope && exitScope();
 	return blockFn;
 }
+function genSlotFlags$1(flags) {
+	const names = [];
+	if (flags & 1) names.push("NO_SLOTTED");
+	if (flags & 2) names.push("ONCE");
+	if (flags & 4) names.push("SLOT_ROOT");
+	if (flags & 8) names.push("NON_STABLE");
+	return `${flags} /* ${names.join(", ")} */`;
+}
+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;
+				}
+				continue;
+			case 17:
+				if (hasStableSlotRoot(operation.block, context)) {
+					hasValidRoot = true;
+					continue;
+				}
+				continue;
+			default: continue;
+		}
+	}
+	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) {
@@ -2183,7 +2485,7 @@ function genSlotOutlet(oper, context) {
 	const [frag, push] = buildCodeFragment();
 	let fallbackArg;
 	if (fallback) {
-		markSlotRootOperations(fallback);
+		if (context.inSlotBlock) markSlotRootOperations(fallback);
 		fallbackArg = genBlock(fallback, context);
 	}
 	const createSlot = helper("createSlot");
@@ -2193,9 +2495,17 @@ function genSlotOutlet(oper, context) {
 		...genExpression(name, context),
 		")"
 	];
-	push(NEWLINE, `const n${id} = `, ...genCall(createSlot, nameArg, rawPropsArg, fallbackArg, flags ? String(flags) : void 0));
+	push(NEWLINE, `const n${id} = `, ...genCall(createSlot, nameArg, rawPropsArg, fallbackArg, genSlotFlags(flags)));
 	return frag;
 }
+function genSlotFlags(flags) {
+	if (!flags) return;
+	const names = [];
+	if (flags & 1) names.push("NO_SLOTTED");
+	if (flags & 2) names.push("ONCE");
+	if (flags & 4) names.push("SLOT_ROOT");
+	return `${flags} /* ${names.join(", ")} */`;
+}
 //#endregion
 //#region packages/compiler-vapor/src/generators/key.ts
 function genKey(oper, context) {
@@ -2468,7 +2778,7 @@ function genBlock(oper, context, args = [], root) {
 		"}"
 	];
 }
-function genBlockContent(block, context, root, genEffectsExtraFrag) {
+function genBlockContent(block, context, root, genEffectsExtraFrag, skippedEffectIndexes) {
 	const [frag, push] = buildCodeFragment();
 	const { dynamic, effect, operation, returns } = block;
 	const resetBlock = context.enterBlock(block);
@@ -2493,7 +2803,7 @@ function genBlockContent(block, context, root, genEffectsExtraFrag) {
 			operationIndex++;
 		}
 		if (effectIndex < effectEnd) {
-			push(...genEffects(effect.slice(effectIndex, effectEnd), context));
+			push(...genEffectRange(effectIndex, effectEnd));
 			effectIndex = effectEnd;
 		}
 	};
@@ -2507,14 +2817,21 @@ function genBlockContent(block, context, root, genEffectsExtraFrag) {
 	}
 	for (const child of dynamic.children) if (!child.hasDynamicChild) push(...genChildren(child, context, push, `n${child.id}`, flushBeforeDynamic));
 	if (operationIndex < operation.length) push(...genOperations(operation.slice(operationIndex), context));
-	if (effectIndex < effect.length) push(...genEffects(effect.slice(effectIndex), context, genEffectsExtraFrag));
+	if (effectIndex < effect.length) push(...genEffectRange(effectIndex, effect.length, 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;
+	function genEffectRange(start, end, genExtraFrag) {
+		if (!skippedEffectIndexes) return genEffects(effect.slice(start, end), context, genExtraFrag);
+		const effects = [];
+		for (let i = start; i < end; i++) if (!skippedEffectIndexes.has(i)) effects.push(effect[i]);
+		if (effects.length || genExtraFrag) return genEffects(effects, context, genExtraFrag);
+		return [];
+	}
 	function genResolveAssets(kind, helper) {
 		for (const name of context.ir[kind]) push(NEWLINE, `const ${(0, _vue_compiler_dom.toValidAssetId)(name, kind)} = `, ...genCall(context.helper(helper), JSON.stringify(name)));
 	}
@@ -2526,7 +2843,6 @@ function markSlotRootOperations(block) {
 		if (!operation) continue;
 		if (operation.type === 15) markSlotRootIf(operation);
 		else if (operation.type === 16) markSlotRootFor(operation);
-		else if (operation.type === 13) markSlotRootSlotOutlet(operation);
 		else if (operation.type === 12) markSlotRootComponent(operation);
 	}
 }
@@ -2542,10 +2858,6 @@ function markSlotRootFor(operation) {
 	if (!operation.once) operation.slotRoot = true;
 	markSlotRootOperations(operation.render);
 }
-function markSlotRootSlotOutlet(operation) {
-	operation.flags |= 4;
-	if (operation.fallback) markSlotRootOperations(operation.fallback);
-}
 function markSlotRootComponent(operation) {
 	if (!operation.once && operation.dynamic && !operation.dynamic.isStatic) operation.slotRoot = true;
 }
@@ -2850,11 +3162,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;
@@ -2868,7 +3205,7 @@ const transformElement = (node, context) => {
 		const isDynamicComponent = isComponentTag(node.tag);
 		const staticKey = resolveStaticKey(node, context, isComponent);
 		const propsResult = buildProps(node, context, isComponent, isDynamicComponent, getEffectIndex);
-		const singleRoot = isSingleRoot(context);
+		const singleRoot = context.isSingleRoot;
 		if (isComponent) transformComponentElement(node, propsResult, staticKey, singleRoot, context, isDynamicComponent, useCreateElement);
 		else transformNativeElement(node, propsResult, staticKey, singleRoot, context, getEffectIndex, context.root === context.effectiveParent || canOmitEndTag(node, context));
 		if (parentSlots) context.slots = parentSlots;
@@ -2907,16 +3244,6 @@ function isInSameTemplateAsParent(context) {
 	if (parentNode.type !== 1 || parentNode.tagType !== 0) return false;
 	return !shouldUseCreateElement(parentNode, parent) && (0, _vue_compiler_dom.isValidHTMLNesting)(parentNode.tag, node.tag);
 }
-function isSingleRoot(context) {
-	if (context.inVFor) return false;
-	let { parent } = context;
-	if (parent && !((0, _vue_compiler_dom.hasSingleChild)(parent.node) || (0, _vue_compiler_dom.isSingleIfBlock)(parent.node))) return false;
-	while (parent && parent.parent && parent.node.type === 1 && parent.node.tagType === 3) {
-		parent = parent.parent;
-		if (!((0, _vue_compiler_dom.hasSingleChild)(parent.node) || (0, _vue_compiler_dom.isSingleIfBlock)(parent.node))) return false;
-	}
-	return context.root === parent;
-}
 function transformComponentElement(node, propsResult, staticKey, singleRoot, context, isDynamicComponent, useCreateElement) {
 	const dynamicComponent = isDynamicComponent ? resolveDynamicComponent(node) : void 0;
 	let { tag } = node;
@@ -3005,17 +3332,18 @@ function transformNativeElement(node, propsResult, staticKey, singleRoot, contex
 		};
 		for (const prop of propsResult[1]) {
 			const { key, values } = prop;
+			const canStringifyAttrName = key.isStatic && !UNSAFE_ATTR_NAME_RE.test(key.content);
 			let foldedValue;
-			if (context.imports.some((imported) => values[0].content.includes(imported.exp.content))) {
+			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 && 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 if (key.isStatic && !prop.modifier && (0, _vue_shared.isBooleanAttr)(key.content) && (foldedValue = foldBooleanAttrValue(values)) != null) {
+			} else if (canStringifyAttrName && !prop.modifier && (0, _vue_shared.isBooleanAttr)(key.content) && (foldedValue = foldBooleanAttrValue(values)) != null) {
 				if (foldedValue) appendTemplateProp(key.content);
-			} else if (key.isStatic && !prop.modifier && hasBoundValue(values) && (foldedValue = key.content === "class" ? foldClassValues(values) : key.content === "style" ? foldStyleValues(values) : void 0) != null) {
+			} 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,
@@ -3535,25 +3863,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
@@ -3619,13 +3928,7 @@ const transformText = (node, context) => {
 };
 function processInterpolation(context) {
 	const parentNode = context.parent.node;
-	const children = parentNode.children;
-	const nexts = children.slice(context.index);
-	const idx = nexts.findIndex((n) => !isTextLike(n));
-	const nodes = idx > -1 ? nexts.slice(0, idx) : nexts;
-	const prev = children[context.index - 1];
-	if (prev && prev.type === 2) nodes.unshift(prev);
-	const values = processTextLikeChildren(nodes, context);
+	const values = processTextLikeChildren(collectAdjacentText(context), context);
 	if (values.length === 0 && parentNode.type !== 0) return;
 	const literalValues = values.map((v) => getLiteralExpressionValue(v));
 	if (literalValues.every((v) => v != null) && parentNode.type !== 0) {
@@ -3647,6 +3950,18 @@ function processInterpolation(context) {
 		values
 	});
 }
+function collectAdjacentText(context) {
+	const children = context.parent.node.children;
+	const nodes = [];
+	const prev = children[context.index - 1];
+	let index = prev && prev.type === 2 ? context.index - 1 : context.index;
+	for (; index < children.length; index++) {
+		const child = children[index];
+		if (!isTextLike(child)) break;
+		nodes.push(child);
+	}
+	return nodes;
+}
 function processTextContainer(children, context) {
 	const values = processTextLikeChildren(children, context);
 	const literals = values.map((value) => getLiteralExpressionValue(value));
@@ -4195,7 +4510,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$4(node, "slot", true);
 	const { tagType, children } = node;
 	const { parent } = context;
 	const isComponent = tagType === 1;
@@ -4246,9 +4561,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$4(node, "for");
+	const vIf = findDir$4(node, "if");
+	const vElse = findDir$4(node, /^else(-if)?$/, true);
 	const { slots } = context;
 	const [block, onExit] = createSlotBlock(node, dir, context);
 	if (!vFor && !vIf && !vElse) {
@@ -4266,7 +4581,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 ? {
@@ -4329,7 +4644,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$4(node, "slot", true);
 }
 //#endregion
 //#region packages/compiler-vapor/src/transforms/transformTransition.ts
@@ -4342,17 +4657,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$4(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$4(node, "else-if") || findDir$4(node, "else", true);
+	if (children.length > 0 && children.every((c, index) => c.type === 1 && (!(0, _vue_compiler_dom.isTemplateNode)(c) || !hasMultipleChildren(c)) && !findDir$4(c, "for") && (index === 0 ? findDir$4(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$4(node, "for")) return;
 	const dir = findProp$1(node, "key", true, true);
 	if (!dir || dir.type === 6) return;
 	let value;