Implements reload command

This commit is contained in:
Henning Dieterichs 2023-04-13 15:51:41 +02:00
parent 2f51994ab5
commit ba68ad0693
No known key found for this signature in database
GPG key ID: 771381EFFDB9EC06
4 changed files with 36 additions and 20 deletions

View file

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

View file

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

View file

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

View file

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