Spike into Config class if defined by child class of GOVUKFrontendComponent

packages/govuk-frontend/src/govuk/common/config.mjs

@@ -0,0 +1,133 @@
+import { ConfigError } from '../errors/index.mjs'
+
+import { isObject } from './index.mjs'
+import { normaliseDataset } from './normalise-dataset.mjs'
+
+/**
+ * Config
+ *
+ * Instance of configuration for a component
+ *
+ * @template {{[key:string]: unknown}} [ConfigType=ObjectNested]
+ */
+class Config {
+  /**
+   * @type {ConfigType}
+   */
+  configObject
+
+  /**
+   *  @type {CompatibleClass<ConfigType>}
+   */
+  component
+
+  /**
+   * Merge configuration objects into a single config
+   *
+   * I think this makes sense to go in here rather then
+   * as utility function because it is used each time a
+   * configuration is created in the constructor of a component.
+   * So it would not be removed during tree-shaking.
+   *
+   * @param {...{[key:string]: unknown}} configObjects - configuration objects passed
+   * @returns {{[key:string]: unknown}} - merged configuration object
+   */
+  static mergeConfigs(...configObjects) {
+    // Start with an empty object as our base
+    /** @type {{ [key: string]: unknown }} */
+    const formattedConfigObject = {}
+
+    // Loop through each of the passed objects
+    for (const configObject of configObjects) {
+      for (const key of Object.keys(configObject)) {
+        const option = formattedConfigObject[key]
+        const override = configObject[key]
+
+        // Push their keys one-by-one into formattedConfigObject. Any duplicate
+        // keys with object values will be merged, otherwise the new value will
+        // override the existing value.
+        if (isObject(option) && isObject(override)) {
+          // @ts-expect-error Index signature for type 'string' is missing
+          formattedConfigObject[key] = Config.mergeConfigs(option, override)
+        } else {
+          // Apply override
+          formattedConfigObject[key] = override
+        }
+      }
+    }
+
+    return formattedConfigObject
+  }
+
+  /**
+   * @param {ComponentClass} component - Class of component using config
+   * @param {DOMStringMap} dataset - dataset of root component
+   * @param {...ConfigType} configObjects - Config objects to merge
+   */
+  constructor(component, dataset, ...configObjects) {
+    if (typeof component.defaults === 'undefined') {
+      throw new ConfigError('No defaults specified in component')
+    }
+
+    if (typeof component.schema === 'undefined') {
+      throw new ConfigError('No schema specified in component')
+    }
+
+    this.component = /** @type {CompatibleClass<ConfigType>} */ (component)
+
+    const normalisedDataset = /** @type {ConfigType} */ (
+      normaliseDataset(this.component, dataset)
+    )
+
+    this.configObject = /** @type {ConfigType} */ (
+      Config.mergeConfigs(
+        this.component.defaults,
+        ...configObjects,
+        this.component.configOverride
+          ? this.component.configOverride(normalisedDataset)
+          : {},
+        normalisedDataset
+      )
+    )
+
+    // have to assign to a separate variable
+    // to get the Proxy to work
+    const configObject = this.configObject
+
+    return new Proxy(this, {
+      get(target, name, receiver) {
+        if (!Reflect.has(target, name)) {
+          return configObject[String(name)]
+        }
+        return Reflect.get(target, name, receiver)
+      }
+    })
+  }
+}
+
+/**
+ * @typedef {import("./index.mjs").ObjectNested} ObjectNested
+ */
+
+/* eslint-disable jsdoc/valid-types --
+ * `{new(...args: any[] ): object}` is not recognised as valid
+ * https://github.com/gajus/eslint-plugin-jsdoc/issues/145#issuecomment-1308722878
+ * https://github.com/jsdoc-type-pratt-parser/jsdoc-type-pratt-parser/issues/131
+ **/
+
+/**
+ * @typedef {{new (...args: any[]): any, moduleName: string, schema?: {[key:string]: unknown}, defaults?: {[key:string]: unknown} }} ComponentClass
+ */
+
+/* eslint-disable jsdoc/valid-types --
+ * `{new(...args: any[] ): object}` is not recognised as valid
+ * https://github.com/gajus/eslint-plugin-jsdoc/issues/145#issuecomment-1308722878
+ * https://github.com/jsdoc-type-pratt-parser/jsdoc-type-pratt-parser/issues/131
+ **/
+
+/**
+ * @template {{[key:string]: unknown}} [ConfigType=ObjectNested]
+ * @typedef {{new (...args: any[]): any, moduleName: string, schema: import('./index.mjs').Schema, defaults: ConfigType, configOverride?: (config: ConfigType) => ConfigType }} CompatibleClass
+ */
+
+export default Config

