From 27978a80645bffa8d3766fa74c9364b99d9cf551 Mon Sep 17 00:00:00 2001
From: Henning Dieterichs <hdieterichs@microsoft.com>
Date: Thu, 2 May 2024 16:46:43 +0200
Subject: [PATCH] Adds web editor support to playground

---
 website/package.json                          |   3 +-
 website/src/website/components/Nav.tsx        |   2 +-
 website/src/website/components/Page.tsx       |   2 +-
 website/src/website/components/Select.tsx     |   2 +-
 website/src/website/monacoEditorVersion.ts    |   2 +-
 website/src/website/pages/App.tsx             |   2 +-
 website/src/website/pages/DocsPage.tsx        |   2 +-
 website/src/website/pages/MonarchPage.tsx     |   2 +-
 website/src/website/pages/home/Home.tsx       |   2 +-
 .../website/pages/playground/LocationModel.ts |  19 +++++++----
 .../pages/playground/PlaygroundModel.ts       |  32 +++++++++++++++++-
 .../website/pages/playground/SettingsModel.ts |  13 +++++--
 website/src/website/pages/playground/utils.ts |   1 -
 website/tsconfig.json                         |  11 +++---
 website/tsconfig.web.json                     |  19 +++++++++++
 website/vscode-web-editors.tgz                | Bin 0 -> 7880 bytes
 website/yarn.lock                             |   4 +++
 17 files changed, 91 insertions(+), 27 deletions(-)
 create mode 100644 website/tsconfig.web.json
 create mode 100644 website/vscode-web-editors.tgz

diff --git a/website/package.json b/website/package.json
index c621280b..79495e7a 100644
--- a/website/package.json
+++ b/website/package.json
@@ -28,7 +28,8 @@
 		"react": "^17.0.2",
 		"react-bootstrap": "^2.4.0",
 		"react-dom": "^17.0.2",
