feat: bundle modules using Rollup

docs/assets/javascript/application.mjs

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

gulp/build-javascript.js

@@ -1,30 +1,49 @@
+const { join } = require('path')
+
+const commonjs = require('@rollup/plugin-commonjs')
+const resolve = 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')
 
-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/'))
+      ],
+      plugins: [resolve(), 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', () => {
@@ -46,3 +65,7 @@ gulp.task('build:javascript-minified-with-jquery', () => {
     .pipe(uglify())
     .pipe(gulp.dest('package/moj/'))
 })
+
+/**
+ * @import { RollupOptions } from 'rollup'
+ */

gulp/docs.js

@@ -1,6 +1,8 @@
+const commonjs = require('@rollup/plugin-commonjs')
+const resolve = require('@rollup/plugin-node-resolve')
 const gulp = require('gulp')
-const gulpEsbuild = require('gulp-esbuild')
 const gulpSass = require('gulp-sass')
+const { rollup } = require('rollup')
 const dartSass = require('sass-embedded')
 
 const sass = gulpSass(dartSass)
@@ -59,19 +61,19 @@ 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'
+    },
+    plugins: [resolve(), commonjs()]
+  })
+
+  const bundle = await rollup(options)
+  await bundle.write(options.output)
 })
 
 gulp.task('docs:revision', async () => {
@@ -94,3 +96,7 @@ gulp.task('docs:revision', async () => {
     .pipe(rev.manifest())
     .pipe(gulp.dest('public/assets/'))
 })
+
+/**
+ * @import { RollupOptions } from 'rollup'
+ */