diff --git a/data-extraction/src/CommonDataTypes.ts b/data-extraction/src/CommonDataTypes.ts index 89e313c..cac1572 100644 --- a/data-extraction/src/CommonDataTypes.ts +++ b/data-extraction/src/CommonDataTypes.ts @@ -40,6 +40,7 @@ export module CommonDataTypes { export interface TreeNode { id: string | undefined; name: string; + value: string | undefined; children: TreeNode[]; data: TExtraData; isMarked: boolean; diff --git a/data-extraction/src/js/DataExtractor.ts b/data-extraction/src/js/DataExtractor.ts index 3f5999d..0ab6a90 100644 --- a/data-extraction/src/js/DataExtractor.ts +++ b/data-extraction/src/js/DataExtractor.ts @@ -3,8 +3,9 @@ import { ExtractedData } from "../DataExtractionResult"; export interface DataExtractor { id: string; getExtractions( - data: any, - extractionCollector: ExtractionCollector + data: unknown, + extractionCollector: ExtractionCollector, + evalFn: (expression: string) => TEval ): void; } @@ -19,3 +20,18 @@ export interface DataExtraction { name: string; extractData(): TData; } + +export function getExtractions( + extractor: DataExtractor, + data: unknown, + evalFn: (expression: string) => T +): DataExtraction[] { + const extractions = new Array>(); + const collector: ExtractionCollector = { + addExtraction(extraction) { + extractions.push(extraction); + }, + }; + extractor.getExtractions(data, collector, evalFn); + return extractions; +} diff --git a/data-extraction/src/js/DataExtractorApi.ts b/data-extraction/src/js/DataExtractorApi.ts index 5ea198b..5e1c1d3 100644 --- a/data-extraction/src/js/DataExtractorApi.ts +++ b/data-extraction/src/js/DataExtractorApi.ts @@ -26,6 +26,7 @@ export interface DataExtractorApi { ): void; getData( value: unknown, + evalFn: (expression: string) => T, preferredDataExtractorId: string | undefined ): JSONString; } @@ -54,7 +55,7 @@ export function selfContainedInitDataExtractorApi(): boolean { registerExtractor(extractor) { obj[prefix + extractor.id] = extractor; }, - getData(value, preferredDataExtractorId) { + getData(value, evalFn, preferredDataExtractorId) { const extractions = new Array>(); const collector: ExtractionCollector = { addExtraction(extraction) { @@ -62,7 +63,7 @@ export function selfContainedInitDataExtractorApi(): boolean { }, }; for (const e of getExtractors()) { - e.getExtractions(value, collector); + e.getExtractions(value, collector, evalFn); } extractions.sort((a, b) => b.priority - a.priority); let usedExtraction = extractions[0]; @@ -113,7 +114,7 @@ export function selfContainedInitDataExtractorApi(): boolean { kind: { text: true, }, - text: data.toString(), + text: "" + data, }; }, }); diff --git a/data-extraction/src/js/Extractors/TypeScriptDataExtractors.ts b/data-extraction/src/js/Extractors/TypeScriptDataExtractors.ts index b5b719e..6975d28 100644 --- a/data-extraction/src/js/Extractors/TypeScriptDataExtractors.ts +++ b/data-extraction/src/js/Extractors/TypeScriptDataExtractors.ts @@ -7,13 +7,16 @@ export class TypeScriptAstDataExtractor readonly id = "TypeScriptAst"; getExtractions( - data: any, - collector: ExtractionCollector + data: unknown, + collector: ExtractionCollector, + evalFn: (expression: string) => TEval ): void { if (typeof data !== "object" || data === undefined) { return; } + const require = evalFn<(request: string) => unknown>("require"); + const tsApi = require("typescript") as typeof ts; if (!tsApi) { return; @@ -61,6 +64,12 @@ export class TypeScriptAstDataExtractor }) .filter(c => c !== null); + let value: string | undefined = undefined; + + if (tsApi.isIdentifier(node)) { + value = node.text; + } + return { name: name, id: memberName, @@ -70,6 +79,7 @@ export class TypeScriptAstDataExtractor position: 0, }, isMarked: node === marked, + value, // startPos: node.pos, // endPos: node.end }; diff --git a/example-project/src/index.ts b/example-project/src/index.ts index 13b1a8f..4e269c3 100644 --- a/example-project/src/index.ts +++ b/example-project/src/index.ts @@ -33,7 +33,123 @@ class Main { class Test { public test() { console.log("aaa"); - const x = ; + const x = e; + } +} +class Test { + public test() { + console.log("aaa"); + const x = e; + } +}class Test { + public test() { + console.log("aaa"); + const x = e; + } +}class Test { + public test() { + console.log("aaa"); + const x = e; + } +}class Test { + public test() { + console.log("aaa"); + const x = e; + } +}class Test { + public test() { + console.log("aaa"); + const x = e; + } +}class Test { + public test() { + console.log("aaa"); + const x = e; + } +}class Test { + public test() { + console.log("aaa"); + const x = e; + } +}class Test { + public test() { + console.log("aaa"); + const x = e; + } +}class Test { + public test() { + console.log("aaa"); + const x = e; + } +}class Test { + public test() { + console.log("aaa"); + const x = e; + } +}class Test { + public test() { + console.log("aaa"); + const x = e; + } +}class Test { + public test() { + console.log("aaa"); + const x = e; + } +}class Test { + public test() { + console.log("aaa"); + const x = e; + } +}class Test { + public test() { + console.log("aaa"); + const x = e; + } +}class Test { + public test() { + console.log("aaa"); + const x = e; + } +}class Test { + public test() { + console.log("aaa"); + const x = e; + } +}class Test { + public test() { + console.log("aaa"); + const x = e; + } +}class Test { + public test() { + console.log("aaa"); + const x = e; + } +}class Test { + public test() { + console.log("aaa"); + const x = e; + } +}class Test { + public test() { + console.log("aaa"); + const x = e; + } +}class Test { + public test() { + console.log("aaa"); + const x = e; + } +}class Test { + public test() { + console.log("aaa"); + const x = e; + } +}class Test { + public test() { + console.log("aaa"); + const x = e; } } `, @@ -42,7 +158,7 @@ class Test { ); console.log(sf); - //new TypeScriptAstDataExtractor().getExtractions(sf, ); + debugger; } toString() { diff --git a/extension/src/DataSource/JsDebuggerSource.ts b/extension/src/DataSource/JsDebuggerSource.ts index 04c7ddd..60027fb 100644 --- a/extension/src/DataSource/JsDebuggerSource.ts +++ b/extension/src/DataSource/JsDebuggerSource.ts @@ -68,7 +68,7 @@ class JsDebuggerSourceImplementation implements JsDataSource { w._state = { kind: "loading" }; const expression = `(${selfContainedGetInitializedDataExtractorApi.toString()})().getData(${ w.expression - })`; + }, expr => eval(expr), undefined)`; const reply = await session.customRequest("evaluate", { expression, diff --git a/extension/src/WebViews.ts b/extension/src/WebViews.ts index 62a338b..3151bec 100644 --- a/extension/src/WebViews.ts +++ b/extension/src/WebViews.ts @@ -47,7 +47,7 @@ export class WebView { } export function getHtml(server: Server) { - const isDev = false; + const isDev = true; return ` diff --git a/extension/src/extension.ts b/extension/src/extension.ts index 03531b3..3aaa075 100644 --- a/extension/src/extension.ts +++ b/extension/src/extension.ts @@ -5,7 +5,7 @@ import { registerUpdateReconciler, getReloadCount, } from "@hediet/node-reload"; -enableHotReload({ entryModule: module }); +enableHotReload({ entryModule: module, loggingEnabled: true }); import { Disposable } from "@hediet/std/disposable"; import { createJsDebuggerSource } from "./DataSource/JsDebuggerSource"; diff --git a/extension/ui/src/Visualizers/TreeVisualizer/Views.tsx b/extension/ui/src/Visualizers/TreeVisualizer/Views.tsx index 38d19ce..1378128 100644 --- a/extension/ui/src/Visualizers/TreeVisualizer/Views.tsx +++ b/extension/ui/src/Visualizers/TreeVisualizer/Views.tsx @@ -7,6 +7,15 @@ import { SvgLine } from "../../Components/SvgElements"; import "./style.scss"; export class TreeViewModel { + private started = true; + start() { + this.started = true; + this.updateOffsets(); + } + stop() { + this.started = false; + } + private version = 0; private lastUpdateVersion = -1; @@ -18,6 +27,9 @@ export class TreeViewModel { @action public updateOffsets() { + if (!this.started) { + return; + } if (!this.root) { return; } @@ -76,6 +88,7 @@ export class TreeNodeViewModel { public readonly treeViewModel: TreeViewModel, public readonly id: string | undefined, public readonly name: string, + public readonly value: string | undefined, public readonly children: TreeNodeViewModel[] ) {} @@ -178,6 +191,22 @@ export class TreeWithPathView extends React.Component<{ @observer export class TreeView extends React.Component<{ model: TreeViewModel }> { + componentWillUpdate() { + this.props.model.stop(); + } + + componentWillMount() { + this.props.model.stop(); + } + + componentDidUpdate() { + this.props.model.start(); + } + + componentDidMount() { + this.props.model.start(); + } + render() { const model = this.props.model; return ( @@ -393,6 +422,9 @@ export class TreeNodeView extends React.Component<{ )} {model.name} + {model.value && ( + {model.value} + )} diff --git a/extension/ui/src/Visualizers/TreeVisualizer/Visualizers.ts b/extension/ui/src/Visualizers/TreeVisualizer/Visualizers.ts index 0fadae8..06e32b7 100644 --- a/extension/ui/src/Visualizers/TreeVisualizer/Visualizers.ts +++ b/extension/ui/src/Visualizers/TreeVisualizer/Visualizers.ts @@ -9,19 +9,20 @@ export function createTreeViewModelFromTreeNodeData( return m; function recurse( - root: CommonDataTypes.TreeNodeData["root"], + node: CommonDataTypes.TreeNodeData["root"], viewModel: TreeViewModel ): TreeNodeViewModel { - const children: TreeNodeViewModel[] = root.children.map(c => + const children: TreeNodeViewModel[] = node.children.map(c => recurse(c, viewModel) ); const model = new TreeNodeViewModel( viewModel, - root.id, - root.name, + node.id, + node.name, + node.value, children ); - model.isMarked = root.isMarked; + model.isMarked = node.isMarked; for (const c of children) { c.parent = model; } diff --git a/extension/ui/src/Visualizers/TreeVisualizer/style.scss b/extension/ui/src/Visualizers/TreeVisualizer/style.scss index a580390..3390756 100644 --- a/extension/ui/src/Visualizers/TreeVisualizer/style.scss +++ b/extension/ui/src/Visualizers/TreeVisualizer/style.scss @@ -56,6 +56,13 @@ .part-id { color: blue; } + + .part-value { + color: darkred; + border: black solid 1px; + padding: 1px 3px; + margin-left: 5px; + } } } diff --git a/yarn.lock b/yarn.lock index 4dcaba8..f80d0ec 100644 --- a/yarn.lock +++ b/yarn.lock @@ -332,7 +332,7 @@ resolved "https://registry.yarnpkg.com/@types/vscode/-/vscode-1.36.0.tgz#ae60242e893d9eda9a0d96d51ef56f1a3fae14ed" integrity sha512-SbHR3Q5g/C3N+Ila3KrRf1rSZiyHxWdOZ7X3yFHXzw6HrvRLuVZrxnwEX0lTBMRpH9LkwZdqRTgXW+D075jxkg== -"@types/webpack@*", "@types/webpack@^4.32.1", "@types/webpack@^4.4.19": +"@types/webpack@*", "@types/webpack@^4.32.1", "@types/webpack@^4.4.19", "@types/webpack@^4.4.31": version "4.32.1" resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.32.1.tgz#6e95010e806f808abd6551c112097ac09035aacf" integrity sha512-9n38CBx9uga1FEAdTipnt0EkbKpsCJFh7xJb1LE65FFb/A6OOLFX022vYsGC1IyVCZ/GroNg9u/RMmlDxGcLIw== @@ -1213,6 +1213,14 @@ clean-css@4.2.x: dependencies: source-map "~0.6.0" +clean-webpack-plugin@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/clean-webpack-plugin/-/clean-webpack-plugin-3.0.0.tgz#a99d8ec34c1c628a4541567aa7b457446460c62b" + integrity sha512-MciirUH5r+cYLGCOL5JX/ZLzOZbVr1ot3Fw+KcvbhUb6PM+yycqd9ZhIlcigQ5gl+XhppNmw3bEFuaaMNyLj3A== + dependencies: + "@types/webpack" "^4.4.31" + del "^4.1.1" + cliui@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"