provide ESM for FirebaseUI (#605)

* added esm module

* removed extra newline

Author: wti806

gulpfile.js

@@ -37,17 +37,32 @@ const OPTIMIZATION_LEVEL = util.env.compilation_level ||
 
 // For minified builds, wrap the output so we avoid leaking global variables.
 const OUTPUT_WRAPPER = OPTIMIZATION_LEVEL === 'WHITESPACE_ONLY' ?
-    '%output%' : '(function() { %output% })();';
+    '%output%' : '(function() { %output% }).apply(' +
+    'typeof global !== \'undefined\' ? global : typeof self !== \'undefined\' ' +
+    '? self : window );';
 
-// Provides missing dialogPolyfill on window in npm environments.
+// Provides missing dialogPolyfill on window in cjs environments.
 const DIALOG_POLYFILL = 'if(typeof window!==\'undefined\')' +
     '{window.dialogPolyfill=require(\'dialog-polyfill\');}';
 
+// Provides missing dialogPolyfill on window for esm.
+const ESM_DIALOG_POLYFILL = 'if(typeof window!==\'undefined\')' +
+    '{window.dialogPolyfill=dialogPolyfill;}';
+
 // Using default import if available.
 const DEFAULT_IMPORT_FIX = 'if(typeof firebase.default!==\'undefined\')' +
     '{firebase=firebase.default;}';
 
-// Adds the module requirement and exports firebaseui.
+// Import esm modules.
+const ESM_IMPORT = 'import * as firebase from \'firebase/app\';' +
+    'import \'firebase/auth\';' +
+    'import dialogPolyfill from \'dialog-polyfill\';';
+
+// Export firebaseui.auth module.
+const ESM_EXPORT = 'const auth = firebaseui.auth;' +
+    'export { auth } ;';
+
+// Adds the cjs module requirement and exports firebaseui.
 const NPM_MODULE_WRAPPER = OPTIMIZATION_LEVEL === 'WHITESPACE_ONLY' ?
     'var firebase=require(\'firebase/app\');require(\'firebase/auth\');' +
     DEFAULT_IMPORT_FIX + '%output%' + DIALOG_POLYFILL +
@@ -56,6 +71,16 @@ const NPM_MODULE_WRAPPER = OPTIMIZATION_LEVEL === 'WHITESPACE_ONLY' ?
     'require(\'firebase/auth\');' + DEFAULT_IMPORT_FIX + '%output% ' +
     DIALOG_POLYFILL + '})();' + 'module.exports=firebaseui;';
 
+// Adds the module requirement and exports firebaseui.
+const ESM_MODULE_WRAPPER = OPTIMIZATION_LEVEL === 'WHITESPACE_ONLY' ?
+    ESM_IMPORT + '%output%' +
+    ESM_DIALOG_POLYFILL + ESM_EXPORT :
+    ESM_IMPORT +
+    '(function() {' + '%output%' + '}).apply(' +
+    'typeof global !== \'undefined\' ? global : typeof self !== \'undefined\' ' +
+    '? self : window );' +
+    ESM_DIALOG_POLYFILL + ESM_EXPORT;
+
 // The path to Closure Compiler.
 const COMPILER_PATH = 'node_modules/google-closure-compiler-java/compiler.jar';
 
@@ -265,6 +290,12 @@ repeatTaskForAllLocales(
     'build-npm-$', ['build-firebaseui-js-$'],
     (locale) => concatWithDeps(locale, 'npm', NPM_MODULE_WRAPPER));
 
+// Bundles the FirebaseUI JS with its dependencies as a ESM module. This builds
+// the NPM module for all languages.
+repeatTaskForAllLocales(
+    'build-esm-$', ['build-firebaseui-js-$'],
+    (locale) => concatWithDeps(locale, 'esm', ESM_MODULE_WRAPPER));
+
 // Bundles the FirebaseUI JS with its dependencies for all locales.
 // Generates the gulp tasks build-js-de, build-js-fr, etc.
 const buildJsTasks = repeatTaskForAllLocales(
@@ -289,6 +320,12 @@ gulp.task('build-npm', gulp.series(
     () => makeDefaultFile('npm')
 ));
 
+// Builds the ESM module for the default language.
+gulp.task('build-esm', gulp.series(
+    'build-esm-' + DEFAULT_LOCALE,
+    () => makeDefaultFile('esm')
+));
+
 /**
  * Builds the CSS for FirebaseUI.
  * @param {boolean} isRtl Whether to build in right-to-left mode.
@@ -336,13 +373,13 @@ gulp.task('clean', () => fse.remove(TMP_DIR));
 // Executes the basic tasks for the default language.
 gulp.task('default', gulp.series(
     'build-externs', 'build-ts', 'build-js',
-    'build-npm', 'build-css', 'build-css-rtl',
+    'build-npm', 'build-esm', 'build-css', 'build-css-rtl',
     'clean'
 ));
 
 // Builds everything (JS for all languages, both LTR and RTL CSS).
 gulp.task('build-all', gulp.series(
     'build-externs', 'build-ts', 'build-all-js',
-    'build-npm', 'build-css', 'build-css-rtl',
+    'build-npm', 'build-esm', 'build-css', 'build-css-rtl',
     'clean'
 ));

javascript/ui/element/listboxdialog.js

@@ -46,6 +46,7 @@ var element = firebaseui.auth.ui.element;
  * @this {goog.ui.Component}
  */
 listBoxDialog.showListBoxDialog = function(items, onSelect, opt_selectedId) {
+  var self = this;
   var dialogElement = goog.soy.renderAsElement(
       firebaseui.auth.soy2.element.listBoxDialog,
       {items: items},
@@ -70,7 +71,7 @@ listBoxDialog.showListBoxDialog = function(items, onSelect, opt_selectedId) {
     var listBoxId = pressedButton &&
         listBoxDialog.getListBoxIdOfButton_(pressedButton);
     if (listBoxId) {
-      firebaseui.auth.ui.element.dialog.dismissDialog();
+      firebaseui.auth.ui.element.dialog.dismissDialog.call(self);
 
       // The callback should happen after the dialog is dismissed; otherwise
       // focus() within the callback does not work.