Merge branch 'master' into playground

Author: Ives van Hoorne

.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

@@ -11,28 +11,27 @@ const SANDBOXES = [
   'vVoQVk78',
   'github/faceyspacey/redux-first-router-codesandbox/tree/master',
   'mZRjw05yp',
-  'pk1qjqpw67',
+
   'o29j95wx9',
   'k3q1zjjml5',
   'github/reactjs/redux/tree/master/examples/real-world',
   'github/CompuIves/codesandbox-presentation',
   '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

@@ -24,7 +24,7 @@
     "babel-macros": "^1.0.2",
     "babel-plugin-codegen": "^1.2.0",
     "babel-plugin-lodash": "^3.2.11",
-    "babel-plugin-styled-components": "^1.1.7",
+    "babel-plugin-styled-components": "^1.3.0",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
@@ -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",
+    "styled-components": "^2.3.2",
     "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';
@@ -127,6 +128,12 @@ export default class Preview extends React.PureComponent<Props, State> {
       return;
     }
 
+    if (prevProps.dependencies !== this.props.dependencies) {
+      // Changed dependencies
+      this.executeCodeImmediately();
+      return;
+    }
+
     if (prevProps.module.id !== this.props.module.id) {
       if (prevProps.isInProjectView && this.props.isInProjectView) {
         // If user only navigated while watching project
@@ -253,15 +260,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 +292,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

@@ -24,12 +24,27 @@
   <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">
   <title>CodeSandbox</title>
+
+  <!-- AMD Loader for Monaco -->
+  <link data-name="vs/editor/editor.main" rel="stylesheet" href="/public/vs/editor/editor.main.css">
+  <script src="/public/vs/loader.js"></script>
+  <script>
+    window.require.config({
+      url: '/public/vs/loader.js',
+      paths: {
+        vs: '/public/vs',
+      },
+    });
+  </script>
+  <script src="/public/vs/editor/editor.main.nls.js"></script>
+  <script src="/public/vs/editor/editor.main.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);
@@ -38,10 +53,8 @@
   <!-- End Google Tag Manager -->
   <script 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;">

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/SearchDependencies.js

@@ -103,7 +103,12 @@ export default class SearchDependencies extends React.PureComponent {
   hitToVersionMap = new Map();
 
   handleSelect = hit => {
-    const version = this.hitToVersionMap.get(hit);
+    let version = this.hitToVersionMap.get(hit);
+
+    if (!version && hit.tags) {
+      version = hit.tags.latest;
+    }
+
     this.props.onConfirm(hit.name, version);
   };
 

packages/app/src/app/store/entities/sandboxes/utils/create-zip/create-react-app-typescript/index.js

@@ -87,7 +87,7 @@ export default function createZip(
           '@types/node': '^8.0.28',
         },
         {
-          'react-scripts-ts': '2.6.0',
+          'react-scripts-ts': '2.8.0',
         },
         {
           start: 'react-scripts-ts start',

packages/app/src/embed/components/__snapshots__/File.test.js.snap

@@ -47,6 +47,7 @@ exports[`File renders 1`] = `
   display: inline-block;
   -webkit-font-smoothing: antialiased;
   vertical-align: top;
+  -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
@@ -151,6 +152,7 @@ exports[`File renders alternative 1`] = `
   display: inline-block;
   -webkit-font-smoothing: antialiased;
   vertical-align: top;
+  -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
@@ -252,6 +254,7 @@ exports[`File renders as active 1`] = `
   display: inline-block;
   -webkit-font-smoothing: antialiased;
   vertical-align: top;
+  -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
@@ -356,6 +359,7 @@ exports[`File renders directory 1`] = `
   display: inline-block;
   -webkit-font-smoothing: antialiased;
   vertical-align: top;
+  -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }