feat: graplix tagged string literal support for .ts, .tsx files

Author: tonyfromundefined

.changeset/four-spiders-take.md

@@ -0,0 +1,5 @@
+---
+"graplix-vscode-extension": minor
+---
+
+feat: graplix tagged string literal support for .ts, .tsx files

packages/vscode-extension/package.json

@@ -33,12 +33,28 @@
     "build": "tsdown && vsce package --no-dependencies",
     "watch": "tsdown --watch"
   },
+  "activationEvents": [
+    "onLanguage:graplix",
+    "onLanguage:typescript",
+    "onLanguage:typescriptreact"
+  ],
   "contributes": {
     "grammars": [
       {
         "language": "graplix",
         "scopeName": "source.graplix",
         "path": "./syntaxes/graplix.tmLanguage.json"
+      },
+      {
+        "scopeName": "graplix.injection",
+        "path": "./syntaxes/graplix-template.injection.json",
+        "injectTo": [
+          "source.ts",
+          "source.tsx"
+        ],
+        "embeddedLanguages": {
+          "meta.embedded.inline.graplix": "graplix"
+        }
       }
     ],
     "languages": [
@@ -62,13 +78,13 @@
     "vscode-languageserver": "^9.0.1"
   },
   "devDependencies": {
-    "@types/vscode": "^1.109.0",
+    "@types/vscode": "^1.80.0",
     "@vscode/vsce": "^3.7.1",
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
     "vscode": "^1.1.37"
   },
   "engines": {
-    "vscode": "^1.109.0"
+    "vscode": "^1.80.0"
   }
 }

packages/vscode-extension/src/extension.ts

@@ -1,5 +1,6 @@
 import * as path from "node:path";
