Support Firebase v9 (#369)

Co-authored-by: Sujish K Patel <[email protected]>

Author: jhuleatt

.all-contributorsrc

@@ -100,6 +100,8 @@ jobs:
           key: firebase_emulators
       - name: 'Download Artifacts'
         uses: actions/download-artifact@v2
+      - name: Check available files/dirs
+        run: ls -a
       - name: Expand Artifact
         run: |
           chmod +x reactfire-${{ github.run_id }}/unpack.sh
@@ -109,8 +111,8 @@ jobs:
   publish:
     runs-on: ubuntu-latest
     name: Publish (NPM)
-    needs: test
-    if: ${{ github.ref == 'refs/heads/main' || github.event_name == 'release' }}
+    needs: build
+    if: ${{ github.ref == 'refs/heads/main' || github.ref == 'refs/heads/modular-firebase' || github.event_name == 'release' }}
     steps:
       - name: Setup node
         uses: actions/setup-node@v2-beta

.github/workflows/test.yaml

@@ -26,3 +26,4 @@ publish.sh
 unpack.sh
 
 example/.parcel-cache/
+.firebaserc

.gitignore

@@ -1,41 +1,32 @@
 # ReactFire
 
-<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+Hooks, Context Providers, and Components that make it easy to interact with
+Firebase.
 
-[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)
+---
 
-<!-- ALL-CONTRIBUTORS-BADGE:END -->
+> **WARNING**: This branch is the work in progress for version 4 of ReactFire. [You can find version 3 here](https://github.com/firebaseextended/reactfire/tree/v3), if you're looking for documentation or to contribute to stable.
 
-Hooks, Context Providers, and Components that make it easy to interact with
-Firebase.
+---
 
 ## What is ReactFire?
 
 - **Easy realtime updates for your function components** - Hooks
   like `useUser`and `useFirestoreCollection` let you easily subscribe to
   auth state, realtime data, and all other Firebase SDK events. Plus, they automatically unsubscribe when your component unmounts.
 - **Access Firebase libraries from any component** - Need the Firestore SDK? `useFirestore`. Remote Config? `useRemoteConfig`.
-- **Built-in Support for prefetching** - Decrease your load times by starting a connection to products like Firestore, Auth, or Realtime Database before the component that consumes that data is rendered with functions like `preloadUser`
-- **Safely configure Firebase libraries** - Libraries like Firestore and Remote Config require setting like `enablePersistence` to be set before any data fetches are made. This can be tough to support in React's world of re-renders. ReactFire gives you a trusted way to set these settings so you're sure they're set before anything else.
-
-### Experimental [concurrent mode](https://reactjs.org/docs/concurrent-mode-suspense.html) features
-
-- **Loading states handled by `<Suspense>`** - ReactFire's hooks throw promises
-  that Suspense can catch. No more `isLoaded ?...` - let React
-  [handle it for you](https://reactjs.org/docs/concurrent-mode-suspense.html).
-- **Faster initial page load times** - Load only the code you need, when you need it, with `useFirestore`, `useAuth`, `useRemoteConfig`, and more.
-- **Convenient components for common use cases** - Only want to render a component if a user is signed in? Wrap it in `<AuthCheck />`. Need to automatically instrument your `Suspense` load times with [RUM](https://firebase.google.com/docs/perf-mon)? Use `<SuspenseWithPerf />`.
+- **Safely configure Firebase libraries** - Libraries like Firestore and Remote Config require settings like `enablePersistence` to be set before any data fetches are made. This can be tough to support in React's world of re-renders. ReactFire gives you `useInitFirestore` and `useInitRemoteConfig` hooks that guarantee they're set before anything else.
 
 ## Install
 
 ```bash
 # npm
-npm install --save reactfire firebase
+npm install --save reactfire@exp firebase@exp
 
 # or
 
 # yarn
-yarn add reactfire firebase
+yarn add reactfire@exp firebase@exp
 ```
 
 Depending on your targeted platforms you may need to install polyfills. The most commonly needed will be [globalThis](https://caniuse.com/#search=globalThis) and [Proxy](https://caniuse.com/#search=Proxy).
@@ -46,33 +37,32 @@ Depending on your targeted platforms you may need to install polyfills. The most
   - Advanced: If you're using Concurrent Mode, check out the [Concurrent Mode quickstart](./docs/quickstart-concurrent-mode.md)
 - [**Common Use Cases**](./docs/use.md)
 - [**API Reference**](./docs/reference)
+- [**v3 -> v4 Upgrade Guide**](./docs/upgrade-guide.md)
 
 ## Example use
 
 Check out the
-[live version on StackBlitz](https://stackblitz.com/fork/reactfire-sample)!
+[live version on StackBlitz](https://stackblitz.com/fork/reactfire-v4-sample)!
 
 ```jsx
-import React, { Component } from 'react';
+import React from 'react';
 import { render } from 'react-dom';
 
-import 'firebase/firestore';
-import { FirebaseAppProvider, useFirestoreDocData, useFirestore } from 'reactfire';
+import { doc, getFirestore } from 'firebase/firestore';
+import { FirebaseAppProvider, FirestoreProvider, useFirestoreDocData, useFirestore, useFirebaseApp } from 'reactfire';
 
 const firebaseConfig = {
-  /* Add your config from the Firebase Console */
+  /* Add in your config object from the Firebase console */
 };
 
-function Burrito() {
-  // easily access the Firestore library
-  const burritoRef = useFirestore()
-    .collection('tryreactfire')
-    .doc('burrito');
+function BurritoTaste() {
+  // access the Firestore library
+  const burritoRef = doc(useFirestore(), 'tryreactfire', 'burrito');
 
   // subscribe to a document for realtime updates. just one line!
   const { status, data } = useFirestoreDocData(burritoRef);
 
-  // easily check the loading status
+  // check the loading status
   if (status === 'loading') {
     return <p>Fetching burrito flavor...</p>;
   }
@@ -81,15 +71,21 @@ function Burrito() {
 }
 
 function App() {
+  const firestoreInstance = getFirestore(useFirebaseApp());
   return (
-    <FirebaseAppProvider firebaseConfig={firebaseConfig}>
+    <FirestoreProvider sdk={firestoreInstance}>
       <h1>🌯</h1>
-      <Burrito />
-    </FirebaseAppProvider>
+      <BurritoTaste />
+    </FirestoreProvider>
   );
 }
 
-render(<App />, document.getElementById('root'));
+render(
+  <FirebaseAppProvider firebaseConfig={firebaseConfig}>
+    <App />
+  </FirebaseAppProvider>,
+  document.getElementById('root')
+);
 ```
 
 ---
@@ -104,24 +100,9 @@ render(<App />, document.getElementById('root'));
 
 This repository is maintained by Googlers but is not a supported Firebase product. Issues here are answered by maintainers and other community members on GitHub on a best-effort basis.
 
-## Contributors ✨
-
-Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
-
-<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-<table>
-  <tr>
-    <td align="center"><a href="http://www.dfweb.no"><img src="https://avatars1.githubusercontent.com/u/45217974?v=4" width="100px;" alt=""/><br /><sub><b>w3bdesign</b></sub></a><br /><a href="https://github.com/FirebaseExtended/reactfire/commits?author=w3bdesign" title="Code">💻</a></td>
-    <td align="center"><a href="http://prue.io"><img src="https://avatars0.githubusercontent.com/u/2992224?v=4" width="100px;" alt=""/><br /><sub><b>Scott Prue</b></sub></a><br /><a href="https://github.com/FirebaseExtended/reactfire/commits?author=prescottprue" title="Code">💻</a></td>
-    <td align="center"><a href="http://git.io/jhuleatt"><img src="https://avatars0.githubusercontent.com/u/3759507?v=4" width="100px;" alt=""/><br /><sub><b>Jeff</b></sub></a><br /><a href="https://github.com/FirebaseExtended/reactfire/commits?author=jhuleatt" title="Code">💻</a></td>
-  </tr>
-</table>
-
-<!-- markdownlint-enable -->
-<!-- prettier-ignore-end -->
+### Extra Experimental [concurrent mode](https://reactjs.org/docs/concurrent-mode-suspense.html) features
 
-<!-- ALL-CONTRIBUTORS-LIST:END -->
-
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+- **Loading states handled by `<Suspense>`** - ReactFire's hooks throw promises
+  that Suspense can catch. No more `isLoaded ?...` - let React
+  [handle it for you](https://reactjs.org/docs/concurrent-mode-suspense.html).
+- **Automatically instrument your `Suspense` load times** - Need to automatically instrument your `Suspense` load times with [RUM](https://firebase.google.com/docs/perf-mon)? Use `<SuspenseWithPerf />`.

README.md

@@ -11,8 +11,8 @@ if [[ $GITHUB_REF =~ $TAG_TEST ]]; then
         NPM_TAG=latest
     fi;
 else
-    OVERRIDE_VERSION=$(node -e "console.log(require('./package.json').version)")-canary.$SHORT_SHA
-    NPM_TAG=canary
+    OVERRIDE_VERSION=$(node -e "console.log(require('./package.json').version)")-exp.$SHORT_SHA
+    NPM_TAG=exp
 fi;
 
 npm --no-git-tag-version --allow-same-version -f version $OVERRIDE_VERSION

build.sh

@@ -0,0 +1,9 @@
+{
+  "rules": {
+    ".read": "true",
+    ".write": "true",
+    "items": {
+      ".indexOn": "a"
+    }
+  }
+}