setup iframe boilerplate and messaging

pngwn · Oct 18, 2020 · e0362b5 · e0362b5
1 parent 28f54db
commit e0362b5
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git a/public/global.css b/public/global.css
@@ -358,3 +358,9 @@ textarea {
 	height: 100%;
 	resize: none;
 }
+
+iframe {
+	width: 100%;
+	height: 100%;
+	border: none;
+}
diff --git a/src/App.svelte b/src/App.svelte
@@ -27,8 +27,10 @@
 
 	const worker = new Worker("./worker.js");
 
+	let compiled;
+
 	worker.addEventListener("message", (event) => {
-		console.log(event.data);
+		compiled = event.data;
 	});
 
 	function compile(_components: Component[]): void {
@@ -40,5 +42,5 @@
 
 <main>
 	<Input bind:components bind:current />
-	<Output />
+	<Output {compiled} />
 </main>
diff --git a/src/Output.svelte b/src/Output.svelte
@@ -1,2 +1,28 @@
 <script lang="ts">
+	export let compiled: string;
+
+	let iframe: HTMLIFrameElement;
+
+	function update(code: string) {
+		iframe.contentWindow.postMessage(code, "*");
+	}
+
+	$: iframe && compiled && update(compiled);
+
+	const srcdoc = `
+<!doctype html>
+<html>
+	<head>
+		<script type="module">
+
+			window.addEventListener('message', event => {
+				console.log(event.data)
+			}, false)
+		<\/script>
+	</head>
+	<body></body>
+</html>
+	`;
 </script>
+
+<section><iframe title="Rendered REPL" bind:this={iframe} {srcdoc} /></section>