Add support for functions in component configs

Author: colinrotherham

packages/nhsuk-frontend/src/nhsuk/common/configuration/extract-config-by-namespace.mjs

@@ -1,3 +1,5 @@
+/* eslint-disable jsdoc/reject-any-type */
+
 import { isObject } from '../index.mjs'
 
 import { normaliseString } from './normalise-string.mjs'
@@ -74,7 +76,7 @@ export function extractConfigByNamespace(schema, dataset, namespace) {
  * Schema property for component config
  *
  * @typedef {object} SchemaProperty
- * @property {'string' | 'boolean' | 'number' | 'object' | 'array'} type - Property type
+ * @property {'string' | 'boolean' | 'number' | 'object' | 'array' | 'function'} type - Property type
  */
 
 /**
@@ -88,5 +90,6 @@ export function extractConfigByNamespace(schema, dataset, namespace) {
 
 /**
  * @typedef {keyof ObjectNested} NestedKey
- * @typedef {{ [key: string]: string | boolean | number | (string | number | boolean)[] | ObjectNested | undefined }} ObjectNested
+ * @typedef {string | boolean | number} NestedValue
+ * @typedef {{ [key: string]: NestedValue | NestedValue[] | ((...args: any[]) => NestedValue) | ObjectNested | undefined }} ObjectNested
  */

packages/nhsuk-frontend/src/nhsuk/common/configuration/normalise-dataset.jsdom.test.mjs

@@ -22,7 +22,8 @@ describe('normaliseDataset', () => {
         'anArray1': '[]',
         'anArray2': '[true]',
         'anArray3': '[1, 2, 3, 4]',
-        'anArray4': '["goose", "gull", "gannet"]'
+        'anArray4': '["goose", "gull", "gannet"]',
+        'aFunction': '() => "albatross"'
       })
     ).toEqual({
       aNumber: 1000,
@@ -40,7 +41,8 @@ describe('normaliseDataset', () => {
       anArray1: [],
       anArray2: [true],
       anArray3: [1, 2, 3, 4],
-      anArray4: ['goose', 'gull', 'gannet']
+      anArray4: ['goose', 'gull', 'gannet'],
+      aFunction: undefined // Functions are not normalised from datasets
     })
   })
 

packages/nhsuk-frontend/src/nhsuk/common/configuration/normalise-string.jsdom.test.mjs

@@ -143,12 +143,17 @@ describe('normaliseString', () => {
 
   it('skips unhandled property schema', () => {
     const inputArray = '["string", "array"]'
+    const inputFunction = '() => "albatross"'
     const inputObject = '{ not: "allowed" }'
 
     // Arrays in strings are ignored even with schema property type
     expect(normaliseString(inputArray)).toBe(inputArray)
     expect(normaliseString(inputArray, { type: 'array' })).toBeUndefined()
 
+    // Functions in strings are ignored even with schema property type
+    expect(normaliseString(inputFunction)).toBe(inputFunction)
+    expect(normaliseString(inputFunction, { type: 'function' })).toBeUndefined()
+
     // Objects in strings are ignored even with schema property type
     expect(normaliseString(inputObject)).toBe(inputObject)
     expect(normaliseString(inputObject, { type: 'object' })).toBeUndefined()

packages/nhsuk-frontend/src/nhsuk/configurable-component.jsdom.test.mjs

@@ -64,10 +64,13 @@ describe('ConfigurableComponent', () => {
 
       const testComponent = document.querySelector('#test-component')
       const configComponent = new MockConfigurableComponent(testComponent, {
-        aNumber: 100
+        aNumber: 100,
+        aFunction: (name) => name
       })
 
-      expect(configComponent.config).toMatchObject({ aNumber: 100 })
+      expect(configComponent.config.aNumber).toBe(100)
+      expect(configComponent.config.aFunction).toBeInstanceOf(Function)
+      expect(configComponent.config.aFunction('albatross')).toBe('albatross')
     })
 
     it('dataset configuration over the configuration object from class initialisation', () => {
@@ -77,10 +80,13 @@ describe('ConfigurableComponent', () => {
 
       const testComponent = document.querySelector('#test-component')
       const configComponent = new MockConfigurableComponent(testComponent, {
-        aNumber: 100
+        aNumber: 100,
+        aFunction: (name) => name
       })
 
-      expect(configComponent.config).toMatchObject({ aNumber: 12 })
+      expect(configComponent.config.aNumber).toBe(12)
+      expect(configComponent.config.aFunction).toBeInstanceOf(Function)
+      expect(configComponent.config.aFunction('albatross')).toBe('albatross')
     })
   })
 })

packages/nhsuk-frontend/src/nhsuk/lib/fixtures/configuration/mock-component.mjs

@@ -40,7 +40,8 @@ export class MockConfigurableComponent extends ConfigurableComponent {
       anArray1: { type: 'array' },
       anArray2: { type: 'array' },
       anArray3: { type: 'array' },
-      anArray4: { type: 'array' }
+      anArray4: { type: 'array' },
+      aFunction: { type: 'function' }
     }
   }
 
@@ -62,7 +63,8 @@ export class MockConfigurableComponent extends ConfigurableComponent {
     anArray1: [],
     anArray2: [true],
     anArray3: [1, 2, 3, 4],
-    anArray4: ['goose', 'gull', 'gannet']
+    anArray4: ['goose', 'gull', 'gannet'],
+    aFunction: (name) => name
   }
 }
 
@@ -233,6 +235,7 @@ export class MockConfigurableComponentMixed extends ConfigurableComponent {
  * @property {(string | number | boolean)[]} anArray2 - An array
  * @property {(string | number | boolean)[]} anArray3 - An array
  * @property {(string | number | boolean)[]} anArray4 - An array
+ * @property {(name: string) => string} aFunction - A function
  */
 
 /**