@financial-times/custom-code-component 1.9.7 → 1.9.9

package/dist/tracking.d.ts

@@ -7,14 +7,14 @@ declare class Tracking {
     category: string;
     elements: string | string[];
     isInitialised: boolean;
-    constructor({ id, name, subtype, teamName, shadowRoot, category, elements, }?: {
+    constructor({ id, name, subtype, teamName, shadowRoot, category, elements, }: {
         id?: string;
-        name?: string;
-        subtype?: string;
+        name: string;
+        subtype: string;
         teamName?: string;
-        shadowRoot?: any;
+        shadowRoot: ShadowRoot | null;
         category?: string;
-        elements?: string;
+        elements?: string | string[];
     });
     getEventProperties(event: any): {};
     handleClickEvent(eventData: any, root: any): (clickEvent: any, clickElement: any) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/custom-code-component",
-  "version": "1.9.7",
+  "version": "1.9.9",
   "type": "module",
   "exports": {
     ".": {
@@ -26,11 +26,13 @@
     "vite-plugin-dts": "^3.6.0"
   },
   "dependencies": {
-    "@financial-times/o-tracking": "^4.5.4",
     "ftdomdelegate": "^5.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
+  "peerDependencies": {
+    "@financial-times/o-tracking": "4.x"
+  },
   "overrides": {
     "react-dom16": {
       "react": "react16"

package/src/custom-code-component.ts

@@ -44,14 +44,14 @@ class FTCustomCodeComponent extends HTMLElement {
     );
 
     // Clear old children
-    this.shadowRoot?.replaceChildren();
+    // this.shadowRoot?.replaceChildren();
 
     // Create tracking instance
     this.tracking = new Tracking({
       name: `${this.getAttribute("path")}@${this.getAttribute("version")}`,
       subtype: "interactive",
       teamName: "djd",
-      shadowRoot: this.shadowRoot as ShadowRoot,
+      shadowRoot: this.shadowRoot,
     });
 
     const { unmount, onmessage } =

package/src/tracking.ts

@@ -1,5 +1,4 @@
 import Delegate from "ftdomdelegate";
-import oTracking from "@financial-times/o-tracking";
 import { getTrace } from "./get-trace";
 import {
   sanitise,
@@ -26,7 +25,15 @@ class Tracking {
     shadowRoot = null,
     category = "cta",
     elements = 'a, button, input, [role="button"]',
-  } = {}) {
+  }: {
+    id?: string;
+    name: string;
+    subtype: string;
+    teamName?: string;
+    shadowRoot: ShadowRoot | null;
+    category?: string;
+    elements?: string | string[];
+  }) {
     this.cccId = id;
     this.cccName = name;
     this.subtype = subtype;
@@ -119,14 +126,12 @@ class Tracking {
       this.isInitialised = true;
       this.cccId = id ? id : this.cccId;
 
-      oTracking.init({ queue: true });
-
       const eventData = {
         action: "click",
         category: this.category,
       };
 
-      const root = this.shadowRoot?.querySelector("#component-root");
+      const root = this.shadowRoot?.querySelector("[data-component-root]");
 
       if (this.shadowRoot) {
         const shadowDelegate = new Delegate(root);