feat(repl): Perform SSR in a dedicated worker

This allows any SSR code with any imports to run in the REPL without
interfering with the main REPL thread, as well as not polluting the main
thread with SSR code.

Author: wmertens

packages/docs/src/repl/README.md

@@ -18,16 +18,17 @@ The codebase keeps bundling and heavy work off the main thread by using a web wo
 
 ## Key directories & files
 
+- `repl-sw.ts` and `register-repl-sw.ts`
+  - Service worker script and registration helper. The script is actually served via the route `/src/routes/repl/repl-sw.js/entry.ts`, which becomes the served path `/repl/repl-sw.js`.
+
 - `bundler/`
   - `bundled.tsx` — provides the current development version of Qwik, so that the REPL can show the latest features, and it can work while developing offline.
   - `bundler-registry.ts` — maintains the per-version Qwik WebWorkers.
   - `bundler-worker.ts` — bundles and runs the REPL user code.
-  - `repl-instance.ts` — orchestration or single-instance logic for a REPL embed on a page.
-
-- `repl-sw.ts` and `register-repl-sw.ts`
-  - Service worker script and registration helper. The script is actually served via the route `/src/routes/repl/repl-sw.js/entry.ts`, which becomes the served path `/repl/repl-sw.js`.
+  - `repl-ssr-worker.ts` — executes the SSR bundle in a separate worker served from `/repl/`, so that the imports can be intercepted by the service worker.
 
 - `ui/`
+  - `repl-instance.ts` — orchestration or single-instance logic for a REPL embed on a page.
   - `editor.tsx`, `monaco.tsx` — Monaco editor wiring and editor UI glue.
   - `repl-*.tsx` — UI components for console, input/output panels, tabs, share URL, version display, etc.
 
@@ -44,19 +45,23 @@ The codebase keeps bundling and heavy work off the main thread by using a web wo
 - The iframe requests `/repl/[id]/`
 - The service worker intercepts and sends a message to the REPL instance
 - The REPL instance messages the bundler to bundle the user code
-- The bundler messages the REPL with the result
-- The REPL messages the service worker with the requested file
-- The service worker fullfils the request
+- The bundler messages the REPL instance with the result
+- The REPL instance then runs the SSR bundle in a separate worker, again with messages
+- The REPL instance messages the service worker with the requested file
+- The service worker fulfills the request
 
 ```mermaid
 flowchart TD
   Iframe["Iframe - /repl/[replId]/"]
   ServiceWorker["Service Worker (/repl/*)"]
   ReplInstance["REPL instance"]
   BundlerWorker["Bundler Worker"]
+  SSRWorker["SSR Worker"]
 
   ReplInstance -->|REPL user code| BundlerWorker
 	BundlerWorker -->|ReplResult| ReplInstance
+  ReplInstance -->|SSR bundled code| SSRWorker
+  SSRWorker -->|HTML result| ReplInstance
   ServiceWorker -->|message: fetch pathname| ReplInstance
   Iframe -->|HTTP request| ServiceWorker
   ReplInstance -->|file contents| ServiceWorker
@@ -72,5 +77,3 @@ pnpm docs.dev
 ```
 
 Then visit `/playground`.
-
-- Resource limits & sandboxing: Running arbitrary user code in the browser can be risky — ensure sandboxed iframes and timeouts/limits for executed code to avoid locking the page.

packages/docs/src/repl/bundler/bundler-worker.ts

@@ -1,8 +1,4 @@
 import { rollup, type OutputAsset, type OutputChunk } from '@rollup/browser';
-import * as prettierHtmlPlugin from 'prettier/plugins/html.js';
-import * as prettierTsxPlugin from 'prettier/plugins/typescript.js';
-// @ts-expect-error prettier/standalone has no types
-import prettier from 'prettier/standalone.mjs';
 import type { PkgUrls, ReplInputOptions, ReplModuleOutput, ReplResult } from '../types';
 import { definesPlugin, replCss, replMinify, replResolver } from './rollup-plugins';
 import { QWIK_PKG_NAME } from '../repl-constants';
@@ -111,8 +107,6 @@ const getOutput = (o: OutputChunk | OutputAsset) => {
   return f;
 };
 
