Use fetch() in v9 Firestore

Author: schmidt-sebastian

packages/firestore/exp/register.ts

@@ -26,6 +26,7 @@ import { name, version } from '../package.json';
 import { setSDKVersion } from '../src/core/version';
 import { FirebaseFirestore } from '../src/exp/database';
 import { Settings } from '../src/exp/settings';
+import { PrivateSettings } from '../src/lite/settings';
 
 declare module '@firebase/component' {
   interface NameServiceMapping {
@@ -38,15 +39,14 @@ export function registerFirestore(variant?: string): void {
   _registerComponent(
     new Component(
       'firestore-exp',
-      (container, { options: settings }: { options?: Settings }) => {
+      (container, { options: settings }: { options?: PrivateSettings }) => {
         const app = container.getProvider('app-exp').getImmediate()!;
         const firestoreInstance = new FirebaseFirestore(
           app,
           container.getProvider('auth-internal')
         );
-        if (settings) {
-          firestoreInstance._setSettings(settings);
-        }
+        settings = { useFetchStreams: true, ...settings };
+        firestoreInstance._setSettings(settings);
         return firestoreInstance;
       },
       ComponentType.PUBLIC

packages/firestore/rollup.config.exp.js

@@ -77,7 +77,7 @@ const browserPlugins = function () {
       ]
     }),
     json({ preferConst: true }),
-    terser(util.manglePrivatePropertiesOptions)
+    terser()
   ];
 };
 
@@ -97,20 +97,6 @@ const allBuilds = [
     },
     onwarn: util.onwarn
   },
-  // Node CJS build
-  {
-    input: path.resolve('./exp', pkg['main-esm']),
-    output: {
-      file: path.resolve('./exp', pkg.main),
-      format: 'cjs',
-      sourcemap: true
-    },
-    plugins: util.es2017ToEs5Plugins(/* mangled= */ false),
-    external: util.resolveNodeExterns,
-    treeshake: {
-      moduleSideEffects: false
-    }
-  },
   // Browser build
   {
     input: './exp/index.ts',
@@ -135,21 +121,7 @@ const allBuilds = [
         sourcemap: true
       }
     ],
-    plugins: util.es2017ToEs5Plugins(/* mangled= */ true),
-    external: util.resolveBrowserExterns,
-    treeshake: {
-      moduleSideEffects: false
-    }
-  },
-  // RN build
-  {
-    input: './exp/index.rn.ts',
-    output: {
-      file: path.resolve('./exp', pkg['react-native']),
-      format: 'es',
-      sourcemap: true
-    },
-    plugins: [alias(util.generateAliasConfig('rn')), ...browserPlugins()],
+    plugins: util.es2017ToEs5Plugins(/* mangled= */ false),
     external: util.resolveBrowserExterns,
     treeshake: {
       moduleSideEffects: false

packages/firestore/src/core/database_info.ts

@@ -30,6 +30,8 @@ export class DatabaseInfo {
    * when using WebChannel as the network transport.
    * @param autoDetectLongPolling - Whether to use the detectBufferingProxy
    * option when using WebChannel as the network transport.
+   * @param useFetchStreams Whether to use the Fetch API instead of
+   * XMLHTTPRequest
    */
   constructor(
     readonly databaseId: DatabaseId,
@@ -38,7 +40,8 @@ export class DatabaseInfo {
     readonly host: string,
     readonly ssl: boolean,
     readonly forceLongPolling: boolean,
-    readonly autoDetectLongPolling: boolean
+    readonly autoDetectLongPolling: boolean,
+    readonly useFetchStreams: boolean
   ) {}
 }
 

packages/firestore/src/lite/components.ts

@@ -113,6 +113,7 @@ export function makeDatabaseInfo(
     settings.host,
     settings.ssl,
     settings.experimentalForceLongPolling,
-    settings.experimentalAutoDetectLongPolling
+    settings.experimentalAutoDetectLongPolling,
+    settings.useFetchStreams
   );
 }

packages/firestore/src/lite/settings.ts

@@ -58,6 +58,8 @@ export interface PrivateSettings extends Settings {
   experimentalForceLongPolling?: boolean;
   // Used in firestore@exp
   experimentalAutoDetectLongPolling?: boolean;
+  // Used in firestore@exp
+  useFetchStreams?: boolean;
 }
 
 /**
@@ -80,6 +82,8 @@ export class FirestoreSettings {
 
   readonly ignoreUndefinedProperties: boolean;
 
+  readonly useFetchStreams: boolean;
+
   // Can be a google-auth-library or gapi client.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   credentials?: any;
@@ -120,6 +124,7 @@ export class FirestoreSettings {
 
     this.experimentalForceLongPolling = !!settings.experimentalForceLongPolling;
     this.experimentalAutoDetectLongPolling = !!settings.experimentalAutoDetectLongPolling;
+    this.useFetchStreams = !!settings.useFetchStreams;
 
     validateIsNotUsedTogether(
       'experimentalForceLongPolling',
@@ -139,7 +144,8 @@ export class FirestoreSettings {
         other.experimentalForceLongPolling &&
       this.experimentalAutoDetectLongPolling ===
         other.experimentalAutoDetectLongPolling &&
-      this.ignoreUndefinedProperties === other.ignoreUndefinedProperties
+      this.ignoreUndefinedProperties === other.ignoreUndefinedProperties &&
+      this.useFetchStreams === other.useFetchStreams
     );
   }
 }

packages/firestore/src/platform/browser/webchannel_connection.ts

@@ -30,6 +30,7 @@ import {
   WebChannel,
   WebChannelError,
   WebChannelOptions,
+  FetchXmlHttpFactory,
   XhrIo,
   getStatEventTarget,
   EventTarget,
@@ -62,11 +63,13 @@ const XHR_TIMEOUT_SECS = 15;
 export class WebChannelConnection extends RestConnection {
   private readonly forceLongPolling: boolean;
   private readonly autoDetectLongPolling: boolean;
+  private readonly useFetchStreams: boolean;
 
   constructor(info: DatabaseInfo) {
     super(info);
     this.forceLongPolling = info.forceLongPolling;
     this.autoDetectLongPolling = info.autoDetectLongPolling;
+    this.useFetchStreams = info.useFetchStreams;
   }
 
   protected performRPCRequest<Req, Resp>(
@@ -194,6 +197,10 @@ export class WebChannelConnection extends RestConnection {
       detectBufferingProxy: this.autoDetectLongPolling
     };
 
+    if (this.useFetchStreams) {
+      request.xmlHttpFactory = new FetchXmlHttpFactory({});
+    }
+
     this.modifyHeadersForRequest(request.initMessageHeaders!, token);
 
     // Sending the custom headers we just added to request.initMessageHeaders

packages/webchannel-wrapper/externs/overrides.js

@@ -68,6 +68,12 @@ goog.net.WebChannel.Options.forceLongPolling;
 /** @type {boolean|undefined} */
 goog.net.WebChannel.Options.detectBufferingProxy;
 
+/** @type {boolean|undefined} */
+goog.net.WebChannel.Options.useFetchStreams;
+
+/** @type {unknown} */
+goog.net.WebChannel.Options.xmlHttpFactory;
+
 goog.labs.net.webChannel.requestStats.Event = {};
 goog.labs.net.webChannel.requestStats.Event.STAT_EVENT;
 

packages/webchannel-wrapper/gulpfile.js

@@ -46,7 +46,7 @@ const closureDefines = [
   // Avoid unsafe eval() calls (https://github.com/firebase/firebase-js-sdk/issues/798)
   'goog.json.USE_NATIVE_JSON=true',
   // Disable debug logging (saves 8780 bytes).
-  'goog.DEBUG=false',
+  'goog.DEBUG=true',
   // Disable fallbacks for running async code (saves 1472 bytes).
   'goog.ASSUME_NATIVE_PROMISE=true',
   // Disables IE8-specific event fallback code (saves 523 bytes).

packages/webchannel-wrapper/package.json

@@ -15,8 +15,8 @@
   },
   "license": "Apache-2.0",
   "devDependencies": {
-    "google-closure-compiler": "20201102.0.1",
-    "google-closure-library": "20201006.0.0",
+    "google-closure-compiler": "20210505.0.0",
+    "google-closure-library": "20210406.0.0",
     "gulp": "4.0.2",
     "gulp-sourcemaps": "3.0.0",
     "rollup": "2.35.1",

packages/webchannel-wrapper/src/index.d.ts

@@ -130,3 +130,7 @@ export interface WebChannelTransport {
 export function createWebChannelTransport(): WebChannelTransport;
 
 export function getStatEventTarget(): EventTarget;
+
+export class FetchXmlHttpFactory {
+  constructor(options: {});
+}