Moved "extension/ui" to "webview", removed "shared".

README.md

@@ -15,10 +15,12 @@ You can get the extension in the [marketplace](https://marketplace.visualstudio.
 
 ## Dev Instructions
 
+This project uses yarn workspaces.
+
 -   Clone the repository
 -   Run `yarn` in the repository root
 -   Run `yarn build` initially (or `yarn dev` for every project)
--   Run `yarn dev` **inside** the project you are working on.
+-   Run `yarn dev` for the project you are working on.
 
 For the UI, `yarn dev` will start a webserver that you can access on port 8080.
 You can use VS Code do launch and debug the extension.

docs/main.plantuml

@@ -0,0 +1,12 @@
+@startuml Main
+
+[data-extraction] 
+[debug-visualizer-webview]
+[debug-visualizer]
+
+[debug-visualizer-webview] ..> [debug-visualizer]: "Uses RPC contracts, connects using websockets"
+[debug-visualizer] ..> [debug-visualizer-webview]: "Opens Webview in VS Code"
+
+[debug-visualizer] ..> [data-extraction]: "Injects Runtime into JavaScript applications"
+
+@enduml

extension/package.json

@@ -1,5 +1,6 @@
 {
 	"name": "debug-visualizer",
+	"private": true,
 	"displayName": "Debug Visualizer",
 	"description": "An extension that visualizes values while debugging.",
 	"icon": "docs/logo.png",
@@ -49,7 +50,7 @@
 		"pub": "vsce publish --yarn --baseImagesUrl https://github.com/hediet/vscode-debug-visualizer/raw/master/extension --baseContentUrl https://github.com/hediet/vscode-debug-visualizer/raw/master/extension",
 		"vscode:prepublish": "yarn build",
 		"build": "webpack --mode production",
-		"dev": "tsc -watch -p ./"
+		"dev": "shx rm -rf dist && tsc -watch -p ./"
 	},
 	"dependencies": {
 		"@hediet/std": "^0.6.0",
@@ -74,6 +75,7 @@
 		"typescript": "^3.8.2",
 		"webpack": "^4.41.6",
 		"webpack-cli": "^3.3.11",
-		"ts-loader": "^6.2.1"
+		"ts-loader": "^6.2.1",
+		"shx": "^0.3.2"
 	}
 }

extension/src/ConnectionHandler.ts

@@ -1,5 +1,5 @@
 import { Disposable } from "@hediet/std/disposable";
-import { debugVisualizerUIContract } from "@hediet/debug-visualizer-vscode-shared";
+import { debugVisualizerUIContract } from "./contract";
 import { ConsoleRpcLogger, RequestHandlingError } from "@hediet/typed-json-rpc";
 import { EvaluationWatcher, DataSource } from "./DataSource/DataSource";
 import { WebSocketStream } from "@hediet/typed-json-rpc-websocket";

extension/src/DataSource/DataSource.ts

@@ -1,8 +1,5 @@
 import { DataExtractorId } from "@hediet/debug-visualizer-data-extraction";
