Convert remaining gulp modules to ESM (#16430)

build-scripts/gulp/app.js

@@ -1,16 +1,16 @@
 import gulp from "gulp";
 import env from "../env.cjs";
-import "./clean.cjs";
-import "./compress.cjs";
-import "./entry-html.cjs";
-import "./gather-static.cjs";
-import "./gen-icons-json.cjs";
-import "./locale-data.cjs";
-import "./rollup.cjs";
-import "./service-worker.cjs";
-import "./translations.cjs";
-import "./wds.cjs";
-import "./webpack.cjs";
+import "./clean.js";
+import "./compress.js";
+import "./entry-html.js";
+import "./gather-static.js";
+import "./gen-icons-json.js";
+import "./locale-data.js";
+import "./rollup.js";
+import "./service-worker.js";
+import "./translations.js";
+import "./wds.js";
+import "./webpack.js";
 
 gulp.task(
   "develop-app",

build-scripts/gulp/cast.js

@@ -1,12 +1,12 @@
 import gulp from "gulp";
 import env from "../env.cjs";
-import "./clean.cjs";
-import "./entry-html.cjs";
-import "./gather-static.cjs";
-import "./rollup.cjs";
-import "./service-worker.cjs";
-import "./translations.cjs";
-import "./webpack.cjs";
+import "./clean.js";
+import "./entry-html.js";
+import "./gather-static.js";
+import "./rollup.js";
+import "./service-worker.js";
+import "./translations.js";
+import "./webpack.js";
 
 gulp.task(
   "develop-cast",

build-scripts/gulp/clean.js

@@ -1,37 +1,37 @@
-const del = import("del");
-const gulp = require("gulp");
-const paths = require("../paths.cjs");
-require("./translations.cjs");
+import { deleteSync } from "del";
+import gulp from "gulp";
+import paths from "../paths.cjs";
+import "./translations.js";
 
 gulp.task(
   "clean",
   gulp.parallel("clean-translations", async () =>
-    (await del).deleteSync([paths.app_output_root, paths.build_dir])
+    deleteSync([paths.app_output_root, paths.build_dir])
   )
 );
 
 gulp.task(
   "clean-demo",
   gulp.parallel("clean-translations", async () =>
-    (await del).deleteSync([paths.demo_output_root, paths.build_dir])
+    deleteSync([paths.demo_output_root, paths.build_dir])
   )
 );
 
 gulp.task(
   "clean-cast",
   gulp.parallel("clean-translations", async () =>
-    (await del).deleteSync([paths.cast_output_root, paths.build_dir])
+    deleteSync([paths.cast_output_root, paths.build_dir])
   )
 );
 
 gulp.task("clean-hassio", async () =>
-  (await del).deleteSync([paths.hassio_output_root, paths.build_dir])
+  deleteSync([paths.hassio_output_root, paths.build_dir])
 );
 
 gulp.task(
   "clean-gallery",
   gulp.parallel("clean-translations", async () =>
-    (await del).deleteSync([
+    deleteSync([
       paths.gallery_output_root,
       paths.gallery_build,
       paths.build_dir,

build-scripts/gulp/compress.js

@@ -1,10 +1,10 @@
 // Tasks to compress
 
-const gulp = require("gulp");
-const zopfli = require("gulp-zopfli-green");
-const merge = require("merge-stream");
-const path = require("path");
-const paths = require("../paths.cjs");
+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 };
 

build-scripts/gulp/demo.js

@@ -1,13 +1,13 @@
 import gulp from "gulp";
 import env from "../env.cjs";
-import "./clean.cjs";
-import "./entry-html.cjs";
-import "./gather-static.cjs";
-import "./gen-icons-json.cjs";
-import "./rollup.cjs";
-import "./service-worker.cjs";
-import "./translations.cjs";
-import "./webpack.cjs";
+import "./clean.js";
+import "./entry-html.js";
+import "./gather-static.js";
+import "./gen-icons-json.js";
+import "./rollup.js";
+import "./service-worker.js";
+import "./translations.js";
+import "./webpack.js";
 
 gulp.task(
   "develop-demo",

build-scripts/gulp/download-translations.js

@@ -1,6 +1,6 @@
-const gulp = require("gulp");
-const fs = require("fs/promises");
-const mapStream = require("map-stream");
+import fs from "fs/promises";
+import gulp from "gulp";
+import mapStream from "map-stream";
 
 const inDirFrontend = "translations/frontend";
 const inDirBackend = "translations/backend";

build-scripts/gulp/entry-html.js

@@ -1,12 +1,13 @@
 // Tasks to generate entry HTML
-const gulp = require("gulp");
-const fs = require("fs-extra");
-const path = require("path");
-const template = require("lodash.template");
-const { minify } = require("html-minifier-terser");
-const paths = require("../paths.cjs");
-const env = require("../env.cjs");
-const { htmlMinifierOptions, terserOptions } = require("../bundle.cjs");
+
+import fs from "fs-extra";
+import gulp from "gulp";
+import { minify } from "html-minifier-terser";
+import template from "lodash.template";
+import path from "path";
+import { htmlMinifierOptions, terserOptions } from "../bundle.cjs";
+import env from "../env.cjs";
+import paths from "../paths.cjs";
 
 const renderTemplate = (templateFile, data = {}) => {
   const compiled = template(
@@ -89,9 +90,11 @@ const genPagesProdTask =
     inputSub = "src/html"
   ) =>
   async () => {
-    const latestManifest = require(path.resolve(outputLatest, "manifest.json"));
+    const latestManifest = fs.readJsonSync(
+      path.resolve(outputLatest, "manifest.json")
+    );
     const es5Manifest = outputES5
-      ? require(path.resolve(outputES5, "manifest.json"))
+      ? fs.readJsonSync(path.resolve(outputES5, "manifest.json"))
       : {};
     const minifiedHTML = [];
     for (const [page, entries] of Object.entries(pageEntries)) {

build-scripts/gulp/fetch-nightly-translations.js

@@ -1,15 +1,15 @@
 // Task to download the latest Lokalise translations from the nightly workflow artifacts
 
-const del = import("del");
-const fs = require("fs/promises");
-const path = require("path");
-const process = require("process");
-const gulp = require("gulp");
-const jszip = require("jszip");
-const tar = require("tar");
-const { Octokit } = require("@octokit/rest");
-const { retry } = require("@octokit/plugin-retry");
-const { createOAuthDeviceAuth } = require("@octokit/auth-oauth-device");
+import { createOAuthDeviceAuth } from "@octokit/auth-oauth-device";
+import { retry } from "@octokit/plugin-retry";
+import { Octokit } from "@octokit/rest";
+import { deleteAsync } from "del";
+import { mkdir, readFile, writeFile } from "fs/promises";
+import gulp from "gulp";
+import jszip from "jszip";
+import path from "path";
+import process from "process";
+import tar from "tar";
 
 const MAX_AGE = 24; // hours
 const OWNER = "home-assistant";
@@ -38,7 +38,7 @@ gulp.task("fetch-nightly-translations", async function () {
   // and stop if they are not old enough
   let currentArtifact;
   try {
-    currentArtifact = JSON.parse(await fs.readFile(ARTIFACT_FILE, "utf-8"));
+    currentArtifact = JSON.parse(await readFile(ARTIFACT_FILE, "utf-8"));
     const currentAge =
       (Date.now() - Date.parse(currentArtifact.created_at)) / 3600000;
     if (currentAge < MAX_AGE) {
@@ -53,7 +53,7 @@ gulp.task("fetch-nightly-translations", async function () {
   }
 
   // To store file writing promises
-  const createExtractDir = fs.mkdir(EXTRACT_DIR, { recursive: true });
+  const createExtractDir = mkdir(EXTRACT_DIR, { recursive: true });
   const writings = [];
 
   // Authenticate to GitHub using GitHub action token if it exists,
@@ -63,7 +63,7 @@ gulp.task("fetch-nightly-translations", async function () {
     tokenAuth = { token: process.env.GITHUB_TOKEN };
   } else {
     try {
-      tokenAuth = JSON.parse(await fs.readFile(TOKEN_FILE, "utf-8"));
+      tokenAuth = JSON.parse(await readFile(TOKEN_FILE, "utf-8"));
     } catch {
       if (!allowTokenSetup) {
         console.log("No token found so  build wil continue with English only");
@@ -88,7 +88,7 @@ gulp.task("fetch-nightly-translations", async function () {
       tokenAuth = await auth({ type: "oauth" });
       writings.push(
         createExtractDir.then(
-          fs.writeFile(TOKEN_FILE, JSON.stringify(tokenAuth, null, 2))
+          writeFile(TOKEN_FILE, JSON.stringify(tokenAuth, null, 2))
         )
       );
     }
@@ -132,17 +132,13 @@ gulp.task("fetch-nightly-translations", async function () {
   }
   writings.push(
     createExtractDir.then(
-      fs.writeFile(ARTIFACT_FILE, JSON.stringify(latestArtifact, null, 2))
+      writeFile(ARTIFACT_FILE, JSON.stringify(latestArtifact, null, 2))
     )
   );
 
   // Remove the current translations
   const deleteCurrent = Promise.all(writings).then(
-    (await del).deleteAsync([
-      `${EXTRACT_DIR}/*`,
-      `!${ARTIFACT_FILE}`,
-      `!${TOKEN_FILE}`,
-    ])
+    deleteAsync([`${EXTRACT_DIR}/*`, `!${ARTIFACT_FILE}`, `!${TOKEN_FILE}`])
   );
 
   // Get the download URL and follow the redirect to download (stored as ArrayBuffer)

build-scripts/gulp/gallery.js

@@ -6,14 +6,14 @@ import { marked } from "marked";
 import path from "path";
 import env from "../env.cjs";
 import paths from "../paths.cjs";
-import "./clean.cjs";
-import "./entry-html.cjs";
-import "./gather-static.cjs";
-import "./gen-icons-json.cjs";
-import "./rollup.cjs";
-import "./service-worker.cjs";
-import "./translations.cjs";
-import "./webpack.cjs";
+import "./clean.js";
+import "./entry-html.js";
+import "./gather-static.js";
+import "./gen-icons-json.js";
+import "./rollup.js";
+import "./service-worker.js";
+import "./translations.js";
+import "./webpack.js";
 
 gulp.task("gather-gallery-pages", async function gatherPages() {
   const pageDir = path.resolve(paths.gallery_dir, "src/pages");

build-scripts/gulp/gather-static.js

@@ -1,9 +1,9 @@
 // Gulp task to gather all static files.
 
-const gulp = require("gulp");
-const path = require("path");
-const fs = require("fs-extra");
-const paths = require("../paths.cjs");
+import fs from "fs-extra";
+import gulp from "gulp";
+import path from "path";
+import paths from "../paths.cjs";
 
 const npmPath = (...parts) =>
   path.resolve(paths.polymer_dir, "node_modules", ...parts);

build-scripts/gulp/gen-icons-json.js

@@ -1,17 +1,15 @@
-const gulp = require("gulp");
-const path = require("path");
-const fs = require("fs");
-const hash = require("object-hash");
+import fs from "fs";
+import gulp from "gulp";
+import hash from "object-hash";
+import path from "path";
+import paths from "../paths.cjs";
 
-const ICON_PACKAGE_PATH = path.resolve(
-  __dirname,
-  "../../node_modules/@mdi/svg/"
-);
+const ICON_PACKAGE_PATH = path.resolve("node_modules/@mdi/svg/");
 const META_PATH = path.resolve(ICON_PACKAGE_PATH, "meta.json");
 const PACKAGE_PATH = path.resolve(ICON_PACKAGE_PATH, "package.json");
 const ICON_PATH = path.resolve(ICON_PACKAGE_PATH, "svg");
-const OUTPUT_DIR = path.resolve(__dirname, "../../build/mdi");
-const REMOVED_ICONS_PATH = path.resolve(__dirname, "../removedIcons.json");
+const OUTPUT_DIR = path.resolve(paths.build_dir, "mdi");
+const REMOVED_ICONS_PATH = new URL("../removedIcons.json", import.meta.url);
 
 const encoding = "utf8";
 

build-scripts/gulp/hassio.js

@@ -1,13 +1,13 @@
 import gulp from "gulp";
 import env from "../env.cjs";
-import "./clean.cjs";
-import "./compress.cjs";
-import "./entry-html.cjs";
-import "./gather-static.cjs";
-import "./gen-icons-json.cjs";
-import "./rollup.cjs";
-import "./translations.cjs";
-import "./webpack.cjs";
+import "./clean.js";
+import "./compress.js";
+import "./entry-html.js";
+import "./gather-static.js";
+import "./gen-icons-json.js";
+import "./rollup.js";
+import "./translations.js";
+import "./webpack.js";
 
 gulp.task(
   "develop-hassio",

build-scripts/gulp/locale-data.js

@@ -1,18 +1,15 @@
-const del = import("del");
-const path = require("path");
-const gulp = require("gulp");
-const fs = require("fs");
-const paths = require("../paths.cjs");
+import { deleteSync } from "del";
+import fs from "fs";
+import gulp from "gulp";
+import path from "path";
+import paths from "../paths.cjs";
 
 const outDir = "build/locale-data";
 
-gulp.task("clean-locale-data", async () => (await del).deleteSync([outDir]));
+gulp.task("clean-locale-data", async () => deleteSync([outDir]));
 
-gulp.task("ensure-locale-data-build-dir", (done) => {
-  if (!fs.existsSync(outDir)) {
-    fs.mkdirSync(outDir, { recursive: true });
-  }
-  done();
+gulp.task("ensure-locale-data-build-dir", async () => {
+  fs.mkdirSync(outDir, { recursive: true });
 });
 
 const modules = {
@@ -31,11 +28,14 @@ gulp.task("create-locale-data", (done) => {
   Object.entries(modules).forEach(([module, className]) => {
     Object.keys(translationMeta).forEach((lang) => {
       try {
-        const localeData = String(
-          fs.readFileSync(
-            require.resolve(`@formatjs/${module}/locale-data/${lang}.js`)
+        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\\(`,
@@ -46,15 +46,13 @@ gulp.task("create-locale-data", (done) => {
           .replace(/\)\s*}/im, "");
         // make sure we have valid JSON
         JSON.parse(localeData);
-        if (!fs.existsSync(path.join(outDir, module))) {
-          fs.mkdirSync(path.join(outDir, module), { recursive: true });
-        }
+        fs.mkdirSync(path.join(outDir, module), { recursive: true });
         fs.writeFileSync(
           path.join(outDir, `${module}/${lang}.json`),
           localeData
         );
       } catch (e) {
-        if (e.code !== "MODULE_NOT_FOUND") {
+        if (e.code !== "ENOENT") {
           throw e;
         }
       }

build-scripts/gulp/rollup.js

@@ -1,13 +1,14 @@
 // Tasks to run Rollup
-const path = require("path");
-const gulp = require("gulp");
-const rollup = require("rollup");
-const handler = require("serve-handler");
-const http = require("http");
-const log = require("fancy-log");
-const open = require("open");
-const rollupConfig = require("../rollup.cjs");
-const paths = require("../paths.cjs");
+
+import log from "fancy-log";
+import gulp from "gulp";
+import http from "http";
+import open from "open";
+import path from "path";
+import { rollup } from "rollup";
+import handler from "serve-handler";
+import paths from "../paths.cjs";
+import rollupConfig from "../rollup.cjs";
 
 const bothBuilds = (createConfigFunc, params) =>
   gulp.series(

build-scripts/gulp/service-worker.js

@@ -1,11 +1,12 @@
 // Generate service worker.
 // Based on manifest, create a file with the content as service_worker.js
-const gulp = require("gulp");
-const path = require("path");
-const fs = require("fs-extra");
-const workboxBuild = require("workbox-build");
-const sourceMapUrl = require("source-map-url");
-const paths = require("../paths.cjs");
+
+import fs from "fs-extra";
+import gulp from "gulp";
+import path from "path";
+import sourceMapUrl from "source-map-url";
+import workboxBuild from "workbox-build";
+import paths from "../paths.cjs";
 
 const swDest = path.resolve(paths.app_output_root, "service_worker.js");
 
@@ -28,10 +29,9 @@ self.addEventListener('install', (event) => {
 
 gulp.task("gen-service-worker-app-prod", async () => {
   // Read bundled source file
-  const bundleManifestLatest = require(path.resolve(
-    paths.app_output_latest,
-    "manifest.json"
-  ));
+  const bundleManifestLatest = fs.readJsonSync(
+    path.resolve(paths.app_output_latest, "manifest.json")
+  );
   let serviceWorkerContent = fs.readFileSync(
     paths.app_output_root + bundleManifestLatest["service_worker.js"],
     "utf-8"
@@ -46,10 +46,9 @@ gulp.task("gen-service-worker-app-prod", async () => {
   );
 
   // Remove ES5
-  const bundleManifestES5 = require(path.resolve(
-    paths.app_output_es5,
-    "manifest.json"
-  ));
+  const bundleManifestES5 = fs.readJsonSync(
+    path.resolve(paths.app_output_es5, "manifest.json")
+  );
   fs.removeSync(paths.app_output_root + bundleManifestES5["service_worker.js"]);
   fs.removeSync(
     paths.app_output_root + bundleManifestES5["service_worker.js.map"]

build-scripts/gulp/translations.js

@@ -1,19 +1,24 @@
-const del = import("del");
-const crypto = require("crypto");
-const path = require("path");
-const source = require("vinyl-source-stream");
-const vinylBuffer = require("vinyl-buffer");
-const gulp = require("gulp");
-const fs = require("fs");
-const flatmap = require("gulp-flatmap");
-const merge = require("gulp-merge-json");
-const rename = require("gulp-rename");
-const transform = require("gulp-json-transform");
-const { mapFiles } = require("../util.cjs");
-const env = require("../env.cjs");
-const paths = require("../paths.cjs");
-
-require("./fetch-nightly-translations.cjs");
+import { createHash } from "crypto";
+import { deleteSync } from "del";
+import {
+  mkdirSync,
+  readdirSync,
+  readFileSync,
+  renameSync,
+  writeFile,
+} from "fs";
+import gulp from "gulp";
+import flatmap from "gulp-flatmap";
+import transform from "gulp-json-transform";
+import merge from "gulp-merge-json";
+import rename from "gulp-rename";
+import path from "path";
+import vinylBuffer from "vinyl-buffer";
+import source from "vinyl-source-stream";
+import env from "../env.cjs";
+import paths from "../paths.cjs";
+import { mapFiles } from "../util.cjs";
+import "./fetch-nightly-translations.js";
 
 const inFrontendDir = "translations/frontend";
 const inBackendDir = "translations/backend";
@@ -33,7 +38,12 @@ gulp.task(
 
 // Panel translations which should be split from the core translations.
 const TRANSLATION_FRAGMENTS = Object.keys(
-  require("../../src/translations/en.json").ui.panel
+  JSON.parse(
+    readFileSync(
+      path.resolve(paths.polymer_dir, "src/translations/en.json"),
+      "utf-8"
+    )
+  ).ui.panel
 );
 
 function recursiveFlatten(prefix, data) {
@@ -120,17 +130,14 @@ function lokaliseTransform(data, original, file) {
   return output;
 }
 
-gulp.task("clean-translations", async () => (await del).deleteSync([workDir]));
+gulp.task("clean-translations", async () => deleteSync([workDir]));
 
-gulp.task("ensure-translations-build-dir", (done) => {
-  if (!fs.existsSync(workDir)) {
-    fs.mkdirSync(workDir, { recursive: true });
-  }
-  done();
+gulp.task("ensure-translations-build-dir", async () => {
+  mkdirSync(workDir, { recursive: true });
 });
 
 gulp.task("create-test-metadata", (cb) => {
-  fs.writeFile(
+  writeFile(
     workDir + "/testMetadata.json",
     JSON.stringify({
       test: {
@@ -303,15 +310,14 @@ const fingerprints = {};
 
 gulp.task("build-translation-fingerprints", () => {
   // Fingerprint full file of each language
-  const files = fs.readdirSync(fullDir);
+  const files = readdirSync(fullDir);
 
   for (let i = 0; i < files.length; i++) {
     fingerprints[files[i].split(".")[0]] = {
       // In dev we create fake hashes
       hash: env.isProdBuild()
-        ? crypto
-            .createHash("md5")
-            .update(fs.readFileSync(path.join(fullDir, files[i]), "utf-8"))
+        ? createHash("md5")
+            .update(readFileSync(path.join(fullDir, files[i]), "utf-8"))
             .digest("hex")
         : "dev",
     };
@@ -327,7 +333,7 @@ gulp.task("build-translation-fingerprints", () => {
         throw new Error(`Unable to find hash for ${filename}`);
       }
 
-      fs.renameSync(
+      renameSync(
         filename,
         `${parsed.dir}/${parsed.name}-${fingerprints[parsed.name].hash}${
           parsed.ext

build-scripts/gulp/wds.cjs

@@ -1,11 +0,0 @@
-// Tasks to run Rollup
-const gulp = require("gulp");
-const { startDevServer } = require("@web/dev-server");
-
-gulp.task("wds-watch-app", () => {
-  startDevServer({
-    config: {
-      watch: true,
-    },
-  });
-});

build-scripts/gulp/wds.js

@@ -0,0 +1,10 @@
+import gulp from "gulp";
+import { startDevServer } from "@web/dev-server";
+
+gulp.task("wds-watch-app", async () => {
+  startDevServer({
+    config: {
+      watch: true,
+    },
+  });
+});

build-scripts/gulp/webpack.js

@@ -1,19 +1,20 @@
 // Tasks to run webpack.
-const fs = require("fs");
-const gulp = require("gulp");
-const webpack = require("webpack");
-const WebpackDevServer = require("webpack-dev-server");
-const log = require("fancy-log");
-const path = require("path");
-const env = require("../env.cjs");
-const paths = require("../paths.cjs");
-const {
+
+import log from "fancy-log";
+import fs from "fs";
+import gulp from "gulp";
+import path from "path";
+import webpack from "webpack";
+import WebpackDevServer from "webpack-dev-server";
+import env from "../env.cjs";
+import paths from "../paths.cjs";
+import {
   createAppConfig,
-  createDemoConfig,
   createCastConfig,
-  createHassioConfig,
+  createDemoConfig,
   createGalleryConfig,
-} = require("../webpack.cjs");
+  createHassioConfig,
+} from "../webpack.cjs";
 
 const bothBuilds = (createConfigFunc, params) => [
   createConfigFunc({ ...params, latestBuild: true }),