[HEAP] update browser destination code to load heap js v5 script

packages/browser-destinations/destinations/heap/src/__tests__/__snapshots__/index.test.ts.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Heap loading 1`] = `
+NodeList [
+  <script
+    src="https://cdn.us.heap-api.com/v5/heapjs-static/5.2.6/core/heap.js"
+    type="text/javascript"
+  />,
+  <script
+    src="https://cdn.us.heap-api.com/config/1/heap_config.js"
+    status="loaded"
+    type="text/javascript"
+  />,
+  <script>
+    // the emptiness
+  </script>,
+]
+`;

packages/browser-destinations/destinations/heap/src/__tests__/index.test.ts

@@ -1,6 +1,6 @@
 import { Analytics, Context } from '@segment/analytics-next'
 import heapDestination, { destination } from '../index'
-import { HEAP_TEST_ENV_ID, mockHeapJsHttpRequest } from '../test-utilities'
+import { HEAP_TEST_ENV_ID } from '../test-utilities'
 
 const subscriptions = [
   {
@@ -16,19 +16,19 @@ describe('Heap', () => {
   test('loading', async () => {
     jest.spyOn(destination, 'initialize')
 
-    mockHeapJsHttpRequest()
-
     const [event] = await heapDestination({ appId: HEAP_TEST_ENV_ID, subscriptions })
 
     await event.load(Context.system(), {} as Analytics)
     expect(destination.initialize).toHaveBeenCalled()
     expect(window.heap.appid).toEqual(HEAP_TEST_ENV_ID)
+
+    const scripts = window.document.querySelectorAll('script')
+    expect(scripts).toMatchSnapshot()
   })
+
   test('loading with cdn', async () => {
     jest.spyOn(destination, 'initialize')
 
-    mockHeapJsHttpRequest()
-
     const [event] = await heapDestination({
       appId: HEAP_TEST_ENV_ID,
       subscriptions,

packages/browser-destinations/destinations/heap/src/index.ts

@@ -1,15 +1,17 @@
 import type { Settings } from './generated-types'
 import type { BrowserDestinationDefinition } from '@segment/browser-destination-runtime/types'
 import { browserDestination } from '@segment/browser-destination-runtime/shim'
-import { HeapApi, UserConfig } from './types'
+import type { HeapApi, HeapMethods, UserConfig } from './types'
 import { defaultValues } from '@segment/actions-core'
 import trackEvent from './trackEvent'
 import identifyUser from './identifyUser'
+import { initScript } from './init-script'
 import { isDefined } from './utils'
 
 declare global {
   interface Window {
-    heap: HeapApi
+    heapReadyCb: Array<{ name: HeapMethods; fn: () => void }>
+    heap: Record<HeapMethods, (...args: any[]) => void> & HeapApi
   }
 }
 
@@ -58,9 +60,16 @@ export const destination: BrowserDestinationDefinition<Settings, HeapApi> = {
       required: false
     },
     trackingServer: {
-      label: 'Tracking Server',
+      label: 'Tracking Server (deprecated)',
       description:
-        'This is an optional setting. This is used to set up first-party data collection. For most cased this should not be set. For more information visit the heap [docs page](https://developers.heap.io/docs/set-up-first-party-data-collection-in-heap).',
+        'This is an optional setting. This is used to set up first-party data collection. For most cased this should not be set. For more information visit the heap [docs page](https://developers.heap.io/docs/set-up-first-party-data-collection-in-heap). This field is deprecated in favor of "ingestServer".',
+      type: 'string',
+      required: false
+    },
+    ingestServer: {
+      label: 'Ingest Server',
+      description:
+        'This is an optional setting. This is used to set up first-party data collection. For most cased this should not be set. For more information visit the heap [docs page](https://developers.heap.io/docs/web#ingestserver).',
       type: 'string',
       required: false
     },
@@ -89,24 +98,20 @@ export const destination: BrowserDestinationDefinition<Settings, HeapApi> = {
       disableTextCapture: settings.disableTextCapture || false,
       secureCookie: settings.secureCookie || false
     }
-
-    if (settings.trackingServer) {
-      config.trackingServer = settings.trackingServer
+    if (settings.ingestServer) {
+      config.ingestServer = settings.ingestServer
     }
 
-    // heap.appid and heap.config must be set before loading heap.js.
-    window.heap = window.heap || []
-    window.heap.appid = settings.appId
-    window.heap.config = config
+    initScript(settings.appId, config)
 
     if (isDefined(settings.hostname)) {
-      await deps.loadScript(`https://${settings.hostname}/js/heap-${settings.appId}.js`)
+      await deps.loadScript(`https://${settings.hostname}/config/${settings.appId}/heap_config.js`)
     } else {
-      await deps.loadScript(`https://cdn.heapanalytics.com/js/heap-${settings.appId}.js`)
+      await deps.loadScript(`https://cdn.us.heap-api.com/config/${settings.appId}/heap_config.js`)
     }
 
     // Explained here: https://stackoverflow.com/questions/14859058/why-does-the-segment-io-loader-script-push-method-names-args-onto-a-queue-which
