utneque 1.0.0

package/packages/browser/package.json

@@ -0,0 +1,106 @@
+{
+  "name": "@ht-sdks/events-sdk-js-browser",
+  "version": "1.1.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ht-sdks/events-sdk-js-mono",
+    "directory": "packages/browser"
+  },
+  "license": "MIT",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/pkg/index.js",
+  "types": "./dist/types/index.d.ts",
+  "browser": {
+    "./dist/cjs/node": "./dist/cjs/node/node.browser.js",
+    "./dist/cjs/node.js": "./dist/cjs/node/node.browser.js",
+    "./dist/pkg/node": "./dist/pkg/node/node.browser.js",
+    "./dist/pkg/node.js": "./dist/pkg/node/node.browser.js"
+  },
+  "files": [
+    "dist/",
+    "src/",
+    "!**/__tests__/**",
+    "!**/tester/**"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    ".": "yarn run -T turbo run --filter=@ht-sdks/events-sdk-js-browser...",
+    "build-prep": "sh scripts/build-prep.sh",
+    "version": "yarn run build-prep && git add src/generated/version.ts",
+    "umd": "webpack",
+    "eslint": "yarn run -T eslint",
+    "tsc": "yarn run -T tsc",
+    "jest": "yarn run -T jest",
+    "concurrently": "yarn run -T concurrently",
+    "watch": "yarn concurrently 'NODE_ENV=production WATCH=true yarn umd --watch' 'yarn pkg --watch'",
+    "build": "yarn clean && yarn build-prep && yarn concurrently 'NODE_ENV=production yarn umd' 'yarn pkg' 'yarn cjs'",
+    "candidate:cdn": "yarn . build && NODE_ENV=production PATH_PREFIX=browser/candidate bash scripts/release.sh",
+    "release:cdn": "yarn . build && NODE_ENV=production PATH_PREFIX=browser/release bash scripts/release.sh",
+    "pkg": "yarn tsc -p tsconfig.build.json",
+    "cjs": "yarn tsc -p tsconfig.build.json --outDir ./dist/cjs --module commonjs",
+    "clean": "rm -rf dist",
+    "lint": "yarn concurrently 'yarn:eslint .' 'yarn:tsc --noEmit'",
+    "test": "yarn jest"
+  },
+  "size-limit": [
+    {
+      "path": "dist/umd/index.js",
+      "limit": "28.9 KB"
+    }
+  ],
+  "dependencies": {
+    "@ht-sdks/events-sdk-js-core": "^1.1.0",
+    "@lukeed/uuid": "^2.0.0",
+    "@segment/analytics.js-video-plugins": "^0.2.1",
+    "@segment/facade": "^3.4.9",
+    "@segment/tsub": "^2.0.0",
+    "dset": "^3.1.2",
+    "js-cookie": "3.0.1",
+    "node-fetch": "^2.6.7",
+    "spark-md5": "^3.0.1",
+    "tslib": "^2.4.1",
+    "unfetch": "^4.1.0"
+  },
+  "devDependencies": {
+    "@internal/config": "0.0.0",
+    "@segment/analytics-browser-actions-braze": "^1.3.0",
+    "@segment/analytics.js-integration": "^3.3.3",
+    "@segment/analytics.js-integration-amplitude": "^3.3.3",
+    "@size-limit/preset-big-lib": "^7.0.8",
+    "@types/flat": "^5.0.1",
+    "@types/fs-extra": "^9.0.2",
+    "@types/jest-dev-server": "^5.0.0",
+    "@types/jquery": "^3.5.4",
+    "@types/js-cookie": "3.0.1",
+    "@types/jsdom": "^16.2.14",
+    "@types/mime": "^2.0.3",
+    "@types/node": "^16",
+    "@types/serve-handler": "^6.1.0",
+    "@types/spark-md5": "^3.0.2",
+    "aws-sdk": "^2.814.0",
+    "circular-dependency-plugin": "^5.2.2",
+    "compression-webpack-plugin": "^8.0.1",
+    "execa": "^4.1.0",
+    "flat": "^5.0.2",
+    "fs-extra": "^9.0.1",
+    "jest-dev-server": "^6.0.3",
+    "jest-environment-jsdom": "^28.1.1",
+    "jquery": "^3.5.1",
+    "jsdom": "^19.0.0",
+    "lighthouse": "^9.6.3",
+    "log-update": "^4.0.0",
+    "micro-memoize": "^4.0.9",
+    "mime": "^2.4.6",
+    "node-gyp": "^9.0.0",
+    "playwright": "^1.28.1",
+    "serve-handler": "^6.1.3",
+    "size-limit": "^7.0.8",
+    "terser-webpack-plugin": "^5.1.4",
+    "ts-loader": "^9.1.1",
+    "ts-node": "^10.8.0",
+    "webpack": "^5.76.0",
+    "webpack-bundle-analyzer": "^4.4.2",
+    "webpack-cli": "^4.8.0"
+  },
+  "packageManager": "yarn@3.4.1"
+}

