made modules treeshakable

.babelrc.js

@@ -0,0 +1,46 @@
+module.exports = api => {
+  let dev = false;
+  let modules = 'commonjs';
+
+  switch (api.env()) {
+    case 'docs':
+    case 'test':
+      dev = true;
+      break;
+    case 'dist-dev':
+      dev = true;
+      modules = false;
+      break;
+    case 'dist-prod':
+    case 'esm':
+      modules = false;
+      break;
+    case 'build':
+    default:
+      break;
+  }
+
+  return {
+    plugins: [
+      [
+        'babel-plugin-styled-components',
+        {
+          ssr: true,
+          displayName: true,
+        },
+      ],
+    ],
+    presets: [
+      '@babel/preset-flow',
+      [
+        'next',
+        {
+          'preset-env': {
+            modules: 'commonjs',
+          },
+        },
+      ],
+      ['@react-bootstrap', { dev, modules, removePropTypes: !dev }],
+    ],
+  };
+};

config/dist.webpack.config.js

@@ -0,0 +1,41 @@
+module.exports = (distRoot, optimize) => ({
+  mode: 'production',
+  optimization: {
+    minimize: !!optimize,
+  },
+  entry: './lib/index.js',
+  output: {
+    path: distRoot,
+    filename: optimize ? 'xt-component.min.js' : 'xt-component.js',
+    library: 'xtComponent',
+    libraryTarget: 'umd',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            cacheDirectory: true,
+            envName: `dist-${optimize ? 'prod' : 'dev'}`,
+          },
+        },
+      },
+    ],
+  },
+  externals: {
+    react: {
+      root: 'React',
+      commonjs2: 'react',
+      commonjs: 'react',
+      amd: 'react',
+    },
+    'react-dom': {
+      root: 'ReactDOM',
+      commonjs2: 'react-dom',
+      commonjs: 'react-dom',
+      amd: 'react-dom',
+    },
+  },
+});

lib/components/molecules/Form/FieldInput/tests/__snapshots__/FieldInput.test.js.snap

@@ -7,11 +7,11 @@ exports[`FieldInput Component should render correctly 1`] = `
   <Label
     className=""
   />
-  <C
+  <FormikConnect(FieldInner)
     render={[Function]}
     type="text"
   />
-  <C
+  <FormikConnect(ErrorMessageImpl)
     component={[Function]}
   />
 </div>

lib/components/molecules/Form/FieldSelect/tests/__snapshots__/FieldSelect.test.js.snap

@@ -5,11 +5,11 @@ exports[`FieldInput Component should render correctly 1`] = `
   <Label
     className=""
   />
-  <C
+  <FormikConnect(FieldInner)
     component="select"
     render={[Function]}
   />
-  <C
+  <FormikConnect(ErrorMessageImpl)
     component={[Function]}
   />
 </div>

lib/components/molecules/Form/FieldTextarea/tests/__snapshots__/FieldTextarea.test.js.snap

