Fixed issue with limit() queries and added test suite

- Fixed issue when binding to Firebase limit() query
- Added error checking
- Added basic test suite
- Added travis integration
- Updated README
- Added limit query to todoApp demo

Author: jacobawenger

.gitignore

@@ -1,3 +1,4 @@
 node_modules
-./bower_components
+bower_components
 firebase.json
+tests/coverage

.jshintrc

@@ -1,4 +1,8 @@
 {
+  "predef": [
+    "module",
+    "Firebase"
+  ],
   "bitwise": true,
   "curly": true,
   "eqeqeq": true,

.travis.yml

@@ -0,0 +1,9 @@
+language: node_js
+node_js:
+- '0.10'
+install:
+- npm install -g bower
+- npm install
+- bower install
+script:
+- npm test

CHANGELOG.md

@@ -1,3 +1,12 @@
+v0.1.6
+-------------
+Release Date: 2014-06-29
+
+  * Fixed issue when binding to Firebase limit() query
+  * Added error checking
+  * Added basic test suite
+  * Added distribution files to Firebase CDN
+
 v0.1.5
 -------------
 Release Date: 2014-05-23

README.md

@@ -1,68 +1,95 @@
 # ReactFire
 
-ReactFireMixin is an officially supported [ReactJS](http://facebook.github.io/react/) mixin
-for [Firebase](http://www.firebase.com/). Firebase provides your React app with a
-persistent, realtime backend to effortlessly keep all of your clients in sync!
+[![Build Status](https://travis-ci.org/firebase/reactfire.svg)](https://travis-ci.org/firebase/reactfire)
+[![GitHub version](https://badge.fury.io/gh/firebase%2Freactfire.svg)](http://badge.fury.io/gh/firebase%2Freactfire)
 
-Read our [blog post](https://firebase.com/blog/2014-05-01-using-firebase-with-react.html) on using Firebase with React and check out our [live Todo app demo](https://reactfiretodoapp.firebaseapp.com/) to get started!
+[ReactJS](http://facebook.github.io/react/) is a framework for building large, complex user interfaces. [Firebase](http://www.firebase.com/) complements it perfectly by providing an easy-to-use, realtime data source for populating the `state` of React components. With ReactFire, it only takes a few lines of JavaScript to integrate Firebase into React apps via the `ReactFireMixin`.
 
-## Usage
+[Read our blog post](https://firebase.com/blog/2014-05-01-using-firebase-with-react.html) on using Firebase with React and [check out our live Todo app demo](https://reactfiretodoapp.firebaseapp.com/) to get started!
 
-The ReactFireMixin can be added to your project in three ways:
+## Downloading ReactFire
 
-* Manually copy ReactFireMixin.js from GitHub to you local directory.
-* Use bower: `bower install ReactFire`
-* Use npm: `npm install reactfire`
+In order to use the `ReactFireMixin` in your project, you need to include the following files in your HTML:
 
-To use the ReactFireMixin in a React component, add it to the component's mixins property:
+```html
+<!-- React JS -->
+<script src="http://fb.me/react-0.10.0.min.js"></script>
+<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
 
-    var ExampleComponent = React.createClass({
-      mixins: [ReactFireMixin],
-      ...
-    });
+<!-- Firebase -->
+<script src="https://cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
 
-## API Reference
+<!-- ReactFire -->
+<script src="https://cdn.firebase.com/libs/reactfire/0.1.6/reactfire.min.js"></script>
+```
 
-###bindAsArray(firebaseRef, bindVar)
+Use the URL above to download both the minified and non-minifed versions of ReactFire from the Firebase CDN. You can also download them from the `/dist/` directory of this GitHub repository. [Firebase](https://www.firebase.com/docs/web-quickstart.html) and [React](http://facebook.github.io/react/downloads.html) can be downloaded directly from their respective websites.
 
-Creates a binding between Firebase and the inputted bind variable as an array. The Firebase
-reference will be stored in this.firebaseRefs[bindVar].
+You can also install ReactFire via npm or Bower and the dependencies will be downloaded automatically:
 
-    this.bindAsArray(new Firebase("https://<YOUR_FIREBASE>/"), "items");
+```bash
+$ npm install reactfire --save
+```
 
-###bindAsObject(firebaseRef, bindVar)
+```bash
+$ bower install reactfire --save
+```
 
-Creates a binding between Firebase and the inputted bind variable as an object. The Firebase
-reference will be stored in this.firebaseRefs[bindVar].
+## Getting Started with Firebase
 
-    this.bindAsObject(new Firebase("https://<YOUR_FIREBASE>/"), "items");
+ReactFire requires Firebase in order to store data. You can [sign up here](https://www.firebase.com/signup/) for a free account.
 
-###unbind(bindVar)
+## Usage
 
-Removes the binding between Firebase and the inputted bind variable. This removes the stored
-Firebase reference in this.firebaseRefs[bindVar] and cleans up any event handlers associated
-with that Firebase reference.
+To use the `ReactFireMixin` in a React component, add it to the component's mixins property:
 
-    this.unbind("items");
+```javascript
+var ExampleComponent = React.createClass({
+  mixins: [ReactFireMixin],
+  ...
+});
+```
 
-## Contributing
+The following APIs will then be available from the `this` object inside of `ExampleComponent`.
 
-Interested in manually debugging from source or submitting a pull request? Follow the steps
-below.
+## API Reference
 
-### Install Dependencies
+### bindAsArray(firebaseRef, bindVar)
 
-```bash
-$ git clone https://github.com/firebase/ReactFire.git       # clone this repository
-$ npm install                                               # install local NPM build / test dependencies
+Creates a binding between Firebase and the inputted bind variable as an array. The Firebase reference will be stored in `this.firebaseRefs[bindVar]`.
+
+```javascript
+this.bindAsArray(new Firebase("https://<YOUR_FIREBASE>/"), "items");
+```
+
+### bindAsObject(firebaseRef, bindVar)
+
+Creates a binding between Firebase and the inputted bind variable as an object. The Firebase reference will be stored in `this.firebaseRefs[bindVar]`.
+
+```javascript
+this.bindAsObject(new Firebase("https://<YOUR_FIREBASE>/"), "items");
 ```
 
-### Compile
+### unbind(bindVar)
+
+Removes the binding between Firebase and the inputted bind variable. This removes the stored Firebase reference in `this.firebaseRefs[bindVar]` and cleans up any event handlers associated with that Firebase reference.
+
+```javascript
+this.unbind("items");
+```
+
+## Contributing
+
+If you'd like to contribute to ReactFire, you'll need to run the following commands to get your environment set up:
 
 ```bash
-$ gulp
+$ git clone https://github.com/firebase/reactfire.git
+$ npm install -g gulp  # globally intall gulp task runnger
+$ npm install        # install local npm build / test dependencies
+$ bower install      # install local JavaScript dependencies
+$ gulp watch         # watch for source file changes
 ```
 
-## License
+`gulp watch` will watch for changes in the `/src/` directory and lint, concatenate, and minify the source files when a change occurs. The output files - `reactfire.js` and `reactfire.min.js` - are written to the `/dist/` directory.
 
-[Firebase MIT License](http://firebase.mit-license.org)
+You can run the test suite by navigating to `file:///path/to/tests/TestRunner.html` or run the tests via the command line using `gulp test`.

bower.json

@@ -1,24 +1,35 @@
 {
-  "name": "ReactFire",
-  "version": "0.1.5",
-  "homepage": "https://github.com/firebase/ReactFire",
+  "name": "reactfire",
+  "description": "Firebase mixin for ReactJS",
+  "version": "0.1.6",
+  "main": "./dist/reactfire.min.js",
+  "homepage": "https://github.com/firebase/reactfire/",
+  "license": "MIT",
   "authors": [
     "jacobawenger <[email protected]>"
   ],
-  "description": "Firebase mixin for ReactJS",
-  "main": "js/ReactFireMixin.min.js",
   "keywords": [
     "react",
-    "firebase"
+    "firebase",
+    "mixin"
   ],
-  "license": "MIT",
   "ignore": [
     "**/.*",
-    "./CHANGELOG.md",
-    "./gulpfile.js",
-    "./package.json",
-    "examples",
+    "src",
+    "build",
+    "tests",
     "node_modules",
-    "bower_components"
-  ]
+    "bower_components",
+    "firebase.json",
+    "package.json",
+    "gulpfile.js",
+    "examples"
+  ],
+  "dependencies": {
+    "react": "~0.10.0",
+    "firebase": "1.0.x"
+  },
+  "devDependencies": {
+    "jasmine": "~2.0.0"
+  }
 }

build/footer

@@ -0,0 +1,7 @@
+  return ReactFireMixin;
+})();
+
+// Export ReactFireMixin if this is being run in node
+if (typeof module !== "undefined" && typeof process !== "undefined") {
+  module.exports = ReactFireMixin;
+}

build/header

@@ -0,0 +1,10 @@
+// ReactFire is an officially supported ReactJS mixin for Firebase. Firebase
+// provides your React app with a persistent, realtime backend to effortlessly
+// keep all of your clients in sync!
+//
+//   ReactFire 0.1.6
+//   https://github.com/firebase/reactfire/
+//   License: MIT
+
+var ReactFireMixin = (function() {
+  "use strict";

dist/reactfire.js

@@ -0,0 +1,142 @@
+// ReactFire is an officially supported ReactJS mixin for Firebase. Firebase
+// provides your React app with a persistent, realtime backend to effortlessly
+// keep all of your clients in sync!
+//
+//   ReactFire 0.1.6
+//   https://github.com/firebase/reactfire/
+//   License: MIT
+
+var ReactFireMixin = (function() {
+  "use strict";
+var ReactFireMixin = {
+  /********************/
+  /*  MIXIN LIFETIME  */
+  /********************/
+  /* Initializes the Firebase binding refs array */
+  componentWillMount: function() {
+    this.firebaseRefs = {};
+  },
+
+  /* Removes any remaining Firebase bindings */
+  componentWillUnmount: function() {
+    for (var key in this.firebaseRefs) {
+      if (this.firebaseRefs.hasOwnProperty(key)) {
+        this.unbind(key);
+      }
+    }
+  },
+
+
+  /*************/
+  /*  BINDING  */
+  /*************/
+  /* Creates a binding between Firebase and the inputted bind variable as an array */
+  bindAsArray: function(firebaseRef, bindVar) {
+    this._bind(firebaseRef, bindVar, true);
+  },
+
+  /* Creates a binding between Firebase and the inputted bind variable as an object */
+  bindAsObject: function(firebaseRef, bindVar) {
+    this._bind(firebaseRef, bindVar, false);
+  },
+
+  /* Creates a binding between Firebase and the inputted bind variable as either an array or object */
+  _bind: function(firebaseRef, bindVar, bindAsArray) {
+    this._validateBindVar(bindVar);
+
+    var error;
+    if (typeof firebaseRef.ref === "undefined" || firebaseRef.ref() instanceof Firebase === false) {
+      error = "firebaseRef must be an instance of Firebase";
+    }
+    else if (typeof bindAsArray !== "boolean") {
+      error = "bindAsArray must be a boolean. Got: " + bindAsArray;
+    }
+
+    if (typeof error !== "undefined") {
+      throw new Error("ReactFire: " + error);
+    }
+
+    this.firebaseRefs[bindVar] = firebaseRef.ref();
+    firebaseRef.on("value", function(dataSnapshot) {
+      var newState = {};
+      if (bindAsArray) {
+        newState[bindVar] = this._toArray(dataSnapshot.val());
+      }
+      else {
+        newState[bindVar] = dataSnapshot.val();
+      }
+      this.setState(newState);
+    }.bind(this));
+  },
+
+  /* Removes the binding between Firebase and the inputted bind variable */
+  unbind: function(bindVar) {
+    this._validateBindVar(bindVar);
+
+    if (typeof this.firebaseRefs[bindVar] === "undefined") {
+      throw new Error("unexpected value for bindVar. \"" + bindVar + "\" was either never bound or has already been unbound");
+    }
+
+    this.firebaseRefs[bindVar].off("value");
+    delete this.firebaseRefs[bindVar];
+  },
+
+
+  /*************/
+  /*  HELPERS  */
+  /*************/
+  /* Validates the name of the variable which is being bound */
+  _validateBindVar: function(bindVar) {
+    var error;
+
+    if (typeof bindVar !== "string") {
+      error = "bindVar must be a string. Got: " + bindVar;
+    }
+    else if (bindVar.length === 0) {
+      error = "bindVar must be a non-empty string. Got: \"\"";
+    }
+    else if (bindVar.length > 768) {
+      // Firebase can only stored child paths up to 768 characters
+      error = "bindVar is too long to be stored in Firebase. Got: " + bindVar;
+    }
+    else if (/[\[\].#$\/\u0000-\u001F\u007F]/.test(bindVar)) {
+      // Firebase does not allow node keys to contain the following characters
+      error = "bindVar cannot contain any of the following characters: . # $ ] [ /. Got: " + bindVar;
+    }
+
+    if (typeof error !== "undefined") {
+      throw new Error("ReactFire: " + error);
+    }
+  },
+
+
+  /* Returns true if the inputted object is a JavaScript array */
+  _isArray: function(obj) {
+    return (Object.prototype.toString.call(obj) === "[object Array]");
+  },
+
+  /* Converts a Firebase object to a JavaScript array */
+  _toArray: function(obj) {
+    var out = [];
+    if (obj) {
+      if (this._isArray(obj)) {
+        out = obj;
+      }
+      else if (typeof(obj) === "object") {
+        for (var key in obj) {
+          if (obj.hasOwnProperty(key)) {
+            out.push(obj[key]);
+          }
+        }
+      }
+    }
+    return out;
+  }
+};
+  return ReactFireMixin;
+})();
+
+// Export ReactFireMixin if this is being run in node
+if (typeof module !== "undefined" && typeof process !== "undefined") {
+  module.exports = ReactFireMixin;
+}