[4.0][WIP] BS5 JS

administrator/components/com_content/tmpl/articles/default.php

@@ -26,6 +26,9 @@
 
 HTMLHelper::_('behavior.multiselect');
 
+// Just for the tests :(
+HTMLHelper::_('jquery.framework');
+
 $app       = Factory::getApplication();
 $user      = Factory::getUser();
 $userId    = $user->get('id');

administrator/components/com_fields/tmpl/fields/default.php

@@ -20,6 +20,9 @@
 
 HTMLHelper::_('behavior.multiselect');
 
+// Just for the tests :(
+HTMLHelper::_('jquery.framework');
+
 $app       = Factory::getApplication();
 $user      = Factory::getUser();
 $userId    = $user->get('id');

administrator/components/com_mails/tmpl/templates/default.php

@@ -14,6 +14,8 @@
 use Joomla\CMS\Layout\LayoutHelper;
 use Joomla\CMS\Router\Route;
 
+HTMLHelper::_('bootstrap.dropdown');
+
 $listOrder = $this->escape($this->state->get('list.ordering'));
 $listDirn = $this->escape($this->state->get('list.direction'));
 ?>

administrator/components/com_templates/tmpl/template/default.php

@@ -376,7 +376,7 @@
 );
 ?>
 <form action="<?php echo Route::_('index.php?option=com_templates&task=template.copy&id=' . $input->getInt('id') . '&file=' . $this->file); ?>" method="post" name="adminForm" id="adminForm">
-	<?php echo LayoutHelper::render('joomla.modal.main', $copyModalData); ?>
+	<?php echo LayoutHelper::render('libraries.html.bootstrap.modal.main', $copyModalData); ?>
 	<?php echo HTMLHelper::_('form.token'); ?>
 </form>
 <?php if ($this->type != 'home') : ?>
@@ -391,7 +391,7 @@
 	);
 	?>
 	<form action="<?php echo Route::_('index.php?option=com_templates&task=template.renameFile&id=' . $input->getInt('id') . '&file=' . $this->file); ?>" method="post">
-		<?php echo LayoutHelper::render('joomla.modal.main', $renameModalData); ?>
+		<?php echo LayoutHelper::render('libraries.html.bootstrap.modal.main', $renameModalData); ?>
 		<?php echo HTMLHelper::_('form.token'); ?>
 	</form>
 <?php endif; ?>
@@ -406,7 +406,7 @@
 		'body' => $this->loadTemplate('modal_delete_body')
 	);
 	?>
-	<?php echo LayoutHelper::render('joomla.modal.main', $deleteModalData); ?>
+	<?php echo LayoutHelper::render('libraries.html.bootstrap.modal.main', $deleteModalData); ?>
 <?php endif; ?>
 <?php // File Modal
 $fileModalData = array(
@@ -422,7 +422,7 @@
 	'body' => $this->loadTemplate('modal_file_body')
 );
 ?>
-<?php echo LayoutHelper::render('joomla.modal.main', $fileModalData); ?>
+<?php echo LayoutHelper::render('libraries.html.bootstrap.modal.main', $fileModalData); ?>
 <?php // Folder Modal
 $folderModalData = array(
 	'selector' => 'folderModal',
@@ -437,7 +437,7 @@
 	'body' => $this->loadTemplate('modal_folder_body')
 );
 ?>
-<?php echo LayoutHelper::render('joomla.modal.main', $folderModalData); ?>
+<?php echo LayoutHelper::render('libraries.html.bootstrap.modal.main', $folderModalData); ?>
 <?php if ($this->type == 'image') : ?>
 	<?php // Resize Modal
 	$resizeModalData = array(
@@ -450,7 +450,7 @@
 	);
 	?>
 	<form action="<?php echo Route::_('index.php?option=com_templates&task=template.resizeImage&id=' . $input->getInt('id') . '&file=' . $this->file); ?>" method="post">
-		<?php echo LayoutHelper::render('joomla.modal.main', $resizeModalData); ?>
+		<?php echo LayoutHelper::render('libraries.html.bootstrap.modal.main', $resizeModalData); ?>
 		<?php echo HTMLHelper::_('form.token'); ?>
 	</form>
 <?php endif; ?>

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