-		"typedoc": "^0.23.26"
+		"typedoc": "^0.23.26",
+		"@vscode/web-editors": "./vscode-web-editors.tgz"
 	},
 	"devDependencies": {
 		"@types/classnames": "^2.3.1",
diff --git a/website/src/website/components/Nav.tsx b/website/src/website/components/Nav.tsx
index 4541cc01..7cc6c069 100644
--- a/website/src/website/components/Nav.tsx
+++ b/website/src/website/components/Nav.tsx
@@ -1,4 +1,4 @@
-import React = require("react");
+import * as React from "react";
 import { home, playground, docs, monarch } from "../pages/routes";
 import { Container, Navbar, Nav, NavDropdown } from "./bootstrap";
 
diff --git a/website/src/website/components/Page.tsx b/website/src/website/components/Page.tsx
index 6f941c95..fc50d6f7 100644
--- a/website/src/website/components/Page.tsx
+++ b/website/src/website/components/Page.tsx
@@ -1,4 +1,4 @@
-import React = require("react");
+import * as React from "react";
 import { PageNav } from "./Nav";
 
 export function Page(props: { children: React.ReactNode }) {
diff --git a/website/src/website/components/Select.tsx b/website/src/website/components/Select.tsx
index d14897e0..89564d25 100644
--- a/website/src/website/components/Select.tsx
+++ b/website/src/website/components/Select.tsx
@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import React = require("react");
+import * as React from "react";
 import { IReference } from "../utils/ref";
 import { Form } from "./bootstrap";
 
diff --git a/website/src/website/monacoEditorVersion.ts b/website/src/website/monacoEditorVersion.ts
index 803c4945..1f5b9be7 100644
--- a/website/src/website/monacoEditorVersion.ts
+++ b/website/src/website/monacoEditorVersion.ts
@@ -3,6 +3,6 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import * as packageJson from "monaco-editor/package.json";
+import packageJson from "monaco-editor/package.json";
 
 export const monacoEditorVersion = packageJson.version;
diff --git a/website/src/website/pages/App.tsx b/website/src/website/pages/App.tsx
index 2537e3ac..e3e15672 100644
--- a/website/src/website/pages/App.tsx
+++ b/website/src/website/pages/App.tsx
@@ -1,7 +1,7 @@
 import { Home } from "./home/Home";
 import { PlaygroundPage } from "./playground/PlaygroundPage";
 import { docs, home, monarch, playground } from "./routes";
-import React = require("react");
+import * as React from "react";
 import { DocsPage } from "./DocsPage";
 import { MonarchPage } from "./MonarchPage";
 
diff --git a/website/src/website/pages/DocsPage.tsx b/website/src/website/pages/DocsPage.tsx
index 79eb9e0f..c138e5a5 100644
--- a/website/src/website/pages/DocsPage.tsx
+++ b/website/src/website/pages/DocsPage.tsx
@@ -5,7 +5,7 @@ import {
 	IHistoryModel,
 	ILocation,
 } from "../utils/ObservableHistory";
-import React = require("react");
+import * as React from "react";
 
 export class DocsPage extends React.Component implements IHistoryModel {
 	private _lastIFrame: HTMLIFrameElement | null = null;
diff --git a/website/src/website/pages/MonarchPage.tsx b/website/src/website/pages/MonarchPage.tsx
index 649acfcc..f6ae3343 100644
--- a/website/src/website/pages/MonarchPage.tsx
+++ b/website/src/website/pages/MonarchPage.tsx
@@ -1,4 +1,4 @@
-import React = require("react");
+import * as React from "react";
 import { Page } from "../components/Page";
 
 export class MonarchPage extends React.Component<{}, {}> {
diff --git a/website/src/website/pages/home/Home.tsx b/website/src/website/pages/home/Home.tsx
index 759a06b2..42124b4b 100644
--- a/website/src/website/pages/home/Home.tsx
+++ b/website/src/website/pages/home/Home.tsx
@@ -8,7 +8,7 @@ import {
 	ControlledMonacoEditor,
 } from "../../components/monaco/MonacoEditor";
 import { ObservablePromise } from "../../utils/ObservablePromise";
-import React = require("react");
+import * as React from "react";
 import { ref } from "../../utils/ref";
 import { monacoEditorVersion } from "../../monacoEditorVersion";
 
diff --git a/website/src/website/pages/playground/LocationModel.ts b/website/src/website/pages/playground/LocationModel.ts
index abc96ad1..d2679979 100644
--- a/website/src/website/pages/playground/LocationModel.ts
+++ b/website/src/website/pages/playground/LocationModel.ts
@@ -38,13 +38,18 @@ export class LocationModel implements IHistoryModel {
 	 */
 	@observable historyId: number = 0;
 
-	constructor(private readonly model: PlaygroundModel) {
-		this.dispose.track(
-			new HistoryController((initialLocation) => {
-				this.updateLocation(initialLocation);
-				return this;
-			})
-		);
+	constructor(
+		private readonly model: PlaygroundModel,
+		createHistoryController = true
+	) {
+		if (createHistoryController) {
+			this.dispose.track(
+				new HistoryController((initialLocation) => {
+					this.updateLocation(initialLocation);
+					return this;
+				})
+			);
+		}
 	}
 
 	get location(): ILocation {
diff --git a/website/src/website/pages/playground/PlaygroundModel.ts b/website/src/website/pages/playground/PlaygroundModel.ts
index 46ea286c..5c33dd4d 100644
--- a/website/src/website/pages/playground/PlaygroundModel.ts
+++ b/website/src/website/pages/playground/PlaygroundModel.ts
@@ -30,6 +30,7 @@ import {
 } from "./SettingsModel";
 import { BisectModel } from "./BisectModel";
 import { LocationModel } from "./LocationModel";
+import { createJsonWebEditorClient, vObj, vString } from "@vscode/web-editors";
 
 export class PlaygroundModel {
 	public readonly dispose = Disposable.fn();
@@ -47,7 +48,25 @@ export class PlaygroundModel {
 	@observable
 	public reloadKey = 0;
 
-	public readonly historyModel = new LocationModel(this);
+	private readonly webEditorClient = createJsonWebEditorClient(
+		vObj({
+			js: vString(),
+			html: vString(),
+			css: vString(),
+		}),
+		(data) => {
+			runInAction(() => {
+				this.html = data.html;
+				this.js = data.js;
+				this.css = data.css;
+			});
+		}
+	);
+
+	public readonly historyModel = new LocationModel(
+		this,
+		this.webEditorClient === undefined
+	);
 
 	public reload(): void {
 		this.reloadKey++;
@@ -163,6 +182,17 @@ export class PlaygroundModel {
 	constructor() {
 		let lastState: IPreviewState | undefined = undefined;
 
+		this.webEditorClient?.onDidConnect.then(() => {
+			autorun(() => {
+				const state = this.playgroundProject;
+				this.webEditorClient!.updateContent({
+					js: state.js,
+					html: state.html,
+					css: state.css,
+				});
+			});
+		});
+
 		this.dispose.track({
 			dispose: reaction(
 				() => ({ state: this.state }),
diff --git a/website/src/website/pages/playground/SettingsModel.ts b/website/src/website/pages/playground/SettingsModel.ts
index 00016c10..36c16566 100644
--- a/website/src/website/pages/playground/SettingsModel.ts
+++ b/website/src/website/pages/playground/SettingsModel.ts
@@ -42,7 +42,12 @@ export class SettingsModel {
 	}
 
 	constructor() {
-		const settingsStr = localStorage.getItem(this.settingsKey);
+		const settingsStr = "";
+		try {
+			localStorage.getItem(this.settingsKey);
+		} catch (e) {
+			console.error("Failed to load settings from localStorage", e);
+		}
 		if (settingsStr) {
 			this._settings = JSON.parse(settingsStr);
 		} else {
@@ -54,7 +59,11 @@ export class SettingsModel {
 	setSettings(settings: Settings): void {
 		const settingsJson = JSON.stringify(toJS(settings));
 		this._settings = JSON.parse(settingsJson);
-		localStorage.setItem(this.settingsKey, settingsJson);
+		try {
+			localStorage.setItem(this.settingsKey, settingsJson);
+		} catch (e) {
+			console.error("Failed to save settings to localStorage", e);
+		}
 	}
 }
 
diff --git a/website/src/website/pages/playground/utils.ts b/website/src/website/pages/playground/utils.ts
index 29d9fd10..15d1b29c 100644
--- a/website/src/website/pages/playground/utils.ts
+++ b/website/src/website/pages/playground/utils.ts
@@ -1,4 +1,3 @@
-import { normalizeLineEnding } from "./utils";
 import { IPlaygroundProject } from "../../../shared";
 
 export function findLastIndex<T>(
diff --git a/website/tsconfig.json b/website/tsconfig.json
index c89ec757..7ba57100 100644
--- a/website/tsconfig.json
+++ b/website/tsconfig.json
@@ -2,18 +2,15 @@
 	"compilerOptions": {
 		"target": "esnext",
 		"module": "commonjs",
-		"moduleResolution": "node16",
+		"moduleResolution": "Node",
 		"strict": true,
 		"outDir": "dist",
 		"skipLibCheck": true,
-		"rootDir": "./src",
 		"resolveJsonModule": true,
 		"newLine": "LF",
 		"sourceMap": true,
-		"jsx": "react",
-		"experimentalDecorators": true,
-		// to enable mobx decorators
-		"useDefineForClassFields": false
+		"useDefineForClassFields": false,
+		"noEmit": true
 	},
-	"include": ["src/**/*", "./node_modules/monaco-editor/monaco.d.ts"]
+	"exclude": ["src/**/*", "./node_modules/monaco-editor/monaco.d.ts"]
 }
diff --git a/website/tsconfig.web.json b/website/tsconfig.web.json
new file mode 100644
index 00000000..0e223beb
--- /dev/null
+++ b/website/tsconfig.web.json
@@ -0,0 +1,19 @@
+{
+	"compilerOptions": {
+		"target": "esnext",
+		"module": "ESNext",
+		"moduleResolution": "Bundler",
+		"strict": true,
+		"outDir": "dist",
+		"skipLibCheck": true,
+		"rootDir": "./src",
+		"resolveJsonModule": true,
+		"newLine": "LF",
+		"sourceMap": true,
+		"jsx": "react",
+		"experimentalDecorators": true,
+		"useDefineForClassFields": false,
+		"noEmit": true
+	},
+	"include": ["src/**/*", "./node_modules/monaco-editor/monaco.d.ts"]
+}
diff --git a/website/vscode-web-editors.tgz b/website/vscode-web-editors.tgz
new file mode 100644
index 0000000000000000000000000000000000000000..ea85ff18e09afd51d2546714788257841be34b00
GIT binary patch
literal 7880
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

literal 0
HcmV?d00001

diff --git a/website/yarn.lock b/website/yarn.lock
index 07b09ad2..fdec9af1 100644
--- a/website/yarn.lock
+++ b/website/yarn.lock
@@ -487,6 +487,10 @@
   dependencies:
     "@types/node" "*"
 
+"@vscode/web-editors@./vscode-web-editors.tgz":
+  version "0.1.0"
+  resolved "./vscode-web-editors.tgz#657c1b47d50dfd1a457f660e3184fb88121f8b24"
+
 "@webassemblyjs/ast@1.11.6", "@webassemblyjs/ast@^1.11.5":
   version "1.11.6"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.6.tgz#db046555d3c413f8966ca50a95176a0e2c642e24"