@jitsu/js 0.0.0-alpha.95

package/playwrite.config.ts

@@ -0,0 +1,91 @@
+import { devices, PlaywrightTestConfig } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000,
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+      },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: {
+    //     ...devices['Pixel 5'],
+    //   },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: {
+    //     ...devices['iPhone 12'],
+    //   },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  outputDir: "__tests__/results",
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   port: 3000,
+  // },
+};
+
+export default config;

package/rollup.config.js

@@ -0,0 +1,25 @@
+const multi = require("@rollup/plugin-multi-entry");
+const resolve = require("@rollup/plugin-node-resolve");
+const commonjs = require("@rollup/plugin-commonjs");
+const rollupJson = require("@rollup/plugin-json");
+const terser = require("@rollup/plugin-terser");
+
+module.exports = [
+  {
+    plugins: [multi(), resolve({ preferBuiltins: false }), commonjs(), rollupJson(),],
+    input: "./compiled/src/browser.js",
+    output: {
+      file: `dist/web/p.js.txt`,
+      format: "iife",
+      sourcemap: false,
+    },
+  },
+  {
+    plugins: [multi(), resolve({ preferBuiltins: false }), commonjs(), rollupJson()],
+    input: "./compiled/src/index.js",
+    output: [
+      { file: "dist/jitsu.es.js", format: "es" },
+      { file: "dist/jitsu.cjs.js", format: "cjs" },
+    ],
+  },
+];

package/src/analytics-plugin.ts

