utneque 1.0.0

package/packages/browser/src/lib/__tests__/is-thenable.test.ts

@@ -0,0 +1,39 @@
+import { isThenable } from '../is-thenable'
+
+describe('isThenable', () => {
+  test('es6 promises', () => {
+    const p = Promise.resolve(1)
+    expect(isThenable(p)).toBeTruthy()
+  })
+
+  test('on the prototype', () => {
+    class Foo {
+      then() {
+        return '123'
+      }
+    }
+    const p = new Foo()
+    expect(isThenable(p)).toBeTruthy()
+  })
+
+  test('on the pojo', () => {
+    const p = {
+      then: () => {
+        return '123'
+      },
+    }
+    expect(isThenable(p)).toBeTruthy()
+  })
+
+  test('unhappy path', () => {
+    expect(isThenable(null)).toBeFalsy()
+    expect(isThenable(undefined)).toBeFalsy()
+    expect(isThenable({})).toBeFalsy()
+    expect(
+      isThenable({
+        then: true,
+      })
+    ).toBeFalsy()
+    expect(isThenable(new (class Foo {})())).toBeFalsy()
+  })
+})

package/packages/browser/src/lib/__tests__/merged-options.test.ts

@@ -0,0 +1,123 @@
+import { mergedOptions } from '../merged-options'
+
+describe(mergedOptions, () => {
+  it('merges options', () => {
+    const merged = mergedOptions(
+      {
+        integrations: {
+          CustomerIO: {},
+          Amplitude: {
+            apiKey: '🍌',
+          },
+        },
+      },
+      {
+        integrations: {
+          CustomerIO: {
+            ghost: '👻',
+          },
+        },
+      }
+    )
+
+    expect(merged).toMatchInlineSnapshot(`
+      Object {
+        "Amplitude": Object {
+          "apiKey": "🍌",
+        },
+        "CustomerIO": Object {
+          "ghost": "👻",
+        },
+      }
+    `)
+  })
+
+  it('ignores options for integrations that arent returned by CDN', () => {
+    const merged = mergedOptions(
+      {
+        integrations: {
+          Amplitude: {
+            apiKey: '🍌',
+          },
+        },
+      },
+      {
+        integrations: {
+          // not in CDN
+          CustomerIO: {
+            ghost: '👻',
+          },
+        },
+      }
+    )
+
+    expect(merged).toMatchInlineSnapshot(`
+      Object {
+        "Amplitude": Object {
+          "apiKey": "🍌",
+        },
+      }
+    `)
+  })
+
+  it('does not attempt to merge non objects', () => {
+    const merged = mergedOptions(
+      {
+        integrations: {
+          CustomerIO: {
+            ghost: '👻',
+          },
+          Amplitude: {
+            apiKey: '🍌',
+          },
+        },
+      },
+      {
+        integrations: {
+          // disabling customerIO as an integration override
+          CustomerIO: false,
+        },
+      }
+    )
+
+    expect(merged).toMatchInlineSnapshot(`
+      Object {
+        "Amplitude": Object {
+          "apiKey": "🍌",
+        },
+        "CustomerIO": Object {
+          "ghost": "👻",
+        },
+      }
+    `)
+  })
+
+  it('works with boolean overrides', () => {
+    const cdn = {
+      integrations: {
+        'Hightouch.io': { apiHost: 'us-east-1.hightouch-events.com' },
+        'Google Tag Manager': {
+          ghost: '👻',
+        },
+      },
+    }
+    const overrides = {
+      integrations: {
+        All: false,
+        'Hightouch.io': { apiHost: 'mgs.instacart.com/v2' },
+        'Google Tag Manager': true,
+      },
+    }
+
+    expect(mergedOptions(cdn, overrides)).toMatchInlineSnapshot(`
+      Object {
+        "Google Tag Manager": Object {
+          "ghost": "👻",
+        },
+        "Hightouch.io": Object {
+          "apiHost": "mgs.instacart.com/v2",
+        },
+      }
+    `)
+  })
+})

package/packages/browser/src/lib/__tests__/on-page-change.test.ts

