Finish Playground

2024-01-12 16:57:25 +08:00
parent dc64b4993c
commit ed4cef1c78
13 changed files with 156 additions and 71 deletions
--- a/src/components/Playground/Output/Preview/iframe.html
+++ b/src/components/Playground/Output/Preview/iframe.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Preview</title>
+  <!-- es-module-shims -->
+</head>
+<body>
+<script>
+  window.addEventListener("error", (e) => {
+    window.parent.postMessage({ type: "ERROR", msg: e.message });
+  });
+
+  window.addEventListener("load", () => {
+    window.parent.postMessage({ type: "LOADED", msg: "" });
+  });
+
+  window.addEventListener("message", ({ data }) => {
+    if (data?.type === "UPDATE") {
+      // Record old styles that need to be removed
+      const appStyleElement = document.querySelectorAll("style[id^=\"style_\"]") || [];
+
+      // Remove old app
+      const appSrcElement = document.querySelector("#appSrc");
+      const oldSrc = appSrcElement.getAttribute("src");
+      appSrcElement.remove();
+
+      // Add new app
+      const script = document.createElement("script");
+      script.src = URL.createObjectURL(
+        new Blob([data.data.compiledCode], {
+          type: "application/javascript"
+        })
+      );
+      script.id = "appSrc";
+      script.type = "module";
+      script.onload = () => {
+        // Remove old style
+        appStyleElement.forEach(element => {
+          element.remove();
+        });
+      };
+      document.body.appendChild(script);
+      URL.revokeObjectURL(oldSrc);
+      window.parent.postMessage({ type: "DONE", msg: "" });
+    }
+  });
+</script>
+<script type="module" id="appSrc"></script>
+<div id="root">
+  <div
+    style="position:absolute;top: 0;left:0;width:100%;height:100%;display: flex;justify-content: center;align-items: center;">
+    Loading...
+  </div>
+</div>
+</body>
+</html>