Throw InitError when components are already initialised

alphagov · Feb 27, 2024 · e7b9724 · e7b9724
1 parent 64a23fb
commit e7b9724
Show file tree

Hide file tree

Showing 13 changed files with 43 additions and 14 deletions.
diff --git a/packages/govuk-frontend/src/govuk/common/index.mjs b/packages/govuk-frontend/src/govuk/common/index.mjs
@@ -200,6 +200,17 @@ export function setFocus($element, options = {}) {
   $element.focus()
 }
 
+/**
+ * Checks if component is already initialised
+ *
+ * @internal
+ * @param {Element} $module - HTML element to be checked
+ * @returns {boolean} Whether component is already initialised
+ */
+export function isInitialised($module) {
+  return $module instanceof HTMLElement && 'moduleInit' in $module.dataset
+}
+
 /**
  * Checks if GOV.UK Frontend is supported on this page
  *

diff --git a/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs b/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs
@@ -117,7 +117,7 @@ export class Accordion extends GOVUKFrontendComponent {
    * @param {AccordionConfig} [config] - Accordion config
    */
   constructor($module, config = {}) {
-    super()
+    super($module)
 
     if (!($module instanceof HTMLElement)) {
       throw new ElementError({

diff --git a/packages/govuk-frontend/src/govuk/components/button/button.mjs b/packages/govuk-frontend/src/govuk/components/button/button.mjs
@@ -32,7 +32,7 @@ export class Button extends GOVUKFrontendComponent {
    * @param {ButtonConfig} [config] - Button config
    */
   constructor($module, config = {}) {
-    super()
+    super($module)
 
     if (!($module instanceof HTMLElement)) {
       throw new ElementError({

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
@@ -66,7 +66,7 @@ export class CharacterCount extends GOVUKFrontendComponent {
    * @param {CharacterCountConfig} [config] - Character count config
    */
   constructor($module, config = {}) {
-    super()
+    super($module)
 
     if (!($module instanceof HTMLElement)) {
       throw new ElementError({

diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs
@@ -28,7 +28,7 @@ export class Checkboxes extends GOVUKFrontendComponent {
    * @param {Element | null} $module - HTML element to use for checkboxes
    */
   constructor($module) {
-    super()
+    super($module)
 
     if (!($module instanceof HTMLElement)) {
       throw new ElementError({

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
@@ -30,7 +30,7 @@ export class ErrorSummary extends GOVUKFrontendComponent {
    * @param {ErrorSummaryConfig} [config] - Error summary config
    */
   constructor($module, config = {}) {
-    super()
+    super($module)
 
     if (!($module instanceof HTMLElement)) {
       throw new ElementError({

diff --git a/packages/govuk-frontend/src/govuk/components/exit-this-page/exit-this-page.mjs b/packages/govuk-frontend/src/govuk/components/exit-this-page/exit-this-page.mjs
@@ -79,7 +79,7 @@ export class ExitThisPage extends GOVUKFrontendComponent {
    * @param {ExitThisPageConfig} [config] - Exit This Page config
    */
   constructor($module, config = {}) {
-    super()
+    super($module)
 
     if (!($module instanceof HTMLElement)) {
       throw new ElementError({

diff --git a/packages/govuk-frontend/src/govuk/components/header/header.mjs b/packages/govuk-frontend/src/govuk/components/header/header.mjs
@@ -43,7 +43,7 @@ export class Header extends GOVUKFrontendComponent {
    * @param {Element | null} $module - HTML element to use for header
    */
   constructor($module) {
-    super()
+    super($module)
 
     if (!$module) {
       throw new ElementError({

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
@@ -23,7 +23,7 @@ export class NotificationBanner extends GOVUKFrontendComponent {
    * @param {NotificationBannerConfig} [config] - Notification banner config
    */
   constructor($module, config = {}) {
-    super()
+    super($module)
 
     if (!($module instanceof HTMLElement)) {
       throw new ElementError({

diff --git a/packages/govuk-frontend/src/govuk/components/radios/radios.mjs b/packages/govuk-frontend/src/govuk/components/radios/radios.mjs
@@ -28,7 +28,7 @@ export class Radios extends GOVUKFrontendComponent {
    * @param {Element | null} $module - HTML element to use for radios
    */
   constructor($module) {
-    super()
+    super($module)
 
     if (!($module instanceof HTMLElement)) {
       throw new ElementError({

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
@@ -18,7 +18,7 @@ export class SkipLink extends GOVUKFrontendComponent {
    * @throws {ElementError} when the linked element is missing or the wrong type
    */
   constructor($module) {
-    super()
+    super($module)
 
     if (!($module instanceof HTMLAnchorElement)) {
       throw new ElementError({

diff --git a/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs b/packages/govuk-frontend/src/govuk/components/tabs/tabs.mjs
@@ -48,7 +48,7 @@ export class Tabs extends GOVUKFrontendComponent {
    * @param {Element | null} $module - HTML element to use for tabs
    */
   constructor($module) {
-    super()
+    super($module)
 
     if (!$module) {
       throw new ElementError({

diff --git a/packages/govuk-frontend/src/govuk/govuk-frontend-component.mjs b/packages/govuk-frontend/src/govuk/govuk-frontend-component.mjs
@@ -1,5 +1,5 @@
-import { isSupported } from './common/index.mjs'
-import { SupportError } from './errors/index.mjs'
+import { isInitialised, isSupported } from './common/index.mjs'
+import { InitError, SupportError } from './errors/index.mjs'
 
 /**
  * Base Component class
@@ -14,9 +14,27 @@ export class GOVUKFrontendComponent {
    * Constructs a new component, validating that GOV.UK Frontend is supported
    *
    * @internal
+   * @param {Element | null} [$module] - HTML element to use for component
    */
-  constructor() {
+  constructor($module) {
     this.checkSupport()
+    this.checkInitialised($module)
+
+    // Mark component as initialised in HTML
+    $module?.setAttribute('data-module-init', 'true')
+  }
+
+  /**
+   * Validates whether component is already initialised
+   *
+   * @private
+   * @param {Element | null} [$module] - HTML element to be checked
+   * @throws {InitError} when component is already initialised
+   */
+  checkInitialised($module) {
+    if ($module && isInitialised($module)) {
+      throw new InitError($module)
+    }
   }
 
   /**