fix(repl): workaround for vite preload

the SSR worker was importing the vite preload from the wrong path, breaking SSR. Maybe there's a problem with how qwik router makes entry files.

Author: wmertens

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

@@ -65,7 +65,8 @@ self.onmessage = async (e: MessageEvent<IncomingMessage>) => {
 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}`);
+  // @ts-expect-error - we prevent Vite from touching this import and replace it later
+  const module = await DO_NOT_TOUCH_IMPORT(`/repl/${replId}-ssr/${entry}`);
   const server = module.default;
 
   const render = typeof server === 'function' ? server : server?.render;

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

@@ -10,6 +10,10 @@ import type {
   InitSSRMessage,
   OutgoingMessage as SSROutgoingMessage,
 } from '../bundler/repl-ssr-worker';
+// @ts-expect-error - we don't have types for this yet
+import ssrWorkerStringPre from '../bundler/repl-ssr-worker?compiled-string';
+
+const ssrWorkerString = ssrWorkerStringPre.replace(/DO_NOT_TOUCH_IMPORT/g, 'import');
 
 let channel: BroadcastChannel;
 let registered = false;
@@ -181,6 +185,13 @@ export class ReplInstance {
       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 ssrPromise = this.ensureBuilt();
     // First wait only for the bundles
@@ -228,8 +239,13 @@ export class ReplInstance {
         return resolve({ html: errorHtml('No SSR module found', 'SSR') });
       }
 
-      // This is ../bundler/ssr-worker.ts but we need to go via an entry.ts
-      const ssrWorker = new Worker(`/repl/repl-ssr-worker.js`, { type: 'module' });
+      /**
+       * 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',
+      });
 
       const initMessage: InitSSRMessage = {
         type: 'run-ssr',

packages/docs/src/routes/repl/repl-ssr-worker.js/entry.ts

@@ -11,9 +11,9 @@ import type { ShikiTransformer } from '@shikijs/types';
 import tailwindcss from '@tailwindcss/vite';
 import path, { resolve } from 'node:path';
 import { defineConfig, loadEnv, type Plugin, type Rollup } from 'vite';
-import Inspect from 'vite-plugin-inspect';
 import { examplesData, playgroundData, rawSource, tutorialData } from './vite.repl-apps';
 import { sourceResolver } from './vite.source-resolver';
+import { compiledStringPlugin } from '../../scripts/compiled-string-plugin';
 
 const PUBLIC_QWIK_INSIGHTS_KEY = loadEnv('', '.', 'PUBLIC').PUBLIC_QWIK_INSIGHTS_KEY;
 const docsDir = new URL(import.meta.url).pathname;
@@ -181,6 +181,7 @@ export default defineConfig(() => {
         ['MODULE_LEVEL_DIRECTIVE', 'use client'],
       ]),
       rawSource(),
+      compiledStringPlugin(),
       qwikCity({
         mdxPlugins: {
           rehypeSyntaxHighlight: false,
@@ -214,7 +215,6 @@ export default defineConfig(() => {
       tutorialData(routesDir),
       sourceResolver(docsDir),
       qwikReact(),
-      Inspect(),
       qwikInsights({ publicApiKey: PUBLIC_QWIK_INSIGHTS_KEY }),
       tailwindcss(),
       overrideManualChunksForRepl(),

packages/docs/vite.config.mts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite';
 import { qwikVite } from '@builder.io/qwik/optimizer';
 import dtsPlugin from 'vite-plugin-dts';
-import { compiledStringPlugin } from './compiled-string-plugin';
+import { compiledStringPlugin } from '../../scripts/compiled-string-plugin';
 
 export default defineConfig(() => {
   return {

packages/qwik-labs/compiled-string-plugin.ts

@@ -0,0 +1,67 @@
+import type { Plugin } from 'vite';
+
+const isCompiledStringId = (id: string) => /[?&]compiled-string/.test(id);
+
+/** This returns the source code of a module after transforming */
+export function compiledStringPlugin(): Plugin {
+  let devServer: any;
+  return {
+    name: 'compiled-string-plugin',
+    enforce: 'pre',
+
+    configureServer(server) {
+      devServer = server;
+    },
+
+    resolveId: {
+      order: 'pre',
+      async handler(id, importer, options) {
+        if (isCompiledStringId(id)) {
+          const cleanId = id.replace(/([?&])compiled-string/, '$1').replace(/[?&]$/, '');
+          const resolved = await this.resolve(cleanId, importer, { skipSelf: true });
+          if (resolved) {
+            return `virtual:compiled-string:${resolved.id}`;
+          }
+        } else if (id.startsWith('virtual:compiled-string:')) {
+          return id;
+        }
+        return null;
+      },
+    },
+
+    load: {
+      order: 'pre',
+      async handler(id) {
+        if (id.startsWith('virtual:compiled-string:')) {
+          const originalId = id.slice('virtual:compiled-string:'.length);
+
+          const result = await this.load({
+            id: originalId,
+            moduleSideEffects: true,
+          });
+
+          let code: string;
+          if (result && 'code' in result && result.code) {
+            // If this.load provides code, use it
+            code = result.code;
+          } else if (devServer) {
+            // in dev mode, you need to use the dev server to transform the request
+            const transformResult = await devServer.transformRequest(originalId);
+            if (transformResult && transformResult.code) {
+              code = transformResult.code;
+            }
+            this.addWatchFile(originalId);
+          }
+          if (!code!) {
+            throw new Error(`Unable to load code for ${originalId}`);
+          }
+          return {
+            code: `export default ${JSON.stringify(code)};`,
+            map: null,
+          };
+        }
+        return null;
+      },
+    },
+  };
+}