Recover from errors, parse directives in worker with AST

Author: rickhanlonii

src/components/MDX/Sandpack/sandpack-rsc/sandbox-code/src/rsc-client.js

@@ -2,7 +2,7 @@
 // Runs inside the Sandpack iframe. Orchestrates the RSC pipeline:
 // 1. Creates a Web Worker from pre-bundled server runtime
 // 2. Receives file updates from parent (RscFileBridge) via postMessage
-// 3. Classifies files by directive, sends raw source to Worker
+// 3. Sends all user files to Worker for directive detection + compilation
 // 4. Worker compiles with Sucrase + executes, sends back Flight chunks
 // 5. Renders the Flight stream result with React
 
@@ -57,6 +57,36 @@ export function initClient() {
     root.render(jsx(Root, {initialPromise: initialPromise}));
   });
 
+  // Error overlay — rendered inside the iframe via DOM so it doesn't
+  // interfere with Sandpack's parent-frame message protocol.
+  function showError(message) {
+    var overlay = document.getElementById('rsc-error-overlay');
+    if (!overlay) {
+      overlay = document.createElement('div');
+      overlay.id = 'rsc-error-overlay';
+      overlay.style.cssText =
+        'background:#fff;border:2px solid #c00;border-radius:8px;padding:16px;margin:20px;font-family:sans-serif;';
+      var heading = document.createElement('h2');
+      heading.style.cssText = 'color:#c00;margin:0 0 8px;font-size:16px;';
+      heading.textContent = 'Server Error';
+      overlay.appendChild(heading);
+      var pre = document.createElement('pre');
+      pre.style.cssText =
+        'margin:0;white-space:pre-wrap;word-break:break-word;font-size:14px;color:#222;';
+      overlay.appendChild(pre);
+      rootEl.parentNode.insertBefore(overlay, rootEl);
+    }
+    overlay.lastChild.textContent = message;
+    overlay.style.display = '';
+    rootEl.style.display = 'none';
+  }
+
+  function clearError() {
+    var overlay = document.getElementById('rsc-error-overlay');
+    if (overlay) overlay.style.display = 'none';
+    rootEl.style.display = '';
+  }
+
   // Worker message handler
   worker.onmessage = function (e) {
     var msg = e.data;
@@ -67,15 +97,19 @@ export function initClient() {
         pendingFiles = null;
       }
     } else if (msg.type === 'deploy-result') {
+      clearError();
       // Register compiled client modules in the webpack cache before rendering
       if (msg.result && msg.result.compiledClients) {
-        registerClientModules(msg.result.compiledClients);
+        registerClientModules(
+          msg.result.compiledClients,
+          msg.result.clientEntries || {}
+        );
       }
       triggerRender();
     } else if (msg.type === 'rsc-chunk') {
       handleChunk(msg);
     } else if (msg.type === 'rsc-error') {
-      console.error('RSC Worker error:', msg.error);
+      showError(msg.error);
     }
   };
 