@@ -7,10 +7,10 @@ exports[`FieldTextarea Component should render correctly 1`] = `
   <Label
     className=""
   />
-  <C
+  <FormikConnect(FieldInner)
     render={[Function]}
   />
-  <C
+  <FormikConnect(ErrorMessageImpl)
     component={[Function]}
   />
 </div>

package.json

@@ -2,21 +2,22 @@
   "name": "@xt-pagesource/atomic-react-pattern-lib",
   "version": "1.0.0",
   "description": "Atomic React Pattern Library",
-  "main": "dist/bundle.cjs.js",
-  "module": "dist/bundle.esm.js",
-  "browser": "dist/bundle.js",
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "module": "dist/es/index.js",
   "style": "dist/styles/index.js",
   "files": [
+    "CHANGELOG.md",
     "dist",
-    "README.md"
+    "es"
   ],
   "scripts": {
     "test": "cross-env NODE_ENV=test jest --config ./config/jest.config.js",
     "test:updateSnapshot": "yarn run test --updateSnapshot",
     "test:watch": "yarn run test --watch --verbose",
     "audit": "yarn run build -- --report",
     "clean:dist": "rimraf dist",
-    "build": "yarn run clean:dist && cross-env BABEL_ENV=production rollup --config rollup.config.js",
+    "build": "yarn run clean:dist && node scripts/build.js",
     "generate": "plop --plopfile generators/index.js",
     "storybook": "start-storybook -s ./lib/static -p 6006",
     "build-storybook": "build-storybook -c .storybook -o ./out",
@@ -61,6 +62,7 @@
     "@babel/preset-env": "^7.4.3",
     "@babel/preset-flow": "^7.0.0",
     "@emotion/core": "^10.0.10",
+    "@react-bootstrap/babel-preset": "^1.1.3",
     "@storybook/addon-actions": "^5.0.6",
     "@storybook/addon-console": "^1.1.0",
     "@storybook/addon-links": "^5.0.6",
@@ -76,6 +78,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-styled-components": "^1.10.0",
     "babel-preset-next": "^1.2.0",
+    "chalk": "^2.4.2",
     "cross-env": "^5.2.0",
     "css-loader": "^2.1.1",
     "enzyme": "^3.9.0",
@@ -97,9 +100,11 @@
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "^7.12.4",
+    "execa": "^1.0.0",
     "flow-bin": "^0.96.0",
     "flow-coverage-report": "^0.6.1",
     "flow-typed": "^2.5.1",
+    "fs-extra": "^7.0.1",
     "husky": "^1.3.1",
     "jest": "^24.7.1",
     "jest-sonar-reporter": "^2.0.0",
@@ -111,26 +116,14 @@
     "prettier": "1.16.4",
     "react-storybook-addon-chapters": "^3.1.3",
     "rimraf": "^2.6.3",
-    "rollup": "^1.8.0",
-    "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-commonjs": "^9.3.4",
-    "rollup-plugin-filesize": "^6.0.1",
-    "rollup-plugin-flow": "^1.1.1",
-    "rollup-plugin-flow-entry": "^0.3.1",
-    "rollup-plugin-json": "^4.0.0",
-    "rollup-plugin-node-resolve": "^4.0.1",
-    "rollup-plugin-peer-deps-external": "^2.2.0",
-    "rollup-plugin-replace": "^2.1.1",
-    "rollup-plugin-url": "^2.2.0",
-    "rollup-plugin-visualizer": "^1.1.0",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
     "stylelint": "^9.10.1",
     "stylelint-config-prettier": "^5.0.0",
     "stylelint-config-recommended": "^2.1.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.6.0",
-    "webpack": "^4.29.6",
+    "webpack": "^4.31.0",
     "yarn": "^1.15.2"
   },
   "dependencies": {

scripts/build.js

@@ -0,0 +1,76 @@
+const { green, cyan, red } = require('chalk');
+const webpack = require('webpack');
+
+const path = require('path');
+const fse = require('fs-extra');
+const execa = require('execa');
+const getConfig = require('../config/dist.webpack.config');
+
+const targets = process.argv.slice(2);
+
+const srcRoot = path.join(__dirname, '../lib');
+
+const libRoot = path.join(__dirname, '../dist');
+const distRoot = path.join(libRoot, 'dist');
+const esRoot = path.join(libRoot, 'es');
+
+const clean = () => fse.existsSync(libRoot) && fse.removeSync(libRoot);
+
+const step = (name, root, fn) => async () => {
+  console.log(cyan('Building: ') + green(name));
+  await fn();
+  console.log(cyan('Built: ') + green(name));
+};
+
+const shell = cmd => execa.shell(cmd, { stdio: ['pipe', 'pipe', 'inherit'] });
+
+const has = t => !targets.length || targets.includes(t);
+
+/**
+ * Run babel over the src directory and output
+ * compiled common js files to ./lib.
+ */
+const buildLib = step('commonjs modules', libRoot, async () => {
+  await shell(`npx babel ${srcRoot} --out-dir ${libRoot} --env-name "lib"`);
+  await shell('echo "// @flow\n\nexport * from \'../lib\'" > dist/index.js.flow');
+});
+
+/**
+ * Run babel over the src directory and output
+ * compiled es modules (but otherwise es5) to /es
+ */
+const buildEsm = step('es modules', esRoot, async () => {
+  await shell(`npx babel ${srcRoot} --out-dir ${esRoot} --env-name "esm"`);
+  await shell('echo "// @flow\n\nexport * from \'../../lib\'" > dist/es/index.js.flow');
+});
+
+/**
+ * Bundles a minified and unminified version of react-bootstrap including
+ * all it's immediate dependencies (excluding React, ReactDOM, etc)
+ */
+const buildDist = step(
+  'browser distributable',
+  distRoot,
+  () =>
+    new Promise((resolve, reject) => {
+      webpack([getConfig(distRoot, false), getConfig(distRoot, true)], async (err, stats) => {
+        if (err || stats.hasErrors()) {
+          reject(err || stats.toJson().errors);
+          return;
+        }
+
+        resolve();
+      });
+    })
+);
+
+console.log(green(`Building targets: ${targets.length ? targets.join(', ') : 'all'}\n`));
+
+clean();
+
+Promise.all([has('lib') && buildLib(), has('es') && buildEsm(), has('dist') && buildDist()]).catch(
+  err => {
+    if (err) console.error(red(err.stack || err.toString()));
+    process.exit(1);
+  }
+);