fix: various issues spotted by tsc TypeScript compiler

.browserslistrc

@@ -0,0 +1,16 @@
+[javascripts]
+supports es6-module
+
+[stylesheets]
+> 0.1% in GB and not dead
+last 6 Chrome versions
+last 6 Firefox versions
+last 6 Edge versions
+last 2 Samsung versions
+Firefox ESR
+Safari >= 11
+iOS >= 11
+IE 11
+
+[node]
+node 22

.github/workflows/deploy-production.yml

@@ -22,7 +22,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 'lts/*'
+          node-version-file: .nvmrc
       - run: npm ci
       - run: npm run build:package
       - uses: actions/upload-artifact@v4

.github/workflows/publish-package.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 'lts/*'
+          node-version-file: .nvmrc
       - run: npm ci
       - run: npm run build:package
       - uses: actions/upload-artifact@v4
@@ -80,7 +80,7 @@ jobs:
           persist-credentials: false
       - uses: actions/setup-node@v4
         with:
-          node-version: lts/*
+          node-version-file: .nvmrc
       - uses: actions/download-artifact@v4
         with:
           name: mojds-package

.nvmrc

@@ -1 +1 @@
-lts/*
+lts/jod

babel.config.js

@@ -1,3 +1,20 @@
 module.exports = {
-  presets: ['@babel/preset-env']
+  browserslistEnv: 'javascripts',
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        // Apply bug fixes to avoid transforms
+        bugfixes: true,
+
+        // Apply smaller "loose" transforms for browsers
+        loose: true
+      }
+    ]
+  ],
+  env: {
+    test: {
+      browserslistEnv: 'node'
+    }
+  }
 }

docs/assets/javascript/collapsible-nav.mjs

@@ -18,7 +18,7 @@ export default class CollapsibleNav extends HTMLElement {
       }
 
       $button.setAttribute('aria-controls', $list.id)
-      $button.setAttribute('aria-expanded', true)
+      $button.setAttribute('aria-expanded', 'true')
       $button.classList.add('app-vertical-nav__toggle')
 
       $button.insertAdjacentHTML('afterbegin', $link.innerHTML)
@@ -61,7 +61,7 @@ export default class CollapsibleNav extends HTMLElement {
 
     $list.hidden = false
     $item.classList.add(this.openClass)
-    $button.setAttribute('aria-expanded', true)
+    $button.setAttribute('aria-expanded', 'true')
   }
 
   close($item) {
@@ -72,7 +72,7 @@ export default class CollapsibleNav extends HTMLElement {
 
     $list.hidden = true
     $item.classList.remove(this.openClass)
-    $button.setAttribute('aria-expanded', false)
+    $button.setAttribute('aria-expanded', 'false')
   }
 
   closeOpenItems() {

docs/assets/javascript/menu-toggle.mjs

@@ -79,12 +79,12 @@ export default class MenuToggle extends HTMLElement {
 
   hideMenu() {
     this.$menu.hidden = true
-    this.$button.setAttribute('aria-expanded', false)
+    this.$button.setAttribute('aria-expanded', 'false')
   }
 
   showMenu() {
     this.$menu.hidden = false
-    this.$button.setAttribute('aria-expanded', true)
+    this.$button.setAttribute('aria-expanded', 'true')
   }
 
   get breakpoint() {

docs/assets/javascript/tabs.mjs

@@ -4,12 +4,12 @@ const Tabs = function (container) {
   this.cssHide = 'app-tabs__panel--hidden'
   this.tabs = container.find('.app-tabs__tab')
   this.panels = container.find('.app-tabs__panel')
-  this.container.on('click', '[role=tab]', $.proxy(this, 'onTabClick'))
-  this.container.on('keydown', '[role=tab]', $.proxy(this, 'onTabKeydown'))
+  this.container.on('click', '[role=tab]', this.onTabClick.bind(this))
+  this.container.on('keydown', '[role=tab]', this.onTabKeydown.bind(this))
   this.container.on(
     'click',
     '.app-tabs__close',
-    $.proxy(this, 'onCloseButtonClick')
+    this.onCloseButtonClick.bind(this)
   )
   this.setupHtml()
 }
@@ -37,18 +37,14 @@ Tabs.prototype.setupHtml = function () {
   this.container.find('.app-tabs__list-item').attr('role', 'presentation')
   this.tabs.attr('role', 'tab')
   this.panels.attr('role', 'tabpanel')
-  this.tabs.each(
-    $.proxy(function (i, tab) {
-      const panelId = this.getHref($(tab)).slice(1)
-      tab.id = `tab_${panelId}`
-      $(tab).attr('aria-controls', panelId)
-    }, this)
-  )
-  this.panels.each(
-    $.proxy(function (i, panel) {
-      $(panel).attr('aria-labelledby', this.tabs[i].id)
-    }, this)
-  )
+  this.tabs.each((i, tab) => {
+    const panelId = this.getHref($(tab)).slice(1)
+    tab.id = `tab_${panelId}`
+    $(tab).attr('aria-controls', panelId)
+  })
+  this.panels.each((i, panel) => {
+    $(panel).attr('aria-labelledby', this.tabs[i].id)
+  })
 
   // setup state
   // this.tabs.attr('tabindex', '-1');

gulp/tasks/scripts.js

@@ -1,5 +1,6 @@
 const { join, parse } = require('path')
 
+const { babel } = require('@rollup/plugin-babel')
 const commonjs = require('@rollup/plugin-commonjs')
 const nodeResolve = require('@rollup/plugin-node-resolve')
 const terser = require('@rollup/plugin-terser')
@@ -24,7 +25,10 @@ function compileScripts(assetPath, { srcPath, destPath, output = {} }) {
           jquery: '$'
         }),
         nodeResolve(),
-        commonjs()
+        commonjs(),
+        babel({
+          babelHelpers: 'bundled'
+        })
       ]
     })
 

gulp/tasks/styles.js

@@ -36,7 +36,11 @@ function compileStyles(assetPath, { srcPath, destPath, output = {} }) {
     }
 
     // Apply PostCSS transforms (e.g. vendor prefixes)
-    const processor = postcss([autoprefixer(), cssnano()])
+    const processor = postcss([
+      autoprefixer({ env: 'stylesheets' }),
+      cssnano({ env: 'stylesheets' })
+    ])
+
     const result = await processor.process(css, {
       from,
       to,

package.json

@@ -52,6 +52,7 @@
     "@babel/preset-env": "^7.26.7",
     "@commitlint/cli": "^18.0.0",
     "@commitlint/config-conventional": "^18.0.0",
+    "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",

src/moj/all.mjs

@@ -1,7 +1,5 @@
 /* eslint-disable no-new */
 