@@ -0,0 +1,371 @@
+/* global analytics */
+
+import { JitsuOptions, PersistentStorage, RuntimeFacade } from "./jitsu";
+import { AnalyticsClientEvent } from "@jitsu/types/analytics";
+import parse from "./index";
+import { AnalyticsPlugin } from "analytics";
+
+const config: JitsuOptions = {
+  /* Your segment writeKey */
+  writeKey: null,
+  /* Disable anonymous MTU */
+  host: null,
+  debug: false,
+  fetch: null,
+};
+
+export const parseQuery = (qs?: string): Record<string, string> => {
+  if (!qs) {
+    return {};
+  }
+  let queryString = qs.length > 0 && qs.charAt(0) === "?" ? qs.substring(1) : qs;
+  let query: Record<string, string> = {};
+  let pairs = (queryString[0] === "?" ? queryString.substr(1) : queryString).split("&");
+  for (let i = 0; i < pairs.length; i++) {
+    let pair = pairs[i].split("=");
+    query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || "");
+  }
+  return query;
+};
+
+function utmToKey(key) {
+  const name = key.substring("utm_".length);
+  return name === "campaign" ? "name" : name;
+}
+
+function parseUtms(query: Record<string, string>) {
+  return Object.entries(query)
+    .filter(([key]) => key.indexOf("utm_") === 0)
+    .reduce(
+      (acc, [key, value]) => ({
+        ...acc,
+        [utmToKey(key)]: value,
+      }),
+      {}
+    );
+}
+
+function safeCall<T>(f: () => T, defaultVal?: T): T | undefined {
+  try {
+    return f();
+  } catch (e) {
+    return defaultVal;
+  }
+}
+
+function restoreTraits(storage: PersistentStorage) {
+  const val = storage.getItem("__user_traits");
+  if (typeof val === "string") {
+    return safeCall(() => JSON.parse(val), {});
+  }
+  return val;
+}
+
+export type StorageFactory = (cookieDomain: string, cookie2key: Record<string, string>) => PersistentStorage;
+
+export function getTopLevelDomain(opts: JitsuOptions = {}) {
+  if (opts.cookieDomain) {
+    return opts.cookieDomain;
+  }
+  const [domain] = window.location.hostname.split(":");
+  const parts = domain.split(".");
+  if (parts[parts.length - 1] === "localhost" || parts.length < 2) {
+    return parts[parts.length - 1];
+  } else {
+    return parts[parts.length - 2] + "." + parts[parts.length - 1];
+  }
+}
+
+function getCookie(name: string) {
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  return parts.length === 2 ? parts.pop().split(";").shift() : undefined;
+}
+
+function removeCookie(name: string) {
+  document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:01 GMT;";
+}
+
+function setCookie(name: string, val: string, { domain, secure }: { domain: string; secure: boolean }) {
+  document.cookie =
+    name +
+    "=" +
+    val +
+    ";domain=" +
+    domain +
+    ";path=/" +
+    ";expires=" +
+    new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 365 * 5).toUTCString() +
+    ";SameSite=" +
+    (secure ? "None" : "Lax") +
+    (secure ? ";secure" : "");
+}
+
+const defaultCookie2Key = {
+  __anon_id: "__eventn_id",
+  __user_traits: "__eventn_id_usr",
+  __user_id: "__eventn_uid",
+};
+
+const cookieStorage: StorageFactory = (cookieDomain, key2cookie) => {
+  return {
+    setItem(key: string, val: any) {
+      const strVal = typeof val === "object" && val !== null ? JSON.stringify(val) : val;
+      const cookieName = key2cookie[key] || key;
+      setCookie(cookieName, strVal, {
+        domain: cookieDomain,
+        secure: window.location.protocol === "https:",
+      });
+    },
+    getItem(key: string) {
+      const cookieName = key2cookie[key] || key;
+      const result = getCookie(cookieName);
+      return parse(result);
+    },
+    removeItem(key: string) {
+      removeCookie(key2cookie[key] || key);
+    },
+  };
+};
+
+export function windowRuntime(opts: JitsuOptions): RuntimeFacade {
+  return {
+    documentEncoding(): string | undefined {
+      return window.document.characterSet;
+    },
+    timezoneOffset(): number | undefined {
+      return new Date().getTimezoneOffset();
+    },
+    store(): PersistentStorage {
+      return cookieStorage(opts.cookieDomain || getTopLevelDomain(), defaultCookie2Key);
+    },
+
+    language(): string {
+      return window.navigator.language;
+    },
+    pageTitle(): string {
+      return window.document.title;
+    },
+    pageUrl(): string {
+      return window.location.href;
+    },
+    referrer(): string {
+      return window.document.referrer;
+    },
+    screen(): { width: number; height: number; innerWidth: number; innerHeight: number; density: number } {
+      return {
+        width: window.screen.width,
+        height: window.screen.height,
+        innerWidth: window.innerWidth,
+        innerHeight: window.innerHeight,
+        density: window.devicePixelRatio,
+      };
+    },
+    userAgent(): string {
+      return window.navigator.userAgent;
+    },
+  };
+}
+
+export const emptyRuntime = (config: JitsuOptions): RuntimeFacade => ({
+  documentEncoding(): string | undefined {
+    return undefined;
+  },
+  timezoneOffset(): number | undefined {
+    return undefined;
+  },
+
+  store(): PersistentStorage {
+    const storage = {};
+    return {
+      setItem(key: string, val: any) {
+        if (config.debug) {
+          console.log(`[JITSU EMPTY RUNTIME] Set storage item ${key}=${JSON.stringify(val)}`);
+        }
+        storage[key] = val;
+      },
+      getItem(key: string) {
+        const val = storage[key];
+        if (config.debug) {
+          console.log(`[JITSU EMPTY RUNTIME] Get storage item ${key}=${JSON.stringify(val)}`);
+        }
+        return val;
+      },
+      removeItem(key: string) {
+        if (config.debug) {
+          console.log(`[JITSU EMPTY RUNTIME] Get storage item ${key}=${storage[key]}`);
+        }
+        delete storage[key];
+      },
+    };
+  },
+  language() {
+    return undefined;
+  },
+  pageTitle() {
+    return undefined;
+  },
+  pageUrl() {
+    return undefined;
+  },
+  referrer() {
+    return undefined;
+  },
+  screen() {
+    return undefined;
+  },
+  userAgent() {
+    return undefined;
+  },
+});
+
+function deepMerge(target: any, source: any) {
+  if (typeof source !== "object" || source === null) {
+    return source;
+  }
+  if (typeof target !== "object" || target === null) {
+    return source;
+  }
+  return Object.entries(source).reduce((acc, [key, value]) => {
+    acc[key] = deepMerge(target[key], value);
+    return acc;
+  }, target);
+}
+
+function adjustPayload(payload: any, config: JitsuOptions, storage: PersistentStorage): AnalyticsClientEvent {
+  const runtime: RuntimeFacade =
+    config.runtime || (typeof window === "undefined" ? emptyRuntime(config) : windowRuntime(config));
+  const url = runtime.pageUrl();
+  const parsedUrl = safeCall(() => new URL(url), undefined);
+  const query = parsedUrl ? parseQuery(parsedUrl.search) : {};
+  const properties = payload.properties || {};
+  const customContext = payload.properties?.context || {};
+  delete payload.properties?.context;
+  const referrer = runtime.referrer();
+  const context = {
+    library: {
+      name: "jitsu-js",
+      version: "1.0.0",
+    },
+    userAgent: runtime.userAgent(),
+    locale: runtime.language(),
+    screen: runtime.screen(),
+    traits: payload.type != "identify" ? { ...(restoreTraits(storage) || {}) } : undefined,
+    page: {
+      path: properties.path || (parsedUrl && parsedUrl.pathname),
+      referrer: referrer,
+      referring_domain: safeCall(() => referrer && new URL(referrer).hostname),
+      host: parsedUrl && parsedUrl.host,
+      search: properties.search || (parsedUrl && parsedUrl.search),
+      title: properties.title || runtime.pageTitle(),
+      url: properties.url || url,
+      enconding: properties.enconding || runtime.documentEncoding(),
+    },
+    campaign: parseUtms(query),
+  };
+  const withContext = {
+    ...payload,
+    timestamp: new Date().toISOString(),
+    sentAt: new Date().toISOString(),
+    context: deepMerge(context, customContext),
+  };
+  delete withContext.meta;
+  delete withContext.options;
+  return withContext;
+}
+
+function send(method, payload, jitsuConfig: Required<JitsuOptions>, store: PersistentStorage): Promise<void> {
+  const url = `${jitsuConfig.host}/s/${method}`;
+  const fetch = jitsuConfig.fetch || globalThis.fetch;
+  if (!fetch) {
+    throw new Error(
+      "Please specify fetch function in jitsu plugin initialization, fetch isn't available in global scope"
+    );
+  }
+  const authHeader = jitsuConfig.writeKey ? { Authorization: `Bearer ${jitsuConfig.writeKey}` } : {};
+  const debugHeader = jitsuConfig.debug ? { "X-Enable-Debug": "true" } : {};
+
+  if (jitsuConfig.debug) {
+    console.log(`Sending jitsu event to ${url}: `, JSON.stringify(payload, null, 2));
+  }
+  const adjustedPayload = adjustPayload(payload, jitsuConfig, store);
+  return fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+
+      ...authHeader,
+      ...debugHeader,
+    },
+    body: JSON.stringify(adjustedPayload),
+  })
+    .then(res => {
+      if (jitsuConfig.debug) {
+        console.debug(
+          `Jitsu ${url} replied ${res.status}. Original payload: `,
+          JSON.stringify(adjustedPayload, null, 2)
+        );
+      }
+    })
+    .catch(err => {
+      if (jitsuConfig.debug) {
+        console.error(`Jitsu ${url} failed: `, err);
+      }
+    });
+}
+
+const jitsuAnalyticsPlugin = (pluginConfig: JitsuOptions = {}): AnalyticsPlugin => {
+  const storageCache: any = {};
+  // AnalyticsInstance's storage is async somewhere inside. So if we make 'page' call right after 'identify' call
+  // 'page' call will load traits from storage before 'identify' call had a change to save them.
+  // to avoid that we use in-memory cache for storage
+  const cachingStorageWrapper = (persistentStorage: PersistentStorage): PersistentStorage => ({
+    setItem(key: string, val: any) {
+      storageCache[key] = val;
+      persistentStorage.setItem(key, val);
+    },
+    getItem(key: string) {
+      return storageCache[key] || persistentStorage.getItem(key);
+    },
+    removeItem(key: string) {
+      delete storageCache[key];
+      persistentStorage.removeItem(key);
+    },
+  });
+  return {
+    name: "jitsu",
+    config: {
+      ...config,
+      ...pluginConfig,
+    },
+    initialize: args => {
+      const { config, instance } = args;
+      if (config.debug) {
+        console.debug("Initializing Jitsu plugin with config: ", JSON.stringify(config));
+      }
+      if (!config.host) {
+        throw new Error("Please specify host variable in jitsu plugin initialization");
+      }
+    },
+    page: args => {
+      const { payload, config, instance } = args;
+      return send("page", payload, config, cachingStorageWrapper(instance.storage));
+    },
+    track: args => {
+      const { payload, config, instance } = args;
+      return send("track", payload, config, cachingStorageWrapper(instance.storage));
+    },
+    identify: args => {
+      const { payload, config, instance } = args;
+      // Store traits in cache to be able to use them in page and track events that run asynchronously with current identify.
+      storageCache["__user_traits"] = payload.traits;
+      return send("identify", payload, config, cachingStorageWrapper(instance.storage));
+    },
+    reset: args => {
+      //clear storage cache
+      Object.keys(storageCache).forEach(key => delete storageCache[key]);
+    },
+  };
+};
+
+export default jitsuAnalyticsPlugin;

