/** * Isolated Renderer Entry Point * * This module runs inside an isolated iframe and renders Jupyter outputs * using React and the existing output components. It receives render * commands from the parent via postMessage and displays them. * * Security: This code runs in a sandboxed iframe with an opaque origin. * It cannot access Tauri APIs, the parent DOM, or localStorage. */ import { StrictMode, useCallback, useEffect, useState } from "react"; import { createRoot, type Root } from "react-dom/client"; // Import styles (Tailwind + theme variables) import "./styles.css"; // Import error boundary for fault isolation import { ErrorBoundary } from "@/registry/lib/error-boundary"; import { OutputErrorFallback } from "@/registry/lib/output-error-fallback"; // Import output components directly (not through MediaRouter's lazy loading) // This ensures all components are bundled inline for the isolated iframe import { AnsiErrorOutput, AnsiOutput, AnsiStreamOutput, } from "@/registry/outputs/ansi-output"; import { HtmlOutput } from "@/registry/outputs/html-output"; import { ImageOutput } from "@/registry/outputs/image-output"; import type { RenderPayload } from "@/registry/outputs/isolated/frame-bridge"; import { JsonOutput } from "@/registry/outputs/json-output"; import { MarkdownOutput } from "@/registry/outputs/markdown-output"; import { SvgOutput } from "@/registry/outputs/svg-output"; import { WidgetView } from "@/registry/widgets/widget-view"; // Import widget support import { IframeWidgetStoreProvider } from "./widget-provider"; // Import widget controls to register them in the widget registry // This import has side effects that register all built-in widgets import "@/registry/widgets/controls"; // --- Types --- interface OutputEntry { id: string; payload: RenderPayload; } interface RendererState { outputs: OutputEntry[]; isDark: boolean; } // --- Theme Management --- /** * Update the document theme so components can detect it via isDarkMode(). * Sets class and data-theme on documentElement (html tag). */ function updateDocumentTheme(isDark: boolean) { const root = document.documentElement; // Set class for Tailwind dark: variant detection if (isDark) { root.classList.add("dark"); root.classList.remove("light"); } else { root.classList.add("light"); root.classList.remove("dark"); } // Set data-theme for components that check this attribute root.setAttribute("data-theme", isDark ? "dark" : "light"); // Set color-scheme to influence prefers-color-scheme media queries // Some widgets (like drawdata) use @media (prefers-color-scheme: dark) root.style.colorScheme = isDark ? "dark" : "light"; // Update CSS variables for base styles (background kept transparent for cell focus colors to show through) if (isDark) { root.style.setProperty("--bg-primary", "#0a0a0a"); root.style.setProperty("--bg-secondary", "#1a1a1a"); root.style.setProperty("--text-primary", "#e0e0e0"); root.style.setProperty("--text-secondary", "#a0a0a0"); root.style.setProperty("--foreground", "#e0e0e0"); } else { root.style.setProperty("--bg-primary", "#ffffff"); root.style.setProperty("--bg-secondary", "#f5f5f5"); root.style.setProperty("--text-primary", "#1a1a1a"); root.style.setProperty("--text-secondary", "#666666"); root.style.setProperty("--foreground", "#1a1a1a"); } } // --- Message Handling --- type MessageHandler = (type: string, payload: unknown) => void; let messageHandler: MessageHandler | null = null; function setupMessageListener() { window.addEventListener("message", (event) => { // Only accept messages from parent if (event.source !== window.parent) return; const { type, payload } = event.data || {}; if (messageHandler) { messageHandler(type, payload); } }); } // --- React App --- function IsolatedRendererApp() { const [state, setState] = useState({ outputs: [], isDark: true, }); // Handle messages from parent const handleMessage = useCallback((type: string, payload: unknown) => { switch (type) { case "render": { const renderPayload = payload as RenderPayload; // Generate stable ID when cellId is provided for better React reconciliation const id = renderPayload.cellId ? `${renderPayload.cellId}-${renderPayload.outputIndex ?? 0}` : `output-${Date.now()}-${Math.random().toString(36).slice(2)}`; setState((prev) => { if (renderPayload.replace) { // Replace all outputs with this single new output return { ...prev, outputs: [{ id, payload: renderPayload }] }; } // Default: append to existing outputs return { ...prev, outputs: [...prev.outputs, { id, payload: renderPayload }], }; }); // Notify parent of render completion after next paint requestAnimationFrame(() => { window.parent.postMessage( { type: "render_complete", payload: { height: document.body.scrollHeight }, }, "*", ); }); break; } case "clear": setState((prev) => ({ ...prev, outputs: [] })); requestAnimationFrame(() => { window.parent.postMessage( { type: "render_complete", payload: { height: document.body.scrollHeight }, }, "*", ); }); break; case "theme": { const themePayload = payload as { isDark?: boolean }; if (themePayload?.isDark !== undefined) { setState((prev) => ({ ...prev, isDark: themePayload.isDark! })); // Update theme on document.documentElement so theme detection works updateDocumentTheme(themePayload.isDark); } break; } } }, []); // Register message handler and notify parent when ready useEffect(() => { messageHandler = handleMessage; // Now that the handler is registered, notify parent that renderer is ready // This ensures messages won't be dropped due to race conditions window.parent.postMessage({ type: "renderer_ready" }, "*"); return () => { messageHandler = null; }; }, [handleMessage]); return (

