fix: return same SDK instance when calling init multiple times (#1173)

lib/initialize.ts

@@ -5,9 +5,10 @@ export default function createInitializer(
   currentWindow: Window,
   apiCreator: (channel: Channel, data: ConnectMessage, window: Window) => KnownSDK
 ) {
-  const connectDeferred = createDeferred()
+  const connectDeferred =
+    createDeferred<[channel: Channel, message: ConnectMessage, messageQueue: unknown[]]>()
 
-  connectDeferred.promise.then(([channel]: [Channel]) => {
+  connectDeferred.promise.then(([channel]) => {
     const { document } = currentWindow
     document.addEventListener('focus', () => channel.send('setActive', true), true)
     document.addEventListener('blur', () => channel.send('setActive', false), true)
@@ -17,6 +18,7 @@ export default function createInitializer(
   // messages before `init` is called.
   connect(currentWindow, (...args) => connectDeferred.resolve(args))
 
+  let initializedSdks: Promise<[sdk: KnownSDK, customSdk: any]> | undefined
   return function init(
     initCb: (sdk: KnownSDK, customSdk: any) => any,
     {
@@ -34,8 +36,9 @@ In order for the ui-extension-sdk to function correctly, your app needs to be ru
 Learn more about local development with the ui-extension-sdk here:
   https://www.contentful.com/developers/docs/extensibility/ui-extensions/faq/#how-can-i-use-the-ui-extension-sdk-locally`)
     }
-    connectDeferred.promise.then(
-      ([channel, params, messageQueue]: [Channel, ConnectMessage, unknown[]]) => {
+
+    if (!initializedSdks) {
+      initializedSdks = connectDeferred.promise.then(([channel, params, messageQueue]) => {
         const api = apiCreator(channel, params, currentWindow)
 
         let customApi
@@ -51,9 +54,13 @@ Learn more about local development with the ui-extension-sdk here:
           ;(channel as any)._handleMessage(m)
         })
 
-        // Hand over control to the developer.
-        initCb(api, customApi)
-      }
+        return [api, customApi]
+      })
+    }
+
+    initializedSdks.then(([sdk, customSdk]) =>
+      // Hand over control to the developer.
+      initCb(sdk, customSdk)
     )
   }
 }

test/unit/initialize.spec.ts

@@ -35,7 +35,8 @@ describe('initializeApi(currentWindow, apiCreator)', function () {
       const cb = sinon.spy()
       sendConnect(this.dom)
       await wait()
-      await this.init(cb)
+      this.init(cb)
+      await wait()
       expect(cb).to.be.called // eslint-disable-line no-unused-expressions
     })
 
@@ -63,6 +64,19 @@ describe('initializeApi(currentWindow, apiCreator)', function () {
 
       sendConnect(this.dom)
     })
+
+    it('receives same sdk instance when init is called twice', async function () {
+      const cbA = sinon.spy()
+      const cbB = sinon.spy()
+      sendConnect(this.dom)
+      this.init(cbA)
+      this.init(cbB)
+      await wait()
+
+      expect(cbA).to.be.called // eslint-disable-line no-unused-expressions
+      expect(cbB).to.be.called // eslint-disable-line no-unused-expressions
+      expect(cbA.getCall(0).args[0]).to.eq(cbB.getCall(0).args[0])
+    })
   })
 
   it('calls apiCreator with channel and params', function () {