Provide ESM modules from webchannel-wrapper (#7228)

Author: hsubox76

.changeset/strong-ghosts-compare.md

@@ -0,0 +1,5 @@
+---
+'@firebase/webchannel-wrapper': patch
+---
+
+Make webchannel-wrapper exports Node-ESM-friendly.

packages/webchannel-wrapper/gulpfile.js

@@ -26,6 +26,22 @@ const commonjs = require('@rollup/plugin-commonjs');
 const rollupSourcemaps = require('rollup-plugin-sourcemaps');
 const typescriptPlugin = require('rollup-plugin-typescript2');
 const typescript = require('typescript');
+const pkg = require('./package.json');
+
+// Copied from "../../scripts/build/rollup_emit_module_package_file" which is ESM
+// and would require converting this file to MJS to use
+function emitModulePackageFile() {
+  return {
+    generateBundle() {
+      this.emitFile({
+        fileName: 'package.json',
+        source: `{"type":"module"}`,
+        type: 'asset'
+      });
+    },
+    name: 'emit-module-package-file'
+  };
+}
 
 // The optimization level for the JS compiler.
 // Valid levels: WHITESPACE_ONLY, SIMPLE_OPTIMIZATIONS, ADVANCED_OPTIMIZATIONS.
@@ -114,13 +130,29 @@ function createRollupTask({
         })
       );
     }
+    if (format === 'es') {
+      plugins.push(emitModulePackageFile());
+    }
     const inputOptions = {
       input: inputPath,
       plugins
     };
 
+    let outputFilename;
+    if (format === 'es') {
+      if (compileToES5) {
+        // ESM5
+        outputFilename = pkg.esm5;
+      } else {
+        // ESM2017
+        outputFilename = pkg.module;
+      }
+    } else {
+      // CJS
+      outputFilename = pkg.main;
+    }
     const outputOptions = {
-      file: `dist/index${outputExtension ? '.' : ''}${outputExtension}.js`,
+      file: outputFilename,
       format,
       sourcemap: true,
       // Prevents warning when compiling CJS that there are named and default exports together.

packages/webchannel-wrapper/package.json

@@ -4,14 +4,14 @@
   "description": "A wrapper of the webchannel packages from closure-library for use outside of a closure compiled application",
   "author": "Firebase <[email protected]> (https://firebase.google.com/)",
   "main": "dist/index.js",
-  "module": "dist/index.esm2017.js",
-  "esm5": "dist/index.esm.js",
+  "module": "dist/esm/index.esm2017.js",
+  "esm5": "dist/esm/index.esm.js",
   "exports": {
     ".": {
       "types": "./src/index.d.ts",
       "require": "./dist/index.js",
-      "esm5": "./dist/index.esm.js",
-      "default": "./dist/index.esm2017.js"
+      "esm5": "./dist/esm/index.esm.js",
+      "default": "./dist/esm/index.esm2017.js"
     },
     "./package.json": "./package.json"
   },