@xaendar/compiler 0.5.6 → 0.5.8

package/dist/xaendar-compiler.es.js

@@ -1,4 +1,4 @@
-import { Stack, assertIsValidElementName, indent } from "@xaendar/common";
+import { Stack, indent } from "@xaendar/common";
 import ts from "typescript";
 //#region ../packages/compiler/src/lexer/types/lexer-state.enum.ts
 /**
@@ -2219,20 +2219,47 @@ function processConstDeclaration(node, _nodeName, _parentNode, context) {
 */
 function processElement(node, nodeName, parentNode, context) {
 	const childrenContext = new Context([], context);
-	const tagName = node.tagName;
-	if (!assertIsValidElementName(tagName)) process.exit(1);
 	return [
-		`const ${nodeName} = document.createElement("${tagName}");`,
-		...node.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)})));`;
-		}) || [],
-		...node.events?.map((event) => `${nodeName}.addEventListener("${event.name}", ($event) => this.${event.handler});`) || [],
+		`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) {
+	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)})));`;
+	}) ?? [];
+}
+/**
+* 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
 /**
@@ -2434,12 +2461,12 @@ function generateRenderFunction(ast, cssVariableName) {
 	nodeToProcess.clear();
 	const context = new Context();
 	const renderFunctions = ["_render() {"];
-	if (cssVariableName) renderFunctions.push(`  this._root.adoptedStyleSheets = [${cssVariableName}];`);
-	renderFunctions.push("  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 = [];", ...indent(...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(", ")}) {`, "  let unwatchFns = [];", ...indent(...fnData.fn(...fnData.args)), "  return unwatchFns;", "}");
-		else renderFunctions.push(`${key}() {`, "  let unwatchFns = [];", ...indent(...fnData.fn()), "  return unwatchFns;", "}");
+		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;", "}"));
 		nodeToProcess.delete(key);
 	}
 	return renderFunctions.join("\n");

package/package.json

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