Merge pull request #1045 from IBM/tree-shake-build

[treeshaking]: fix treeshaking and add esm and umd versions

.eslintignore

@@ -2,5 +2,8 @@ node_modules/
 coverage/
 config/
 lib/
+es/
+umd/
+tmp/
 storybook-static/
 results/

.gitignore

@@ -3,6 +3,12 @@ coverage
 
 # Compiled binary addons (http://nodejs.org/api/addons.html)
 lib
+es
+scss
+umd
+css
+tmp
+storybook-static
 
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git

.storybook/main.js

@@ -38,6 +38,7 @@ module.exports = {
     config.module.rules.push({
       test: /\.s?css$/,
       exclude: [/coverage/],
+      sideEffects: true,
       use: [
         // Creates `style` nodes from JS strings
         { loader: 'style-loader' },

README.MD

@@ -86,11 +86,11 @@ carbon-addons-iot-react/
 
 Compiled CSS files are provided for ease of use getting started.
 
-A sass entrypoint is available at `lib/scss/styles.scss` for use in your project.
+A sass entrypoint is available at `scss/styles.scss` for use in your project.
 
 Using sass files (instead of the compiled .css) infers usage of a SCSS pre-processor. All Sass files use the `*.scss` file extension. For transpiling Sass code, use node-sass based Sass compilers, for example, WebPack sass-loader or gulp-sass. Make sure your build process uses autoprefixer to ensure vendor prefixes are automatically added to your output CSS.
 
-Feedback and improvement requests regarding this configuration would be appreciated, [please contribute to this issue](https://github.com/IBM/carbon-addons-iot-react/issues/426).
+Feedback and improvement requests regarding this configuration would be appreciated, [please open an issue](https://github.com/IBM/carbon-addons-iot-react/issues/new?assignees=&labels=%3Ahammer%3A++Enhancement&template=feature-request-or-enhancement.md&title=%5BComponentName%5D+request_title).
 
 ## Dependencies
 

babel.config.js

@@ -1,3 +1,5 @@
+const { BABEL_ENV } = process.env;
+
 module.exports = function generateConfig(api) {
   api.cache(true);
   return {
@@ -9,6 +11,7 @@ module.exports = function generateConfig(api) {
             browsers: ['last 2 version', 'ie >= 11'],
           },
           useBuiltIns: 'usage',
+          modules: BABEL_ENV === 'production' ? false : 'auto',
           corejs: 2,
         },
       ],
@@ -17,6 +20,9 @@ module.exports = function generateConfig(api) {
     ],
     ignore: ['__mocks__'],
     plugins: [
+      ...(BABEL_ENV === 'production'
+        ? ['transform-react-remove-prop-types', { mode: 'unsafe-wrap' }]
+        : []),
       'babel-plugin-lodash',
       'babel-plugin-styled-components',
       'babel-plugin-react-docgen',

jest.config.js

@@ -106,4 +106,9 @@ module.exports = {
   watchPathIgnorePatterns: ['/coverage/', '/results/', '/.git/'],
   moduleFileExtensions: ['js', 'json', 'jsx'],
   snapshotSerializers: ['enzyme-to-json/serializer'],
+  moduleNameMapper: {
+    // rewrite carbon-components(-react) es imports to lib/cjs imports because jest doesn't support es modules
+    '@carbon/icons-react/es/(.*)': '@carbon/icons-react/lib/$1',
+    'carbon-components-react/es/(.*)': 'carbon-components-react/lib/$1',
+  },
 };

package.json

@@ -1,21 +1,28 @@
 {
   "name": "carbon-addons-iot-react",
-  "main": "lib/index.js",
+  "main": "lib/src/index.js",
+  "module": "es/src/index.js",
+  "unpkg": "umd/carbon-addons-iot-react.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/IBM/carbon-addons-iot-react.git"
   },
   "license": "Apache-2",
   "files": [
-    "lib"
+    "lib/**/*",
+    "es/**/*",
+    "umd/**/*",
+    "scss/**/*",
+    "css/**/*"
   ],
   "bugs": {
     "url": "https://github.com/IBM/carbon-addons-iot-react/issues"
   },
   "homepage": "https://carbon-addons-iot-react.com",
   "scripts": {
-    "build": "yarn build:pre && rollup -c",
-    "build:pre": "rimraf lib storybook-static",
+    "build": "cross-env BABEL_ENV='production' NODE_ENV='production'  yarn build:pre && rollup -c && yarn build:post",
+    "build:pre": "rimraf lib es umd css scss tmp storybook-static",
+    "build:post": "rimraf tmp",
     "build:storybook": "NODE_OPTIONS='--max-old-space-size=16384' build-storybook -s public/production",
     "format": "prettier --write \"**/*.{scss,css,js,jsx,md,ts}\"",
     "format:diff": "prettier --list-different \"**/*.{scss,css,js,jsx,md,ts}\"",
@@ -91,6 +98,7 @@
     "react-sizeme": "^2.6.3",
     "react-transition-group": "^2.6.0",
     "react-visibility-sensor": "^5.0.2",
+    "rollup-plugin-auto-external": "^2.0.0",
     "styled-components": "^4.1.3",
     "use-deep-compare-effect": "^1.2.0",
     "use-resize-observer": "^5.0.0",
@@ -148,6 +156,7 @@
     "babel-plugin-react-docgen": "^2.0.0",
     "babel-plugin-require-context-hook": "^1.0.0",
     "babel-plugin-styled-components": "^1.10.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "coveralls": "^3.0.2",
     "cross-env": "^6.0.3",
     "css-loader": "^2.1.0",
@@ -188,7 +197,7 @@
     "react-test-renderer": "^16.8.6",
     "rimraf": "^3.0.0",
     "rollup": "^1.1.0",
-    "rollup-plugin-babel": "^4.3.0",
+    "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^9.2.0",
     "rollup-plugin-copy": "^3.2.0",
     "rollup-plugin-filesize": "^6.0.0",
@@ -198,7 +207,7 @@
     "rollup-plugin-node-resolve": "^4.0.0",
     "rollup-plugin-postcss": "^2.0.3",
     "rollup-plugin-replace": "^2.1.0",
-    "rollup-plugin-uglify": "^6.0.1",
+    "rollup-plugin-uglify": "^6.0.4",
     "sass-loader": "^7.1.0",
     "semantic-release": "^16.0.0-beta.39",
     "storybook-addon-rtl": "^0.2.2",
@@ -210,5 +219,6 @@
     "webpack": "^4.28.4",
     "whatwg-fetch": "^3.0.0"
   },
+  "sideEffects": false,
   "version": "0.0.0-development"
 }