Setting up npm build

.jscsrc

@@ -1,7 +1,8 @@
 {
   "fileExtensions": [".js"],
   "excludeFiles": [
-    "node_modules"
+    "node_modules",
+    "build"
   ],
 
   "requireCurlyBraces": [

.jshintignore

@@ -1 +1,3 @@
 node_modules
+build
+webpack.config.npm.js

CHANGELOG.md

@@ -1,5 +1,10 @@
 ## master (unreleased)
 
+## 1.0.0
+
+- Add 'jsx' syntax to the unbuilt version of the component, and build into
+  'build/ReactWaypoint.js' with webpack.
+
 - Fix corner case where scrollable parent is not the window and the window
   resize should trigger a Waypoint callback.
 

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "react-waypoint",
   "main": "index.js",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "homepage": "https://github.com/brigade/react-waypoint",
   "description": "A React component to execute a function whenever you scroll to an element.",
   "moduleType": [

karma.conf.js

@@ -26,6 +26,18 @@ module.exports = function(config) {
       'tests.webpack.js': ['webpack']
     },
 
+    webpack: {
+      module: {
+        loaders: [
+          {
+            test: /\.jsx?$/,
+            loaders: ['babel-loader?optional=runtime&cacheDirectory=true'],
+            exclude: /node_modules/
+          }
+        ]
+      }
+    },
+
     webpackMiddleware: {
       noInfo: true
     },

package.json

@@ -1,16 +1,18 @@
 {
   "name": "react-waypoint",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "A React component to execute a function whenever you scroll to an element.",
-  "main": "index.js",
+  "main": "build/npm/waypoint.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/brigade/react-waypoint.git"
   },
   "homepage": "https://github.com/brigade/react-waypoint",
   "bugs": "https://github.com/brigade/react-waypoint/issues",
   "scripts": {
-    "test": "./node_modules/.bin/jshint . && ./node_modules/.bin/jscs . && ./node_modules/.bin/karma start"
+    "build-npm": "rm -rf build/npm && mkdir build/npm && babel src/waypoint.jsx --out-file build/npm/waypoint.js",
+    "test": "./node_modules/.bin/jshint . && ./node_modules/.bin/jscs . && ./node_modules/.bin/karma start",
+    "prepublish": "npm run build-npm"
   },
   "author": "Brigade Engineering",
   "contributors": [
@@ -26,9 +28,11 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "react": "0.12.x"
+    "react": "~0.13.x"
   },
   "devDependencies": {
+    "babel": "^4.7.16",
+    "babel-core": "^4.7.16",
     "jasmine-core": "^2.1.3",
     "jscs": "^1.10.0",
     "jshint": "^2.6.0",

spec/waypoint_spec.js

@@ -1,5 +1,5 @@
-var React = require('react');
-var Waypoint = require('../src/waypoint');
+var React = require('../node_modules/react/react.js');
+var Waypoint = require('../src/waypoint.jsx');
 
 var div;
 

src/waypoint.js → src/waypoint.jsx

@@ -1,11 +1,11 @@
-var React = require('react');
+const React = require('react');
 
-var PropTypes = React.PropTypes;
+const PropTypes = React.PropTypes;
 
 /**
  * Calls a function when you scroll to the element.
  */
-var Waypoint = React.createClass({
+const Waypoint = React.createClass({
   propTypes: {
     onEnter: PropTypes.func,
     onLeave: PropTypes.func,
@@ -59,7 +59,7 @@ var Waypoint = React.createClass({
    *   as a fallback.
    */
   _findScrollableParent: function() {
-    var node = this.getDOMNode();
+    let node = this.getDOMNode();
 
     while (node.parentNode) {
       node = node.parentNode;
@@ -69,8 +69,8 @@ var Waypoint = React.createClass({
         continue;
       }
 
-      var style = window.getComputedStyle(node);
-      var overflowY = style.getPropertyValue('overflow-y') ||
+      const style = window.getComputedStyle(node);
+      const overflowY = style.getPropertyValue('overflow-y') ||
         style.getPropertyValue('overflow');
 
       if (overflowY === 'auto' || overflowY === 'scroll') {
@@ -84,7 +84,7 @@ var Waypoint = React.createClass({
   },
 
   _handleScroll: function() {
-    var isVisible = this._isVisible();
+    const isVisible = this._isVisible();
 
     if (this._wasVisible === isVisible) {
       // No change since last trigger
@@ -124,8 +124,8 @@ var Waypoint = React.createClass({
    *   parent element.
    */
   _isVisible: function() {
-    var waypointTop = this._distanceToTopOfScrollableParent(this.getDOMNode());
-    var contextHeight, contextScrollTop;
+    const waypointTop = this._distanceToTopOfScrollableParent(this.getDOMNode());
+    let contextHeight, contextScrollTop;
 
     if (this.scrollableParent === window) {
       contextHeight = window.innerHeight;
@@ -135,10 +135,10 @@ var Waypoint = React.createClass({
       contextScrollTop = this.scrollableParent.scrollTop;
     }
 
-    var thresholdPx = contextHeight * this.props.threshold;
+    const thresholdPx = contextHeight * this.props.threshold;
 
-    var isAboveBottom = contextScrollTop + contextHeight >= waypointTop - thresholdPx;
-    var isBelowTop    = contextScrollTop <= waypointTop + thresholdPx;
+    const isAboveBottom = contextScrollTop + contextHeight >= waypointTop - thresholdPx;
+    const isBelowTop    = contextScrollTop <= waypointTop + thresholdPx;
 
     return isAboveBottom && isBelowTop;
   },
@@ -149,7 +149,7 @@ var Waypoint = React.createClass({
   render: function() {
     // We need an element that we can locate in the DOM to determine where it is
     // rendered relative to the top of its context.
-    return React.createElement('span', { style: { fontSize: 0 } });
+    return (<span style={{fontSize: 0}} />);
   }
 });