-import type { ExtensionContext } from "vscode";
+import { parse } from "@graplix/language";
+import * as vscode from "vscode";
 import {
   LanguageClient,
   type LanguageClientOptions,
@@ -8,11 +9,271 @@ import {
 } from "vscode-languageclient/node";
 
 let client: LanguageClient;
+const validationTimers = new Map<string, ReturnType<typeof setTimeout>>();
+let outputChannel: vscode.OutputChannel | undefined;
+
+interface GraplixTemplate {
+  readonly startOffset: number;
+  readonly endOffset: number;
+  readonly content: string;
+  readonly hasInterpolation: boolean;
+}
+
+function extractGraplixTemplates(text: string): readonly GraplixTemplate[] {
+  const templates: GraplixTemplate[] = [];
+  const tag = "graplix";
+
+  const isIdentifierCharacter = (char: string | undefined): boolean => {
+    return char !== undefined && /[A-Za-z0-9_$]/.test(char);
+  };
+
+  const skipWhitespaceAndComments = (startIndex: number): number => {
+    let index = startIndex;
+
+    while (index < text.length) {
+      const char = text[index];
+      const next = text[index + 1];
+
+      if (char === " " || char === "\t" || char === "\r" || char === "\n") {
+        index += 1;
+        continue;
+      }
+
+      if (char === "/" && next === "/") {
+        index += 2;
+        while (index < text.length && text[index] !== "\n") {
+          index += 1;
+        }
+        continue;
+      }
+
+      if (char === "/" && next === "*") {
+        index += 2;
+        while (index + 1 < text.length) {
+          if (text[index] === "*" && text[index + 1] === "/") {
+            index += 2;
+            break;
+          }
+          index += 1;
+        }
+        continue;
+      }
+
+      break;
+    }
+
+    return index;
+  };
+
+  let searchIndex = 0;
+
+  while (searchIndex < text.length) {
+    const matchIndex = text.indexOf(tag, searchIndex);
+    if (matchIndex < 0) {
+      break;
+    }
+
+    const previous = text[matchIndex - 1];
+    const nextAfterTag = text[matchIndex + tag.length];
+    if (
+      isIdentifierCharacter(previous) ||
+      isIdentifierCharacter(nextAfterTag)
+    ) {
+      searchIndex = matchIndex + tag.length;
+      continue;
+    }
+
+    const templateDelimiterIndex = skipWhitespaceAndComments(
+      matchIndex + tag.length,
+    );
+    if (text[templateDelimiterIndex] !== "`") {
+      searchIndex = matchIndex + tag.length;
+      continue;
+    }
+
+    const templateStart = templateDelimiterIndex + 1;
+    let cursor = templateStart;
+    let hasInterpolation = false;
+
+    while (cursor < text.length) {
+      const char = text[cursor];
+
+      if (char === "\\") {
+        cursor += 2;
+        continue;
+      }
+
+      if (char === "$" && text[cursor + 1] === "{") {
+        hasInterpolation = true;
+        cursor += 2;
+        let interpolationDepth = 1;
+
+        while (cursor < text.length && interpolationDepth > 0) {
+          const interpolationChar = text[cursor];
+          if (interpolationChar === "\\") {
+            cursor += 2;
+            continue;
+          }
+          if (interpolationChar === "{") {
+            interpolationDepth += 1;
+          } else if (interpolationChar === "}") {
+            interpolationDepth -= 1;
+          }
+          cursor += 1;
+        }
+
+        continue;
+      }
+
+      if (char === "`") {
+        templates.push({
+          startOffset: templateStart,
+          endOffset: cursor,
+          content: text.slice(templateStart, cursor),
+          hasInterpolation,
+        });
+        break;
+      }
+
+      cursor += 1;
+    }
+
+    searchIndex = cursor + 1;
+  }
+
+  return templates;
+}
+
+function severityToVscode(
+  severity: number | undefined,
+): vscode.DiagnosticSeverity {
+  if (severity === 1) {
+    return vscode.DiagnosticSeverity.Error;
+  }
+  if (severity === 2) {
+    return vscode.DiagnosticSeverity.Warning;
+  }
+  if (severity === 3) {
+    return vscode.DiagnosticSeverity.Information;
+  }
+  if (severity === 4) {
+    return vscode.DiagnosticSeverity.Hint;
+  }
+
+  return vscode.DiagnosticSeverity.Error;
+}
+
+async function validateGraplixTemplates(
+  document: vscode.TextDocument,
+  collection: vscode.DiagnosticCollection,
+): Promise<void> {
+  if (
+    document.languageId !== "typescript" &&
+    document.languageId !== "typescriptreact"
+  ) {
+    collection.delete(document.uri);
+    return;
+  }
+
+  const version = document.version;
+  const templates = extractGraplixTemplates(document.getText());
+  const diagnostics: vscode.Diagnostic[] = [];
+
+  for (const [index, template] of templates.entries()) {
+    const startPosition = document.positionAt(template.startOffset);
+
+    if (template.hasInterpolation) {
+      const interpolationDiagnostic = new vscode.Diagnostic(
+        new vscode.Range(
+          startPosition,
+          document.positionAt(template.endOffset),
+        ),
+        "graplix tagged template with interpolation is not validated.",
+        vscode.DiagnosticSeverity.Warning,
+      );
+      interpolationDiagnostic.source = "graplix";
+      diagnostics.push(interpolationDiagnostic);
+      continue;
+    }
+
+    const ext = "graplix";
+    const filename = `template-${encodeURIComponent(document.uri.toString())}-${index}.${ext}`;
+
+    const graplixDocument = await parse(template.content, {
+      documentUri: `memory://graplix/${filename}`,
+      validation: true,
+    });
+
+    for (const issue of graplixDocument.diagnostics ?? []) {
+      const issueRange = issue.range;
+      const range =
+        issueRange === undefined
+          ? new vscode.Range(startPosition, startPosition)
+          : new vscode.Range(
+              new vscode.Position(
+                startPosition.line + issueRange.start.line,
+                issueRange.start.line === 0
+                  ? startPosition.character + issueRange.start.character
+                  : issueRange.start.character,
+              ),
+              new vscode.Position(
+                startPosition.line + issueRange.end.line,
+                issueRange.end.line === 0
+                  ? startPosition.character + issueRange.end.character
+                  : issueRange.end.character,
+              ),
+            );
+
+      const diagnostic = new vscode.Diagnostic(
+        range,
+        issue.message,
+        severityToVscode(issue.severity),
+      );
+      diagnostic.source = "graplix";
+      diagnostics.push(diagnostic);
+    }
+  }
+
+  if (version !== document.version) {
+    return;
+  }
+
+  collection.set(document.uri, diagnostics);
+}
+
+function scheduleTemplateValidation(
+  document: vscode.TextDocument,
+  collection: vscode.DiagnosticCollection,
+): void {
+  const key = document.uri.toString();
+  const pending = validationTimers.get(key);
+  if (pending !== undefined) {
+    clearTimeout(pending);
+  }
+
+  validationTimers.set(
+    key,
+    setTimeout(async () => {
+      validationTimers.delete(key);
+      try {
+        await validateGraplixTemplates(document, collection);
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        outputChannel?.appendLine(
+          `[graplix-template] validation failed for ${document.uri.toString()}: ${message}`,
+        );
+      }
+    }, 120),
+  );
+}
 
 /**
  * Activates the Graplix VS Code extension and starts the language client.
  */
-export function activate(context: ExtensionContext) {
+export function activate(context: vscode.ExtensionContext) {
+  outputChannel = vscode.window.createOutputChannel("Graplix");
+  context.subscriptions.push(outputChannel);
+
   // The server is implemented in node
   const serverModule = context.asAbsolutePath(
     path.join("dist", "language-server.cjs"),
@@ -52,6 +313,40 @@ export function activate(context: ExtensionContext) {
 
   // Start the client. This will also launch the server
   client.start();
+
+  const diagnostics =
+    vscode.languages.createDiagnosticCollection("graplix-template");
+  context.subscriptions.push(diagnostics);
+
+  for (const document of vscode.workspace.textDocuments) {
+    scheduleTemplateValidation(document, diagnostics);
+  }
+
+  context.subscriptions.push(
+    vscode.workspace.onDidOpenTextDocument((document) => {
+      scheduleTemplateValidation(document, diagnostics);
+    }),
+    vscode.workspace.onDidChangeTextDocument((event) => {
+      scheduleTemplateValidation(event.document, diagnostics);
+    }),
+    vscode.workspace.onDidCloseTextDocument((document) => {
+      diagnostics.delete(document.uri);
+      const key = document.uri.toString();
+      const pending = validationTimers.get(key);
+      if (pending !== undefined) {
+        clearTimeout(pending);
+        validationTimers.delete(key);
+      }
+    }),
+    vscode.workspace.onDidSaveTextDocument((document) => {
+      scheduleTemplateValidation(document, diagnostics);
+    }),
+    vscode.window.onDidChangeActiveTextEditor((editor) => {
+      if (editor !== undefined) {
+        scheduleTemplateValidation(editor.document, diagnostics);
+      }
+    }),
+  );
 }
 
 /**