@xaendar/compiler 0.6.4 → 0.6.6

package/dist/xaendar-compiler.es.js

@@ -55,6 +55,10 @@ var LexerState = /* @__PURE__ */ function(LexerState) {
 	*/
 	LexerState["FLOW_CONTROL_BLOCK"] = "flow-control-block";
 	/**
+	* Consuming an attribute literal value
+	*/
+	LexerState["ATTRIBUTE_VALUE"] = "attribute-value";
+	/**
 	* Dispatching between an expression or literal interpolation after `{`.
 	*/
 	LexerState["INTERPOLATION"] = "interpolation";
@@ -99,72 +103,100 @@ var TokenType = /* @__PURE__ */ function(TokenType) {
 	*/
 	TokenType[TokenType["TAG_CLOSE_NAME"] = 4] = "TAG_CLOSE_NAME";
 	/**
-	* An HTML attribute and its optional value.
+	* An HTML attribute
 	*/
 	TokenType[TokenType["ATTRIBUTE"] = 5] = "ATTRIBUTE";
 	/**
+	* An HTML attribute literal value
+	*/
+	TokenType[TokenType["ATTRIBUTE_VALUE"] = 6] = "ATTRIBUTE_VALUE";
+	/**
 	* A DOM event binding declared with `@eventName=handler`.
 	*/
-	TokenType[TokenType["EVENT"] = 6] = "EVENT";
+	TokenType[TokenType["EVENT"] = 7] = "EVENT";
 	/**
 	* A template-literal interpolation string enclosed in `` {`...`} ``.
 	*/
-	TokenType[TokenType["INTERPOLATION_LITERAL"] = 7] = "INTERPOLATION_LITERAL";
+	TokenType[TokenType["INTERPOLATION_LITERAL"] = 8] = "INTERPOLATION_LITERAL";
 	/**
 	* A JavaScript expression interpolation enclosed in `{ }`.
 	*/
-	TokenType[TokenType["INTERPOLATION_EXPRESSION"] = 8] = "INTERPOLATION_EXPRESSION";
+	TokenType[TokenType["INTERPOLATION_EXPRESSION"] = 9] = "INTERPOLATION_EXPRESSION";
 	/**
 	* A `@const name = expression;` template-level constant declaration.
 	*/
-	TokenType[TokenType["CONST_DECLARATION"] = 9] = "CONST_DECLARATION";
+	TokenType[TokenType["CONST_DECLARATION"] = 10] = "CONST_DECLARATION";
 	/**
 	* Opening keyword of an `@if` directive.
 	*/
-	TokenType[TokenType["IF"] = 10] = "IF";
+	TokenType[TokenType["IF"] = 11] = "IF";
 	/**
 	* Opening keyword of a `@for` directive.
 	*/
-	TokenType[TokenType["FOR"] = 11] = "FOR";
+	TokenType[TokenType["FOR"] = 12] = "FOR";
 	/**
 	* Opening keyword of an `@else` branch.
 	*/
-	TokenType[TokenType["ELSE"] = 12] = "ELSE";
+	TokenType[TokenType["ELSE"] = 13] = "ELSE";
 	/**
 	* Opening keyword of an `@else if` branch.
 	*/
-	TokenType[TokenType["ELSE_IF"] = 13] = "ELSE_IF";
+	TokenType[TokenType["ELSE_IF"] = 14] = "ELSE_IF";
 	/**
 	* Opening keyword of a `@switch` directive.
 	*/
-	TokenType[TokenType["SWITCH"] = 14] = "SWITCH";
+	TokenType[TokenType["SWITCH"] = 15] = "SWITCH";
 	/**
 	* Opening keyword of a `@case` branch.
 	*/
-	TokenType[TokenType["CASE"] = 15] = "CASE";
+	TokenType[TokenType["CASE"] = 16] = "CASE";
 	/**
 	* Opening keyword of a `@default` branch.
 	*/
-	TokenType[TokenType["DEFAULT"] = 16] = "DEFAULT";
+	TokenType[TokenType["DEFAULT"] = 17] = "DEFAULT";
 	/**
 	* The condition expression `(...)` associated with a flow-control directive.
 	*/
-	TokenType[TokenType["CONDITION"] = 17] = "CONDITION";
+	TokenType[TokenType["CONDITION"] = 18] = "CONDITION";
 	/**
 	* The opening `{` of a flow-control block body.
 	*/
-	TokenType[TokenType["BLOCK_OPEN"] = 18] = "BLOCK_OPEN";
+	TokenType[TokenType["BLOCK_OPEN"] = 19] = "BLOCK_OPEN";
 	/**
 	* The closing `}` of a flow-control block body.
 	*/
-	TokenType[TokenType["BLOCK_CLOSE"] = 19] = "BLOCK_CLOSE";
+	TokenType[TokenType["BLOCK_CLOSE"] = 20] = "BLOCK_CLOSE";
 	/**
 	* Sentinel token emitted when the end of the input is reached.
 	*/
-	TokenType[TokenType["EOF"] = 20] = "EOF";
+	TokenType[TokenType["EOF"] = 21] = "EOF";
 	return TokenType;
 }({});
 //#endregion
+//#region ../packages/compiler/src/lexer/states/attribute-value.state.ts
+function consumeAttributeValue(cursor, _context) {
+	let read = true;
+	let value = "";
+	let retVal;
+	while (read) switch (cursor.peek()) {
+		case 34:
+			cursor.advance();
+			read = false;
+			retVal = {
+				state: LexerState.TAG_BODY,
+				tokens: [{
+					type: TokenType.ATTRIBUTE_VALUE,
+					parts: [value]
+				}]
+			};
+			break;
+		default:
+			cursor.advance();
+			value = `${value}${cursor.currentChar.value}`;
+	}
+	return retVal;
+}
+//#endregion
 //#region ../packages/compiler/src/lexer/states/attribute.state.ts
 /**
 * Consumes an attribute name and optional value from the current position,
@@ -181,8 +213,8 @@ function consumeAttribute(cursor, _context) {
 	let retVal;
 	while (read) switch (cursor.peek()) {
 		case 32:
-		case 47:
-		case 62:
+			cursor.advance();
+			read = false;
 			retVal = {
 				state: LexerState.TAG_BODY,
 				tokens: [{
@@ -190,18 +222,23 @@ function consumeAttribute(cursor, _context) {
 					parts: [attribute]
 				}]
 			};
-			read = false;
 			break;
-		case 123:
+		case 61:
+			cursor.advance();
+			if (cursor.peek() !== 34) {
+				const { row, column } = cursor.position;
+				throw new Error(`Attribute value must start with double quotes '"'.Row ${row} Col ${column}`);
+			}
+			cursor.advance();
+			read = false;
 			retVal = {
-				state: LexerState.INTERPOLATION,
+				state: cursor.peek() === 123 ? LexerState.INTERPOLATION : LexerState.ATTRIBUTE_VALUE,
+				pushState: true,
 				tokens: [{
 					type: TokenType.ATTRIBUTE,
 					parts: [attribute]
-				}],
-				pushState: true
+				}]
 			};
-			read = false;
 			break;
 		default:
 			cursor.advance();
@@ -319,6 +356,27 @@ function consumeConstDeclaration(cursor, _context) {
 	return retVal;
 }
 //#endregion
+//#region ../packages/compiler/src/lexer/states/default-flow-control-condition.state.ts
+/**
+* Consumes the condition expression `(...)` of a flow-control directive,
+* handling nested parentheses correctly. Emits a CONDITION token with the
+* raw expression string and transitions to FLOW_CONTROL_BLOCK.
+*
+* @param cursor The lexer cursor positioned at the opening `(`.
+* @param _context Unused lexer context.
+* @returns Transition result with the CONDITION token and the FLOW_CONTROL_BLOCK state.
+*/
+function consumeDefaultFlowControlCondition(cursor, _context) {
+	return {
+		state: LexerState.FLOW_CONTROL_BLOCK,
+		tokens: [{
+			type: TokenType.CONDITION,
+			parts: [consumeFlowControlCondition(cursor, _context)]
+		}],
+		popState: true
+	};
+}
+//#endregion
 //#region ../packages/compiler/src/lexer/states/event.state.ts
 /**
 * Consumes a DOM event binding starting with `@` and reads until a delimiter
@@ -337,7 +395,6 @@ function consumeEvent(cursor, _context) {
 		case 32:
 		case 47:
 		case 62:
-			if (!event.includes("=")) event = `${event}=on${event[0].toUpperCase()}${event.slice(1)}($event)`;
 			retVal = {
 				state: LexerState.TAG_BODY,
 				tokens: [{
@@ -354,50 +411,6 @@ function consumeEvent(cursor, _context) {
 	return retVal;
 }
 //#endregion
-//#region ../packages/compiler/src/lexer/states/flow-control-block.state.ts
-/**
-* Consumes the opening `{` of a flow control block body,
-* skipping any leading whitespace before it.
-*
-* Emits a BLOCK_OPEN token and transitions to TEXT,
-* pushing FLOW_CONTROL_BLOCK onto the state stack.
-* This allows consumeText to later recognise the matching `}` as a BLOCK_CLOSE
-* rather than as an interpolation boundary.
-*
-* Used by: @if, @for, @switch, @case, @else, @default
-*/
-function consumeFlowControlBlock(cursor, _context) {
-	cursor.skipSpaces();
-	if (cursor.peek() !== 123) throw new Error(`Expected '{' but got '${String.fromCharCode(cursor.peek())}' at row ${cursor.position.row}, col ${cursor.position.column}`);
-	cursor.advance();
-	return {
-		state: LexerState.TEXT,
-		tokens: [{ type: TokenType.BLOCK_OPEN }],
-		pushState: true
-	};
-}
-//#endregion
-//#region ../packages/compiler/src/lexer/states/default-flow-control-condition.state.ts
-/**
-* Consumes the condition expression `(...)` of a flow-control directive,
-* handling nested parentheses correctly. Emits a CONDITION token with the
-* raw expression string and transitions to FLOW_CONTROL_BLOCK.
-*
-* @param cursor The lexer cursor positioned at the opening `(`.
-* @param _context Unused lexer context.
-* @returns Transition result with the CONDITION token and the FLOW_CONTROL_BLOCK state.
-*/
-function consumeDefaultFlowControlCondition(cursor, _context) {
-	return {
-		state: LexerState.FLOW_CONTROL_BLOCK,
-		tokens: [{
-			type: TokenType.CONDITION,
-			parts: [consumeFlowControlCondition(cursor, _context)]
-		}],
-		popState: true
-	};
-}
-//#endregion
 //#region ../packages/compiler/src/lexer/states/flow-control.ts
 /**
 * Dispatches on a `@keyword` to determine which flow-control directive begins here.
@@ -465,6 +478,29 @@ function consumeFlowControl(cursor, _context) {
 	return retVal;
 }
 //#endregion
+//#region ../packages/compiler/src/lexer/states/flow-control-block.state.ts
+/**
+* Consumes the opening `{` of a flow control block body,
+* skipping any leading whitespace before it.
+*
+* Emits a BLOCK_OPEN token and transitions to TEXT,
+* pushing FLOW_CONTROL_BLOCK onto the state stack.
+* This allows consumeText to later recognise the matching `}` as a BLOCK_CLOSE
+* rather than as an interpolation boundary.
+*
+* Used by: @if, @for, @switch, @case, @else, @default
+*/
+function consumeFlowControlBlock(cursor, _context) {
+	cursor.skipSpaces();
+	if (cursor.peek() !== 123) throw new Error(`Expected '{' but got '${String.fromCharCode(cursor.peek())}' at row ${cursor.position.row}, col ${cursor.position.column}`);
+	cursor.advance();
+	return {
+		state: LexerState.TEXT,
+		tokens: [{ type: TokenType.BLOCK_OPEN }],
+		pushState: true
+	};
+}
+//#endregion
 //#region ../packages/compiler/src/lexer/states/interpolation-expression.state.ts
 /**
 * Consumes a JavaScript expression interpolation `{ expression }`, tracking nested
@@ -494,8 +530,11 @@ function consumeInterpolationExpression(cursor, context) {
 				let state;
 				switch (previousState) {
 					case LexerState.ATTRIBUTE:
-						const lastToken = context.tokens[context.tokens.length - 1];
-						if (lastToken?.type === TokenType.ATTRIBUTE && !lastToken.parts[0]) lastToken.parts[0] = `${interpolation}=`;
+						if (cursor.peek() !== 34) {
+							const { row, column } = cursor.position;
+							throw new Error(`Interpolation must be end with double quotes '"' Found ${String.fromCharCode(cursor.peek())}. \nRow ${row} Col ${column}`);
+						}
+						cursor.advance();
 						state = LexerState.TAG_BODY;
 						break;
 					case LexerState.TEXT: state = LexerState.TEXT;
@@ -1014,6 +1053,7 @@ var Lexer = class {
 		[LexerState.TAG_OPEN_END]: consumeTagOpenEnd,
 		[LexerState.TAG_CLOSE]: consumeTagClose,
 		[LexerState.ATTRIBUTE]: consumeAttribute,
+		[LexerState.ATTRIBUTE_VALUE]: consumeAttributeValue,
 		[LexerState.FLOW_CONTROL]: consumeFlowControl,
 		[LexerState.FLOW_CONTROL_CONDITION]: consumeDefaultFlowControlCondition,
 		[LexerState.CASE_FLOW_CONTROL_CONDITION]: consumeCaseFlowControlCondition,
@@ -1415,22 +1455,21 @@ function parseInterpolation(cursor, _parseNode, token) {
 */
 function parseAttribute(cursor, parseNode, token) {
 	cursor.advance();
-	const raw = token.parts[0];
-	if (!raw.includes("=")) return {
-		name: raw,
+	const name = token.parts[0];
+	const nextToken = cursor.peek();
+	if (nextToken.type === TokenType.ATTRIBUTE || nextToken.type === TokenType.TAG_CLOSE_NAME || nextToken.type === TokenType.EVENT) return {
+		name,
 		value: "true"
 	};
-	const [name, value] = raw.split("=");
-	if (!name) throw new Error(`[Parser] Attribute name missing in: ${raw}`);
-	const nextToken = cursor.peek();
 	if (nextToken.type === TokenType.INTERPOLATION_EXPRESSION || nextToken.type === TokenType.INTERPOLATION_LITERAL) return {
 		name,
 		value: parseInterpolation(cursor, parseNode, nextToken)
 	};
-	if (!value) throw new Error(`[Parser] Attribute value missing for ${name} in: ${raw}`);
+	if (nextToken.type !== TokenType.ATTRIBUTE_VALUE) throw new Error(`[Parser] Attribute value missing for ${name} in: ${name}`);
+	cursor.advance();
 	return {
 		name,
-		value: value.replace(/^['']|['']$/g, "")
+		value: nextToken.parts[0]
 	};
 }
 //#endregion
@@ -2189,6 +2228,9 @@ function getElementIdentifier(node, parentNode, index) {
 function getTextIdentifier(parentNode, index, prefix = "text") {
 	return (parentNode !== "this._root" ? `${parentNode}_${prefix}${index}` : `${prefix}${index}`).replace(/-/g, "_");
 }
+function getBlockIdentifier(parentNode, index, prefix) {
+	return (parentNode !== "this._root" ? `${parentNode}_${prefix}${index}` : `${prefix}${index}`).replace(/-/g, "_");
+}
 //#endregion
 //#region ../packages/compiler/src/render-generator/states/process-const-declaration.state.ts
 /**
@@ -2242,10 +2284,19 @@ function processElement(node, nodeName, parentNode, context) {
 * @returns Array of generated code lines, one per attribute.
 */
 function mapAttributes(attributes, nodeName, context) {
-	return attributes?.map((attr) => {
-		const value = attr.value;
-		return typeof value === "string" ? `${nodeName}.setAttribute('${attr.name}', ${value});` : `unwatchFns.push(effect(() => ${nodeName}.setAttribute('${attr.name}', ${resolveExpression(value.expression, context)})));`;
-	}) ?? [];
+	const literalsAttributes = new Array();
+	const bindingsAttributes = new Array();
+	attributes?.forEach(({ name, value }) => typeof value === "string" ? literalsAttributes.push({
+		name,
+		value
+	}) : bindingsAttributes.push({
+		name,
+		value
+	}));
+	const mappedAttributes = literalsAttributes.map((attr) => `${nodeName}.setAttribute("${attr.name}", "${attr.value}");`);
+	const mappedBindingAttributes = bindingsAttributes.map((attr) => `effect(() => ${nodeName}.setAttribute("${attr.name}", ${resolveExpression(attr.value.expression, context)})),`);
+	if (mappedBindingAttributes.length) mappedAttributes.push(`unwatchFns.push(`, ...indent(mappedBindingAttributes), `);`);
+	return mappedAttributes;
 }
 /**
 * Generates code that attaches event listeners to a DOM element.
@@ -2313,19 +2364,12 @@ function processFor(node, nodeName, parentNode, parentContext) {
 		evenName,
 		oddName
 	], parentContext);
-	functionsToProcess.set(`for_${nodeName}`, {
-		code: [
-			`const ${node.itemAlias} = ${itemsName}[${counterName}];`,
-			`const ${indexName} = ${counterName};`,
-			`const ${firstName} = ${counterName} === 0;`,
-			`const ${lastName} = ${counterName} === ${itemsName}.length - 1;`,
-			`const ${evenName} = ${counterName} % 2 === 0;`,
-			`const ${oddName} = !${evenName};`,
-			...node.children.flatMap((child, i) => processNode(child, `${nodeName}_${i}`, parentNode, forContext))
-		],
+	const forKey = getBlockIdentifier(parentNode, nodeName, "for");
+	functionsToProcess.set(forKey, {
+		code: [`const { ${node.itemAlias}, ${indexName}, ${firstName}, ${lastName}, ${evenName}, ${oddName} } = _iterationVariables(${itemsName}, ${counterName});`, ...node.children.flatMap((child, i) => processNode(child, `${nodeName}_${i}`, parentNode, forContext))],
 		args: [itemsName, counterName]
 	});
-	mainBlock.push("(() => {", ...indent("let localUnwatchFns = [];", "const unwatch = () => {", ...indent("unwatchFns = unwatchFns.filter(fn => !localUnwatchFns.includes(fn));", "localUnwatchFns?.forEach(fn => fn());", "localUnwatchFns = [];"), "};", "unwatchFns.push(", ...indent("effect(() => {", ...indent("unwatch();", `const ${itemsName} = ${iterableExpr};`, "Signal.subtle.untrack(() => {", ...indent(`for (let ${counterName} = 0; ${counterName} < ${itemsName}.length; ${counterName}++) {`, ...indent(`localUnwatchFns.push(...this.for_${nodeName}(${itemsName}, ${counterName}));`, "unwatchFns.push(...localUnwatchFns);"), "}"), "});"), "})"), ");"), "})();");
+	mainBlock.push(`_for(unwatchFns, () => ${iterableExpr}, this.${forKey}.bind(this));`);
 	return {
 		mainBlock,
 		fns: functionsToProcess
@@ -2362,31 +2406,42 @@ function processIf(node, nodeName, parentNode, context) {
 	const ifContext = new Context([], context);
 	const functionsToProcess = /* @__PURE__ */ new Map();
 	const mainBlock = new Array();
-	const ifKey = `if_${nodeName}`;
-	mainBlock.push(`if (${resolveExpression(node.conditionNode, context)}) {`, ...indent(`checkAndUpdateState(0, this.${ifKey}.bind(this));`), "}");
+	const ifKey = getBlockIdentifier(parentNode, nodeName, "if");
+	mainBlock.push({
+		condition: resolveExpression(node.conditionNode, context),
+		block: `this.${ifKey}.bind(this)`
+	});
 	functionsToProcess.set(ifKey, processConsequent(node, nodeName, parentNode, ifContext));
 	let alt = node.alternate;
 	let index = 0;
 	while (alt?.type === ASTNodeType.ElseIf) {
 		const elseIfContext = new Context([], context);
-		const keyElseIf = `elseIf_${nodeName}_${index}`;
-		mainBlock[mainBlock.length - 1] += ` else if (${resolveExpression(alt.conditionNode, context)}) {`;
-		mainBlock.push(...indent(`checkAndUpdateState(${++index}, this.${keyElseIf}.bind(this));`), "}");
+		const keyElseIf = getBlockIdentifier(parentNode, `${nodeName}_${index}`, "elseIf");
+		const conditionNode = alt.conditionNode;
+		mainBlock.push({
+			condition: resolveExpression(conditionNode, context),
+			block: `this.${keyElseIf}.bind(this)`
+		});
 		functionsToProcess.set(keyElseIf, processConsequent(alt, nodeName, parentNode, elseIfContext));
 		alt = alt.alternate;
 	}
 	if (alt) {
 		const elseContext = new Context([], context);
-		const keyElse = `else_${nodeName}`;
-		mainBlock[mainBlock.length - 1] += " else {";
-		mainBlock.push(...indent(`checkAndUpdateState(${++index}, this.${keyElse}.bind(this));`), "}");
+		const keyElse = getBlockIdentifier(parentNode, nodeName, "else");
+		mainBlock.push({ block: `this.${keyElse}.bind(this)` });
 		functionsToProcess.set(keyElse, processConsequent(alt, nodeName, parentNode, elseContext));
 	}
 	return {
 		mainBlock: [
-			"(() => {",
-			...indent("let state;", "let localUnwatchFns = []", "const checkAndUpdateState = (newState, fn) => {", ...indent("if (state === newState) {", ...indent("return;"), "}", "state = newState;", "unwatch();", "localUnwatchFns = Signal.subtle.untrack(fn);", "unwatchFns.push(...localUnwatchFns);"), "};", "const unwatch = () => {", ...indent("unwatchFns = unwatchFns.filter(fn => !localUnwatchFns.includes(fn));", "localUnwatchFns?.forEach(fn => fn());", "localUnwatchFns = [];"), "}", "unwatchFns.push(", ...indent("effect(() => {", ...indent(...mainBlock), "})"), ");"),
-			"})();"
+			"_if(unwatchFns, [",
+			...indent(mainBlock.map(({ condition, block }) => {
+				return [
+					"{",
+					...indent(condition ? [`condition: ${condition.toString()},`, `block: ${block.toString()}`] : [`block: ${block.toString()}`]),
+					"},"
+				];
+			}).flat()),
+			"])"
 		],
 		fns: functionsToProcess
 	};
@@ -2398,31 +2453,38 @@ function processConsequent(node, nodeName, parentNode, context) {
 //#region ../packages/compiler/src/render-generator/states/process-switch.state.ts
 /**
 * Generates code for a `@switch` node.
-* Emits a `switch (expression) { case ...: { ... break; } ... }` block.
+* Emits a `_switch(unwatchFns, () => expression, [...])` call that delegates
+* to the reactive `_switch` runtime utility.
 *
 * @param node The `SwitchNode` to process.
 * @param nodeName Base variable name prefix for child nodes.
 * @param parentNode Variable name of the parent DOM node.
 * @param context Current render scope context.
-* @param processNode Recursive node processor function.
 * @returns Array of generated code lines.
 */
 function processSwitch(node, nodeName, parentNode, context) {
-	const mainBlock = new Array();
 	const functionsToProcess = /* @__PURE__ */ new Map();
-	mainBlock.push(`switch (${resolveExpression(node.expression, context)}) {`);
+	const blocks = new Array();
 	node.cases.forEach((caseNode, i) => {
 		const caseContext = new Context([], context);
-		const caseName = caseNode.condition ? `case_${nodeName}_${i}` : `default_${nodeName}`;
+		const caseName = caseNode.condition ? getBlockIdentifier(parentNode, `${nodeName}_${i}`, "case") : getBlockIdentifier(parentNode, nodeName, "default");
 		functionsToProcess.set(caseName, caseNode.children.map((child, i) => processNode(child, `${nodeName}_${i}_${i}`, parentNode, caseContext)).flat());
-		mainBlock.push(...indent(...!caseNode.condition ? ["default: {"] : caseNode.condition.map((cond, i, arr) => `case ${cond}:${i === arr.length - 1 ? " {" : ""}`), ...indent(`localUnwatchFns = Signal.subtle.untrack(this.${caseName}.bind(this));`, "unwatchFns.push(...localUnwatchFns);", "break;"), "}"));
+		blocks.push({
+			condition: caseNode.condition,
+			block: `this.${caseName}.bind(this)`
+		});
 	});
-	mainBlock.push("}");
 	return {
 		mainBlock: [
-			"(() => {",
-			...indent("let localUnwatchFns = []", "const unwatch = () => {", ...indent("unwatchFns = unwatchFns.filter(fn => !localUnwatchFns.includes(fn));", "localUnwatchFns?.forEach(fn => fn());", "localUnwatchFns = [];"), "}", "unwatchFns.push(", ...indent("effect(() => {", ...indent("unwatch();", ...mainBlock), "})"), ");"),
-			"})();"
+			`_switch(unwatchFns, () => ${resolveExpression(node.expression, context)}, [`,
+			...indent(blocks.map(({ condition, block }) => {
+				return [
+					"{",
+					...indent(condition ? [`condition: [${condition.join(", ")}],`, `block: ${block}`] : [`condition: null,`, `block: ${block}`]),
+					"},"
+				];
+			}).flat()),
+			"])"
 		],
 		fns: functionsToProcess
 	};
@@ -2461,12 +2523,24 @@ function generateRenderFunction(ast, cssVariableName) {
 	nodeToProcess.clear();
 	const context = new Context();
 	const renderFunctions = ["_render() {"];
-	if (cssVariableName) renderFunctions.push(...indent(`this._root.adoptedStyleSheets = [${cssVariableName}];`));
-	renderFunctions.push(...indent("let unwatchFns = [];", ...indent(...ast.map((node, i) => [...processNode(node, i.toString(), ROOT_NODE, context)]).flat()), "return unwatchFns;"), "}");
+	if (cssVariableName) renderFunctions.push(indent(`this._root.adoptedStyleSheets = [${cssVariableName}];`));
+	renderFunctions.push(...indent([
+		"let unwatchFns = [];",
+		...ast.map((node, i) => [...processNode(node, i.toString(), ROOT_NODE, context)]).flat(),
+		"return unwatchFns;"
+	]), "}");
 	while (nodeToProcess.size > 0) {
 		const [key, fnData] = nodeToProcess.entries().next().value;
-		if ("args" in fnData) renderFunctions.push(`${key}(${fnData.args.join(", ")}) {`, ...indent("let unwatchFns = [];", ...indent(...fnData.fn(...fnData.args)), "return unwatchFns;"), "}");
-		else renderFunctions.push(`${key}() {`, ...indent("let unwatchFns = [];", ...indent(...fnData.fn()), "return unwatchFns;", "}"));
+		if ("args" in fnData) renderFunctions.push(`${key}(${fnData.args.join(", ")}) {`, ...indent([
+			"let unwatchFns = [];",
+			...fnData.fn(...fnData.args),
+			"return unwatchFns;"
+		]), "}");
+		else renderFunctions.push(`${key}() {`, ...indent([
+			"let unwatchFns = [];",
+			...fnData.fn(),
+			"return unwatchFns;"
+		]), "}");
 		nodeToProcess.delete(key);
 	}
 	return renderFunctions.join("\n");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaendar/compiler",
-  "version": "0.6.4",
+  "version": "0.6.6",
   "description": "A library for transpiling Xaendar Templates into JavaScript code",
   "sideEffects": false,
   "type": "module",
@@ -16,8 +16,8 @@
     }
   },
   "dependencies": {
-    "@xaendar/common": "0.6.4",
-    "@xaendar/types": "0.6.4",
+    "@xaendar/common": "0.6.6",
+    "@xaendar/types": "0.6.6",
     "typescript": "^6.0.3"
   }
 }