@xaendar/compiler 0.7.19 → 0.7.20

package/dist/xaendar-compiler.es.d.ts

@@ -1,17 +1,20 @@
 /**
- * Compiles a template string into a TypeScript render function body.
+ * Compiles a template string into a Javascript render function body.
  *
  * Runs the three-stage pipeline:
  * 1. **Lexer** — tokenises the raw template text.
  * 2. **Parser** — transforms the token stream into an AST.
- * 3. **Render generator** — emits TypeScript source lines from the AST.
+ * 3. **Render generator** — emits Javascript source lines from the AST.
  *
  * @param input - The raw HTML-like template source to compile.
  * @param cssVariableName - Optional name of the CSS variable to inject
  *   into the generated `adoptedStyleSheets` assignment.
- * @returns A string containing the compiled TypeScript render method body.
+ * @returns A string containing the compiled Javascript render method body.
  */
-export declare function compile(input: string, cssVariableName?: string): string;
+export declare function compile(input: string, className: string, cssVariableName?: string): {
+    javascript: string;
+    typescript: string;
+};
 
 /**
  * @fileoverview CompilerHost interface — the contract between the compiler and the environment it runs in.

package/dist/xaendar-compiler.es.js

@@ -1,5 +1,5 @@
 import { Stack, indent } from "@xaendar/common";
-import ts, { ScriptTarget, SyntaxKind, createSourceFile, forEachChild, isExpressionStatement, isIdentifier } from "typescript";
+import { ScriptTarget, SyntaxKind, createSourceFile, forEachChild, isExpressionStatement, isIdentifier, isPropertyAccessExpression, isPropertyAssignment } from "typescript";
 //#region ../packages/compiler/src/parser/types/node.enum.ts
 /**
 * Discriminant values that identify the type of each AST node produced by the parser.
@@ -41,6 +41,10 @@ var ASTNodeType = /* @__PURE__ */ function(ASTNodeType) {
 	* A `@case` or `@default` branch inside a `@switch`.
 	*/
 	ASTNodeType[ASTNodeType["Case"] = 8] = "Case";
+	/**
+	*
+	*/
+	ASTNodeType[ASTNodeType["Import"] = 9] = "Import";
 	return ASTNodeType;
 }({});
 //#endregion
@@ -154,7 +158,7 @@ var CompilerContext = class {
 	}
 };
 //#endregion
-//#region ../packages/compiler/src/generator/utils/render-generator.utils.ts
+//#region ../packages/compiler/src/generator/utils/generator.utils.ts
 /**
 * Complete set of JavaScript global identifiers up to ES2026.
 *
@@ -356,7 +360,7 @@ var ROOT_NODE = "root";
 * to `node.getText()` for any subtree that contains no resolvable identifiers.
 *
 * @param expression - Either a raw identifier string or a validated
-*   `ts.Expression` node produced by `validateExpression`.
+*   `Expression` node produced by `validateExpression`.
 * @param compilerContext - The active template scope context.
 * @returns The resolved expression as a JavaScript string ready for codegen.
 *
@@ -375,8 +379,8 @@ var ROOT_NODE = "root";
 * // typeof id !== 'boolean' || pippo instanceof HTMLElement
 * // → typeof this.id !== 'boolean' || this.pippo instanceof HTMLElement
 */
