report build variants for packages (#5596)

* report build variants for app

* report build target for firestore

* report runtime env for app

* report build target for auth

* report build target for database and analytics

* report build variants for functions

* report build variants for installations

* report things for fcm

* report build variant for perf

* report build variants for storage

* Create stupid-scissors-compare.md

* fix lint

* prettier

* update typing paths

.changeset/stupid-scissors-compare.md

@@ -0,0 +1,15 @@
+---
+"@firebase/analytics": patch
+"@firebase/app": patch
+"@firebase/auth": patch
+"@firebase/database": patch
+"@firebase/firestore": patch
+"@firebase/functions": patch
+"@firebase/installations": patch
+"@firebase/messaging": patch
+"@firebase/performance": patch
+"@firebase/remote-config": patch
+"@firebase/storage": patch
+---
+
+report build variants for packages

packages/analytics/rollup.config.js

@@ -17,7 +17,9 @@
 
 import json from '@rollup/plugin-json';
 import typescriptPlugin from 'rollup-plugin-typescript2';
+import replace from 'rollup-plugin-replace';
 import typescript from 'typescript';
+import { generateBuildTargetReplaceConfig } from '../../scripts/build/rollup_replace_build_target';
 import pkg from './package.json';
 
 const deps = [
@@ -40,12 +42,21 @@ const es5Builds = [
    */
   {
     input: 'src/index.ts',
-    output: [
-      { file: pkg.main, format: 'cjs', sourcemap: true },
-      { file: pkg.esm5, format: 'es', sourcemap: true }
-    ],
+    output: [{ file: pkg.main, format: 'cjs', sourcemap: true }],
     external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`)),
-    plugins: es5BuildPlugins
+    plugins: [
+      ...es5BuildPlugins,
+      replace(generateBuildTargetReplaceConfig('cjs', 5))
+    ]
+  },
+  {
+    input: 'src/index.ts',
+    output: [{ file: pkg.esm5, format: 'es', sourcemap: true }],
+    external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`)),
+    plugins: [
+      ...es5BuildPlugins,
+      replace(generateBuildTargetReplaceConfig('esm', 5))
+    ]
   }
 ];
 
@@ -76,7 +87,10 @@ const es2017Builds = [
       sourcemap: true
     },
     external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`)),
-    plugins: es2017BuildPlugins
+    plugins: [
+      ...es2017BuildPlugins,
+      replace(generateBuildTargetReplaceConfig('esm', 2017))
+    ]
   }
 ];
 

packages/analytics/src/index.ts

@@ -65,6 +65,8 @@ function registerAnalytics(): void {
   );
 
   registerVersion(name, version);
+  // BUILD_TARGET will be replaced by values like esm5, esm2017, cjs5, etc during the compilation
+  registerVersion(name, version, '__BUILD_TARGET__');
 
   function internalFactory(
     container: ComponentContainer

packages/app/rollup.config.js

@@ -16,8 +16,10 @@
  */
 
 import typescriptPlugin from 'rollup-plugin-typescript2';
+import replace from 'rollup-plugin-replace';
 import typescript from 'typescript';
 import json from '@rollup/plugin-json';
+import { generateBuildTargetReplaceConfig } from '../../scripts/build/rollup_replace_build_target';
 import pkg from './package.json';
 
 const deps = Object.keys(
@@ -42,7 +44,13 @@ const es5Builds = [
     input: 'src/index.ts',
     output: [{ file: pkg.esm5, format: 'es', sourcemap: true }],
     external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`)),
-    plugins: es5BuildPlugins
+    plugins: [
+      ...es5BuildPlugins,
+      replace({
+        ...generateBuildTargetReplaceConfig('esm', 5),
+        '__RUNTIME_ENV__': ''
+      })
+    ]
   },
   /**
    * Node.js Build
@@ -51,7 +59,13 @@ const es5Builds = [
     input: 'src/index.ts',
     output: [{ file: pkg.main, format: 'cjs', sourcemap: true }],
     external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`)),
-    plugins: es5BuildPlugins
+    plugins: [
+      ...es5BuildPlugins,
+      replace({
+        ...generateBuildTargetReplaceConfig('cjs', 5),
+        '__RUNTIME_ENV__': 'node'
+      })
+    ]
   }
 ];
 
@@ -84,7 +98,13 @@ const es2017Builds = [
       sourcemap: true
     },
     external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`)),
-    plugins: es2017BuildPlugins
+    plugins: [
+      ...es2017BuildPlugins,
+      replace({
+        ...generateBuildTargetReplaceConfig('esm', 2017),
+        '__RUNTIME_ENV__': ''
+      })
+    ]
   }
 ];
 

packages/app/src/index.ts

@@ -28,4 +28,4 @@ export * from './api';
 export * from './internal';
 export * from './public-types';
 
-registerCoreComponents();
+registerCoreComponents('__RUNTIME_ENV__');

packages/app/src/registerCoreComponents.ts

@@ -32,6 +32,8 @@ export function registerCoreComponents(variant?: string): void {
 
   // Register `app` package.
   registerVersion(name, version, variant);
+  // BUILD_TARGET will be replaced by values like esm5, esm2017, cjs5, etc during the compilation
+  registerVersion(name, version, '__BUILD_TARGET__');
   // Register platform SDK identifier (no version).
   registerVersion('fire-js', '');
 }

packages/auth/rollup.config.js

@@ -18,8 +18,10 @@
 import strip from '@rollup/plugin-strip';
 import typescriptPlugin from 'rollup-plugin-typescript2';
 import json from '@rollup/plugin-json';
+import replace from 'rollup-plugin-replace';
 import typescript from 'typescript';
 import alias from '@rollup/plugin-alias';
+import { generateBuildTargetReplaceConfig } from '../../scripts/build/rollup_replace_build_target';
 import pkg from './package.json';
 
 const deps = Object.keys(Object.assign({}, pkg.peerDependencies, pkg.dependencies));
@@ -30,14 +32,14 @@ const deps = Object.keys(Object.assign({}, pkg.peerDependencies, pkg.dependencie
  * more info. This regex tests explicitly ./src/platform_browser so that the
  * only impacted file is the main index.ts
  */
