@customerio/cdp-analytics-browser 0.0.1

package/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "@customerio/cdp-analytics-browser",
+  "version": "0.0.1",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/customerio/cdp-analytics-js",
+    "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": {
+    "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'",
+    "release:cdn": "yarn run -T browser+deps build && NODE_ENV=production bash scripts/release.sh && NODE_ENV=stage 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.0 KB"
+    }
+  ],
+  "dependencies": {
+    "@customerio/cdp-analytics-core": "0.0.2",
+    "@lukeed/uuid": "^2.0.0",
+    "@segment/analytics.js-video-plugins": "^0.2.1",
+    "@segment/facade": "^3.4.9",
+    "@segment/tsub": "1.0.1",
+    "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.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": "^12.12.14",
+    "@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.36.1",
+    "webpack-bundle-analyzer": "^4.4.2",
+    "webpack-cli": "^4.8.0"
+  },
+  "packageManager": "yarn@3.2.1"
+}

package/src/browser/browser-umd.ts

@@ -0,0 +1,19 @@
+import { getCDN, setGlobalCDNUrl } from '../lib/parse-cdn'
+import { setVersionType } from '../plugins/customerio/normalize'
+
+if (process.env.ASSET_PATH) {
+  if (process.env.ASSET_PATH === '/dist/umd/') {
+    // @ts-ignore
+    __webpack_public_path__ = '/dist/umd/'
+  } else {
+    const cdn = getCDN()
+    setGlobalCDNUrl(cdn) // preserving original behavior -- TODO: neccessary?
+
+    // @ts-ignore
+    __webpack_public_path__ = cdn + '/analytics-next/bundles/'
+  }
+}
+
+setVersionType('web')
+
+export * from '.'

package/src/browser/index.ts

