diff --git a/package.json b/package.json index 730bdf469..c002b0790 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-redux-firebase", - "version": "2.0.0-alpha.2", + "version": "2.0.0-alpha.3", "description": "Redux integration for Firebase. Comes with a Higher Order Component for use with React.", "main": "lib/index.js", "module": "es/index.js", diff --git a/src/connect.js b/src/connect.js deleted file mode 100644 index db853dbf2..000000000 --- a/src/connect.js +++ /dev/null @@ -1,120 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import { isEqual } from 'lodash' -import hoistStatics from 'hoist-non-react-statics' -import { watchEvents, unWatchEvents } from './actions/query' -import { getEventsFromInput, createCallable } from './utils' - -/** - * @name createFirebaseConnect - * @description WARNING!! Advanced feature, and only be used when needing to - * access a firebase instance created under a different store key - * @param {String} storeKey - Name of key of store to connect to (store that contains state.firebase) - * @return {Function} - that returns a firebaseConnect function, which is later used to wrap a component - * @example Data - * import { connect } from 'react-redux' - * import { createFirebaseConnect } from 'react-redux-firebase' - * - * // sync /todos from firebase (in other store) into redux - * const fbWrapped = createFirebaseConnect('someOtherName')(['todos']) - * - * // pass todos list from redux as this.props.todosList - * export default connect(({ firebase: data: { todos }, auth, profile }) => ({ - * todos, - * profile, // pass profile data as this.props.profile - * auth // pass auth data as this.props.auth - * }))(fbWrapped) - */ -export const createFirebaseConnect = (storeKey = 'store') => (dataOrFn = []) => WrappedComponent => { - /** - * @name firebaseConnect - * @extends React.Component - * @description Higher Order Component that automatically listens/unListens - * to provided firebase paths using React's Lifecycle hooks. - * @param {Array} watchArray - Array of objects or strings for paths to sync - * from Firebase. Can also be a function that returns the array. The function - * is passed the current props and the firebase object. - * @return {Function} - that accepts a component to wrap and returns the wrapped component - * @example Basic - * // this.props.firebase set on App component as firebase object with helpers - * import { firebaseConnect } from 'react-redux-firebase' - * export default firebaseConnect()(App) - * @example Data - * import { connect } from 'react-redux' - * import { firebaseConnect } from 'react-redux-firebase' - * - * // sync /todos from firebase into redux - * const fbWrapped = firebaseConnect([ - * 'todos' - * ])(App) - * - * // pass todos list from redux as this.props.todosList - * export default connect(({ firebase: data: { todos }, auth, profile }) => ({ - * todos, - * profile, // pass profile data as this.props.profile - * auth // pass auth data as this.props.auth - * }))(fbWrapped) - */ - class FirebaseConnect extends Component { - constructor (props, context) { - super(props, context) - this._firebaseEvents = [] - this.firebase = null - } - - static contextTypes = { - [storeKey]: PropTypes.object.isRequired - }; - - componentWillMount () { - const { firebase, dispatch } = this.context[storeKey] - - // Allow function to be passed - const inputAsFunc = createCallable(dataOrFn) - this.prevData = inputAsFunc(this.props, firebase) - - const { ref, helpers, storage, database, auth } = firebase - this.firebase = { ref, storage, database, auth, ...helpers } - - this._firebaseEvents = getEventsFromInput(this.prevData) - - watchEvents(firebase, dispatch, this._firebaseEvents) - } - - componentWillUnmount () { - const { firebase, dispatch } = this.context.store - unWatchEvents(firebase, dispatch, this._firebaseEvents) - } - - componentWillReceiveProps (np) { - const { firebase, dispatch } = this.context.store - const inputAsFunc = createCallable(dataOrFn) - const data = inputAsFunc(np, firebase) - - // Handle a data parameter having changed - if (!isEqual(data, this.prevData)) { - this.prevData = data - // UnWatch all current events - unWatchEvents(firebase, dispatch, this._firebaseEvents) - // Get watch events from new data - this._firebaseEvents = getEventsFromInput(data) - // Watch new events - watchEvents(firebase, dispatch, this._firebaseEvents) - } - } - - render () { - return ( - - ) - } - } - - return hoistStatics(FirebaseConnect, WrappedComponent) -} - -export default createFirebaseConnect() diff --git a/src/helpers.js b/src/helpers.js index 5e5df6e2c..0d2acf17f 100644 --- a/src/helpers.js +++ b/src/helpers.js @@ -12,8 +12,7 @@ import { defaultsDeep, isString, compact, - isFunction, - defaultsDeep + isFunction } from 'lodash' import { getPopulateObjs } from './utils/populate' diff --git a/src/index.js b/src/index.js index 9fb7e8213..d2ecf0d7a 100644 --- a/src/index.js +++ b/src/index.js @@ -1,12 +1,13 @@ -import connect from './connect' +import firebaseConnect, { createFirebaseInstance } from './createFirebaseInstance' import compose, { getFirebase } from './compose' import reducer from './reducer' import constants, { actionTypes } from './constants' import * as helpers from './helpers' export default { - firebase: connect, - firebaseConnect: connect, + firebase: firebaseConnect, + firebaseConnect, + createFirebaseInstance, firebaseStateReducer: reducer, reduxReactFirebase: compose, reactReduxFirebase: compose, diff --git a/webpack.config.js b/webpack.config.js index 632339bcc..017ea6381 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -21,6 +21,12 @@ const config = { commonjs2: 'react', amd: 'react', root: 'React' + }, + firebase: { + commonjs: 'firebase', + commonjs2: 'firebase', + amd: 'firebase', + root: 'Firebase' } }, plugins: []