package/src/browser.ts

@@ -0,0 +1,78 @@
+import { JitsuOptions } from "./jitsu";
+import { jitsuAnalytics } from "./index";
+
+export type JitsuBrowserOptions = {
+  userId?: string;
+  onload?: string;
+  initOnly?: boolean;
+} & JitsuOptions;
+
+function snakeToCamel(s: string) {
+  return s.replace(/([-_][a-z])/gi, $1 => {
+    return $1.toUpperCase().replace("-", "").replace("_", "");
+  });
+}
+
+export type Parser = (arg: string) => any;
+const booleanParser = (arg: string) => arg === "true" || arg === "1" || arg === "yes";
+
+const parsers: Partial<Record<keyof JitsuBrowserOptions, Parser>> = {
+  debug: booleanParser,
+  initOnly: booleanParser,
+};
+
+function getParser(name: keyof JitsuBrowserOptions): Parser {
+  return parsers[name] || (x => x);
+}
+
+function getScriptAttributes(scriptElement: HTMLScriptElement) {
+  return scriptElement
+    .getAttributeNames()
+    .filter(name => name.indexOf("data-") === 0)
+    .map(name => name.substring("data-".length))
+    .reduce(
+      (res, name) => ({
+        ...res,
+        [snakeToCamel(name)]: getParser(snakeToCamel(name) as any)(scriptElement.getAttribute(`data-${name}`)),
+      }),
+      {}
+    );
+}
+
+(function () {
+  if (window["jitsu"]) {
+    console.log("Jitsu is already initialized");
+  }
+  function readJitsuOptions(): JitsuBrowserOptions {
+    const scriptElement = window.document.currentScript as HTMLScriptElement;
+    if (!scriptElement) {
+      throw new Error(`Can't find script element`);
+    }
+    const host = new URL(scriptElement.src).origin;
+
+    return { ...((window as any)?.jitsuConfig || {}), ...getScriptAttributes(scriptElement), host };
+  }
+
+  const options = readJitsuOptions();
+  if (options.debug) {
+    console.log(`Jitsu options: `, JSON.stringify(options));
+  }
+  const jitsu = jitsuAnalytics(options);
+
+  if (options.onload) {
+    const onloadFunction = window[options.onload] as any;
+    if (!onloadFunction) {
+      console.warn(`onload function ${options.onload} is not found in window`);
+    }
+    if (typeof onloadFunction === "function") {
+      onloadFunction(jitsu);
+    } else {
+      console.warn(`onload function ${options.onload} is not callable: ${typeof onloadFunction}`);
+    }
+  }
+  window["jitsu"] = jitsu;
+
+  if (!options.initOnly) {
+    jitsu.page();
+  }
+})();

