[4.0] Deliver ES2015+ javascript (#32315)

Co-authored-by: Brian Teeman
Co-authored-by: Roland Dalmulder
Co-authored-by: AndySDH
Co-authored-by: Quy

administrator/components/com_admin/tmpl/profile/edit.php

@@ -18,7 +18,8 @@
 
 HTMLHelper::_('behavior.formvalidator');
 HTMLHelper::_('behavior.keepalive');
-HTMLHelper::_('script', 'com_users/two-factor-switcher.js', ['version' => 'auto', 'relative' => true], ['defer' => true]);
+HTMLHelper::_('script', 'com_users/two-factor-switcher.min.js', ['version' => 'auto', 'relative' => true], ['type' => 'module']);
+HTMLHelper::_('script', 'com_users/two-factor-switcher-es5.min.js', ['version' => 'auto', 'relative' => true], ['defer' => true, 'nomodule' => true]);
 
 $input = Factory::getApplication()->input;
 

build/build-modules-js/compilejs.es6.js

@@ -2,8 +2,7 @@ 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-es6.es6.js');
-const { handleWCFile } = require('./javascript/compile-w-c.es6.js');
+const { handleESMFile } = require('./javascript/compile-to-es2017.es6.js');
 
 const RootPath = process.cwd();
 
@@ -20,6 +19,7 @@ const RootPath = process.cwd();
  *
  * @param { object } options The options from settings.json
  * @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) => {
   const files = [];
@@ -54,9 +54,7 @@ module.exports.scripts = async (options, path) => {
 
   const computedFiles = await Promise.all(folderPromises);
   const computedFilesFlat = [].concat(...computedFiles);
-
   const jsFilesPromises = [];
-  const wcFilesPromises = [];
   const esmFilesPromises = [];
 
   // Loop to get the files that should be compiled via parameter
@@ -67,12 +65,10 @@ module.exports.scripts = async (options, path) => {
 
     if (file.match(/\.es5\.js$/)) {
       jsFilesPromises.push(handleES5File(file));
-    } else if (file.match(/\.w-c\.es6\.js$/)) {
-      wcFilesPromises.push(handleWCFile(file));
-    } else if (file.match(/\.es6\.js$/)) {
+    } else if (file.match(/\.es6\.js$/) || file.match(/\.w-c\.es6\.js$/)) {
       esmFilesPromises.push(handleESMFile(file));
     }
   });
 
-  await Promise.all([...jsFilesPromises, ...wcFilesPromises, ...esmFilesPromises]);
+  Promise.all([...jsFilesPromises, ...esmFilesPromises]);
 };

build/build-modules-js/init/exemptions/codemirror.es6.js

@@ -54,15 +54,6 @@ module.exports.codeMirror = async (packageName, version) => {
     'media/vendor/codemirror/lib/addons.js',
   );
 
