feat: add experimental browser build and karma setup

new babel config, new webpack config, and karma config
all behind a experimental flag

BREAKING CHANGE: webpack bumped to version 4+

Author: hugomrdias

cli.js

@@ -3,6 +3,7 @@
 'use strict'
 
 const updateNotifier = require('update-notifier')
+const chalk = require('chalk')
 const pkg = require('./package.json')
 
 updateNotifier({
@@ -15,4 +16,20 @@ require('yargs') // eslint-disable-line
   .commandDir('cmds')
   .demandCommand()
   .help()
+  .fail((msg, err, yargs) => {
+    // errors from execa output the child_process stderr
+    if (err && err.stderr) {
+      console.error('Error running command: ', err.cmd, '\n')
+      console.error(err.stderr)
+    } else {
+      if (msg) {
+        console.error(chalk.red(msg))
+      }
+      if (err) {
+        console.error(chalk.red(err.message))
+        console.error(chalk.gray(err.stack))
+      }
+    }
+    process.exit(1)
+  })
   .argv

cmds/build.js

@@ -13,11 +13,22 @@ module.exports = {
       alias: 'n',
       describe: 'Build for node usage',
       default: false
+    },
+    'enable-experimental-browser-builds': {
+      alias: 'eebb',
+      describe: 'Use experimental webpack config',
+      default: false
+    },
+    env: {
+      describe: 'Sets NODE_ENV in the childprocess (NODE_ENV=production aegir build also works)',
+      default: 'production'
     }
   },
   handler (argv) {
     const build = require('../src/build')
-    const onError = require('../src/error-handler')
-    build.run(argv).catch(onError)
+    if (argv.eebb) {
+      return require('./../src/build/experimental-browser')(argv)
+    }
+    return build.run(argv)
   }
 }

cmds/karma.js

@@ -0,0 +1,49 @@
+'use strict'
+const resolveBin = require('resolve-bin')
+const execa = require('execa')
+const path = require('path')
+const userConfig = require('./../src/config/user')()
+const {hook} = require('./../src/utils')
+const here = p => path.join(__dirname, p)
+
+module.exports = {
+  command: 'karma',
+  desc: 'Run karma browser tests',
+  builder: {
+    watch: {
+      alias: 'w',
+      describe: 'Watch for file changes',
+      default: false
+    },
+    env: {
+      describe: 'Sets NODE_ENV in the childprocess (NODE_ENV=dev aegir karma also works)',
+      default: 'development'
+    },
+    webworker: {
+      describe: 'Webworker enviroment for Karma',
+      default: false
+    }
+
+  },
+  handler (argv) {
+    const bin = resolveBin.sync('karma')
+    const input = argv._.slice(1)
+    const watch = argv.watch ? ['--auto-watch', '--no-single-run'] : []
+    return hook('browser', 'pre')(userConfig)
+      .then(() => {
+        return execa(bin, [
+          'start',
+          ...watch,
+          here('./../src/config/karma2.conf.js'),
+          ...input
+        ], {
+          env: {
+            NODE_ENV: argv.env,
+            AEGIR_WEBWORKER: argv.webworker
+          },
+          stdio: 'inherit'
+        })
+      })
+      .then(process => hook('browser', 'post')(userConfig))
+  }
+}

cmds/test.js

@@ -17,13 +17,10 @@ module.exports = {
       default: false
     },
     watch: {
+      alias: 'w',
       describe: 'Watch files for changes and rerun tests',
       default: false
     },
-    updateSnapshot: {
-      alias: 'u',
-      describe: 'Use this flag to re-record every snapshot that fails during this test run. (node only)'
-    },
     files: {
       alias: 'f',
       describe: 'Custom globs for files to test',
@@ -52,11 +49,19 @@ module.exports = {
       alias: 'b',
       describe: 'Mocha should bail once a test fails',
       default: false
+    },
+    env: {
+      describe: 'Sets NODE_ENV in the childprocess (NODE_ENV=dev aegir karma also works)',
+      default: 'development'
+    },
+    'enable-experimental-karma': {
+      alias: 'eek',
+      describe: 'Use the experimental karma config',
+      default: false
     }
   },
   handler (argv) {
     const test = require('../src/test')
-    const onError = require('../src/error-handler')
-    test.run(argv).catch(onError)
+    return test.run(argv)
   }
 }