@@ -0,0 +1,74 @@
+import { onPageChange } from '../on-page-change'
+
+const helpers = {
+  dispatchEvent(event: 'pagehide' | 'visibilitychange') {
+    const target = event === 'pagehide' ? window : document
+    target.dispatchEvent(new Event(event))
+  },
+  setVisibilityState(state: DocumentVisibilityState) {
+    Object.defineProperty(document, 'visibilityState', {
+      value: state,
+      writable: true,
+    })
+  },
+  dispatchVisChangeEvent(state: DocumentVisibilityState) {
+    helpers.setVisibilityState(state)
+    helpers.dispatchEvent('visibilitychange')
+  },
+  dispatchPageHideEvent() {
+    helpers.dispatchEvent('pagehide')
+  },
+}
+
+beforeEach(() => {
+  helpers.setVisibilityState('visible')
+})
+
+describe('onPageChange', () => {
+  test('callback should fire on pagehide', () => {
+    const cb = jest.fn()
+    onPageChange(cb)
+    helpers.dispatchPageHideEvent()
+    expect(cb).toBeCalledTimes(1)
+  })
+
+  test('callback should fire if document becomes hidden', () => {
+    const cb = jest.fn()
+    onPageChange(cb)
+    helpers.dispatchVisChangeEvent('hidden')
+    expect(cb).toBeCalledTimes(1)
+  })
+
+  test('callback should fire if document becomes visible', () => {
+    const cb = jest.fn()
+    onPageChange(cb)
+    helpers.dispatchVisChangeEvent('visible')
+    expect(cb).toBeCalledTimes(1)
+  })
+
+  test('if both event handlers fire, callback should still fire only once', () => {
+    const cb = jest.fn()
+    onPageChange(cb)
+    helpers.dispatchVisChangeEvent('hidden')
+    helpers.dispatchPageHideEvent()
+    expect(cb).toBeCalledTimes(1)
+  })
+
+  test('if user leaves a tab, returns, and leaves again, callback should be called on each navigation', () => {
+    const cb = jest.fn()
+    onPageChange(cb)
+    helpers.dispatchVisChangeEvent('hidden')
+    helpers.dispatchVisChangeEvent('visible')
+    helpers.dispatchVisChangeEvent('hidden')
+    expect(cb).toBeCalledTimes(3)
+  })
+
+  test('if user navigates, callback should be passed appropriate "unloaded" value', () => {
+    const cb = jest.fn()
+    onPageChange(cb)
+    helpers.dispatchVisChangeEvent('hidden')
+    expect(cb).toBeCalledWith(true)
+    helpers.dispatchVisChangeEvent('visible')
+    expect(cb).toBeCalledWith(false)
+  })
+})

package/packages/browser/src/lib/__tests__/parse-cdn.test.ts

@@ -0,0 +1,88 @@
+import { JSDOM, VirtualConsole } from 'jsdom'
+import { getCDN } from '../parse-cdn'
+
+function withTag(tag: string) {
+  const html = `
+    <!DOCTYPE html>
+      <head>
+        ${tag}
+      </head>
+      <body>
+      </body>
+    </html>
+    `.trim()
+
+  const virtualConsole = new VirtualConsole()
+  const jsd = new JSDOM(html, {
+    runScripts: 'dangerously',
+    resources: 'usable',
+    url: 'https://hightouch.com',
+    virtualConsole,
+  })
+
+  const windowSpy = jest.spyOn(global, 'window', 'get')
+
+  const documentSpy = jest.spyOn(global, 'document', 'get')
+
+  jest.spyOn(console, 'warn').mockImplementationOnce(() => {})
+
+  windowSpy.mockImplementation(() => {
+    return jsd.window as unknown as Window & typeof globalThis
+  })
+
+  documentSpy.mockImplementation(
+    () => jsd.window.document as unknown as Document
+  )
+}
+
+beforeEach(async () => {
+  jest.restoreAllMocks()
+  jest.resetAllMocks()
+})
+
+it('detects the existing hightouch cdn', () => {
+  withTag(`
+    <script src="https://cdn.hightouch-events.com/analytics.js/v1/gA5MBlJXrtZaB5sMMZvCF6czfBcfzNO6/analytics.min.js" />
+  `)
+  expect(getCDN()).toMatchInlineSnapshot(`"https://cdn.hightouch-events.com"`)
+})
+
+it('should return the overridden cdn if window.htevents._cdn is mutated', () => {
+  withTag(`
+  <script src="https://cdn.hightouch-events.com/analytics.js/v1/gA5MBlJXrtZaB5sMMZvCF6czfBcfzNO6/analytics.min.js" />
+  `)
+  // @ts-ignore
+  ;(window.htevents as any) = {
+    _cdn: 'http://foo.cdn.com',
+  }
+  expect(getCDN()).toMatchInlineSnapshot(`"http://foo.cdn.com"`)
+})
+
+it('if analytics is not loaded yet, should still return cdn', () => {
+  // is this an impossible state?
+  // @ts-ignore
+  window.htevents = undefined as any
+  withTag(`
+  <script src="https://cdn.hightouch-events.com/analytics.js/v1/gA5MBlJXrtZaB5sMMZvCF6czfBcfzNO6/analytics.min.js" />
+  `)
+  expect(getCDN()).toMatchInlineSnapshot(`"https://cdn.hightouch-events.com"`)
+})
+
+it('detects custom cdns that match Hightouch in domain instrumentation patterns', () => {
+  withTag(`
+    <script src="https://my.cdn.domain/analytics.js/v1/gA5MBlJXrtZaB5sMMZvCF6czfBcfzNO6/analytics.min.js" />
+  `)
+  expect(getCDN()).toMatchInlineSnapshot(`"https://my.cdn.domain"`)
+})
+
+it('falls back to Hightouch if CDN is used as a proxy', () => {
+  withTag(`
+    <script src="https://my.cdn.proxy/custom-analytics.min.js" />
+  `)
+  expect(getCDN()).toMatchInlineSnapshot(`"https://cdn.hightouch-events.com"`)
+})
+
+it('falls back to Hightouch if the script is not at all present on the page', () => {
+  withTag('')
+  expect(getCDN()).toMatchInlineSnapshot(`"https://cdn.hightouch-events.com"`)
+})

