Update build setup and a few modules

Author: ryanhefner

package.json

@@ -1,33 +1,69 @@
 {
   "name": "react-scroll-trigger",
   "version": "0.1.0",
+  "license": "MIT",
   "description": "React component tied to scroll events with callbacks for enter, exit and progress while scrolling through the viewport.",
-  "keywords": [
-    "react",
-    "react-component",
-    "scroll",
-    "trigger"
+  "repository": "ryanhefner/react-scroll-trigger",
+  "author": "Ryan Hefner <[email protected]> (https://www.ryanhefner.com)",
+  "files": [
+    "index.js",
+    "es",
+    "umd"
   ],
+  "directories": {
+    "lib": "/src"
+  },
   "main": "index.js",
+  "module": "es/index.js",
+  "jsnext:main": "src/index.js",
   "scripts": {
-    "compile": "babel -d ./ src/",
-    "prepublish": "npm run compile",
+    "clean": "rm -f index.js && rm -rf es && rm -rf umd",
+    "prebuild": "npm run clean",
+    "build": "node ./tools/build.js",
+    "watch": "babel ./src -d . --ignore __tests__ --watch",
+    "prepare": "npm run build",
+    "prepublishOnly": "node ./tools/build.js",
+    "push-release": "git push origin master && git push --tags",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "repository": "[email protected]:ryanhefner/react-scroll-trigger.git",
-  "author": "Ryan Hefner <[email protected]> (https://www.ryanhefner.com)",
-  "license": "MIT",
-  "devDependencies": {
-    "babel-cli": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
-    "babel-preset-latest": "^6.24.1",
-    "babel-preset-react": "^6.24.1"
+  "peerDependencies": {
+    "react": ">=15"
   },
   "dependencies": {
     "clean-react-props": "^0.1.0",
-    "lodash": "^4.17.4",
+    "lodash.throttle": "^4.1.1",
     "prop-types": "^15.5.10",
-    "react": "^15.6.1",
     "react-dom": "^15.6.1"
-  }
+  },
+  "devDependencies": {
+    "babel-cli": "^6.24.1",
+    "babel-plugin-dev-expression": "^0.2.1",
+    "babel-plugin-external-helpers": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.6",
+    "babel-preset-latest": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "gzip-size": "^3.0.0",
+    "jest": "^20.0.4",
+    "pretty-bytes": "^4.0.2",
+    "react": "^15.6.1",
+    "rollup": "^0.45.2",
+    "rollup-plugin-babel": "^2.7.1",
+    "rollup-plugin-commonjs": "^8.0.2",
+    "rollup-plugin-json": "^2.3.0",
+    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-uglify": "^2.0.1",
+    "rollup-watch": "^4.3.1"
+  },
+  "browserify": {
+    "transform": [
+      "loose-envify"
+    ]
+  },
+  "keywords": [
+    "react",
+    "react-component",
+    "scroll",
+    "trigger"
+  ]
 }

rollup.config.js

@@ -0,0 +1,37 @@
+import babel from 'rollup-plugin-babel';
+import commonjs from 'rollup-plugin-commonjs';
+import json from 'rollup-plugin-json';
+import resolve from 'rollup-plugin-node-resolve';
+import uglify from 'rollup-plugin-uglify';
+import pkg from './package.json';
+
+const config = {
+  entry: 'src/index.js',
+  format: 'umd',
+  moduleName: 'react-scroll-trigger',
+  plugins: [
+    babel({
+      exclude: 'node_modules/**',
+    }),
+    resolve(),
+    commonjs({
+      include: /node_modules/,
+    }),
+    json(),
+  ],
+  external: [
+    'react',
+  ],
+  globals: {
+    'react': 'React',
+  },
+  dest: './index.js',
+  banner: `/*! ${pkg.name} v${pkg.version} | (c) ${new Date().getFullYear()} Ryan Hefner | ${pkg.license} License | https://github.com/${pkg.repository} !*/`,
+  footer: '/* follow me on Twitter! @ryanhefner */',
+};
+
+if (process.env.NODE_ENV === 'production') {
+  config.plugins.push(uglify());
+}
+
+export default config;

src/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [ "../tools/babel-preset.js" ]
+}

src/index.js

@@ -1,8 +1,8 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import omit from 'lodash/omit';
-import throttle from 'lodash/throttle';
+import throttle from 'lodash.throttle';
+import cleanProps from 'clean-react-props';
 
 class ScrollTrigger extends Component {
 
@@ -123,16 +123,9 @@ class ScrollTrigger extends Component {
       children,
     } = this.props;
 
-    const props = omit(this.props, [
-      'onEnter',
-      'onExit',
-      'onProgress',
-      'triggerOnLoad',
-    ]);
-
     return (
       <div
-        {...props}
+        {...cleanProps(this.props)}
         ref={(element) => {
           this.element = element;
         }}

tools/babel-preset.js

@@ -0,0 +1,28 @@
+const BABEL_ENV = process.env.BABEL_ENV;
+const building = BABEL_ENV != undefined && BABEL_ENV !== 'cjs';
+
+const plugins = [];
+
+if (BABEL_ENV === 'umd') {
+  plugins.push('external-helpers');
+}
+
+if (process.env.NODE_ENV === 'production') {
+  plugins.push(
+    'dev-expression',
+    'transform-react-remove-prop-types'
+  );
+}
+
+module.exports = {
+  presets: [
+    ['latest', {
+      'es2015': {
+        'loose': true,
+        'modules': building ? false : 'commonjs'
+      }
+    }],
+    'react'
+  ],
+  plugins: plugins
+};

tools/build.js

@@ -0,0 +1,43 @@
+const fs = require('fs');
+const execSync = require('child_process').execSync;
+const prettyBytes = require('pretty-bytes');
+const gzipSize = require('gzip-size');
+
+const exec = (command, extraEnv) => {
+  execSync(command, {
+    stdio: 'inherit',
+    env: Object.assign({}, process.env, extraEnv),
+  });
+};
+
+console.log('Building CommonJS modules ...');
+
+exec('babel src -d . --ignore __tests__', {
+  BABEL_ENV: 'cjs',
+});
+
+console.log('\nBuilding ES modules ...');
+
+exec('babel src -d es --ignore __tests__', {
+  BABEL_ENV: 'es',
+});
+
+console.log('\nBuilding react-scroll-trigger.js ...');
+
+exec('rollup -c -f umd -o umd/react-scroll-trigger.js', {
+  BABEL_ENV: 'umd',
+  NODE_ENV: 'development',
+});
+
+console.log('\nBuilding react-scroll-trigger.min.js ...');
+
+exec('rollup -c -f umd -o umd/react-scroll-trigger.min.js', {
+  BABEL_ENV: 'umd',
+  NODE_ENV: 'production',
+});
+
+const size = gzipSize.sync(
+  fs.readFileSync('umd/react-scroll-trigger.min.js')
+);
+
+console.log('\ngzipped, the UMD build is %s', prettyBytes(size));