package/packages/browser/qa/README.md

@@ -0,0 +1,41 @@
+### Advanced QA
+
+HtEvents contains a comprehensive QA test suite that verifies that E2E functionality is compatible with analytics.js classic.
+
+1. Compile HtEvents (browser)
+
+```sh
+$ yarn build
+```
+
+2. Grab list of test sources
+
+```sh
+export QA_SAMPLES=$(aws-okta exec dev-write -- chamber read analytics-next QA_SAMPLES -q)
+export QA_SOURCES=$(aws-okta exec dev-write -- chamber read analytics-next QA_SOURCES -q)
+```
+
+3. Run QA tests:
+
+```sh
+$ make test-qa ## if you'd like to run all tests in one go (generally slower)
+```
+
+or run individual tests (much faster)
+
+```sh
+$ yarn jest --runTestsByPath qa/__tests__/<test_path>
+```
+
+2.1. QAing HtEvents against all destinations
+
+```sh
+make test-qa-destinations
+```
+
+2.1.1 Debugging one specific destination
+
+```sh
+# Will open one Chrome instance for AJS Classic and one for AJS Next
+$ DESTINATION=amplitude DEBUG=true make test-qa-destinations
+```

package/packages/browser/qa/__fixtures__/snippets.ts

@@ -0,0 +1,148 @@
+export function next(writekey: string, obfuscate: boolean) {
+  return `
+    <html>
+    <head></head>
+    <script>
+      !(function () {
+        var htevents = (window.htevents = window.htevents || [])
+        if (!htevents.initialize)
+          if (htevents.invoked)
+            window.console &&
+              console.error &&
+              console.error('Hightouch snippet included twice.')
+          else {
+            htevents.invoked = !0
+            htevents.methods = [
+              'screen',
+              'register',
+              'deregister',
+              'trackSubmit',
+              'trackClick',
+              'trackLink',
+              'trackForm',
+              'pageview',
+              'identify',
+              'reset',
+              'group',
+              'track',
+              'ready',
+              'alias',
+              'debug',
+              'page',
+              'once',
+              'off',
+              'on',
+              'addSourceMiddleware',
+              'addIntegrationMiddleware',
+              'setAnonymousId',
+              'addDestinationMiddleware',
+            ]
+            htevents.factory = function (e) {
+              return function () {
+                var t = Array.prototype.slice.call(arguments)
+                t.unshift(e)
+                htevents.push(t)
+                return htevents
+              }
+            }
+            for (var e = 0; e < htevents.methods.length; e++) {
+              var key = htevents.methods[e]
+              htevents[key] = htevents.factory(key)
+            }
+            htevents.load = function (key, e) {
+              var t = document.createElement('script')
+              t.type = 'text/javascript'
+              t.async = !0
+              t.src = 'http://localhost:4000/dist/umd/standalone.js'
+              var n = document.getElementsByTagName('script')[0]
+              n.parentNode.insertBefore(t, n)
+              htevents._loadOptions = e
+            }
+            htevents.SNIPPET_VERSION = '4.13.1'
+            htevents._writeKey = '${writekey}'
+            htevents.load('${writekey}', { obfuscate: ${obfuscate} })
+          }
+      })()
+    </script>
+    <body>
+    next
+    <img id="taylor" src="https://i.insider.com/57d1eef909d29325008b6cfa?width=1100&format=jpeg&auto=webp" />
+    </body>
+    </html>
+  `
+}
+
+export function classic(writekey: string) {
+  return `
+  <html>
+  <head>
+  </head>
+    <script>!(function () {
+    var htevents = (window.htevents = window.htevents || [])
+    if (!htevents.initialize)
+      if (htevents.invoked)
+        window.console &&
+          console.error &&
+          console.error('Hightouch snippet included twice.')
+      else {
+        htevents.invoked = !0
+        htevents.methods = [
+          'screen',
+          'register',
+          'deregister',
+          'trackSubmit',
+          'trackClick',
+          'trackLink',
+          'trackForm',
+          'pageview',
+          'identify',
+          'reset',
+          'group',
+          'track',
+          'ready',
+          'alias',
+          'debug',
+          'page',
+          'once',
+          'off',
+          'on',
+          'addSourceMiddleware',
+          'addIntegrationMiddleware',
+          'setAnonymousId',
+          'addDestinationMiddleware',
+        ]
+        htevents.factory = function (e) {
+          return function () {
+            var t = Array.prototype.slice.call(arguments)
+            t.unshift(e)
+            htevents.push(t)
+            return htevents
+          }
+        }
+        for (var e = 0; e < htevents.methods.length; e++) {
+          var key = htevents.methods[e]
+          htevents[key] = htevents.factory(key)
+        }
+        htevents.load = function (key, e) {
+          var t = document.createElement('script')
+          t.type = 'text/javascript'
+          t.async = !0
+          t.src =
+            'https://cdn.hightouch-events.com/htevents.js/v1/' +
+            key +
+            '/htevents.classic.js'
+          var n = document.getElementsByTagName('script')[0]
+          n.parentNode.insertBefore(t, n)
+          htevents._loadOptions = e
+        }
+        htevents.SNIPPET_VERSION = '4.13.1'
+        htevents.load('${writekey}')
+      }
+  })()</script>
+  <body>
+  classic
+  <img id="taylor" src="https://i.insider.com/57d1eef909d29325008b6cfa?width=1100&format=jpeg&auto=webp" />
+  </body>
+  </html>
+`
+}

