Use class fields for all assigned properties

The compiler can infer construction types, reducing JSDoc comments
alphagov · Jun 19, 2023 · 303b220 · 303b220
1 parent 08511f2
commit 303b220
Show file tree

Hide file tree

Showing 12 changed files with 260 additions and 173 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs b/packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs
@@ -15,107 +15,125 @@ import { I18n } from '../../i18n.mjs'
  * attribute, which also provides accessibility.
  */
 export class Accordion {
+  /** @private */
+  $module
+
   /**
-   * @param {Element} $module - HTML element to use for accordion
-   * @param {AccordionConfig} [config] - Accordion config
+   * @private
+   * @type {AccordionConfig}
    */
-  constructor ($module, config) {
-    if (!($module instanceof HTMLElement)) {
-      return this
-    }
+  config
 
-    /** @private */
-    this.$module = $module
+  /** @private */
+  i18n
 
-    /**
-     * @private
-     * @type {AccordionConfig}
-     */
-    this.config = mergeConfigs(
-      Accordion.defaults,
-      config || {},
-      normaliseDataset($module.dataset)
-    )
+  /** @private */
+  controlsClass = 'govuk-accordion__controls'
 
-    /** @private */
-    this.i18n = new I18n(extractConfigByNamespace(this.config, 'i18n'))
+  /** @private */
+  showAllClass = 'govuk-accordion__show-all'
 
-    /** @private */
-    this.controlsClass = 'govuk-accordion__controls'
+  /** @private */
+  showAllTextClass = 'govuk-accordion__show-all-text'
 
-    /** @private */
-    this.showAllClass = 'govuk-accordion__show-all'
+  /** @private */
+  sectionClass = 'govuk-accordion__section'
 
-    /** @private */
-    this.showAllTextClass = 'govuk-accordion__show-all-text'
+  /** @private */
+  sectionExpandedClass = 'govuk-accordion__section--expanded'
 
-    /** @private */
-    this.sectionClass = 'govuk-accordion__section'
+  /** @private */
+  sectionButtonClass = 'govuk-accordion__section-button'
 
-    /** @private */
-    this.sectionExpandedClass = 'govuk-accordion__section--expanded'
+  /** @private */
+  sectionHeaderClass = 'govuk-accordion__section-header'
 
-    /** @private */
-    this.sectionButtonClass = 'govuk-accordion__section-button'
+  /** @private */
+  sectionHeadingClass = 'govuk-accordion__section-heading'
 
-    /** @private */
-    this.sectionHeaderClass = 'govuk-accordion__section-header'
+  /** @private */
+  sectionHeadingDividerClass = 'govuk-accordion__section-heading-divider'
 
-    /** @private */
-    this.sectionHeadingClass = 'govuk-accordion__section-heading'
+  /** @private */
+  sectionHeadingTextClass = 'govuk-accordion__section-heading-text'
 
-    /** @private */
-    this.sectionHeadingDividerClass = 'govuk-accordion__section-heading-divider'
+  /** @private */
+  sectionHeadingTextFocusClass = 'govuk-accordion__section-heading-text-focus'
 
-    /** @private */
-    this.sectionHeadingTextClass = 'govuk-accordion__section-heading-text'
+  /** @private */
+  sectionShowHideToggleClass = 'govuk-accordion__section-toggle'
 
-    /** @private */
-    this.sectionHeadingTextFocusClass = 'govuk-accordion__section-heading-text-focus'
+  /** @private */
+  sectionShowHideToggleFocusClass = 'govuk-accordion__section-toggle-focus'
 
-    /** @private */
-    this.sectionShowHideToggleClass = 'govuk-accordion__section-toggle'
+  /** @private */
+  sectionShowHideTextClass = 'govuk-accordion__section-toggle-text'
 
-    /** @private */
-    this.sectionShowHideToggleFocusClass = 'govuk-accordion__section-toggle-focus'
+  /** @private */
+  upChevronIconClass = 'govuk-accordion-nav__chevron'
 
-    /** @private */
-    this.sectionShowHideTextClass = 'govuk-accordion__section-toggle-text'
+  /** @private */
+  downChevronIconClass = 'govuk-accordion-nav__chevron--down'
 
-    /** @private */
-    this.upChevronIconClass = 'govuk-accordion-nav__chevron'
+  /** @private */
+  sectionSummaryClass = 'govuk-accordion__section-summary'
 
-    /** @private */
-    this.downChevronIconClass = 'govuk-accordion-nav__chevron--down'
+  /** @private */
+  sectionSummaryFocusClass = 'govuk-accordion__section-summary-focus'
 
-    /** @private */
-    this.sectionSummaryClass = 'govuk-accordion__section-summary'
+  /** @private */
+  sectionContentClass = 'govuk-accordion__section-content'
 
-    /** @private */
-    this.sectionSummaryFocusClass = 'govuk-accordion__section-summary-focus'
+  /** @private */
+  $sections
 
-    /** @private */
-    this.sectionContentClass = 'govuk-accordion__section-content'
+  /** @private */
+  browserSupportsSessionStorage = false
 
-    const $sections = this.$module.querySelectorAll(`.${this.sectionClass}`)
-    if (!$sections.length) {
+  /**
+   * @private
+   * @type {HTMLButtonElement | null}
+   */
+  $showAllButton = null
+
+  /**
+   * @private
+   * @type {HTMLSpanElement | null}
+   */
+  $showAllIcon = null
+
+  /**
+   * @private
+   * @type {HTMLSpanElement | null}
+   */
+  $showAllText = null
+
+  /**
+   * @param {Element} $module - HTML element to use for accordion
+   * @param {AccordionConfig} [config] - Accordion config
+   */
+  constructor ($module, config) {
+    if (!($module instanceof HTMLElement)) {
       return this
     }
 
-    /** @private */
-    this.$sections = $sections
+    this.$module = $module
 
-    /** @private */
-    this.browserSupportsSessionStorage = helper.checkForSessionStorage()
+    this.config = mergeConfigs(
+      Accordion.defaults,
+      config || {},
+      normaliseDataset($module.dataset)
+    )
 
-    /** @private */
-    this.$showAllButton = null
+    this.i18n = new I18n(extractConfigByNamespace(this.config, 'i18n'))
 
-    /** @private */
-    this.$showAllIcon = null
+    const $sections = this.$module.querySelectorAll(`.${this.sectionClass}`)
+    if (!$sections.length) {
+      return this
+    }
 
-    /** @private */
-    this.$showAllText = null
+    this.$sections = $sections
+    this.browserSupportsSessionStorage = helper.checkForSessionStorage()
   }
 
   /**

diff --git a/packages/govuk-frontend/src/govuk/components/button/button.mjs b/packages/govuk-frontend/src/govuk/components/button/button.mjs
@@ -8,6 +8,21 @@ const DEBOUNCE_TIMEOUT_IN_SECONDS = 1
  * JavaScript enhancements for the Button component
  */
 export class Button {
+  /** @private */
+  $module
+
+  /**
+   * @private
+   * @type {ButtonConfig}
+   */
+  config
+
+  /**
+   * @private
+   * @type {number | null}
+   */
+  debounceFormSubmitTimer = null
+
   /**
    *
    * @param {Element} $module - HTML element to use for button
@@ -18,16 +33,8 @@ export class Button {
       return this
     }
 
-    /** @private */
     this.$module = $module
 
-    /** @private */
-    this.debounceFormSubmitTimer = null
-
-    /**
-     * @private
-     * @type {ButtonConfig}
-     */
     this.config = mergeConfigs(
       Button.defaults,
       config || {},

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
@@ -14,6 +14,51 @@ import { I18n } from '../../i18n.mjs'
  * of the available characters/words has been entered.
  */
 export class CharacterCount {
+  /** @private */
+  $module
+
+  /** @private */
+  $textarea
+
+  /**
+   * @private
+   * @type {HTMLDivElement | null}
+   */
+  $visibleCountMessage = null
+
+  /**
+   * @private
+   * @type {HTMLDivElement | null}
+   */
+  $screenReaderCountMessage = null
+
+  /**
+   * @private
+   * @type {number | null}
+   */
+  lastInputTimestamp = null
+
+  /** @private */
+  lastInputValue = ''
+
+  /**
+   * @private
+   * @type {number | null}
+   */
+  valueChecker = null
+
+  /**
+   * @private
+   * @type {CharacterCountConfig}
+   */
+  config
+
+  /** @private */
+  i18n
+
+  /** @private */
+  maxLength = Infinity
+
   /**
    * @param {Element} $module - HTML element to use for character count
    * @param {CharacterCountConfig} [config] - Character count config
@@ -51,25 +96,18 @@ export class CharacterCount {
       }
     }
 
-    /**
-     * @private
-     * @type {CharacterCountConfig}
-     */
     this.config = mergeConfigs(
       CharacterCount.defaults,
       config || {},
       configOverrides,
       datasetConfig
     )
 
-    /** @private */
     this.i18n = new I18n(extractConfigByNamespace(this.config, 'i18n'), {
       // Read the fallback if necessary rather than have it set in the defaults
       locale: closestAttributeValue($module, 'lang')
     })
 
-    /** @private */
-    this.maxLength = Infinity
     // Determine the limit attribute (characters or words)
     if ('maxwords' in this.config && this.config.maxwords) {
       this.maxLength = this.config.maxwords
@@ -79,26 +117,8 @@ export class CharacterCount {
       return this
     }
 
-    /** @private */
     this.$module = $module
-
-    /** @private */
     this.$textarea = $textarea
-
-    /** @private */
-    this.$visibleCountMessage = null
-
-    /** @private */
-    this.$screenReaderCountMessage = null
-
-    /** @private */
-    this.lastInputTimestamp = null
-
-    /** @private */
-    this.lastInputValue = ''
-
-    /** @private */
-    this.valueChecker = null
   }
 
   /**

diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.mjs
@@ -2,6 +2,12 @@
  * Checkboxes component
  */
 export class Checkboxes {
+  /** @private */
+  $module
+
+  /** @private */
+  $inputs
+
   /**
    * @param {Element} $module - HTML element to use for checkboxes
    */
@@ -16,10 +22,7 @@ export class Checkboxes {
       return this
     }
 
-    /** @private */
     this.$module = $module
-
-    /** @private */
     this.$inputs = $inputs
   }
 

diff --git a/packages/govuk-frontend/src/govuk/components/details/details.mjs b/packages/govuk-frontend/src/govuk/components/details/details.mjs
@@ -13,6 +13,21 @@ const KEY_SPACE = 32
  * Details component
  */
 export class Details {
+  /** @private */
+  $module
+
+  /**
+   * @private
+   * @type {HTMLElement | null}
+   */
+  $summary = null
+
+  /**
+   * @private
+   * @type {HTMLElement | null}
+   */
+  $content = null
+
   /**
    *
    * @param {Element} $module - HTML element to use for details
@@ -22,14 +37,7 @@ export class Details {
       return this
     }
 
-    /** @private */
     this.$module = $module
-
-    /** @private */
-    this.$summary = null
-
-    /** @private */
-    this.$content = null
   }
 
   /**