@jitsu/js 1.0.0-canary-20230211030946 → 1.0.0-canary-20230219230011

package/src/destination-plugins.ts

@@ -0,0 +1,103 @@
+import { AnalyticsClientEvent } from "@jitsu/protocols/analytics";
+import { isInBrowser, randomId } from "./analytics-plugin";
+
+export type InternalPlugin<T> = {
+  id: string;
+  handle(config: T, payload: AnalyticsClientEvent): Promise<void>;
+};
+
+export type CommonDestinationCredentials = {
+  hosts?: string[];
+  events?: string[];
+};
+
+export type TagDestinationCredentials = {
+  code: string;
+} & CommonDestinationCredentials;
+
+function satisfyFilter(filter: string, subject: string | undefined): boolean {
+  return filter === "*" || filter.toLowerCase().trim() === (subject || "").trim().toLowerCase();
+}
+
+function applyFilters(event: AnalyticsClientEvent, creds: CommonDestinationCredentials): boolean {
+  const { hosts = ["*"], events = ["*"] } = creds;
+  return (
+    !!hosts.find(hostFilter => satisfyFilter(hostFilter, event.context?.host)) &&
+    !!events.find(eventFilter => satisfyFilter(eventFilter, event.type))
+  );
+}
+
+const tagPlugin: InternalPlugin<TagDestinationCredentials> = {
+  id: "tag",
+  async handle(config, payload: AnalyticsClientEvent) {
+    if (!applyFilters(payload, config)) {
+      return;
+    }
+    insertTags(config.code, payload);
+  },
+};
+
+function insertTags(code, event: AnalyticsClientEvent, opts: { debug?: boolean } = {}) {
+  let tag;
+  try {
+    tag = JSON.parse(code);
+  } catch (e) {
+    tag = { code, lang: "javascript" };
+  }
+  const debug = opts.debug || false;
+  if (isInBrowser()) {
+    if (tag.lang === "javascript") {
+      execJs(tag.code, event);
+    } else {
+      const codeHolder = document.createElement("span");
+      codeHolder.innerHTML = replaceMacro(tag.code, event);
+      document.body.insertAdjacentElement("beforeend", codeHolder);
+      const scripts = codeHolder.querySelectorAll("script");
+      scripts.forEach(script => {
+        const scriptClone = document.createElement("script");
+        scriptClone.type = scriptClone.type || "text/javascript";
+        if (script.hasAttribute("src")) {
+          scriptClone.src = script.src;
+        }
+        scriptClone.text = script.text;
+        if (debug) {
+          console.log(
+            `[JITSU] Executing script${script.hasAttribute("src") ? ` ${script.src}` : ""}`,
+            scriptClone.text
+          );
+        }
+        document.head.appendChild(scriptClone);
+        document.head.removeChild(scriptClone);
+      });
+    }
+  } else {
+    if (debug) {
+      console.log(`[JITSU] insertTags(): cannot insert tags in non-browser environment`);
+    }
+  }
+}
+
+function execJs(code: string, event: any) {
+  const varName = `jitsu_event_${randomId()}`;
+  window[varName] = event;
+  const iif = `(function(){
+      const event = ${varName};
+      ${code}
+  })()`;
+  try {
+    eval(iif);
+  } catch (e) {
+    console.error(`[JITSU] Error executing JS code: ${e.message}. Code: `, iif);
+  } finally {
+    delete window[varName];
+  }
+  return iif;
+}
+
+function replaceMacro(code, event) {
+  return code.replace(/{{\s*event\s*}}/g, JSON.stringify(event));
+}
+
+export const internalDestinationPlugins: Record<string, InternalPlugin<any>> = {
+  [tagPlugin.id]: tagPlugin,
+};

package/src/index.ts

@@ -1,6 +1,8 @@
 import Analytics from "analytics";
