Bring up-to-date, directly call Viz from extension.ts, bump 0.1.0

package.json

@@ -2,7 +2,7 @@
   "name": "graphviz-markdown-preview",
   "displayName": "Graphviz Markdown Preview",
   "description": "Adds Graphviz support to VSCode's builtin markdown preview",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "publisher": "geeklearningio",
   "engines": {
     "vscode": "^1.20.0"
@@ -19,28 +19,23 @@
     "markdown.previewStyles": [
       "./graphviz.css"
     ],
-    "markdown.previewScripts": [
-      "./node_modules/viz.js/viz.js",
-      "./node_modules/viz.js/full.render.js",
-      "./graphviz-render.js"
-    ],
     "markdown.markdownItPlugins": true
   },
   "scripts": {
     "vscode:prepublish": "npm run compile",
     "compile": "tsc -p ./",
     "watch": "tsc -watch -p ./",
-    "postinstall": "node ./node_modules/vscode/bin/install",
-    "test": "npm run compile && node ./node_modules/vscode/bin/test"
+    "test": "npm run compile"
   },
   "devDependencies": {
+    "@types/markdown-it": "^14.1.2",
     "@types/mocha": "^2.2.42",
     "@types/node": "^7.0.43",
-    "typescript": "^3.5.2",
-    "vscode": "^1.1.35"
+    "@types/vscode": "^1.20.0",
+    "typescript": "^5.7.2"
   },
   "dependencies": {
-    "viz.js": "^2.1.2"
+    "@viz-js/viz": "^3.11.0"
   },
   "repository": {
     "type": "git",

src/extension.ts

@@ -2,28 +2,36 @@
 // The module 'vscode' contains the VS Code extensibility API
 // Import the module and reference it with the alias vscode in your code below
 import * as vscode from 'vscode';
+import * as vizMod from '@viz-js/viz';
+import type MarkdownIt from 'markdown-it';
 
 // this method is called when your extension is activated
 // your extension is activated the very first time the command is executed
-export function activate(context: vscode.ExtensionContext) {
+export async function activate(context: vscode.ExtensionContext) {
+    const viz = await vizMod.instance()
 
     // Use the console to output diagnostic information (console.log) and errors (console.error)
     // This line of code will only be executed once when your extension is activated
     console.log('Congratulations, your extension "graphviz-markdown-preview" is now active!');
     return {
 
-        extendMarkdownIt(md) {
+        extendMarkdownIt(md: MarkdownIt) {
 
             const highlight = md.options.highlight;
 
-            md.options.highlight = (code, lang) => {
+            md.options.highlight = (code, lang, attrs) => {
 
                 if (lang && lang.match(/\bgraphviz\b/i)) {
-
-                    return `<div class="graphviz">${code}</div>`;
+                    try {
+                        return '<pre style="all:unset;">'
+                        + viz.renderString(code, { engine: 'dot', format: 'svg' })
+                        + '</pre>';
+                    } catch (e) {
+                        return `<pre><code>${e.message}</code></pre>`;
+                    }
                 }
 
-                return highlight(code, lang);
+                return highlight(code, lang, attrs);
 
             };
 
@@ -36,4 +44,4 @@ export function activate(context: vscode.ExtensionContext) {
 
 // this method is called when your extension is deactivated
 export function deactivate() {
-}
+}

tsconfig.json

@@ -7,10 +7,12 @@
             "es6"
         ],
         "sourceMap": true,
-        "rootDir": "src"
+        "rootDir": "src",
+        "skipLibCheck": true,
+        "allowSyntheticDefaultImports": true
     },
     "exclude": [
         "node_modules",
         ".vscode-test"
     ]
-}
+}