Add sandbox improvements (codesandbox#3337)

* Add sandbox improvements

* Rename entities

* Lazy load react devtools

* Lazy load jest-lite

* Fix react devtools and HMR

* Simplify yarn.lock

Author: CompuIves

packages/app/package.json

@@ -177,7 +177,7 @@
     "react-color": "^2.17.3",
     "react-content-loader": "^4.2.2",
     "react-day-picker": "^7.2.4",
-    "react-devtools-inline": "^4.0.0",
+    "react-devtools-inline": "^4.4.0",
     "react-dnd": "^9.4.0",
     "react-dnd-html5-backend": "^9.4.0",
     "react-dom": "^16.9.0",

packages/app/src/app/components/Preview/DevTools/React-Devtools/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useContext, useCallback } from 'react';
 import delay from '@codesandbox/common/lib/utils/delay';
-import { initialize } from 'react-devtools-inline/frontend';
-import { dispatch, actions } from 'codesandbox-api';
+import * as reactDevtools from 'react-devtools-inline/frontend';
+import { dispatch, actions, listen } from 'codesandbox-api';
 import { ThemeContext } from 'styled-components';
 
 import { Container } from './elements';
@@ -28,15 +28,11 @@ const DevTools = (props: DevToolProps) => {
     if (iframe) {
       const { contentWindow } = iframe;
 
-      setDevTools(initialize(contentWindow));
-      iframe.onload = () => {
-        contentWindow.postMessage(
-          {
-            type: 'activate',
-          },
-          '*'
-        );
-      };
+      listen((message: { type: string | 'activate-react-devtools' }) => {
+        if (message.type === 'activate-react-devtools') {
+          setDevTools(reactDevtools.initialize(contentWindow));
+        }
+      });
     }
   }, []);
 

…src/sandbox/codesandbox-overlay/index.js …src/sandbox/codesandbox-overlay/index.tspackages/app/src/sandbox/codesandbox-overlay/index.js renamed to packages/app/src/sandbox/codesandbox-overlay/index.ts packages/app/src/sandbox/codesandbox-overlay/index.js renamed to packages/app/src/sandbox/codesandbox-overlay/index.ts

@@ -21,7 +21,7 @@ import defaultBoilerplates from './boilerplates/default-boilerplates';
 import createCodeSandboxOverlay from './codesandbox-overlay';
 import getPreset from './eval';
 import { consumeCache, deleteAPICache, saveCache } from './eval/cache';
-import { Module } from './eval/entities/module';
+import { Module } from './eval/types/module';
 import Manager from './eval/manager';
 import TranspiledModule from './eval/transpiled-module';
 import handleExternalResources from './external-resources';