-function resolveExpression(expression, compilerContext, skipResolution = false) {
-	return emitNode(expression, expression, compilerContext, skipResolution);
+function resolveExpression(expression, compilerContext, options) {
+	return emitNode(expression, expression, compilerContext, mapDefaultOptions(options));
 }
 /**
 * Emits the resolved text for a node.
@@ -388,18 +392,18 @@ function resolveExpression(expression, compilerContext, skipResolution = false)
 *   expression (see {@link resolveIdentifierAccess}).
 * - Otherwise recurses into children and concatenates their output.
 */
-function emitNode(node, parent, compilerContext, skipResolution = false) {
-	if (ts.isIdentifier(node) && needsResolution(node, parent)) {
+function emitNode(node, parent, compilerContext, options) {
+	if (isIdentifier(node) && needsResolution(node, parent)) {
 		const text = node.text;
-		if (compilerContext.hasUnresolvableIdentifier(text) || skipResolution) return text;
-		return resolveIdentifierAccess(text, compilerContext);
+		if (compilerContext.hasUnresolvableIdentifier(text) || options.skipResolution) return text;
+		return resolveIdentifierAccess(text, compilerContext, options.resolver);
 	}
 	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, compilerContext, skipResolution)}`;
+	forEachChild(node, (child) => {
+		result = `${result}${sourceText.slice(lastEnd, child.getStart())}${emitNode(child, node, compilerContext, options)}`;
 		lastEnd = child.getEnd();
 	});
 	return `${result}${sourceText.slice(lastEnd, node.getEnd())}`;
@@ -423,13 +427,13 @@ function emitNode(node, parent, compilerContext, skipResolution = false) {
 * @param compilerContext - The active template scope context.
 * @returns The generated code expression that yields the identifier's value.
 */
-function resolveIdentifierAccess(text, compilerContext) {
+function resolveIdentifierAccess(text, compilerContext, resolver) {
 	if (compilerContext.hasIdentifier(text)) {
 		const kind = compilerContext.getIdentifierKind(text);
 		const access = `context.get('${text}')`;
 		return kind === "signal" ? `${access}()` : access;
 	}
-	return `this.${text}`;
+	return `${resolver}.${text}`;
 }
 /**
 * Returns true if the subtree rooted at `node` contains at least one
@@ -438,9 +442,9 @@ function resolveIdentifierAccess(text, compilerContext) {
 * Short-circuits as soon as one is found to avoid visiting the whole tree.
 */
 function containsResolvableIdentifier(node, parent) {
-	if (ts.isIdentifier(node) && needsResolution(node, parent)) return true;
+	if (isIdentifier(node) && needsResolution(node, parent)) return true;
 	let found = false;
-	ts.forEachChild(node, (child) => {
+	forEachChild(node, (child) => {
 		if (!found) found = containsResolvableIdentifier(child, node);
 	});
 	return found;
@@ -451,7 +455,7 @@ function containsResolvableIdentifier(node, parent) {
 * and not the property-name side of a member access expression.
 */
 function needsResolution(node, parent) {
-	return !(ts.isPropertyAccessExpression(parent) && parent.name === node || ts.isPropertyAssignment(parent) && parent.name === node || GLOBAL_IDENTIFIERS.has(node.text) || !node.text);
+	return !(isPropertyAccessExpression(parent) && parent.name === node || isPropertyAssignment(parent) && parent.name === node || GLOBAL_IDENTIFIERS.has(node.text) || !node.text);
 }
 /**
 * Generates a unique variable name for a DOM element based on its tag name
@@ -496,6 +500,12 @@ function getBlockIdentifier(prefix, parentNode, index) {
 function getIdentifier(prefix, parentNode, index) {
 	return (parentNode !== "root" ? `${parentNode}__${prefix}${index}` : `${prefix}${index}`).replace(/-/g, "_");
 }
+function mapDefaultOptions(options) {
+	return {
+		skipResolution: options?.skipResolution ?? false,
+		resolver: options?.resolver ?? "this"
+	};
+}
 //#endregion
 //#region ../packages/compiler/src/generator/states/generate-element.state.ts
 /**
@@ -513,33 +523,33 @@ function generateElement(node, parentNode, index, compilerContext, anchor) {
 	const events = mapEvents(node.events, compilerContext);
 	const nodeName = getElementIdentifier(node, parentNode, index);
 	const tagName = node.tagName;
-	const retval = {
+	const retVal = {
 		code: [],
 		functionsToProcess: /* @__PURE__ */ new Map()
 	};
 	switch (tagName) {
 		case "svg":
-			retval.code.push("context.createElement = createSVGElement");
+			retVal.code.push("context.createElement = createSVGElement");
 			break;
-		case "math": retval.code.push("context.createElement = createMATHMLElement");
+		case "math": retVal.code.push("context.createElement = createMATHMLElement");
 	}
-	retval.code.push(`const ${nodeName} = _renderElement(${parentNode}, context, ${anchor}, '${tagName}',`);
-	attributes.length ? retval.code.push(...indent([
+	retVal.code.push(`const ${nodeName} = _renderElement(${parentNode}, context, ${anchor}, '${tagName}',`);
+	attributes.length ? retVal.code.push(...indent([
 		"[",
 		...indent(attributes),
 		"],"
-	])) : retval.code[retval.code.length - 1] = `${retval.code[retval.code.length - 1]} [],`;
-	events.length ? retval.code.push(...indent([
+	])) : retVal.code[retVal.code.length - 1] = `${retVal.code[retVal.code.length - 1]} [],`;
+	events.length ? retVal.code.push(...indent([
 		"[",
 		...indent(events),
 		"]"
-	]), ");") : retval.code[retval.code.length - 1] = `${retval.code[retval.code.length - 1]} []);`;
+	]), ");") : retVal.code[retVal.code.length - 1] = `${retVal.code[retVal.code.length - 1]} []);`;
 	switch (tagName) {
 		case "svg":
-		case "math": retval.code.push("context.createElement = createElement");
+		case "math": retVal.code.push("context.createElement = createElement");
 	}
 	if (node.children.length) {
-		retval.functionsToProcess.set(`${nodeName}Children`, {
+		retVal.functionsToProcess.set(`${nodeName}Children`, {
 			fn: {
 				node,
 				parentNode: nodeName,
@@ -548,9 +558,9 @@ function generateElement(node, parentNode, index, compilerContext, anchor) {
 			},
 			args: [nodeName, "parentContext"]
 		});
-		retval.code.push(`this.${nodeName}Children(${nodeName}, context);`);
+		retVal.code.push(`this.${nodeName}Children(${nodeName}, context);`);
 	}
-	return retval;
+	return retVal;
 }
 /**
 * Maps attribute nodes to their corresponding generated code lines.
@@ -591,10 +601,10 @@ function mapEvents(events, compilerContext) {
 			`handler: '${event.handler}',`,
 			"parameters: ["
 		])];
-		if (parameters.length) eventCode.push(...indent([...indent(parameters), "]"]), "}");
+		if (parameters.length) eventCode.push(...indent([...indent(parameters), "]"]), "},");
 		else {
 			eventCode[eventCode.length - 1] = `${eventCode[eventCode.length - 1]}]`;
-			eventCode.push("}");
+			eventCode.push("},");
 		}
 		return eventCode;
 	}).flat();
@@ -650,11 +660,11 @@ function generateFor(node, parentNode, index, compilerContext) {
 	const iterableExpr = compilerContext.hasIdentifier(iterableSource) ? iterableSource : `this.${iterableSource}`;
 	const itemsName = getTextIdentifier("items", parentNode, index);
 	const counterName = getTextIdentifier("i", parentNode, index);
-	const indexName = resolveImplicit(node, "$index");
-	const firstName = resolveImplicit(node, "$first");
-	const lastName = resolveImplicit(node, "$last");
-	const evenName = resolveImplicit(node, "$even");
-	const oddName = resolveImplicit(node, "$odd");
+	const indexName = resolveImplicit$1(node, "$index");
+	const firstName = resolveImplicit$1(node, "$first");
+	const lastName = resolveImplicit$1(node, "$last");
+	const evenName = resolveImplicit$1(node, "$even");
+	const oddName = resolveImplicit$1(node, "$odd");
 	const forContext = new CompilerContext([
 		node.itemAlias,
 		[indexName, "signal"],
@@ -688,7 +698,7 @@ function generateFor(node, parentNode, index, compilerContext) {
 			"anchor"
 		]
 	});
-	retVal.code.push(`_for(${parentNode}, context, () => ${iterableExpr}, ${node.itemAlias} => ${resolveExpression(node.trackExpression, forContext, true)}, this.${forKey}.bind(this));`);
+	retVal.code.push(`_for(${parentNode}, context, () => ${iterableExpr}, ${node.itemAlias} => ${resolveExpression(node.trackExpression, forContext, { skipResolution: true })}, this.${forKey}.bind(this));`);
 	return retVal;
 }
 /**
@@ -703,7 +713,7 @@ function generateFor(node, parentNode, index, compilerContext) {
 * @param implicit - The implicit variable to look up (e.g. `'$index'`).
 * @returns The alias string if one was declared, otherwise `implicit` itself.
 */
-function resolveImplicit(node, implicit) {
+function resolveImplicit$1(node, implicit) {
 	return node.implicitAliases.get(implicit) ?? implicit;
 }
 //#endregion
@@ -718,7 +728,7 @@ function generateIf(node, parentNode, index, compilerContext) {
 	const ifKey = getBlockIdentifier("if", parentNode, index);
 	retVal.code.push(...indent([
 		"{",
-		...indent([`condition: () => ${resolveExpression(node.conditionNode, compilerContext).toString()},`, `block: this.${ifKey}.bind(this)`]),
+		...indent([`condition: () => ${resolveExpression(node.conditionNode, compilerContext)},`, `block: this.${ifKey}.bind(this)`]),
 		"},"
 	]));
 	retVal.functionsToProcess.set(ifKey, {
@@ -742,7 +752,7 @@ function generateIf(node, parentNode, index, compilerContext) {
 		const conditionNode = alt.conditionNode;
 		retVal.code.push(...indent([
 			"{",
-			...indent([`condition: () => ${resolveExpression(conditionNode, compilerContext).toString()},`, `block: this.${keyElseIf}.bind(this)`]),
+			...indent([`condition: () => ${resolveExpression(conditionNode, compilerContext)},`, `block: this.${keyElseIf}.bind(this)`]),
 			"},"
 		]));
 		retVal.functionsToProcess.set(keyElseIf, {
@@ -820,7 +830,11 @@ function generateSwitch(node, parentNode, index, compilerContext) {
 			]
 		});
 		const fnName = `this.${caseKey}.bind(this)`;
-		retVal.code.push("{", ...indent([`condition: ${caseNode.condition ? `[${caseNode.condition.join(", ")}]` : `null`},`, `block: ${fnName}`]), "},");
+		retVal.code.push(...indent([
+			"{",
+			...indent([`condition: ${caseNode.condition ? `[${caseNode.condition.join(", ")}]` : `null`},`, `block: ${fnName}`]),
+			"},"
+		]));
 	});
 	retVal.code.push("])");
 	return retVal;
@@ -842,10 +856,12 @@ function generateTextAndInterpolation(node, parentNode, _index, compilerContext)
 	return { code: [`${node.type === ASTNodeType.Text ? `_renderLiteralText(${parentNode}, context, '${node.value}');` : `_renderText(${parentNode}, context, () => ${resolveExpression(node.expression, compilerContext)});`}`] };
 }
 //#endregion
+//#region ../packages/compiler/src/generator/states/skip-generation.state.ts
+function skipGeneration(_node, _parentNode, _index, _compilerContext) {}
+//#endregion
 //#region ../packages/compiler/src/generator/generator.ts
 var Generator = class {
 	_ast;
-	_cssVariableName;
 	_nodeToProcess = /* @__PURE__ */ new Map();
 	_states = {
 		[ASTNodeType.Text]: generateTextAndInterpolation,
@@ -853,34 +869,41 @@ var Generator = class {
 		[ASTNodeType.Element]: generateElement,
 		[ASTNodeType.If]: generateIf,
 		[ASTNodeType.For]: generateFor,
-		[ASTNodeType.Switch]: generateSwitch
+		[ASTNodeType.Switch]: generateSwitch,
+		[ASTNodeType.Import]: skipGeneration
 	};
-	constructor(_ast, _cssVariableName) {
+	constructor(_ast) {
 		this._ast = _ast;
-		this._cssVariableName = _cssVariableName;
 	}
-	generate() {
+	generate(cssVariableName) {
 		this._nodeToProcess.clear();
 		const compilerContext = new CompilerContext();
-		const renderFunctions = ["_render() {", ...indent([`const ${ROOT_NODE} = this._root;`, "const context = new Context(this, { createElement: document.createElement.bind(document), get: () => undefined });"])];
-		if (this._cssVariableName) renderFunctions.push(indent(`${ROOT_NODE}.adoptedStyleSheets = [${this._cssVariableName}];`));
+		const generatedCode = ["_render() {", ...indent([`const ${ROOT_NODE} = this._root;`, "const context = new Context(this, { createElement: document.createElement.bind(document), get: () => undefined });"])];
+		if (cssVariableName) generatedCode.push(indent(`${ROOT_NODE}.adoptedStyleSheets = [${cssVariableName}];`));
 		for (let i = 0; i < this._ast.length; i++) {
-			const { code, functionsToProcess } = this._processNode(this._ast[i], ROOT_NODE, i.toString(), compilerContext, null);
-			functionsToProcess?.forEach((value, key) => this._nodeToProcess.set(key, value));
-			renderFunctions.push(...indent(code));
+			const result = this._processNode(this._ast[i], ROOT_NODE, i.toString(), compilerContext, null);
+			if (result) {
+				const { code, functionsToProcess } = result;
+				functionsToProcess?.forEach((value, key) => this._nodeToProcess.set(key, value));
+				generatedCode.push(...indent(code));
+			}
 		}
-		renderFunctions.push(...indent(["return context;"]), "}");
+		generatedCode.push(...indent(["return context;"]), "}");
 		for (const [key, fnData] of this._nodeToProcess.entries()) {
 			const { node, parentNode, context, precode, anchor } = fnData.fn;
-			renderFunctions.push(`\n${key}(${fnData.args?.join(", ")}) {`, ...indent(["const context = new Context(this, parentContext);"]));
-			if (precode) renderFunctions.push(indent(precode));
-			renderFunctions.push(...indent([...node.children.map((child, i) => {
-				const { code, functionsToProcess } = this._processNode(child, parentNode, i.toString(), context, anchor ?? null);
-				functionsToProcess?.forEach((value, key) => this._nodeToProcess.set(key, value));
-				return code;
+			generatedCode.push(`\n${key} (${fnData.args?.join(", ")}) {`, ...indent(["const context = new Context(this, parentContext);"]));
+			if (precode) generatedCode.push(indent(precode));
+			generatedCode.push(...indent([...node.children.map((child, i) => {
+				const result = this._processNode(child, parentNode, i.toString(), context, anchor ?? null);
+				if (result) {
+					const { code, functionsToProcess } = result;
+					functionsToProcess?.forEach((value, key) => this._nodeToProcess.set(key, value));
+					return code;
+				}
+				return "";
 			}).flat(), fnData.fn.isForBody ? "return { context, update };" : "return context;"]), "}");
 		}
-		return renderFunctions.join("\n");
+		return generatedCode.join("\n");
 	}
 	_processNode(node, parentNode, index, compilerContext, anchor) {
 		const state = this._states[node.type];
@@ -959,6 +982,11 @@ var LexerState = /* @__PURE__ */ function(LexerState) {
 	* Consuming a template-literal string inside `` {`...`} ``.
 	*/
 	LexerState["INTERPOLATION_LITERAL"] = "interpolation-literal";
+	/**
+	* Consuming an import statement `@import { X, Y, ... }
+	*/
+	LexerState["IMPORT"] = "import";
+	LexerState["IMPORT_PATH"] = "import-path";
 	return LexerState;
 }({});
 //#endregion
@@ -1051,10 +1079,12 @@ var TokenType = /* @__PURE__ */ function(TokenType) {
 	* The closing `}` of a flow-control block body.
 	*/
 	TokenType[TokenType["BLOCK_CLOSE"] = 20] = "BLOCK_CLOSE";
+	TokenType[TokenType["IMPORT"] = 21] = "IMPORT";
+	TokenType[TokenType["IMPORT_PATH"] = 22] = "IMPORT_PATH";
 	/**
 	* Sentinel token emitted when the end of the input is reached.
 	*/
-	TokenType[TokenType["EOF"] = 21] = "EOF";
+	TokenType[TokenType["EOF"] = 23] = "EOF";
 	return TokenType;
 }({});
 //#endregion
@@ -1397,6 +1427,9 @@ function lexFlowControl(cursor, _context) {
 			state: LexerState.FLOW_CONTROL_BLOCK,
 			tokens: [{ type: TokenType.DEFAULT }]
 		};
+	} else if (cursor.peekMatch("import ")) {
+		cursor.advance(7);
+		retVal = { state: LexerState.IMPORT };
 	}
 	return retVal;
 }
