esm

joomla · Oct 17, 2024 · 45e65d2 · 45e65d2
1 parent 20868e5
commit 45e65d2
Show file tree

Hide file tree

Showing 41 changed files with 820 additions and 613 deletions.
diff --git a/.editorconfig b/.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
diff --git a/build/.eslintrc b/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"

diff --git a/build/build-modules-js/compilecss.es6.js → build/build-modules-js/compilecss.mjs b/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 = [];
 
@@ -77,7 +80,8 @@ module.exports.stylesheets = async (options, path) => {
 
   // eslint-disable-next-line no-restricted-syntax
   for (const file of files) {
-    const outputFile = file.replace(`${sep}scss${sep}`, `${sep}css${sep}`)
+    const outputFile = file
+      .replace(`${sep}scss${sep}`, `${sep}css${sep}`)
       .replace(`${sep}build${sep}media_source${sep}`, `${sep}media${sep}`)
       .replace('.scss', '.css');
 

diff --git a/build/build-modules-js/compilejs.es6.js → build/build-modules-js/compilejs.mjs b/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);
@@ -59,13 +61,17 @@ module.exports.scripts = async (options, path) => {
 
   // Loop to get the files that should be compiled via parameter
   computedFilesFlat.forEach((file) => {
-    if (file.includes(`build${sep}media_source${sep}vendor${sep}bootstrap${sep}js`)) {
+    if (
+      file.includes(
+        `build${sep}media_source${sep}vendor${sep}bootstrap${sep}js`,
+      )
+    ) {
       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));
     }
   });

diff --git a/build/build-modules-js/compress.es6.js → build/build-modules-js/compress.mjs b/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,17 @@ 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`,
@@ -30,7 +33,9 @@ module.exports.compressFiles = async (enableBrotli = false) => {
 
   const compressTasks = [];
   const files = await Promise.all(paths.map((path) => getFiles(`${path}`)));
-  [].concat(...files).map((file) => compressTasks.push(compressFile(file, enableBrotli)));
+  []
+    .concat(...files)
+    .map((file) => compressTasks.push(compressFile(file, enableBrotli)));
 
   await Promise.all(compressTasks);
   // eslint-disable-next-line no-console

diff --git a/build/build-modules-js/css-versioning.es6.js → build/build-modules-js/css-versioning.mjs b/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 }))

diff --git a/build/build-modules-js/error-pages.es6.js → build/build-modules-js/error-pages.mjs b/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,19 +22,25 @@ 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 = {};
   global.unsupportedObj = {};
   global.fatalObj = {};
   global.noxmlObj = {};
 
-  const initTemplate = await readFile(`${srcPath}/template.html`, { encoding: 'utf8' });
-  let cssContent = await readFile(`${srcPath}/template.css`, { encoding: 'utf8' });
-  let jsContent = await readFile(`${srcPath}/template.js`, { encoding: 'utf8' });
+  const initTemplate = await readFile(`${srcPath}/template.html`, {
+    encoding: 'utf8',
+  });
+  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,
   });
@@ -42,7 +49,9 @@ module.exports.createErrorPages = async (options) => {
   jsContent = await transform(jsContent, { minify: true });
 
   const processIni = async (file) => {
-    const languageStrings = Ini.parse(await readFile(file, { encoding: 'utf8' }));
+    const languageStrings = Ini.parse(
+      await readFile(file, { encoding: 'utf8' }),
+    );
 
     // Build the variables into json for the unsupported page
     if (languageStrings.BUILD_MIN_PHP_ERROR_LANGUAGE) {
@@ -116,17 +125,34 @@ module.exports.createErrorPages = async (options) => {
   });
 
   const processPage = async (name) => {
-    const sortedJson = Object.fromEntries(Object.entries(global[`${name}Obj`]).sort());
+    const sortedJson = Object.fromEntries(
+      Object.entries(global[`${name}Obj`]).sort(),
+    );
     const jsonContent = `window.errorLocale=${JSON.stringify(sortedJson)};`;
 
     let template = initTemplate;
 
     template = template.replace('{{jsonContents}}', jsonContent);
-    template = template.replace('{{Title}}', options.settings.errorPages[name].title);
-    template = template.replace('{{Header}}', options.settings.errorPages[name].header);
-    template = template.replace('{{Description}}', options.settings.errorPages[name].text);
-    template = template.replace('{{Link}}', options.settings.errorPages[name].link);
-    template = template.replace('{{LinkText}}', options.settings.errorPages[name].linkText);
+    template = template.replace(
+      '{{Title}}',
+      options.settings.errorPages[name].title,
+    );
+    template = template.replace(
+      '{{Header}}',
+      options.settings.errorPages[name].header,
+    );
+    template = template.replace(
+      '{{Description}}',
+      options.settings.errorPages[name].text,
+    );
+    template = template.replace(
+      '{{Link}}',
+      options.settings.errorPages[name].link,
+    );
+    template = template.replace(
+      '{{LinkText}}',
+      options.settings.errorPages[name].linkText,
+    );
 
     if (cssContent) {
       template = template.replace('{{cssContents}}', cssContent);
@@ -146,10 +172,16 @@ module.exports.createErrorPages = async (options) => {
       }
 
       if (!mediaExists) {
-        await mkdir(dirname(`${RootPath}${folder}`), { recursive: true, mode: 0o755 });
+        await mkdir(dirname(`${RootPath}${folder}`), {
+          recursive: true,
+          mode: 0o755,
+        });
       }
 
-      await writeFile(`${RootPath}${folder}`, template, { encoding: 'utf8', mode: 0o644 });
+      await writeFile(`${RootPath}${folder}`, template, {
+        encoding: 'utf8',
+        mode: 0o644,
+      });
 
       // eslint-disable-next-line no-console
       console.error(`✅ Created the file: ${folder}`);

diff --git a/...uild-modules-js/init/cleanup-media.es6.js → ...d/build-modules-js/init/cleanup-media.mjs b/...uild-modules-js/init/cleanup-media.es6.js → ...d/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
@@ -22,7 +24,9 @@ module.exports.cleanVendors = async () => {
   // eslint-disable-next-line no-console
   console.log('Cleanup the Vendor ');
 
-  const mediaFolder = await stat(join(RootPath, 'libraries/vendor/maximebf/debugbar/src/DebugBar/Resources'));
+  const mediaFolder = await stat(
+    join(RootPath, 'libraries/vendor/maximebf/debugbar/src/DebugBar/Resources'),
+  );
 
   if (await mediaFolder.isDirectory()) {
     // Remove the vendor folder
@@ -31,15 +35,27 @@ module.exports.cleanVendors = async () => {
     // console.error('/media has been removed.');
 
     // Recreate the media folder
-    await mkdir(join(RootPath, 'media/vendor/debugbar'), { recursive: true, mode: 0o755 });
+    await mkdir(join(RootPath, 'media/vendor/debugbar'), {
+      recursive: true,
+      mode: 0o755,
+    });
 
     // Copy some assets from a PHP package
-    await copy(join(RootPath, 'libraries/vendor/maximebf/debugbar/src/DebugBar/Resources'), join(RootPath, 'media/vendor/debugbar'), { preserveTimestamps: true });
+    await copy(
+      join(
+        RootPath,
+        'libraries/vendor/maximebf/debugbar/src/DebugBar/Resources',
+      ),
+      join(RootPath, 'media/vendor/debugbar'),
+      { preserveTimestamps: true },
+    );
     await remove(join(RootPath, 'media/vendor/debugbar/vendor/font-awesome'));
     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;
   }
 };