build: switch to rollup (#74)

This should create properly optimized builds for umd, cjs and es. Previously the files were just run through Babel once to prepare them for shipping

Author: thebuilder

.gitignore

@@ -4,7 +4,7 @@ node_modules
 reports
 example
 lib/
-es/
+dist/
 coverage/
 nuget
 npm-debug.log*

.travis.yml

@@ -5,7 +5,7 @@ cache: yarn
 script:
   - yarn lint
   - yarn test --coverage
-  - yarn flow
+  - yarn flow check
   - yarn build:storybook
 after_success:
   - yarn coveralls

package.json

@@ -2,12 +2,17 @@
   "name": "react-intersection-observer",
   "version": "4.0.2",
   "description": "Monitor if a component is inside the viewport, using IntersectionObserver API",
-  "main": "lib/index.js",
+  "main": "dist/react-intersection-observer.cjs.js",
+  "jsnext:main": "dist/react-intersection-observer.esm.js",
+  "module": "dist/react-intersection-observer.esm.js",
   "author": "Daniel Schmidt",
   "typings": "index.d.ts",
+  "files": [
+    "dist"
+  ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/thebuilder/react-intersection-observer"
+    "url": "https://github.com/thebuilder/react-intersection-observer.git"
   },
   "license": "MIT",
   "keywords": [
@@ -19,12 +24,16 @@
   ],
   "scripts": {
     "coveralls": "cat ./coverage/lcov.info | coveralls",
-    "build": "rm -rf lib es && npm run build:lib && npm run build:flow",
-    "build:lib": "babel src --out-dir lib --ignore __*,*.story.js,*.test.js",
+    "build": "rm -rf dist && npm run build:lib && npm run build:flow",
+    "build:lib": "run-p rollup:*",
     "build:storybook": "build-storybook --output-dir example",
-    "build:flow": "flow-copy-source -v src lib",
+    "build:flow": "node scripts/create-flow",
     "dev": "concurrently -k -r 'jest --watch' 'npm run storybook'",
     "lint": "eslint {src,stories,tests}/. ",
+    "rollup:es": "rollup -c --environment FORMAT:es",
+    "rollup:cjs": "rollup -c --environment FORMAT:cjs",
+    "rollup:umd": "rollup -c --environment FORMAT:umd",
+    "rollup:umd.min": "rollup -c --environment MINIFY,FORMAT:umd",
     "precommit": "flow && lint-staged",
     "postcommit": "git update-index --again",
     "prepare": "npm run build",
@@ -59,7 +68,7 @@
       "enzyme-to-json/serializer"
     ],
     "setupFiles": [
-      "<rootDir>/jest-setup.js"
+      "<rootDir>/scripts/jest-setup.js"
     ],
     "coveragePathIgnorePatterns": [
       "/node_modules/",
@@ -79,6 +88,7 @@
     "babel-cli": "^6.24.1",
     "babel-core": "^6.26.3",
     "babel-jest": "^22.4.3",
+    "babel-plugin-external-helpers": "^6.22.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
@@ -96,10 +106,16 @@
     "intersection-observer": "^0.5.0",
     "jest": "^22.4.3",
     "lint-staged": "^7.0.0",
+    "npm-run-all": "^4.1.3",
     "prettier": "^1.12.1",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
     "react-test-renderer": "^16.3.2",
-    "request": "~2.86.0"
+    "rollup": "^0.59.1",
+    "rollup-plugin-babel": "^3.0.3",
+    "rollup-plugin-commonjs": "^9.1.0",
+    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup-plugin-replace": "^2.0.0",
+    "rollup-plugin-uglify": "^4.0.0"
   }
 }

rollup.config.js

@@ -0,0 +1,73 @@
+import resolve from 'rollup-plugin-node-resolve'
+import babel from 'rollup-plugin-babel'
+import commonjs from 'rollup-plugin-commonjs'
+import replace from 'rollup-plugin-replace'
+import { uglify } from 'rollup-plugin-uglify'
+import pkg from './package.json'
+
+const minify = process.env.MINIFY
+const format = process.env.FORMAT
+const es = format === 'es'
+const umd = format === 'umd'
+const cjs = format === 'cjs'
+
+let output
+
+if (es) {
+  output = { file: pkg.module, format: 'es' }
+} else if (umd) {
+  if (minify) {
+    output = {
+      file: `dist/react-intersection-observer.umd.min.js`,
+      format: 'umd',
+    }
+  } else {
+    output = { file: `dist/react-intersection-observer.umd.js`, format: 'umd' }
+  }
+} else if (cjs) {
+  output = { file: pkg.main, format: 'cjs' }
+} else if (format) {
+  throw new Error(`invalid format specified: "${format}".`)
+} else {
+  throw new Error('no format specified. --environment FORMAT:xxx')
+}
+
+export default [
+  {
+    input: 'src/index.js',
+    output: {
+      name: 'reactIntersectionObserver',
+      globals: {
+        react: 'React',
+      },
+      ...output,
+    },
+    external: umd
+      ? Object.keys(pkg.peerDependencies || {})
+      : [
+          ...Object.keys(pkg.dependencies || {}),
+          ...Object.keys(pkg.peerDependencies || {}),
+        ],
+    plugins: [
+      resolve({
+        jsnext: true,
+        main: true,
+      }),
+      commonjs({ include: 'node_modules/**' }),
+      babel({
+        exclude: 'node_modules/**',
+        babelrc: false,
+        presets: [['env', { loose: true, modules: false }], 'react', 'stage-2'],
+        plugins: ['external-helpers'],
+      }),
+      umd
+        ? replace({
+            'process.env.NODE_ENV': JSON.stringify(
+              minify ? 'production' : 'development',
+            ),
+          })
+        : null,
+      minify ? uglify() : null,
+    ].filter(Boolean),
+  },
+]

scripts/create-flow.js

@@ -0,0 +1,33 @@
+const fs = require('fs')
+const path = require('path')
+const pkg = require('../package')
+
+/**
+ * Create a flow file that references the original source file, so Flow mapping is kept intact.
+ * https://blog.kentcdodds.com/distributing-flow-type-definitions-for-node-and-browser-modules-3952ad38b357
+ */
+function createFlow() {
+  fs.writeFileSync(
+    path.join(process.cwd(), pkg.main + '.flow'),
+    createFlowFile(),
+    'utf-8',
+  )
+  fs.writeFileSync(
+    path.join(process.cwd(), pkg.module + '.flow'),
+    createFlowFile(),
+    'utf-8',
+  )
+}
+
+function createFlowFile(file = 'index.js') {
+  return `// @flow
+export * from '../src/${file}'
+export { default } from '../src/${file}'
+`
+}
+
+if (require.main === module) {
+  createFlow()
+}
+
+module.exports = createFlow