@@ -0,0 +1,397 @@
+import { getProcessEnv } from '../lib/get-process-env'
+import { getCDN, setGlobalCDNUrl } from '../lib/parse-cdn'
+
+import { fetch } from '../lib/fetch'
+import { Analytics, AnalyticsSettings, InitOptions } from '../core/analytics'
+import { Context } from '../core/context'
+import { Plan } from '../core/events'
+import { Plugin } from '../core/plugin'
+import { MetricsOptions } from '../core/stats/remote-metrics'
+import { mergedOptions } from '../lib/merged-options'
+import { createDeferred } from '../lib/create-deferred'
+import { pageEnrichment } from '../plugins/page-enrichment'
+import { remoteLoader, RemotePlugin } from '../plugins/remote-loader'
+import type { RoutingRule } from '../plugins/routing-middleware'
+import { customerio, CustomerioSettings } from '../plugins/customerio'
+import { validation } from '../plugins/validation'
+import {
+  AnalyticsBuffered,
+  PreInitMethodCallBuffer,
+  flushAnalyticsCallsInNewTask,
+  flushAddSourceMiddleware,
+  flushSetAnonymousID,
+  flushOn,
+} from '../core/buffer'
+import { popSnippetWindowBuffer } from '../core/buffer/snippet'
+import { ClassicIntegrationSource } from '../plugins/ajs-destination/types'
+import { attachInspector } from '../core/inspector'
+import { Stats } from '../core/stats'
+
+export interface LegacyIntegrationConfiguration {
+  /* @deprecated - This does not indicate browser types anymore */
+  type?: string
+
+  versionSettings?: {
+    version?: string
+    override?: string
+    componentTypes?: Array<'browser' | 'android' | 'ios' | 'server'>
+  }
+
+  bundlingStatus?: string
+
+  // Customer.io specific
+  retryQueue?: boolean
+
+  // any extra unknown settings
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any
+}
+
+export interface LegacySettings {
+  integrations: {
+    [name: string]: LegacyIntegrationConfiguration
+  }
+
+  middlewareSettings?: {
+    routingRules: RoutingRule[]
+  }
+
+  enabledMiddleware?: Record<string, boolean>
+  metrics?: MetricsOptions
+
+  plan?: Plan
+
+  legacyVideoPluginsEnabled?: boolean
+
+  remotePlugins?: RemotePlugin[]
+}
+
+export interface AnalyticsBrowserSettings extends AnalyticsSettings {
+  /**
+   * The settings for the Customer.io Source.
+   * If provided, `AnalyticsBrowser` will not fetch remote settings
+   * for the source.
+   */
+  cdnSettings?: LegacySettings & Record<string, unknown>
+  /**
+   * If provided, will override the default CDN for this application.
+   */
+  cdnURL?: string
+}
+
+export function loadLegacySettings(
+  writeKey: string,
+  cdnURL?: string
+): Promise<LegacySettings> {
+  const baseUrl = cdnURL ?? getCDN()
+
+  return fetch(`${baseUrl}/v1/projects/${writeKey}/settings`)
+    .then((res) => {
+      if (!res.ok) {
+        return res.text().then((errorResponseMessage) => {
+          throw new Error(errorResponseMessage)
+        })
+      }
+      return res.json()
+    })
+    .catch((err) => {
+      console.error(err.message)
+      throw err
+    })
+}
+
+function hasLegacyDestinations(settings: LegacySettings): boolean {
+  return (
+    getProcessEnv().NODE_ENV !== 'test' &&
+    // just one integration means customerio
+    Object.keys(settings.integrations).length > 1
+  )
+}
+
+function hasTsubMiddleware(settings: LegacySettings): boolean {
+  return (
+    getProcessEnv().NODE_ENV !== 'test' &&
+    (settings.middlewareSettings?.routingRules?.length ?? 0) > 0
+  )
+}
+
+/**
+ * With AJS classic, we allow users to call setAnonymousId before the library initialization.
+ * This is important because some of the destinations will use the anonymousId during the initialization,
+ * and if we set anonId afterwards, that wouldn’t impact the destination.
+ *
+ * Also Ensures events can be registered before library initialization.
+ * This is important so users can register to 'initialize' and any events that may fire early during setup.
+ */
+function flushPreBuffer(
+  analytics: Analytics,
+  buffer: PreInitMethodCallBuffer
+): void {
+  buffer.push(...popSnippetWindowBuffer())
+  flushSetAnonymousID(analytics, buffer)
+  flushOn(analytics, buffer)
+}
+
+/**
+ * Finish flushing buffer and cleanup.
+ */
+async function flushFinalBuffer(
+  analytics: Analytics,
+  buffer: PreInitMethodCallBuffer
+): Promise<void> {
+  // Call popSnippetWindowBuffer before each flush task since there may be
+  // analytics calls during async function calls.
+  buffer.push(...popSnippetWindowBuffer())
+  await flushAddSourceMiddleware(analytics, buffer)
+  buffer.push(...popSnippetWindowBuffer())
+  flushAnalyticsCallsInNewTask(analytics, buffer)
+  // Clear buffer, just in case analytics is loaded twice; we don't want to fire events off again.
+  buffer.clear()
+}
+
+async function registerPlugins(
+  legacySettings: LegacySettings,
+  analytics: Analytics,
+  opts: InitOptions,
+  options: InitOptions,
+  plugins: Plugin[],
+  legacyIntegrationSources: ClassicIntegrationSource[]
+): Promise<Context> {
+  const tsubMiddleware = hasTsubMiddleware(legacySettings)
+    ? await import(
+        /* webpackChunkName: "tsub-middleware" */ '../plugins/routing-middleware'
+    ).then((mod) => {
+      return mod.tsubMiddleware(
+        legacySettings.middlewareSettings!.routingRules
+      )
+    })
+    : undefined
+
+  const legacyDestinations =
+    hasLegacyDestinations(legacySettings) || legacyIntegrationSources.length > 0
+      ? await import(
+          /* webpackChunkName: "ajs-destination" */ '../plugins/ajs-destination'
+      ).then((mod) => {
+        return mod.ajsDestinations(
+          legacySettings,
+          analytics.integrations,
+          opts,
+          tsubMiddleware,
+          legacyIntegrationSources
+        )
+      })
+      : []
+
+  if (legacySettings.legacyVideoPluginsEnabled) {
+    await import(
+      /* webpackChunkName: "legacyVideos" */ '../plugins/legacy-video-plugins'
+    ).then((mod) => {
+      return mod.loadLegacyVideoPlugins(analytics)
+    })
+  }
+
+  const schemaFilter = opts.plan?.track
+    ? await import(
+        /* webpackChunkName: "schemaFilter" */ '../plugins/schema-filter'
+    ).then((mod) => {
+      return mod.schemaFilter(opts.plan?.track, legacySettings)
+    })
+    : undefined
+
+  const mergedSettings = mergedOptions(legacySettings, options)
+  const remotePlugins = await remoteLoader(
+    legacySettings,
+    analytics.integrations,
+    mergedSettings,
+    options.obfuscate,
+    tsubMiddleware
+  ).catch(() => [])
+
+  const toRegister = [
+    validation,
+    pageEnrichment,
+    ...plugins,
+    ...legacyDestinations,
+    ...remotePlugins,
+  ]
+
+  if (schemaFilter) {
+    toRegister.push(schemaFilter)
+  }
+
+  const shouldIgnore =
+    (opts.integrations?.All === false &&
+      !opts.integrations['Customer.io Data Pipelines']) ||
+    (opts.integrations &&
+      opts.integrations['Customer.io Data Pipelines'] === false)
+
+  if (!shouldIgnore) {
+    toRegister.push(
+      customerio(
+        analytics,
+        mergedSettings['Customer.io Data Pipelines'] as CustomerioSettings,
+        legacySettings.integrations
+      )
+    )
+  }
+
+  const ctx = await analytics.register(...toRegister)
+
+  if (
+    Object.entries(legacySettings.enabledMiddleware ?? {}).some(
+      ([, enabled]) => enabled
+    )
+  ) {
+    await import(
+      /* webpackChunkName: "remoteMiddleware" */ '../plugins/remote-middleware'
+    ).then(async ({ remoteMiddlewares }) => {
+      const middleware = await remoteMiddlewares(
+        ctx,
+        legacySettings,
+        options.obfuscate
+      )
+      const promises = middleware.map((mdw) =>
+        analytics.addSourceMiddleware(mdw)
+      )
+      return Promise.all(promises)
+    })
+  }
+
+  return ctx
+}
+
+async function loadAnalytics(
+  settings: AnalyticsBrowserSettings,
+  options: InitOptions = {},
+  preInitBuffer: PreInitMethodCallBuffer
+): Promise<[Analytics, Context]> {
+  // this is an ugly side-effect, but it's for the benefits of the plugins that get their cdn via getCDN()
+  if (settings.cdnURL) setGlobalCDNUrl(settings.cdnURL)
+
+  const legacySettings =
+    settings.cdnSettings ??
+    (await loadLegacySettings(settings.writeKey, settings.cdnURL))
+
+  const retryQueue: boolean =
+    legacySettings.integrations['Customer.io Data Pipelines']?.retryQueue ??
+    true
+
+  const opts: InitOptions = { retryQueue, ...options }
+  const analytics = new Analytics(settings, opts)
+
+  attachInspector(analytics)
+
+  const plugins = settings.plugins ?? []
+  const classicIntegrations = settings.classicIntegrations ?? []
+  Stats.initRemoteMetrics(legacySettings.metrics)
+
+  // needs to be flushed before plugins are registered
+  flushPreBuffer(analytics, preInitBuffer)
+
+  const ctx = await registerPlugins(
+    legacySettings,
+    analytics,
+    opts,
+    options,
+    plugins,
+    classicIntegrations
+  )
+
+  const search = window.location.search ?? ''
+  const hash = window.location.hash ?? ''
+
+  const term = search.length ? search : hash.replace(/(?=#).*(?=\?)/, '')
+
+  if (term.includes('ajs_')) {
+    await analytics.queryString(term).catch(console.error)
+  }
+
+  analytics.initialized = true
+  analytics.emit('initialize', settings, options)
+
+  if (options.initialPageview) {
+    analytics.page().catch(console.error)
+  }
+
+  await flushFinalBuffer(analytics, preInitBuffer)
+
+  return [analytics, ctx]
+}
+
+/**
+ * The public browser interface for Customer.io Data Pipelines
+ *
+ * @example
+ * ```ts
+ *  export const analytics = new AnalyticsBrowser()
+ *  analytics.load({ writeKey: 'foo' })
+ */
+export class AnalyticsBrowser extends AnalyticsBuffered {
+  private _resolveLoadStart: (
+    settings: AnalyticsBrowserSettings,
+    options: InitOptions
+  ) => void
+
+  constructor() {
+    const { promise: loadStart, resolve: resolveLoadStart } =
+      createDeferred<Parameters<AnalyticsBrowser['load']>>()
+
+    super((buffer) =>
+      loadStart.then(([settings, options]) =>
+        loadAnalytics(settings, options, buffer)
+      )
+    )
+
+    this._resolveLoadStart = (settings, options) =>
+      resolveLoadStart([settings, options])
+  }
+
+  /**
+   * Fully initialize an analytics instance, including:
+   *
+   * * Fetching settings from the CDN (by default).
+   * * Fetching all remote destinations configured by the user (if applicable).
+   * * Flushing buffered analytics events.
+   * * Loading all middleware.
+   *
+   * Note:️  This method should only be called *once* in your application.
+   *
+   * @example
+   * ```ts
+   * export const analytics = new AnalyticsBrowser()
+   * analytics.load({ writeKey: 'foo' })
+   * ```
+   */
+  load(
+    settings: AnalyticsBrowserSettings,
+    options: InitOptions = {}
+  ): AnalyticsBrowser {
+    this._resolveLoadStart(settings, options)
+    return this
+  }
+
+  /**
+   * Instantiates an object exposing Analytics methods.
+   *
+   * @example
+   * ```ts
+   * const ajs = AnalyticsBrowser.load({ writeKey: '<YOUR_WRITE_KEY>' })
+   *
+   * ajs.track("foo")
+   * ...
+   * ```
+   */
+  static load(
+    settings: AnalyticsBrowserSettings,
+    options: InitOptions = {}
+  ): AnalyticsBrowser {
+    return new AnalyticsBrowser().load(settings, options)
+  }
+
+  static standalone(
+    writeKey: string,
+    options?: InitOptions
+  ): Promise<Analytics> {
+    return AnalyticsBrowser.load({ writeKey }, options).then((res) => res[0])
+  }
+}

package/src/browser/standalone-analytics.ts

@@ -0,0 +1,74 @@
+import { Analytics, InitOptions } from '../core/analytics'
+import { AnalyticsBrowser } from '.'
+import { embeddedWriteKey } from '../lib/embedded-write-key'
+
+export interface AnalyticsSnippet extends AnalyticsStandalone {
+  load: (writeKey: string, options?: InitOptions) => void
+}
+
+export interface AnalyticsStandalone extends Analytics {
+  _loadOptions?: InitOptions
+  _writeKey?: string
+  _cdn?: string
+}
+
+declare global {
+  interface Window {
+    analytics: AnalyticsSnippet
+  }
+}
+
+function getWriteKey(): string | undefined {
+  if (embeddedWriteKey()) {
+    return embeddedWriteKey()
+  }
+
+  if (window.analytics._writeKey) {
+    return window.analytics._writeKey
+  }
+
+  const regex = /http.*\/analytics\.js\/v1\/([^/]*)(\/platform)?\/analytics.*/
+  const scripts = Array.prototype.slice.call(
+    document.querySelectorAll('script')
+  )
+  let writeKey: string | undefined = undefined
+
+  for (const s of scripts) {
+    const src = s.getAttribute('src') ?? ''
+    const result = regex.exec(src)
+
+    if (result && result[1]) {
+      writeKey = result[1]
+      break
+    }
+  }
+
+  if (!writeKey && document.currentScript) {
+    const script = document.currentScript as HTMLScriptElement
+    const src = script.src
+
+    const result = regex.exec(src)
+
+    if (result && result[1]) {
+      writeKey = result[1]
+    }
+  }
+
+  return writeKey
+}
+
+export async function install(): Promise<void> {
+  const writeKey = getWriteKey()
+  const options = window.analytics?._loadOptions ?? {}
+  if (!writeKey) {
+    console.error(
+      'Failed to load Write Key. Make sure to use the latest version of the snippet, which can be found in your source settings.'
+    )
+    return
+  }
+
+  window.analytics = (await AnalyticsBrowser.standalone(
+    writeKey,
+    options
+  )) as AnalyticsSnippet
+}

package/src/browser/standalone.ts

@@ -0,0 +1,78 @@
+/* eslint-disable @typescript-eslint/no-floating-promises */
+import { getCDN, setGlobalCDNUrl } from '../lib/parse-cdn'
+import { setVersionType } from '../plugins/customerio/normalize'
+
+if (process.env.ASSET_PATH) {
+  if (process.env.ASSET_PATH === '/dist/umd/') {
+    // @ts-ignore
+    __webpack_public_path__ = '/dist/umd/'
+  } else {
+    const cdn = getCDN()
+    setGlobalCDNUrl(cdn)
+
+    // @ts-ignore
+    __webpack_public_path__ = cdn
+      ? cdn + '/v1/analytics-js/'
+      : 'https://cdp.customer.io/v1/analytics-js/'
+  }
+}
+
+setVersionType('web')
+
+import { install } from './standalone-analytics'
+import '../lib/csp-detection'
+import { shouldPolyfill } from '../lib/browser-polyfill'
+import { RemoteMetrics } from '../core/stats/remote-metrics'
+import { embeddedWriteKey } from '../lib/embedded-write-key'
+import { onCSPError } from '../lib/csp-detection'
+
+function onError(err?: unknown) {
+  console.error('[analytics.js]', 'Failed to load Analytics.js', err)
+
+  new RemoteMetrics().increment('analytics_js.invoke.error', [
+    'type:initialization',
+    ...(err instanceof Error
+      ? [`message:${err?.message}`, `name:${err?.name}`]
+      : []),
+    `wk:${embeddedWriteKey()}`,
+  ])
+}
+
+document.addEventListener('securitypolicyviolation', (e) => {
+  onCSPError(e).catch(console.error)
+})
+
+/**
+ * Attempts to run a promise and catch both sync and async errors.
+ **/
+async function attempt<T>(promise: () => Promise<T>) {
+  try {
+    const result = await promise()
+    return result
+  } catch (err) {
+    onError(err)
+  }
+}
+
+if (shouldPolyfill()) {
+  // load polyfills in order to get AJS to work with old browsers
+  const script = document.createElement('script')
+  script.setAttribute(
+    'src',
+    'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.7.0/polyfill.min.js'
+  )
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () =>
+      document.body.appendChild(script)
+    )
+  } else {
+    document.body.appendChild(script)
+  }
+
+  script.onload = function (): void {
+    attempt(install)
+  }
+} else {
+  attempt(install)
+}