Point browser field to esm build (#3932)

* point browser field to esm build * address comments * Create funny-ties-ring.md * fix build error in component * change from namespace export to default export * update changeset * fix firebase imports in rxfire * fix import for rules-unit-testing * fix testing * compile firebase pkgs to cjs so they can be stubbed in tests
firebase · Oct 20, 2020 · a5768b0 · a5768b0
1 parent eded218
commit a5768b0
Show file tree

Hide file tree

Showing 45 changed files with 294 additions and 197 deletions.
diff --git a/.changeset/funny-ties-ring.md b/.changeset/funny-ties-ring.md
@@ -0,0 +1,25 @@
+---
+"@firebase/app": patch
+"@firebase/auth": patch
+"@firebase/component": patch
+"@firebase/database": patch
+"firebase": major
+"@firebase/firestore": patch
+"@firebase/functions": patch
+"@firebase/performance": patch
+"@firebase/remote-config": patch
+"rxfire": patch
+"@firebase/util": patch
+---
+
+Point browser field to esm build. Now you need to use default import instead of namespace import to import firebase.
+
+Before this change
+```
+import * as firebase from 'firebase/app';
+```
+
+After this change
+```
+import firebase from 'firebase/app';
+```
diff --git a/config/webpack.test.js b/config/webpack.test.js
@@ -74,13 +74,30 @@ module.exports = {
             ]
           }
         }
