@xaendar/compiler 0.6.11 → 0.6.13

package/dist/xaendar-compiler.es.js

@@ -390,23 +390,34 @@ function consumeEvent(cursor, _context) {
 	let read = true;
 	let event = "";
 	let retVal;
+	let deep = 0;
 	cursor.advance();
 	while (read) switch (cursor.peek()) {
 		case 32:
 		case 47:
 		case 62:
-			retVal = {
-				state: LexerState.TAG_BODY,
-				tokens: [{
-					type: TokenType.EVENT,
-					parts: [event]
-				}]
-			};
-			read = false;
+			if (deep === 0) {
+				retVal = {
+					state: LexerState.TAG_BODY,
+					tokens: [{
+						type: TokenType.EVENT,
+						parts: [event]
+					}]
+				};
+				read = false;
+			}
+			break;
+		case 40:
+			deep++;
+			cursor.advance();
+			break;
+		case 41:
+			deep--;
+			cursor.advance();
 			break;
 		default:
 			cursor.advance();
-			event = `${event}${cursor.currentChar.value}`;
+			if (deep === 0) event = `${event}${cursor.currentChar.value}`;
 	}
 	return retVal;
 }
@@ -1925,76 +1936,6 @@ var Parser = class {
 	}
 };
 //#endregion
-//#region ../packages/compiler/src/render-generator/states/process-const-declaration.state.ts
-/**
-* Generates code for a `@const` declaration node.
-* Emits a `const name = expression;` JavaScript statement.
-*
-* @param node The `ConstDeclarationNode` to process.
-* @param _nodeName Unused node name.
-* @param _parentNode Unused parent node name.
-* @returns Array containing the generated const statement string.
-*/
-function processConstDeclaration(node, _nodeName, _parentNode) {
-	return [`const ${node.varName} = ${node.varName};`];
-}
-//#endregion
-//#region ../packages/compiler/src/render-generator/states/process-element.state.ts
-/**
-* Generates code for an HTML element node: creates the DOM element, sets attributes,
-* attaches event listeners, appends it to the parent, and recursively processes children.
-*
-* @param node The `ElementNode` to process.
-* @param nodeName Variable name to use for the created DOM element.
-* @param parentNode Variable name of the parent DOM node to append to.
-* @returns Array of generated code lines.
-*/
-function processElement(node, nodeName, parentNode) {
-	const attributes = mapAttributes(node.attributes);
-	const events = mapEvents(node.events);
-	const code = [`_renderElement(${parentNode}, context, '${node.tagName}',`];
-	attributes.length ? code.push(...indent([
-		"[",
-		...indent(attributes),
-		"],"
-	])) : code[code.length - 1] = `${code[code.length - 1]} [],`;
-	events.length ? code.push(...indent([
-		"[",
-		...indent(events),
-		"]"
-	]), ")") : code[code.length - 1] = `${code[code.length - 1]} [])`;
-	return code;
-}
-/**
-* Generates code that assigns attributes to a DOM element.
-*
-* Static (string) attribute values are set once via a direct `setAttribute` call,
-* while dynamic attribute values are wrapped in an `effect` so the attribute is
-* re-evaluated and updated whenever its underlying signal dependencies change.
-* The disposer returned by the `effect` is registered in `unwatchFns` for cleanup.
-*
-* @param attributes The attribute nodes to map onto the element.
-* @returns Array of generated code lines, one per attribute.
-*/
-function mapAttributes(attributes) {
-	return attributes?.map(({ name, value }) => {
-		const isLiteral = typeof value === "string";
-		return `{ name: '${name}', value: '${isLiteral ? value : value.expression.text}', literal: ${isLiteral} },`;
-	});
-}
-/**
-* Generates code that attaches event listeners to a DOM element.
-*
-* For each event node an `addEventListener` call is emitted, binding the event
-* to the component instance handler and exposing the native event as `$event`.
-*
-* @param events The event nodes to bind to the element.
-* @returns Array of generated code lines, one per event listener.
-*/
-function mapEvents(events) {
-	return events?.map((event) => `{ name: '${event.name}', handler: '${event.handler}' }`);
-}
-//#endregion
 //#region ../packages/compiler/src/render-generator/utils/render-generator.utils.ts
 /**
 * Complete set of JavaScript global identifiers up to ES2026.
@@ -2192,7 +2133,7 @@ var ROOT_NODE = "root";
 *
 * @param expression - Either a raw identifier string or a validated
 *   `ts.Expression` node produced by `validateExpression`.
-* @param context - The active template scope context.
+* @param compilerContext - The active template scope context.
 * @returns The resolved expression as a JavaScript string ready for codegen.
 *
 * @example
@@ -2205,8 +2146,8 @@ var ROOT_NODE = "root";
 * // typeof id !== 'boolean' || pippo instanceof HTMLElement
 * // → typeof this.id !== 'boolean' || this.pippo instanceof HTMLElement
 */