package/src/index.ts

@@ -0,0 +1,46 @@
+import { AnalyticsInterface } from "@jitsu/types/analytics.d";
+import Analytics from "analytics";
+import { JitsuOptions, PersistentStorage } from "./jitsu";
+import jitsuAnalyticsPlugin, { emptyRuntime, windowRuntime } from "./analytics-plugin";
+
+export default function parse(input) {
+  let value = input;
+  if (input?.indexOf("%7B%22") === 0) {
+    value = decodeURIComponent(input);
+  }
+  try {
+    value = JSON.parse(input);
+    if (value === "true") return true;
+    if (value === "false") return false;
+    if (typeof value === "object") return value;
+    if (parseFloat(value) === value) {
+      value = parseFloat(value);
+    }
+  } catch (e) {}
+  if (value === null || value === "") {
+    return;
+  }
+  return value;
+}
+
+export function jitsuAnalytics(opts: JitsuOptions): AnalyticsInterface {
+  const rt = opts.runtime || (typeof window === "undefined" ? emptyRuntime(opts) : windowRuntime(opts));
+  const analytics = Analytics({
+    app: "test",
+    debug: !!opts.debug,
+    storage: rt.store(),
+    plugins: [jitsuAnalyticsPlugin(opts)],
+  } as any);
+  const originalPage = analytics.page;
+  analytics.page = (...args) => {
+    if (args.length === 2 && typeof args[0] === "string" && typeof args[1] === "object") {
+      return originalPage({
+        name: args[0],
+        ...args[1],
+      });
+    } else {
+      return originalPage(...args);
+    }
+  };
+  return analytics;
+}

