Default to ES modules with single Rollup config

.github/workflows/tests.yml

@@ -264,8 +264,9 @@ jobs:
         run: |
           node --eval "console.log(require.resolve('govuk-frontend'))"${{ env.FLAGS }}
           node --eval "console.log(require.resolve('govuk-frontend/package.json'))"${{ env.FLAGS }}
-          node --eval "console.log(require.resolve('govuk-frontend/dist/govuk/i18n.js'))"${{ env.FLAGS }}
-          node --eval "console.log(require.resolve('govuk-frontend/dist/govuk-esm/i18n.mjs'))"${{ env.FLAGS }}
+          node --eval "console.log(require.resolve('govuk-frontend/dist/govuk/components/accordion/accordion.bundle.js'))"${{ env.FLAGS }}
+          node --eval "console.log(require.resolve('govuk-frontend/dist/govuk/components/accordion/accordion.bundle.mjs'))"${{ env.FLAGS }}
+          node --eval "console.log(require.resolve('govuk-frontend/dist/govuk/i18n.mjs'))"${{ env.FLAGS }}
 
   regression:
     name: Percy

docs/contributing/tasks.md

@@ -40,7 +40,7 @@ npm scripts are defined in `package.json`. These trigger a number of Gulp tasks.
 - copy Nunjucks component template/macro files, including JSON configs
 - copy GOV.UK Prototype Kit config files
 - compile JavaScript to ECMAScript (ES) modules
-- compile JavaScript to Universal Module Definition (UMD)
+- compile JavaScript to Universal Module Definition (UMD) bundles
 - compile Rollup build stats into `./shared/govuk-frontend-stats/dist`
 - runs `npm run postbuild:package` (which will test the output is correct)
 
@@ -91,8 +91,6 @@ 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 documentation into `./packages/govuk-frontend-review/dist/docs/jsdoc`
 
 ## Review app only

packages/govuk-frontend-review/browsersync.config.js

