Enable Rollup dual compile for ES and CommonJS modules

All modules are now compiled to `dist/govuk` with UMD bundles removed for now (e.g. `all.js` is now a CommonJS module)

docs/contributing/tasks.md

@@ -39,8 +39,8 @@ npm scripts are defined in `package.json`. These trigger a number of Gulp tasks.
 - copy Sass files, applying Autoprefixer via PostCSS
 - copy Nunjucks component template/macro files, including JSON configs
 - copy GOV.UK Prototype Kit config files
+- compile JavaScript to CommonJS modules
 - compile JavaScript to ECMAScript (ES) modules
-- compile JavaScript to Universal Module Definition (UMD)
 - runs `npm run postbuild:package` (which will test the output is correct)
 
 **`npm run build:release` will do the following:**
@@ -91,7 +91,7 @@ This task will:
 This task will:
 
 - check JavaScript code quality via ESLint (`npm run lint:js`) (using JavaScript Standard Style)
-- compile JavaScript to Universal Module Definition (UMD) into `./packages/govuk-frontend-review/dist/javascripts`
+- compile JavaScript to Immediately Invoked Function Expression (IIFE) into `./packages/govuk-frontend-review/dist/javascripts`
 - compile JavaScript documentation into `./packages/govuk-frontend-review/dist/docs/jsdoc`
 
 ## Review app only

packages/govuk-frontend-review/tasks/scripts.mjs

