Merge pull request #70 from tmr232/vscode-vite

Unify VSCode & JetBrains WebView Code

.github/workflows/build.yaml

@@ -33,7 +33,9 @@ jobs:
       - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v2
 
-      - run: bun install --production
+      - run: bun install
+
+      - run: bun build-webview
 
       - run: bun run package
 
@@ -59,9 +61,9 @@ jobs:
       - uses: oven-sh/setup-bun@v2
 
       - run: bun install
-      - run: bun build-jetbrains
+      - run: bun build-webview
 
       - uses: actions/upload-artifact@v4
         with:
           name: "Jetbrains"
-          path: "./dist/jetbrains/"
+          path: "./dist/webview/"

.vscode/tasks.json

@@ -3,7 +3,7 @@
   "tasks": [
     {
       "type": "bun",
-      "script": "bun run --cwd ${workspaceFolder} ./scripts/build-with-esbuild.ts",
+      "script": "bun run --cwd ${workspaceFolder} ./scripts/build-with-esbuild.ts && bun build-webview",
       "problemMatcher": [],
       "label": "bun: build",
       "detail": "bun run ./scripts/build-with-esbuild.ts - package.json",

.vscodeignore

@@ -8,7 +8,5 @@
 !CHANGELOG.md
 !LICENSE.txt
 !README.md
-!webview-content/*
-!parsers/*
 !media/icon.png
 !media/svg/view-icon.svg

CHANGELOG.md

@@ -15,6 +15,13 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
 ### Fixed
 
 - `finally` blocks are now supported in TypeScript. 
+- Methods are now supported in TypeScript.
+
+### Changed
+
+- VSCode and JetBrains now use the same WebView content.
+- Placeholder ("Hello, World!") graph colors are now determined by the color scheme.
+- VSCode settings now applied instantly to the graph.
 
 ## [0.0.13] - 2025-01-06
 

eslint.config.js

@@ -11,7 +11,7 @@ export default tseslint.config(
       "dist",
       "webview-content",
       "src/frontend",
-      "src/jetbrains",
+      "src/webview",
       "src/render",
       "src/demo",
       "src/components",

package.json

@@ -66,7 +66,7 @@
     "demo": "bun run --cwd ./src/demo/ vite",
     "build-demo": "bun run --cwd ./src/demo/ vite build",
     "build-render": "bun run --cwd ./src/render/ vite build",
-    "build-jetbrains": "bun run --cwd ./src/jetbrains/ vite build",
+    "build-webview": "bun run --cwd src/webview/ vite build",
     "oxlint-fix": "bunx oxlint --ignore-path=oxlint-ignore.txt --fix -D correctness -D perf -D suspicious -A no-await-in-loop",
     "oxlint-ci": "bunx oxlint --ignore-path=oxlint-ignore.txt  -D correctness -D perf -D suspicious -A no-await-in-loop",
     "prettier-format": "bunx prettier **/*.svelte --write",

src/components/Jetbrains.svelte → src/components/WebviewRenderer.svelte

@@ -104,12 +104,17 @@
     options: RenderOptions,
     colorList: ColorList,
   ) {
+    console.log("Rendering!", codeAndOffset, colorList);
+    const bgcolor = colorList.find(
+      ({ name }) => name === "graph.background",
+    ).hex;
+    const color = colorList.find(({ name }) => name === "node.highlight").hex;
     try {
       if (codeAndOffset === null) {
-        svg = graphviz.dot(`digraph G { 
-    bgcolor="#2B2D30"
-    node [color="#e0e0e0", fontcolor="#e0e0e0"]
-    edge [color="#e0e0e0"]
+        svg = graphviz.dot(/*DOT*/ `digraph G {
+    bgcolor="${bgcolor}"
+    node [color="${color}", fontcolor="${color}"]
+    edge [color="${color}"]
     Hello -> World 
 }`);
       } else {
@@ -146,10 +151,6 @@
       offset: cfg.graph.getNodeAttribute(target.id, "startOffset"),
     });
   }
-
-  export function applyColors(colors: ColorList) {
-    colorList = colors;
-  }
 </script>
 
 {#await initialize() then}

src/control-flow/cfg.ts

@@ -61,15 +61,13 @@ export const functionNodeTypes: { [language in Language]: string[] } = {
   TypeScript: [
     "function_declaration",
     "arrow_function",
+    "method_definition",
     "function_expression",
     "generator_function",
     "generator_function_declaration",
   ],
-  TSX: [
-    "function_declaration",
-    "arrow_function",
-    "function_expression",
-    "generator_function",
-    "generator_function_declaration",
-  ],
+  // We copy the TypeScript values here
+  TSX: [],
 };
+
+functionNodeTypes.TSX = functionNodeTypes.TypeScript;