Refactors code.

README.md

@@ -1,3 +1,4 @@
 # VS Code Debug Visualizer
 
-See [extension](extension) for the extension readme.
+See the [extension](extension) directory for the extension readme.
+You can get the extension in the [marketplace](https://marketplace.visualstudio.com/items?itemName=hediet.debug-visualizer).

extension/src/Config.ts

@@ -17,7 +17,7 @@ export class Config {
 		);
 	}
 
-	public useChromeKioskModeKey(): boolean {
+	public useChromeKioskMode(): boolean {
 		const c = workspace.getConfiguration();
 		const b = c.get<boolean>(useChromeKioskModeKey);
 		if (b === undefined) {

extension/src/ConnectionHandler.ts

@@ -4,9 +4,11 @@ import { ConsoleRpcLogger } from "@hediet/typed-json-rpc";
 import { EvaluationWatcher } from "./DataSource/DataSource";
 import { WebSocketStream } from "@hediet/typed-json-rpc-websocket";
 import { observable, autorun } from "mobx";
-import { Sources } from "./extension";
+import { Sources } from "./DataSource";
 import { Server } from "./Server";
 import * as open from "open";
+import chromeLauncher = require("chrome-launcher");
+import { Config } from "./Config";
 
 export class ConnectionHandler {
 	public readonly dispose = Disposable.fn();
@@ -49,7 +51,7 @@ export class ConnectionHandler {
 				},
 				openInBrowser: async ({}) => {
 					let opened = false;
-					if (config.useChromeKioskModeKey()) {
+					if (config.useChromeKioskMode()) {
 						opened = await launchChrome(server.indexUrl);
 					}
 					if (!opened) {
@@ -91,12 +93,9 @@ export class ConnectionHandler {
 	}
 }
 
-import chromeLauncher = require("chrome-launcher");
-import { Config } from "./Config";
-
 async function launchChrome(url: string): Promise<boolean> {
 	try {
-		const chrome = await chromeLauncher.launch({
+		const _chrome = await chromeLauncher.launch({
 			startingUrl: url,
 			// `--window-size=${width},${height}`
 			chromeFlags: ["--app=" + url],

extension/src/DataSource/index.ts

@@ -0,0 +1,5 @@
+import { createJsDebuggerSource } from "./JsDebuggerSource";
+
+export class Sources {
+	public readonly jsSource = createJsDebuggerSource();
+}

extension/src/Server.ts

@@ -3,7 +3,7 @@ import { AddressInfo } from "net";
 import WebSocket = require("ws");
 import { join } from "path";
 import { ConnectionHandler } from "./ConnectionHandler";
-import { Sources } from "./extension";
+import { Sources } from "./DataSource";
 import * as express from "express";
 import * as http from "http";
 import * as serveStatic from "serve-static";
@@ -14,7 +14,8 @@ export class Server {
 
 	constructor(sources: Sources, config: Config) {
 		const app = express();
-		app.use(serveStatic(join(__dirname, "../ui/dist")));
+		const distPath = join(__dirname, "../ui/dist");
+		app.use(serveStatic(distPath));
 
 		this.server = app.listen();
 
@@ -23,7 +24,6 @@ export class Server {
 			const stream = new WebSocketStream(ws);
 			new ConnectionHandler(sources, stream, this, config);
 		});
-		console.log(this.port);
 	}
 
 	public get indexUrl(): string {

extension/src/extension.ts

@@ -1,4 +1,5 @@
 import { window, ExtensionContext, WebviewPanel, commands } from "vscode";
+import { Disposable } from "@hediet/std/disposable";
 import {
 	enableHotReload,
 	hotRequireExportedFn,
@@ -10,20 +11,13 @@ if (process.env.USE_DEV_UI) {
 	enableHotReload({ entryModule: module, loggingEnabled: true });
 }
 
-import { Disposable } from "@hediet/std/disposable";
-
-import { createJsDebuggerSource } from "./DataSource/JsDebuggerSource";
-
 import { WebViews } from "./WebViews";
 import { Server } from "./Server";
 import { Config } from "./Config";
+import { Sources } from "./DataSource";
 
 registerUpdateReconciler(module);
 
-export class Sources {
-	public readonly jsSource = createJsDebuggerSource();
-}
-
 export class Extension {
 	public dispose = Disposable.fn();
 
@@ -39,11 +33,13 @@ export class Extension {
 			i.show();
 		}
 
-		commands.registerCommand(
-			"vscode-debug-visualizer.new-visualizer",
-			() => {
-				this.views.createNew();
-			}
+		this.dispose.track(
+			commands.registerCommand(
+				"vscode-debug-visualizer.new-visualizer",
+				() => {
+					this.views.createNew();
+				}
+			)
 		);
 	}
 }

extension/ui/src/Model/Model.ts

@@ -62,7 +62,7 @@ export class Model {
 		return this._loading;
 	}
 
-	private readonly bridge = new MonacoBridge(this);
+	private readonly _bridge = new MonacoBridge(this);
 
 	constructor() {
 		if (window.serverPort) {

extension/ui/src/Model/MonacoBridge.ts

@@ -1,13 +1,14 @@
 import * as monaco from "monaco-editor";
 import { Model } from "./Model";
-
+import { Disposable } from "@hediet/std/disposable";
 export class MonacoBridge {
+	public readonly dispose = Disposable.fn();
+
 	constructor(private readonly model: Model) {
 		monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
 			noSemanticValidation: false,
 			noSyntaxValidation: false,
 		});
-
 		monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
 			target: monaco.languages.typescript.ScriptTarget.ES5,
 			allowNonTsExtensions: true,
@@ -17,88 +18,95 @@ export class MonacoBridge {
 			strict: true,
 		});
 
-		const text = require("!!raw-loader!./lib.es5.d.ts.txt")
+		const es5Lib = require("!!raw-loader!./lib.es5.d.ts.txt")
 			.default as string;
-
-		monaco.languages.typescript.javascriptDefaults.addExtraLib(text);
-
 		const commonTypes = require("!!raw-loader!@hediet/debug-visualizer-data-extraction/src/CommonDataTypes.ts")
 			.default as string;
 
-		monaco.languages.typescript.javascriptDefaults.addExtraLib(
-			commonTypes,
-			`file:///node_modules/CommonDataTypes/index.ts`
+		this.dispose.track([
+			monaco.languages.typescript.javascriptDefaults.addExtraLib(es5Lib),
+			monaco.languages.typescript.javascriptDefaults.addExtraLib(
+				commonTypes,
+				`file:///node_modules/CommonDataTypes/index.ts`
+			),
+			monaco.languages.typescript.javascriptDefaults.addExtraLib(
+				`declare function $asData(data: import("CommonDataTypes").CommonDataType): import("CommonDataTypes").CommonDataType;`,
+				`file:///types.d.ts`
+			),
+		]);
+
+		this.dispose.track(
+			monaco.languages.registerCompletionItemProvider(
+				"javascript",
+				new DebugSessionCompletionProvider(this.model)
+			)
 		);
-		monaco.languages.typescript.javascriptDefaults.addExtraLib(
-			`declare function $asData(data: import("CommonDataTypes").CommonDataType): import("CommonDataTypes").CommonDataType;`,
-			`file:///types.d.ts`
-		);
-
-		monaco.languages.registerCompletionItemProvider("javascript", {
-			triggerCharacters: ["."],
-			provideCompletionItems: async (
-				textModel,
-				position
-			): Promise<monaco.languages.CompletionList> => {
-				const expression = textModel.getValue();
-
-				if (!this.model.server) {
-					return { suggestions: [] };
-				}
-				const completions = (await this.model.server.getCompletions({
-					text: expression,
-					column: position.column,
-				})).completions;
-
-				const map = {
-					method: monaco.languages.CompletionItemKind.Method,
-					function: monaco.languages.CompletionItemKind.Function,
-					constructor:
-						monaco.languages.CompletionItemKind.Constructor,
-					field: monaco.languages.CompletionItemKind.Field,
-					variable: monaco.languages.CompletionItemKind.Variable,
-					class: monaco.languages.CompletionItemKind.Class,
-					interface: monaco.languages.CompletionItemKind.Interface,
-					module: monaco.languages.CompletionItemKind.Module,
-					property: monaco.languages.CompletionItemKind.Property,
-					unit: monaco.languages.CompletionItemKind.Unit,
-					value: monaco.languages.CompletionItemKind.Value,
-					enum: monaco.languages.CompletionItemKind.Enum,
-					keyword: monaco.languages.CompletionItemKind.Keyword,
-					snippet: monaco.languages.CompletionItemKind.Snippet,
-					text: monaco.languages.CompletionItemKind.Text,
-					color: monaco.languages.CompletionItemKind.Color,
-					file: monaco.languages.CompletionItemKind.File,
-					reference: monaco.languages.CompletionItemKind.Reference,
-					customcolor:
-						monaco.languages.CompletionItemKind.Customcolor,
-				};
-
-				const p = textModel.getWordAtPosition(position);
-
-				return {
-					suggestions: completions.map<
-						monaco.languages.CompletionItem
-					>(c => {
-						const startColumn =
-							c.start || (p && p.startColumn) || position.column;
-
-						return {
-							insertText: c.text || c.label,
-							label: c.label,
-							kind: map[c.type || "text"],
-							range: {
-								startColumn,
-								endColumn: startColumn + (c.length || 0),
-								startLineNumber: 0,
-								endLineNumber: 0,
-							},
-							sortText:
-								c.type === "property" ? "zzzzzzz" : c.label,
-						};
-					}),
-				};
-			},
-		});
+	}
+}
+
+class DebugSessionCompletionProvider
+	implements monaco.languages.CompletionItemProvider {
+	public readonly triggerCharacters = ["."];
+
+	private readonly map = {
+		method: monaco.languages.CompletionItemKind.Method,
+		function: monaco.languages.CompletionItemKind.Function,
+		constructor: monaco.languages.CompletionItemKind.Constructor,
+		field: monaco.languages.CompletionItemKind.Field,
+		variable: monaco.languages.CompletionItemKind.Variable,
+		class: monaco.languages.CompletionItemKind.Class,
+		interface: monaco.languages.CompletionItemKind.Interface,
+		module: monaco.languages.CompletionItemKind.Module,
+		property: monaco.languages.CompletionItemKind.Property,
+		unit: monaco.languages.CompletionItemKind.Unit,
+		value: monaco.languages.CompletionItemKind.Value,
+		enum: monaco.languages.CompletionItemKind.Enum,
+		keyword: monaco.languages.CompletionItemKind.Keyword,
+		snippet: monaco.languages.CompletionItemKind.Snippet,
+		text: monaco.languages.CompletionItemKind.Text,
+		color: monaco.languages.CompletionItemKind.Color,
+		file: monaco.languages.CompletionItemKind.File,
+		reference: monaco.languages.CompletionItemKind.Reference,
+		customcolor: monaco.languages.CompletionItemKind.Customcolor,
+	};
+
+	constructor(private readonly model: Model) {}
+
+	public async provideCompletionItems(
+		model: monaco.editor.ITextModel,
+		position: monaco.Position,
+		context: monaco.languages.CompletionContext
+	): Promise<monaco.languages.CompletionList> {
+		const expression = model.getValue();
+
+		if (!this.model.server) {
+			return { suggestions: [] };
+		}
+		const completions = (await this.model.server.getCompletions({
+			text: expression,
+			column: position.column,
+		})).completions;
+
+		const p = model.getWordAtPosition(position);
+
+		return {
+			suggestions: completions.map<monaco.languages.CompletionItem>(c => {
+				const startColumn =
+					c.start || (p && p.startColumn) || position.column;
+
+				return {
+					insertText: c.text || c.label,
+					label: c.label,
+					kind: this.map[c.type || "text"],
+					range: {
+						startColumn,
+						endColumn: startColumn + (c.length || 0),
+						startLineNumber: 0,
+						endLineNumber: 0,
+					},
+					sortText: c.type === "property" ? "zzzzzzz" : c.label,
+				};
+			}),
+		};
 	}
 }