Implements compilation process for localized binaries.

Author: channing-google

buildtools/soy_files.js

@@ -12,144 +12,270 @@
  * limitations under the License.
  */
 
-var gulp = require('gulp'),
-    streamqueue = require('streamqueue'),
-    closureCompiler = require('gulp-closure-compiler'),
-    cleanCSS = require('gulp-clean-css'),
-    concatCSS = require('gulp-concat-css'),
-    sass = require('gulp-sass'),
-    del = require('del');
+const cleanCSS = require('gulp-clean-css');
+const closureBuilder = require('closure-builder');
+const closureCompiler = require('gulp-closure-compiler');
+const concatCSS = require('gulp-concat-css');
+const connect = require('gulp-connect');
+const fse = require('fs-extra');
+const flip = require('gulp-css-flip');
+const gulp = require('gulp');
+const path = require('path');
+const sass = require('gulp-sass');
+const streamqueue = require('streamqueue');
+const util = require('gulp-util');
 
+const glob = closureBuilder.globSupport();
 
 // The optimization level for the JS compiler.
 // Valid levels: WHITESPACE_ONLY, SIMPLE_OPTIMIZATIONS, ADVANCED_OPTIMIZATIONS.
-// TODO: Add ability to pass this in as a flag.
-var OPTIMIZATION_LEVEL = 'ADVANCED_OPTIMIZATIONS';
-
+// This can be passed in as a flag:
+// $ gulp --compilation_level=WHITESPACE_ONLY
+const OPTIMIZATION_LEVEL = util.env.compilation_level ||
+    'ADVANCED_OPTIMIZATIONS';
 
 // For minified builds, wrap the output so we avoid leaking global variables.
-var OUTPUT_WRAPPER = OPTIMIZATION_LEVEL === 'WHITESPACE_ONLY' ?
+const OUTPUT_WRAPPER = OPTIMIZATION_LEVEL === 'WHITESPACE_ONLY' ?
     '%output%' : '(function() { %output% })();';
 
 // Adds the firebase module requirement and exports firebaseui.
-var NPM_MODULE_WRAPPER = OPTIMIZATION_LEVEL === 'WHITESPACE_ONLY' ?
+const NPM_MODULE_WRAPPER = OPTIMIZATION_LEVEL === 'WHITESPACE_ONLY' ?
     'var firebase=require(\'firebase\');%output%module.exports=firebaseui;' :
     '(function() { var firebase=require(\'firebase\');%output% })();' +
     'module.exports=firebaseui;';
 
-
 // The path to Closure Compiler.
-var COMPILER_PATH = 'node_modules/google-closure-compiler/compiler.jar';
+const COMPILER_PATH = 'node_modules/google-closure-compiler/compiler.jar';
+
+// The path to the temporary directory where intermediate results are stored.
+const TMP_DIR = 'out';
+
+// The path to the temporary directory where intermediate results are stored.
+const DEST_DIR = 'dist';
+
+// The locale that would be produced with no XTBs.
+const DEFAULT_LOCALE = 'en';
+
+// The list of all locales that are supported.
+const ALL_LOCALES = ['ar-XB', 'ar', 'bg', 'ca', 'cs', 'da', 'de', 'el', 'en',
+    'en-GB', 'en-XA', 'es-419', 'es', 'fa', 'fi', 'fil', 'fr', 'hi', 'hr', 'hu',
+    'id', 'it', 'iw', 'ja', 'ko', 'lt', 'lv', 'nl', 'no', 'pl', 'pt-PT', 'pt',
+    'ro', 'ru', 'sk', 'sl', 'sr', 'sv', 'th', 'tr', 'uk', 'vi', 'zh-CN',
+    'zh-TW'];
 
+// Compiles the Closure templates into JavaScript.
+gulp.task('build-soy', () => new Promise((resolve, reject) => {
+  closureBuilder.build({
+    name: 'soy_files',
+    srcs: glob([
+      'soy/*.soy'
+    ]),
+    out: TMP_DIR,
+    options: {
+      soy: {
+        shouldGenerateGoogMsgDefs: true,
+        bidiGlobalDir: 1
+      }
+    },
+  }, resolve);
+}));
+
+// Default arguments to pass into Closure Compiler.
+const COMPILER_DEFAULT_ARGS = {
+  compilation_level: OPTIMIZATION_LEVEL,
+  language_out: 'ES5'
+};
+
+/**
+ * Invokes Closure Compiler.
+ * @param {!Array<string>} srcs The JS sources to compile.
+ * @param {string} out The path to the output JS file.
+ * @param {!Object} args Additional arguments to Closure compiler.
+ * @return {*} A stream that finishes when compliation finishes.
+ */
+function compile(srcs, out, args) {
+  // Get
+  const combinedArgs = Object.assign({}, COMPILER_DEFAULT_ARGS, args);
+  return gulp
+      .src(srcs)
+      .pipe(closureCompiler({
+        compilerPath: COMPILER_PATH,
+        fileName: path.basename(out),
+        compilerFlags: combinedArgs
+      }))
+      .pipe(gulp.dest(path.dirname(out)));
+}
 
 /**
- * Concatenates JS files using the Closure Compiler.
- * @param {string} outFileName The name of the output file.
- * @param {string} wrapper The output wrapper to use after concatenating files.
- * @return {*}
+ * Normalizes a locale ID for use in a file name (e.g. en-GB -> en_gb).
+ * @param {string} locale
+ * @return {string} The normalized locale ID.
  */
