JakeSidSmith · JakeSidSmith · Oct 29, 2017 · Oct 29, 2017 · Oct 29, 2017 · Oct 29, 2017
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+  "extrends": [
+    "jakesidsmith/commonjs",
+    "jakesidsmith/browser"
+  ]
+}
diff --git 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
@@ -1 +1 @@
-6.9.4
+6.10.3
diff --git 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
@@ -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
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <title>React Fastclick</title>
+  <link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
+  <style type="text/css">
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      font-family: arial, helvetica, sans-serif;
+      font-size: 14px;
+      color: #333;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    a {
+      color: blue;
+      text-decoration: none;
+    }
+
+    a:active {
+      color: red;
+      text-decoration: underline;
+    }
+
+    input:not([type=checkbox]):not([type=radio]),
+    button {
+      -webkit-appearance: none;
+      appearance: none;
+      padding: 5px;
+      border: 1px solid #CCC;
+    }
+
+    button:active {
+      border: 1px solid red;
+    }
+
+    nav ul {
+      list-style: none;
+      margin: 0;
+      padding: 10px;
+      border-bottom: 1px solid #CCC;
+    }
+
+    nav li {
+      display: inline-block;
+      padding-right: 10px;
+    }
+
+    main {
+      padding: 10px;
+    }
+  </style>
+</head>
+<body>
+
+  <div id="app"></div>
+
+  <script type="text/javascript" src="build/js/index.js"></script>
+
+</body>
+</html>
diff --git a/examples/src/.babelrc b/examples/src/.babelrc
@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "react",
+    "es2015"
+  ]
+}
diff --git a/examples/src/.eslintrc.json 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
@@ -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 (
+      <div>
+        <h2>Home</h2>
+        <p>
+          <input type="text" value={this.state.value} onChange={this.onChange} />
+        </p>
+        <p>
+          Change count: {this.state.changeCount}
+        </p>
+        <p>
+          <button onClick={this.onClick}>
+            Check event type
+          </button>
+        </p>
+        <p>
+          <button onClick={this.onIncrement}>
+            Increment: {this.state.index}
+          </button>
+        </p>
+        <p>
+          <button onClick={this.onNoop}>
+            Button with onClick
+          </button>
+        </p>
+        <p>
+          <button>
+            Button without onClick
+          </button>
+        </p>
+        <p>
+          <Link to="/">
+            React router link
+          </Link>
+        </p>
+        <p>
+          <a href="#">
+            Regular link
+          </a>
+        </p>
+        <p>
+          <input
+            type="checkbox"
+            value={this.state.checkbox}
+            onChange={this.onChangeCheckbox}
+            onClick={this.onClickCheckbox}
+          />
+        </p>
+      </div>
+    );
+  }
+}
+
+const About = () => (
+  <div>
+    <h2>About</h2>
+  </div>
+);
+
+const Topic = ({ match }) => (
+  <div>
+    <h3>{match.params.topicId}</h3>
+  </div>
+);
+
+const NoTopic = () => (
+  <h3>Please select a topic.</h3>
+);
+
+const Topics = ({ match }) => (
+  <div>
+    <h2>Topics</h2>
+    <ul>
+      <li>
+        <Link to={`${match.url}/rendering`}>
+          Rendering with React
+        </Link>
+      </li>
+      <li>
+        <Link to={`${match.url}/components`}>
+          Components
+        </Link>
+      </li>
+      <li>
+        <Link to={`${match.url}/props-v-state`}>
+          Props v. State
+        </Link>
+      </li>
+    </ul>
+
+    <Route path={`${match.url}/:topicId`} component={Topic} />
+    <Route
+      exact
+      path={match.url}
+      render={NoTopic}
+    />
+  </div>
+);
+
+const App = () => (
+  <Router>
+    <div>
+      <nav>
+        <ul>
+          <li><Link to="/">Home</Link></li>
+          <li><Link to="/about">About</Link></li>
+          <li><Link to="/topics">Topics</Link></li>
+        </ul>
+      </nav>
+
+      <main>
+        <Route exact path="/" component={Home} />
+        <Route path="/about" component={About} />
+        <Route path="/topics" component={Topics} />
+      </main>
+    </div>
+  </Router>
+);
+
+ReactDOM.render(<App />, document.getElementById('app'));
diff --git 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
@@ -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
@@ -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 || {});
         }