Merge pull request #14 from mohsinulhaq/rollup-build

incorporate rollup into build system

Author: mohsinulhaq

.size-snapshot.json

@@ -0,0 +1,26 @@
+{
+  "dist/index.js": {
+    "bundled": 6280,
+    "minified": 6280,
+    "gzipped": 1974
+  },
+  "lib/cjs/index.js": {
+    "bundled": 11982,
+    "minified": 6536,
+    "gzipped": 1904
+  },
+  "lib/esm/index.js": {
+    "bundled": 11940,
+    "minified": 6518,
+    "gzipped": 1906,
+    "treeshaked": {
+      "rollup": {
+        "code": 6028,
+        "import_statements": 361
+      },
+      "webpack": {
+        "code": 7329
+      }
+    }
+  }
+}

babel.config.js

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

package.json

@@ -7,19 +7,19 @@
     "type": "git",
     "url": "https://github.com/mohsinulhaq/react-popper-tooltip"
   },
-  "main": "lib/cjs/index.js",
+  "browser": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
+  "unpkg": "dist/index.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",
-    "prepublishOnly": "yarn lint && yarn build && yarn docs:deploy",
+    "build": "rimraf dist lib && rollup -c && cp src/styles.css dist",
+    "prepublishOnly": "yarn lint && yarn build",
     "docs": "docz dev",
     "docs:build": "docz build",
     "docs:deploy": "yarn docs:build && cp .docz/dist/index.html .docz/dist/404.html && gh-pages -d .docz/dist",
@@ -101,6 +101,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
+    "prop-types": "^15.6.2",
     "react-popper": "^1.0.2"
   },
   "devDependencies": {
@@ -121,8 +122,15 @@
     "gh-pages": "^2.0.0",
     "pre-commit": "^1.2.2",
     "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"
+  },
+  "sideEffects": false
 }

rollup.config.js

@@ -0,0 +1,67 @@
+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/index.js',
+      format: 'iife',
+      globals,
+      interop: false
+    },
+    external: Object.keys(globals),
+    plugins: [
+      resolve({
+        browser: true,
+        modulesOnly: true
+      }),
+      commonjs({
+        include: 'node_modules/**'
+      }),
+      babel(getBabelOptions()),
+      terser(),
+      sizeSnapshot()
+    ]
+  },
+  {
+    input,
+    output: {
+      file: pkg.browser,
+      format: 'cjs',
+      interop: false
+    },
+    external,
+    plugins: [babel(getBabelOptions({ useESModules: false })), sizeSnapshot()]
+  },
+  {
+    input,
+    output: {
+      file: pkg.module,
+      format: 'esm',
+      interop: false
+    },
+    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));