package/packages/browser/qa/__tests__/backwards-compatibility.test.ts

@@ -0,0 +1,180 @@
+import { difference } from 'lodash'
+import { browser } from '../lib/browser'
+import { run } from '../lib/runner'
+import { server } from '../lib/server'
+import { TEST_WRITEKEY } from '../../src/test-helpers/test-writekeys'
+
+
+jest.setTimeout(30000)
+
+describe('Backwards compatibility', () => {
+  test('provides all same properties', async () => {
+    const code = `(() => {
+      return [
+        ...new Set([
+          ...Object.getOwnPropertyNames(Object.getPrototypeOf(window.htevents)),
+          ...Object.getOwnPropertyNames(window.htevents)
+        ])
+      ].sort()
+    })()`
+
+    const results = await run({
+      browser: await browser(),
+      script: code,
+      serverURL: await server(),
+      writeKey: TEST_WRITEKEY,
+    })
+
+    const next = results.next.codeEvaluation as string[]
+    const classic = results.classic.codeEvaluation as string[]
+
+    const missing = difference(classic, next).filter(
+      (fn) =>
+        !fn.startsWith('_') &&
+        // These are inherited through Emitter
+        !['emit', 'off', 'on', 'once', 'require'].includes(fn)
+    )
+    expect(missing).toEqual([])
+  })
+
+  test('accesses user_id the same way', async () => {
+    const code = `(async () => {
+      await htevents.identify('Test User')
+      return htevents.user().id()
+    })()`
+
+    const results = await run({
+      browser: await browser(),
+      script: code,
+      serverURL: await server(),
+      writeKey: TEST_WRITEKEY,
+    })
+
+    const nextId = results.next.codeEvaluation
+    const classicId = results.classic.codeEvaluation
+
+    expect(nextId).toEqual(classicId)
+    expect(nextId).not.toBeFalsy()
+  })
+
+  test('accesses traits the same way', async () => {
+    const code = `(async () => {
+      await htevents.identify('Test User', { email: 'test@example.org' })
+      return htevents.user().traits()
+    })()`
+
+    const results = await run({
+      browser: await browser(),
+      script: code,
+      serverURL: await server(),
+      writeKey: TEST_WRITEKEY,
+    })
+
+    const nextId = results.next.codeEvaluation as { email: string }
+    const classicId = results.classic.codeEvaluation as { email: string }
+
+    expect(nextId).toEqual(classicId)
+    expect(nextId.email).toEqual('test@example.org')
+  })
+
+  test('loads bundles from custom domain CDN', async () => {
+    const code = `(async () => {})()`
+
+    const result = await run({
+      browser: await browser(),
+      script: code,
+      serverURL: await server(),
+      writeKey: TEST_WRITEKEY,
+    })
+
+    const resultString = result.next.bundleRequests.join()
+
+    expect(resultString).toContain(
+      'http://localhost:4000/dist/umd/standalone.js'
+    )
+    expect(resultString).toContain(
+      'http://localhost:4000/dist/umd/vendors-node_modules_segment_tsub_dist_index_js.bundle'
+    )
+    expect(resultString).toContain(
+      'http://localhost:4000/dist/umd/ajs-destination.bundle'
+    )
+    expect(resultString).toContain(
+      'http://localhost:4000/dist/umd/legacyVideos.bundle'
+    )
+    expect(resultString).toContain(
+      'http://localhost:4000/dist/umd/vendors-node_modules_segment_analytics_js-video-plugins_dist_index_umd_js.bundle'
+    )
+  })
+
+  test('event emitters emit the same properties', async () => {
+    const code = `(async () => {
+      let allEvents = {}
+      const htevents = window.htevents
+
+      htevents.on('page', (...args) => {
+        allEvents['page'] = [...args].filter(a => a !== undefined && Object.keys(a ?? {}).length > 0)
+      })
+
+      htevents.on('track', (...args) => {
+        allEvents['track'] = [...args].filter(a => a !== undefined && Object.keys(a ?? {}).length > 0)
+      })
+
+      htevents.on('identify', (...args) => {
+        allEvents['identify'] = [...args].filter(a => a !== undefined && Object.keys(a ?? {}).length > 0)
+      })
+
+      await htevents.page()
+      await htevents.identify('Hasbulla', { goat: true })
+      await htevents.track('hello world')
+
+      return allEvents
+    })()`
+
+    const result = await run({
+      browser: await browser(),
+      script: code,
+      serverURL: await server(),
+      writeKey: TEST_WRITEKEY,
+    })
+
+    const classic = result.classic.codeEvaluation as any
+    const next = result.next.codeEvaluation as any
+
+    expect(next['track']).toEqual(classic['track'])
+    expect(next['identify']).toEqual(classic['identify'])
+
+    expect(classic['page']).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "path": "/",
+          "referrer": "",
+          "search": "?type=classic&wk=D8frB7upBChqDN9PMWksNvZYDaKJIYo6",
+          "title": "",
+          "url": "http://localhost:4000/?type=classic&wk=D8frB7upBChqDN9PMWksNvZYDaKJIYo6",
+        },
+        Object {
+          "context": Object {
+            "page": Object {
+              "path": "/",
+              "referrer": "",
+              "search": "?type=classic&wk=D8frB7upBChqDN9PMWksNvZYDaKJIYo6",
+              "title": "",
+              "url": "http://localhost:4000/?type=classic&wk=D8frB7upBChqDN9PMWksNvZYDaKJIYo6",
+            },
+          },
+        },
+      ]
+    `)
+
+    const pagecallback = next['page']
+
+    expect(pagecallback[0]).toEqual(
+      expect.objectContaining({
+        ...classic['page'][0],
+        search: '?type=next&wk=D8frB7upBChqDN9PMWksNvZYDaKJIYo6',
+        url:
+          'http://localhost:4000/?type=next&wk=D8frB7upBChqDN9PMWksNvZYDaKJIYo6',
+      })
+    )
+  })
+})

package/packages/browser/qa/__tests__/destinations.test.ts

@@ -0,0 +1,101 @@
+import { difference } from 'lodash'
+import { reportMetrics } from '../lib/benchmark'
+import { browser } from '../lib/browser'
+import { run } from '../lib/runner'
+import { server } from '../lib/server'
+jest.setTimeout(100000)
+
+if (!process.env.QA_SAMPLES) {
+  throw new Error('no process.env.QA_SAMPLES')
+}
+const samples = JSON.parse(process.env.QA_SAMPLES)
+
+let destinations = Object.keys(samples)
+if (process.env.DESTINATION) {
+  destinations = [process.env.DESTINATION]
+}
+
+
+jest.retryTimes(10)
+describe('Destination Tests', () => {
+  // needs to be written as a string so it's not transpiled
+
+  // We use a 150ms fake interval between each to ensure that we don't any destination buffering
+  // e.g. Clicky, GA, and others will treat our events as bots (or will buffer them)
+  // if we deliver events too quickly.
+
+  const code = `(async () => {
+    await new Promise(res => window.htevents.page({}, res))
+
+    // second page so that assumePageView destinations stop complaining
+    await new Promise(res => setTimeout(res, Math.random() * 150 + 100))
+    await new Promise(res => window.htevents.page({}, res))
+
+    await new Promise(res => setTimeout(res, Math.random() * 150 + 100))
+    await new Promise(res => window.htevents.identify('Test', {
+      email: 'test@mctesting.org',
+    }, res))
+
+    await new Promise(res => setTimeout(res, Math.random() * 150 + 100))
+    await new Promise(res => window.htevents.track('Track!', {
+      leProp: 'propé',
+    }, res))
+  })()`
+
+  test.concurrent.each(destinations)(`%p`, async (destination) => {
+    const key = destination as keyof typeof samples
+    const writeKey = samples[key][0]
+
+    const [url, chrome] = await Promise.all([server(), browser()])
+
+    const results = await run({
+      browser: chrome,
+      script: code,
+      serverURL: url,
+      writeKey,
+      key,
+    })
+
+    const classicReqs = results.classic.networkRequests
+      .map((n) => {
+        const url = new URL(n.url)
+
+        return JSON.stringify({
+          host: url.host + url.pathname,
+          queryParams: Array.from(url.searchParams.entries())
+            .map((entry) => entry[0])
+            .filter((p) => !p.match(/^\d+$/))
+            .sort(),
+        })
+      })
+      .sort()
+
+    const nextReqs = results.next.networkRequests
+      .map((n) => {
+        const url = new URL(n.url)
+        return JSON.stringify({
+          host: url.host + url.pathname,
+          queryParams: Array.from(url.searchParams.entries())
+            .map((entry) => entry[0])
+            .filter((p) => !p.match(/^\d+$/))
+            .sort(),
+        })
+      })
+      .sort()
+
+    const nextMetrics = results.next.metrics
+    const classicMetrics = results.classic.metrics
+
+    if (process.env.STATS_WRITEKEY) {
+      await reportMetrics(nextMetrics, classicMetrics)
+    }
+
+    expect(nextReqs).not.toEqual([])
+    expect(classicReqs).not.toEqual([])
+
+    const missing = difference(classicReqs, nextReqs)
+
+    expect(missing).toEqual([])
+    expect(nextReqs).toEqual(expect.arrayContaining(classicReqs))
+  })
+})