Export a base Component class

[romaricpascal]

Exports the GOVUKFrontendComponent class as Component, making it available to use as base for components outside of GOV.UK Frontend.

Updates tests and JSDoc to reflect.

Closes #5327

[github-actions]

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	118.52 KiB
dist/govuk-frontend-development.min.js	44.6 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	93.75 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	88.01 KiB
packages/govuk-frontend/dist/govuk/all.mjs	1.18 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	1.15 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	118.5 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	44.58 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs	6.9 KiB

Modules

File	Size (bundled)	Size (minified)
all.mjs	84.11 KiB	42.23 KiB
accordion.mjs	24.83 KiB	12.89 KiB
button.mjs	7.3 KiB	3.2 KiB
character-count.mjs	23.73 KiB	10.44 KiB
checkboxes.mjs	7.16 KiB	3.35 KiB
error-summary.mjs	9.21 KiB	3.97 KiB
exit-this-page.mjs	18.43 KiB	9.77 KiB
header.mjs	5.8 KiB	3.12 KiB
notification-banner.mjs	7.59 KiB	3.13 KiB
password-input.mjs	16.47 KiB	7.77 KiB
radios.mjs	6.16 KiB	2.89 KiB
service-navigation.mjs	5.78 KiB	3.21 KiB
skip-link.mjs	5.71 KiB	2.69 KiB
tabs.mjs	11.37 KiB	6.57 KiB

View stats and visualisations on the review app

---

Action run for d3a19fc

[github-actions]

JavaScript changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
index 583c153eb..52555a12f 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
@@ -27,18 +27,18 @@ function mergeConfigs(...t) {
     return e
 }
 
