[5.3] Move tools and source JS to ESM (joomla#44296)

Author: dgrammatiko

.editorconfig

@@ -15,6 +15,6 @@ insert_final_newline = true
 indent_style = space
 indent_size = 4
 
-[*.{js,json,scss,css,yml,vue}]
+[*.{mjs,js,json,scss,css,yml,vue}]
 indent_style = space
 indent_size = 2

build/.eslintrc

@@ -27,7 +27,18 @@
     // Disable no-params-reassign for properties
     "no-param-reassign": ["error", { "props": false }],
     // Allow usage of dev-dependencies in js files in build directory
-    "import/no-extraneous-dependencies": ["error", {"devDependencies": ["build/**/*.js"]}],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies":
+        [
+          "build/**/*.js",
+          "build/**/*.mjs",
+          "cypress.config.dist.mjs",
+          "**/**/cypress.config.mjs"
+        ]
+      }
+    ],
     // Allow strict mode (we are not dealing with modules)
     "strict": [0],
     // Disable alert rule till we have a CE in place
@@ -46,6 +57,7 @@
     ],
     // Allow extensions on imports
     "import/extensions": 0,
+    "import/prefer-default-export": 0,
     "func-names": [
       "error",
       "as-needed"

build/build-modules-js/compilecss.es6.js renamed to build/build-modules-js/compilecss.mjs

@@ -1,9 +1,12 @@
-const { stat } = require('fs-extra');
-const { sep } = require('path');
-const recursive = require('recursive-readdir');
-const { handleScssFile } = require('./stylesheets/handle-scss.es6.js');
-const { handleCssFile } = require('./stylesheets/handle-css.es6.js');
+import { sep } from 'node:path';
 
+import recursive from 'recursive-readdir';
+import pkg from 'fs-extra';
+
+import { handleScssFile } from './stylesheets/handle-scss.mjs';
+import { handleCssFile } from './stylesheets/handle-css.mjs';
+
+const { stat } = pkg;
 const RootPath = process.cwd();
 
 /**
@@ -19,7 +22,7 @@ const RootPath = process.cwd();
  * @param {object} options  The options
  * @param {string} path     The folder that needs to be compiled, optional
  */
-module.exports.stylesheets = async (options, path) => {
+export const stylesheets = async (options, path) => {
   const files = [];
   let folders = [];
 

build/build-modules-js/compilejs.es6.js renamed to build/build-modules-js/compilejs.mjs

@@ -1,8 +1,10 @@
-const { stat } = require('fs-extra');
-const { sep } = require('path');
-const recursive = require('recursive-readdir');
-const { handleES5File } = require('./javascript/handle-es5.es6.js');
-const { handleESMFile } = require('./javascript/compile-to-es2017.es6.js');
+import { stat } from 'node:fs/promises';
+import { sep } from 'node:path';
+
+import recursive from 'recursive-readdir';
+
+import { handleES5File } from './javascript/handle-es5.mjs';
+import { handleESMFile } from './javascript/compile-to-es2017.mjs';
 
 const RootPath = process.cwd();
 
@@ -21,7 +23,7 @@ const RootPath = process.cwd();
  * @param { string } path    The folder that needs to be compiled, optional
  * @param { string } mode    esm for ES2017, es5 for ES5, both for both
  */
-module.exports.scripts = async (options, path) => {
+export const scripts = async (options, path) => {
   const files = [];
   let folders = [];
 
@@ -49,7 +51,7 @@ module.exports.scripts = async (options, path) => {
   // Loop to get the files that should be compiled via parameter
   // eslint-disable-next-line no-restricted-syntax
   for (const folder of folders) {
-    folderPromises.push(recursive(folder, ['!*.+(js)']));
+    folderPromises.push(recursive(folder, ['!*.+(m|js)']));
   }
 
   const computedFiles = await Promise.all(folderPromises);
@@ -63,9 +65,9 @@ module.exports.scripts = async (options, path) => {
       return;
     }
 
-    if (file.match(/\.es5\.js$/)) {
+    if (file.endsWith('.es5.js')) {
       jsFilesPromises.push(handleES5File(file));
-    } else if (file.match(/\.es6\.js$/) || file.match(/\.w-c\.es6\.js$/)) {
+    } else if ((file.endsWith('.es6.js') || file.endsWith('.w-c.es6.js')) && !file.startsWith('_')) {
       esmFilesPromises.push(handleESMFile(file));
     }
   });

build/build-modules-js/compress.es6.js renamed to build/build-modules-js/compress.mjs

@@ -1,7 +1,8 @@
-const { readdir } = require('fs').promises;
-const { extname } = require('path');
-const { compressFile } = require('./utils/compressFile.es6.js');
-const { Timer } = require('./utils/timer.es6.js');
+import { readdir } from 'node:fs/promises';
+import { extname } from 'node:path';
+
+import { compressFile } from './utils/compressFile.mjs';
+import { Timer } from './utils/timer.mjs';
 
 /**
  * Get files recursively
@@ -11,15 +12,15 @@ const { Timer } = require('./utils/timer.es6.js');
 async function getFiles(path) {
   // Get files within the current directory
   return (await readdir(path, { withFileTypes: true, recursive: true }))
-    .filter((file) => (!file.isDirectory() && ['.js', '.css'].includes(extname(file.name))))
+    .filter((file) => !file.isDirectory() && ['.js', '.css'].includes(extname(file.name)))
     .map((file) => `${file.path}/${file.name}`);
 }
 
 /**
  * Method that will pre compress (gzip) all .css/.js files
  * in the templates and in the media folder
  */
-module.exports.compressFiles = async (enableBrotli = false) => {
+export const compressFiles = async (enableBrotli = false) => {
   const bench = new Timer('Gzip');
   const paths = [
     `${process.cwd()}/media`,

build/build-modules-js/css-versioning.es6.js renamed to build/build-modules-js/css-versioning.mjs

@@ -1,9 +1,9 @@
-const { createHash } = require('node:crypto');
-const { readdir, readFile, writeFile } = require('node:fs/promises');
-const { existsSync, readFileSync } = require('node:fs');
-const { dirname, extname, resolve } = require('node:path');
-const { transform, composeVisitors } = require('lightningcss');
-const { Timer } = require('./utils/timer.es6.js');
+import { createHash } from 'node:crypto';
+import { readdir, readFile, writeFile } from 'node:fs/promises';
+import { existsSync, readFileSync } from 'node:fs';
+import { dirname, extname, resolve } from 'node:path';
+import { transform, composeVisitors } from 'lightningcss';
+import { Timer } from './utils/timer.mjs';
 
 const RootPath = process.cwd();
 const skipExternal = true;
@@ -76,7 +76,7 @@ const fixVersion = async (file) => {
  *
  * @returns {Promise<void>}
  */
-module.exports.cssVersioning = async () => {
+export const cssVersioning = async () => {
   const bench = new Timer('Versioning');
 
   const cssFiles = (await readdir(`${RootPath}/media`, { withFileTypes: true, recursive: true }))

build/build-modules-js/error-pages.es6.js renamed to build/build-modules-js/error-pages.mjs

@@ -1,11 +1,12 @@
-const {
+import {
   access, mkdir, readFile, writeFile,
-} = require('fs').promises;
-const Ini = require('ini');
-const { dirname } = require('path');
-const Recurs = require('recursive-readdir');
-const { transform } = require('esbuild');
-const LightningCSS = require('lightningcss');
+} from 'node:fs/promises';
+import { dirname } from 'node:path';
+
+import Ini from 'ini';
+import Recurs from 'recursive-readdir';
+import { transform } from 'esbuild';
+import { transform as transformCss } from 'lightningcss';
 
 const RootPath = process.cwd();
 const dir = `${RootPath}/installation/language`;
@@ -21,7 +22,7 @@ const srcPath = `${RootPath}/build/warning_page`;
  * And also specific strings in the languages in the installation folder!
  * Also the base strings are held in build/build-modules-js/settings.json
  */
-module.exports.createErrorPages = async (options) => {
+export const createErrorPages = async (options) => {
   const iniFilesProcess = [];
   const processPages = [];
   global.incompleteObj = {};
@@ -33,7 +34,7 @@ module.exports.createErrorPages = async (options) => {
   let cssContent = await readFile(`${srcPath}/template.css`, { encoding: 'utf8' });
   let jsContent = await readFile(`${srcPath}/template.js`, { encoding: 'utf8' });
 
-  const { code } = LightningCSS.transform({
+  const { code } = transformCss({
     code: Buffer.from(cssContent),
     minify: true,
   });

build/build-modules-js/init/cleanup-media.es6.js renamed to build/build-modules-js/init/cleanup-media.mjs

@@ -1,17 +1,19 @@
-const {
-  stat, mkdir, copy, remove,
-} = require('fs-extra');
-const { join } = require('path');
+import { join } from 'node:path';
+
+import pkg from 'fs-extra';
 
 const RootPath = process.cwd();
+const {
+  stat, mkdir, copy, remove,
+} = pkg;
 
 /**
  * Method that will erase the media/vendor folder
  * and populate the debugbar assets
  *
  * @returns {Promise}
  */
-module.exports.cleanVendors = async () => {
+export const cleanVendors = async () => {
   if (process.env.SKIP_COMPOSER_CHECK === 'YES') {
     await mkdir('media/vendor/debugbar', { recursive: true, mode: 0o755 });
     // eslint-disable-next-line no-console
@@ -39,7 +41,7 @@ module.exports.cleanVendors = async () => {
     await remove(join(RootPath, 'media/vendor/debugbar/vendor/jquery'));
   } else {
     // eslint-disable-next-line no-console
-    console.error('You need to run `npm install` AFTER the command `composer install`!!!. The debug plugin HASN\'T installed all its front end assets');
+    console.error("You need to run `npm install` AFTER the command `composer install`!!!. The debug plugin HASN'T installed all its front end assets");
     process.exitCode = 1;
   }
 };

build/build-modules-js/init/common/concat-files.es6.js renamed to build/build-modules-js/init/common/concat-files.mjs

@@ -1,4 +1,4 @@
-const { readFile, writeFile, existsSync } = require('fs-extra');
+import { readFile, writeFile, existsSync } from 'fs-extra';
 
 const RootPath = process.cwd();
 
@@ -10,7 +10,7 @@ const RootPath = process.cwd();
  *
  * @returns {void}
  */
-module.exports.concatFiles = async (files, output) => {
+export const concatFiles = async (files, output) => {
   const promises = [];
 
   // eslint-disable-next-line no-restricted-syntax

build/build-modules-js/init/common/copy-all-files.es6.js renamed to build/build-modules-js/init/common/copy-all-files.mjs

@@ -1,5 +1,6 @@
-const { copy } = require('fs-extra');
-const { join } = require('path');
+import { join } from 'node:path';
+
+import { copy } from 'fs-extra';
 
 const RootPath = process.cwd();
 
@@ -12,7 +13,7 @@ const RootPath = process.cwd();
  *
  * @returns { void }
  */
-module.exports.copyAllFiles = async (dirName, name, type) => {
+export const copyAllFiles = async (dirName, name, type) => {
   const folderName = dirName === '/' ? '/' : `/${dirName}`;
   await copy(
     join(RootPath, `node_modules/${name}/${folderName}`),