* Implements languageId support

* Implements typing of helper functions
* Shift+F1 opens a new debug visualizer window if none is opened yet

webview/src/components/ExpressionInput.tsx

@@ -10,7 +10,7 @@ export class ExpressionInput extends React.Component<{ model: Model }> {
 	@observable private contentHeight: number | undefined = undefined;
 	private model = monaco.editor.createModel(
 		"",
-		"text",
+		"javascript",
 		monaco.Uri.parse(`file:///main.ts`)
 	);
 
@@ -54,6 +54,11 @@ export class ExpressionInput extends React.Component<{ model: Model }> {
 		}
 	});
 
+	@disposeOnUnmount
+	private _updateLanguageId = autorun(() => {
+		monaco.editor.setModelLanguage(this.model, this.props.model.languageId);
+	});
+
 	private readonly setEditorDiv = (editorDiv: HTMLDivElement) => {
 		if (!editorDiv) {
 			return;

webview/src/model/Model.ts

@@ -4,8 +4,11 @@ import {
 } from "debug-visualizer/src/contract";
 import { WebSocketStream } from "@hediet/typed-json-rpc-websocket";
 import { ConsoleRpcLogger } from "@hediet/typed-json-rpc";
-import { observable, action, computed, when } from "mobx";
-import { DataExtractorId } from "@hediet/debug-visualizer-data-extraction";
+import { observable, action, computed, when, runInAction } from "mobx";
+import {
+	DataExtractorId,
+	ExtractedData,
+} from "@hediet/debug-visualizer-data-extraction";
 import {
 	Visualization,
 	VisualizationId,
@@ -21,6 +24,7 @@ declare const window: Window & {
 		serverSecret: string;
 		serverPort: number;
 		publicPath: string;
+		expression: string | undefined;
 	};
 };
 
@@ -38,10 +42,15 @@ export class Model {
 	private serverSecret: string;
 
 	@observable expression: string = "";
-	@observable state: DataExtractionState | { kind: "noExpression" } = {
+	@observable state:
+		| DataExtractionState
+		| { kind: "noExpression" }
+		| { kind: "visualizationError"; data: ExtractedData } = {
 		kind: "noExpression",
 	};
 
+	@observable languageId: string = "text";
+
 	@observable private preferredVisualizationId:
 		| VisualizationId
 		| undefined = undefined;
@@ -51,6 +60,11 @@ export class Model {
 		this.preferredVisualizationId = id;
 	}
 
+	@action
+	public setVisualizationError(data: ExtractedData) {
+		this.state = { kind: "visualizationError", data: data };
+	}
+
 	@computed get visualizations():
 		| {
 				visualization: Visualization | undefined;
@@ -99,6 +113,10 @@ export class Model {
 			};
 			updateTheme();
 
+			if (data.expression !== undefined) {
+				this.setExpression(data.expression);
+			}
+
 			this.dispose.track(
 				startInterval(1000, () => {
 					updateTheme();
@@ -191,14 +209,19 @@ export class Model {
 					new ConsoleRpcLogger(),
 					{
 						updateState: async ({ newState }) => {
-							this._loading = newState.kind === "loading";
-							if (!this._loading) {
-								this.state = 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";
+						},
 					}
 				);
 				try {

webview/src/model/MonacoBridge.ts

@@ -2,13 +2,23 @@ import * as monaco from "monaco-editor";
 import { Model } from "./Model";
 import { Disposable } from "@hediet/std/disposable";
 import { autorun } from "mobx";
+
+declare const require: {
+	(path: string): { default: string };
+	context: (
+		path: string,
+		includeSubDirs: boolean,
+		regex: RegExp
+	) => { (fileName: string): { default: string }; keys(): string[] };
+};
+
 export class MonacoBridge {
 	public readonly dispose = Disposable.fn();
 
 	constructor(private readonly model: Model) {
 		monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-			noSemanticValidation: false,
-			noSyntaxValidation: false,
+			noSemanticValidation: true,
+			noSyntaxValidation: true,
 		});
 		monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
 			target: monaco.languages.typescript.ScriptTarget.ES5,
@@ -19,29 +29,45 @@ export class MonacoBridge {
 			strict: true,
 		});
 
-		const es5Lib = require("!!raw-loader!./lib.es5.d.ts.txt")
-			.default as string;
-		const commonTypes = require("!!raw-loader!@hediet/debug-visualizer-data-extraction/src/CommonDataTypes.ts")
-			.default as string;
+		const es5Lib = require("!!raw-loader!./lib.es5.d.ts.txt").default;
+		const commonTypes = require.context(
+			"!!raw-loader!@hediet/debug-visualizer-data-extraction/dist/src/",
+			true,
+			/.*.d.ts$/
+		);
+
+		for (const file of commonTypes.keys()) {
+			console.log(file);
+			this.dispose.track(
+				monaco.languages.typescript.javascriptDefaults.addExtraLib(
+					commonTypes(file).default,
+					`file:///node_modules/debug-visualizer-data-extraction/${file}`
+				)
+			);
+		}
 
 		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;`,
+				`declare const hedietDbgVis: typeof import("debug-visualizer-data-extraction/js/helpers")`,
 				`file:///types.d.ts`
 			),
 		]);
 
-		this.dispose.track(
+		const debugSessionCompletionProvider = new DebugSessionCompletionProvider(
+			this.model
+		);
+
+		this.dispose.track([
 			monaco.languages.registerCompletionItemProvider(
 				"javascript",
-				new DebugSessionCompletionProvider(this.model)
-			)
-		);
+				debugSessionCompletionProvider
+			),
+			monaco.languages.registerCompletionItemProvider(
+				"text",
+				debugSessionCompletionProvider
+			),
+		]);
 
 		this.dispose.track({
 			dispose: autorun(() => {