- const nodeAliasPlugin = alias({
+const nodeAliasPlugin = alias({
     entries: [
-      {
-        find: /^\.\/src\/platform_browser(\/.*)?$/,
-        replacement: `./src/platform_node`
-      }
+        {
+            find: /^\.\/src\/platform_browser(\/.*)?$/,
+            replacement: `./src/platform_node`
+        }
     ]
-  });
+});
 /**
  * ES5 Builds
  */
@@ -60,8 +62,8 @@ const es5Builds = [
             index: 'index.ts',
             internal: 'internal/index.ts'
         },
-        output: [{ dir: 'dist/esm5', format: 'esm', sourcemap: true }],
-        plugins: es5BuildPlugins,
+        output: [{ dir: 'dist/esm5', format: 'es', sourcemap: true }],
+        plugins: [...es5BuildPlugins, replace(generateBuildTargetReplaceConfig('esm', 5))],
         external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`))
     },
     /**
@@ -86,7 +88,8 @@ const es5Builds = [
                     ]
                 }
 
-            })
+            }),
+            replace(generateBuildTargetReplaceConfig('esm', 5))
         ],
         external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`))
     },
@@ -99,7 +102,11 @@ const es5Builds = [
             internal: 'internal/index.ts'
         },
         output: [{ dir: 'dist/node', format: 'cjs', sourcemap: true }],
-        plugins: [nodeAliasPlugin, ...es5BuildPlugins],
+        plugins: [
+            nodeAliasPlugin,
+            ...es5BuildPlugins,
+            replace(generateBuildTargetReplaceConfig('cjs', 5))
+        ],
         external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`))
     },
     /**
@@ -111,7 +118,10 @@ const es5Builds = [
             internal: 'internal/index.ts'
         },
         output: [{ dir: 'dist/cordova', format: 'es', sourcemap: true }],
-        plugins: es5BuildPlugins,
+        plugins: [
+            ...es5BuildPlugins,
+            replace(generateBuildTargetReplaceConfig('esm', 5))
+        ],
         external: id =>
             [...deps, 'cordova'].some(dep => id === dep || id.startsWith(`${dep}/`))
     },
@@ -124,7 +134,10 @@ const es5Builds = [
             internal: 'internal/index.ts'
         },
         output: [{ dir: 'dist/rn', format: 'cjs', sourcemap: true }],
-        plugins: es5BuildPlugins,
+        plugins: [
+            ...es5BuildPlugins,
+            replace(generateBuildTargetReplaceConfig('cjs', 5))
+        ],
         external: id =>
             [...deps, 'react-native'].some(
                 dep => id === dep || id.startsWith(`${dep}/`)
@@ -164,7 +177,10 @@ const es2017Builds = [
             format: 'es',
             sourcemap: true
         },
-        plugins: es2017BuildPlugins,
+        plugins: [
+            ...es2017BuildPlugins,
+            replace(generateBuildTargetReplaceConfig('esm', 2017))
+        ],
         external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`))
     }
 ];

packages/auth/src/core/auth/register.ts

@@ -123,4 +123,6 @@ export function registerAuth(clientPlatform: ClientPlatform): void {
   );
 
   registerVersion(name, version, getVersionForPlatform(clientPlatform));
+  // BUILD_TARGET will be replaced by values like esm5, esm2017, cjs5, etc during the compilation
+  registerVersion(name, version, '__BUILD_TARGET__');
 }

packages/database/rollup.config.js

@@ -17,7 +17,9 @@
 
 import json from '@rollup/plugin-json';
 import typescriptPlugin from 'rollup-plugin-typescript2';
+import replace from 'rollup-plugin-replace';
 import typescript from 'typescript';