packages/govuk-frontend/src/govuk/common/index.mjs

@@ -229,21 +229,22 @@ export function isSupported($scope = document.body) {
  * {@link https://ajv.js.org/packages/ajv-errors.html#single-message}
  *
  * @internal
- * @param {Schema} schema - Config schema
- * @param {{ [key: string]: unknown }} config - Component config
+ * @param {import('./config.mjs').default<{[key:string]: unknown}>} config - instance of config
  * @returns {string[]} List of validation errors
  */
-export function validateConfig(schema, config) {
+export function validateConfig(config) {
   const validationErrors = []
 
+  const schema = config.component.schema
+
   // Check errors for each schema
   for (const [name, conditions] of Object.entries(schema)) {
     const errors = []
 
     // Check errors for each schema condition
     if (Array.isArray(conditions)) {
       for (const { required, errorMessage } of conditions) {
-        if (!required.every((key) => !!config[key])) {
+        if (!required.every((key) => config.configObject[key])) {
           errors.push(errorMessage) // Missing config key value
         }
       }
@@ -254,7 +255,6 @@ export function validateConfig(schema, config) {
       }
     }
   }
-
   return validationErrors
 }
 
@@ -276,7 +276,7 @@ function isArray(option) {
  * @param {unknown} option - Option to check
  * @returns {boolean} Whether the option is an object
  */
-function isObject(option) {
+export function isObject(option) {
   return !!option && typeof option === 'object' && !isArray(option)
 }
 

packages/govuk-frontend/src/govuk/components/accordion/accordion.mjs

@@ -1,5 +1,4 @@
-import { mergeConfigs } from '../../common/index.mjs'
-import { normaliseDataset } from '../../common/normalise-dataset.mjs'
+import Config from '../../common/config.mjs'
 import { ElementError } from '../../errors/index.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 import { I18n } from '../../i18n.mjs'
@@ -21,7 +20,7 @@ import { I18n } from '../../i18n.mjs'
 export class Accordion extends GOVUKFrontendComponent {
   /**
    * @private
-   * @type {AccordionConfig}
+   * @type {Config<AccordionConfig> & AccordionConfig}
    */
   config
 
@@ -113,11 +112,7 @@ export class Accordion extends GOVUKFrontendComponent {
   constructor($root, config = {}) {
     super($root)
 
-    this.config = mergeConfigs(
-      Accordion.defaults,
-      config,
-      normaliseDataset(Accordion, this.$root.dataset)
-    )
+    this.config = new Config(Accordion, this.$root.dataset, config)
 
     this.i18n = new I18n(this.config.i18n)
 

packages/govuk-frontend/src/govuk/components/button/button.mjs

@@ -1,5 +1,4 @@
-import { mergeConfigs } from '../../common/index.mjs'
-import { normaliseDataset } from '../../common/normalise-dataset.mjs'
+import Config from '../../common/config.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 
 const DEBOUNCE_TIMEOUT_IN_SECONDS = 1
@@ -12,7 +11,7 @@ const DEBOUNCE_TIMEOUT_IN_SECONDS = 1
 export class Button extends GOVUKFrontendComponent {
   /**
    * @private
-   * @type {ButtonConfig}
+   * @type {Config<ButtonConfig> & ButtonConfig}
    */
   config
 
@@ -29,11 +28,7 @@ export class Button extends GOVUKFrontendComponent {
   constructor($root, config = {}) {
     super($root)
 
-    this.config = mergeConfigs(
-      Button.defaults,
-      config,
-      normaliseDataset(Button, this.$root.dataset)
-    )
+    this.config = new Config(Button, this.$root.dataset, config)
 
     this.$root.addEventListener('keydown', (event) => this.handleKeyDown(event))
     this.$root.addEventListener('click', (event) => this.debounce(event))

packages/govuk-frontend/src/govuk/components/character-count/character-count.mjs

@@ -1,10 +1,6 @@
 import { closestAttributeValue } from '../../common/closest-attribute-value.mjs'
-import {
-  formatErrorMessage,
-  mergeConfigs,
-  validateConfig
-} from '../../common/index.mjs'
-import { normaliseDataset } from '../../common/normalise-dataset.mjs'
+import Config from '../../common/config.mjs'
+import { formatErrorMessage, validateConfig } from '../../common/index.mjs'
 import { ConfigError, ElementError } from '../../errors/index.mjs'
 import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
 import { I18n } from '../../i18n.mjs'
@@ -48,7 +44,7 @@ export class CharacterCount extends GOVUKFrontendComponent {
 
   /**
    * @private
-   * @type {CharacterCountConfig}
+   * @type {Config<CharacterCountConfig> & CharacterCountConfig}
    */
   config
 
@@ -80,33 +76,28 @@ export class CharacterCount extends GOVUKFrontendComponent {
       })
     }
 
-    // Read config set using dataset ('data-' values)
-    const datasetConfig = normaliseDataset(CharacterCount, this.$root.dataset)
-
-    // To ensure data-attributes take complete precedence, even if they change
-    // the type of count, we need to reset the `maxlength` and `maxwords` from
-    // the JavaScript config.
-    //
-    // We can't mutate `config`, though, as it may be shared across multiple
-    // components inside `initAll`.
-    /** @type {CharacterCountConfig} */
-    let configOverrides = {}
-    if ('maxwords' in datasetConfig || 'maxlength' in datasetConfig) {
-      configOverrides = {
-        maxlength: undefined,
-        maxwords: undefined
-      }
-    }
-
-    this.config = mergeConfigs(
-      CharacterCount.defaults,
-      config,
-      configOverrides,
-      datasetConfig
-    )
+    // // Read config set using dataset ('data-' values)
+    // const datasetConfig = normaliseDataset(CharacterCount, this.$root.dataset)
+
+    // // To ensure data-attributes take complete precedence, even if they change
+    // // the type of count, we need to reset the `maxlength` and `maxwords` from
+    // // the JavaScript config.
+    // //
+    // // We can't mutate `config`, though, as it may be shared across multiple
+    // // components inside `initAll`.
+    // /** @type {CharacterCountConfig} */
+    // let configOverrides = {}
+    // if ('maxwords' in datasetConfig || 'maxlength' in datasetConfig) {
+    //   configOverrides = {
+    //     maxlength: undefined,
+    //     maxwords: undefined
+    //   }
+    // }
+
+    this.config = new Config(CharacterCount, this.$root.dataset, config)
 
     // Check for valid config
-    const errors = validateConfig(CharacterCount.schema, this.config)
+    const errors = validateConfig(this.config)
     if (errors[0]) {
       throw new ConfigError(formatErrorMessage(CharacterCount, errors[0]))
     }
@@ -440,6 +431,25 @@ export class CharacterCount extends GOVUKFrontendComponent {
     }
   })
 
+  /**
+   * Override configuration
+   *
+   * @param {CharacterCountConfig} config - config to override
+   * @returns {CharacterCountConfig} - overidden config
+   */
+  static configOverride = (config) => {
+    /** @type {CharacterCountConfig} */
+    let configOverrides = {}
+    if ('maxwords' in config || 'maxlength' in config) {
+      configOverrides = {
+        maxlength: undefined,
+        maxwords: undefined
+      }
+    }
+
+    return configOverrides
+  }
+
   /**
    * Character count config schema
    *