Remove dependencies from ES module (#623)

* Move material-design-lite to the dependencies

* Split dependencies for ES modules and CommonJS modules

Author: LuudJanssen

gulpfile.js

@@ -53,10 +53,29 @@ const ESM_DIALOG_POLYFILL = 'if(typeof window!==\'undefined\')' +
 const DEFAULT_IMPORT_FIX = 'if(typeof firebase.default!==\'undefined\')' +
     '{firebase=firebase.default;}';
 
+// The Material Design Lite components needed by FirebaseUI.
+const MDL_COMPONENTS = [
+  'mdlComponentHandler',
+  'button/button',
+  'progress/progress',
+  'spinner/spinner',
+  'textfield/textfield'
+]
+
+// The external dependencies needed by FirebaseUI as ES module imports.
+const ESM_DEPS = [
+  'import * as firebase from \'firebase/app\'',
+  'import \'firebase/auth\'',
+  'import dialogPolyfill from \'dialog-polyfill\'',
+].concat(MDL_COMPONENTS.map(component => `import \'material-design-lite/src/${component}\'`))
+
+// The external dependencies needed by FirebaseUI as CommonJS modules.
+const CJS_DEPS = [
+  'node_modules/dialog-polyfill/dialog-polyfill.js'
+].concat(MDL_COMPONENTS.map(component => `node_modules/material-design-lite/src/${component}.js`));
+
 // Import esm modules.
-const ESM_IMPORT = 'import * as firebase from \'firebase/app\';' +
-    'import \'firebase/auth\';' +
-    'import dialogPolyfill from \'dialog-polyfill\';';
+const ESM_IMPORT = ESM_DEPS.join(';') + ';';
 
 // Export firebaseui.auth module.
 const ESM_EXPORT = 'const auth = firebaseui.auth;' +
@@ -106,16 +125,6 @@ const COMPILER_DEFAULT_ARGS = {
   language_out: 'ES5'
 };
 
-// The external dependencies needed by FirebaseUI.
-const JS_DEPS = [
-  'node_modules/material-design-lite/src/mdlComponentHandler.js',
-  'node_modules/material-design-lite/src/button/button.js',
-  'node_modules/material-design-lite/src/progress/progress.js',
-  'node_modules/material-design-lite/src/spinner/spinner.js',
-  'node_modules/material-design-lite/src/textfield/textfield.js',
-  'node_modules/dialog-polyfill/dialog-polyfill.js'
-];
-
 // The typescript definitions file path.
 const TYPES_FILE = './types/index.d.ts';
 
@@ -241,12 +250,13 @@ function buildFirebaseUiJs(locale) {
  * @param {string} locale The desired FirebaseUI locale.
  * @param {string} outBaseName The prefix of the output file name.
  * @param {string} outputWrapper A wrapper with which to wrap the output JS.
+ * @param {string[]} dependencies The dependencies to concatenate.
  * @return {*} A stream that ends when compilation finishes.
  */
-function concatWithDeps(locale, outBaseName, outputWrapper) {
+function concatWithDeps(locale, outBaseName, outputWrapper, dependencies = []) {
   const localeForFileName = getLocaleForFileName(locale);
   // Get a list of the FirebaseUI JS and its dependencies.
-  const srcs = JS_DEPS.concat([getTmpJsPath(locale)]);
+  const srcs = dependencies.concat([getTmpJsPath(locale)]);
   const outputPath = `${DEST_DIR}/${outBaseName}__${localeForFileName}.js`;
   return compile(srcs, outputPath, {
     compilation_level: 'WHITESPACE_ONLY',
@@ -288,7 +298,7 @@ repeatTaskForAllLocales(
 // the NPM module for all languages.
 repeatTaskForAllLocales(
     'build-npm-$', ['build-firebaseui-js-$'],
-    (locale) => concatWithDeps(locale, 'npm', NPM_MODULE_WRAPPER));
+    (locale) => concatWithDeps(locale, 'npm', NPM_MODULE_WRAPPER, CJS_DEPS));
 
 // Bundles the FirebaseUI JS with its dependencies as a ESM module. This builds
 // the NPM module for all languages.
@@ -300,7 +310,7 @@ repeatTaskForAllLocales(
 // Generates the gulp tasks build-js-de, build-js-fr, etc.
 const buildJsTasks = repeatTaskForAllLocales(
     'build-js-$', ['build-firebaseui-js-$'],
-    (locale) => concatWithDeps(locale, 'firebaseui', OUTPUT_WRAPPER));
+    (locale) => concatWithDeps(locale, 'firebaseui', OUTPUT_WRAPPER, CJS_DEPS));
 
 // Builds the final JS file for the default language.
 gulp.task('build-js', gulp.series(

package-lock.json

@@ -51,12 +51,12 @@
     "gulp-css-inline-images": "^0.1.1",
     "gulp-sass": "^2.3.2",
     "gulp-util": "^3.0.7",
-    "material-design-lite": "^1.2.0",
     "protractor": "^5.3.2",
     "streamqueue": "^1.1.1"
   },
   "dependencies": {
-    "dialog-polyfill": "^0.4.7"
+    "dialog-polyfill": "^0.4.7",
+    "material-design-lite": "^1.2.0"
   },
   "peerDependencies": {
     "firebase": ">=6.6.0"