Create messaging-compat (#4544)

* Create messaging-compat

Using the modular sdk to recreate legacy API surface

* Modify based on review

- Update licenses date to 2020 (from 2017, 2018)
- Declare Module in `registerMessagingCompat.ts`
- Update build rule (package.json):
   -- add `app-comapt` as a dev dependency

* Fix build based on Christina's input

Thanks Christina for the input here. Changes are
- Add  entry in changeset file
- Add eslintrc.js to `messaging-compat`

* Resolve lint issue surfaced from test

- return type in `onMessage`

* Add unit tests

* Improve based on Fei's comments/feedbacks

- Updated  dependencies versions
- Remove redundant namespace declarations

.changeset/config.json

@@ -23,6 +23,7 @@
     "@firebase/installations-exp",
     "@firebase/installations-compat",
     "@firebase/messaging-exp",
+    "@firebase/messaging-compat",
     "@firebase/performance-exp",
     "@firebase/performance-compat",
     "@firebase/remote-config-exp",

packages-exp/messaging-compat/.eslintrc.js

@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ *
+ * 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.
+ */
+const path = require('path');
+
+module.exports = {
+  extends: '../../config/.eslintrc.js',
+  parserOptions: {
+    project: 'tsconfig.json',
+    // to make vscode-eslint work with monorepo
+    // https://github.com/typescript-eslint/typescript-eslint/issues/251#issuecomment-463943250
+    tsconfigRootDir: __dirname
+  }
+};

packages-exp/messaging-compat/README.md

@@ -0,0 +1,5 @@
+# @firebase/messaging-compat
+
+This is the compat package that recreates the v8 APIs.
+
+**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-exp/messaging-compat/karma.conf.js

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ *
+ * 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.
+ */
+
+const karmaBase = require('../../config/karma.base');
+
+const files = ['test/**/*'];
+
+module.exports = function (config) {
+  const karmaConfig = {
+    ...karmaBase,
+    files,
+    frameworks: ['mocha']
+  };
+
+  config.set(karmaConfig);
+};
+
+module.exports.files = files;

packages-exp/messaging-compat/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@firebase/messaging-compat",
+  "version": "0.0.900",
+  "license": "Apache-2.0",
+  "description": "",
+  "private": true,
+  "author": "Firebase <[email protected]> (https://firebase.google.com/)",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "esm2017": "dist/index.esm2017.js",
+  "typings": "dist/index.d.ts",
+  "sw": "dist/index.sw.esm2017.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "lint": "eslint -c .eslintrc.js '**/*.ts' --ignore-path '../../.gitignore'",
+    "lint:fix": "eslint --fix -c .eslintrc.js '**/*.ts' --ignore-path '../../.gitignore'",
+    "build": "rollup -c",
+    "build:deps": "lerna run --scope @firebase/'messaging-compat' --include-dependencies build",
+    "build:release": "rollup -c rollup.config.release.js",
+    "dev": "rollup -c -w",
+    "test": "run-p test:karma",
+    "test:ci": "node ../../scripts/run_tests_in_ci.js",
+    "test:karma": "karma start --single-run",
+    "test:debug": "karma start --browsers=Chrome --auto-watch",
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@firebase/app-compat": "0.x"
+  },
+  "dependencies": {
+    "@firebase/messaging-exp": "0.0.900",
+    "@firebase/component": "0.2.1",
+    "@firebase/installations-exp": "0.0.900",
+    "@firebase/util": "0.4.0",
+    "tslib": "^2.0.0"
+  },
+  "devDependencies": {
+    "@firebase/app-compat": "0.0.900",
+    "@rollup/plugin-json": "4.1.0",
+    "rollup-plugin-typescript2": "0.29.0",
+    "ts-essentials": "7.0.1",
+    "typescript": "4.2.2"
+  },
+  "repository": {
+    "directory": "packages/messaging",
+    "type": "git",
+    "url": "https://github.com/firebase/firebase-js-sdk.git"
+  },
+  "bugs": {
+    "url": "https://github.com/firebase/firebase-js-sdk/issues"
+  }
+}

packages-exp/messaging-compat/rollup.config.js

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ *
+ * 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.
+ */
+
+import json from '@rollup/plugin-json';
+import pkg from './package.json';
+import typescript from 'typescript';
+import typescriptPlugin from 'rollup-plugin-typescript2';
+
+const deps = Object.keys(
+  Object.assign({}, pkg.peerDependencies, pkg.dependencies)
+);
+
+/**
+ * ES5 Builds
+ */
+const es5BuildPlugins = [
+  typescriptPlugin({
+    typescript
+  }),
+  json()
+];
+
+const es5Builds = [
+  {
+    input: 'src/index.ts',
+    output: [
+      { file: pkg.main, format: 'cjs', sourcemap: true },
+      { file: pkg.module, format: 'es', sourcemap: true }
+    ],
+    plugins: es5BuildPlugins,
+    external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`))
+  }
+];
+
+/**
+ * ES2017 Builds
+ */
+const es2017BuildPlugins = [
+  typescriptPlugin({
+    typescript,
+    tsconfigOverride: {
+      compilerOptions: {
+        target: 'es2017'
+      }
+    }
+  }),
+  json({ preferConst: true })
+];
+
+const es2017Builds = [
+  {
+    input: 'src/index.ts',
+    output: {
+      file: pkg.esm2017,
+      format: 'es',
+      sourcemap: true
+    },
+    plugins: es2017BuildPlugins,
+    external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`))
+  }
+];
+
+export default [...es5Builds, ...es2017Builds];

