feat: migrate to bundled modules using Rollup

.eslintrc.js

@@ -1,10 +1,5 @@
 module.exports = {
   extends: ['standard', 'prettier'],
-  globals: {
-    $: 'readonly',
-    jQuery: 'readonly',
-    MOJFrontend: 'readonly'
-  },
   ignorePatterns: [
     '**/vendor/**',
     'package/**',

docs/assets/javascript/application.mjs

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

gulp/build-copy-files.js

@@ -4,16 +4,19 @@ gulp.task('build:copy-files', () => {
   return gulp
     .src(
       [
-        'src/**/*',
-        '!src/moj/all.js', // this will get built
+        'src/moj/assets/**',
+        'src/moj/filters/**',
+        'src/moj/vendor/**',
+        'src/moj/**/*.{md,njk,scss}',
+        'src/moj/init.js',
         'README.md',
-        '!**/.DS_Store',
-        '!src/README.md'
+        '!**/.DS_Store'
       ],
       {
         allowEmpty: true,
+        base: 'src/moj',
         encoding: false
       }
     )
-    .pipe(gulp.dest('package/'))
+    .pipe(gulp.dest('package/moj'))
 })

gulp/build-javascript.js

@@ -1,30 +1,57 @@
+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'
-        },
-        namespace: 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: [
+        {
+          extend: true,
+          file: join('package', modulePath),
+          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 +64,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,13 @@
+const { dirname } = require('path')
+
+const commonjs = require('@rollup/plugin-commonjs')
+const nodeResolve = require('@rollup/plugin-node-resolve')
 const gulp = require('gulp')
-const gulpEsbuild = require('gulp-esbuild')
+const rename = require('gulp-rename')
 const gulpSass = require('gulp-sass')
+const uglify = require('gulp-uglify')
+const { rollup } = require('rollup')
+const externalGlobals = require('rollup-plugin-external-globals')
 const dartSass = require('sass-embedded')
 
 const sass = gulpSass(dartSass)
@@ -59,19 +66,34 @@ 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 input = 'docs/assets/javascript/application.mjs'
+  const output = 'public/assets/javascript/application.js'
+
+  const bundle = await rollup({
+    input,
+    external: ['jquery'],
+    plugins: [
+      externalGlobals({
+        jquery: 'window.jQuery'
+      }),
+      nodeResolve(),
+      commonjs()
+    ]
+  })
+
+  await bundle.write({
+    file: output,
+    format: 'esm'
+  })
+
+  if (process.env.ENV !== 'dev') {
+    return gulp
+      .src(output)
+      .pipe(uglify())
+      .pipe(rename({ extname: '.js' }))
+      .pipe(gulp.dest(dirname(output)))
+  }
 })
 
 gulp.task('docs:revision', async () => {
@@ -94,3 +116,7 @@ gulp.task('docs:revision', async () => {
     .pipe(rev.manifest())
     .pipe(gulp.dest('public/assets/'))
 })
+
+/**
+ * @import { RollupOptions } from 'rollup'
+ */

gulpfile.js

@@ -57,7 +57,7 @@ gulp.task('watch:package-js', () => {
 // 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.setup.js

@@ -1,7 +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)
-window.MOJFrontend = {}