Component framework implementation (#2316)

* Component implementation

* update dep version

* [AUTOMATED]: Prettier Code Styling

* [AUTOMATED]: License Headers

* rename variables

* address comments

* [AUTOMATED]: Prettier Code Styling

* remove unused comment

* update code

* [AUTOMATED]: Prettier Code Styling

* rename to clearInstance to have naming consistency

* make FirebaseApp tests work again

* fix node tests

* [AUTOMATED]: Prettier Code Styling

* add comments for ComponentType

* [AUTOMATED]: Prettier Code Styling

* pass Component directly into Providers

* [AUTOMATED]: Prettier Code Styling

* correct spellings

* update readme

* fix lint issue

* remove unused import

* fix API change

* move types around

* [AUTOMATED]: Prettier Code Styling

* improve provider typing

* [AUTOMATED]: Prettier Code Styling

* Migrate analytics to component platform (#220)

* migrate analytics

* minor analytics refactoring

* interface merge

* [AUTOMATED]: Prettier Code Styling

* [AUTOMATED]: License Headers

* allow overwriting a registered component

* [AUTOMATED]: Prettier Code Styling

* change ComponentType to string enum

* address comments

* [AUTOMATED]: Prettier Code Styling

* remove return only generics

* Move identifier to options object for getImmediate()

* [AUTOMATED]: Prettier Code Styling

* Make getProvider() type safe

* [AUTOMATED]: Prettier Code Styling

* define a new method to replace overwrite flag

* [AUTOMATED]: Prettier Code Styling

* Make component type safe

* [AUTOMATED]: Prettier Code Styling

* remove the generic type from component container

* Update FirebaseApp and Analytics

* [AUTOMATED]: Prettier Code Styling

* remove unneccessary casting

* [AUTOMATED]: Prettier Code Styling

* fix typo

* address comments

* [AUTOMATED]: Prettier Code Styling

* update some types

* [AUTOMATED]: Prettier Code Styling

* handle errors from instance factory

* [AUTOMATED]: Prettier Code Styling

Author: Feiyang1

packages/analytics-interop-types/README.md

@@ -0,0 +1,3 @@
+# @firebase/analytics-interop-types
+
+**This package is not intended for direct usage, and should only be used via the officially supported [firebase](https://www.npmjs.com/package/firebase) package.**

packages/analytics-interop-types/index.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright 2019 Google Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface FirebaseAnalyticsInternal {
+  /**
+   * Sends analytics event with given `eventParams`. This method
+   * automatically associates this logged event with this Firebase web
+   * app instance on this device.
+   * List of official event parameters can be found in
+   * {@link https://developers.google.com/gtagjs/reference/event
+   * the gtag.js reference documentation}.
+   */
+  logEvent(
+    eventName: string,
+    eventParams?: { [key: string]: unknown },
+    options?: AnalyticsCallOptions
+  ): void;
+}
+
+export interface AnalyticsCallOptions {
+  /**
+   * If true, this config or event call applies globally to all
+   * analytics properties on the page.
+   */
+  global: boolean;
+}
+
+declare module '@firebase/component' {
+  interface NameServiceMapping {
+    'analytics-internal': FirebaseAnalyticsInternal;
+  }
+}

packages/analytics-interop-types/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@firebase/analytics-interop-types",
+  "version": "0.1.0",
+  "description": "@firebase/analytics Types",
+  "author": "Firebase <[email protected]> (https://firebase.google.com/)",
+  "license": "Apache-2.0",
+  "scripts": {
+    "test": "tsc"
+  },
+  "files": [
+    "index.d.ts"
+  ],
+  "repository": {
+    "directory": "packages/analytics-interop-types",
+    "type": "git",
+    "url": "https://github.com/firebase/firebase-js-sdk.git"
+  },
+  "bugs": {
+    "url": "https://github.com/firebase/firebase-js-sdk/issues"
+  },
+  "devDependencies": {
+    "typescript": "3.6.4"
+  }
+}

packages/analytics-interop-types/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../config/tsconfig.base.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "exclude": [
+    "dist/**/*"
+  ]
+}

packages/analytics-types/index.d.ts

@@ -201,3 +201,9 @@ export interface Promotion {
   id?: string;
   name?: string;
 }
+
+declare module '@firebase/component' {
+  interface NameServiceMapping {
+    'analytics': FirebaseAnalytics;
+  }
+}

packages/analytics/index.test.ts

@@ -39,12 +39,12 @@ const customDataLayerName = 'customDataLayer';
 describe('FirebaseAnalytics instance tests', () => {
   it('Throws if no analyticsId in config', () => {
     const app = getFakeApp();
-    expect(() => analyticsFactory(app, () => {})).to.throw('field is empty');
+    expect(() => analyticsFactory(app)).to.throw('field is empty');
   });
   it('Throws if creating an instance with already-used analytics ID', () => {
     const app = getFakeApp(analyticsId);
     resetGlobalVars(false, { [analyticsId]: Promise.resolve() });
-    expect(() => analyticsFactory(app, () => {})).to.throw('already exists');
+    expect(() => analyticsFactory(app)).to.throw('already exists');
   });
   describe('Standard app, page already has user gtag script', () => {
     let app: FirebaseApp = {} as FirebaseApp;
@@ -53,7 +53,7 @@ describe('FirebaseAnalytics instance tests', () => {
       app = getFakeApp(analyticsId);
       window['gtag'] = gtagStub;
       window['dataLayer'] = [];
-      analyticsInstance = analyticsFactory(app, () => {});
+      analyticsInstance = analyticsFactory(app);
     });
     after(() => {
       delete window['gtag'];
@@ -119,7 +119,7 @@ describe('FirebaseAnalytics instance tests', () => {
         dataLayerName: customDataLayerName,
         gtagName: customGtagName
       });
-      analyticsInstance = analyticsFactory(app, () => {});
+      analyticsInstance = analyticsFactory(app);
     });
     after(() => {
       delete window[customGtagName];
@@ -162,7 +162,7 @@ describe('FirebaseAnalytics instance tests', () => {
     before(() => {
       resetGlobalVars();
       const app = getFakeApp(analyticsId);
-      analyticsInstance = analyticsFactory(app, () => {});
+      analyticsInstance = analyticsFactory(app);
     });
     after(() => {
       delete window['gtag'];

packages/analytics/index.ts

@@ -16,12 +16,12 @@
  */
 import firebase from '@firebase/app';
 import { FirebaseAnalytics } from '@firebase/analytics-types';
-import {
-  FirebaseServiceFactory,
-  _FirebaseNamespace
-} from '@firebase/app-types/private';
+import { FirebaseAnalyticsInternal } from '@firebase/analytics-interop-types';
+import { _FirebaseNamespace } from '@firebase/app-types/private';
 import { factory, settings, resetGlobalVars } from './src/factory';
 import { EventName } from './src/constants';
+import { Component, ComponentType } from '@firebase/component';
+import { ERROR_FACTORY, AnalyticsError } from './src/errors';
 
 declare global {
   interface Window {
@@ -34,17 +34,41 @@ declare global {
  */
 const ANALYTICS_TYPE = 'analytics';
 export function registerAnalytics(instance: _FirebaseNamespace): void {
-  instance.INTERNAL.registerService(
-    ANALYTICS_TYPE,
-    factory as FirebaseServiceFactory,
-    {
+  instance.INTERNAL.registerComponent(
+    new Component(
+      ANALYTICS_TYPE,
+      container => {
+        // getImmediate for FirebaseApp will always succeed
+        const app = container.getProvider('app').getImmediate();
+        return factory(app);
+      },
+      ComponentType.PUBLIC
+    ).setServiceProps({
       settings,
       EventName
-    },
-    // We don't need to wait on any AppHooks.
-    undefined,
-    // Allow multiple analytics instances per app.
-    false
+    })
+  );
+
+  instance.INTERNAL.registerComponent(
+    new Component(
+      'analytics-internal',
+      container => {
+        try {
+          const analytics = container
+            .getProvider(ANALYTICS_TYPE)
+            .getImmediate();
+          return {
+            logEvent: analytics.logEvent
+          };
+        } catch (e) {
+          throw ERROR_FACTORY.create(
+            AnalyticsError.INTEROP_COMPONENT_REG_FAILED,
+            { reason: e }
+          );
+        }
+      },
+      ComponentType.PRIVATE
+    )
   );
 }
 

packages/analytics/package.json

@@ -26,6 +26,7 @@
     "@firebase/analytics-types": "0.2.3",
     "@firebase/installations": "0.3.6",
     "@firebase/util": "0.2.34",
+    "@firebase/component": "0.1.0",
     "tslib": "1.10.0"
   },
   "license": "Apache-2.0",

packages/analytics/src/errors.ts

@@ -21,7 +21,8 @@ import { ANALYTICS_ID_FIELD } from './constants';
 export const enum AnalyticsError {
   NO_GA_ID = 'no-ga-id',
   ALREADY_EXISTS = 'already-exists',
-  ALREADY_INITIALIZED = 'already-initialized'
+  ALREADY_INITIALIZED = 'already-initialized',
+  INTEROP_COMPONENT_REG_FAILED = 'interop-component-reg-failed'
 }
 
 const ERRORS: ErrorMap<AnalyticsError> = {
@@ -36,11 +37,14 @@ const ERRORS: ErrorMap<AnalyticsError> = {
   [AnalyticsError.ALREADY_INITIALIZED]:
     'Firebase Analytics has already been initialized.' +
     'settings() must be called before initializing any Analytics instance' +
-    'or it will have no effect.'
+    'or it will have no effect.',
+  [AnalyticsError.INTEROP_COMPONENT_REG_FAILED]:
+    'Firebase Analytics Interop Component failed to instantiate'
 };
 
 interface ErrorParams {
   [AnalyticsError.ALREADY_EXISTS]: { id: string };
+  [AnalyticsError.INTEROP_COMPONENT_REG_FAILED]: { reason: Error };
 }
 
 export const ERROR_FACTORY = new ErrorFactory<AnalyticsError, ErrorParams>(

packages/analytics/src/factory.ts

@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 
-import { FirebaseApp } from '@firebase/app-types';
 import {
   FirebaseAnalytics,
   Gtag,
@@ -38,6 +37,7 @@ import {
 } from './helpers';
 import { ANALYTICS_ID_FIELD } from './constants';
 import { AnalyticsError, ERROR_FACTORY } from './errors';
+import { FirebaseApp } from '@firebase/app-types';
 
 /**
  * Maps gaId to FID fetch promises.
@@ -102,11 +102,7 @@ export function settings(options: SettingsOptions): void {
   }
 }
 
-export function factory(
-  app: FirebaseApp,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  extendApp: (props: { [prop: string]: any }) => void
-): FirebaseAnalytics {
+export function factory(app: FirebaseApp): FirebaseAnalytics {
   const analyticsId = app.options[ANALYTICS_ID_FIELD];
   if (!analyticsId) {
     throw ERROR_FACTORY.create(AnalyticsError.NO_GA_ID);
@@ -161,13 +157,5 @@ export function factory(
       setAnalyticsCollectionEnabled(analyticsId, enabled)
   };
 
-  extendApp({
-    INTERNAL: {
-      analytics: {
-        logEvent: analyticsInstance.logEvent
-      }
-    }
-  });
-
   return analyticsInstance;
 }

packages/app-types/index.d.ts

@@ -101,3 +101,9 @@ export interface FirebaseNamespace {
   // The current SDK version.
   SDK_VERSION: string;
 }
+
+declare module '@firebase/component' {
+  interface NameServiceMapping {
+    'app': FirebaseApp;
+  }
+}

packages/app-types/private.d.ts

@@ -23,6 +23,8 @@
 import { FirebaseApp, FirebaseNamespace } from '@firebase/app-types';
 import { Observer, Subscribe } from '@firebase/util';
 import { FirebaseError, ErrorFactory } from '@firebase/util';
+import { Deferred } from '../firestore/test/util/promise';
+import { Component } from '@firebase/component';
 
 export interface FirebaseServiceInternals {
   /**
@@ -80,8 +82,8 @@ export interface FirebaseAppInternals {
 }
 
 export interface _FirebaseApp extends FirebaseApp {
-  INTERNAL: FirebaseAppInternals;
-  _removeServiceInstance: (name: string, instanceIdentifier?: string) => void;
+  _addComponent(component: Component): void;
+  _removeServiceInstance(name: string, instanceIdentifier?: string): void;
 }
 export interface _FirebaseNamespace extends FirebaseNamespace {
   INTERNAL: {
@@ -99,13 +101,9 @@ export interface _FirebaseNamespace extends FirebaseNamespace {
      * @param allowMultipleInstances Whether the registered service supports
      *   multiple instances per app. If not specified, the default is false.
      */
-    registerService(
-      name: string,
-      createService: FirebaseServiceFactory,
-      serviceProperties?: { [prop: string]: any },
-      appHook?: AppHook,
-      allowMultipleInstances?: boolean
-    ): FirebaseServiceNamespace<FirebaseService>;
+    registerComponent(
+      component: Component
+    ): FirebaseServiceNamespace<FirebaseService> | null;
 
     /**
      * Just used for testing to start from a fresh namespace.
@@ -139,9 +137,9 @@ export interface _FirebaseNamespace extends FirebaseNamespace {
     removeApp(name: string): void;
 
     /**
-     * Service factories for each registered service.
+     * registered components.
      */
-    factories: { [name: string]: FirebaseServiceFactory };
+    components: Map<string, Component>;
 
     /*
      * Convert service name to factory name to use.

packages/app/index.node.ts

@@ -17,16 +17,14 @@
 
 import { FirebaseNamespace } from '@firebase/app-types';
 import { _FirebaseNamespace } from '@firebase/app-types/private';
-import { createFirebaseNamespace } from './src/firebaseNamespace';
+import { firebase as _firebase } from './src/firebaseNamespace';
 // Node specific packages.
 // @ts-ignore
 import Storage from 'dom-storage';
 // @ts-ignore
 import { XMLHttpRequest } from 'xmlhttprequest';
 
-const _firebase = createFirebaseNamespace() as _FirebaseNamespace;
-
-_firebase.INTERNAL.extendNamespace({
+(_firebase as _FirebaseNamespace).INTERNAL.extendNamespace({
   INTERNAL: {
     node: {
       localStorage: new Storage(null, { strict: true }),

packages/app/index.rn.ts

@@ -17,8 +17,7 @@
 
 import { FirebaseNamespace } from '@firebase/app-types';
 import { _FirebaseNamespace } from '@firebase/app-types/private';
-import { createFirebaseNamespace } from './src/firebaseNamespace';
-
+import { firebase as _firebase } from './src/firebaseNamespace';
 /**
  * To avoid having to include the @types/react-native package, which breaks
  * some of our tests because of duplicate symbols, we are using require syntax
@@ -27,9 +26,7 @@ import { createFirebaseNamespace } from './src/firebaseNamespace';
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 const { AsyncStorage } = require('react-native');
 
-const _firebase = createFirebaseNamespace() as _FirebaseNamespace;
-
-_firebase.INTERNAL.extendNamespace({
+(_firebase as _FirebaseNamespace).INTERNAL.extendNamespace({
   INTERNAL: {
     reactNative: {
       AsyncStorage

packages/app/index.ts

@@ -16,7 +16,7 @@
  */
 
 import { FirebaseNamespace } from '@firebase/app-types';
-import { createFirebaseNamespace } from './src/firebaseNamespace';
+import { firebase as firebaseNamespace } from './src/firebaseNamespace';
 import { isNode, isBrowser } from '@firebase/util';
 import { logger } from './src/logger';
 
@@ -38,7 +38,6 @@ if (isBrowser() && (self as any).firebase !== undefined) {
   }
 }
 
-const firebaseNamespace = createFirebaseNamespace();
 const initializeApp = firebaseNamespace.initializeApp;
 
 // TODO: This disable can be removed and the 'ignoreRestArgs' option added to