@xaendar/compiler 0.7.24 → 0.7.25

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

@@ -11,7 +11,7 @@
  *   into the generated `adoptedStyleSheets` assignment.
  * @returns A string containing the compiled Javascript render method body.
  */
-export declare function compile(input: string, className: string, cssVariableName?: string): {
+export declare function compile(input: string, cssVariableName?: string): {
     javascript: string;
     typescript: string;
 };

package/dist/xaendar-compiler.es.js

@@ -907,7 +907,7 @@ var Generator = class {
 	}
 	_processNode(node, parentNode, index, compilerContext, anchor) {
 		const state = this._states[node.type];
-		if (!state) throw new Error(`[Parser] No transition function for token type ${ASTNodeType[node.type]}`);
+		if (!state) throw new Error(`[Generator] No transition function for token type ${ASTNodeType[node.type]}`);
 		return state(node, parentNode, index, compilerContext, anchor);
 	}
 };
@@ -2901,49 +2901,43 @@ 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" })};`);
+/**
+* Type-checks an element node: its attribute/property bindings, its event
+* handlers, and recursively its children.
+*
+* No variable is declared for the element itself (see the module doc on
+* `TypeChecker` for why) — attribute expressions and event calls are
+* emitted as bare statements, validated in place.
+*/
+function typeCheckElement(node, context, index, processNode) {
+	const lines = [];
+	node.attributes.forEach(({ value }) => {
+		if (typeof value !== "string") lines.push(`${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});`);
+	node.events.forEach(({ handler, parameters }) => {
+		const args = parameters.map((parameter) => resolveExpression(parameter, context, { resolver: "root" })).join(", ");
+		lines.push(`root.${handler}(${args});`);
 	});
-	if (node.children.length) retVal.functionsToProcess.set(`${nodeName}Children`, { fn: {
-		node,
-		parentNode: {
-			identifier: nodeName,
-			type: "HTMLElement"
-		},
-		context
-	} });
-	return retVal;
+	node.children.forEach((child, i) => {
+		lines.push(...processNode(child, context, i.toString()));
+	});
+	return lines;
 }
 //#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);
+/**
+* Type-checks an `@for` block using a real `for...of` loop.
+*
+* This replaces the previous "synthetic function with a `typeof array`
+* parameter" trick, which mistyped the loop variable as the *whole array*
+* rather than a single element. A real `for (const item of array)` lets
+* TypeScript infer `item`'s type correctly as the array's element type —
+* exactly like it would for a loop written by hand — with no synthetic
+* function boundary needed.
+*/
+function typeCheckFor(node, context, index, processNode) {
+	const iterableExpr = context.hasIdentifier(node.iterableSource) ? node.iterableSource : `root.${node.iterableSource}`;
 	const indexName = resolveImplicit(node, "$index");
 	const firstName = resolveImplicit(node, "$first");
 	const lastName = resolveImplicit(node, "$last");
@@ -2956,25 +2950,20 @@ function typeCheckFor(node, parentNode, index, compilerContext) {
 		[lastName, "signal"],
 		[evenName, "signal"],
 		[oddName, "signal"]
-	], compilerContext);
-	const forKey = getBlockIdentifier("for", parentNode.identifier, index);
-	retVal.functionsToProcess.set(forKey, {
-		fn: {
-			node,
-			parentNode: {
-				identifier: forKey,
-				type: "HTMLElement"
-			},
-			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;
+	], context);
+	const lines = [];
+	lines.push(`for (const ${node.itemAlias} of ${iterableExpr}) {`);
+	lines.push(...indent([
+		`let ${indexName}!: number;`,
+		`let ${firstName}!: boolean;`,
+		`let ${lastName}!: boolean;`,
+		`let ${evenName}!: boolean;`,
+		`let ${oddName}!: boolean;`,
+		`${resolveExpression(node.trackExpression, forContext, { resolver: "root" })};`,
+		...node.children.flatMap((child, i) => processNode(child, forContext, i.toString()))
+	]));
+	lines.push("}");
+	return lines;
 }
 /**
 * Resolves the name that should be used in generated code for a given
@@ -2993,89 +2982,109 @@ function resolveImplicit(node, 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: {
-			identifier: ifKey,
-			type: "HTMLElement"
-		},
-		context: ifContext
-	} });
+/**
+* Type-checks an `@if`/`@else if`/`@else` chain using real TypeScript
+* `if` / `else if` / `else` blocks.
+*
+* This is a genuine correctness improvement over the previous
+* sibling-functions approach, not just a simplification: a real
+* `if`/`else if` chain gives the TS compiler's control-flow analysis the
+* negated narrowing of every preceding condition for free (e.g. inside an
+* `else if`, TS already knows the first condition was false) — something
+* flat sibling functions could never express.
+*/
+function typeCheckIf(node, context, index, processNode) {
+	const lines = [];
+	const condition = resolveExpression(node.conditionNode, context, { resolver: "root" });
+	const ifContext = new CompilerContext([], context);
+	lines.push(`if (${condition}) {`);
+	lines.push(...indent(node.children.flatMap((child, i) => processNode(child, ifContext, i.toString()))));
+	lines.push("}");
 	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: {
-				identifier: keyElseIf,
-				type: "HTMLElement"
-			},
-			context: elseIfContext
-		} });
+		const elseIfCondition = resolveExpression(alt.conditionNode, context, { resolver: "root" });
+		const elseIfContext = new CompilerContext([], context);
+		lines.push(`else if (${elseIfCondition}) {`);
+		lines.push(...indent(alt.children.flatMap((child, i) => processNode(child, elseIfContext, i.toString()))));
+		lines.push("}");
 		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: {
-				identifier: getBlockIdentifier("else", parentNode.identifier, index),
-				type: "HTMLElement"
-			},
-			context: elseContext
-		} });
+		const elseContext = new CompilerContext([], context);
+		lines.push("else {");
+		lines.push(...indent(alt.children.flatMap((child, i) => processNode(child, elseContext, i.toString()))));
+		lines.push("}");
 	}
