Bundle UMD with rollup (#159)

* build: bundle UMD with rollup

UMD is important as an easy way to use library via `<script>` tag.

In this diff I added rollup with size snapshot plugin to track final
size of the library with all dependencies (except react ones).

I replaced mixed imports with `import * as React from 'react'` since
they are being semantically incorrect are failed with rollup.

Author: TrySound

.size-snapshot.json

@@ -0,0 +1,7 @@
+{
+  "dist/index.umd.js": {
+    "bundled": 51328,
+    "minified": 18567,
+    "gzipped": 5953
+  }
+}

package.json

@@ -14,8 +14,9 @@
     "/typings/react-popper.d.ts"
   ],
   "scripts": {
-    "build": "npm run build:clean && npm run build:es && npm run build:cjs && npm run build:flow",
+    "build": "npm run build:clean && npm run build:es && npm run build:cjs && npm run build:umd && npm run build:flow",
     "build:clean": "rimraf dist/ && rimraf lib/",
+    "build:umd": "rollup -c",
     "build:es": "cross-env BABEL_ENV=es babel src --ignore '*.test.js,__mocks__' --out-dir lib/es",
     "build:cjs": "cross-env BABEL_ENV=cjs babel src --ignore '*.test.js,__mocks__' --out-dir lib/cjs",
     "build:flow": "flow-copy-source --ignore '{__mocks__/*,*.test}.js' src lib/cjs",
@@ -103,6 +104,12 @@
     "react-spring": "^4.0.1",
     "recompose": "^0.26.0",
     "rimraf": "^2.6.2",
+    "rollup": "^0.58.2",
+    "rollup-plugin-babel": "^3.0.4",
+    "rollup-plugin-commonjs": "^9.1.3",
+    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup-plugin-size-snapshot": "^0.4.0",
+    "rollup-plugin-uglify": "^3.0.0",
     "typescript": "^2.8.1"
   }
 }

rollup.config.js

@@ -0,0 +1,56 @@
+import nodeResolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import babel from 'rollup-plugin-babel';
+import uglify from 'rollup-plugin-uglify';
+import { sizeSnapshot } from 'rollup-plugin-size-snapshot';
+
+const input = './src/index.js';
+
+const umdGlobals = {
+  react: 'React',
+  'react-dom': 'ReactDOM',
+  'popper.js': 'Popper',
+};
+
+const getBabelOptions = () => ({
+  babelrc: false,
+  exclude: '**/node_modules/**',
+  presets: [['env', { modules: false }], 'stage-1', 'react'],
+  plugins: ['external-helpers'],
+});
+
+export default [
+  {
+    input,
+    output: {
+      file: 'dist/index.umd.js',
+      format: 'umd',
+      name: 'ReactPopper',
+      globals: umdGlobals,
+    },
+    external: Object.keys(umdGlobals),
+    plugins: [
+      nodeResolve(),
+      commonjs({ include: '**/node_modules/**' }),
+      babel(getBabelOptions()),
+      sizeSnapshot(),
+    ],
+  },
+
+  {
+    input,
+    output: {
+      file: 'dist/index.umd.min.js',
+      format: 'umd',
+      name: 'ReactPopper',
+      globals: umdGlobals,
+    },
+    external: Object.keys(umdGlobals),
+    plugins: [
+      nodeResolve(),
+      commonjs({ include: '**/node_modules/**' }),
+      babel(getBabelOptions()),
+      uglify(),
+    ],
+  },
+];

src/Manager.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { Component, type Node } from "react";
+import * as React from "react";
 import createContext, { type Context } from "create-react-context";
 
 export const ManagerContext: Context<{
@@ -8,7 +8,7 @@ export const ManagerContext: Context<{
 }> = createContext({ getReferenceRef: undefined, referenceNode: undefined });
 
 export type ManagerProps = {
-  children: Node,
+  children: React.Node,
 };
 type ManagerState = {
   context: {
@@ -17,7 +17,7 @@ type ManagerState = {
   },
 };
 
-export default class Manager extends Component<ManagerProps, ManagerState> {
+export default class Manager extends React.Component<ManagerProps, ManagerState> {
   constructor() {
     super();
     this.state = {

src/Popper.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { Component, type Node } from 'react';
+import * as React from 'react';
 import PopperJS, {
   type Placement,
   type Instance as PopperJS$Instance,
@@ -28,7 +28,7 @@ export type PopperChildrenProps = {|
   scheduleUpdate: () => void,
   arrowProps: PopperArrowProps,
 |};
-export type PopperChildren = PopperChildrenProps => Node;
+export type PopperChildren = PopperChildrenProps => React.Node;
 
 export type PopperProps = {
   modifiers?: Modifiers,
@@ -56,7 +56,7 @@ const initialStyle = {
 
 const initialArrowStyle = {};
 
-export class InnerPopper extends Component<PopperProps, PopperState> {
+export class InnerPopper extends React.Component<PopperProps, PopperState> {
   static defaultProps = {
     placement: 'bottom',
     eventsEnabled: true,

src/Reference.js

@@ -1,12 +1,12 @@
 // @flow
-import React, { type Node } from 'react';
+import * as React from 'react';
 import warning from 'warning';
 import { ManagerContext } from './Manager';
 import { unwrapArray } from './utils';
 
 export type ReferenceChildrenProps = { ref: (?HTMLElement) => void };
 export type ReferenceProps = {
-  children: ReferenceChildrenProps => Node,
+  children: ReferenceChildrenProps => React.Node,
 };
 
 export default function Reference({ children }: ReferenceProps) {