@customerio/cdp-analytics-browser 0.0.1

package/src/plugins/page-enrichment/index.ts

@@ -0,0 +1,127 @@
+import type { Context } from '../../core/context'
+import type { Plugin } from '../../core/plugin'
+
+interface PageDefault {
+  [key: string]: unknown
+  path: string
+  referrer: string
+  search: string
+  title: string
+  url: string
+}
+
+/**
+ * Get the current page's canonical URL.
+ *
+ * @return {string|undefined}
+ */
+function canonical(): string {
+  const tags = document.getElementsByTagName('link')
+  let canon: string | null = ''
+
+  Array.prototype.slice.call(tags).forEach((tag) => {
+    if (tag.getAttribute('rel') === 'canonical') {
+      canon = tag.getAttribute('href')
+    }
+  })
+
+  return canon
+}
+
+/**
+ * Return the canonical path for the page.
+ */
+
+function canonicalPath(): string {
+  const canon = canonical()
+  if (!canon) {
+    return window.location.pathname
+  }
+
+  const a = document.createElement('a')
+  a.href = canon
+  const pathname = !a.pathname.startsWith('/') ? '/' + a.pathname : a.pathname
+
+  return pathname
+}
+
+/**
+ * Return the canonical URL for the page concat the given `search`
+ * and strip the hash.
+ */
+
+export function canonicalUrl(search = ''): string {
+  const canon = canonical()
+  if (canon) {
+    return canon.includes('?') ? canon : `${canon}${search}`
+  }
+  const url = window.location.href
+  const i = url.indexOf('#')
+  return i === -1 ? url : url.slice(0, i)
+}
+
+/**
+ * Return a default `options.context.page` object.
+ */
+
+export function pageDefaults(): PageDefault {
+  return {
+    path: canonicalPath(),
+    referrer: document.referrer,
+    search: location.search,
+    title: document.title,
+    url: canonicalUrl(location.search),
+  }
+}
+
+function enrichPageContext(ctx: Context): Context {
+  const event = ctx.event
+  event.context = event.context || {}
+  let pageContext = pageDefaults()
+  const pageProps = event.properties ?? {}
+
+  Object.keys(pageContext).forEach((key) => {
+    if (pageProps[key]) {
+      pageContext[key] = pageProps[key]
+    }
+  })
+
+  if (event.context.page) {
+    pageContext = Object.assign({}, pageContext, event.context.page)
+  }
+
+  event.context = Object.assign({}, event.context, {
+    page: pageContext,
+  })
+
+  ctx.event = event
+
+  return ctx
+}
+
+export const pageEnrichment: Plugin = {
+  name: 'Page Enrichment',
+  version: '0.1.0',
+  isLoaded: () => true,
+  load: () => Promise.resolve(),
+  type: 'before',
+
+  page: (ctx) => {
+    ctx.event.properties = Object.assign(
+      {},
+      pageDefaults(),
+      ctx.event.properties
+    )
+
+    if (ctx.event.name) {
+      ctx.event.properties.name = ctx.event.name
+    }
+
+    return enrichPageContext(ctx)
+  },
+
+  alias: enrichPageContext,
+  track: enrichPageContext,
+  identify: enrichPageContext,
+  group: enrichPageContext,
+}

package/src/plugins/remote-loader/index.ts