-	return retVal;
+	return lines;
 }
 //#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};`);
+/**
+* Type-checks a `@switch` block using a real TypeScript `switch` statement.
+*
+* This drops the previous `const case_0: typeof switchExpr = 'literal';`
+* trick entirely: a real `switch (expr) { case 'literal': ... }` already
+* makes TS validate that each case value is assignable to the switch
+* expression's type as part of ordinary switch-statement semantics — and,
+* as a bonus, narrows the switch expression's type inside each case block
+* (e.g. from a `'loading' | 'error' | 'idle'` union down to just
+* `'loading'`), which the previous approach never provided.
+*
+* Multiple case labels that shared one body in the AST (fallthrough) are
+* emitted as stacked `case` labels sharing that same body, matching real
+* JS/TS fallthrough syntax directly.
+*/
+function typeCheckSwitch(node, context, index, processNode) {
+	const lines = [`switch (${resolveExpression(node.expression, context, { resolver: "root" })}) {`];
 	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: {
-				identifier: caseKey,
-				type: "HTMLElement"
-			},
-			context: caseContext
-		} });
-		caseNode.condition?.forEach((condition, i) => retVal.code.push(`const ${caseKey}_${i}: typeof ${expression} = ${condition};`));
+		const caseContext = new CompilerContext([], context);
+		if (caseNode.condition?.length) caseNode.condition.forEach((conditionValue) => {
+			lines.push(`  case ${conditionValue}:`);
+		});
+		else lines.push("  default:");
+		lines.push(...indent(indent([...caseNode.children.flatMap((child, ci) => processNode(child, caseContext, ci.toString())), "break;"])));
 	});
-	return retVal;
+	lines.push("}");
+	return lines;
 }
 //#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" })};`] };
