Added babel-compiled .js version

Changed `package.json` to point `main` to the `.js` version
Added `prepublish` hook to compile the `.jsx` to `.js`

Author: ziad-saab

package.json

@@ -1,10 +1,11 @@
 {
   "name": "react-checkbox-group",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Sensible checkbox groups manipulation for DOM.",
-  "main": "react-checkbox-group.jsx",
+  "main": "react-checkbox-group.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prepublish": "node_modules/.bin/babel --stage 1 ./react-checkbox-group.jsx --out-file ./react-checkbox-group.js"
   },
   "repository": {
     "type": "git",
@@ -25,7 +26,10 @@
     "url": "https://github.com/ziad-saab/react-checkbox-group/issues"
   },
   "homepage": "https://github.com/ziad-saab/react-checkbox-group",
-  "dependencies": {
-    "react": "~0.11.1"
+  "peerDependencies": {
+    "react": ">= 0.11.1 < 1"
+  },
+  "devDependencies": {
+    "babel": "^5.6.7"
   }
 }

react-checkbox-group.js

@@ -0,0 +1,78 @@
+/**
+* @jsx React.DOM
+*/
+'use strict';
+
+var React = require('react');
+
+module.exports = React.createClass({
+  displayName: 'CheckboxGroup',
+  getInitialState: function getInitialState() {
+    return { defaultValue: this.props.defaultValue || [] };
+  },
+
+  componentDidMount: function componentDidMount() {
+    this.setCheckboxNames();
+    this.setCheckedBoxes();
+  },
+
+  componentDidUpdate: function componentDidUpdate() {
+    this.setCheckboxNames();
+    this.setCheckedBoxes();
+  },
+
+  render: function render() {
+    return React.createElement(
+      'div',
+      this.props,
+      this.props.children
+    );
+  },
+
+  setCheckboxNames: function setCheckboxNames() {
+    // stay DRY and don't put the same `name` on all checkboxes manually. Put it on
+    // the tag and it'll be done here
+    var $checkboxes = this.getCheckboxes();
+    for (var i = 0, _length = $checkboxes.length; i < _length; i++) {
+      $checkboxes[i].setAttribute('name', this.props.name);
+    }
+  },
+
+  getCheckboxes: function getCheckboxes() {
+    return this.getDOMNode().querySelectorAll('input[type="checkbox"]');
+  },
+
+  setCheckedBoxes: function setCheckedBoxes() {
+    var $checkboxes = this.getCheckboxes();
+    // if `value` is passed from parent, always use that value. This is similar
+    // to React's controlled component. If `defaultValue` is used instead,
+    // subsequent updates to defaultValue are ignored. Note: when `defaultValue`
+    // and `value` are both passed, the latter takes precedence, just like in
+    // a controlled component
+    var destinationValue = this.props.value != null ? this.props.value : this.state.defaultValue;
+
+    for (var i = 0, _length2 = $checkboxes.length; i < _length2; i++) {
+      var $checkbox = $checkboxes[i];
+
+      // intentionally use implicit conversion for those who accidentally used,
+      // say, `valueToChange` of 1 (integer) to compare it with `value` of "1"
+      // (auto conversion to valid html value from React)
+      if (destinationValue.indexOf($checkbox.value) >= 0) {
+        $checkbox.checked = true;
+      }
+    }
+  },
+
+  getCheckedValues: function getCheckedValues() {
+    var $checkboxes = this.getCheckboxes();
+
+    var checked = [];
+    for (var i = 0, _length3 = $checkboxes.length; i < _length3; i++) {
+      if ($checkboxes[i].checked) {
+        checked.push($checkboxes[i].value);
+      }
+    }
+
+    return checked;
+  }
+});

react-checkbox-group.jsx

@@ -3,7 +3,8 @@
 */
 var React = require('react');
 
-var CheckboxGroup = module.exports = React.createClass({
+module.exports = React.createClass({
+  displayName: 'CheckboxGroup',
   getInitialState: function() {
     return {defaultValue: this.props.defaultValue || []};
   },
@@ -19,8 +20,8 @@ var CheckboxGroup = module.exports = React.createClass({
   },
 
   render: function() {
-    return this.transferPropsTo(
-      <div onChange={this.props.onChange}>
+    return (
+      <div {...this.props}>
         {this.props.children}
       </div>
     );
@@ -29,8 +30,8 @@ var CheckboxGroup = module.exports = React.createClass({
   setCheckboxNames: function() {
     // stay DRY and don't put the same `name` on all checkboxes manually. Put it on
     // the tag and it'll be done here
-    var $checkboxes = this.getCheckboxes();
-    for (var i = 0, length = $checkboxes.length; i < length; i++) {
+    let $checkboxes = this.getCheckboxes();
+    for (let i = 0, length = $checkboxes.length; i < length; i++) {
       $checkboxes[i].setAttribute('name', this.props.name);
     }
   },
@@ -40,18 +41,18 @@ var CheckboxGroup = module.exports = React.createClass({
   },
 
   setCheckedBoxes: function() {
-    var $checkboxes = this.getCheckboxes();
+    let $checkboxes = this.getCheckboxes();
     // if `value` is passed from parent, always use that value. This is similar
     // to React's controlled component. If `defaultValue` is used instead,
     // subsequent updates to defaultValue are ignored. Note: when `defaultValue`
     // and `value` are both passed, the latter takes precedence, just like in
     // a controlled component
-    var destinationValue = this.props.value != null
+    let destinationValue = this.props.value != null
       ? this.props.value
       : this.state.defaultValue;
 
-    for (var i = 0, length = $checkboxes.length; i < length; i++) {
-      var $checkbox = $checkboxes[i];
+    for (let i = 0, length = $checkboxes.length; i < length; i++) {
+      let $checkbox = $checkboxes[i];
 
       // intentionally use implicit conversion for those who accidentally used,
       // say, `valueToChange` of 1 (integer) to compare it with `value` of "1"
@@ -63,10 +64,10 @@ var CheckboxGroup = module.exports = React.createClass({
   },
 
   getCheckedValues: function() {
-    var $checkboxes = this.getCheckboxes();
+    let $checkboxes = this.getCheckboxes();
 
-    var checked = [];
-    for (var i = 0, length = $checkboxes.length; i < length; i++) {
+    let checked = [];
+    for (let i = 0, length = $checkboxes.length; i < length; i++) {
       if ($checkboxes[i].checked) {
         checked.push($checkboxes[i].value);
       }