Remove `GOVUKFrontend` prefix from `GOVUKFrontendComponent` and `GOVUKFrontendComponentConfigurable` #5515

patrickpatrickpatrick · 2024-11-18T14:59:03Z

What

Remove GOVUKFrontend prefix from Component
Update components to import Component
Remove GOVUKFrontend from ConfigurableComponent

Why

github-actions · 2024-11-18T15:00:35Z

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	118.41 KiB
dist/govuk-frontend-development.min.js	42.64 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	92.76 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	87.11 KiB
packages/govuk-frontend/dist/govuk/all.mjs	1.14 KiB
packages/govuk-frontend/dist/govuk/component.mjs	1.67 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	125 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	118.4 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	42.63 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs	7.13 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	82.62 KiB	40.37 KiB
accordion.mjs	26.56 KiB	13.41 KiB
button.mjs	9.08 KiB	3.78 KiB
character-count.mjs	25.38 KiB	10.9 KiB
checkboxes.mjs	7.76 KiB	3.42 KiB
error-summary.mjs	10.97 KiB	4.54 KiB
exit-this-page.mjs	20.19 KiB	10.34 KiB
header.mjs	6.41 KiB	3.22 KiB
notification-banner.mjs	9.33 KiB	3.7 KiB
password-input.mjs	18.23 KiB	8.33 KiB
radios.mjs	6.76 KiB	2.98 KiB
service-navigation.mjs	6.39 KiB	3.26 KiB
skip-link.mjs	6.34 KiB	2.76 KiB
tabs.mjs	11.99 KiB	6.67 KiB

View stats and visualisations on the review app

Action run for 9f13658

github-actions · 2024-11-18T15:01:18Z

JavaScript changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
index f69163a5d..36c4c24d1 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
@@ -78,7 +78,7 @@ class InitError extends GOVUKFrontendError {
         super("string" == typeof t ? t : formatErrorMessage(t, "Root element (`$root`) already initialised")), this.name = "InitError"
     }
 }
-class GOVUKFrontendComponent {
+class Component {
     get $root() {
         return this._$root
     }
@@ -107,9 +107,9 @@ class GOVUKFrontendComponent {
         if (!isSupported()) throw new SupportError
     }
 }
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 const t = Symbol.for("configOverride");
-class GOVUKFrontendComponentConfigurable extends GOVUKFrontendComponent {
+class GOVUKFrontendComponentConfigurable extends Component {
     [t](t) {
         return {}
     }
@@ -580,7 +580,7 @@ CharacterCount.moduleName = "govuk-character-count", CharacterCount.defaults = O
         errorMessage: 'Either "maxlength" or "maxwords" must be provided'
     }]
 });
-class Checkboxes extends GOVUKFrontendComponent {
+class Checkboxes extends Component {
     constructor(t) {
         super(t), this.$inputs = void 0;
         const e = this.$root.querySelectorAll('input[type="checkbox"]');
@@ -748,7 +748,7 @@ ExitThisPage.moduleName = "govuk-exit-this-page", ExitThisPage.defaults = Object
         }
     }
 });
-class Header extends GOVUKFrontendComponent {
+class Header extends Component {
     constructor(t) {
         super(t), this.$menuButton = void 0, this.$menu = void 0, this.menuIsOpen = !1, this.mql = null;
         const e = this.$root.querySelector(".govuk-js-header-toggle");
@@ -857,7 +857,7 @@ PasswordInput.moduleName = "govuk-password-input", PasswordInput.defaults = Obje
         }
     }
 });