package/packages/browser/src/lib/__tests__/pick.test.ts

@@ -0,0 +1,34 @@
+import { pick } from '../pick'
+
+describe(pick, () => {
+  it.each([
+    {
+      obj: { a: 1, b: '2', c: 3 },
+      keys: ['a', 'c'],
+      expected: { a: 1, c: 3 },
+    },
+    {
+      obj: { a: 1, '0': false, c: 3 },
+      keys: ['a', '0'],
+      expected: { a: 1, '0': false },
+    },
+    { obj: { a: 1, b: '2', c: 3 }, keys: [], expected: {} },
+    {
+      obj: { a: undefined, b: null, c: 1 },
+      keys: ['a', 'b'],
+      expected: { a: undefined, b: null },
+    },
+  ])('.pick($obj, $keys)', ({ obj, keys, expected }) => {
+    expect(pick(obj, keys as (keyof typeof obj)[])).toEqual(expected)
+  })
+  it('does not mutate object reference', () => {
+    const e = {
+      obj: { a: 1, '0': false, c: 3 },
+      keys: ['a', '0'],
+      expected: { a: 1, '0': false },
+    }
+    const ogObj = { ...e.obj }
+    pick(e.obj, e.keys)
+    expect(e.obj).toEqual(ogObj)
+  })
+})

package/packages/browser/src/lib/__tests__/pick.typedef.ts

@@ -0,0 +1,39 @@
+import { assertNotAny, assertIs } from '../../test-helpers/type-assertions'
+import { pick } from '../pick'
+
+{
+  // should work with literals
+  const res = pick({ id: 123 }, ['id'])
+
+  assertIs<{ id: number }>(res)
+  assertNotAny(res)
+}
+{
+  // should work if only keys are read-only
+  const obj: { id?: number } = {}
+  const res = pick(obj, ['id'] as const)
+  assertNotAny(res)
+  assertIs<{ id?: number }>(res)
+
+  // @ts-expect-error
+  assertIs<{ id: number }>(res)
+}
+
+{
+  // should work with keys as string
+  const res = pick({ id: 123 }, [] as string[])
+  assertNotAny(res)
+
+  assertIs<Partial<{ id: number }>>(res)
+  // @ts-expect-error - should be partial
+  assertIs<{ id: number }>(res)
+}
+
+{
+  // should work with object type
+  const res = pick({} as object, ['id'])
+  assertNotAny(res)
+  assertIs<object>(res)
+  // @ts-expect-error
+  assertIs<{ id: any }>(res)
+}

package/packages/browser/src/lib/bind-all.ts

