Update READMEs (#3551)

Author: hsubox76

packages/component/README.md

@@ -3,14 +3,6 @@
 _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**

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 `<script>` tag:
 
@@ -56,12 +60,17 @@ Include Firebase in your web application via a `<script>` tag:
 </script>
 ```
 
-*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).

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

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';
 

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.
+  

packages/util/README.md

@@ -5,14 +5,6 @@ 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**
@@ -30,3 +22,4 @@ const utils = require('@firebase/util');
 
 // Do stuff with any of the re-exported `utils`
 ```
+

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: