editor/code: Allow to Type Checking "show crate graph" webview code

rust-lang · Jul 11, 2023 · 4ef41cb · 4ef41cb
1 parent c32d72a
commit 4ef41cb
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 36 deletions.
diff --git a/editors/code/build.mjs b/editors/code/build.mjs
@@ -79,6 +79,12 @@ async function bundleSource(options) {
 
 await Promise.all([
     bundleSource(createBuildOption(["src/main.ts"])),
+    bundleSource(
+        createBuildOptionForWebView([
+            "src/webview/show_crate_graph.ts",
+            "src/webview/show_crate_graph.css",
+        ])
+    ),
     bundleSource(
         createBuildOptionForWebView([
             "src/webview/view_memory_layout.ts",

diff --git a/editors/code/src/commands.ts b/editors/code/src/commands.ts
@@ -21,7 +21,7 @@ import type { LanguageClient } from "vscode-languageclient/node";
 import { LINKED_COMMANDS } from "./client";
 import type { DependencyId } from "./dependencies_provider";
 import { unwrapUndefinable } from "./undefinable";
-import { getWebViewModulePath } from "./uri";
+import { getNodeModulePath, getWebViewModulePath } from "./uri";
 
 export * from "./ast_inspector";
 export * from "./run";
@@ -737,7 +737,8 @@ export function viewItemTree(ctx: CtxInit): Cmd {
 
 function crateGraph(ctx: CtxInit, full: boolean): Cmd {
     return async () => {
-        const nodeModulesPath = vscode.Uri.file(path.join(ctx.extensionPath, "node_modules"));
+        const nodeModulesPath = getNodeModulePath(ctx);
+        const webviewModulePath = getWebViewModulePath(ctx);
 
         const panel = vscode.window.createWebviewPanel(
             "rust-analyzer.crate-graph",
@@ -746,55 +747,33 @@ function crateGraph(ctx: CtxInit, full: boolean): Cmd {
             {
                 enableScripts: true,
                 retainContextWhenHidden: true,
-                localResourceRoots: [nodeModulesPath],
+                localResourceRoots: [nodeModulesPath, webviewModulePath],
             }
         );
         const params = {
             full: full,
         };
         const client = ctx.client;
         const dot = await client.sendRequest(ra.viewCrateGraph, params);
-        const uri = panel.webview.asWebviewUri(nodeModulesPath);
+
+        const nodeModuleUri = panel.webview.asWebviewUri(nodeModulesPath);
+        const webviewModuleUri = panel.webview.asWebviewUri(webviewModulePath);
 
         const html = `
             <!DOCTYPE html>
             <meta charset="utf-8">
             <head>
-                <style>
-                    /* Fill the entire view */
-                    html, body { margin:0; padding:0; overflow:hidden }
-                    svg { position:fixed; top:0; left:0; height:100%; width:100% }
-
-                    /* Disable the graphviz background and fill the polygons */
-                    .graph > polygon { display:none; }
-                    :is(.node,.edge) polygon { fill: white; }
-
-                    /* Invert the line colours for dark themes */
-                    body:not(.vscode-light) .edge path { stroke: white; }
-                </style>
+                <link href="${webviewModuleUri}/show_crate_graph.css" rel="stylesheet" media="screen"/>
             </head>
             <body>
-                <script type="text/javascript" src="${uri}/d3/dist/d3.min.js"></script>
-                <script type="text/javascript" src="${uri}/@hpcc-js/wasm/dist/graphviz.umd.js"></script>
-                <script type="text/javascript" src="${uri}/d3-graphviz/build/d3-graphviz.min.js"></script>
+                <script type="text/javascript" src="${nodeModuleUri}/d3/dist/d3.min.js"></script>
+                <script type="text/javascript" src="${nodeModuleUri}/@hpcc-js/wasm/dist/graphviz.umd.js"></script>
+                <script type="text/javascript" src="${nodeModuleUri}/d3-graphviz/build/d3-graphviz.min.js"></script>
                 <div id="graph"></div>
-                <script>
-                    let dot = \`${dot}\`;
-                    let graph = d3.select("#graph")
-                                  .graphviz({ useWorker: false, useSharedWorker: false })
-                                  .fit(true)
-                                  .zoomScaleExtent([0.1, Infinity])
-                                  .renderDot(dot);
-
-                    d3.select(window).on("click", (event) => {
-                        if (event.ctrlKey) {
-                            graph.resetZoom(d3.transition().duration(100));
-                        }
-                    });
-                    d3.select(window).on("copy", (event) => {
-                        event.clipboardData.setData("text/plain", dot);
-                        event.preventDefault();
-                    });
+                <script type="module">
+                    import { showCrateDependencyGraph } from '${webviewModuleUri}/show_crate_graph.js';
+                    const dot = ${JSON.stringify(dot)};
+                    showCrateDependencyGraph(dot);
                 </script>
             </body>
             `;

diff --git a/editors/code/src/uri.ts b/editors/code/src/uri.ts
@@ -10,3 +10,7 @@ function getBundledAssetsUri(ctx: CtxInit, pathname: string): Uri {
 export function getWebViewModulePath(ctx: CtxInit) {
     return getBundledAssetsUri(ctx, "out/webview");
 }
+
+export function getNodeModulePath(ctx: CtxInit) {
+    return getBundledAssetsUri(ctx, "node_modules");
+}
diff --git a/editors/code/src/webview/show_crate_graph.css b/editors/code/src/webview/show_crate_graph.css
@@ -0,0 +1,27 @@
+/* Fill the entire view */
+html,
+body {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+svg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+}
+
+/* Disable the graphviz background and fill the polygons */
+.graph > polygon {
+    display: none;
+}
+:is(.node, .edge) polygon {
+    fill: white;
+}
+
+/* Invert the line colours for dark themes */
+body:not(.vscode-light) .edge path {
+    stroke: white;
+}
diff --git a/editors/code/src/webview/show_crate_graph.ts b/editors/code/src/webview/show_crate_graph.ts
@@ -0,0 +1,19 @@
+// @ts-nocheck
+export function showCrateDependencyGraph(dot): void {
+    const graph = d3
+        .select("#graph")
+        .graphviz({ useWorker: false, useSharedWorker: false })
+        .fit(true)
+        .zoomScaleExtent([0.1, Infinity])
+        .renderDot(dot);
+
+    d3.select(window).on("click", (event) => {
+        if (event.ctrlKey) {
+            graph.resetZoom(d3.transition().duration(100));
+        }
+    });
+    d3.select(window).on("copy", (event) => {
+        event.clipboardData.setData("text/plain", dot);
+        event.preventDefault();
+    });
+}