Add ClientEmbedClient class

Allow users to create an instance of the client and initialise it later.

Don't expose internal methods and have a consistent 'init' method to use.

examples/kitchen-sink/client/main.js

@@ -4,15 +4,16 @@ import * as layout from '@financial-times/dotcom-ui-layout'
 import * as appContext from '@financial-times/dotcom-ui-app-context'
 import * as tracking from '@financial-times/n-tracking'
 import * as ads from '@financial-times/n-ads'
-import * as clientEmbed from '@financial-times/dotcom-ui-client-embed'
+import { ClientEmbedClient } from '@financial-times/dotcom-ui-client-embed'
 import { CLIENT_EMBED_ID } from '../constants.js'
 
 readyState.domready.then(() => {
   const flagsClient = flags.init()
   const appContextClient = appContext.init()
 
-  const clientEmbedClient = clientEmbed.init(CLIENT_EMBED_ID)
-  console.log(clientEmbedClient.getAll()) // eslint-disable-line no-console
+  const clientEmbedClientInstance = new ClientEmbedClient(CLIENT_EMBED_ID)
+  const clientEmbedClient = clientEmbedClientInstance.init()
+  console.log('Shared data', clientEmbedClient.getAll()) // eslint-disable-line no-console
 
   layout.init()
 

packages/dotcom-ui-client-embed/src/__test__/client/ClientEmbedClient.spec.ts

@@ -0,0 +1,17 @@
+import { ClientEmbedClient as subject } from '../../client'
+import loadClientEmbed from '../../client/loadClientEmbed'
+import ClientEmbedData from '../../client/ClientEmbedData'
+jest.mock('../../client/loadClientEmbed.ts')
+jest.mock('../../client/ClientEmbedData.ts')
+
+describe('dotcom-ui-app-context/src/client/ClientEmbedData', () => {
+  describe('.init()', () => {
+    it('returns the value of an existing client embed data', () => {
+      const instance = new subject('TEST')
+      instance.init()
+
+      expect(loadClientEmbed).toBeCalledWith('TEST')
+      expect(ClientEmbedData).toHaveBeenCalledTimes(1)
+    })
+  })
+})

packages/dotcom-ui-client-embed/src/client/index.ts

@@ -1,9 +1,15 @@
 import loadClientEmbed from './loadClientEmbed'
 import ClientEmbedData from './ClientEmbedData'
 
-const init = (id: string) => {
-  const data = loadClientEmbed(id)
-  return new ClientEmbedData(data)
+class ClientEmbedClient {
+  private id: string
+  constructor(id: string) {
+    this.id = id
+  }
+  init() {
+    const data = loadClientEmbed(this.id)
+    return new ClientEmbedData(data)
+  }
 }
 
-export { loadClientEmbed, ClientEmbedData, init }
+export { loadClientEmbed, ClientEmbedClient }