fast refresh

Author: rickhanlonii

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

@@ -0,0 +1,17 @@
+// Must run before React loads. Creates __REACT_DEVTOOLS_GLOBAL_HOOK__ so
+// React's renderer injects into it, enabling react-refresh to work.
+if (typeof window !== 'undefined' && !window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
+  var nextID = 0;
+  window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
+    renderers: new Map(),
+    supportsFiber: true,
+    inject: function (injected) {
+      var id = nextID++;
+      this.renderers.set(id, injected);
+      return id;
+    },
+    onScheduleFiberRoot: function () {},
+    onCommitFiberRoot: function () {},
+    onCommitFiberUnmount: function () {},
+  };
+}

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

@@ -24,6 +24,17 @@ import {
   encodeReply,
 } from 'react-server-dom-webpack/client.browser';
 
+import {
+  injectIntoGlobalHook,
+  register as refreshRegister,
+  performReactRefresh,
+  isLikelyComponentType,
+} from 'react-refresh/runtime';
+
+// Patch the DevTools hook to capture renderer helpers and track roots.
+// Must run after react-dom evaluates (injects renderer) but before createRoot().
+injectIntoGlobalHook(window);
+
 export function initClient() {
   // Create Worker from pre-bundled server runtime
   var blob = new Blob([rscServerForWorker], {type: 'application/javascript'});
@@ -234,6 +245,7 @@ export function initClient() {
       if (filePath === '/src/rsc-client.js') return;
       if (filePath === '/src/rsc-server.js') return;
       if (filePath === '/src/__webpack_shim__.js') return;
+      if (filePath === '/src/__react_refresh_init__.js') return;
       userFiles[filePath] = files[filePath];
     });
     worker.postMessage({
@@ -327,5 +339,33 @@ export function initClient() {
     Object.keys(clientEntries).forEach(function (moduleId) {
       evaluateModule(moduleId);
     });
+
+    // Register all evaluated components with react-refresh for Fast Refresh.
+    // This creates stable "component families" so React can preserve state
+    // across re-evaluations when component identity changes.
+    Object.keys(globalThis.__webpack_module_cache__).forEach(function (
+      moduleId
+    ) {
+      var moduleExports = globalThis.__webpack_module_cache__[moduleId];
+      var exports =
+        moduleExports.exports !== undefined
+          ? moduleExports.exports
+          : moduleExports;
+      if (exports && typeof exports === 'object') {
+        for (var key in exports) {
+          var exportValue = exports[key];
+          if (isLikelyComponentType(exportValue)) {
+            refreshRegister(exportValue, moduleId + ' %exports% ' + key);
+          }
+        }
+      }
+      if (typeof exports === 'function' && isLikelyComponentType(exports)) {
+        refreshRegister(exports, moduleId + ' %exports% default');
+      }
+    });
+
+    // Tell React about updated component families so it can
+    // preserve state for components whose implementation changed.
+    performReactRefresh();
   }
 }

src/components/MDX/Sandpack/templateRSC.ts

@@ -22,16 +22,34 @@ const RSC_SOURCE_FILES = {
     require('!raw-loader?esModule=false!./sandpack-rsc/sandbox-code/src/webpack-shim.js') as string,
   'rsc-client':
     require('!raw-loader?esModule=false!./sandpack-rsc/sandbox-code/src/rsc-client.js') as string,
+  'react-refresh-init':
+    require('!raw-loader?esModule=false!./sandpack-rsc/sandbox-code/src/__react_refresh_init__.js') as string,
   'worker-bundle': `export default ${JSON.stringify(
     require('!raw-loader?esModule=false!./sandpack-rsc/sandbox-code/src/worker-bundle.dist.js') as string
   )};`,
   'rsdw-client':
     require('!raw-loader?esModule=false!../../../../node_modules/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js') as string,
 };
 
+// Load react-refresh runtime and strip the process.env.NODE_ENV guard
+// so it works in Sandpack's bundler which may not replace process.env.
+const reactRefreshRaw =
+  require('!raw-loader?esModule=false!../../../../node_modules/next/dist/compiled/react-refresh/cjs/react-refresh-runtime.development.js') as string;
+
+// Wrap as a CJS module that Sandpack can require.
+// Strip the `if (process.env.NODE_ENV !== "production")` guard so the
+// runtime always executes inside the sandbox.
+const reactRefreshModule = reactRefreshRaw.replace(
+  /if \(process\.env\.NODE_ENV !== "production"\) \{/,
+  '{'
+);
+
 // Entry point that bootstraps the RSC client pipeline.
+// __react_refresh_init__ must be imported BEFORE rsc-client so the
+// DevTools hook stub exists before React's renderer loads.
 const indexEntry = `
 import './styles.css';
+import './__react_refresh_init__';
 import { initClient } from './rsc-client.js';
 initClient();
 `.trim();
@@ -54,6 +72,7 @@ export const templateRSC: SandpackFiles = {
   ...hideFiles({
     '/public/index.html': indexHTML,
     '/src/index.js': indexEntry,
+    '/src/__react_refresh_init__.js': RSC_SOURCE_FILES['react-refresh-init'],
     '/src/rsc-client.js': RSC_SOURCE_FILES['rsc-client'],
     '/src/rsc-server.js': RSC_SOURCE_FILES['worker-bundle'],
     '/src/__webpack_shim__.js': RSC_SOURCE_FILES['webpack-shim'],
@@ -62,6 +81,10 @@ export const templateRSC: SandpackFiles = {
       '{"name":"react-server-dom-webpack","main":"index.js"}',
     '/node_modules/react-server-dom-webpack/client.browser.js':
       RSC_SOURCE_FILES['rsdw-client'],
+    // react-refresh runtime as a Sandpack local dependency
+    '/node_modules/react-refresh/package.json':
+      '{"name":"react-refresh","main":"runtime.js"}',
+    '/node_modules/react-refresh/runtime.js': reactRefreshModule,
     '/package.json': JSON.stringify(
       {
         name: 'react.dev',