diff --git a/.jscsrc b/.jscsrc index d3150a1..d6a5ff1 100644 --- a/.jscsrc +++ b/.jscsrc @@ -1,7 +1,8 @@ { "fileExtensions": [".js"], "excludeFiles": [ - "node_modules" + "node_modules", + "build" ], "requireCurlyBraces": [ diff --git a/.jshintignore b/.jshintignore index 3c3629e..29108b9 100644 --- a/.jshintignore +++ b/.jshintignore @@ -1 +1,3 @@ node_modules +build +webpack.config.npm.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 802849f..39f751c 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/bower.json b/bower.json index 7fd47ad..c72be65 100644 --- a/bower.json +++ b/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": [ diff --git a/index.js b/index.js deleted file mode 100644 index 6eff423..0000000 --- a/index.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./src/waypoint.js'); diff --git a/karma.conf.js b/karma.conf.js index 38a30e9..66b3621 100644 --- a/karma.conf.js +++ b/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 }, diff --git a/package.json b/package.json index 1db4dc7..f8d70b9 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "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" @@ -10,7 +10,9 @@ "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", diff --git a/spec/waypoint_spec.js b/spec/waypoint_spec.js index ba1867b..a669e01 100644 --- a/spec/waypoint_spec.js +++ b/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; diff --git a/src/waypoint.js b/src/waypoint.jsx similarity index 84% rename from src/waypoint.js rename to src/waypoint.jsx index 90aa0cb..c44cd49 100644 --- a/src/waypoint.js +++ b/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 (); } }); diff --git a/webpack.conf.js b/webpack.conf.js deleted file mode 100644 index 9766a36..0000000 --- a/webpack.conf.js +++ /dev/null @@ -1,26 +0,0 @@ -/* global process */ - -var webpack = require('webpack'); - -var plugins = [ - new webpack.DefinePlugin({ - 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) - }) -]; - -module.exports = { - output: { - library: 'Waypoint', - libraryTarget: 'var' - }, - - externals: { - react: 'React' - }, - - node: { - Buffer: false - }, - - plugins: plugins -};