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 { previewSecret: sandbox.previewSecret, showScreen, clearConsoleDisabled: !settings.clearConsoleEnabled, + reactDevTools: true, }); } } @@ -639,9 +640,14 @@ class BasePreview extends React.PureComponent { ...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