Merge pull request #7927 from QwikDev/fix-repl

fix(repl): bundling issue with ssr worker

Author: wmertens

packages/docs/global.d.ts

@@ -3,3 +3,8 @@ declare module '*?raw-source' {
   const url: string;
   export default url;
 }
+
+declare module '*?compiled-string' {
+  const str: string;
+  export default str;
+}

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

@@ -4,6 +4,13 @@ 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));
+
 const bundlers = new Map<string, Bundler>();
 
 class Bundler {

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

@@ -1,8 +1,6 @@
 // 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';
-// @ts-expect-error
-import listenerScript from './client-events-listener?compiled-string';
 
 // Worker message types
 interface MessageBase {
@@ -67,8 +65,8 @@ self.onmessage = async (e: MessageEvent<IncomingMessage>) => {
 async function executeSSR(message: InitSSRMessage): Promise<{ html: string; events: any[] }> {
   const { baseUrl, manifest, entry } = message;
 
-  // @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}`);
+  // 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 server = module.default;
 
   const render = typeof server === 'function' ? server : server?.render;
@@ -103,7 +101,10 @@ async function executeSSR(message: InitSSRMessage): Promise<{ html: string; even
   });
 
   // Inject the event listener script
-  ssrResult.html = ssrResult.html.replace('</body>', `<script>${listenerScript}</script></body>`);
+  ssrResult.html = ssrResult.html.replace(
+    '</body>',
+    `<script>${(globalThis as any).LISTENER_SCRIPT}</script></body>`
+  );
 
   // Restore console methods
   console.log = orig.log;

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

@@ -1,7 +1,7 @@
 /** Maintains the state for a REPL instance */
 
 import { isServer, unwrapStore } from '@builder.io/qwik';
-import { getBundler } from '../bundler';
+import { getBundler, ssrWorkerString } from '../bundler';
 import { registerReplSW } from '../register-repl-sw';
 import type { RequestMessage, ResponseMessage } from '../repl-sw';
 import type { ReplAppInput, ReplResult, ReplStore } from '../types';
@@ -10,10 +10,6 @@ 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;