Add conditional module.hot.accept()

Author: CompuIves

packages/app/src/sandbox/compile.ts

@@ -543,6 +543,21 @@ async function compile({
 
     debug(`Transpilation time ${Date.now() - t}ms`);
 
+    // Save the resulting cache from the transpilation. In evaluation we can sometimes refresh,
+    // which would cause the cache to go wasted
+    saveCache(
+      sandboxId,
+      managerModuleToTranspile,
+      manager,
+      changedModuleCount,
+      firstLoad
+    ).catch(e => {
+      console.error(
+        'Something went wrong while saving the cache, this is not critical'
+      );
+      console.error(e);
+    });
+
     dispatch({ type: 'status', status: 'evaluating' });
     manager.setStage('evaluation');
 
@@ -666,14 +681,6 @@ async function compile({
       type: 'success',
     });
 
-    saveCache(
-      sandboxId,
-      managerModuleToTranspile,
-      manager,
-      changedModuleCount,
-      firstLoad
-    );
-
     setTimeout(() => {
       try {
         sendTestCount(manager, modules);

packages/app/src/sandbox/eval/transpilers/react/refresh-transpiler.ts

@@ -107,7 +107,18 @@ class RefreshTranspiler extends Transpiler {
     loaderContext.addDependency('react-refresh/runtime');
     loaderContext.emitModule(HELPER_PATH, HELPER_CODE, '/', false, false);
 
-    const newCode = getWrapperCode(code);
+    const isRootModule = loaderContext._module.isEntry;
+    let newCode = code;
+    /**
+     * We want to explicitly add module.hot.accept to the root module, because there is often a component there
+     * that's not exported. We don't want the window to refresh every time the entry changes. This is the most
+     * used file in CodeSandbox.
+     */
+    if (isRootModule) {
+      newCode += '\nmodule.hot.accept();';
+    } else {
+      newCode = getWrapperCode(code);
+    }
 
     return Promise.resolve({
       transpiledCode: newCode || '',