utneque 1.0.0

package/.yarnrc.yml

@@ -0,0 +1,15 @@
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: "@yarnpkg/plugin-workspace-tools"
+  - path: .yarn/plugins/@yarnpkg/plugin-constraints.cjs
+    spec: "@yarnpkg/plugin-constraints"
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
+    spec: "@yarnpkg/plugin-typescript"
+
+preferInteractive: true
+
+yarnPath: .yarn/releases/yarn-3.4.1.cjs

package/jest.config.js

@@ -0,0 +1,18 @@
+const { createJestTSConfig } = require('@internal/config')
+
+/**
+ * This config detects our monorepo, and allows
+ * you to run every single package test in a single jest instance using 'yarn jest'.
+ * Thus, `yarn jest --watch` works as expected (unlike say, when using turborepo)
+ */
+module.exports = () =>
+  createJestTSConfig(__dirname, {
+    projects: [
+      // being explicit here, as a globbing bug means that using packages/* can cause problems in non-worktrees (haven't fully investigated yet).
+      '<rootDir>/packages/core',
+      '<rootDir>/packages/node',
+      '<rootDir>/packages/browser',
+      '<rootDir>/packages/consent/consent-tools',
+      '<rootDir>/packages/consent/consent-wrapper-onetrust',
+    ],
+  })

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "utneque",
+  "version": "1.0.0",
+  "workspaces": [
+    "examples/*",
+    "packages/*",
+    "packages/consent/*"
+  ],
+  "engines": {
+    "node": "^16.16.0"
+  },
+  "packageManager": "yarn@3.4.1",
+  "devDependencies": {
+    "@changesets/changelog-github": "^0.4.5",
+    "@changesets/cli": "^2.23.2",
+    "@npmcli/promise-spawn": "^3.0.0",
+    "@types/express": "4",
+    "@types/jest": "^28.1.1",
+    "@types/lodash": "^4",
+    "@types/node-fetch": "^2.6.2",
+    "@typescript-eslint/eslint-plugin": "^5.21.0",
+    "@typescript-eslint/parser": "^5.21.0",
+    "concurrently": "^7.6.0",
+    "eslint": "^8.14.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jest": "^27.2.2",
+    "eslint-plugin-prettier": "^4.0.0",
+    "express": "^4.18.2",
+    "get-monorepo-packages": "^1.2.0",
+    "husky": "^8.0.0",
+    "jest": "^28.1.0",
+    "lint-staged": "^13.0.0",
+    "lodash": "^4.17.21",
+    "nock": "^13.3.0",
+    "node-gyp": "^9.0.0",
+    "prettier": "^2.6.2",
+    "ts-jest": "^28.0.4",
+    "ts-node": "^10.8.0",
+    "turbo": "^1.10.14",
+    "typescript": "^4.7.0",
+    "webpack": "^5.76.0",
+    "webpack-dev-server": "^4.15.1"
+  },
+  "resolutions": {
+    "@ht-sdks/events-sdk-js-browser": "workspace:*",
+    "@ht-sdks/events-sdk-js-node": "workspace:*",
+    "@ht-sdks/events-sdk-js-core": "workspace:*"
+  },
+  "author": "ElzaLeuschke",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/KaileeJerde/utneque.git"
+  },
+  "bugs": {
+    "url": "https://github.com/KaileeJerde/utneque.git/issues"
+  },
+  "homepage": "https://github.com/KaileeJerde/utneque.git"
+}

package/packages/browser/.eslintrc.js

@@ -0,0 +1,9 @@
+/** @type { import('eslint').Linter.Config } */
+module.exports = {
+  ignorePatterns: ['e2e-tests', 'qa', '/*.tmp.*/'],
+  extends: ['../../.eslintrc'],
+  env: {
+    node: true, // TODO: change to false when node is abstracted out
+    browser: true,
+  },
+}

package/packages/browser/.lintstagedrc.js

@@ -0,0 +1 @@
+module.exports = require("@internal/config").lintStagedConfig

package/packages/browser/ARCHITECTURE.md