@@ -1427,6 +1460,81 @@ function lexFlowControlBlock(cursor, _context) {
 	};
 }
 //#endregion
+//#region ../packages/compiler/src/lexer/states/lex-import-path.state.ts
+function lexImportPath(cursor, _context) {
+	let read = true;
+	let path = "";
+	let retVal;
+	let singleQuote = false;
+	cursor.skipSpaces();
+	if (!cursor.peekMatch("from")) throw new Error(`Expected from keywork after list of imports at ${cursor.currentChar}`);
+	cursor.advance(4);
+	cursor.skipSpaces();
+	cursor.advance();
+	switch (cursor.currentChar.code) {
+		case 39:
+			singleQuote = true;
+			break;
+		case 34: break;
+		default: throw new Error(`Import statement must start with ' or ".\nFound character ${cursor.currentChar.value} at ${cursor.formattedPosition}`);
+	}
+	const delimiter = singleQuote ? 39 : 34;
+	while (read) switch (cursor.peek()) {
+		case delimiter:
+			cursor.advance();
+			read = false;
+			retVal = {
+				state: LexerState.TEXT,
+				tokens: [{
+					type: TokenType.IMPORT_PATH,
+					parts: [path]
+				}]
+			};
+			break;
+		default:
+			cursor.advance();
+			path = `${path}${cursor.currentChar.value}`;
+	}
+	return retVal;
+}
+//#endregion
+//#region ../packages/compiler/src/lexer/states/lex-import.state.ts
+function lexImport(cursor, _context) {
+	let read = true;
+	let importValue = "";
+	let retVal = {
+		state: LexerState.IMPORT_PATH,
+		tokens: []
+	};
+	cursor.skipSpaces();
+	cursor.advance();
+	if (cursor.currentChar.code !== 123) throw new Error(`Expected { after @import at ${cursor.formattedPosition}`);
+	while (read) switch (cursor.peek()) {
+		case 32:
+			cursor.skipSpaces();
+			break;
+		case 44:
+			addImport(retVal, cursor, importValue);
+			importValue = "";
+			break;
+		case 125:
+			addImport(retVal, cursor, importValue);
+			read = false;
+			break;
+		default:
+			cursor.advance();
+			importValue = `${importValue}${cursor.currentChar.value}`;
+	}
+	return retVal;
+}
+function addImport(retVal, cursor, value) {
+	cursor.advance();
+	retVal.tokens.push({
+		type: TokenType.IMPORT,
+		parts: [value]
+	});
+}
+//#endregion
 //#region ../packages/compiler/src/lexer/states/lex-interpolation-expression.state.ts
 /**
 * Consumes a JavaScript expression interpolation `{ expression }`, tracking nested
@@ -1456,10 +1564,7 @@ function lexInterpolationExpression(cursor, context) {
 				let state;
 				switch (previousState) {
 					case LexerState.ATTRIBUTE:
-						if (cursor.peek() !== 34) {
-							const { row, column } = cursor.position;
-							throw new Error(`Interpolation must be end with double quotes '"' Found ${String.fromCharCode(cursor.peek())} at ${cursor.formattedPosition}`);
-						}
+						if (cursor.peek() !== 34) throw new Error(`Interpolation must end with double quotes '"' Found ${String.fromCharCode(cursor.peek())} at ${cursor.formattedPosition}`);
 						cursor.advance();
 						state = LexerState.TAG_BODY;
 						break;
@@ -1516,6 +1621,8 @@ function lexInterpolationliteral(cursor, context) {
 				let state;
 				switch (previousState) {
 					case LexerState.ATTRIBUTE:
+						if (cursor.peek() !== 34) throw new Error(`Attribute interpolation expression must end with double quotes at ${cursor.formattedPosition}`);
+						cursor.advance();
 						state = LexerState.TAG_BODY;
 						break;
 					case LexerState.TEXT: state = LexerState.TEXT;
@@ -1663,7 +1770,7 @@ function lexTagOpenEnd(cursor, _context) {
 					parts: []
 				}]
 			};
-		} else throw new Error(`Unexpected character ${nextChar} for closing tag.\nExpected />\nRead of /${String.fromCharCode(nextChar)}\nAt line ${cursor.position.row + 1} col ${cursor.position.column + 1}`);
+		} else throw new Error(`Unexpected character ${nextChar} for closing tag.\nExpected />\nRead of /${String.fromCharCode(nextChar)} at ${cursor.formattedPosition}`);
 	}
 	return retVal;
 }
@@ -1972,7 +2079,9 @@ var Lexer = class {
 		[LexerState.FLOW_CONTROL_BLOCK]: lexFlowControlBlock,
 		[LexerState.INTERPOLATION]: lexInterpolation,
 		[LexerState.INTERPOLATION_EXPRESSION]: lexInterpolationExpression,
-		[LexerState.INTERPOLATION_LITERAL]: lexInterpolationliteral
+		[LexerState.INTERPOLATION_LITERAL]: lexInterpolationliteral,
+		[LexerState.IMPORT]: lexImport,
+		[LexerState.IMPORT_PATH]: lexImportPath
 	};
 	/**
 	* Creates a new Lexer instance for the given template content.
@@ -2043,7 +2152,7 @@ var ParserCursor = class {
 	/**
 	* Returns a read-only snapshot of the current token.
 	*/
