From a1c423294eef86c27314d732acd08f4b3a063f91 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Wed, 8 Dec 2021 09:43:21 +0000
Subject: [PATCH] Sandpack: support react devtools (#6337)

* draft

* csb-core: support reactDevTools option
---
 packages/app/src/sandbox/compile.ts                 | 13 +++++++++++--
 .../sandbox/eval/presets/create-react-app/index.ts  |  2 +-
 packages/common/src/components/Preview/index.tsx    | 10 ++++++++--
 packages/sandpack-core/src/manager.ts               |  4 ++++
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/sandbox/compile.ts b/packages/app/src/sandbox/compile.ts
index 28121122659..dc012427d28 100644
--- a/packages/app/src/sandbox/compile.ts
+++ b/packages/app/src/sandbox/compile.ts
@@ -314,7 +314,12 @@ async function initializeManager(
   {
     hasFileResolver = false,
     customNpmRegistries = [],
-  }: { hasFileResolver?: boolean; customNpmRegistries?: NpmRegistry[] } = {}
+    reactDevTools = false,
+  }: {
+    hasFileResolver?: boolean;
+    customNpmRegistries?: NpmRegistry[];
+    reactDevTools?: boolean;
+  } = {}
 ) {
   const newManager = new Manager(
     sandboxId,
@@ -323,6 +328,7 @@ async function initializeManager(
     {
       hasFileResolver,
       versionIdentifier: SCRIPT_VERSION,
+      reactDevTools,
     }
   );
 
@@ -452,6 +458,7 @@ interface CompileOptions {
   hasFileResolver?: boolean;
   disableDependencyPreprocessing?: boolean;
   clearConsoleDisabled?: boolean;
+  reactDevTools?: boolean;
 }
 
 async function compile(opts: CompileOptions) {
@@ -471,6 +478,7 @@ async function compile(opts: CompileOptions) {
     hasFileResolver = false,
     disableDependencyPreprocessing = false,
     clearConsoleDisabled = false,
+    reactDevTools = false,
   } = opts;
 
   if (firstLoad) {
@@ -538,6 +546,7 @@ async function compile(opts: CompileOptions) {
       (await initializeManager(sandboxId, template, modules, configurations, {
         hasFileResolver,
         customNpmRegistries,
+        reactDevTools,
       }));
 
     let dependencies: NPMDependencies = getDependencies(
@@ -605,7 +614,7 @@ async function compile(opts: CompileOptions) {
         template,
         modules,
         configurations,
-        { hasFileResolver }
+        { hasFileResolver, reactDevTools }
       );
     }
 
diff --git a/packages/app/src/sandbox/eval/presets/create-react-app/index.ts b/packages/app/src/sandbox/eval/presets/create-react-app/index.ts
index 0dce22b9469..b376f69900f 100644
--- a/packages/app/src/sandbox/eval/presets/create-react-app/index.ts
+++ b/packages/app/src/sandbox/eval/presets/create-react-app/index.ts
@@ -288,7 +288,7 @@ export async function reactPreset(pkg: PackageJSON) {
         }
       },
       preEvaluate: async manager => {
-        if (manager.isFirstLoad && !process.env.SANDPACK) {
+        if (manager.isFirstLoad && manager.reactDevTools) {
           await initializeReactDevTools();
         }
 
diff --git a/packages/common/src/components/Preview/index.tsx b/packages/common/src/components/Preview/index.tsx
index 0d023d19be4..19d4a9a1d4f 100644
--- a/packages/common/src/components/Preview/index.tsx
+++ b/packages/common/src/components/Preview/index.tsx
@@ -459,6 +459,7 @@ class BasePreview extends React.PureComponent<Props, State> {
           previewSecret: sandbox.previewSecret,
           showScreen,
           clearConsoleDisabled: !settings.clearConsoleEnabled,
+          reactDevTools: true,
         });
       }
     }
@@ -639,9 +640,14 @@ class BasePreview extends React.PureComponent<Props, State> {
                     ...style,
                     zIndex: 1,
                     backgroundColor: 'white',
-                    userSelect: this.props.isResponsivePreviewResizing ? "none" : "initial",
+                    userSelect: this.props.isResponsivePreviewResizing
+                      ? 'none'
+                      : 'initial',
                     pointerEvents:
-                      dragging || inactive || this.props.isResizing || this.props.isResponsivePreviewResizing
+                      dragging ||
+                      inactive ||
+                      this.props.isResizing ||
+                      this.props.isResponsivePreviewResizing
                         ? 'none'
                         : 'initial',
                   }}
diff --git a/packages/sandpack-core/src/manager.ts b/packages/sandpack-core/src/manager.ts
index c4683a0cc27..8831be17dc4 100644
--- a/packages/sandpack-core/src/manager.ts
+++ b/packages/sandpack-core/src/manager.ts
@@ -123,6 +123,7 @@ type TManagerOptions = {
    */
   hasFileResolver: boolean;
   versionIdentifier: string;
+  reactDevTools: boolean;
 };
 
 function triggerFileWatch(path: string, type: 'rename' | 'change') {
@@ -164,6 +165,8 @@ export default class Manager implements IEvaluator {
     };
   };
 
+  reactDevTools: boolean;
+
   envVariables: { [envName: string]: string } = {};
   preset: Preset;
   modules: ModuleObject;
@@ -226,6 +229,7 @@ export default class Manager implements IEvaluator {
     this.version = options.versionIdentifier;
     this.esmodules = new Map();
     this.resolverCache = new Map();
+    this.reactDevTools = options.reactDevTools;
 
     /**
      * Contribute the file fetcher, which needs the manager to resolve the files