Language server

.eslintrc.json

@@ -3,12 +3,12 @@
   "parserOptions": {
     "ecmaVersion": 12,
     "sourceType": "module",
-    "project": ["src/tsconfig.json"]
+    "project": ["server/tsconfig.json", "client/tsconfig.json"]
   },
   "plugins": ["@typescript-eslint"],
   "env": {
     "browser": false,
-    "es2021": true
+    "es2022": true
   },
   "extends": [
     "eslint:recommended",
@@ -169,7 +169,7 @@
     "no-script-url": "error",
     "no-self-compare": "error",
     "no-sequences": "error",
-    "no-shadow": "error",
+    "@typescript-eslint/no-shadow": "error",
     "no-shadow-restricted-names": "error",
     "no-spaced-func": "error",
     "no-sync": "error",
@@ -184,7 +184,7 @@
     "no-unmodified-loop-condition": "error",
     "no-unneeded-ternary": "error",
     "no-unused-expressions": "error",
-    "no-unused-vars": "error",
+    "@typescript-eslint/no-unused-vars": "error",
     "no-use-before-define": "off",
     "no-useless-call": "error",
     "no-useless-computed-key": "error",

.gitignore

@@ -6,3 +6,5 @@ dist
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.vscode/settings.json
+package-lock.json

.vscode/launch.json

@@ -1,16 +1,31 @@
 {
   "version": "0.2.0",
+
+  "compounds": [
+    {
+      "name": "1 Debug All",
+      "configurations": ["Extension Launch", "Server Attach"],
+      "stopAll": true
+    }
+  ],
   "configurations": [
     {
-      "args": [
-        "--extensionDevelopmentPath=${workspaceFolder}"
-      ],
-      "name": "Launch Extension",
+      "name": "Server Attach",
+      "port": 6009,
+      "timeout": 10000,
+      "request": "attach",
+      "skipFiles": ["<node_internals>/**"],
+      "type": "node"
+    },
+    {
+      "name": "Extension Launch",
+      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
       "outFiles": [
-        "${workspaceFolder}/dist/**/*.js"
+        "${workspaceFolder}/client/dist/**/*.js",
+        "${workspaceFolder}/server/dist/**/*.js"
       ],
       "request": "launch",
       "type": "extensionHost"
     }
   ]
-}
+}

README.md

@@ -50,6 +50,7 @@ To package and install the extension locally, run:
 
 ```sh
 npm install -g @vscode/vsce
+yarn installdep
 npm run dev
 ```
 

client/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "d2-extension-client",
+  "displayName": "D2",
+  "publisher": "Terrastruct",
+  "description": "Support for .d2 files.",
+  "version": "0.8.7",
+  "license": "BSD-3-Clause",
+  "contributors": [
+    "Barry Nolte <barry@barrynolte.com>"
+  ],
+  "engines": {
+    "vscode": "^1.73.0"
+  },
+  "devDependencies": {
+    "@types/glob": "^8.1.0",
+    "@types/markdown-it-container": "^2.0.9",
+    "@types/mocha": "^10.0.3",
+    "@types/node": "^20.8.10",
+    "@types/vscode": "^1.84.0",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
+    "@vscode/test-electron": "^2.3.6",
+    "@vscode/vsce": "^2.22.0",
+    "eslint": "8.36.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-formatter-pretty": "^4.1.0",
+    "eslint-webpack-plugin": "^4.0.1",
+    "glob": "^10.3.10",
+    "mocha": "^10.2.0",
+    "prettier": "^2.8.3",
+    "ts-loader": "^9.5.0",
+    "typescript": "^5.2.2",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4"
+  },
+  "dependencies": {
+    "markdown-it-container": "^4.0.0",
+    "path": "^0.12.7",
+    "vscode-languageclient": "^9.0.1"
+  },
+  "homepage": "https://d2lang.com",
+  "icon": "d2-icon.png",
+  "bugs": {
+    "url": "https://github.com/terrastruct/d2-vscode/issues",
+    "email": "info@terrastruct.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/terrastruct/d2-vscode"
+  }
+}

src/browserWindow.ts → client/src/browserWindow.ts

@@ -2,7 +2,7 @@ import { existsSync, readFileSync } from "fs";
 import * as path from "path";
 import { Uri, ViewColumn, Webview, WebviewPanel, window, workspace } from "vscode";
 import { D2P } from "./docToPreviewGenerator";
