diff --git a/website/src/runner/index.ts b/website/src/runner/index.ts index ed1fdd07..fe8af646 100644 --- a/website/src/runner/index.ts +++ b/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; } diff --git a/website/src/shared.ts b/website/src/shared.ts index 71036e39..807b30b7 100644 --- a/website/src/shared.ts +++ b/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; diff --git a/website/src/website/pages/playground/PlaygroundModel.ts b/website/src/website/pages/playground/PlaygroundModel.ts index 85cb1313..de7ec7c3 100644 --- a/website/src/website/pages/playground/PlaygroundModel.ts +++ b/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 + "`"); diff --git a/website/src/website/pages/playground/Preview.tsx b/website/src/website/pages/playground/Preview.tsx index a6abdca0..07ee853c 100644 --- a/website/src/website/pages/playground/Preview.tsx +++ b/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: "*", }