added babel, karma, webpack, es6

- based the build on react-boostrap super build
- migrated to es6

Author: dozoisch

.eslintrc

@@ -0,0 +1,33 @@
+{
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "ecmaFeatures": {
+    "jsx": true
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "comma-dangle": "always",
+    "comma-spacing": 1,
+    "key-spacing": 0,
+    "no-underscore-dangle": 0,
+    "no-unused-vars": [1, { "vars": "all", "args": "none" }],
+    "no-undef": 1,
+    "no-var": 2,
+    "quotes": [2, "double"],
+    "react/display-name": 0,
+    "react/jsx-uses-react": 1,
+    "react/no-did-mount-set-state": 1,
+    "react/no-did-update-set-state": 1,
+    "react/no-multi-comp": 1,
+    "react/prop-types": 1,
+    "react/react-in-jsx-scope": 1,
+    "react/self-closing-comp": 1,
+    "react/wrap-multilines": 1,
+    "strict": 0
+  }
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+lib/
+*.log

.npmignore

@@ -0,0 +1,6 @@
+node_modules/
+test/
+tools/
+.gitignore
+.travis.yml
+karma.conf.js

.travis.yml

@@ -0,0 +1,6 @@
+sudo: false
+language: node_js
+node_js:
+  - "iojs"
+  - "0.10"
+  - "0.12"

README.md

@@ -63,9 +63,11 @@ The component also has some utility functions that can be called.
 - tests
 - examples
 - code coverage
-- eslint
+
+*The build is highly inspired by [react-bootstrap][rb]*
 
 [reCAPTCHA]: https://www.google.com/recaptcha
 [signup]: http://www.google.com/recaptcha/admin
 [docs]: https://developers.google.com/recaptcha
 [js_api]: https://developers.google.com/recaptcha/docs/display#js_api
+[rb]: https://github.com/react-bootstrap/react-bootstrap/

karma.conf.js

@@ -0,0 +1,52 @@
+/* eslint no-var: 0 */
+require("babel/register");
+
+var webpackConfig = require("./webpack/test.config.js");
+var isCI = process.env.CONTINUOUS_INTEGRATION === "true";
+
+module.exports = function (config) {
+  config.set({
+
+    basePath: "",
+
+    frameworks: [
+      "mocha",
+      "chai",
+    ],
+
+    files: [
+      "test/index.js"
+    ],
+
+    preprocessors: {
+      "test/index.js": ["webpack", "sourcemap"]
+    },
+
+    webpack: webpackConfig,
+
+    webpackMiddleware: {
+      noInfo: isCI
+    },
+
+    reporters: ["mocha", "chai"],
+
+    mochaReporter: {
+      output: "autowatch"
+    },
+
+    port: 9876,
+
+    colors: true,
+
+    logLevel: config.LOG_INFO,
+
+    autoWatch: true,
+
+    browsers: [ isCI ? "PhantomJS" : "PhantomJS" /*"Chrome"*/ ],
+
+    captureTimeout: 60000,
+    browserNoActivityTimeout: 30000,
+
+    singleRun: isCI
+  });
+};

package.json

@@ -2,16 +2,22 @@
   "name": "react-google-recaptcha",
   "version": "0.0.1",
   "description": "React Component Wrapper for Google reCAPTCHA",
-  "main": "lib/recaptcha.jsx",
+  "main": "lib/recaptcha.js",
+  "directories": {
+    "lib": "lib/"
+  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "node run-babel tools/build.js",
+    "lint": "eslint src test tools webpack karma.conf.js",
+    "test": "karma start --single-run"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/dozoisch/react-google-recaptcha.git"
   },
   "keywords": [
     "react",
+    "react-component",
     "captcha",
     "recaptcha",
     "google-recaptcha"
@@ -25,5 +31,30 @@
   "peerDependencies": {
     "react": ">=0.13"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "babel": "~5.0.10",
+    "babel-core": "~5.0.10",
+    "babel-eslint": "~2.0.2",
+    "babel-loader": "~5.0.0",
+    "chai": "^2.2.0",
+    "child-process-promise": "~1.0.2",
+    "colors": "~1.0.3",
+    "es5-shim": "~4.1.0",
+    "eslint": "~0.18.0",
+    "eslint-plugin-react": "~2.1.0",
+    "fs-promise": "~0.3.1",
+    "karma": "~0.12.31",
+    "karma-chai": "^0.1.0",
+    "karma-cli": "~0.0.4",
+    "karma-mocha": "~0.1.10",
+    "karma-mocha-reporter": "~1.0.2",
+    "karma-phantomjs-launcher": "~0.1.4",
+    "karma-sourcemap-loader": "~0.3.4",
+    "karma-webpack": "~1.5.0",
+    "lodash": "~3.6.0",
+    "mocha": "~2.2.3",
+    "react": "~0.13.1",
+    "webpack": "~1.8.0",
+    "yargs": "~3.7.0"
+  }
 }

run-babel

@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+/* eslint no-var: 0 */
+var path = require("path");
+require("babel/register");
+var mod = require(path.join(__dirname, process.argv[2]));
+
+if (typeof mod === "function") {
+  mod();
+}

lib/recaptcha.jsx src/recaptcha.jslib/recaptcha.jsx renamed to src/recaptcha.js

@@ -1,25 +1,27 @@
+/*global grecaptcha*/
 "use strict";
-var React = require("react");
-var PropTypes = React.PropTypes;
+import React from "react";
+const PropTypes = React.PropTypes;
 
-var ReCAPTCHA = React.createClass({
+const ReCAPTCHA = React.createClass({
   displayName: "react-reCAPTCHA",
   propTypes: {
     sitekey: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
     onloadCallbackName: PropTypes.string.isRequired, // Name on the script tag onload query parameter
     theme: PropTypes.oneOf(["dark", "light"]),
     type: PropTypes.oneOf(["image", "audio"]),
+    elementId: PropTypes.string,
     tabindex: PropTypes.number,
     onLoad: PropTypes.func,
     onExpired: PropTypes.func,
   },
 
-  getDefaultState: function () {
+  getDefaultState() {
     return {};
   },
 
-  getDefaultProps: function () {
+  getDefaultProps() {
     return {
       theme: "light",
       type: "image",
@@ -28,50 +30,51 @@ var ReCAPTCHA = React.createClass({
     };
   },
 
-  getValue: function () {
+  getValue() {
     if (typeof grecaptcha !== "undefined" && this.state.widgetId) {
       return grecaptcha.getResponse(this.state.widgetId);
     }
     return null;
   },
 
-  reset: function () {
+  reset() {
     if (typeof grecaptcha !== "undefined" && this.state.widgetId) {
-      grecaptcha.reset(this.props.widgetId);
+      grecaptcha.reset(this.state.widgetId);
     }
   },
 
-  handleExpired: function () {
+  handleExpired() {
     if (this.props.onExpired) {
       this.props.onExpired();
     } else if (this.props.onChange) {
       this.props.onChange(null);
     }
   },
 
-  explicitRender: function () {
-    var id = grecaptcha.render(this.refs.captcha.getDOMNode(), {
-      sitekey: this.props.sitekey,
-      callback: this.props.onChange,
-      theme: this.props.theme,
-      type: this.props.type,
-      tabindex: this.props.tabindex,
-      "expired-callback": this.handleExpired,
-    });
-    this.setState({
-      widgetId: id,
-    });
+  explicitRender() {
+    if (typeof grecaptcha !== "undefined") {
+      let id = grecaptcha.render(this.refs.captcha.getDOMNode(), {
+        sitekey: this.props.sitekey,
+        callback: this.props.onChange,
+        theme: this.props.theme,
+        type: this.props.type,
+        tabindex: this.props.tabindex,
+        "expired-callback": this.handleExpired,
+      });
+      this.setState({
+        widgetId: id,
+      });
+    }
   },
 
-
-  handleLoad: function () {
+  handleLoad() {
     this.explicitRender();
     if (this.props.onLoad) {
       this.props.onLoad();
     }
   },
 
-  componentDidMount: function () {
+  componentDidMount() {
     // If script is not loaded, set the callback on window.
     if (typeof grecaptcha === "undefined") {
       window[this.props.onloadCallbackName] = this.handleLoad;
@@ -80,11 +83,11 @@ var ReCAPTCHA = React.createClass({
     }
   },
 
-  render: function () {
+  render() {
     return (
       <div ref="captcha" id={this.props.elementId} />
     );
   }
 });
 
-module.exports = ReCAPTCHA;
+export default ReCAPTCHA;

test/.eslintrc

@@ -0,0 +1,13 @@
+{
+  "env": {
+    "mocha": true
+  },
+  "globals": {
+    "assert": true,
+  },
+  "rules": {
+    "no-script-url": 1,
+    "no-unused-expressions": 0,
+    "react/no-multi-comp": 0
+  }
+}