Adds web editor support to playground

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",

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";
 

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 }) {

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";
 

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;

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";
 

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;

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<{}, {}> {

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";
 

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 {

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 }),

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);
+		}
 	}
 }
 

website/src/website/pages/playground/utils.ts

@@ -1,4 +1,3 @@
-import { normalizeLineEnding } from "./utils";
 import { IPlaygroundProject } from "../../../shared";
 
 export function findLastIndex<T>(

website/tsconfig.json

@@ -1,8 +1,8 @@
 {
 	"compilerOptions": {
 		"target": "esnext",
-		"module": "commonjs",
-		"moduleResolution": "node16",
+		"module": "ESNext",
+		"moduleResolution": "Bundler",
 		"strict": true,
 		"outDir": "dist",
 		"skipLibCheck": true,

website/webpack.config.ts → website/webpack.config.js

@@ -3,14 +3,14 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import * as webpack from "webpack";
-import * as path from "path";
-import * as HtmlWebpackPlugin from "html-webpack-plugin";
-import { CleanWebpackPlugin } from "clean-webpack-plugin";
+const webpack = require("webpack");
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-import * as CopyPlugin from "copy-webpack-plugin";
+const CopyPlugin = require("copy-webpack-plugin");
 
-const r = (file: string) => path.resolve(__dirname, file);
+const r = (file) => path.resolve(__dirname, file);
 
 module.exports = {
 	entry: {
@@ -135,9 +135,9 @@ module.exports = {
 			patterns: [{ from: "../out/languages/", to: "./out/languages/" }],
 		}),
 	],
-} as webpack.Configuration;
+};
 
-function getHtml(): string {
+function getHtml() {
 	return `
 <!DOCTYPE html>
 <html>

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"