+/**
+* Type-checks a text or interpolation node.
+*
+* Plain text nodes carry no expression, so they produce no lines. An
+* interpolation's expression is emitted as a bare statement — enough for
+* TS to validate it, with no name needing to be bound to the result.
+*/
+function typeCheckTextAndInterpolation(node, context, index, processNode) {
+	return node.type === ASTNodeType.Interpolation ? [`${resolveExpression(node.expression, context, { resolver: "root" })};`] : [];
 }
 //#endregion
 //#region ../packages/compiler/src/type-checker/type-checker.ts
+/**
+* Generates a single, flat TypeScript function body ("shim") from a
+* template AST, meant only to be fed to the TS compiler / LanguageService
+* for diagnostics — it is never executed and never emitted as real output.
+*
+* This deliberately does NOT mirror the JS code generator's structure:
+*
+* - No variable is declared per HTML element. Element identifiers exist in
+*   the JS output purely so runtime code can create/reference the actual
+*   DOM node; a type-check expression never references "the element
+*   itself" (the DSL has no template-ref syntax), so an `HTMLElement`
+*   local would add zero type-checking value.
+* - No control-flow block gets its own function. In the JS output, each
+*   `@if`/`@for`/`@switch` becomes a separate function because it needs
+*   its own runtime closure over the `Context` chain. The type checker has
+*   no runtime at all, so real, nested TypeScript blocks — `if`, `for`,
+*   `switch` — give correct scoping and (as a bonus) real control-flow
+*   narrowing, for free, with no synthetic machinery.
+*
+* Every AST node turns directly into TypeScript lines, recursively, inside
+* one single `typeCheck()` function.
+*/
 var TypeChecker = class {
 	_ast;
-	_nodeToProcess = /* @__PURE__ */ new Map();
 	_states = {
 		[ASTNodeType.Text]: typeCheckTextAndInterpolation,
 		[ASTNodeType.Interpolation]: typeCheckTextAndInterpolation,
@@ -3088,43 +3097,34 @@ var TypeChecker = class {
 	constructor(_ast) {
 		this._ast = _ast;
 	}
-	generate(className) {
-		this._nodeToProcess.clear();
+	/**
+	* Generates the full `function typeCheck() { ... }` shim body for the
+	* component's template.
+	*
+	* A `let $event!: Event;` declaration is prepended only if the generated
+	* body actually references `$event` (event handler bindings), so shims
+	* for templates with no event bindings don't carry an unused local —
+	* relevant if the consuming project has `noUnusedLocals` enabled.
+	*/
+	generate() {
 		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(", ") ?? ""}): void {`);
-			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");
+		const body = this._ast.flatMap((node, i) => this._processNode(node, context, i.toString()));
+		return [
+			"function typeCheck() {",
+			...indent(body.some((line) => line.includes("$event")) ? ["let $event!: Event;", ...body] : body),
+			"}"
+		].join("\n");
 	}
-	_processNode(node, parentNode, index, context) {
+	/**
+	* Dispatches a single AST node to its state function, passing itself
+	* back down as `processNode` so state functions can recurse into their
+	* own children inline.
+	*/
+	_processNode = (node, context, index) => {
 		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);
-	}
+		if (!state) throw new Error(`[Type Checker] No transition function for token type ${ASTNodeType[node.type]}`);
+		return state(node, context, index, this._processNode);
+	};
 };
 //#endregion
 //#region ../packages/compiler/src/compile.ts
@@ -3141,11 +3141,11 @@ var TypeChecker = class {
 *   into the generated `adoptedStyleSheets` assignment.
 * @returns A string containing the compiled Javascript render method body.
 */
-function compile(input, className, cssVariableName) {
+function compile(input, cssVariableName) {
 	const nodes = new Parser(new Lexer(input).tokenize()).parse();
 	return {
 		javascript: new Generator(nodes).generate(cssVariableName),
-		typescript: new TypeChecker(nodes).generate(className)
+		typescript: new TypeChecker(nodes).generate()
 	};
 }
 //#endregion

package/package.json

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