@sesamy/sesamy-js 1.0.0 → 1.0.1

package/src/services/analytics/element-tracker.ts

@@ -1,124 +0,0 @@
-import { onUserActivity } from "@analytics/activity-utils";
-
-// IDLE_TIME is in ms
-const timeout = 5000;
-
-export interface ElementTrackerOptions {
-  element: HTMLElement;
-  viewCallback?: () => void;
-  activeDurationCallback?: (duration: number) => void;
-  idleDurationCallback?: (duration: number) => void;
-}
-
-export default class ElementTracker {
-  element: HTMLElement;
-
-  isInViewport = false;
-
-  isAwake = false;
-
-  isFlushing?: boolean;
-
-  observer: IntersectionObserver;
-
-  lastEventAt = Date.now();
-
-  registeredView = false;
-
-  viewCallback?: () => void;
-
-  activeDurationCallback?: (duration: number, flushing?: boolean) => void;
-
-  idleDurationCallback?: (duration: number, flushing?: boolean) => void;
-
-  constructor(options: ElementTrackerOptions) {
-    this.element = options.element;
-    // We NEED to have callbacks here rather than using events as events will be lost when the browser is unloading
-    this.viewCallback = options.viewCallback;
-    this.activeDurationCallback = options.activeDurationCallback;
-    this.idleDurationCallback = options.idleDurationCallback;
-
-    // Setup the interaction observer
-    this.observer = new IntersectionObserver(
-      (entries) => {
-        // I guess there will only be one entry? Verify?
-        entries.forEach((entry) => {
-          this.handleInViewPort(entry.isIntersecting);
-        });
-      },
-      {
-        threshold: 0,
-      },
-    );
-    this.observer.observe(this.element);
-
-    // Setup the active/idle
-    onUserActivity({
-      onIdle: (elapsedTime: number) => this.handleAwake(false, elapsedTime),
-      onWakeUp: (elapsedTime: number) => this.handleAwake(true, elapsedTime),
-      timeout,
-    });
-  }
-
-  /**
-   * Flush the awake timer in case the page is unloading
-   */
-  flush() {
-    this.isFlushing = true;
-    this.handleAwake(
-      !this.isAwake,
-      Math.round((Date.now() - this.lastEventAt) / 1000),
-    );
-  }
-
-  handleInViewPort(isInViewport: boolean) {
-    if (isInViewport) {
-      // A view envent only occurs if the element is active.
-      this.isAwake = true;
-      this.trackInViewport();
-    } else {
-      // An article outside the viewport is not active
-      this.handleAwake(
-        false,
-        Math.round((Date.now() - this.lastEventAt) / 1000),
-      );
-    }
-
-    this.isInViewport = isInViewport;
-  }
-
-  handleAwake(isAwake: boolean, elapsedTime: number) {
-    // Store the current awake state
-    this.isAwake = isAwake;
-    this.lastEventAt = isAwake
-      ? Date.now() - elapsedTime * timeout
-      : Date.now();
-
-    if (!this.isInViewport) {
-      return;
-    }
-    this.trackAwake(isAwake, elapsedTime);
-  }
-
-  trackAwake(awake: boolean, elapsedTime: number) {
-    if (!awake && this.activeDurationCallback) {
-      this.activeDurationCallback(elapsedTime, this.isFlushing);
-    }
-
-    if (awake && this.idleDurationCallback) {
-      this.idleDurationCallback(elapsedTime, this.isFlushing);
-    }
-  }
-
-  trackInViewport() {
-    if (this.registeredView) {
-      return;
-    }
-
-    this.registeredView = true;
-
-    if (this.viewCallback) {
-      this.viewCallback();
-    }
-  }
-}

package/src/services/analytics/index.ts