-  await concatFiles(
-    [
-      'media/vendor/codemirror/lib/codemirror.js',
-      'media/vendor/codemirror/lib/addons.js',
-    ],
-
-    'media/vendor/codemirror/lib/codemirror-ce.js',
-  );
-
   await concatFiles([
     'media/vendor/codemirror/addon/display/fullscreen.css',
     'media/vendor/codemirror/addon/fold/foldgutter.css',

build/build-modules-js/init/minify-vendor.es6.js

@@ -10,7 +10,6 @@ const folders = [
   'media/vendor/chosen/js',
   'media/vendor/codemirror',
   'media/vendor/debugbar',
-  'media/vendor/punycode/js',
   'media/vendor/qrcode/js',
   'media/vendor/short-and-sweet/js',
   'media/vendor/webcomponentsjs/js',

build/build-modules-js/javascript/build-bootstrap-js.es6.js

@@ -8,6 +8,7 @@ const rollup = require('rollup');
 const { nodeResolve } = require('@rollup/plugin-node-resolve');
 const replace = require('@rollup/plugin-replace');
 const { babel } = require('@rollup/plugin-babel');
+const commonjs = require('@rollup/plugin-commonjs');
 
 const tasks = [];
 const inputFolder = 'build/media_source/vendor/bootstrap/js';
@@ -98,6 +99,7 @@ const buildLegacy = async () => {
   const bundle = await rollup.rollup({
     input: resolve(inputFolder, 'index.es6.js'),
     plugins: [
+      commonjs(),
       nodeResolve(),
       replace({
         'process.env.NODE_ENV': '\'production\'',
@@ -151,29 +153,28 @@ module.exports.bootstrapJs = async () => {
   }
 
   (await readdir(outputFolder)).forEach((file) => {
-    if (!(file.startsWith('dom-') || file.startsWith('popper-'))) {
-      tasks.push(createMinified(file));
-    }
+    tasks.push(createMinified(file));
   });
 
-  await Promise.all(tasks).catch((er) => {
+  return Promise.all(tasks).then(async () => {
+    // eslint-disable-next-line no-console
+    console.log('ES6 components ready ✅');
+
+    try {
+      await buildLegacy(inputFolder, 'index.es6.js');
+      const es5File = await readFile(resolve(outputFolder, 'bootstrap-es5.js'), { encoding: 'utf8' });
+      const mini = await minify(es5File, { sourceMap: false, format: { comments: false } });
+      await writeFile(resolve(outputFolder, 'bootstrap-es5.min.js'), mini.code, { encoding: 'utf8' });
+      // eslint-disable-next-line no-console
+      console.log('Legacy done! ✅');
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+      process.exit(1);
+    }
+  }).catch((er) => {
     // eslint-disable-next-line no-console
     console.log(er);
     process.exit(1);
   });
-  // eslint-disable-next-line no-console
-  console.log('ES6 components ready ✅');
-
-  try {
-    await buildLegacy(inputFolder, 'index.es6.js');
-    const es5File = await readFile(resolve(outputFolder, 'bootstrap-es5.js'), { encoding: 'utf8' });
-    const mini = await minify(es5File, { sourceMap: false, format: { comments: false } });
-    await writeFile(resolve(outputFolder, 'bootstrap-es5.min.js'), mini.code, { encoding: 'utf8' });
-    // eslint-disable-next-line no-console
-    console.log('Legacy done! ✅');
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
-    process.exit(1);
-  }
 };

build/build-modules-js/javascript/build-com_media-js.es6.js

@@ -1,19 +1,14 @@
-const { readFile, writeFile } = require('fs').promises;
 const { resolve } = require('path');
-const { minify } = require('terser');
 const rollup = require('rollup');
 const { nodeResolve } = require('@rollup/plugin-node-resolve');
 const replace = require('@rollup/plugin-replace');
 const { babel } = require('@rollup/plugin-babel');
 const VuePlugin = require('rollup-plugin-vue');
 const commonjs = require('@rollup/plugin-commonjs');
+const { minifyJs } = require('./minify.es6.js');
 
 const inputJS = 'administrator/components/com_media/resources/scripts/mediamanager.es6.js';
 
-const createMinified = async (file, contents) => {
-  const mini = await minify(contents, { sourceMap: false, format: { comments: false } });
-  await writeFile(file, mini.code, { encoding: 'utf8' });
-};
 const buildLegacy = async (file) => {
   // eslint-disable-next-line no-console
   console.log('Building Legacy Media Manager...');
@@ -58,10 +53,10 @@ const buildLegacy = async (file) => {
   // closes the bundle
   await bundle.close();
 
-  const contents = await readFile('media/com_media/js/media-manager-es5.js', { encoding: 'utf8' });
-  await createMinified(resolve('media/com_media/js/media-manager-es5.min.js'), contents);
   // eslint-disable-next-line no-console
   console.log('Legacy Media Manager ready ✅');
+
+  minifyJs('media/com_media/js/media-manager-es5.js');
 };
 
 module.exports.mediaManager = async () => {
@@ -112,9 +107,10 @@ module.exports.mediaManager = async () => {
 
   // closes the bundle
   await bundle.close();
-  const contents = await readFile('media/com_media/js/media-manager.js', { encoding: 'utf8' });
-  await createMinified(resolve('media/com_media/js/media-manager.min.js'), contents);
+
   // eslint-disable-next-line no-console
   console.log('ES2017 Media Manager ready ✅');
-  await buildLegacy(resolve('media/com_media/js/media-manager.js'));
+
+  minifyJs('media/com_media/js/media-manager.js');
+  return buildLegacy(resolve('media/com_media/js/media-manager.js'));
 };