-const prettierPlugins = [prettierHtmlPlugin, prettierTsxPlugin];
-
 async function performBundle(message: BundleMessage): Promise<ReplResult> {
   const { buildId } = message;
   const { srcInputs, buildMode, entryStrategy, replId, debug } = message.data;
@@ -232,87 +226,8 @@ async function performBundle(message: BundleMessage): Promise<ReplResult> {
 
   result.ssrModules = ssrBundle.output.map(getOutput);
 
-  start = performance.now();
-  // Execute SSR to generate HTML
-  result.html = await executeSSR(result, `${baseUrl}build/`, result.manifest);
-  result.events.push({
-    start,
-    end: performance.now(),
-    kind: 'console-log',
-    scope: 'build',
-    message: [`SSR: ${(performance.now() - start).toFixed(2)}ms`],
-  });
-
-  // Format HTML - move this to the UI
-  if (buildMode !== 'production') {
-    try {
-      result.html = await prettier.format(result.html, {
-        parser: 'html',
-        plugins: prettierPlugins,
-      });
-    } catch (e) {
-      console.warn('HTML formatting failed:', e);
-    }
-  }
+  // SSR execution moved to separate SSR worker
+  result.html = '';
 
   return result;
 }
-
-async function executeSSR(result: ReplResult, base: string, manifest: any) {
-  // Create a blob URL for the SSR module
-  const ssrModule = result.ssrModules.find((m) => m.path.endsWith('.js'));
-  if (!ssrModule || typeof ssrModule.code !== 'string') {
-    return;
-  }
-  const blob = new Blob([ssrModule.code], { type: 'application/javascript' });
-  const url = URL.createObjectURL(blob);
-
-  try {
-    const module = await import(/*@vite-ignore*/ url);
-    const server = module.default;
-
-    const render = typeof server === 'function' ? server : server?.render;
-    if (typeof render !== 'function') {
-      throw new Error('Server module does not export default render function');
-    }
-
-    const orig: Record<string, any> = {};
-
-    const wrapConsole = (kind: 'log' | 'warn' | 'error' | 'debug') => {
-      orig[kind] = console[kind];
-      console[kind] = (...args: any[]) => {
-        result.events.push({
-          kind: `console-${kind}` as any,
-          scope: 'ssr',
-          message: args.map((a) => String(a)),
-          start: performance.now(),
-        });
-        orig[kind](...args);
-      };
-    };
-    wrapConsole('log');
-    wrapConsole('warn');
-    wrapConsole('error');
-    wrapConsole('debug');
-
-    const ssrResult = await render({
-      base,
-      manifest,
-      prefetchStrategy: null,
-    }).catch((e: any) => {
-      console.error('SSR failed', e);
-      return {
-        html: `<html><h1>SSR Error</h1><pre><code>${String(e).replaceAll('<', '&lt;')}</code></pre></html>`,
-      };
-    });
-
-    console.log = orig.log;
-    console.warn = orig.warn;
-    console.error = orig.error;
-    console.debug = orig.debug;
-
-    return ssrResult.html;
-  } finally {
-    URL.revokeObjectURL(url);
-  }
-}

packages/docs/src/repl/bundler/repl-ssr-worker.ts

@@ -0,0 +1,117 @@
+// SSR Worker - handles server-side rendering execution
+// MUST be served from /repl/ so that its imports are intercepted by the REPL service worker
+import type { QwikManifest } from '@builder.io/qwik/optimizer';
+
+// Worker message types
+interface MessageBase {
+  type: string;
+}
+
+export interface InitSSRMessage extends MessageBase {
+  type: 'run-ssr';
+  replId: string;
+  entry: string;
+  baseUrl: string;
+  manifest: QwikManifest | undefined;
+}
+
+export interface SSRResultMessage extends MessageBase {
+  type: 'ssr-result';
+  html: string;
+  events: any[];
+}
+
+export interface SSRErrorMessage extends MessageBase {
+  type: 'ssr-error';
+  error: string;
+  stack?: string;
+}
+
+type IncomingMessage = InitSSRMessage;
+export type OutgoingMessage = SSRResultMessage | SSRErrorMessage;
+
+let replId: string;
+
+self.onmessage = async (e: MessageEvent<IncomingMessage>) => {
+  const { type } = e.data;
+
+  switch (type) {
+    case 'run-ssr':
+      replId = e.data.replId;
+      try {
+        const result = await executeSSR(e.data);
+        const message: SSRResultMessage = {
+          type: 'ssr-result',
+          html: result.html,
+          events: result.events,
+        };
+        self.postMessage(message);
+      } catch (error) {
+        console.error(`SSR worker for %s failed`, replId, error);
+        const message: SSRErrorMessage = {
+          type: 'ssr-error',
+          error: (error as Error)?.message || String(error),
+          stack: (error as Error)?.stack,
+        };
+        self.postMessage(message);
+      }
+      break;
+
+    default:
+      console.warn('Unknown SSR worker message type:', type);
+  }
+};
+
+async function executeSSR(message: InitSSRMessage): Promise<{ html: string; events: any[] }> {
+  const { baseUrl, manifest, entry } = message;
+
+  const module = await import(/* @vite-ignore */ `/repl/${replId}-ssr/${entry}`);
+  const server = module.default;
+
+  const render = typeof server === 'function' ? server : server?.render;
+  if (typeof render !== 'function') {
+    throw new Error(`Server module ${entry} does not export default render function`);
+  }
+
+  const events: any[] = [];
+  const orig: Record<string, any> = {};
+
+  const wrapConsole = (kind: 'log' | 'warn' | 'error' | 'debug') => {
+    orig[kind] = console[kind];
+    console[kind] = (...args: any[]) => {
+      events.push({
+        kind: `console-${kind}` as any,
+        scope: 'ssr',
+        message: args.map((a) => String(a)),
+        start: performance.now(),
+      });
+      orig[kind](...args);
+    };
+  };
+  wrapConsole('log');
+  wrapConsole('warn');
+  wrapConsole('error');
+  wrapConsole('debug');
+
+  const ssrResult = await render({
+    base: baseUrl,
+    manifest,
+    prefetchStrategy: null,
+  }).catch((e: any) => {
+    console.error('SSR failed', e);
+    return {
+      html: `<html><h1>SSR Error</h1><pre><code>${String(e).replaceAll('<', '&lt;')}</code></pre></html>`,
+    };
+  });
+
+  // Restore console methods
+  console.log = orig.log;
+  console.warn = orig.warn;
+  console.error = orig.error;
+  console.debug = orig.debug;
+
+  return {
+    html: ssrResult.html,
+    events,
+  };
+}

packages/docs/src/repl/bundler/rollup-plugins.ts

@@ -31,16 +31,16 @@ export const replResolver = (
   target: 'client' | 'ssr'
 ): Plugin => {
   const srcInputs = options.srcInputs;
-  const resolveId = (id: string) => {
+  const getSrcPath = (id: string) => {
     return srcInputs.find((i) => i.path === id)?.path;
   };
 
   return {
     name: 'repl-resolver',
 
     resolveId(id, importer) {
-      // Entry point
-      if (!importer) {
+      // Re-resolve
+      if (id.startsWith('@qwik/')) {
         return id;
       }
       if (
@@ -53,18 +53,23 @@ export const replResolver = (
       if (id === '@builder.io/qwik/server') {
         return '@qwik/dist/server.mjs';
       }
-      if (id === '@builder.io/qwik/preloader') {
+      if (id.includes('@builder.io/qwik/preloader')) {
         return '@qwik/dist/preloader.mjs';
       }
-      if (id === '@builder.io/qwik/qwikloader') {
+      if (id.includes('@builder.io/qwik/qwikloader')) {
         return '@qwik/dist/qwikloader.js';
       }
       // Simple relative file resolution
-      if (id.startsWith('./')) {
-        const extensions = ['', '.tsx', '.ts'];
-        id = id.slice(1);
+      if (/^[./]/.test(id)) {
+        const fileId =
+          id.startsWith('.') && importer
+            ? (importer.replace(/\/[^/]+$/, '') + '/' + id)
+                .replace(/\/\.\//g, '/')
+                .replace(/\/[^/]+\/\.\.\//g, '/')
+            : id;
+        const extensions = ['', '.tsx', '.ts', '.jsx', '.js'];
         for (const ext of extensions) {
-          const path = resolveId(id + ext);
+          const path = getSrcPath(fileId + ext);
           if (path) {
             return path;
           }
@@ -88,16 +93,6 @@ export const replResolver = (
         }
         throw new Error(`Unable to load Qwik module: ${id}`);
       }
-      if (id === '@builder.io/qwik/qwikloader.js') {
-        // entry point, doesn't get resolved above somehow
-        const url = deps[QWIK_PKG_NAME]['/dist/qwikloader.js'];
-        if (url) {
-          const rsp = await fetch(url);
-          if (rsp.ok) {
-            return rsp.text();
-          }
-        }
-      }
       // We're the fallback, we know all the files
       if (/\.[jt]sx?$/.test(id)) {
         throw new Error(`load: unknown module ${id}`);