@segment/analytics-browser-actions-adobe-target 1.0.0

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@segment/analytics-browser-actions-adobe-target",
+  "version": "1.0.0",
+  "license": "MIT",
+  "main": "./dist/cjs",
+  "module": "./dist/esm",
+  "scripts": {
+    "build": "yarn build:esm && yarn build:cjs",
+    "build-es": "tsc",
+    "build:cjs": "tsc --module commonjs --outDir ./dist/cjs",
+    "build:esm": "tsc --outDir ./dist/esm"
+  },
+  "typings": "./dist/esm",
+  "dependencies": {
+    "@segment/browser-destination-runtime": "^1.0.0"
+  },
+  "peerDependencies": {
+    "@segment/analytics-next": "*"
+  }
+}

package/src/__tests__/index.test.ts

@@ -0,0 +1,44 @@
+import { Analytics, Context } from '@segment/analytics-next'
+import adobeTarget, { destination } from '../index'
+import { Subscription } from '@segment/browser-destination-runtime/types'
+
+describe('Adobe Target Web', () => {
+  test('can load ATJS', async () => {
+    const subscriptions: Subscription[] = [
+      {
+        partnerAction: 'upsertProfile',
+        name: 'Upsert Profile',
+        enabled: true,
+        subscribe: 'type = "identify"',
+        mapping: {}
+      }
+    ]
+    const [event] = await adobeTarget({
+      client_code: 'segmentexchangepartn',
+      admin_number: '10',
+      version: '2.8.0',
+      cookie_domain: 'segment.com',
+      mbox_name: 'target-global-mbox',
+      subscriptions
+    })
+
+    jest.spyOn(destination, 'initialize')
+
+    await event.load(Context.system(), {} as Analytics)
+    expect(destination.initialize).toHaveBeenCalled()
+
+    const scripts = window.document.querySelectorAll('script')
+    expect(scripts).toMatchInlineSnapshot(`
+      NodeList [
+        <script
+          src="https://admin10.testandtarget.omniture.com/admin/rest/v1/libraries/atjs/download?client=segmentexchangepartn&version=2.8.0"
+          status="loaded"
+          type="text/javascript"
+        />,
+        <script>
+          // the emptiness
+        </script>,
+      ]
+    `)
+  })
+})

package/src/__tests__/utils.test.ts

@@ -0,0 +1,22 @@
+import { serializeProperties } from '../utils'
+
+describe('Utils', () => {
+  describe('serializeProperties', () => {
+    test('converts array properties to string', async () => {
+      const tags = ['leonardo', 'michelangelo', 'donatello', 'raphael']
+      const properties = {
+        eventName: 'purchase',
+        total: 42.42,
+        item: 'car',
+        itemTags: tags
+      }
+
+      expect(serializeProperties(properties)).toEqual({
+        eventName: 'purchase',
+        total: 42.42,
+        item: 'car',
+        itemTags: '["leonardo","michelangelo","donatello","raphael"]'
+      })
+    })
+  })
+})

package/src/generated-types.ts

@@ -0,0 +1,24 @@
+// Generated file. DO NOT MODIFY IT BY HAND.
+
+export interface Settings {
+  /**
+   * Your Adobe Target client code. To find your client code in Adobe Target, navigate to **Administration > Implementation**. The client code is shown at the top under Account Details.
+   */
+  client_code: string
+  /**
+   * Your Adobe Target admin number. To find your admin number, please follow the instructions in [Adobe Docs](https://experienceleague.adobe.com/docs/target/using/implement-target/client-side/at-js-implementation/deploy-at-js/implementing-target-without-a-tag-manager.html).
+   */
+  admin_number: string
+  /**
+   * The version of ATJS to use. Defaults to 2.8.0.
+   */
+  version: string
+  /**
+   * The name of the Adobe Target mbox to use. Defaults to `target-global-mbox`.
+   */
+  mbox_name: string
+  /**
+   * The domain from which you serve the mbox. Adobe Target recommends setting this value to your company's top-level domain.
+   */
+  cookie_domain: string
+}

package/src/index.ts