-    await deps.resolveWhen(() => Object.prototype.hasOwnProperty.call(window, 'heap'), 100)
+    await deps.resolveWhen(() => window.heap.loaded === true, 300)
 
     return window.heap
   },

packages/browser-destinations/destinations/heap/src/init-script.ts

@@ -0,0 +1,69 @@
+import type { HeapMethods, UserConfig } from './types'
+
+/**
+ * Initialize the Heap script with the provided environment ID and configuration.
+ */
+export const initScript = (envId: string, config: UserConfig) => {
+  // Ensure heapReadyCb exists on the window object
+  window.heapReadyCb = window.heapReadyCb || []
+
+  // Ensure heap exists on the window object
+  window.heap = window.heap || ({} as any)
+
+  window.heap.load = function (
+    envId: string,
+    clientConfig: UserConfig = { disableTextCapture: false, secureCookie: false }
+  ): void {
+    window.heap.envId = envId
+    window.heap.clientConfig = clientConfig
+    window.heap.clientConfig.shouldFetchServerConfig = false
+
+    // Define all Heap API methods and add them to the heap object
+    const methods: HeapMethods[] = [
+      'init',
+      'startTracking',
+      'stopTracking',
+      'track',
+      'resetIdentity',
+      'identify',
+      'identifyHashed',
+      'getSessionId',
+      'getUserId',
+      'getIdentity',
+      'addUserProperties',
+      'addEventProperties',
+      'removeEventProperty',
+      'clearEventProperties',
+      'addAccountProperties',
+      'addAdapter',
+      'addTransformer',
+      'addTransformerFn',
+      'onReady',
+      'addPageviewProperties',
+      'removePageviewProperty',
+      'clearPageviewProperties',
+      'trackPageview'
+    ]
+
+    const createMethodProxy = (methodName: HeapMethods) => {
+      return function (...args: any[]) {
+        // Push method calls to heapReadyCb until the script is fully loaded
+        window.heapReadyCb.push({
+          name: methodName,
+          fn: () => {
+            if (window.heap[methodName]) {
+              window.heap[methodName](...args)
+            }
+          }
+        })
+      }
+    }
+
+    // Proxy all methods to heap
+    for (const method of methods) {
+      window.heap[method] = createMethodProxy(method)
+    }
+  }
+
+  window.heap.load(envId, config)
+}

packages/browser-destinations/destinations/heap/src/test-utilities.ts

@@ -1,12 +1,12 @@
 import { HeapApi } from './types'
 import { Subscription } from '@segment/browser-destination-runtime/types'
-import nock from 'nock'
 
 export const HEAP_TEST_ENV_ID = '1'
 
 export const createMockedHeapJsSdk = (): HeapApi => {
   return {
     appid: HEAP_TEST_ENV_ID,
+    envId: HEAP_TEST_ENV_ID,
     config: {
       disableTextCapture: true,
       secureCookie: true
@@ -17,6 +17,7 @@ export const createMockedHeapJsSdk = (): HeapApi => {
     addUserProperties: jest.fn()
   }
 }
+
 export const trackEventSubscription: Subscription = {
   partnerAction: 'trackEvent',
   name: 'Track Event',
@@ -58,7 +59,3 @@ export const identifyUserSubscription: Subscription = {
     }
   }
 }
-
-export const mockHeapJsHttpRequest = (): void => {
-  nock('https://cdn.heapanalytics.com').get(`/js/heap-${HEAP_TEST_ENV_ID}.js`).reply(200, {})
-}

packages/browser-destinations/destinations/heap/src/types.ts

@@ -1,5 +1,6 @@
 export type UserConfig = {
   trackingServer?: string
+  ingestServer?: string
   disableTextCapture: boolean
   secureCookie: boolean
 }
@@ -14,9 +15,38 @@ type EventProperties = {
 
 export type HeapApi = {
   appid: string
+  envId: string
   track: (eventName: string, eventProperties: EventProperties, library?: string) => void
-  load: () => void
+  load: (envId: string, clientConfig?: UserConfig) => void
+  loaded?: boolean
   config: UserConfig
+  clientConfig?: Partial<UserConfig> & { shouldFetchServerConfig?: boolean }
   identify: (identity: string) => void
   addUserProperties: (properties: UserProperties) => void
 }
+
+// Define types for Heap methods
+export type HeapMethods =
+  | 'init'
+  | 'startTracking'
+  | 'stopTracking'
+  | 'track'
+  | 'resetIdentity'
+  | 'identify'
+  | 'identifyHashed'
+  | 'getSessionId'
+  | 'getUserId'
+  | 'getIdentity'
+  | 'addUserProperties'
+  | 'addEventProperties'
+  | 'removeEventProperty'
+  | 'clearEventProperties'
+  | 'addAccountProperties'
+  | 'addAdapter'
+  | 'addTransformer'
+  | 'addTransformerFn'
+  | 'onReady'
+  | 'addPageviewProperties'
+  | 'removePageviewProperty'
+  | 'clearPageviewProperties'
+  | 'trackPageview'