[frontend] add playground back as an internal page

Author: velzie

frontend/package.json

@@ -18,6 +18,7 @@
 		"@mercuryworkshop/epoxy-transport": "^2.1.27",
 		"@mercuryworkshop/scramjet": "workspace:scramjet",
 		"dreamland": "workspace:dreamland",
+		"monaco-editor": "^0.52.2",
 		"vite-plugin-static-copy": "^3.1.0"
 	}
 }

frontend/public/sw.js

@@ -1,5 +1,5 @@
+/// <reference types="@mercuryworkshop/scramjet" />
 importScripts("/scram/scramjet.all.js");
-
 const { ScramjetServiceWorker } = $scramjetLoadWorker();
 const scramjet = new ScramjetServiceWorker();
 
@@ -15,3 +15,47 @@ async function handleRequest(event) {
 self.addEventListener("fetch", (event) => {
 	event.respondWith(handleRequest(event));
 });
+
+let playgroundData;
+self.addEventListener("message", ({ data }) => {
+	if (data.type === "playgroundData") {
+		playgroundData = data;
+	}
+});
+
+scramjet.addEventListener("request", (e) => {
+	if (playgroundData && e.url.href.startsWith(playgroundData.origin)) {
+		const headers = {};
+		const origin = playgroundData.origin;
+		if (e.url.href === origin + "/") {
+			headers["content-type"] = "text/html";
+			e.response = new Response(playgroundData.html, {
+				headers,
+			});
+		} else if (e.url.href === origin + "/style.css") {
+			headers["content-type"] = "text/css";
+			e.response = new Response(playgroundData.css, {
+				headers,
+			});
+		} else if (e.url.href === origin + "/script.js") {
+			headers["content-type"] = "application/javascript";
+			e.response = new Response(playgroundData.js, {
+				headers,
+			});
+		} else {
+			e.response = new Response("empty response", {
+				headers,
+			});
+		}
+		e.response.rawHeaders = headers;
+		e.response.rawResponse = {
+			body: e.response.body,
+			headers: headers,
+			status: e.response.status,
+			statusText: e.response.statusText,
+		};
+		e.response.finalURL = e.url.toString();
+	} else {
+		return;
+	}
+});

frontend/src/Tab.tsx

@@ -7,6 +7,7 @@ import {
 	injectHistoryEmulation,
 } from "./history";
 import { NewTab } from "./pages/NewTab";
+import { Playground } from "./pages/Playground";
 
 let id = 0;
 export class Tab extends StatefulClass {
@@ -65,6 +66,11 @@ export class Tab extends StatefulClass {
 				case "newtab":
 					this.title = "New Tab";
 					this.internalpage = <NewTab tab={this} />;
+					break;
+				case "playground":
+					this.title = "Scramjet Playground";
+					this.internalpage = <Playground tab={this} />;
+					break;
 			}
 		} else {
 			this.internalpage = null;

frontend/src/pages/Playground.tsx

@@ -0,0 +1,49 @@
+import type { Component } from "dreamland/core";
+import type { Tab } from "../Tab";
+
+import { editor } from "monaco-editor";
+
+const Editor: Component<
+	{
+		language: string;
+	},
+	{
+		editor: editor.IStandaloneCodeEditor;
+	}
+> = function (cx) {
+	cx.mount = () => {
+		this.editor = editor.create(cx.root, {
+			language: this.language,
+			automaticLayout: true,
+		});
+	};
+
+	return <div></div>;
+};
+Editor.css = `
+:scope {
+  width: 100%;
+  height: 100%;
+}
+
+  `;
+
+export const Playground: Component<
+	{
+		tab: Tab;
+	},
+	{}
+> = function (cx) {
+	return (
+		<div>
+			<h1>Scramjet Playground</h1>
+			<Editor language="html"></Editor>
+		</div>
+	);
+};
+Playground.css = `
+  :scope {
+    width: 100%;
+    height: 100%;
+  }
+`;