+import { generateBuildTargetReplaceConfig } from '../../scripts/build/rollup_replace_build_target';
 import pkg from './package.json';
 
 const deps = [
@@ -50,7 +52,10 @@ const es5Builds = [
   {
     input: 'src/index.node.ts',
     output: [{ file: pkg.main, format: 'cjs', sourcemap: true }],
-    plugins: es5BuildPlugins,
+    plugins: [
+      ...es5BuildPlugins,
+      replace(generateBuildTargetReplaceConfig('cjs', 5))
+    ],
     treeshake: {
       moduleSideEffects: false
     },
@@ -69,7 +74,10 @@ const es5Builds = [
         sourcemap: true
       }
     ],
-    plugins: es5BuildPlugins,
+    plugins: [
+      ...es5BuildPlugins,
+      replace(generateBuildTargetReplaceConfig('esm', 5))
+    ],
     treeshake: {
       moduleSideEffects: false
     },
@@ -120,7 +128,10 @@ const es2017Builds = [
         sourcemap: true
       }
     ],
-    plugins: es2017BuildPlugins,
+    plugins: [
+      ...es2017BuildPlugins,
+      replace(generateBuildTargetReplaceConfig('esm', 2017))
+    ],
     treeshake: {
       moduleSideEffects: false
     },

packages/database/src/register.ts

@@ -47,4 +47,6 @@ export function registerDatabase(variant?: string): void {
     ).setMultipleInstances(true)
   );
   registerVersion(name, version, variant);
+  // BUILD_TARGET will be replaced by values like esm5, esm2017, cjs5, etc during the compilation
+  registerVersion(name, version, '__BUILD_TARGET__');
 }

packages/firestore/lite/register.ts

@@ -53,5 +53,7 @@ export function registerFirestore(): void {
       ComponentType.PUBLIC
     )
   );
-  registerVersion('firestore-lite', version, 'node');
+  // RUNTIME_ENV and BUILD_TARGET are replaced by real values during the compilation
+  registerVersion('firestore-lite', version, '__RUNTIME_ENV__');
+  registerVersion('firestore-lite', version, '__BUILD_TARGET__');
 }

packages/firestore/rollup.config.js

@@ -25,6 +25,7 @@ import copy from 'rollup-plugin-copy';
 import { terser } from 'rollup-plugin-terser';
 
 import pkg from './package.json';
+import { generateBuildTargetReplaceConfig } from '../../scripts/build/rollup_replace_build_target';
 
 const util = require('./rollup.shared');
 
