Use named exports for component classes

We prefer named exports over default exports to avoid compatibility issues with transpiler "synthetic default" as discussed in: #2829 See our [coding standards for JavaScript](/docs/contributing/coding-standards/js.md)
alphagov · Jun 12, 2023 · b94e812 · b94e812
1 parent d9d6f32
commit b94e812
Show file tree

Hide file tree

Showing 14 changed files with 25 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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