Build IE11 fixes and other small improvements (codesandbox#832)

* Added build:clean step.

* Webpack: disabled 'output.pathinfo'.

* Webpack: refactored path separator regex.

* Webpack: transpile 'vue-template-es2015-compiler' and 'babel-plugin-transform-vue-jsx' modules.

* Babel worker: add missing Promise polyfill.

* .dockerignore everything except 'www' folder.

Author: lbogdan

.dockerignore

@@ -1,5 +1,2 @@
-node_modules
-.vscode
-deploy.sh
-Dockerfile
-Dockerfile.prod
+*
+!www

package.json

@@ -5,7 +5,8 @@
   "private": true,
   "scripts": {
     "build": "yarn build:deps && yarn build:prod",
-    "build:prod": "lerna run build --scope app --scope homepage --parallel && gulp",
+    "build:prod": "yarn build:clean && lerna run build --scope app --scope homepage --parallel && gulp",
+    "build:clean": "lerna run build:clean --scope app --scope homepage && rimraf www",
     "build:deps": "lerna run build:dev --scope codesandbox-api --scope codesandbox-browserfs",
     "start": "yarn build:deps && lerna run start --scope app --stream",
     "start:fast": "lerna run start --scope app --stream",

packages/app/config/webpack.common.js

@@ -38,6 +38,8 @@ const ESLINT_PLUGIN_VUE_INDEX = `module.exports = {
   }
 }`;
 
+const sepRe = `\\${path.sep}`; // path separator regex
+
 module.exports = {
   entry: SANDBOX_ONLY
     ? {
@@ -72,7 +74,6 @@ module.exports = {
 
   output: {
     path: paths.appBuild,
-    pathinfo: true,
     publicPath,
   },
 
@@ -84,17 +85,23 @@ module.exports = {
         exclude: [
           /eslint\.4\.1\.0\.min\.js$/,
           /typescriptServices\.js$/,
-          new RegExp('babel-runtime\\' + path.sep),
+          new RegExp(`babel-runtime${sepRe}`),
         ],
         loader: 'happypack/loader',
       },
 
       // Transpile node dependencies, node deps are often not transpiled for IE11
       {
         test: [
-          /\/node_modules\/.*ansi-styles/,
-          /\/node_modules\/.*chalk/,
-          /\/node_modules\/.*jest/,
+          new RegExp(`${sepRe}node_modules${sepRe}.*ansi-styles`),
+          new RegExp(`${sepRe}node_modules${sepRe}.*chalk`),
+          new RegExp(`${sepRe}node_modules${sepRe}.*jest`),
+          new RegExp(
+            `${sepRe}node_modules${sepRe}vue-template-es2015-compiler`
+          ),
+          new RegExp(
+            `${sepRe}node_modules${sepRe}babel-plugin-transform-vue-jsx`
+          ),
         ],
         loader: 'babel-loader',
         query: {
@@ -120,9 +127,7 @@ module.exports = {
 
       // `eslint-plugin-vue/lib/index.js` depends on `fs` module we cannot use in browsers, so needs shimming.
       {
-        test: new RegExp(
-          `eslint-plugin-vue\\${path.sep}lib\\${path.sep}index\\.js$`
-        ),
+        test: new RegExp(`eslint-plugin-vue${sepRe}lib${sepRe}index\\.js$`),
         loader: 'string-replace-loader',
         options: {
           search: '[\\s\\S]+', // whole file.
@@ -133,9 +138,7 @@ module.exports = {
       // `eslint` has some dynamic `require(...)`.
       // Delete those.
       {
-        test: new RegExp(
-          `eslint\\${path.sep}lib\\${path.sep}(?:linter|rules)\\.js$`
-        ),
+        test: new RegExp(`eslint${sepRe}lib${sepRe}(?:linter|rules)\\.js$`),
         loader: 'string-replace-loader',
         options: {
           search: '(?:\\|\\||(\\())\\s*require\\(.+?\\)',
@@ -156,9 +159,7 @@ module.exports = {
       },
       // Patch for `babel-eslint`
       {
-        test: new RegExp(
-          `babel-eslint\\${path.sep}lib\\${path.sep}index\\.js$`
-        ),
+        test: new RegExp(`babel-eslint${sepRe}lib${sepRe}index\\.js$`),
         loader: 'string-replace-loader',
         options: {
           search: '[\\s\\S]+', // whole file.
@@ -169,7 +170,7 @@ module.exports = {
       },
       {
         test: new RegExp(
-          `babel-eslint\\${path.sep}lib\\${path.sep}patch-eslint-scope\\.js$`
+          `babel-eslint${sepRe}lib${sepRe}patch-eslint-scope\\.js$`
         ),
         loader: 'string-replace-loader',
         options: {
@@ -388,7 +389,7 @@ module.exports = {
     // us from using eslint in the browser, therefore we need to stop it!
     !SANDBOX_ONLY &&
       new webpack.NormalModuleReplacementPlugin(
-        new RegExp(['eslint', 'lib', 'load-rules'].join(`\\${path.sep}`)),
+        new RegExp(['eslint', 'lib', 'load-rules'].join(sepRe)),
         path.join(paths.config, 'stubs/load-rules.compiled.js')
       ),
 

packages/app/package.json

@@ -10,6 +10,7 @@
     "start:test": "cross-env LOCAL_SERVER=1 NODE_ENV=test SANDBOX_ONLY=true node scripts/start.js",
     "build": "cross-env NODE_ENV=production node scripts/build.js",
     "build:sandbox": "cross-env NODE_ENV=production SANDBOX_ONLY=true node scripts/build.js",
+    "build:clean": "rimraf www",
     "test": "jest --env=jsdom",
     "test:watch": "jest --watch --env=jsdom",
     "test:integrations": "jest --config integration-tests/jest.config.json --maxWorkers=2",

packages/app/src/sandbox/eval/transpilers/babel/worker/index.js

@@ -1,6 +1,7 @@
 require('core-js/fn/string/starts-with');
 require('core-js/fn/string/ends-with');
 require('core-js/fn/array/find');
+require('core-js/fn/promise');
 
 self.importScripts(
   `${process.env.CODESANDBOX_HOST}/static/browserfs/browserfs.min.js`

packages/homepage/package.json

@@ -38,6 +38,7 @@
   "main": "n/a",
   "scripts": {
     "build": "gatsby build && yarn remove-styles",
+    "build:clean": "rimraf public",
     "remove-styles": "rimraf public/styles.css",
     "start": "gatsby develop",
     "lint": "echo TODO && exit 0",