@@ -22,9 +22,14 @@ module.exports = {
 
   // Files to watch for auto reload
   files: [
-    join(paths.app, 'dist/javascripts/**/*.mjs'),
     join(paths.app, 'dist/stylesheets/**/*.css'),
     join(paths.app, 'src/views/**/*.njk'),
+
+    packageTypeToPath('govuk-frontend', {
+      modulePath: 'govuk-frontend.min.js',
+      moduleRoot: paths.app
+    }),
+
     packageTypeToPath('govuk-frontend', {
       modulePath: '**/*.njk',
       moduleRoot: paths.app
@@ -36,7 +41,10 @@ module.exports = {
   serveStatic: [
     {
       route: '/javascripts',
-      dir: join(paths.app, 'dist/javascripts')
+      dir: packageTypeToPath('govuk-frontend', {
+        modulePath: '/',
+        moduleRoot: paths.app
+      })
     },
     {
       route: '/stylesheets',

packages/govuk-frontend-review/nodemon.json

@@ -6,7 +6,7 @@
     "../../shared/lib",
     "../../shared/stats"
   ],
-  "ignore": ["./src/javascripts/**", "**/*.test.*"],
+  "ignore": ["**/*.test.*"],
   "events": {
     "restart": "browser-sync reload --config browsersync.config.js"
   },

packages/govuk-frontend-review/src/common/middleware/assets.mjs

@@ -11,7 +11,7 @@ const router = express.Router()
  */
 
 router.use('/assets', express.static(packageTypeToPath('govuk-frontend', { modulePath: 'assets', moduleRoot: paths.app })))
-router.use('/javascripts', express.static(join(paths.app, 'dist/javascripts')))
+router.use('/javascripts', express.static(packageTypeToPath('govuk-frontend', { modulePath: '/', moduleRoot: paths.app })))
 router.use('/stylesheets', express.static(join(paths.app, 'dist/stylesheets')))
 
 export default router

packages/govuk-frontend-review/src/views/examples/scoped-initialisation/index.njk

@@ -45,9 +45,9 @@
 {% endblock %}
 
 {% block bodyEnd %}
-  <script type="module" src="/javascripts/all.bundle.min.mjs"></script>
+  <script type="module" src="/javascripts/govuk-frontend.min.js"></script>
   <script type="module">
-    import { initAll } from '/javascripts/all.bundle.min.mjs'
+    import { initAll } from '/javascripts/govuk-frontend.min.js'
     const $scope = document.getElementById('scoped')
     initAll({ scope: $scope })
   </script>

packages/govuk-frontend-review/src/views/examples/template-custom/index.njk

@@ -121,9 +121,9 @@
 
 {% block bodyEnd %}
   <!-- block:bodyEnd -->
-  <script type="module" src="/javascripts/all.bundle.min.mjs"></script>
+  <script type="module" src="/javascripts/govuk-frontend.min.js"></script>
   <script type="module">
-    import { initAll } from '/javascripts/all.bundle.min.mjs'
+    import { initAll } from '/javascripts/govuk-frontend.min.js'
     initAll()
   </script>
   <!-- endblock:bodyEnd -->

packages/govuk-frontend-review/src/views/examples/template-default/index.njk

@@ -12,9 +12,9 @@
 
 {% block bodyEnd %}
   <!-- block:bodyEnd -->
-  <script type="module" src="/javascripts/all.bundle.min.mjs"></script>
+  <script type="module" src="/javascripts/govuk-frontend.min.js"></script>
   <script type="module">
-    import { initAll } from '/javascripts/all.bundle.min.mjs'
+    import { initAll } from '/javascripts/govuk-frontend.min.js'
     initAll()
   </script>
   <!-- endblock:bodyEnd -->

packages/govuk-frontend-review/src/views/examples/translated/index.njk

@@ -937,9 +937,9 @@
 {% endblock %}
 
 {% block bodyEnd %}
-  <script type="module" src="/javascripts/all.bundle.min.mjs"></script>
+  <script type="module" src="/javascripts/govuk-frontend.min.js"></script>
   <script type="module">
-    import { initAll } from '/javascripts/all.bundle.min.mjs'
+    import { initAll } from '/javascripts/govuk-frontend.min.js'
     initAll({
       accordion: {
         i18n: {

packages/govuk-frontend-review/src/views/layouts/_generic.njk

@@ -15,9 +15,9 @@
 {% set mainClasses = 'govuk-main-wrapper--auto-spacing' %}
 
 {% block bodyEnd %}
-  <script type="module" src="/javascripts/all.bundle.min.mjs"></script>
+  <script type="module" src="/javascripts/govuk-frontend.min.js"></script>
   <script type="module">
-    import { initAll } from '/javascripts/all.bundle.min.mjs'
+    import { initAll } from '/javascripts/govuk-frontend.min.js'
     initAll()
   </script>
 {% endblock %}

packages/govuk-frontend-review/src/views/tests/boilerplate.njk

@@ -6,7 +6,7 @@
 {% block head %}
   {{ super() }}
   <script type="importmap">
-    { "imports": { "govuk-frontend": "/javascripts/all.bundle.min.mjs" } }
+    { "imports": { "govuk-frontend": "/javascripts/govuk-frontend.min.js" } }
   </script>
 {% endblock %}
 
@@ -21,5 +21,5 @@
 {% endblock %}
 
 {% block bodyEnd %}
-  <script type="module" src="/javascripts/all.bundle.min.mjs"></script>
+  <script type="module" src="/javascripts/govuk-frontend.min.js"></script>
 {% endblock %}

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

@@ -1,30 +1,12 @@
-import { join } from 'path'
-
-import { npm, scripts, task } from 'govuk-frontend-tasks'
+import { npm } from 'govuk-frontend-tasks'
 import gulp from 'gulp'
 
 /**
  * JavaScripts task (for watch)
- * Compilation, documentation
+ * Documentation
  *
  * @type {import('govuk-frontend-tasks').TaskFunction}
  */
 export const compile = (options) => gulp.series(
-  task.name('compile:js', () =>
-    scripts.compile('all.mjs', {
-      ...options,
-
-      srcPath: join(options.srcPath, 'javascripts'),
-      destPath: join(options.destPath, 'javascripts'),
-      configPath: join(options.basePath, 'rollup.config.mjs'),
-
-      // Rename with `*.bundle.min.mjs` extension
-      filePath ({ dir, name }) {
-        return join(dir, `${name}.bundle.min.mjs`)
-      }
-    })
-  ),
-
-  // Build JSDoc for /docs/javascript
   npm.script('build:jsdoc', [], options)
 )

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

@@ -36,23 +36,13 @@ export const watch = (options) => gulp.parallel(
     ], styles(options))
   ),
 
-  /**
-   * JavaScripts lint watcher
-   */
-  task.name('lint:js watch', () =>
-    gulp.watch([
-      `${slash(paths.app)}/src/javascripts/**/*.mjs`
-    ], npm.script('lint:js:cli', [slash(join(options.workspace, '**/*.{cjs,js,md,mjs}'))]))
-  ),
-
   /**
    * JavaScripts build watcher
    */
   task.name('compile:js 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/README.md

@@ -48,10 +48,10 @@ Some of the JavaScript included in GOV.UK Frontend improves the usability and
 accessibility of the components. You should make sure that you are importing and
 initialising Javascript in your application to ensure that all users can use it successfully.
 
-You can include Javascript for all components either by copying the `all.js` from `node_modules/govuk-frontend/dist/govuk/` into your application or referencing the file directly:
+You can include Javascript for all components either by copying the `all.bundle.js` from `node_modules/govuk-frontend/dist/govuk/` into your application or referencing the file directly:
 
 ```html
-<script type="module" src="<path-to-govuk-frontend-all-file>/all.js"></script>
+<script type="module" src="<path-to-govuk-frontend-all-file>/all.bundle.js"></script>
 ```
 
 Next you need to initialise the script by adding:

packages/govuk-frontend/package.json

@@ -2,8 +2,8 @@
   "name": "govuk-frontend",
   "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",
+  "main": "dist/govuk/all.bundle.js",
+  "module": "dist/govuk/all.mjs",
   "sass": "dist/govuk/all.scss",
   "files": [
     "dist",
@@ -14,8 +14,9 @@
   "exports": {
     ".": {
       "sass": "./dist/govuk/all.scss",
-      "import": "./dist/govuk-esm/all.mjs",
-      "require": "./dist/govuk/all.js"
+      "import": "./dist/govuk/all.mjs",
+      "require": "./dist/govuk/all.bundle.js",
+      "default": "./dist/govuk/all.bundle.js"
     },
     "./*": "./*",
     "./dist/": "./dist/",

packages/govuk-frontend/rollup.publish.config.mjs

@@ -0,0 +1,66 @@
+import replace from '@rollup/plugin-replace'
+import { pkg } from 'govuk-frontend-config'
+import { componentPathToModuleName } from 'govuk-frontend-lib/names'
+import { defineConfig } from 'rollup'
+
+/**
+ * Rollup config for npm publish
+ */
+export default defineConfig(({ i: input }) => ({
+  input,
+
+  /**
+   * Output options
+   */
+  output: [
+    /**
+     * ECMAScript (ES) modules for Node.js or bundler `import`
+     */
+    {
+      entryFileNames: '[name].mjs',
+      format: 'es',
+
+      // Separate modules, not bundled
+      preserveModules: true
+    },
+
+    /**
+     * ECMAScript (ES) module bundles for browser <script type="module">
+     * or using `import` for modern browsers and Node.js scripts
+     */
+    {
+      format: 'es',
+
+      // Bundled modules
+      preserveModules: false
+    },
+
+    /**
+     * Universal Module Definition (UMD) bundle for browser <script>
+     * `window` globals and compatibility with CommonJS and AMD `require()`
+     */
+    {
+      format: 'umd',
+
+      // Bundled modules
+      preserveModules: false,
+
+      // Components are given names (e.g window.GOVUKFrontend.Accordion)
+      amd: { id: componentPathToModuleName(input) },
+      name: componentPathToModuleName(input)
+    }
+  ],
+
+  /**
+   * Input plugins
+   */
+  plugins: [
+    replace({
+      include: '**/common/govuk-frontend-version.mjs',
+      preventAssignment: true,
+
+      // Add GOV.UK Frontend release version
+      development: pkg.version
+    })
+  ]
+}))