+      },
+      {
+        test: /\.js$/,
+        include: function (modulePath) {
+          const match = /node_modules\/@firebase.*/.test(modulePath);
+          if (match) {
+            console.log('modulePath', modulePath, match);
+          }
+          return match;
+        },
+        use: {
+          loader: 'babel-loader',
+          options: {
+            plugins: ['@babel/plugin-transform-modules-commonjs']
+          }
+        }
       }
     ]
   },
   resolve: {
     modules: ['node_modules', path.resolve(__dirname, '../../node_modules')],
-    mainFields: ['browser', 'main', 'module'],
-    extensions: ['.js', '.ts']
+    mainFields: ['browser', 'module', 'main'],
+    extensions: ['.js', '.ts'],
+    symlinks: false
   },
   plugins: [
     new webpack.NormalModuleReplacementPlugin(

diff --git a/integration/firebase/package.json b/integration/firebase/package.json
@@ -8,8 +8,6 @@
   },
   "devDependencies": {
     "firebase": "7.24.0",
-    "@babel/core": "7.11.6",
-    "@babel/preset-env": "7.11.5",
     "@types/chai": "4.2.13",
     "@types/mocha": "7.0.2",
     "chai": "4.2.0",

diff --git a/integration/firebase/test/namespace.test.ts b/integration/firebase/test/namespace.test.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import * as firebase from 'firebase';
+import firebase from 'firebase';
 import * as namespaceDefinition from './namespaceDefinition.json';
 import validateNamespace from './validator';
 

diff --git a/package.json b/package.json
@@ -87,6 +87,9 @@
     "@typescript-eslint/eslint-plugin-tslint": "4.4.1",
     "@typescript-eslint/parser": "4.4.1",
     "babel-loader": "8.1.0",
+    "@babel/core": "7.11.6",
+    "@babel/preset-env": "7.11.5",
+    "@babel/plugin-transform-modules-commonjs": "7.12.1",
     "chai": "4.2.0",
     "chai-as-promised": "7.1.1",
     "chalk": "4.1.0",

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -4,7 +4,7 @@
   "description": "The primary entrypoint to the Firebase JS SDK",
   "author": "Firebase <[email protected]> (https://firebase.google.com/)",
   "main": "dist/index.node.cjs.js",
-  "browser": "dist/index.cjs.js",
+  "browser": "dist/index.esm.js",
   "module": "dist/index.esm.js",
   "react-native": "dist/index.rn.cjs.js",
   "esm2017": "dist/index.esm2017.js",

diff --git a/packages/app/rollup.config.js b/packages/app/rollup.config.js
@@ -37,10 +37,7 @@ const es5BuildPlugins = [
 const es5Builds = [
   {
     input: 'index.ts',
-    output: [
-      { file: pkg.browser, format: 'cjs', sourcemap: true },
-      { file: pkg.module, format: 'es', sourcemap: true }
-    ],
+    output: [{ file: pkg.module, format: 'es', sourcemap: true }],
     plugins: es5BuildPlugins,
     external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`))
   },

diff --git a/packages/auth/package.json b/packages/auth/package.json
@@ -2,7 +2,7 @@
   "name": "@firebase/auth",
   "version": "0.15.0",
   "main": "dist/auth.js",
-  "browser": "dist/auth.js",
+  "browser": "dist/auth.esm.js",
   "module": "dist/auth.esm.js",
   "description": "Javascript library for Firebase Auth SDK",
   "author": "Firebase <[email protected]> (https://firebase.google.com/)",

diff --git a/packages/component/package.json b/packages/component/package.json
@@ -4,7 +4,7 @@
   "description": "Firebase Component Platform",
   "author": "Firebase <[email protected]> (https://firebase.google.com/)",
   "main": "dist/index.cjs.js",
-  "browser": "dist/index.cjs.js",
+  "browser": "dist/index.esm.js",
   "module": "dist/index.esm.js",
   "esm2017": "dist/index.esm2017.js",
   "files": ["dist"],

diff --git a/packages/component/rollup.config.js b/packages/component/rollup.config.js
@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2018 Google Inc.
+ * Copyright 2018 Google LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -39,7 +39,7 @@ const es5Builds = [
   {
     input: 'index.ts',
     output: [
-      { file: pkg.browser, format: 'cjs', sourcemap: true },
+      { file: pkg.main, format: 'cjs', sourcemap: true },
       { file: pkg.module, format: 'es', sourcemap: true }
     ],
     plugins: es5BuildPlugins,

diff --git a/packages/database/package.json b/packages/database/package.json
@@ -4,7 +4,7 @@
   "description": "",
   "author": "Firebase <[email protected]> (https://firebase.google.com/)",
   "main": "dist/index.node.cjs.js",
-  "browser": "dist/index.cjs.js",
+  "browser": "dist/index.esm.js",
   "module": "dist/index.esm.js",
   "esm2017": "dist/index.esm2017.js",
   "files": ["dist"],

diff --git a/packages/database/rollup.config.js b/packages/database/rollup.config.js
@@ -49,10 +49,7 @@ const es5Builds = [
    */
   {
     input: 'index.ts',
-    output: [
-      { file: pkg.browser, format: 'cjs', sourcemap: true },
-      { file: pkg.module, format: 'es', sourcemap: true }
-    ],
+    output: [{ file: pkg.module, format: 'es', sourcemap: true }],
     plugins: es5BuildPlugins,
     external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`))
   }

diff --git a/packages/firebase/app/package.json b/packages/firebase/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "firebase/app",
   "main": "dist/index.cjs.js",
-  "browser": "dist/index.cjs.js",
+  "browser": "dist/index.esm.js",
   "module": "dist/index.esm.js",
   "typings": "../index.d.ts"
 }
diff --git a/packages/firebase/index.d.ts b/packages/firebase/index.d.ts
@@ -9684,5 +9684,5 @@ declare namespace firebase.firestore {
   }
 }
 
-export = firebase;
+export default firebase;
 export as namespace firebase;
diff --git a/packages/firebase/package.json b/packages/firebase/package.json
@@ -41,7 +41,7 @@
     "test:ci": "echo 'No test suite for firebase wrapper'"
   },
   "main": "dist/index.node.cjs.js",