@@ -77,7 +78,9 @@ const browserPlugins = function () {
 };
 
 const allBuilds = [
-  // Node ESM build
+  // Intermidiate Node ESM build without build target reporting
+  // this is an intermidiate build used to generate the actual esm and cjs builds
+  // which add build target reporting
   {
     input: './src/index.node.ts',
     output: {
@@ -100,13 +103,32 @@ const allBuilds = [
       format: 'cjs',
       sourcemap: true
     },
-    plugins: util.es2017ToEs5Plugins(/* mangled= */ false),
+    plugins: [
+      ...util.es2017ToEs5Plugins(/* mangled= */ false),
+      replace(generateBuildTargetReplaceConfig('cjs', 2017))
+    ],
     external: util.resolveNodeExterns,
     treeshake: {
       moduleSideEffects: false
     }
   },
-  // Browser build
+  // Node ESM build with build target reporting
+  {
+    input: pkg['main-esm'],
+    output: {
+      file: pkg['main-esm'],
+      format: 'es',
+      sourcemap: true
+    },
+    plugins: [replace(generateBuildTargetReplaceConfig('esm', 2017))],
+    external: util.resolveNodeExterns,
+    treeshake: {
+      moduleSideEffects: false
+    }
+  },
+  // Intermidiate browser build without build target reporting
+  // this is an intermidiate build used to generate the actual esm and cjs builds
+  // which add build target reporting
   {
     input: './src/index.ts',
     output: {
@@ -130,7 +152,26 @@ const allBuilds = [
         sourcemap: true
       }
     ],
-    plugins: util.es2017ToEs5Plugins(/* mangled= */ true),
+    plugins: [
+      ...util.es2017ToEs5Plugins(/* mangled= */ true),
+      replace(generateBuildTargetReplaceConfig('esm', 5))
+    ],
+    external: util.resolveBrowserExterns,
+    treeshake: {
+      moduleSideEffects: false
+    }
+  },
+  // es2017 build with build target reporting
+  {
+    input: pkg['browser'],
+    output: [
+      {
+        file: pkg['browser'],
+        format: 'es',
+        sourcemap: true
+      }
+    ],
+    plugins: [replace(generateBuildTargetReplaceConfig('esm', 2017))],
     external: util.resolveBrowserExterns,
     treeshake: {
       moduleSideEffects: false
@@ -144,7 +185,11 @@ const allBuilds = [
       format: 'es',
       sourcemap: true
     },
-    plugins: [alias(util.generateAliasConfig('rn')), ...browserPlugins()],
+    plugins: [
+      alias(util.generateAliasConfig('rn')),
+      ...browserPlugins(),
+      replace(generateBuildTargetReplaceConfig('esm', 2017))
+    ],
     external: util.resolveBrowserExterns,
     treeshake: {
       moduleSideEffects: false

packages/firestore/rollup.config.lite.js

@@ -27,6 +27,7 @@ import replace from 'rollup-plugin-replace';
 import { terser } from 'rollup-plugin-terser';
 
 import pkg from './lite/package.json';
+import { generateBuildTargetReplaceConfig } from '../../scripts/build/rollup_replace_build_target';
 
 const util = require('./rollup.shared');
 
@@ -77,7 +78,9 @@ const browserPlugins = function () {
 };
 
 const allBuilds = [
-  // Node ESM build
+  // Intermidiate Node ESM build without build target reporting
+  // this is an intermidiate build used to generate the actual esm and cjs builds
+  // which add build target reporting
   {
     input: './lite/index.ts',
     output: {
@@ -85,7 +88,13 @@ const allBuilds = [
       format: 'es',
       sourcemap: true
     },
-    plugins: [alias(util.generateAliasConfig('node_lite')), ...nodePlugins()],
+    plugins: [
+      alias(util.generateAliasConfig('node_lite')),
+      ...nodePlugins(),
+      replace({
+        '__RUNTIME_ENV__': 'node'
+      })
+    ],
     external: util.resolveNodeExterns,
     treeshake: {
       moduleSideEffects: false
@@ -110,14 +119,31 @@ const allBuilds = [
         include: ['dist/lite/*.js']
       }),
       json(),
-      sourcemaps()
+      sourcemaps(),
+      replace(generateBuildTargetReplaceConfig('cjs', 5))
     ],
     external: util.resolveNodeExterns,
     treeshake: {
       moduleSideEffects: false
     }
   },
-  // Browser build
+  // Node ESM build
+  {
+    input: path.resolve('./lite', pkg['main-esm']),
+    output: {
+      file: path.resolve('./lite', pkg['main-esm']),
+      format: 'es',
+      sourcemap: true
+    },
+    plugins: [replace(generateBuildTargetReplaceConfig('esm', 2017))],
+    external: util.resolveNodeExterns,
+    treeshake: {
+      moduleSideEffects: false
+    }
+  },
+  // Intermidiate browser build without build target reporting
+  // this is an intermidiate build used to generate the actual esm and cjs builds
+  // which add build target reporting
   {
     input: './lite/index.ts',
     output: {
@@ -127,7 +153,11 @@ const allBuilds = [
     },
     plugins: [
       alias(util.generateAliasConfig('browser_lite')),
-      ...browserPlugins()
+      ...browserPlugins(),
+      // setting it to empty string because browser is the default env
+      replace({
+        '__RUNTIME_ENV__': ''
+      })
     ],
     external: util.resolveBrowserExterns,
     treeshake: {
@@ -144,7 +174,26 @@ const allBuilds = [
         sourcemap: true
       }
     ],
-    plugins: util.es2017ToEs5Plugins(/* mangled= */ true),
+    plugins: [
+      ...util.es2017ToEs5Plugins(/* mangled= */ true),
+      replace(generateBuildTargetReplaceConfig('esm', 5))
+    ],
+    external: util.resolveBrowserExterns,
+    treeshake: {
+      moduleSideEffects: false
+    }
+  },
+  // Browser es2017 build
+  {
+    input: path.resolve('./lite', pkg.browser),
+    output: [
+      {
+        file: path.resolve('./lite', pkg.browser),
+        format: 'es',
+        sourcemap: true
+      }
+    ],
+    plugins: [replace(generateBuildTargetReplaceConfig('esm', 2017))],
     external: util.resolveBrowserExterns,
     treeshake: {
       moduleSideEffects: false
@@ -158,7 +207,14 @@ const allBuilds = [
       format: 'es',
       sourcemap: true
     },
-    plugins: [alias(util.generateAliasConfig('rn_lite')), ...browserPlugins()],
+    plugins: [
+      alias(util.generateAliasConfig('rn_lite')),
+      ...browserPlugins(),
+      replace({
+        ...generateBuildTargetReplaceConfig('esm', 2017),
+        '__RUNTIME_ENV__': 'rn'
+      })
+    ],
     external: util.resolveBrowserExterns,
     treeshake: {
       moduleSideEffects: false

packages/firestore/src/register.ts

@@ -50,4 +50,6 @@ export function registerFirestore(variant?: string): void {
     )
   );
   registerVersion(name, version, variant);
+  // BUILD_TARGET will be replaced by values like esm5, esm2017, cjs5, etc during the compilation
+  registerVersion(name, version, '__BUILD_TARGET__');
 }

packages/functions/rollup.config.js

@@ -17,8 +17,10 @@
 
 import json from '@rollup/plugin-json';
 import typescriptPlugin from 'rollup-plugin-typescript2';
+import replace from 'rollup-plugin-replace';
 import typescript from 'typescript';
 import pkg from './package.json';
+import { generateBuildTargetReplaceConfig } from '../../scripts/build/rollup_replace_build_target';
 
 const deps = Object.keys(
   Object.assign({}, pkg.peerDependencies, pkg.dependencies)
@@ -41,7 +43,10 @@ const es5Builds = [
     input: 'src/index.ts',
     output: [{ file: pkg.esm5, format: 'es', sourcemap: true }],
     external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`)),
-    plugins: es5BuildPlugins
+    plugins: [
+      ...es5BuildPlugins,
+      replace(generateBuildTargetReplaceConfig('esm', 5))
+    ]
   },
   /**
    * Node.js Build
@@ -50,7 +55,10 @@ const es5Builds = [
     input: 'src/index.node.ts',
     output: [{ file: pkg.main, format: 'cjs', sourcemap: true }],
     external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`)),
-    plugins: es5BuildPlugins
+    plugins: [
+      ...es5BuildPlugins,
+      replace(generateBuildTargetReplaceConfig('cjs', 5))
+    ]
   }
 ];
 
@@ -81,7 +89,10 @@ const es2017Builds = [
       sourcemap: true
     },
     external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`)),
-    plugins: es2017BuildPlugins
+    plugins: [
+      ...es2017BuildPlugins,
+      replace(generateBuildTargetReplaceConfig('esm', 2017))
+    ]
   }
 ];
 

packages/functions/src/config.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { _registerComponent } from '@firebase/app';
+import { _registerComponent, registerVersion } from '@firebase/app';
 import { FunctionsService } from './service';
 import {
   Component,
@@ -27,6 +27,7 @@ import { FUNCTIONS_TYPE } from './constants';
 import { FirebaseAuthInternalName } from '@firebase/auth-interop-types';
 import { AppCheckInternalComponentName } from '@firebase/app-check-interop-types';
 import { MessagingInternalComponentName } from '@firebase/messaging-interop-types';
+import { name, version } from '../package.json';
 
 const AUTH_INTERNAL_NAME: FirebaseAuthInternalName = 'auth-internal';
 const APP_CHECK_INTERNAL_NAME: AppCheckInternalComponentName =
@@ -34,7 +35,10 @@ const APP_CHECK_INTERNAL_NAME: AppCheckInternalComponentName =
 const MESSAGING_INTERNAL_NAME: MessagingInternalComponentName =
   'messaging-internal';
 
-export function registerFunctions(fetchImpl: typeof fetch): void {
+export function registerFunctions(
+  fetchImpl: typeof fetch,
+  variant?: string
+): void {
   const factory: InstanceFactory<'functions'> = (
     container: ComponentContainer,
     { instanceIdentifier: regionOrCustomDomain }
@@ -63,4 +67,8 @@ export function registerFunctions(fetchImpl: typeof fetch): void {
       ComponentType.PUBLIC
     ).setMultipleInstances(true)
   );
+
+  registerVersion(name, version, variant);
+  // BUILD_TARGET will be replaced by values like esm5, esm2017, cjs5, etc during the compilation
+  registerVersion(name, version, '__BUILD_TARGET__');
 }

packages/functions/src/index.node.ts

@@ -14,14 +14,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { registerVersion } from '@firebase/app';
 import { registerFunctions } from './config';
 import nodeFetch from 'node-fetch';
 
-import { name, version } from '../package.json';
-
 export * from './api';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-registerFunctions(nodeFetch as any);
-registerVersion(name, version, 'node');
+registerFunctions(nodeFetch as any, 'node');

packages/functions/src/index.ts

@@ -20,12 +20,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { registerVersion } from '@firebase/app';
 import { registerFunctions } from './config';
 
-import { name, version } from '../package.json';
-
 export * from './api';
 
 registerFunctions(fetch.bind(self));
-registerVersion(name, version);

packages/installations/rollup.config.js

@@ -17,8 +17,10 @@
 
 import json from '@rollup/plugin-json';
 import typescriptPlugin from 'rollup-plugin-typescript2';
+import replace from 'rollup-plugin-replace';
 import typescript from 'typescript';
 import pkg from './package.json';
+import { generateBuildTargetReplaceConfig } from '../../scripts/build/rollup_replace_build_target';
 
 const deps = [...Object.keys({ ...pkg.peerDependencies, ...pkg.dependencies })];
 
@@ -30,12 +32,21 @@ const es5BuildPlugins = [typescriptPlugin({ typescript }), json()];
 const es5Builds = [
   {
     input: 'src/index.ts',
-    output: [
-      { file: pkg.main, format: 'cjs', sourcemap: true },
-      { file: pkg.esm5, format: 'es', sourcemap: true }
-    ],
+    output: [{ file: pkg.main, format: 'cjs', sourcemap: true }],
     external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`)),
-    plugins: es5BuildPlugins
+    plugins: [
+      ...es5BuildPlugins,
+      replace(generateBuildTargetReplaceConfig('cjs', 5))
+    ]
+  },
+  {
+    input: 'src/index.ts',
+    output: [{ file: pkg.esm5, format: 'es', sourcemap: true }],
+    external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`)),
+    plugins: [
+      ...es5BuildPlugins,
+      replace(generateBuildTargetReplaceConfig('esm', 5))
+    ]
   }
 ];
 
@@ -63,7 +74,10 @@ const es2017Builds = [
       sourcemap: true
     },
     external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`)),
-    plugins: es2017BuildPlugins
+    plugins: [
+      ...es2017BuildPlugins,
+      replace(generateBuildTargetReplaceConfig('esm', 2017))
+    ]
   }
 ];
 