-class Radios extends GOVUKFrontendComponent {
+class Radios extends Component {
     constructor(t) {
         super(t), this.$inputs = void 0;
         const e = this.$root.querySelectorAll('input[type="radio"]');
@@ -901,7 +901,7 @@ class Radios extends GOVUKFrontendComponent {
     }
 }
 Radios.moduleName = "govuk-radios";
-class ServiceNavigation extends GOVUKFrontendComponent {
+class ServiceNavigation extends Component {
     constructor(t) {
         super(t), this.$menuButton = void 0, this.$menu = void 0, this.menuIsOpen = !1, this.mql = null;
         const e = this.$root.querySelector(".govuk-js-service-navigation-toggle");
@@ -935,7 +935,7 @@ class ServiceNavigation extends GOVUKFrontendComponent {
     }
 }
 ServiceNavigation.moduleName = "govuk-service-navigation";
-class SkipLink extends GOVUKFrontendComponent {
+class SkipLink extends Component {
     constructor(t) {
         var e;
         super(t);
@@ -967,7 +967,7 @@ class SkipLink extends GOVUKFrontendComponent {
     }
 }
 SkipLink.elementType = HTMLAnchorElement, SkipLink.moduleName = "govuk-skip-link";
-class Tabs extends GOVUKFrontendComponent {
+class Tabs extends Component {
     constructor(t) {
         super(t), this.$tabs = void 0, this.$tabList = void 0, this.$tabListItems = void 0, this.jsHiddenClass = "govuk-tabs__panel--hidden", this.changingHash = !1, this.boundTabClick = void 0, this.boundTabKeydown = void 0, this.boundOnHashChange = void 0, this.mql = null;
         const e = this.$root.querySelectorAll("a.govuk-tabs__tab");
@@ -1163,7 +1163,7 @@ export {
     Button,
     CharacterCount,
     Checkboxes,
-    GOVUKFrontendComponent as Component,
+    Component,
     ErrorSummary,
     ExitThisPage,
     Header,

Action run for 9f13658

github-actions · 2024-11-18T15:01:19Z

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/all.bundle.js b/packages/govuk-frontend/dist/govuk/all.bundle.js
index ab5747462..bfd5ddba7 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.js
@@ -130,7 +130,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -181,12 +181,12 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   const configOverride = Symbol.for('configOverride');
-  class GOVUKFrontendComponentConfigurable extends GOVUKFrontendComponent {
+  class GOVUKFrontendComponentConfigurable extends Component {
     [configOverride](param) {
       return {};
     }
@@ -340,7 +340,7 @@
    */
   /**
    * @template {ObjectNested} [ConfigurationType={}]
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+   * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
    */
 
   class I18n {
@@ -1240,7 +1240,7 @@
    *
    * @preserve
    */
-  class Checkboxes extends GOVUKFrontendComponent {
+  class Checkboxes extends Component {
     /**
      * Checkboxes can be associated with a 'conditionally revealed' content block
      * – for example, a checkbox for 'Phone' could reveal an additional form field
@@ -1659,7 +1659,7 @@
    *
    * @preserve
    */
-  class Header extends GOVUKFrontendComponent {
+  class Header extends Component {
     /**
      * Apply a matchMedia for desktop which will trigger a state sync if the
      * browser viewport moves between states.
@@ -1929,7 +1929,7 @@
    *
    * @preserve
    */
-  class Radios extends GOVUKFrontendComponent {
+  class Radios extends Component {
     /**
      * Radios can be associated with a 'conditionally revealed' content block –
      * for example, a radio for 'Phone' could reveal an additional form field for
@@ -2012,7 +2012,7 @@
    *
    * @preserve
    */
-  class ServiceNavigation extends GOVUKFrontendComponent {
+  class ServiceNavigation extends Component {
     /**
      * @param {Element | null} $root - HTML element to use for header
      */
@@ -2090,9 +2090,9 @@
    * Skip link component
    *
    * @preserve
-   * @augments GOVUKFrontendComponent<HTMLAnchorElement>
+   * @augments Component<HTMLAnchorElement>
    */
-  class SkipLink extends GOVUKFrontendComponent {
+  class SkipLink extends Component {
     /**
      * @param {Element | null} $root - HTML element to use for skip link
      * @throws {ElementError} when $root is not set or the wrong type
@@ -2143,7 +2143,7 @@
    *
    * @preserve
    */
-  class Tabs extends GOVUKFrontendComponent {
+  class Tabs extends Component {
     /**
      * @param {Element | null} $root - HTML element to use for tabs
      */
@@ -2567,7 +2567,7 @@
   exports.Button = Button;
   exports.CharacterCount = CharacterCount;
   exports.Checkboxes = Checkboxes;
-  exports.Component = GOVUKFrontendComponent;
+  exports.Component = Component;
   exports.ErrorSummary = ErrorSummary;
   exports.ExitThisPage = ExitThisPage;
   exports.Header = Header;
diff --git a/packages/govuk-frontend/dist/govuk/all.bundle.mjs b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
index 654758d17..7aa56fc1d 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
@@ -124,7 +124,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -175,12 +175,12 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 const configOverride = Symbol.for('configOverride');
-class GOVUKFrontendComponentConfigurable extends GOVUKFrontendComponent {
+class GOVUKFrontendComponentConfigurable extends Component {
   [configOverride](param) {
     return {};
   }
@@ -334,7 +334,7 @@ function extractConfigByNamespace(schema, dataset, namespace) {
  */
 /**
  * @template {ObjectNested} [ConfigurationType={}]
- * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+ * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
  */
 
 class I18n {
@@ -1234,7 +1234,7 @@ CharacterCount.schema = Object.freeze({
  *
  * @preserve
  */
-class Checkboxes extends GOVUKFrontendComponent {
+class Checkboxes extends Component {
   /**
    * Checkboxes can be associated with a 'conditionally revealed' content block
    * – for example, a checkbox for 'Phone' could reveal an additional form field
@@ -1653,7 +1653,7 @@ ExitThisPage.schema = Object.freeze({
  *
  * @preserve
  */
-class Header extends GOVUKFrontendComponent {
+class Header extends Component {
   /**
    * Apply a matchMedia for desktop which will trigger a state sync if the
    * browser viewport moves between states.
@@ -1923,7 +1923,7 @@ PasswordInput.schema = Object.freeze({
  *
  * @preserve
  */
-class Radios extends GOVUKFrontendComponent {
+class Radios extends Component {
   /**
    * Radios can be associated with a 'conditionally revealed' content block –
    * for example, a radio for 'Phone' could reveal an additional form field for
@@ -2006,7 +2006,7 @@ Radios.moduleName = 'govuk-radios';
  *
  * @preserve
  */
-class ServiceNavigation extends GOVUKFrontendComponent {
+class ServiceNavigation extends Component {
   /**
    * @param {Element | null} $root - HTML element to use for header
    */
@@ -2084,9 +2084,9 @@ ServiceNavigation.moduleName = 'govuk-service-navigation';
  * Skip link component
  *
  * @preserve
- * @augments GOVUKFrontendComponent<HTMLAnchorElement>
+ * @augments Component<HTMLAnchorElement>
  */
-class SkipLink extends GOVUKFrontendComponent {
+class SkipLink extends Component {
   /**
    * @param {Element | null} $root - HTML element to use for skip link
    * @throws {ElementError} when $root is not set or the wrong type
@@ -2137,7 +2137,7 @@ SkipLink.moduleName = 'govuk-skip-link';
  *
  * @preserve
  */
-class Tabs extends GOVUKFrontendComponent {
+class Tabs extends Component {
   /**
    * @param {Element | null} $root - HTML element to use for tabs
    */
@@ -2557,5 +2557,5 @@ function createAll(Component, config, createAllOptions) {
  * @property {OnErrorCallback<ComponentClass>} [onError] - callback function if error throw by component on init
  */
 
-export { Accordion, Button, CharacterCount, Checkboxes, GOVUKFrontendComponent as Component, ErrorSummary, ExitThisPage, Header, NotificationBanner, PasswordInput, Radios, ServiceNavigation, SkipLink, Tabs, createAll, initAll, isSupported, version };
+export { Accordion, Button, CharacterCount, Checkboxes, Component, ErrorSummary, ExitThisPage, Header, NotificationBanner, PasswordInput, Radios, ServiceNavigation, SkipLink, Tabs, createAll, initAll, isSupported, version };
 //# sourceMappingURL=all.bundle.mjs.map
diff --git a/packages/govuk-frontend/dist/govuk/all.mjs b/packages/govuk-frontend/dist/govuk/all.mjs
index 1d37a44bd..cdb2e44f5 100644
--- a/packages/govuk-frontend/dist/govuk/all.mjs
+++ b/packages/govuk-frontend/dist/govuk/all.mjs
@@ -14,5 +14,5 @@ export { SkipLink } from './components/skip-link/skip-link.mjs';
 export { Tabs } from './components/tabs/tabs.mjs';
 export { createAll, initAll } from './init.mjs';
 export { isSupported } from './common/index.mjs';
-export { GOVUKFrontendComponent as Component } from './govuk-frontend-component.mjs';
+export { Component } from './component.mjs';
 //# sourceMappingURL=all.mjs.map
diff --git a/packages/govuk-frontend/dist/govuk/common/configuration.mjs b/packages/govuk-frontend/dist/govuk/common/configuration.mjs
index b7ad735b3..b259b8f50 100644
--- a/packages/govuk-frontend/dist/govuk/common/configuration.mjs
+++ b/packages/govuk-frontend/dist/govuk/common/configuration.mjs
@@ -1,9 +1,9 @@
+import { Component } from '../component.mjs';
 import { ConfigError } from '../errors/index.mjs';
-import { GOVUKFrontendComponent } from '../govuk-frontend-component.mjs';
 import { formatErrorMessage, isObject } from './index.mjs';
 
 const configOverride = Symbol.for('configOverride');
-class GOVUKFrontendComponentConfigurable extends GOVUKFrontendComponent {
+class GOVUKFrontendComponentConfigurable extends Component {
   [configOverride](param) {
     return {};
   }
@@ -157,7 +157,7 @@ function extractConfigByNamespace(schema, dataset, namespace) {
  */
 /**
  * @template {ObjectNested} [ConfigurationType={}]
- * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+ * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
  */
 
 export { GOVUKFrontendComponentConfigurable, configOverride, extractConfigByNamespace, mergeConfigs, normaliseDataset, normaliseString, validateConfig };
diff --git a/packages/govuk-frontend/dist/govuk/component.mjs b/packages/govuk-frontend/dist/govuk/component.mjs
new file mode 100644
index 000000000..842456993
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/component.mjs
@@ -0,0 +1,60 @@
+import { isInitialised, isSupported } from './common/index.mjs';
+import { InitError, ElementError, SupportError } from './errors/index.mjs';
+
+class Component {
+  /**
+   * Returns the root element of the component
+   *
+   * @protected
+   * @returns {RootElementType} - the root element of component
+   */
+  get $root() {
+    return this._$root;
+  }
+  constructor($root) {
+    this._$root = void 0;
+    const childConstructor = this.constructor;
+    if (typeof childConstructor.moduleName !== 'string') {
+      throw new InitError(`\`moduleName\` not defined in component`);
+    }
+    if (!($root instanceof childConstructor.elementType)) {
+      throw new ElementError({
+        element: $root,
+        component: childConstructor,
+        identifier: 'Root element (`$root`)',
+        expectedType: childConstructor.elementType.name
+      });
+    } else {
+      this._$root = $root;
+    }
+    childConstructor.checkSupport();
+    this.checkInitialised();
+    const moduleName = childConstructor.moduleName;
+    this.$root.setAttribute(`data-${moduleName}-init`, '');
+  }
+  checkInitialised() {
+    const constructor = this.constructor;
+    const moduleName = constructor.moduleName;
+    if (moduleName && isInitialised(this.$root, moduleName)) {
+      throw new InitError(constructor);
+    }
+  }
+  static checkSupport() {
+    if (!isSupported()) {
+      throw new SupportError();
+    }
+  }
+}
+
+/**
+ * @typedef ChildClass
+ * @property {string} moduleName - The module name that'll be looked for in the DOM when initialising the component
+ */
+
+/**
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
+ */
+Component.elementType = HTMLElement;
+
+export { Component };
+//# sourceMappingURL=component.mjs.map
diff --git a/packages/govuk-frontend/dist/govuk/components/accordion/accordion.bundle.js b/packages/govuk-frontend/dist/govuk/components/accordion/accordion.bundle.js
index 949910dc2..f42bb2743 100644
--- a/packages/govuk-frontend/dist/govuk/components/accordion/accordion.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/accordion/accordion.bundle.js
@@ -90,7 +90,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -141,12 +141,12 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   const configOverride = Symbol.for('configOverride');
-  class GOVUKFrontendComponentConfigurable extends GOVUKFrontendComponent {
+  class GOVUKFrontendComponentConfigurable extends Component {
     [configOverride](param) {
       return {};
     }
@@ -280,7 +280,7 @@
    */
   /**
    * @template {ObjectNested} [ConfigurationType={}]
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+   * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
    */
 
   class I18n {
diff --git a/packages/govuk-frontend/dist/govuk/components/accordion/accordion.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/accordion/accordion.bundle.mjs
index 521b35c78..ab2f43aee 100644
--- a/packages/govuk-frontend/dist/govuk/components/accordion/accordion.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/accordion/accordion.bundle.mjs
@@ -84,7 +84,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -135,12 +135,12 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 const configOverride = Symbol.for('configOverride');
-class GOVUKFrontendComponentConfigurable extends GOVUKFrontendComponent {
+class GOVUKFrontendComponentConfigurable extends Component {
   [configOverride](param) {
     return {};
   }
@@ -274,7 +274,7 @@ function extractConfigByNamespace(schema, dataset, namespace) {
  */
 /**
  * @template {ObjectNested} [ConfigurationType={}]
- * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+ * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
  */
 
 class I18n {
diff --git a/packages/govuk-frontend/dist/govuk/components/button/button.bundle.js b/packages/govuk-frontend/dist/govuk/components/button/button.bundle.js
index 54849012d..4b7a6471f 100644
--- a/packages/govuk-frontend/dist/govuk/components/button/button.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/button/button.bundle.js
@@ -90,7 +90,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -141,12 +141,12 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   const configOverride = Symbol.for('configOverride');
-  class GOVUKFrontendComponentConfigurable extends GOVUKFrontendComponent {
+  class GOVUKFrontendComponentConfigurable extends Component {
     [configOverride](param) {
       return {};
     }
@@ -280,7 +280,7 @@
    */
   /**
    * @template {ObjectNested} [ConfigurationType={}]
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+   * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
    */
 
   const DEBOUNCE_TIMEOUT_IN_SECONDS = 1;
diff --git a/packages/govuk-frontend/dist/govuk/components/button/button.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/button/button.bundle.mjs
index b5ff0c905..96d88f8fa 100644
--- a/packages/govuk-frontend/dist/govuk/components/button/button.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/button/button.bundle.mjs
@@ -84,7 +84,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -135,12 +135,12 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 const configOverride = Symbol.for('configOverride');
-class GOVUKFrontendComponentConfigurable extends GOVUKFrontendComponent {
+class GOVUKFrontendComponentConfigurable extends Component {
   [configOverride](param) {
     return {};
   }
@@ -274,7 +274,7 @@ function extractConfigByNamespace(schema, dataset, namespace) {
  */
 /**
  * @template {ObjectNested} [ConfigurationType={}]
- * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+ * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
  */
 
 const DEBOUNCE_TIMEOUT_IN_SECONDS = 1;
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.js b/packages/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.js
index cc24a93af..bd61f72d8 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.js
@@ -95,7 +95,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -146,12 +146,12 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   const configOverride = Symbol.for('configOverride');
-  class GOVUKFrontendComponentConfigurable extends GOVUKFrontendComponent {
+  class GOVUKFrontendComponentConfigurable extends Component {
     [configOverride](param) {
       return {};
     }
@@ -305,7 +305,7 @@
    */
   /**
    * @template {ObjectNested} [ConfigurationType={}]
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+   * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
    */
 
   class I18n {
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.mjs
index 030682a94..d2e2cd104 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.mjs
@@ -89,7 +89,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -140,12 +140,12 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 const configOverride = Symbol.for('configOverride');
-class GOVUKFrontendComponentConfigurable extends GOVUKFrontendComponent {
+class GOVUKFrontendComponentConfigurable extends Component {
   [configOverride](param) {
     return {};
   }
@@ -299,7 +299,7 @@ function extractConfigByNamespace(schema, dataset, namespace) {
  */
 /**
  * @template {ObjectNested} [ConfigurationType={}]
- * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+ * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
  */
 
 class I18n {
diff --git a/packages/govuk-frontend/dist/govuk/components/checkboxes/checkboxes.bundle.js b/packages/govuk-frontend/dist/govuk/components/checkboxes/checkboxes.bundle.js
index 04c9b69e9..8c2f6694b 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/checkboxes.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/checkboxes/checkboxes.bundle.js
@@ -78,7 +78,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -129,16 +129,16 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   /**
    * Checkboxes component
    *
    * @preserve
    */
-  class Checkboxes extends GOVUKFrontendComponent {
+  class Checkboxes extends Component {
     /**
      * Checkboxes can be associated with a 'conditionally revealed' content block
      * – for example, a checkbox for 'Phone' could reveal an additional form field
diff --git a/packages/govuk-frontend/dist/govuk/components/checkboxes/checkboxes.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/checkboxes/checkboxes.bundle.mjs
index 934dab1b1..d5caf2cb2 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/checkboxes.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/checkboxes/checkboxes.bundle.mjs
@@ -72,7 +72,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -123,16 +123,16 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 /**
  * Checkboxes component
  *
  * @preserve
  */
-class Checkboxes extends GOVUKFrontendComponent {
+class Checkboxes extends Component {
   /**
    * Checkboxes can be associated with a 'conditionally revealed' content block
    * – for example, a checkbox for 'Phone' could reveal an additional form field
diff --git a/packages/govuk-frontend/dist/govuk/components/checkboxes/checkboxes.mjs b/packages/govuk-frontend/dist/govuk/components/checkboxes/checkboxes.mjs
index 455c9c70c..9d62377e8 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/checkboxes.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/checkboxes/checkboxes.mjs
@@ -1,12 +1,12 @@
+import { Component } from '../../component.mjs';
 import { ElementError } from '../../errors/index.mjs';
-import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs';
 
 /**
  * Checkboxes component
  *
  * @preserve
  */
-class Checkboxes extends GOVUKFrontendComponent {
+class Checkboxes extends Component {
   /**
    * Checkboxes can be associated with a 'conditionally revealed' content block
    * – for example, a checkbox for 'Phone' could reveal an additional form field
diff --git a/packages/govuk-frontend/dist/govuk/components/error-summary/error-summary.bundle.js b/packages/govuk-frontend/dist/govuk/components/error-summary/error-summary.bundle.js
index 0280ff8f5..e54d676fc 100644
--- a/packages/govuk-frontend/dist/govuk/components/error-summary/error-summary.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/error-summary/error-summary.bundle.js
@@ -120,7 +120,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -171,12 +171,12 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   const configOverride = Symbol.for('configOverride');
-  class GOVUKFrontendComponentConfigurable extends GOVUKFrontendComponent {
+  class GOVUKFrontendComponentConfigurable extends Component {
     [configOverride](param) {
       return {};
     }
@@ -310,7 +310,7 @@
    */
   /**
    * @template {ObjectNested} [ConfigurationType={}]
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+   * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
    */
 
   /**
diff --git a/packages/govuk-frontend/dist/govuk/components/error-summary/error-summary.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/error-summary/error-summary.bundle.mjs
index d7f644f4e..2194d7d72 100644
--- a/packages/govuk-frontend/dist/govuk/components/error-summary/error-summary.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/error-summary/error-summary.bundle.mjs
@@ -114,7 +114,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -165,12 +165,12 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 const configOverride = Symbol.for('configOverride');
-class GOVUKFrontendComponentConfigurable extends GOVUKFrontendComponent {
+class GOVUKFrontendComponentConfigurable extends Component {
   [configOverride](param) {
     return {};
   }
@@ -304,7 +304,7 @@ function extractConfigByNamespace(schema, dataset, namespace) {
  */
 /**
  * @template {ObjectNested} [ConfigurationType={}]
- * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+ * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
  */
 
 /**
diff --git a/packages/govuk-frontend/dist/govuk/components/exit-this-page/exit-this-page.bundle.js b/packages/govuk-frontend/dist/govuk/components/exit-this-page/exit-this-page.bundle.js
index a9ad88164..4ba02fb7d 100644
--- a/packages/govuk-frontend/dist/govuk/components/exit-this-page/exit-this-page.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/exit-this-page/exit-this-page.bundle.js
@@ -90,7 +90,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -141,12 +141,12 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   const configOverride = Symbol.for('configOverride');
-  class GOVUKFrontendComponentConfigurable extends GOVUKFrontendComponent {
+  class GOVUKFrontendComponentConfigurable extends Component {
     [configOverride](param) {
       return {};
     }
@@ -280,7 +280,7 @@
    */
   /**
    * @template {ObjectNested} [ConfigurationType={}]
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+   * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
    */
 
   class I18n {
diff --git a/packages/govuk-frontend/dist/govuk/components/exit-this-page/exit-this-page.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/exit-this-page/exit-this-page.bundle.mjs
index 726290eeb..7a7ace0b1 100644
--- a/packages/govuk-frontend/dist/govuk/components/exit-this-page/exit-this-page.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/exit-this-page/exit-this-page.bundle.mjs
@@ -84,7 +84,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -135,12 +135,12 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 const configOverride = Symbol.for('configOverride');
-class GOVUKFrontendComponentConfigurable extends GOVUKFrontendComponent {
+class GOVUKFrontendComponentConfigurable extends Component {
   [configOverride](param) {
     return {};
   }
@@ -274,7 +274,7 @@ function extractConfigByNamespace(schema, dataset, namespace) {
  */
 /**
  * @template {ObjectNested} [ConfigurationType={}]
- * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+ * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
  */
 
 class I18n {
diff --git a/packages/govuk-frontend/dist/govuk/components/header/header.bundle.js b/packages/govuk-frontend/dist/govuk/components/header/header.bundle.js
index 821b9563e..cc5de2d58 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/header.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/header/header.bundle.js
@@ -86,7 +86,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -137,16 +137,16 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   /**
    * Header component
    *
    * @preserve
    */
-  class Header extends GOVUKFrontendComponent {
+  class Header extends Component {
     /**
      * Apply a matchMedia for desktop which will trigger a state sync if the
      * browser viewport moves between states.
diff --git a/packages/govuk-frontend/dist/govuk/components/header/header.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/header/header.bundle.mjs
index ceb5d98de..678739ea4 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/header.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/header/header.bundle.mjs
@@ -80,7 +80,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -131,16 +131,16 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 /**
  * Header component
  *
  * @preserve
  */
-class Header extends GOVUKFrontendComponent {
+class Header extends Component {
   /**
    * Apply a matchMedia for desktop which will trigger a state sync if the
    * browser viewport moves between states.
diff --git a/packages/govuk-frontend/dist/govuk/components/header/header.mjs b/packages/govuk-frontend/dist/govuk/components/header/header.mjs
index 5b25b2f69..88991f7da 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/header.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/header/header.mjs
@@ -1,13 +1,13 @@
 import { getBreakpoint } from '../../common/index.mjs';
+import { Component } from '../../component.mjs';
 import { ElementError } from '../../errors/index.mjs';
-import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs';
 
 /**
  * Header component
  *
  * @preserve
  */
-class Header extends GOVUKFrontendComponent {
+class Header extends Component {
   /**
    * Apply a matchMedia for desktop which will trigger a state sync if the
    * browser viewport moves between states.
diff --git a/packages/govuk-frontend/dist/govuk/components/notification-banner/notification-banner.bundle.js b/packages/govuk-frontend/dist/govuk/components/notification-banner/notification-banner.bundle.js
index a64b09dd1..093e5544b 100644
--- a/packages/govuk-frontend/dist/govuk/components/notification-banner/notification-banner.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/notification-banner/notification-banner.bundle.js
@@ -114,7 +114,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -165,12 +165,12 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   const configOverride = Symbol.for('configOverride');
-  class GOVUKFrontendComponentConfigurable extends GOVUKFrontendComponent {
+  class GOVUKFrontendComponentConfigurable extends Component {
     [configOverride](param) {
       return {};
     }
@@ -304,7 +304,7 @@
    */
   /**
    * @template {ObjectNested} [ConfigurationType={}]
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+   * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
    */
 
   /**
diff --git a/packages/govuk-frontend/dist/govuk/components/notification-banner/notification-banner.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/notification-banner/notification-banner.bundle.mjs
index d81bfcc4d..dcf4e471d 100644
--- a/packages/govuk-frontend/dist/govuk/components/notification-banner/notification-banner.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/notification-banner/notification-banner.bundle.mjs
@@ -108,7 +108,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -159,12 +159,12 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 const configOverride = Symbol.for('configOverride');
-class GOVUKFrontendComponentConfigurable extends GOVUKFrontendComponent {
+class GOVUKFrontendComponentConfigurable extends Component {
   [configOverride](param) {
     return {};
   }
@@ -298,7 +298,7 @@ function extractConfigByNamespace(schema, dataset, namespace) {
  */
 /**
  * @template {ObjectNested} [ConfigurationType={}]
- * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+ * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
  */
 
 /**
diff --git a/packages/govuk-frontend/dist/govuk/components/password-input/password-input.bundle.js b/packages/govuk-frontend/dist/govuk/components/password-input/password-input.bundle.js
index ddd2862a3..f29c33d57 100644
--- a/packages/govuk-frontend/dist/govuk/components/password-input/password-input.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/password-input/password-input.bundle.js
@@ -95,7 +95,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -146,12 +146,12 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   const configOverride = Symbol.for('configOverride');
-  class GOVUKFrontendComponentConfigurable extends GOVUKFrontendComponent {
+  class GOVUKFrontendComponentConfigurable extends Component {
     [configOverride](param) {
       return {};
     }
@@ -285,7 +285,7 @@
    */
   /**
    * @template {ObjectNested} [ConfigurationType={}]
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+   * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
    */
 
   class I18n {
diff --git a/packages/govuk-frontend/dist/govuk/components/password-input/password-input.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/password-input/password-input.bundle.mjs
index 1b4d22544..0a252b46c 100644
--- a/packages/govuk-frontend/dist/govuk/components/password-input/password-input.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/password-input/password-input.bundle.mjs
@@ -89,7 +89,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -140,12 +140,12 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 const configOverride = Symbol.for('configOverride');
-class GOVUKFrontendComponentConfigurable extends GOVUKFrontendComponent {
+class GOVUKFrontendComponentConfigurable extends Component {
   [configOverride](param) {
     return {};
   }
@@ -279,7 +279,7 @@ function extractConfigByNamespace(schema, dataset, namespace) {
  */
 /**
  * @template {ObjectNested} [ConfigurationType={}]
- * @typedef {typeof GOVUKFrontendComponent & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
+ * @typedef {typeof Component & ChildClass<ConfigurationType>} ChildClassConstructor<ConfigurationType>
  */
 
 class I18n {
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/radios.bundle.js b/packages/govuk-frontend/dist/govuk/components/radios/radios.bundle.js
index 076a35f79..6e9d5409b 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/radios.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/radios/radios.bundle.js
@@ -78,7 +78,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -129,16 +129,16 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   /**
    * Radios component
    *
    * @preserve
    */
-  class Radios extends GOVUKFrontendComponent {
+  class Radios extends Component {
     /**
      * Radios can be associated with a 'conditionally revealed' content block –
      * for example, a radio for 'Phone' could reveal an additional form field for
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/radios.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/radios/radios.bundle.mjs
index ca0e06f97..01485ab31 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/radios.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/radios/radios.bundle.mjs
@@ -72,7 +72,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -123,16 +123,16 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 /**
  * Radios component
  *
  * @preserve
  */
-class Radios extends GOVUKFrontendComponent {
+class Radios extends Component {
   /**
    * Radios can be associated with a 'conditionally revealed' content block –
    * for example, a radio for 'Phone' could reveal an additional form field for
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/radios.mjs b/packages/govuk-frontend/dist/govuk/components/radios/radios.mjs
index 55f6eb727..28fe54d13 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/radios.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/radios/radios.mjs
@@ -1,12 +1,12 @@
+import { Component } from '../../component.mjs';
 import { ElementError } from '../../errors/index.mjs';
-import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs';
 
 /**
  * Radios component
  *
  * @preserve
  */
-class Radios extends GOVUKFrontendComponent {
+class Radios extends Component {
   /**
    * Radios can be associated with a 'conditionally revealed' content block –
    * for example, a radio for 'Phone' could reveal an additional form field for
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.js b/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.js
index 5a21214c3..31e2ef6ef 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.js
@@ -86,7 +86,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -137,16 +137,16 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   /**
    * Service Navigation component
    *
    * @preserve
    */
-  class ServiceNavigation extends GOVUKFrontendComponent {
+  class ServiceNavigation extends Component {
     /**
      * @param {Element | null} $root - HTML element to use for header
      */
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.mjs
index c11e20be8..531307c53 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.bundle.mjs
@@ -80,7 +80,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -131,16 +131,16 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 /**
  * Service Navigation component
  *
  * @preserve
  */
-class ServiceNavigation extends GOVUKFrontendComponent {
+class ServiceNavigation extends Component {
   /**
    * @param {Element | null} $root - HTML element to use for header
    */
diff --git a/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.mjs b/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.mjs
index 37033c8e4..675e72b8d 100644
--- a/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/service-navigation/service-navigation.mjs
@@ -1,13 +1,13 @@
 import { getBreakpoint } from '../../common/index.mjs';
+import { Component } from '../../component.mjs';
 import { ElementError } from '../../errors/index.mjs';
-import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs';
 
 /**
  * Service Navigation component
  *
  * @preserve
  */
-class ServiceNavigation extends GOVUKFrontendComponent {
+class ServiceNavigation extends Component {
   /**
    * @param {Element | null} $root - HTML element to use for header
    */
diff --git a/packages/govuk-frontend/dist/govuk/components/skip-link/skip-link.bundle.js b/packages/govuk-frontend/dist/govuk/components/skip-link/skip-link.bundle.js
index 005ea996b..01db54c17 100644
--- a/packages/govuk-frontend/dist/govuk/components/skip-link/skip-link.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/skip-link/skip-link.bundle.js
@@ -108,7 +108,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -159,17 +159,17 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   /**
    * Skip link component
    *
    * @preserve
-   * @augments GOVUKFrontendComponent<HTMLAnchorElement>
+   * @augments Component<HTMLAnchorElement>
    */
-  class SkipLink extends GOVUKFrontendComponent {
+  class SkipLink extends Component {
     /**
      * @param {Element | null} $root - HTML element to use for skip link
      * @throws {ElementError} when $root is not set or the wrong type
diff --git a/packages/govuk-frontend/dist/govuk/components/skip-link/skip-link.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/skip-link/skip-link.bundle.mjs
index 01b46e5f1..9afc51baf 100644
--- a/packages/govuk-frontend/dist/govuk/components/skip-link/skip-link.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/skip-link/skip-link.bundle.mjs
@@ -102,7 +102,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -153,17 +153,17 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 /**
  * Skip link component
  *
  * @preserve
- * @augments GOVUKFrontendComponent<HTMLAnchorElement>
+ * @augments Component<HTMLAnchorElement>
  */
-class SkipLink extends GOVUKFrontendComponent {
+class SkipLink extends Component {
   /**
    * @param {Element | null} $root - HTML element to use for skip link
    * @throws {ElementError} when $root is not set or the wrong type
diff --git a/packages/govuk-frontend/dist/govuk/components/skip-link/skip-link.mjs b/packages/govuk-frontend/dist/govuk/components/skip-link/skip-link.mjs
index fa814a73f..a158d684d 100644
--- a/packages/govuk-frontend/dist/govuk/components/skip-link/skip-link.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/skip-link/skip-link.mjs
@@ -1,14 +1,14 @@
 import { getFragmentFromUrl, setFocus } from '../../common/index.mjs';
+import { Component } from '../../component.mjs';
 import { ElementError } from '../../errors/index.mjs';
-import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs';
 
 /**
  * Skip link component
  *
  * @preserve
- * @augments GOVUKFrontendComponent<HTMLAnchorElement>
+ * @augments Component<HTMLAnchorElement>
  */
-class SkipLink extends GOVUKFrontendComponent {
+class SkipLink extends Component {
   /**
    * @param {Element | null} $root - HTML element to use for skip link
    * @throws {ElementError} when $root is not set or the wrong type
diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/tabs.bundle.js b/packages/govuk-frontend/dist/govuk/components/tabs/tabs.bundle.js
index 19fb6d4b9..2cb78dd9e 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/tabs.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/tabs.bundle.js
@@ -92,7 +92,7 @@
    * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
    */
 
-  class GOVUKFrontendComponent {
+  class Component {
     /**
      * Returns the root element of the component
      *
@@ -143,16 +143,16 @@
    */
 
   /**
-   * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+   * @typedef {typeof Component & ChildClass} ChildClassConstructor
    */
-  GOVUKFrontendComponent.elementType = HTMLElement;
+  Component.elementType = HTMLElement;
 
   /**
    * Tabs component
    *
    * @preserve
    */
-  class Tabs extends GOVUKFrontendComponent {
+  class Tabs extends Component {
     /**
      * @param {Element | null} $root - HTML element to use for tabs
      */
diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/tabs.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/tabs/tabs.bundle.mjs
index 8ea827012..add1bec0a 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/tabs.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/tabs.bundle.mjs
@@ -86,7 +86,7 @@ class InitError extends GOVUKFrontendError {
  * @typedef {import('../common/index.mjs').ComponentWithModuleName} ComponentWithModuleName
  */
 
-class GOVUKFrontendComponent {
+class Component {
   /**
    * Returns the root element of the component
    *
@@ -137,16 +137,16 @@ class GOVUKFrontendComponent {
  */
 
 /**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
+ * @typedef {typeof Component & ChildClass} ChildClassConstructor
  */
-GOVUKFrontendComponent.elementType = HTMLElement;
+Component.elementType = HTMLElement;
 
 /**
  * Tabs component
  *
  * @preserve
  */
-class Tabs extends GOVUKFrontendComponent {
+class Tabs extends Component {
   /**
    * @param {Element | null} $root - HTML element to use for tabs
    */
diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/tabs.mjs b/packages/govuk-frontend/dist/govuk/components/tabs/tabs.mjs
index f42ab670a..2ab54a246 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/tabs.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/tabs.mjs
@@ -1,13 +1,13 @@
 import { getBreakpoint, getFragmentFromUrl } from '../../common/index.mjs';
+import { Component } from '../../component.mjs';
 import { ElementError } from '../../errors/index.mjs';
-import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs';
 
 /**
  * Tabs component
  *
  * @preserve
  */
-class Tabs extends GOVUKFrontendComponent {
+class Tabs extends Component {
   /**
    * @param {Element | null} $root - HTML element to use for tabs
    */
diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs b/packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs
index 2c23fcc20..e6a4fae52 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs
@@ -1,60 +1,2 @@
-import { isInitialised, isSupported } from './common/index.mjs';
-import { InitError, ElementError, SupportError } from './errors/index.mjs';
-
-class GOVUKFrontendComponent {
-  /**
-   * Returns the root element of the component
-   *
-   * @protected
-   * @returns {RootElementType} - the root element of component
-   */
-  get $root() {
-    return this._$root;
-  }
-  constructor($root) {
-    this._$root = void 0;
-    const childConstructor = this.constructor;
-    if (typeof childConstructor.moduleName !== 'string') {
-      throw new InitError(`\`moduleName\` not defined in component`);
-    }
-    if (!($root instanceof childConstructor.elementType)) {
-      throw new ElementError({
-        element: $root,
-        component: childConstructor,
-        identifier: 'Root element (`$root`)',
-        expectedType: childConstructor.elementType.name
-      });
-    } else {
-      this._$root = $root;
-    }
-    childConstructor.checkSupport();
-    this.checkInitialised();
-    const moduleName = childConstructor.moduleName;
-    this.$root.setAttribute(`data-${moduleName}-init`, '');
-  }
-  checkInitialised() {
-    const constructor = this.constructor;
-    const moduleName = constructor.moduleName;
-    if (moduleName && isInitialised(this.$root, moduleName)) {
-      throw new InitError(constructor);
-    }
-  }
-  static checkSupport() {
-    if (!isSupported()) {
-      throw new SupportError();
-    }
-  }
-}
-
-/**
- * @typedef ChildClass
- * @property {string} moduleName - The module name that'll be looked for in the DOM when initialising the component
- */
-
-/**
- * @typedef {typeof GOVUKFrontendComponent & ChildClass} ChildClassConstructor
- */
-GOVUKFrontendComponent.elementType = HTMLElement;
-
-export { GOVUKFrontendComponent };
+export { Component as GOVUKFrontendComponent } from './component.mjs';
 //# sourceMappingURL=govuk-frontend-component.mjs.map

Action run for 9f13658

- `GOVUKFrontendComponent` is now `Component`. Renamed `govuk-frontend-component.mjs` to `component.mjs` and the associated test. Changed references to `GOVUKFrontendComponent` to `Component` in the test. - Created new `govuk-frontend-component.mjs` that imports `Component` and exports it as `GOVUKFrontendComponent` to avoid a breaking change.

Components that extended `GOVUKFrontendComponent` now extend `Component` from `component.mjs`.

Because they're not imported by `all.mjs` deprecated JavaScript files were not included in the package (in which they need to remain until the next breaking release). This adds a module to store the list of deprecated JavaScript files and helper functions that are then used: - in the Gulp configuration, to add a new task building each deprecated file individually - in the Rollup configuration, to prevent the bundled output of the deprecated files as all we want is for them to be in the package as a module Co-authored-by: Patrick Cartlidge <[email protected]> Co-authored-by: Brett Kyle <[email protected]>

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 18, 2024 14:59 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 19, 2024 14:09 Inactive

patrickpatrickpatrick force-pushed the rename-component branch from 6f9861d to de5e37a Compare November 19, 2024 14:25

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 19, 2024 14:25 Inactive

patrickpatrickpatrick force-pushed the rename-component branch from de5e37a to d5f9b5d Compare November 19, 2024 14:34

govuk-design-system-ci had a problem deploying to govuk-frontend-pr-5515 November 19, 2024 14:34 Failure

patrickpatrickpatrick force-pushed the rename-component branch from d5f9b5d to 2c540fa Compare November 19, 2024 14:35

govuk-design-system-ci had a problem deploying to govuk-frontend-pr-5515 November 19, 2024 14:36 Failure

patrickpatrickpatrick force-pushed the rename-component branch from 2c540fa to 4d6727b Compare November 19, 2024 14:36

govuk-design-system-ci had a problem deploying to govuk-frontend-pr-5515 November 19, 2024 14:36 Failure

patrickpatrickpatrick force-pushed the rename-component branch from 4d6727b to 675b7fb Compare November 19, 2024 14:44

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 19, 2024 14:45 Inactive

patrickpatrickpatrick force-pushed the rename-component branch from 675b7fb to 40fef81 Compare November 19, 2024 15:06

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 19, 2024 15:07 Inactive

patrickpatrickpatrick changed the title ~~move the component~~ Remove GOVUKFrontend prefix from GOVUKFrontendComponent and GOVUKFrontendComponentConfigurable Nov 19, 2024

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 19, 2024 16:11 Inactive

patrickpatrickpatrick force-pushed the rename-component branch from 720689c to 8b2650b Compare November 20, 2024 10:05

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 20, 2024 10:05 Inactive

patrickpatrickpatrick added 2 commits November 20, 2024 10:20

Update components to import Component

03d0100

Components that extended `GOVUKFrontendComponent` now extend `Component` from `component.mjs`.

patrickpatrickpatrick force-pushed the rename-component branch from 8b2650b to 03d0100 Compare November 20, 2024 10:20

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 20, 2024 10:21 Inactive

patrickpatrickpatrick added 2 commits November 20, 2024 12:31

Update GOVUKFrontendComponentConfigurable to use Component

98d522d

get test workin

1e21410

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 20, 2024 13:45 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 21, 2024 12:48 Inactive

romaricpascal force-pushed the rename-component branch from 59adefb to 5b8a20c Compare November 21, 2024 13:06

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-5515 November 21, 2024 13:07 Inactive

romaricpascal force-pushed the rename-component branch from 5b8a20c to 9f13658 Compare November 21, 2024 13:23

govuk-design-system-ci deployed to govuk-frontend-pr-5515 November 21, 2024 13:23 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remove `GOVUKFrontend` prefix from `GOVUKFrontendComponent` and `GOVUKFrontendComponentConfigurable` #5515

Remove `GOVUKFrontend` prefix from `GOVUKFrontendComponent` and `GOVUKFrontendComponentConfigurable` #5515

patrickpatrickpatrick commented Nov 18, 2024 •

edited

Loading

github-actions bot commented Nov 18, 2024 •

edited

Loading

github-actions bot commented Nov 18, 2024 •

edited

Loading

github-actions bot commented Nov 18, 2024 •

edited

Loading

Remove GOVUKFrontend prefix from GOVUKFrontendComponent and GOVUKFrontendComponentConfigurable #5515

Are you sure you want to change the base?

Remove GOVUKFrontend prefix from GOVUKFrontendComponent and GOVUKFrontendComponentConfigurable #5515

Conversation

patrickpatrickpatrick commented Nov 18, 2024 • edited Loading

What

Why

github-actions bot commented Nov 18, 2024 • edited Loading

📋 Stats

File sizes

Modules

github-actions bot commented Nov 18, 2024 • edited Loading

JavaScript changes to npm package

github-actions bot commented Nov 18, 2024 • edited Loading

Other changes to npm package

Remove `GOVUKFrontend` prefix from `GOVUKFrontendComponent` and `GOVUKFrontendComponentConfigurable` #5515

Remove `GOVUKFrontend` prefix from `GOVUKFrontendComponent` and `GOVUKFrontendComponentConfigurable` #5515

patrickpatrickpatrick commented Nov 18, 2024 •

edited

Loading

github-actions bot commented Nov 18, 2024 •

edited

Loading

github-actions bot commented Nov 18, 2024 •

edited

Loading

github-actions bot commented Nov 18, 2024 •

edited

Loading