From b94e8127dfcb8f3363092ecbd9d995d89eb12314 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Thu, 8 Jun 2023 17:05:59 +0100 Subject: [PATCH] Use named exports for component classes We prefer named exports over default exports to avoid compatibility issues with transpiler "synthetic default" as discussed in: https://github.com/alphagov/govuk-frontend/issues/2829 See our [coding standards for JavaScript](/docs/contributing/coding-standards/js.md) --- packages/govuk-frontend/src/govuk/all.mjs | 22 +++++++++---------- .../govuk/components/accordion/accordion.mjs | 2 +- .../src/govuk/components/button/button.mjs | 2 +- .../character-count/character-count.mjs | 2 +- .../character-count.unit.test.mjs | 2 +- .../components/checkboxes/checkboxes.mjs | 2 +- .../src/govuk/components/details/details.mjs | 2 +- .../error-summary/error-summary.mjs | 2 +- .../src/govuk/components/header/header.mjs | 2 +- .../notification-banner.mjs | 2 +- .../src/govuk/components/radios/radios.mjs | 2 +- .../govuk/components/skip-link/skip-link.mjs | 2 +- .../src/govuk/components/tabs/tabs.mjs | 2 +- .../tasks/build/package.test.mjs | 4 ++-- 14 files changed, 25 insertions(+), 25 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/all.mjs b/packages/govuk-frontend/src/govuk/all.mjs index 0f970ede50..ba613c4de1 100644 --- a/packages/govuk-frontend/src/govuk/all.mjs +++ b/packages/govuk-frontend/src/govuk/all.mjs @@ -1,15 +1,15 @@ import { version } from './common/govuk-frontend-version.mjs' -import Accordion from './components/accordion/accordion.mjs' -import Button from './components/button/button.mjs' -import CharacterCount from './components/character-count/character-count.mjs' -import Checkboxes from './components/checkboxes/checkboxes.mjs' -import Details from './components/details/details.mjs' -import ErrorSummary from './components/error-summary/error-summary.mjs' -import Header from './components/header/header.mjs' -import NotificationBanner from './components/notification-banner/notification-banner.mjs' -import Radios from './components/radios/radios.mjs' -import SkipLink from './components/skip-link/skip-link.mjs' -import Tabs from './components/tabs/tabs.mjs' +import { Accordion } from './components/accordion/accordion.mjs' +import { Button } from './components/button/button.mjs' +import { CharacterCount } from './components/character-count/character-count.mjs' +import { Checkboxes } from './components/checkboxes/checkboxes.mjs' +import { Details } from './components/details/details.mjs' +import { ErrorSummary } from './components/error-summary/error-summary.mjs' +import { Header } from './components/header/header.mjs' +import { NotificationBanner } from './components/notification-banner/notification-banner.mjs' +import { Radios } from './components/radios/radios.mjs' +import { SkipLink } from './components/skip-link/skip-link.mjs' +import { Tabs } from './components/tabs/tabs.mjs' /** * Initialise all components diff --git a/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs b/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs index 92ecb06d77..c7f5aa223a 100644 --- a/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs +++ b/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs @@ -31,7 +31,7 @@ const ACCORDION_TRANSLATIONS = { * The state of each section is saved to the DOM via the `aria-expanded` * attribute, which also provides accessibility. */ -export default class Accordion { +export class Accordion { /** * @param {Element} $module - HTML element to use for accordion * @param {AccordionConfig} [config] - Accordion config diff --git a/packages/govuk-frontend/src/govuk/components/button/button.mjs b/packages/govuk-frontend/src/govuk/components/button/button.mjs index 7921e6c4d8..349b73c0d5 100644 --- a/packages/govuk-frontend/src/govuk/components/button/button.mjs +++ b/packages/govuk-frontend/src/govuk/components/button/button.mjs @@ -7,7 +7,7 @@ const DEBOUNCE_TIMEOUT_IN_SECONDS = 1 /** * JavaScript enhancements for the Button component */ -export default class Button { +export class Button { /** * * @param {Element} $module - HTML element to use for button diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs b/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs index 646b05e0a7..523d273246 100644 --- a/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs +++ b/packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs @@ -47,7 +47,7 @@ const CHARACTER_COUNT_TRANSLATIONS = { * You can configure the message to only appear after a certain percentage * of the available characters/words has been entered. */ -export default class CharacterCount { +export class CharacterCount { /** * @param {Element} $module - HTML element to use for character count * @param {CharacterCountConfig} [config] - Character count config diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.unit.test.mjs b/packages/govuk-frontend/src/govuk/components/character-count/character-count.unit.test.mjs index 5b75f2ab04..d2ca4f2972 100644 --- a/packages/govuk-frontend/src/govuk/components/character-count/character-count.unit.test.mjs +++ b/packages/govuk-frontend/src/govuk/components/character-count/character-count.unit.test.mjs @@ -1,4 +1,4 @@ -import CharacterCount from './character-count.mjs' +import { CharacterCount } from './character-count.mjs' describe('CharacterCount', () => { let $container diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs index edd3fb02a3..aa2dfb3415 100644 --- a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs +++ b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs @@ -1,7 +1,7 @@ /** * Checkboxes component */ -export default class Checkboxes { +export class Checkboxes { /** * @param {Element} $module - HTML element to use for checkboxes */ diff --git a/packages/govuk-frontend/src/govuk/components/details/details.mjs b/packages/govuk-frontend/src/govuk/components/details/details.mjs index c3474f33d2..fd5d02e3f0 100644 --- a/packages/govuk-frontend/src/govuk/components/details/details.mjs +++ b/packages/govuk-frontend/src/govuk/components/details/details.mjs @@ -12,7 +12,7 @@ const KEY_SPACE = 32 /** * Details component */ -export default class Details { +export class Details { /** * * @param {Element} $module - HTML element to use for details diff --git a/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs b/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs index 514c185827..9e240a8a68 100644 --- a/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs +++ b/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs @@ -6,7 +6,7 @@ import { normaliseDataset } from '../../common/normalise-dataset.mjs' * * Takes focus on initialisation for accessible announcement, unless disabled in configuration. */ -export default class ErrorSummary { +export class ErrorSummary { /** * * @param {Element} $module - HTML element to use for error summary diff --git a/packages/govuk-frontend/src/govuk/components/header/header.mjs b/packages/govuk-frontend/src/govuk/components/header/header.mjs index f98f053a18..a37aa566cb 100644 --- a/packages/govuk-frontend/src/govuk/components/header/header.mjs +++ b/packages/govuk-frontend/src/govuk/components/header/header.mjs @@ -1,7 +1,7 @@ /** * Header component */ -export default class Header { +export class Header { /** * @param {Element} $module - HTML element to use for header */ diff --git a/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs b/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs index b2e13fb48e..200d61b168 100644 --- a/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs +++ b/packages/govuk-frontend/src/govuk/components/notification-banner/notification-banner.mjs @@ -4,7 +4,7 @@ import { normaliseDataset } from '../../common/normalise-dataset.mjs' /** * Notification Banner component */ -export default class NotificationBanner { +export class NotificationBanner { /** * @param {Element} $module - HTML element to use for notification banner * @param {NotificationBannerConfig} [config] - Notification banner config diff --git a/packages/govuk-frontend/src/govuk/components/radios/radios.mjs b/packages/govuk-frontend/src/govuk/components/radios/radios.mjs index 5af65a73ee..e8b183d396 100644 --- a/packages/govuk-frontend/src/govuk/components/radios/radios.mjs +++ b/packages/govuk-frontend/src/govuk/components/radios/radios.mjs @@ -1,7 +1,7 @@ /** * Radios component */ -export default class Radios { +export class Radios { /** * @param {Element} $module - HTML element to use for radios */ diff --git a/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.mjs b/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.mjs index b7ee12aa8e..a26174a0f9 100644 --- a/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.mjs +++ b/packages/govuk-frontend/src/govuk/components/skip-link/skip-link.mjs @@ -1,7 +1,7 @@ /** * Skip link component */ -export default class SkipLink { +export class SkipLink { /** * * @param {Element} $module - HTML element to use for skip link diff --git a/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs b/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs index e21918efbd..ae458628b2 100644 --- a/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs +++ b/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs @@ -1,7 +1,7 @@ /** * Tabs component */ -export default class Tabs { +export class Tabs { /** * @param {Element} $module - HTML element to use for tabs */ diff --git a/packages/govuk-frontend/tasks/build/package.test.mjs b/packages/govuk-frontend/tasks/build/package.test.mjs index 4a1cf0ffab..252aed1bdc 100644 --- a/packages/govuk-frontend/tasks/build/package.test.mjs +++ b/packages/govuk-frontend/tasks/build/package.test.mjs @@ -225,8 +225,8 @@ describe('packages/govuk-frontend/dist/', () => { 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') - expect(moduleText).toContain(`typeof define === 'function' && define.amd ? define('${moduleName}', factory)`) - expect(moduleTextESM).toContain(`export { ${componentNameToClassName(componentName)} as default }`) + expect(moduleText).toContain(`typeof define === 'function' && define.amd ? define('${moduleName}', ['exports'], factory)`) + expect(moduleTextESM).toContain(`export { ${componentNameToClassName(componentName)} }`) }) // Check all component files