Minify and compress Intl locale data (#17506)

build-scripts/gulp/compress.js

@@ -2,44 +2,15 @@
 
 import gulp from "gulp";
 import zopfli from "gulp-zopfli-green";
-import merge from "merge-stream";
-import path from "path";
 import paths from "../paths.cjs";
 
 const zopfliOptions = { threshold: 150 };
 
-gulp.task("compress-app", function compressApp() {
-  const jsLatest = gulp
-    .src(path.resolve(paths.app_output_latest, "**/*.js"))
+const compressDist = (rootDir) =>
+  gulp
+    .src([`${rootDir}/**/*.{js,json,css,svg}`])
     .pipe(zopfli(zopfliOptions))
-    .pipe(gulp.dest(paths.app_output_latest));
+    .pipe(gulp.dest(rootDir));
 
-  const jsEs5 = gulp
-    .src(path.resolve(paths.app_output_es5, "**/*.js"))
-    .pipe(zopfli(zopfliOptions))
-    .pipe(gulp.dest(paths.app_output_es5));
-
-  const polyfills = gulp
-    .src(path.resolve(paths.app_output_static, "polyfills/*.js"))
-    .pipe(zopfli(zopfliOptions))
-    .pipe(gulp.dest(path.resolve(paths.app_output_static, "polyfills")));
-
-  const translations = gulp
-    .src(path.resolve(paths.app_output_static, "translations/**/*.json"))
-    .pipe(zopfli(zopfliOptions))
-    .pipe(gulp.dest(path.resolve(paths.app_output_static, "translations")));
-
-  const icons = gulp
-    .src(path.resolve(paths.app_output_static, "mdi/*.json"))
-    .pipe(zopfli(zopfliOptions))
-    .pipe(gulp.dest(path.resolve(paths.app_output_static, "mdi")));
-
-  return merge(jsLatest, jsEs5, polyfills, translations, icons);
-});
-
-gulp.task("compress-hassio", function compressApp() {
-  return gulp
-    .src(path.resolve(paths.hassio_output_root, "**/*.js"))
-    .pipe(zopfli(zopfliOptions))
-    .pipe(gulp.dest(paths.hassio_output_root));
-});
+gulp.task("compress-app", () => compressDist(paths.app_output_root));
+gulp.task("compress-hassio", () => compressDist(paths.hassio_output_root));

build-scripts/gulp/locale-data.js

@@ -1,18 +1,12 @@
 import { deleteSync } from "del";
-import fs from "fs";
+import { mkdir, readFile, writeFile } from "fs/promises";
 import gulp from "gulp";
 import path from "path";
 import paths from "../paths.cjs";
 
-const outDir = "build/locale-data";
+const outDir = path.join(paths.build_dir, "locale-data");
 
-gulp.task("clean-locale-data", async () => deleteSync([outDir]));
-
-gulp.task("ensure-locale-data-build-dir", async () => {
-  fs.mkdirSync(outDir, { recursive: true });
-});
-
-const modules = {
+const INTL_PACKAGES = {
   "intl-relativetimeformat": "RelativeTimeFormat",
   "intl-datetimeformat": "DateTimeFormat",
   "intl-numberformat": "NumberFormat",
@@ -20,53 +14,60 @@ const modules = {
   "intl-listformat": "ListFormat",
 };
 
-gulp.task("create-locale-data", (done) => {
+const convertToJSON = async (pkg, lang) => {
+  let localeData;
+  try {
+    localeData = await readFile(
+      path.resolve(
+        paths.polymer_dir,
+        `node_modules/@formatjs/${pkg}/locale-data/${lang}.js`
+      ),
+      "utf-8"
+    );
+  } catch (e) {
+    // Ignore if language is missing (i.e. not supported by @formatjs)
+    if (e.code === "ENOENT") {
+      return;
+    } else {
+      throw e;
+    }
+  }
+  // Convert to JSON
+  const className = INTL_PACKAGES[pkg];
+  localeData = localeData
+    .replace(
+      new RegExp(
+        `\\/\\*\\s*@generated\\s*\\*\\/\\s*\\/\\/\\s*prettier-ignore\\s*if\\s*\\(Intl\\.${className}\\s*&&\\s*typeof\\s*Intl\\.${className}\\.__addLocaleData\\s*===\\s*'function'\\)\\s*{\\s*Intl\\.${className}\\.__addLocaleData\\(`,
+        "im"
+      ),
+      ""
+    )
+    .replace(/\)\s*}/im, "");
+  // Parse to validate JSON, then stringify to minify
+  localeData = JSON.stringify(JSON.parse(localeData));
+  await writeFile(path.join(outDir, `${pkg}/${lang}.json`), localeData);
+};
+
+gulp.task("clean-locale-data", async () => deleteSync([outDir]));
+
+gulp.task("create-locale-data", async () => {
   const translationMeta = JSON.parse(
-    fs.readFileSync(
-      path.join(paths.translations_src, "translationMetadata.json")
+    await readFile(
+      path.resolve(paths.translations_src, "translationMetadata.json"),
+      "utf-8"
     )
   );
-  Object.entries(modules).forEach(([module, className]) => {
-    Object.keys(translationMeta).forEach((lang) => {
-      try {
-        const localeData = fs
-          .readFileSync(
-            path.resolve(
-              paths.polymer_dir,
-              `node_modules/@formatjs/${module}/locale-data/${lang}.js`
-            ),
-            "utf-8"
-          )
-          .replace(
-            new RegExp(
-              `\\/\\*\\s*@generated\\s*\\*\\/\\s*\\/\\/\\s*prettier-ignore\\s*if\\s*\\(Intl\\.${className}\\s*&&\\s*typeof\\s*Intl\\.${className}\\.__addLocaleData\\s*===\\s*'function'\\)\\s*{\\s*Intl\\.${className}\\.__addLocaleData\\(`,
-              "im"
-            ),
-            ""
-          )
-          .replace(/\)\s*}/im, "");
-        // make sure we have valid JSON
-        JSON.parse(localeData);
-        fs.mkdirSync(path.join(outDir, module), { recursive: true });
-        fs.writeFileSync(
-          path.join(outDir, `${module}/${lang}.json`),
-          localeData
-        );
-      } catch (e) {
-        if (e.code !== "ENOENT") {
-          throw e;
-        }
-      }
-    });
-    done();
-  });
+  const conversions = [];
+  for (const pkg of Object.keys(INTL_PACKAGES)) {
+    await mkdir(path.join(outDir, pkg), { recursive: true });
+    for (const lang of Object.keys(translationMeta)) {
+      conversions.push(convertToJSON(pkg, lang));
+    }
+  }
+  await Promise.all(conversions);
 });
 
 gulp.task(
   "build-locale-data",
-  gulp.series(
-    "clean-locale-data",
-    "ensure-locale-data-build-dir",
-    "create-locale-data"
-  )
+  gulp.series("clean-locale-data", "create-locale-data")
 );