Enable React Refresh for all dependencies

Author: CompuIves

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';
 
@@ -198,7 +198,11 @@ const PREINSTALLED_DEPENDENCIES = [
   ...BABEL_DEPENDENCIES,
 ];
 
-function getDependencies(parsedPackage, templateDefinition, configurations) {
+function getDependencies(
+  parsedPackage,
+  templateDefinition,
+  configurations
+): NPMDependencies {
   const {
     dependencies: d = {},
     peerDependencies = {},
@@ -305,38 +309,27 @@ function getDependencies(parsedPackage, templateDefinition, configurations) {
   return returnedDependencies;
 }
 
-async function updateManager(
+function initializeManager(
   sandboxId: string,
   template: TemplateType,
-  managerModules: { [path: string]: Module },
-  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, configurations.package.parsed),
-      managerModules,
-      {
-        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);
-  }
+  { hasFileResolver = false }: { hasFileResolver?: boolean } = {}
+) {
+  return new Manager(
+    sandboxId,
+    getPreset(template, configurations.package.parsed),
+    modules,
+    {
+      hasFileResolver,
+    }
+  );
+}
 
+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 => {
@@ -408,7 +401,6 @@ interface CompileOptions {
   skipEval?: boolean;
   hasFileResolver?: boolean;
   disableDependencyPreprocessing?: boolean;
-  showFullScreen?: boolean;
 }
 
 async function compile({
@@ -423,7 +415,6 @@ async function compile({
   skipEval = false,
   hasFileResolver = false,
   disableDependencyPreprocessing = false,
-  showFullScreen = false,
 }: CompileOptions) {
   dispatch({
     type: 'start',
@@ -477,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,
       {
@@ -492,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);
 
@@ -527,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');
 

packages/app/src/sandbox/eval/presets/create-react-app/utils.ts

@@ -3,15 +3,12 @@ import { getAbsoluteDependencies } from '@codesandbox/common/lib/utils/dependenc
 import Manager from 'sandbox/eval/manager';
 
 export async function isMinimalReactVersion(
-  dependencies: object = {},
-  devDependencies: object = {},
+  version: string,
   minimalVersion: string
 ) {
-  const allDependencies = { ...dependencies, ...devDependencies };
-
-  if (allDependencies['react-dom']) {
+  if (version) {
     const absoluteDependencies = await getAbsoluteDependencies({
-      'react-dom': allDependencies['react-dom'],
+      'react-dom': version,
     });
 
     return (
@@ -23,14 +20,19 @@ export async function isMinimalReactVersion(
   return false;
 }
 
+/**
+ * Decide whether React Refresh hot module reloading strategy is supported by React
+ */
 export async function hasRefresh(
-  dependencies: object = {},
-  devDependencies: object = {}
+  dependencies: { name: string; version: string }[]
 ) {
-  const allDependencies = { ...dependencies, ...devDependencies };
+  const hasReactRefresh = dependencies.find(n => n.name === 'react-refresh');
+  if (hasReactRefresh) {
+    const reactDom = dependencies.find(dep => dep.name === 'react-dom');
 
-  if (allDependencies['react-refresh']) {
-    return isMinimalReactVersion(dependencies, devDependencies, '16.9.0');
+    if (reactDom) {
+      return isMinimalReactVersion(reactDom.version, '16.9.0');
+    }
   }
 
   return false;