From df6a8a8a22b98ba2ccb6c83b169fafe3457e2722 Mon Sep 17 00:00:00 2001 From: Henning Dieterichs Date: Mon, 12 Aug 2019 10:48:33 +0200 Subject: [PATCH] Refactors code. --- README.md | 3 +- extension/src/Config.ts | 2 +- extension/src/ConnectionHandler.ts | 11 +- extension/src/DataSource/index.ts | 5 + extension/src/Server.ts | 6 +- extension/src/extension.ts | 22 ++-- extension/ui/src/Model/Model.ts | 2 +- extension/ui/src/Model/MonacoBridge.ts | 168 +++++++++++++------------ 8 files changed, 114 insertions(+), 105 deletions(-) create mode 100644 extension/src/DataSource/index.ts diff --git a/README.md b/README.md index 2c8ca3e..89647dc 100644 --- a/README.md +++ b/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). diff --git a/extension/src/Config.ts b/extension/src/Config.ts index 8f54c04..eeb9fb5 100644 --- a/extension/src/Config.ts +++ b/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(useChromeKioskModeKey); if (b === undefined) { diff --git a/extension/src/ConnectionHandler.ts b/extension/src/ConnectionHandler.ts index 03c8852..732a28e 100644 --- a/extension/src/ConnectionHandler.ts +++ b/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 { try { - const chrome = await chromeLauncher.launch({ + const _chrome = await chromeLauncher.launch({ startingUrl: url, // `--window-size=${width},${height}` chromeFlags: ["--app=" + url], diff --git a/extension/src/DataSource/index.ts b/extension/src/DataSource/index.ts new file mode 100644 index 0000000..a2a0cf2 --- /dev/null +++ b/extension/src/DataSource/index.ts @@ -0,0 +1,5 @@ +import { createJsDebuggerSource } from "./JsDebuggerSource"; + +export class Sources { + public readonly jsSource = createJsDebuggerSource(); +} diff --git a/extension/src/Server.ts b/extension/src/Server.ts index 1e3ffcc..de9421f 100644 --- a/extension/src/Server.ts +++ b/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 { diff --git a/extension/src/extension.ts b/extension/src/extension.ts index 18777c5..7591564 100644 --- a/extension/src/extension.ts +++ b/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(); + } + ) ); } } diff --git a/extension/ui/src/Model/Model.ts b/extension/ui/src/Model/Model.ts index f337cdf..e347297 100644 --- a/extension/ui/src/Model/Model.ts +++ b/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) { diff --git a/extension/ui/src/Model/MonacoBridge.ts b/extension/ui/src/Model/MonacoBridge.ts index 458731a..8cd5b3f 100644 --- a/extension/ui/src/Model/MonacoBridge.ts +++ b/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 => { - 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 { + 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(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, + }; + }), + }; } }