Create React App v2 support (codesandbox#1124)

Adds a check to the React template for v2, if it is indeed v2 it will add:

- CSS Modules + Sass (+module) versions of the transpilers.
- Babel 7 transpiler with `env` and `react` presets and `babel-plugin-macros` plugin (am I missing anything?), we preload `babel-plugin-macros` in the transpiler.
- A browser compatible `svgr-loader` which along with default export of file public path will also export `ReactComponent`.

Along with this update I improved how our workers load to prefer hot workers over cold ones. This has a speed improvement for React since the babel worker now needs all project files for React (because of `macros`) and loading takes a while when the worker is cold.

I also add a prebundled `@babel/runtime` for efficiency, I removed the prebundled `babel-runtime` in favor of dynamically downloading/loading it using the bundler. It turns out you never need all files for `babel-runtime` and shipping it with the bundler only increases parse/download time without being of much use.

Note to self, release server `b475c4e` with this.

Test sandbox: http://pr1124.cs.lbogdan.tk/s/z3rwnzm6p4

Author: CompuIves

packages/app/config/polyfills.js

@@ -12,3 +12,17 @@ require('whatwg-fetch');
 // Object.assign() is commonly used with React.
 // It will use the native implementation if it's present and isn't buggy.
 Object.assign = require('object-assign');
+
+window.cosmiconfig = {};
+window.prettier = {};
+window.jsdom = {
+  JSDOM: {
+    fragment(htmlString) {
+      const div = document.createElement('div');
+      div.innerHTML = htmlString.trim();
+
+      // Change this to div.childNodes to support multiple top-level nodes
+      return div;
+    },
+  },
+};

packages/app/config/webpack.common.js

@@ -103,7 +103,7 @@ module.exports = {
         exclude: [
           /eslint\.4\.1\.0\.min\.js$/,
           /typescriptServices\.js$/,
-          new RegExp(`babel-runtime${sepRe}`),
+          /\.no-webpack\./,
         ],
         loader: 'happypack/loader',
       },
@@ -210,6 +210,15 @@ module.exports = {
           replace: `throw new Error('module assert not found')`,
         },
       },
+      // Remove dynamic require in jest circus
+      {
+        test: /babel-plugin-macros/,
+        loader: 'string-replace-loader',
+        options: {
+          search: `_require(`,
+          replace: `self.require(`,
+        },
+      },
       // "postcss" loader applies autoprefixer to our CSS.
       // "css" loader resolves paths in CSS and adds assets as dependencies.
       // "style" loader turns CSS into JS modules that inject <style> tags.
@@ -266,7 +275,7 @@ module.exports = {
   },
 
   // To make jsonlint work
-  externals: ['file', 'system'],
+  externals: ['file', 'system', 'jsdom', 'prettier', 'cosmiconfig'],
 
   resolve: {
     mainFields: ['browser', 'module', 'jsnext:main', 'main'],

packages/app/config/webpack.prod.js

@@ -55,6 +55,8 @@ module.exports = merge(commonConfig, {
 
     splitChunks: {
       chunks: 'all',
+      maxInitialRequests: 20, // for HTTP2
+      maxAsyncRequests: 20, // for HTTP2
       name(module, chunks, cacheGroup) {
         const name = normalize(module, chunks, cacheGroup);
 

packages/app/package.json

@@ -59,7 +59,7 @@
     "gzip-size": "3.0.0",
     "happypack": "^5.0.0",
     "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^4.0.0-beta.1",
     "http-proxy-middleware": "^0.17.3",
     "husky": "^0.14.3",
     "jest": "^21.2.1",
@@ -101,6 +101,7 @@
     "@cerebral/http": "^4.0.0",
     "@cerebral/mobx-state-tree": "^3.0.0",
     "@emmetio/codemirror-plugin": "^0.3.5",
+    "@svgr/core": "^2.4.1",
     "@vue/babel-preset-app": "^3.0.1",
     "apollo-boost": "^0.1.7",
     "apollo-link-batch-http": "^1.2.2",

packages/app/src/sandbox/compile.js

@@ -109,10 +109,10 @@ const BABEL_DEPENDENCIES = [
 // system in the future
 const PREINSTALLED_DEPENDENCIES = [
   'node-lib-browser',
-  'babel-runtime',
   'react-scripts',
   'react-scripts-ts',
   'parcel-bundler',
+  '@babel/runtime',
   'babel-plugin-check-es2015-constants',
   'babel-plugin-external-helpers',
   'babel-plugin-inline-replace-variables',
@@ -265,6 +265,11 @@ function getDependencies(parsedPackage, templateDefinition, configurations) {
     };
   }
 
+  // Always include this, because most sandboxes need this with babel6 and the
+  // packager will only include the package.json for it.
+  returnedDependencies['babel-runtime'] =
+    returnedDependencies['babel-runtime'] || '6.26.0';
+
   preinstalledDependencies.forEach(dep => {
     if (returnedDependencies[dep]) {
       delete returnedDependencies[dep];