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,52 @@
+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')
 
-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/components/**/*.{cjs,js,mjs}', {
+    cwd: 'src',
+    ignore: ['**/*.spec.{cjs,js,mjs}'],
+    nodir: true
+  })
+
+  // Create Rollup bundle(s)
+  for (const modulePath of [
+    ...modulePaths,
+
+    // Build entry scripts last to restore modules
+    // removed from components due to tree-shaking
+    'moj/version.js',
+    'moj/helpers.js',
+    'moj/all.js'
+  ]) {
+    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: [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', () => {
@@ -46,3 +68,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,12 @@
+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 dartSass = require('sass-embedded')
 
 const sass = gulpSass(dartSass)
@@ -59,19 +65,27 @@ 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,
+    plugins: [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 +108,7 @@ gulp.task('docs:revision', async () => {
     .pipe(rev.manifest())
     .pipe(gulp.dest('public/assets/'))
 })
+
+/**
+ * @import { RollupOptions } from 'rollup'
+ */