-  "browser": "dist/index.cjs.js",
+  "browser": "dist/index.esm.js",
   "module": "dist/index.esm.js",
   "react-native": "dist/index.rn.cjs.js",
   "dependencies": {

diff --git a/packages/firebase/rollup.config.js b/packages/firebase/rollup.config.js
@@ -184,10 +184,7 @@ const completeBuilds = [
    */
   {
     input: 'src/index.ts',
-    output: [
-      { file: pkg.browser, format: 'cjs', sourcemap: true },
-      { file: pkg.module, format: 'es', sourcemap: true }
-    ],
+    output: [{ file: pkg.module, format: 'es', sourcemap: true }],
     plugins,
     external
   },

diff --git a/packages/firestore/memory/package.json b/packages/firestore/memory/package.json
@@ -4,7 +4,7 @@
   "main": "../dist/index.memory.node.cjs.js",
   "main-esm2017": "../dist/index.memory.node.esm2017.js",
   "react-native": "../dist/index.memory.rn.esm2017.js",
-  "browser": "../dist/index.memory.cjs.js",
+  "browser": "../dist/index.memory.esm.js",
   "module": "../dist/index.memory.esm.js",
   "esm2017": "../dist/index.memory.esm2017.js",
   "typings": "../dist/index.d.ts"

diff --git a/packages/firestore/package.json b/packages/firestore/package.json
@@ -51,7 +51,7 @@
   "main": "dist/index.node.cjs.js",
   "main-esm2017": "dist/index.node.esm2017.js",
   "react-native": "dist/index.rn.esm2017.js",
-  "browser": "dist/index.cjs.js",
+  "browser": "dist/index.esm.js",
   "module": "dist/index.esm.js",
   "esm2017": "dist/index.esm2017.js",
   "license": "Apache-2.0",

diff --git a/packages/firestore/rollup.config.browser.js b/packages/firestore/rollup.config.browser.js
@@ -41,14 +41,5 @@ export default [
     treeshake: {
       moduleSideEffects: false
     }
-  },
-  {
-    input: pkg.esm2017,
-    output: { file: pkg.browser, format: 'cjs', sourcemap: true },
-    plugins: util.es2017ToEs5Plugins(/* mangled= */ true),
-    external: util.resolveBrowserExterns,
-    treeshake: {
-      moduleSideEffects: false
-    }
   }
 ];
diff --git a/packages/firestore/rollup.config.browser.memory.js b/packages/firestore/rollup.config.browser.memory.js
@@ -46,18 +46,5 @@ export default [
     treeshake: {
       moduleSideEffects: false
     }
-  },
-  {
-    input: path.resolve('./memory', memoryPkg['esm2017']),
-    output: {
-      file: path.resolve('./memory', memoryPkg.browser),
-      format: 'cjs',
-      sourcemap: true
-    },
-    plugins: util.es2017ToEs5Plugins(/* mangled= */ true),
-    external: util.resolveBrowserExterns,
-    treeshake: {
-      moduleSideEffects: false
-    }
   }
 ];
diff --git a/packages/functions/package.json b/packages/functions/package.json
@@ -4,7 +4,7 @@
   "description": "",
   "author": "Firebase <[email protected]> (https://firebase.google.com/)",
   "main": "dist/index.node.cjs.js",
-  "browser": "dist/index.cjs.js",
+  "browser": "dist/index.esm.js",
   "module": "dist/index.esm.js",
   "esm2017": "dist/index.esm2017.js",
   "files": ["dist"],