{state.outputs.map((entry, index) => ( ( )} onError={(error, errorInfo) => { // Send error back to parent window.parent.postMessage( { type: "error", payload: { message: error.message, stack: errorInfo.componentStack, }, }, "*", ); }} > ))}

); } /** * Render a single output based on its MIME type. * Uses direct component imports (not lazy loading) for isolated iframe compatibility. */ function OutputRenderer({ payload }: { payload: RenderPayload }) { const { mimeType, data, metadata } = payload; const content = data; // Handle stream output (plain text with potential ANSI) if (mimeType === "text/plain" && metadata?.streamName) { return ( ); } // Handle error output if (mimeType === "text/plain" && metadata?.isError) { return ( ); } // Route to appropriate component based on MIME type // (Direct rendering without MediaRouter's lazy loading) // Widget view - render interactive Jupyter widget if (mimeType === "application/vnd.jupyter.widget-view+json") { const widgetData = data as { model_id: string }; return ; } // Markdown if (mimeType === "text/markdown") { return ; } // HTML if (mimeType === "text/html") { return ; } // SVG if (mimeType === "image/svg+xml") { return ; } // Images (PNG, JPEG, GIF, WebP) if (mimeType.startsWith("image/")) { return ( ); } // JSON if (mimeType === "application/json") { const jsonData = typeof content === "string" ? JSON.parse(content) : content; return ; } // Plain text / ANSI if (mimeType === "text/plain") { return {String(content)}; } // Fallback: render as plain text return (

      {typeof content === "string" ? content : JSON.stringify(content, null, 2)}

); } // --- Bootstrap --- let root: Root | null = null; /** * Initialize the renderer. Called when the bundle is eval'd in the iframe. */ // Declare the global flag type for TypeScript declare global { interface Window { __REACT_RENDERER_ACTIVE__?: boolean; } } export function init() { // Signal to the inline handler that React is taking over // This prevents the inline handler from processing render/theme/clear messages window.__REACT_RENDERER_ACTIVE__ = true; // Set up message listener setupMessageListener(); // Initialize theme to dark (default) - will be updated by parent if needed updateDocumentTheme(true); // Create root element if needed let rootEl = document.getElementById("root"); if (!rootEl) { rootEl = document.createElement("div"); rootEl.id = "root"; document.body.appendChild(rootEl); } // Create React root and render with widget provider root = createRoot(rootEl); root.render( , ); // Set up resize observer const resizeObserver = new ResizeObserver(() => { window.parent.postMessage( { type: "resize", payload: { height: document.body.scrollHeight } }, "*", ); }); resizeObserver.observe(document.body); // Note: "renderer_ready" is sent from the React component's useEffect // to ensure the message handler is registered before parent sends messages } // Auto-init if this is the main module being eval'd // The parent will send us via eval, so we auto-start if (typeof window !== "undefined") { // Check if we're being eval'd (window.currentMessage exists from bootstrap) // If so, init immediately. Otherwise, export for manual init. init(); }