package.json

@@ -29,39 +29,51 @@
   ],
   "license": "MIT",
   "dependencies": {
+    "@babel/cli": "7.0.0-beta.47",
+    "@babel/core": "7.0.0-beta.47",
+    "@babel/plugin-transform-regenerator": "7.0.0-beta.47",
+    "@babel/plugin-transform-runtime": "7.0.0-beta.47",
+    "@babel/preset-env": "7.0.0-beta.47",
+    "@babel/preset-flow": "7.0.0-beta.47",
+    "@babel/runtime": "7.0.0-beta.47",
+    "arrify": "^1.0.1",
     "async": "^2.6.0",
-    "browserify-zlib": "~0.2.0",
+    "babel-loader": "8.0.0-beta.2",
+    "browserify-zlib": "^0.2.0",
     "chalk": "^2.3.0",
     "clean-documentation-theme": "~0.5.2",
     "codecov": "^3.0.2",
     "conventional-changelog": "^1.1.7",
     "conventional-github-releaser": "^2.0.0",
     "coveralls": "^3.0.0",
+    "del": "^3.0.0",
     "detect-node": "^2.0.3",
     "documentation": "^5.3.3",
     "es6-promisify": "^5.0.0",
     "eslint": "^4.13.0",
     "eslint-config-aegir": "^1.0.1",
-    "execa": "~0.8.0",
+    "execa": "^0.10.0",
     "filesize": "^3.5.11",
     "findup-sync": "^2.0.0",
     "fs-extra": "^4.0.3",
     "gh-pages": "^1.1.0",
     "glob": "^7.1.2",
     "joi": "^13.0.2",
-    "json-loader": "~0.5.7",
-    "karma": "^1.7.1",
+    "json-loader": "^0.5.7",
+    "karma": "^2.0.2",
     "karma-chrome-launcher": "^2.2.0",
+    "karma-cli": "^1.0.1",
+    "karma-edge-launcher": "^0.4.2",
     "karma-firefox-launcher": "^1.1.0",
     "karma-junit-reporter": "^1.2.0",
     "karma-mocha": "^1.3.0",
     "karma-mocha-own-reporter": "git+https://github.com/dryajov/karma-mocha-own-reporter#d562a92a12d5c76469a05d67cee19bcb8db22b23",
     "karma-mocha-webworker": "^1.3.0",
-    "karma-sourcemap-loader": "~0.3.7",
-    "karma-webpack": "^2.0.6",
-    "listr": "~0.13.0",
-    "listr-update-renderer": "~0.4.0",
-    "listr-verbose-renderer": "~0.4.1",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "v4.0.0-beta.0",
+    "listr": "^0.13.0",
+    "listr-update-renderer": "^0.4.0",
+    "listr-verbose-renderer": "^0.4.1",
     "lodash": "^4.17.4",
     "mocha": "^4.0.1",
     "mocha-jenkins-reporter": "~0.3.10",
@@ -71,6 +83,8 @@
     "pify": "^3.0.0",
     "pre-push": "~0.1.1",
     "pretty-hrtime": "^1.0.3",
+    "read-pkg-up": "^3.0.0",
+    "resolve-bin": "^0.4.0",
     "rimraf": "^2.6.2",
     "safe-buffer": "^5.1.1",
     "semver": "^5.4.1",
@@ -80,9 +94,11 @@
     "transform-loader": "~0.2.4",
     "uglify-es": "^3.2.2",
     "update-notifier": "^2.3.0",
-    "webpack": "^3.10.0",
+    "webpack": "^4.6.0",
+    "webpack-cli": "^2.1.2",
     "webpack-merge": "^4.1.1",
-    "yargs": "^10.0.3"
+    "yargs": "^10.0.3",
+    "yargs-parser": "^10.0.0"
   },
   "repository": {
     "type": "git",
@@ -118,5 +134,18 @@
     "cross-env": "^5.1.1",
     "mock-require": "^2.0.2",
     "sinon": "^4.1.3"
+  },
+  "browserslist": {
+    "development": [
+      "last 2 chrome versions",
+      "last 2 firefox versions",
+      "last 2 edge versions"
+    ],
+    "production": [
+      ">1%",
+      "last 2 versions",
+      "Firefox ESR",
+      "not ie < 11"
+    ]
   }
 }