-import {
-	DataExtractionState,
-	CompletionItem,
-} from "@hediet/debug-visualizer-vscode-shared";
+import { DataExtractionState, CompletionItem } from "../contract";
 
 export interface DataSource {
 	createEvaluationWatcher(

extension/src/DataSource/DataSourceImpl.ts

@@ -6,10 +6,7 @@ import {
 import { observable, autorun, action } from "mobx";
 import { Disposable } from "@hediet/std/disposable";
 import { DataExtractorId } from "@hediet/debug-visualizer-data-extraction";
-import {
-	DataExtractionState,
-	CompletionItem,
-} from "@hediet/debug-visualizer-vscode-shared";
+import { DataExtractionState, CompletionItem } from "../contract";
 import { hotClass } from "@hediet/node-reload";
 import { VsCodeDebuggerView } from "../VsCodeDebugger";
 import { DataExtractionProviderFactory } from "./DataExtractionProvider/DataExtractionProvider";

extension/src/Server.ts

@@ -1,7 +1,6 @@
 import { WebSocketStream } from "@hediet/typed-json-rpc-websocket";
 import { AddressInfo } from "net";
 import WebSocket = require("ws");
-import { join } from "path";
 import { ConnectionHandler } from "./ConnectionHandler";
 import { Sources } from "./DataSource";
 import * as express from "express";
@@ -9,6 +8,7 @@ import * as http from "http";
 import * as serveStatic from "serve-static";
 import { Config } from "./Config";
 import cryptoRandomString = require("crypto-random-string");
+import { distPath } from "debug-visualizer-webview";
 
 export class Server {
 	private server: http.Server;
@@ -16,11 +16,17 @@ export class Server {
 
 	constructor(sources: Sources, config: Config) {
 		const app = express();
-		const distPath = join(__dirname, "../ui/dist");
+
 		app.use(serveStatic(distPath));
 
 		this.server = app.listen();
 
+		console.log(
+			`Serving "${distPath}" on port ${
+				(this.server.address() as AddressInfo).port
+			}`
+		);
+
 		const wss = new WebSocket.Server({ server: this.server });
 		wss.on("connection", ws => {
 			const stream = new WebSocketStream(ws);

extension/src/VsCodeDebugger.ts

@@ -1,7 +1,7 @@
 import { Disposable } from "@hediet/std/disposable";
 import { debug, DebugSession } from "vscode";
 import { EventEmitter } from "@hediet/std/events";
-import { CompletionItem } from "@hediet/debug-visualizer-vscode-shared";
+import { CompletionItem } from "./contract";
 import { observable, runInAction } from "mobx";
 
 export class VsCodeDebugger {

extension/src/types.d.ts

@@ -4,3 +4,7 @@ declare namespace NodeJS {
 		USE_DEV_UI?: "true";
 	}
 }
+
+declare module "debug-visualizer-webview" {
+	export const distPath: string;
+}

extension/webpack.config.ts

@@ -2,6 +2,7 @@ import * as webpack from "webpack";
 import path = require("path");
 import { CleanWebpackPlugin } from "clean-webpack-plugin";
 import CopyPlugin = require("copy-webpack-plugin");
+import { readFileSync } from "fs";
 
 const r = (file: string) => path.resolve(__dirname, file);
 
@@ -19,6 +20,7 @@ module.exports = {
 		vscode: "commonjs vscode",
 		"@hediet/debug-visualizer-data-extraction":
 			"@hediet/debug-visualizer-data-extraction",
+		"debug-visualizer-webview": "debug-visualizer-webview",
 	},
 	resolve: {
 		extensions: [".ts", ".js"],
@@ -41,14 +43,22 @@ module.exports = {
 	},
 	plugins: [
 		new CleanWebpackPlugin(),
-		new CopyPlugin([
-			{
-				from: r("../data-extraction/"),
-				to: r(
-					"./dist/node_modules/@hediet/debug-visualizer-data-extraction/"
-				),
-				ignore: ["**/node_modules/**/*"],
-			},
-		]),
+		includeDependency(r("../data-extraction/")),
+		includeDependency(r("../webview/")),
 	],
 } as webpack.Configuration;
+
+function includeDependency(location: string) {
+	const content = readFileSync(path.join(location, "package.json"), {
+		encoding: "utf8",
+	});
+	const pkgName = JSON.parse(content).name;
+
+	return new CopyPlugin([
+		{
+			from: location,
+			to: r(`./dist/node_modules/${pkgName}`),
+			ignore: ["**/node_modules/**/*"],
+		},
+	]);
+}

package.json

@@ -1,16 +1,14 @@
 {
 	"private": true,
 	"workspaces": [
-		"./shared",
 		"./data-extraction",
 		"./extension",
-		"./extension/ui"
+		"./webview"
 	],
 	"scripts": {
-		"build": "yarn build-data-extraction && yarn build-shared && yarn build-extension && yarn build-ui",
+		"build": "yarn build-data-extraction && yarn build-extension && yarn build-ui",
 		"build-data-extraction": "yarn workspace @hediet/debug-visualizer-data-extraction build",
-		"build-shared": "yarn workspace @hediet/debug-visualizer-vscode-shared build",
 		"build-extension": "yarn workspace debug-visualizer build",
-		"build-ui": "yarn workspace debug-visualizer-ui build"
+		"build-ui": "yarn workspace debug-visualizer-webview build"
 	}
 }

shared/package.json

@@ -1,24 +0,0 @@
-{
-	"name": "@hediet/debug-visualizer-vscode-shared",
-	"private": true,
-	"version": "1.0.0",
-	"main": "dist/index.js",
-	"types": "dist/index.d.ts",
-	"author": {
-		"name": "Henning Dieterichs",
-		"email": "henning.dieterichs@live.de"
-	},
-	"license": "MIT",
-	"files": [
-		"dist",
-		"src"
-	],
-	"scripts": {
-		"dev": "tsc --watch",
-		"build": "tsc"
-	},
-	"dependencies": {
-		"@hediet/std": "^0.6.0",
-		"@hediet/typed-json-rpc": "^0.7.7"
-	}
-}

shared/src/index.ts

@@ -1 +0,0 @@
-export * from "./contract";

shared/tsconfig.json

@@ -1,16 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "esnext",
-		"module": "commonjs",
-		"strict": true,
-		"outDir": "dist",
-		"skipLibCheck": true,
-		"rootDir": "./src",
-		"resolveJsonModule": true,
-		"declaration": true,
-		"declarationMap": true,
-		"newLine": "LF",
-		"sourceMap": true
-	},
-	"include": ["./src/**/*"]
-}

webview/index.js

@@ -0,0 +1,5 @@
+// This is the entry point when this package is used as library from the extension.
+// This package MUST NOT be bundled.
+const path = require("path");
+
+module.exports.distPath = path.join(__dirname, "dist");

webview/package.json

@@ -1,11 +1,12 @@
 {
-	"name": "debug-visualizer-ui",
+	"name": "debug-visualizer-webview",
 	"version": "0.0.1",
 	"scripts": {
 		"dev": "webpack-dev-server --hot",
 		"dev-playground": "webpack-dev-server --hot --port 8090 --playground",
 		"build": "webpack"
 	},
+	"main": "./index.js",
 	"dependencies": {
 		"@blueprintjs/core": "^3.23.1",
 		"@hediet/std": "^0.6.0",

webview/src/components/ExpressionInput.tsx

@@ -1,5 +1,5 @@
 import React = require("react");
-import { Model } from "../Model/Model";
+import { Model } from "../model/Model";
 import { observer, disposeOnUnmount } from "mobx-react";
 import { observable, action, autorun } from "mobx";
 import * as monaco from "monaco-editor";

webview/src/components/GUI.tsx

@@ -2,7 +2,7 @@ import React = require("react");
 import { Button, Spinner } from "@blueprintjs/core";
 import { observable, action } from "mobx";
 import { observer } from "mobx-react";
-import { Model } from "../Model/Model";
+import { Model } from "../model/Model";
 import { ExpressionInput } from "./ExpressionInput";
 import { Visualizer } from "./Visualizer";
 import classnames = require("classnames");

webview/src/components/Visualizer.tsx

@@ -1,5 +1,5 @@
 import React = require("react");
-import { Model } from "../Model/Model";
+import { Model } from "../model/Model";
 import { observer } from "mobx-react";
 import { NoData } from "./NoData";
 

webview/src/components/VisualizerHeaderDetails.tsx

@@ -3,8 +3,8 @@ import { Popover } from "@blueprintjs/core";
 import { DataExtractorInfo } from "@hediet/debug-visualizer-data-extraction";
 import { computed } from "mobx";
 import { observer } from "mobx-react";
-import { Model } from "../Model/Model";
-import { VisualizationId } from "../Visualizers/Visualizer";
+import { Model } from "../model/Model";
+import { VisualizationId } from "../visualizers/Visualizer";
 
 @observer
 export class VisualizerHeaderDetails extends React.Component<{ model: Model }> {

webview/src/index.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import "./style.scss";
-import { Model } from "./Model/Model";
-import Components = require("./Components/GUI");
+import { Model } from "./model/Model";
+import Components = require("./components/GUI");
 
 const model = new Model();
 
@@ -15,7 +15,7 @@ if (model.runningMode !== "webView") {
 }
 
 function render(target: HTMLDivElement) {
-	const c = require("./Components/GUI") as typeof Components;
+	const c = require("./components/GUI") as typeof Components;
 	ReactDOM.render(<c.GUI model={model} />, target);
 }
 
@@ -31,7 +31,7 @@ declare var module: {
 declare var require: (name: string) => any;
 
 if (module.hot) {
-	module.hot.accept("./Components/GUI", () => {
+	module.hot.accept("./components/GUI", () => {
 		render(target);
 	});
 }

webview/src/model/Model.ts

@@ -1,13 +1,13 @@
 import {
 	debugVisualizerUIContract,
 	DataExtractionState,
-} from "@hediet/debug-visualizer-vscode-shared";
+} from "debug-visualizer/src/contract";
 import { WebSocketStream } from "@hediet/typed-json-rpc-websocket";
 import { ConsoleRpcLogger } from "@hediet/typed-json-rpc";
 import { observable, action, computed, when, autorun } from "mobx";
 import { DataExtractorId } from "@hediet/debug-visualizer-data-extraction";
-import { Visualization, VisualizationId } from "../Visualizers/Visualizer";
-import { knownVisualizations } from "../Visualizers";
+import { Visualization, VisualizationId } from "../visualizers/Visualizer";
+import { knownVisualizations } from "../visualizers";
 import { getApi as getVsCodeApi } from "./VsCodeApi";
 import { MonacoBridge } from "./MonacoBridge";
 import { Disposable } from "@hediet/std/disposable";

webview/src/playground/index.tsx

@@ -1,6 +1,6 @@
 import React = require("react");
 import "../style.scss";
-import { DecoratedGridComponent } from "../Visualizers/GridVisualizer";
+import { DecoratedGridComponent } from "../visualizers/GridVisualizer";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 

webview/src/visualizers/AstVisualizer.tsx

@@ -8,13 +8,13 @@ import {
 	isCommonDataType,
 	CommonDataTypes,
 } from "@hediet/debug-visualizer-data-extraction";
-import { createTreeViewModelFromTreeNodeData } from "./TreeVisualizer/Visualizer";
+import { createTreeViewModelFromTreeNodeData } from "./TreeVisualizer/TreeVisualizer";
 import { TreeWithPathView, TreeViewModel } from "./TreeVisualizer/Views";
 import React = require("react");
 import { observer, disposeOnUnmount } from "mobx-react";
 import { observable, autorun, trace } from "mobx";
 import * as monaco from "monaco-editor";
-import { getLanguageId } from "./TextVisualizer/MonacoTextVisualizer";
+import { getLanguageId } from "./text-visualizers/MonacoTextVisualizer";
 import LineColumn = require("line-column");
 
 export class AstVisualizer extends VisualizationProvider {

webview/src/visualizers/TreeVisualizer/TreeVisualizer.tsx

@@ -16,6 +16,25 @@ import {
 } from "../Visualizer";
 import React = require("react");
 
+export class TreeVisualizer extends VisualizationProvider {
+	getVisualizations(
+		data: ExtractedData,
+		collector: VisualizationCollector
+	): void {
+		if (isCommonDataType(data, { tree: true })) {
+			collector.addVisualization({
+				id: asVisualizationId("tree"),
+				name: "Tree",
+				priority: 100,
+				render() {
+					const m = createTreeViewModelFromTreeNodeData(data.root);
+					return <TreeWithPathView model={m} />;
+				},
+			});
+		}
+	}
+}
+
 export function createTreeViewModelFromTreeNodeData<TData>(
 	root: TreeNode<TData>
 ): TreeViewModel<TData> {
@@ -46,22 +65,3 @@ export function createTreeViewModelFromTreeNodeData<TData>(
 		return model;
 	}
 }
-
-export class TreeVisualizer extends VisualizationProvider {
-	getVisualizations(
-		data: ExtractedData,
-		collector: VisualizationCollector
-	): void {
-		if (isCommonDataType(data, { tree: true })) {
-			collector.addVisualization({
-				id: asVisualizationId("tree"),
-				name: "Tree",
-				priority: 100,
-				render() {
-					const m = createTreeViewModelFromTreeNodeData(data.root);
-					return <TreeWithPathView model={m} />;
-				},
-			});
-		}
-	}
-}

webview/src/visualizers/TreeVisualizer/Views.tsx

@@ -2,8 +2,8 @@ import { observer, disposeOnUnmount } from "mobx-react";
 import { observable, autorun, computed, action, runInAction } from "mobx";
 import React = require("react");
 import classNames = require("classnames");
-import { Rectangle, Point } from "../../Components/Point";
-import { SvgLine } from "../../Components/SvgElements";
+import { Rectangle, Point } from "../../components/Point";
+import { SvgLine } from "../../components/SvgElements";
 import "./style.scss";
 
 export class TreeViewModel<TData = unknown> {

webview/src/visualizers/index.ts

@@ -1,13 +1,13 @@
 import "./style.scss";
 import { ComposedVisualizationProvider } from "./Visualizer";
-import { TreeVisualizer } from "./TreeVisualizer/Visualizer";
-import { GraphvizGraphVisualizer } from "./GraphVisualizer/GraphvizGraphVisualizer";
+import { TreeVisualizer } from "./TreeVisualizer/TreeVisualizer";
+import { GraphvizGraphVisualizer } from "./graph-visualizers/GraphvizGraphVisualizer";
 import { SvgVisualizer } from "./SvgVisualizer";
-import { GraphvizDotVisualizer } from "./GraphVisualizer/GraphvizDotVisualizer";
-import { TextVisualizer } from "./TextVisualizer/TextVisualizer";
-import { MonacoTextVisualizer } from "./TextVisualizer/MonacoTextVisualizer";
+import { GraphvizDotVisualizer } from "./graph-visualizers/GraphvizDotVisualizer";
+import { TextVisualizer } from "./text-visualizers/TextVisualizer";
+import { MonacoTextVisualizer } from "./text-visualizers/MonacoTextVisualizer";
 import { AstVisualizer } from "./AstVisualizer";
-import { VisJsGraphVisualizer } from "./GraphVisualizer/VisJsGraphVisualizer";
+import { VisJsGraphVisualizer } from "./graph-visualizers/VisJsGraphVisualizer";
 import { PlotlyVisualizer } from "./PlotlyVisualizer";
 import { GridVisualizer } from "./GridVisualizer";
 

webview/webpack.config.ts

@@ -47,7 +47,12 @@ module.exports = {
 			new CleanWebpackPlugin(),
 		];
 		if (mode === "default") {
-			plugins.push(new MonacoWebpackPlugin());
+			plugins.push(
+				new MonacoWebpackPlugin({
+					// Add more languages here once webworker issues are solved.
+					languages: ["typescript"],
+				})
+			);
 		}
 		return plugins;
 	})(),

yarn.lock

@@ -2906,6 +2906,11 @@ es6-iterator@^2.0.3, es6-iterator@~2.0.3:
     es5-ext "^0.10.35"
     es6-symbol "^3.1.1"
 
+es6-object-assign@^1.0.3:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/es6-object-assign/-/es6-object-assign-1.1.0.tgz#c2c3582656247c39ea107cb1e6652b6f9f24523c"
+  integrity sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw=
+
 es6-promise@^3.0.2:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
@@ -4659,7 +4664,7 @@ internal-ip@^4.3.0:
     default-gateway "^4.2.0"
     ipaddr.js "^1.9.0"
 
-interpret@1.2.0:
+interpret@1.2.0, interpret@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
   integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
@@ -7292,6 +7297,13 @@ readdirp@^3.1.1:
   dependencies:
     picomatch "^2.0.4"
 
+rechoir@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
+  integrity sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=
+  dependencies:
+    resolve "^1.1.6"
+
 redent@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
@@ -7581,7 +7593,7 @@ resolve@^0.6.1:
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-0.6.3.tgz#dd957982e7e736debdf53b58a4dd91754575dd46"
   integrity sha1-3ZV5gufnNt699TtYpN2RdUV13UY=
 
-resolve@^1.0.0, resolve@^1.1.5:
+resolve@^1.0.0, resolve@^1.1.5, resolve@^1.1.6:
   version "1.15.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.15.1.tgz#27bdcdeffeaf2d6244b95bb0f9f4b4653451f3e8"
   integrity sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==
@@ -7979,6 +7991,24 @@ shebang-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
   integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
 
+shelljs@^0.8.1:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.3.tgz#a7f3319520ebf09ee81275b2368adb286659b097"
+  integrity sha512-fc0BKlAWiLpwZljmOvAOTE/gXawtCoNrP5oaY7KIaQbbyHeQVg01pSEuEGvGh3HEdBU4baCD7wQBwADmM/7f7A==
+  dependencies:
+    glob "^7.0.0"
+    interpret "^1.0.0"
+    rechoir "^0.6.2"
+
+shx@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/shx/-/shx-0.3.2.tgz#40501ce14eb5e0cbcac7ddbd4b325563aad8c123"
+  integrity sha512-aS0mWtW3T2sHAenrSrip2XGv39O9dXIFUqxAEWHEOS1ePtGIBavdPJY1kE2IHl14V/4iCbUiNDPGdyYTtmhSoA==
+  dependencies:
+    es6-object-assign "^1.0.3"
+    minimist "^1.2.0"
+    shelljs "^0.8.1"
+
 signal-exit@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"