Use Lazy Fire to delay importing Firebase modules

Author: kossnocorp

Diff for: CHANGELOG.md

@@ -23,6 +23,29 @@ See below for details.
 
 ### Changed
 
+- **BREAKING**: Use `lazyfire` for ESM-enabled web environments to make Firebase modules load on demand. It ensures maximum performance, but requires installation of additional dependency and change of application initialization.
+
+  So, if you're using webpack or another ESM-enabled bundler, install `lazyfire`:
+
+  ```bash
+  npm install lazyfire --save
+  # Or using Yarn:
+  yarn add lazyfire
+  ```
+
+  And then change `firebase.initializeApp` to `configureApp`:
+
+  ```diff
+  -import * as firebase from 'firebase/app'
+  -import 'firebase/firestore'
+  +import { configureApp } from 'lazyfire'
+
+  -firebase.initializeApp({
+  +configureApp({
+   // Firebase app configuration
+  })
+  ```
+
 - **BREAKING**: Make TypeScript 3.8 the minimal supported version.
 
 - **BREAKING**: `AnyUpdateValue` type was removed.

Diff for: README.md

@@ -34,27 +34,53 @@ yarn add typesaurus
 _Note that Typesaurus requires `firebase` package to work in the web environment and `firebase-admin` to work in Node.js. These packages aren't listed as dependencies,
 so that they won't install automatically along with the Typesaurus package._
 
+Additionally, when using with ESM-enabled bundler (like webpack), you'll need to install `lazyfire` that enables asynchronous importing of Firebase modules in the web environment:
+
+```sh
+npm install lazyfire --save
+# Or using Yarn:
+yarn add lazyfire
+```
+
+[Read more about Lazy Fire](https://github.com/kossnocorp/lazyfire).
+
 ## Configuration
 
-Typesaurus does not require additional configuration, however **when using with ESM-enabled bundler, you should transpile `node_modules`**. TypeScript preserves many modern languages features when it compiles to ESM code. So if you have to support older browsers, use Babel to process the dependencies code
+Typesaurus does not require additional configuration, however **when using with ESM-enabled bundler (like webpack), you should transpile `node_modules`**. TypeScript preserves many modern languages features when it compiles to ESM code. So if you have to support older browsers, use Babel to process the dependencies code.
 
 ## Get started
 
 ### Initialization
 
-To start working with Typesaurus, initialize Firebase normally.
+To start working with Typesaurus, you'll need to initialize Firebase.
 
-In the web environment ([see Firebase docs](https://firebase.google.com/docs/web/setup#add-sdks-initialize)):
+#### Web environment
+
+In the web environment when using ESM-enabled bundler (like webpack), use [Lazy Fire](https://github.com/kossnocorp/lazyfire) to configure the Firebase application:
+
+```ts
+import { configureApp } from 'lazyfire'
+
+configureApp({
+  // Firebase app configuration
+})
+```
+
+#### Legacy web environment
+
+In the web environment with ESM-disabled ([see Firebase docs](https://firebase.google.com/docs/web/setup#add-sdks-initialize)):
 
 ```ts
 import * as firebase from 'firebase/app'
 import 'firebase/firestore'
 
 firebase.initializeApp({
-  // Project configuration
+  // Firebase app configuration
 })
 ```
 
+#### Node.js environment
+
 In Node.js ([see Firebase docs](https://firebase.google.com/docs/admin/setup#initialize-sdk)):
 
 ```ts

Diff for: package.json

@@ -1,6 +1,6 @@
 {
   "name": "typesaurus",
-  "version": "8.0.0-alpha.22",
+  "version": "8.0.0-alpha.23",
   "description": "Type-safe ODM for Firestore",
   "keywords": [
     "Firebase",
@@ -26,7 +26,7 @@
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "babel-preset-power-assert": "^3.0.0",
-    "firebase": "8.2.5",
+    "firebase": "8",
     "firebase-admin": "9.4.2",
     "firebase-tools": "^9.3.0",
     "jest": "^26.6.3",
@@ -37,6 +37,7 @@
     "karma-mocha": "^1.3.0",
     "karma-sourcemap-loader": "^0.3.8",
     "karma-webpack": "4",
+    "lazyfire": "^0.2.0",
     "mocha": "^6.2.0",
     "nanoid": "^3.1.20",
     "power-assert": "^1.6.1",

Diff for: src/adaptor/browser/lazy.ts

@@ -5,12 +5,13 @@
 import type { DocOptions, ServerTimestampsStrategy } from '../../types'
 import { getAll } from '../utils'
 import type firebase from 'firebase'
+import { ensureApp } from 'lazyfire'
 
 export default async function adaptor() {
-  const { default: firebase } = await import('firebase/app')
+  const { app, firebase } = await ensureApp()
   await import('firebase/firestore')
 
-  const firestore = firebase.firestore()
+  const firestore = app.firestore()
   // At the moment, the browser's Firestore adaptor doesn't support getAll.
   // Get rid of the fallback when the issue is closed:
   // https://github.com/firebase/firebase-js-sdk/issues/1176