@@ -1,214 +0,0 @@
-import Analytics, { AnalyticsInstance } from "analytics";
-import saturated from "saturated";
-import { name, version } from "../../../package.json";
-import { TrackEvent } from "./types/track-event";
-import { AnalyticsConfig } from "../../types/Config";
-import { routeChangeListener } from "./listeners";
-import ElementTracker from "./element-tracker";
-import { ANALYTICS_BASE_URL } from "../../constants";
-
-type Analytic = {
-  anonymousId: string;
-  userId?: string;
-  properties: { [key: string]: string | number };
-  event: string;
-  type: string;
-};
-
-let flushing = false;
-
-let _clientId: string;
-let _enabled: boolean;
-let _endpoint: string;
-
-export interface AnalyticsEventWithType extends Analytic {
-  type: string;
-}
-
-export function initAnalytics({
-  clientId,
-  enabled = true,
-  endpoint = ANALYTICS_BASE_URL,
-}: AnalyticsConfig) {
-  _clientId = clientId;
-  _enabled = enabled;
-  _endpoint = endpoint;
-
-  if (!_enabled) {
-    return;
-  }
-
-  // Register route change listener
-  routeChangeListener();
-
-  // Register body events
-  const bodyTracker = new ElementTracker({
-    element: document.body,
-    viewCallback: () => {
-      analytics.page();
-    },
-    activeDurationCallback: (duration: number, flushing?: boolean) => {
-      analytics.track("activeDuration", {
-        duration,
-        flushing,
-      });
-    },
-    idleDurationCallback: (duration: number, flushing?: boolean) => {
-      analytics.track("idleDuration", {
-        duration,
-        flushing,
-      });
-    },
-  });
-
-  addUnloadPageListener(document.body, () => {
-    bodyTracker.flush();
-  });
-}
-
-function createMessage(payload: AnalyticsEventWithType[]): string {
-  return JSON.stringify(
-    payload.map((item) => ({
-      ...item,
-      timestamp: new Date().toISOString(),
-      originalTimestamp: new Date().toISOString(),
-      version,
-      event: item.event || "page",
-      context: {
-        page: {
-          url: window.location.hostname,
-          path: window.location.pathname,
-          title: document.title,
-          search: window.location.search,
-          referrer: document.referrer,
-        },
-        locale: navigator.language,
-        library: name,
-        userAgent: navigator.userAgent,
-        clientId: _clientId,
-      },
-    })),
-  );
-}
-
-const queue = saturated(
-  async (arr) => {
-    if (arr.length > 0) {
-      const payload = createMessage(arr);
-
-      if (flushing) {
-        navigator.sendBeacon(_endpoint, payload);
-      } else {
-        const response = await fetch(_endpoint, {
-          method: "POST",
-          body: payload,
-          headers: {
-            "Content-Type": "text/plain",
-          },
-        });
-
-        if (!response.ok) {
-          // TODO: Retry, maybe store data in local storage
-        }
-      }
-    }
-  },
-  {
-    max: 10, // limit
-    interval: 3000, // 3s
-  },
-);
-
-function send(payload: AnalyticsEventWithType) {
-  if (payload.properties.flushing) {
-    const payloadWithoutFlushing = { ...payload };
-    delete payloadWithoutFlushing.properties.flushing;
-
-    navigator.sendBeacon(_endpoint, createMessage([payloadWithoutFlushing]));
-  } else {
-    queue.push(payload);
-  }
-}
-
-export const analytics: AnalyticsInstance = Analytics({
-  app: name,
-  version,
-  plugins: [
-    {
-      name: "custom-analytics-plugin",
-      page: ({ payload }: { payload: Analytic }) => {
-        const { properties, anonymousId, userId, event } = payload;
-        const analyticsEvent = {
-          anonymousId,
-          userId,
-          properties,
-          event,
-          type: "page",
-        };
-        // Send data to custom collection endpoint
-        send(analyticsEvent);
-      },
-      track: ({ payload }: { payload: Analytic }) => {
-        const { properties, anonymousId, userId, event } = payload;
-        const analyticsEvent = {
-          anonymousId,
-          userId,
-          properties,
-          event,
-          type: "track",
-        };
-        send(analyticsEvent);
-      },
-    },
-  ],
-});
-
-export function getAnonymousUserId() {
-  return analytics.user().anonymousId;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function track(eventName: string, payload: any): void {
-  analytics.track(eventName, payload);
-}
-
-export function trackEvent(event: TrackEvent): void {
-  analytics.track(event.name, event);
-}
-
-export function flushQueue() {
-  flushing = true;
-  return queue.flush();
-}
-
-export function enableInteractions(callback?: () => void) {
-  analytics.plugins.enable("custom-analytics-plugin", callback);
-}
-
-export function disableInteractions(callback?: () => void) {
-  analytics.plugins.disable(
-    "custom-analytics-plugin",
-    callback || (() => true),
-  );
-}
-
-export type Action = () => void;
-const unloadPageListeners = new Map<Element, Action>();
-
-export function addUnloadPageListener(element: Element, action: Action) {
-  unloadPageListeners.set(element, action);
-}
-
-export function removeUnloadPageListener(element: Element) {
-  unloadPageListeners.delete(element);
-}
-
-window.addEventListener("beforeunload", () => {
-  // Flush the queues for all the registered element trackers
-  unloadPageListeners.forEach((action, element) => {
-    action.bind(element)();
-  });
-
-  // Flush the outbound queue
-  flushQueue();
-});

package/src/services/analytics/listeners/index.ts

@@ -1,2 +0,0 @@
-export * from './scroll.js';
-export * from './route.js';

package/src/services/analytics/listeners/route.ts

@@ -1,8 +0,0 @@
-import onRouteChange from "@analytics/router-utils";
-import { analytics } from "../index.js";
-
-export function routeChangeListener() {
-  onRouteChange(() => {
-    analytics.page();
-  });
-}

package/src/services/analytics/listeners/scroll.ts

@@ -1,61 +0,0 @@
-import { onScrollChange } from "@analytics/scroll-utils";
-import { TrackEvents } from "../types/track-event";
-import { trackEvent } from "..";
-
-export type ScrollEvent = {
-  direction: string;
-  range: number[];
-  scrollMax: number;
-  scrollMin: number;
-  trigger: number;
-};
-
-export function addScrollListener(itemSrc: string, publisherContentId: string) {
-  onScrollChange({
-    25: (scrollData: ScrollEvent) => {
-      trackEvent({
-        name: TrackEvents.Scroll,
-        scrollData: scrollData.direction,
-        percentage: scrollData.trigger,
-        itemSrc,
-        publisherContentId,
-      });
-    },
-    50: (scrollData: ScrollEvent) => {
-      trackEvent({
-        name: TrackEvents.Scroll,
-        scrollData: scrollData.direction,
-        percentage: scrollData.trigger,
-        itemSrc,
-        publisherContentId,
-      });
-    },
-    75: (scrollData: ScrollEvent) => {
-      trackEvent({
-        name: TrackEvents.Scroll,
-        scrollData: scrollData.direction,
-        percentage: scrollData.trigger,
-        itemSrc,
-        publisherContentId,
-      });
-    },
-    90: (scrollData: ScrollEvent) => {
-      trackEvent({
-        name: TrackEvents.Scroll,
-        scrollData: scrollData.direction,
-        percentage: scrollData.trigger,
-        itemSrc,
-        publisherContentId,
-      });
-    },
-    100: (scrollData: ScrollEvent) => {
-      trackEvent({
-        name: TrackEvents.Scroll,
-        scrollData: scrollData.direction,
-        percentage: scrollData.trigger,
-        itemSrc,
-        publisherContentId,
-      });
-    },
-  });
-}

package/src/services/analytics/types/analytics/activity-utils/index.d.ts

@@ -1,52 +0,0 @@
-interface OnDomActivityOptions {
-  throttle?: number;
-}
-
-interface OnUserActivityOptions {
-  onIdle?: (elapsedTime: number, event?: any) => void;
-  onWakeUp?: (elapsedTime: number, event?: any) => void;
-  onHeartbeat?: (elapsedTime: number, event?: any) => void;
-  timeout?: number;
-  throttle?: number;
-}
-
-interface UserActivityStatus {
-  disable: () => () => void;
-  getStatus: () => {
-    isIdle: boolean;
-    isDisabled: boolean;
-    active: number;
-    idle: number;
-  };
-}
-
-declare module "@analytics/activity-utils" {
-  /**
-   * Function to handle user inactivity.
-   * @param onIdle Function to be called when the user is idle.
-   * @param opts Optional configuration object.
-   * @returns An object with methods to control and get the status of the listener.
-   */
-  function onIdle(
-    onIdle: (elapsedTime: number, event?: any) => void,
-    opts?: OnUserActivityOptions,
-  ): UserActivityStatus;
-
-  /**
-   * Function to handle user wake up from idle.
-   * @param onWakeUp Function to be called when the user wakes up from idle.
-   * @param opts Optional configuration object.
-   * @returns An object with methods to control and get the status of the listener.
-   */
-  function onWakeUp(
-    onWakeUp: (elapsedTime: number, event?: any) => void,
-    opts?: OnUserActivityOptions,
-  ): UserActivityStatus;
-
-  /**
-   * Function to handle user activity.
-   * @param options Configuration object for user activity.
-   * @returns An object with methods to control and get the status of the listener.
-   */
-  function onUserActivity(options: OnUserActivityOptions): UserActivityStatus;
-}

package/src/services/analytics/types/analytics/router-utils/index.d.ts

@@ -1,7 +0,0 @@
-declare module '@analytics/router-utils' {
-  interface definitionInterface {
-    (message: string): void;
-  }
-  function onRouteChange(callback: definitionInterface): void;
-  export default onRouteChange;
-}

package/src/services/analytics/types/analytics/scroll-utils/index.d.ts

@@ -1,4 +0,0 @@
-declare module '@analytics/scroll-utils' {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  function onScrollChange(t: any): any;
-}

package/src/services/analytics/types/track-event.ts

@@ -1,70 +0,0 @@
-export enum TrackEvents {
-  ViewArticle = 'viewArticle',
-  ActiveDuration = 'activeDuration',
-  IdleDuration = 'idleDuration',
-  Scroll = 'scroll',
-  ChangeView = 'changeView',
-  AddToCart = 'addToCart',
-  ViewArticleListing = 'viewArticleListing',
-}
-
-interface ViewArticleListingProps {
-  name: TrackEvents.ViewArticleListing;
-  publisherContentId?: string;
-  itemSrc: string;
-}
-
-interface AddToCartEventProps {
-  name: TrackEvents.AddToCart;
-  publisherContentId?: string;
-  itemSrc: string;
-}
-
-interface ChangeViewEventProps {
-  name: TrackEvents.ChangeView;
-  view: string;
-}
-
-interface ScrollEventProps {
-  name: TrackEvents.Scroll;
-  publisherContentId?: string;
-  itemSrc: string;
-  scrollData: string;
-  percentage: number;
-}
-
-interface IdleDurationEventProps {
-  name: TrackEvents.IdleDuration;
-  duration: number;
-  publisherContentId?: string;
-  itemSrc: string;
-}
-
-interface ActiveDurationEventProps {
-  name: TrackEvents.ActiveDuration;
-  duration: number;
-  publisherContentId?: string;
-  itemSrc: string;
-}
-
-interface ViewArticleEventProps {
-  name: TrackEvents.ViewArticle;
-  itemSrc: string;
-  publisherContentId?: string;
-  state: 'public' | 'locked' | 'unlocked' | 'logged-in';
-}
-
-interface Flushing {
-  flushing?: boolean;
-}
-
-export type TrackEvent = Flushing &
-  (
-    | ViewArticleEventProps
-    | ActiveDurationEventProps
-    | IdleDurationEventProps
-    | ScrollEventProps
-    | ChangeViewEventProps
-    | AddToCartEventProps
-    | ViewArticleListingProps
-  );

package/src/services/auth/index.ts

@@ -1,60 +0,0 @@
-import { Auth0Client, createAuth0Client } from "@auth0/auth0-spa-js";
-import { BASE_URL_DOMAIN } from "../../constants";
-
-let auth0Client: Auth0Client;
-
-export async function init({ clientId }: { clientId: string }) {
-
-  auth0Client = await createAuth0Client({
-    domain: `token.${BASE_URL_DOMAIN}`,
-    clientId,
-    cacheLocation: 'localstorage'
-  });
-
-  if (window.location.search.includes("code=")) {
-    try {
-      await auth0Client.handleRedirectCallback();
-      window.history.replaceState({}, document.title, "/");
-    } catch (err) {
-      // Fail silently
-    }
-  }
-}
-
-export async function isAuthenticated() {
-  if (!auth0Client) {
-    throw new Error("Auth0 client not initialized");
-  }
-  return auth0Client.isAuthenticated();
-}
-
-export async function getUser() {
-  if (!auth0Client) {
-    throw new Error("Auth0 client not initialized");
-  }
-  return auth0Client.getUser();
-}
-
-export function loginWithRedirect() {
-  if (!auth0Client) {
-    throw new Error("Auth0 client not initialized");
-  }
-
-  return auth0Client.loginWithRedirect({
-    authorizationParams: {
-      redirect_uri: window.location.href,
-    },
-  });
-}
-
-export function logout() {
-  if (!auth0Client) {
-    throw new Error("Auth0 client not initialized");
-  }
-
-  return auth0Client.logout({
-    logoutParams: {
-      returnTo: window.location.href,
-    },
-  });
-}

package/src/state.ts

@@ -1,3 +0,0 @@
-{
-  // Soon to come more stuff here..
-}

package/src/style.css

@@ -1,97 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-sesamy-app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vanilla:hover {
-  filter: drop-shadow(0 0 2em #3178c6aa);
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-.hidden { display: none; }
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}