@@ -0,0 +1,86 @@
+import type { Settings } from './generated-types'
+import type { BrowserDestinationDefinition } from '@segment/browser-destination-runtime/types'
+import { browserDestination } from '@segment/browser-destination-runtime/shim'
+import { Adobe } from './types'
+import { initScript } from './init-script'
+
+import upsertProfile from './upsertProfile'
+import triggerView from './triggerView'
+import trackEvent from './trackEvent'
+
+declare global {
+  interface Window {
+    adobe: Adobe
+    targetPageParams: Function
+    pageParams: Object
+  }
+}
+
+export const destination: BrowserDestinationDefinition<Settings, Adobe> = {
+  name: 'Adobe Target Web',
+  slug: 'actions-adobe-target-web',
+  mode: 'device',
+
+  settings: {
+    client_code: {
+      label: 'Client Code',
+      description:
+        'Your Adobe Target client code. To find your client code in Adobe Target, navigate to **Administration > Implementation**. The client code is shown at the top under Account Details.',
+      required: true,
+      type: 'string'
+    },
+    admin_number: {
+      label: 'Admin number',
+      description:
+        'Your Adobe Target admin number. To find your admin number, please follow the instructions in [Adobe Docs](https://experienceleague.adobe.com/docs/target/using/implement-target/client-side/at-js-implementation/deploy-at-js/implementing-target-without-a-tag-manager.html).',
+      required: true,
+      type: 'string'
+    },
+    version: {
+      label: 'ATJS Version',
+      description: 'The version of ATJS to use. Defaults to 2.8.0.',
+      type: 'string',
+      choices: [
+        {
+          value: '2.8.0',
+          label: '2.8.0'
+        }
+      ],
+      default: '2.8.0',
+      required: true
+    },
+    mbox_name: {
+      label: 'Mbox Name',
+      description: 'The name of the Adobe Target mbox to use. Defaults to `target-global-mbox`.',
+      type: 'string',
+      required: true,
+      default: 'target-global-mbox'
+    },
+    cookie_domain: {
+      label: 'Cookie Domain',
+      description:
+        "The domain from which you serve the mbox. Adobe Target recommends setting this value to your company's top-level domain.",
+      type: 'string',
+      required: true
+    }
+  },
+
+  initialize: async ({ settings }, deps) => {
+    initScript(settings)
+
+    const targetUrl = 'testandtarget.omniture.com/admin/rest/v1/libraries/atjs/download'
+    const atjsUrl = `https://admin${settings.admin_number}.${targetUrl}?client=${settings.client_code}&version=${settings.version}`
+
+    await deps.loadScript(atjsUrl)
+    await deps.resolveWhen(() => Object.prototype.hasOwnProperty.call(window, 'adobe'), 100)
+    return window.adobe
+  },
+
+  actions: {
+    upsertProfile,
+    triggerView,
+    trackEvent
+  }
+}
+
+export default browserDestination(destination)

package/src/init-script.ts

@@ -0,0 +1,18 @@
+/* eslint-disable */
+// @ts-nocheck
+
+import { getPageParams } from './utils'
+
+export function initScript(settings) {
+  window.pageParams = {}
+  window.targetGlobalSettings = {
+    cookieDomain: settings.cookie_domain,
+    enabled: true
+  }
+
+  // DO NOT RENAME. This function is required by Adobe Target.
+  // Learn More: https://experienceleague.adobe.com/docs/target/using/implement-target/client-side/at-js-implementation/functions-overview/targetpageparams.html?lang=en
+  window.targetPageParams = function () {
+    return getPageParams()
+  }
+}

package/src/trackEvent/__tests__/index.test.ts

