Merge pull request #6 from unfold/firebase-3

Upgrade to Firebase 3

Closes #2 and #5

Author: simenbrekken

.babelrc

@@ -1,131 +1,131 @@
 React Firebase
 ==============
 
-React bindings for [Firebase](https://www.firebase.com).
+React bindings for [Firebase](https://firebase.google.com).
 
 ## Installation
 
-React Firebase requires **React 0.14 or later.**
-
 ```
 npm install --save react-firebase
 ```
 
-## Usage
-
-### `<Provider firebase>`
+React Firebase requires **[React 0.14](https://github.com/facebook/react) and [Firebase 3](https://www.npmjs.com/package/firebase) or later.**
 
-Makes a Firebase refence available to the `connect()` calls in the component hierarchy below. Normally, you can’t use `connect()` without wrapping the root component in `<Provider>`.
-
-If you *really* need to, you can manually pass `firebase` as a prop to every `connect()`ed component, but we only recommend to do this for stubbing `firebase` in unit tests, or in non-fully-React codebases. Normally, you should just use `<Provider>`.
-
-#### Props
-
-* `firebase` (*[Firebase](https://www.firebase.com/docs/web/api/firebase/constructor.html)*): A Firebase reference.
-* `children` (*ReactElement*) The root of your component hierarchy.
-
-#### Example
-
-##### Vanilla React
+## Example
 
 ```js
-const firebase = new Firebase('https://my-firebase.firebaseio.com');
-
-ReactDOM.render(
-  <Provider firebase={firebase}>
-    <MyRootComponent />
-  </Provider>,
-  rootEl
+import React from 'react'
+import firebase from 'firebase'
+import { connect } from 'react-firebase'
+
+firebase.initializeApp({
+  databaseURL: 'https://react-firebase-sandbox.firebaseio.com'
+})
+
+const Counter = ({ value, setValue }) => (
+  <div>
+    <button onClick={() => setCount(value - 1)}>-</button>
+    <span>{value}</span>
+    <button onClick={() => setCount(value + 1)}>+</button>
+  </div>
 )
-```
-
-### `connect([mapPropsToSubscriptions], [mapFirebaseToProps], [mergeProps], [options])`
 
-Connects a React component to a Firebase refence.
+export default connect((props, ref) => ({
+  value: 'counterValue',
+  setValue: value => ref('counterValue').set(value)
+}))(TodosApp)
+```
 
-It does not modify the component class passed to it.  
-Instead, it *returns* a new, connected component class, for you to use.
+## Usage
 
-#### Arguments
+### `connect([mapFirebaseToProps])`
 
-* [`mapPropsToSubscriptions(props): subscriptions`] \(*Function*): If specified, the component will subscribe to Firebase `change` events. Its result must be a plain object, and it will be merged into the component’s props. Each value must either a path to a location in the firebase or a function with the signature `createQuery(firebase): [Query](https://www.firebase.com/docs/web/api/query)`.
+Connects a React component to a Firebase App reference.
 
-* [`mapFirebaseToProps(firebase, [ownProps]): actionProps`] \(*Function*): If specified, its result must be a plain object where each value is assumed to be a function that performs modifications to the Firebase. If you omit it, the default implementation just injects `firebase` into your component’s props.
+It does not modify the component class passed to it. Instead, it *returns* a new, connected component class, for you to use.
 
-* [`mergeProps(stateProps, actionProps, ownProps): props`] \(*Function*): If specified, it is passed the result of `mapPropsToSubscriptions()`, `mapFirebaseToProps()`, and the parent `props`. The plain object you return from it will be passed as props to the wrapped component. You may specify this function to select a slice of the state based on props, or to bind action creators to a particular variable from props. If you omit it, `Object.assign({}, ownProps, stateProps, actionProps)` is used by default.
+#### Arguments
 
-* [`options`] *(Object)* If specified, further customizes the behavior of the connector.
-  * [`pure = true`] *(Boolean)*: If true, implements `shouldComponentUpdate` and shallowly compares the result of `mergeProps`, preventing unnecessary updates, assuming that the component is a “pure” component and does not rely on any input or state other than its props and subscriptions. *Defaults to `true`.*
+* [`mapFirebaseToProps(props, ref, firebaseApp): subscriptions`] \(*Object or Function*): Its result, or the argument itself must be a plain object. Each value must either be a path to a location in your database, a query object or a function. If you omit it, the default implementation just passes `firebaseApp` as a prop to your component.
 
 #### Returns
 
-A React component class that injects subscriptions and actions into your component according to the specified options.
+A React component class that passes subscriptions and actions as props to your component according to the specified options.
 
 ##### Static Properties
 
 * `WrappedComponent` *(Component)*: The original component class passed to `connect()`.
 
-#### Remarks
-
-* It needs to be invoked two times. The first time with its arguments described above, and a second time, with the component: `connect(mapPropsToSubscriptions, mapFirebaseToProps, mergeProps)(MyComponent)`.
-
-* It does not modify the passed React component. It returns a new, connected component, that you should use instead.
-
 #### Examples
 
 > Runnable examples can be found in the [examples folder](examples/).
 
-##### Inject `firebase` and `todos`
+##### Pass `todos` as a prop
 
-  > Note: The value of `todos` is analogous to https://my-firebase.firebaseio.com/todos.
+  > Note: The value of `todos` is the path to your data in Firebase. This is equivalent to `firebase.database().ref('todo')`.
 
 ```js
-function mapPropsToSubscriptions() {
-  return { todos: 'todos' }
+const mapFirebaseToProps = {
+  todos: 'todos'
 }
 
-export default connect(mapPropsToSubscriptions)(TodoApp)
+export default connect(mapFirebaseToProps)(TodoApp)
 ```
 
-#####  Inject `todos` and a function that adds a new todo (`addTodo`)
+#####  Pass `todos` and a function that adds a new todo (`addTodo`) as props
 
 ```js
-function mapPropsToSubscriptions() {
-  return { todos: 'todos' }
-}
+const mapFirebaseToProps = (props, ref) => ({
+  todos: 'todos',
+  addTodo: todo => ref('todos').push(todo)
+})
 
-function mapFirebaseToProps(firebase) {
-  return {
-    addTodo: function(todo) {
-      firebase.child('todos').push(todo)
-    }
-  }
-}
+export default connect(mapFirebaseToProps)(TodoApp)
+```
+
+#####  Pass `todos`, `completedTodos`, a function that completes a todo (`completeTodo`) and one that logs in as props
 
-export default connect(mapPropsToSubscriptions, mapFirebaseToProps)(TodoApp)
+```js
+const mapFirebaseToProps = (props, ref, { auth }) => ({
+  todos: 'todos',
+  completedTodos: {
+    path: 'todos',
+    orderByChild: 'completed',
+    equalTo: true
+  },
+  completeTodo = id => ref(`todos/${id}/completed`).set(true),
+  login: (email, password) => auth().signInWithEmailAndPassword(email, password)
+})
+
+export default connect(mapFirebaseToProps)(TodoApp)
 ```
 
-#####  Inject `todos`, `completedTodos` and a function that completes a todo (`completeTodo`)
+### `<Provider firebaseApp>`
+
+By default `connect()` will use the [default Firebase App](https://firebase.google.com/docs/reference/js/firebase.app). If you have multiple Firebase App references in your application you may use this to specify the Firebase App reference available to `connect()` calls in the component hierarchy below.
+
+If you *really* need to, you can manually pass `firebaseApp` as a prop to every `connect()`ed component, but we only recommend to do this for stubbing `firebaseApp` in unit tests, or in non-fully-React codebases. Normally, you should just use `<Provider>`.
+
+#### Props
+
+* `firebaseApp` (*[App](https://firebase.google.com/docs/reference/js/firebase.app.App)*): A Firebase App reference.
+* `children` (*ReactElement*): The root of your component hierarchy.
+
+#### Example
 
 ```js
-function mapPropsToSubscriptions() {
-  return {
-    todos: 'todos',
-    completedTodos: function(firebase) {
-      return firebase.child('todos').orderByChild('completed').equalTo(true)
-    }
-  }
-}
+import { initializeApp } from 'firebase'
 
-function mapFirebaseToProps(firebase) {
-  return {
-    completeTodo: function(id) {
-      firebase.child('todos').child(id).child('completed').set(true)
-    }
-  }
-}
+const firebaseApp = initializeApp({
+  databaseURL: 'https://my-firebase.firebaseio.com'
+})
 
-export default connect(mapPropsToSubscriptions, mapFirebaseToProps)(TodoApp)
+ReactDOM.render(
+  <Provider firebaseApp={firebaseApp}>
+    <MyRootComponent />
+  </Provider>,
+  rootEl
+)
 ```
 
 ## License

.eslintrc

@@ -1,10 +1,12 @@
 machine:
   node:
-    version: 5.9.1
+    version: stable
 
 dependencies:
+  pre:
+    - curl -o- -L https://yarnpkg.com/install.sh | TERM=xterm bash
   override:
-    - npm install --ignore-scripts
+    - yarn
 
 test:
   override:

README.md

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "import/no-extraneous-dependencies": ["error", {"devDependencies": true}]
+  }
+}

circle.yml

@@ -1,6 +1,9 @@
-import React, { PropTypes } from 'react';
-import { connect } from 'react-firebase';
-import { partial } from 'lodash';
+import React, { PropTypes } from 'react'
+import { partial } from 'lodash'
+import { connect } from '../../src'
+import { getSandboxedPath } from '../common'
+
+const countPath = getSandboxedPath('count')
 
 const Count = ({ count, setCount }) => (
   <div>
@@ -9,16 +12,16 @@ const Count = ({ count, setCount }) => (
     <button onClick={partial(setCount, count - 1)}>Decrement</button>
     <button onClick={partial(setCount, count + 1)}>Increment</button>
   </div>
-);
+)
 
 Count.propTypes = {
   count: PropTypes.number,
   setCount: PropTypes.func.isRequired,
-};
+}
 
-const mapPropsToSubscriptions = () => ({ count: 'count' });
-const mapFirebaseToProps = firebase => ({
-  setCount: count => firebase.child('count').set(count),
-});
+const mapFirebaseToProps = (props, ref) => ({
+  count: countPath,
+  setCount: count => ref(countPath).set(count),
+})
 
-export default connect(mapPropsToSubscriptions, mapFirebaseToProps)(Count);
+export default connect(mapFirebaseToProps)(Count)

examples/.eslintrc

@@ -1,14 +1,8 @@
-import React from 'react';
-import { render } from 'react-dom';
-import Count from './Count';
-import createDemoRef from '../createDemoRef';
+import React from 'react'
+import { render } from 'react-dom'
+import { initializeDemoApp } from '../common'
+import Count from './Count'
 
-const firebase = createDemoRef('basic');
+initializeDemoApp()
 
-const App = () => (
-  <div>
-    <Count firebase={firebase} />
-  </div>
-);
-
-render(<App />, document.getElementById('example'));
+render(<Count />, document.getElementById('example'))

examples/basic/Count.js

@@ -0,0 +1,7 @@
+import { initializeApp } from 'firebase/app'
+import 'firebase/database'
+
+export const getSandboxedPath = path => `${process.env.SANDBOX_PATH}/${path}`
+export const initializeDemoApp = () => initializeApp({
+  databaseURL: 'https://react-firebase-sandbox.firebaseio.com',
+})

examples/basic/index.js

@@ -1,47 +1,50 @@
-import React, { Component, PropTypes } from 'react';
-import { connect } from 'react-firebase';
+import React, { Component, PropTypes } from 'react'
+import { connect } from '../../src'
+import { getSandboxedPath } from '../common'
+
+const usersPath = getSandboxedPath('complex/users')
 
 class AddUser extends Component {
   constructor(props) {
-    super(props);
+    super(props)
 
     this.state = {
       name: '',
-    };
+    }
   }
 
   onChange(event) {
-    const { name, value } = event.target;
+    const { name, value } = event.target
 
     this.setState({
       [name]: value,
-    });
+    })
   }
 
   onSubmit(event) {
-    event.preventDefault();
+    event.preventDefault()
 
-    this.props.addUser(this.state.name);
+    this.props.addUser(this.state.name)
   }
 
   render() {
-    const { name } = this.state;
+    const { name } = this.state
 
     return (
-      <form onSubmit={::this.onSubmit}>
-        <input name="name" value={name} onChange={::this.onChange} />
+      <form onSubmit={event => this.onSubmit(event)}>
+        <input name="name" value={name} onChange={event => this.onChange(event)} />
         <button type="submit" disabled={!name}>Add user</button>
       </form>
-    );
+    )
   }
 }
 
 AddUser.propTypes = {
   addUser: PropTypes.func.isRequired,
-};
+}
 
-const mapFirebaseToProps = firebase => ({
-  addUser: name => firebase.child('users').push({ name }),
-});
+const mapFirebaseToProps = (props, ref) => ({
+  addUser: name => ref(usersPath).push({ name }),
+})
 
-export default connect(null, mapFirebaseToProps)(AddUser);
+export default connect(mapFirebaseToProps)(AddUser)