fix(docs): utils no longer require newer node or babel-node

* fix(docs): make examples of HOCs more consistent
* fix(examples): update react-native example to use expo
* fix(examples): update example deps

Author: prescottprue

bin/api-docs-generate.js

@@ -60,16 +60,17 @@ function generateDocForFile(file) {
     })
 }
 
-;(async function() {
+;(function() {
   console.log(
     'Generating API documentation (docs/api) from JSDoc comments within src...\n'
   )
-  try {
-    await Promise.all(files.map(generateDocForFile))
-    console.log('\nAPI documentation generated successfully!')
-    process.exit(0)
-  } catch (err) {
-    console.log('Error generating API documentation: ', err.message || err)
-    process.exit(1)
-  }
+  Promise.all(files.map(generateDocForFile))
+    .then(() => {
+      console.log('\nAPI documentation generated successfully!')
+      process.exit(0)
+    })
+    .catch(err => {
+      console.log('Error generating API documentation: ', err.message || err)
+      process.exit(1)
+    })
 })()

bin/api-docs-upload.js

@@ -74,15 +74,16 @@ function uploadList(files) {
   )
 }
 
-;(async function() {
-  try {
-    await runCommand('gsutil') // check for existence of gsutil
-    await uploadList(first)
-    await uploadList(second)
-    console.log('Docs uploaded successfully') // eslint-disable-line no-console
-    process.exit(0)
-  } catch (err) {
-    console.log('Error uploading docs:', err.message) // eslint-disable-line no-console
-    process.exit(1)
-  }
+;(function() {
+  runCommand('gsutil') // check for existence of gsutil
+    .then(() => uploadList(first))
+    .then(() => uploadList(second))
+    .then(() => {
+      console.log('Docs uploaded successfully') // eslint-disable-line no-console
+      process.exit(0)
+    })
+    .catch(err => {
+      console.log('Error uploading docs:', err.message) // eslint-disable-line no-console
+      process.exit(1)
+    })
 })()

docs/api/connect.md

@@ -23,7 +23,7 @@ needing to access a firebase instance created under a different store key.
 _Basic_
 
 ```javascript
-// this.props.firebase set on App component as firebase object with helpers
+// props.firebase set on App component as firebase object with helpers
 import { createFirebaseConnect } from 'react-redux-firebase'
 // create firebase connect that uses another redux store
 const firebaseConnect = createFirebaseConnect('anotherStore')
@@ -59,6 +59,7 @@ export default firebaseConnect()(App)
 _Ordered Data_
 
 ```javascript
+import React from 'react'
 import { compose } from 'redux'
 import { connect } from 'react-redux'
 import { firebaseConnect } from 'react-redux-firebase'
@@ -72,37 +73,42 @@ const enhance = compose(
   })
 )
 
-// use enhnace to pass todos list as props.todos
-const Todos = enhance(({ todos })) =>
-  <div>
-    {JSON.stringify(todos, null, 2)}
-  </div>
-)
+function Todos({ todos }) {
+  return (
+    <div>
+      {JSON.stringify(todos, null, 2)}
+    </div>
+  )
+}
 
 export default enhance(Todos)
 ```
 
 _Data that depends on props_
 
 ```javascript
+import React from 'react'
 import { compose } from 'redux'
 import { connect } from 'react-redux'
