Merge pull request #2 from firebase/gulp

Added gulp integration to smooth out release process

Author: Jacob Wenger

.gitignore

@@ -1,2 +1,3 @@
+node_modules
 bower_components
 firebase.json

.jshintrc

@@ -0,0 +1,14 @@
+{
+  "bitwise": true,
+  "curly": true,
+  "eqeqeq": true,
+  "forin": true,
+  "freeze": true,
+  "indent": 2,
+  "latedef": true,
+  "quotmark": "double",
+  "strict": true,
+  "trailing": true,
+  "undef": true,
+  "unused": true
+}

CHANGELOG.md

@@ -1,3 +1,10 @@
+v0.1.3
+-------------
+Release Date: 2014-05-02
+
+  * Bug fix for misnamed variable in _toArray() method (submitted by @danielmahal)
+  * Added gulp integration to lint, minify, and test code
+
 v0.1.2
 -------------
 Release Date: 2014-05-02

README.md

@@ -1,14 +1,13 @@
-ReactFire
-=========
+# 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!
 
 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!
 
-Usage
------
+## Usage
+
 The ReactFireMixin can be added to you project in two ways:
 
 * Manually copy ReactFireMixin.js from GitHub to you local directory.
@@ -21,8 +20,8 @@ To use the ReactFireMixin in a React component, add it to the component's mixins
       ...
     });
 
-API Reference
--------------
+## API Reference
+
 ###bindAsArray(firebaseRef, bindVar)
 
 Creates a binding between Firebase and the inputted bind variable as an array. The Firebase
@@ -45,6 +44,24 @@ with that Firebase reference.
 
     this.unbind("items");
 
-License
--------
-[MIT](http://firebase.mit-license.org)
+## Contributing
+
+Interested in manually debugging from source or submitting a pull request? Follow the steps
+below.
+
+### Install Dependencies
+
+```bash
+$ git clone https://github.com/firebase/ReactFire.git       # clone this repository
+$ npm install                                               # install local NPM build / test dependencies
+```
+
+### Compile
+
+```bash
+$ gulp
+```
+
+## License
+
+[Firebase MIT License](http://firebase.mit-license.org)

ReactFireMixin.js

@@ -1,12 +1,12 @@
 {
   "name": "ReactFire",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "homepage": "https://github.com/firebase/ReactFire",
   "authors": [
     "jacobawenger <jacob@firebase.com>"
   ],
   "description": "Firebase mixin for ReactJS",
-  "main": "ReactFireMixin.js",
+  "main": "js/ReactFireMixin.min.js",
   "keywords": [
     "react",
     "firebase"
@@ -15,6 +15,8 @@
   "ignore": [
     "**/.*",
     "./CHANGELOG.md",
+    "./gulpfile.js",
+    "./package.json",
     "examples",
     "node_modules",
     "bower_components"

bower.json

@@ -1,5 +1,4 @@
-ReactFire Examples
-==================
+# ReactFire Examples
 
 Have you come up with a cool example that uses the ReactFireMixin? Submit a pull request and share
 it with everyone else by putting in this /examples/ directory. Please make sure to include a README.md

examples/README.md

@@ -1,12 +1,10 @@
-ReactFire Todo App Example
-==========================
+# ReactFire Todo App Example
 
-Live Demo
----------
+## Live Demo
 You can view a live version of this demo [here](https://reactfiretodoapp.firebaseapp.com/).
 
-Setup Instructions
---------------------
+## Setup Instructions
+
 To run this example locally, either download the whole ReactFire repo or just this /todoApp/
 directory. From the /todoApp/ directory, install the needed dependencies via bower:
 
@@ -22,8 +20,8 @@ $ python -m SimpleHTTPServer 8080
 
 Now you should be able to visit the example in the browser of your choice at [http://127.0.0.1:8080/](http://127.0.0.1:8080/).
 
-Description
------------
+## Description
+
 This example shows three different ways to make a Todo app using React. It is adapted from the
 Todo app example on the [ReactJS homepage](http://facebook.github.io/react/). There are three
 different versions of the Todo app example:
@@ -37,6 +35,6 @@ made to this example are persistent.
 3. __ReactFireMixin:__ A version of the first example which uses the ReactFireMixin. Changes made to
 this example are persistent.
 
-Walkthrough
------------
+## Walkthrough
+
 To learn more about how this example works, see the [blog post on the official Firebase blog](https://www.firebase.com/blog/2014-05-01-using-firebase-with-react.html).

examples/todoApp/README.md

@@ -23,6 +23,6 @@
   "dependencies": {
     "react": "~0.10.0",
     "firebase": "~1.0.12",
-    "ReactFire": "~0.1.2"
+    "ReactFire": "~0.1.3"
   }
 }

examples/todoApp/bower.json

@@ -11,7 +11,7 @@
     <script src="bower_components/firebase/firebase.js"></script>
 
     <!-- ReactFireMixin -->
-    <script src="bower_components/ReactFire/ReactFireMixin.js"></script>
+    <script src="bower_components/ReactFire/js/ReactFireMixin.min.js"></script>
 
     <!-- Custom JS -->
     <script type="text/jsx" src="js/todoAppOriginal.js"></script>

examples/todoApp/index.html

@@ -0,0 +1,16 @@
+var gulp = require("gulp");
+var jshint = require("gulp-jshint");
+var uglify = require("gulp-uglify");
+var extReplace = require("gulp-ext-replace");
+
+gulp.task("scripts", function() {
+  // Load the code, and process it.
+  var code = gulp.src("js/ReactFireMixin.js")
+    .pipe(jshint())
+    .pipe(jshint.reporter("jshint-stylish"))
+    .pipe(uglify())
+    .pipe(extReplace(".min.js"))
+    .pipe(gulp.dest("js"));
+});
+
+gulp.task("default", ["scripts"]);

gulpfile.js

@@ -0,0 +1,86 @@
+var ReactFireMixin;
+
+(function() {
+  "use strict";
+
+  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.firebaseRefs[bindVar] = firebaseRef;
+      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.firebaseRefs[bindVar].off("value");
+      delete this.firebaseRefs[bindVar];
+    },
+
+
+    /*************/
+    /*  HELPERS  */
+    /*************/
+    /* Returns true if the inputted object is a JavaScript array */
+    _isArray: function(obj) {
+      return (obj && typeof obj === "object" && obj instanceof 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;
+    }
+  };
+})();

js/ReactFireMixin.js

@@ -0,0 +1,30 @@
+{
+  "name": "ReactFire",
+  "description": "Firebase mixin for ReactJS",
+  "main": "ReactFireMixin.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/firebase/ReactFire.git"
+  },
+  "bugs": {
+    "url": "https://github.com/firebase/ReactFire/issues"
+  },
+  "private": true,
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "http://firebase.mit-license.org/"
+    }
+  ],
+  "version": "0.1.3",
+  "dependencies": {
+    "firebase": "~1.0.11"
+  },
+  "devDependencies": {
+    "gulp": "^3.5.6",
+    "gulp-uglify": "^0.2.1",
+    "gulp-jshint": "^1.5.1",
+    "gulp-ext-replace": "0.0.5",
+    "jshint-stylish": "^0.2.0"
+  }
+}