@xaendar/compiler 0.7.29 → 0.7.31

package/dist/xaendar-compiler.es.js

@@ -1,5 +1,8 @@
 import { Stack, indent } from "@xaendar/common";
-import { ScriptTarget, SyntaxKind, createSourceFile, forEachChild, isExpressionStatement, isIdentifier, isPropertyAccessExpression, isPropertyAssignment } from "typescript";
+import { ScriptTarget, SyntaxKind, createSourceFile, forEachChild, getNameOfDeclaration, isAccessor, isArrayLiteralExpression, isCallExpression, isClassDeclaration, isExpressionStatement, isIdentifier, isObjectLiteralExpression, isPropertyAccessExpression, isPropertyAssignment, isStringLiteral } from "typescript";
+//#region \0rolldown/runtime.js
+var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
+//#endregion
 //#region ../packages/compiler/src/parser/types/node.enum.ts
 /**
 * Discriminant values that identify the type of each AST node produced by the parser.
@@ -154,7 +157,7 @@ var CompilerContext = class {
 	* @returns `true` if the identifier exists in the scope chain, `false` otherwise.
 	*/
 	hasUnresolvableIdentifier(name) {
-		return this._unresolvableIdentifiers.includes(name);
+		return this._unresolvableIdentifiers.includes(name) || (this._parent?.hasUnresolvableIdentifier(name) ?? false);
 	}
 };
 //#endregion
