Simplify sandbox and optimize prefetching (codesandbox#402)

* Simplify sandbox and optimize prefetching

* Add fallback for discrepancy in sw version

* Fix standalone sandboxes

* Fix standalone

* Disable script altering

* Don't inline babel worker

* Inline the babel transpiler

* Add 'as' attribute

* Fix inlining

* Preload workers

* Tweaks

* Change tests

* Fix transpilers

* Fix console.log

* Don't inline sandbox worker code

* Add test metadata

* Allow custom arguments in integration test

Author: CompuIves

.circleci/config.yml

@@ -69,7 +69,11 @@ jobs:
           name: Test Integrations
           command: |
             sleep 6
-            yarn test:integrations
+            yarn test:integrations --ci --testResultsProcessor="jest-junit"
+          environment:
+            JEST_JUNIT_OUTPUT: "/tmp/test-results/js-test-results.xml"
+      - store_test_results:
+          path: /tmp/test-results
       - store_artifacts:
           path: packages/app/integration-tests/tests/__image_snapshots__/__diff_output__
           destination: image_snapshot_diff
@@ -83,7 +87,9 @@ jobs:
           key: v2-repo-{{ .Environment.CIRCLE_SHA1 }}
       - run:
           name: Test
-          command: yarn test
+          command: yarn test --ci --testResultsProcessor="jest-junit"
+          environment:
+            JEST_JUNIT_OUTPUT: "reports/junit/js-test-results.xml"
 
   lint:
     docker:

package.json

@@ -14,7 +14,7 @@
     "start:dev_api":
       "lerna run start --parallel --ignore app & lerna run start:dev_api --scope app --stream",
     "test": "lerna run test",
-    "test:integrations": "lerna run test:integrations --scope app --stream",
+    "test:integrations": "lerna exec --scope app --stream -- yarn test:integrations",
     "lint": "lerna run lint",
     "add-contributor": "all-contributors add",
     "generate": "all-contributors generate",

packages/app/config/webpack.common.js

@@ -24,6 +24,7 @@ module.exports = {
           require.resolve('./polyfills'),
           path.join(paths.sandboxSrc, 'index.js'),
         ],
+        'sandbox-startup': path.join(paths.sandboxSrc, 'startup.js'),
       }
     : {
         app: [
@@ -34,6 +35,7 @@ module.exports = {
           require.resolve('./polyfills'),
           path.join(paths.sandboxSrc, 'index.js'),
         ],
+        'sandbox-startup': path.join(paths.sandboxSrc, 'startup.js'),
         embed: [
           require.resolve('./polyfills'),
           path.join(paths.embedSrc, 'index.js'),
@@ -168,7 +170,7 @@ module.exports = {
     }),
     new HtmlWebpackPlugin({
       inject: true,
-      chunks: ['common-sandbox', 'sandbox'],
+      chunks: ['sandbox-startup', 'common-sandbox', 'sandbox'],
       filename: 'frame.html',
       template: paths.sandboxHtml,
       minify: __PROD__ && {

packages/app/integration-tests/tests/sandboxes.test.js

@@ -19,20 +19,19 @@ const SANDBOXES = [
   'lp5rjr0z4z',
   'nOymMxyY',
 ];
-
-SANDBOXES.forEach(sandbox => {
-  const id = sandbox.id || sandbox;
-  const threshold = sandbox.threshold || 0.01;
+describe('sandboxes', () => {
   let browser = puppeteer.launch({
     args: ['--no-sandbox', '--disable-setuid-sandbox'],
   });
+  afterAll(() => {
+    browser.close();
+  });
 
-  describe('sandboxes', () => {
-    afterAll(() => {
-      browser.close();
-    });
+  SANDBOXES.forEach(sandbox => {
+    const id = sandbox.id || sandbox;
+    const threshold = sandbox.threshold || 0.01;
 
-    it.concurrent(
+    it(
       `loads the sandbox with id '${id}'`,
       async () => {
         browser = await browser;
@@ -51,8 +50,10 @@ SANDBOXES.forEach(sandbox => {
           },
           customSnapshotIdentifier: id.split('/').join('-'),
         });
+
+        await page.close();
       },
-      1000 * 60 * 10 // 10 minutes for all tests in total
+      1000 * 60 * 1
     );
   });
 });

packages/app/package.json

@@ -59,6 +59,7 @@
     "husky": "^0.14.3",
     "jest": "^21.2.1",
     "jest-image-snapshot": "^1.0.1",
+    "jest-junit": "^3.4.1",
     "jest-styled-components": "^4.9.0",
     "json-loader": "0.5.4",
     "object-assign": "^4.1.1",
@@ -159,21 +160,22 @@
     "react-redux": "^5.0.5",
     "react-router-dom": "^4.2.2",
     "react-router-redux": "next",
+    "react-show": "^1.1.2",
     "react-split-pane": "^0.1.63",
     "react-stripe-elements": "^1.2.0",
     "react-tippy": "^0.14.0",
     "redbox-react": "^1.4.3",
     "redux": "^3.7.1",
     "reselect": "^3.0.1",
+    "script-ext-html-webpack-plugin": "^1.8.8",
     "shelljs": "^0.7.8",
     "store": "^2.0.12",
     "styled-components": "^2.1.1",
     "svg-react-loader": "^0.4.4",
     "tern": "^0.21.0",
     "vue": "^2.5.2",
     "vue-template-compiler": "^2.5.2",
-    "vue-template-es2015-compiler": "^1.6.0",
-    "react-show": "^1.1.2"
+    "vue-template-es2015-compiler": "^1.6.0"
   },
   "jest": {
     "roots": [

packages/app/src/app/components/sandbox/Preview/index.js

@@ -8,8 +8,9 @@ import { debounce } from 'lodash';
 import type { Module, Sandbox, Preferences, Directory } from 'common/types';
 
 import { frameUrl } from 'common/utils/url-generator';
-import { findMainModule } from 'app/store/entities/sandboxes/modules/selectors';
+import { getModulePath } from 'app/store/entities/sandboxes/modules/selectors';
 import sandboxActionCreators from 'app/store/entities/sandboxes/actions';
+
 import shouldUpdate from './utils/should-update';
 
 import DevTools from './DevTools';
@@ -253,15 +254,14 @@ export default class Preview extends React.PureComponent<Props, State> {
   getRenderedModule = () => {
     const { modules, module, directories, entry, isInProjectView } = this.props;
     return isInProjectView
-      ? findMainModule(modules, directories, entry)
-      : module;
+      ? '/' + entry
+      : getModulePath(modules, directories, module.id);
   };
 
   executeCodeImmediately = (initialRender: boolean = false) => {
     const {
       modules,
       directories,
-      module,
       externalResources,
       preferences,
       dependencies,
@@ -286,18 +286,22 @@ export default class Preview extends React.PureComponent<Props, State> {
         this.evaluateInSandbox(`history.pushState({}, null, '/')`);
       }
 
+      // We convert the modules to a format the manager understands
+      const normalizedModules = modules.map(m => ({
+        path: getModulePath(modules, directories, m.id),
+        code: m.code,
+      }));
+
       this.sendMessage({
         type: 'compile',
-        module: renderedModule,
-        changedModule: module,
+        version: 2,
+        entry: renderedModule,
         dependencies,
-        modules,
-        directories,
+        modules: normalizedModules,
         sandboxId,
         externalResources,
         template,
         hasActions: !!runActionFromPreview,
-        isModuleView: !isInProjectView,
       });
     }
   };

packages/app/src/app/index.html

@@ -22,26 +22,28 @@
   <meta name="description" content="CodeSandbox is an online editor tailored for web applications.">
   <link rel="shortcut icon" href="./favicon.ico">
   <link rel="manifest" href="/manifest.json">
-  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Source+Code+Pro:500" rel="stylesheet">
+  <link rel="preload" as="font" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Source+Code+Pro:500" rel="stylesheet">
   <title>CodeSandbox</title>
+
+  <!-- AMD Loader for Monaco -->
+  <script rel="preload" src="/public/vs/loader.js"></script>
+
   <!-- Google Tag Manager -->
   <script>
     (function (w, d, s, l, i) {
       w[l] = w[l] || []; w[l].push({
         'gtm.start':
-        new Date().getTime(), event: 'gtm.js'
+          new Date().getTime(), event: 'gtm.js'
       }); var f = d.getElementsByTagName(s)[0],
         j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
           'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
     })(window, document, 'script', 'dataLayer', 'GTM-T3L6RFK');
   </script>
   <!-- End Google Tag Manager -->
-  <script src="https://cdn.ravenjs.com/3.17.0/raven.min.js" crossorigin="anonymous"></script>
+  <script async src="https://cdn.ravenjs.com/3.17.0/raven.min.js" crossorigin="anonymous"></script>
   <!-- <script async src="//cdn.headwayapp.co/widget.js"></script> -->
-  <script async src="https://js.stripe.com/v3/"></script>
 
-  <!-- AMD Loader for Monaco -->
-  <script src="/public/vs/loader.js"></script>
+  <script async rel="prefetch" src="https://js.stripe.com/v3/"></script>
 </head>
 
 <body style="margin: 0; padding: 0;">