@@ -0,0 +1,85 @@
+import { Analytics, Context } from '@segment/analytics-next'
+import adobeTarget, { destination } from '../../index'
+import { Subscription } from '@segment/browser-destination-runtime/types'
+
+describe('Adobe Target Web', () => {
+  describe('#track', () => {
+    test('Calls track to track events', async () => {
+      const subscriptions: Subscription[] = [
+        {
+          partnerAction: 'trackEvent',
+          name: 'Track Event',
+          enabled: true,
+          subscribe: 'type = "track"',
+          mapping: {
+            userId: {
+              '@if': {
+                exists: {
+                  '@path': '$.userId'
+                },
+                then: {
+                  '@path': '$.userId'
+                },
+                else: {
+                  '@path': '$.anonymousId'
+                }
+              }
+            },
+            type: {
+              '@path': '$.event'
+            },
+            properties: {
+              '@path': '$.properties'
+            }
+          }
+        }
+      ]
+
+      const targetSettings = {
+        client_code: 'segmentexchangepartn',
+        admin_number: '10',
+        version: '2.8.0',
+        cookie_domain: 'segment.com',
+        mbox_name: 'target-global-mbox'
+      }
+
+      const trackParams = {
+        properties: {
+          purchase_amount: 42.21,
+          currency: 'USD',
+          item: 'Shirt'
+        }
+      }
+
+      const [event] = await adobeTarget({
+        ...targetSettings,
+        subscriptions
+      })
+
+      jest.spyOn(destination, 'initialize')
+
+      destination.actions.trackEvent.perform = jest.fn(destination.actions.trackEvent.perform)
+
+      await event.load(Context.system(), {} as Analytics)
+      expect(destination.initialize).toHaveBeenCalled()
+
+      await event.track?.(
+        new Context({
+          event: 'purchase',
+          type: 'track',
+          ...trackParams
+        })
+      )
+
+      expect(destination.actions.trackEvent.perform).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({
+          payload: {
+            ...trackParams,
+            type: 'purchase'
+          }
+        })
+      )
+    })
+  })
+})

package/src/trackEvent/generated-types.ts

@@ -0,0 +1,22 @@
+// Generated file. DO NOT MODIFY IT BY HAND.
+
+export interface Payload {
+  /**
+   * The event type. Please ensure the type entered here is registered and available.
+   */
+  type?: string
+  /**
+   * This will be sent to Adobe Target as an event parameter called "event_name".
+   */
+  eventName?: string
+  /**
+   * Parameters specific to the event.
+   */
+  properties?: {
+    [k: string]: unknown
+  }
+  /**
+   * A user’s unique visitor ID. Setting an Mbox 3rd Party ID allows for updates via the Adobe Target Cloud Mode Destination. For more information, please see our Adobe Target Destination documentation.
+   */
+  userId?: string
+}

package/src/trackEvent/index.ts

@@ -0,0 +1,74 @@
+import type { BrowserActionDefinition } from '@segment/browser-destination-runtime/types'
+import type { Settings } from '../generated-types'
+import type { Payload } from './generated-types'
+import { Adobe } from '../types'
+import { setMbox3rdPartyId, serializeProperties } from '../utils'
+
+// Adobe Target only takes certain event types as valid parameters. We are defaulting to "display".
+// Beware of changing it since other event types drop the event properties from AT's audience builder.
+
+const TARGET_EVENT_TYPE = 'display'
+
+const action: BrowserActionDefinition<Settings, Adobe, Payload> = {
+  title: 'Track Event',
+  description: 'Send user actions, such as clicks and conversions, to Adobe Target.',
+  platform: 'web',
+  defaultSubscription: 'type = "track"',
+  fields: {
+    type: {
+      label: 'Event Type',
+      description: 'The event type. Please ensure the type entered here is registered and available.',
+      type: 'string',
+      default: TARGET_EVENT_TYPE
+    },
+    eventName: {
+      label: 'Event Name',
+      description: 'This will be sent to Adobe Target as an event parameter called "event_name".',
+      type: 'string',
+      default: {
+        '@path': '$.event'
+      }
+    },
+    properties: {
+      label: 'Event Parameters',
+      description: 'Parameters specific to the event.',
+      type: 'object',
+      default: {
+        '@path': '$.properties'
+      }
+    },
+    userId: {
+      type: 'string',
+      description:
+        'A user’s unique visitor ID. Setting an Mbox 3rd Party ID allows for updates via the Adobe Target Cloud Mode Destination. For more information, please see our Adobe Target Destination documentation.',
+      label: 'Mbox 3rd Party ID',
+      default: {
+        '@if': {
+          exists: { '@path': '$.userId' },
+          then: { '@path': '$.userId' },
+          else: { '@path': '$.anonymousId' }
+        }
+      }
+    }
+  },
+  perform: (Adobe, event) => {
+    const payload = event.payload
+    setMbox3rdPartyId(payload.userId)
+
+    const event_params = {
+      ...serializeProperties(payload.properties),
+      event_name: payload.eventName
+    }
+
+    const params = {
+      mbox: event.settings.mbox_name,
+      preventDefault: true,
+      params: event_params,
+      type: payload.type
+    }
+
+    Adobe.target.trackEvent(params)
+  }
+}
+
+export default action

