[5.4] Cleanup short and sweet script (joomla#45017)

- Use the JS ESM module instead of the iife
- Drop the patches in the build tools

Author: dgrammatiko

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

@@ -13,13 +13,12 @@ const folders = [
   'media/vendor/diff/js',
   'media/vendor/es-module-shims/js',
   'media/vendor/qrcode/js',
-  'media/vendor/short-and-sweet/js',
   'media/vendor/webcomponentsjs/js',
 ];
 
 let allFiles = [];
 
-const noMinified = ['accessibility.min.js', 'short-and-sweet.min.js'];
+const noMinified = ['accessibility.min.js'];
 
 const alreadyMinified = [
   'media/vendor/webcomponentsjs/js/webcomponents-bundle.js',

build/build-modules-js/init/patches.mjs

@@ -15,7 +15,7 @@ export const patchPackages = async (options) => {
 
   // Joomla's hack to expose the chosen base classes so we can extend it ourselves
   // (it was better than the many hacks we had before. But I'm still ashamed of myself).
-  let dest = join(mediaVendorPath, 'chosen');
+  const dest = join(mediaVendorPath, 'chosen');
   const chosenPath = `${dest}/${options.settings.vendors['chosen-js'].js['chosen.jquery.js']}`;
   let ChosenJs = await readFile(chosenPath, { encoding: 'utf8' });
   ChosenJs = ChosenJs.replace(
@@ -26,17 +26,6 @@ export const patchPackages = async (options) => {
   );
   await writeFile(chosenPath, ChosenJs, { encoding: 'utf8', mode: 0o644 });
 
-  // Append initialising code to the end of the Short-and-Sweet javascript
-  dest = join(mediaVendorPath, 'short-and-sweet');
-  const shortandsweetPath = `${dest}/${options.settings.vendors['short-and-sweet'].js['dist/short-and-sweet.min.js']}`;
-  let ShortandsweetJs = await readFile(shortandsweetPath, { encoding: 'utf8' });
-  ShortandsweetJs = ShortandsweetJs.concat(`
-shortAndSweet('textarea.charcount,input.charcount', {counterClassName: 'small text-muted'});
-/** Repeatable */
-document.addEventListener("joomla:updated", (event) => [].slice.call(event.target.querySelectorAll('textarea.charcount,input.charcount')).map((el) => shortAndSweet(el, {counterClassName: 'small text-muted'})));
-`);
-  await writeFile(shortandsweetPath, ShortandsweetJs, { encoding: 'utf8', mode: 0o644 });
-
   // Include the v5 shim for Font Awesome
   const faPath = join(mediaVendorPath, 'fontawesome-free/scss/fontawesome.scss');
   const newScss = (await readFile(faPath, { encoding: 'utf8' })).concat(`

build/build-modules-js/settings.json

@@ -704,16 +704,13 @@
       "short-and-sweet": {
         "name": "short-and-sweet",
         "licenseFilename": "LICENSE",
-        "js": {
-          "dist/short-and-sweet.min.js": "js/short-and-sweet.min.js"
-        },
         "provideAssets": [
           {
             "name": "short-and-sweet",
             "type": "script",
             "uri": "short-and-sweet.min.js",
             "attributes": {
-              "defer": true
+              "type": "module"
             }
           }
         ]

build/media_source/vendor/short-and-sweet/js/short-and-sweet.es6.js

@@ -0,0 +1,9 @@
+import shortAndSweet from 'short-and-sweet/dist/short-and-sweet.module.js';
+
+shortAndSweet('textarea.charcount,input.charcount', { counterClassName: 'small text-muted' });
+
+/** Repeatable */
+document.addEventListener('joomla:updated', (event) => {
+  event.target.querySelectorAll('textarea.charcount,input.charcount')
+    .forEach((el) => shortAndSweet(el, { counterClassName: 'small text-muted' }));
+});