@vue/compiler-vapor 3.6.0-beta.10 → 3.6.0-beta.11

package/dist/compiler-vapor.cjs.js

@@ -1,5 +1,5 @@
 /**
-  * @vue/compiler-vapor v3.6.0-beta.10
+  * @vue/compiler-vapor v3.6.0-beta.11
   * (c) 2018-present Yuxi (Evan) You and Vue contributors
   * @license MIT
   **/
@@ -12,6 +12,90 @@ let _vue_shared = require("@vue/shared");
 let source_map_js = require("source-map-js");
 let _babel_parser = require("@babel/parser");
 let estree_walker = require("estree-walker");
+//#region packages/compiler-vapor/src/ir/component.ts
+const IRDynamicPropsKind = {
+	"EXPRESSION": 0,
+	"0": "EXPRESSION",
+	"ATTRIBUTE": 1,
+	"1": "ATTRIBUTE"
+};
+const IRSlotType = {
+	"STATIC": 0,
+	"0": "STATIC",
+	"DYNAMIC": 1,
+	"1": "DYNAMIC",
+	"LOOP": 2,
+	"2": "LOOP",
+	"CONDITIONAL": 3,
+	"3": "CONDITIONAL",
+	"EXPRESSION": 4,
+	"4": "EXPRESSION"
+};
+//#endregion
+//#region packages/compiler-vapor/src/ir/index.ts
+const IRNodeTypes = {
+	"ROOT": 0,
+	"0": "ROOT",
+	"BLOCK": 1,
+	"1": "BLOCK",
+	"SET_BLOCK_KEY": 2,
+	"2": "SET_BLOCK_KEY",
+	"SET_PROP": 3,
+	"3": "SET_PROP",
+	"SET_DYNAMIC_PROPS": 4,
+	"4": "SET_DYNAMIC_PROPS",
+	"SET_TEXT": 5,
+	"5": "SET_TEXT",
+	"SET_EVENT": 6,
+	"6": "SET_EVENT",
+	"SET_DYNAMIC_EVENTS": 7,
+	"7": "SET_DYNAMIC_EVENTS",
+	"SET_HTML": 8,
+	"8": "SET_HTML",
+	"SET_TEMPLATE_REF": 9,
+	"9": "SET_TEMPLATE_REF",
+	"INSERT_NODE": 10,
+	"10": "INSERT_NODE",
+	"PREPEND_NODE": 11,
+	"11": "PREPEND_NODE",
+	"CREATE_COMPONENT_NODE": 12,
+	"12": "CREATE_COMPONENT_NODE",
+	"SLOT_OUTLET_NODE": 13,
+	"13": "SLOT_OUTLET_NODE",
+	"DIRECTIVE": 14,
+	"14": "DIRECTIVE",
+	"IF": 15,
+	"15": "IF",
+	"FOR": 16,
+	"16": "FOR",
+	"KEY": 17,
+	"17": "KEY",
+	"GET_TEXT_CHILD": 18,
+	"18": "GET_TEXT_CHILD"
+};
+var TemplateRegistry = class {
+	constructor() {
+		this.entries = [];
+	}
+	keys() {
+		return this.entries.map(({ content }) => content);
+	}
+};
+const DynamicFlag = {
+	"NONE": 0,
+	"0": "NONE",
+	"REFERENCED": 1,
+	"1": "REFERENCED",
+	"NON_TEMPLATE": 2,
+	"2": "NON_TEMPLATE",
+	"INSERT": 4,
+	"4": "INSERT"
+};
+function isBlockOperation(op) {
+	const type = op.type;
+	return type === 12 || type === 13 || type === 15 || type === 17 || type === 16;
+}
+//#endregion
 //#region packages/compiler-vapor/src/transforms/utils.ts
 const newDynamic = () => ({
 	flags: 1,
@@ -127,6 +211,7 @@ function isTeleportTag(tag) {
 }
 function isBuiltInComponent(tag) {
 	if (isTeleportTag(tag)) return "VaporTeleport";
+	else if (tag === "Suspense" || tag === "suspense") return "Suspense";
 	else if (isKeepAliveTag(tag)) return "VaporKeepAlive";
 	else if (isTransitionTag(tag)) return "VaporTransition";
 	else if (isTransitionGroupTag(tag)) return "VaporTransitionGroup";
@@ -148,6 +233,8 @@ var TransformContext = class TransformContext {
 		this.index = 0;
 		this.block = this.ir.block;
 		this.template = "";
+		this.templateRoot = false;
+		this.templateIndexMap = /* @__PURE__ */ new Map();
 		this.childrenTemplate = [];
 		this.dynamic = this.ir.block.dynamic;
 		this.imports = [];
@@ -157,6 +244,8 @@ var TransformContext = class TransformContext {
 		this.component = this.ir.component;
 		this.directive = this.ir.directive;
 		this.slots = [];
+		this.effectIndex = this.block.effect.length;
+		this.operationIndex = this.block.operation.length;
 		this.isLastEffectiveChild = true;
 		this.isOnRightmostPath = true;
 		this.hasInlineAncestorNeedingClose = false;
@@ -174,20 +263,28 @@ var TransformContext = class TransformContext {
 		this.initNextIdMap();
 	}
 	enterBlock(ir, isVFor = false) {
-		const { block, template, dynamic, childrenTemplate, slots } = this;
+		const { block, template, templateRoot, templateIndexMap, dynamic, childrenTemplate, slots, effectIndex, operationIndex } = this;
 		this.block = ir;
 		this.dynamic = ir.dynamic;
 		this.template = "";
+		this.templateRoot = false;
+		this.templateIndexMap = templateIndexMap;
 		this.childrenTemplate = [];
 		this.slots = [];
+		this.effectIndex = ir.effect.length;
+		this.operationIndex = ir.operation.length;
 		isVFor && this.inVFor++;
 		return () => {
 			this.registerTemplate();
 			this.block = block;
 			this.template = template;
+			this.templateRoot = templateRoot;
+			this.templateIndexMap = templateIndexMap;
 			this.dynamic = dynamic;
 			this.childrenTemplate = childrenTemplate;
 			this.slots = slots;
+			this.effectIndex = effectIndex;
+			this.operationIndex = operationIndex;
 			isVFor && this.inVFor--;
 		};
 	}
@@ -212,31 +309,66 @@ var TransformContext = class TransformContext {
 	nextIfIndex() {
 		return this.ifIndex++;
 	}
-	pushTemplate(content) {
-		const existingIndex = this.ir.templateIndexMap.get(content);
+	getTemplateNamespace() {
+		return this.node.type === 1 ? this.node.ns : 0;
+	}
+	canUseStaticTemplate() {
+		if (!this.template) return false;
+		if (this.inVFor) return false;
+		if (this.dynamic.hasDynamicChild) return false;
+		if (this.block.effect.length !== this.effectIndex) return false;
+		if (this.block.operation.length !== this.operationIndex) return false;
+		if (this.node.type === 2 || this.node.type === 3) return true;
+		return this.node.type === 1 && this.node.tagType === 0 && !(this.options.isCustomElement(this.node.tag) || this.node.tag === "template");
+	}
+	pushTemplate(content, { root = false, static: isStatic = false } = {}) {
+		const templateKey = JSON.stringify([
+			this.getTemplateNamespace(),
+			root,
+			isStatic,
+			content
+		]);
+		const existingIndex = this.templateIndexMap.get(templateKey);
 		if (existingIndex !== void 0) return existingIndex;
-		const newIndex = this.ir.template.size;
-		this.ir.template.set(content, this.node.ns);
-		this.ir.templateIndexMap.set(content, newIndex);
+		const ns = this.getTemplateNamespace();
+		const newIndex = this.ir.template.entries.length;
+		this.ir.template.entries.push({
+			content,
+			ns,
+			root,
+			static: isStatic
+		});
+		this.templateIndexMap.set(templateKey, newIndex);
 		return newIndex;
 	}
 	registerTemplate() {
 		if (!this.template) return -1;
-		const id = this.pushTemplate(this.template);
+		const id = this.pushTemplate(this.template, {
+			root: this.templateRoot,
+			static: this.canUseStaticTemplate()
+		});
 		return this.dynamic.template = id;
 	}
-	registerEffect(expressions, operation, getIndex = () => this.block.effect.length) {
+	registerEffect(expressions, operation, getIndex) {
 		const operations = [operation].flat();
 		expressions = expressions.filter((exp) => !isConstantExpression(exp));
 		if (this.inVOnce || expressions.length === 0 || expressions.every((e) => isStaticExpression(e, this.root.options.bindingMetadata))) return this.registerOperation(...operations);
-		this.block.effect.splice(getIndex(), 0, {
+		const index = getIndex ? getIndex() : this.block.effect.length;
+		this.block.effect.splice(index, 0, {
 			expressions,
 			operations
 		});
+		if (getIndex) this.shiftEffectBoundaries(index);
 	}
 	registerOperation(...node) {
 		this.block.operation.push(...node);
 	}
+	effectBoundary() {
+		return {
+			operationIndex: this.operationIndex,
+			effectIndex: this.effectIndex
+		};
+	}
 	create(node, index) {
 		let effectiveParent = this;
 		while (effectiveParent && effectiveParent.node.type === 1 && effectiveParent.node.tagType === 3) effectiveParent = effectiveParent.parent;
@@ -252,14 +384,23 @@ var TransformContext = class TransformContext {
 			parent: this,
 			index,
 			template: "",
+			templateRoot: false,
 			childrenTemplate: [],
+			templateIndexMap: this.templateIndexMap,
 			dynamic: newDynamic(),
+			effectIndex: this.block.effect.length,
+			operationIndex: this.block.operation.length,
 			effectiveParent,
 			isLastEffectiveChild,
 			isOnRightmostPath,
 			hasInlineAncestorNeedingClose
 		});
 	}
+	shiftEffectBoundaries(index, dynamic = this.dynamic) {
+		const operation = dynamic.operation;
+		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;
@@ -294,9 +435,7 @@ function transform(node, options = {}) {
 		type: 0,
 		node,
 		source: node.source,
-		template: /* @__PURE__ */ new Map(),
-		templateIndexMap: /* @__PURE__ */ new Map(),
-		rootTemplateIndexes: /* @__PURE__ */ new Set(),
+		template: new TemplateRegistry(),
 		component: /* @__PURE__ */ new Set(),
 		directive: /* @__PURE__ */ new Set(),
 		block: newBlock(node),
@@ -510,82 +649,6 @@ function codeFragmentToString(code, context) {
 	}
 }
 //#endregion
-//#region packages/compiler-vapor/src/ir/component.ts
-const IRDynamicPropsKind = {
-	"EXPRESSION": 0,
-	"0": "EXPRESSION",
-	"ATTRIBUTE": 1,
-	"1": "ATTRIBUTE"
-};
-const IRSlotType = {
-	"STATIC": 0,
-	"0": "STATIC",
-	"DYNAMIC": 1,
-	"1": "DYNAMIC",
-	"LOOP": 2,
-	"2": "LOOP",
-	"CONDITIONAL": 3,
-	"3": "CONDITIONAL",
-	"EXPRESSION": 4,
-	"4": "EXPRESSION"
-};
-//#endregion
-//#region packages/compiler-vapor/src/ir/index.ts
-const IRNodeTypes = {
-	"ROOT": 0,
-	"0": "ROOT",
-	"BLOCK": 1,
-	"1": "BLOCK",
-	"SET_BLOCK_KEY": 2,
-	"2": "SET_BLOCK_KEY",
-	"SET_PROP": 3,
-	"3": "SET_PROP",
-	"SET_DYNAMIC_PROPS": 4,
-	"4": "SET_DYNAMIC_PROPS",
-	"SET_TEXT": 5,
-	"5": "SET_TEXT",
-	"SET_EVENT": 6,
-	"6": "SET_EVENT",
-	"SET_DYNAMIC_EVENTS": 7,
-	"7": "SET_DYNAMIC_EVENTS",
-	"SET_HTML": 8,
-	"8": "SET_HTML",
-	"SET_TEMPLATE_REF": 9,
-	"9": "SET_TEMPLATE_REF",
-	"INSERT_NODE": 10,
-	"10": "INSERT_NODE",
-	"PREPEND_NODE": 11,
-	"11": "PREPEND_NODE",
-	"CREATE_COMPONENT_NODE": 12,
-	"12": "CREATE_COMPONENT_NODE",
-	"SLOT_OUTLET_NODE": 13,
-	"13": "SLOT_OUTLET_NODE",
-	"DIRECTIVE": 14,
-	"14": "DIRECTIVE",
-	"IF": 15,
-	"15": "IF",
-	"FOR": 16,
-	"16": "FOR",
-	"KEY": 17,
-	"17": "KEY",
-	"GET_TEXT_CHILD": 18,
-	"18": "GET_TEXT_CHILD"
-};
-const DynamicFlag = {
-	"NONE": 0,
-	"0": "NONE",
-	"REFERENCED": 1,
-	"1": "REFERENCED",
-	"NON_TEMPLATE": 2,
-	"2": "NON_TEMPLATE",
-	"INSERT": 4,
-	"4": "INSERT"
-};
-function isBlockOperation(op) {
-	const type = op.type;
-	return type === 12 || type === 13 || type === 15 || type === 17 || type === 16;
-}
-//#endregion
 //#region packages/compiler-vapor/src/generators/dom.ts
 function genInsertNode({ parent, elements, anchor }, { helper }) {
 	let element = elements.map((el) => `n${el}`).join(", ");
@@ -1218,26 +1281,40 @@ function buildDestructureIdMap(idToPathMap, baseAccessor, plugins) {
 function matchPatterns(render, keyProp, idMap) {
 	const selectorPatterns = [];
 	const keyOnlyBindingPatterns = [];
-	render.effect = render.effect.filter((effect) => {
+	const removedEffectIndexes = [];
+	render.effect = render.effect.filter((effect, index) => {
 		if (keyProp !== void 0) {
 			const selector = matchSelectorPattern(effect, keyProp.content, idMap);
 			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;
 			}
 		}
 		return true;
 	});
+	if (removedEffectIndexes.length) shiftEffectBoundaries(render.dynamic, removedEffectIndexes);
 	return {
 		keyOnlyBindingPatterns,
 		selectorPatterns
 	};
 }
+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;
+	}
+	for (const child of dynamic.children) shiftEffectBoundaries(child, removedEffectIndexes);
+}
 function matchKeyOnlyBindingPattern(effect, key) {
 	if (effect.expressions.length === 1) {
 		const { ast, content } = effect.expressions[0];
@@ -1553,11 +1630,11 @@ function genCreateComponent(operation, context) {
 			];
 		}, []),
 		`const n${operation.id} = `,
-		...genCall(operation.dynamic && !operation.dynamic.isStatic ? helper("createDynamicComponent") : operation.isCustomElement ? helper("createPlainElement") : operation.asset ? helper("createComponentWithFallback") : helper("createComponent"), tag, rawProps, rawSlots, root ? "true" : false, once && "true"),
+		...genCall(operation.dynamic && !operation.dynamic.isStatic ? helper("createDynamicComponent") : operation.useCreateElement ? helper("createPlainElement") : operation.asset ? helper("createComponentWithFallback") : helper("createComponent"), tag, rawProps, rawSlots, root ? "true" : false, once && "true"),
 		...genDirectivesForElement(operation.id, context)
 	];
 	function genTag() {
-		if (operation.isCustomElement) return JSON.stringify(operation.tag);
+		if (operation.useCreateElement) return JSON.stringify(operation.tag);
 		else if (operation.dynamic) if (operation.dynamic.isStatic) return genCall(helper("resolveDynamicComponent"), genExpression(operation.dynamic, context));
 		else return [
 			"() => (",
@@ -1993,21 +2070,24 @@ function genEffect({ operations }, context) {
 	return frag;
 }
 function genInsertionState(operation, context) {
-	const { parent, anchor, logicalIndex, append, last } = operation;
-	return [NEWLINE, ...genCall(context.helper("setInsertionState"), `n${parent}`, anchor == null ? void 0 : anchor === -1 ? `0` : append ? "null" : `n${anchor}`, logicalIndex !== void 0 ? String(logicalIndex) : void 0, last && "true")];
+	const { parent, anchor, logicalIndex, append } = operation;
+	return [NEWLINE, ...genCall(context.helper("setInsertionState"), `n${parent}`, anchor == null ? void 0 : anchor === -1 ? `0` : append ? "null" : `n${anchor}`, logicalIndex !== void 0 ? String(logicalIndex) : void 0)];
 }
 //#endregion
 //#region packages/compiler-vapor/src/generators/template.ts
-function genTemplates(templates, rootIndexes, context) {
+function genTemplates(templates, context) {
 	const result = [];
-	let i = 0;
-	templates.forEach((ns, template) => {
-		result.push(`const ${context.tName(i)} = ${context.helper("template")}(${JSON.stringify(template).replace(IMPORT_EXPR_RE, `" + $1 + "`)}${rootIndexes.has(i) ? ", true" : ns ? ", false" : ""}${ns ? `, ${ns}` : ""})\n`);
-		i++;
+	templates.forEach(({ content, ns, root, static: isStatic }, i) => {
+		let args = JSON.stringify(content).replace(IMPORT_EXPR_RE, `" + $1 + "`);
+		if (root) args += ", true";
+		else if (isStatic || ns) args += ", false";
+		if (isStatic || ns) args += `, ${isStatic ? "true" : "false"}`;
+		if (ns) args += `, ${ns}`;
+		result.push(`const ${context.tName(i)} = ${context.helper("template")}(${args})\n`);
 	});
 	return result.join("");
 }
-function genSelf(dynamic, context) {
+function genSelf(dynamic, context, flushBeforeDynamic) {
 	const [frag, push] = buildCodeFragment();
 	const { id, template, operation, hasDynamicChild } = dynamic;
 	if (id !== void 0 && template !== void 0) {
@@ -2015,10 +2095,10 @@ function genSelf(dynamic, context) {
 		push(...genDirectivesForElement(id, context));
 	}
 	if (operation) push(...genOperationWithInsertionState(operation, context));
-	if (hasDynamicChild) push(...genChildren(dynamic, context, push, `n${id}`));
+	if (hasDynamicChild) push(...genChildren(dynamic, context, push, `n${id}`, flushBeforeDynamic));
 	return frag;
 }
-function genChildren(dynamic, context, pushBlock, from = `n${dynamic.id}`) {
+function genChildren(dynamic, context, pushBlock, from = `n${dynamic.id}`, flushBeforeDynamic) {
 	const { helper } = context;
 	const [frag, push] = buildCodeFragment();
 	const { children } = dynamic;
@@ -2027,12 +2107,14 @@ function genChildren(dynamic, context, pushBlock, from = `n${dynamic.id}`) {
 	for (const [index, child] of children.entries()) {
 		if (child.flags & 2) offset--;
 		if (child.flags & 4 && child.template != null) {
-			push(...genSelf(child, context));
+			flushBeforeDynamic && flushBeforeDynamic(child, push);
+			push(...genSelf(child, context, flushBeforeDynamic));
 			continue;
 		}
 		const id = child.flags & 1 ? child.flags & 4 ? child.anchor : child.id : void 0;
 		if (id === void 0 && !child.hasDynamicChild) {
-			push(...genSelf(child, context));
+			flushBeforeDynamic && flushBeforeDynamic(child, push);
+			push(...genSelf(child, context, flushBeforeDynamic));
 			continue;
 		}
 		const elementIndex = index + offset;
@@ -2048,10 +2130,13 @@ function genChildren(dynamic, context, pushBlock, from = `n${dynamic.id}`) {
 			else if (elementIndex > 1) init = genCall(helper("nthChild"), from, String(elementIndex), logicalIndex);
 			pushBlock(...init);
 		}
-		if (id === child.anchor && !child.hasDynamicChild) push(...genSelf(child, context));
+		if (id === child.anchor && !child.hasDynamicChild) {
+			flushBeforeDynamic && flushBeforeDynamic(child, push);
+			push(...genSelf(child, context, flushBeforeDynamic));
+		}
 		if (id !== void 0) push(...genDirectivesForElement(id, context));
 		prev = [variable, elementIndex];
-		push(...genChildren(child, context, pushBlock, variable));
+		push(...genChildren(child, context, pushBlock, variable, flushBeforeDynamic));
 	}
 	return frag;
 }
@@ -2082,10 +2167,30 @@ function genBlockContent(block, context, root, genEffectsExtraFrag) {
 		}
 		genResolveAssets("directive", "resolveDirective");
 	}
-	for (const child of dynamic.children) push(...genSelf(child, context));
-	for (const child of dynamic.children) if (!child.hasDynamicChild) push(...genChildren(child, context, push, `n${child.id}`));
-	push(...genOperations(operation, context));
-	push(...genEffects(effect, context, genEffectsExtraFrag));
+	let operationIndex = 0;
+	let effectIndex = 0;
+	const flushPendingOperations = (operationEnd, effectEnd, push) => {
+		while (operationIndex < operationEnd) {
+			push(...genOperationWithInsertionState(operation[operationIndex], context));
+			operationIndex++;
+		}
+		if (effectIndex < effectEnd) {
+			push(...genEffects(effect.slice(effectIndex, effectEnd), context));
+			effectIndex = effectEnd;
+		}
+	};
+	const flushBeforeDynamic = (dynamic, push) => {
+		const operation = dynamic.operation;
+		if (operation && isBlockOperation(operation) && operation.operationIndex !== void 0 && operation.effectIndex !== void 0) flushPendingOperations(operation.operationIndex, operation.effectIndex, push);
+	};
+	for (const child of dynamic.children) {
+		flushBeforeDynamic(child, push);
+		push(...genSelf(child, context, flushBeforeDynamic));
+	}
+	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));
+	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"]);
@@ -2171,7 +2276,7 @@ var CodegenContext = class {
 		this.nextIdMap = /* @__PURE__ */ new Map();
 		this.lastIdMap = /* @__PURE__ */ new Map();
 		this.lastTIndex = -1;
-		this.options = (0, _vue_shared.extend)({
+		const defaultOptions = {
 			mode: "module",
 			prefixIdentifiers: true,
 			sourceMap: false,
@@ -2186,7 +2291,8 @@ var CodegenContext = class {
 			inline: false,
 			bindingMetadata: {},
 			expressionPlugins: []
-		}, options);
+		};
+		this.options = (0, _vue_shared.extend)(defaultOptions, options);
 		this.block = ir.block;
 		this.bindingNames = new Set(this.options.bindingMetadata ? Object.keys(this.options.bindingMetadata) : []);
 		this.initNextIdMap();
@@ -2207,7 +2313,7 @@ function generate(ir, options = {}) {
 	push(INDENT_END, NEWLINE);
 	if (!inline) push("}");
 	const delegates = genDelegates(context);
-	const templates = genTemplates(ir.template, ir.rootTemplateIndexes, context);
+	const templates = genTemplates(ir.template.entries, context);
 	const preamble = genHelperImports(context) + genAssetImports(context) + templates + delegates;
 	const newlineCount = [...preamble].filter((c) => c === "\n").length;
 	if (newlineCount && !inline) frag.unshift(...new Array(newlineCount).fill(LF));
@@ -2239,79 +2345,6 @@ function genAssetImports({ ir }) {
 	return imports;
 }
 //#endregion
-//#region packages/compiler-vapor/src/transforms/transformChildren.ts
-const transformChildren = (node, context) => {
-	const isFragment = node.type === 0 || node.type === 1 && (node.tagType === 3 || node.tagType === 1);
-	if (!isFragment && node.type !== 1) return;
-	for (const [i, child] of node.children.entries()) {
-		const childContext = context.create(child, i);
-		transformNode(childContext);
-		const childDynamic = childContext.dynamic;
-		if (isFragment) {
-			childContext.reference();
-			childContext.registerTemplate();
-			if (!(childDynamic.flags & 2) || childDynamic.flags & 4) context.block.returns.push(childContext.dynamic.id);
-		} else context.childrenTemplate.push(childContext.template);
-		if (childDynamic.hasDynamicChild || childDynamic.id !== void 0 || childDynamic.flags & 2 || childDynamic.flags & 4) context.dynamic.hasDynamicChild = true;
-		context.dynamic.children[i] = childDynamic;
-	}
-	if (!isFragment) processDynamicChildren(context);
-};
-function processDynamicChildren(context) {
-	let prevDynamics = [];
-	let staticCount = 0;
-	let dynamicCount = 0;
-	let lastInsertionChild;
-	const children = context.dynamic.children;
-	let logicalIndex = 0;
-	for (const [index, child] of children.entries()) {
-		if (child.flags & 4) {
-			child.logicalIndex = logicalIndex;
-			prevDynamics.push(lastInsertionChild = child);
-			logicalIndex++;
-		}
-		if (!(child.flags & 2)) {
-			child.logicalIndex = logicalIndex;
-			if (prevDynamics.length) {
-				if (staticCount) {
-					context.childrenTemplate[index - prevDynamics.length] = `<!>`;
-					prevDynamics[0].flags -= 2;
-					const anchor = prevDynamics[0].anchor = context.increaseId();
-					registerInsertion(prevDynamics, context, anchor);
-				} else registerInsertion(prevDynamics, context, -1);
-				dynamicCount += prevDynamics.length;
-				prevDynamics = [];
-			}
-			staticCount++;
-			logicalIndex++;
-		}
-	}
-	if (prevDynamics.length) registerInsertion(prevDynamics, context, dynamicCount + staticCount, true);
-	if (lastInsertionChild && lastInsertionChild.operation) lastInsertionChild.operation.last = true;
-}
-function registerInsertion(dynamics, context, anchor, append) {
-	for (const child of dynamics) {
-		const logicalIndex = child.logicalIndex;
-		if (child.template != null) context.registerOperation({
-			type: 10,
-			elements: dynamics.map((child) => child.id),
-			parent: context.reference(),
-			anchor: append ? void 0 : anchor
-		});
-		else if (child.operation && isBlockOperation(child.operation)) {
-			child.operation.parent = context.reference();
-			child.operation.anchor = anchor;
-			child.operation.logicalIndex = logicalIndex;
-			child.operation.append = append;
-		}
-	}
-}
-//#endregion
-//#region packages/compiler-vapor/src/transforms/vOnce.ts
-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/vBind.ts
 function normalizeBindShorthand(arg, context) {
 	if (arg.type !== 4 || !arg.isStatic) {
@@ -2361,13 +2394,13 @@ const transformElement = (node, context) => {
 	return function postTransformElement() {
 		({node} = context);
 		if (!(node.type === 1 && (node.tagType === 0 || node.tagType === 1))) return;
-		const isCustomElement = !!context.options.isCustomElement(node.tag);
-		const isComponent = node.tagType === 1 || isCustomElement;
+		const useCreateElement = shouldUseCreateElement(node, context);
+		const isComponent = node.tagType === 1 || useCreateElement;
 		const isDynamicComponent = isComponentTag(node.tag);
 		const staticKey = resolveStaticKey(node, context, isComponent);
 		const propsResult = buildProps(node, context, isComponent, isDynamicComponent, getEffectIndex);
 		const singleRoot = isSingleRoot(context);
-		if (isComponent) transformComponentElement(node, propsResult, staticKey, singleRoot, context, isDynamicComponent, isCustomElement);
+		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;
 	};
@@ -2391,11 +2424,11 @@ function isSingleRoot(context) {
 	}
 	return context.root === parent;
 }
-function transformComponentElement(node, propsResult, staticKey, singleRoot, context, isDynamicComponent, isCustomElement) {
+function transformComponentElement(node, propsResult, staticKey, singleRoot, context, isDynamicComponent, useCreateElement) {
 	const dynamicComponent = isDynamicComponent ? resolveDynamicComponent(node) : void 0;
 	let { tag } = node;
 	let asset = true;
-	if (!dynamicComponent && !isCustomElement) {
+	if (!dynamicComponent && !useCreateElement) {
 		const fromSetup = resolveSetupReference(tag, context);
 		if (fromSetup) {
 			tag = fromSetup;
@@ -2424,6 +2457,7 @@ function transformComponentElement(node, propsResult, staticKey, singleRoot, con
 	context.dynamic.operation = {
 		type: 12,
 		id,
+		...context.effectBoundary(),
 		tag,
 		props: propsResult[0] ? propsResult[1] : [propsResult[1]],
 		asset,
@@ -2431,7 +2465,7 @@ function transformComponentElement(node, propsResult, staticKey, singleRoot, con
 		slots: [...context.slots],
 		once: context.inVOnce,
 		dynamic: dynamicComponent,
-		isCustomElement
+		useCreateElement
 	};
 	if (staticKey) context.registerOperation(createSetBlockKey(id, staticKey));
 	context.slots = [];
@@ -2493,7 +2527,7 @@ function transformNativeElement(node, propsResult, staticKey, singleRoot, contex
 	}
 	template += `>` + context.childrenTemplate.join("");
 	if (!(0, _vue_shared.isVoidTag)(tag) && !omitEndTag) template += `</${tag}>`;
-	if (singleRoot) context.ir.rootTemplateIndexes.add(context.ir.template.size);
+	context.templateRoot = singleRoot;
 	if (context.parent && context.parent.node.type === 1 && !(0, _vue_compiler_dom.isValidHTMLNesting)(context.parent.node.tag, tag)) {
 		context.reference();
 		context.dynamic.template = context.pushTemplate(template);
@@ -2634,6 +2668,85 @@ function mergePropValues(existing, incoming) {
 function isComponentTag(tag) {
 	return tag === "component" || tag === "Component";
 }
+function shouldUseCreateElement(node, context) {
+	return context.options.isCustomElement(node.tag) || node.tagType === 0 && node.tag === "template";
+}
+//#endregion
+//#region packages/compiler-vapor/src/transforms/transformChildren.ts
+const transformChildren = (node, context) => {
+	const isFragment = node.type === 0 || node.type === 1 && (node.tagType === 3 || node.tagType === 1);
+	if (!isFragment && node.type !== 1) return;
+	const useCreateElement = node.type === 1 && shouldUseCreateElement(node, context);
+	for (const [i, child] of node.children.entries()) {
+		const childContext = context.create(child, i);
+		transformNode(childContext);
+		const childDynamic = childContext.dynamic;
+		if (isFragment) {
+			childContext.reference();
+			childContext.registerTemplate();
+			if (!(childDynamic.flags & 2) || childDynamic.flags & 4) context.block.returns.push(childContext.dynamic.id);
+		} else if (useCreateElement) {
+			if (childContext.template !== "" || childDynamic.template != null || childDynamic.id !== void 0 || childDynamic.operation !== void 0 || childDynamic.hasDynamicChild === true) {
+				childContext.reference();
+				childContext.registerTemplate();
+				childDynamic.flags |= 6;
+			}
+		} else context.childrenTemplate.push(childContext.template);
+		if (childDynamic.hasDynamicChild || childDynamic.id !== void 0 || childDynamic.flags & 2 || childDynamic.flags & 4) context.dynamic.hasDynamicChild = true;
+		context.dynamic.children[i] = childDynamic;
+	}
+	if (!isFragment) processDynamicChildren(context);
+};
+function processDynamicChildren(context) {
+	let prevDynamics = [];
+	let staticCount = 0;
+	const children = context.dynamic.children;
+	let logicalIndex = 0;
+	for (const [index, child] of children.entries()) {
+		if (child.flags & 4) {
+			child.logicalIndex = logicalIndex;
+			prevDynamics.push(child);
+			logicalIndex++;
+		}
+		if (!(child.flags & 2)) {
+			child.logicalIndex = logicalIndex;
+			if (prevDynamics.length) {
+				if (staticCount) {
+					context.childrenTemplate[index - prevDynamics.length] = `<!>`;
+					prevDynamics[0].flags -= 2;
+					const anchor = prevDynamics[0].anchor = context.increaseId();
+					registerInsertion(prevDynamics, context, anchor);
+				} else registerInsertion(prevDynamics, context, -1);
+				prevDynamics = [];
+			}
+			staticCount++;
+			logicalIndex++;
+		}
+	}
+	if (prevDynamics.length) registerInsertion(prevDynamics, context, prevDynamics[0].logicalIndex, true);
+}
+function registerInsertion(dynamics, context, anchor, append) {
+	for (const child of dynamics) {
+		const logicalIndex = child.logicalIndex;
+		if (child.template != null) context.registerOperation({
+			type: 10,
+			elements: dynamics.map((child) => child.id),
+			parent: context.reference(),
+			anchor: append ? void 0 : anchor
+		});
+		else if (child.operation && isBlockOperation(child.operation)) {
+			child.operation.parent = context.reference();
+			child.operation.anchor = anchor;
+			child.operation.logicalIndex = logicalIndex;
+			child.operation.append = append;
+		}
+	}
+}
+//#endregion
+//#region packages/compiler-vapor/src/transforms/vOnce.ts
+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) => {
@@ -2674,6 +2787,141 @@ function makeMap$1(str) {
 */
 const isVoidTag = /* @__PURE__ */ makeMap$1("area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr");
 //#endregion
+//#region packages/compiler-vapor/src/transforms/transformText.ts
+const seen = /* @__PURE__ */ new WeakMap();
+function markNonTemplate(node, context) {
+	let seenNodes = seen.get(context.root);
+	if (!seenNodes) {
+		seenNodes = /* @__PURE__ */ new WeakSet();
+		seen.set(context.root, seenNodes);
+	}
+	seenNodes.add(node);
+}
+const transformText = (node, context) => {
+	if (!seen.has(context.root)) seen.set(context.root, /* @__PURE__ */ new WeakSet());
+	if (seen.get(context.root).has(node)) {
+		context.dynamic.flags |= 2;
+		return;
+	}
+	const isFragment = node.type === 0 || node.type === 1 && (node.tagType === 3 || node.tagType === 1);
+	if ((isFragment || node.type === 1 && node.tagType === 0) && node.children.length) {
+		let hasInterp = false;
+		let isAllTextLike = true;
+		for (const c of node.children) if (c.type === 5) hasInterp = true;
+		else if (c.type !== 2) isAllTextLike = false;
+		if (!isFragment && isAllTextLike && hasInterp) {
+			const elementContext = context;
+			if (shouldUseCreateElement(node, elementContext)) processCreateElementTextContainer(node.children, elementContext);
+			else processTextContainer(node.children, elementContext);
+		} else if (hasInterp) for (let i = 0; i < node.children.length; i++) {
+			const c = node.children[i];
+			const prev = node.children[i - 1];
+			if (c.type === 5 && prev && prev.type === 2) markNonTemplate(prev, context);
+		}
+	} else if (node.type === 5) processInterpolation(context);
+	else if (node.type === 2) {
+		var _context$parent;
+		const parent = (_context$parent = context.parent) === null || _context$parent === void 0 ? void 0 : _context$parent.node;
+		if (parent && parent.type === 1 && shouldUseCreateElement(parent, context.parent) && node.content[0] === "<") {
+			materializeLiteralTextNode((0, _vue_compiler_dom.createSimpleExpression)(node.content, true, node.loc), context);
+			return;
+		}
+		const isRootText = !parent || parent.type === 0 || parent.type === 1 && (parent.tagType === 3 || parent.tagType === 1);
+		context.template += isRootText ? node.content : (0, _vue_shared.escapeHtml)(node.content);
+	}
+};
+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);
+	if (values.length === 0 && parentNode.type !== 0) return;
+	const literalValues = values.map((v) => getLiteralExpressionValue(v));
+	if (literalValues.every((v) => v != null) && parentNode.type !== 0) {
+		const text = literalValues.join("");
+		if (parentNode.type === 1 && shouldUseCreateElement(parentNode, context.parent) && text[0] === "<") {
+			materializeLiteralTextNode((0, _vue_compiler_dom.createSimpleExpression)(text, true, context.node.loc), context);
+			return;
+		}
+		const isElementChild = parentNode.type === 1 && parentNode.tagType === 0;
+		context.template += isElementChild ? (0, _vue_shared.escapeHtml)(text) : text;
+		return;
+	}
+	context.template += " ";
+	const id = context.reference();
+	if (values.length === 0) return;
+	context.registerEffect(values, {
+		type: 5,
+		element: id,
+		values
+	});
+}
+function processTextContainer(children, context) {
+	const values = processTextLikeChildren(children, context);
+	const literals = values.map((value) => getLiteralExpressionValue(value));
+	if (literals.every((l) => l != null)) context.childrenTemplate = literals.map((l) => (0, _vue_shared.escapeHtml)(String(l)));
+	else {
+		context.childrenTemplate = [" "];
+		context.registerOperation({
+			type: 18,
+			parent: context.reference()
+		});
+		context.registerEffect(values, {
+			type: 5,
+			element: context.reference(),
+			values,
+			generated: true
+		});
+	}
+}
+function registerSyntheticTextChild(context, template, values) {
+	const id = context.increaseId();
+	context.dynamic.children[context.node.children.length] = {
+		id,
+		flags: 6,
+		children: [],
+		template: context.pushTemplate(template)
+	};
+	context.dynamic.hasDynamicChild = true;
+	if (values && values.length) context.registerEffect(values, {
+		type: 5,
+		element: id,
+		values
+	});
+	return id;
+}
+function processCreateElementTextContainer(children, context) {
+	registerSyntheticTextChild(context, "", processTextLikeChildren(children, context));
+}
+function materializeLiteralTextNode(value, context) {
+	const id = context.reference();
+	context.dynamic.flags |= 6;
+	context.dynamic.template = context.pushTemplate("");
+	context.registerEffect([value], {
+		type: 5,
+		element: id,
+		values: [value]
+	});
+}
+function processTextLikeChildren(nodes, context) {
+	const exps = [];
+	for (const node of nodes) {
+		let exp;
+		markNonTemplate(node, context);
+		if (node.type === 2) exp = (0, _vue_compiler_dom.createSimpleExpression)(node.content, true, node.loc);
+		else exp = node.content;
+		if (exp.content) exps.push(exp);
+	}
+	return exps;
+}
+function isTextLike(node) {
+	return node.type === 5 || node.type === 2;
+}
+//#endregion
 //#region packages/compiler-vapor/src/transforms/vText.ts
 const transformVText = (dir, node, context) => {
 	let { exp, loc } = dir;
@@ -2684,22 +2932,41 @@ const transformVText = (dir, node, context) => {
 	if (node.children.length) {
 		context.options.onError((0, _vue_compiler_dom.createDOMCompilerError)(57, loc));
 		context.childrenTemplate.length = 0;
+		for (const child of node.children) markNonTemplate(child, context);
 	}
 	if (isVoidTag(context.node.tag)) return;
 	const literal = getLiteralExpressionValue(exp);
-	if (literal != null) context.childrenTemplate = [String(literal)];
-	else {
-		context.childrenTemplate = [" "];
-		const isComponent = node.tagType === 1;
-		if (!isComponent) context.registerOperation({
-			type: 18,
+	const useCreateElement = shouldUseCreateElement(context.node, context);
+	if (literal != null) if (useCreateElement) {
+		const id = registerSyntheticTextChild(context, "", [exp]);
+		context.registerOperation({
+			type: 10,
+			elements: [id],
 			parent: context.reference()
 		});
+	} else context.childrenTemplate = [String(literal)];
+	else {
+		const isComponent = node.tagType === 1;
+		let id;
+		if (useCreateElement) {
+			id = registerSyntheticTextChild(context, "");
+			context.registerOperation({
+				type: 10,
+				elements: [id],
+				parent: context.reference()
+			});
+		} else if (!isComponent) {
+			context.childrenTemplate = [" "];
+			context.registerOperation({
+				type: 18,
+				parent: context.reference()
+			});
+		}
 		context.registerEffect([exp], {
 			type: 5,
-			element: context.reference(),
+			element: useCreateElement ? id : context.reference(),
 			values: [exp],
-			generated: true,
+			generated: !useCreateElement,
 			isComponent
 		});
 	}
@@ -2713,6 +2980,7 @@ const transformVOn = (dir, node, context) => {
 	const isSlotOutlet = node.tag === "slot";
 	if (!exp && !modifiers.length) context.options.onError((0, _vue_compiler_dom.createCompilerError)(35, loc));
 	arg = resolveExpression(arg);
+	if (arg.isStatic && arg.content.startsWith("vue:")) arg = (0, _vue_shared.extend)({}, arg, { content: `vnode-${arg.content.slice(4)}` });
 	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";
@@ -2812,96 +3080,6 @@ const transformTemplateRef = (node, context) => {
 	};
 };
 //#endregion
-//#region packages/compiler-vapor/src/transforms/transformText.ts
-const seen = /* @__PURE__ */ new WeakMap();
-function markNonTemplate(node, context) {
-	seen.get(context.root).add(node);
-}
-const transformText = (node, context) => {
-	if (!seen.has(context.root)) seen.set(context.root, /* @__PURE__ */ new WeakSet());
-	if (seen.get(context.root).has(node)) {
-		context.dynamic.flags |= 2;
-		return;
-	}
-	const isFragment = node.type === 0 || node.type === 1 && (node.tagType === 3 || node.tagType === 1);
-	if ((isFragment || node.type === 1 && node.tagType === 0) && node.children.length) {
-		let hasInterp = false;
-		let isAllTextLike = true;
-		for (const c of node.children) if (c.type === 5) hasInterp = true;
-		else if (c.type !== 2) isAllTextLike = false;
-		if (!isFragment && isAllTextLike && hasInterp) processTextContainer(node.children, context);
-		else if (hasInterp) for (let i = 0; i < node.children.length; i++) {
-			const c = node.children[i];
-			const prev = node.children[i - 1];
-			if (c.type === 5 && prev && prev.type === 2) markNonTemplate(prev, context);
-		}
-	} else if (node.type === 5) processInterpolation(context);
-	else if (node.type === 2) {
-		var _context$parent;
-		const parent = (_context$parent = context.parent) === null || _context$parent === void 0 ? void 0 : _context$parent.node;
-		const isRootText = !parent || parent.type === 0 || parent.type === 1 && (parent.tagType === 3 || parent.tagType === 1);
-		context.template += isRootText ? node.content : (0, _vue_shared.escapeHtml)(node.content);
-	}
-};
-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);
-	if (values.length === 0 && parentNode.type !== 0) return;
-	const literalValues = values.map((v) => getLiteralExpressionValue(v));
-	if (literalValues.every((v) => v != null) && parentNode.type !== 0) {
-		const text = literalValues.join("");
-		const isElementChild = parentNode.type === 1 && parentNode.tagType === 0;
-		context.template += isElementChild ? (0, _vue_shared.escapeHtml)(text) : text;
-		return;
-	}
-	context.template += " ";
-	const id = context.reference();
-	if (values.length === 0) return;
-	context.registerEffect(values, {
-		type: 5,
-		element: id,
-		values
-	});
-}
-function processTextContainer(children, context) {
-	const values = processTextLikeChildren(children, context);
-	const literals = values.map((value) => getLiteralExpressionValue(value));
-	if (literals.every((l) => l != null)) context.childrenTemplate = literals.map((l) => (0, _vue_shared.escapeHtml)(String(l)));
-	else {
-		context.childrenTemplate = [" "];
-		context.registerOperation({
-			type: 18,
-			parent: context.reference()
-		});
-		context.registerEffect(values, {
-			type: 5,
-			element: context.reference(),
-			values,
-			generated: true
-		});
-	}
-}
-function processTextLikeChildren(nodes, context) {
-	const exps = [];
-	for (const node of nodes) {
-		let exp;
-		markNonTemplate(node, context);
-		if (node.type === 2) exp = (0, _vue_compiler_dom.createSimpleExpression)(node.content, true, node.loc);
-		else exp = node.content;
-		if (exp.content) exps.push(exp);
-	}
-	return exps;
-}
-function isTextLike(node) {
-	return node.type === 5 || node.type === 2;
-}
-//#endregion
 //#region packages/compiler-vapor/src/transforms/vModel.ts
 const transformVModel = (dir, node, context) => {
 	const { exp, arg } = dir;
@@ -3021,6 +3199,7 @@ function processIf(node, dir, context) {
 			context.dynamic.operation = {
 				type: 15,
 				id,
+				...context.effectBoundary(),
 				blockShape: encodeIfBlockShape(branch, forceMultiRoot),
 				condition: dir.exp,
 				positive: branch,
@@ -3121,6 +3300,7 @@ function processFor(node, dir, context) {
 		context.dynamic.operation = {
 			type: 16,
 			id,
+			...context.effectBoundary(),
 			source,
 			value,
 			key,
@@ -3173,6 +3353,7 @@ const transformSlotOutlet = (node, context) => {
 		context.dynamic.operation = {
 			type: 13,
 			id,
+			...context.effectBoundary(),
 			name: slotName,
 			props: irProps,
 			fallback,
@@ -3372,6 +3553,7 @@ const transformKey = (node, context) => {
 		context.dynamic.operation = {
 			type: 17,
 			id,
+			...context.effectBoundary(),
 			value,
 			block
 		};
@@ -3439,6 +3621,7 @@ exports.DynamicFlag = DynamicFlag;
 exports.IRDynamicPropsKind = IRDynamicPropsKind;
 exports.IRNodeTypes = IRNodeTypes;
 exports.IRSlotType = IRSlotType;
+exports.TemplateRegistry = TemplateRegistry;
 exports.VaporErrorCodes = VaporErrorCodes;
 exports.VaporErrorMessages = VaporErrorMessages;
 exports.buildCodeFragment = buildCodeFragment;