package/src/triggerView/__tests__/index.test.ts

@@ -0,0 +1,91 @@
+import { Analytics, Context } from '@segment/analytics-next'
+import adobeTarget, { destination } from '../../index'
+import { Subscription } from '@segment/browser-destination-runtime/types'
+
+describe('Adobe Target Web', () => {
+  describe('#page', () => {
+    test('tracks a view with the page() parameters', async () => {
+      const subscriptions: Subscription[] = [
+        {
+          partnerAction: 'triggerView',
+          name: 'Trigger View',
+          enabled: true,
+          subscribe: 'type = "page"',
+          mapping: {
+            viewName: { '@path': '$.name' },
+            pageParameters: { '@path': '$.properties' },
+            sendNotification: true,
+            traits: {
+              '@path': '$.traits'
+            }
+          }
+        }
+      ]
+
+      const targetSettings = {
+        client_code: 'segmentexchangepartn',
+        admin_number: '10',
+        version: '2.8.0',
+        cookie_domain: 'segment.com',
+        mbox_name: 'target-global-mbox'
+      }
+
+      const pageParams = {
+        name: 'The Test Suite',
+        properties: {
+          language: 'ES',
+          currency: 'MXN',
+          region: {
+            country_code: 'MX',
+            state: 'Mich'
+          }
+        }
+      }
+
+      const [event] = await adobeTarget({
+        ...targetSettings,
+        subscriptions
+      })
+
+      jest.spyOn(destination, 'initialize')
+
+      destination.actions.triggerView.perform = jest.fn(destination.actions.triggerView.perform)
+
+      await event.load(Context.system(), {} as Analytics)
+      expect(destination.initialize).toHaveBeenCalled()
+
+      await event.page?.(
+        new Context({
+          type: 'page',
+          ...pageParams
+        })
+      )
+
+      expect(destination.actions.triggerView.perform).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({
+          payload: {
+            viewName: 'The Test Suite',
+            pageParameters: {
+              currency: 'MXN',
+              language: 'ES',
+              region: { country_code: 'MX', state: 'Mich' }
+            },
+            sendNotification: true
+          }
+        })
+      )
+
+      expect(window.pageParams).toEqual({
+        page: {
+          language: 'ES',
+          currency: 'MXN',
+          region: {
+            country_code: 'MX',
+            state: 'Mich'
+          }
+        }
+      })
+    })
+  })
+})

package/src/triggerView/generated-types.ts

@@ -0,0 +1,22 @@
+// Generated file. DO NOT MODIFY IT BY HAND.
+
+export interface Payload {
+  /**
+   * Name of the view or page.
+   */
+  viewName: string
+  /**
+   * Parameters specific to the view or page.
+   */
+  pageParameters?: {
+    [k: string]: unknown
+  }
+  /**
+   * By default, notifications are sent to the Adobe Target backend for incrementing impression count.  If false, notifications are not sent for incrementing impression count.
+   */
+  sendNotification?: boolean
+  /**
+   * A user’s unique visitor ID. Setting an Mbox 3rd Party ID allows for updates via the Adobe Target Cloud Mode Destination. For more information, please see our Adobe Target Destination documentation.
+   */
+  userId?: string
+}

package/src/triggerView/index.ts