-import { extContext } from "./extension";
+import { extContext, previewGenerator } from "./extension";
 import { util } from "./utility";
 
 /**
@@ -37,6 +37,9 @@ export class BrowserWindow {
         localResourceRoots: [Uri.file(path.join(extContext.extensionPath, "pages"))],
       }
     );
+    this.webViewPanel.iconPath = Uri.file(
+      path.join(extContext.extensionPath, "d2-icon-small.png")
+    );
     this.webView = this.webViewPanel.webview;
 
     const onDiskPath = path.join(extContext.extensionPath, "pages/previewPage.html");
@@ -55,6 +58,9 @@ export class BrowserWindow {
     this.webViewPanel.webview.onDidReceiveMessage(
       (message) => {
         switch (message.command) {
+          case "refreshPage":
+            previewGenerator.generateAll();
+            break;
           case "clickOnTag_A": {
             const f = message.link.trim().toLowerCase();
             const isWeb: boolean = f.startsWith("http://") || f.startsWith("https://");

src/docToPreviewGenerator.ts → client/src/docToPreviewGenerator.ts

@@ -50,6 +50,12 @@ export class DocToPreviewGenerator {
     return this.mapOfConnection.get(inDoc);
   }
 
+  generateAll(): void {
+    this.mapOfConnection.forEach((_: D2P, td: TextDocument) => {
+      this.generate(td);
+    });
+  }
+
   generate(inDoc: TextDocument): void {
     const trkObj = this.getTrackObject(inDoc);
     // if we can't find our tracking info, no sense doing anything
@@ -77,7 +83,7 @@ export class DocToPreviewGenerator {
     trkObj.outputDoc.showBusy();
 
     taskRunner.genTask(trkObj.inputDoc?.fileName, fileText, (data, error) => {
-      const p = path.parse(trkObj.inputDoc?.fileName || "");
+      const p = path.parse(trkObj.inputDoc?.fileName ?? "");
 
       if (data.length > 0) {
         trkObj.outputDoc?.setSvg(data);
@@ -89,7 +95,17 @@ export class DocToPreviewGenerator {
 
         let list = "";
         arr.forEach((s) => {
-          list += `<li>${s}</li>`;
+          if (s.length > 0) {
+            /*
+              Matches: "error:0:0: message" or
+                       "warning:100:20:explaination"
+            */
+            const rg = new RegExp(/^(.*?):(\d+):(\d+):(\s+)(.*)$/g).exec(s);
+            const msg = rg !== null ? rg[5] : s;
+            const line = rg ? rg[2] ?? "0" : "0";
+            const col = rg ? rg[3] ?? "0" : "0";
+            list += `<li>${msg}  (${line}:${col})</li>`;
+          }
         });
 
         trkObj.outputDoc?.setToastMsg("Errors");

src/extension.ts → client/src/extension.ts

