React Refresh (codesandbox#3014)

* Don't unmount components created with createRoot

* React Refresh

* Remove HMR enabled code

* Fix typings

* Add babel plugin to prod build

* Fix jest typing

* Fix regex require finder

* Revert change of README.md

* Enable React Refresh for all dependencies

* Fix typing

* Fix typecheck

* Add conditional module.hot.accept()

* Change default file opened for React templates

* Revert "Add conditional module.hot.accept()"

This reverts commit 47d98b8.

* Fix entry files

Author: CompuIves

packages/app/package.json

@@ -260,6 +260,7 @@
     "@types/react-router-dom": "^4.3.1",
     "@types/react-stripe-elements": "^1.3.2",
     "@types/resolve": "^0.0.8",
+    "@types/semver": "6.2.0",
     "@types/socket.io-client": "^1.4.32",
     "@types/stripe-v3": "^3.1.7",
     "@types/styled-components": "^4.1.13",

packages/app/src/sandbox/compile.ts

@@ -21,10 +21,10 @@ import createCodeSandboxOverlay from './codesandbox-overlay';
 import getPreset from './eval';
 import { consumeCache, deleteAPICache, saveCache } from './eval/cache';
 import { Module } from './eval/entities/module';
-import Manager, { Manifest } from './eval/manager';
+import Manager from './eval/manager';
 import TranspiledModule from './eval/transpiled-module';
 import handleExternalResources from './external-resources';
-import { loadDependencies } from './npm';
+import { loadDependencies, NPMDependencies } from './npm';
 import { resetScreen } from './status-screen';
 import { showRunOnClick } from './status-screen/run-on-click';
 
@@ -93,6 +93,7 @@ const WHITELISTED_DEV_DEPENDENCIES = [
   'react-addons-test-utils',
   'react-test-renderer',
   'identity-obj-proxy',
+  'react-refresh',
 ];
 
 const BABEL_DEPENDENCIES = [
@@ -197,7 +198,11 @@ const PREINSTALLED_DEPENDENCIES = [
   ...BABEL_DEPENDENCIES,
 ];
 
-function getDependencies(parsedPackage, templateDefinition, configurations) {
+function getDependencies(
+  parsedPackage,
+  templateDefinition,
+  configurations
+): NPMDependencies {
   const {
     dependencies: d = {},
     peerDependencies = {},
@@ -304,33 +309,27 @@ function getDependencies(parsedPackage, templateDefinition, configurations) {
   return returnedDependencies;
 }
 
-async function updateManager(
+function initializeManager(
   sandboxId: string,
   template: TemplateType,
-  managerModules,
-  manifest: Manifest,
+  modules: { [path: string]: Module },
   configurations: ParsedConfigurationFiles,
-  isNewCombination: boolean,
-  hasFileResolver: boolean
-): Promise<TranspiledModule[]> {
-  let newManager = false;
-  if (!manager || manager.id !== sandboxId) {
-    newManager = true;
-    manager = new Manager(sandboxId, getPreset(template), managerModules, {
+  { hasFileResolver = false }: { hasFileResolver?: boolean } = {}
+) {
+  return new Manager(
+    sandboxId,
+    getPreset(template, configurations.package.parsed),
+    modules,
+    {
       hasFileResolver,
-    });
-  }
-
-  if (isNewCombination || newManager) {
-    manager.setManifest(manifest);
-  }
-
-  if (firstLoad && newManager) {
-    // We save the state of transpiled modules, and load it here again. Gives
-    // faster initial loads.
-    await consumeCache(manager);
-  }
+    }
+  );
+}
 
+async function updateManager(
+  managerModules: { [path: string]: Module },
+  configurations: ParsedConfigurationFiles
+): Promise<TranspiledModule[]> {
   manager.updateConfigurations(configurations);
   await manager.preset.setup(manager);
   return manager.updateData(managerModules).then(x => {
@@ -402,7 +401,6 @@ interface CompileOptions {
   skipEval?: boolean;
   hasFileResolver?: boolean;
   disableDependencyPreprocessing?: boolean;
-  showFullScreen?: boolean;
 }
 
 async function compile({
@@ -417,7 +415,6 @@ async function compile({
   skipEval = false,
   hasFileResolver = false,
   disableDependencyPreprocessing = false,
-  showFullScreen = false,
 }: CompileOptions) {
   dispatch({
     type: 'start',
@@ -471,12 +468,20 @@ async function compile({
 
     dispatch({ type: 'status', status: 'installing-dependencies' });
 
-    const dependencies = getDependencies(
+    manager =
+      manager ||
+      initializeManager(sandboxId, template, modules, configurations, {
+        hasFileResolver,
+      });
+
+    let dependencies: NPMDependencies = getDependencies(
       parsedPackageJSON,
       templateDefinition,
       configurations
     );
 
+    dependencies = await manager.preset.processDependencies(dependencies);
+
     const { manifest, isNewCombination } = await loadDependencies(
       dependencies,
       {
@@ -486,25 +491,34 @@ async function compile({
       }
     );
 
-    if (isNewCombination && !firstLoad) {
+    const shouldReloadManager =
+      (isNewCombination && !firstLoad) || manager.id !== sandboxId;
+
+    if (shouldReloadManager) {
       // Just reset the whole manager if it's a new combination
-      if (manager) {
-        manager.dispose();
-      }
-      manager = null;
-    }
-    const t = Date.now();
+      manager.dispose();
 
-    const updatedModules =
-      (await updateManager(
+      manager = initializeManager(
         sandboxId,
         template,
         modules,
-        manifest,
         configurations,
-        isNewCombination,
-        hasFileResolver
-      )) || [];
+        { hasFileResolver }
+      );
+    }
+
+    if (shouldReloadManager || firstLoad) {
+      // Now initialize the data the manager can only use once dependencies are loaded
+
+      manager.setManifest(manifest);
+      // We save the state of transpiled modules, and load it here again. Gives
+      // faster initial loads.
+      await consumeCache(manager);
+    }
+
+    const t = Date.now();
+
+    const updatedModules = (await updateManager(modules, configurations)) || [];
 
     const possibleEntries = templateDefinition.getEntries(configurations);
 
@@ -521,9 +535,6 @@ async function compile({
     const main = absolute(foundMain);
     managerModuleToTranspile = modules[main];
 
-    // TODO: make this a separate lifecycle
-    // await manager.preset.setup(manager);
-
     dispatch({ type: 'status', status: 'transpiling' });
     manager.setStage('transpilation');
 
@@ -557,7 +568,7 @@ async function compile({
         /* no */
       }
 
-      manager.preset.preEvaluate(manager, updatedModules);
+      await manager.preset.preEvaluate(manager, updatedModules);
 
       if (!manager.webpackHMR) {
         const htmlModulePath = templateDefinition

packages/app/src/sandbox/eval/hmr.js packages/app/src/sandbox/eval/hmr.tspackages/app/src/sandbox/eval/hmr.js renamed to packages/app/src/sandbox/eval/hmr.ts

@@ -1,10 +1,8 @@
-// @flow
-
 export default class HMR {
-  callback: ?() => void;
-  disposeHandler: ?(data: Object) => void;
+  callback?: () => void;
+  disposeHandler?: (data: Object) => void;
   data: Object;
-  type: ?'accept' | 'decline';
+  type?: 'accept' | 'decline';
   dirty: boolean = false;
   selfAccepted: boolean = false;
 
@@ -22,12 +20,12 @@ export default class HMR {
     }
   }
 
-  setAcceptCallback(callback?: Function) {
+  setAcceptCallback(callback?: () => void) {
     this.callback = callback;
     this.setSelfAccepted(false);
   }
 
-  setDisposeHandler(callback: Function) {
+  setDisposeHandler(callback: () => void) {
     this.disposeHandler = callback;
   }
 

packages/app/src/sandbox/eval/index.js packages/app/src/sandbox/eval/index.tspackages/app/src/sandbox/eval/index.js renamed to packages/app/src/sandbox/eval/index.ts

@@ -1,4 +1,4 @@
-// @ts-check
+/* eslint-disable import/no-named-as-default-member, import/default, import/no-named-as-default */
 import {
   react,
   vue,
@@ -14,7 +14,9 @@ import {
   reason,
 } from '@codesandbox/common/lib/templates';
 
-import reactPreset from './presets/create-react-app';
+import { isBabel7 } from '@codesandbox/common/lib/utils/is-babel-7';
+import { PackageJSON } from '@codesandbox/common/lib/types';
+import { reactPresetV1, reactPresetV3 } from './presets/create-react-app';
 import reactTsPreset from './presets/create-react-app-typescript';
 import vuePreset from './presets/vue-cli';
 import preactPreset from './presets/preact-cli';
@@ -27,10 +29,15 @@ import reasonPreset from './presets/reason';
 import dojoPreset from './presets/dojo';
 import customPreset from './presets/custom';
 
-export default function getPreset(template: string) {
+export default function getPreset(template: string, pkg: PackageJSON) {
   switch (template) {
     case react.name:
-      return reactPreset();
+      if (isBabel7(pkg.dependencies, pkg.devDependencies)) {
+        return reactPresetV3();
+      }
+
+      return reactPresetV1();
+
     case reactTs.name:
       return reactTsPreset();
     case reason.name:
@@ -54,6 +61,6 @@ export default function getPreset(template: string) {
     case custom.name:
       return customPreset();
     default:
-      return reactPreset();
+      return reactPresetV3();
   }
 }

packages/app/src/sandbox/eval/manager.ts

@@ -308,10 +308,10 @@ export default class Manager {
 
   evaluateModule(
     module: Module,
-    { force, testGlobals }: { force?: boolean; testGlobals?: boolean } = {
-      force: false,
-      testGlobals: false,
-    }
+    {
+      force = false,
+      testGlobals = false,
+    }: { force?: boolean; testGlobals?: boolean } = {}
   ) {
     if (this.hardReload && !this.isFirstLoad) {
       // Do a hard reload