packages/installations/src/index.ts

@@ -30,3 +30,5 @@ export * from './interfaces/public-types';
 
 registerInstallations();
 registerVersion(name, version);
+// BUILD_TARGET will be replaced by values like esm5, esm2017, cjs5, etc during the compilation
+registerVersion(name, version, '__BUILD_TARGET__');

packages/messaging/api-extractor.json

@@ -1,10 +1,10 @@
 {
   "extends": "../../config/api-extractor.json",
   // Point it to your entry point d.ts file.
-  "mainEntryPointFilePath": "<projectFolder>/dist/index.d.ts",
+  "mainEntryPointFilePath": "<projectFolder>/dist/src/index.d.ts",
   "additionalEntryPoints": [{
     "modulePath": "sw",
-    "filePath": "<projectFolder>/dist/index.sw.d.ts"
+    "filePath": "<projectFolder>/dist/src/index.sw.d.ts"
   }],
   "dtsRollup": {
     /** 

packages/messaging/package.json

@@ -6,7 +6,7 @@
   "main": "dist/index.cjs.js",
   "browser": "dist/index.esm2017.js",
   "module": "dist/index.esm2017.js",
-  "typings": "dist/index.d.ts",
+  "typings": "dist/src/index.d.ts",
   "sw": "dist/index.sw.esm2017.js",
   "files": [
     "dist",
@@ -25,8 +25,8 @@
     "test:karma": "karma start --single-run",
     "test:debug": "karma start --browsers=Chrome --auto-watch",
     "api-report": "yarn api-report:main && yarn api-report:sw && yarn api-report:api-json",
-    "api-report:main": "ts-node-script ../../repo-scripts/prune-dts/extract-public-api.ts --package messaging --packageRoot . --typescriptDts ./dist/index.d.ts --rollupDts ./dist/private.d.ts --untrimmedRollupDts ./dist/internal.d.ts --publicDts ./dist/index-public.d.ts",
-    "api-report:sw": "ts-node-script ../../repo-scripts/prune-dts/extract-public-api.ts --package messaging-sw --packageRoot . --typescriptDts ./dist/index.sw.d.ts --rollupDts ./dist/sw/private.d.ts --untrimmedRollupDts ./dist/sw/internal.d.ts --publicDts ./dist/sw/index-public.d.ts",
+    "api-report:main": "ts-node-script ../../repo-scripts/prune-dts/extract-public-api.ts --package messaging --packageRoot . --typescriptDts ./dist/src/index.d.ts --rollupDts ./dist/private.d.ts --untrimmedRollupDts ./dist/internal.d.ts --publicDts ./dist/index-public.d.ts",
+    "api-report:sw": "ts-node-script ../../repo-scripts/prune-dts/extract-public-api.ts --package messaging-sw --packageRoot . --typescriptDts ./dist/src/index.sw.d.ts --rollupDts ./dist/sw/private.d.ts --untrimmedRollupDts ./dist/sw/internal.d.ts --publicDts ./dist/sw/index-public.d.ts",
     "api-report:api-json": "api-extractor run --local --verbose",
     "type-check": "tsc --noEmit",
     "typings:public": "node ../../scripts/build/use_typings.js ./dist/index-public.d.ts"

packages/messaging/rollup.config.js

@@ -18,7 +18,9 @@
 import json from '@rollup/plugin-json';
 import pkg from './package.json';
 import typescript from 'typescript';
+import replace from 'rollup-plugin-replace';
 import typescriptPlugin from 'rollup-plugin-typescript2';
+import { generateBuildTargetReplaceConfig } from '../../scripts/build/rollup_replace_build_target';
 
 const deps = Object.keys(
   Object.assign({}, pkg.peerDependencies, pkg.dependencies)
@@ -37,11 +39,20 @@ const es5BuildPlugins = [
 const es5Builds = [
   {
     input: 'src/index.ts',
-    output: [
-      { file: pkg.main, format: 'cjs', sourcemap: true },
-      { file: pkg.esm5, format: 'es', sourcemap: true }
+    output: [{ file: pkg.main, format: 'cjs', sourcemap: true }],
+    plugins: [
+      ...es5BuildPlugins,
+      replace(generateBuildTargetReplaceConfig('cjs', 5))
+    ],
+    external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`))
+  },
+  {
+    input: 'src/index.ts',
+    output: [{ file: pkg.esm5, format: 'es', sourcemap: true }],
+    plugins: [
+      ...es5BuildPlugins,
+      replace(generateBuildTargetReplaceConfig('esm', 5))
     ],
-    plugins: es5BuildPlugins,
     external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`))
   }
 ];
@@ -69,7 +80,10 @@ const es2017Builds = [
       format: 'es',
       sourcemap: true
     },
-    plugins: es2017BuildPlugins,
+    plugins: [
+      ...es2017BuildPlugins,
+      replace(generateBuildTargetReplaceConfig('esm', 2017))
+    ],
     external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`))
   },
   // sw builds

packages/messaging/src/helpers/register.ts

@@ -31,10 +31,12 @@ import { GetTokenOptions } from '../interfaces/public-types';
 import { MessagingInternal } from '@firebase/messaging-interop-types';
 import { MessagingService } from '../messaging-service';
 import { ServiceWorkerGlobalScope } from '../util/sw-types';
-import { _registerComponent } from '@firebase/app';
+import { _registerComponent, registerVersion } from '@firebase/app';
 import { getToken } from '../api/getToken';
 import { messageEventListener } from '../listeners/window-listener';
 
+import { name, version } from '../../package.json';
+
 const WindowMessagingFactory: InstanceFactory<'messaging'> = (
   container: ComponentContainer
 ) => {
@@ -100,6 +102,10 @@ export function registerMessagingInWindow(): void {
       ComponentType.PRIVATE
     )
   );
+
+  registerVersion(name, version);
+  // BUILD_TARGET will be replaced by values like esm5, esm2017, cjs5, etc during the compilation
+  registerVersion(name, version, '__BUILD_TARGET__');
 }
 
 /**

packages/messaging/sw/package.json

@@ -3,5 +3,5 @@
   "description": "",
   "author": "Firebase <[email protected]> (https://firebase.google.com/)",
   "module": "../dist/index.sw.esm2017.js",
-  "typings": "../dist/index.sw.d.ts"
+  "typings": "../dist/src/index.sw.d.ts"
 }

packages/performance/rollup.config.js

@@ -17,7 +17,9 @@
 
 import json from '@rollup/plugin-json';
 import typescriptPlugin from 'rollup-plugin-typescript2';
+import replace from 'rollup-plugin-replace';
 import typescript from 'typescript';
+import { generateBuildTargetReplaceConfig } from '../../scripts/build/rollup_replace_build_target';
 import pkg from './package.json';
 
 const deps = Object.keys(
@@ -31,12 +33,21 @@ const es5BuildPlugins = [typescriptPlugin({ typescript }), json()];
 const es5Builds = [
   {
     input: 'src/index.ts',
-    output: [
-      { file: pkg.main, format: 'cjs', sourcemap: true },
-      { file: pkg.esm5, format: 'es', sourcemap: true }
-    ],
+    output: [{ file: pkg.main, format: 'cjs', sourcemap: true }],
     external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`)),
-    plugins: es5BuildPlugins
+    plugins: [
+      ...es5BuildPlugins,
+      replace(generateBuildTargetReplaceConfig('cjs', 5))
+    ]
+  },
+  {
+    input: 'src/index.ts',
+    output: [{ file: pkg.esm5, format: 'es', sourcemap: true }],
+    external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`)),
+    plugins: [
+      ...es5BuildPlugins,
+      replace(generateBuildTargetReplaceConfig('esm', 5))
+    ]
   }
 ];
 
@@ -60,7 +71,10 @@ const es2017Builds = [
     input: 'src/index.ts',
     output: [{ file: pkg.browser, format: 'es', sourcemap: true }],
     external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`)),
-    plugins: es2017BuildPlugins
+    plugins: [
+      ...es2017BuildPlugins,
+      replace(generateBuildTargetReplaceConfig('esm', 2017))
+    ]
   }
 ];
 

packages/performance/src/index.ts

@@ -135,9 +135,11 @@ function registerPerformance(): void {
   _registerComponent(
     new Component('performance', factory, ComponentType.PUBLIC)
   );
+  registerVersion(name, version);
+  // BUILD_TARGET will be replaced by values like esm5, esm2017, cjs5, etc during the compilation
+  registerVersion(name, version, '__BUILD_TARGET__');
 }
 
 registerPerformance();
-registerVersion(name, version);
 
 export { FirebasePerformance, PerformanceSettings, PerformanceTrace };

packages/remote-config/rollup.config.js

@@ -17,7 +17,9 @@
 
 import json from '@rollup/plugin-json'; // Enables package.json import in TypeScript.
 import typescriptPlugin from 'rollup-plugin-typescript2';
+import replace from 'rollup-plugin-replace';
 import typescript from 'typescript';
+import { generateBuildTargetReplaceConfig } from '../../scripts/build/rollup_replace_build_target';
 import pkg from './package.json';
 
 const deps = Object.keys(
@@ -39,12 +41,21 @@ const es5Builds = [
    */
   {
     input: 'src/index.ts',
-    output: [
-      { file: pkg.main, format: 'cjs', sourcemap: true },
-      { file: pkg.esm5, format: 'es', sourcemap: true }
-    ],
+    output: [{ file: pkg.main, format: 'cjs', sourcemap: true }],
     external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`)),
-    plugins: es5BuildPlugins
+    plugins: [
+      ...es5BuildPlugins,
+      replace(generateBuildTargetReplaceConfig('cjs', 5))
+    ]
+  },
+  {
+    input: 'src/index.ts',
+    output: [{ file: pkg.esm5, format: 'es', sourcemap: true }],
+    external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`)),
+    plugins: [
+      ...es5BuildPlugins,
+      replace(generateBuildTargetReplaceConfig('esm', 5))
+    ]
   }
 ];
 
