Replace document.write with server-rendered iframe route

Created /playground-preview route that server-renders a proper Crank
component with ColorSchemeScript running critically. This eliminates
the need for document.write() and HTML string injection.

New architecture:
1. JavaScript iframes load /playground-preview (server-rendered)
2. iframe sends "ready" message when loaded
3. Parent sends transformed code via postMessage
4. iframe executes code and reports success/error
5. iframe can be reloaded (src=src) to reset state for re-execution

Benefits:
- Proper server-side rendering with Root component
- ColorSchemeScript runs critically (no FOUC)
- Cleaner separation: HTML structure vs. user code
- Uses standard Crank infrastructure
- Better than about:blank + document.write approach

Python iframes still use document.write for PyScript compatibility.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: claude

website/src/components/code-preview.ts

@@ -258,6 +258,7 @@ export function* CodePreview(
 	const isPython = currentLanguage === "python";
 
 	let staticURLs: Record<string, any> | undefined;
+	let iframeReady = false;
 	let execute: () => unknown;
 	let executeDebounced: () => unknown;
 	if (typeof window !== "undefined") {
@@ -269,27 +270,38 @@ export function* CodePreview(
 				return;
 			}
 
-			// We have to refresh to change the iframe variable in scope, as the
-			// previous iframe is destroyed. We would have to await refresh if this
-			// component was refactored to be async.
-			iframeID++;
-			this.refresh();
-			const document1 = iframe.contentDocument;
-			if (document1 == null) {
-				return;
-			}
-
 			let code = value;
 
 			if (isPython) {
-				// Python code - no transformation needed
+				// Python code - keep using document.write for PyScript
+				iframeID++;
+				this.refresh();
+				const document1 = iframe.contentDocument;
+				if (document1 == null) {
+					return;
+				}
 				document1.write(generatePythonIFrameHTML(id, code, staticURLs!));
+				document1.close();
 			} else {
-				// JavaScript code - transform with Babel
+				// JavaScript code - use postMessage to server-rendered iframe
 				try {
 					const parsed = transform(value);
 					code = parsed.code;
-					document1.write(generateJavaScriptIFrameHTML(id, code, staticURLs!));
+
+					if (!iframeReady) {
+						// Reload iframe to reset state
+						pendingCode = code;
+						iframeID++;
+						iframeReady = false;
+						this.refresh();
+						// Code will be sent when iframe sends "ready" message
+					} else {
+						// Send code to already-loaded iframe
+						iframe.contentWindow?.postMessage(
+							JSON.stringify({type: "execute-code", id, code}),
+							window.location.origin
+						);
+					}
 				} catch (err: any) {
 					console.error(err);
 					loading = false;
@@ -298,17 +310,32 @@ export function* CodePreview(
 					return;
 				}
 			}
-
-			document1.close();
 		};
 
 		executeDebounced = debounce(execute, 2000);
 	}
 
 	let height = 100;
+	let pendingCode: string | null = null;
 	if (typeof window !== "undefined") {
 		const onmessage = (ev: any) => {
 			let data: any = JSON.parse(ev.data);
+
+			// Handle messages without id (like "ready")
+			if (data.type === "ready") {
+				iframeReady = true;
+				// Send pending code if we have it
+				if (pendingCode && iframe.contentWindow) {
+					iframe.contentWindow.postMessage(
+						JSON.stringify({type: "execute-code", id, code: pendingCode}),
+						window.location.origin
+					);
+					pendingCode = null;
+				}
+				return;
+			}
+
+			// For messages with id, check it matches
 			if (data.id !== id) {
 				return;
 			}
@@ -413,6 +440,7 @@ export function* CodePreview(
 					<iframe
 						key=${iframeID}
 						ref=${(el: HTMLIFrameElement) => (iframe = el)}
+						src=${isPython ? undefined : "/playground-preview"}
 						class="
 							playground-iframe
 							${css`

website/src/routes.ts

@@ -4,6 +4,7 @@ import BlogHomeView from "./views/blog-home.js";
 import GuideView from "./views/guide.js";
 import BlogView from "./views/blog.js";
 import PlaygroundView from "./views/playground.js";
+import PlaygroundPreviewView from "./views/playground-preview.js";
 
 // TODO: I am not sure what the value of the route() function is over using the
 // route config directly.
@@ -28,4 +29,8 @@ export const router = new Router([
 		name: "playground",
 		view: PlaygroundView,
 	}),
+	route("/playground-preview", {
+		name: "playground-preview",
+		view: PlaygroundPreviewView,
+	}),
 ]);

website/src/views/playground-preview.ts

@@ -0,0 +1,109 @@
+import {jsx} from "@b9g/crank/standalone";
+import {Root} from "../components/root.js";
+
+/**
+ * Server-rendered view for playground preview iframes.
+ * This loads as a proper server route with critical scripts,
+ * then receives and executes user code via postMessage.
+ */
+export default function* PlaygroundPreview({context}: {context: any}) {
+	yield jsx`
+		<${Root}
+			title="Playground Preview"
+			description="Preview iframe for Crank.js playground"
+			context=${context}
+			path="/playground-preview"
+		>
+			<div id="preview-root"></div>
+			<script type="module">
+				// Listen for code from parent window
+				window.addEventListener("message", async (ev) => {
+					try {
+						const data = JSON.parse(ev.data);
+
+						if (data.type === "execute-code") {
+							const code = data.code;
+							const id = data.id;
+
+							try {
+								// Execute user code as a module
+								const blob = new Blob([code], { type: 'application/javascript' });
+								const url = URL.createObjectURL(blob);
+								await import(url);
+								URL.revokeObjectURL(url);
+
+								// Notify parent of successful execution
+								window.parent.postMessage(
+									JSON.stringify({ type: "executed", id }),
+									window.location.origin
+								);
+							} catch (error) {
+								// Notify parent of error
+								window.parent.postMessage(
+									JSON.stringify({
+										type: "error",
+										id,
+										message: error.message || String(error)
+									}),
+									window.location.origin
+								);
+							}
+						}
+					} catch {
+						// Ignore non-JSON messages
+					}
+				});
+
+				// Handle errors
+				window.addEventListener("error", (ev) => {
+					if (/ResizeObserver loop completed with undelivered notifications/.test(ev.message)) {
+						return;
+					}
+
+					window.parent.postMessage(
+						JSON.stringify({ type: "error", message: ev.message }),
+						window.location.origin
+					);
+				});
+
+				window.addEventListener("unhandledrejection", (ev) => {
+					if (/ResizeObserver loop completed with undelivered notifications/.test(ev.reason?.message)) {
+						return;
+					}
+					window.parent.postMessage(
+						JSON.stringify({
+							type: "error",
+							message: ev.reason?.message || String(ev.reason)
+						}),
+						window.location.origin
+					);
+				});
+
+				// Set up resize observer
+				const obs = new ResizeObserver((entries) => {
+					const height = Math.max(entries[0].contentRect.height, 100);
+					if (
+						document.documentElement.clientHeight <
+						document.documentElement.scrollHeight
+					) {
+						window.parent.postMessage(
+							JSON.stringify({
+								type: "resize",
+								height,
+							}),
+							window.location.origin
+						);
+					}
+				});
+
+				obs.observe(document.documentElement);
+
+				// Signal ready
+				window.parent.postMessage(
+					JSON.stringify({ type: "ready" }),
+					window.location.origin
+				);
+			</script>
+		<//>
+	`;
+}