refactor(repl): move build logic to main thread

The service worker is now only used as a proxy.

this way we can use ESM and we don't need to bundle separately.

Author: wmertens

packages/docs/package.json

@@ -19,6 +19,7 @@
     "@mui/x-data-grid": "6.20.4",
     "@qwik-ui/headless": "0.6.7",
     "@qwik.dev/partytown": "0.11.2",
+    "@rollup/browser": "^4.35.0",
     "@shikijs/colorized-brackets": "3.12.2",
     "@shikijs/langs": "3.12.2",
     "@shikijs/rehype": "3.12.2",
@@ -37,6 +38,7 @@
     "gray-matter": "4.0.3",
     "leaflet": "1.9.4",
     "magic-string": "0.30.17",
+    "memfs": "^4.17.0",
     "openai": "3.3.0",
     "prettier": "3.6.2",
     "prism-themes": "1.9.0",

packages/docs/src/repl/bundled.tsx

@@ -1,13 +1,6 @@
 import { version as qwikVersion } from '@builder.io/qwik';
 import type { PkgUrls } from './types';
 
-import prettierPkgJson from 'prettier/package.json';
-import prettierParserHtml from '../../node_modules/prettier/plugins/html.js?raw-source';
-import prettierStandaloneJs from '../../node_modules/prettier/standalone.js?raw-source';
-
-import terserPkgJson from 'terser/package.json';
-import terserJs from '../../node_modules/terser/dist/bundle.min.js?raw-source';
-
 import qBuild from '../../node_modules/@builder.io/qwik/dist/build/index.d.ts?raw-source';
 import qCoreCjs from '../../node_modules/@builder.io/qwik/dist/core.cjs?raw-source';
 import qCoreDts from '../../node_modules/@builder.io/qwik/dist/core.d.ts?raw-source';
@@ -63,23 +56,4 @@ export const bundled: PkgUrls = {
     '/bindings/qwik.wasm.cjs': qWasmCjs,
     '/bindings/qwik_wasm_bg.wasm': qWasmBinUrl,
   },
-  prettier: {
-    version: prettierPkgJson.version,
-    '/plugins/html.js': prettierParserHtml,
-    '/standalone.js': prettierStandaloneJs,
-  },
-  // v4 of rollup uses wasm etc, need to figure out how to bundle that
-  rollup: {
-    version: ROLLUP_VERSION,
-    '/dist/rollup.browser.js': getNpmCdnUrl(
-      {},
-      'rollup',
-      ROLLUP_VERSION,
-      '/dist/rollup.browser.js'
-    ),
-  },
-  terser: {
-    version: terserPkgJson.version,
-    '/dist/bundle.min.js': terserJs,
-  },
 };

packages/docs/src/repl/repl.tsx

@@ -16,6 +16,8 @@ import { getReplVersion } from './repl-version';
 import { updateReplOutput } from './repl-output-update';
 import { QWIK_PKG_NAME, bundled, getNpmCdnUrl } from './bundled';
 import { isServer } from '@builder.io/qwik';
+import { loadDependencies } from './worker/repl-dependencies-main';
+import { appBundleClient, appBundleSsr, appSsrHtml } from './worker/repl-builder';
 
 export const Repl = component$((props: ReplProps) => {
   useStyles$(styles);
@@ -189,15 +191,15 @@ const getDependencies = (input: ReplAppInput) => {
   return out;
 };
 
-export const sendUserUpdateToReplServer = (input: ReplAppInput, store: ReplStore) => {
+export const sendUserUpdateToReplServer = async (input: ReplAppInput, store: ReplStore) => {
   if (isServer) {
     return;
   }
   if (input.version && store.serverWindow) {
-    const msg: ReplUpdateMessage = {
-      type: 'update',
-      clientId: store.clientId,
-      options: {
+    try {
+      // Load dependencies in main thread
+      const deps = getDependencies(input);
+      await loadDependencies({
         buildId: input.buildId,
         debug: input.debug,
         srcInputs: input.files,
@@ -207,13 +209,133 @@ export const sendUserUpdateToReplServer = (input: ReplAppInput, store: ReplStore
         },
         version: input.version,
         serverUrl: store.serverUrl,
-        deps: getDependencies(input),
-      },
-    };
+        deps,
+      });
+
+      // Create build result
+      const result: any = {
+        type: 'result',
+        clientId: store.clientId,
+        buildId: input.buildId,
+        html: '',
+        transformedModules: [],
+        clientBundles: [],
+        manifest: undefined,
+        ssrModules: [],
+        diagnostics: [],
+        events: [],
+      };
+
+      // Run build process in main thread
+      await appBundleClient(
+        {
+          buildId: input.buildId,
+          debug: input.debug,
+          srcInputs: input.files,
+          buildMode: input.buildMode as any,
+          entryStrategy: {
+            type: input.entryStrategy as any,
+          },
+          version: input.version,
+          serverUrl: store.serverUrl,
+          deps,
+        },
+        result
+      );
+
+      await appBundleSsr(
+        {
+          buildId: input.buildId,
+          debug: input.debug,
+          srcInputs: input.files,
+          buildMode: input.buildMode as any,
+          entryStrategy: {
+            type: input.entryStrategy as any,
+          },
+          version: input.version,
+          serverUrl: store.serverUrl,
+          deps,
+        },
+        result
+      );
+
+      await appSsrHtml(
+        {
+          buildId: input.buildId,
+          debug: input.debug,
+          srcInputs: input.files,
+          buildMode: input.buildMode as any,
+          entryStrategy: {
+            type: input.entryStrategy as any,
+          },
+          version: input.version,
+          serverUrl: store.serverUrl,
+          deps,
+        },
+        result
+      );
+
+      // Update the store with results
+      updateReplOutput(store, result);
+
+      // Send build results to service worker
+      if (navigator.serviceWorker.controller) {
+        navigator.serviceWorker.controller.postMessage({
+          type: 'update-build',
+          clientId: store.clientId,
+          buildId: input.buildId,
+          html: result.html,
+          clientBundles: result.clientBundles,
+          ssrModules: result.ssrModules,
+        });
+      }
 
-    if (msg.options.srcInputs && msg.options.srcInputs.length > 0) {
-      // using JSON.stringify() to remove proxies
-      store.serverWindow.postMessage(JSON.stringify(msg));
+      // Send result to server window for iframe communication
+      const msg: ReplUpdateMessage = {
+        type: 'update',
+        clientId: store.clientId,
+        options: {
+          buildId: input.buildId,
+          debug: input.debug,
+          srcInputs: input.files,
+          buildMode: input.buildMode as any,
+          entryStrategy: {
+            type: input.entryStrategy as any,
+          },
+          version: input.version,
+          serverUrl: store.serverUrl,
+          deps,
+        },
+      };
+
+      if (msg.options.srcInputs && msg.options.srcInputs.length > 0) {
+        store.serverWindow.postMessage(JSON.stringify(msg));
+      }
+    } catch (e: any) {
+      console.error('Build error:', e);
+      const errorResult: any = {
+        type: 'result',
+        clientId: store.clientId,
+        buildId: input.buildId,
+        html: '',
+        transformedModules: [],
+        clientBundles: [],
+        manifest: undefined,
+        ssrModules: [],
+        diagnostics: [
+          {
+            scope: 'runtime',
+            message: String(e.stack || e),
+            category: 'error',
+            file: '',
+            highlights: [],
+            suggestions: null,
+            code: 'runtime error',
+          },
+        ],
+        events: [],
+      };
+      updateReplOutput(store, errorResult);
     }
   }
 };