chore: use rollup and babel for build instead of microbundle (#477)

package.json

@@ -9,10 +9,11 @@
   "user": "clauderic",
   "homepage": "https://github.com/clauderic/react-sortable-hoc",
   "source": "src/index.js",
-  "main": "dist/index.js",
-  "umd:main": "dist/index.umd.js",
-  "module": "dist/index.es.js",
-  "jsnext:main": "dist/index.es.js",
+  "main": "dist/react-sortable-hoc.js",
+  "umd:main": "dist/react-sortable-hoc.umd.js",
+  "browser": "dist/react-sortable-hoc.umd.js",
+  "module": "dist/react-sortable-hoc.esm.js",
+  "jsnext:main": "dist/react-sortable-hoc.esm.js",
   "types": "types/index.d.ts",
   "license": "MIT",
   "repository": {
@@ -38,7 +39,7 @@
   ],
   "scripts": {
     "start": "start-storybook -p 9001 -c .storybook",
-    "build": "microbundle --name SortableHOC --no-compress --jsx React.createElement",
+    "build": "rollup -c",
     "test": "eslint src/** --ext .js --quiet",
     "release": "standard-version --no-verify"
   },
@@ -48,7 +49,8 @@
     }
   },
   "dependencies": {
-    "invariant": "^2.2.1",
+    "@babel/runtime": "^7.2.0",
+    "invariant": "^2.2.4",
     "prop-types": "^15.5.7"
   },
   "peerDependencies": {
@@ -57,10 +59,15 @@
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-class-properties": "^7.2.3",
+    "@babel/plugin-transform-runtime": "^7.2.0",
+    "@babel/preset-env": "^7.2.3",
+    "@babel/preset-react": "^7.0.0",
     "@storybook/addon-options": "^4.1.4",
     "@storybook/react": "^4.1.4",
     "autoprefixer": "^6.3.6",
     "babel-loader": "^8.0.5",
+    "babel-plugin-transform-async-to-promises": "^0.8.4",
     "classnames": "^2.2.5",
     "css-loader": "^2.1.0",
     "eslint": "^4.10.0",
@@ -69,7 +76,6 @@
     "html-webpack-plugin": "^2.16.1",
     "husky": "^1.3.1",
     "lodash": "^4.12.0",
-    "microbundle": "^0.9.0",
     "node-sass": "^4.11.0",
     "postcss": "^7.0.7",
     "postcss-loader": "^3.0.0",
@@ -83,6 +89,12 @@
     "react-infinite": "^0.13.0",
     "react-tiny-virtual-list": "^2.0.1",
     "react-virtualized": "^9.2.2",
+    "rollup": "^1.0.0",
+    "rollup-plugin-babel": "^4.2.0",
+    "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-filesize": "^6.0.0",
+    "rollup-plugin-node-resolve": "^4.0.0",
+    "rollup-plugin-uglify": "^6.0.0",
     "sass-loader": "^7.1.0",
     "standard-version": "^4.4.0",
     "style-loader": "^0.23.1"

rollup.config.js

@@ -0,0 +1,83 @@
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import babel from 'rollup-plugin-babel';
+import filesize from 'rollup-plugin-filesize';
+import {uglify} from 'rollup-plugin-uglify';
+import pkg from './package.json';
+
+const external = (id) => !id.startsWith('.') && !id.startsWith('/');
+
+const babelConfig = (
+  {useESModules, targets} = {
+    useESModules: true,
+    targets: {browsers: 'last 2 versions'},
+  },
+) => ({
+  comments: false,
+  runtimeHelpers: true,
+  presets: [
+    '@babel/preset-react',
+    [
+      '@babel/preset-env',
+      {
+        targets,
+      },
+    ],
+  ],
+  plugins: [
+    '@babel/plugin-proposal-class-properties',
+    ['@babel/transform-runtime', {useESModules, regenerator: false}],
+    ['babel-plugin-transform-async-to-promises', {inlineHelpers: true}],
+  ],
+  exclude: 'node_modules/**',
+});
+
+const umdConfig = ({minify} = {}) => ({
+  input: pkg.source,
+  external: ['react', 'react-dom', 'prop-types'],
+  output: {
+    name: 'SortableHOC',
+    file: minify ? pkg.browser.replace('.js', '.min.js') : pkg.browser,
+    format: 'umd',
+    globals: {
+      react: 'React',
+      'react-dom': 'ReactDOM',
+      'prop-types': 'PropTypes',
+    },
+  },
+  plugins: [
+    resolve(),
+    babel(
+      babelConfig({
+        targets: {browsers: ['last 2 versions', 'safari >= 7']},
+      }),
+    ),
+    commonjs(),
+    minify && uglify(),
+    filesize(),
+  ],
+});
+
+const rollupConfig = [
+  // Browser-friendly UMD builds
+  umdConfig(),
+  umdConfig({minify: true}),
+
+  // CommonJS
+  {
+    input: pkg.source,
+    external,
+    output: [{file: pkg.main, format: 'cjs'}],
+    plugins: [resolve(), babel(babelConfig({useESModules: false})), filesize()],
+  },
+
+  // ES module
+  {
+    input: pkg.source,
+    external,
+    output: [{file: pkg.module, format: 'esm'}],
+    plugins: [resolve(), babel(babelConfig()), filesize()],
+  },
+];
+
+export default rollupConfig;