@@ -0,0 +1,68 @@
+import type { BrowserActionDefinition } from '@segment/browser-destination-runtime/types'
+import type { Settings } from '../generated-types'
+import type { Payload } from './generated-types'
+import { Adobe } from '../types'
+import { setPageParams, setMbox3rdPartyId } from '../utils'
+
+const action: BrowserActionDefinition<Settings, Adobe, Payload> = {
+  title: 'Trigger View',
+  defaultSubscription: 'type = "page"',
+  description: 'Send page-level data to Adobe Target.',
+  platform: 'web',
+  fields: {
+    viewName: {
+      type: 'string',
+      description: 'Name of the view or page.',
+      label: 'View Name',
+      default: {
+        '@path': '$.name'
+      },
+      required: true
+    },
+    pageParameters: {
+      type: 'object',
+      description: 'Parameters specific to the view or page.',
+      label: 'Page Parameters',
+      default: {
+        '@path': '$.properties'
+      }
+    },
+    sendNotification: {
+      type: 'boolean',
+      description:
+        'By default, notifications are sent to the Adobe Target backend for incrementing impression count.  If false, notifications are not sent for incrementing impression count. ',
+      label: 'Send Notifications to Adobe Target.',
+      default: true
+    },
+    userId: {
+      type: 'string',
+      description:
+        'A user’s unique visitor ID. Setting an Mbox 3rd Party ID allows for updates via the Adobe Target Cloud Mode Destination. For more information, please see our Adobe Target Destination documentation.',
+      label: 'Mbox 3rd Party ID',
+      default: {
+        '@if': {
+          exists: { '@path': '$.userId' },
+          then: { '@path': '$.userId' },
+          else: { '@path': '$.anonymousId' }
+        }
+      }
+    }
+  },
+  perform: (Adobe, event) => {
+    const sendNotification = event.payload.sendNotification
+    const pageParams = event.payload.pageParameters
+
+    setMbox3rdPartyId(event.payload.userId)
+
+    /*
+      NOTE:
+      Page data needs to be set before the call to adobe.target.triggerView.
+      This is because the page data needs to be part of the global pageParams object.
+    */
+    setPageParams({ page: { ...pageParams } })
+
+    Adobe.target.triggerView(event.payload.viewName, { page: sendNotification })
+  }
+}
+
+export default action

package/src/types.ts

@@ -0,0 +1,8 @@
+export type Adobe = {
+  target: Target
+}
+
+type Target = {
+  trackEvent: Function
+  triggerView: Function
+}

package/src/upsertProfile/__tests__/index.test.ts

@@ -0,0 +1,137 @@
+import { Analytics, Context } from '@segment/analytics-next'
+import adobeTarget, { destination } from '../../index'
+import { Subscription } from '@segment/browser-destination-runtime/types'
+
+describe('Adobe Target Web', () => {
+  describe('#identify', () => {
+    test('calls identify and simulates a login flow', async () => {
+      const subscriptions: Subscription[] = [
+        {
+          partnerAction: 'upsertProfile',
+          name: 'Upsert Profile',
+          enabled: true,
+          subscribe: 'type = "identify"',
+          mapping: {
+            userId: {
+              '@if': {
+                exists: {
+                  '@path': '$.userId'
+                },
+                then: {
+                  '@path': '$.userId'
+                },
+                else: {
+                  '@path': '$.anonymousId'
+                }
+              }
+            },
+            traits: {
+              '@path': '$.traits'
+            }
+          }
+        }
+      ]
+
+      const targetSettings = {
+        client_code: 'segmentexchangepartn',
+        admin_number: '10',
+        version: '2.8.0',
+        cookie_domain: 'segment.com',
+        mbox_name: 'target-global-mbox'
+      }
+
+      const identifyParams = {
+        traits: {
+          favorite_color: 'blue',
+          location: {
+            country_code: 'MX',
+            state: 'Mich'
+          }
+        }
+      }
+
+      const [event] = await adobeTarget({
+        ...targetSettings,
+        subscriptions
+      })
+
+      jest.spyOn(destination, 'initialize')
+
+      destination.actions.upsertProfile.perform = jest.fn(destination.actions.upsertProfile.perform)
+
+      await event.load(Context.system(), {} as Analytics)
+      expect(destination.initialize).toHaveBeenCalled()
+
+      await event.identify?.(
+        new Context({
+          anonymousId: 'random-id-42',
+          type: 'identify',
+          ...identifyParams
+        })
+      )
+
+      expect(destination.actions.upsertProfile.perform).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({
+          payload: {
+            userId: 'random-id-42',
+            traits: {
+              favorite_color: 'blue',
+              location: {
+                country_code: 'MX',
+                state: 'Mich'
+              }
+            }
+          }
+        })
+      )
+
+      expect(window.pageParams).toEqual({
+        mbox3rdPartyId: 'random-id-42',
+        profile: {
+          favorite_color: 'blue',
+          location: {
+            country_code: 'MX',
+            state: 'Mich'
+          }
+        }
+      })
+
+      await event.identify?.(
+        new Context({
+          userId: 'The-Real-ID',
+          anonymousId: 'random-id-42',
+          type: 'identify',
+          ...identifyParams
+        })
+      )
+
+      expect(destination.actions.upsertProfile.perform).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({
+          payload: {
+            userId: 'The-Real-ID',
+            traits: {
+              favorite_color: 'blue',
+              location: {
+                country_code: 'MX',
+                state: 'Mich'
+              }
+            }
+          }
+        })
+      )
+
+      expect(window.pageParams).toEqual({
+        mbox3rdPartyId: 'The-Real-ID',
+        profile: {
+          favorite_color: 'blue',
+          location: {
+            country_code: 'MX',
+            state: 'Mich'
+          }
+        }
+      })
+    })
+  })
+})

