From bcc1edbfe33c86d31b3770f74e308bef02224041 Mon Sep 17 00:00:00 2001 From: Lauren Tan Date: Tue, 24 Mar 2015 11:25:43 +1100 Subject: [PATCH 1/2] Updated react dependency to versions up till 0.13.x --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1db4dc7..4286cb6 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ ], "license": "MIT", "peerDependencies": { - "react": "0.12.x" + "react": "~0.13.x" }, "devDependencies": { "jasmine-core": "^2.1.3", From a62799ce2a9d6736482bd1d283fad5cf6e2d299d Mon Sep 17 00:00:00 2001 From: Flarnie Marchan + Joe Lencioni Date: Tue, 31 Mar 2015 10:20:12 -0700 Subject: [PATCH 2/2] Set up npm build; Release version 1.0.0 Why: - To allow us to work on the component using JSX and ES6, which increases maintainability and allows others to more easily contribute - To allow users to require either the built or unbuilt version of the component What: - Added a 'build-npm' script and used it in the 'prepublish' script for npm - Use babel in the build script to parse ES6 and JSX - Add some ES6 and JSX to our component's source, now that we can - Save built version of component in 'build/npm/waypoint.js' - Point the 'main' entry point for npm at 'build/npm/waypoint.js' - Inline the webpack configs into the 'karma.conf.js' and remove cruft - Changed some require paths to work with new build system - Added 'jsx' syntax and extension to 'waypoint' unbuilt version. How: > npm run build-npm This release also contains a fix for a bug where the 'resize' event was possibly missed when we had a 'scrollableParent' other than the window. --- .jscsrc | 3 ++- .jshintignore | 2 ++ CHANGELOG.md | 5 +++++ bower.json | 2 +- index.js | 1 - karma.conf.js | 12 ++++++++++++ package.json | 10 +++++++--- spec/waypoint_spec.js | 4 ++-- src/{waypoint.js => waypoint.jsx} | 26 +++++++++++++------------- webpack.conf.js | 26 -------------------------- 10 files changed, 44 insertions(+), 47 deletions(-) delete mode 100644 index.js rename src/{waypoint.js => waypoint.jsx} (84%) delete mode 100644 webpack.conf.js 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 4286cb6..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": [ @@ -29,6 +31,8 @@ "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 -};