@financial-times/custom-code-component 1.11.1 → 2.0.1-alpha.10

package/src/{get-trace.js → get-trace.ts}

@@ -2,12 +2,17 @@
 import {
   sanitise,
   assignIfUndefined,
-} from "@financial-times/o-tracking/src/javascript/utils.js";
+} from "@financial-times/o-tracking/src/javascript/utils";
 
+type PropMap = { [k: string]: any };
 // For a given container element, get the number of elements that match the
 // original element (siblings); and the index of the original element (position).
-const getSiblingsAndPosition = (el, originalEl, selector) => {
-  const siblings = Array.from(el.querySelectorAll(selector));
+const getSiblingsAndPosition = (
+  el: Element | null,
+  originalEl: Element,
+  selector: string
+) => {
+  const siblings = Array.from(el?.querySelectorAll(selector) ?? []);
   const position = siblings.findIndex((item) => item === originalEl);
   if (position === -1) {
     return;
@@ -27,8 +32,8 @@ const elementPropertiesToCollect = [
   "role",
 ];
 // Get all (sanitised) properties of a given element.
-const getAllElementProperties = (element) => {
-  const properties = {};
+const getAllElementProperties = (element: any) => {
+  const properties: PropMap = {};
   for (const property of elementPropertiesToCollect) {
     const value =
       element[property] ||
@@ -46,7 +51,7 @@ const getAllElementProperties = (element) => {
   return properties;
 };
 
-const parseRawValue = (rawValue) => {
+const parseRawValue = (rawValue: string) => {
   try {
     const parsedValue = JSON.parse(rawValue);
     const type = Object.prototype.toString.call(parsedValue);
@@ -58,14 +63,14 @@ const parseRawValue = (rawValue) => {
   }
 };
 
-const getAttributeValue = (rawValue) => {
+const getAttributeValue = (rawValue: string) => {
   const [isJSON, value] = parseRawValue(rawValue);
 
   return isJSON ? value : rawValue;
 };
 
 // Get some properties of a given element.
-const getDomPathProps = (attrs, props) => {
+const getDomPathProps = (attrs: Attr[], props: PropMap) => {
   // Collect any attribute that matches given strings.
   attrs
     .filter((attribute) =>
@@ -79,8 +84,12 @@ const getDomPathProps = (attrs, props) => {
 };
 
 // Get only the custom data-trackable-context-? properties of a given element
-const getContextProps = (attrs, props, isOriginalEl) => {
-  const customProps = {};
+const getContextProps = (
+  attrs: Attr[],
+  props: PropMap,
+  isOriginalEl: boolean
+) => {
+  const customProps: { [k: string]: any } = {};
 
   // for the original element collect properties like className, nodeName
   if (isOriginalEl) {
@@ -102,11 +111,11 @@ const getContextProps = (attrs, props, isOriginalEl) => {
   return customProps;
 };
 
-export function getTrace(el, rootEl) {
+export function getTrace(el: Element, rootEl: Element) {
   const originalEl = el;
-  const selector = originalEl.getAttribute("data-trackable")
+  const selector = originalEl?.getAttribute("data-trackable")
     ? `[data-trackable="${originalEl.getAttribute("data-trackable")}"]`
-    : originalEl.nodeName;
+    : originalEl?.nodeName;
   const trace = [];
   const customContext = {};
   while (el && el !== rootEl) {
@@ -129,7 +138,7 @@ export function getTrace(el, rootEl) {
 
     assignIfUndefined(contextProps, customContext);
 
-    el = el.parentNode;
+    el = el.parentNode as Element;
   }
   return { trace, customContext };
 }

package/src/index.ts

@@ -0,0 +1,8 @@
+import { FTCustomCodeComponent } from "./custom-code-component";
+
+// Register the custom element
+export const init = () =>
+  customElements.define("custom-code-component", FTCustomCodeComponent);
+
+// Allows module to be imported multiple times but custom element only registered once
+if (customElements && !customElements.get("custom-code-component")) init();

package/src/logger.ts

@@ -0,0 +1,71 @@
+export const LogLevel = Object.freeze({
+  DEBUG: 0,
+  INFO: 1,
+  WARN: 2,
+  ERROR: 3,
+  TEST: 4,
+  DEFAULT: 2,
+});
+
+export function convertStringLogLevel(value: string | null) {
+  const level = value?.toLowerCase();
+
+  if (level === "debug") {
+    return LogLevel.DEBUG;
+  }
+
+  if (level === "info") {
+    return LogLevel.INFO;
+  }
+
+  if (level === "warn") {
+    return LogLevel.WARN;
+  }
+
+  if (level === "error") {
+    return LogLevel.ERROR;
+  }
+
+  if (level === "test") {
+    return LogLevel.TEST;
+  }
+
+  return LogLevel.DEFAULT;
+}
+
+export class Logger {
+  level: number;
+  constructor(
+    { level = LogLevel.DEFAULT }: { level: number } = {
+      level: LogLevel.DEFAULT,
+    }
+  ) {
+    this.level = level;
+  }
+
+  debug(...args: any[]) {
+    if (this.level <= LogLevel.DEBUG) {
+      console.info(...args);
+    }
+  }
+
+  log = this.debug;
+
+  info(...args: any[]) {
+    if (this.level <= LogLevel.INFO) {
+      console.info(...args);
+    }
+  }
+
+  warn(...args: any[]) {
+    if (this.level <= LogLevel.WARN) {
+      console.warn(...args);
+    }
+  }
+
+  error(...args: any[]) {
+    if (this.level <= LogLevel.ERROR) {
+      console.error(...args);
+    }
+  }
+}

package/src/path.ts

@@ -0,0 +1,83 @@
+import { CCCError } from "./errors";
+
+export type ComponentPathType = {
+  org: string;
+  repo: string;
+  component: string;
+  versionRange: string;
+};
+export class ComponentPath {
+  org: string;
+  repo: string;
+  component: string;
+  versionRange: string;
+
+  constructor(path: ComponentPathType | string) {
+    const { org, repo, component, versionRange } = isValidComponentPathObject(
+      path
+    )
+      ? path
+      : ComponentPath.fromString(path);
+    this.org = org;
+    this.repo = repo;
+    this.component = component;
+    this.versionRange = versionRange;
+  }
+
+  set path(path: ComponentPathType | string) {
+    const { org, repo, component, versionRange } = isValidComponentPathObject(
+      path
+    )
+      ? path
+      : ComponentPath.fromString(path);
+    this.org = org;
+    this.repo = repo;
+    this.component = component;
+    this.versionRange = versionRange;
+  }
+
+  get path(): string {
+    return `${this.org}/${this.repo}@${this.versionRange}/${this.component}`;
+  }
+
+  toString(): string {
+    return this.path;
+  }
+
+  static fromString(path: string | null, v?: string | null): ComponentPath {
+    if (!path) throw new CCCError("No path specified");
+
+    const versionRange =
+      v ??
+      path
+        .match(/@[^\/]+/)
+        ?.toString()
+        .replace("@", "") ??
+      "unknown";
+
+    if (!versionRange) throw new CCCError("No version specified");
+
+    const [component, repo, org] = path
+      .replace(/@[^\/]+/, "")
+      .split("/")
+      .reverse();
+
+    return new ComponentPath({ org, repo, component, versionRange });
+  }
+}
+
+export type DetailType = {
+  component: ComponentPath;
+  source?: string;
+  cause?: string;
+};
+
+export function isValidComponentPathObject(
+  value: unknown
+): value is ComponentPathType {
+  if (typeof value === "object" && value !== null) {
+    return "org" in value && "repo" in value && "component" in value;
+  }
+
+  return false;
+}

package/src/tracking.ts

@@ -1,9 +1,11 @@
-import Delegate from "ftdomdelegate";
-import { getTrace } from "./get-trace";
+import Delegate from "ftdomdelegate/main";
+
 import {
   sanitise,
   assignIfUndefined,
-} from "@financial-times/o-tracking/src/javascript/utils.js";
+} from "@financial-times/o-tracking/src/javascript/utils";
+import { Logger } from "./logger";
+import { getTrace } from "./get-trace";
 
 const eventPropertiesToCollect = ["ctrlKey", "altKey", "shiftKey", "metaKey"];
 
@@ -16,6 +18,7 @@ class Tracking {
   category: string;
   elements: string | string[];
   isInitialised: boolean;
+  log: Logger;
 
   constructor({
     id = "00000000-0000-0000-0000-000000000000",
@@ -25,6 +28,7 @@ class Tracking {
     shadowRoot = null,
     category = "cta",
     elements = 'a, button, input, [role="button"]',
+    logger,
   }: {
     id?: string;
     name: string;
@@ -33,6 +37,7 @@ class Tracking {
     shadowRoot: ShadowRoot | null;
     category?: string;
     elements?: string | string[];
+    logger: Logger;
   }) {
     this.cccId = id;
     this.cccName = name;
@@ -42,17 +47,18 @@ class Tracking {
     this.category = category;
     this.elements = elements;
     this.isInitialised = false;
+    this.log = logger ?? new Logger();
   }
 
   // Get properties for the event (as opposed to properties of the clicked element)
-  getEventProperties(event) {
-    const eventProperties = {};
+  getEventProperties(event: any) {
+    const eventProperties: { [k: string]: any } = {};
     for (const property of eventPropertiesToCollect) {
       if (event[property]) {
         try {
           eventProperties[property] = sanitise(event[property]);
         } catch (e) {
-          console.log(e);
+          this.log.info(e);
         }
       }
     }
@@ -60,8 +66,11 @@ class Tracking {
   }
 
   // Controller for handling click events
-  handleClickEvent(eventData, root) {
-    return (clickEvent, clickElement) => {
+  handleClickEvent(
+    eventData: { action: string; category: string },
+    root: Element
+  ) {
+    return (clickEvent: Event, clickElement: HTMLElement) => {
       const context: any = this.getEventProperties(clickEvent);
       const { trace, customContext } = getTrace(clickElement, root);
       context.custom =
@@ -94,7 +103,7 @@ class Tracking {
     };
   }
 
-  sendSpoorEvent(triggerAction, extraDetail) {
+  sendSpoorEvent(triggerAction: any, extraDetail: any) {
     const eventData = {
       category: "component",
       action: "act",
@@ -120,7 +129,7 @@ class Tracking {
     );
   }
 
-  init(id) {
+  init(id: string) {
     if (!this.isInitialised) {
       this.isInitialised = true;
       this.cccId = id ? id : this.cccId;
@@ -132,7 +141,7 @@ class Tracking {
 
       const root = this.shadowRoot?.querySelector("[data-component-root]");
 
-      if (this.shadowRoot) {
+      if (root) {
         const shadowDelegate = new Delegate(root);
         shadowDelegate.on(
           "click",

package/src/util.ts

@@ -0,0 +1,66 @@
+/**
+ * Used to convert camelCase to kebab-case
+ * @param str
+ * @returns
+ */
+export const kebabize = (str: string) =>
+  str.replace(
+    /[A-Z]+(?![a-z])|[A-Z]/g,
+    ($, ofs) => (ofs ? "-" : "") + $.toLowerCase()
+  );
+
+/**
+ * Checks if the provided host is part of the allowed test environments.
+ *
+ * @param host - The hostname to check.
+ * @returns True if the hostname is a safe test environment, false otherwise.
+ */
+export function isSafeTestEnv(host: string | undefined) {
+  return isAllowed([
+    'localhost',
+    'local.ft.com',
+    /^.*\.apps\.in\.ft\.com$/,
+  ], host);
+}
+
+/**
+ * Checks if the current window location hostname is considered a local environment.
+ *
+ * @returns True if the hostname is local, false otherwise.
+ */
+export function isLocalEnv() {
+  return isAllowed([
+    'localhost',
+    'local.ft.com',
+    /^.*\.in\.ft\.com$/,
+  ], window.location.hostname);
+}
+
+/**
+ * Checks if the current window location host is one of the Spark environments.
+ *
+ * @returns True if the host is spark.ft.com or spark-staging.ft.com, false otherwise.
+ */
+export function isSparkEnv() {
+  return isAllowed([
+    'spark.ft.com',
+    'spark-staging.ft.com',
+  ], window.location.host);
+}
+
+/**
+ * Checks if the given hostname is in the provided allowlist.
+ *
+ * @param allowlist - A list of allowed hostnames or RegExp matchers.
+ * @param hostname - The hostname to validate.
+ * @returns True if the hostname matches any item in the allowlist, false otherwise.
+ */
+export function isAllowed(allowlist: (string|RegExp)[], hostname: string | undefined) {
+  if (!hostname) return false;
+  return allowlist.some(item => {
+    if (typeof item === 'string') {
+      return item === hostname;
+    }
+    return item.test(hostname);
+  });
+} 

package/dist/custom-code-component.d.ts

@@ -1,21 +0,0 @@
-/**
- * @file
- * Main component definition for custom-code-component
- */
-import { ContentTree } from "@financial-times/content-tree";
-export declare const init: () => void;
-export interface CustomCodeComponent extends ContentTree.Node {
-    type: "CustomCodeComponent";
-    path: string;
-    versionRange: string;
-    altText: string;
-    lastModified: string;
-    fallbackImage?: ContentTree.Image;
-    displayFallbackText: boolean;
-    layout: "in-line" | "mid-grid" | "full-grid" | "full-bleed";
-    attributes: {
-        [key: string]: string | boolean | undefined;
-    } | {
-        children?: CustomCodeComponent | Array<CustomCodeComponent>;
-    };
-}