refactor(repl): cleaner sw intercept

Author: wmertens

packages/docs/src/repl/README.md

@@ -11,7 +11,7 @@ This README gives a high-level overview of how the REPL is structured, what each
 The REPL is a browser-first system composed of three main parts:
 
 - Bundler subsystem (web-worker + helpers): transforms user code, resolves imports, bundles modules, and prepares runnable artifacts.
-- Service worker: Intercepts requests to `/repl/[id]/*` and messages the bundler subsystem (via BroadcastChannel) to get responses. This allows the REPL to work without a server.
+- Service worker: Intercepts requests to `/repl/` and messages the bundler subsystem (via BroadcastChannel) to get responses. This allows the REPL to work without a server.
 - UI (React/Qwik components + Monaco): editor, panels, console, options and controls that let users edit code and view outputs.
 
 The codebase keeps bundling and heavy work off the main thread by using a web worker script per Qwik version.
@@ -37,12 +37,12 @@ The codebase keeps bundling and heavy work off the main thread by using a web wo
 1. The UI component (`ui/editor.tsx` + `ui/monaco.tsx`) presents a code editor and controls.
 2. When code is executed, the bundler subsystem is invoked. The UI posts a message to the bundler worker.
 3. The bundler worker (`bundler-worker.ts`) makes the client and SSR bundles, and executes `render()` from the `entry.ssr` to get the SSR result HTML.
-4. The UI also shows an iframe, loading `/repl/[id]/`.
+4. The UI also shows an iframe, loading `/repl/client/[id]/`.
 5. The service worker intercepts all requests and uses messages to get the bundle + html files from the worker.
 
 ### Flow diagram
 
-- The iframe requests `/repl/[id]/`
+- The iframe requests `/repl/client/[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 instance with the result
@@ -52,7 +52,7 @@ The codebase keeps bundling and heavy work off the main thread by using a web wo
 
 ```mermaid
 flowchart TD
-  Iframe["Iframe - /repl/[replId]/"]
+  Iframe["Iframe - /repl/client/[replId]/"]
   ServiceWorker["Service Worker (/repl/*)"]
   ReplInstance["REPL instance"]
   BundlerWorker["Bundler Worker"]

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

