Skip to content

Commit 80ac389

Browse files
tetsuharuohzekitetsuharuohzeki
committed
editor/code: Allow to Type Checking "show crate graph" webview code
1 parent 47ee06c commit 80ac389

File tree

5 files changed

+71
-36
lines changed

5 files changed

+71
-36
lines changed

‎editors/code/build.mjs

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,12 @@ async function bundleSource(options) {
7979

8080
await Promise.all([
8181
bundleSource(createBuildOption(["src/main.ts"])),
82+
bundleSource(
83+
createBuildOptionForWebView([
84+
"src/webview/show_crate_graph.ts",
85+
"src/webview/show_crate_graph.css",
86+
]),
87+
),
8288
bundleSource(
8389
createBuildOptionForWebView([
8490
"src/webview/view_memory_layout.ts",

‎editors/code/src/commands.ts

Lines changed: 15 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import type { LanguageClient } from "vscode-languageclient/node";
2121
import { LINKED_COMMANDS } from "./client";
2222
import type { DependencyId } from "./dependencies_provider";
2323
import { unwrapUndefinable } from "./undefinable";
24-
import { getWebViewModulePath } from "./uri";
24+
import { getNodeModulePath, getWebViewModulePath } from "./uri";
2525

2626
export * from "./ast_inspector";
2727
export * from "./run";
@@ -737,7 +737,8 @@ export function viewItemTree(ctx: CtxInit): Cmd {
737737

738738
function crateGraph(ctx: CtxInit, full: boolean): Cmd {
739739
return async () => {
740-
const nodeModulesPath = vscode.Uri.file(path.join(ctx.extensionPath, "node_modules"));
740+
const nodeModulesPath = getNodeModulePath(ctx);
741+
const webviewModulePath = getWebViewModulePath(ctx);
741742

742743
const panel = vscode.window.createWebviewPanel(
743744
"rust-analyzer.crate-graph",
@@ -746,55 +747,33 @@ function crateGraph(ctx: CtxInit, full: boolean): Cmd {
746747
{
747748
enableScripts: true,
748749
retainContextWhenHidden: true,
749-
localResourceRoots: [nodeModulesPath],
750+
localResourceRoots: [nodeModulesPath, webviewModulePath],
750751
},
751752
);
752753
const params = {
753754
full: full,
754755
};
755756
const client = ctx.client;
756757
const dot = await client.sendRequest(ra.viewCrateGraph, params);
757-
const uri = panel.webview.asWebviewUri(nodeModulesPath);
758+
759+
const nodeModuleUri = panel.webview.asWebviewUri(nodeModulesPath);
760+
const webviewModuleUri = panel.webview.asWebviewUri(webviewModulePath);
758761

759762
const html = `
760763
<!DOCTYPE html>
761764
<meta charset="utf-8">
762765
<head>
763-
<style>
764-
/* Fill the entire view */
765-
html, body { margin:0; padding:0; overflow:hidden }
766-
svg { position:fixed; top:0; left:0; height:100%; width:100% }
767-
768-
/* Disable the graphviz background and fill the polygons */
769-
.graph > polygon { display:none; }
770-
:is(.node,.edge) polygon { fill: white; }
771-
772-
/* Invert the line colours for dark themes */
773-
body:not(.vscode-light) .edge path { stroke: white; }
774-
</style>
766+
<link href="${webviewModuleUri}/show_crate_graph.css" rel="stylesheet" media="screen"/>
775767
</head>
776768
<body>
777-
<script type="text/javascript" src="${uri}/d3/dist/d3.min.js"></script>
778-
<script type="text/javascript" src="${uri}/@hpcc-js/wasm/dist/graphviz.umd.js"></script>
779-
<script type="text/javascript" src="${uri}/d3-graphviz/build/d3-graphviz.min.js"></script>
769+
<script type="text/javascript" src="${nodeModuleUri}/d3/dist/d3.min.js"></script>
770+
<script type="text/javascript" src="${nodeModuleUri}/@hpcc-js/wasm/dist/graphviz.umd.js"></script>
771+
<script type="text/javascript" src="${nodeModuleUri}/d3-graphviz/build/d3-graphviz.min.js"></script>
780772
<div id="graph"></div>
781-
<script>
782-
let dot = \`${dot}\`;
783-
let graph = d3.select("#graph")
784-
.graphviz({ useWorker: false, useSharedWorker: false })
785-
.fit(true)
786-
.zoomScaleExtent([0.1, Infinity])
787-
.renderDot(dot);
788-
789-
d3.select(window).on("click", (event) => {
790-
if (event.ctrlKey) {
791-
graph.resetZoom(d3.transition().duration(100));
792-
}
793-
});
794-
d3.select(window).on("copy", (event) => {
795-
event.clipboardData.setData("text/plain", dot);
796-
event.preventDefault();
797-
});
773+
<script type="module">
774+
import { showCrateDependencyGraph } from '${webviewModuleUri}/show_crate_graph.js';
775+
const dot = ${JSON.stringify(dot)};
776+
showCrateDependencyGraph(dot);
798777
</script>
799778
</body>
800779
`;

‎editors/code/src/uri.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,7 @@ function getBundledAssetsUri(ctx: CtxInit, pathname: string): Uri {
1010
export function getWebViewModulePath(ctx: CtxInit) {
1111
return getBundledAssetsUri(ctx, "out/webview");
1212
}
13+
14+
export function getNodeModulePath(ctx: CtxInit) {
15+
return getBundledAssetsUri(ctx, "node_modules");
16+
}

‎editors/code/src/webview/show_crate_graph.css

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/* Fill the entire view */
2+
html,
3+
body {
4+
margin: 0;
5+
padding: 0;
6+
overflow: hidden;
7+
}
8+
svg {
9+
position: fixed;
10+
top: 0;
11+
left: 0;
12+
height: 100%;
13+
width: 100%;
14+
}
15+
16+
/* Disable the graphviz background and fill the polygons */
17+
.graph > polygon {
18+
display: none;
19+
}
20+
:is(.node, .edge) polygon {
21+
fill: white;
22+
}
23+
24+
/* Invert the line colours for dark themes */
25+
body:not(.vscode-light) .edge path {
26+
stroke: white;
27+
}

‎editors/code/src/webview/show_crate_graph.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// @ts-nocheck
2+
export function showCrateDependencyGraph(dot): void {
3+
const graph = d3
4+
.select("#graph")
5+
.graphviz({ useWorker: false, useSharedWorker: false })
6+
.fit(true)
7+
.zoomScaleExtent([0.1, Infinity])
8+
.renderDot(dot);
9+
10+
d3.select(window).on("click", (event) => {
11+
if (event.ctrlKey) {
12+
graph.resetZoom(d3.transition().duration(100));
13+
}
14+
});
15+
d3.select(window).on("copy", (event) => {
16+
event.clipboardData.setData("text/plain", dot);
17+
event.preventDefault();
18+
});
19+
}

0 commit comments

Comments
 (0)