@@ -1514,6 +1517,7 @@ function lexImport(cursor, _context) {
 	while (read) switch (cursor.peek()) {
 		case 32:
 			cursor.skipSpaces();
+			if (importValue && cursor.peek() !== 44 && cursor.peek() !== 125) importValue = `${importValue} `;
 			break;
 		case 44:
 			addImport(retVal, cursor, importValue);
@@ -1812,7 +1816,7 @@ function lexTagOpenName(cursor, _context) {
 	return retVal;
 }
 //#endregion
-//#region ../packages/compiler/src/utils/chars.utils.ts
+//#region ../packages/compiler/src/lexer/utils/chars.utils.ts
 /**
 * Checks whether a string contains at least one non-whitespace character.
 *
@@ -2752,19 +2756,57 @@ function parseIfOrElseIf(cursor, parseNode, token) {
 }
 //#endregion
 //#region ../packages/compiler/src/parser/states/parse-import.state.ts
+/**
+* Parses an `@import` statement.
+*
+* Extracts specifiers with optional aliases and maps them to structured
+* `ImportSpecifier` objects. Supports:
+* - `foo` → imported: 'foo', local: 'foo'
+* - `foo as bar` → imported: 'foo', local: 'bar'
+* - `default as D` → imported: 'default', local: 'D'
+* - `* as ns` → imported: '*', local: 'ns'
+*/
 function parseImport(cursor, _parseNode, _token) {
-	const imports = new Array();
+	const specifiers = new Array();
 	while (cursor.peek().type === TokenType.IMPORT) {
 		cursor.advance();
-		imports.push(cursor.getCurrentToken().value.parts[0]);
+		const rawSpecifier = cursor.getCurrentToken().value.parts[0];
+		const specifier = parseSpecifier(rawSpecifier);
+		specifiers.push(specifier);
 	}
 	cursor.advance();
 	return {
 		type: ASTNodeType.Import,
-		values: imports,
+		specifiers,
 		path: cursor.getCurrentToken().value.parts[0]
 	};
 }
+/**
+* Parses a single import specifier string.
+*
+* @param raw - The raw specifier string (may include 'as' alias).
+* @returns An `ImportSpecifier` with `imported` and `local` fields.
+* @throws If the specifier format is invalid.
+*/
+function parseSpecifier(raw) {
+	const trimmed = raw.trim();
+	const namespaceMatch = trimmed.match(/^\*\s+as\s+([A-Za-z_$][\w$]*)$/);
+	if (namespaceMatch) return {
+		imported: "*",
+		local: namespaceMatch[1]
+	};
+	const defaultMatch = trimmed.match(/^default\s+as\s+([A-Za-z_$][\w$]*)$/);
+	if (defaultMatch) return {
+		imported: "default",
+		local: defaultMatch[1]
+	};
+	const namedMatch = trimmed.match(/^([A-Za-z_$][\w$]*)(?:\s+as\s+([A-Za-z_$][\w$]*))?$/);
+	if (namedMatch) return {
+		imported: namedMatch[1],
+		local: namedMatch[2] ?? namedMatch[1]
+	};
+	throw new Error(`[Parser] Invalid import specifier "${raw}".`);
+}
 //#endregion
 //#region ../packages/compiler/src/parser/states/parse-switch.state.ts
 /**
@@ -2902,27 +2944,148 @@ var Parser = class {
 	}
 };
 //#endregion
+//#region ../packages/compiler/src/type-checker/models/type-checker-context.ts
+/**
+* Type checker context that manages imported component and directive metadata
+* for the compilation process. Extends the base CompilerContext to provide
+* import-specific functionality.
+*/
+var TypeCheckContext = class extends CompilerContext {
+	/**
+	* Array of component and directive imports to be tracked during type checking.
+	* Stores metadata extracted from @WebComponent and @Directive decorators.
+	*/
+	_imports = new Array();
+	/**
+	* Adds a new component or directive import to the type checker context.
+	*
+	* @param value - The component or directive import metadata to be added
+	*/
+	addImport(value) {
+		this._imports.push(value);
+	}
+	/**
+	* Retrieves all registered component and directive imports.
+	*
+	* @returns Array of all tracked imports
+	*/
+	getImportBySelector(tagName) {
+		return this._imports.find((importValue) => importValue.type === "component" && importValue.selectors.includes(tagName));
+	}
+};
+//#endregion
 //#region ../packages/compiler/src/type-checker/states/type-check-element.state.ts
 /**
 * Type-checks an element node: its attribute/property bindings, its event
 * handlers, and recursively its children.
 *
+* Two completely different validation paths, depending on the tag:
+*
+* - **Native tags** (`div`, `button`, ...): bindings are just resolved
+*   expressions/handler calls, exactly as before — there's no component
+*   contract to check them against.
+* - **Custom elements** (tag contains a hyphen): every binding is checked
+*   by NAME against the `@Property`/`@Event` metadata extracted from the
+*   imported component class. An unknown name is a hard error (the
+*   template is binding to something the component doesn't expose) — not
+*   a warning, consistent with the "no matching @import" check already in
+*   place for the tag itself.
+*
 * 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, processNode, context) {
 	const lines = new Array();
-	node.attributes.forEach(({ value }) => {
-		if (typeof value !== "string") lines.push(`${resolveExpression(value.expression, context, { resolver: "root" })};`);
+	if (isCustomElementTag(node.tagName)) {
+		const metadata = context.getImportBySelector(node.tagName);
+		if (!metadata) throw new Error(`[Type Checker] ${node.tagName} selector is not associated to any WebComponent imported in the template`);
+		lines.push(...typeCheckComponentBindings(node, metadata, context));
+	} else {
+		node.attributes.forEach(({ value }) => {
+			if (typeof value !== "string") lines.push(`${resolveExpression(value.expression, context, { resolver: "root" })};`);
+		});
+		node.events.forEach(({ handler, parameters }) => {
+			const eventContext = new CompilerContext([], context);
+			eventContext.addUnresolvableIdentifier("$event");
+			const args = parameters.map((parameter) => resolveExpression(parameter, eventContext, { resolver: "root" })).join(", ");
+			lines.push(`root.${handler}(${args});`);
+		});
+	}
+	node.children.forEach((child) => lines.push(...processNode(child, context)));
+	return lines;
+}
+/**
+* Validates every attribute/property and event binding on a custom-element
+* node against the `@Property`/`@Event` metadata of the resolved component.
+*
+* Property values are checked with `satisfies` against `property.type` —
+* chosen over a typed `const` so an unused local never shows up if the
+* consuming project has `noUnusedLocals` enabled. Event handlers get a
+* block-scoped `$event` typed from `event.detailType`, wrapped in its own
+* `{ }` block so multiple event bindings on sibling elements never clash
+* on the `$event` name.
+*
+* ⚠️ Assumptions I couldn't verify against your actual types — please
+* confirm/adjust:
+* - `node.events` entries carry a `name` field (the template-facing event
+*   name used to look up `@Event` metadata), the same way attributes carry
+*   `name`. The snippets I've seen only destructured `handler`/`parameters`
+*   for events, never `name` — if the field is called something else,
+*   swap it in `findEvent`'s call site below.
+* - Literal string attribute values (`value` is a plain `string`, no
+*   `{ expression }`) are only checked for NAME existence, not type — I
+*   don't validate e.g. `collapsed="true"` against a `boolean` property,
+*   since I don't know whether your DSL treats un-bound string attributes
+*   as always-string or allows some literal coercion syntax. Flagging
+*   rather than guessing.
+* - `property.type`/`event.detailType` are text that must resolve as a
+*   standalone type expression in the shim's scope (e.g. `'NavItem[]'`
+*   requires `NavItem` to be importable there too, not just the component
+*   class). If your shim only imports the component class today, custom
+*   exported types referenced by `type`/`detailType` will fail to resolve
+*   as "cannot find name" — unrelated to the actual binding being right or
+*   wrong. Worth double-checking against a component that has a non-
+*   primitive `@Property` type, like `NavItem[]` in your own example.
+*/
+function typeCheckComponentBindings(node, metadata, context) {
+	const lines = new Array();
+	node.attributes.forEach(({ name, value }) => {
+		const property = findProperty(metadata, name);
+		if (!property) throw new Error(`[Type Checker] Unknown property "${name}" on <${node.tagName}> (${metadata.className} has no @Property with this name or alias).`);
+		if (typeof value === "string") return;
+		const expression = resolveExpression(value.expression, context, { resolver: "root" });
+		lines.push(property.type ? `(${expression}) satisfies ${property.type};` : `${expression};`);
 	});
-	node.events.forEach(({ handler, parameters }) => {
-		const args = parameters.map((parameter) => resolveExpression(parameter, context, { resolver: "root" })).join(", ");
-		lines.push(`root.${handler}(${args});`);
+	node.events.forEach(({ name, handler, parameters }) => {
+		const event = findEvent(metadata, name);
+		if (!event) throw new Error(`[Type Checker] Unknown event "${name}" on <${node.tagName}> (${metadata.className} has no @Event with this name).`);
+		const eventContext = new CompilerContext([], context);
+		eventContext.addUnresolvableIdentifier("$event");
+		const args = parameters.map((parameter) => resolveExpression(parameter, eventContext, { resolver: "root" })).join(", ");
+		lines.push("{");
+		lines.push(`  let $event!: ${event.detailType ?? "unknown"};`);
+		lines.push(`  root.${handler}(${args});`);
+		lines.push("}");
 	});
-	node.children.forEach((child) => lines.push(...processNode(child, context)));
 	return lines;
 }
+function findProperty(metadata, externalName) {
+	return metadata.properties.find((property) => (property.alias ?? property.name) === externalName);
+}
+function findEvent(metadata, externalName) {
+	return metadata.events.find((event) => event.name === externalName);
+}
+/**
+* Returns true if `tagName` has the shape of a custom element (per the
+* Custom Elements spec: contains a hyphen). This is a pure classification
+* check — it does NOT validate whether the name is actually usable as a
+* new custom element (reserved names, etc.); use `isValidCustomElementName`
+* for that, at declaration time.
+*/
+function isCustomElementTag(tagName) {
+	return /^[a-z][a-z0-9._\-]*-[a-z0-9._\-]*$/.test(tagName);
+}
 //#endregion
 //#region ../packages/compiler/src/type-checker/states/type-check-for.state.ts
 /**
@@ -2936,7 +3099,7 @@ function typeCheckElement(node, processNode, context) {
 * function boundary needed.
 */
 function typeCheckFor(node, processNode, context) {
-	const forContext = new CompilerContext([], context);
+	const forContext = new TypeCheckContext([], context);
 	const indexName = resolveImplicit(node, "$index");
 	const firstName = resolveImplicit(node, "$first");
 	const lastName = resolveImplicit(node, "$last");
@@ -3014,6 +3177,43 @@ function typeCheckIf(node, processNode, context) {
 	return lines;
 }
 //#endregion
+//#region ../packages/compiler/src/type-checker/states/type-check-import.state.ts
+/**
+* Type-checks an `@import` node.
+*
+* Emits a typed variable declaration for each specifier so symbols are
+* available in template expressions. Metadata extraction (component/directive
+* decorator analysis) happens in a separate async phase via
+* `TypeChecker.populateImportMetadata()`.
+*/
+function typeCheckImport(node, _processNode, _context) {
+	const source = node.path;
+	const escapedSource = escapeTypeString(source);
+	const lines = new Array();
+	for (const specifier of node.specifiers) {
+		const { imported, local } = specifier;
+		switch (imported) {
+			case "*":
+				lines.push(`let ${local}!: typeof import('${escapedSource}');`);
+				break;
+			case "default":
+				lines.push(`let ${local}!: typeof import('${escapedSource}')['default'];`);
+				break;
+			default:
+				const escapedImported = escapeTypeString(imported);
+				lines.push(`let ${local}!: typeof import('${escapedSource}')['${escapedImported}'];`);
+				break;
+		}
+	}
+	return lines;
+}
+/**
+* Escapes path/specifier text for safe use in TS single-quoted type strings.
+*/
+function escapeTypeString(value) {
+	return value.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+}
+//#endregion
 //#region ../packages/compiler/src/type-checker/states/type-check-switch.state.ts
 /**
 * Type-checks a `@switch` block using a real TypeScript `switch` statement.
@@ -3052,6 +3252,174 @@ function typeCheckTextAndInterpolation(node, _processNode, context) {
 	return node.type === ASTNodeType.Interpolation ? [`${resolveExpression(node.expression, context, { resolver: "root" })};`] : [];
 }
 //#endregion
+//#region ../packages/compiler/src/type-checker/utils/component-metadata-extractor.ts
+var import___vite_browser_external = (/* @__PURE__ */ __commonJSMin(((exports, module) => {
+	module.exports = {};
+})))();
+/**
+* Extracts component metadata from a source file by parsing decorators.
+* 
+* @param modulePath - The import module path (e.g., './button.component')
+* @param symbolName - The exported symbol name to look for
+* @param baseDir - The directory context for resolving relative paths
+* @returns Component metadata if found, undefined otherwise
+*/
+async function extractComponentMetadata(modulePath, symbolName, baseDir = process.cwd()) {
+	try {
+		const filePath = resolveModulePath(modulePath, baseDir);
+		if (!filePath) return;
+		const sourceFile = createSourceFile(filePath, await (0, import___vite_browser_external.readFile)(filePath, "utf8"), ScriptTarget.Latest, true);
+		let componentMetadata;
+		forEachChild(sourceFile, (node) => {
+			if (componentMetadata) return;
+			if (isClassDeclaration(node)) {
+				const className = node.name?.text;
+				if (className !== symbolName) return;
+				const modifiers = node.modifiers ?? [];
+				const webComponentDecorator = Array.from(modifiers).find((member) => isWebComponentDecorator(member));
+				if (!webComponentDecorator) return;
+				const selectors = extractSelectorsFromDecorator(webComponentDecorator);
+				if (!selectors?.length) return;
+				const properties = new Array();
+				const events = new Array();
+				node.members.forEach((member) => {
+					if (!isAccessor(member)) return;
+					const memberModifiers = member.modifiers ?? [];
+					const propDecorator = Array.from(memberModifiers).find((member) => isPropertyDecorator(member));
+					if (propDecorator) {
+						const nameNode = getNameOfDeclaration(member);
+						const propName = nameNode && isIdentifier(nameNode) ? nameNode.text : void 0;
+						if (propName) {
+							const metadata = extractPropertyMetadata(propName, propDecorator);
+							if (metadata) properties.push(metadata);
+						}
+						return;
+					}
+					const eventDecorator = Array.from(memberModifiers).find((member) => isEventDecorator(member));
+					if (eventDecorator) {
+						const nameNode = getNameOfDeclaration(member);
+						const eventName = nameNode && isIdentifier(nameNode) ? nameNode.text : void 0;
+						if (eventName) {
+							const metadata = extractEventMetadata(eventName, eventDecorator);
+							if (metadata) events.push(metadata);
+						}
+					}
+				});
+				componentMetadata = {
+					type: "component",
+					className,
+					selectors,
+					properties,
+					events
+				};
+			}
+		});
+		return componentMetadata;
+	} catch (error) {
+		console.error(`Failed to extract component metadata from ${modulePath}:`, error);
+		return;
+	}
+}
+/**
+* Resolves a module import path to an actual file system path.
+* Handles both relative paths (./button.component) and package paths (@scope/pkg).
+* 
+* @param modulePath - The import module path
+* @param baseDir - The directory to resolve relative imports from
+* @returns The resolved file path, or undefined if not found
+*/
+function resolveModulePath(modulePath, baseDir) {
+	if (modulePath.startsWith(".")) {
+		const resolvedPath = (0, import___vite_browser_external.resolve)(baseDir, modulePath);
+		if ((0, import___vite_browser_external.existsSync)(`${resolvedPath}.ts`)) return resolvedPath + ".ts";
+		if ((0, import___vite_browser_external.existsSync)(`${resolvedPath}/index.ts`)) return `${resolvedPath}/index.ts`;
+		if ((0, import___vite_browser_external.existsSync)(resolvedPath)) return resolvedPath;
+	}
+}
+/**
+* Checks if a modifier is a @WebComponent decorator.
+*/
+function isWebComponentDecorator(modifier) {
+	if (modifier.kind !== SyntaxKind.Decorator) return false;
+	const expr = isCallExpression(modifier.expression) ? modifier.expression.expression : modifier.expression;
+	return isIdentifier(expr) && expr.text === "WebComponent";
+}
+/**
+* Checks if a modifier is a @Property decorator.
+*/
+function isPropertyDecorator(modifier) {
+	if (modifier.kind !== SyntaxKind.Decorator) return false;
+	const expr = modifier.expression;
+	if (isCallExpression(expr)) return isIdentifier(expr.expression) && expr.expression.text === "Property";
+	if (isPropertyAccessExpression(expr)) return isIdentifier(expr.expression) && expr.expression.text === "Property" && isIdentifier(expr.name) && expr.name.text === "required";
+	return isIdentifier(expr) && expr.text === "Property";
+}
+/**
+* Checks if a modifier is an @Event decorator.
+*/
+function isEventDecorator(modifier) {
+	if (modifier.kind !== SyntaxKind.Decorator) return false;
+	const expr = isCallExpression(modifier.expression) ? modifier.expression.expression : modifier.expression;
+	return isIdentifier(expr) && expr.text === "Event";
+}
+/**
+* Extracts selector(s) from @WebComponent decorator arguments.
+* 
+* @example
+* @WebComponent({ selector: 'my-button' })
+* @WebComponent({ selector: ['my-btn', 'button-el'] })
+*/
+function extractSelectorsFromDecorator(modifier) {
+	try {
+		const expr = modifier.expression;
+		if (!isCallExpression(expr)) return [];
+		const args = expr.arguments;
+		if (args.length === 0) return [];
+		const arg = args[0];
+		if (!arg || !isObjectLiteralExpression(arg)) return [];
+		return extractStringOrStringArray(Array.from(arg.properties).find((prop) => isPropertyAssignment(prop) && isIdentifier(prop.name) && prop.name.text === "selector").initializer);
+	} catch {
+		return [];
+	}
+}
+/**
+* Extracts a string or string array value from a TypeScript node.
+*/
+function extractStringOrStringArray(node) {
+	if (isStringLiteral(node)) return [node.text];
+	return isArrayLiteralExpression(node) ? node.elements?.filter((node) => isStringLiteral(node)).map((node) => node.text) : [];
+}
+/**
+* Extracts property metadata from @Property or @Property.required decorator.
+*/
+function extractPropertyMetadata(propName, modifier) {
+	const metadata = {
+		name: propName,
+		required: false
+	};
+	const expr = modifier.expression;
+	if (isPropertyAccessExpression(expr)) {
+		if (isIdentifier(expr.name) && expr.name.text === "required") metadata.required = true;
+	}
+	if (isCallExpression(expr)) {
+		const args = expr.arguments;
+		if (args.length) {
+			const arg = args[0];
+			if (isObjectLiteralExpression(arg)) {
+				const aliasNode = arg.properties?.find((prop) => isPropertyAssignment(prop) && isIdentifier(prop.name) && prop.name.text === "alias");
+				if (aliasNode && isStringLiteral(aliasNode.initializer)) metadata.alias = aliasNode.initializer.text;
+			}
+		}
+	}
+	return metadata;
+}
+/**
+* Extracts event metadata from @Event decorator.
+*/
+function extractEventMetadata(eventName, modifier) {
+	return { name: eventName };
+}
+//#endregion
 //#region ../packages/compiler/src/type-checker/type-checker.ts
 /**
 * Generates a single, flat TypeScript function body ("shim") from a
@@ -3077,6 +3445,7 @@ function typeCheckTextAndInterpolation(node, _processNode, context) {
 */
 var TypeChecker = class {
 	_ast;
+	_context = new TypeCheckContext();
 	_states = {
 		[ASTNodeType.Text]: typeCheckTextAndInterpolation,
 		[ASTNodeType.Interpolation]: typeCheckTextAndInterpolation,
@@ -3084,12 +3453,29 @@ var TypeChecker = class {
 		[ASTNodeType.If]: typeCheckIf,
 		[ASTNodeType.For]: typeCheckFor,
 		[ASTNodeType.Switch]: typeCheckSwitch,
-		[ASTNodeType.Import]: skipGeneration
+		[ASTNodeType.Import]: typeCheckImport
 	};
 	constructor(_ast) {
 		this._ast = _ast;
 	}
 	/**
+	* Pre-populates the shared context with component and directive metadata
+	* by parsing source files for all `@import` nodes in the AST.
+	*
+	* Must be awaited before calling `generate()` if metadata-driven
+	* validation (e.g. unknown component inputs) is desired.
+	*
+	* @param baseDir - Absolute path used to resolve relative import paths.
+	*/
+	async populateImportMetadata(baseDir) {
+		const importNodes = this._ast.filter((node) => node.type === ASTNodeType.Import);
+		await Promise.all(importNodes.flatMap((node) => node.specifiers.filter(({ imported }) => imported !== "*").map(async ({ imported, local }) => {
+			const symbolName = imported === "default" ? local : imported;
+			const metadata = await extractComponentMetadata(node.path, symbolName, baseDir);
+			if (metadata) this._context.addImport(metadata);
+		})));
+	}
+	/**
 	* Generates the full `function typeCheck() { ... }` shim body for the
 	* component's template.
 	*
@@ -3097,12 +3483,14 @@ var TypeChecker = class {
 	* 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.
+	* 
+	* @param baseDir - Absolute path used to resolve relative import paths
 	*/
-	generate() {
-		const body = this._ast.flatMap((node) => this._processNode(node));
+	generate(baseDir) {
+		this.populateImportMetadata(baseDir);
 		return [
 			"function typeCheck() {",
-			...indent(body.some((line) => line.includes("$event")) ? ["let $event!: Event;", ...body] : body),
+			...indent(this._ast.flatMap((node) => this._processNode(node, this._context))),
 			"}"
 		].join("\n");
 	}

package/package.json

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