From 7ba242881948e5bb50aabf025a5838da4e9957a9 Mon Sep 17 00:00:00 2001 From: hediet Date: Fri, 14 Aug 2020 13:45:43 +0200 Subject: [PATCH] New logo, updates changelog, some code improvements. --- extension/CHANGELOG.md | 7 ++++ extension/docs/logo.drawio.png | Bin 0 -> 5155 bytes extension/docs/logo.png | Bin 2847 -> 0 bytes extension/package.json | 7 ++-- extension/src/WebViews.ts | 4 +-- webview/src/components/App.tsx | 25 +++++++++++++ webview/src/components/Visualizer.tsx | 10 ++++-- webview/src/hotComponent.tsx | 49 ++++++++++++++++++++++++++ webview/src/index.tsx | 39 +++----------------- webview/src/style.scss | 8 +---- 10 files changed, 101 insertions(+), 48 deletions(-) create mode 100644 extension/docs/logo.drawio.png delete mode 100644 extension/docs/logo.png create mode 100644 webview/src/components/App.tsx create mode 100644 webview/src/hotComponent.tsx diff --git a/extension/CHANGELOG.md b/extension/CHANGELOG.md index c04fb31..4566373 100644 --- a/extension/CHANGELOG.md +++ b/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. diff --git a/extension/docs/logo.drawio.png b/extension/docs/logo.drawio.png new file mode 100644 index 0000000000000000000000000000000000000000..4be85388c36bcc0a5860a5c04908caa5466394d4 GIT binary patch literal 5155 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 literal 0 HcmV?d00001 diff --git a/extension/docs/logo.png b/extension/docs/logo.png deleted file mode 100644 index 2d9f7d98ab8b94254bd422f9cc72c7041b5728af..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2847 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 iAs+u{c { @@ -68,7 +68,7 @@ export class WebView { constructor(private readonly webviewPanel: WebviewPanel) {} } -export function getHtml( +export function getWebviewHtml( server: Server, expression: string | undefined = undefined ) { diff --git a/webview/src/components/App.tsx b/webview/src/components/App.tsx new file mode 100644 index 0000000..c455c22 --- /dev/null +++ b/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 ; + } +} diff --git a/webview/src/components/Visualizer.tsx b/webview/src/components/Visualizer.tsx index 400e2e7..484e484 100644 --- a/webview/src/components/Visualizer.tsx +++ b/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 ( -
{this.renderContent()}
+
+ {this.renderContent()} +
); } @@ -36,7 +38,11 @@ export class Visualizer extends React.Component<{ model: Model }> { } return ( ); diff --git a/webview/src/hotComponent.tsx b/webview/src/hotComponent.tsx new file mode 100644 index 0000000..520f54a --- /dev/null +++ b/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

= + | React.ComponentClass

+ | React.FunctionComponent

; + +const allComponents = new Map(); + +export function hotComponent( + module: Module +): (Component: T) => T { + return (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 ; + }) as any; + }; +} diff --git a/webview/src/index.tsx b/webview/src/index.tsx index b567caf..f7a90c5 100644 --- a/webview/src/index.tsx +++ b/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(, 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(, elem); diff --git a/webview/src/style.scss b/webview/src/style.scss index c05d2f6..8d44f97 100644 --- a/webview/src/style.scss +++ b/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%;