diff --git a/packages/functions/rollup.config.js b/packages/functions/rollup.config.js
@@ -40,10 +40,7 @@ const es5Builds = [
    */
   {
     input: 'index.ts',
-    output: [
-      { file: pkg.browser, format: 'cjs', sourcemap: true },
-      { file: pkg.module, format: 'es', sourcemap: true }
-    ],
+    output: [{ file: pkg.module, format: 'es', sourcemap: true }],
     plugins: es5BuildPlugins,
     external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`))
   },

diff --git a/packages/performance/package.json b/packages/performance/package.json
@@ -4,7 +4,7 @@
   "description": "Firebase performance for web",
   "author": "Firebase <[email protected]> (https://firebase.google.com/)",
   "main": "dist/index.cjs.js",
-  "browser": "dist/index.cjs.js",
+  "browser": "dist/index.esm.js",
   "module": "dist/index.esm.js",
   "esm2017": "dist/index.esm2017.js",
   "files": ["dist"],

diff --git a/packages/remote-config/package.json b/packages/remote-config/package.json
@@ -4,7 +4,7 @@
   "description": "The Remote Config package of the Firebase JS SDK",
   "author": "Firebase <[email protected]> (https://firebase.google.com/)",
   "main": "dist/index.cjs.js",
-  "browser": "dist/index.cjs.js",
+  "browser": "dist/index.esm.js",
   "module": "dist/index.esm.js",
   "esm2017": "dist/index.esm2017.js",
   "files": ["dist"],

diff --git a/packages/remote-config/rollup.config.js b/packages/remote-config/rollup.config.js
@@ -41,7 +41,7 @@ const es5Builds = [
   {
     input: 'index.ts',
     output: [
-      { file: pkg.browser, format: 'cjs', sourcemap: true },
+      { file: pkg.main, format: 'cjs', sourcemap: true },
       { file: pkg.module, format: 'es', sourcemap: true }
     ],
     plugins: es5BuildPlugins,

diff --git a/packages/rules-unit-testing/src/api/index.ts b/packages/rules-unit-testing/src/api/index.ts
@@ -15,15 +15,16 @@
  * limitations under the License.
  */
 
-import * as firebase from 'firebase';
+import firebase from 'firebase';
 import { _FirebaseApp } from '@firebase/app-types/private';
 import { FirebaseAuthInternal } from '@firebase/auth-interop-types';
 import * as request from 'request';
 import { base64 } from '@firebase/util';
 import { setLogLevel, LogLevel } from '@firebase/logger';
 import { Component, ComponentType } from '@firebase/component';
 
-export { database, firestore } from 'firebase';
+const { firestore, database } = firebase;
+export { firestore, database };
 
 /** If this environment variable is set, use it for the database emulator's address. */
 const DATABASE_ADDRESS_ENV: string = 'FIREBASE_DATABASE_EMULATOR_HOST';

diff --git a/packages/rxfire/auth/index.ts b/packages/rxfire/auth/index.ts
@@ -17,16 +17,19 @@
 
 // auth is used as a namespace to access types
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { auth, User } from 'firebase';
+import firebase from 'firebase';
 import { Observable, from, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 
+type Auth = firebase.auth.Auth;
+type User = firebase.User;
+
 /**
  * Create an observable of authentication state. The observer is only
  * triggered on sign-in or sign-out.
  * @param auth firebase.auth.Auth
  */
-export function authState(auth: auth.Auth): Observable<User> {
+export function authState(auth: Auth): Observable<User> {
   return new Observable(subscriber => {
     const unsubscribe = auth.onAuthStateChanged(subscriber);
     return { unsubscribe };
@@ -38,7 +41,7 @@ export function authState(auth: auth.Auth): Observable<User> {
  * sign-out, and token refresh events
  * @param auth firebase.auth.Auth
  */
-export function user(auth: auth.Auth): Observable<User> {
+export function user(auth: Auth): Observable<User> {
   return new Observable(subscriber => {
     const unsubscribe = auth.onIdTokenChanged(subscriber);
     return { unsubscribe };
@@ -50,7 +53,7 @@ export function user(auth: auth.Auth): Observable<User> {
  * sign-out, and token refresh events
  * @param auth firebase.auth.Auth
  */
-export function idToken(auth: auth.Auth): Observable<string | null> {
+export function idToken(auth: Auth): Observable<string | null> {
   return user(auth).pipe(
     switchMap(user => (user ? from(user.getIdToken()) : of(null)))
   );

diff --git a/packages/rxfire/database/fromRef.ts b/packages/rxfire/database/fromRef.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { database } from 'firebase';
+import firebase from 'firebase';
 import { Observable } from 'rxjs';
 import { delay } from 'rxjs/operators';
 import { ListenEvent, QueryChange } from './interfaces';
@@ -26,7 +26,7 @@ import { ListenEvent, QueryChange } from './interfaces';
  * @param event Listen event type ('value', 'added', 'changed', 'removed', 'moved')
  */
 export function fromRef(
-  ref: database.Query,
+  ref: firebase.database.Query,
   event: ListenEvent
 ): Observable<QueryChange> {
   return new Observable<QueryChange>(subscriber => {

diff --git a/packages/rxfire/database/interfaces.ts b/packages/rxfire/database/interfaces.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { database } from 'firebase';
+import firebase from 'firebase';
 
 export enum ListenEvent {
   added = 'child_added',
@@ -26,7 +26,7 @@ export enum ListenEvent {
 }
 
 export interface QueryChange {
-  snapshot: database.DataSnapshot;
+  snapshot: firebase.database.DataSnapshot;
   prevKey: string | null | undefined;
   event: ListenEvent;
 }