packages-exp/messaging-compat/rollup.config.release.js

@@ -0,0 +1,90 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ *
+ * 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.
+ */
+
+import { importPathTransformer } from '../../scripts/exp/ts-transform-import-path';
+import json from '@rollup/plugin-json';
+import pkg from './package.json';
+import typescript from 'typescript';
+import typescriptPlugin from 'rollup-plugin-typescript2';
+
+const deps = Object.keys(
+  Object.assign({}, pkg.peerDependencies, pkg.dependencies)
+);
+
+/**
+ * ES5 Builds
+ */
+const es5BuildPlugins = [
+  typescriptPlugin({
+    typescript,
+    clean: true,
+    abortOnError: false,
+    transformers: [importPathTransformer]
+  }),
+  json()
+];
+
+const es5Builds = [
+  {
+    input: 'src/index.ts',
+    output: [
+      { file: pkg.main, format: 'cjs', sourcemap: true },
+      { file: pkg.module, format: 'es', sourcemap: true }
+    ],
+    plugins: es5BuildPlugins,
+    treeshake: {
+      moduleSideEffects: false
+    },
+    external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`))
+  }
+];
+
+/**
+ * ES2017 Builds
+ */
+const es2017BuildPlugins = [
+  typescriptPlugin({
+    typescript,
+    abortOnError: false,
+    clean: true,
+    transformers: [importPathTransformer],
+    tsconfigOverride: {
+      compilerOptions: {
+        target: 'es2017'
+      }
+    }
+  }),
+  json({ preferConst: true })
+];
+
+const es2017Builds = [
+  {
+    input: 'src/index.ts',
+    output: {
+      file: pkg.esm2017,
+      format: 'es',
+      sourcemap: true
+    },
+    plugins: es2017BuildPlugins,
+    treeshake: {
+      moduleSideEffects: false
+    },
+    external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`))
+  }
+];
+
+export default [...es5Builds, ...es2017Builds];

packages-exp/messaging-compat/src/index.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ *
+ * 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.
+ */
+
+import { name, version } from '../package.json';
+
+import { firebase } from '@firebase/app-compat';
+import { registerMessagingCompat } from './registerMessagingCompat';
+
+registerMessagingCompat();
+firebase.registerVersion(name, version);

packages-exp/messaging-compat/src/messaging-compat.ts

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ *
+ * 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.
+ */
+
+import {
+  FirebaseApp as AppCompat,
+  _FirebaseService
+} from '@firebase/app-compat';
+import {
+  FirebaseMessaging,
+  MessagePayload,
+  deleteToken,
+  getToken,
+  onMessage
+} from '@firebase/messaging-exp';
+import { NextFn, Observer, Unsubscribe } from '@firebase/util';
+
+import { onBackgroundMessage } from '@firebase/messaging-exp/sw';
+
+export class MessagingCompat implements _FirebaseService {
+  swRegistration?: ServiceWorkerRegistration;
+  vapidKey?: string;
+
+  onBackgroundMessageHandler:
+    | NextFn<MessagePayload>
+    | Observer<MessagePayload>
+    | null = null;
+
+  onMessageHandler:
+    | NextFn<MessagePayload>
+    | Observer<MessagePayload>
+    | null = null;
+
+  constructor(readonly app: AppCompat, readonly messaging: FirebaseMessaging) {
+    this.app = app;
+    this.messaging = messaging;
+  }
+
+  async getToken(options?: {
+    vapidKey?: string;
+    serviceWorkerRegistration?: ServiceWorkerRegistration;
+  }): Promise<string> {
+    return getToken(this.messaging, options);
+  }
+
+  async deleteToken(): Promise<boolean> {
+    return deleteToken(this.messaging);
+  }
+
+  onMessage(
+    nextOrObserver: NextFn<MessagePayload> | Observer<MessagePayload>
+  ): Unsubscribe {
+    return onMessage(this.messaging, nextOrObserver);
+  }
+
+  onBackgroundMessage(
+    nextOrObserver: NextFn<MessagePayload> | Observer<MessagePayload>
+  ): Unsubscribe {
+    return onBackgroundMessage(this.messaging, nextOrObserver);
+  }
+}