diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..3f26f4d --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,6 @@ +{ + "extrends": [ + "jakesidsmith/commonjs", + "jakesidsmith/browser" + ] +} diff --git a/.gitignore b/.gitignore index 2b7de7f..94b6251 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,8 @@ -node_modules/** -build/** -coverage/** -.nyc_output/** +/node_modules/* +/.nyc_output/* +/coverage/* +/build/* +/examples/build/* .DS_Store npm-debug.log* diff --git a/.nvmrc b/.nvmrc index c250d84..3c02432 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -6.9.4 +6.10.3 diff --git a/README.md b/README.md index f9ec0d7..46860a3 100644 --- a/README.md +++ b/README.md @@ -64,6 +64,17 @@ Either target `html, body` (to prevent the flickering on all elements) or target } ``` +## Development + +You can spin up a simple dev environment by running: + +```shell +npm install +npm start +``` + +This will serve the `examples` directory and setup a watcher for `examples/src/js/index.js` with babel (ES6 and React). + ## Support React Fastclick 3.x.x has been tested with React 15, but should support older versions also. diff --git a/circle.yml b/circle.yml index c4d058c..8424358 100644 --- a/circle.yml +++ b/circle.yml @@ -1,6 +1,6 @@ machine: node: - version: 6.9.4 + version: 6.10.3 general: branches: diff --git a/examples/index.html b/examples/index.html new file mode 100644 index 0000000..a319753 --- /dev/null +++ b/examples/index.html @@ -0,0 +1,65 @@ + + + + + + React Fastclick + + + + + +
+ + + + + diff --git a/examples/src/.babelrc b/examples/src/.babelrc new file mode 100644 index 0000000..e7bacab --- /dev/null +++ b/examples/src/.babelrc @@ -0,0 +1,6 @@ +{ + "presets": [ + "react", + "es2015" + ] +} diff --git a/examples/src/.eslintrc.json b/examples/src/.eslintrc.json new file mode 100644 index 0000000..db9cd11 --- /dev/null +++ b/examples/src/.eslintrc.json @@ -0,0 +1,8 @@ +{ + "extends": [ + "jakesidsmith/commonjs", + "jakesidsmith/browser", + "jakesidsmith/react", + "jakesidsmith/es6" + ] +} diff --git a/examples/src/js/index.js b/examples/src/js/index.js new file mode 100644 index 0000000..7687c77 --- /dev/null +++ b/examples/src/js/index.js @@ -0,0 +1,184 @@ +alert('Reloaded!'); + +import initReactFastclick from '../../../src/'; +initReactFastclick(); + +import React from 'react'; +import ReactDOM from 'react-dom'; +import { + BrowserRouter as Router, + Route, + Link +} from 'react-router-dom'; + +class Home extends React.Component { + constructor (props) { + super(props); + + this.state = { + value: '', + changeCount: 0, + checkbox: false, + index: 0 + }; + + this.onChange = this.onChange.bind(this); + this.onClick = this.onClick.bind(this); + this.onChangeCheckbox = this.onChangeCheckbox.bind(this); + this.onClickCheckbox = this.onClickCheckbox.bind(this); + this.onIncrement = this.onIncrement.bind(this); + } + + onChange (event) { + this.setState({ + value: event.target.value, + changeCount: this.state.changeCount + 1 + }); + } + + onClick (event) { + alert(`Fastclick: ${event.fastclick}, Type: ${event.type}`); + } + + onChangeCheckbox (event) { + console.log(`Change value: ${event.target.value}, Change checked: ${event.target.checked}`); + + this.setState({ + checkbox: event.target.checked + }); + } + + onClickCheckbox (event) { + console.log(`Click value: ${event.target.value}, Click checked: ${event.target.checked}`); + } + + onNoop () { + return null; + } + + onIncrement () { + this.setState({ + index: this.state.index + 1 + }); + } + + render () { + return ( +
+

Home

+

+ +

+

+ Change count: {this.state.changeCount} +

+

+ +

+

+ +

+

+ +

+

+ +

+

+ + React router link + +

+

+ + Regular link + +

+

+ +

+
+ ); + } +} + +const About = () => ( +
+

About

+
+); + +const Topic = ({ match }) => ( +
+

{match.params.topicId}

+
+); + +const NoTopic = () => ( +

Please select a topic.

+); + +const Topics = ({ match }) => ( +
+

Topics

+ + + + +
+); + +const App = () => ( + +
+ + +
+ + + +
+
+ +); + +ReactDOM.render(, document.getElementById('app')); diff --git a/package.json b/package.json index 68d2eea..b010882 100644 --- a/package.json +++ b/package.json @@ -4,10 +4,10 @@ "description": "Fast Touch Events for React", "main": "src/index.js", "scripts": { - "mocha": "nyc mocha --bail --recursive 'tests/**/*.test.js'", - "lint-tests": "eslint -c node_modules/eslintrc/.eslintrc-es5-mocha tests/", - "lint-src": "eslint -c node_modules/eslintrc/.eslintrc-es5 src/", - "test": "npm run lint-src && npm run lint-tests && npm run mocha" + "start": "./scripts/start", + "tests": "nyc mocha --bail --recursive 'tests/**/*.test.js'", + "lint": "eslint src/ tests/ examples/", + "test": "npm run lint && npm run tests" }, "repository": { "type": "git", @@ -34,18 +34,25 @@ }, "dependencies": {}, "devDependencies": { + "babel-core": "6.26.0", + "babel-preset-es2015": "6.24.1", + "babel-preset-react": "6.24.1", + "babelify": "8.0.0", + "browserify": "14.5.0", "chai": "=3.5.0", - "eslintrc": "git+https://github.com/JakeSidSmith/eslintrc.git#v0.0.1", + "concurrently": "3.5.0", + "eslint": "3.19.0", + "eslintrc": "git+https://github.com/JakeSidSmith/eslintrc.git#v2.2.0", + "http-server": "0.10.0", "jsdom": "=8.4.1", "mocha": "=2.4.5", "nyc": "=10.1.2", - "react": "=15.4.2", - "react-addons-test-utils": "=15.4.2", - "react-dom": "=15.4.2", + "raf": "3.4.0", + "react": "16.0.0", + "react-dom": "16.0.0", + "react-router-dom": "4.2.2", "sinon": "=1.17.3", - "sinon-chai": "=2.8.0" - }, - "engines": { - "node": "*" + "sinon-chai": "=2.8.0", + "watchify": "3.9.0" } } diff --git a/scripts/start b/scripts/start new file mode 100755 index 0000000..1a7e023 --- /dev/null +++ b/scripts/start @@ -0,0 +1,13 @@ +#!/usr/bin/env bash + +set -e + +mkdir -p examples/build/js/ +mkdir -p examples/build/css/ + +concurrently --kill-others \ + --prefix='name' \ + --names='watch-js ,http-server' \ + --prefix-colors='red,green' \ + 'watchify -d -t babelify examples/src/js/index.js -o examples/build/js/index.js -v' \ + 'http-server -c-0 examples/ -o' diff --git a/src/index.js b/src/index.js index 232f755..5d46cbe 100644 --- a/src/index.js +++ b/src/index.js @@ -227,10 +227,16 @@ var type = args[0]; var props = args[1]; + var isStringType = type && typeof type === 'string'; + // var checkable = props && (props.type === 'checkbox' || props.type === 'radio'); + var hasOnClick = props && typeof props.onClick === 'function'; + var isSpecialType = type in handleType; + // Check if basic element & has onClick prop - if (type && typeof type === 'string' && ( - (props && typeof props.onClick === 'function') || handleType[type] - )) { + if ( + isStringType && + (hasOnClick || isSpecialType) + ) { // Add our own events to props args[1] = propsWithFastclickEvents(type, props || {}); } diff --git a/tests/.eslintrc.json b/tests/.eslintrc.json new file mode 100644 index 0000000..f9650cc --- /dev/null +++ b/tests/.eslintrc.json @@ -0,0 +1,7 @@ +{ + "extends": [ + "jakesidsmith/mocha", + "jakesidsmith/commonjs", + "jakesidsmith/browser" + ] +} diff --git a/tests/helpers/test-setup.js b/tests/helpers/test-setup.js index 8c2ba31..038044a 100644 --- a/tests/helpers/test-setup.js +++ b/tests/helpers/test-setup.js @@ -5,6 +5,7 @@ var jsdom = require('jsdom'); var chai = require('chai'); var sinonChai = require('sinon-chai'); + var polyfillRaf = require('raf').polyfill; // Jsdom document & window var doc = jsdom.jsdom('
'); @@ -24,4 +25,6 @@ chai.expect(); chai.use(sinonChai); + polyfillRaf(); + })(); diff --git a/tests/index.test.js b/tests/index.test.js index 2e2908e..65cff36 100644 --- a/tests/index.test.js +++ b/tests/index.test.js @@ -4,7 +4,7 @@ var expect = require('chai').expect; var sinon = require('sinon'); var spy = sinon.spy; var stub = sinon.stub; -var TestUtils = require('react-addons-test-utils'); +var TestUtils = require('react-dom/test-utils'); var renderIntoApp = require('./helpers/render-into-app'); describe('react-fastclick', function () {