@@ -75,7 +86,10 @@ const es2017Builds = [
       sourcemap: true
     },
     external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`)),
-    plugins: es2017BuildPlugins
+    plugins: [
+      ...es2017BuildPlugins,
+      replace(generateBuildTargetReplaceConfig('esm', 2017))
+    ]
   }
 ];
 

packages/remote-config/src/register.ts

@@ -52,6 +52,8 @@ export function registerRemoteConfig(): void {
   );
 
   registerVersion(packageName, version);
+  // BUILD_TARGET will be replaced by values like esm5, esm2017, cjs5, etc during the compilation
+  registerVersion(packageName, version, '__BUILD_TARGET__');
 
   function remoteConfigFactory(
     container: ComponentContainer,

packages/storage/rollup.config.js

@@ -17,8 +17,10 @@
 
 import json from '@rollup/plugin-json';
 import typescriptPlugin from 'rollup-plugin-typescript2';
+import replace from 'rollup-plugin-replace';
 import typescript from 'typescript';
 import alias from '@rollup/plugin-alias';
+import { generateBuildTargetReplaceConfig } from '../../scripts/build/rollup_replace_build_target';
 import pkg from './package.json';
 
 function generateAliasConfig(platform) {
@@ -54,7 +56,33 @@ const es5Builds = [
       { file: 'dist/index.browser.cjs.js', format: 'cjs', sourcemap: true },
       { file: pkg.esm5, format: 'es', sourcemap: true }
     ],
-    plugins: [alias(generateAliasConfig('browser')), ...es5Plugins],
+    plugins: [
+      alias(generateAliasConfig('browser')),
+      ...es5Plugins,
+      replace({
+        ...generateBuildTargetReplaceConfig('esm', 5),
+        '__RUNTIME_ENV__': ''
+      })
+    ],
+    external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`)),
+    treeshake: {
+      moduleSideEffects: false
+    }
+  },
+  {
+    // needed by Emulator UI
+    input: './src/index.ts',
+    output: [
+      { file: 'dist/index.browser.cjs.js', format: 'cjs', sourcemap: true }
+    ],
+    plugins: [
+      alias(generateAliasConfig('browser')),
+      ...es5Plugins,
+      replace({
+        ...generateBuildTargetReplaceConfig('cjs', 5),
+        '__RUNTIME_ENV__': ''
+      })
+    ],
     external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`)),
     treeshake: {
       moduleSideEffects: false
@@ -84,7 +112,14 @@ const es2017Builds = [
       format: 'cjs',
       sourcemap: true
     },
-    plugins: [alias(generateAliasConfig('node')), ...es2017Plugins],
+    plugins: [
+      alias(generateAliasConfig('node')),
+      ...es2017Plugins,
+      replace({
+        ...generateBuildTargetReplaceConfig('cjs', 2017),
+        '__RUNTIME_ENV__': 'node'
+      })
+    ],
     external: id =>
       nodeDeps.some(dep => id === dep || id.startsWith(`${dep}/`)),
     treeshake: {
@@ -100,7 +135,14 @@ const es2017Builds = [
       format: 'es',
       sourcemap: true
     },
-    plugins: [alias(generateAliasConfig('browser')), ...es2017Plugins],
+    plugins: [
+      alias(generateAliasConfig('browser')),
+      ...es2017Plugins,
+      replace({
+        ...generateBuildTargetReplaceConfig('esm', 2017),
+        '__RUNTIME_ENV__': ''
+      })
+    ],
     external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`)),
     treeshake: {
       moduleSideEffects: false

packages/storage/src/index.ts

@@ -70,8 +70,10 @@ function registerStorage(): void {
       ComponentType.PUBLIC
     ).setMultipleInstances(true)
   );