src/__mocks__/utils.js

@@ -0,0 +1,22 @@
+'use strict'
+const resolveBin = require('resolve-bin')
+const execa = require('execa')
+const path = require('path')
+const here = p => path.join(__dirname, p)
+const bin = resolveBin.sync('webpack-cli')
+
+module.exports = (argv) => {
+  const input = argv._.slice(1)
+  const useBuiltinConfig = !input.includes('--config')
+  const config = useBuiltinConfig
+    ? ['--config', here('../config/webpack.config.js')]
+    : []
+  return execa(bin, [
+    ...config,
+    '--env.' + argv.env,
+    ...input
+  ], {
+    env: {NODE_ENV: argv.env},
+    stdio: 'inherit'
+  })
+}

src/build/experimental-browser.js

@@ -0,0 +1,75 @@
+'use strict'
+const {hasPkgProp, browserslist} = require('./../utils')
+const useBuiltinBrowserslist = !hasPkgProp('browserslist')
+
+const validateBoolOption = (name, value, defaultValue) => {
+  if (typeof value === 'undefined') {
+    value = defaultValue
+  }
+
+  if (typeof value !== 'boolean') {
+    throw new Error(`Preset aegir: '${name}' option must be a boolean.`)
+  }
+
+  return value
+}
+module.exports = function (api, opts = {}) {
+  const env = process.env.BABEL_ENV || process.env.NODE_ENV
+  const isEnvDevelopment = env === 'development'
+  const isEnvProduction = env === 'production'
+  const isEnvTest = env === 'test'
+  const isFlowEnabled = validateBoolOption('flow', opts.flow, true)
+  const targets = useBuiltinBrowserslist ? {
+    browsers: browserslist[env]
+  } : {}
+
+  if (!isEnvDevelopment && !isEnvProduction && !isEnvTest) {
+    throw new Error(
+      'Using `babel-preset-aegir` requires that you specify `NODE_ENV` or ' +
+          '`BABEL_ENV` environment variables. Valid values are "development", ' +
+          '"test", and "production". Instead, received: ' +
+          JSON.stringify(env) +
+          '.'
+    )
+  }
+
+  return {
+    presets: [
+      isEnvTest && [
+        // ES features necessary for user's Node version
+        require('@babel/preset-env').default,
+        {
+          targets: {
+            node: '6.12'
+          }
+        }
+      ],
+      (isEnvProduction || isEnvDevelopment) && [
+        // Latest stable ECMAScript features
+        require('@babel/preset-env').default,
+        {
+          // `entry` transforms `@babel/polyfill` into individual requires for
+          // the targeted browsers. This is safer than `usage` which performs
+          // static code analysis to determine what's required.
+          // This is probably a fine default to help trim down bundles when
+          // end-users inevitably import '@babel/polyfill'.
+          useBuiltIns: 'entry',
+          // Do not transform modules to CJS
+          modules: 'commonjs',
+          targets
+        }
+      ],
+      isFlowEnabled && [require('@babel/preset-flow').default]
+    ].filter(Boolean),
+    plugins: [
+      [
+        require('@babel/plugin-transform-runtime').default,
+        {
+          helpers: false,
+          polyfill: false,
+          regenerator: true
+        }
+      ]
+    ]
+  }
+}