Add UMD bundle.min.js for backwards compatibility

This precompiled file maintains compatibility for non-bundler users
alphagov · May 31, 2023 · c3429f0 · c3429f0
1 parent a8a6ad6
commit c3429f0
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 6 deletions.
diff --git a/docs/contributing/tasks.md b/docs/contributing/tasks.md
@@ -41,6 +41,7 @@ npm scripts are defined in `package.json`. These trigger a number of Gulp tasks.
 - 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) bundle
 - runs `npm run postbuild:package` (which will test the output is correct)
 
 **`npm run build:release` will do the following:**

diff --git a/packages/govuk-frontend/README.md b/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 `bundle.min.js` from `node_modules/govuk-frontend/dist/govuk/` into your application or referencing the file directly:
 
 ```html
-<script src="<path-to-govuk-frontend-all-file>/all.js"></script>
+<script src="<path-to-govuk-frontend-bundle>/bundle.min.js"></script>
 ```
 
 Next you need to initialise the script by adding:

diff --git a/packages/govuk-frontend/src/govuk-prototype-kit/govuk-prototype-kit.config.mjs b/packages/govuk-frontend/src/govuk-prototype-kit/govuk-prototype-kit.config.mjs
@@ -26,13 +26,13 @@ export default async () => {
   return {
     assets: [
       '/dist/govuk/assets',
-      '/dist/govuk/all.js.map'
+      '/dist/govuk/bundle.min.js.map'
     ],
     sass: [
       '/dist/govuk-prototype-kit/init.scss'
     ],
     scripts: [
-      '/dist/govuk/all.js',
+      '/dist/govuk/bundle.min.js',
       '/dist/govuk-prototype-kit/init.js'
     ],
     nunjucksMacros,

diff --git a/packages/govuk-frontend/src/govuk-prototype-kit/govuk-prototype-kit.config.unit.test.mjs b/packages/govuk-frontend/src/govuk-prototype-kit/govuk-prototype-kit.config.unit.test.mjs
@@ -11,15 +11,15 @@ describe('GOV.UK Prototype Kit config', () => {
   it('includes paths for assets, scripts, sass', () => {
     expect(config.assets).toEqual([
       '/dist/govuk/assets',
-      '/dist/govuk/all.js.map'
+      '/dist/govuk/bundle.min.js.map'
     ])
 
     expect(config.sass).toEqual([
       '/dist/govuk-prototype-kit/init.scss'
     ])
 
     expect(config.scripts).toEqual([
-      '/dist/govuk/all.js',
+      '/dist/govuk/bundle.min.js',
       '/dist/govuk-prototype-kit/init.js'
     ])
   })

diff --git a/packages/govuk-frontend/tasks/build/package.test.mjs b/packages/govuk-frontend/tasks/build/package.test.mjs
@@ -61,6 +61,15 @@ describe('packages/govuk-frontend/dist/', () => {
         join(requirePath, `${name}.mjs.map`) // with source map
       ]))
 
+      // Only source `./govuk/all.mjs` compiled to UMD bundle
+      .flatMap(mapPathTo(['**/govuk/all.mjs'], ({ dir: requirePath, name }) => [
+        join(requirePath, `${name}.mjs`),
+
+        // UMD bundle (minified) for compatibility
+        join(requirePath, 'bundle.min.js'),
+        join(requirePath, 'bundle.min.js.map') // with source map
+      ]))
+
       // Add Autoprefixer prefixes to all source '*.scss' files
       .flatMap(mapPathTo(['**/*.scss'], ({ dir: requirePath, name }) => [
         join(requirePath, `${name}.scss`),
@@ -135,6 +144,15 @@ describe('packages/govuk-frontend/dist/', () => {
     })
   })
 
+  describe('bundle.min.js', () => {
+    it("should export 'GOVUKFrontend' AMD module definition", async () => {
+      const contents = await readFile(join(paths.package, 'dist/govuk/bundle.min.js'), 'utf8')
+
+      // Look for AMD module definition for 'GOVUKFrontend' (minified)
+      expect(contents).toContain('typeof define&&define.amd?define("GOVUKFrontend",["exports"],e)')
+    })
+  })
+
   describe('common/govuk-frontend-version.mjs', () => {
     it('should have correct version number', async () => {
       const contents = await readFile(join(paths.package, 'dist/govuk/common/govuk-frontend-version.mjs'), 'utf8')

diff --git a/packages/govuk-frontend/tasks/scripts.mjs b/packages/govuk-frontend/tasks/scripts.mjs
@@ -22,6 +22,24 @@ export const compile = (options) => gulp.series(
     })
   ),
 
+  /**
+   * Compile GOV.UK Frontend JavaScript (UMD bundle, minified)
+   */
+  task.name("compile:js 'bundle'", () =>
+    scripts.compile('all.mjs', {
+      ...options,
+
+      srcPath: join(options.srcPath, 'govuk'),
+      destPath: join(options.destPath, 'govuk'),
+      configPath: join(options.basePath, 'rollup.release.config.mjs'),
+
+      // Rename to `bundle.*` based on module format
+      filePath ({ dir, ext }) {
+        return join(dir, `bundle.min${ext}`)
+      }
+    })
+  ),
+
   /**
    * Compile GOV.UK Prototype Kit config
    */