-import $ from 'jquery'
-
 import { AddAnother } from './components/add-another/add-another.mjs'
 import { Alert } from './components/alert/alert.mjs'
 import { ButtonMenu } from './components/button-menu/button-menu.mjs'
@@ -16,13 +14,16 @@ import { SortableTable } from './components/sortable-table/sortable-table.mjs'
 import { nodeListForEach } from './helpers.mjs'
 import { version } from './version.mjs'
 
-function initAll(options) {
-  // Set the options to an empty object by default if no options are passed.
-  options = typeof options !== 'undefined' ? options : {}
+/**
+ * @param {Config} [config]
+ */
+function initAll(config) {
+  // Set the config to an empty object by default if no config is passed.
+  config = typeof config !== 'undefined' ? config : {}
 
   // Allow the user to initialise MOJ Frontend in only certain sections of the page
   // Defaults to the entire document if nothing is set.
-  const scope = typeof options.scope !== 'undefined' ? options.scope : document
+  const scope = typeof config.scope !== 'undefined' ? config.scope : document
 
   const $addAnothers = scope.querySelectorAll('[data-module="moj-add-another"]')
 
@@ -60,7 +61,7 @@ function initAll(options) {
 
   nodeListForEach($richTextEditors, function ($richTextEditor) {
     const options = {
-      textarea: $($richTextEditor)
+      textarea: $richTextEditor
     }
 
     const toolbarAttr = $richTextEditor.getAttribute(
@@ -72,8 +73,16 @@ function initAll(options) {
 
       options.toolbar = {}
 
-      for (const item in toolbar) {
-        options.toolbar[toolbar[item]] = true
+      for (const option of toolbar) {
+        if (
+          option === 'bold' ||
+          option === 'italic' ||
+          option === 'underline' ||
+          option === 'bullets' ||
+          option === 'numbers'
+        ) {
+          options.toolbar[option] = true
+        }
       }
     }
 
@@ -87,11 +96,11 @@ function initAll(options) {
   nodeListForEach($searchToggles, function ($searchToggle) {
     new SearchToggle({
       toggleButton: {
-        container: $($searchToggle.querySelector('.moj-search-toggle__toggle')),
+        container: $searchToggle.querySelector('.moj-search-toggle__toggle'),
         text: $searchToggle.getAttribute('data-moj-search-toggle-text')
       },
       search: {
-        container: $($searchToggle.querySelector('.moj-search'))
+        container: $searchToggle.querySelector('.moj-search')
       }
     })
   })
@@ -141,3 +150,23 @@ export {
   SearchToggle,
   SortableTable
 }
+
+/**
+ * @typedef {object} Config
+ * @property {Element} [scope=document] - Scope to query for components
+ */
+
+/**
+ * Schema for component config
+ *
+ * @typedef {object} Schema
+ * @property {{ [field: string]: SchemaProperty | undefined }} properties - Schema properties
+ */
+
+/**
+ * Schema property for component config
+ *
+ * @typedef {object} SchemaProperty
+ * @property {'string' | 'boolean' | 'number' | 'object'} type - Property type
+ */
+

src/moj/components/add-another/add-another.mjs

@@ -12,12 +12,12 @@ export function AddAnother(container) {
   this.container.on(
     'click',
     '.moj-add-another__remove-button',
-    $.proxy(this, 'onRemoveButtonClick')
+    this.onRemoveButtonClick.bind(this)
   )
   this.container.on(
     'click',
     '.moj-add-another__add-button',
-    $.proxy(this, 'onAddButtonClick')
+    this.onAddButtonClick.bind(this)
   )
   this.container
     .find('.moj-add-another__add-button, moj-add-another__remove-button')
@@ -93,11 +93,9 @@ AddAnother.prototype.onRemoveButtonClick = function (e) {
   if (items.length === 1) {
     items.find('.moj-add-another__remove-button').remove()
   }
-  items.each(
-    $.proxy(function (index, el) {
+  items.each((index, el) => {
       this.updateAttributes(index, $(el))
-    }, this)
-  )
+  })
   this.focusHeading()
 }
 

src/moj/components/alert/alert.mjs

@@ -4,14 +4,6 @@ import {
   setFocus
 } from '../../helpers.mjs'
 
-/**
- * @typedef {object} AlertConfig
- * @property {boolean} [dismissible=false] - Can the alert be dismissed by the user
- * @property {string} [dismissText=Dismiss] - the label text for the dismiss button
- * @property {boolean} [disableAutoFocus=false] - whether the alert will be autofocused
- * @property {string} [focusOnDismissSelector] - CSS Selector for element to be focused on dismiss
- */
-
 /**
  * @param {HTMLElement} $module - the Alert element
  * @param {AlertConfig} config - configuration options
@@ -239,15 +231,9 @@ Alert.prototype.mergeConfigs = function (...configObjects) {
 }
 
 /**
- * Schema for component config
- *
- * @typedef {object} Schema
- * @property {{ [field: string]: SchemaProperty | undefined }} properties - Schema properties
- */
-
-/**
- * Schema property for component config
- *
- * @typedef {object} SchemaProperty
- * @property {'string' | 'boolean' | 'number' | 'object'} type - Property type
+ * @typedef {object} AlertConfig
+ * @property {boolean} [dismissible=false] - Can the alert be dismissed by the user
+ * @property {string} [dismissText=Dismiss] - the label text for the dismiss button
+ * @property {boolean} [disableAutoFocus=false] - whether the alert will be autofocused
+ * @property {string} [focusOnDismissSelector] - CSS Selector for element to be focused on dismiss
  */