-function concatJS(outFileName, wrapper) {
-  return closureCompiler({
-    compilerPath: COMPILER_PATH,
-    fileName: outFileName,
-    compilerFlags: {
-      compilation_level: 'WHITESPACE_ONLY',
-      language_out: 'ES5',
-      output_wrapper: wrapper
-    }
+function getLocaleForFileName(locale) {
+  return locale.toLowerCase().replace(/-/g, '_');
+}
+
+/**
+ * Gets the path to the temporary JS file that contains all FirebaseUI code
+ * but no external dependencies.
+ * @param {string} locale
+ */
+function getTmpJsPath(locale) {
+  const localeForFileName = getLocaleForFileName(locale);
+  return `${TMP_DIR}/firebaseui__${localeForFileName}.js`;
+}
+
+/**
+ * Repeats a gulp task for all locales.
+ * @param {string} taskName The gulp task name to generate. Any $ tokens will be
+ *     replaced with the language code (e.g. build-$ becomes build-fr, build-es,
+ *     etc.).
+ * @param {!Array<string>} dependencies The gulp tasks that each operation
+ *     depends on. Any $ tokens will be replaced with the language code.
+ * @param {function()} operation The function to execute.
+ * @return {!Array<string>} The list of generated task names.
+ */
+function repeatTaskForAllLocales(taskName, dependencies, operation) {
+  const tasks = [];
+  ALL_LOCALES.forEach((locale) => {
+    const replaceTokens = (name) => name.replace(/\$/g, locale);
+
+    const localeTaskName = replaceTokens(taskName);
+    tasks.push(localeTaskName);
+    const localeDependencies = dependencies.map(replaceTokens);
+
+    gulp.task(localeTaskName, localeDependencies, () => operation(locale));
   });
+  return tasks;
 }
 
+/**
+ * Builds the core FirebaseUI binary in the given locale.
+ * @param {string} locale
+ */
+function buildFirebaseUiJs(locale) {
+  const flags = {
+    closure_entry_point: 'firebaseui.auth.exports',
+    define: `goog.LOCALE='${locale}'`,
+    externs: [
+      'node_modules/firebase/externs/firebase-app-externs.js',
+      'node_modules/firebase/externs/firebase-auth-externs.js',
+      'node_modules/firebase/externs/firebase-client-auth-externs.js'
+    ],
+    only_closure_dependencies: true,
+    output_wrapper: OUTPUT_WRAPPER,
+
+    // This is required to match XTB IDs to the JS/Soy messages.
+    translations_project: 'FirebaseUI'
+  };
+  if (locale !== DEFAULT_LOCALE) {
+    flags.translations_file = `translations/${locale}.xtb`;
+  }
+  return compile([
+    'node_modules/google-closure-templates/javascript/soyutils_usegoog.js',
+    'node_modules/google-closure-library/closure/goog/**/*.js',
+    'node_modules/google-closure-library/third_party/closure/goog/**/*.js',
+    `${TMP_DIR}/**/*.js`,
+    'javascript/**/*.js'
+  ], getTmpJsPath(locale), flags);
+}
 
 // Builds the core FirebaseUI JS.
-gulp.task('build-firebaseui-js', () =>
-    gulp
-    .src([
-      'node_modules/google-closure-templates/javascript/soyutils_usegoog.js',
-      'node_modules/google-closure-library/closure/goog/**/*.js',
-      'node_modules/google-closure-library/third_party/closure/goog/**/*.js',
-      'out/**/*.js',
-      'javascript/**/*.js'
-    ])
-    .pipe(closureCompiler({
-      compilerPath: COMPILER_PATH,
-      fileName: 'firebaseui.js',
-      compilerFlags: {
-        closure_entry_point: 'firebaseui.auth.exports',
-        compilation_level: OPTIMIZATION_LEVEL,
-        externs: [
-          'node_modules/firebase/externs/firebase-app-externs.js',
-          'node_modules/firebase/externs/firebase-auth-externs.js',
-          'node_modules/firebase/externs/firebase-client-auth-externs.js'
-        ],
-        language_out: 'ES5',
-        only_closure_dependencies: true,
-        output_wrapper: OUTPUT_WRAPPER
-      }
-    }))
-    .pipe(gulp.dest('out')));
-
-
-// Bundles the FirebaseUI JS with its dependencies.
-gulp.task('build-js', ['build-firebaseui-js'], () =>
-    gulp
-    .src([
-      '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',
-      'out/firebaseui.js'
-    ])
-    .pipe(concatJS('firebaseui.js', OUTPUT_WRAPPER))
-    .pipe(gulp.dest('dist')));
+repeatTaskForAllLocales('build-firebaseui-js-$', ['build-soy'],
+    buildFirebaseUiJs);
+
+// 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'
+];
+
+/**
+ * Creates the default FirebaseUI binaries for basic usage without
+ * localization. For example, it copies firebaseui__en.js to firebaseui.js.
+ * @param {string} fileName
+ */
+function makeDefaultFile(fileName) {
+  const localeForFileName = getLocaleForFileName(DEFAULT_LOCALE);
+  const path = `${DEST_DIR}/${fileName}__${localeForFileName}.js`;
+  if (fse.existsSync(path)) {
+    return fse.copy(path, `${DEST_DIR}/${fileName}.js`);
+  }
+}
+
+// Bundles the FirebaseUI JS with its dependencies for all locales.
+const buildJsTasks = repeatTaskForAllLocales('build-js-$',
+    ['build-firebaseui-js-$'], (locale) => {
+      const localeForFileName = getLocaleForFileName(locale);
+      return compile(
+          JS_DEPS.concat([getTmpJsPath(locale)]),
+          `${DEST_DIR}/firebaseui__${localeForFileName}.js`, {
+            compilation_level: 'WHITESPACE_ONLY',
+            output_wrapper: OUTPUT_WRAPPER
+          });
+    });
+gulp.task('build-all-js', buildJsTasks, () => makeDefaultFile('firebaseui'));
+gulp.task('build-js', ['build-js-' + DEFAULT_LOCALE],
+    () => makeDefaultFile('firebaseui'));
 
 // Bundles the FirebaseUI JS with its dependencies as a NPM module.
-gulp.task('build-npm', ['build-firebaseui-js'], () =>
-    gulp
-    .src([
-      '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',
-      'out/firebaseui.js'
-    ])
-    .pipe(concatJS('npm.js', NPM_MODULE_WRAPPER))
-    .pipe(gulp.dest('dist')));
+repeatTaskForAllLocales('build-npm-$', ['build-firebaseui-js-$'], (locale) => {
+  const localeForFileName = getLocaleForFileName(locale);
+  const srcs = JS_DEPS.concat([getTmpJsPath(locale)]);
+  return compile(srcs, `dist/npm__${localeForFileName}.js`, {
+    compilation_level: 'WHITESPACE_ONLY',
+    output_wrapper: NPM_MODULE_WRAPPER
+  });
+});
+gulp.task('build-npm', ['build-npm-' + DEFAULT_LOCALE],
+    () => makeDefaultFile('npm'));
 
-// Concatenates and minifies the CSS sources.
-gulp.task('build-css', () => {
-  var mdlSrcs = gulp.src('stylesheet/mdl.scss')
+/**
+ * Builds the CSS for FirebaseUI.
+ * @param {boolean} isRtl Whether to build in right-to-left mode.
+ * @return {*} A stream that finishes when compilation finishes.
+ */
+function buildCss(isRtl) {
+  const mdlSrcs = gulp.src('stylesheet/mdl.scss')
       .pipe(sass.sync().on('error', sass.logError));
-  var dialogPolyfillSrcs = gulp.src(
+  const dialogPolyfillSrcs = gulp.src(
       'node_modules/dialog-polyfill/dialog-polyfill.css');
-  var firebaseSrcs = gulp.src('stylesheet/*.css');
+  let firebaseSrcs = gulp.src('stylesheet/*.css');
+  if (isRtl) {
+    firebaseSrcs = firebaseSrcs.pipe(flip.gulp());
+  }
 
+  const outFile = isRtl ? 'firebaseui-rtl.css' : 'firebaseui.css';
   return streamqueue({objectMode: true},
       mdlSrcs, dialogPolyfillSrcs, firebaseSrcs)
-      .pipe(concatCSS('firebaseui.css'))
+      .pipe(concatCSS(outFile))
       .pipe(cleanCSS())
       .pipe(gulp.dest('dist'));
-});
+}
+
+// Concatenates and minifies the CSS sources.
+gulp.task('build-css', () => buildCss(false));
+gulp.task('build-css-rtl', () => buildCss(true));
 
 // Creates a webserver that serves all files from the root of the package.
 gulp.task('serve', () => {
-  var connect = require('gulp-connect');
-
   connect.server({
     port: 4000
   });
 });
 
-
 // Deletes intermediate files.
-gulp.task('clean', () => del(['out/*', 'out']));
+gulp.task('clean', () => fse.remove(TMP_DIR));
 
+// Executes the basic tasks.
+gulp.task('default', ['build-js', 'build-npm', 'build-css', 'build-css-rtl'],
+    () => gulp.start('clean'));
 
-gulp.task(
-    'default',
-    ['build-js', 'build-npm', 'build-css'],
+// Builds everything.
+gulp.task('build-all',
+    ['build-all-js', 'build-npm', 'build-css', 'build-css-rtl'],
     () => gulp.start('clean'));