@@ -683,8 +683,9 @@ async function compile({
       firstLoad
     );
 
-    setTimeout(() => {
+    setTimeout(async () => {
       try {
+        await manager.initializeTestRunner();
         sendTestCount(manager, modules);
       } catch (e) {
         if (process.env.NODE_ENV === 'development') {
@@ -739,6 +740,8 @@ async function compile({
         type: 'state',
         state: managerState,
       });
+
+      manager.isFirstLoad = false;
     }
 
     if (firstLoad) {

packages/app/src/sandbox/compile.ts

@@ -6,6 +6,8 @@ const ErrorClass = Error;
 	Author Tobias Koppers @sokra
 */
 export default class ModuleError extends ErrorClass {
+  path: string;
+  error: Error;
   constructor(module, err) {
     super();
 

…/src/sandbox/eval/errors/module-error.js …/src/sandbox/eval/errors/module-error.tspackages/app/src/sandbox/eval/errors/module-error.js renamed to packages/app/src/sandbox/eval/errors/module-error.ts packages/app/src/sandbox/eval/errors/module-error.js renamed to packages/app/src/sandbox/eval/errors/module-error.ts

@@ -30,9 +30,8 @@ export default class ModuleWarning extends Error {
   path: string;
   message: string;
   warning: string;
-  message: string;
   severity: 'notice' | 'warning';
-  source: ?string;
-  lineNumber: ?number;
-  columnNumber: ?number;
+  source?: string;
+  lineNumber?: number;
+  columnNumber?: number;
 }

…rc/sandbox/eval/errors/module-warning.js …rc/sandbox/eval/errors/module-warning.tspackages/app/src/sandbox/eval/errors/module-warning.js renamed to packages/app/src/sandbox/eval/errors/module-warning.ts packages/app/src/sandbox/eval/errors/module-warning.js renamed to packages/app/src/sandbox/eval/errors/module-warning.ts

@@ -5,6 +5,7 @@ const g = typeof window === 'undefined' ? self : window;
 const requestFrame = (() => {
   const raf =
     g.requestAnimationFrame ||
+    // @ts-ignore
     g.mozRequestAnimationFrame ||
     g.webkitRequestAnimationFrame ||
     function(fn) {
@@ -21,15 +22,16 @@ const hasGlobalDeclaration = /^const global/m;
 export default function(
   code: string,
   require: Function,
-  module: Object,
+  module: { exports: any },
   env: Object = {},
   globals: Object = {},
-  { asUMD = false }: { asUMD: boolean } = {}
+  { asUMD = false }: { asUMD?: boolean } = {}
 ) {
   const { exports } = module;
 
   const global = g;
   const process = buildProcess(env);
+  // @ts-ignore
   g.global = global;
 
   const allGlobals = {

…dbox/eval/loaders/dependency-resolver.js …dbox/eval/loaders/dependency-resolver.tspackages/app/src/sandbox/eval/loaders/dependency-resolver.js renamed to packages/app/src/sandbox/eval/loaders/dependency-resolver.ts packages/app/src/sandbox/eval/loaders/dependency-resolver.js renamed to packages/app/src/sandbox/eval/loaders/dependency-resolver.ts

@@ -9,7 +9,7 @@ import { ParsedConfigurationFiles } from '@codesandbox/common/lib/templates/temp
 import DependencyNotFoundError from 'sandbox-hooks/errors/dependency-not-found-error';
 import ModuleNotFoundError from 'sandbox-hooks/errors/module-not-found-error';
 
-import { Module } from './entities/module';
+import { Module } from './types/module';
 import TranspiledModule, {
   ChildModule,
   SerializedTranspiledModule,
@@ -22,7 +22,6 @@ import fetchModule, {
 } from './npm/fetch-npm-module';
 import coreLibraries from './npm/get-core-libraries';
 import getDependencyName from './utils/get-dependency-name';
-import TestRunner from './tests/jest-lite';
 import dependenciesToQuery from '../npm/dependencies-to-query';
 import { packageFilter } from './utils/resolve-utils';
 
@@ -117,7 +116,7 @@ export default class Manager {
   hardReload: boolean;
   hmrStatus: HMRStatus = 'idle';
   hmrStatusChangeListeners: Set<(status: HMRStatus) => void>;
-  testRunner: TestRunner;
+  testRunner: import('./tests/jest-lite').default;
   isFirstLoad: boolean;
 
   fileResolver: IFileResolver | undefined;
@@ -157,7 +156,6 @@ export default class Manager {
 
     this.modules = modules;
     Object.keys(modules).forEach(k => this.addModule(modules[k]));
-    this.testRunner = new TestRunner(this);
 
     getGlobal().manager = this;
     if (process.env.NODE_ENV === 'development') {
@@ -184,6 +182,18 @@ export default class Manager {
     }
   }
 
+  async initializeTestRunner() {
+    if (this.testRunner) {
+      return this.testRunner;
+    }
+
+    this.testRunner = await import(
+      /* webpackChunkName: 'jest-lite' */ './tests/jest-lite'
+    ).then(({ default: TestRunner }) => new TestRunner(this));
+
+    return this.testRunner;
+  }
+
   setupFileResolver() {
     const protocol = new Protocol('file-resolver', () => true, window.parent);
     this.fileResolver = {
@@ -308,10 +318,7 @@ export default class Manager {
 
   evaluateModule(
     module: Module,
-    {
-      force = false,
-      testGlobals = false,
-    }: { force?: boolean; testGlobals?: boolean } = {}
+    { force = false, globals = {} }: { force?: boolean; globals?: object } = {}
   ) {
     if (this.hardReload && !this.isFirstLoad) {
       // Do a hard reload
@@ -334,7 +341,7 @@ export default class Manager {
       const exports = this.evaluateTranspiledModule(
         transpiledModule,
         undefined,
-        { force, testGlobals }
+        { force, globals }
       );
 
       this.setHmrStatus('idle');
@@ -349,16 +356,13 @@ export default class Manager {
   evaluateTranspiledModule(
     transpiledModule: TranspiledModule,
     initiator?: TranspiledModule,
-    {
-      force = false,
-      testGlobals = false,
-    }: { force?: boolean; testGlobals?: boolean } = {}
+    { force = false, globals = {} }: { force?: boolean; globals?: object } = {}
   ) {
     if (force && transpiledModule.compilation) {
       transpiledModule.compilation = null;
     }
 
-    return transpiledModule.evaluate(this, { force, testGlobals }, initiator);
+    return transpiledModule.evaluate(this, { force, globals }, initiator);
   }
 
   addModule(module: Module) {
@@ -933,7 +937,6 @@ export default class Manager {
   }): Promise<Array<TranspiledModule>> {
     this.transpileJobs = {};
     this.hardReload = false;
-    this.isFirstLoad = false;
 
     this.modules = modules;
 
@@ -984,15 +987,15 @@ export default class Manager {
       this.hardReload = this.configurations.sandbox.parsed.hardReloadOnChange;
     }
 
-    const modulesWithWErrors = this.getTranspiledModules().filter(t => {
+    const modulesWithErrors = this.getTranspiledModules().filter(t => {
       if (t.hasMissingDependencies) {
         t.resetTranspilation();
       }
       return t.errors.length > 0 || t.hasMissingDependencies;
     });
     const flattenedTModulesToUpdate = (flattenDeep([
       tModulesToUpdate,
-      modulesWithWErrors,
+      modulesWithErrors,
     ]) as unknown) as TranspiledModule[];
 
     const allModulesToUpdate = uniq(flattenedTModulesToUpdate);

…ges/app/src/sandbox/eval/loaders/eval.js …ges/app/src/sandbox/eval/loaders/eval.tspackages/app/src/sandbox/eval/loaders/eval.js renamed to packages/app/src/sandbox/eval/loaders/eval.ts packages/app/src/sandbox/eval/loaders/eval.js renamed to packages/app/src/sandbox/eval/loaders/eval.ts

@@ -4,7 +4,7 @@ import resolve from 'browser-resolve';
 import DependencyNotFoundError from 'sandbox-hooks/errors/dependency-not-found-error';
 
 import delay from 'sandbox/utils/delay';
-import { Module } from '../entities/module';
+import { Module } from '../types/module';
 import Manager from '../manager';
 
 import getDependencyName from '../utils/get-dependency-name';