-
-  registerVersion(name, version);
+  //RUNTIME_ENV will be replaced during the compilation to "node" for nodejs and an empty string for browser
+  registerVersion(name, version, '__RUNTIME_ENV__');
+  // BUILD_TARGET will be replaced by values like esm5, esm2017, cjs5, etc during the compilation
+  registerVersion(name, version, '__BUILD_TARGET__');
 }
 
 registerStorage();

scripts/build/rollup_replace_build_target.js

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2021 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.
+ */
+
+/**
+ *
+ * @param {'esm'|'cjs'} moduleFormat valid values are esm and cjs
+ * @param {number} languageTarget valid values are 5, 2015, 2016 ... 2020
+ */
+export function generateBuildTargetReplaceConfig(moduleFormat, languageTarget) {
+  let buildTarget = '';
+
+  switch (moduleFormat.toLowerCase()) {
+    case 'esm':
+      buildTarget += 'esm';
+      break;
+    case 'cjs':
+      buildTarget += 'cjs';
+      break;
+    default:
+      throw Error(
+        `unsupported module format ${moduleFormat}. Valid values are esm and cjs.`
+      );
+  }
+
+  if (typeof languageTarget !== 'number') {
+    throw Error(`languageTarget accepts only number`);
+  }
+
+  // simplified input validation
+  if (languageTarget != 5 && languageTarget < 2015) {
+    throw Error(
+      `invalid languageTarget ${languageTarget}. Valid values are 5, 2015, 2016, etc.`
+    );
+  }
+
+  buildTarget += languageTarget;
+
+  return {
+    [BUILD_TARGET_MAGIC_STRING]: buildTarget
+  };
+}
+
+export const BUILD_TARGET_MAGIC_STRING = '__BUILD_TARGET__';