@@ -0,0 +1,19 @@
+export default function bindAll<
+  ObjType extends { [key: string]: any },
+  KeyType extends keyof ObjType
+>(obj: ObjType): ObjType {
+  const proto = obj.constructor.prototype
+  for (const key of Object.getOwnPropertyNames(proto)) {
+    if (key !== 'constructor') {
+      const desc = Object.getOwnPropertyDescriptor(
+        obj.constructor.prototype,
+        key
+      )
+      if (!!desc && typeof desc.value === 'function') {
+        obj[key as KeyType] = obj[key].bind(obj)
+      }
+    }
+  }
+
+  return obj
+}

package/packages/browser/src/lib/browser-polyfill.ts

@@ -0,0 +1,23 @@
+export function shouldPolyfill(): boolean {
+  const browserVersionCompatList: { [browser: string]: number } = {
+    Firefox: 46,
+    Edge: 13,
+  }
+
+  // Unfortunately IE doesn't follow the same pattern as other browsers, so we
+  // need to check `isIE11` differently.
+  // @ts-expect-error
+  const isIE11 = !!window.MSInputMethodContext && !!document.documentMode
+
+  const userAgent = navigator.userAgent.split(' ')
+  const [browser, version] = userAgent[userAgent.length - 1].split('/')
+
+  return (
+    isIE11 ||
+    (browserVersionCompatList[browser] !== undefined &&
+      browserVersionCompatList[browser] >= parseInt(version))
+  )
+}
+
+// appName = Netscape IE / Edge
+// edge 13 Edge/13... same as FF

package/packages/browser/src/lib/client-hints/__tests__/index.test.ts

@@ -0,0 +1,66 @@
+import { clientHints } from '..'
+import {
+  highEntropyTestData,
+  lowEntropyTestData,
+} from '../../../test-helpers/fixtures/client-hints'
+import { UADataValues } from '../interfaces'
+
+describe('Client Hints API', () => {
+  beforeEach(() => {
+    ;(window.navigator as any).userAgentData = {
+      ...lowEntropyTestData,
+      getHighEntropyValues: jest
+        .fn()
+        .mockImplementation((hints: string[]): Promise<UADataValues> => {
+          let result = {}
+          Object.entries(highEntropyTestData).forEach(([k, v]) => {
+            if (hints.includes(k)) {
+              result = {
+                ...result,
+                [k]: v,
+              }
+            }
+          })
+          return Promise.resolve({
+            ...lowEntropyTestData,
+            ...result,
+          })
+        }),
+      toJSON: jest.fn(() => {
+        return lowEntropyTestData
+      }),
+    }
+  })
+
+  it('uses API when available', async () => {
+    let userAgentData = await clientHints()
+    expect(userAgentData).toEqual(lowEntropyTestData)
+    ;(window.navigator as any).userAgentData = undefined
+    userAgentData = await clientHints()
+    expect(userAgentData).toBe(undefined)
+  })
+
+  it('always gets low entropy hints', async () => {
+    const userAgentData = await clientHints()
+    expect(userAgentData).toEqual(lowEntropyTestData)
+  })
+
+  it('gets low entropy hints when client rejects high entropy promise', async () => {
+    ;(window.navigator as any).userAgentData = {
+      ...lowEntropyTestData,
+      getHighEntropyValues: jest.fn(() => Promise.reject()),
+      toJSON: jest.fn(() => lowEntropyTestData),
+    }
+
+    const userAgentData = await clientHints(['bitness'])
+    expect(userAgentData).toEqual(lowEntropyTestData)
+  })
+
+  it('gets specified high entropy hints', async () => {
+    const userAgentData = await clientHints(['bitness'])
+    expect(userAgentData).toEqual({
+      ...lowEntropyTestData,
+      bitness: '64',
+    })
+  })
+})

package/packages/browser/src/lib/client-hints/index.ts

@@ -0,0 +1,16 @@
+import { HighEntropyHint, NavigatorUAData, UADataValues } from './interfaces'
+
+export async function clientHints(
+  hints?: HighEntropyHint[]
+): Promise<UADataValues | undefined> {
+  const userAgentData = (navigator as any).userAgentData as
+    | NavigatorUAData
+    | undefined
+
+  if (!userAgentData) return undefined
+
+  if (!hints) return userAgentData.toJSON()
+  return userAgentData
+    .getHighEntropyValues(hints)
+    .catch(() => userAgentData.toJSON())
+}

package/packages/browser/src/lib/client-hints/interfaces.ts