-function extractConfigByNamespace(t, e, n) {
-    const i = t.schema.properties[n];
-    if ("object" !== (null == i ? void 0 : i.type)) return;
-    const o = {
-        [n]: {}
+function extractConfigByNamespace(Component, t, e) {
+    const n = Component.schema.properties[e];
+    if ("object" !== (null == n ? void 0 : n.type)) return;
+    const i = {
+        [e]: {}
     };
-    for (const [s, r] of Object.entries(e)) {
-        let t = o;
-        const e = s.split(".");
-        for (const [i, o] of e.entries()) "object" == typeof t && (i < e.length - 1 ? (isObject(t[o]) || (t[o] = {}), t = t[o]) : s !== n && (t[o] = normaliseString(r)))
+    for (const [o, s] of Object.entries(t)) {
+        let t = i;
+        const n = o.split(".");
+        for (const [i, r] of n.entries()) "object" == typeof t && (i < n.length - 1 ? (isObject(t[r]) || (t[r] = {}), t = t[r]) : o !== e && (t[r] = normaliseString(s)))
     }
-    return o[n]
+    return i[e]
 }
 
 function getFragmentFromUrl(t) {
@@ -80,10 +80,10 @@ function isObject(t) {
     }(t)
 }
 
-function normaliseDataset(t, e) {
-    const n = {};
-    for (const [i, o] of Object.entries(t.schema.properties)) i in e && (n[i] = normaliseString(e[i], o)), "object" === (null == o ? void 0 : o.type) && (n[i] = extractConfigByNamespace(t, e, i));
-    return n
+function normaliseDataset(Component, t) {
+    const e = {};
+    for (const [n, i] of Object.entries(Component.schema.properties)) n in t && (e[n] = normaliseString(t[n], i)), "object" === (null == i ? void 0 : i.type) && (e[n] = extractConfigByNamespace(Component, t, n));
+    return e
 }
 class GOVUKFrontendError extends Error {
     constructor(...t) {
@@ -1160,30 +1160,30 @@ function initAll(t) {
             scope: null != (e = t.scope) ? e : document,
             onError: t.onError
         };
-    n.forEach((([t, e]) => {
-        createAll(t, e, i)
+    n.forEach((([Component, t]) => {
+        createAll(Component, t, i)
     }))
 }
 
-function createAll(t, e, n) {
-    let i, o = document;
-    var s;
-    "object" == typeof n && (o = null != (s = n.scope) ? s : o, i = n.onError);
-    "function" == typeof n && (i = n), n instanceof HTMLElement && (o = n);
-    const r = o.querySelectorAll(`[data-module="${t.moduleName}"]`);
-    return isSupported() ? Array.from(r).map((n => {
+function createAll(Component, t, e) {
+    let n, i = document;
+    var o;
+    "object" == typeof e && (i = null != (o = e.scope) ? o : i, n = e.onError);
+    "function" == typeof e && (n = e), e instanceof HTMLElement && (i = e);
+    const s = i.querySelectorAll(`[data-module="${Component.moduleName}"]`);
+    return isSupported() ? Array.from(s).map((e => {
         try {
-            return "defaults" in t && void 0 !== e ? new t(n, e) : new t(n)
-        } catch (o) {
-            return i && o instanceof Error ? i(o, {
-                element: n,
-                component: t,
-                config: e
-            }) : console.log(o), null
+            return "defaults" in Component && void 0 !== t ? new Component(e, t) : new Component(e)
+        } catch (i) {
+            return n && i instanceof Error ? n(i, {
+                element: e,
+                component: Component,
+                config: t
+            }) : console.log(i), null
         }
-    })).filter(Boolean) : (i ? i(new SupportError, {
-        component: t,
-        config: e
+    })).filter(Boolean) : (n ? n(new SupportError, {
+        component: Component,
+        config: t
     }) : console.log(new SupportError), [])
 }
 Tabs.moduleName = "govuk-tabs";
@@ -1192,6 +1192,7 @@ export {
     Button,
     CharacterCount,
     Checkboxes,
+    GOVUKFrontendComponent as Component,
     ErrorSummary,
     ExitThisPage,
     Header,

---

Action run for d3a19fc

[github-actions]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/all.bundle.js b/packages/govuk-frontend/dist/govuk/all.bundle.js
index 573acb78d..ac11e974b 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.js
@@ -2622,6 +2622,7 @@
   exports.Button = Button;
   exports.CharacterCount = CharacterCount;
   exports.Checkboxes = Checkboxes;
+  exports.Component = GOVUKFrontendComponent;
   exports.ErrorSummary = ErrorSummary;
   exports.ExitThisPage = ExitThisPage;
   exports.Header = Header;
diff --git a/packages/govuk-frontend/dist/govuk/all.bundle.mjs b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
index 84704048f..88a6cee95 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
@@ -2612,5 +2612,5 @@ function createAll(Component, config, createAllOptions) {
  * @property {OnErrorCallback<T>} [onError] - callback function if error throw by component on init
  */
 
-export { Accordion, Button, CharacterCount, Checkboxes, ErrorSummary, ExitThisPage, Header, NotificationBanner, PasswordInput, Radios, ServiceNavigation, SkipLink, Tabs, createAll, initAll, isSupported, version };
+export { Accordion, Button, CharacterCount, Checkboxes, GOVUKFrontendComponent as Component, ErrorSummary, ExitThisPage, Header, NotificationBanner, PasswordInput, Radios, ServiceNavigation, SkipLink, Tabs, createAll, initAll, isSupported, version };
 //# sourceMappingURL=all.bundle.mjs.map
diff --git a/packages/govuk-frontend/dist/govuk/all.mjs b/packages/govuk-frontend/dist/govuk/all.mjs
index 6b83bc638..1d37a44bd 100644
--- a/packages/govuk-frontend/dist/govuk/all.mjs
+++ b/packages/govuk-frontend/dist/govuk/all.mjs
@@ -14,4 +14,5 @@ export { SkipLink } from './components/skip-link/skip-link.mjs';
 export { Tabs } from './components/tabs/tabs.mjs';
 export { createAll, initAll } from './init.mjs';
 export { isSupported } from './common/index.mjs';
+export { GOVUKFrontendComponent as Component } from './govuk-frontend-component.mjs';
 //# sourceMappingURL=all.mjs.map

---

Action run for d3a19fc

[patrickpatrickpatrick]

From a developer perspective, looks good to me.