package/src/jitsu.d.ts

@@ -0,0 +1,48 @@
+import { AnalyticsInterface } from "@jitsu/types/analytics";
+import type { AnalyticsPlugin } from "analytics";
+
+export type JitsuOptions = {
+  /**
+   * API Key. Optional. If not set, Jitsu will send event to the server without auth, and server
+   * will link the call to configured source by domain name
+   */
+  writeKey?: string;
+  /**
+   * API Host. Default value: same host as script origin
+   */
+  host?: string;
+  debug?: boolean;
+  cookieDomain?: string;
+  fetch?: typeof fetch;
+  runtime?: RuntimeFacade;
+};
+
+type PersistentStorage = {
+  getItem: (key: string, options?: any) => any;
+  setItem: (key: string, value: any, options?: any) => void;
+  removeItem: (key: string, options?: any) => void;
+};
+
+export type RuntimeFacade = {
+  store(): PersistentStorage;
+  userAgent(): string | undefined;
+  language(): string | undefined;
+  pageUrl(): string | undefined;
+  documentEncoding(): string | undefined;
+  timezoneOffset(): number | undefined;
+  screen():
+    | {
+        width: number;
+        height: number;
+        innerWidth: number;
+        innerHeight: number;
+        density: number;
+      }
+    | undefined;
+  referrer(): string | undefined;
+  pageTitle(): string | undefined;
+};
+
+export declare function jitsuAnalytics(opts: JitsuOptions): AnalyticsInterface;
+
+declare const jitsuAnalyticsPlugin: AnalyticsPlugin;

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "./compiled",
+    "declaration": false,
+    "esModuleInterop": true,
+    "moduleResolution": "Node",
+    "target": "ES2015",
+    "lib": ["es2017", "dom"],
+    //this makes typescript igore @types/node during compilation
+    "types": []
+  },
+  "include": ["./src", "./__tests__"],
+  "exclude": [
+    "__tests__",
+    "node_modules",
+    "dist",
+    "test_projects",
+    "test",
+    "templates"
+  ]
+}

package/tsconfig.test.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "rootDir": ".",
+    "outDir": "./compiled",
+    "declaration": false,
+    "esModuleInterop": true,
+    "moduleResolution": "Node",
+    "target": "ES2015",
+    "lib": ["es2017", "dom"]
+    //this makes typescript igore @types/node during compilation
+    //    "types": []
+  },
+  "include": ["./src", "./__tests__"],
+  "exclude": ["__tests__", "node_modules", "dist", "test_projects", "test", "templates"]
+}