@@ -0,0 +1,42 @@
+// https://wicg.github.io/ua-client-hints/#dictdef-navigatoruabrandversion
+export interface NavigatorUABrandVersion {
+  readonly brand: string
+  readonly version: string
+}
+
+// https://wicg.github.io/ua-client-hints/#dictdef-uadatavalues
+export interface UADataValues {
+  readonly brands?: NavigatorUABrandVersion[]
+  readonly mobile?: boolean
+  readonly platform?: string
+  readonly architecture?: string
+  readonly bitness?: string
+  readonly model?: string
+  readonly platformVersion?: string
+  /** @deprecated in favour of fullVersionList */
+  readonly uaFullVersion?: string
+  readonly fullVersionList?: NavigatorUABrandVersion[]
+  readonly wow64?: boolean
+}
+
+// https://wicg.github.io/ua-client-hints/#dictdef-ualowentropyjson
+export interface UALowEntropyJSON {
+  readonly brands: NavigatorUABrandVersion[]
+  readonly mobile: boolean
+  readonly platform: string
+}
+
+// https://wicg.github.io/ua-client-hints/#navigatoruadata
+export interface NavigatorUAData extends UALowEntropyJSON {
+  getHighEntropyValues(hints: HighEntropyHint[]): Promise<UADataValues>
+  toJSON(): UALowEntropyJSON
+}
+
+export type HighEntropyHint =
+  | 'architecture'
+  | 'bitness'
+  | 'model'
+  | 'platformVersion'
+  | 'uaFullVersion'
+  | 'fullVersionList'
+  | 'wow64'

package/packages/browser/src/lib/create-deferred.ts

@@ -0,0 +1,16 @@
+/**
+ * Return a promise that can be externally resolved
+ */
+export const createDeferred = <T>() => {
+  let resolve!: (value: T | PromiseLike<T>) => void
+  let reject!: (reason: any) => void
+  const promise = new Promise<T>((_resolve, _reject) => {
+    resolve = _resolve
+    reject = _reject
+  })
+  return {
+    resolve,
+    reject,
+    promise,
+  }
+}

package/packages/browser/src/lib/csp-detection.ts

@@ -0,0 +1,8 @@
+type CSPErrorEvent = SecurityPolicyViolationEvent & {
+  disposition?: 'enforce' | 'report'
+}
+export const isAnalyticsCSPError = (e: CSPErrorEvent) => {
+  return (
+    e.disposition !== 'report' && e.blockedURI.includes('cdn.hightouch-events')
+  )
+}

package/packages/browser/src/lib/embedded-write-key.ts

@@ -0,0 +1,24 @@
+declare global {
+  interface Window {
+    analyticsWriteKey?: string
+  }
+}
+
+// This variable is used as an optional fallback for when customers
+// host or proxy their own analytics.js.
+try {
+  window.analyticsWriteKey = '__WRITE_KEY__'
+} catch (_) {
+  // @ eslint-disable-next-line
+}
+
+export function embeddedWriteKey(): string | undefined {
+  if (window.analyticsWriteKey === undefined) {
+    return undefined
+  }
+
+  // this is done so that we don't accidentally override every reference to __write_key__
+  return window.analyticsWriteKey !== ['__', 'WRITE', '_', 'KEY', '__'].join('')
+    ? window.analyticsWriteKey
+    : undefined
+}

package/packages/browser/src/lib/fetch.ts

@@ -0,0 +1,10 @@
+import unfetch from 'unfetch'
+import { getGlobal } from './get-global'
+
+/**
+ * Wrapper around native `fetch` containing `unfetch` fallback.
+ */
+export const fetch: typeof global.fetch = (...args) => {
+  const global = getGlobal()
+  return ((global && global.fetch) || unfetch)(...args)
+}

package/packages/browser/src/lib/get-global.ts

@@ -0,0 +1,16 @@
+// This an imperfect polyfill for globalThis
+export const getGlobal = () => {
+  if (typeof globalThis !== 'undefined') {
+    return globalThis
+  }
+  if (typeof self !== 'undefined') {
+    return self
+  }
+  if (typeof window !== 'undefined') {
+    return window
+  }
+  if (typeof global !== 'undefined') {
+    return global
+  }
+  return null
+}

package/packages/browser/src/lib/get-process-env.ts

@@ -0,0 +1,11 @@
+/**
+ * Returns `process.env` if it is available in the environment.
+ * Always returns an object make it similarly easy to use as `process.env`.
+ */
+export function getProcessEnv(): { [key: string]: string | undefined } {
+  if (typeof process === 'undefined' || !process.env) {
+    return {}
+  }
+
+  return process.env
+}