@zeus-js/compiler 0.1.0-beta.7 → 0.1.0-beta.9

package/dist/compiler.esm-bundler.js

@@ -1,11 +1,14 @@
 /**
-* compiler v0.1.0-beta.7
+* compiler v0.1.0-beta.9
 * (c) 2026 baicie
 * Released under the MIT License.
 **/
 import { declare } from "@babel/helper-plugin-utils";
 import { extend } from "@zeus-js/shared";
 import * as t from "@babel/types";
+import { parseExpression } from "@babel/parser";
+import { attrBindingIR, componentIR, dynamicTextIR, elementIR, eventBindingIR, expressionIR, forIR, fragmentIR, hostIR, id, identifierIR, propBindingIR, ref, refBindingIR, showIR, slotIR, staticAttrIR, textIR } from "@zeus-js/compiler-shared";
+export * from "@zeus-js/compiler-shared";
 //#region packages/core/compiler/src/codegen/support/imports.ts
 /**
 * Runtime helpers registration and program injection.
@@ -239,6 +242,37 @@ function createProgramVisitor(config) {
 	};
 }
 //#endregion
+//#region packages/core/compiler/src/adapters/babel/expression.ts
+function lowerExpressionIR(path) {
+	return expressionIR(path.toString(), sourceSpanFromBabelNode(path.node));
+}
+function expressionIRFromCode(code, node) {
+	return expressionIR(code, sourceSpanFromBabelNode(node));
+}
+function parseExpressionIR(expression) {
+	return parseExpression(expression.code, {
+		sourceType: "module",
+		plugins: ["typescript", "jsx"]
+	});
+}
+function sourceSpanFromBabelNode(node) {
+	if (!(node === null || node === void 0 ? void 0 : node.loc)) return void 0;
+	return {
+		start: sourcePosition(node.loc.start.line, node.loc.start.column, node.start),
+		end: sourcePosition(node.loc.end.line, node.loc.end.column, node.end)
+	};
+}
+function sourcePosition(line, column, offset) {
+	return typeof offset === "number" ? {
+		line,
+		column,
+		offset
+	} : {
+		line,
+		column
+	};
+}
+//#endregion
 //#region packages/core/compiler/src/codegen/dom/emitBinding.ts
 function emitBindings(node, context) {
 	const statements = [];
@@ -269,7 +303,7 @@ function emitRawTextValue(children) {
 	const values = children.flatMap((child) => {
 		switch (child.kind) {
 			case "Text": return [t.stringLiteral(child.value)];
-			case "DynamicText": return [child.expr];
+			case "DynamicText": return [parseExpressionIR(child.expr)];
 			case "Fragment": return [emitRawTextValue(child.children)];
 			default: return [];
 		}
@@ -292,12 +326,12 @@ function emitChildBinding(node, context) {
 }
 function emitAttrBinding(target, binding, context) {
 	const name = normalizeAttrName(binding.name);
-	if (name === "class") return t.expressionStatement(t.callExpression(context.importRuntime("bindClass"), [t.identifier(target.ref.name), emitGetter(binding.expr)]));
-	if (name === "style") return t.expressionStatement(t.callExpression(context.importRuntime("bindStyle"), [t.identifier(target.ref.name), emitGetter(binding.expr)]));
+	if (name === "class") return t.expressionStatement(t.callExpression(context.importRuntime("bindClass"), [t.identifier(target.ref.name), emitGetter(parseExpressionIR(binding.expr))]));
+	if (name === "style") return t.expressionStatement(t.callExpression(context.importRuntime("bindStyle"), [t.identifier(target.ref.name), emitGetter(parseExpressionIR(binding.expr))]));
 	return t.expressionStatement(t.callExpression(context.importRuntime("bindAttr"), [
 		t.identifier(target.ref.name),
 		t.stringLiteral(name),
-		emitGetter(binding.expr)
+		emitGetter(parseExpressionIR(binding.expr))
 	]));
 }
 function normalizeAttrName(name) {
@@ -308,7 +342,7 @@ function emitEventBinding(target, binding, context) {
 	return t.expressionStatement(t.callExpression(context.importRuntime("bindEvent"), [
 		t.identifier(target.ref.name),
 		t.stringLiteral(binding.eventName),
-		normalizeEventHandler(binding.handler, context)
+		normalizeEventHandler(parseExpressionIR(binding.handler), context)
 	]));
 }
 function normalizeEventHandler(handler, context) {
@@ -322,7 +356,7 @@ function emitPropBinding(target, binding, context) {
 	return t.expressionStatement(t.callExpression(context.importRuntime("bindProp"), [
 		t.identifier(target.ref.name),
 		t.stringLiteral(binding.name),
-		emitGetter(binding.expr)
+		emitGetter(parseExpressionIR(binding.expr))
 	]));
 }
 function emitGetter(expr) {
@@ -330,12 +364,13 @@ function emitGetter(expr) {
 	return t.arrowFunctionExpression([], expr);
 }
 function emitRefBinding(target, binding, context) {
-	return t.expressionStatement(t.callExpression(context.importRuntime("bindRef"), [t.identifier(target.ref.name), binding.expr]));
+	return t.expressionStatement(t.callExpression(context.importRuntime("bindRef"), [t.identifier(target.ref.name), parseExpressionIR(binding.expr)]));
 }
 function emitDynamicText(node, context) {
 	if (!node.domPath || node.domPath.kind !== "Marker") return [];
 	const textRef = context.uid("text$");
-	if (node.once) return [t.variableDeclaration("const", [t.variableDeclarator(textRef, t.callExpression(t.memberExpression(t.identifier("document"), t.identifier("createTextNode")), [t.callExpression(t.identifier("String"), [node.expr])]))]), t.expressionStatement(t.callExpression(context.importRuntime("insert"), [
+	const expression = parseExpressionIR(node.expr);
+	if (node.once) return [t.variableDeclaration("const", [t.variableDeclarator(textRef, t.callExpression(t.memberExpression(t.identifier("document"), t.identifier("createTextNode")), [t.callExpression(t.identifier("String"), [expression])]))]), t.expressionStatement(t.callExpression(context.importRuntime("insert"), [
 		t.identifier(node.domPath.parent.name),
 		textRef,
 		t.identifier(node.ref.name)
@@ -347,7 +382,7 @@ function emitDynamicText(node, context) {
 			textRef,
 			t.identifier(node.ref.name)
 		])),
-		t.expressionStatement(t.callExpression(context.importRuntime("bindText"), [textRef, t.arrowFunctionExpression([], node.expr)]))
+		t.expressionStatement(t.callExpression(context.importRuntime("bindText"), [textRef, t.arrowFunctionExpression([], expression)]))
 	];
 }
 function emitComponentInsert(node, context) {
@@ -580,7 +615,7 @@ function emitFragment(node, context) {
 function emitNodeExpression(node, context) {
 	switch (node.kind) {
 		case "Text": return t.stringLiteral(node.value);
-		case "DynamicText": return node.expr;
+		case "DynamicText": return parseExpressionIR(node.expr);
 		case "Element": return emitElement(node, context);
 		case "Component": return emitComponent(node, context);
 		case "Fragment": return emitFragment(node, context);
@@ -595,13 +630,14 @@ function emitNodeExpression(node, context) {
 //#region packages/core/compiler/src/codegen/dom/emitComponent.ts
 function emitComponent(node, context) {
 	const props = t.objectExpression(node.props.map((prop) => emitComponentProp(prop, context)));
-	return t.callExpression(context.importRuntime("createComponent"), [node.callee, props]);
+	return t.callExpression(context.importRuntime("createComponent"), [parseExpressionIR(node.callee), props]);
 }
 function emitComponentProp(prop, context) {
 	const key = createObjectKey$1(prop.name);
 	if (Array.isArray(prop.value)) return t.objectMethod("get", key, [], t.blockStatement([t.returnStatement(emitChildrenProp(prop.value, context))]));
-	if (isStaticPropValue(prop.value)) return t.objectProperty(key, prop.value);
-	return t.objectMethod("get", key, [], t.blockStatement([t.returnStatement(prop.value)]));
+	const value = parseExpressionIR(prop.value);
+	if (isStaticPropValue(value)) return t.objectProperty(key, value);
+	return t.objectMethod("get", key, [], t.blockStatement([t.returnStatement(value)]));
 }
 function emitChildrenProp(children, context) {
 	const nodes = children.map((child) => emitNodeExpression(child, context));
@@ -617,8 +653,8 @@ function createObjectKey$1(key) {
 //#endregion
 //#region packages/core/compiler/src/codegen/dom/emitBuiltin.ts
 function emitShow(node, context) {
-	const props = [t.objectProperty(t.identifier("when"), node.when), t.objectProperty(t.identifier("children"), t.arrowFunctionExpression([], emitChildrenProp(node.children, context)))];
-	if (node.fallback) props.push(t.objectProperty(t.identifier("fallback"), Array.isArray(node.fallback) ? t.arrowFunctionExpression([], emitChildrenProp(node.fallback, context)) : node.fallback));
+	const props = [t.objectProperty(t.identifier("when"), parseExpressionIR(node.when)), t.objectProperty(t.identifier("children"), t.arrowFunctionExpression([], emitChildrenProp(node.children, context)))];
+	if (node.fallback) props.push(t.objectProperty(t.identifier("fallback"), Array.isArray(node.fallback) ? t.arrowFunctionExpression([], emitChildrenProp(node.fallback, context)) : parseExpressionIR(node.fallback)));
 	return t.callExpression(context.importRuntime("createComponent"), [context.importRuntime("Show"), t.objectExpression(props)]);
 }
 function emitMountShow(node, context) {
@@ -627,29 +663,28 @@ function emitMountShow(node, context) {
 	return t.callExpression(context.importRuntime("mountShow"), [
 		t.identifier(path.parent.name),
 		emitMarkerIdentifier(node),
-		t.arrowFunctionExpression([], node.when),
+		t.arrowFunctionExpression([], parseExpressionIR(node.when)),
 		t.arrowFunctionExpression([], emitChildrenProp(node.children, context)),
-		node.fallback ? Array.isArray(node.fallback) ? t.arrowFunctionExpression([], emitChildrenProp(node.fallback, context)) : t.arrowFunctionExpression([], node.fallback) : t.identifier("undefined")
+		node.fallback ? Array.isArray(node.fallback) ? t.arrowFunctionExpression([], emitChildrenProp(node.fallback, context)) : t.arrowFunctionExpression([], parseExpressionIR(node.fallback)) : t.identifier("undefined")
 	]);
 }
 function emitFor(node, context) {
-	const params = [node.item];
-	if (node.index) params.push(node.index);
-	const props = [t.objectProperty(t.identifier("each"), node.each), t.objectProperty(t.identifier("children"), t.arrowFunctionExpression(params, emitChildrenProp(node.body, context)))];
-	if (node.by) props.push(t.objectProperty(t.identifier("by"), node.by));
+	const params = [t.identifier(node.item.name)];
+	if (node.index) params.push(t.identifier(node.index.name));
+	const props = [t.objectProperty(t.identifier("each"), parseExpressionIR(node.each)), t.objectProperty(t.identifier("children"), t.arrowFunctionExpression(params, emitChildrenProp(node.body, context)))];
+	if (node.by) props.push(t.objectProperty(t.identifier("by"), parseExpressionIR(node.by)));
 	return t.callExpression(context.importRuntime("createComponent"), [context.importRuntime("For"), t.objectExpression(props)]);
 }
 function emitMountFor(node, context) {
-	var _node$by;
-	const params = [node.item];
-	if (node.index) params.push(node.index);
+	const params = [t.identifier(node.item.name)];
+	if (node.index) params.push(t.identifier(node.index.name));
 	const path = node.domPath;
 	if (!path || path.kind !== "Marker") throw new Error("For DOM path is not assigned");
 	return t.callExpression(context.importRuntime("mountFor"), [
 		t.identifier(path.parent.name),
 		emitMarkerIdentifier(node),
-		t.arrowFunctionExpression([], node.each),
-		(_node$by = node.by) !== null && _node$by !== void 0 ? _node$by : t.identifier("undefined"),
+		t.arrowFunctionExpression([], parseExpressionIR(node.each)),
+		node.by ? parseExpressionIR(node.by) : t.identifier("undefined"),
 		t.arrowFunctionExpression(params, emitChildrenProp(node.body, context))
 	]);
 }
@@ -665,8 +700,9 @@ function buildHostProps(node, context) {
 	const props = [];
 	for (const attr of node.attrs) {
 		const key = createObjectKey(attr.name);
-		if (isStaticValue(attr.expr) || isGetterExpression(attr.expr)) props.push(t.objectProperty(key, attr.expr));
-		else props.push(t.objectProperty(key, t.arrowFunctionExpression([], attr.expr)));
+		const expression = parseExpressionIR(attr.expr);
+		if (isStaticValue(expression) || isGetterExpression(expression)) props.push(t.objectProperty(key, expression));
+		else props.push(t.objectProperty(key, t.arrowFunctionExpression([], expression)));
 	}
 	return props;
 }
@@ -696,7 +732,7 @@ function emitDOM(node, context) {
 		case "For": return emitFor(node, context);
 		case "Host": return emitHost(node, context);
 		case "Slot": return emitSlot(node, context);
-		case "DynamicText": return t.arrowFunctionExpression([], node.expr);
+		case "DynamicText": return t.arrowFunctionExpression([], parseExpressionIR(node.expr));
 		default: throw new Error(`Unsupported root IR node: ${node.kind}`);
 	}
 }
@@ -792,203 +828,6 @@ var CompilerError = class extends Error {
 	}
 };
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
-function _typeof(o) {
-	"@babel/helpers - typeof";
-	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
-		return typeof o;
-	} : function(o) {
-		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-	}, _typeof(o);
-}
-//#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPrimitive.js
-function toPrimitive(t, r) {
-	if ("object" != _typeof(t) || !t) return t;
-	var e = t[Symbol.toPrimitive];
-	if (void 0 !== e) {
-		var i = e.call(t, r || "default");
-		if ("object" != _typeof(i)) return i;
-		throw new TypeError("@@toPrimitive must return a primitive value.");
-	}
-	return ("string" === r ? String : Number)(t);
-}
-//#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPropertyKey.js
-function toPropertyKey(t) {
-	var i = toPrimitive(t, "string");
-	return "symbol" == _typeof(i) ? i : i + "";
-}
-//#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/defineProperty.js
-function _defineProperty(e, r, t) {
-	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-		value: t,
-		enumerable: !0,
-		configurable: !0,
-		writable: !0
-	}) : e[r] = t, e;
-}
-//#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/objectSpread2.js
-function ownKeys(e, r) {
-	var t = Object.keys(e);
-	if (Object.getOwnPropertySymbols) {
-		var o = Object.getOwnPropertySymbols(e);
-		r && (o = o.filter(function(r) {
-			return Object.getOwnPropertyDescriptor(e, r).enumerable;
-		})), t.push.apply(t, o);
-	}
-	return t;
-}
-function _objectSpread2(e) {
-	for (var r = 1; r < arguments.length; r++) {
-		var t = null != arguments[r] ? arguments[r] : {};
-		r % 2 ? ownKeys(Object(t), !0).forEach(function(r) {
-			_defineProperty(e, r, t[r]);
-		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r) {
-			Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
-		});
-	}
-	return e;
-}
-//#endregion
-//#region packages/core/compiler/src/ir/semanticBuilders.ts
-let nextId = 0;
-function id() {
-	return nextId++;
-}
-function ref(name) {
-	return { name };
-}
-function elementIR(input) {
-	var _input$attrs, _input$children;
-	return {
-		id: id(),
-		kind: "Element",
-		ref: input.ref,
-		tagName: input.tagName,
-		attrs: (_input$attrs = input.attrs) !== null && _input$attrs !== void 0 ? _input$attrs : [],
-		children: (_input$children = input.children) !== null && _input$children !== void 0 ? _input$children : [],
-		flags: _objectSpread2({
-			isSVG: false,
-			isVoid: false,
-			isCustomElement: input.tagName.includes("-")
-		}, input.flags)
-	};
-}
-function textIR(value) {
-	return {
-		id: id(),
-		kind: "Text",
-		value
-	};
-}
-function dynamicTextIR(expr, nodeRef, once = false) {
-	return {
-		id: id(),
-		kind: "DynamicText",
-		expr,
-		ref: nodeRef,
-		once
-	};
-}
-function fragmentIR(children) {
-	return {
-		id: id(),
-		kind: "Fragment",
-		children
-	};
-}
-function staticAttrIR(name, value) {
-	return {
-		id: id(),
-		kind: "StaticAttribute",
-		name,
-		value
-	};
-}
-function attrBindingIR(name, expr) {
-	return {
-		id: id(),
-		kind: "AttrBinding",
-		name,
-		expr
-	};
-}
-function propBindingIR(name, expr) {
-	return {
-		id: id(),
-		kind: "PropBinding",
-		name,
-		expr
-	};
-}
-function eventBindingIR(eventName, handler) {
-	return {
-		id: id(),
-		kind: "EventBinding",
-		eventName,
-		handler
-	};
-}
-function refBindingIR(expr) {
-	return {
-		id: id(),
-		kind: "RefBinding",
-		expr
-	};
-}
-function componentIR(input) {
-	return {
-		id: id(),
-		kind: "Component",
-		ref: input.ref,
-		callee: input.callee,
-		props: input.props
-	};
-}
-function showIR(input) {
-	return {
-		id: id(),
-		kind: "Show",
-		ref: input.ref,
-		when: input.when,
-		children: input.children,
-		fallback: input.fallback
-	};
-}
-function forIR(input) {
-	return {
-		id: id(),
-		kind: "For",
-		ref: input.ref,
-		each: input.each,
-		by: input.by,
-		item: input.item,
-		index: input.index,
-		body: input.body
-	};
-}
-function hostIR(input) {
-	return {
-		id: id(),
-		kind: "Host",
-		attrs: input.attrs,
-		child: input.child
-	};
-}
-function slotIR(input) {
-	var _input$fallback;
-	return {
-		id: id(),
-		kind: "Slot",
-		ref: input.ref,
-		name: input.name,
-		fallback: (_input$fallback = input.fallback) !== null && _input$fallback !== void 0 ? _input$fallback : []
-	};
-}
-//#endregion
 //#region packages/core/compiler/src/parse/jsx.ts
 /**
 * JSX AST parsing utilities.
@@ -1026,8 +865,8 @@ function lowerAttribute(path, _context) {
 	});
 	const node = path.node;
 	const name = getJSXAttrName(node.name);
-	const value = node.value;
-	if (!value) {
+	const value = path.get("value");
+	if (!value.node) {
 		if (name === "ref") throw new CompilerError({
 			code: CompilerErrorCode.EMPTY_EXPRESSION,
 			message: "ref attribute requires an expression.",
@@ -1036,22 +875,24 @@ function lowerAttribute(path, _context) {
 		});
 		return staticAttrIR(name, true);
 	}
-	if (t.isStringLiteral(value)) {
+	if (value.isStringLiteral()) {
 		if (name === "ref") throw new CompilerError({
 			code: CompilerErrorCode.INVALID_REF_USAGE,
 			message: "String refs are not supported in Zeus.",
 			path,
 			hint: "Use a state holder or callback ref: <div ref={el} />."
 		});
-		return staticAttrIR(name, value.value);
+		return staticAttrIR(name, value.node.value);
 	}
-	if (t.isJSXExpressionContainer(value)) {
-		const expr = value.expression;
-		if (t.isJSXEmptyExpression(expr)) throw new CompilerError({
+	if (value.isJSXExpressionContainer()) {
+		const expression = value.get("expression");
+		if (expression.isJSXEmptyExpression()) throw new CompilerError({
 			code: CompilerErrorCode.EMPTY_EXPRESSION,
 			message: `Attribute "${name}" expression cannot be empty.`,
 			path
 		});
+		if (!expression.isExpression()) return null;
+		const expr = lowerExpressionIR(expression);
 		if (name === "ref") return refBindingIR(expr);
 		if (name.startsWith("on") && name.length > 2) return eventBindingIR(toEventName(name), expr);
 		if (name.startsWith("prop:")) return propBindingIR(name.slice(5), expr);
@@ -1070,9 +911,9 @@ function lowerChildren(children, context) {
 			continue;
 		}
 		if (child.isJSXExpressionContainer()) {
-			const expr = child.node.expression;
-			if (t.isJSXEmptyExpression(expr)) continue;
-			if (t.isExpression(expr)) result.push(dynamicTextIR(expr, ref(context.uid("anchor$").name)));
+			const expression = child.get("expression");
+			if (expression.isJSXEmptyExpression()) continue;
+			if (expression.isExpression()) result.push(dynamicTextIR(lowerExpressionIR(expression), ref(context.uid("anchor$").name)));
 			continue;
 		}
 		if (child.isJSXElement() || child.isJSXFragment()) {
@@ -1128,25 +969,24 @@ function optionalShowFallbackAttr(path, context) {
 	});
 	if (!(attr === null || attr === void 0 ? void 0 : attr.isJSXAttribute())) return void 0;
 	const value = attr.get("value");
-	if (!value.node) return t.booleanLiteral(true);
-	if (value.isStringLiteral()) return value.node;
+	if (!value.node) return expressionIRFromCode("true", attr.node);
+	if (value.isStringLiteral()) return expressionIRFromCode(JSON.stringify(value.node.value), value.node);
 	if (!value.isJSXExpressionContainer()) return void 0;
 	const expression = value.get("expression");
 	if (expression.isJSXEmptyExpression()) return void 0;
 	if (expression.isJSXElement() || expression.isJSXFragment()) return [lowerJSX(expression, context)];
-	if (expression.isExpression()) return expression.node;
+	if (expression.isExpression()) return lowerExpressionIR(expression);
 }
 function lowerFor(path, context) {
-	var _getParamIdentifier;
 	const each = requiredExpressionAttr(path, "each");
 	const by = optionalExpressionAttr(path, "by");
 	const render = getOnlyRenderFunction(path);
-	const item = (_getParamIdentifier = getParamIdentifier(render, 0)) !== null && _getParamIdentifier !== void 0 ? _getParamIdentifier : t.identifier("item");
+	const item = getParamIdentifier(render, 0, "item");
 	const index = getParamIdentifier(render, 1);
 	const bodyPath = render.get("body");
 	const body = [];
 	if (bodyPath.isJSXElement() || bodyPath.isJSXFragment()) body.push(lowerJSX(bodyPath, context));
-	else if (bodyPath.isExpression()) body.push(dynamicTextIR(bodyPath.node, ref(context.uid("anchor$").name)));
+	else if (bodyPath.isExpression()) body.push(dynamicTextIR(lowerExpressionIR(bodyPath), ref(context.uid("anchor$").name)));
 	return forIR({
 		ref: ref(context.uid("for$").name),
 		each,
@@ -1166,7 +1006,7 @@ function lowerSlot(path, context) {
 }
 function requiredExpressionAttr(path, name) {
 	const value = optionalExpressionAttr(path, name);
-	if (!value || Array.isArray(value)) throw new CompilerError({
+	if (!value) throw new CompilerError({
 		code: CompilerErrorCode.INVALID_BUILTIN_USAGE,
 		message: `<${getBuiltinName(path)}> requires "${name}".`,
 		path
@@ -1179,10 +1019,12 @@ function optionalExpressionAttr(path, name) {
 		return getJSXAttrName(attrPath.node.name) === name;
 	});
 	if (!(attr === null || attr === void 0 ? void 0 : attr.isJSXAttribute())) return void 0;
-	const value = attr.node.value;
-	if (!value) return t.booleanLiteral(true);
-	if (t.isStringLiteral(value)) return value;
-	if (t.isJSXExpressionContainer(value) && !t.isJSXEmptyExpression(value.expression)) return value.expression;
+	const value = attr.get("value");
+	if (!value.node) return expressionIRFromCode("true", attr.node);
+	if (value.isStringLiteral()) return expressionIRFromCode(JSON.stringify(value.node.value), value.node);
+	if (!value.isJSXExpressionContainer()) return void 0;
+	const expression = value.get("expression");
+	if (expression.isExpression()) return lowerExpressionIR(expression);
 }
 function optionalStringAttr(path, name) {
 	const attr = path.get("openingElement").get("attributes").find((attrPath) => {
@@ -1205,8 +1047,8 @@ function getOnlyRenderFunction(path) {
 }
 function getParamIdentifier(path, index, fallback) {
 	const param = path.node.params[index];
-	if (t.isIdentifier(param)) return param;
-	if (fallback) return t.identifier(fallback);
+	if (t.isIdentifier(param)) return identifierIR(param.name, sourceSpanFromBabelNode(param));
+	if (fallback) return identifierIR(fallback);
 }
 function getBuiltinName(path) {
 	const name = path.node.openingElement.name;
@@ -1246,31 +1088,34 @@ function lowerHost(path, context) {
 					id: id(),
 					kind: "HostAttr",
 					name: "ref",
-					expr: expr.node
+					expr: lowerExpressionIR(expr)
 				});
 			}
 			continue;
 		}
 		if (isEventLikeProp(name)) continue;
-		const value = node.value;
-		if (!value) attrs.push({
-			id: id(),
-			kind: "HostAttr",
-			name: normalizeHostAttrName(name),
-			expr: t.booleanLiteral(true)
-		});
-		else if (t.isStringLiteral(value)) attrs.push({
+		const value = attrPath.get("value");
+		if (!value.node) attrs.push({
 			id: id(),
 			kind: "HostAttr",
 			name: normalizeHostAttrName(name),
-			expr: t.stringLiteral(value.value)
+			expr: expressionIRFromCode("true", node)
 		});
-		else if (t.isJSXExpressionContainer(value) && !t.isJSXEmptyExpression(value.expression)) attrs.push({
+		else if (value.isStringLiteral()) attrs.push({
 			id: id(),
 			kind: "HostAttr",
 			name: normalizeHostAttrName(name),
-			expr: value.expression
+			expr: expressionIRFromCode(JSON.stringify(value.node.value), value.node)
 		});
+		else if (value.isJSXExpressionContainer()) {
+			const expression = value.get("expression");
+			if (expression.isExpression()) attrs.push({
+				id: id(),
+				kind: "HostAttr",
+				name: normalizeHostAttrName(name),
+				expr: lowerExpressionIR(expression)
+			});
+		}
 	}
 	return hostIR({
 		attrs,
@@ -1290,29 +1135,31 @@ function lowerComponent(path, context) {
 			path: attr
 		});
 		const name = getJSXAttrName(node.name);
-		if (!node.value) {
+		const value = attr.get("value");
+		if (!value.node) {
 			props.push({
 				name,
-				value: t.booleanLiteral(true)
+				value: expressionIRFromCode("true", node)
 			});
 			continue;
 		}
-		if (t.isStringLiteral(node.value)) {
+		if (value.isStringLiteral()) {
 			props.push({
 				name,
-				value: node.value
+				value: expressionIRFromCode(JSON.stringify(value.node.value), value.node)
 			});
 			continue;
 		}
-		if (t.isJSXExpressionContainer(node.value)) {
-			if (t.isJSXEmptyExpression(node.value.expression)) throw new CompilerError({
+		if (value.isJSXExpressionContainer()) {
+			const expression = value.get("expression");
+			if (expression.isJSXEmptyExpression()) throw new CompilerError({
 				code: CompilerErrorCode.EMPTY_EXPRESSION,
 				message: `Component prop "${name}" expression cannot be empty.`,
 				path: attr
 			});
-			props.push({
+			if (expression.isExpression()) props.push({
 				name,
-				value: node.value.expression
+				value: lowerExpressionIR(expression)
 			});
 		}
 	}
@@ -1328,18 +1175,20 @@ function lowerComponent(path, context) {
 	});
 }
 function convertComponentIdentifier(node) {
+	return expressionIRFromCode(componentIdentifierCode(node), node);
+}
+function componentIdentifierCode(node) {
 	if (t.isJSXIdentifier(node)) {
-		if (node.name === "this") return t.thisExpression();
-		if (t.isValidIdentifier(node.name)) return t.identifier(node.name);
-		return t.stringLiteral(node.name);
+		if (node.name === "this") return "this";
+		return t.isValidIdentifier(node.name) ? node.name : JSON.stringify(node.name);
 	}
 	if (t.isJSXMemberExpression(node)) {
-		const object = convertComponentIdentifier(node.object);
-		const property = convertComponentIdentifier(node.property);
-		return t.memberExpression(object, property, t.isStringLiteral(property));
+		const object = componentIdentifierCode(node.object);
+		const property = node.property.name;
+		return t.isValidIdentifier(property) ? `${object}.${property}` : `${object}[${JSON.stringify(property)}]`;
 	}
-	if (t.isJSXNamespacedName(node)) return t.stringLiteral(`${node.namespace.name}:${node.name.name}`);
-	return node;
+	if (t.isJSXNamespacedName(node)) return JSON.stringify(`${node.namespace.name}:${node.name.name}`);
+	return JSON.stringify("");
 }
 //#endregion
 //#region packages/core/compiler/src/lower/lowerElement.ts
@@ -1622,6 +1471,67 @@ function appendPhysicalChild(result, node) {
 	}
 }
 //#endregion
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+//#endregion
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/objectSpread2.js
+function ownKeys(e, r) {
+	var t = Object.keys(e);
+	if (Object.getOwnPropertySymbols) {
+		var o = Object.getOwnPropertySymbols(e);
+		r && (o = o.filter(function(r) {
+			return Object.getOwnPropertyDescriptor(e, r).enumerable;
+		})), t.push.apply(t, o);
+	}
+	return t;
+}
+function _objectSpread2(e) {
+	for (var r = 1; r < arguments.length; r++) {
+		var t = null != arguments[r] ? arguments[r] : {};
+		r % 2 ? ownKeys(Object(t), !0).forEach(function(r) {
+			_defineProperty(e, r, t[r]);
+		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r) {
+			Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+		});
+	}
+	return e;
+}
+//#endregion
 //#region packages/core/compiler/src/passes/validateBuiltins.ts
 function validateBuiltins(node) {
 	visit$1(node, {