@vue-jsx-vapor/compiler 2.4.8 → 2.5.1

package/dist/index.js

@@ -1,8 +1,9 @@
 import { parse, parseExpression } from "@babel/parser";
-import { NEWLINE, genCall, genExpression, generate } from "@vue/compiler-vapor";
-import { EMPTY_OBJ, NOOP, camelize, extend, isArray, isBuiltInDirective, isGloballyAllowed, isHTMLTag, isSVGTag, isString, isVoidTag, makeMap } from "@vue/shared";
-import { DOMErrorCodes, ErrorCodes, NodeTypes, createCompilerError, createDOMCompilerError, createSimpleExpression, defaultOnError, defaultOnWarn, isConstantNode, isLiteralWhitelisted, isMemberExpression, isStaticNode, isValidHTMLNesting, resolveModifiers, unwrapTSNode } from "@vue/compiler-dom";
-import { isLiteral, jsxClosingFragment, jsxExpressionContainer, jsxFragment, jsxOpeningFragment } from "@babel/types";
+import { NOOP, camelize, canSetValueDirectly, capitalize, extend, isArray, isBuiltInDirective, isGloballyAllowed, isHTMLTag, isSVGTag, isString, isVoidTag, makeMap, remove, shouldSetAsAttr, toHandlerKey } from "@vue/shared";
+import { DOMErrorCodes, ErrorCodes, NewlineType, NodeTypes, TS_NODE_TYPES, advancePositionWithClone, advancePositionWithMutation, createCompilerError, createDOMCompilerError, createSimpleExpression, defaultOnError, defaultOnWarn, isConstantNode, isFnExpression, isLiteralWhitelisted, isMemberExpression, isSimpleIdentifier, isStaticNode, isStaticProperty, isValidHTMLNesting, locStub, resolveModifiers, toValidAssetId, unwrapTSNode, walkIdentifiers } from "@vue/compiler-dom";
+import { walkAST, walkIdentifiers as walkIdentifiers$1 } from "ast-kit";
+import { isLiteral, isNodesEquivalent, jsxClosingFragment, jsxExpressionContainer, jsxFragment, jsxOpeningFragment } from "@babel/types";
+import { SourceMapGenerator } from "source-map-js";
 
 //#region src/ir/component.ts
 let IRDynamicPropsKind = /* @__PURE__ */ function(IRDynamicPropsKind$1) {
@@ -66,32 +67,37 @@ function isBlockOperation(op) {
 }
 
 //#endregion
-//#region src/generate.ts
-const customGenOperation = (oper, context) => {
-	if (oper.type === IRNodeTypes.CREATE_NODES) return genCreateNodes(oper, context);
-	else if (oper.type === IRNodeTypes.SET_NODES) return genSetNodes(oper, context);
-};
-function genSetNodes(oper, context) {
-	const { helper } = context;
-	const { element, values, generated } = oper;
-	return [NEWLINE, ...genCall(helper("setNodes"), `${generated ? "x" : "n"}${element}`, combineValues(values, context))];
+//#region src/transforms/utils.ts
+function newDynamic() {
+	return {
+		flags: DynamicFlag.REFERENCED,
+		children: []
+	};
 }
-function genCreateNodes(oper, context) {
-	const { helper } = context;
-	const { id, values } = oper;
-	return [
-		NEWLINE,
-		`const n${id} = `,
-		...genCall(helper("createNodes"), values && combineValues(values, context))
-	];
+function newBlock(node) {
+	return {
+		type: 1,
+		node,
+		dynamic: newDynamic(),
+		effect: [],
+		operation: [],
+		returns: [],
+		tempId: 0
+	};
 }
-function combineValues(values, context) {
-	return values.flatMap((value, i) => {
-		const exp = genExpression(value, context);
-		if (i > 0) exp.unshift(", ");
-		return exp;
-	});
+function createBranch(node, context, isVFor) {
+	context.node = node = wrapFragment(node);
+	const branch = newBlock(node);
+	const exitBlock = context.enterBlock(branch, isVFor);
+	context.reference();
+	return [branch, exitBlock];
 }
+function wrapFragment(node) {
+	if (node.type === "JSXFragment" || isTemplate(node)) return node;
+	return jsxFragment(jsxOpeningFragment(), jsxClosingFragment(), [node.type === "JSXElement" ? node : jsxExpressionContainer(node)]);
+}
+const EMPTY_EXPRESSION = createSimpleExpression("", true);
+const isFragmentNode = (node) => node.type === IRNodeTypes.ROOT || node.type === "JSXFragment" || node.type === "JSXElement" && !!isTemplate(node);
 
 //#endregion
 //#region src/utils.ts
@@ -148,22 +154,17 @@ function resolveSimpleExpressionNode(exp) {
 	}
 	return exp;
 }
-const resolvedExpressions = /* @__PURE__ */ new WeakSet();
 function resolveExpression(node, context, effect = false) {
 	if (!node) return createSimpleExpression("", true);
 	node = unwrapTSNode(node.type === "JSXExpressionContainer" ? node.expression : node);
 	const isStatic = node.type === "StringLiteral" || node.type === "JSXText" || node.type === "JSXIdentifier";
 	let source = node.type === "JSXEmptyExpression" ? "" : node.type === "JSXIdentifier" ? node.name : node.type === "StringLiteral" ? node.value : node.type === "JSXText" ? resolveJSXText(node) : node.type === "Identifier" ? node.name : context.ir.source.slice(node.start, node.end);
 	const location = node.loc;
-	const isResolved = resolvedExpressions.has(node);
 	if (source && !isStatic && effect && !isConstant(node)) {
 		source = `() => (${source})`;
-		if (location && node && !isResolved) {
-			location.start.column -= 7;
-			node.start -= 7;
-		}
+		node._offset = 7;
 	}
-	return resolveSimpleExpression(source, isStatic, location, isStatic ? void 0 : parseExpression(`(${source})`, { plugins: context.options.expressionPlugins }));
+	return resolveSimpleExpression(source, isStatic, location, isStatic ? void 0 : node);
 }
 function resolveSimpleExpression(source, isStatic, location, ast) {
 	const result = createSimpleExpression(source, isStatic, resolveLocation(location, source));
@@ -256,48 +257,1352 @@ function isTemplate(node) {
 }
 
 //#endregion
-//#region src/transforms/utils.ts
-function newDynamic() {
+//#region src/generators/utils.ts
+const NEWLINE = Symbol(`newline`);
+const INDENT_START = Symbol(`indent start`);
+const INDENT_END = Symbol(`indent end`);
+function buildCodeFragment(...frag) {
+	const push = frag.push.bind(frag);
+	const unshift = frag.unshift.bind(frag);
+	return [
+		frag,
+		push,
+		unshift
+	];
+}
+function genMulti([left, right, seg, placeholder], ...frags) {
+	if (placeholder) {
+		while (frags.length > 0 && !frags.at(-1)) frags.pop();
+		frags = frags.map((frag$1) => frag$1 || placeholder);
+	} else frags = frags.filter(Boolean);
+	const frag = [];
+	push(left);
+	for (const [i, fn] of frags.entries()) {
+		push(fn);
+		if (i < frags.length - 1) push(seg);
+	}
+	push(right);
+	return frag;
+	function push(fn) {
+		if (!isArray(fn)) fn = [fn];
+		frag.push(...fn);
+	}
+}
+const DELIMITERS_ARRAY = [
+	"[",
+	"]",
+	", "
+];
+const DELIMITERS_ARRAY_NEWLINE = [
+	[
+		"[",
+		INDENT_START,
+		NEWLINE
+	],
+	[
+		INDENT_END,
+		NEWLINE,
+		"]"
+	],
+	[", ", NEWLINE]
+];
+const DELIMITERS_OBJECT = [
+	"{ ",
+	" }",
+	", "
+];
+const DELIMITERS_OBJECT_NEWLINE = [
+	[
+		"{",
+		INDENT_START,
+		NEWLINE
+	],
+	[
+		INDENT_END,
+		NEWLINE,
+		"}"
+	],
+	[", ", NEWLINE]
+];
+function genCall(name, ...frags) {
+	const hasPlaceholder = isArray(name);
+	const fnName = hasPlaceholder ? name[0] : name;
+	const placeholder = hasPlaceholder ? name[1] : "null";
+	return [fnName, ...genMulti([
+		"(",
+		")",
+		", ",
+		placeholder
+	], ...frags)];
+}
+function codeFragmentToString(code, context) {
+	const { options: { filename, sourceMap } } = context;
+	let map;
+	if (sourceMap) {
+		map = new SourceMapGenerator();
+		map.setSourceContent(filename, context.ir.source);
+		map._sources.add(filename);
+	}
+	let codegen = "";
+	const pos = {
+		line: 1,
+		column: 1,
+		offset: 0
+	};
+	let indentLevel = 0;
+	for (let frag of code) {
+		if (!frag) continue;
+		if (frag === NEWLINE) frag = [`\n${`  `.repeat(indentLevel)}`, NewlineType.Start];
+		else if (frag === INDENT_START) {
+			indentLevel++;
+			continue;
+		} else if (frag === INDENT_END) {
+			indentLevel--;
+			continue;
+		}
+		if (isString(frag)) frag = [frag];
+		let [code$1, newlineIndex = NewlineType.None, loc, name] = frag;
+		codegen += code$1;
+		if (map) {
+			if (loc) addMapping(loc.start, name);
+			if (newlineIndex === NewlineType.Unknown) advancePositionWithMutation(pos, code$1);
+			else {
+				pos.offset += code$1.length;
+				if (newlineIndex === NewlineType.None) pos.column += code$1.length;
+				else {
+					if (newlineIndex === NewlineType.End) newlineIndex = code$1.length - 1;
+					pos.line++;
+					pos.column = code$1.length - newlineIndex;
+				}
+			}
+			if (loc && loc !== locStub) addMapping(loc.end);
+		}
+	}
+	return [codegen, map];
+	function addMapping(loc, name = null) {
+		const { _names, _mappings } = map;
+		if (name !== null && !_names.has(name)) _names.add(name);
+		_mappings.add({
+			originalLine: loc.line,
+			originalColumn: loc.column - 1,
+			generatedLine: pos.line,
+			generatedColumn: pos.column - 1,
+			source: filename,
+			name
+		});
+	}
+}
+
+//#endregion
+//#region src/generators/expression.ts
+function genExpression(node, context, assignment) {
+	const { content, ast, isStatic, loc } = node;
+	if (isStatic) return [[
+		JSON.stringify(content),
+		NewlineType.None,
+		loc
+	]];
+	if (!node.content.trim() || ast === false || isConstantExpression(node)) return [[
+		content,
+		NewlineType.None,
+		loc
+	], assignment && ` = ${assignment}`];
+	if (ast === null) return genIdentifier(content, context, loc, assignment);
+	const ids = [];
+	const parentStackMap = /* @__PURE__ */ new Map();
+	const parentStack = [];
+	walkIdentifiers$1(ast, (id) => {
+		ids.push(id);
+		parentStackMap.set(id, parentStack.slice());
+	}, false, parentStack);
+	let hasMemberExpression = false;
+	if (ids.length) {
+		const [frag, push] = buildCodeFragment();
+		const isTSNode = ast && TS_NODE_TYPES.includes(ast.type);
+		const offset = (ast?.start ? ast.start - 1 : 0) - (ast._offset || 0);
+		ids.sort((a, b) => a.start - b.start).forEach((id, i) => {
+			const start = id.start - 1 - offset;
+			const end = id.end - 1 - offset;
+			const last = ids[i - 1];
+			if (!isTSNode || i !== 0) {
+				const leadingText = content.slice(last ? last.end - 1 - offset : 0, start);
+				if (leadingText.length) push([leadingText, NewlineType.Unknown]);
+			}
+			const source = content.slice(start, end);
+			const parentStack$1 = parentStackMap.get(id);
+			const parent = parentStack$1.at(-1);
+			hasMemberExpression ||= !!parent && (parent.type === "MemberExpression" || parent.type === "OptionalMemberExpression");
+			push(...genIdentifier(source, context, {
+				start: advancePositionWithClone(node.loc.start, source, start),
+				end: advancePositionWithClone(node.loc.start, source, end),
+				source
+			}, hasMemberExpression ? void 0 : assignment, parent));
+			if (i === ids.length - 1 && end < content.length && !isTSNode) push([content.slice(end), NewlineType.Unknown]);
+		});
+		if (assignment && hasMemberExpression) push(` = ${assignment}`);
+		return frag;
+	} else return [[
+		content,
+		NewlineType.Unknown,
+		loc
+	]];
+}
+function genIdentifier(raw, context, loc, assignment, parent) {
+	const { identifiers } = context;
+	const name = raw;
+	const idMap = identifiers[raw];
+	if (idMap && idMap.length) {
+		const replacement = idMap[0];
+		if (isString(replacement)) if (parent && parent.type === "ObjectProperty" && parent.shorthand) return [[
+			`${name}: ${replacement}`,
+			NewlineType.None,
+			loc
+		]];
+		else return [[
+			replacement,
+			NewlineType.None,
+			loc
+		]];
+		else return genExpression(replacement, context, assignment);
+	}
+	let prefix;
+	if (isStaticProperty(parent) && parent.shorthand) prefix = `${raw}: `;
+	raw = withAssignment(raw);
+	return [prefix, [
+		raw,
+		NewlineType.None,
+		loc,
+		name
+	]];
+	function withAssignment(s) {
+		return assignment ? `${s} = ${assignment}` : s;
+	}
+}
+
+//#endregion
+//#region src/generators/vModel.ts
+const helperMap = {
+	text: "applyTextModel",
+	radio: "applyRadioModel",
+	checkbox: "applyCheckboxModel",
+	select: "applySelectModel",
+	dynamic: "applyDynamicModel"
+};
+function genVModel(oper, context) {
+	const { modelType, element, dir: { exp, modifiers } } = oper;
+	return [NEWLINE, ...genCall(context.helper(helperMap[modelType]), `n${element}`, [
+		`() => (`,
+		...genExpression(exp, context),
+		`)`
+	], genModelHandler(exp, context), modifiers.length ? `{ ${modifiers.map((e) => `${e.content}: true`).join(",")} }` : void 0)];
+}
+function genModelHandler(exp, context) {
+	return [
+		`${context.options.isTS ? `(_value: any)` : `_value`} => (`,
+		...genExpression(exp, context, "_value"),
+		")"
+	];
+}
+
+//#endregion
+//#region src/generators/vShow.ts
+function genVShow(oper, context) {
+	return [NEWLINE, ...genCall(context.helper("applyVShow"), `n${oper.element}`, [
+		`() => (`,
+		...genExpression(oper.dir.exp, context),
+		`)`
+	])];
+}
+
+//#endregion
+//#region src/generators/directive.ts
+function genBuiltinDirective(oper, context) {
+	switch (oper.name) {
+		case "show": return genVShow(oper, context);
+		case "model": return genVModel(oper, context);
+		default: return [];
+	}
+}
+/**
+* user directives via `withVaporDirectives`
+* TODO the compiler side is implemented but no runtime support yet
+* it was removed due to perf issues
+*/
+function genDirectivesForElement(id, context) {
+	const dirs = filterCustomDirectives(id, context.block.operation);
+	return dirs.length ? genCustomDirectives(dirs, context) : [];
+}
+function genCustomDirectives(opers, context) {
+	const { helper } = context;
+	const element = `n${opers[0].element}`;
+	const directiveItems = opers.map(genDirectiveItem);
+	const directives = genMulti(DELIMITERS_ARRAY, ...directiveItems);
+	return [NEWLINE, ...genCall(helper("withVaporDirectives"), element, directives)];
+	function genDirectiveItem({ dir, name, asset }) {
+		const directiveVar = asset ? toValidAssetId(name, "directive") : genExpression(extend(createSimpleExpression(name, false), { ast: null }), context);
+		const value = dir.exp && ["() => ", ...genExpression(dir.exp, context)];
+		const argument = dir.arg && genExpression(dir.arg, context);
+		const modifiers = !!dir.modifiers.length && [
+			"{ ",
+			genDirectiveModifiers(dir.modifiers.map((m) => m.content)),
+			" }"
+		];
+		return genMulti(DELIMITERS_ARRAY.concat("void 0"), directiveVar, value, argument, modifiers);
+	}
+}
+function genDirectiveModifiers(modifiers) {
+	return modifiers.map((value) => `${isSimpleIdentifier(value) ? value : JSON.stringify(value)}: true`).join(", ");
+}
+function filterCustomDirectives(id, operations) {
+	return operations.filter((oper) => oper.type === IRNodeTypes.DIRECTIVE && oper.element === id && !oper.builtin);
+}
+
+//#endregion
+//#region src/generators/event.ts
+function genSetEvent(oper, context) {
+	const { helper } = context;
+	const { element, key, keyOverride, value, modifiers, delegate, effect } = oper;
+	const name = genName();
+	const handler = genEventHandler(context, value, modifiers);
+	const eventOptions = genEventOptions();
+	if (delegate) {
+		context.delegates.add(key.content);
+		if (!context.block.operation.some(isSameDelegateEvent)) return [
+			NEWLINE,
+			`n${element}.$evt${key.content} = `,
+			...handler
+		];
+	}
+	return [NEWLINE, ...genCall(helper(delegate ? "delegate" : "on"), `n${element}`, name, handler, eventOptions)];
+	function genName() {
+		const expr = genExpression(key, context);
+		if (keyOverride) {
+			const find = JSON.stringify(keyOverride[0]);
+			const replacement = JSON.stringify(keyOverride[1]);
+			const wrapped = [
+				"(",
+				...expr,
+				")"
+			];
+			return [
+				...wrapped,
+				` === ${find} ? ${replacement} : `,
+				...wrapped
+			];
+		} else return genExpression(key, context);
+	}
+	function genEventOptions() {
+		const { options } = modifiers;
+		if (!options.length && !effect) return;
+		return genMulti(DELIMITERS_OBJECT_NEWLINE, effect && ["effect: true"], ...options.map((option) => [`${option}: true`]));
+	}
+	function isSameDelegateEvent(op) {
+		if (op.type === IRNodeTypes.SET_EVENT && op !== oper && op.delegate && op.element === oper.element && op.key.content === key.content) return true;
+	}
+}
+function genSetDynamicEvents(oper, context) {
+	const { helper } = context;
+	return [NEWLINE, ...genCall(helper("setDynamicEvents"), `n${oper.element}`, genExpression(oper.event, context))];
+}
+function genEventHandler(context, value, modifiers = {
+	nonKeys: [],
+	keys: []
+}, extraWrap = false) {
+	let handlerExp = [`() => {}`];
+	if (value && value.content.trim()) if (isMemberExpression(value, context.options)) {
+		handlerExp = genExpression(value, context);
+		if (!extraWrap) handlerExp = [
+			`e => `,
+			...handlerExp,
+			`(e)`
+		];
+	} else if (isFnExpression(value, context.options)) handlerExp = genExpression(value, context);
+	else {
+		const referencesEvent = value.content.includes("$event");
+		const hasMultipleStatements = value.content.includes(`;`);
+		const expr = referencesEvent ? context.withId(() => genExpression(value, context), { $event: null }) : genExpression(value, context);
+		handlerExp = [
+			referencesEvent ? "$event => " : "() => ",
+			hasMultipleStatements ? "{" : "(",
+			...expr,
+			hasMultipleStatements ? "}" : ")"
+		];
+	}
+	const { keys, nonKeys } = modifiers;
+	if (nonKeys.length) handlerExp = genWithModifiers(context, handlerExp, nonKeys);
+	if (keys.length) handlerExp = genWithKeys(context, handlerExp, keys);
+	if (extraWrap) handlerExp.unshift(`() => `);
+	return handlerExp;
+}
+function genWithModifiers(context, handler, nonKeys) {
+	return genCall(context.helper("withModifiers"), handler, JSON.stringify(nonKeys));
+}
+function genWithKeys(context, handler, keys) {
+	return genCall(context.helper("withKeys"), handler, JSON.stringify(keys));
+}
+
+//#endregion
+//#region src/generators/prop.ts
+const helpers = {
+	setText: { name: "setText" },
+	setHtml: { name: "setHtml" },
+	setClass: { name: "setClass" },
+	setStyle: { name: "setStyle" },
+	setValue: { name: "setValue" },
+	setAttr: {
+		name: "setAttr",
+		needKey: true
+	},
+	setProp: {
+		name: "setProp",
+		needKey: true
+	},
+	setDOMProp: {
+		name: "setDOMProp",
+		needKey: true
+	},
+	setDynamicProps: { name: "setDynamicProps" }
+};
+function genSetProp(oper, context) {
+	const { helper } = context;
+	const { prop: { key, values, modifier }, tag } = oper;
+	const resolvedHelper = getRuntimeHelper(tag, key.content, modifier);
+	const propValue = genPropValue(values, context);
+	return [NEWLINE, ...genCall([helper(resolvedHelper.name), null], `n${oper.element}`, resolvedHelper.needKey ? genExpression(key, context) : false, propValue)];
+}
+function genDynamicProps(oper, context) {
+	const { helper } = context;
+	const values = oper.props.map((props) => Array.isArray(props) ? genLiteralObjectProps(props, context) : props.kind === IRDynamicPropsKind.ATTRIBUTE ? genLiteralObjectProps([props], context) : genExpression(props.value, context));
+	return [NEWLINE, ...genCall(helper("setDynamicProps"), `n${oper.element}`, genMulti(DELIMITERS_ARRAY, ...values), oper.root && "true")];
+}
+function genLiteralObjectProps(props, context) {
+	return genMulti(DELIMITERS_OBJECT, ...props.map((prop) => [
+		...genPropKey(prop, context),
+		`: `,
+		...genPropValue(prop.values, context)
+	]));
+}
+function genPropKey({ key: node, modifier, runtimeCamelize, handler, handlerModifiers }, context) {
+	const { helper } = context;
+	const handlerModifierPostfix = handlerModifiers && handlerModifiers.options ? handlerModifiers.options.map(capitalize).join("") : "";
+	if (node.isStatic) {
+		const keyName = (handler ? toHandlerKey(node.content) : node.content) + handlerModifierPostfix;
+		return [[
+			isSimpleIdentifier(keyName) ? keyName : JSON.stringify(keyName),
+			NewlineType.None,
+			node.loc
+		]];
+	}
+	let key = genExpression(node, context);
+	if (runtimeCamelize) key = genCall(helper("camelize"), key);
+	if (handler) key = genCall(helper("toHandlerKey"), key);
+	return [
+		"[",
+		modifier && `${JSON.stringify(modifier)} + `,
+		...key,
+		handlerModifierPostfix ? ` + ${JSON.stringify(handlerModifierPostfix)}` : void 0,
+		"]"
+	];
+}
+function genPropValue(values, context) {
+	if (values.length === 1) return genExpression(values[0], context);
+	return genMulti(DELIMITERS_ARRAY, ...values.map((expr) => genExpression(expr, context)));
+}
+function getRuntimeHelper(tag, key, modifier) {
+	const tagName = tag.toUpperCase();
+	if (modifier) if (modifier === ".") return getSpecialHelper(key, tagName) || helpers.setDOMProp;
+	else return helpers.setAttr;
+	const helper = getSpecialHelper(key, tagName);
+	if (helper) return helper;
+	if (/aria[A-Z]/.test(key)) return helpers.setDOMProp;
+	if (isSVGTag(tag)) return helpers.setAttr;
+	if (shouldSetAsAttr(tagName, key) || key.includes("-")) return helpers.setAttr;
+	return helpers.setProp;
+}
+function getSpecialHelper(keyName, tagName) {
+	if (keyName === "value" && canSetValueDirectly(tagName)) return helpers.setValue;
+	else if (keyName === "class") return helpers.setClass;
+	else if (keyName === "style") return helpers.setStyle;
+	else if (keyName === "innerHTML") return helpers.setHtml;
+	else if (keyName === "textContent") return helpers.setText;
+}
+
+//#endregion
+//#region src/generators/component.ts
+function genCreateComponent(operation, context) {
+	const { helper } = context;
+	const tag = genTag();
+	const { root, props, slots, once } = operation;
+	const rawSlots = genRawSlots(slots, context);
+	const [ids, handlers] = processInlineHandlers(props, context);
+	const rawProps = context.withId(() => genRawProps(props, context), ids);
+	const inlineHandlers = handlers.reduce((acc, { name, value }) => {
+		const handler = genEventHandler(context, value, void 0, false);
+		return [
+			...acc,
+			`const ${name} = `,
+			...handler,
+			NEWLINE
+		];
+	}, []);
+	return [
+		NEWLINE,
+		...inlineHandlers,
+		`const n${operation.id} = `,
+		...genCall(operation.dynamic && !operation.dynamic.isStatic ? helper("createDynamicComponent") : operation.asset ? helper("createComponentWithFallback") : helper("createComponent"), tag, rawProps, rawSlots, root ? "true" : false, once && "true"),
+		...genDirectivesForElement(operation.id, context)
+	];
+	function genTag() {
+		if (operation.dynamic) if (operation.dynamic.isStatic) return genCall(helper("resolveDynamicComponent"), genExpression(operation.dynamic, context));
+		else return [
+			"() => (",
+			...genExpression(operation.dynamic, context),
+			")"
+		];
+		else if (operation.asset) return toValidAssetId(operation.tag, "component");
+		else return genExpression(extend(createSimpleExpression(operation.tag, false), { ast: null }), context);
+	}
+}
+function getUniqueHandlerName(context, name) {
+	const { seenInlineHandlerNames } = context;
+	const count = seenInlineHandlerNames[name] || 0;
+	seenInlineHandlerNames[name] = count + 1;
+	return count === 0 ? name : `${name}${count}`;
+}
+function processInlineHandlers(props, context) {
+	const ids = Object.create(null);
+	const handlers = [];
+	const staticProps = props[0];
+	if (isArray(staticProps)) for (const prop of staticProps) {
+		if (!prop.handler) continue;
+		prop.values.forEach((value, i) => {
+			const isMemberExp = isMemberExpression(value, context.options);
+			if (!isMemberExp) {
+				const name = getUniqueHandlerName(context, `_on_${prop.key.content.replace(":", "_")}`);
+				handlers.push({
+					name,
+					value
+				});
+				ids[name] = null;
+				prop.values[i] = extend({ ast: null }, createSimpleExpression(name));
+			}
+		});
+	}
+	return [ids, handlers];
+}
+function genRawProps(props, context) {
+	const staticProps = props[0];
+	if (isArray(staticProps)) {
+		if (!staticProps.length && props.length === 1) return;
+		return genStaticProps(staticProps, context, genDynamicProps$1(props.slice(1), context));
+	} else if (props.length) return genStaticProps([], context, genDynamicProps$1(props, context));
+}
+function genStaticProps(props, context, dynamicProps) {
+	const args = props.map((prop) => genProp(prop, context, true));
+	if (dynamicProps) args.push([`$: `, ...dynamicProps]);
+	return genMulti(args.length > 1 ? DELIMITERS_OBJECT_NEWLINE : DELIMITERS_OBJECT, ...args);
+}
+function genDynamicProps$1(props, context) {
+	const { helper } = context;
+	const frags = [];
+	for (const p of props) {
+		let expr;
+		if (isArray(p)) {
+			if (p.length) frags.push(genStaticProps(p, context));
+			continue;
+		} else if (p.kind === IRDynamicPropsKind.ATTRIBUTE) expr = genMulti(DELIMITERS_OBJECT, genProp(p, context));
+		else {
+			expr = genExpression(p.value, context);
+			if (p.handler) expr = genCall(helper("toHandlers"), expr);
+		}
+		frags.push([
+			"() => (",
+			...expr,
+			")"
+		]);
+	}
+	if (frags.length) return genMulti(DELIMITERS_ARRAY_NEWLINE, ...frags);
+}
+function genProp(prop, context, isStatic) {
+	const values = genPropValue(prop.values, context);
+	return [
+		...genPropKey(prop, context),
+		": ",
+		...prop.handler ? genEventHandler(context, prop.values[0], prop.handlerModifiers, true) : isStatic ? [
+			"() => (",
+			...values,
+			")"
+		] : values,
+		...prop.model ? [...genModelEvent(prop, context), ...genModelModifiers(prop, context)] : []
+	];
+}
+function genModelEvent(prop, context) {
+	const name = prop.key.isStatic ? [JSON.stringify(`onUpdate:${camelize(prop.key.content)}`)] : [
+		"[\"onUpdate:\" + ",
+		...genExpression(prop.key, context),
+		"]"
+	];
+	const handler = genModelHandler(prop.values[0], context);
+	return [
+		",",
+		NEWLINE,
+		...name,
+		": () => ",
+		...handler
+	];
+}
+function genModelModifiers(prop, context) {
+	const { key, modelModifiers } = prop;
+	if (!modelModifiers || !modelModifiers.length) return [];
+	const modifiersKey = key.isStatic ? [`${key.content}Modifiers`] : [
+		"[",
+		...genExpression(key, context),
+		" + \"Modifiers\"]"
+	];
+	const modifiersVal = genDirectiveModifiers(modelModifiers);
+	return [
+		",",
+		NEWLINE,
+		...modifiersKey,
+		`: () => ({ ${modifiersVal} })`
+	];
+}
+function genRawSlots(slots, context) {
+	if (!slots.length) return;
+	const staticSlots = slots[0];
+	if (staticSlots.slotType === IRSlotType.STATIC) return genStaticSlots(staticSlots, context, slots.length > 1 ? slots.slice(1) : void 0);
+	else return genStaticSlots({
+		slotType: IRSlotType.STATIC,
+		slots: {}
+	}, context, slots);
+}
+function genStaticSlots({ slots }, context, dynamicSlots) {
+	const args = Object.keys(slots).map((name) => [`${JSON.stringify(name)}: `, ...genSlotBlockWithProps(slots[name], context)]);
+	if (dynamicSlots) args.push([`$: `, ...genDynamicSlots(dynamicSlots, context)]);
+	return genMulti(DELIMITERS_OBJECT_NEWLINE, ...args);
+}
+function genDynamicSlots(slots, context) {
+	return genMulti(DELIMITERS_ARRAY_NEWLINE, ...slots.map((slot) => slot.slotType === IRSlotType.STATIC ? genStaticSlots(slot, context) : slot.slotType === IRSlotType.EXPRESSION ? slot.slots.content : genDynamicSlot(slot, context, true)));
+}
+function genDynamicSlot(slot, context, withFunction = false) {
+	let frag;
+	switch (slot.slotType) {
+		case IRSlotType.DYNAMIC:
+			frag = genBasicDynamicSlot(slot, context);
+			break;
+		case IRSlotType.LOOP:
+			frag = genLoopSlot(slot, context);
+			break;
+		case IRSlotType.CONDITIONAL:
+			frag = genConditionalSlot(slot, context);
+			break;
+	}
+	return withFunction ? [
+		"() => (",
+		...frag,
+		")"
+	] : frag;
+}
+function genBasicDynamicSlot(slot, context) {
+	const { name, fn } = slot;
+	return genMulti(DELIMITERS_OBJECT_NEWLINE, ["name: ", ...genExpression(name, context)], ["fn: ", ...genSlotBlockWithProps(fn, context)]);
+}
+function genLoopSlot(slot, context) {
+	const { name, fn, loop } = slot;
+	const { value, key, index, source } = loop;
+	const rawValue = value && value.content;
+	const rawKey = key && key.content;
+	const rawIndex = index && index.content;
+	const idMap = {};
+	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)]);
+	return [...genCall(context.helper("createForSlots"), genExpression(source, context), [
+		...genMulti([
+			"(",
+			")",
+			", "
+		], rawValue ? rawValue : rawKey || rawIndex ? "_" : void 0, rawKey ? rawKey : rawIndex ? "__" : void 0, rawIndex),
+		" => (",
+		...slotExpr,
+		")"
+	])];
+}
+function genConditionalSlot(slot, context) {
+	const { condition, positive, negative } = slot;
+	return [
+		...genExpression(condition, context),
+		INDENT_START,
+		NEWLINE,
+		"? ",
+		...genDynamicSlot(positive, context),
+		NEWLINE,
+		": ",
+		...negative ? [...genDynamicSlot(negative, context)] : ["void 0"],
+		INDENT_END
+	];
+}
+function genSlotBlockWithProps(oper, context) {
+	let isDestructureAssignment = false;
+	let rawProps;
+	let propsName;
+	let exitScope;
+	let depth;
+	const { props } = oper;
+	const idsOfProps = /* @__PURE__ */ new Set();
+	if (props) {
+		rawProps = props.content;
+		if (isDestructureAssignment = !!props.ast) {
+			[depth, exitScope] = context.enterScope();
+			propsName = `_slotProps${depth}`;
+			walkIdentifiers$1(props.ast, (id, _, __, ___, isLocal) => {
+				if (isLocal) idsOfProps.add(id.name);
+			}, true);
+		} else idsOfProps.add(propsName = rawProps);
+	}
+	const idMap = {};
+	idsOfProps.forEach((id) => idMap[id] = isDestructureAssignment ? `${propsName}[${JSON.stringify(id)}]` : null);
+	const blockFn = context.withId(() => genBlock(oper, context, [propsName]), idMap);
+	exitScope && exitScope();
+	return blockFn;
+}
+
+//#endregion
+//#region src/generators/dom.ts
+function genInsertNode({ parent, elements, anchor }, { helper }) {
+	let element = elements.map((el) => `n${el}`).join(", ");
+	if (elements.length > 1) element = `[${element}]`;
+	return [NEWLINE, ...genCall(helper("insert"), element, `n${parent}`, anchor === void 0 ? void 0 : `n${anchor}`)];
+}
+function genPrependNode(oper, { helper }) {
+	return [NEWLINE, ...genCall(helper("prepend"), `n${oper.parent}`, ...oper.elements.map((el) => `n${el}`))];
+}
+
+//#endregion
+//#region src/generators/for.ts
+/**
+* Flags to optimize vapor `createFor` runtime behavior, shared between the
+* compiler and the runtime
+*/
+let VaporVForFlags = /* @__PURE__ */ function(VaporVForFlags$1) {
+	/**
+	* v-for is the only child of a parent container, so it can take the fast
+	* path with textContent = '' when the whole list is emptied
+	*/
+	VaporVForFlags$1[VaporVForFlags$1["FAST_REMOVE"] = 1] = "FAST_REMOVE";
+	/**
+	* v-for used on component - we can skip creating child scopes for each block
+	* because the component itself already has a scope.
+	*/
+	VaporVForFlags$1[VaporVForFlags$1["IS_COMPONENT"] = 2] = "IS_COMPONENT";
+	/**
+	* v-for inside v-ince
+	*/
+	VaporVForFlags$1[VaporVForFlags$1["ONCE"] = 4] = "ONCE";
+	return VaporVForFlags$1;
+}({});
+function genFor(oper, context) {
+	const { helper } = context;
+	const { source, value, key, index, render, keyProp, once, id, component, onlyChild } = oper;
+	let rawValue = null;
+	const rawKey = key && key.content;
+	const rawIndex = index && index.content;
+	const sourceExpr = [
+		"() => (",
+		...genExpression(source, context),
+		")"
+	];
+	const idToPathMap = parseValueDestructure();
+	const [depth, exitScope] = context.enterScope();
+	const idMap = {};
+	const itemVar = `_for_item${depth}`;
+	idMap[itemVar] = null;
+	idToPathMap.forEach((pathInfo, id$1) => {
+		let path = `${itemVar}.value${pathInfo ? pathInfo.path : ""}`;
+		if (pathInfo) {
+			if (pathInfo.helper) {
+				idMap[pathInfo.helper] = null;
+				path = `${pathInfo.helper}(${path}, ${pathInfo.helperArgs})`;
+			}
+			if (pathInfo.dynamic) {
+				const node = idMap[id$1] = createSimpleExpression(path);
+				const plugins = context.options.expressionPlugins;
+				node.ast = parseExpression(`(${path})`, { plugins: plugins ? [...plugins, "typescript"] : ["typescript"] });
+			} else idMap[id$1] = path;
+		} else idMap[id$1] = path;
+	});
+	const args = [itemVar];
+	if (rawKey) {
+		const keyVar = `_for_key${depth}`;
+		args.push(`, ${keyVar}`);
+		idMap[rawKey] = `${keyVar}.value`;
+		idMap[keyVar] = null;
+	}
+	if (rawIndex) {
+		const indexVar = `_for_index${depth}`;
+		args.push(`, ${indexVar}`);
+		idMap[rawIndex] = `${indexVar}.value`;
+		idMap[indexVar] = null;
+	}
+	const { selectorPatterns, keyOnlyBindingPatterns } = matchPatterns(render, keyProp, idMap);
+	const patternFrag = [];
+	for (const [i, { selector }] of selectorPatterns.entries()) {
+		const selectorName = `_selector${id}_${i}`;
+		patternFrag.push(NEWLINE, `const ${selectorName} = `, ...genCall(`n${id}.useSelector`, [`() => `, ...genExpression(selector, context)]));
+	}
+	const blockFn = context.withId(() => {
+		const frag = [];
+		frag.push("(", ...args, ") => {", INDENT_START);
+		if (selectorPatterns.length || keyOnlyBindingPatterns.length) frag.push(...genBlockContent(render, context, false, () => {
+			const patternFrag$1 = [];
+			for (const [i, { effect }] of selectorPatterns.entries()) {
+				patternFrag$1.push(NEWLINE, `_selector${id}_${i}(() => {`, INDENT_START);
+				for (const oper$1 of effect.operations) patternFrag$1.push(...genOperation(oper$1, context));
+				patternFrag$1.push(INDENT_END, NEWLINE, `})`);
+			}
+			for (const { effect } of keyOnlyBindingPatterns) for (const oper$1 of effect.operations) patternFrag$1.push(...genOperation(oper$1, context));
+			return patternFrag$1;
+		}));
+		else frag.push(...genBlockContent(render, context));
+		frag.push(INDENT_END, NEWLINE, "}");
+		return frag;
+	}, idMap);
+	exitScope();
+	let flags = 0;
+	if (onlyChild) flags |= VaporVForFlags.FAST_REMOVE;
+	if (component) flags |= VaporVForFlags.IS_COMPONENT;
+	if (once) flags |= VaporVForFlags.ONCE;
+	return [
+		NEWLINE,
+		`const n${id} = `,
+		...genCall(helper("createFor"), sourceExpr, blockFn, genCallback(keyProp), flags ? String(flags) : void 0),
+		...patternFrag
+	];
+	function parseValueDestructure() {
+		const map = /* @__PURE__ */ new Map();
+		if (value) {
+			rawValue = value && value.content;
+			if (value.ast) walkIdentifiers(value.ast, (id$1, _, parentStack, ___, isLocal) => {
+				if (isLocal) {
+					let path = "";
+					let isDynamic = false;
+					let helper$1;
+					let helperArgs;
+					for (let i = 0; i < parentStack.length; i++) {
+						const parent = parentStack[i];
+						const child = parentStack[i + 1] || id$1;
+						if (parent.type === "ObjectProperty" && parent.value === child) if (parent.key.type === "StringLiteral") path += `[${JSON.stringify(parent.key.value)}]`;
+						else if (parent.computed) {
+							isDynamic = true;
+							path += `[${value.content.slice(parent.key.start - 1, parent.key.end - 1)}]`;
+						} else path += `.${parent.key.name}`;
+						else if (parent.type === "ArrayPattern") {
+							const index$1 = parent.elements.indexOf(child);
+							if (child.type === "RestElement") path += `.slice(${index$1})`;
+							else path += `[${index$1}]`;
+						} else if (parent.type === "ObjectPattern" && child.type === "RestElement") {
+							helper$1 = context.helper("getRestElement");
+							helperArgs = `[${parent.properties.filter((p) => p.type === "ObjectProperty").map((p) => {
+								if (p.key.type === "StringLiteral") return JSON.stringify(p.key.value);
+								else if (p.computed) {
+									isDynamic = true;
+									return value.content.slice(p.key.start - 1, p.key.end - 1);
+								} else return JSON.stringify(p.key.name);
+							}).join(", ")}]`;
+						}
+						if (child.type === "AssignmentPattern" && (parent.type === "ObjectProperty" || parent.type === "ArrayPattern")) {
+							isDynamic = true;
+							helper$1 = context.helper("getDefaultValue");
+							helperArgs = value.content.slice(child.right.start - 1, child.right.end - 1);
+						}
+					}
+					map.set(id$1.name, {
+						path,
+						dynamic: isDynamic,
+						helper: helper$1,
+						helperArgs
+					});
+				}
+			}, true);
+			else map.set(rawValue, null);
+		}
+		return map;
+	}
+	function genCallback(expr) {
+		if (!expr) return false;
+		const res = context.withId(() => genExpression(expr, context), genSimpleIdMap());
+		return [
+			...genMulti([
+				"(",
+				")",
+				", "
+			], rawValue ? rawValue : rawKey || rawIndex ? "_" : void 0, rawKey ? rawKey : rawIndex ? "__" : void 0, rawIndex),
+			" => (",
+			...res,
+			")"
+		];
+	}
+	function genSimpleIdMap() {
+		const idMap$1 = {};
+		if (rawKey) idMap$1[rawKey] = null;
+		if (rawIndex) idMap$1[rawIndex] = null;
+		idToPathMap.forEach((_, id$1) => idMap$1[id$1] = null);
+		return idMap$1;
+	}
+}
+function matchPatterns(render, keyProp, idMap) {
+	const selectorPatterns = [];
+	const keyOnlyBindingPatterns = [];
+	render.effect = render.effect.filter((effect) => {
+		if (keyProp !== void 0) {
+			const selector = matchSelectorPattern(effect, keyProp.ast, idMap);
+			if (selector) {
+				selectorPatterns.push(selector);
+				return false;
+			}
+			const keyOnly = matchKeyOnlyBindingPattern(effect, keyProp.ast);
+			if (keyOnly) {
+				keyOnlyBindingPatterns.push(keyOnly);
+				return false;
+			}
+		}
+		return true;
+	});
 	return {
-		flags: DynamicFlag.REFERENCED,
-		children: []
+		keyOnlyBindingPatterns,
+		selectorPatterns
 	};
 }
-function newBlock(node) {
+function matchKeyOnlyBindingPattern(effect, keyAst) {
+	if (effect.expressions.length === 1) {
+		const ast = effect.expressions[0].ast;
+		if (typeof ast === "object" && ast !== null && isKeyOnlyBinding(ast, keyAst)) return { effect };
+	}
+}
+function matchSelectorPattern(effect, keyAst, idMap) {
+	if (effect.expressions.length === 1) {
+		const ast = effect.expressions[0].ast;
+		const offset = effect.expressions[0].loc.start.offset;
+		if (typeof ast === "object" && ast) {
+			const matcheds = [];
+			walkAST(ast, { enter(node) {
+				if (typeof node === "object" && node && node.type === "BinaryExpression" && node.operator === "===" && node.left.type !== "PrivateName") {
+					const { left, right } = node;
+					for (const [a, b] of [[left, right], [right, left]]) {
+						const aIsKey = isKeyOnlyBinding(a, keyAst);
+						const bIsKey = isKeyOnlyBinding(b, keyAst);
+						const bVars = analyzeVariableScopes(b, idMap);
+						if (aIsKey && !bIsKey && !bVars.locals.length) matcheds.push([a, b]);
+					}
+				}
+			} });
+			if (matcheds.length === 1) {
+				const [key, selector] = matcheds[0];
+				const content$1 = effect.expressions[0].content;
+				let hasExtraId = false;
+				const parentStackMap = /* @__PURE__ */ new Map();
+				const parentStack = [];
+				walkIdentifiers(ast, (id) => {
+					if (id.start !== key.start && id.start !== selector.start) hasExtraId = true;
+					parentStackMap.set(id, parentStack.slice());
+				}, false, parentStack);
+				if (!hasExtraId) {
+					const name = content$1.slice(selector.start - offset, selector.end - offset);
+					return {
+						effect,
+						selector: {
+							content: name,
+							ast: extend({}, selector, {
+								start: 1,
+								end: name.length + 1
+							}),
+							loc: selector.loc,
+							isStatic: false
+						}
+					};
+				}
+			}
+		}
+		const content = effect.expressions[0].content;
+		if (typeof ast === "object" && ast && ast.type === "ConditionalExpression" && ast.test.type === "BinaryExpression" && ast.test.operator === "===" && ast.test.left.type !== "PrivateName" && isStaticNode(ast.consequent) && isStaticNode(ast.alternate)) {
+			const left = ast.test.left;
+			const right = ast.test.right;
+			for (const [a, b] of [[left, right], [right, left]]) {
+				const aIsKey = isKeyOnlyBinding(a, keyAst);
+				const bIsKey = isKeyOnlyBinding(b, keyAst);
+				const bVars = analyzeVariableScopes(b, idMap);
+				if (aIsKey && !bIsKey && !bVars.locals.length) return {
+					effect,
+					selector: {
+						content: content.slice(b.start - offset, b.end - offset),
+						ast: b,
+						loc: b.loc,
+						isStatic: false
+					}
+				};
+			}
+		}
+	}
+}
+function analyzeVariableScopes(ast, idMap) {
+	const globals = [];
+	const locals = [];
+	const ids = [];
+	const parentStackMap = /* @__PURE__ */ new Map();
+	const parentStack = [];
+	walkIdentifiers(ast, (id) => {
+		ids.push(id);
+		parentStackMap.set(id, parentStack.slice());
+	}, false, parentStack);
+	for (const id of ids) {
+		if (isGloballyAllowed(id.name)) continue;
+		if (idMap[id.name]) locals.push(id.name);
+		else globals.push(id.name);
+	}
 	return {
-		type: 1,
-		node,
-		dynamic: newDynamic(),
-		effect: [],
-		operation: [],
-		returns: [],
-		tempId: 0
+		globals,
+		locals
 	};
 }
-function createBranch(node, context, isVFor) {
-	context.node = node = wrapFragment(node);
-	const branch = newBlock(node);
-	const exitBlock = context.enterBlock(branch, isVFor);
-	context.reference();
-	return [branch, exitBlock];
+function isKeyOnlyBinding(expr, keyAst) {
+	let only = true;
+	walkAST(expr, { enter(node) {
+		if (isNodesEquivalent(node, keyAst)) {
+			this.skip();
+			return;
+		}
+		if (node.type === "Identifier") only = false;
+	} });
+	return only;
 }
-function wrapFragment(node) {
-	if (node.type === "JSXFragment" || isTemplate(node)) return node;
-	return jsxFragment(jsxOpeningFragment(), jsxClosingFragment(), [node.type === "JSXElement" ? node : jsxExpressionContainer(node)]);
+
+//#endregion
+//#region src/generators/html.ts
+function genSetHtml(oper, context) {
+	const { helper } = context;
+	const { value, element } = oper;
+	return [NEWLINE, ...genCall(helper("setHtml"), `n${element}`, genExpression(value, context))];
+}
+
+//#endregion
+//#region src/generators/if.ts
+function genIf(oper, context, isNested = false) {
+	const { helper } = context;
+	const { condition, positive, negative, once } = oper;
+	const [frag, push] = buildCodeFragment();
+	const conditionExpr = [
+		"() => (",
+		...genExpression(condition, context),
+		")"
+	];
+	const positiveArg = genBlock(positive, context);
+	let negativeArg = false;
+	if (negative) if (negative.type === IRNodeTypes.BLOCK) negativeArg = genBlock(negative, context);
+	else negativeArg = ["() => ", ...genIf(negative, context, true)];
+	if (!isNested) push(NEWLINE, `const n${oper.id} = `);
+	push(...genCall(helper("createIf"), conditionExpr, positiveArg, negativeArg, once && "true"));
+	return frag;
+}
+
+//#endregion
+//#region src/generators/templateRef.ts
+const setTemplateRefIdent = `_setTemplateRef`;
+function genSetTemplateRef(oper, context) {
+	return [
+		NEWLINE,
+		oper.effect && `r${oper.element} = `,
+		...genCall(setTemplateRefIdent, `n${oper.element}`, genExpression(oper.value, context), oper.effect ? `r${oper.element}` : oper.refFor ? "void 0" : void 0, oper.refFor && "true")
+	];
+}
+function genDeclareOldRef(oper) {
+	return [NEWLINE, `let r${oper.id}`];
+}
+
+//#endregion
+//#region src/generators/text.ts
+function genSetText(oper, context) {
+	const { helper } = context;
+	const { element, values, generated } = oper;
+	const texts = combineValues(values, context, true);
+	return [NEWLINE, ...genCall(helper("setText"), `${generated ? "x" : "n"}${element}`, texts)];
+}
+function genGetTextChild(oper, context) {
+	return [NEWLINE, `const x${oper.parent} = ${context.helper("child")}(n${oper.parent})`];
+}
+function genSetNodes(oper, context) {
+	const { helper } = context;
+	const { element, values, generated } = oper;
+	return [NEWLINE, ...genCall(helper("setNodes"), `${generated ? "x" : "n"}${element}`, combineValues(values, context))];
+}
+function genCreateNodes(oper, context) {
+	const { helper } = context;
+	const { id, values } = oper;
+	return [
+		NEWLINE,
+		`const n${id} = `,
+		...genCall(helper("createNodes"), values && combineValues(values, context))
+	];
+}
+function combineValues(values, context, setText) {
+	return values.flatMap((value, i) => {
+		let exp = genExpression(value, context);
+		if (setText && getLiteralExpressionValue(value) == null) exp = genCall(context.helper("toDisplayString"), exp);
+		if (i > 0) exp.unshift(setText ? " + " : ", ");
+		return exp;
+	});
+}
+
+//#endregion
+//#region src/generators/operation.ts
+function genOperations(opers, context) {
+	const [frag, push] = buildCodeFragment();
+	for (const operation of opers) push(...genOperationWithInsertionState(operation, context));
+	return frag;
+}
+function genOperationWithInsertionState(oper, context) {
+	const [frag, push] = buildCodeFragment();
+	if (isBlockOperation(oper) && oper.parent) push(...genInsertionState(oper, context));
+	push(...genOperation(oper, context));
+	return frag;
+}
+function genOperation(oper, context) {
+	switch (oper.type) {
+		case IRNodeTypes.SET_PROP: return genSetProp(oper, context);
+		case IRNodeTypes.SET_DYNAMIC_PROPS: return genDynamicProps(oper, context);
+		case IRNodeTypes.SET_TEXT: return genSetText(oper, context);
+		case IRNodeTypes.SET_EVENT: return genSetEvent(oper, context);
+		case IRNodeTypes.SET_DYNAMIC_EVENTS: return genSetDynamicEvents(oper, context);
+		case IRNodeTypes.SET_HTML: return genSetHtml(oper, context);
+		case IRNodeTypes.SET_TEMPLATE_REF: return genSetTemplateRef(oper, context);
+		case IRNodeTypes.INSERT_NODE: return genInsertNode(oper, context);
+		case IRNodeTypes.PREPEND_NODE: return genPrependNode(oper, context);
+		case IRNodeTypes.IF: return genIf(oper, context);
+		case IRNodeTypes.FOR: return genFor(oper, context);
+		case IRNodeTypes.CREATE_COMPONENT_NODE: return genCreateComponent(oper, context);
+		case IRNodeTypes.DECLARE_OLD_REF: return genDeclareOldRef(oper);
+		case IRNodeTypes.SLOT_OUTLET_NODE: return [];
+		case IRNodeTypes.DIRECTIVE: return genBuiltinDirective(oper, context);
+		case IRNodeTypes.GET_TEXT_CHILD: return genGetTextChild(oper, context);
+		case IRNodeTypes.SET_NODES: return genSetNodes(oper, context);
+		case IRNodeTypes.CREATE_NODES: return genCreateNodes(oper, context);
+		default: {
+			const exhaustiveCheck = oper;
+			throw new Error(`Unhandled operation type in genOperation: ${exhaustiveCheck}`);
+		}
+	}
+}
+function genEffects(effects, context, genExtraFrag) {
+	const { helper } = context;
+	const [frag, push, unshift] = buildCodeFragment();
+	let operationsCount = 0;
+	for (const [i, effect] of effects.entries()) {
+		operationsCount += effect.operations.length;
+		const frags = genEffect(effect, context);
+		i > 0 && push(NEWLINE);
+		if (frag.at(-1) === ")" && frags[0] === "(") push(";");
+		push(...frags);
+	}
+	const newLineCount = frag.filter((frag$1) => frag$1 === NEWLINE).length;
+	if (newLineCount > 1 || operationsCount > 1) {
+		unshift(`{`, INDENT_START, NEWLINE);
+		push(INDENT_END, NEWLINE, "}");
+	}
+	if (effects.length) {
+		unshift(NEWLINE, `${helper("renderEffect")}(() => `);
+		push(`)`);
+	}
+	if (genExtraFrag) push(...context.withId(genExtraFrag, {}));
+	return frag;
+}
+function genEffect({ operations }, context) {
+	const [frag, push] = buildCodeFragment();
+	const operationsExps = genOperations(operations, context);
+	const newlineCount = operationsExps.filter((frag$1) => frag$1 === NEWLINE).length;
+	if (newlineCount > 1) push(...operationsExps);
+	else push(...operationsExps.filter((frag$1) => frag$1 !== NEWLINE));
+	return frag;
+}
+function genInsertionState(operation, context) {
+	return [NEWLINE, ...genCall(context.helper("setInsertionState"), `n${operation.parent}`, operation.anchor == null ? void 0 : operation.anchor === -1 ? `0` : `n${operation.anchor}`)];
+}
+
+//#endregion
+//#region src/generators/template.ts
+function genTemplates(templates, rootIndex, { helper }) {
+	return templates.map((template, i) => template.startsWith("_template") ? template : `${helper("template")}(${JSON.stringify(template)}${i === rootIndex ? ", true" : ""})`);
+}
+function genSelf(dynamic, context) {
+	const [frag, push] = buildCodeFragment();
+	const { id, template, operation } = dynamic;
+	if (id !== void 0 && template !== void 0) {
+		push(NEWLINE, `const n${id} = t${template}()`);
+		push(...genDirectivesForElement(id, context));
+	}
+	if (operation) push(...genOperationWithInsertionState(operation, context));
+	return frag;
+}
+function genChildren(dynamic, context, pushBlock, from = `n${dynamic.id}`) {
+	const { helper } = context;
+	const [frag, push] = buildCodeFragment();
+	const { children } = dynamic;
+	let offset = 0;
+	let prev;
+	const childrenToGen = [];
+	for (const [index, child] of children.entries()) {
+		if (child.flags & DynamicFlag.NON_TEMPLATE) offset--;
+		const id = child.flags & DynamicFlag.REFERENCED ? child.flags & DynamicFlag.INSERT ? child.anchor : child.id : void 0;
+		if (id === void 0 && !child.hasDynamicChild) {
+			push(...genSelf(child, context));
+			continue;
+		}
+		const elementIndex = Number(index) + offset;
+		const variable = id === void 0 ? `p${context.block.tempId++}` : `n${id}`;
+		pushBlock(NEWLINE, `const ${variable} = `);
+		if (prev) if (elementIndex - prev[1] === 1) pushBlock(...genCall(helper("next"), prev[0]));
+		else pushBlock(...genCall(helper("nthChild"), from, String(elementIndex)));
+		else if (elementIndex === 0) pushBlock(...genCall(helper("child"), from));
+		else {
+			let init = genCall(helper("child"), from);
+			if (elementIndex === 1) init = genCall(helper("next"), init);
+			else if (elementIndex > 1) init = genCall(helper("nthChild"), from, String(elementIndex));
+			pushBlock(...init);
+		}
+		if (id === child.anchor) push(...genSelf(child, context));
+		if (id !== void 0) push(...genDirectivesForElement(id, context));
+		prev = [variable, elementIndex];
+		childrenToGen.push([child, variable]);
+	}
+	if (childrenToGen.length) for (const [child, from$1] of childrenToGen) push(...genChildren(child, context, pushBlock, from$1));
+	return frag;
+}
+
+//#endregion
+//#region src/generators/block.ts
+function genBlock(oper, context, args = [], root) {
+	return [
+		"(",
+		...args,
+		") => {",
+		INDENT_START,
+		...genBlockContent(oper, context, root),
+		INDENT_END,
+		NEWLINE,
+		"}"
+	];
+}
+function genBlockContent(block, context, root, genEffectsExtraFrag) {
+	const [frag, push] = buildCodeFragment();
+	const { dynamic, effect, operation, returns } = block;
+	const resetBlock = context.enterBlock(block);
+	if (root) {
+		for (let name of context.ir.component) {
+			const id = toValidAssetId(name, "component");
+			const maybeSelfReference = name.endsWith("__self");
+			if (maybeSelfReference) name = name.slice(0, -6);
+			push(NEWLINE, `const ${id} = `, ...genCall(context.helper("resolveComponent"), JSON.stringify(name), maybeSelfReference ? "true" : void 0));
+		}
+		genResolveAssets("directive", "resolveDirective");
+	}
+	for (const child of dynamic.children) push(...genSelf(child, context));
+	for (const child of dynamic.children) push(...genChildren(child, context, push, `n${child.id}`));
+	push(...genOperations(operation, context));
+	push(...genEffects(effect, context, genEffectsExtraFrag));
+	push(NEWLINE, `return `);
+	const returnNodes = returns.map((n) => `n${n}`);
+	const returnsCode = returnNodes.length > 1 ? genMulti(DELIMITERS_ARRAY, ...returnNodes) : [returnNodes[0] || "null"];
+	push(...returnsCode);
+	resetBlock();
+	return frag;
+	function genResolveAssets(kind, helper) {
+		for (const name of context.ir[kind]) push(NEWLINE, `const ${toValidAssetId(name, kind)} = `, ...genCall(context.helper(helper), JSON.stringify(name)));
+	}
+}
+
+//#endregion
+//#region src/generate.ts
+var CodegenContext = class {
+	options;
+	helpers = new Set([]);
+	helper = (name) => {
+		this.helpers.add(name);
+		return `_${name}`;
+	};
+	delegates = /* @__PURE__ */ new Set();
+	identifiers = Object.create(null);
+	seenInlineHandlerNames = Object.create(null);
+	block;
+	withId(fn, map) {
+		const { identifiers } = this;
+		const ids = Object.keys(map);
+		for (const id of ids) {
+			identifiers[id] ||= [];
+			identifiers[id].unshift(map[id] || id);
+		}
+		const ret = fn();
+		ids.forEach((id) => remove(identifiers[id], map[id] || id));
+		return ret;
+	}
+	enterBlock(block) {
+		const parent = this.block;
+		this.block = block;
+		return () => this.block = parent;
+	}
+	scopeLevel = 0;
+	enterScope() {
+		return [this.scopeLevel++, () => this.scopeLevel--];
+	}
+	constructor(ir, options) {
+		this.ir = ir;
+		const defaultOptions$1 = {
+			mode: "module",
+			sourceMap: false,
+			filename: `template.vue.html`,
+			scopeId: null,
+			runtimeGlobalName: `Vue`,
+			runtimeModuleName: `vue`,
+			ssrRuntimeModuleName: "vue/server-renderer",
+			ssr: false,
+			isTS: false,
+			inSSR: false,
+			templates: [],
+			expressionPlugins: []
+		};
+		this.options = extend(defaultOptions$1, options);
+		this.block = ir.block;
+	}
+};
+function generate(ir, options = {}) {
+	const [frag, push] = buildCodeFragment();
+	const context = new CodegenContext(ir, options);
+	const { helpers: helpers$1 } = context;
+	push(INDENT_START);
+	if (ir.hasTemplateRef) push(NEWLINE, `const ${setTemplateRefIdent} = ${context.helper("createTemplateRefSetter")}()`);
+	push(...genBlockContent(ir.block, context, true));
+	push(INDENT_END, NEWLINE);
+	if (context.delegates.size) context.helper("delegateEvents");
+	const templates = genTemplates(ir.templates, ir.rootTemplateIndex, context);
+	const [code, map] = codeFragmentToString(frag, context);
+	return {
+		code,
+		ast: ir,
+		map: map && map.toJSON(),
+		helpers: helpers$1,
+		templates,
+		delegates: context.delegates
+	};
 }
-const EMPTY_EXPRESSION = createSimpleExpression("", true);
-const isFragmentNode = (node) => node.type === IRNodeTypes.ROOT || node.type === "JSXFragment" || node.type === "JSXElement" && !!isTemplate(node);
 
 //#endregion
 //#region src/transform.ts
 const defaultOptions = {
 	filename: "",
-	prefixIdentifiers: false,
 	hoistStatic: false,
 	hmr: false,
 	cacheHandlers: false,
 	nodeTransforms: [],
 	directiveTransforms: {},
+	templates: [],
 	transformHoist: null,
 	isBuiltInComponent: NOOP,
 	isCustomElement: NOOP,
@@ -307,8 +1612,6 @@ const defaultOptions = {
 	ssr: false,
 	inSSR: false,
 	ssrCssVars: ``,
-	bindingMetadata: EMPTY_OBJ,
-	inline: false,
 	isTS: false,
 	onError: defaultOnError,
 	onWarn: defaultOnWarn
@@ -364,10 +1667,10 @@ var TransformContext = class TransformContext {
 		return this.dynamic.id = this.increaseId();
 	}
 	pushTemplate(content) {
-		const existing = this.ir.template.indexOf(content);
+		const existing = this.ir.templates.indexOf(content);
 		if (existing !== -1) return existing;
-		this.ir.template.push(content);
-		return this.ir.template.length - 1;
+		this.ir.templates.push(content);
+		return this.ir.templates.length - 1;
 	}
 	registerTemplate() {
 		if (!this.template) return -1;
@@ -402,7 +1705,7 @@ function transform(node, options = {}) {
 		type: IRNodeTypes.ROOT,
 		node,
 		source: node.source,
-		template: [],
+		templates: options.templates || [],
 		component: /* @__PURE__ */ new Set(),
 		directive: /* @__PURE__ */ new Set(),
 		block: newBlock(node),
@@ -587,7 +1890,7 @@ function transformNativeElement(tag, propsResult, singleRoot, context, getEffect
 	}
 	template += `>${context.childrenTemplate.join("")}`;
 	if (!isVoidTag(tag)) template += `</${tag}>`;
-	if (singleRoot) context.ir.rootTemplateIndex = context.ir.template.length;
+	if (singleRoot) context.ir.rootTemplateIndex = context.ir.templates.length;
 	if (context.parent && context.parent.node.type === "JSXElement" && context.parent.node.openingElement.name.type === "JSXIdentifier" && !isValidHTMLNesting(context.parent.node.openingElement.name.name, tag)) {
 		context.reference();
 		context.dynamic.template = context.pushTemplate(template);
@@ -979,7 +2282,7 @@ function processIf(node, attribute, context) {
 				id,
 				condition: dir.exp,
 				positive: branch,
-				once: context.inVOnce || isConstantNode(attribute.value, context.options.bindingMetadata)
+				once: context.inVOnce || isConstantNode(attribute.value, {})
 			};
 		};
 	} else {
@@ -1096,9 +2399,9 @@ function hasDynamicKeyVBind(node) {
 const delegatedEvents = /* @__PURE__ */ makeMap("beforeinput,click,dblclick,contextmenu,focusin,focusout,input,keydown,keyup,mousedown,mousemove,mouseout,mouseover,mouseup,pointerdown,pointermove,pointerout,pointerover,pointerup,touchend,touchmove,touchstart");
 const transformVOn = (dir, node, context) => {
 	const { name, loc, value } = dir;
-	if (name.type === "JSXNamespacedName") return;
+	if (!name) return;
 	const isComponent = isJSXComponent(node);
-	const [nameString, ...modifiers] = name.name.replace(/^on([A-Z])/, (_, $1) => $1.toLowerCase()).split("_");
+	const [nameString, ...modifiers] = context.ir.source.slice(name.start, name.end).replace(/^on([A-Z])/, (_, $1) => $1.toLowerCase()).split("_");
 	if (!value && !modifiers.length) context.options.onError(createCompilerError(ErrorCodes.X_V_ON_NO_EXPRESSION, resolveLocation(loc, context)));
 	let arg = resolveSimpleExpression(nameString, true, dir.name.loc);
 	const exp = resolveExpression(dir.value, context);
@@ -1296,13 +2599,10 @@ function createSlotBlock(slotNode, dir, context) {
 //#region src/transforms/vSlots.ts
 const transformVSlots = (dir, node, context) => {
 	if (!isJSXComponent(node)) return;
-	if (dir.value?.type === "JSXExpressionContainer") {
-		context.slots = [{
-			slotType: IRSlotType.EXPRESSION,
-			slots: resolveExpression(dir.value.expression, context)
-		}];
-		if (node.children.length) context.options.onError(createCompilerError(ErrorCodes.X_V_SLOT_MIXED_SLOT_USAGE, resolveLocation(node.children[0].loc, context)));
-	}
+	if (dir.value?.type === "JSXExpressionContainer") context.slots = [{
+		slotType: IRSlotType.EXPRESSION,
+		slots: resolveExpression(dir.value.expression, context)
+	}];
 };
 
 //#endregion
@@ -1339,11 +2639,7 @@ const transformVText = (dir, node, context) => {
 //#endregion
 //#region src/compile.ts
 function compile(source, options = {}) {
-	const resolvedOptions = extend({}, options, {
-		inline: true,
-		prefixIdentifiers: false,
-		expressionPlugins: options.expressionPlugins || ["jsx"]
-	});
+	const resolvedOptions = extend({}, options, { expressionPlugins: options.expressionPlugins || ["jsx"] });
 	if (!resolvedOptions.source && isString(source)) resolvedOptions.source = source;
 	if (resolvedOptions.isTS) {
 		const { expressionPlugins } = resolvedOptions;
@@ -1364,10 +2660,7 @@ function compile(source, options = {}) {
 		nodeTransforms: [...nodeTransforms, ...resolvedOptions.nodeTransforms || []],
 		directiveTransforms: extend({}, directiveTransforms, resolvedOptions.directiveTransforms || {})
 	}));
-	return generate(ir, {
-		...resolvedOptions,
-		customGenOperation
-	});
+	return generate(ir, resolvedOptions);
 }
 function getBaseTransformPreset() {
 	return [[
@@ -1391,4 +2684,4 @@ function getBaseTransformPreset() {
 }
 
 //#endregion
-export { DynamicFlag, IRDynamicPropsKind, IRNodeTypes, IRSlotType, TransformContext, compile, createStructuralDirectiveTransform, generate, isBlockOperation, transform, transformChildren, transformElement, transformNode, transformTemplateRef, transformText, transformVBind, transformVFor, transformVHtml, transformVIf, transformVModel, transformVOn, transformVOnce, transformVShow, transformVSlot, transformVSlots, transformVText };
+export { CodegenContext, DynamicFlag, IRDynamicPropsKind, IRNodeTypes, IRSlotType, TransformContext, compile, createStructuralDirectiveTransform, generate, isBlockOperation, transform, transformChildren, transformElement, transformNode, transformTemplateRef, transformText, transformVBind, transformVFor, transformVHtml, transformVIf, transformVModel, transformVOn, transformVOnce, transformVShow, transformVSlot, transformVSlots, transformVText };