Fix HMR when non-entry file is edited

Author: CompuIves

packages/app/src/sandbox/compile.js

@@ -453,48 +453,14 @@ async function compile({
     await manager.verifyTreeTranspiled();
     await manager.transpileModules(managerModuleToTranspile);
 
-    const managerTranspiledModuleToTranspile = manager.getTranspiledModule(
-      managerModuleToTranspile
-    );
-
     debug(`Transpilation time ${Date.now() - t}ms`);
 
     dispatch({ type: 'status', status: 'evaluating' });
 
     if (!skipEval) {
       resetScreen();
 
-      if (
-        !manager.webpackHMR &&
-        (!managerTranspiledModuleToTranspile.compilation || isModuleView)
-      ) {
-        try {
-          const children = document.body.children;
-          // Do unmounting for react
-          if (
-            manifest &&
-            manifest.dependencies.find(n => n.name === 'react-dom')
-          ) {
-            const reactDOMModule = manager.resolveModule('react-dom', '');
-            const reactDOM = manager.evaluateModule(reactDOMModule);
-
-            reactDOM.unmountComponentAtNode(document.body);
-
-            for (let i = 0; i < children.length; i += 1) {
-              if (children[i].tagName === 'DIV') {
-                reactDOM.unmountComponentAtNode(children[i]);
-              }
-            }
-          }
-        } catch (e) {
-          /* don't do anything with this error */
-
-          if (process.env.NODE_ENV === 'development') {
-            console.error('Problem while cleaning up');
-            console.error(e);
-          }
-        }
-      }
+      manager.preset.preEvaluate(manager);
 
       if (!manager.webpackHMR && !manager.preset.htmlDisabled) {
         const htmlModulePath = templateDefinition

packages/app/src/sandbox/console/index.js

@@ -1,5 +1,5 @@
 import { dispatch } from 'codesandbox-api';
-import { Hook } from 'console-feed';
+import Hook from 'console-feed';
 
 export default function setupConsole() {
   Hook(window.console, log => {

packages/app/src/sandbox/eval/presets/create-react-app/index.js

@@ -10,7 +10,39 @@ export default function initialize() {
     'create-react-app',
     ['web.js', 'js', 'json', 'web.jsx', 'jsx'],
     { 'react-native': 'react-native-web' },
-    { hasDotEnv: true }
+    {
+      hasDotEnv: true,
+      preEvaluate: manager => {
+        if (!manager.webpackHMR) {
+          try {
+            const children = document.body.children;
+            // Do unmounting for react
+            if (
+              manager.manifest &&
+              manager.manifest.dependencies.find(n => n.name === 'react-dom')
+            ) {
+              const reactDOMModule = manager.resolveModule('react-dom', '');
+              const reactDOM = manager.evaluateModule(reactDOMModule);
+
+              reactDOM.unmountComponentAtNode(document.body);
+
+              for (let i = 0; i < children.length; i += 1) {
+                if (children[i].tagName === 'DIV') {
+                  reactDOM.unmountComponentAtNode(children[i]);
+                }
+              }
+            }
+          } catch (e) {
+            /* don't do anything with this error */
+
+            if (process.env.NODE_ENV === 'development') {
+              console.error('Problem while cleaning up');
+              console.error(e);
+            }
+          }
+        }
+      },
+    }
   );
 
   preset.registerTranspiler(module => /\.css$/.test(module.path), [

packages/app/src/sandbox/eval/presets/index.js

@@ -43,14 +43,19 @@ export default class Preset {
   hasDotEnv: boolean;
 
   /**
-   * Code to run before evaluating entry
+   * Code to run before evaluating and transpiling entry
    */
   setup: LifeCycleFunction;
   /**
    * Code to run after done
    */
   teardown: LifeCycleFunction;
 
+  /**
+   * Code to run before evaluation
+   */
+  preEvaluate: LifeCycleFunction;
+
   constructor(
     name: string,
     ignoredExtensions: ?Array<string>,
@@ -60,9 +65,11 @@ export default class Preset {
       setup,
       teardown,
       htmlDisabled,
+      preEvaluate,
     }: {
       hasDotEnv?: boolean,
       setup?: LifeCycleFunction,
+      preEvaluate?: LifeCycleFunction,
       teardown?: LifeCycleFunction,
       htmlDisabled?: boolean,
     } = {}
@@ -80,6 +87,7 @@ export default class Preset {
     const noop = () => {};
     this.setup = setup || noop;
     this.teardown = teardown || noop;
+    this.preEvaluate = preEvaluate || noop;
     this.htmlDisabled = htmlDisabled || false;
   }
 

packages/app/src/sandbox/eval/transpiled-module.js

@@ -713,7 +713,7 @@ export default class TranspiledModule {
       ) {
         return this.compilation.exports;
       }
-    } else if (this.compilation && this.compilation.exports) {
+    } else if (this.compilation && this.compilation.exports && !this.isEntry) {
       return this.compilation.exports;
     }