@@ -125,7 +125,7 @@ async function performBundle(message: BundleMessage): Promise<ReplResult> {
 
   let start = performance.now();
 
-  const baseUrl = `/repl/${replId}/`;
+  const baseUrl = `/repl/client/${replId}/`;
   const defines = {
     'import.meta.env.BASE_URL': JSON.stringify(baseUrl),
     'import.meta.env': JSON.stringify({}),

packages/docs/src/repl/bundler/index.ts

@@ -3,13 +3,7 @@
 import type { ReplInputOptions, ReplResult } from '../types';
 import { getDeps } from './bundled';
 import type { InitMessage, BundleMessage, OutgoingMessage } from './bundler-worker';
-
-import ssrWorkerStringPre from './repl-ssr-worker?compiled-string';
-import listenerScript from './client-events-listener?compiled-string';
-
-export const ssrWorkerString = ssrWorkerStringPre
-  .replace(/globalThis\.DO_NOT_TOUCH_IMPORT/g, 'import')
-  .replace('globalThis.LISTENER_SCRIPT', JSON.stringify(listenerScript));
+import bundlerWorkerUrl from './bundler-worker?worker&url';
 
 const bundlers = new Map<string, Bundler>();
 
@@ -32,7 +26,8 @@ class Bundler {
 
   initWorker() {
     this.initP = new Promise<void>((res) => (this.ready = res));
-    this.worker = new Worker(new URL('./bundler-worker', import.meta.url), { type: 'module' });
+    // Start from /repl so repl-sw can add COEP headers
+    this.worker = new Worker(`/repl${bundlerWorkerUrl}`, { type: 'module' });
     this.worker.addEventListener('message', this.messageHandler);
     this.worker.addEventListener('error', (e: ErrorEvent) => {
       console.error(`Bundler worker for ${this.version} failed`, e.message);

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

@@ -67,12 +67,17 @@ self.onmessage = async (e: MessageEvent<IncomingMessage>) => {
   }
 };
 
+// Workaround so vite doesn't try to process this import
+const importFrom = (url: string) => {
+  return import(/*@vite-ignore*/ url);
+};
+
 async function executeSSR(message: InitSSRMessage): Promise<{ html: string; events: any[] }> {
   const { baseUrl, manifest, entry } = message;
   const start = performance.now();
 
   // We prevent Vite from touching this import() and replace it after bundling
-  const module = await (globalThis as any).DO_NOT_TOUCH_IMPORT(`/repl/${replId}-ssr/${entry}`);
+  const module = await importFrom(`/repl/ssr/${replId}/${entry}`);
   const server = module.default;
 
   const render = typeof server === 'function' ? server : server?.render;
@@ -106,12 +111,6 @@ async function executeSSR(message: InitSSRMessage): Promise<{ html: string; even
     prefetchStrategy: null,
   });
 
-  // Inject the event listener script
-  ssrResult.html = ssrResult.html.replace(
-    '</body>',
-    `<script>${(globalThis as any).LISTENER_SCRIPT}</script></body>`
-  );
-
   events.push({
     kind: 'console-log',
     scope: 'build',

packages/docs/src/repl/repl-instance.ts

@@ -1,7 +1,7 @@
 /** Maintains the state for a REPL instance */
 
 import { isServer, unwrapStore } from '@builder.io/qwik';
-import { getBundler, ssrWorkerString } from './bundler';
+import { getBundler } from './bundler';
 import { registerReplSW } from './register-repl-sw';
 import type { RequestMessage, ResponseMessage } from './repl-sw';
 import type { ReplAppInput, ReplResult, ReplStore } from './types';
@@ -10,6 +10,8 @@ import type {
   InitSSRMessage,
   OutgoingMessage as SSROutgoingMessage,
 } from './bundler/repl-ssr-worker';
+import ssrWorkerUrl from './bundler/repl-ssr-worker?worker&url';
+import listenerScript from './bundler/client-events-listener?compiled-string';
 
 let channel: BroadcastChannel;
 let registered = false;
@@ -172,34 +174,37 @@ export class ReplInstance {
   };
 
   getContentType = (url: string): string => {
-    if (url.endsWith('.js')) {
-      return 'application/javascript';
-    }
-    if (url.endsWith('.css')) {
-      return 'text/css';
-    }
-    if (url.endsWith('.json')) {
-      return 'application/json';
-    }
-    if (url.endsWith('.html') || url.endsWith('/')) {
+    const noQuery = url.split('?')[0];
+    if (noQuery.endsWith('/')) {
       return 'text/html';
     }
+    const ext = noQuery.split('.').pop()?.toLowerCase();
+    if (ext) {
+      switch (ext) {
+        case 'js':
+        case 'mjs':
+        case 'cjs':
+          return 'application/javascript';
+        case 'json':
+          return 'application/json';
+        case 'css':
+          return 'text/css';
+        case 'html':
+        case 'htm':
+          return 'text/html';
+        case 'svg':
+          return 'image/svg+xml';
+      }
+    }
     return 'text/plain';
   };
 
   async getFile(path: string): Promise<string | null> {
-    const match = path.match(/\/repl\/([a-z0-9]+)(-ssr)?\/(.*)/);
+    const match = path.match(/\/repl\/(client|ssr)\/([a-z0-9]+)\/(.*)/);
     if (!match) {
       throw new Error(`Invalid REPL path ${path}`);
     }
-    const [, , ssrFlag, filePath] = match;
-    /**
-     * We must serve the SSR worker string from /repl/ so that the import() inside the worker can be
-     * intercepted by our repl-sw.js
-     */
-    if (ssrFlag && filePath === 'repl-ssr-worker.js') {
-      return ssrWorkerString;
-    }
+    const [, target, , filePath] = match;
 
     const ssrPromise = this.ensureBuilt();
     // First wait only for the bundles
@@ -209,7 +214,7 @@ export class ReplInstance {
     }
 
     // Serve SSR modules at /server/* path
-    if (ssrFlag) {
+    if (target === 'ssr') {
       // vite adds ?import to some imports, remove it for matching
       const serverPath = filePath.replace(/\?import$/, '');
       for (const module of this.lastResult.ssrModules) {
@@ -230,7 +235,11 @@ export class ReplInstance {
     if (filePath === 'index.html' || filePath === '') {
       // Here, also wait for SSR
       await ssrPromise.catch(() => {});
-      return this.lastResult.html || errorHtml('No HTML generated', 'REPL');
+      if (this.lastResult.html) {
+        // Inject the event listener script
+        return this.lastResult.html + `<script>${listenerScript}</script>`;
+      }
+      return errorHtml('No HTML generated', 'REPL');
     }
 
     return null;
@@ -247,13 +256,8 @@ export class ReplInstance {
         return resolve({ html: errorHtml('No SSR module found', 'SSR') });
       }
 
-      /**
-       * We could also serve it from /repl/ directly but then we need to special-case the repl-sw
-       * and then docs.dev mode wouldn't reload the worker
-       */
-      const ssrWorker = new Worker(`/repl/${this.replId}-ssr/repl-ssr-worker.js`, {
-        type: 'module',
-      });
+      // Start from /repl so repl-sw can intercept the requests
+      const ssrWorker = new Worker(`/repl${ssrWorkerUrl}`, { type: 'module' });
 
       ssrWorker.onmessage = (e: MessageEvent<SSROutgoingMessage>) => {
         const { type } = e.data;
@@ -263,7 +267,7 @@ export class ReplInstance {
             type: 'run-ssr',
             replId: this.replId,
             entry: entryModule.path,
-            baseUrl: `/repl/${this.replId}/build/`,
+            baseUrl: `/repl/client/${this.replId}/build/`,
             manifest: result.manifest,
           };
           ssrWorker.postMessage(initMessage);

packages/docs/src/repl/repl-sw.ts

@@ -1,4 +1,13 @@
-/** Simple proxy, proxies requests for /repl/[id]/* to the main thread */
+/**
+ * Simple proxy, proxies requests for /repl/* to the main thread
+ *
+ * - /repl/client/[id]/* => client-side only requests
+ * - /repl/ssr/[id]/* => ssr scripts
+ * - /repl/* => proxy to / with COEP headers
+ *
+ * This allows the REPL to load scripts from the same origin, which is required when using `COEP:
+ * require-corp`, and it also allows us to still use vite for worker bundling.
+ */
 
 const channel = new BroadcastChannel('qwik-docs-repl');
 
@@ -28,37 +37,62 @@ let nextId = 1;
   // Only GET requests
   if (ev.request.method === 'GET') {
     const reqUrl = new URL(ev.request.url);
-    const pathname = reqUrl.pathname;
-    const match = pathname.match(/^\/repl\/([a-z0-9]+)(-ssr)?\//);
-    // Only paths that look like a REPL id
-    if (match) {
-      const replId = match[1];
-      ev.respondWith(
-        new Promise((resolve) => {
-          const requestId = nextId++;
+    const origin = self.location.origin;
+    if (reqUrl.origin === origin) {
+      const pathname = reqUrl.pathname;
+      const match = pathname.match(/^\/repl\/(client|ssr)\/([a-z0-9]+)\//);
+      // Only paths that look like a REPL id
+      if (match) {
+        const replId = match[2];
+        ev.respondWith(
+          new Promise((resolve) => {
+            const requestId = nextId++;
 
-          const timeoutId = setTimeout(() => {
-            if (pendingRequests.has(requestId)) {
-              pendingRequests.delete(requestId);
-              resolve(new Response('504 - Request timeout - try reloading', { status: 504 }));
-            }
-          }, 10000);
+            const timeoutId = setTimeout(() => {
+              if (pendingRequests.has(requestId)) {
+                pendingRequests.delete(requestId);
+                resolve(new Response('504 - Request timeout - try reloading', { status: 504 }));
+              }
+            }, 10000);
 
-          pendingRequests.set(requestId, { resolve, timeoutId });
+            pendingRequests.set(requestId, { resolve, timeoutId });
 
-          // Send request to main thread
-          channel.postMessage({
-            type: 'repl-request',
-            requestId,
-            replId,
-            url: pathname,
-            // useful later when adding Qwik Router support
-            // method: ev.request.method,
-            // headers: Object.fromEntries(ev.request.headers.entries()),
-          });
-        })
-      );
-      return;
+            // Send request to main thread
+            channel.postMessage({
+              type: 'repl-request',
+              requestId,
+              replId,
+              url: pathname + reqUrl.search,
+              // useful later when adding Qwik Router support
+              // method: ev.request.method,
+              // headers: Object.fromEntries(ev.request.headers.entries()),
+            });
+          })
+        );
+        return;
+      } else {
+        // Proxy other requests to / and return COEP headers
+        const url = pathname.replace(/^\/repl\//, '/') + reqUrl.search;
+        const req = new Request(url, {
+          method: ev.request.method,
+          headers: ev.request.headers,
+          redirect: 'manual',
+        });
+        ev.respondWith(
+          fetch(req).then((res) => {
+            // Create a new response so we can modify headers
+            const newHeaders = new Headers(res.headers);
+            newHeaders.set('Cross-Origin-Embedder-Policy', 'require-corp');
+            newHeaders.set('Cross-Origin-Opener-Policy', 'same-origin');
+            return new Response(res.body, {
+              status: res.status,
+              statusText: res.statusText,
+              headers: newHeaders,
+            });
+          })
+        );
+        return;
+      }
     }
   }
 

packages/docs/src/repl/ui/repl-output-panel.tsx

@@ -103,7 +103,7 @@ export const ReplOutputPanel = component$(({ input, store }: ReplOutputPanelProp
             <iframe
               key={store.reload}
               class="repl-server"
-              src={`/repl/${store.replId}/`}
+              src={`/repl/client/${store.replId}/`}
               sandbox="allow-popups allow-modals allow-scripts allow-same-origin"
             />
           )}