From 0c02deccd244d2b7a970c223c28edfe96068df9a Mon Sep 17 00:00:00 2001 From: jacobawenger Date: Sat, 3 May 2014 17:30:01 -0700 Subject: [PATCH] Fixed v0.1.3 release data in change log --- .gitignore | 1 + .jshintrc | 14 ++++++ CHANGELOG.md | 7 +++ README.md | 35 +++++++++++---- ReactFireMixin.js | 78 --------------------------------- bower.json | 6 ++- examples/README.md | 3 +- examples/todoApp/README.md | 18 ++++---- examples/todoApp/bower.json | 2 +- examples/todoApp/index.html | 2 +- gulpfile.js | 16 +++++++ js/ReactFireMixin.js | 86 +++++++++++++++++++++++++++++++++++++ js/ReactFireMixin.min.js | 1 + package.json | 30 +++++++++++++ 14 files changed, 196 insertions(+), 103 deletions(-) create mode 100644 .jshintrc delete mode 100644 ReactFireMixin.js create mode 100644 gulpfile.js create mode 100644 js/ReactFireMixin.js create mode 100644 js/ReactFireMixin.min.js create mode 100644 package.json diff --git a/.gitignore b/.gitignore index 400b8a32..95a85e0d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ +node_modules bower_components firebase.json \ No newline at end of file diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 00000000..1b445a3b --- /dev/null +++ b/.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 +} \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index ef748ed4..84e33e3c 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index 445dbac4..40ac6996 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,4 @@ -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 @@ -7,8 +6,8 @@ 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) \ No newline at end of file +## 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) \ No newline at end of file diff --git a/ReactFireMixin.js b/ReactFireMixin.js deleted file mode 100644 index c704056a..00000000 --- a/ReactFireMixin.js +++ /dev/null @@ -1,78 +0,0 @@ -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) { - 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; - } -}; \ No newline at end of file diff --git a/bower.json b/bower.json index 184eafe2..ab99fadf 100644 --- a/bower.json +++ b/bower.json @@ -1,12 +1,12 @@ { "name": "ReactFire", - "version": "0.1.2", + "version": "0.1.3", "homepage": "https://github.com/firebase/ReactFire", "authors": [ "jacobawenger " ], "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" diff --git a/examples/README.md b/examples/README.md index 426f9f62..69aaddbf 100644 --- a/examples/README.md +++ b/examples/README.md @@ -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 diff --git a/examples/todoApp/README.md b/examples/todoApp/README.md index 2e49b936..948f4a61 100644 --- a/examples/todoApp/README.md +++ b/examples/todoApp/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). \ No newline at end of file diff --git a/examples/todoApp/bower.json b/examples/todoApp/bower.json index 03605b7e..9fe715c9 100644 --- a/examples/todoApp/bower.json +++ b/examples/todoApp/bower.json @@ -23,6 +23,6 @@ "dependencies": { "react": "~0.10.0", "firebase": "~1.0.12", - "ReactFire": "~0.1.2" + "ReactFire": "~0.1.3" } } diff --git a/examples/todoApp/index.html b/examples/todoApp/index.html index 0604995b..59f86edc 100644 --- a/examples/todoApp/index.html +++ b/examples/todoApp/index.html @@ -11,7 +11,7 @@ - + diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 00000000..6a1c7628 --- /dev/null +++ b/gulpfile.js @@ -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"]); \ No newline at end of file diff --git a/js/ReactFireMixin.js b/js/ReactFireMixin.js new file mode 100644 index 00000000..829adb66 --- /dev/null +++ b/js/ReactFireMixin.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; + } + }; +})(); \ No newline at end of file diff --git a/js/ReactFireMixin.min.js b/js/ReactFireMixin.min.js new file mode 100644 index 00000000..e6e15b90 --- /dev/null +++ b/js/ReactFireMixin.min.js @@ -0,0 +1 @@ +var ReactFireMixin;!function(){"use strict";ReactFireMixin={componentWillMount:function(){this.firebaseRefs={}},componentWillUnmount:function(){for(var i in this.firebaseRefs)this.firebaseRefs.hasOwnProperty(i)&&this.unbind(i)},bindAsArray:function(i,n){this._bind(i,n,!0)},bindAsObject:function(i,n){this._bind(i,n,!1)},_bind:function(i,n,t){this.firebaseRefs[n]=i,i.on("value",function(i){var e={};e[n]=t?this._toArray(i.val()):i.val(),this.setState(e)}.bind(this))},unbind:function(i){this.firebaseRefs[i].off("value"),delete this.firebaseRefs[i]},_isArray:function(i){return i&&"object"==typeof i&&i instanceof Array},_toArray:function(i){var n=[];if(i)if(this._isArray(i))n=i;else if("object"==typeof i)for(var t in i)i.hasOwnProperty(t)&&n.push(i[t]);return n}}}(); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 00000000..2b4a78ca --- /dev/null +++ b/package.json @@ -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" + } +}