@@ -0,0 +1,240 @@
+import type { Integrations } from '../../core/events/interfaces'
+import { LegacySettings } from '../../browser'
+import { JSONObject, JSONValue } from '../../core/events'
+import { DestinationPlugin, Plugin } from '../../core/plugin'
+import { loadScript } from '../../lib/load-script'
+import { getCDN } from '../../lib/parse-cdn'
+import {
+  applyDestinationMiddleware,
+  DestinationMiddlewareFunction,
+} from '../middleware'
+import { Context, ContextCancelation } from '../../core/context'
+import { Analytics } from '../../core/analytics'
+
+export interface RemotePlugin {
+  /** The name of the remote plugin */
+  name: string
+  /** The creation name of the remote plugin */
+  creationName: string
+  /** The url of the javascript file to load */
+  url: string
+  /** The UMD/global name the plugin uses. Plugins are expected to exist here with the `PluginFactory` method signature */
+  libraryName: string
+  /** The settings related to this plugin. */
+  settings: JSONObject
+}
+
+export class ActionDestination implements DestinationPlugin {
+  name: string // destination name
+  version = '1.0.0'
+  type: Plugin['type']
+
+  alternativeNames: string[] = []
+
+  middleware: DestinationMiddlewareFunction[] = []
+
+  action: Plugin
+
+  constructor(name: string, action: Plugin) {
+    this.action = action
+    this.name = name
+    this.type = action.type
+    this.alternativeNames.push(action.name)
+  }
+
+  addMiddleware(...fn: DestinationMiddlewareFunction[]): void {
+    if (this.type === 'destination') {
+      this.middleware.push(...fn)
+    }
+  }
+
+  private async transform(ctx: Context): Promise<Context> {
+    const modifiedEvent = await applyDestinationMiddleware(
+      this.name,
+      ctx.event,
+      this.middleware
+    )
+
+    if (modifiedEvent === null) {
+      ctx.cancel(
+        new ContextCancelation({
+          retry: false,
+          reason: 'dropped by destination middleware',
+        })
+      )
+    }
+
+    return new Context(modifiedEvent!)
+  }
+
+  private _createMethod(
+    methodName: 'track' | 'page' | 'identify' | 'alias' | 'group' | 'screen'
+  ) {
+    return async (ctx: Context): Promise<Context> => {
+      if (!this.action[methodName]) return ctx
+
+      let transformedContext: Context = ctx
+      // Transformations only allowed for destination plugins. Other plugin types support mutating events.
+      if (this.type === 'destination') {
+        transformedContext = await this.transform(ctx)
+      }
+
+      await this.action[methodName]!(transformedContext)
+
+      return ctx
+    }
+  }
+
+  alias = this._createMethod('alias')
+  group = this._createMethod('group')
+  identify = this._createMethod('identify')
+  page = this._createMethod('page')
+  screen = this._createMethod('screen')
+  track = this._createMethod('track')
+
+  /* --- PASSTHROUGH METHODS --- */
+  isLoaded(): boolean {
+    return this.action.isLoaded()
+  }
+
+  ready(): Promise<unknown> {
+    return this.action.ready ? this.action.ready() : Promise.resolve()
+  }
+
+  load(ctx: Context, analytics: Analytics): Promise<unknown> {
+    return this.action.load(ctx, analytics)
+  }
+
+  unload(ctx: Context, analytics: Analytics): Promise<unknown> | unknown {
+    return this.action.unload?.(ctx, analytics)
+  }
+}
+
+type PluginFactory = (
+  settings: JSONValue
+) => Plugin | Plugin[] | Promise<Plugin | Plugin[]>
+
+function validate(pluginLike: unknown): pluginLike is Plugin[] {
+  if (!Array.isArray(pluginLike)) {
+    throw new Error('Not a valid list of plugins')
+  }
+
+  const required = ['load', 'isLoaded', 'name', 'version', 'type']
+  pluginLike.forEach((plugin) => {
+    required.forEach((method) => {
+      if (plugin[method] === undefined) {
+        throw new Error(
+          `Plugin: ${plugin.name ?? 'unknown'
+          } missing required function ${method}`
+        )
+      }
+    })
+  })
+
+  return true
+}
+
+function isPluginDisabled(
+  userIntegrations: Integrations,
+  remotePlugin: RemotePlugin
+) {
+  const creationNameEnabled = userIntegrations[remotePlugin.creationName]
+  const currentNameEnabled = userIntegrations[remotePlugin.name]
+
+  // Check that the plugin isn't explicitly enabled when All: false
+  if (
+    userIntegrations.All === false &&
+    !creationNameEnabled &&
+    !currentNameEnabled
+  ) {
+    return true
+  }
+
+  // Check that the plugin isn't explicitly disabled
+  if (creationNameEnabled === false || currentNameEnabled === false) {
+    return true
+  }
+
+  return false
+}
+
+export async function remoteLoader(
+  settings: LegacySettings,
+  userIntegrations: Integrations,
+  mergedIntegrations: Record<string, JSONObject>,
+  obfuscate?: boolean,
+  routingMiddleware?: DestinationMiddlewareFunction
+): Promise<Plugin[]> {
+  const allPlugins: Plugin[] = []
+  const cdn = getCDN()
+
+  const routingRules = settings.middlewareSettings?.routingRules ?? []
+
+  const pluginPromises = (settings.remotePlugins ?? []).map(
+    async (remotePlugin) => {
+      if (isPluginDisabled(userIntegrations, remotePlugin)) return
+      try {
+        const defaultCdn = new RegExp('https://cdp.customer.io')
+        if (obfuscate) {
+          const urlSplit = remotePlugin.url.split('/')
+          const name = urlSplit[urlSplit.length - 2]
+          const obfuscatedURL = remotePlugin.url.replace(
+            name,
+            btoa(name).replace(/=/g, '')
+          )
+          try {
+            await loadScript(obfuscatedURL.replace(defaultCdn, cdn))
+          } catch (error) {
+            // Due to syncing concerns it is possible that the obfuscated action destination (or requested version) might not exist.
+            // We should use the unobfuscated version as a fallback.
+            await loadScript(remotePlugin.url.replace(defaultCdn, cdn))
+          }
+        } else {
+          await loadScript(remotePlugin.url.replace(defaultCdn, cdn))
+        }
+
+        const libraryName = remotePlugin.libraryName
+
+        // @ts-expect-error
+        if (typeof window[libraryName] === 'function') {
+          // @ts-expect-error
+          const pluginFactory = window[libraryName] as PluginFactory
+          const plugin = await pluginFactory({
+            ...remotePlugin.settings,
+            ...mergedIntegrations[remotePlugin.name],
+          })
+          const plugins = Array.isArray(plugin) ? plugin : [plugin]
+
+          validate(plugins)
+
+          const routing = routingRules.filter(
+            (rule) => rule.destinationName === remotePlugin.creationName
+          )
+
+          plugins.forEach((plugin) => {
+            const wrapper = new ActionDestination(
+              remotePlugin.creationName,
+              plugin
+            )
+
+            /** Make sure we only apply destination filters to actions of the "destination" type to avoid causing issues for hybrid destinations */
+            if (
+              routing.length &&
+              routingMiddleware &&
+              plugin.type === 'destination'
+            ) {
+              wrapper.addMiddleware(routingMiddleware)
+            }
+
+            allPlugins.push(wrapper)
+          })
+        }
+      } catch (error) {
+        console.warn('Failed to load Remote Plugin', error)
+      }
+    }
+  )
+
+  await Promise.all(pluginPromises)
+  return allPlugins.filter(Boolean)
+}

