feat: add new lint:types npm script

.eslintrc.js

@@ -1,9 +1,5 @@
 module.exports = {
   extends: ['standard', 'prettier'],
-  globals: {
-    $: 'readonly',
-    jQuery: 'readonly'
-  },
   ignorePatterns: [
     '**/vendor/**',
     'package/**',
@@ -90,6 +86,12 @@ module.exports = {
           }
         ],
 
+        // Skip rules handled by TypeScript compiler
+        'n/no-extraneous-require': 'off',
+        'n/no-extraneous-import': 'off',
+        'n/no-missing-require': 'off',
+        'n/no-missing-import': 'off',
+
         // Automatically use template strings
         'no-useless-concat': 'error',
         'prefer-template': 'error',

.gitignore

@@ -19,9 +19,8 @@ package/*
 .env
 .port.tmp
 .vscode/
+*.tsbuildinfo
 npm-debug.log
 sass-cache
 settings.json
 tmp-uploads
-
-

.releaserc.json

@@ -36,7 +36,7 @@
     [
       "semantic-release-plugin-update-version-in-files",
       {
-        "files": ["package/moj/all.js"],
+        "files": ["package/moj/all.js", "package/moj/all.mjs"],
         "placeholder": "0.0.0-development"
       }
     ]

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/preset-env']
+}

docs/assets/javascript/application.mjs

@@ -2,7 +2,7 @@
 
 import * as GOVUKFrontend from 'govuk-frontend'
 
-import * as MOJFrontend from '../../../src/moj/all.js'
+import * as MOJFrontend from '../../../src/moj/all.mjs'
 
 import CollapsibleNav from './collapsible-nav.mjs'
 import Cookies from './cookies.mjs'

docs/assets/javascript/collapsible-nav.mjs

@@ -17,7 +17,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)
@@ -60,7 +60,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) {
@@ -71,7 +71,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');

docs/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../tsconfig.base.json",
+  "include": ["**/*.js", "**/*.mjs"]
+}

gulp/build-javascript.js

@@ -1,30 +1,64 @@
+const { join } = require('path')
+
+const commonjs = require('@rollup/plugin-commonjs')
+const nodeResolve = require('@rollup/plugin-node-resolve')
+const { glob } = require('glob')
 const gulp = require('gulp')
 const concat = require('gulp-concat')
 const rename = require('gulp-rename')
 const uglify = require('gulp-uglify')
-const umd = require('gulp-umd')
+const { rollup } = require('rollup')
+const externalGlobals = require('rollup-plugin-external-globals')
 
-gulp.task('build:javascript', () => {
-  return gulp
-    .src([
-      'src/moj/namespace.js',
-      'src/moj/helpers.js',
-      'src/moj/all.js',
-      'src/moj/version.js',
-      'src/moj/components/**/!(*.spec).js'
-    ])
-    .pipe(concat('all.js'))
-    .pipe(
-      umd({
-        exports: function () {
-          return 'MOJFrontend'
+gulp.task('build:javascript', async () => {
+  const modulePaths = await glob('moj/**/*.{cjs,js,mjs}', {
+    cwd: 'src',
+    ignore: [
+      '**/*.spec.{cjs,js,mjs}',
+      '**/filters/**',
+      '**/vendor/**',
+      '**/init.js'
+    ],
+    nodir: true
+  })
+
+  // Create Rollup bundle(s)
+  for (const modulePath of modulePaths) {
+    const options = /** @satisfies {RollupOptions} */ ({
+      input: join('src', modulePath),
+      output: [
+        {
+          dir: 'package',
+          entryFileNames: '[name].mjs',
+          format: 'es',
+          preserveModules: true,
+          preserveModulesRoot: 'src'
         },
-        namespace: function () {
-          return 'MOJFrontend'
+        {
+          extend: true,
+          file: join('package', modulePath.replace('.mjs', '.js')),
+          format: 'umd',
+          name: 'MOJFrontend'
         }
-      })
-    )
-    .pipe(gulp.dest('package/moj/'))
+      ],
+      external: ['jquery'],
+      plugins: [
+        externalGlobals({
+          jquery: 'window.jQuery'
+        }),
+        nodeResolve(),
+        commonjs()
+      ]
+    })
+
+    // Create bundle
+    const bundle = await rollup(options)
+
+    // Write to output format(s)
+    for (const output of options.output) {
+      await bundle.write(output)
+    }
+  }
 })
 
 gulp.task('build:javascript-minified', () => {
@@ -37,12 +71,12 @@ gulp.task('build:javascript-minified', () => {
 
 gulp.task('build:javascript-minified-with-jquery', () => {
   return gulp
-    .src([
-      'node_modules/jquery/dist/jquery.js',
-      'gulp/jquery/scope.js',
-      'package/moj/all.js'
-    ])
+    .src(['node_modules/jquery/dist/jquery.js', 'package/moj/all.js'])
     .pipe(concat('all.jquery.min.js'))
     .pipe(uglify())
     .pipe(gulp.dest('package/moj/'))
 })
+
+/**
+ * @import { RollupOptions } from 'rollup'
+ */

gulp/docs.js

@@ -1,6 +1,9 @@
+const commonjs = require('@rollup/plugin-commonjs')
+const nodeResolve = require('@rollup/plugin-node-resolve')
 const gulp = require('gulp')
-const gulpEsbuild = require('gulp-esbuild')
 const gulpSass = require('gulp-sass')
+const { rollup } = require('rollup')
+const externalGlobals = require('rollup-plugin-external-globals')
 const dartSass = require('sass-embedded')
 
 const sass = gulpSass(dartSass)
@@ -59,19 +62,26 @@ gulp.task('docs:styles', (done) => {
 })
 
 // Bundle the docs site javascript
-gulp.task('docs:scripts', (done) => {
-  return gulp
-    .src('docs/assets/javascript/application.mjs')
-    .pipe(
-      gulpEsbuild({
-        bundle: true,
-        loader: { '.mjs': 'js' },
-        minify: process.env.ENV !== 'dev',
-        outfile: 'application.js',
-        target: 'es6'
-      }).on('error', done)
-    )
-    .pipe(gulp.dest('public/assets/javascript'))
+gulp.task('docs:scripts', async () => {
+  const options = /** @satisfies {RollupOptions} */ ({
+    input: 'docs/assets/javascript/application.mjs',
+    output: {
+      dir: 'public/assets/javascript',
+      format: 'es',
+      name: 'MOJFrontend'
+    },
+    external: ['jquery'],
+    plugins: [
+      externalGlobals({
+        jquery: 'window.jQuery'
+      }),
+      nodeResolve(),
+      commonjs()
+    ]
+  })
+
+  const bundle = await rollup(options)
+  await bundle.write(options.output)
 })
 
 gulp.task('docs:revision', async () => {
@@ -94,3 +104,7 @@ gulp.task('docs:revision', async () => {
     .pipe(rev.manifest())
     .pipe(gulp.dest('public/assets/'))
 })
+
+/**
+ * @import { RollupOptions } from 'rollup'
+ */

gulp/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../tsconfig.base.json",
+  "include": ["**/*.js", "**/*.mjs"]
+}

gulpfile.js

@@ -51,13 +51,17 @@ gulp.task('watch:styles', () => {
 
 // Watch all the component js files and build the package
 gulp.task('watch:package-js', () => {
-  gulp.watch(['src/moj/components/**/*.js'], gulp.series('build:javascript'))
+  gulp.watch(
+    ['src/moj/components/**/*.mjs'],
+    { ignored: ['**/*.spec.*'] },
+    gulp.series('build:javascript')
+  )
 })
 
 // Watch the docs js files and the bundled package js and rebuild
 gulp.task('watch:docs-js', () => {
   gulp.watch(
-    ['docs/assets/**/*.js', 'package/moj/all.js'],
+    ['docs/assets/**/*.mjs', 'package/moj/all.js'],
     gulp.series(['docs:scripts'])
   )
 })

jest.config.js

@@ -1,10 +1,17 @@
-const config = {
-  testEnvironment: 'jsdom',
-  testEnvironmentOptions: {},
+module.exports = {
   setupFilesAfterEnv: ['./jest.setup.js', 'jest-sinon'],
-  // See: https://github.com/sinonjs/sinon/issues/2522#issuecomment-1612555284
-  moduleNameMapper: {
-    sinon: '<rootDir>/node_modules/sinon/pkg/sinon.js'
-  }
+  testEnvironment: 'jsdom',
+  testMatch: ['<rootDir>/**/*.spec.{js,mjs}'],
+
+  // Enable Babel transforms until Jest supports ESM and `import()`
+  // See: https://jestjs.io/docs/ecmascript-modules
+  transform: {
+    '^.+\\.(js|mjs)$': ['babel-jest', { rootMode: 'upward' }]
+  },
+
+  // Enable Babel transforms for ESM-only node_modules
+  // See: https://jestjs.io/docs/ecmascript-modules
+  transformIgnorePatterns: [
+    `<rootDir>/node_modules/(?!${['sinon'].join('|')}/)`
+  ]
 }
-module.exports = config

jest.setup.js

@@ -1,6 +1,6 @@
 require('@testing-library/jest-dom')
-require('./src/moj/vendor/jquery')
 require('mock-match-media/jest-setup')
+
 const { toHaveNoViolations } = require('jest-axe')
 
 expect.extend(toHaveNoViolations)