@vue-jsx-vapor/compiler 2.6.6 → 2.6.8

package/dist/index.js

@@ -1,10 +1,63 @@
 import { parse, parseExpression } from "@babel/parser";
-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, isStaticProperty, isValidHTMLNesting, locStub, resolveModifiers, toValidAssetId, unwrapTSNode, walkIdentifiers } from "@vue/compiler-dom";
-import { walkAST, walkIdentifiers as walkIdentifiers$1 } from "ast-kit";
-import { isNodesEquivalent, jsxClosingFragment, jsxExpressionContainer, jsxFragment, jsxOpeningFragment } from "@babel/types";
+import { NOOP, camelize, canSetValueDirectly, capitalize, escapeHtml, extend, isArray, isBuiltInDirective, isGloballyAllowed, isHTMLTag, isSVGTag, isString, isVoidTag, makeMap, remove, shouldSetAsAttr, toHandlerKey } from "@vue/shared";
 import { SourceMapGenerator } from "source-map-js";
+import { walkAST, walkIdentifiers } from "ast-kit";
 
+//#region src/utils/error.ts
+let ErrorCodes = /* @__PURE__ */ function(ErrorCodes$1) {
+	ErrorCodes$1[ErrorCodes$1["X_V_IF_NO_EXPRESSION"] = 28] = "X_V_IF_NO_EXPRESSION";
+	ErrorCodes$1[ErrorCodes$1["X_V_ELSE_NO_ADJACENT_IF"] = 30] = "X_V_ELSE_NO_ADJACENT_IF";
+	ErrorCodes$1[ErrorCodes$1["X_V_FOR_NO_EXPRESSION"] = 31] = "X_V_FOR_NO_EXPRESSION";
+	ErrorCodes$1[ErrorCodes$1["X_V_FOR_MALFORMED_EXPRESSION"] = 32] = "X_V_FOR_MALFORMED_EXPRESSION";
+	ErrorCodes$1[ErrorCodes$1["X_V_ON_NO_EXPRESSION"] = 35] = "X_V_ON_NO_EXPRESSION";
+	ErrorCodes$1[ErrorCodes$1["X_V_SLOT_MIXED_SLOT_USAGE"] = 37] = "X_V_SLOT_MIXED_SLOT_USAGE";
+	ErrorCodes$1[ErrorCodes$1["X_V_SLOT_DUPLICATE_SLOT_NAMES"] = 38] = "X_V_SLOT_DUPLICATE_SLOT_NAMES";
+	ErrorCodes$1[ErrorCodes$1["X_V_SLOT_EXTRANEOUS_DEFAULT_SLOT_CHILDREN"] = 39] = "X_V_SLOT_EXTRANEOUS_DEFAULT_SLOT_CHILDREN";
+	ErrorCodes$1[ErrorCodes$1["X_V_SLOT_MISPLACED"] = 40] = "X_V_SLOT_MISPLACED";
+	ErrorCodes$1[ErrorCodes$1["X_V_MODEL_NO_EXPRESSION"] = 41] = "X_V_MODEL_NO_EXPRESSION";
+	ErrorCodes$1[ErrorCodes$1["X_V_MODEL_MALFORMED_EXPRESSION"] = 42] = "X_V_MODEL_MALFORMED_EXPRESSION";
+	ErrorCodes$1[ErrorCodes$1["X_V_HTML_NO_EXPRESSION"] = 53] = "X_V_HTML_NO_EXPRESSION";
+	ErrorCodes$1[ErrorCodes$1["X_V_HTML_WITH_CHILDREN"] = 54] = "X_V_HTML_WITH_CHILDREN";
+	ErrorCodes$1[ErrorCodes$1["X_V_TEXT_NO_EXPRESSION"] = 55] = "X_V_TEXT_NO_EXPRESSION";
+	ErrorCodes$1[ErrorCodes$1["X_V_TEXT_WITH_CHILDREN"] = 56] = "X_V_TEXT_WITH_CHILDREN";
+	ErrorCodes$1[ErrorCodes$1["X_V_MODEL_ON_INVALID_ELEMENT"] = 57] = "X_V_MODEL_ON_INVALID_ELEMENT";
+	ErrorCodes$1[ErrorCodes$1["X_V_MODEL_ARG_ON_ELEMENT"] = 58] = "X_V_MODEL_ARG_ON_ELEMENT";
+	ErrorCodes$1[ErrorCodes$1["X_V_MODEL_ON_FILE_INPUT_ELEMENT"] = 59] = "X_V_MODEL_ON_FILE_INPUT_ELEMENT";
+	ErrorCodes$1[ErrorCodes$1["X_V_MODEL_UNNECESSARY_VALUE"] = 60] = "X_V_MODEL_UNNECESSARY_VALUE";
+	ErrorCodes$1[ErrorCodes$1["X_V_SHOW_NO_EXPRESSION"] = 61] = "X_V_SHOW_NO_EXPRESSION";
+	return ErrorCodes$1;
+}({});
+const errorMessages = {
+	[ErrorCodes.X_V_IF_NO_EXPRESSION]: `v-if/v-else-if is missing expression.`,
+	[ErrorCodes.X_V_ELSE_NO_ADJACENT_IF]: `v-else/v-else-if has no adjacent v-if or v-else-if.`,
+	[ErrorCodes.X_V_FOR_NO_EXPRESSION]: `v-for is missing expression.`,
+	[ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION]: `v-for has invalid expression.`,
+	[ErrorCodes.X_V_ON_NO_EXPRESSION]: `v-on is missing expression.`,
+	[ErrorCodes.X_V_SLOT_MIXED_SLOT_USAGE]: "Mixed v-slot usage on both the component and nested <template>. When there are multiple named slots, all slots should use <template> syntax to avoid scope ambiguity.",
+	[ErrorCodes.X_V_SLOT_DUPLICATE_SLOT_NAMES]: `Duplicate slot names found. `,
+	[ErrorCodes.X_V_SLOT_EXTRANEOUS_DEFAULT_SLOT_CHILDREN]: "Extraneous children found when component already has explicitly named default slot. These children will be ignored.",
+	[ErrorCodes.X_V_MODEL_NO_EXPRESSION]: `v-model is missing expression.`,
+	[ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION]: `v-model value must be a valid JavaScript member expression.`,
+	[ErrorCodes.X_V_SLOT_MISPLACED]: `v-slot can only be used on components or <template> tags.`,
+	[ErrorCodes.X_V_HTML_NO_EXPRESSION]: `v-html is missing expression.`,
+	[ErrorCodes.X_V_HTML_WITH_CHILDREN]: `v-html will override element children.`,
+	[ErrorCodes.X_V_TEXT_NO_EXPRESSION]: `v-text is missing expression.`,
+	[ErrorCodes.X_V_TEXT_WITH_CHILDREN]: `v-text will override element children.`,
+	[ErrorCodes.X_V_MODEL_ARG_ON_ELEMENT]: `v-model argument is not supported on plain elements.`,
+	[ErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT]: `v-model can only be used on <input>, <textarea> and <select> elements.`,
+	[ErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT]: `v-model cannot be used on file inputs since they are read-only. Use a v-on:change listener instead.`,
+	[ErrorCodes.X_V_MODEL_UNNECESSARY_VALUE]: `Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.`,
+	[ErrorCodes.X_V_SHOW_NO_EXPRESSION]: `v-show is missing expression.`
+};
+function createCompilerError(code, loc, messages, additionalMessage) {
+	const msg = (messages || errorMessages)[code] + (additionalMessage || ``);
+	const error = new SyntaxError(String(msg));
+	error.code = code;
+	error.loc = loc;
+	return error;
+}
+
+//#endregion
 //#region src/ir/component.ts
 let IRDynamicPropsKind = /* @__PURE__ */ function(IRDynamicPropsKind$1) {
 	IRDynamicPropsKind$1[IRDynamicPropsKind$1["EXPRESSION"] = 0] = "EXPRESSION";
@@ -67,62 +120,104 @@ function isBlockOperation(op) {
 }
 
 //#endregion
-//#region src/transforms/utils.ts
-function newDynamic() {
-	return {
-		flags: DynamicFlag.REFERENCED,
-		children: []
-	};
-}
-function newBlock(node) {
-	return {
-		type: 1,
-		node,
-		dynamic: newDynamic(),
-		effect: [],
-		operation: [],
-		returns: [],
-		tempId: 0
-	};
+//#region src/utils/ast.ts
+function findProp(expression, key) {
+	if (expression?.type === "JSXElement") for (const attr of expression.openingElement.attributes) {
+		const name = attr.type === "JSXAttribute" && (attr.name.type === "JSXIdentifier" ? attr.name.name : attr.name.type === "JSXNamespacedName" ? attr.name.namespace.name : "").split("_")[0];
+		if (name && (isString(key) ? name === key : key.test(name))) return attr;
+	}
 }
-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];
+const TS_NODE_TYPES = [
+	"TSAsExpression",
+	"TSTypeAssertion",
+	"TSNonNullExpression",
+	"TSInstantiationExpression",
+	"TSSatisfiesExpression"
+];
+function unwrapTSNode(node) {
+	if (TS_NODE_TYPES.includes(node.type)) return unwrapTSNode(node.expression);
+	else return node;
 }
-function wrapFragment(node) {
-	if (node.type === "JSXFragment" || isTemplate(node)) return node;
-	return jsxFragment(jsxOpeningFragment(), jsxClosingFragment(), [node.type === "JSXElement" ? node : jsxExpressionContainer(node)]);
+function isJSXComponent(node) {
+	if (node.type !== "JSXElement") return false;
+	const { openingElement } = node;
+	if (openingElement.name.type === "JSXIdentifier") {
+		const name = openingElement.name.name;
+		return !isHTMLTag(name) && !isSVGTag(name);
+	} else return openingElement.name.type === "JSXMemberExpression";
 }
-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
-function propToExpression(prop, context) {
-	return prop.type === "JSXAttribute" && prop.value?.type === "JSXExpressionContainer" ? resolveExpression(prop.value.expression, context) : EMPTY_EXPRESSION;
+function isMemberExpression(exp) {
+	if (!exp.ast) return;
+	const ret = unwrapTSNode(exp.ast);
+	return ret.type === "MemberExpression" || ret.type === "OptionalMemberExpression" || ret.type === "Identifier" && ret.name !== "undefined";
 }
-function isConstantExpression(exp) {
-	return isLiteralWhitelisted(exp.content) || isGloballyAllowed(exp.content) || getLiteralExpressionValue(exp) !== null;
+function isTemplate(node) {
+	if (node.type === "JSXElement" && node.openingElement.name.type === "JSXIdentifier") return node.openingElement.name.name === "template";
 }
-function getLiteralExpressionValue(exp) {
-	if (exp.ast) {
-		if ([
-			"StringLiteral",
-			"NumericLiteral",
-			"BigIntLiteral"
-		].includes(exp.ast.type)) return exp.ast.value;
-		else if (exp.ast.type === "TemplateLiteral" && exp.ast.expressions.length === 0) return exp.ast.quasis[0].value.cooked;
+function isStaticNode(node) {
+	node = unwrapTSNode(node);
+	switch (node.type) {
+		case "UnaryExpression": return isStaticNode(node.argument);
+		case "LogicalExpression":
+		case "BinaryExpression": return isStaticNode(node.left) && isStaticNode(node.right);
+		case "ConditionalExpression": return isStaticNode(node.test) && isStaticNode(node.consequent) && isStaticNode(node.alternate);
+		case "SequenceExpression":
+		case "TemplateLiteral": return node.expressions.every((expr) => isStaticNode(expr));
+		case "ParenthesizedExpression": return isStaticNode(node.expression);
+		case "StringLiteral":
+		case "NumericLiteral":
+		case "BooleanLiteral":
+		case "NullLiteral":
+		case "BigIntLiteral": return true;
+	}
+	return false;
+}
+function isConstantNode(node) {
+	if (isStaticNode(node)) return true;
+	node = unwrapTSNode(node);
+	switch (node.type) {
+		case "Identifier": return node.name === "undefined" || isGloballyAllowed(node.name);
+		case "RegExpLiteral": return true;
+		case "ObjectExpression": return node.properties.every((prop) => {
+			if (prop.type === "ObjectMethod") return false;
+			if (prop.type === "SpreadElement") return isConstantNode(prop.argument);
+			return (!prop.computed || isConstantNode(prop.key)) && isConstantNode(prop.value);
+		});
+		case "ArrayExpression": return node.elements.every((element) => {
+			if (element === null) return true;
+			if (element.type === "SpreadElement") return isConstantNode(element.argument);
+			return isConstantNode(element);
+		});
 	}
-	return exp.isStatic ? exp.content : null;
+	return false;
 }
-const isConstant = (node) => {
-	if (!node) return false;
-	if (node.type === "Identifier") return node.name === "undefined" || isGloballyAllowed(node.name);
-	return isConstantNode(node, {});
+const isFnExpression = (exp) => {
+	try {
+		if (!exp.ast) return false;
+		let ret = exp.ast;
+		if (ret.type === "Program") {
+			ret = ret.body[0];
+			if (ret.type === "ExpressionStatement") ret = ret.expression;
+		}
+		ret = unwrapTSNode(ret);
+		return ret.type === "FunctionExpression" || ret.type === "ArrowFunctionExpression";
+	} catch {
+		return false;
+	}
 };
+const isFragmentNode = (node) => node.type === IRNodeTypes.ROOT || node.type === "JSXFragment" || node.type === "JSXElement" && !!isTemplate(node);
+const isStaticProperty = (node) => !!node && (node.type === "ObjectProperty" || node.type === "ObjectMethod") && !node.computed;
+const nonIdentifierRE = /^$|^\d|[^$\w\u00A0-\uFFFF]/;
+const isSimpleIdentifier = (name) => !nonIdentifierRE.test(name);
+function getTextLikeValue(node, excludeNumber) {
+	node = node.type === "JSXExpressionContainer" ? node.expression : node;
+	if (node.type === "StringLiteral") return node.value;
+	else if (!excludeNumber && (node.type === "NumericLiteral" || node.type === "BigIntLiteral")) return String(node.value);
+	else if (node.type === "TemplateLiteral" && node.expressions.length === 0) return node.quasis[0].value.cooked;
+}
+
+//#endregion
+//#region src/utils/text.ts
 const EMPTY_TEXT_REGEX = /^[\t\v\f \u00A0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]*[\n\r]\s*$/;
 const START_EMPTY_TEXT_REGEX = /^\s*[\n\r]/;
 const END_EMPTY_TEXT_REGEX = /[\n\r]\s*$/;
@@ -136,59 +231,61 @@ function resolveJSXText(node) {
 function isEmptyText(node) {
 	return node.type === "JSXText" && EMPTY_TEXT_REGEX.test(String(node.extra?.raw)) || node.type === "JSXExpressionContainer" && node.expression.type === "JSXEmptyExpression";
 }
-function resolveSimpleExpressionNode(exp) {
-	if (!exp.isStatic) {
-		const value = getLiteralExpressionValue(exp);
-		if (value !== null) return createSimpleExpression(String(value), true, exp.loc);
+function getText(node, content) {
+	return content.ir.source.slice(node.start, node.end);
+}
+
+//#endregion
+//#region src/utils/expression.ts
+const locStub = {
+	start: {
+		line: 1,
+		column: 0,
+		index: 0
+	},
+	end: {
+		line: 1,
+		column: 0,
+		index: 0
+	},
+	filename: "",
+	identifierName: void 0
+};
+function createSimpleExpression(content, isStatic = false, ast) {
+	return {
+		loc: ast ? ast.loc : locStub,
+		content,
+		isStatic,
+		ast
+	};
+}
+const isLiteralWhitelisted = /* @__PURE__ */ makeMap("true,false,null,this");
+function isConstantExpression(exp) {
+	return isLiteralWhitelisted(exp.content) || isGloballyAllowed(exp.content) || getLiteralExpressionValue(exp) !== null;
+}
+function getLiteralExpressionValue(exp) {
+	if (exp.ast) {
+		const res = getTextLikeValue(exp.ast);
+		if (res != null) return res;
 	}
-	return exp;
+	return exp.isStatic ? exp.content : null;
 }
-function resolveExpression(node, context, effect = false) {
-	if (!node) return createSimpleExpression("", true);
+const EMPTY_EXPRESSION = createSimpleExpression("", true);
+function resolveExpression(node, context) {
+	if (!node) return EMPTY_EXPRESSION;
 	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;
-	if (source && !isStatic && effect && !isConstant(node)) {
-		source = `() => (${source})`;
-		node._offset = 7;
-	}
-	return resolveSimpleExpression(source, isStatic, location, isStatic ? void 0 : node);
-}
-function resolveSimpleExpression(source, isStatic, location, ast) {
-	const result = createSimpleExpression(source, isStatic, resolveLocation(location, source));
-	result.ast = ast ?? null;
-	return result;
-}
-function resolveLocation(location, context) {
-	return location ? {
-		start: {
-			line: location.start.line,
-			column: location.start.column + 1,
-			offset: location.start.index
-		},
-		end: {
-			line: location.end.line,
-			column: location.end.column + 1,
-			offset: location.end.index
-		},
-		source: isString(context) ? context : context.ir.source.slice(location.start.index, location.end.index)
-	} : {
-		start: {
-			line: 1,
-			column: 1,
-			offset: 0
-		},
-		end: {
-			line: 1,
-			column: 1,
-			offset: 0
-		},
-		source: ""
-	};
+	const 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);
+	return createSimpleExpression(source, isStatic, node);
 }
+function propToExpression(prop, context) {
+	return prop.type === "JSXAttribute" && prop.value?.type === "JSXExpressionContainer" ? resolveExpression(prop.value.expression, context) : EMPTY_EXPRESSION;
+}
+
+//#endregion
+//#region src/utils/directive.ts
 const namespaceRE = /^(?:\$([\w-]+)\$)?([\w-]+)?/;
-function resolveDirective(node, context, withFn = false) {
+function resolveDirective(node, context) {
 	const { value, name } = node;
 	let nameString = name.type === "JSXNamespacedName" ? name.namespace.name : name.type === "JSXIdentifier" ? name.name : "";
 	const isDirective = nameString.startsWith("v-");
@@ -208,48 +305,73 @@ function resolveDirective(node, context, withFn = false) {
 			} else if (modifierString) [argString, ...modifiers] = modifierString.split("_");
 		}
 	}
-	const arg = isDirective ? argString && name.type === "JSXNamespacedName" ? resolveSimpleExpression(argString, isStatic, name.name.loc) : void 0 : resolveSimpleExpression(nameString, true, name.loc);
-	const exp = value ? withFn && value.type === "JSXExpressionContainer" ? resolveExpressionWithFn(value.expression, context) : resolveExpression(value, context) : void 0;
+	const arg = isDirective ? argString && name.type === "JSXNamespacedName" ? createSimpleExpression(argString, isStatic, name.name) : void 0 : createSimpleExpression(nameString, true, name);
+	const exp = value ? resolveExpression(value, context) : void 0;
 	return {
-		type: NodeTypes.DIRECTIVE,
 		name: isDirective ? nameString.slice(2) : "bind",
 		rawName: getText(name, context),
 		exp,
 		arg,
-		loc: resolveLocation(node.loc, context),
+		loc: node.loc,
 		modifiers: modifiers.map((modifier) => createSimpleExpression(modifier))
 	};
 }
-function resolveExpressionWithFn(node, context) {
-	const text = getText(node, context);
-	return node.type === "Identifier" ? resolveSimpleExpression(text, false, node.loc) : resolveSimpleExpression(text, false, node.loc, parseExpression(`(${text})=>{}`, { plugins: context.options.expressionPlugins }));
-}
-function isJSXComponent(node) {
-	if (node.type !== "JSXElement") return false;
-	const { openingElement } = node;
-	if (openingElement.name.type === "JSXIdentifier") {
-		const name = openingElement.name.name;
-		return !isHTMLTag(name) && !isSVGTag(name);
-	} else return openingElement.name.type === "JSXMemberExpression";
+
+//#endregion
+//#region src/utils/transform.ts
+function newDynamic() {
+	return {
+		flags: DynamicFlag.REFERENCED,
+		children: []
+	};
 }
-function findProp(expression, key) {
-	if (expression?.type === "JSXElement") for (const attr of expression.openingElement.attributes) {
-		const name = attr.type === "JSXAttribute" && (attr.name.type === "JSXIdentifier" ? attr.name.name : attr.name.type === "JSXNamespacedName" ? attr.name.namespace.name : "").split("_")[0];
-		if (name && (isString(key) ? name === key : key.test(name))) return attr;
-	}
+function newBlock(node) {
+	return {
+		type: 1,
+		node,
+		dynamic: newDynamic(),
+		effect: [],
+		operation: [],
+		returns: [],
+		tempId: 0
+	};
 }
-function getText(node, content) {
-	return content.ir.source.slice(node.start, node.end);
+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 isTemplate(node) {
-	if (node.type === "JSXElement" && node.openingElement.name.type === "JSXIdentifier") return node.openingElement.name.name === "template";
+function wrapFragment(node) {
+	if (node.type === "JSXFragment" || isTemplate(node)) return node;
+	return {
+		type: "JSXFragment",
+		openingFragment: { type: "JSXOpeningFragment" },
+		closingFragment: { type: "JSXClosingFragment" },
+		children: [node.type === "JSXElement" ? node : {
+			type: "JSXExpressionContainer",
+			expression: node
+		}]
+	};
 }
 
 //#endregion
-//#region src/generators/utils.ts
+//#region src/utils/generate.ts
 const NEWLINE = Symbol(`newline`);
 const INDENT_START = Symbol(`indent start`);
 const INDENT_END = Symbol(`indent end`);
+let NewlineType = /* @__PURE__ */ function(NewlineType$1) {
+	/** Start with `\n` */
+	NewlineType$1[NewlineType$1["Start"] = 0] = "Start";
+	/** Ends with `\n` */
+	NewlineType$1[NewlineType$1["End"] = -1] = "End";
+	/** No `\n` included */
+	NewlineType$1[NewlineType$1["None"] = -2] = "None";
+	/** Don't know, calc it */
+	NewlineType$1[NewlineType$1["Unknown"] = -3] = "Unknown";
+	return NewlineType$1;
+}({});
 function buildCodeFragment(...frag) {
 	const push = frag.push.bind(frag);
 	const unshift = frag.unshift.bind(frag);
@@ -335,8 +457,8 @@ function codeFragmentToString(code, context) {
 	let codegen = "";
 	const pos = {
 		line: 1,
-		column: 1,
-		offset: 0
+		column: 0,
+		index: 0
 	};
 	let indentLevel = 0;
 	for (let frag of code) {
@@ -356,7 +478,7 @@ function codeFragmentToString(code, context) {
 			if (loc) addMapping(loc.start, name);
 			if (newlineIndex === NewlineType.Unknown) advancePositionWithMutation(pos, code$1);
 			else {
-				pos.offset += code$1.length;
+				pos.index += code$1.length;
 				if (newlineIndex === NewlineType.None) pos.column += code$1.length;
 				else {
 					if (newlineIndex === NewlineType.End) newlineIndex = code$1.length - 1;
@@ -373,7 +495,7 @@ function codeFragmentToString(code, context) {
 		if (name !== null && !_names.has(name)) _names.add(name);
 		_mappings.add({
 			originalLine: loc.line,
-			originalColumn: loc.column - 1,
+			originalColumn: loc.column,
 			generatedLine: pos.line,
 			generatedColumn: pos.column - 1,
 			source: filename,
@@ -381,26 +503,238 @@ function codeFragmentToString(code, context) {
 		});
 	}
 }
+function advancePositionWithMutation(pos, source, numberOfCharacters = source.length) {
+	let linesCount = 0;
+	let lastNewLinePos = -1;
+	for (let i = 0; i < numberOfCharacters; i++) if (source.charCodeAt(i) === 10) {
+		linesCount++;
+		lastNewLinePos = i;
+	}
+	pos.index += numberOfCharacters;
+	pos.line += linesCount;
+	pos.column = lastNewLinePos === -1 ? pos.column + numberOfCharacters : numberOfCharacters - lastNewLinePos;
+	return pos;
+}
+function advancePositionWithClone(pos, source, numberOfCharacters = source.length) {
+	return advancePositionWithMutation({
+		index: pos.index,
+		line: pos.line,
+		column: pos.column
+	}, source, numberOfCharacters);
+}
+
+//#endregion
+//#region src/utils/dom.ts
+/**
+* Copied from https://github.com/MananTank/validate-html-nesting
+* with ISC license
+*
+* To avoid runtime dependency on validate-html-nesting
+* This file should not change very often in the original repo
+* but we may need to keep it up-to-date from time to time.
+*/
+/**
+* returns true if given parent-child nesting is valid HTML
+*/
+function isValidHTMLNesting(parent, child) {
+	if (parent === "template") return true;
+	if (parent in onlyValidChildren) return onlyValidChildren[parent].has(child);
+	if (child in onlyValidParents) return onlyValidParents[child].has(parent);
+	if (parent in knownInvalidChildren && knownInvalidChildren[parent].has(child)) return false;
+	if (child in knownInvalidParents && knownInvalidParents[child].has(parent)) return false;
+	return true;
+}
+const headings = new Set([
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6"
+]);
+const emptySet = new Set([]);
+/**
+* maps element to set of elements that can be it's children, no other */
+const onlyValidChildren = {
+	head: new Set([
+		"base",
+		"basefront",
+		"bgsound",
+		"link",
+		"meta",
+		"title",
+		"noscript",
+		"noframes",
+		"style",
+		"script",
+		"template"
+	]),
+	optgroup: new Set(["option"]),
+	select: new Set([
+		"optgroup",
+		"option",
+		"hr"
+	]),
+	table: new Set([
+		"caption",
+		"colgroup",
+		"tbody",
+		"tfoot",
+		"thead"
+	]),
+	tr: new Set(["td", "th"]),
+	colgroup: new Set(["col"]),
+	tbody: new Set(["tr"]),
+	thead: new Set(["tr"]),
+	tfoot: new Set(["tr"]),
+	script: emptySet,
+	iframe: emptySet,
+	option: emptySet,
+	textarea: emptySet,
+	style: emptySet,
+	title: emptySet
+};
+/** maps elements to set of elements which can be it's parent, no other */
+const onlyValidParents = {
+	html: emptySet,
+	body: new Set(["html"]),
+	head: new Set(["html"]),
+	td: new Set(["tr"]),
+	colgroup: new Set(["table"]),
+	caption: new Set(["table"]),
+	tbody: new Set(["table"]),
+	tfoot: new Set(["table"]),
+	col: new Set(["colgroup"]),
+	th: new Set(["tr"]),
+	thead: new Set(["table"]),
+	tr: new Set([
+		"tbody",
+		"thead",
+		"tfoot"
+	]),
+	dd: new Set(["dl", "div"]),
+	dt: new Set(["dl", "div"]),
+	figcaption: new Set(["figure"]),
+	summary: new Set(["details"]),
+	area: new Set(["map"])
+};
+/** maps element to set of elements that can not be it's children, others can */
+const knownInvalidChildren = {
+	p: new Set([
+		"address",
+		"article",
+		"aside",
+		"blockquote",
+		"center",
+		"details",
+		"dialog",
+		"dir",
+		"div",
+		"dl",
+		"fieldset",
+		"figure",
+		"footer",
+		"form",
+		"h1",
+		"h2",
+		"h3",
+		"h4",
+		"h5",
+		"h6",
+		"header",
+		"hgroup",
+		"hr",
+		"li",
+		"main",
+		"nav",
+		"menu",
+		"ol",
+		"p",
+		"pre",
+		"section",
+		"table",
+		"ul"
+	]),
+	svg: new Set([
+		"b",
+		"blockquote",
+		"br",
+		"code",
+		"dd",
+		"div",
+		"dl",
+		"dt",
+		"em",
+		"embed",
+		"h1",
+		"h2",
+		"h3",
+		"h4",
+		"h5",
+		"h6",
+		"hr",
+		"i",
+		"img",
+		"li",
+		"menu",
+		"meta",
+		"ol",
+		"p",
+		"pre",
+		"ruby",
+		"s",
+		"small",
+		"span",
+		"strong",
+		"sub",
+		"sup",
+		"table",
+		"u",
+		"ul",
+		"var"
+	])
+};
+/** maps element to set of elements that can not be it's parent, others can */
+const knownInvalidParents = {
+	a: new Set(["a"]),
+	button: new Set(["button"]),
+	dd: new Set(["dd", "dt"]),
+	dt: new Set(["dd", "dt"]),
+	form: new Set(["form"]),
+	li: new Set(["li"]),
+	h1: headings,
+	h2: headings,
+	h3: headings,
+	h4: headings,
+	h5: headings,
+	h6: headings
+};
+function toValidAssetId(name, type) {
+	return `_${type}_${name.replaceAll(/\W/g, (searchValue, replaceValue) => {
+		return searchValue === "-" ? "_" : name.charCodeAt(replaceValue).toString();
+	})}`;
+}
 
 //#endregion
 //#region src/generators/expression.ts
-function genExpression(node, context, assignment) {
-	const { content, ast, isStatic, loc } = node;
+function genExpression(node, context, assignment, needWrap = false) {
+	let { content, ast, isStatic, loc } = node;
+	if (needWrap) content = `() => (${content})`;
 	if (isStatic) return [[
 		JSON.stringify(content),
 		NewlineType.None,
 		loc
 	]];
-	if (!node.content.trim() || ast === false || isConstantExpression(node)) return [[
+	if (!node.content.trim() || isConstantExpression(node)) return [[
 		content,
 		NewlineType.None,
 		loc
 	], assignment && ` = ${assignment}`];
-	if (ast === null) return genIdentifier(content, context, loc, assignment);
+	if (!ast) return genIdentifier(content, context, loc, assignment);
 	const ids = [];
 	const parentStackMap = /* @__PURE__ */ new Map();
 	const parentStack = [];
-	walkIdentifiers$1(ast, (id) => {
+	walkIdentifiers(ast, (id) => {
 		ids.push(id);
 		parentStackMap.set(id, parentStack.slice());
 	}, false, parentStack);
@@ -408,7 +742,7 @@ function genExpression(node, context, assignment) {
 	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);
+		const offset = (ast?.start ? ast.start - 1 : 0) - (needWrap ? 7 : 0);
 		ids.sort((a, b) => a.start - b.start).forEach((id, i) => {
 			const start = id.start - 1 - offset;
 			const end = id.end - 1 - offset;
@@ -424,7 +758,8 @@ function genExpression(node, context, assignment) {
 			push(...genIdentifier(source, context, {
 				start: advancePositionWithClone(node.loc.start, source, start),
 				end: advancePositionWithClone(node.loc.start, source, end),
-				source
+				filename: "",
+				identifierName: void 0
 			}, hasMemberExpression ? void 0 : assignment, parent));
 			if (i === ids.length - 1 && end < content.length && !isTSNode) push([content.slice(end), NewlineType.Unknown]);
 		});
@@ -487,7 +822,7 @@ function genVModel(oper, context) {
 }
 function genModelHandler(exp, context) {
 	return [
-		`${context.options.isTS ? `(_value: any)` : `_value`} => (`,
+		"_value => (",
 		...genExpression(exp, context, "_value"),
 		")"
 	];
@@ -528,7 +863,7 @@ function genCustomDirectives(opers, context) {
 	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 directiveVar = asset ? toValidAssetId(name, "directive") : genExpression(createSimpleExpression(name), context);
 		const value = dir.exp && ["() => ", ...genExpression(dir.exp, context)];
 		const argument = dir.arg && genExpression(dir.arg, context);
 		const modifiers = !!dir.modifiers.length && [
@@ -598,22 +933,20 @@ function genEventHandler(context, value, modifiers = {
 	keys: []
 }, extraWrap = false) {
 	let handlerExp = [`() => {}`];
-	if (value && value.content.trim()) if (isMemberExpression(value, context.options)) {
+	if (value && value.content.trim()) if (isMemberExpression(value)) {
 		handlerExp = genExpression(value, context);
 		if (!extraWrap) handlerExp = [
 			`e => `,
 			...handlerExp,
 			`(e)`
 		];
-	} else if (isFnExpression(value, context.options)) handlerExp = genExpression(value, context);
+	} else if (isFnExpression(value)) 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,
+			...genExpression(value, context),
 			hasMultipleStatements ? "}" : ")"
 		];
 	}
@@ -738,7 +1071,7 @@ function genCreateComponent(operation, context) {
 			")"
 		];
 		else if (operation.asset) return toValidAssetId(operation.tag, "component");
-		else return genExpression(extend(createSimpleExpression(operation.tag, false), { ast: null }), context);
+		else return genExpression(createSimpleExpression(operation.tag), context);
 	}
 }
 function genRawProps(props, context) {
@@ -907,8 +1240,8 @@ function genSlotBlockWithProps(oper, context) {
 		if (isDestructureAssignment = !!props.ast) {
 			[depth, exitScope] = context.enterScope();
 			propsName = `_slotProps${depth}`;
-			walkIdentifiers$1(props.ast, (id, _, __, ___, isLocal) => {
-				if (isLocal) idsOfProps.add(id.name);
+			walkIdentifiers(props.ast, (id, _, __, isReference, isLocal) => {
+				if (isReference && !isLocal) idsOfProps.add(id.name);
 			}, true);
 		} else idsOfProps.add(propsName = rawProps);
 	}
@@ -978,8 +1311,7 @@ function genFor(oper, context) {
 			}
 			if (pathInfo.dynamic) {
 				const node = idMap[id$1] = createSimpleExpression(path);
-				const plugins = context.options.expressionPlugins;
-				node.ast = parseExpression(`(${path})`, { plugins: plugins ? [...plugins, "typescript"] : ["typescript"] });
+				node.ast = parseExpression(`(${path})`, { plugins: context.options.expressionPlugins });
 			} else idMap[id$1] = path;
 		} else idMap[id$1] = path;
 	});
@@ -996,7 +1328,7 @@ function genFor(oper, context) {
 		idMap[rawIndex] = `${indexVar}.value`;
 		idMap[indexVar] = null;
 	}
-	const { selectorPatterns, keyOnlyBindingPatterns } = matchPatterns(render, keyProp, idMap);
+	const { selectorPatterns, keyOnlyBindingPatterns } = matchPatterns(render, keyProp, idMap, context.ir.source);
 	const selectorDeclarations = [];
 	const selectorSetup = [];
 	for (const [i, { selector }] of selectorPatterns.entries()) {
@@ -1038,8 +1370,8 @@ function genFor(oper, context) {
 		const map = /* @__PURE__ */ new Map();
 		if (value) {
 			rawValue = value && value.content;
-			if (value.ast) walkIdentifiers(value.ast, (id$1, _, parentStack, ___, isLocal) => {
-				if (isLocal) {
+			if (value.ast && value.ast.type !== "Identifier") walkIdentifiers(value.ast, (id$1, _, parentStack, isReference, isLocal) => {
+				if (isReference && !isLocal) {
 					let path = "";
 					let isDynamic = false;
 					let helper$1;
@@ -1052,11 +1384,11 @@ function genFor(oper, context) {
 							isDynamic = true;
 							path += `[${value.content.slice(parent.key.start - 1, parent.key.end - 1)}]`;
 						} else path += `.${parent.key.name}`;
-						else if (parent.type === "ArrayPattern") {
+						else if (parent.type === "ArrayExpression") {
 							const index$1 = parent.elements.indexOf(child);
-							if (child.type === "RestElement") path += `.slice(${index$1})`;
+							if (child.type === "SpreadElement") path += `.slice(${index$1})`;
 							else path += `[${index$1}]`;
-						} else if (parent.type === "ObjectPattern" && child.type === "RestElement") {
+						} else if (parent.type === "ObjectExpression" && child.type === "SpreadElement") {
 							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);
@@ -1066,11 +1398,6 @@ function genFor(oper, context) {
 								} 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,
@@ -1106,17 +1433,17 @@ function genFor(oper, context) {
 		return idMap$1;
 	}
 }
-function matchPatterns(render, keyProp, idMap) {
+function matchPatterns(render, keyProp, idMap, source) {
 	const selectorPatterns = [];
 	const keyOnlyBindingPatterns = [];
 	render.effect = render.effect.filter((effect) => {
 		if (keyProp !== void 0) {
-			const selector = matchSelectorPattern(effect, keyProp.ast, idMap);
+			const selector = matchSelectorPattern(effect, keyProp.content, idMap, source);
 			if (selector) {
 				selectorPatterns.push(selector);
 				return false;
 			}
-			const keyOnly = matchKeyOnlyBindingPattern(effect, keyProp.ast);
+			const keyOnly = matchKeyOnlyBindingPattern(effect, keyProp.content, source);
 			if (keyOnly) {
 				keyOnlyBindingPatterns.push(keyOnly);
 				return false;
@@ -1129,37 +1456,37 @@ function matchPatterns(render, keyProp, idMap) {
 		selectorPatterns
 	};
 }
-function matchKeyOnlyBindingPattern(effect, keyAst) {
+function matchKeyOnlyBindingPattern(effect, key, source) {
 	if (effect.expressions.length === 1) {
 		const ast = effect.expressions[0].ast;
-		if (typeof ast === "object" && ast !== null && isKeyOnlyBinding(ast, keyAst)) return { effect };
+		if (typeof ast === "object" && ast !== null && isKeyOnlyBinding(ast, key, source)) return { effect };
 	}
 }
-function matchSelectorPattern(effect, keyAst, idMap) {
+function matchSelectorPattern(effect, key, idMap, source) {
 	if (effect.expressions.length === 1) {
 		const ast = effect.expressions[0].ast;
-		const offset = effect.expressions[0].loc.start.offset;
+		const offset = effect.expressions[0].loc.start.index;
 		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 aIsKey = isKeyOnlyBinding(a, key, source);
+						const bIsKey = isKeyOnlyBinding(b, key, source);
 						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 [key$1, 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;
+					if (id.start !== key$1.start && id.start !== selector.start) hasExtraId = true;
 					parentStackMap.set(id, parentStack.slice());
 				}, false, parentStack);
 				if (!hasExtraId) {
@@ -1180,12 +1507,12 @@ function matchSelectorPattern(effect, keyAst, idMap) {
 			}
 		}
 		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" && isConstant(ast.consequent) && isConstant(ast.alternate)) {
+		if (typeof ast === "object" && ast && ast.type === "ConditionalExpression" && ast.test.type === "BinaryExpression" && ast.test.operator === "===" && ast.test.left.type !== "PrivateName" && isConstantNode(ast.consequent) && isConstantNode(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 aIsKey = isKeyOnlyBinding(a, key, source);
+				const bIsKey = isKeyOnlyBinding(b, key, source);
 				const bVars = analyzeVariableScopes(b, idMap);
 				if (aIsKey && !bIsKey && !bVars.locals.length) return {
 					effect,
@@ -1220,10 +1547,10 @@ function analyzeVariableScopes(ast, idMap) {
 		locals
 	};
 }
-function isKeyOnlyBinding(expr, keyAst) {
+function isKeyOnlyBinding(expr, key, source) {
 	let only = true;
 	walkAST(expr, { enter(node) {
-		if (isNodesEquivalent(node, keyAst)) {
+		if (source.slice(node.start, node.end) === key) {
 			this.skip();
 			return;
 		}
@@ -1279,7 +1606,7 @@ function genDeclareOldRef(oper) {
 function genSetText(oper, context) {
 	const { helper } = context;
 	const { element, values, generated } = oper;
-	const texts = combineValues(values, context, true);
+	const texts = combineValues(values, context, true, true);
 	return [NEWLINE, ...genCall(helper("setText"), `${generated ? "x" : "n"}${element}`, texts)];
 }
 function genGetTextChild(oper, context) {
@@ -1287,21 +1614,22 @@ function genGetTextChild(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))];
+	const { element, values, generated, once } = oper;
+	return [NEWLINE, ...genCall(helper("setNodes"), `${generated ? "x" : "n"}${element}`, combineValues(values, context, once))];
 }
 function genCreateNodes(oper, context) {
 	const { helper } = context;
-	const { id, values } = oper;
+	const { id, values, once } = oper;
 	return [
 		NEWLINE,
 		`const n${id} = `,
-		...genCall(helper("createNodes"), values && combineValues(values, context))
+		...genCall(helper("createNodes"), values && combineValues(values, context, once))
 	];
 }
-function combineValues(values, context, setText) {
+function combineValues(values, context, once, setText) {
 	return values.flatMap((value, i) => {
-		let exp = genExpression(value, context);
+		const { content, isStatic, ast } = value;
+		let exp = genExpression(value, context, void 0, !once && !setText && !!content && !isStatic && !!ast && !isConstantNode(ast));
 		if (setText && getLiteralExpressionValue(value) == null) exp = genCall(context.helper("toDisplayString"), exp);
 		if (i > 0) exp.unshift(setText ? " + " : ", ");
 		return exp;
@@ -1508,18 +1836,10 @@ var CodegenContext = class {
 	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: []
+			filename: `index.jsx`,
+			expressionPlugins: ["jsx"],
+			templates: []
 		};
 		this.options = extend(defaultOptions$1, options);
 		this.block = ir.block;
@@ -1550,26 +1870,18 @@ function generate(ir, options = {}) {
 //#region src/transform.ts
 const defaultOptions = {
 	source: "",
-	filename: "",
-	hoistStatic: false,
-	hmr: false,
-	cacheHandlers: false,
+	sourceMap: false,
+	filename: "index.jsx",
 	nodeTransforms: [],
 	directiveTransforms: {},
 	templates: [],
-	transformHoist: null,
-	isBuiltInComponent: NOOP,
 	isCustomElement: NOOP,
 	expressionPlugins: [],
-	scopeId: null,
-	slotted: true,
-	ssr: false,
-	inSSR: false,
-	ssrCssVars: ``,
 	isTS: false,
 	withFallback: false,
-	onError: defaultOnError,
-	onWarn: defaultOnWarn
+	onError: (error) => {
+		throw error;
+	}
 };
 var TransformContext = class TransformContext {
 	parent = null;
@@ -1582,7 +1894,6 @@ var TransformContext = class TransformContext {
 	dynamic;
 	inVOnce = false;
 	inVFor = 0;
-	comment = [];
 	component;
 	directive;
 	slots = [];
@@ -1635,7 +1946,7 @@ var TransformContext = class TransformContext {
 	registerEffect(expressions, operation, getEffectIndex = () => this.block.effect.length, getOperationIndex = () => this.block.operation.length) {
 		const operations = [operation].flat();
 		expressions = expressions.filter((exp) => !isConstantExpression(exp));
-		if (this.inVOnce || expressions.length === 0 || expressions.every((e) => e.ast && isConstant(e.ast))) return this.registerOperation(operations, getOperationIndex);
+		if (this.inVOnce || expressions.length === 0 || expressions.every((e) => e.ast && isConstantNode(e.ast))) return this.registerOperation(operations, getOperationIndex);
 		this.block.effect.splice(getEffectIndex(), 0, {
 			expressions,
 			operations
@@ -1807,10 +2118,8 @@ function transformComponentElement(tag, propsResult, singleRoot, context) {
 	context.slots = [];
 }
 function transformNativeElement(tag, propsResult, singleRoot, context, getEffectIndex, getOperationIndex) {
-	const { scopeId } = context.options;
 	let template = "";
 	template += `<${tag}`;
-	if (scopeId) template += ` ${scopeId}`;
 	const dynamicProps = [];
 	if (propsResult[0]) {
 		const [, dynamicArgs, expressions] = propsResult;
@@ -1868,7 +2177,7 @@ function buildProps(node, context, isComponent) {
 			});
 			continue;
 		}
-		const result = transformProp(prop, node, context);
+		const result = transformProp(prop, node, isComponent, context);
 		if (result) {
 			dynamicExpr.push(result.key, result.value);
 			if (isComponent && !result.key.isStatic) {
@@ -1888,15 +2197,16 @@ function buildProps(node, context, isComponent) {
 	const irProps = dedupeProperties(results);
 	return [false, irProps];
 }
-function transformProp(prop, node, context) {
+function transformProp(prop, node, isComponent, context) {
 	if (prop.type === "JSXSpreadAttribute") return;
 	let name = prop.name.type === "JSXIdentifier" ? prop.name.name : prop.name.type === "JSXNamespacedName" ? prop.name.namespace.name : "";
 	name = name.split("_")[0];
-	if (!isDirectiveRegex.test(name) && !isEventRegex.test(name) && (!prop.value || prop.value.type === "StringLiteral")) {
+	let value;
+	if (!isDirectiveRegex.test(name) && !isEventRegex.test(name) && (!prop.value || (value = getTextLikeValue(prop.value, isComponent)) != null)) {
 		if (isReservedProp(name)) return;
 		return {
-			key: resolveSimpleExpression(name, true, prop.name.loc),
-			value: prop.value && prop.value.type === "StringLiteral" ? resolveSimpleExpression(prop.value.value, true, prop.value.loc) : createSimpleExpression("true", false)
+			key: createSimpleExpression(name, true, prop.name),
+			value: prop.value ? createSimpleExpression(value, true, prop.value) : createSimpleExpression("true")
 		};
 	}
 	name = isEventRegex.test(name) ? "on" : isDirectiveRegex.test(name) ? name.slice(2) : "bind";
@@ -1977,7 +2287,7 @@ function processConditionalExpression(node, context) {
 		id,
 		condition,
 		positive: branch,
-		once: context.inVOnce || isConstant(test)
+		once: context.inVOnce || isConstantNode(test)
 	};
 	return [() => {
 		onExit();
@@ -2043,7 +2353,7 @@ const transformText = (node, context) => {
 	else processInterpolation(context);
 	else if (node.type === "JSXText") {
 		const value = resolveJSXText(node);
-		if (value) context.template += value;
+		if (value) context.template += escapeHtml(value);
 		else context.dynamic.flags |= DynamicFlag.NON_TEMPLATE;
 	}
 };
@@ -2064,6 +2374,7 @@ function processInterpolation(context) {
 	if (isFragmentNode(parent) || findProp(parent, "v-slot")) context.registerOperation({
 		type: IRNodeTypes.CREATE_NODES,
 		id,
+		once: context.inVOnce,
 		values
 	});
 	else {
@@ -2071,6 +2382,7 @@ function processInterpolation(context) {
 		context.registerOperation({
 			type: IRNodeTypes.SET_NODES,
 			element: id,
+			once: context.inVOnce,
 			values
 		});
 	}
@@ -2078,7 +2390,7 @@ function processInterpolation(context) {
 function processTextContainer(children, context) {
 	const values = createTextLikeExpressions(children, context);
 	const literals = values.map(getLiteralExpressionValue);
-	if (literals.every((l) => l != null)) context.childrenTemplate = literals.map((l) => String(l));
+	if (literals.every((l) => l != null)) context.childrenTemplate = literals;
 	else {
 		context.childrenTemplate = [" "];
 		context.registerOperation({
@@ -2088,6 +2400,7 @@ function processTextContainer(children, context) {
 		context.registerOperation({
 			type: IRNodeTypes.SET_NODES,
 			element: context.reference(),
+			once: context.inVOnce,
 			values,
 			generated: true
 		});
@@ -2098,7 +2411,7 @@ function createTextLikeExpressions(nodes, context) {
 	for (const node of nodes) {
 		markNonTemplate(node, context);
 		if (isEmptyText(node)) continue;
-		values.push(resolveExpression(node, context, !context.inVOnce));
+		values.push(resolveExpression(node, context));
 	}
 	return values;
 }
@@ -2113,7 +2426,7 @@ const transformVBind = (dir, node, context) => {
 	if (!loc || name.type === "JSXNamespacedName") return;
 	const [nameString, ...modifiers] = name.name.split("_");
 	const exp = resolveExpression(value, context);
-	let arg = resolveSimpleExpression(nameString, true, dir.name.loc);
+	let arg = createSimpleExpression(nameString, true, dir.name);
 	if (arg.isStatic && isReservedProp(arg.content)) return;
 	let camel = false;
 	if (modifiers.includes("camel")) if (arg.isStatic) arg = extend({}, arg, { content: camelize(arg.content) });
@@ -2133,12 +2446,12 @@ const transformVFor = createStructuralDirectiveTransform("for", processFor);
 function processFor(node, dir, context) {
 	const { value, index, key, source } = getForParseResult(dir, context);
 	if (!source) {
-		context.options.onError(createCompilerError(ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION, resolveLocation(dir.loc, context)));
+		context.options.onError(createCompilerError(ErrorCodes.X_V_FOR_MALFORMED_EXPRESSION, dir.loc));
 		return;
 	}
 	const keyProp = findProp(node, "key");
 	const keyProperty = keyProp && propToExpression(keyProp, context);
-	const isComponent = isJSXComponent(node);
+	const isComponent = isJSXComponent(node) || isTemplateWithSingleComponent(node);
 	const id = context.reference();
 	context.dynamic.flags |= DynamicFlag.NON_TEMPLATE | DynamicFlag.INSERT;
 	const [render, exitBlock] = createBranch(node, context, true);
@@ -2155,7 +2468,7 @@ function processFor(node, dir, context) {
 			index,
 			keyProp: keyProperty,
 			render,
-			once: context.inVOnce || !!(source.ast && isConstant(source.ast)),
+			once: context.inVOnce || !!(source.ast && isConstantNode(source.ast)),
 			component: isComponent,
 			onlyChild: !!isOnlyChild
 		};
@@ -2167,13 +2480,13 @@ function getForParseResult(dir, context) {
 		if (dir.value.type === "JSXExpressionContainer" && dir.value.expression.type === "BinaryExpression") {
 			if (dir.value.expression.left.type === "SequenceExpression") {
 				const expressions = dir.value.expression.left.expressions;
-				value = expressions[0] && resolveExpressionWithFn(expressions[0], context);
+				value = expressions[0] && resolveExpression(expressions[0], context);
 				key = expressions[1] && resolveExpression(expressions[1], context);
 				index = expressions[2] && resolveExpression(expressions[2], context);
-			} else value = resolveExpressionWithFn(dir.value.expression.left, context);
+			} else value = resolveExpression(dir.value.expression.left, context);
 			source = resolveExpression(dir.value.expression.right, context);
 		}
-	} else context.options.onError(createCompilerError(ErrorCodes.X_V_FOR_NO_EXPRESSION, resolveLocation(dir.loc, context)));
+	} else context.options.onError(createCompilerError(ErrorCodes.X_V_FOR_NO_EXPRESSION, dir.loc));
 	return {
 		value,
 		index,
@@ -2181,18 +2494,21 @@ function getForParseResult(dir, context) {
 		source
 	};
 }
+function isTemplateWithSingleComponent(node) {
+	const nonCommentChildren = node.children.filter((c) => !isEmptyText(c));
+	return nonCommentChildren.length === 1 && isJSXComponent(nonCommentChildren[0]);
+}
 
 //#endregion
 //#region src/transforms/vHtml.ts
 const transformVHtml = (dir, node, context) => {
 	let exp;
-	const loc = resolveLocation(dir.loc, context);
 	if (!dir.value) {
-		context.options.onError(createDOMCompilerError(DOMErrorCodes.X_V_HTML_NO_EXPRESSION, loc));
+		context.options.onError(createCompilerError(ErrorCodes.X_V_HTML_NO_EXPRESSION, dir.loc));
 		exp = EMPTY_EXPRESSION;
 	} else exp = resolveExpression(dir.value, context);
 	if (node.children.length) {
-		context.options.onError(createDOMCompilerError(DOMErrorCodes.X_V_HTML_WITH_CHILDREN, loc));
+		context.options.onError(createCompilerError(ErrorCodes.X_V_HTML_WITH_CHILDREN, dir.loc));
 		context.childrenTemplate.length = 0;
 	}
 	context.registerEffect([exp], {
@@ -2213,9 +2529,8 @@ const transformedIfNode = /* @__PURE__ */ new WeakMap();
 function processIf(node, attribute, context) {
 	const dir = resolveDirective(attribute, context);
 	if (dir.name !== "else" && (!dir.exp || !dir.exp.content.trim())) {
-		const loc = dir.exp ? dir.exp.loc : resolveLocation(node.loc, context);
 		context.options.onError(createCompilerError(ErrorCodes.X_V_IF_NO_EXPRESSION, dir.loc));
-		dir.exp = createSimpleExpression(`true`, false, loc);
+		dir.exp = createSimpleExpression(`true`, false, dir.exp ? dir.exp.ast : node);
 	}
 	context.dynamic.flags |= DynamicFlag.NON_TEMPLATE;
 	transformedIfNode.set(node, dir);
@@ -2230,7 +2545,7 @@ function processIf(node, attribute, context) {
 				id,
 				condition: dir.exp,
 				positive: branch,
-				once: context.inVOnce || isConstant(attribute.value)
+				once: context.inVOnce || isConstantNode(attribute.value)
 			};
 		};
 	} else {
@@ -2245,12 +2560,11 @@ function processIf(node, attribute, context) {
 			}
 		}
 		if (!siblingIf || !lastIfNode || lastIfNode.type !== IRNodeTypes.IF) {
-			context.options.onError(createCompilerError(ErrorCodes.X_V_ELSE_NO_ADJACENT_IF, resolveLocation(node.loc, context)));
+			context.options.onError(createCompilerError(ErrorCodes.X_V_ELSE_NO_ADJACENT_IF, node.loc));
 			return;
 		}
 		while (lastIfNode.negative && lastIfNode.negative.type === IRNodeTypes.IF) lastIfNode = lastIfNode.negative;
-		if (dir.name === "else-if" && lastIfNode.negative) context.options.onError(createCompilerError(ErrorCodes.X_V_ELSE_NO_ADJACENT_IF, resolveLocation(node.loc, context)));
-		context.root.comment = [];
+		if (dir.name === "else-if" && lastIfNode.negative) context.options.onError(createCompilerError(ErrorCodes.X_V_ELSE_NO_ADJACENT_IF, node.loc));
 		const [branch, onExit] = createBranch(node, context);
 		if (dir.name === "else") lastIfNode.negative = branch;
 		else lastIfNode.negative = {
@@ -2286,7 +2600,7 @@ const transformVModel = (_dir, node, context) => {
 		return;
 	}
 	const expString = exp.content;
-	if (!expString.trim() || !isMemberExpression(exp, context.options)) {
+	if (!expString.trim() || !isMemberExpression(exp)) {
 		context.options.onError(createCompilerError(ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION, exp.loc));
 		return;
 	}
@@ -2297,7 +2611,7 @@ const transformVModel = (_dir, node, context) => {
 		model: true,
 		modelModifiers: dir.modifiers.map((m) => m.content)
 	};
-	if (dir.arg) context.options.onError(createDOMCompilerError(DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT, dir.arg.loc));
+	if (dir.arg) context.options.onError(createCompilerError(ErrorCodes.X_V_MODEL_ARG_ON_ELEMENT, dir.arg.loc));
 	const tag = getText(node.openingElement.name, context);
 	const isCustomElement = context.options.isCustomElement(tag);
 	let modelType = "text";
@@ -2314,7 +2628,7 @@ const transformVModel = (_dir, node, context) => {
 					break;
 				case "file":
 					modelType = void 0;
-					context.options.onError(createDOMCompilerError(DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT, dir.loc));
+					context.options.onError(createCompilerError(ErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT, dir.loc));
 					break;
 				default:
 					checkDuplicatedValue();
@@ -2324,7 +2638,7 @@ const transformVModel = (_dir, node, context) => {
 		else checkDuplicatedValue();
 	} else if (tag === "select") modelType = "select";
 	else checkDuplicatedValue();
-	else context.options.onError(createDOMCompilerError(DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT, dir.loc));
+	else context.options.onError(createCompilerError(ErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT, dir.loc));
 	if (modelType) context.registerOperation({
 		type: IRNodeTypes.DIRECTIVE,
 		element: context.reference(),
@@ -2335,7 +2649,7 @@ const transformVModel = (_dir, node, context) => {
 	});
 	function checkDuplicatedValue() {
 		const value = findProp(node, "value");
-		if (value && value.value?.type !== "StringLiteral") context.options.onError(createDOMCompilerError(DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE, resolveLocation(value.loc, context)));
+		if (value && value.value?.type !== "StringLiteral") context.options.onError(createCompilerError(ErrorCodes.X_V_MODEL_UNNECESSARY_VALUE, value.loc));
 	}
 };
 function hasDynamicKeyVBind(node) {
@@ -2350,10 +2664,10 @@ const transformVOn = (dir, node, context) => {
 	if (!name) return;
 	const isComponent = isJSXComponent(node);
 	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);
+	if (!value && !modifiers.length) context.options.onError(createCompilerError(ErrorCodes.X_V_ON_NO_EXPRESSION, loc));
+	let arg = createSimpleExpression(nameString, true, dir.name);
 	const exp = resolveExpression(dir.value, context);
-	const { keyModifiers, nonKeyModifiers, eventOptionModifiers } = resolveModifiers(arg.isStatic ? `on${nameString}` : arg, modifiers.map((modifier) => createSimpleExpression(modifier)), null, resolveLocation(loc, context));
+	const { keyModifiers, nonKeyModifiers, eventOptionModifiers } = resolveModifiers(arg.isStatic ? `on${nameString}` : arg, modifiers.map((modifier) => createSimpleExpression(modifier)));
 	let keyOverride;
 	const isStaticClick = arg.isStatic && arg.content.toLowerCase() === "click";
 	if (nonKeyModifiers.includes("middle")) {
@@ -2395,6 +2709,35 @@ const transformVOn = (dir, node, context) => {
 	};
 	context.registerEffect([arg], operation);
 };
+const isEventOptionModifier = /* @__PURE__ */ makeMap(`passive,once,capture`);
+const isNonKeyModifier = /* @__PURE__ */ makeMap("stop,prevent,self,ctrl,shift,alt,meta,exact,middle");
+const maybeKeyModifier = /* @__PURE__ */ makeMap("left,right");
+const isKeyboardEvent = /* @__PURE__ */ makeMap(`onkeyup,onkeydown,onkeypress`);
+const resolveModifiers = (key, modifiers) => {
+	const keyModifiers = [];
+	const nonKeyModifiers = [];
+	const eventOptionModifiers = [];
+	for (const modifier_ of modifiers) {
+		const modifier = modifier_.content;
+		if (isEventOptionModifier(modifier)) eventOptionModifiers.push(modifier);
+		else {
+			const keyString = isString(key) ? key : key.isStatic ? key.content : null;
+			if (maybeKeyModifier(modifier)) if (keyString) if (isKeyboardEvent(keyString.toLowerCase())) keyModifiers.push(modifier);
+			else nonKeyModifiers.push(modifier);
+			else {
+				keyModifiers.push(modifier);
+				nonKeyModifiers.push(modifier);
+			}
+			else if (isNonKeyModifier(modifier)) nonKeyModifiers.push(modifier);
+			else keyModifiers.push(modifier);
+		}
+	}
+	return {
+		keyModifiers,
+		nonKeyModifiers,
+		eventOptionModifiers
+	};
+};
 
 //#endregion
 //#region src/transforms/vOnce.ts
@@ -2408,7 +2751,7 @@ const transformVShow = (_dir, node, context) => {
 	const dir = resolveDirective(_dir, context);
 	const { exp, loc } = dir;
 	if (!exp) {
-		context.options.onError(createDOMCompilerError(DOMErrorCodes.X_V_SHOW_NO_EXPRESSION, loc));
+		context.options.onError(createCompilerError(ErrorCodes.X_V_SHOW_NO_EXPRESSION, loc));
 		return;
 	}
 	context.registerOperation({
@@ -2426,13 +2769,13 @@ const transformVSlot = (node, context) => {
 	if (node.type !== "JSXElement") return;
 	const { children } = node;
 	const dir = findProp(node, "v-slot");
-	const resolvedDirective = dir ? resolveDirective(dir, context, true) : void 0;
+	const resolvedDirective = dir ? resolveDirective(dir, context) : void 0;
 	const { parent } = context;
 	const isComponent = isJSXComponent(node);
 	const isSlotTemplate = isTemplate(node) && parent && parent.node.type === "JSXElement" && isJSXComponent(parent.node);
 	if (isComponent && children.length) return transformComponentSlot(node, resolvedDirective, context);
 	else if (isSlotTemplate && resolvedDirective) return transformTemplateSlot(node, resolvedDirective, context);
-	else if (!isComponent && dir) context.options.onError(createCompilerError(ErrorCodes.X_V_SLOT_MISPLACED, resolveLocation(dir.loc, context)));
+	else if (!isComponent && dir) context.options.onError(createCompilerError(ErrorCodes.X_V_SLOT_MISPLACED, dir.loc));
 };
 function transformComponentSlot(node, dir, context) {
 	const { children } = node;
@@ -2447,7 +2790,7 @@ function transformComponentSlot(node, dir, context) {
 			context.options.onError(createCompilerError(ErrorCodes.X_V_SLOT_MIXED_SLOT_USAGE, dir.loc));
 			return;
 		}
-		if (nonSlotTemplateChildren.length) if (hasStaticSlot(slots, "default")) context.options.onError(createCompilerError(ErrorCodes.X_V_SLOT_EXTRANEOUS_DEFAULT_SLOT_CHILDREN, resolveLocation(nonSlotTemplateChildren[0].loc, context)));
+		if (nonSlotTemplateChildren.length) if (hasStaticSlot(slots, "default")) context.options.onError(createCompilerError(ErrorCodes.X_V_SLOT_EXTRANEOUS_DEFAULT_SLOT_CHILDREN, nonSlotTemplateChildren[0].loc));
 		else {
 			registerSlot(slots, arg, block);
 			context.slots = slots;
@@ -2458,7 +2801,7 @@ function transformComponentSlot(node, dir, context) {
 const elseIfRE = /^v-else(-if)?$/;
 function transformTemplateSlot(node, dir, context) {
 	context.dynamic.flags |= DynamicFlag.NON_TEMPLATE;
-	const arg = dir.arg && resolveSimpleExpressionNode(dir.arg);
+	const arg = dir.arg;
 	const vFor = findProp(node, "v-for");
 	const vIf = findProp(node, "v-if");
 	const vElse = findProp(node, elseIfRE);
@@ -2557,18 +2900,17 @@ const transformVSlots = (dir, node, context) => {
 //#region src/transforms/vText.ts
 const transformVText = (dir, node, context) => {
 	let exp;
-	const loc = resolveLocation(dir.loc, context);
 	if (!dir.value) {
-		context.options.onError(createDOMCompilerError(DOMErrorCodes.X_V_TEXT_NO_EXPRESSION, loc));
+		context.options.onError(createCompilerError(ErrorCodes.X_V_TEXT_NO_EXPRESSION, dir.loc));
 		exp = EMPTY_EXPRESSION;
 	} else exp = resolveExpression(dir.value, context);
 	if (node.children.length) {
-		context.options.onError(createDOMCompilerError(DOMErrorCodes.X_V_TEXT_WITH_CHILDREN, loc));
+		context.options.onError(createCompilerError(ErrorCodes.X_V_TEXT_WITH_CHILDREN, dir.loc));
 		context.childrenTemplate.length = 0;
 	}
 	if (isVoidTag(getText(node.openingElement.name, context))) return;
 	const literal = getLiteralExpressionValue(exp);
-	if (literal != null) context.childrenTemplate = [String(literal)];
+	if (literal != null) context.childrenTemplate = [escapeHtml(String(literal))];
 	else {
 		context.childrenTemplate = [" "];
 		context.registerOperation({