package/src/plugins/remote-middleware/index.ts

@@ -0,0 +1,44 @@
+import { LegacySettings } from '../../browser'
+import { Context } from '../../core/context'
+import { isServer } from '../../core/environment'
+import { loadScript } from '../../lib/load-script'
+import { getNextIntegrationsURL } from '../../lib/parse-cdn'
+import { MiddlewareFunction } from '../middleware'
+
+export async function remoteMiddlewares(
+  ctx: Context,
+  settings: LegacySettings,
+  obfuscate?: boolean
+): Promise<MiddlewareFunction[]> {
+  if (isServer()) {
+    return []
+  }
+  const path = getNextIntegrationsURL()
+  const remoteMiddleware = settings.enabledMiddleware ?? {}
+  const names = Object.entries(remoteMiddleware)
+    .filter(([_, enabled]) => enabled)
+    .map(([name]) => name)
+
+  const scripts = names.map(async (name) => {
+    const nonNamespaced = name.replace('@segment/', '')
+    let bundleName = nonNamespaced
+    if (obfuscate) {
+      bundleName = btoa(nonNamespaced).replace(/=/g, '')
+    }
+    const fullPath = `${path}/middleware/${bundleName}/latest/${bundleName}.js.gz`
+
+    try {
+      await loadScript(fullPath)
+      // @ts-ignore
+      return window[`${nonNamespaced}Middleware`] as MiddlewareFunction
+    } catch (error: any) {
+      ctx.log('error', error)
+      ctx.stats.increment('failed_remote_middleware')
+    }
+  })
+
+  let middleware = await Promise.all(scripts)
+  middleware = middleware.filter(Boolean)
+
+  return middleware as MiddlewareFunction[]
+}

package/src/plugins/routing-middleware/index.ts

