Prevent JavaScript component config being flattened

[colinrotherham]

Description of the issue

Our JavaScript component configs are being flattened in mergeConfigs() and don't match JSDoc output

this.config = mergeConfigs(
  Accordion.defaults,
  config || {},
  normaliseDataset($module.dataset)
)

Steps to reproduce the issue

Instantiate a component (e.g. Accordion) using the JavaScript API

Before

Console output for Accordion.defaults shows an unflattened config

{
  i18n: {
    hideAllSections: 'Hide all sections',
    hideSection: 'Hide',
    hideSectionAriaLabel: 'Hide this section',
    showAllSections: 'Show all sections',
    showSection: 'Show',
    showSectionAriaLabel: 'Show this section'
  },
  rememberExpanded: true
}

After

Console output for new Accordion().config shows an unexpectedly flattened config

{
  'i18n.hideAllSections': 'Hide all sections',
  'i18n.hideSection': 'Hide',
  'i18n.hideSectionAriaLabel': 'Hide this section',
  'i18n.showAllSections': 'Show all sections',
  'i18n.showSection': 'Show',
  'i18n.showSectionAriaLabel': 'Show this section'
  module: 'govuk-accordion',
  rememberExpanded: true
}

Both are accidentally typed with AccordionConfig even though they're different

Actual vs expected behaviour

Whilst we've picked "flattening" to our method to normalise i18n text between data-* attributes and the JavaScript API, the final merged new Accordion().config is expected to match the JavaScript API format in JSDoc output.

We hold our JavaScript component configs in two places:

1. Using static fields for defaults, e.g. Accordion.defaults
2. Using class fields once merged, e.g. new Accordion().config

We merge component config data-* attributes over JavaScript config, using the defaults to fill the gaps

[colinrotherham]

To avoid confusion, we should distinguish mergeConfigs() from a new flattenConfigs() helper

Then we may want to clearly flatten and extract only i18n key/values as shown:

this.config = mergeConfigs(Accordion.defaults, config)

// Component data attributes
const dataset = normaliseDataset($module.dataset)

// Flatten i18n config property only
this.config.i18n = extractConfigByNamespace(
  flattenConfigs(this.config, dataset),
  'i18n'
)

this.i18n = new I18n(this.config.i18n)

Additional dataset properties

Notice the untyped config property module above from data-module="govuk-accordion"

We may want to assign only known dataset values rather than merging them all

const dataset = normaliseDataset($module.dataset)

// Add known values only
this.config.AAA = dataset.AAA
this.config.BBB = dataset.BBB
this.config.CCC = dataset.CCC