@@ -10,7 +10,7 @@ import gulp from 'gulp'
  * @type {import('govuk-frontend-tasks').TaskFunction}
  */
 export const compile = (options) => gulp.series(
-  task.name('compile:js', () =>
+  task.name("compile:js 'bundle'", () =>
     scripts.compile('all.mjs', {
       ...options,
 

packages/govuk-frontend-review/tasks/watch.mjs

@@ -48,11 +48,11 @@ export const watch = (options) => gulp.parallel(
   /**
    * JavaScripts build watcher
    */
-  task.name('compile:js watch', () =>
+  task.name("compile:js 'bundle' watch", () =>
     gulp.watch([
       `${slash(paths.root)}/typedoc.config.js`,
       `${slash(paths.app)}/src/javascripts/**/*.mjs`,
-      `${slash(paths.package)}/dist/govuk-esm/**/*.mjs`
+      `${slash(paths.package)}/dist/govuk/**/*.mjs`
     ], scripts(options))
   )
 )

packages/govuk-frontend/package.json

@@ -3,7 +3,7 @@
   "description": "GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.",
   "version": "4.6.0",
   "main": "dist/govuk/all.js",
-  "module": "dist/govuk-esm/all.mjs",
+  "module": "dist/govuk/all.mjs",
   "files": [
     "dist",
     "govuk-prototype-kit.config.json",
@@ -13,7 +13,7 @@
   "exports": {
     ".": {
       "sass": "./dist/govuk/all.scss",
-      "import": "./dist/govuk-esm/all.mjs",
+      "import": "./dist/govuk/all.mjs",
       "require": "./dist/govuk/all.js"
     },
     "./*": "./*"

packages/govuk-frontend/rollup.esm.config.mjs → packages/govuk-frontend/rollup.modules.config.mjs

@@ -5,20 +5,30 @@ import { defineConfig } from 'rollup'
 /**
  * Rollup config for npm publish
  *
- * ECMAScript (ES) modules for browser <script type="module">
- * or using `import` for modern browsers and Node.js scripts
+ * 1. CommonJS modules for Node.js `require()`
+ *
+ * 2. ECMAScript (ES) modules for browser <script type="module">
+ *   or using `import` for modern browsers and Node.js scripts
  */
 export default defineConfig(({ i: input }) => ({
   input,
 
   /**
    * Output options
    */
-  output: {
-    entryFileNames: '[name].mjs',
-    format: 'es',
-    preserveModules: true
-  },
+  output: [
+    {
+      exports: 'named',
+      format: 'cjs',
+      interop: 'esModule',
+      preserveModules: true
+    },
+    {
+      entryFileNames: '[name].mjs',
+      format: 'es',
+      preserveModules: true
+    }
+  ],
 
   /**
    * Input plugins

packages/govuk-frontend/tasks/build/package.test.mjs

@@ -4,7 +4,8 @@ import { join } from 'path'
 import { paths, pkg } from 'govuk-frontend-config'
 import { compileSassFile } from 'govuk-frontend-helpers/tests'
 import { filterPath, getDirectories, getListing, mapPathTo } from 'govuk-frontend-lib/files'
-import { componentNameToClassName, componentPathToModuleName } from 'govuk-frontend-lib/names'
+import { componentNameToClassName } from 'govuk-frontend-lib/names'
+import { outdent } from 'outdent'
 
 describe('packages/govuk-frontend/dist/', () => {
   let listingPackage
@@ -13,7 +14,6 @@ describe('packages/govuk-frontend/dist/', () => {
 
   let componentsFilesSource
   let componentsFilesDist
-  let componentsFilesDistESM
 
   let componentNames
 
@@ -24,7 +24,6 @@ describe('packages/govuk-frontend/dist/', () => {
 
     componentsFilesSource = await getListing(join(paths.package, 'src/govuk/components'))
     componentsFilesDist = await getListing(join(paths.package, 'dist/govuk/components'))
-    componentsFilesDistESM = await getListing(join(paths.package, 'dist/govuk-esm/components'))
 
     // Components list
     componentNames = await getDirectories(join(paths.package, 'src/govuk/components'))
@@ -47,28 +46,20 @@ describe('packages/govuk-frontend/dist/', () => {
       // Removes GOV.UK Prototype kit config (moved to package top level)
       .flatMap(mapPathTo(['**/govuk-prototype-kit.config.mjs'], () => []))
 
-      // Replaces all source '*.mjs' files
-      .flatMap(mapPathTo(['**/*.mjs'], ({ dir: requirePath, name }) => {
-        const importFilter = /^govuk(?!-)/
+      // All source `**/*.mjs` files compiled to CommonJS modules
+      .flatMap(mapPathTo(['**/*.mjs'], ({ dir: requirePath, name }) => [
+        join(requirePath, `${name}.mjs`),
 
-        // All source `**/*.mjs` files compiled to `**/*.js`
-        const output = [
-          join(requirePath, `${name}.js`),
-          join(requirePath, `${name}.js.map`) // with source map
-        ]
-
-        // Only source `./govuk/**/*.mjs` files compiled to `./govuk-esm/**/*.mjs`
-        if (importFilter.test(requirePath)) {
-          const importPath = requirePath.replace(importFilter, 'govuk-esm')
-
-          output.push(...[
-            join(importPath, `${name}.mjs`),
-            join(importPath, `${name}.mjs.map`) // with source map
-          ])
-        }
+        // CommonJS modules
+        join(requirePath, `${name}.js`),
+        join(requirePath, `${name}.js.map`) // with source map
+      ]))
 
-        return output
-      }))
+      // Only source `./govuk/**/*.mjs` files compiled to ES modules
+      .flatMap(mapPathTo(['**/govuk/**/*.mjs'], ({ dir: requirePath, name }) => [
+        join(requirePath, `${name}.mjs`),
+        join(requirePath, `${name}.mjs.map`) // with source map
+      ]))
 
       // Add Autoprefixer prefixes to all source '*.scss' files
       .flatMap(mapPathTo(['**/*.scss'], ({ dir: requirePath, name }) => [
@@ -96,9 +87,8 @@ describe('packages/govuk-frontend/dist/', () => {
       'package.json',
       'postcss.config.mjs',
       'postcss.config.unit.test.mjs',
-      'rollup.esm.config.mjs',
+      'rollup.modules.config.mjs',
       'rollup.release.config.mjs',
-      'rollup.umd.config.mjs',
       'tsconfig.build.json',
       'tsconfig.json'
     ])
@@ -111,16 +101,53 @@ describe('packages/govuk-frontend/dist/', () => {
     })
   })
 
+  describe('all.mjs', () => {
+    it('should export each module', async () => {
+      const contents = await readFile(join(paths.package, 'dist/govuk/all.mjs'), 'utf8')
+
+      // Look for ES modules named exports
+      expect(contents).toContain('export { Accordion, Button, CharacterCount, Checkboxes, Details, ErrorSummary, Header, NotificationBanner, Radios, SkipLink, Tabs, initAll };')
+    })
+  })
+
   describe('all.js', () => {
-    it('should have correct module name', async () => {
+    it('should export each module', async () => {
       const contents = await readFile(join(paths.package, 'dist/govuk/all.js'), 'utf8')
 
-      // Look for AMD module definition for 'GOVUKFrontend'
-      expect(contents).toContain("typeof define === 'function' && define.amd ? define('GOVUKFrontend', ['exports'], factory)")
+      // Look for CommonJS named exports for components
+      expect(contents).toContain(outdent`
+        exports.Accordion = accordion.default;
+        exports.Button = button.default;
+        exports.CharacterCount = characterCount.default;
+        exports.Checkboxes = checkboxes.default;
+        exports.Details = details.default;
+        exports.ErrorSummary = errorSummary.default;
+        exports.Header = header.default;
+        exports.NotificationBanner = notificationBanner.default;
+        exports.Radios = radios.default;
+        exports.SkipLink = skipLink.default;
+        exports.Tabs = tabs.default;
+      `)
+
+      // Look for CommonJS named exports for utilities
+      expect(contents).toContain('exports.initAll = initAll;')
+      expect(contents).toContain('exports.version = govukFrontendVersion.version;')
     })
+  })
 
+  describe('common/govuk-frontend-version.mjs', () => {
     it('should have correct version number', async () => {
-      const contents = await readFile(join(paths.package, 'dist/govuk/all.js'), 'utf8')
+      const contents = await readFile(join(paths.package, 'dist/govuk/common/govuk-frontend-version.mjs'), 'utf8')
+
+      // Look for ES modules `version` named export
+      expect(contents).toContain(`var version = '${pkg.version}';`)
+      expect(contents).toContain('export { version };')
+    })
+  })
+
+  describe('common/govuk-frontend-version.js', () => {
+    it('should have correct version number', async () => {
+      const contents = await readFile(join(paths.package, 'dist/govuk/common/govuk-frontend-version.js'), 'utf8')
 
       // Look for CommonJS `version` named export
       expect(contents).toContain(`var version = '${pkg.version}';`)
@@ -185,31 +212,28 @@ describe('packages/govuk-frontend/dist/', () => {
 
         const componentSource = componentsFilesSource.filter(componentFilter)
         const componentDist = componentsFilesDist.filter(componentFilter)
-        const componentDistESM = componentsFilesDistESM.filter(componentFilter)
 
-        // UMD bundle not found at source
+        // CommonJS module not found at source
         expect(componentSource)
           .toEqual(expect.not.arrayContaining([join(componentName, `${componentName}.js`)]))
 
-        // UMD bundle generated in dist
+        // CommonJS and ES modules generated in dist
         expect(componentDist)
-          .toEqual(expect.arrayContaining([join(componentName, `${componentName}.js`)]))
-
-        // ES module generated in dist
-        expect(componentsFilesDistESM)
-          .toEqual(expect.arrayContaining([join(componentName, `${componentName}.mjs`)]))
+          .toEqual(expect.arrayContaining([
+            join(componentName, `${componentName}.js`),
+            join(componentName, `${componentName}.mjs`)
+          ]))
 
         const [modulePath] = componentDist
           .filter(filterPath([`**/${componentName}.js`]))
 
-        const [modulePathESM] = componentDistESM
+        const [modulePathESM] = componentDist
           .filter(filterPath([`**/${componentName}.mjs`]))
 
-        const moduleName = componentPathToModuleName(join(paths.package, 'src/govuk/components', modulePath))
         const moduleText = await readFile(join(paths.package, 'dist/govuk/components', modulePath), 'utf8')
-        const moduleTextESM = await readFile(join(paths.package, 'dist/govuk-esm/components', modulePathESM), 'utf8')
+        const moduleTextESM = await readFile(join(paths.package, 'dist/govuk/components', modulePathESM), 'utf8')
 
-        expect(moduleText).toContain(`typeof define === 'function' && define.amd ? define('${moduleName}', factory)`)
+        expect(moduleText).toContain(`exports.default = ${componentNameToClassName(componentName)};`)
         expect(moduleTextESM).toContain(`export { ${componentNameToClassName(componentName)} as default }`)
       })
 

packages/govuk-frontend/tasks/build/release.mjs

@@ -24,7 +24,7 @@ export default (options) => gulp.series(
   ),
 
   // Compile GOV.UK Frontend JavaScript
-  task.name('compile:js', () =>
+  task.name("compile:js 'bundle'", () =>
     scripts.compile('all.mjs', {
       ...options,
 

packages/govuk-frontend/tasks/scripts.mjs

@@ -10,28 +10,15 @@ import gulp from 'gulp'
  */
 export const compile = (options) => gulp.series(
   /**
-   * Compile GOV.UK Frontend JavaScript (ES modules)
+   * Compile GOV.UK Frontend JavaScript (CommonJS and ES modules)
    */
-  task.name('compile:mjs', () =>
+  task.name("compile:js 'modules'", () =>
     scripts.compile('!(*.test).mjs', {
       ...options,
 
-      srcPath: join(options.srcPath, 'govuk'),
-      destPath: join(options.destPath, 'govuk-esm'),
-      configPath: join(options.basePath, 'rollup.esm.config.mjs')
-    })
-  ),
-
-  /**
-   * Compile GOV.UK Frontend JavaScript (UMD bundles)
-   */
-  task.name('compile:js', () =>
-    scripts.compile('**/!(*.test).mjs', {
-      ...options,
-
       srcPath: join(options.srcPath, 'govuk'),
       destPath: join(options.destPath, 'govuk'),
-      configPath: join(options.basePath, 'rollup.umd.config.mjs')
+      configPath: join(options.basePath, 'rollup.modules.config.mjs')
     })
   ),