@@ -0,0 +1,37 @@
+import * as tsub from '@segment/tsub'
+import { Matcher, Rule } from '@segment/tsub/dist/store'
+import { DestinationMiddlewareFunction } from '../middleware'
+
+// TODO: update tsub definition
+type RoutingRuleMatcher = Matcher & {
+  config?: {
+    expr: string
+  }
+}
+
+export type RoutingRule = Rule & {
+  matchers: RoutingRuleMatcher[]
+}
+
+export const tsubMiddleware =
+  (rules: RoutingRule[]): DestinationMiddlewareFunction =>
+  ({ payload, integration, next }): void => {
+    const store = new tsub.Store(rules)
+    const rulesToApply = store.getRulesByDestinationName(integration)
+
+    rulesToApply.forEach((rule) => {
+      const { matchers, transformers } = rule
+
+      for (let i = 0; i < matchers.length; i++) {
+        if (tsub.matches(payload.obj, matchers[i])) {
+          payload.obj = tsub.transform(payload.obj, transformers[i])
+
+          if (payload.obj === null) {
+            return next(null)
+          }
+        }
+      }
+    })
+
+    next(payload)
+  }

package/src/plugins/schema-filter/index.ts

@@ -0,0 +1,90 @@
+import { LegacySettings } from '../../browser'
+import { Context } from '../../core/context'
+import { PlanEvent, TrackPlan } from '../../core/events/interfaces'
+import { Plugin } from '../../core/plugin'
+import { isPlanEventEnabled } from '../../lib/is-plan-event-enabled'
+import { RemotePlugin } from '../remote-loader'
+
+function disabledActionDestinations(
+  plan: PlanEvent | undefined,
+  settings: LegacySettings
+): { [destination: string]: string[] } {
+  if (!plan || !Object.keys(plan)) {
+    return {}
+  }
+
+  const disabledIntegrations = plan.integrations
+    ? Object.keys(plan.integrations).filter(
+      (i) => plan.integrations![i] === false
+    )
+    : []
+
+  // This accounts for cases like Fullstory, where the settings.integrations
+  // contains a "Fullstory" object but settings.remotePlugins contains "Fullstory (Actions)"
+  const disabledRemotePlugins: string[] = []
+    ; (settings.remotePlugins ?? []).forEach((p: RemotePlugin) => {
+      disabledIntegrations.forEach((int) => {
+        if (p.name.includes(int) || int.includes(p.name)) {
+          disabledRemotePlugins.push(p.name)
+        }
+      })
+    })
+
+  return (settings.remotePlugins ?? []).reduce((acc, p) => {
+    if (p.settings['subscriptions']) {
+      if (disabledRemotePlugins.includes(p.name)) {
+        // @ts-expect-error element implicitly has an 'any' type because p.settings is a JSONObject
+        p.settings['subscriptions'].forEach(
+          // @ts-expect-error parameter 'sub' implicitly has an 'any' type
+          (sub) => (acc[`${p.name} ${sub.partnerAction}`] = false)
+        )
+      }
+    }
+    return acc
+  }, {})
+}
+
+export function schemaFilter(
+  track: TrackPlan | undefined,
+  settings: LegacySettings
+): Plugin {
+  function filter(ctx: Context): Context {
+    const plan = track
+    const ev = ctx.event.event
+
+    if (plan && ev) {
+      const planEvent = plan[ev]
+      if (!isPlanEventEnabled(plan, planEvent)) {
+        ctx.updateEvent('integrations', {
+          ...ctx.event.integrations,
+          All: false,
+          'Customer.io Data Pipelines': true,
+        })
+        return ctx
+      } else {
+        const disabledActions = disabledActionDestinations(planEvent, settings)
+
+        ctx.updateEvent('integrations', {
+          ...ctx.event.integrations,
+          ...planEvent?.integrations,
+          ...disabledActions,
+        })
+      }
+    }
+
+    return ctx
+  }
+
+  return {
+    name: 'Schema Filter',
+    version: '0.1.0',
+    isLoaded: () => true,
+    load: () => Promise.resolve(),
+    type: 'before',
+    page: filter,
+    alias: filter,
+    track: filter,
+    identify: filter,
+    group: filter,
+  }
+}

package/src/plugins/validation/index.ts