-function resolveExpression(expression) {
-	return emitNode(expression, expression);
+function resolveExpression(expression, compilerContext) {
+	return emitNode(expression, expression, compilerContext);
 }
 /**
 * Emits the resolved text for a node.
@@ -2217,13 +2158,14 @@ function resolveExpression(expression) {
 * - If the node is a resolvable Identifier, emits the resolved name.
 * - Otherwise recurses into children and concatenates their output.
 */
-function emitNode(node, parent) {
+function emitNode(node, parent, compilerContext) {
+	if (ts.isIdentifier(node) && needsResolution(node, parent)) return compilerContext.hasIdentifier(node.text) ? node.text : `this.${node.text}`;
 	if (!containsResolvableIdentifier(node, parent)) return node.getText();
 	const sourceText = node.getSourceFile().text;
 	let result = "";
 	let lastEnd = node.getStart();
 	ts.forEachChild(node, (child) => {
-		result = `${result}${sourceText.slice(lastEnd, child.getStart())}${emitNode(child, node)}`;
+		result = `${result}${sourceText.slice(lastEnd, child.getStart())}${emitNode(child, node, compilerContext)}`;
 		lastEnd = child.getEnd();
 	});
 	return `${result}${sourceText.slice(lastEnd, node.getEnd())}`;
@@ -2268,6 +2210,114 @@ function getBlockIdentifier(parentNode, index, prefix) {
 	return (parentNode !== "root" ? `${parentNode}_${prefix}${index}` : `${prefix}${index}`).replace(/-/g, "_");
 }
 //#endregion
+//#region ../packages/compiler/src/render-generator/states/process-const-declaration.state.ts
+/**
+* Generates code for a `@const` declaration node.
+* Emits a `const name = expression;` JavaScript statement.
+*
+* @param node The `ConstDeclarationNode` to process.
+* @param _nodeName Unused node name.
+* @param _parentNode Unused parent node name.
+* @param _context Unused render context.
+* @returns Array containing the generated const statement string.
+*/
+function processConstDeclaration(node, _nodeName, _parentNode, compilerContext) {
+	compilerContext.addIdentifier(node.varName);
+	return [`declareConst(context, ${node.varName}, () => ${resolveExpression(node.expression, compilerContext)});`];
+}
+//#endregion
+//#region ../packages/compiler/src/render-generator/states/process-element.state.ts
+/**
+* Generates code for an HTML element node: creates the DOM element, sets attributes,
+* attaches event listeners, appends it to the parent, and recursively processes children.
+*
+* @param node The `ElementNode` to process.
+* @param nodeName Variable name to use for the created DOM element.
+* @param parentNode Variable name of the parent DOM node to append to.
+* @param compilerContext Current render scope context.
+* @returns Array of generated code lines.
+*/
+function processElement(node, nodeName, parentNode, compilerContext) {
+	const attributes = mapAttributes(node.attributes, compilerContext);
+	const events = mapEvents(node.events);
+	const code = [`const ${nodeName} = _renderElement(${parentNode}, context, '${node.tagName}',`];
+	attributes.length ? code.push(...indent([
+		"[",
+		...indent(attributes),
+		"],"
+	])) : code[code.length - 1] = `${code[code.length - 1]} [],`;
+	events.length ? code.push(...indent([
+		"[",
+		...indent(events),
+		"]"
+	]), ")") : code[code.length - 1] = `${code[code.length - 1]} [])`;
+	code.push(...node.children.map((child, i) => processNode(child, i.toString(), nodeName, compilerContext)).flat());
+	return code;
+}
+/**
+* Generates code that assigns attributes to a DOM element.
+*
+* Static (string) attribute values are set once via a direct `setAttribute` call,
+* while dynamic attribute values are wrapped in an `effect` so the attribute is
+* re-evaluated and updated whenever its underlying signal dependencies change.
+* The disposer returned by the `effect` is registered in `unwatchFns` for cleanup.
+*
+* @param attributes The attribute nodes to map onto the element.
+* @returns Array of generated code lines, one per attribute.
+*/
+function mapAttributes(attributes, compilerContext) {
+	return attributes?.map(({ name, value }) => {
+		const isLiteral = typeof value === "string";
+		return `{ name: '${name}', value: () => ${isLiteral ? `'${value}'` : resolveExpression(value.expression, compilerContext)}, literal: ${isLiteral} },`;
+	});
+}
+/**
+* Generates code that attaches event listeners to a DOM element.
+*
+* For each event node an `addEventListener` call is emitted, binding the event
+* to the component instance handler and exposing the native event as `$event`.
+*
+* @param events The event nodes to bind to the element.
+* @returns Array of generated code lines, one per event listener.
+*/
+function mapEvents(events) {
+	return events?.map((event) => `{ name: '${event.name}', handler: '${event.handler}' }`);
+}
+//#endregion
+//#region ../packages/compiler/src/render-generator/models/compiler-context.model.ts
+/**
+* Tracks identifier scope during render code generation.
+* Each `Context` instance represents one lexical scope (e.g. a `@for` loop body)
+* and can be chained to a parent context for outer-scope resolution.
+*/
+var CompilerContext = class {
+	_identifiers;
+	_parent;
+	/**
+	* Creates a new scope context.
+	*
+	* @param _identifiers List of loop variable names declared in this scope.
+	* @param _parent Optional parent context representing the enclosing scope.
+	*/
+	constructor(_identifiers = new Array(), _parent) {
+		this._identifiers = _identifiers;
+		this._parent = _parent;
+	}
+	addIdentifier(name) {
+		if (this.hasIdentifier(name)) throw new Error(`Identifier "${name}" is already declared in this scope.`);
+		this._identifiers.push(name);
+	}
+	/**
+	* Returns the innermost identifier in the current scope chain, or
+	* delegates to the parent context if none is found in this scope.
+	*
+	* @returns The most recently declared identifier name, or `undefined` if none exists.
+	*/
+	hasIdentifier(name) {
+		return this._identifiers.includes(name) || (this._parent?.hasIdentifier(name) ?? false);
+	}
+};
+//#endregion
 //#region ../packages/compiler/src/render-generator/states/process-for.state.ts
 /**
 * Generates code for a `@for` iteration node.
@@ -2297,12 +2347,14 @@ function getBlockIdentifier(parentNode, index, prefix) {
 * @param nodeName - Base variable name prefix used for child nodes and
 *   to produce a unique loop counter identifier.
 * @param parentNode - Variable name of the parent DOM node.
+* @param compilerContext - The enclosing scope context.
 * @returns Array of generated code lines.
 */
-function processFor(node, nodeName, parentNode) {
+function processFor(node, nodeName, parentNode, compilerContext) {
 	const mainBlock = new Array();
 	const functionsToProcess = /* @__PURE__ */ new Map();
 	const iterableSource = node.iterableSource;
+	compilerContext.hasIdentifier(iterableSource) || `${iterableSource}`;
 	const itemsName = getTextIdentifier(parentNode, nodeName, "items");
 	const counterName = getTextIdentifier(parentNode, nodeName, "i");
 	const indexName = resolveImplicit(node, "$index");
@@ -2310,9 +2362,17 @@ function processFor(node, nodeName, parentNode) {
 	const lastName = resolveImplicit(node, "$last");
 	const evenName = resolveImplicit(node, "$even");
 	const oddName = resolveImplicit(node, "$odd");
+	const forContext = new CompilerContext([
+		node.itemAlias,
+		indexName,
+		firstName,
+		lastName,
+		evenName,
+		oddName
+	], compilerContext);
 	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))],
+		code: [`const { ${node.itemAlias}, ${indexName}, ${firstName}, ${lastName}, ${evenName}, ${oddName} } = _iterationVariables(${itemsName}, ${counterName});`, ...node.children.flatMap((child, i) => processNode(child, `${nodeName}_${i}`, parentNode, forContext))],
 		args: [
 			parentNode,
 			"parentContext",
@@ -2320,7 +2380,7 @@ function processFor(node, nodeName, parentNode) {
 			counterName
 		]
 	});
-	mainBlock.push(`_for(${parentNode}, context, '${iterableSource}', this.${forKey}.bind(this));`);
+	mainBlock.push(`_for(${parentNode}, context, context.getIdentifier('${iterableSource}'), this.${forKey}.bind(this));`);
 	return {
 		mainBlock,
 		fns: functionsToProcess
@@ -2352,38 +2412,41 @@ function resolveImplicit(node, implicit) {
 * @param parentNode Variable name of the parent DOM node.
 * @returns Array of generated code lines.
 */
-function processIf(node, nodeName, parentNode) {
+function processIf(node, nodeName, parentNode, compilerContext) {
+	const ifContext = new CompilerContext([], compilerContext);
 	const functionsToProcess = /* @__PURE__ */ new Map();
 	const mainBlock = new Array();
 	const ifKey = getBlockIdentifier(parentNode, nodeName, "if");
 	mainBlock.push({
-		condition: resolveExpression(node.conditionNode),
+		condition: resolveExpression(node.conditionNode, compilerContext),
 		block: `this.${ifKey}.bind(this)`
 	});
 	functionsToProcess.set(ifKey, {
-		code: processConsequent(node, nodeName, parentNode),
+		code: processConsequent(node, nodeName, parentNode, ifContext),
 		args: [parentNode, "parentContext"]
 	});
 	let alt = node.alternate;
 	let index = 0;
 	while (alt?.type === ASTNodeType.ElseIf) {
+		const elseIfContext = new CompilerContext([], compilerContext);
 		const keyElseIf = getBlockIdentifier(parentNode, `${nodeName}_${index}`, "elseIf");
 		const conditionNode = alt.conditionNode;
 		mainBlock.push({
-			condition: resolveExpression(conditionNode),
+			condition: resolveExpression(conditionNode, compilerContext),
 			block: `this.${keyElseIf}.bind(this)`
 		});
 		functionsToProcess.set(keyElseIf, {
-			code: processConsequent(alt, nodeName, parentNode),
+			code: processConsequent(alt, nodeName, parentNode, elseIfContext),
 			args: [parentNode, "parentContext"]
 		});
 		alt = alt.alternate;
 	}
 	if (alt) {
+		const elseContext = new CompilerContext([], compilerContext);
 		const keyElse = getBlockIdentifier(parentNode, nodeName, "else");
 		mainBlock.push({ block: `this.${keyElse}.bind(this)` });
 		functionsToProcess.set(keyElse, {
-			code: processConsequent(alt, nodeName, parentNode),
+			code: processConsequent(alt, nodeName, parentNode, elseContext),
 			args: [parentNode, "parentContext"]
 		});
 	}
@@ -2402,8 +2465,8 @@ function processIf(node, nodeName, parentNode) {
 		fns: functionsToProcess
 	};
 }
-function processConsequent(node, nodeName, parentNode) {
-	return node.consequent.map((child, i) => processNode(child, `${nodeName}_${i}`, parentNode)).flat();
+function processConsequent(node, nodeName, parentNode, compilerContext) {
+	return node.consequent.map((child, i) => processNode(child, `${nodeName}_${i}`, parentNode, compilerContext)).flat();
 }
 //#endregion
 //#region ../packages/compiler/src/render-generator/states/process-switch.state.ts
@@ -2415,15 +2478,17 @@ function processConsequent(node, nodeName, parentNode) {
 * @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 compilerContext - Current render scope context.
 * @returns Array of generated code lines.
 */
-function processSwitch(node, nodeName, parentNode) {
+function processSwitch(node, nodeName, parentNode, compilerContext) {
 	const functionsToProcess = /* @__PURE__ */ new Map();
 	const blocks = new Array();
 	node.cases.forEach((caseNode, i) => {
+		const caseContext = new CompilerContext([], compilerContext);
 		const caseName = caseNode.condition ? getBlockIdentifier(parentNode, `${nodeName}_${i}`, "case") : getBlockIdentifier(parentNode, nodeName, "default");
 		functionsToProcess.set(caseName, {
-			code: caseNode.children.map((child, i) => processNode(child, `${nodeName}_${i}_${i}`, parentNode)).flat(),
+			code: caseNode.children.map((child, i) => processNode(child, `${nodeName}_${i}_${i}`, parentNode, caseContext)).flat(),
 			args: [parentNode, "parentContext"]
 		});
 		blocks.push({
@@ -2433,7 +2498,7 @@ function processSwitch(node, nodeName, parentNode) {
 	});
 	return {
 		mainBlock: [
-			`_switch(${parentNode}, context, () => ${resolveExpression(node.expression)}, [`,
+			`_switch(${parentNode}, context, () => ${resolveExpression(node.expression, compilerContext)}, [`,
 			...indent(blocks.map(({ condition, block }) => {
 				return [
 					"{",
@@ -2454,11 +2519,10 @@ function processSwitch(node, nodeName, parentNode) {
 * then appends it to the parent DOM node.
 *
 * @param node A `TextNode` or `InterpolationNode` to process.
-* @param nodeName - The identifier for the Text Node created
 * @param parentNode Variable name of the parent DOM node.
 * @returns Array of two generated code lines: the text node creation and the appendChild call.
 */
-function processTextAndInterpolation(node, nodeName, parentNode) {
+function processTextAndInterpolation(node, parentNode) {
 	return [`${node.type === ASTNodeType.Text ? `_renderLiteralText(${parentNode}, context, '${node.value}')` : `_renderText(${parentNode}, context, '${node.expression.text}')`}`];
 }
 //#endregion
@@ -2472,9 +2536,10 @@ var nodeToProcess = /* @__PURE__ */ new Map();
 */
 function generateRenderFunction(ast, cssVariableName) {
 	nodeToProcess.clear();
+	const compilerContext = new CompilerContext();
 	const renderFunctions = ["_render() {", ...indent([`const ${ROOT_NODE} = this._root;`, "const context = new Context(this)"])];
 	if (cssVariableName) renderFunctions.push(indent(`${ROOT_NODE}.adoptedStyleSheets = [${cssVariableName}];`));
-	renderFunctions.push(...indent([...ast.map((node, i) => [...processNode(node, i.toString(), ROOT_NODE)]).flat(), "return context;"]), "}");
+	renderFunctions.push(...indent([...ast.map((node, i) => [...processNode(node, i.toString(), ROOT_NODE, compilerContext)]).flat(), "return context;"]), "}");
 	while (nodeToProcess.size) {
 		const [key, fnData] = nodeToProcess.entries().next().value;
 		renderFunctions.push(`${key}(${fnData.args.join(", ")}) {`, ...indent([
@@ -2491,33 +2556,33 @@ function generateRenderFunction(ast, cssVariableName) {
 * For flow control nodes no single var is produced; instead multiple children
 * are appended directly inside the control flow block.
 */
-function processNode(node, nodeName, parentNode) {
+function processNode(node, nodeName, parentNode, compilerContext) {
 	switch (node.type) {
 		case ASTNodeType.Text:
-		case ASTNodeType.Interpolation: return processTextAndInterpolation(node, getTextIdentifier(parentNode, nodeName), parentNode);
-		case ASTNodeType.Element: return processElement(node, getElementIdentifier(node, parentNode, nodeName), parentNode);
+		case ASTNodeType.Interpolation: return processTextAndInterpolation(node, parentNode);
+		case ASTNodeType.Element: return processElement(node, getElementIdentifier(node, parentNode, nodeName), parentNode, compilerContext);
 		case ASTNodeType.If:
-			const conditionalBlockData = processIf(node, nodeName, parentNode);
+			const conditionalBlockData = processIf(node, nodeName, parentNode, compilerContext);
 			conditionalBlockData.fns.forEach((fnBody, key) => nodeToProcess.set(key, {
 				fn: () => fnBody.code,
 				args: fnBody.args
 			}));
 			return conditionalBlockData.mainBlock;
 		case ASTNodeType.For:
-			const forBlockData = processFor(node, nodeName, parentNode);
+			const forBlockData = processFor(node, nodeName, parentNode, compilerContext);
 			forBlockData.fns.forEach((fnBody, key) => nodeToProcess.set(key, {
 				fn: () => fnBody.code,
 				args: fnBody.args
 			}));
 			return forBlockData.mainBlock;
 		case ASTNodeType.Switch:
-			const switchBlockData = processSwitch(node, nodeName, parentNode);
+			const switchBlockData = processSwitch(node, nodeName, parentNode, compilerContext);
 			switchBlockData.fns.forEach((fnBody, key) => nodeToProcess.set(key, {
 				fn: () => fnBody.code,
 				args: fnBody.args
 			}));
 			return switchBlockData.mainBlock;
-		case ASTNodeType.ConstDeclaration: return processConstDeclaration(node, nodeName, parentNode);
+		case ASTNodeType.ConstDeclaration: return processConstDeclaration(node, nodeName, parentNode, compilerContext);
 		default: return [];
 	}
 }

package/package.json

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