From e6cc5cb831999b1fffec29b3187a912491ebcd50 Mon Sep 17 00:00:00 2001 From: Christina Holland Date: Mon, 3 Aug 2020 12:27:22 -0700 Subject: [PATCH 1/4] Update READMEs --- packages/component/README.md | 16 ---------------- packages/firebase/README.md | 22 ++++++++++++++++------ packages/firestore/README.md | 23 ----------------------- packages/rxfire/README.md | 8 ++++---- packages/template/README.md | 5 +---- packages/util/README.md | 26 -------------------------- packages/webchannel-wrapper/README.md | 8 -------- 7 files changed, 21 insertions(+), 87 deletions(-) diff --git a/packages/component/README.md b/packages/component/README.md index cade170b435..47e7054da3f 100644 --- a/packages/component/README.md +++ b/packages/component/README.md @@ -2,19 +2,3 @@ _NOTE: This is specifically tailored for Firebase JS SDK usage, if you are not a member of the Firebase team, please avoid using this package_ - -## Installation - -You can install this wrapper by running the following in your project: - -```bash -$ npm install @firebase/component -``` - -## Usage - -**ES Modules** - -```javascript -import { Component } from '@firebase/component'; -``` diff --git a/packages/firebase/README.md b/packages/firebase/README.md index d7dbab712e3..7c20ddd7321 100644 --- a/packages/firebase/README.md +++ b/packages/firebase/README.md @@ -14,7 +14,7 @@ For more information, visit: The Firebase Realtime Database lets you store and query user data, and makes it available between users in realtime. - [Cloud Firestore](https://firebase.google.com/docs/firestore/quickstart) - - Cloud Firestore is a flexible, scalable database for mobile, web, and server + Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. - [Firebase Storage](https://firebase.google.com/docs/storage/web/start) - Firebase Storage lets you upload and store user generated content, such as @@ -37,6 +37,10 @@ you should use the ## Get the code (browser) ### Script include +>This brings in all Firebase features. See +>["Include only the features you need"](#include-only-the-features-you-need) +>below for +>how to minimize download size by only including the scripts you need. Include Firebase in your web application via a ` ``` -*Note: To get a filled in version of the above code snippet, go to the +_Note: To get a filled in version of the above code snippet, go to the [Firebase console](https://console.firebase.google.com/) for your app and click on "Add -Firebase to your web app".* +Firebase to your web app"._ ### npm bundler (Browserify, Webpack, etc.) +>This brings in all Firebase features. See +>["Include only the features you need"](#include-only-the-features-you-need) +>below for +>how to minimize bundle size by only importing the features you need. + The Firebase JavaScript npm package contains code that can be run in the browser after combining the modules you use with a package bundler (e.g., [Browserify](http://browserify.org/), [Webpack](https://webpack.github.io/)). @@ -173,11 +182,12 @@ var app = firebase.initializeApp({ ... }); // ... ``` -If you are using native ES6 module with --experimental-modules flag, you should do: +If you are using native ES6 module with --experimental-modules flag (or Node 12+) +you should do: ```js // This import loads the firebase namespace. -import firebase from 'firebase/app'; +import * as firebase from 'firebase/app'; // These imports load individual services into the firebase namespace. import 'firebase/auth'; @@ -186,7 +196,6 @@ import 'firebase/database'; _Known issue for typescript users with --experimental-modules: you have to set allowSyntheticDefaultImports to true in tsconfig.json to pass the type check. Use it with caution since it makes the assumption that all modules have a default export, which might not be the case for the other dependencies you have. And Your code will break if you try to import the default export from a module that doesn't have default export._ - Firebase Storage is not included in the server side Firebase npm module. Instead, you can use the [`google-cloud` Node.js client](https://github.com/GoogleCloudPlatform/google-cloud-node). @@ -231,4 +240,5 @@ The Firebase changelog can be found at [firebase.google.com](https://firebase.google.com/support/release-notes/js). ## Browser/environment compatibility + Please see [Environment Support](https://firebase.google.com/support/guides/environments_js-sdk). diff --git a/packages/firestore/README.md b/packages/firestore/README.md index c23c7e3e747..504f6ab2b6f 100644 --- a/packages/firestore/README.md +++ b/packages/firestore/README.md @@ -10,29 +10,6 @@ If you are developing a Node.js application that requires administrative access use the [`@google-cloud/firestore`](https://www.npmjs.com/package/@google-cloud/firestore) Server SDK with your developer credentials. -## Usage - -You can then use the firebase namespace exposed by this package as illustrated -below: - -**ES Modules** - -```javascript -import firebase from '@firebase/app'; -import '@firebase/firestore' - -// Do stuff w/ `firebase` and `firebase.firestore` -``` - -**CommonJS Modules** - -```javascript -const firebase = require('@firebase/app').default; -require('@firebase/firestore'); - -// Do stuff with `firebase` and `firebase.firestore` -``` - ## Documentation For comprehensive documentation please see the [Firebase Reference diff --git a/packages/rxfire/README.md b/packages/rxfire/README.md index c9e1e7010d9..9c12afdeb2e 100644 --- a/packages/rxfire/README.md +++ b/packages/rxfire/README.md @@ -26,7 +26,7 @@ Make sure to install Firebase and RxJS individually as they are peer dependencie ## Example use: ```ts -import firebase from 'firebase/app'; +import * as firebase from 'firebase/app'; import 'firebase/firestore'; import { collectionData } from 'rxfire/firestore'; import { tap } from 'rxjs/operators'; @@ -49,7 +49,7 @@ RxJS provides multiple operators and creation methods for combining observable s The example below streams a list of "cities" from Firestore and then retrieves their image from a Cloud Storage bucket. Both tasks are asynchronous but RxJS makes it easy to combine these tasks together. ```ts -import firebase from 'firebase/app'; +import * as firebase from 'firebase/app'; import 'firebase/firestore'; import 'firebase/storage'; import { collectionData } from 'rxfire/firestore'; @@ -79,7 +79,7 @@ collectionData(citiesRef, 'id') RxFire is a complementary library to Firebase. It is not meant to wrap the entire Firebase SDK. RxFire's purpose is to simplify async streams from Firebase. You need to import the Firebase SDK and initialize an app before using RxFire. ```ts -import firebase from 'firebase/app'; +import * as firebase from 'firebase/app'; import 'firebase/storage'; // import only the features needed import { getDownloadURL } from 'rxfire/storage'; @@ -104,7 +104,7 @@ import { } from 'rxfire/functions'; RxFire is a set of functions. Most functions create observables and from there you can use regular RxJS operators. Some functions are custom operators. But at the end of the day, it's all just functions. This is important for **tree shaking**. Any unused functions are stripped from your final build if you use a module bundler like Webpack or Rollup. ```ts -import firebase from 'firebase/app'; +import * as firebase from 'firebase/app'; import 'firebase/storage'; import { getDownloadURL, put /* not used! */ } 'rxfire/storage'; diff --git a/packages/template/README.md b/packages/template/README.md index ee3853f11b5..c1ef09d850f 100644 --- a/packages/template/README.md +++ b/packages/template/README.md @@ -7,7 +7,4 @@ Firebase JS SDK. It will give you a couple things OOTB: with the rest of the SDK. - **Isomorphic Testing/Coverage:** Your tests will be run in both Node.js and Browser environments and coverage from both, collected. -- **Links to all of the other packages:** Should your new package need to take - a dependency on any of the other packages in this monorepo (e.g. - `@firebase/app`, `@firebase/util`, etc), all those dependencies are already - set up, you can just remove the ones you don't need. + diff --git a/packages/util/README.md b/packages/util/README.md index d678697035f..e2ece70eb68 100644 --- a/packages/util/README.md +++ b/packages/util/README.md @@ -4,29 +4,3 @@ _NOTE: This is specifically tailored for Firebase JS SDK usage, if you are not a member of the Firebase team, please avoid using this package_ This is a wrapper of some Webchannel Features for the Firebase JS SDK. - -## Installation - -You can install this wrapper by running the following in your project: - -```bash -$ npm install @firebase/util -``` - -## Usage - -**ES Modules** - -```javascript -import { Deferred } from '@firebase/util'; - -// Do stuff with Deferred or any of the other Utils you import -``` - -**CommonJS Modules** - -```javascript -const utils = require('@firebase/util'); - -// Do stuff with any of the re-exported `utils` -``` diff --git a/packages/webchannel-wrapper/README.md b/packages/webchannel-wrapper/README.md index a4dbb40db27..75ce0a4ce7a 100644 --- a/packages/webchannel-wrapper/README.md +++ b/packages/webchannel-wrapper/README.md @@ -4,14 +4,6 @@ _NOTE: This is specifically tailored for Firebase JS SDK usage, if you are not a This is a wrapper of some Webchannel Features for the Firebase JS SDK. -## Installation - -You can install this wrapper by running the following in your project: - -```bash -$ npm install @firebase/webchannel-wrapper -``` - ## Usage The following 5 modules are exposed for use: From b872ed412ff7cd8e8504b0dbea0c57d72d8c63b8 Mon Sep 17 00:00:00 2001 From: Christina Holland Date: Mon, 3 Aug 2020 12:34:18 -0700 Subject: [PATCH 2/4] Revert yarn.locko From d517df6b1e5553f7b40aa144f32ef9d3d8f1bfd9 Mon Sep 17 00:00:00 2001 From: Christina Holland Date: Mon, 3 Aug 2020 16:57:06 -0700 Subject: [PATCH 3/4] Restore component usage in README --- packages/component/README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/component/README.md b/packages/component/README.md index 47e7054da3f..242dacbf959 100644 --- a/packages/component/README.md +++ b/packages/component/README.md @@ -2,3 +2,11 @@ _NOTE: This is specifically tailored for Firebase JS SDK usage, if you are not a member of the Firebase team, please avoid using this package_ + +## Usage + +**ES Modules** + +```javascript +import { Component } from '@firebase/component'; +``` From bc409b97fc9f02610be8dce5dee463dfe6b71026 Mon Sep 17 00:00:00 2001 From: Christina Holland Date: Mon, 10 Aug 2020 14:42:29 -0700 Subject: [PATCH 4/4] Address PR comments --- packages/util/README.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/util/README.md b/packages/util/README.md index e2ece70eb68..b79aeb6034b 100644 --- a/packages/util/README.md +++ b/packages/util/README.md @@ -4,3 +4,22 @@ _NOTE: This is specifically tailored for Firebase JS SDK usage, if you are not a member of the Firebase team, please avoid using this package_ This is a wrapper of some Webchannel Features for the Firebase JS SDK. + +## Usage + +**ES Modules** + +```javascript +import { Deferred } from '@firebase/util'; + +// Do stuff with Deferred or any of the other Utils you import +``` + +**CommonJS Modules** + +```javascript +const utils = require('@firebase/util'); + +// Do stuff with any of the re-exported `utils` +``` +