feat(common): generate `closure-locale.ts` to tree shake locale data (#18907)

Closure will only keep the data for the locale defined in `goog.LOCALE`

PR Close #18907

build.sh

@@ -485,7 +485,7 @@ do
 
       if [[ ${PACKAGE} == "common" ]]; then
         echo "======      Copy i18n locale data"
-        rsync -a --exclude=*.d.ts --exclude=*.metadata.json ${OUT_DIR}/i18n_data/ ${NPM_DIR}/i18n_data
+        rsync -a --exclude=*.d.ts --exclude=*.metadata.json ${OUT_DIR}/locales/ ${NPM_DIR}/locales
       fi
     else
       echo "======        Copy ${PACKAGE} node tool"

gulpfile.js

@@ -44,3 +44,4 @@ gulp.task('changelog', loadTask('changelog'));
 gulp.task('check-env', () => {/* this is a noop because the env test ran already above */});
 gulp.task('cldr:extract', loadTask('cldr', 'extract'));
 gulp.task('cldr:download', loadTask('cldr', 'download'));
+gulp.task('cldr:gen-closure-locale', loadTask('cldr', 'closure'));

integration/bazel/angular.tsconfig.json

@@ -17,6 +17,7 @@
       "node_modules/@angular/bazel/**",
       "node_modules/@angular/compiler-cli/**",
       // Workaround bug introduced by 079d884
+      "node_modules/@angular/common/locales.d.ts",
       "node_modules/@angular/common/locales/**",
       "node_modules/@angular/tsc-wrapped/**"
   ]

packages/common/locales/tsconfig-build.json

@@ -1,5 +1,5 @@
 {
-"compilerOptions": {
+  "compilerOptions": {
     "baseUrl": ".",
     "declaration": true,
     "stripInternal": true,
@@ -16,5 +16,8 @@
     "target": "es5",
     "skipLibCheck": true,
     "lib": ["es2015", "dom"]
-  }
+  },
+  "exclude": [
+    "./closure-locale.ts"
+  ]
 }

tools/gulp-tasks/cldr.js

@@ -25,5 +25,16 @@ module.exports = {
       fs.mkdirSync(cldrDataFolder);
     }
     cldrDownloader(path.join(__dirname, 'cldr/cldr-urls.json'), cldrDataFolder, done);
-  }
+  },
+
+  closure: gulp => done => {
+    const {RELATIVE_I18N_DATA_FOLDER} = require('./cldr/extract');
+    console.log(RELATIVE_I18N_DATA_FOLDER, fs.existsSync(RELATIVE_I18N_DATA_FOLDER));
+    if (!fs.existsSync(RELATIVE_I18N_DATA_FOLDER)) {
+      throw new Error(
+          `You must run "gulp cldr:extract" before you can create the closure-locale.ts file`);
+    }
+    const localeAll = require('./cldr/closure');
+    return localeAll(gulp, done);
+  },
 };

tools/gulp-tasks/cldr/closure.js

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+const fs = require('fs');
+const path = require('path');
+const yargs = require('yargs').argv;
+const {I18N_FOLDER, I18N_DATA_FOLDER, RELATIVE_I18N_DATA_FOLDER, HEADER} = require('./extract');
+const OUTPUT_NAME = `closure-locale.ts`;
+
+module.exports = (gulp, done) => {
+  let GOOG_LOCALES;
+  if (yargs.locales) {
+    GOOG_LOCALES = yargs.locales.split(',');
+  } else {
+    if (!fs.existsSync(path.join(__dirname, 'cldr-data'))) {
+      throw new Error(`You must run "gulp cldr:download" before you can extract the data`);
+    }
+    const cldrData = require('./cldr-data');
+    GOOG_LOCALES = cldrData.availableLocales;
+  }
+
+  console.log(`Writing file ${I18N_DATA_FOLDER}/${OUTPUT_NAME}`);
+  fs.writeFileSync(
+      `${RELATIVE_I18N_DATA_FOLDER}/${OUTPUT_NAME}`, generateAllLocalesFile(GOOG_LOCALES));
+
+  console.log(`Formatting ${I18N_DATA_FOLDER}/${OUTPUT_NAME}..."`);
+  const format = require('gulp-clang-format');
+  const clangFormat = require('clang-format');
+  return gulp.src([`${I18N_DATA_FOLDER}/${OUTPUT_NAME}`], {base: '.'})
+      .pipe(format.format('file', clangFormat))
+      .pipe(gulp.dest('.'));
+};
+
+/**
+ * Generate a file that contains all locale to import for closure.
+ * Tree shaking will only keep the data for the `goog.LOCALE` locale.
+ */
+function generateAllLocalesFile(LOCALES) {
+  function generateCases(locale) {
+    let str = '';
+    if (locale.match(/-/)) {
+      str = `case '${locale.replace('-', '_')}':\n`
+    }
+    // clang-format off
+    str += `case '${locale}':
+  l = ${toCamelCase(locale)};
+  break;
+`;
+    // clang-format on
+    return str;
+  }
+  // clang-format off
+  return `${HEADER}
+import {registerLocaleData} from '../src/i18n/locale_data';
+${LOCALES.map(locale => `import ${toCamelCase(locale)} from './${locale}';\n`).join('')}
+
+let l: any;
+
+switch (goog.LOCALE) {
+${LOCALES.map(locale => generateCases(locale)).join('')}
+  default:
+    l = en;
+}
+
+registerLocaleData(l);
+`;
+  // clang-format on
+}
+
+/**
+ * Transform a string to camelCase
+ */
+function toCamelCase(str) {
+  return str.replace(/-+([a-z0-9A-Z])/g, (...m) => m[1].toUpperCase());
+}
+
+module.exports.I18N_FOLDER = I18N_FOLDER;
+module.exports.I18N_DATA_FOLDER = I18N_DATA_FOLDER;

tools/gulp-tasks/cldr/extract.js

@@ -518,3 +518,5 @@ function removeDuplicates(data) {
 
 module.exports.I18N_FOLDER = I18N_FOLDER;
 module.exports.I18N_DATA_FOLDER = I18N_DATA_FOLDER;
+module.exports.RELATIVE_I18N_DATA_FOLDER = RELATIVE_I18N_DATA_FOLDER;
+module.exports.HEADER = HEADER;