@@ -19,27 +19,37 @@ import {
 
 import { DocToPreviewGenerator } from "./docToPreviewGenerator";
 import { D2OutputChannel } from "./outputChannel";
-import * as mdItContainer from "markdown-it-container";
 import { layoutPicker } from "./layoutPicker";
 import { themePicker } from "./themePicker";
 import { TaskRunner } from "./taskRunner";
 import { d2Tasks } from "./tasks";
 import { util } from "./utility";
 import path = require("path");
 import { TextEncoder } from "util";
+import markdownContainer = require("markdown-it-container");
+import {
+  LanguageClient,
+  LanguageClientOptions,
+  ServerOptions,
+  TransportKind,
+} from "vscode-languageclient/node";
 
 const d2Ext = "d2";
 const d2Lang = "d2";
-const previewGenerator: DocToPreviewGenerator = new DocToPreviewGenerator();
+const pluginKeyword = "d2";
+let langClient: LanguageClient;
 
+export const previewGenerator: DocToPreviewGenerator = new DocToPreviewGenerator();
 export const d2ConfigSection = "D2";
 export let ws: WorkspaceConfiguration = workspace.getConfiguration(d2ConfigSection);
 export const outputChannel: D2OutputChannel = new D2OutputChannel();
 export const taskRunner: TaskRunner = new TaskRunner();
 export let extContext: ExtensionContext;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function activate(context: ExtensionContext): any {
+export type ExtAny = any;
+
+export function activate(context: ExtensionContext): ExtAny {
   extContext = context;
 
   context.subscriptions.push(
@@ -236,40 +246,103 @@ export function activate(context: ExtensionContext): any {
     util.checkForD2Install();
   }
 
+  startLanguageServer();
+
   // Return our markdown renderer
   return {
     // Sets up our ability to render for markdown files
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    extendMarkdownIt(md: any) {
-      return extendMarkdownItWithD2(md);
+    extendMarkdownIt(md: markdownit) {
+      extendMarkdownItWithD2(md);
+      return md;
     },
   };
 }
 
-const pluginKeyword = "d2";
+/**
+ * This starts the D2 Language Server
+ */
+function startLanguageServer(): void {
+  // The server is implemented in node
+  const serverModule = extContext.asAbsolutePath(
+    path.join("server", "dist", "server.js")
+  );
+  // The debug options for the server
+  // --inspect=6009: runs the server in Node's Inspector mode so VS Code can attach to the server for debugging
+  const debugOptions = { execArgv: ["--nolazy", "--inspect=6009"] };
+
+  // If the extension is launched in debug mode then the debug server options are used
+  // Otherwise the run options are used
+  const serverOptions: ServerOptions = {
+    run: {
+      module: serverModule,
+      transport: TransportKind.ipc,
+    },
+    debug: {
+      module: serverModule,
+      transport: TransportKind.ipc,
+      options: debugOptions,
+    },
+  };
+
+  const clientOptions: LanguageClientOptions = {
+    // Register the server for D2 documents
+    documentSelector: [{ scheme: "file", language: d2Lang }],
+    synchronize: {
+      configurationSection: d2ConfigSection,
+    },
+  };
+
+  // Create the language client and start the client.
+  langClient = new LanguageClient(
+    "D2LanguageServer",
+    "D2-Language Server",
+    serverOptions,
+    clientOptions
+  );
+
+  langClient.start();
+  // langClient.onNotification("foo", (param: string) => {
+  //   console.log(`OnNotification: ${param}`)
+  // });
+}
+
+/**
+ * Checks to see if the language server is up and running
+ * so features can be turned on/off appropriately
+ */
+export function isLanguageServerRunning(): boolean {
+  if (langClient.initializeResult === undefined) {
+    return false;
+  }
+  return true;
+}
 
 /**
- *
  * This function will be asked by the Markdown system to render
  * a d2 snippit in a markdown file
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function extendMarkdownItWithD2(md: any): unknown {
-  md.use(mdItContainer, pluginKeyword, {});
+export function extendMarkdownItWithD2(md: ExtAny) {
+  md.use(markdownContainer, pluginKeyword, {
+    anyClass: true,
+    validate: (info: string) => {
+      return info.trim() === pluginKeyword;
+    },
+  });
 
-  const highlight = md.options.highlight;
+  const nextHighlighter = md.options.highlight;
   md.options.highlight = (code: string, lang: string) => {
     if (lang === d2Lang) {
       const activeEditor = path.parse(
         window.activeTextEditor?.document.fileName ?? ""
       ).dir;
 
-      return d2Tasks.compile(code, activeEditor, (msg) => {
+      const retText = d2Tasks.compile(code, activeEditor, (msg) => {
         outputChannel.appendInfo(msg);
       });
+
+      return `<pre><div>${retText}</div></pre>`;
     }
-    return highlight(code, lang);
+    return nextHighlighter(code, lang);
   };
-
   return md;
 }

src/refreshTimer.ts → client/src/refreshTimer.ts

@@ -13,7 +13,7 @@ import { ws } from "./extension";
 type TimerCallback = () => void;
 
 export class RefreshTimer {
-  timerId?: NodeJS.Timer;
+  timerId?: NodeJS.Timeout;
   callback: TimerCallback;
   interval = 0;
 

src/taskRunner.ts → client/src/taskRunner.ts

@@ -11,7 +11,7 @@ import {
   tasks,
   TaskScope,
 } from "vscode";
-import { outputChannel } from "./extension";
+import { isLanguageServerRunning, outputChannel } from "./extension";
 import { d2Tasks } from "./tasks";
 
 // eslint-disable-next-line no-unused-vars
@@ -41,7 +41,9 @@ export class TaskRunner {
       "D2 Task",
       "D2 Extension",
       ce,
-      ["$D2Matcher"]
+      // If the languange server is not running, fall back to the
+      // standard problem matcher
+      isLanguageServerRunning() ? undefined : ["$D2Matcher"]
     );
 
     task.presentationOptions = {