@xaendar/compiler 0.6.9 → 0.6.10

package/dist/xaendar-compiler.es.js

@@ -1925,39 +1925,75 @@ var Parser = class {
 	}
 };
 //#endregion
-//#region ../packages/compiler/src/render-generator/models/render-context.model.ts
+//#region ../packages/compiler/src/render-generator/states/process-const-declaration.state.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.
+* 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.
 */
-var Context = 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.getIdentifier(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.
-	*/
-	getIdentifier(name) {
-		return this._identifiers.includes(name) ? name : this._parent?.getIdentifier(name);
-	}
-};
+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
 /**
@@ -2169,8 +2205,8 @@ var ROOT_NODE = "root";
 * // typeof id !== 'boolean' || pippo instanceof HTMLElement
 * // → typeof this.id !== 'boolean' || this.pippo instanceof HTMLElement
 */
-function resolveExpression(expression, context) {
-	return emitNode(expression, expression, context);
+function resolveExpression(expression) {
+	return emitNode(expression, expression);
 }
 /**
 * Emits the resolved text for a node.
@@ -2181,14 +2217,13 @@ function resolveExpression(expression, context) {
 * - If the node is a resolvable Identifier, emits the resolved name.
 * - Otherwise recurses into children and concatenates their output.
 */
-function emitNode(node, parent, context) {
-	if (ts.isIdentifier(node) && needsResolution(node, parent)) return context.getIdentifier(node.text) ?? `this.${node.text}`;
+function emitNode(node, parent) {
 	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, context)}`;
+		result = `${result}${sourceText.slice(lastEnd, child.getStart())}${emitNode(child, node)}`;
 		lastEnd = child.getEnd();
 	});
 	return `${result}${sourceText.slice(lastEnd, node.getEnd())}`;
@@ -2233,86 +2268,6 @@ 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, context) {
-	context.addIdentifier(node.varName);
-	return [`const ${node.varName} = ${resolveExpression(node.expression, context)};`];
-}
-//#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 context Current render scope context.
-* @returns Array of generated code lines.
-*/
-function processElement(node, nodeName, parentNode, context) {
-	const childrenContext = new Context([], context);
-	return [
-		`const ${nodeName} = document.createElement("${node.tagName}");`,
-		...mapAttributes(node.attributes, nodeName, context),
-		...mapEvents(node.events, nodeName),
-		`${parentNode}.appendChild(${nodeName});`,
-		`unwatchFns.push(() => ${parentNode}.removeChild(${nodeName}));`,
-		...node.children.map((child, i) => processNode(child, i.toString(), nodeName, childrenContext)).flat()
-	];
-}
-/**
-* 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.
-* @param nodeName Variable name of the DOM element receiving the attributes.
-* @param context Current render scope context, used to resolve dynamic expressions.
-* @returns Array of generated code lines, one per attribute.
-*/
-function mapAttributes(attributes, nodeName, 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.
-*
-* 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.
-* @param nodeName Variable name of the DOM element receiving the listeners.
-* @returns Array of generated code lines, one per event listener.
-*/
-function mapEvents(events, nodeName) {
-	return events?.map((event) => `${nodeName}.addEventListener("${event.name}", ($event) => this.${event.handler});`) ?? [];
-}
-//#endregion
 //#region ../packages/compiler/src/render-generator/states/process-for.state.ts
 /**
 * Generates code for a `@for` iteration node.
@@ -2342,14 +2297,12 @@ function mapEvents(events, nodeName) {
 * @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 parentContext - The enclosing scope context.
 * @returns Array of generated code lines.
 */
-function processFor(node, nodeName, parentNode, parentContext) {
+function processFor(node, nodeName, parentNode) {
 	const mainBlock = new Array();
 	const functionsToProcess = /* @__PURE__ */ new Map();
 	const iterableSource = node.iterableSource;
-	const iterableExpr = parentContext.getIdentifier(iterableSource) ?? `this.${iterableSource}`;
 	const itemsName = getTextIdentifier(parentNode, nodeName, "items");
 	const counterName = getTextIdentifier(parentNode, nodeName, "i");
 	const indexName = resolveImplicit(node, "$index");
@@ -2357,24 +2310,17 @@ function processFor(node, nodeName, parentNode, parentContext) {
 	const lastName = resolveImplicit(node, "$last");
 	const evenName = resolveImplicit(node, "$even");
 	const oddName = resolveImplicit(node, "$odd");
-	const forContext = new Context([
-		node.itemAlias,
-		indexName,
-		firstName,
-		lastName,
-		evenName,
-		oddName
-	], parentContext);
 	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))],
+		code: [`const { ${node.itemAlias}, ${indexName}, ${firstName}, ${lastName}, ${evenName}, ${oddName} } = _iterationVariables(${itemsName}, ${counterName});`, ...node.children.flatMap((child, i) => processNode(child, `${nodeName}_${i}`, parentNode))],
 		args: [
 			parentNode,
+			"parentContext",
 			itemsName,
 			counterName
 		]
 	});
-	mainBlock.push(`_for(${parentNode}, unwatchFns, () => ${iterableExpr}, this.${forKey}.bind(this));`);
+	mainBlock.push(`_for(${parentNode}, context, '${iterableSource}', this.${forKey}.bind(this));`);
 	return {
 		mainBlock,
 		fns: functionsToProcess
@@ -2404,50 +2350,46 @@ function resolveImplicit(node, implicit) {
 * @param node The `IfNode` 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.
 * @returns Array of generated code lines.
 */
-function processIf(node, nodeName, parentNode, context) {
-	const ifContext = new Context([], context);
+function processIf(node, nodeName, parentNode) {
 	const functionsToProcess = /* @__PURE__ */ new Map();
 	const mainBlock = new Array();
 	const ifKey = getBlockIdentifier(parentNode, nodeName, "if");
 	mainBlock.push({
-		condition: resolveExpression(node.conditionNode, context),
+		condition: resolveExpression(node.conditionNode),
 		block: `this.${ifKey}.bind(this)`
 	});
 	functionsToProcess.set(ifKey, {
-		code: processConsequent(node, nodeName, parentNode, ifContext),
-		args: [parentNode]
+		code: processConsequent(node, nodeName, parentNode),
+		args: [parentNode, "parentContext"]
 	});
 	let alt = node.alternate;
 	let index = 0;
 	while (alt?.type === ASTNodeType.ElseIf) {
-		const elseIfContext = new Context([], context);
 		const keyElseIf = getBlockIdentifier(parentNode, `${nodeName}_${index}`, "elseIf");
 		const conditionNode = alt.conditionNode;
 		mainBlock.push({
-			condition: resolveExpression(conditionNode, context),
+			condition: resolveExpression(conditionNode),
 			block: `this.${keyElseIf}.bind(this)`
 		});
 		functionsToProcess.set(keyElseIf, {
-			code: processConsequent(alt, nodeName, parentNode, elseIfContext),
-			args: [parentNode]
+			code: processConsequent(alt, nodeName, parentNode),
+			args: [parentNode, "parentContext"]
 		});
 		alt = alt.alternate;
 	}
 	if (alt) {
-		const elseContext = new Context([], context);
 		const keyElse = getBlockIdentifier(parentNode, nodeName, "else");
 		mainBlock.push({ block: `this.${keyElse}.bind(this)` });
 		functionsToProcess.set(keyElse, {
-			code: processConsequent(alt, nodeName, parentNode, elseContext),
-			args: [parentNode]
+			code: processConsequent(alt, nodeName, parentNode),
+			args: [parentNode, "parentContext"]
 		});
 	}
 	return {
 		mainBlock: [
-			`_if(${parentNode}, unwatchFns, [`,
+			`_if(${parentNode}, context, [`,
 			...indent(mainBlock.map(({ condition, block }) => {
 				return [
 					"{",
@@ -2460,8 +2402,8 @@ function processIf(node, nodeName, parentNode, context) {
 		fns: functionsToProcess
 	};
 }
-function processConsequent(node, nodeName, parentNode, context) {
-	return node.consequent.map((child, i) => processNode(child, `${nodeName}_${i}`, parentNode, context)).flat();
+function processConsequent(node, nodeName, parentNode) {
+	return node.consequent.map((child, i) => processNode(child, `${nodeName}_${i}`, parentNode)).flat();
 }
 //#endregion
 //#region ../packages/compiler/src/render-generator/states/process-switch.state.ts
@@ -2473,18 +2415,16 @@ function processConsequent(node, nodeName, parentNode, context) {
 * @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.
 * @returns Array of generated code lines.
 */
-function processSwitch(node, nodeName, parentNode, context) {
+function processSwitch(node, nodeName, parentNode) {
 	const functionsToProcess = /* @__PURE__ */ new Map();
 	const blocks = new Array();
 	node.cases.forEach((caseNode, i) => {
-		const caseContext = new Context([], context);
 		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, caseContext)).flat(),
-			args: [parentNode]
+			code: caseNode.children.map((child, i) => processNode(child, `${nodeName}_${i}_${i}`, parentNode)).flat(),
+			args: [parentNode, "parentContext"]
 		});
 		blocks.push({
 			condition: caseNode.condition,
@@ -2493,7 +2433,7 @@ function processSwitch(node, nodeName, parentNode, context) {
 	});
 	return {
 		mainBlock: [
-			`_switch(${parentNode}, unwatchFns, () => ${resolveExpression(node.expression, context)}, [`,
+			`_switch(${parentNode}, context, () => ${resolveExpression(node.expression)}, [`,
 			...indent(blocks.map(({ condition, block }) => {
 				return [
 					"{",
@@ -2514,18 +2454,12 @@ function processSwitch(node, nodeName, parentNode, context) {
 * then appends it to the parent DOM node.
 *
 * @param node A `TextNode` or `InterpolationNode` to process.
-* @param nodeName Variable name for the created text node.
+* @param nodeName - The identifier for the Text Node created
 * @param parentNode Variable name of the parent DOM node.
-* @param _context Unused render context.
 * @returns Array of two generated code lines: the text node creation and the appendChild call.
 */
-function processTextAndInterpolation(node, nodeName, parentNode, context) {
-	const textValue = node.type === ASTNodeType.Text ? JSON.stringify(node.value) : resolveExpression(node.expression, context);
-	return [
-		`const ${nodeName} = document.createTextNode(${textValue});`,
-		`${parentNode}.appendChild(${nodeName});`,
-		`unwatchFns.push(effect(() => ${nodeName}.textContent = ${textValue}));`
-	];
+function processTextAndInterpolation(node, nodeName, parentNode) {
+	return [`${node.type === ASTNodeType.Text ? `renderLiteralText(${parentNode}, context, '${node.value}')` : `renderText(${parentNode}, context, '${node.expression.text}')`}`];
 }
 //#endregion
 //#region ../packages/compiler/src/render-generator/render-generator.ts
@@ -2538,20 +2472,15 @@ var nodeToProcess = /* @__PURE__ */ new Map();
 */
 function generateRenderFunction(ast, cssVariableName) {
 	nodeToProcess.clear();
-	const context = new Context([ROOT_NODE]);
-	const renderFunctions = ["_render() {", indent(`const ${ROOT_NODE} = this._root;`)];
+	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([
-		"let unwatchFns = [];",
-		...ast.map((node, i) => [...processNode(node, i.toString(), ROOT_NODE, context)]).flat(),
-		"return unwatchFns;"
-	]), "}");
+	renderFunctions.push(...indent([...ast.map((node, i) => [...processNode(node, i.toString(), ROOT_NODE)]).flat(), "return context;"]), "}");
 	while (nodeToProcess.size) {
 		const [key, fnData] = nodeToProcess.entries().next().value;
 		renderFunctions.push(`${key}(${fnData.args.join(", ")}) {`, ...indent([
-			"let unwatchFns = [];",
+			"const context = new Context(this, parentContext)",
 			...fnData.fn(...fnData.args),
-			"return unwatchFns;"
+			"return context"
 		]), "}");
 		nodeToProcess.delete(key);
 	}
@@ -2562,33 +2491,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, context) {
+function processNode(node, nodeName, parentNode) {
 	switch (node.type) {
 		case ASTNodeType.Text:
-		case ASTNodeType.Interpolation: return processTextAndInterpolation(node, getTextIdentifier(parentNode, nodeName), parentNode, context);
-		case ASTNodeType.Element: return processElement(node, getElementIdentifier(node, parentNode, nodeName), parentNode, context);
+		case ASTNodeType.Interpolation: return processTextAndInterpolation(node, getTextIdentifier(parentNode, nodeName), parentNode);
+		case ASTNodeType.Element: return processElement(node, getElementIdentifier(node, parentNode, nodeName), parentNode);
 		case ASTNodeType.If:
-			const conditionalBlockData = processIf(node, nodeName, parentNode, context);
+			const conditionalBlockData = processIf(node, nodeName, parentNode);
 			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, context);
+			const forBlockData = processFor(node, nodeName, parentNode);
 			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, context);
+			const switchBlockData = processSwitch(node, nodeName, parentNode);
 			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, context);
+		case ASTNodeType.ConstDeclaration: return processConstDeclaration(node, nodeName, parentNode);
 		default: return [];
 	}
 }

package/package.json

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