incorporate rollup into build system

Author: mohsinulhaq

.size-snapshot.json

@@ -0,0 +1,31 @@
+{
+  "dist/react-popper-tooltip.js": {
+    "bundled": 16587,
+    "minified": 7824,
+    "gzipped": 2402
+  },
+  "dist/react-popper-tooltip.min.js": {
+    "bundled": 7824,
+    "minified": 7824,
+    "gzipped": 2402
+  },
+  "lib/index.cjs.js": {
+    "bundled": 12754,
+    "minified": 7979,
+    "gzipped": 1986
+  },
+  "lib/index.esm.js": {
+    "bundled": 12342,
+    "minified": 7648,
+    "gzipped": 1923,
+    "treeshaked": {
+      "rollup": {
+        "code": 6202,
+        "import_statements": 697
+      },
+      "webpack": {
+        "code": 7775
+      }
+    }
+  }
+}

babel.config.js

@@ -1,35 +1,15 @@
-const presets = [
-  [
-    '@babel/env',
-    {
-      useBuiltIns: 'usage'
-    }
+module.exports = {
+  presets: [
+    [
+      '@babel/env',
+      {
+        modules: false
+      }
+    ],
+    ['@babel/react']
   ],
-  [
-    '@babel/react',
-    {
-      useBuiltIns: true
-    }
+  plugins: [
+    '@babel/plugin-proposal-class-properties',
+    'transform-react-remove-prop-types'
   ]
-];
-
-const plugins = [
-  '@babel/plugin-transform-runtime',
-  '@babel/plugin-proposal-class-properties'
-];
-
-const env = {
-  esm: {
-    presets: [
-      [
-        '@babel/env',
-        {
-          modules: false,
-          useBuiltIns: 'usage'
-        }
-      ]
-    ]
-  }
 };
-
-module.exports = { presets, plugins, env };

package.json

@@ -7,18 +7,18 @@
     "type": "git",
     "url": "https://github.com/mohsinulhaq/react-popper-tooltip"
   },
-  "main": "lib/cjs/index.js",
-  "module": "lib/esm/index.js",
+  "browser": "dist/react-popper-tooltip.min.js",
+  "main": "lib/index.cjs.js",
+  "module": "lib/index.esm.js",
+  "style": "dist/styles.css",
   "typings": "typings/react-popper-tooltip.d.ts",
   "files": [
     "lib",
     "dist",
     "typings/react-popper-tooltip.d.ts"
   ],
   "scripts": {
-    "build": "yarn build:cjs; yarn build:esm; mkdir -p dist && cp src/styles.css dist",
-    "build:cjs": "babel --delete-dir-on-start src -d lib/cjs",
-    "build:esm": "babel --delete-dir-on-start --env-name esm src -d lib/esm",
+    "build": "rimraf dist lib && rollup -c && cp src/styles.css dist",
     "prepublishOnly": "yarn lint && yarn build && yarn docs:deploy",
     "docs": "docz dev",
     "docs:build": "docz build",
@@ -111,6 +111,7 @@
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
     "babel-eslint": "^9.0.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.18",
     "docz": "^0.11.2",
     "docz-plugin-css": "^0.11.0",
     "eslint": "^5.6.0",
@@ -123,6 +124,13 @@
     "prettier": "^1.14.3",
     "prop-types": "^15.6.2",
     "react": "^16.5.2",
-    "react-dom": "^16.5.2"
+    "react-dom": "^16.5.2",
+    "rimraf": "^2.6.2",
+    "rollup": "^0.66.2",
+    "rollup-plugin-babel": "^4.0.3",
+    "rollup-plugin-commonjs": "^9.1.8",
+    "rollup-plugin-node-resolve": "^3.4.0",
+    "rollup-plugin-size-snapshot": "^0.7.0",
+    "rollup-plugin-terser": "^3.0.0"
   }
 }

rollup.config.js

@@ -0,0 +1,79 @@
+import babel from 'rollup-plugin-babel';
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import { terser } from 'rollup-plugin-terser';
+import { sizeSnapshot } from 'rollup-plugin-size-snapshot';
+import pkg from './package.json';
+
+const input = 'src/index.js';
+const name = 'TooltipTrigger';
+const globals = {
+  react: 'React',
+  'react-dom': 'ReactDOM',
+  'prop-types': 'PropTypes',
+  'react-popper': 'ReactPopper'
+};
+const external = id => !id.startsWith('.') && !id.startsWith('/');
+const getBabelOptions = ({ useESModules = true } = {}) => ({
+  exclude: 'node_modules/**',
+  runtimeHelpers: true,
+  plugins: [['@babel/plugin-transform-runtime', { useESModules }]]
+});
+
+export default [
+  {
+    input,
+    output: {
+      name,
+      file: 'dist/react-popper-tooltip.js',
+      format: 'iife',
+      globals
+    },
+    external: Object.keys(globals),
+    plugins: [
+      resolve({
+        browser: true,
+        modulesOnly: true
+      }),
+      commonjs({
+        include: 'node_modules/**'
+      }),
+      babel(getBabelOptions()),
+      sizeSnapshot()
+    ]
+  },
+  {
+    input,
+    output: {
+      name,
+      file: 'dist/react-popper-tooltip.min.js',
+      format: 'iife',
+      globals
+    },
+    external: Object.keys(globals),
+    plugins: [
+      resolve({
+        browser: true,
+        modulesOnly: true
+      }),
+      commonjs({
+        include: 'node_modules/**'
+      }),
+      babel(getBabelOptions()),
+      terser(),
+      sizeSnapshot()
+    ]
+  },
+  {
+    input,
+    output: { file: pkg.main, format: 'cjs' },
+    external,
+    plugins: [babel(getBabelOptions({ useESModules: false })), sizeSnapshot()]
+  },
+  {
+    input,
+    output: { file: pkg.module, format: 'esm' },
+    external,
+    plugins: [babel(getBabelOptions()), sizeSnapshot()]
+  }
+];

src/Tooltip.js

@@ -2,7 +2,7 @@
 import React, { PureComponent } from 'react';
 import { findDOMNode } from 'react-dom';
 import T from 'prop-types';
-import { TooltipContext } from './TooltipTrigger';
+import { TooltipContext } from './utils';
 import { callAll } from './utils';
 
 const MUTATION_OBSERVER_CONFIG = {

src/TooltipTrigger.js

@@ -6,7 +6,7 @@ import { createPortal } from 'react-dom';
 import T from 'prop-types';
 import { Manager, Reference, Popper } from 'react-popper';
 import Tooltip from './Tooltip';
-import { callAll, noop } from './utils';
+import { TooltipContext, callAll, noop } from './utils';
 
 const DEFAULT_MODIFIERS = {
   preventOverflow: {
@@ -15,8 +15,6 @@ const DEFAULT_MODIFIERS = {
   }
 };
 
-export const TooltipContext = React.createContext({});
-
 export default class TooltipTrigger extends PureComponent {
   static propTypes = {
     /**

src/utils.js

@@ -1,3 +1,7 @@
+import React from 'react';
+
+export const TooltipContext = React.createContext({});
+
 export const callAll = (...fns) => (...args) =>
   fns.forEach(fn => fn && fn(...args));