Update

2023-09-07 15:00:50 +02:00
parent d45dfdaa71
commit a9656e1e12
37 changed files with 5502 additions and 3664 deletions
--- a/webview/package.json
+++ b/webview/package.json
@@ -4,7 +4,7 @@
 	"license": "GPL-3.0",
 	"scripts": {
 		"dev": "webpack-dev-server --hot",
-		"build": "node --max_old_space_size=4096 ../node_modules/webpack/bin/webpack.js --mode production"
+		"build": "node --max_old_space_size=4096 ../node_modules/webpack/bin/webpack.js --mode development"
 	},
 	"main": "./index.js",
 	"dependencies": {
@@ -28,25 +28,24 @@
 	"devDependencies": {
 		"@types/html-webpack-plugin": "^3.2.2",
 		"@types/react-measure": "^2.0.6",
-		"@types/webpack": "^4.41.6",
 		"@types/classnames": "^2.2.9",
 		"@types/react": "^16.9.22",
 		"@types/react-dom": "^16.9.5",
-		"clean-webpack-plugin": "^3.0.0",
-		"css-loader": "^3.4.2",
-		"file-loader": "^5.1.0",
-		"fork-ts-checker-webpack-plugin": "^4.0.4",
-		"html-webpack-plugin": "^3.2.0",
+		"clean-webpack-plugin": "^4.0.0",
+		"css-loader": "^6.8.1",
+		"file-loader": "^6.2.0",
+		"fork-ts-checker-webpack-plugin": "^8.0.0",
+		"html-webpack-plugin": "^5.5.3",
 		"monaco-editor-webpack-plugin": "^4.0.0",
 		"sass": "^1.25.0",
 		"raw-loader": "^4.0.0",
 		"sass-loader": "^8.0.2",
 		"style-loader": "^1.1.3",
-		"ts-loader": "^6.2.1",
-		"ts-node": "^8.6.2",
-		"typescript": "^3.8.2",
-		"webpack": "^4.41.6",
-		"webpack-cli": "^3.3.11",
-		"webpack-dev-server": "^3.10.3"
+		"ts-loader": "^9.4.4",
+		"ts-node": "^10.9.1",
+		"typescript": "^5.1.6",
+		"webpack": "^5.88.1",
+		"webpack-cli": "^5.1.4",
+		"webpack-dev-server": "^4.15.1"
 	}
 }
--- a/webview/src/components/GUI.tsx
+++ b/webview/src/components/GUI.tsx
@@ -1,12 +1,12 @@
-import * as React from "react";
 import { Button, Spinner } from "@blueprintjs/core";
-import { observable, action } from "mobx";
+import { action, observable } from "mobx";
 import { observer } from "mobx-react";
+import * as React from "react";
 import { Model } from "../model/Model";
 import { ExpressionInput } from "./ExpressionInput";
 import { Visualizer } from "./Visualizer";
-import classnames = require("classnames");
 import { VisualizerHeaderDetails } from "./VisualizerHeaderDetails";
+import classnames = require("classnames");

