Make a base class for people to build components with part of our public API

[romaricpascal]

What

Provide a base class that both our components and components from services or other design systems can extend, providing:

• a check that the component is supported in the current browser, with the possibility for sub-classes to define other/extra criteria than 'GOV.UK Frontend is supported'
• the storage of the root element of the component
• static properties to help component initialisation

Why

This will help sharing base features with services and other design systems, reducing code duplication in bundled code

Who needs to work on this

Developers

Who needs to review this

Developers

Done when

• We've designed the shape of that base component (including its name, which we may not want to be GOVUKFrontendComponent but something more generic)
• We've implemented the component and exposed it in our public API
• We've documented the feature

[romaricpascal]

@patrickpatrickpatrick I'd propose the following plan for making the base class public, how does this sound to you?

• Rename $module to $root across the project – This shouldn't be breaking as we're using positional arguments in the constructor 😮‍💨
• Add a isSupported @protected method to GOVUKFrontendComponent that components can override what defines that components are supported or not – This will let other Design System or specific services extend when components should not initialise (eg. if they have a more modern browser support for one or multiple components)
• Move checking that a root element is received to the base component class, which will take a couple of steps:
  • First, we'll need some error refactoring
    • Refactor ElementError to receive the component's moduleName rather than a componentName hardcoded in each component class
    • Refactor other errors to follow the same convention
    • Add a formatErrorMessage(Component, message) helper to facilitate the <MODULE_NAME>: <MESSAGE> formatting the messages across the board – Using a function will be more flexible than a method on the base component or in GOVUKFrontendError as it will allow to format message for both our errors and native ones, as well as delay the formatting of the message (for example when encapsulated in ElementError) (curious to see if it makes us gain some Kb as well)
  • Refactor the check for the type of the root element in GOVUKFrontendComponent – This will require a static rootElementType (or just rootType maybe, or rootClass) on the GOVUKFrontendComponent, that can be overriden in child classes and I'm expecting some typing things as well. We may want to access the complexity it brings for teams, though.
• Export GOVUKFrontendComponent as Component for the public API – Name still up for discussion, but it feels simple enough and renaming in the export is the cheapest way to do it. Only concern with it is that Component won't come from a component.mjs file if people want to import a specific file. It feels like something that we could add if needs arise, though.

[patrickpatrickpatrick]

That all makes sense to me!

[romaricpascal]

I've created the corresponding issues for the implementation details in a tasklist on #5292, so I'll close this issue now it's superseeded.