diff --git a/docs/contributing/tasks.md b/docs/contributing/tasks.md index 283f1cf7ad..f9f5f610c8 100644 --- 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 index eb7969daa1..c55596940f 100644 --- 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 - + ``` 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 index ffdf25d3a9..57d864a34f 100644 --- 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 index 740bf40133..948875b165 100644 --- 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,7 +11,7 @@ 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([ @@ -19,7 +19,7 @@ describe('GOV.UK Prototype Kit config', () => { ]) 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 index 165239c629..4609738be9 100644 --- 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 index 783ddb67c4..5071c85eae 100644 --- 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 */