feat: upgrade to babel 7 (#39)

BREAKING CHANGE: the way the preset is configured has changed

Closes #26

.travis.yml

@@ -2,6 +2,8 @@ language: node_js
 node_js:
   - "node"
   - "lts/*"
+  - '8'
+  - '6'
 # Report coverage
 after_success:
   - "npm i codecov"

end-project.js

@@ -0,0 +1,64 @@
+'use strict';
+
+const addDynamicImportSupport = require('./lib/dynamic-import');
+const addReactSupport = require('./lib/react');
+const addLodashSupport = require('./lib/lodash');
+
+module.exports = (context, options) => {
+    options = Object.assign({
+        react: false,
+        lodash: true,
+        dynamicImport: true,
+        modules: process.env.BABEL_ENV === 'es' ? false : 'commonjs', // Usually set to `commonjs` or `false`
+        targets: ['browsers', 'node'], // Can be an array with `browsers` and/or `node` or an object
+        env: process.env.NODE_ENV || 'production',
+    }, options);
+
+    const config = {
+        presets: [],
+        plugins: [],
+    };
+
+    // The `preset-env` will activate the necessary features based on our targets
+    // It's no longer necessary to add `es2015`, `es2016`, etc manually
+    config.presets.push([require.resolve('@babel/preset-env'), {
+        // Replaces `import 'babel-polyfill';` with only the polyfills that are
+        // actually required based on the targets
+        useBuiltIns: 'entry',
+        // Produce less and more readable code (although not as faithful to the semantics)
+        loose: true,
+        // Set modules options
+        modules: options.modules,
+        // Set the browser support to be the same used by Google (https://www.npmjs.com/package/browserslist-config-google)
+        // Set Nodejs target to be the latest LTS
+        targets: Array.isArray(options.targets) ? Object.assign({},
+            options.targets.indexOf('node') !== -1 ? { node: '8.9' } : {},
+            options.targets.indexOf('browsers') !== -1 ? { browsers: ['extends browserslist-config-google'] } : {}
+        ) : options.targets,
+        // Enables support for builtin/feature proposals that have native support by the defined target environments
+        shippedProposals: true,
+    }]);
+
+    // The plugins bellow activate stage 3 features that babel hasn't added to the stage 3 preset yet
+    config.plugins.push(
+        // Allows class { handleClick = () => { } static propTypes = { foo: PropTypes.string } }
+        [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }]
+    );
+
+    // Adds dynamic import support
+    if (options.dynamicImport) {
+        addDynamicImportSupport(config, options.modules);
+    }
+
+    // Add react support
+    if (options.react) {
+        addReactSupport(config, options.env);
+    }
+
+    // Cherry-pick lodash modules for smaller bundles
+    if (options.lodash) {
+        addLodashSupport(config, options.lodash);
+    }
+
+    return config;
+};

lib.js

@@ -0,0 +1,62 @@
+'use strict';
+
+const moduleTransformations = require('@babel/preset-env/lib/module-transformations').default;
+const addDynamicImportSupport = require('./lib/dynamic-import');
+const addReactSupport = require('./lib/react');
+const addLodashSupport = require('./lib/lodash');
+
+module.exports = (context, options) => {
+    options = Object.assign({
+        react: false,
+        lodash: true,
+        dynamicImport: true,
+        modules: process.env.BABEL_ENV === 'es' ? false : 'commonjs', // Usually set to `commonjs` or `false`
+        namedDefaultExport: null,
+    }, options);
+    if (options.modules !== 'commonjs' && options.modules !== 'cjs' && options.namedDefaultExport) {
+        throw new Error('The `namedDefaultExport` option can only be enabled when `modules` is commonjs');
+    }
+
+    // Set `namedDefaultExport` default value based on `modules`
+    if (options.namedDefaultExport == null) {
+        options.namedDefaultExport = options.modules === 'commonjs';
+    }
+
+    const config = {
+        presets: [],
+        plugins: [],
+    };
+
+    // Activate modules transformation
+    if (moduleTransformations[options.modules]) {
+        config.plugins.push(`@babel/plugin-${moduleTransformations[options.modules]}`);
+    }
+
+    // The plugins bellow activate stage 3 features that babel hasn't added to the stage 3 preset yet
+    config.plugins.push(
+        // Allows class { handleClick = () => { } static propTypes = { foo: PropTypes.string } }
+        require.resolve('@babel/plugin-proposal-class-properties')
+    );
+
+    // Adds dynamic import support
+    if (options.dynamicImport) {
+        addDynamicImportSupport(config, options.modules);
+    }
+
+    // Add react support without doing any development or production transformations
+    if (options.react) {
+        addReactSupport(config, null);
+    }
+
+    // Cherry-pick lodash modules for smaller bundles
+    if (options.lodash) {
+        addLodashSupport(config, options.lodash);
+    }
+
+    // Add `module.exports = default;`, see https://github.com/59naga/babel-plugin-add-module-exports
+    if (options.namedDefaultExport) {
+        config.plugins.push('babel-plugin-add-module-exports');
+    }
+
+    return config;
+};

lib/dynamic-import.js

@@ -0,0 +1,11 @@
+'use strict';
+
+const addDynamicImportSupport = (config, modules) => {
+    if (modules === false) {
+        config.plugins.push(require.resolve('@babel/plugin-syntax-dynamic-import'));
+    } else if (modules === 'cjs' || modules === 'commonjs') {
+        config.plugins.push(require.resolve('babel-plugin-dynamic-import-node'));
+    }
+};
+
+module.exports = addDynamicImportSupport;

lib/lodash.js

@@ -0,0 +1,22 @@
+'use strict';
+
+const addLodashSupport = (config, options) => {
+    // Re-include default ids plus lodash/fp
+    const baseLodashOptionsIds = [
+        'lodash',
+        'lodash-es',
+        'lodash-compat',
+        'lodash/fp',
+    ];
+
+    config.plugins.push([
+        require.resolve('babel-plugin-lodash'),
+        Object.assign(
+            {},
+            options,
+            { id: baseLodashOptionsIds.concat(options.id || []) }
+        ),
+    ]);
+};
+
+module.exports = addLodashSupport;

lib/react.js

@@ -0,0 +1,32 @@
+'use strict';
+
+const addReactSupport = (config, env) => {
+    // Add base support
+    config.plugins.unshift(
+        require.resolve('@babel/plugin-syntax-jsx'),
+        [require.resolve('@babel/plugin-transform-react-jsx'), { useBuiltIns: true }],
+        require.resolve('@babel/plugin-transform-react-display-name')
+    );
+
+    // Enable optimizations on production
+    if (env === 'production') {
+        config.plugins.push(
+            [require.resolve('babel-plugin-transform-react-remove-prop-types'), { removeImport: true }]
+        );
+    // The following two plugins are currently necessary to make React warnings include more valuable information
+    // They are included here because they are currently not enabled in babel-preset-react
+    // See the below threads for more info:
+    // https://github.com/babel/babel/issues/4702
+    // https://github.com/babel/babel/pull/3540#issuecomment-228673661
+    // https://github.com/facebookincubator/create-react-app/issues/989
+    } else if (env === 'development') {
+        config.plugins.push(
+            // Adds component stack to warning messages
+            require.resolve('@babel/plugin-transform-react-jsx-source'),
+            // Adds __self attribute to JSX which React will use for some warnings
+            require.resolve('@babel/plugin-transform-react-jsx-self')
+        );
+    }
+};
+
+module.exports = addReactSupport;