package/src/upsertProfile/generated-types.ts

@@ -0,0 +1,14 @@
+// Generated file. DO NOT MODIFY IT BY HAND.
+
+export interface Payload {
+  /**
+   * A user’s unique visitor ID. Setting an Mbox 3rd Party ID allows for updates via the Adobe Target Cloud Mode Destination. For more information, please see our Adobe Target Destination documentation.
+   */
+  userId?: string
+  /**
+   * Profile parameters specific to a user. Please note, Adobe recommends that PII is hashed prior to sending to Adobe.
+   */
+  traits?: {
+    [k: string]: unknown
+  }
+}

package/src/upsertProfile/index.ts

@@ -0,0 +1,64 @@
+import type { BrowserActionDefinition } from '@segment/browser-destination-runtime/types'
+import type { Settings } from '../generated-types'
+import { Adobe } from '../types'
+import type { Payload } from './generated-types'
+import { setPageParams, setMbox3rdPartyId } from '../utils'
+
+const action: BrowserActionDefinition<Settings, Adobe, Payload> = {
+  title: 'Upsert Profile',
+  description: 'Create or update a user profile in Adobe Target.',
+  platform: 'web',
+  defaultSubscription: 'type = "identify"',
+  fields: {
+    userId: {
+      type: 'string',
+      description:
+        'A user’s unique visitor ID. Setting an Mbox 3rd Party ID allows for updates via the Adobe Target Cloud Mode Destination. For more information, please see our Adobe Target Destination documentation.',
+      label: 'Mbox 3rd Party ID',
+      default: {
+        '@if': {
+          exists: { '@path': '$.userId' },
+          then: { '@path': '$.userId' },
+          else: { '@path': '$.anonymousId' }
+        }
+      }
+    },
+    traits: {
+      type: 'object',
+      description:
+        'Profile parameters specific to a user. Please note, Adobe recommends that PII is hashed prior to sending to Adobe.',
+      label: 'Profile Attributes',
+      defaultObjectUI: 'keyvalue'
+    }
+  },
+  perform: (Adobe, event) => {
+    /*
+       NOTE:
+       identify() and track() actions leverage the same function (adobe.target.trackEvent()) to send data to Adobe.
+       identify does not pass an event name, track does.
+    */
+    setMbox3rdPartyId(event.payload.userId)
+
+    /*
+      NOTE:
+      Profile data needs to be set before the call to adobe.target.trackEvent.
+      This is because the profile data needs to be part of the global pageParams object.
+    */
+    setPageParams({
+      profile: {
+        ...event.payload.traits
+      }
+    })
+
+    const params = {
+      mbox: event.settings.mbox_name,
+      params: {
+        event_name: 'profile_update' // DO NOT CHANGE. profile_update is used to differentiate between track and identify calls.
+      }
+    }
+
+    Adobe.target.trackEvent(params)
+  }
+}
+
+export default action

package/src/utils.ts

@@ -0,0 +1,32 @@
+/* eslint-disable */
+// @ts-nocheck
+
+export function getPageParams() {
+  return window.pageParams
+}
+
+export function setPageParams(params) {
+  return (window.pageParams = { ...window.pageParams, ...params })
+}
+
+export function setMbox3rdPartyId(id) {
+  setPageParams({ mbox3rdPartyId: id })
+}
+
+// Track does not accept arrays as valid properties, therefore we are stringifying them.
+export function serializeProperties(props: { [key: string]: unknown } | undefined) {
+  if (props === undefined) {
+    return {}
+  }
+
+  const serialized: { [key: string]: unknown } = {}
+
+  for (const key in props) {
+    serialized[key] = props[key]
+    if (Array.isArray(props[key])) {
+      serialized[key] = JSON.stringify(props[key])
+    }
+  }
+
+  return serialized
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "baseUrl": "."
+  },
+  "include": ["src"],
+  "exclude": ["dist", "**/__tests__"]
+}