@@ -0,0 +1,48 @@
+# Architecture
+
+## Codebases
+
+Javascript event tracking can be thought of as two different codebases:
+
+- [events-sdk-js-mono](https://github.com/ht-sdks/events-sdk-js-mono): All core functionality
+- Legacy client side destinations and plugins
+
+## Core
+
+Some of the bigger core modules are briefly outlined here -
+
+- arguments-resolver: Responsible for reshuffling arguments in event calls
+- context: Responsible for building context objects for different events
+- emitter: Responsible for emitting events and adding listeners for them
+- events: Responsible for building the different events (track, page, etc), and normalizing those events
+- logger: Responsible for building and flushing the logs that will be carried around in an events context object
+- queue: The heart of events-sdk-js, the queue is responsible for managing events which will be delivered to plugins and destinations, and handles things such as retries, timeouts, and delivery reliability
+- user: Responsible for all of the logic built around an analytics user
+
+The general end to end flow of events-sdk-js core is as follows:
+
+1. Legacy settings and destinations are loaded from a settings object passed at initialization
+2. The HtEvents object is instantiated with the loaded settings, and sets up things such as new/existing users and an event queue.
+3. Events are built and queued when a user makes a call (ie. analytics.track())
+4. The event is dispatched, goes through all enabled plugins, and is finally sent through the hightouch.io plugin to get the data into hightouch
+
+## Everything is a Plugin
+
+When developing against events-sdk-js you will likely be writing plugins, which can augment events-sdk-js functionality and enrich data. Plugins are isolated chunks which you can build, test, version, and deploy independently of the rest of the codebase. Extensions are bounded by events-sdk-js which handles things such as observability, retries, and error management.
+
+Plugins can be of two different priorities:
+
+- Critical: events-sdk-js should expect this plugin to be loaded before starting event delivery
+- Non-critical: events-sdk-js can start event delivery before this plugin has finished loading
+
+and can be of five different types:
+
+- Before: Pleguns that need to be run before any other plugins are run. An example of this would be validating events before passing them along to other plugins.
+- After: Plugins that need to run after all other plugins have run. An example of this is the hightouch.io integration, which will wait for destinations to succeed or fail so that it can send its observability metrics.
+- Destination: Destinations to send the event to (ie. legacy destinations). Does not modify the event and failure does not halt execution.
+- Enrichment: Modifies an event, failure here could halt the event pipeline.
+- Utility: Plugins that change events-sdk-js functionality and don't fall into the other categories.
+
+## Observability
+
+Every event and plugin has a context object, which contains both metrics and logs that were collected throughout their lifetime. Logs can be used for debugging, and the metrics will be included when the event is sent to Hightouch.

package/packages/browser/LICENSE.MD

@@ -0,0 +1,45 @@
+The MIT License (MIT)
+
+Copyright © 2023 Hightouch
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+---
+
+The MIT License (MIT)
+
+Copyright © 2021 Segment
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/packages/browser/Makefile

@@ -0,0 +1,64 @@
+BIN := ./node_modules/.bin
+yarn_run := yarn run -T browser
+
+help: ## Lists all available make tasks and some short documentation about them
+	@grep -E '^[a-zA-Z0-9_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-24s\033[0m %s\n", $$1, $$2}'
+.PHONY: help
+
+
+## Basic repo maintenance
+
+# Installs npm dependencies
+node_modules:
+	yarn install --immutable
+	@touch $@
+
+build-browser: build # build dependencies
+	$(yarn_run) umd --no-stats
+.PHONY: build-browser
+
+build: ## Builds libraries in prod mode, and all dependencies
+	yarn run -T browser . build
+.PHONY: build
+
+clean: ## Clean the build directory
+	rm -rf dist generated
+.PHONY: clean
+
+## Test Commands
+
+tdd: node_modules ## Runs unit tests in watch mode
+	$(yarn_run) test --watch
+.PHONY: tdd
+
+test-unit: node_modules ## Runs unit tests
+	$(yarn_run) test
+.PHONY: test-unit
+
+test-coverage: node_modules ## Runs unit tests with coverage
+	$(yarn_run) test --coverage --forceExit
+.PHONY: test-coverage
+
+test-qa: build-browser ## Runs all QA tests in a single command
+	$(yarn_run) test --runTestsByPath qa/__tests__/*.test.ts --testPathIgnorePatterns qa/__tests__/destinations.test.ts --reporters="default" --reporters="<rootDir>/qa/lib/jest-reporter.js" ${args}
+.PHONY: test-coverage
+
+test-qa-destinations: build-browser ## Runs Destination QA tests. options. DESTINATION=amplitude DEBUG=true
+	$(yarn_run) test --forceExit --runTestsByPath qa/__tests__/destinations.test.ts --reporters="default" --reporters="<rootDir>/qa/lib/jest-reporter.js" ${args}
+.PHONY: test-coverage
+
+test-integration: build ## Runs all integration tests in a single command
+	$(yarn_run) test --forceExit --runTestsByPath e2e-tests/**/*.test.ts ${args}
+.PHONY: test-coverage
+
+test-perf: build ## Runs all integration tests in a single command
+	$(yarn_run) test --forceExit --runTestsByPath e2e-tests/performance/*.test.ts ${args}
+.PHONY: test-coverage
+
+lint: node_modules ## Lints the source code
+	$(yarn_run) lint
+.PHONY: lint
+
+analyze:
+	NODE_ENV=production $(BIN)/webpack --profile --json > stats.json && $(BIN)/webpack-bundle-analyzer --port 4200 stats.json
+.PHONY: analyze

package/packages/browser/README.md

@@ -0,0 +1,227 @@
+# Events Javascript SDK
+
+## Installation via CDN
+
+To integrate the JavaScript SDK with your website, place the following code snippet in the `<head>` section of your website.
+
+```javascript
+<script type="text/javascript">
+!function(){var e=window.htevents=window.htevents||[];if(!e.initialize)if(e.invoked)window.console&&console.error&&console.error("Hightouch snippet included twice.");else{e.invoked=!0,e.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"],e.factory=function(t){return function(){var n=Array.prototype.slice.call(arguments);return n.unshift(t),e.push(n),e}};for(var t=0;t<e.methods.length;t++){var n=e.methods[t];e[n]=e.factory(n)}e.load=function(t,n){var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src="https://cdn.hightouch-events.com/browser/release/v1-latest/events.min.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(o,r),e._loadOptions=n,e._writeKey=t},e.SNIPPET_VERSION="0.0.1",
+e.load(<WRITE_KEY>,{apiHost:<DATA_PLANE_URL>}),
+e.page()}}();
+</script>
+```
+
+`window.htevents.track(...)` will then be available for use.
+
+### Alternative installation using NPM
+
+1. Install the package
+
+```sh
+# npm
+npm install @ht-sdks/events-sdk-js-browser
+
+# yarn
+yarn add @ht-sdks/events-sdk-js-browser
+
+# pnpm
+pnpm add @ht-sdks/events-sdk-js-browser
+```
+
+2. Import the package into your project and you're good to go (with working types)!
+
+```ts
+import { HtEventsBrowser } from '@ht-sdks/events-sdk-js-browser'
+
+const htevents = HtEventsBrowser.load({ writeKey: '<YOUR_WRITE_KEY>' })
+
+htevents.identify('hello world')
+
+document.body?.addEventListener('click', () => {
+  htevents.track('document body clicked!')
+})
+```
+
+## Lazy / Delayed Loading
+You can load a buffered version of htevents that requires `.load` to be explicitly called before initiating any network activity. This can be useful if you want to wait for a user to consent before fetching any tracking destinations or sending buffered events to hightouch.
+
+- ⚠️ ️`.load` should only be called _once_.
+
+```ts
+export const htevents = new HtEventsBrowser()
+
+htevents.identify("hello world")
+
+if (userConsentsToBeingTracked) {
+    htevents.load({ writeKey: '<YOUR_WRITE_KEY>' }) // destinations loaded, enqueued events are flushed
+}
+```
+
+## Error Handling
+### Handling initialization errors
+If you want to catch initialization errors, you can do the following:
+```ts
+export const htevents = new HtEventsBrowser();
+htevents
+  .load({ writeKey: "MY_WRITE_KEY" })
+  .catch((err) => ...);
+```
+
+## Usage in Common Frameworks / SPAs
+
+### Vanilla React
+```tsx
+import { HtEventsBrowser } from '@ht-sdks/events-sdk-js-browser'
+
+// We can export this instance to share with rest of our codebase.
+export const htevents = HtEventsBrowser.load({ writeKey: '<YOUR_WRITE_KEY>' })
+
+const App = () => (
+  <div>
+    <button onClick={() => htevents.track('hello world')}>Track</button>
+  </div>
+)
+```
+
+
+
+### Vue
+
+1. Export htevents instance. E.g. `services/hightouch.ts`
+
+```ts
+import { HtEventsBrowser } from '@ht-sdks/events-sdk-js-browser'
+
+export const htevents = HtEventsBrowser.load({
+  writeKey: '<YOUR_WRITE_KEY>',
+})
+```
+
+2. in `.vue` component
+
+```tsx
+<template>
+  <button @click="track()">Track</button>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { htevents } from './services/hightouch'
+
+export default defineComponent({
+  setup() {
+    function track() {
+      htevents.track('Hello world')
+    }
+
+    return {
+      track,
+    }
+  },
+})
+</script>
+```
+
+## How to add typescript support when using the CDN snippet
+
+NOTE: this is only required for snippet installation.
+
+NPM installation should already have type support.
+
+1. Install npm package `@ht-sdks/events-sdk-js-browser` as a dev dependency.
+
+2. Create `./typings/htevents.d.ts`
+```ts
+// ./typings/htevents.d.ts
+import type { HtEventsSnippet } from "@ht-sdks/events-sdk-js-browser";
+
+declare global {
+  interface Window {
+    htevents: HtEventsSnippet;
+  }
+}
+
+```
+3. Configure typescript to read from the custom `./typings` folder
+```jsonc
+// tsconfig.json
+{
+  ...
+  "compilerOptions": {
+    ....
+    "typeRoots": [
+      "./node_modules/@types",
+      "./typings"
+    ]
+  }
+  ....
+}
+```
+
+---
+
+## Development
+
+First, clone the repo and then startup our local dev environment:
+
+```sh
+$ git clone git@github.com:ht-sdks/events-sdk-js-mono.git
+$ cd events-sdk-js-mono
+$ nvm use  # installs correct version of node defined in .nvmrc.
+$ yarn && yarn build
+$ yarn test
+```
+
+> If you get "Cannot find module '@ht-sdks/events-sdk-js-browser' or its corresponding type declarations.ts(2307)" (in VSCode), you may have to "cmd+shift+p -> "TypeScript: Restart TS server"
+
+# Plugins
+
+When developing against Events SDK JS you will likely be writing plugins, which can augment functionality and enrich data. Plugins are isolated chunks which you can build, test, version, and deploy independently of the rest of the codebase. Plugins are bounded by Events SDK JS which handles things such as observability, retries, and error management.
+
+Plugins can be of two different priorities:
+
+1. **Critical**: Events SDK JS should expect this plugin to be loaded before starting event delivery
+2. **Non-critical**: Events SDK JS can start event delivery before this plugin has finished loading
+
+and can be of five different types:
+
+1. **Before**: Plugins that need to be run before any other plugins are run. An example of this would be validating events before passing them along to other plugins.
+2. **After**: Plugins that need to run after all other plugins have run. An example of this is the Hightouch.io integration, which will wait for destinations to succeed or fail so that it can send its observability metrics.
+3. **Destination**: Destinations to send the event to (ie. legacy destinations). Does not modify the event and failure does not halt execution.
+4. **Enrichment**: Modifies an event, failure here could halt the event pipeline.
+5. **Utility**: Plugins that change Events SDK JS functionality and don't fall into the other categories.
+
+Here is an example of a simple plugin that would convert all track events event names to lowercase before the event gets sent through the rest of the pipeline:
+
+```ts
+import type { Plugin } from '@ht-sdks/events-sdk-js-browser'
+
+export const lowercase: Plugin = {
+  name: 'Lowercase Event Name',
+  type: 'before',
+  version: '1.0.0',
+
+  isLoaded: () => true,
+  load: () => Promise.resolve(),
+
+  track: (ctx) => {
+    ctx.event.event = ctx.event.event.toLowerCase()
+    return ctx
+  }
+}
+
+htevents.register(lowercase)
+```
+
+For further examples check out our [existing plugins](/packages/browser/src/plugins).
+
+## QA
+Feature work and bug fixes should include tests. Run all [Jest](https://jestjs.io) tests:
+```
+$ yarn test
+```
+Lint all with [ESLint](https://github.com/typescript-eslint/typescript-eslint/):
+```
+$ yarn lint
+```

package/packages/browser/e2e-tests/local-server.ts

@@ -0,0 +1,28 @@
+import fetch from 'node-fetch'
+import http from 'http'
+import handler from 'serve-handler'
+
+export async function startLocalServer(): Promise<string> {
+  const srv = http.createServer((request, response) => {
+    return handler(request, response)
+  })
+
+  return new Promise(async (resolve, reject) => {
+    const desiredPort = process.env.PORT ?? 5000
+    const desiredPath = `http://localhost:${desiredPort}`
+
+    try {
+      const ping = await fetch(desiredPath)
+      if (ping.ok) {
+        return resolve(desiredPath)
+      }
+    } catch (err) {
+      srv.on('error', reject)
+      srv.listen(desiredPort, () => {
+        // @ts-expect-error
+        const { port } = srv.address()
+        resolve(`http://localhost:${port ?? desiredPort}`)
+      })
+    }
+  })
+}

package/packages/browser/e2e-tests/performance/ajs-perf-browser.test.ts

@@ -0,0 +1,75 @@
+import { tester, testerTeardown } from '../../src/tester/ajs-tester'
+import {
+  gatherLighthouseMetrics,
+  globalSetup,
+  globalTeardown,
+} from '../../src/tester/ajs-perf'
+import { TEST_WRITEKEY } from '../../src/test-helpers/test-writekeys'
+
+describe('Performance', () => {
+  beforeAll(async () => {
+    await globalSetup()
+  })
+
+  afterAll(async () => {
+    await globalTeardown()
+    await testerTeardown()
+  })
+
+  // These tests are now biased because of the massive number of tests running during our QA process
+  it('gather lighthouse', async () => {
+    const analyticsStub = await tester(
+      TEST_WRITEKEY,
+      'http://localhost:3001',
+      'chromium',
+      true
+    )
+
+    const results: any = await gatherLighthouseMetrics(analyticsStub.browserPage)
+    const audits = results.audits // Lighthouse audits
+
+    // lighthouse perf score
+    expect(results['categories'].performance.score).toBeGreaterThanOrEqual(0.99)
+    // no render blocking resource
+    expect(audits['render-blocking-resources'].details.items).toHaveLength(0)
+    // first contentful paint in the first second
+    expect(audits['first-contentful-paint'].numericValue).toBeLessThan(1000)
+
+    // total blocking time less than 100ms
+    expect(audits['total-blocking-time'].numericValue).toBeLessThan(150)
+    // main thread work less than 100ms
+    expect(audits['mainthread-work-breakdown'].numericValue).toBeLessThan(300)
+
+    console.log('⚡️ AJS is blazing fast ⚡')
+    console.table(
+      Object.keys(audits)
+        .filter((i) => audits[i].displayValue)
+        .map((i) => ({
+          metric: audits[i].title,
+          value: audits[i].displayValue,
+        }))
+    )
+
+    await analyticsStub.browserPage.close()
+  }, 50000)
+
+  it('loads ajs in a browser', async () => {
+    const analyticsStub = await tester(
+      TEST_WRITEKEY,
+      'http://localhost:3001',
+      'chromium',
+      true
+    )
+
+    const ctx = await analyticsStub.track('hi', {
+      test: 'prop',
+    })
+
+    expect(ctx.event.event).toEqual('hi')
+    expect(ctx.event.properties).toEqual({
+      test: 'prop',
+    })
+
+    await analyticsStub.browserPage.close()
+  }, 10000)
+})

package/packages/browser/jest.config.js

@@ -0,0 +1,15 @@
+const { createJestTSConfig } = require('@internal/config')
+
+module.exports = createJestTSConfig(__dirname, {
+  modulePathIgnorePatterns: ['<rootDir>/e2e-tests', '<rootDir>/qa'],
+  setupFilesAfterEnv: ['./jest.setup.js'],
+  testEnvironment: 'jsdom',
+  coverageThreshold: {
+    global: {
+      branches: 80.91,
+      functions: 87.25,
+      lines: 91.03,
+      statements: 87.25,
+    },
+  },
+})

package/packages/browser/jest.setup.js

@@ -0,0 +1,10 @@
+const { TextEncoder, TextDecoder } = require('util')
+const { setImmediate } = require('timers')
+
+// fix: "ReferenceError: TextEncoder is not defined" after upgrading JSDOM
+global.TextEncoder = TextEncoder
+global.TextDecoder = TextDecoder
+// fix: jsdom uses setImmediate under the hood for preflight XHR requests,
+// and jest removed setImmediate, so we need to provide it to prevent console
+// logging ReferenceErrors made by integration tests that call Amplitude.
+global.setImmediate = setImmediate