Component Framework

integration/browserify/src/namespace.test.js

@@ -25,7 +25,8 @@ firebase.initializeApp({
   databaseURL: 'https://test-project-name.firebaseio.com',
   projectId: 'test-project-name',
   storageBucket: 'test-project-name.appspot.com',
-  messagingSenderId: '012345678910'
+  messagingSenderId: '012345678910',
+  appId: 'myAppId'
 });
 
 describe('Firebase Namespace Validation', function() {

integration/shared/namespaceDefinition.json

@@ -40,7 +40,7 @@
   },
   "INTERNAL": {
     "__type": "object",
-    "registerService": {
+    "registerComponent": {
       "__type": "function"
     },
     "extendNamespace": {
@@ -55,20 +55,8 @@
     "removeApp": {
       "__type": "function"
     },
-    "factories": {
-      "__type": "object",
-      "storage": {
-        "__type": "function"
-      },
-      "auth": {
-        "__type": "function"
-      },
-      "database": {
-        "__type": "function"
-      },
-      "messaging": {
-        "__type": "function"
-      }
+    "components": {
+      "__type": "Map"
     },
     "ErrorFactory": {
       "__type": "function"

integration/typescript/test/namespace.test.ts

@@ -25,7 +25,8 @@ firebase.initializeApp({
   databaseURL: 'https://test-project-name.firebaseio.com',
   projectId: 'test-project-name',
   storageBucket: 'test-project-name.appspot.com',
-  messagingSenderId: '012345678910'
+  messagingSenderId: '012345678910',
+  appId: 'myAppId'
 });
 
 describe('Firebase Namespace Validation', function() {

integration/webpack/src/namespace.test.js

@@ -25,7 +25,8 @@ firebase.initializeApp({
   databaseURL: 'https://test-project-name.firebaseio.com',
   projectId: 'test-project-name',
   storageBucket: 'test-project-name.appspot.com',
-  messagingSenderId: '012345678910'
+  messagingSenderId: '012345678910',
+  appId: 'myAppId'
 });
 
 describe('Firebase Namespace Validation', function() {

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,48 @@
+/**
+ * @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;
+}
+
+export type FirebaseAnalyticsInternalName = 'analytics-internal';
+
+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.7.2"
+  }
+}

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

@@ -24,7 +24,10 @@ import {
   factory as analyticsFactory,
   resetGlobalVars
 } from './index';
-import { getFakeApp } from './testing/get-fake-app';
+import {
+  getFakeApp,
+  getFakeInstallations
+} from './testing/get-fake-firebase-services';
 import { FirebaseApp } from '@firebase/app-types';
 import { GtagCommand, EventName } from './src/constants';
 import { findGtagScriptOnPage } from './src/helpers';
@@ -39,21 +42,29 @@ 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');
+    const installations = getFakeInstallations();
+    expect(() => analyticsFactory(app, installations)).to.throw(
+      'field is empty'
+    );
   });
   it('Throws if creating an instance with already-used analytics ID', () => {
     const app = getFakeApp(analyticsId);
+    const installations = getFakeInstallations();
     resetGlobalVars(false, { [analyticsId]: Promise.resolve() });
-    expect(() => analyticsFactory(app, () => {})).to.throw('already exists');
+    expect(() => analyticsFactory(app, installations)).to.throw(
+      'already exists'
+    );
   });
   describe('Standard app, page already has user gtag script', () => {
     let app: FirebaseApp = {} as FirebaseApp;
     before(() => {
       resetGlobalVars();
       app = getFakeApp(analyticsId);
+      const installations = getFakeInstallations();
+
       window['gtag'] = gtagStub;
       window['dataLayer'] = [];
-      analyticsInstance = analyticsFactory(app, () => {});
+      analyticsInstance = analyticsFactory(app, installations);
     });
     after(() => {
       delete window['gtag'];
@@ -113,13 +124,14 @@ describe('FirebaseAnalytics instance tests', () => {
     before(() => {
       resetGlobalVars();
       const app = getFakeApp(analyticsId);
+      const installations = getFakeInstallations();
       window[customGtagName] = gtagStub;
       window[customDataLayerName] = [];
       analyticsSettings({
         dataLayerName: customDataLayerName,
         gtagName: customGtagName
       });
-      analyticsInstance = analyticsFactory(app, () => {});
+      analyticsInstance = analyticsFactory(app, installations);
     });
     after(() => {
       delete window[customGtagName];
@@ -162,7 +174,8 @@ describe('FirebaseAnalytics instance tests', () => {
     before(() => {
       resetGlobalVars();
       const app = getFakeApp(analyticsId);
-      analyticsInstance = analyticsFactory(app, () => {});
+      const installations = getFakeInstallations();
+      analyticsInstance = analyticsFactory(app, installations);
     });
     after(() => {
       delete window['gtag'];

packages/analytics/index.ts

@@ -15,13 +15,18 @@
  * limitations under the License.
  */
 import firebase from '@firebase/app';
+import '@firebase/installations';
 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,
+  ComponentContainer
+} from '@firebase/component';
+import { ERROR_FACTORY, AnalyticsError } from './src/errors';
 
 declare global {
   interface Window {
@@ -34,18 +39,43 @@ 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();
+        const installations = container
+          .getProvider('installations')
+          .getImmediate();
+
+        return factory(app, installations);
+      },
+      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', internalFactory, ComponentType.PRIVATE)
+  );
+
+  function internalFactory(
+    container: ComponentContainer
+  ): FirebaseAnalyticsInternal {
+    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
+      });
+    }
+  }
 }
 
 export { factory, settings, resetGlobalVars };

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>(