@@ -184,37 +218,20 @@ export function initClient() {
 
   function processFiles(files) {
     console.clear();
-    var serverFiles = {};
-    var clientManifest = {};
-    var clientFiles = {};
-
+    var userFiles = {};
     Object.keys(files).forEach(function (filePath) {
-      var code = files[filePath];
-
-      // Skip non-JS files and infrastructure files
       if (!filePath.match(/\.(js|jsx|ts|tsx)$/)) return;
       if (filePath.indexOf('node_modules') !== -1) return;
       if (filePath === '/src/index.js') return;
       if (filePath === '/src/rsc-client.js') return;
       if (filePath === '/src/rsc-server.js') return;
-
-      // Check for 'use client' directive
-      if (hasDirective(code, 'use client')) {
-        clientManifest[filePath] = true;
-        clientFiles[filePath] = code;
-      } else {
-        // Server file — send raw source to Worker for compilation
-        serverFiles[filePath] = code;
-      }
+      if (filePath === '/src/__webpack_shim__.js') return;
+      userFiles[filePath] = files[filePath];
     });
-
-    // Send raw server + client files to Worker (Worker compiles with Sucrase)
     worker.postMessage({
       type: 'deploy',
       requestId: ++renderRequestId,
-      serverFiles: serverFiles,
-      clientManifest: clientManifest,
-      clientFiles: clientFiles,
+      files: userFiles,
     });
   }
 
@@ -237,66 +254,64 @@ export function initClient() {
 
   // Evaluate compiled client modules and register them in the webpack cache
   // so RSDW client can resolve them via __webpack_require__.
-  function registerClientModules(compiledClients) {
-    var moduleIds = Object.keys(compiledClients);
-    moduleIds.forEach(function (moduleId) {
-      var code = compiledClients[moduleId];
+  function registerClientModules(compiledClients, clientEntries) {
+    // Store all compiled code for lazy evaluation
+    var allCompiled = compiledClients;
+
+    function evaluateModule(moduleId) {
+      if (globalThis.__webpack_module_cache__[moduleId]) {
+        var cached = globalThis.__webpack_module_cache__[moduleId];
+        return cached.exports !== undefined ? cached.exports : cached;
+      }
+      var code = allCompiled[moduleId];
+      if (!code)
+        throw new Error('Client require: module "' + moduleId + '" not found');
+
       var mod = {exports: {}};
+      // Register before evaluating to handle circular deps
+      globalThis.__webpack_module_cache__[moduleId] = {exports: mod.exports};
+
       var clientRequire = function (id) {
         if (id === 'react') return React;
         if (id === 'react/jsx-runtime') return ReactJSXRuntime;
         if (id === 'react/jsx-dev-runtime') return ReactJSXDevRuntime;
         if (id.endsWith('.css')) return {};
         var resolvedId = id.startsWith('.') ? resolvePath(moduleId, id) : id;
-        // Try exact match, then with extensions
         var candidates = [resolvedId];
         var exts = ['.js', '.jsx', '.ts', '.tsx'];
         for (var i = 0; i < exts.length; i++) {
           candidates.push(resolvedId + exts[i]);
         }
         for (var j = 0; j < candidates.length; j++) {
-          var cached = globalThis.__webpack_module_cache__[candidates[j]];
-          if (cached)
-            return cached.exports !== undefined ? cached.exports : cached;
+          if (
+            allCompiled[candidates[j]] ||
+            globalThis.__webpack_module_cache__[candidates[j]]
+          ) {
+            return evaluateModule(candidates[j]);
+          }
         }
         throw new Error('Client require: module "' + id + '" not found');
       };
+
       try {
-        new Function(
-          'module',
-          'exports',
-          'require',
-          'React',
-          code
-        )(mod, mod.exports, clientRequire, React);
+        new Function('module', 'exports', 'require', 'React', code)(
+          mod,
+          mod.exports,
+          clientRequire,
+          React
+        );
       } catch (err) {
         console.error('Error executing client module ' + moduleId + ':', err);
-        return;
+        return mod.exports;
       }
+      // Update cache with actual exports (handles non-circular case)
       globalThis.__webpack_module_cache__[moduleId] = {exports: mod.exports};
-    });
-  }
-
-  function hasDirective(code, directive) {
-    var lines = code.split('\n');
-    for (var i = 0; i < Math.min(lines.length, 10); i++) {
-      var line = lines[i].trim();
-      if (line === '') continue;
-      if (line.startsWith('//')) continue;
-      if (line.startsWith('/*')) {
-        while (i < lines.length && !lines[i].includes('*/')) i++;
-        continue;
-      }
-      if (
-        line === "'" + directive + "';" ||
-        line === '"' + directive + '";' ||
-        line === "'" + directive + "'" ||
-        line === '"' + directive + '"'
-      ) {
-        return true;
-      }
-      return false;
+      return mod.exports;
     }
-    return false;
+
+    // Eagerly evaluate 'use client' entry points; their imports resolve lazily
+    Object.keys(clientEntries).forEach(function (moduleId) {
+      evaluateModule(moduleId);
+    });
   }
 }