-import { firebaseConnect, getVal } from 'react-redux-firebase'
+import { get } from 'lodash'
+import { firebaseConnect } from 'react-redux-firebase'
 
 const enhance = compose(
   firebaseConnect((props) => ([
     `posts/${props.postId}` // sync /posts/postId from firebase into redux
   ]),
   connect((state, props) => ({
-    post: getVal(state.firebase.data, `posts/${props.postId}`),
+    post: get(state.firebase.data, `posts.${props.postId}`),
   })
 )
 
-const Post = ({ post }) => (
-  <div>
-    {JSON.stringify(post, null, 2)}
-  </div>
-)
+function Post({ post }) {
+  return (
+    <div>
+      {JSON.stringify(post, null, 2)}
+    </div>
+  )
+}
 
 export default enhance(Post)
 ```

docs/api/firestoreConnect.md

@@ -66,9 +66,11 @@ import { firestoreConnect } from 'react-redux-firebase'
 
 // pass todos list from redux as props.todosList
 export default compose(
-  firestoreConnect(() => ['todos']), // sync todos collection from Firestore into redux
+  firestoreConnect(['todos']), // sync todos collection from Firestore into redux
   connect((state) => ({
-    todosList: state.firestore.data.todos
+    todosList: state.firestore.data.todos,
+    profile: state.firestore.profile, // pass profile data as props.profile
+    auth: state.firestore.auth // pass auth data as props.auth
   })
 )(SomeComponent)
 ```

docs/api/helpers.md

@@ -45,7 +45,6 @@ _Base Paths_
 ```javascript
 import { connect } from 'react-redux'
 import { firebaseConnect, getVal } from 'react-redux-firebase'
-// easily replace pathToJS with getVal
 
 export default connect(({ firebase }) => ({
   // this.props.auth loaded from state.firebase.auth
@@ -106,7 +105,7 @@ const enhance = compose(
   }))
 )
 
-const Todos = ({ todos }) => {
+function Todos({ todos }) {
   // Message for if todos are loading
   if(!isLoaded(todos)) {
     return <span>Loading...</span>
@@ -155,7 +154,7 @@ const enhance = compose(
   }))
 )
 
-const Todos = ({ todos }) => {
+function Todos({ todos }) {
   // Message for if todos are loading
   if(!isLoaded(todos)) {
     return <span>Loading...</span>

docs/api/withFirebase.md

@@ -53,24 +53,26 @@ actions.
 _Basic_
 
 ```javascript
+import React from 'react'
 import { withFirebase } from 'react-redux-firebase'
 
-function AddData({ firebase: { push } }) {
+function AddTodo({ firebase: { push } }) {
   return (
     <div>
       <button onClick={() => push('todos', { done: false, text: 'Sample' })}>
         Add Sample Todo
       </button>
     </div>
-  )
+   )
 }
 
-export default withFirebase(AddData)
+export default withFirebase(AddTodo)
 ```
 
 _Within HOC Composition_
 
 ```javascript
+import React from 'react'
 import { compose } from 'redux' // can also come from recompose
 import { withHandlers } from 'recompose'
 import { withFirebase } from 'react-redux-firebase'
@@ -85,8 +87,8 @@ function AddTodo({ addTodo }) {
   )
 }
 
-const enhance = compose(
-  withFirebase,
+export default compose(
+  withFirebase(AddTodo),
   withHandlers({
     addTodo: props => () =>
        props.firestore.add(
@@ -95,8 +97,6 @@ const enhance = compose(
        )
   })
 )
-
-export default enhance(AddTodo)
 ```
 
 Returns **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** Which accepts a component to wrap and returns the

docs/api/withFirestore.md

@@ -53,7 +53,7 @@ _Basic_
 import React from 'react'
 import { withFirestore } from 'react-redux-firebase'
 
-function AddData({ firebase: { add } }) {
+function AddTodo({ firestore: { add } }) {
   return (
     <div>
       <button onClick={() => add('todos', { done: false, text: 'Sample' })}>
@@ -87,10 +87,11 @@ function AddTodo({ addTodo }) {
 const enhance = compose(
   withFirestore,
   withHandlers({
-    addTodo: props => () => {
-      const newTodo = { done: false, text: 'Sample' }
-      return props.firestore.add({ collection: 'todos' }, newTodo)
-    }
+    addTodo: props => () =>
+       props.firestore.add(
+         { collection: 'todos' },
+         { done: false, text: 'Sample' }
+       )
   })
 )
 

docs/integrations/react-native.md

@@ -13,9 +13,9 @@ Setup and use `react-redux-firebase` as normal (described in the [use section of
 [react-native complete example app](https://github.com/prescottprue/react-redux-firebase/tree/master/examples/complete/react-native)
 
 **NOTES**
-
+* The web SDK is actually used directly, so this method is as close as it comes to web dev
+* Slighly less performant than using native modules since the render thread is used for all JS
 * Only works for versions `v2.0.0` and higher. For older versions please view the docs associated with previous version.
-* Will not perform as well as using native modules since the render thread is used for all JS
 
 ## Native Modules