-	getCcurrentToken() {
+	getCurrentToken() {
 		return this._currentToken;
 	}
 	/**
@@ -2241,6 +2350,7 @@ function isAllowedNode(node) {
 		case SyntaxKind.ShorthandPropertyAssignment:
 		case SyntaxKind.SpreadAssignment:
 		case SyntaxKind.SpreadElement:
+		case SyntaxKind.TaggedTemplateExpression:
 		case SyntaxKind.SyntaxList: return true;
 		default: return false;
 	}
@@ -2259,7 +2369,6 @@ function buildDisallowedMessage(node) {
 		case SyntaxKind.NewExpression: return "'new' is not allowed inside template expressions.";
 		case SyntaxKind.ArrowFunction:
 		case SyntaxKind.FunctionExpression: return "Function expressions are not allowed inside template expressions.";
-		case SyntaxKind.TaggedTemplateExpression: return "Tagged template expressions are not allowed inside template expressions.";
 		case SyntaxKind.BinaryExpression: return isAssignmentOperator(node.operatorToken.kind) ? "Assignments are not allowed inside template expressions. Use @const to declare local template variables instead." : `'${SyntaxKind[node.kind]}' is not allowed inside template expressions.`;
 		default: return `'${SyntaxKind[node.kind]}' is not allowed inside template expressions.`;
 	}
@@ -2340,7 +2449,7 @@ function parseEvent(cursor, _parseNode, token) {
 	const parameters = new Array();
 	while (cursor.peek().type === TokenType.EVENT_PAREMETER) {
 		cursor.advance();
-		parameters.push(validateExpression(cursor.getCcurrentToken().value.parts[0]).node);
+		parameters.push(validateExpression(cursor.getCurrentToken().value.parts[0]).node);
 	}
 	return {
 		name,
@@ -2640,6 +2749,21 @@ function parseIfOrElseIf(cursor, parseNode, token) {
 	};
 }
 //#endregion
+//#region ../packages/compiler/src/parser/states/parse-import.state.ts
+function parseImport(cursor, _parseNode, _token) {
+	const imports = new Array();
+	while (cursor.peek().type === TokenType.IMPORT) {
+		cursor.advance();
+		imports.push(cursor.getCurrentToken().value.parts[0]);
+	}
+	cursor.advance();
+	return {
+		type: ASTNodeType.Import,
+		values: imports,
+		path: cursor.getCurrentToken().value.parts[0]
+	};
+}
+//#endregion
 //#region ../packages/compiler/src/parser/states/parse-switch.state.ts
 /**
 * Parses a `@switch` directive, consuming the SWITCH token, the CONDITION token,
@@ -2722,7 +2846,6 @@ function parseText(cursor, _parseNode, token) {
 * to the Lexer rules. Parsing errors are thrown as exceptions.
 */
 var Parser = class {
-	tokens;
 	/**
 	* Internal cursor for navigating tokens
 	*/
@@ -2738,7 +2861,8 @@ var Parser = class {
 		[TokenType.TAG_OPEN_NAME]: parseElement,
 		[TokenType.IF]: parseIfControlFlow,
 		[TokenType.FOR]: parseForControlFlow,
-		[TokenType.SWITCH]: parseSwitchControlFlow
+		[TokenType.SWITCH]: parseSwitchControlFlow,
+		[TokenType.IMPORT]: parseImport
 	};
 	/**
 	* Creates a new Parser instance.
@@ -2746,8 +2870,7 @@ var Parser = class {
 	* @param tokens - Array of tokens produced by the Lexer.
 	*/
 	constructor(tokens) {
-		this.tokens = tokens;
-		this._cursor = new ParserCursor(this.tokens);
+		this._cursor = new ParserCursor(tokens);
 	}
 	/**
 	* Entry point for parsing the token stream into AST nodes.
@@ -2777,22 +2900,230 @@ var Parser = class {
 	}
 };
 //#endregion
+//#region ../packages/compiler/src/type-checker/states/type-check-element.state.ts
+function typeCheckElement(node, parentNode, index, context) {
+	const nodeName = getElementIdentifier(node, parentNode.identifier, index);
+	const retVal = {
+		code: [`let ${nodeName}!: HTMLElement`],
+		functionsToProcess: /* @__PURE__ */ new Map()
+	};
+	node.attributes.forEach(({ name, value }) => {
+		if (!(typeof value === "string")) retVal.code.push(`const ${nodeName}_${name} = ${resolveExpression(value.expression, context, { resolver: "root" })};`);
+	});
+	context.addUnresolvableIdentifier("$event");
+	node.events.forEach(({ name, handler, parameters }) => {
+		let parsedEventParameter = false;
+		const mappedParameters = parameters.map((parameter) => {
+			const resolvedParameter = resolveExpression(parameter, context, { resolver: "root" });
+			if (!parsedEventParameter && resolvedParameter === "$event") {
+				parsedEventParameter = true;
+				return `$event`;
+			} else return `${resolvedParameter}`;
+		}).join(", ");
+		const beginning = parsedEventParameter ? "($event)" : "()";
+		retVal.code.push(`const ${nodeName}_${name} = ${beginning} => root.${handler}(${mappedParameters})`);
+	});
+	return retVal;
+}
+//#endregion
+//#region ../packages/compiler/src/type-checker/states/type-check-for.state.ts
+function typeCheckFor(node, parentNode, index, compilerContext) {
+	const retVal = {
+		code: [],
+		functionsToProcess: /* @__PURE__ */ new Map()
+	};
+	const iterableSource = node.iterableSource;
+	const iterableExpr = compilerContext.hasIdentifier(iterableSource) ? iterableSource : `root.${iterableSource}`;
+	const itemsName = getTextIdentifier("items", parentNode.identifier, index);
+	const counterName = getTextIdentifier("i", parentNode.identifier, index);
+	const indexName = resolveImplicit(node, "$index");
+	const firstName = resolveImplicit(node, "$first");
+	const lastName = resolveImplicit(node, "$last");
+	const evenName = resolveImplicit(node, "$even");
+	const oddName = resolveImplicit(node, "$odd");
+	const forContext = new CompilerContext([
+		node.itemAlias,
+		[indexName, "signal"],
+		[firstName, "signal"],
+		[lastName, "signal"],
+		[evenName, "signal"],
+		[oddName, "signal"]
+	], compilerContext);
+	const forKey = getBlockIdentifier("for", parentNode.identifier, index);
+	retVal.functionsToProcess.set(forKey, {
+		fn: {
+			node,
+			parentNode,
+			context: forContext
+		},
+		args: [`${itemsName}: typeof ${iterableExpr}`, `${counterName}: number`]
+	});
+	retVal.code.push(`const ${forKey}_${itemsName} = ${iterableExpr}`);
+	retVal.code.push(`const ${forKey}_${node.itemAlias} = ${resolveExpression(node.trackExpression, forContext, {
+		skipResolution: true,
+		resolver: `${iterableExpr}`
+	})}`);
+	return retVal;
+}
+/**
+* Resolves the name that should be used in generated code for a given
+* implicit variable.
+*
+* If the template declared an explicit alias for the variable
+* (e.g. `; $index = i`) that alias is returned. Otherwise the default
+* implicit variable name (e.g. `$index`) is used.
+*
+* @param node - The `ForNode` whose implicit alias map is consulted.
+* @param implicit - The implicit variable to look up (e.g. `'$index'`).
+* @returns The alias string if one was declared, otherwise `implicit` itself.
+*/
+function resolveImplicit(node, implicit) {
+	return node.implicitAliases.get(implicit) ?? implicit;
+}
+//#endregion
+//#region ../packages/compiler/src/type-checker/states/type-check-if.state.ts
+function typeCheckIf(node, parentNode, index, compilerContext) {
+	const ifContext = new CompilerContext([], compilerContext);
+	const retVal = {
+		code: [],
+		functionsToProcess: /* @__PURE__ */ new Map()
+	};
+	const ifKey = getBlockIdentifier("if", parentNode.identifier, index);
+	retVal.code.push(`const ${ifKey} = ${resolveExpression(node.conditionNode, compilerContext, { resolver: "root" })};`);
+	retVal.functionsToProcess.set(ifKey, { fn: {
+		node,
+		parentNode,
+		context: ifContext
+	} });
+	let alt = node.alternate;
+	let i = 0;
+	while (alt?.type === ASTNodeType.ElseIf) {
+		const elseIfContext = new CompilerContext([], compilerContext);
+		const keyElseIf = getBlockIdentifier("elseIf", parentNode.identifier, `${index}_${i}`);
+		const conditionNode = alt.conditionNode;
+		retVal.code.push(`const ${keyElseIf} = ${resolveExpression(conditionNode, compilerContext, { resolver: "root" })};`);
+		retVal.functionsToProcess.set(keyElseIf, { fn: {
+			node: alt,
+			parentNode,
+			context: elseIfContext
+		} });
+		alt = alt.alternate;
+		i++;
+	}
+	if (alt) {
+		const elseContext = new CompilerContext([], compilerContext);
+		const keyElse = getBlockIdentifier("else", parentNode.identifier, index);
+		retVal.functionsToProcess.set(keyElse, { fn: {
+			node: alt,
+			parentNode,
+			context: elseContext
+		} });
+	}
+	return retVal;
+}
+//#endregion
+//#region ../packages/compiler/src/type-checker/states/type-check-switch.state.ts
+function typeCheckSwitch(node, parentNode, index, compilerContext) {
+	const retVal = {
+		code: [],
+		functionsToProcess: /* @__PURE__ */ new Map()
+	};
+	const expression = resolveExpression(node.expression, compilerContext, { resolver: "root" });
+	const keySwitch = getBlockIdentifier("switch", parentNode.identifier, index);
+	retVal.code.push(`const ${keySwitch} = ${expression};`);
+	node.children.forEach((caseNode, i) => {
+		const caseContext = new CompilerContext([], compilerContext);
+		const caseKey = caseNode.condition ? getBlockIdentifier("case", parentNode.identifier, `${index}_${i}`) : getBlockIdentifier("default", parentNode.identifier, index);
+		retVal.functionsToProcess.set(caseKey, { fn: {
+			node: caseNode,
+			parentNode,
+			context: caseContext
+		} });
+		caseNode.condition?.forEach((condition, i) => retVal.code.push(`const ${caseKey}_${i}: typeof ${expression} = ${condition};`));
+	});
+	return retVal;
+}
+//#endregion
+//#region ../packages/compiler/src/type-checker/states/type-check-text-and-interpolation.state.ts
+function typeCheckTextAndInterpolation(node, parentNode, index, compilerContext) {
+	return { code: [`const ${getTextIdentifier("text", parentNode.identifier, index)} = ${node.type === ASTNodeType.Text ? node.value : resolveExpression(node.expression, compilerContext, { resolver: "root" })};`] };
+}
+//#endregion
+//#region ../packages/compiler/src/type-checker/type-checker.ts
+var TypeChecker = class {
+	_ast;
+	_nodeToProcess = /* @__PURE__ */ new Map();
+	_states = {
+		[ASTNodeType.Text]: typeCheckTextAndInterpolation,
+		[ASTNodeType.Interpolation]: typeCheckTextAndInterpolation,
+		[ASTNodeType.Element]: typeCheckElement,
+		[ASTNodeType.If]: typeCheckIf,
+		[ASTNodeType.For]: typeCheckFor,
+		[ASTNodeType.Switch]: typeCheckSwitch,
+		[ASTNodeType.Import]: skipGeneration
+	};
+	constructor(_ast) {
+		this._ast = _ast;
+	}
+	generate(className) {
+		this._nodeToProcess.clear();
+		const context = new CompilerContext();
+		const generatedCode = ["function typeCheck() {"];
+		for (let i = 0; i < this._ast.length; i++) {
+			const result = this._processNode(this._ast[i], {
+				identifier: ROOT_NODE,
+				type: className
+			}, i.toString(), context);
+			if (result) {
+				const { code, functionsToProcess } = result;
+				functionsToProcess?.forEach((value, key) => this._nodeToProcess.set(key, value));
+				generatedCode.push(...indent(code));
+			}
+		}
+		generatedCode.push("}");
+		for (const [key, fnData] of this._nodeToProcess.entries()) {
+			const { node, parentNode, precode, context } = fnData.fn;
+			generatedCode.push(`\nfunction ${key} (${fnData.args?.join(", ") ?? ""}) {`);
+			if (precode) generatedCode.push(indent(precode));
+			generatedCode.push(...indent([...node.children.map((child, i) => {
+				const result = this._processNode(child, parentNode, i.toString(), context);
+				if (result) {
+					const { code, functionsToProcess } = result;
+					functionsToProcess?.forEach((value, key) => this._nodeToProcess.set(key, value));
+					return code;
+				}
+				return "";
+			}).flat()]), "}");
+		}
+		return generatedCode.join("\n");
+	}
+	_processNode(node, parentNode, index, context) {
+		const state = this._states[node.type];
+		if (!state) throw new Error(`[Parser] No transition function for token type ${ASTNodeType[node.type]}`);
+		return state(node, parentNode, index, context);
+	}
+};
+//#endregion
 //#region ../packages/compiler/src/compile.ts
 /**
-* Compiles a template string into a TypeScript render function body.
+* Compiles a template string into a Javascript render function body.
 *
 * Runs the three-stage pipeline:
 * 1. **Lexer** — tokenises the raw template text.
 * 2. **Parser** — transforms the token stream into an AST.
-* 3. **Render generator** — emits TypeScript source lines from the AST.
+* 3. **Render generator** — emits Javascript source lines from the AST.
 *
 * @param input - The raw HTML-like template source to compile.
 * @param cssVariableName - Optional name of the CSS variable to inject
 *   into the generated `adoptedStyleSheets` assignment.
-* @returns A string containing the compiled TypeScript render method body.
+* @returns A string containing the compiled Javascript render method body.
 */
-function compile(input, cssVariableName) {
-	return new Generator(new Parser(new Lexer(input).tokenize()).parse(), cssVariableName).generate();
+function compile(input, className, cssVariableName) {
+	const nodes = new Parser(new Lexer(input).tokenize()).parse();
+	return {
+		javascript: new Generator(nodes).generate(cssVariableName),
+		typescript: new TypeChecker(nodes).generate(className)
+	};
 }
 //#endregion
 export { compile };

package/package.json

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