feat(Compiler,LSP): Implement Extensibility

extension/.vscodeignore

@@ -12,5 +12,6 @@ vsc-extension-quickstart.md
 **/.eslintrc.json
 **/*.map
 **/*.ts
+!types/**/*.d.ts
 RESEARCH.md
 package-lock.json

extension/package.json

@@ -2,7 +2,7 @@
   "name": "phpx-language-support",
   "displayName": "PHPX Language Support",
   "description": "Syntax highlighting and language support for PHPX - JSX-like syntax for PHP",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "publisher": "attitude",
   "license": "MIT",
   "engines": {

extension/src/extension.ts

@@ -13,6 +13,14 @@ import {
 	PHPXRenameProvider,
 	PHPXImplementationProvider,
 } from './providers';
+import {
+	initTsxQuery,
+	disposeTsxQuery,
+	getTsxAttributeCompletions,
+	getTsxAttributeHover,
+	detectTagAtCursor,
+	detectTagAndAttributeAtCursor,
+} from './tsxQuery';
 
 const PHPX_SELECTOR: vscode.DocumentSelector = {
 	language: 'phpx',
@@ -48,6 +56,83 @@ export function activate(context: vscode.ExtensionContext) {
 		}
 	}
 
+	// ─── TypeScript JSX attribute query ──────────────────────────────────────
+	//
+	// Initialises a small virtual TypeScript project using phpx-intrinsics.d.ts
+	// (the PHPX JSX type declarations, no React) in the extension's global
+	// storage directory.  This lets us query VS Code's built-in TypeScript
+	// language service for per-element HTML attribute completions and types.
+	//
+	// The query is purely additive — if the TypeScript server is unavailable
+	// the PHPX LSP's own completions continue to work unchanged.
+	// ─────────────────────────────────────────────────────────────────────────
+
+	// Fire-and-forget: initialisation happens async so activation stays fast
+	initTsxQuery(context).catch((err) => {
+		outputChannel.appendLine(`[PHPX] TSX query init error: ${err}`);
+	});
+
+	// Supplementary completion provider: queries TypeScript for per-element
+	// HTML attribute types and merges them with the PHPX LSP's own suggestions.
+	context.subscriptions.push(
+		vscode.languages.registerCompletionItemProvider(
+			PHPX_SELECTOR,
+			{
+				async provideCompletionItems(
+					document: vscode.TextDocument,
+					position: vscode.Position,
+				): Promise<vscode.CompletionItem[] | undefined> {
+					const tagName = detectTagAtCursor(document, position);
+					if (!tagName) {
+						return undefined;
+					}
+
+					// Only trigger for HTML intrinsic elements (lowercase first char)
+					if (tagName[0] !== tagName[0].toLowerCase() || tagName[0] === tagName[0].toUpperCase()) {
+						return undefined;
+					}
+
+					return getTsxAttributeCompletions(tagName);
+				},
+			},
+			' ',  // trigger on space (same as PHPX LSP)
+			'\n', // and newline (for multi-line attribute lists)
+		),
+	);
+
+	// Supplementary hover provider: queries TypeScript for attribute type info
+	// when hovering over an HTML attribute name inside a PHPX tag.
+	context.subscriptions.push(
+		vscode.languages.registerHoverProvider(
+			PHPX_SELECTOR,
+			{
+				async provideHover(
+					document: vscode.TextDocument,
+					position: vscode.Position,
+				): Promise<vscode.Hover | undefined> {
+					const hit = detectTagAndAttributeAtCursor(document, position);
+					if (!hit) {
+						return undefined;
+					}
+
+					const markdown = await getTsxAttributeHover(hit.tagName, hit.attrName);
+					if (!markdown) {
+						return undefined;
+					}
+
+					const range = new vscode.Range(
+						position.line, hit.attrStart,
+						position.line, hit.attrEnd,
+					);
+					return new vscode.Hover(
+						new vscode.MarkdownString(markdown),
+						range,
+					);
+				},
+			},
+		),
+	);
+
 	// ─── Compilation pipeline ────────────────────────────────────────────────
 	//
 	// The compiler creates a shadow .php file for each .phpx file. This is
@@ -307,6 +392,9 @@ export async function deactivate() {
 	}
 	compilationTimers.clear();
 
+	// Clean up the TypeScript JSX attribute query environment
+	disposeTsxQuery();
+
 	// Stop the PHPX Language Server
 	await stopLanguageClient();
 }