@@ -0,0 +1,80 @@
+import type { Plugin } from '../../core/plugin'
+import type { CustomerioEvent } from '../../core/events'
+import type { Context } from '../../core/context'
+
+export function isString(obj: unknown): obj is string {
+  return typeof obj === 'string'
+}
+
+export function isNumber(obj: unknown): obj is number {
+  return typeof obj === 'number'
+}
+
+export function isFunction(obj: unknown): obj is Function {
+  return typeof obj === 'function'
+}
+
+export function isPlainObject(obj: unknown): obj is Record<string, any> {
+  return (
+    Object.prototype.toString.call(obj).slice(8, -1).toLowerCase() === 'object'
+  )
+}
+
+function hasUser(event: CustomerioEvent): boolean {
+  const id =
+    event.userId ?? event.anonymousId ?? event.groupId ?? event.previousId
+  return isString(id)
+}
+
+class ValidationError extends Error {
+  field: string
+
+  constructor(field: string, message: string) {
+    super(message)
+    this.field = field
+  }
+}
+
+function validate(ctx: Context): Context {
+  const eventType: unknown = ctx && ctx.event && ctx.event.type
+  const event = ctx.event
+
+  if (event === undefined) {
+    throw new ValidationError('event', 'Event is missing')
+  }
+
+  if (!isString(eventType)) {
+    throw new ValidationError('event', 'Event is not a string')
+  }
+
+  if (eventType === 'track' && !isString(event.event)) {
+    throw new ValidationError('event', 'Event is not a string')
+  }
+
+  const props = event.properties ?? event.traits
+  if (eventType !== 'alias' && !isPlainObject(props)) {
+    throw new ValidationError('properties', 'properties is not an object')
+  }
+
+  if (!hasUser(event)) {
+    throw new ValidationError('userId', 'Missing userId or anonymousId')
+  }
+
+  return ctx
+}
+
+export const validation: Plugin = {
+  name: 'Event Validation',
+  type: 'before',
+  version: '1.0.0',
+
+  isLoaded: () => true,
+  load: () => Promise.resolve(),
+
+  track: validate,
+  identify: validate,
+  page: validate,
+  alias: validate,
+  group: validate,
+  screen: validate,
+}

package/src/test-helpers/browser-storage.ts

@@ -0,0 +1,72 @@
+import cookie from 'js-cookie'
+
+const ajsCookieNames = [
+  'ajs_user_id',
+  'ajs_anonymous_id',
+  'ajs_group_id',
+] as const
+const ajsLocalStorageKeys = ['ajs_user_traits', 'ajs_group_properties'] as const
+
+export const getAjsBrowserStorage = () => {
+  return getBrowserStorage({
+    cookieNames: ajsCookieNames,
+    localStorageKeys: ajsLocalStorageKeys,
+  })
+}
+
+export const getAnonId = () => getAjsBrowserStorage().ajs_anonymous_id
+
+export const clearAjsBrowserStorage = () => {
+  return clearBrowserStorage({
+    cookieNames: ajsCookieNames,
+    localStorageKeys: ajsLocalStorageKeys,
+  })
+}
+
+export function getBrowserStorage<
+  CookieNames extends string,
+  LSKeys extends string
+>({
+  cookieNames,
+  localStorageKeys,
+}: {
+  cookieNames: readonly CookieNames[]
+  localStorageKeys: readonly LSKeys[]
+}): Record<CookieNames | LSKeys, string | {}> {
+  const result = {} as ReturnType<typeof getBrowserStorage>
+
+  const cookies = cookie.get()
+  cookieNames.forEach((name) => {
+    if (name in cookies) {
+      result[name] = cookies[name]
+    }
+  })
+
+  localStorageKeys.forEach((key) => {
+    const value = localStorage.getItem(key)
+    if (value !== null && typeof value !== 'undefined') {
+      result[key] = JSON.parse(value)
+    }
+  })
+
+  return result
+}
+
+export function clearBrowserStorage({
+  cookieNames,
+  localStorageKeys, // if no keys are passed, the entire thing is cleared
+}: {
+  cookieNames: string[] | readonly string[]
+  localStorageKeys?: string[] | readonly string[]
+}) {
+  cookieNames.forEach((name) => {
+    cookie.remove(name)
+  })
+  if (!localStorageKeys) {
+    localStorage.clear()
+  } else {
+    localStorageKeys.forEach((key) => {
+      localStorage.removeItem(key)
+    })
+  }
+}

package/src/test-helpers/factories.ts

@@ -0,0 +1,18 @@
+export const createSuccess = (body: any, overrides: Partial<Response> = {}) => {
+  return Promise.resolve({
+    json: () => Promise.resolve(body),
+    ok: true,
+    status: 200,
+    statusText: 'OK',
+    ...overrides,
+  }) as Promise<Response>
+}
+
+export const createError = (overrides: Partial<Response> = {}) => {
+  return Promise.resolve({
+    ok: false,
+    status: 404,
+    statusText: 'Not Found',
+    ...overrides,
+  }) as Promise<Response>
+}