-import { JitsuOptions, AnalyticsInterface } from "./jitsu";
-import jitsuAnalyticsPlugin, { emptyRuntime, windowRuntime } from "./analytics-plugin";
+import { AnalyticsInterface, JitsuOptions, RuntimeFacade } from "./jitsu";
+import jitsuAnalyticsPlugin, { emptyRuntime, isInBrowser, windowRuntime } from "./analytics-plugin";
+import { delayMethodExec } from "./method-queue";
+import e from "express";
 
 export default function parse(input) {
   let value = input;
@@ -22,13 +24,16 @@ export default function parse(input) {
   return value;
 }
 
-export function jitsuAnalytics(opts: JitsuOptions): AnalyticsInterface {
-  const rt = opts.runtime || (typeof window === "undefined" ? emptyRuntime(opts) : windowRuntime(opts));
+function createUnderlyingAnalyticsInstance(
+  opts: JitsuOptions,
+  rt: RuntimeFacade,
+  plugins: any[] = []
+): AnalyticsInterface {
   const analytics = Analytics({
     app: "test",
     debug: !!opts.debug,
     storage: rt.store(),
-    plugins: [jitsuAnalyticsPlugin(opts)],
+    plugins: [jitsuAnalyticsPlugin(opts), ...plugins],
   } as any);
   const originalPage = analytics.page;
   analytics.page = (...args) => {
@@ -41,7 +46,36 @@ export function jitsuAnalytics(opts: JitsuOptions): AnalyticsInterface {
       return originalPage(...args);
     }
   };
-  return analytics;
+  return analytics as AnalyticsInterface;
+}
+
+export function jitsuAnalytics(opts: JitsuOptions): AnalyticsInterface {
+  const inBrowser = isInBrowser();
+  const rt = opts.runtime || (inBrowser ? windowRuntime(opts) : emptyRuntime(opts));
+  return createUnderlyingAnalyticsInstance(opts, rt);
+
+  // if (inBrowser) {
+  //   const fetch = opts.fetch || globalThis.fetch;
+  //   if (!fetch) {
+  //     throw new Error(
+  //       "Please specify fetch function in jitsu plugin initialization, fetch isn't available in global scope"
+  //     );
+  //   }
+  //   const url = `${opts.host}/api/s/cfg`;
+  //   const authHeader = {};
+  //   const debugHeader = opts.debug ? { "X-Enable-Debug": "true" } : {};
+  //   fetch(url)
+  //     .then(res => res.json())
+  //     .then(res => {
+  //       result.loaded(createUnderlyingAnalyticsInstance(opts, rt, []));
+  //     })
+  //     .catch(e => {
+  //       console.warn(`[JITSU] error getting device-destinations from ${url}`, e);
+  //       result.loaded(createUnderlyingAnalyticsInstance(opts, rt));
+  //     });
+  // } else {
+  //   result.loaded(createUnderlyingAnalyticsInstance(opts, rt));
+  // }
 }
 
 export * from "./jitsu";

package/src/method-queue.ts

@@ -0,0 +1,70 @@
+export type InterfaceWrapper<T> = {
+  get(): WithAsyncMethods<T>;
+  loaded(instance: T);
+};
+
+type MethodCall<M> = {
+  method: keyof M;
+  args: any[];
+  resolve?: (value: any) => void;
+  reject?: (reason: any) => void;
+};
+
+type WithAsyncMethods<T> = {
+  [K in keyof T]: T[K] extends (...args: infer A) => infer R
+    ? (...args: A) => R extends Promise<any> ? R : Promise<R>
+    : T[K];
+};
+
+/**
+ * This function creates a wrapper around an interface that allows to call methods on it, but all methods will go to queue. Once actual instance
+ * implementation becomes available, all queued methods will be called on it.
+ *
+ *
+ * @param methods of methods that should be wrapped. Per each method of you should specify if it should be wrapped. You'll need to mark all
+ * methods for type safety. If method is not wrapped, it will throw an error when called.
+ */
+export function delayMethodExec<T>(methods: Record<keyof T, boolean>): InterfaceWrapper<T> {
+  const queue: Array<MethodCall<T>> = [];
+
+  let instance: Partial<T> = {};
+  for (const [_method, enabled] of Object.entries(methods)) {
+    const method = _method as keyof T;
+    if (enabled) {
+      instance[method] = ((...args) => {
+        queue.push({ method, args });
+        return new Promise((resolve, reject) => {
+          queue[queue.length - 1].resolve = resolve;
+          queue[queue.length - 1].reject = reject;
+        });
+      }) as any;
+    } else {
+      instance[method] = (() => {
+        throw new Error(`Method ${_method} is not implemented`);
+      }) as any;
+    }
+  }
+
+  return {
+    get() {
+      return instance as WithAsyncMethods<T>;
+    },
+    loaded(newInstance: T) {
+      for (const { method, args, resolve, reject } of queue) {
+        try {
+          const result = (newInstance[method] as any)(...args);
+          if (typeof result.then === "function") {
+            result.then(resolve).catch(reject);
+          } else {
+            resolve(result);
+          }
+        } catch (e) {
+          reject(e);
+        }
+      }
+      for (const method of Object.keys(methods)) {
+        instance[method] = newInstance[method];
+      }
+    },
+  };
+}

package/src/script-loader.ts

@@ -0,0 +1,51 @@
+function findScript(src: string): HTMLScriptElement | undefined {
+  const scripts = Array.prototype.slice.call(window.document.querySelectorAll("script"));
+  return scripts.find(s => s.src === src);
+}
+
+export function loadScript(src: string, attributes?: Record<string, string>): Promise<HTMLScriptElement> {
+  const found = findScript(src);
+
+  if (found !== undefined) {
+    const status = found?.getAttribute("status");
+
+    if (status === "loaded") {
+      return Promise.resolve(found);
+    }
+
+    if (status === "loading") {
+      return new Promise((resolve, reject) => {
+        found.addEventListener("load", () => resolve(found));
+        found.addEventListener("error", err => reject(err));
+      });
+    }
+  }
+
+  return new Promise((resolve, reject) => {
+    const script = window.document.createElement("script");
+
+    script.type = "text/javascript";
+    script.src = src;
+    script.async = true;
+
+    script.setAttribute("status", "loading");
+    for (const [k, v] of Object.entries(attributes ?? {})) {
+      script.setAttribute(k, v);
+    }
+
+    script.onload = (): void => {
+      script.onerror = script.onload = null;
+      script.setAttribute("status", "loaded");
+      resolve(script);
+    };
+
+    script.onerror = (): void => {
+      script.onerror = script.onload = null;
+      script.setAttribute("status", "error");
+      reject(new Error(`Failed to load ${src}`));
+    };
+
+    const tag = window.document.getElementsByTagName("script")[0];
+    tag.parentElement?.insertBefore(script, tag);
+  });
+}