New logo, updates changelog, some code improvements.

extension/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## 2.0.0
+
+-   New Logo
+-   Support for the new JS debug adapters
+-   Moved visualizations to [github.com/hediet/visualization](https://github.com/hediet/visualization).
+-   New Visualizations / Improved design
+
 ## 1.1.0
 
 -   Fixes a bug that occurs when the debug visualizer is opened after the debug session has started.

extension/package.json

@@ -2,9 +2,9 @@
 	"name": "debug-visualizer",
 	"private": true,
 	"displayName": "Debug Visualizer",
-	"description": "An extension that visualizes values while debugging.",
+	"description": "A visual watch window that lets you visualize your data structures while debugging.",
 	"icon": "docs/logo.png",
-	"version": "1.1.0",
+	"version": "2.0.0",
 	"license": "GPL-3.0",
 	"engines": {
 		"vscode": "^1.35.0"
@@ -17,7 +17,8 @@
 		"visual",
 		"javascript",
 		"graph",
-		"ast"
+		"ast",
+		"visualization"
 	],
 	"bugs": {
 		"url": "https://github.com/hediet/vscode-debug-visualizer/issues"

extension/src/WebViews.ts

@@ -55,7 +55,7 @@ export class WebViews {
 		webviewPanel: WebviewPanel,
 		expression: string | undefined = undefined
 	) {
-		webviewPanel.webview.html = getHtml(this.server, expression);
+		webviewPanel.webview.html = getWebviewHtml(this.server, expression);
 		const view = new WebView(webviewPanel);
 		this.debugVisualizations.set(webviewPanel, view);
 		webviewPanel.onDidDispose(() => {
@@ -68,7 +68,7 @@ export class WebView {
 	constructor(private readonly webviewPanel: WebviewPanel) {}
 }
 
-export function getHtml(
+export function getWebviewHtml(
 	server: Server,
 	expression: string | undefined = undefined
 ) {

webview/src/components/App.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { hotComponent } from "../hotComponent";
+import { GUI } from "./GUI";
+import { Model } from "../model/Model";
+
+@hotComponent(module)
+export class App extends React.Component {
+	private readonly model = new Model();
+
+	constructor(props: any) {
+		super(props);
+
+		if (this.model.runningMode !== "webView") {
+			if (this.model.theme === "light") {
+				require("../vscode-light.scss");
+			} else {
+				require("../vscode-dark.scss");
+			}
+		}
+	}
+
+	render() {
+		return <GUI model={this.model} />;
+	}
+}

webview/src/components/Visualizer.tsx

@@ -9,7 +9,9 @@ import { VisualizationView, Theme } from "@hediet/visualization-core";
 export class Visualizer extends React.Component<{ model: Model }> {
 	render() {
 		return (
-			<div className="component-Visualizer">{this.renderContent()}</div>
+			<div style={{ width: "100%", height: "100%", overflow: "hidden" }}>
+				{this.renderContent()}
+			</div>
 		);
 	}
 
@@ -36,7 +38,11 @@ export class Visualizer extends React.Component<{ model: Model }> {
 			}
 			return (
 				<VisualizationView
-					theme={Theme.light}
+					theme={
+						this.props.model.theme === "dark"
+							? Theme.dark
+							: Theme.light
+					}
 					visualization={vis.visualization}
 				/>
 			);

webview/src/hotComponent.tsx

@@ -0,0 +1,49 @@
+import Module = require("module");
+import { observer } from "mobx-react";
+import * as React from "react";
+import { observable, runInAction } from "mobx";
+
+type ReactComponent<P = any> =
+	| React.ComponentClass<P>
+	| React.FunctionComponent<P>;
+
+const allComponents = new Map<string, { component: ReactComponent }>();
+
+export function hotComponent(
+	module: Module
+): <T extends ReactComponent>(Component: T) => T {
+	return <T extends ReactComponent>(component: T): T => {
+		const key = JSON.stringify({ id: module.id, name: component.name });
+
+		let result = allComponents.get(key);
+		if (!result) {
+			result = observable({ component: component });
+			allComponents.set(key, result);
+		} else {
+			setTimeout(() => {
+				runInAction(`Update Component ${component.name}`, () => {
+					result!.component = component;
+				});
+			}, 0);
+		}
+
+		const m = module as {
+			hot?: {
+				accept: ((
+					componentName: string,
+					callback: () => void
+				) => void) &
+					((callback: () => void) => void);
+			};
+		};
+
+		if (m.hot) {
+			m.hot.accept(() => {});
+		}
+
+		return observer((props: any) => {
+			const C = result!.component;
+			return <C {...props} />;
+		}) as any;
+	};
+}

webview/src/index.tsx

@@ -1,38 +1,9 @@
 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 * as mobx from "mobx";
+import { App } from "./components/App";
 
-const model = new Model();
-
-if (model.runningMode !== "webView") {
-	if (model.theme === "light") {
-		require("./vscode-light.scss");
-	} else {
-		require("./vscode-dark.scss");
-	}
-}
-
-function render(target: HTMLDivElement) {
-	const c = require("./components/GUI") as typeof Components;
-	ReactDOM.render(<c.GUI model={model} />, target);
-}
-
-const target = document.createElement("div");
-target.className = "target";
-document.body.appendChild(target);
-
-render(target);
-
-declare var module: {
-	hot?: { accept: (componentName: string, callback: () => void) => void };
-};
-declare var require: (name: string) => any;
-
-if (module.hot) {
-	module.hot.accept("./components/GUI", () => {
-		render(target);
-	});
-}
+const elem = document.createElement("div");
+elem.className = "react-root";
+document.body.append(elem);
+ReactDOM.render(<App />, elem);

webview/src/style.scss

@@ -5,7 +5,7 @@
 
 html,
 body,
-.target {
+.react-root {
 	height: 100%;
 }
 
@@ -124,12 +124,6 @@ body {
 	}
 }
 
-.component-Visualizer {
-	width: 100%;
-	height: 100%;
-	overflow: auto;
-}
-
 .component-NoData {
 	width: 100%;
 	height: 100%;