[5.3] Move to ESM redo of #43779

.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 → 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 → 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 → 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 → 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 → 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 → 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 → 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 → 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}`),

build/build-modules-js/init/common/resolve-package.es6.js → build/build-modules-js/init/common/resolve-package.cjs

@@ -1,4 +1,4 @@
-const { existsSync, readdirSync } = require('fs-extra');
+const { existsSync, readdirSync } = require('node:fs');
 
 /**
  * Find full path for package file.

build/build-modules-js/init/exemptions/tinymce.es6.js → build/build-modules-js/init/exemptions/tinymce.mjs

@@ -1,11 +1,12 @@
-const {
-  existsSync, copy, readFile, writeFile, mkdir, removeSync,
-} = require('fs-extra');
+import { existsSync } from 'node:fs';
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
 
-const { join } = require('path');
+import pkg from 'fs-extra';
 
-const { copyAllFiles } = require('../common/copy-all-files.es6.js');
+import { copyAllFiles } from '../common/copy-all-files.mjs';
 
+const { copy, removeSync } = pkg;
 const RootPath = process.cwd();
 const xmlVersionStr = /(<version>)(.+)(<\/version>)/;
 
@@ -36,10 +37,10 @@ const copyArrayFiles = async (dirName, files, name, type) => {
 /**
  * tinyMCE needs special treatment
  */
-module.exports.tinyMCE = async (packageName, version) => {
+export const tinyMCE = async (packageName, version) => {
   const itemvendorPath = join(RootPath, `media/vendor/${packageName}`);
 
-  if (!await existsSync(itemvendorPath)) {
+  if (!(await existsSync(itemvendorPath))) {
     await mkdir(itemvendorPath, { mode: 0o755 });
     await mkdir(join(itemvendorPath, 'icons'), { mode: 0o755 });
     await mkdir(join(itemvendorPath, 'plugins'), { mode: 0o755 });
@@ -65,7 +66,10 @@ module.exports.tinyMCE = async (packageName, version) => {
 
   // Remove that sourcemap...
   let tinyWrongMap = await readFile(`${RootPath}/media/vendor/tinymce/skins/ui/oxide/skin.min.css`, { encoding: 'utf8' });
-  tinyWrongMap = tinyWrongMap.replace('/*# sourceMappingURL=skin.min.css.map */', '');
+  tinyWrongMap = tinyWrongMap.replace(
+    '/*# sourceMappingURL=skin.min.css.map */',
+    '',
+  );
   await writeFile(`${RootPath}/media/vendor/tinymce/skins/ui/oxide/skin.min.css`, tinyWrongMap, { encoding: 'utf8', mode: 0o644 });
 
   // Restore our code on the vendor folders

build/build-modules-js/init/localise-packages.es6.js → build/build-modules-js/init/localise-packages.mjs

@@ -1,9 +1,16 @@
+import { dirname, join } from 'node:path';
+import { createRequire } from 'node:module';
+import { existsSync } from 'node:fs';
+
+import pkg from 'fs-extra';
+
+import { tinyMCE } from './exemptions/tinymce.mjs';
+import { resolvePackageFile } from './common/resolve-package.cjs';
+
+const require = createRequire(import.meta.url);
 const {
-  existsSync, copy, writeFile, mkdir, mkdirs, ensureDir,
-} = require('fs-extra');
-const { dirname, join } = require('path');
-const { tinyMCE } = require('./exemptions/tinymce.es6.js');
-const { resolvePackageFile } = require('./common/resolve-package.es6.js');
+  copy, mkdirs, mkdir, ensureDir, writeFile,
+} = pkg;
 
 const RootPath = process.cwd();
 
@@ -54,16 +61,13 @@ const resolvePackage = async (vendor, packageName, mediaVendorPath, options, reg
     ['js', 'css', 'filesExtra'].forEach((type) => {
       if (!vendor[type]) return;
 
-      promises.push(
-        copyFilesTo(vendor[type], modulePathRoot, join(mediaVendorPath, vendorName), type),
-      );
+      promises.push(copyFilesTo(vendor[type], modulePathRoot, join(mediaVendorPath, vendorName), type));
     });
   }
 
   // Copy the license if existsSync
   if (options.settings.vendors[packageName].licenseFilename
-  && await existsSync(`${join(RootPath, `node_modules/${packageName}`)}/${options.settings.vendors[packageName].licenseFilename}`)
-  ) {
+    && (await existsSync(`${join(RootPath, `node_modules/${packageName}`)}/${options.settings.vendors[packageName].licenseFilename}`))) {
     const dest = join(mediaVendorPath, vendorName);
     await copy(
       `${join(RootPath, `node_modules/${packageName}`)}/${options.settings.vendors[packageName].licenseFilename}`,
@@ -113,7 +117,7 @@ const resolvePackage = async (vendor, packageName, mediaVendorPath, options, reg
  *
  * @returns {Promise}
  */
-module.exports.localisePackages = async (options) => {
+export const localisePackages = async (options) => {
   const mediaVendorPath = join(RootPath, 'media/vendor');
   const registry = {
     $schema: 'https://developer.joomla.org/schemas/json-schema/web_assets.json',
@@ -125,7 +129,7 @@ module.exports.localisePackages = async (options) => {
   };
   const promises = [];
 
-  if (!await existsSync(mediaVendorPath)) {
+  if (!(await existsSync(mediaVendorPath))) {
     await mkdir(mediaVendorPath, { recursive: true, mode: 0o755 });
   }
 
@@ -140,9 +144,5 @@ module.exports.localisePackages = async (options) => {
   await Promise.all(promises);
 
   // Write assets registry
-  await writeFile(
-    join(mediaVendorPath, 'joomla.asset.json'),
-    JSON.stringify(registry, null, 2),
-    { encoding: 'utf8', mode: 0o644 },
-  );
+  await writeFile(join(mediaVendorPath, 'joomla.asset.json'), JSON.stringify(registry, null, 2), { encoding: 'utf8', mode: 0o644 });
 };