@@ -0,0 +1,155 @@
+const {
+  readdir, readFile, rename, writeFile, rm,
+} = require('fs').promises;
+const { resolve } = require('path');
+const { minify } = require('terser');
+const rimraf = require('rimraf');
+const rollup = require('rollup');
+const { nodeResolve } = require('@rollup/plugin-node-resolve');
+const replace = require('@rollup/plugin-replace');
+const { babel } = require('@rollup/plugin-babel');
+
+const tasks = [];
+const inputFolder = 'build/media_source/vendor/bootstrap/js';
+const outputFolder = 'media/vendor/bootstrap/js';
+
+const createMinified = async (file) => {
+  const initial = await readFile(resolve(outputFolder, file), { encoding: 'utf8' });
+  const mini = await minify(initial);
+  await rename(resolve(outputFolder, file), resolve(outputFolder, `${file.split('-')[0]}.es6.js`));
+  await writeFile(resolve(outputFolder, `${file.split('-')[0]}.es6.min.js`), mini.code, { encoding: 'utf8' });
+};
+
+const build = async () => {
+  // eslint-disable-next-line no-console
+  console.log('Building ES6 Components...');
+
+  const bundle = await rollup.rollup({
+    input: resolve(inputFolder, 'index.es6.js'),
+    plugins: [
+      nodeResolve(),
+      replace({
+        'process.env.NODE_ENV': '\'production\'',
+      }),
+    ],
+    external: [
+      './base-component.js',
+      './dom/data.js',
+      './event-handler.js',
+      './dom/manipulator.js',
+      './selector-engine.js',
+      './util/index.js',
+    ],
+    manualChunks: {
+      alert: ['build/media_source/vendor/bootstrap/js/alert.es6.js'],
+      button: ['build/media_source/vendor/bootstrap/js/button.es6.js'],
+      carousel: ['build/media_source/vendor/bootstrap/js/carousel.es6.js'],
+      collapse: ['build/media_source/vendor/bootstrap/js/collapse.es6.js'],
+      dropdown: ['build/media_source/vendor/bootstrap/js/dropdown.es6.js'],
+      modal: ['build/media_source/vendor/bootstrap/js/modal.es6.js'],
+      popover: ['build/media_source/vendor/bootstrap/js/popover.es6.js'],
+      scrollspy: ['build/media_source/vendor/bootstrap/js/scrollspy.es6.js'],
+      tab: ['build/media_source/vendor/bootstrap/js/tab.es6.js'],
+      toast: ['build/media_source/vendor/bootstrap/js/toast.es6.js'],
+      popper: ['@popperjs/core'],
+      dom: [
+        'node_modules/bootstrap/js/src/base-component.js',
+        'node_modules/bootstrap/js/src/dom/data.js',
+        'node_modules/bootstrap/js/src/dom/event-handler.js',
+        'node_modules/bootstrap/js/src/dom/manipulator.js',
+        'node_modules/bootstrap/js/src/dom/selector-engine.js',
+        'node_modules/bootstrap/js/src/util/index.js',
+      ],
+    },
+  });
+
+  await bundle.write({
+    format: 'es',
+    sourcemap: false,
+    dir: outputFolder,
+  });
+};
+
+const buildLegacy = async () => {
+  // eslint-disable-next-line no-console
+  console.log('Building Legacy...');
+
+  const bundle = await rollup.rollup({
+    input: resolve(inputFolder, 'index.es6.js'),
+    plugins: [
+      nodeResolve(),
+      replace({
+        'process.env.NODE_ENV': '\'production\'',
+      }),
+      babel({
+        exclude: 'node_modules/core-js/**',
+        babelHelpers: 'bundled',
+        babelrc: false,
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              corejs: '3.8',
+              useBuiltIns: 'usage',
+              targets: {
+                chrome: '58',
+                ie: '11',
+              },
+              loose: true,
+              bugfixes: true,
+              modules: false,
+            },
+          ],
+        ],
+      }),
+    ],
+    external: [],
+  });
+
+  await bundle.write({
+    format: 'iife',
+    sourcemap: false,
+    name: 'Bootstrap',
+    file: resolve(outputFolder, 'bootstrap.es5.js'),
+  });
+};
+
+(async () => {
+  rimraf.sync(resolve(outputFolder));
+
+  try {
+    await build(resolve(inputFolder, 'index.es6.js'));
+    await rm(resolve(outputFolder, 'index.es6.js'));
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    process.exit(1);
+  }
+
+  (await readdir(outputFolder)).forEach((file) => {
+    if (!(file.startsWith('dom-') || file.startsWith('popper-'))) {
+      tasks.push(createMinified(file));
+    }
+  });
+
+  await Promise.all(tasks).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);
+    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/compilejs.es6.js

@@ -1,4 +1,5 @@
 const Fs = require('fs');
+const { sep } = require('path');
 const Recurs = require('recursive-readdir');
 const HandleFile = require('./javascript/handle-file.es6.js');
 
@@ -45,6 +46,9 @@ module.exports.compileJS = (options, path) => {
           (files) => {
             files.forEach(
               (file) => {
+                if (file.includes(`build${sep}media_source${sep}vendor${sep}bootstrap${sep}js`)) {
+                  return;
+                }
                 HandleFile.run(file);
               },
               (error) => {

build/build-modules-js/settings.json

@@ -39,13 +39,6 @@
       },
       "bootstrap": {
         "name": "bootstrap",
-        "js": {
-          "dist/js/bootstrap.js": "js/bootstrap.js",
-          "dist/js/bootstrap.min.js": "js/bootstrap.min.js",
-          "dist/js/bootstrap.bundle.js": "js/bootstrap.bundle.js",
-          "dist/js/bootstrap.bundle.min.js": "js/bootstrap.bundle.min.js",
-          "dist/js/bootstrap.bundle.min.js.map": "js/bootstrap.bundle.min.js.map"
-        },
         "css": {
           "dist/css/bootstrap.css": "css/bootstrap.css",
           "dist/css/bootstrap.min.css": "css/bootstrap.min.css",
@@ -76,22 +69,6 @@
             "dependencies": [
               "bootstrap.css"
             ]
-          },
-          {
-            "name": "bootstrap.js",
-            "type": "script",
-            "uri": "bootstrap.min.js",
-            "dependencies": [
-              "jquery"
-            ]
-          },
-          {
-            "name": "bootstrap.js.bundle",
-            "type": "script",
-            "uri": "bootstrap.bundle.min.js",
-            "dependencies": [
-              "jquery"
-            ]
           }
         ],
         "dependencies": [],

build/media_source/com_workflow/js/admin-items-workflow-buttons.es6.js

@@ -38,7 +38,7 @@ Joomla.toggleAllNextElements = (element, className) => {
   'use strict';
 
   document.addEventListener('DOMContentLoaded', () => {
-    const dropDownBtn = document.getElementById('toolbar-dropdown-status-group');
+    const dropDownBtn = document.getElementById('toolbar-status-group');
     const transitions = [].slice.call(dropDownBtn.querySelectorAll('.button-transition'));
     const headline = dropDownBtn.querySelector('.button-transition-headline');
     const separator = dropDownBtn.querySelector('.button-transition-separator');