From 5964c1c5039da12fae437c0ea35aa860b053f19e Mon Sep 17 00:00:00 2001 From: Henning Dieterichs Date: Mon, 20 Jul 2020 19:40:12 +0200 Subject: [PATCH] Adds support for pwa-node and adds a poll option. --- .../EvaluationEngine/JsEvaluationEngine.ts | 17 ++- extension/src/VsCodeDebugger.ts | 5 +- .../src/visualizers/AstVisualizer.tsx | 144 +++++++++++------- webview/package.json | 3 +- webview/src/components/GUI.tsx | 27 ++-- .../components/VisualizerHeaderDetails.tsx | 8 +- webview/src/index.tsx | 1 + webview/src/model/Model.ts | 21 ++- webview/webpack.config.ts | 8 + yarn.lock | 5 + 10 files changed, 162 insertions(+), 77 deletions(-) diff --git a/extension/src/EvaluationWatchService/EvaluationEngine/JsEvaluationEngine.ts b/extension/src/EvaluationWatchService/EvaluationEngine/JsEvaluationEngine.ts index c9703e6..dc95c6f 100644 --- a/extension/src/EvaluationWatchService/EvaluationEngine/JsEvaluationEngine.ts +++ b/extension/src/EvaluationWatchService/EvaluationEngine/JsEvaluationEngine.ts @@ -25,6 +25,7 @@ export class JsEvaluationEngine implements EvaluationEngine { "extensionHost", "chrome", "pwa-chrome", + "pwa-node", ]; if (supportedDebugAdapters.indexOf(session.session.type) !== -1) { return new JsEvaluator(session); @@ -38,6 +39,13 @@ class JsEvaluator implements Evaluator { constructor(private readonly session: VsCodeDebugSession) {} + private getContext(): "copy" | "repl" { + if (this.session.session.type.startsWith("pwa-")) { + return "copy"; + } + return "repl"; + } + public async evaluate({ expression, preferredExtractorId, @@ -75,10 +83,13 @@ class JsEvaluator implements Evaluator { const reply = await this.session.evaluate({ expression: wrappedExpr, frameId, - context: "repl", + context: this.getContext(), }); const resultStr = reply.result; - const jsonData = resultStr.substr(1, resultStr.length - 2); + const jsonData = + this.getContext() === "copy" + ? resultStr + : resultStr.substr(1, resultStr.length - 2); const result = JSON.parse(jsonData) as DataResult; if (result.kind === "NoExtractors") { @@ -117,7 +128,7 @@ class JsEvaluator implements Evaluator { await this.session.evaluate({ expression, frameId, - context: "repl", + context: this.getContext(), }); return true; diff --git a/extension/src/VsCodeDebugger.ts b/extension/src/VsCodeDebugger.ts index add35a4..df2e897 100644 --- a/extension/src/VsCodeDebugger.ts +++ b/extension/src/VsCodeDebugger.ts @@ -35,9 +35,6 @@ export class VsCodeDebugger { createDebugAdapterTracker: session => { const extendedSession = this.getDebugSession(session); return { - onWillReceiveMessage: msg => { - console.log(msg.type, msg.event, msg); - }, onDidSendMessage: async msg => { type Message = | StoppedEvent @@ -167,7 +164,7 @@ export class VsCodeDebugSession { public async evaluate(args: { expression: string; frameId: number | undefined; - context: "watch" | "repl"; + context: "watch" | "repl" | "copy"; }): Promise<{ result: string }> { const reply = await this.session.customRequest("evaluate", { expression: args.expression, diff --git a/visualization/src/visualizers/AstVisualizer.tsx b/visualization/src/visualizers/AstVisualizer.tsx index 5c33c2e..2927b11 100644 --- a/visualization/src/visualizers/AstVisualizer.tsx +++ b/visualization/src/visualizers/AstVisualizer.tsx @@ -12,7 +12,7 @@ import { createTreeViewModelFromTreeNodeData } from "./TreeVisualizer/TreeVisual import { TreeWithPathView, TreeViewModel } from "./TreeVisualizer/Views"; import * as React from "react"; import { observer, disposeOnUnmount } from "mobx-react"; -import { observable, autorun, trace } from "mobx"; +import { observable, autorun, trace, computed } from "mobx"; import * as monaco from "monaco-editor"; import { getLanguageId } from "./text-visualizers/MonacoTextVisualizer"; import LineColumn from "line-column"; @@ -115,80 +115,116 @@ export class MonacoEditor extends React.Component<{ } } + @computed.struct + private get markedRanges(): monaco.IRange[] { + if (!this.editor || !this.model) { + return []; + } + + const editorModel = this.model; + const ranges = this.props.model.marked.map(s => + this.props.nodeInfoToRange(s.data) + ); + return ranges; + } + @disposeOnUnmount private _updateMarkedDecorations = autorun( () => { - if (this.editor && this.model) { - const editorModel = this.model; - const ranges = this.props.model.marked.map(s => - this.props.nodeInfoToRange(s.data) + if (!this.editor) { + return; + } + const ranges = this.markedRanges; + this.markedDecorations = this.editor.deltaDecorations( + this.markedDecorations, + ranges.map(range => ({ + range, + options: { className: "marked" }, + })) + ); + if (ranges.length > 0) { + this.editor.revealRange( + ranges[0], + monaco.editor.ScrollType.Smooth ); - this.markedDecorations = this.editor.deltaDecorations( - this.markedDecorations, - ranges.map(range => ({ - range, - options: { className: "marked" }, - })) - ); - if (ranges.length > 0) { - this.editor.revealRange( - ranges[0], - monaco.editor.ScrollType.Smooth - ); - } } }, { name: "updateMarkedDecorations" } ); + @computed.struct + private get selected(): monaco.IRange | undefined { + if (this.editor && this.model) { + const selected = this.props.model.selected; + if (selected) { + const range = this.props.nodeInfoToRange(selected.data); + return range; + } + } + return undefined; + } + @disposeOnUnmount private _updateSelectedDecoration = autorun( () => { - if (this.editor && this.model) { - const selected = this.props.model.selected; - if (selected) { - const range = this.props.nodeInfoToRange(selected.data); - this.selectedDecorations = this.editor.deltaDecorations( - this.selectedDecorations, - [ - { - range, - options: { className: "selected" }, - }, - ] - ); - this.editor.revealRange( - range, - monaco.editor.ScrollType.Smooth - ); - } else { - this.selectedDecorations = this.editor.deltaDecorations( - this.selectedDecorations, - [] - ); - } + console.log("_updateSelectedDecoration"); + if (!this.editor) { + return; + } + const range = this.selected; + if (range) { + this.selectedDecorations = this.editor.deltaDecorations( + this.selectedDecorations, + [ + { + range, + options: { className: "selected" }, + }, + ] + ); + this.editor.revealRange(range, monaco.editor.ScrollType.Smooth); + } else { + this.selectedDecorations = this.editor.deltaDecorations( + this.selectedDecorations, + [] + ); } }, { name: "updateDecorations" } ); + private test = (() => { + console.log("test created"); + })(); + + @computed.struct + private get modelData(): { text: string; languageId: string } { + const { text, languageId } = this.props; + return { text, languageId }; + } + @disposeOnUnmount - private _updateText = autorun(() => { - if (this.editor) { - const model = monaco.editor.createModel( - this.props.text, - this.props.languageId, - undefined - ); + private _updateText = autorun( + () => { + console.log("_updateText rerun"); + if (this.editor) { + const model = monaco.editor.createModel( + this.modelData.text, + this.modelData.languageId, + undefined + ); - this.editor.setModel(model); + this.editor.setModel(model); - if (this.modelNotObservable) { - this.modelNotObservable.dispose(); + if (this.modelNotObservable) { + this.modelNotObservable.dispose(); + } + this.modelNotObservable = model; + this.model = model; } - this.model = model; - } - }); + }, + { name: "Update Model" } + ); private readonly setEditorDiv = (editorDiv: HTMLDivElement) => { if (!editorDiv) { diff --git a/webview/package.json b/webview/package.json index ac20c23..65808f2 100644 --- a/webview/package.json +++ b/webview/package.json @@ -19,7 +19,8 @@ "react": "^16.12.0", "react-dom": "^16.12.0", "react-measure": "^2.3.0", - "@hediet/debug-visualizer-data-extraction": "*" + "@hediet/debug-visualizer-data-extraction": "*", + "@knuddels/mobx-logger": "^1.1.1" }, "devDependencies": { "@types/html-webpack-plugin": "^3.2.2", diff --git a/webview/src/components/GUI.tsx b/webview/src/components/GUI.tsx index 3678cbd..010799a 100644 --- a/webview/src/components/GUI.tsx +++ b/webview/src/components/GUI.tsx @@ -103,19 +103,20 @@ export class VisualizerHeaderMain extends React.Component<{ model: Model }> {
- {m.loading ? ( -
- -
- ) : ( -