@observer
 export class GUI extends React.Component<{ model: Model }> {
@@ -25,10 +25,7 @@ export class GUI extends React.Component<{ model: Model }> {
 				<div className="part-Header">
 					<VisualizerHeader model={m} />
 				</div>
-				<div
-					className="part-Visualizer"
-					style={{ flex: 1, minHeight: 0 }}
-				>
+				<div className="part-Visualizer" style={{ flex: 1, minHeight: 0 }}>
 					<Visualizer model={m} />
 				</div>
 			</div>
@@ -43,15 +40,9 @@ export class VisualizerHeader extends React.Component<{ model: Model }> {
 	render() {
 		const m = this.props.model;
 		return (
-			<div
-				className="component-VisualizerHeader"
-				style={{ display: "flex", flexDirection: "row" }}
-			>
+			<div className="component-VisualizerHeader" style={{ display: "flex", flexDirection: "row" }}>
 				<div
-					className={classnames(
-						"part-ExpandButton",
-						this.expanded && "expanded"
-					)}
+					className={classnames("part-ExpandButton", this.expanded && "expanded")}
 					onClick={this.toggleExpanded}
 				/>
 				<div
@@ -96,10 +87,7 @@ export class VisualizerHeaderMain extends React.Component<{ model: Model }> {
 					alignItems: "center",
 				}}
 			>
-				<div
-					className="part-ExpressionInput "
-					style={{ flex: 1, minWidth: 0 }}
-				>
+				<div className="part-ExpressionInput " style={{ flex: 1, minWidth: 0 }}>
 					<ExpressionInput model={m} />
 				</div>
 				<div style={{ width: 4 }} />
@@ -109,21 +97,9 @@ export class VisualizerHeaderMain extends React.Component<{ model: Model }> {
 							<Spinner size={Spinner.SIZE_SMALL} />
 						</div>
 					) : (
-						<Button
-							minimal
-							small
-							className="part-Icon"
-							icon="refresh"
-							onClick={() => m.refresh()}
-						/>
+						<Button minimal small className="part-Icon" icon="refresh" onClick={() => m.refresh()} />
 					))}
-				<Button
-					minimal
-					small
-					className="part-Icon"
-					icon="log-in"
-					onClick={() => m.openBrowser()}
-				/>
+				<Button minimal small className="part-Icon" icon="log-in" onClick={() => m.openBrowser()} />
 				{/*
 					TODO
 					<Button
--- a/webview/src/index.tsx
+++ b/webview/src/index.tsx
@@ -1,8 +1,8 @@
+import * as monaco from "monaco-editor";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import "./style.scss";
 import { App } from "./components/App";
-import * as monaco from "monaco-editor";
+import "./style.scss";

 (globalThis as any).monaco = monaco;

--- a/webview/src/model/Model.ts
+++ b/webview/src/model/Model.ts
@@ -1,37 +1,27 @@
-import {
-	webviewContract,
-	DataExtractionState,
-	WindowWithWebviewData,
-	WebviewUrlParams,
-} from "debug-visualizer/src/webviewContract";
-import { WebSocketStream } from "@hediet/typed-json-rpc-websocket";
+import { DataExtractorId, VisualizationData } from "@hediet/debug-visualizer-data-extraction";
+import { Disposable } from "@hediet/std/disposable";
+import { EventTimer } from "@hediet/std/timer";
 import { ConsoleRpcLogger } from "@hediet/typed-json-rpc";
-import {
-	observable,
-	action,
-	computed,
-	when,
-	runInAction,
-	ObservableMap,
-} from "mobx";
-import {
-	DataExtractorId,
-	VisualizationData,
-} from "@hediet/debug-visualizer-data-extraction";
+import { WebSocketStream } from "@hediet/typed-json-rpc-websocket";
 import "@hediet/visualization-bundle";
 import {
-	globalVisualizationFactory,
-	VisualizationId,
-	Visualization,
 	RegisterVisualizerFn,
-	createVisualizer,
-	libImplementation,
+	Visualization,
 	VisualizationFactory,
+	VisualizationId,
+	createVisualizer,
+	globalVisualizationFactory,
+	libImplementation,
 } from "@hediet/visualization-core";
-import { getApi as getVsCodeApi } from "./VsCodeApi";
+import {
+	DataExtractionState,
+	WebviewUrlParams,
+	WindowWithWebviewData,
+	webviewContract,
+} from "debug-visualizer/src/webviewContract";
+import { ObservableMap, action, computed, observable, runInAction, when } from "mobx";
 import { MonacoBridge } from "./MonacoBridge";
-import { Disposable } from "@hediet/std/disposable";
-import { startInterval, EventTimer } from "@hediet/std/timer";
+import { getApi as getVsCodeApi } from "./VsCodeApi";

 declare const window: Window & WindowWithWebviewData;

@@ -39,8 +29,7 @@ declare let __webpack_public_path__: string;

 export class Model {
 	public readonly dispose = Disposable.fn();
-	public readonly runningMode: "standalone" | "webview" | "webviewIFrame" =
-		"webview";
+	public readonly runningMode: "standalone" | "webview" | "webviewIFrame" = "webview";

 	@observable
 	public theme: "dark" | "light" = "light";
@@ -58,13 +47,10 @@ export class Model {

 	@observable languageId: string = "text";

-	@observable private preferredVisualizationId: VisualizationId | undefined =
-		undefined;
+	@observable private preferredVisualizationId: VisualizationId | undefined = undefined;

 	@observable isPolling = false;
-	private readonly pollingTimer = this.dispose.track(
-		new EventTimer(500, "stopped")
-	);
+	private readonly pollingTimer = this.dispose.track(new EventTimer(500, "stopped"));

 	@action
 	public setPreferredVisualizationId(id: VisualizationId) {
@@ -95,10 +81,7 @@ export class Model {
 		if (this.state.kind === "data") {
 			const vis = visualizerRegistry
 				.get()
-				.getVisualizations(
-					this.state.result.data,
-					this.preferredVisualizationId
-				);
+				.getVisualizations(this.state.result.data, this.preferredVisualizationId);
 			return {
 				visualization: vis.bestVisualization,
 				allVisualizations: vis.allVisualizations,
@@ -109,8 +92,7 @@ export class Model {
 	}

 	@observable.ref
-	public server: typeof webviewContract.TServerInterface | undefined =
-		undefined;
+	public server: typeof webviewContract.TServerInterface | undefined = undefined;

 	private readonly vsCodeApi = getVsCodeApi<{ expression: string }>();

@@ -137,9 +119,7 @@ export class Model {
 			}
 		} else {
 			const url = new URL(window.location.href);
-			const urlParams = Object.fromEntries(
-				url.searchParams.entries()
-			) as unknown as WebviewUrlParams;
+			const urlParams = Object.fromEntries(url.searchParams.entries()) as unknown as WebviewUrlParams;
 			const portStr = urlParams.serverPort;
 			if (!portStr) {
 				throw new Error("No port given.");
@@ -220,29 +200,26 @@ export class Model {
 					host: "localhost",
 					port: this.port,
 				});
-				const { server } = webviewContract.getServerFromStream(
-					stream,
-					new ConsoleRpcLogger(),
-					{
-						updateState: async ({ newState }) => {
-							runInAction(() => {
-								this._loading = newState.kind === "loading";
-								if (!this._loading) {
-									this.state = newState;
-								}
-							});
-						},
-						setExpression: async ({ expression }) => {
-							this.setExpression(expression);
-						},
-						updateLanguageId: async ({ languageId }) => {
-							this.languageId = languageId || "text";
-						},
-						setTheme: async ({ theme }) => {
-							this.theme = theme;
-						},
-						setCustomVisualizerScript: async ({ id, jsSource }) => {
-							eval(`
+				const { server } = webviewContract.getServerFromStream(stream, new ConsoleRpcLogger(), {
+					updateState: async ({ newState }) => {
+						runInAction(() => {
+							this._loading = newState.kind === "loading";
+							if (!this._loading) {
+								this.state = newState;
+							}
+						});
+					},
+					setExpression: async ({ expression }) => {
+						this.setExpression(expression);
+					},
+					updateLanguageId: async ({ languageId }) => {
+						this.languageId = languageId || "text";
+					},
+					setTheme: async ({ theme }) => {
+						this.theme = theme;
+					},
+					setCustomVisualizerScript: async ({ id, jsSource }) => {
+						eval(`
 								((load) => {
 									let fn = undefined;
 									if (load) {
@@ -255,9 +232,8 @@ export class Model {
 									${jsSource ? `function (module) { ${jsSource} }` : "undefined"}
 								)
 							`);
-						},
-					}
-				);
+					},
+				});
 				try {
 					await server.authenticate({ secret: this.serverSecret });
 				} catch (e) {
@@ -291,18 +267,12 @@ const visualizerRegistry = computed(() => {
 		result.addHiddenVisualizer(visualization);
 	}
 	fns.forEach((fn) => {
-		fn(
-			(options) => result.addVisualizer(createVisualizer(options)),
-			libImplementation
-		);
+		fn((options) => result.addVisualizer(createVisualizer(options)), libImplementation);
 	});
 	return result;
 });

-function setVisualizationModule(
-	id: string,
-	moduleFn: RegisterVisualizerFn | undefined
-) {
+function setVisualizationModule(id: string, moduleFn: RegisterVisualizerFn | undefined) {
 	if (moduleFn) {
 		fns.set(id, moduleFn);
 	} else {
--- a/webview/tsconfig.json
+++ b/webview/tsconfig.json
@@ -1,16 +1,18 @@
 {
-    "compilerOptions": {
-        "target": "esnext",
-        "module": "commonjs",
-        "strict": true,
-        "outDir": "dist",
-        "skipLibCheck": true,
-        "rootDir": "./src",
-        "resolveJsonModule": true,
-        "newLine": "LF",
-        "sourceMap": true,
-        "jsx": "react",
-        "experimentalDecorators": true
-    },
-    "include": ["src/**/*"]
+	"compilerOptions": {
+		"target": "ES2017",
+		"module": "commonjs",
+		"strict": true,
+		"outDir": "dist",
+		"lib": ["DOM", "ES2023", "DOM.Iterable"],
+		"skipLibCheck": true,
+		"rootDir": "./src",
+		"resolveJsonModule": true,
+		"newLine": "LF",
+		"sourceMap": true,
+		"jsx": "react",
+		"experimentalDecorators": true,
+		"allowSyntheticDefaultImports": true
+	},
+	"include": ["src/**/*"]
 }
--- a/webview/webpack.config.ts
+++ b/webview/webpack.config.ts
@@ -1,9 +1,9 @@
-import * as webpack from "webpack";
-import path = require("path");
-import HtmlWebpackPlugin = require("html-webpack-plugin");
-import MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
-import ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
 import { CleanWebpackPlugin } from "clean-webpack-plugin";
+import * as HtmlWebpackPlugin from "html-webpack-plugin";
+import * as path from "path";
+import * as webpack from "webpack";
+import ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
+import MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");

 const r = (file: string) => path.resolve(__dirname, file);

@@ -13,7 +13,7 @@ module.exports = {
 		path: r("dist"),
 		filename: "[name].js",
 		chunkFilename: "[name]-[hash].js",
-		devtoolModuleFilenameTemplate: info => {
+		devtoolModuleFilenameTemplate: (info: any) => {
 			let result = info.absoluteResourcePath.replace(/\\/g, "/");
 			if (!result.startsWith("file:")) {
 				// Some paths already start with the file scheme.
@@ -30,10 +30,10 @@ module.exports = {
 		rules: [
 			{
 				test: /\.less$/,
-				loaders: ["style-loader", "css-loader", "less-loader"],
+				use: ["style-loader", "css-loader", "less-loader"],
 			},
-			{ test: /\.css$/, loader: "style-loader!css-loader" },
-			{ test: /\.scss$/, loader: "style-loader!css-loader!sass-loader" },
+			{ test: /\.css$/, use: ["style-loader", "css-loader"] },
+			{ test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] },
 			{
 				test: /\.(jpe?g|png|gif|eot|ttf|svg|woff|woff2|md)$/i,
 				loader: "file-loader",
@@ -45,9 +45,9 @@ module.exports = {
 			},
 		],
 	},
-	node: {
+	/*node: {
 		fs: "empty",
-	},
+	},*/
 	plugins: (() => {
 		const plugins: any[] = [
 			new HtmlWebpackPlugin({
@@ -55,10 +55,13 @@ module.exports = {
 			}),
 			new ForkTsCheckerWebpackPlugin(),
 			new CleanWebpackPlugin(),
-			new MonacoWebpackPlugin({
+			new webpack.DefinePlugin({
+				"process.env": JSON.stringify(process.env),
+			}),
+			/*new MonacoWebpackPlugin({
 				// Add more languages here once webworker issues are solved.
 				languages: ["typescript"],
-			}),
+			}),*/
 		];

 		return plugins;