Implements reload command

website/src/runner/index.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { loadMonaco } from "../monaco-loader";
-import { IMessage, IPreviewState } from "../shared";
+import { IMessageFromRunner, IMessageToRunner, IPreviewState } from "../shared";
 import "./style.scss";
 
 window.addEventListener("message", (event) => {
@@ -14,7 +14,7 @@ window.addEventListener("message", (event) => {
 		console.error("not in sandbox");
 		return;
 	}
-	const e = event.data as IMessage | { kind: undefined };
+	const e = event.data as IMessageToRunner | { kind: undefined };
 	if (e.kind === "initialize") {
 		initialize(e.state);
 	} else if (e.kind === "update-css") {
@@ -64,16 +64,23 @@ async function initialize(state: IPreviewState) {
 	}
 }
 
-(globalThis as any).bindModelToCodeStr = function bindModel(
+function sendMessageToParent(message: IMessageFromRunner) {
+	window.parent.postMessage(message, "*");
+}
+
+(globalThis as any).$sendMessageToParent = sendMessageToParent;
+
+(globalThis as any).$bindModelToCodeStr = function bindModel(
 	model: any,
 	codeStringName: string
 ) {
 	model.onDidChangeContent(() => {
 		const value = model.getValue();
-		window.parent.postMessage(
-			{ kind: "update-code-string", codeStringName, value },
-			"*"
-		);
+		sendMessageToParent({
+			kind: "update-code-string",
+			codeStringName,
+			value,
+		});
 	});
 };
 
@@ -91,7 +98,7 @@ function massageJs(js: string) {
 	for (const m of js.matchAll(setFromRegexp)) {
 		const p1 = m[1];
 		const target = JSON.stringify("set from `" + p1 + "`");
-		js += `\n try { globalThis.bindModelToCodeStr(${p1}, ${target}); } catch (e) { console.error(e); }`;
+		js += `\n try { globalThis.$bindModelToCodeStr(${p1}, ${target}); } catch (e) { console.error(e); }`;
 	}
 	return js;
 }

website/src/shared.ts

@@ -5,7 +5,7 @@
 
 import { IMonacoSetup } from "./monaco-loader";
 
-export type IMessage =
+export type IMessageToRunner =
 	| {
 			kind: "initialize";
 			state: IPreviewState;
@@ -15,6 +15,16 @@ export type IMessage =
 			css: string;
 	  };
 
+export type IMessageFromRunner =
+	| {
+			kind: "update-code-string";
+			codeStringName: string;
+			value: string;
+	  }
+	| {
+			kind: "reload";
+	  };
+
 export interface IPlaygroundProject {
 	js: string;
 	css: string;

website/src/website/pages/playground/PlaygroundModel.ts

@@ -249,7 +249,6 @@ export class PlaygroundModel {
 				escapeRegexpChars(codeStringName) +
 				":[^\\w`]*`)([^`\\\\]|\\n|\\\\\\\\|\\\\`)*`"
 		);
-		debugger;
 		const js = this.js;
 		const str = value.replaceAll("\\", "\\\\").replaceAll("`", "\\`");
 		const newJs = js.replace(regexp, "$1" + str + "`");

website/src/website/pages/playground/Preview.tsx

@@ -2,7 +2,11 @@ import * as React from "react";
 import { IPreviewHandler, PlaygroundModel } from "./PlaygroundModel";
 import { observer } from "mobx-react";
 import { observable } from "mobx";
-import { IMessage, IPreviewState } from "../../../shared";
+import {
+	IMessageFromRunner,
+	IMessageToRunner,
+	IPreviewState,
+} from "../../../shared";
 
 @observer
 export class Preview
@@ -40,7 +44,7 @@ export class Preview
 				return;
 			}
 
-			const message: IMessage = {
+			const message: IMessageToRunner = {
 				kind: "initialize",
 				state: this.currentState,
 			};
@@ -52,15 +56,11 @@ export class Preview
 			if (e.source !== iframe.contentWindow) {
 				return;
 			}
-			const data = e.data as
-				| {
-						kind: "update-code-string";
-						codeStringName: string;
-						value: string;
-				  }
-				| { kind: "" };
+			const data = e.data as IMessageFromRunner;
 			if (data.kind === "update-code-string") {
 				this.props.model.setCodeString(data.codeStringName, data.value);
+			} else if (data.kind === "reload") {
+				this.props.model.reload();
 			}
 		});
 	};
@@ -83,7 +83,7 @@ export class Preview
 				{
 					kind: "update-css",
 					css: state.css,
-				} as IMessage,
+				} as IMessageToRunner,
 				{
 					targetOrigin: "*",
 				}