@financial-times/custom-code-component 1.9.6 → 1.9.8

package/dist/custom-code-component.js

@@ -23,56 +23,56 @@ w.prototype.captureForType = function(t) {
   return ["blur", "error", "focus", "load", "resize", "scroll"].indexOf(t) !== -1;
 };
 w.prototype.on = function(t, e, n, o) {
-  let r, i, a, c;
+  let r, i, s, c;
   if (!t)
     throw new TypeError("Invalid event type: " + t);
   if (typeof e == "function" && (o = n, n = e, e = null), o === void 0 && (o = this.captureForType(t)), typeof n != "function")
     throw new TypeError("Handler must be a type of Function");
-  return r = this.rootElement, i = this.listenerMap[o ? 1 : 0], i[t] || (r && r.addEventListener(t, this.handle, o), i[t] = []), e ? /^[a-z]+$/i.test(e) ? (c = e, a = Et) : /^#[a-z0-9\-_]+$/i.test(e) ? (c = e.slice(1), a = xt) : (c = e, a = Element.prototype.matches) : (c = null, a = vt.bind(this)), i[t].push({
+  return r = this.rootElement, i = this.listenerMap[o ? 1 : 0], i[t] || (r && r.addEventListener(t, this.handle, o), i[t] = []), e ? /^[a-z]+$/i.test(e) ? (c = e, s = Et) : /^#[a-z0-9\-_]+$/i.test(e) ? (c = e.slice(1), s = xt) : (c = e, s = Element.prototype.matches) : (c = null, s = vt.bind(this)), i[t].push({
     selector: e,
     handler: n,
-    matcher: a,
+    matcher: s,
     matcherParam: c
   }), this;
 };
 w.prototype.off = function(t, e, n, o) {
-  let r, i, a, c, s;
+  let r, i, s, c, a;
   if (typeof e == "function" && (o = n, n = e, e = null), o === void 0)
     return this.off(t, e, n, !0), this.off(t, e, n, !1), this;
-  if (a = this.listenerMap[o ? 1 : 0], !t) {
-    for (s in a)
-      a.hasOwnProperty(s) && this.off(s, e, n);
+  if (s = this.listenerMap[o ? 1 : 0], !t) {
+    for (a in s)
+      s.hasOwnProperty(a) && this.off(a, e, n);
     return this;
   }
-  if (c = a[t], !c || !c.length)
+  if (c = s[t], !c || !c.length)
     return this;
   for (r = c.length - 1; r >= 0; r--)
     i = c[r], (!e || e === i.selector) && (!n || n === i.handler) && (this._removedListeners.push(i), c.splice(r, 1));
-  return c.length || (delete a[t], this.rootElement && this.rootElement.removeEventListener(t, this.handle, o)), this;
+  return c.length || (delete s[t], this.rootElement && this.rootElement.removeEventListener(t, this.handle, o)), this;
 };
 w.prototype.handle = function(t) {
   let e, n;
   const o = t.type;
-  let r, i, a, c, s = [], u;
+  let r, i, s, c, a = [], u;
   const l = "ftLabsDelegateIgnore";
   if (t[l] === !0)
     return;
   switch (u = t.target, u.nodeType === 3 && (u = u.parentNode), u.correspondingUseElement && (u = u.correspondingUseElement), r = this.rootElement, i = t.eventPhase || (t.target !== t.currentTarget ? 3 : 2), i) {
     case 1:
-      s = this.listenerMap[1][o];
+      a = this.listenerMap[1][o];
       break;
     case 2:
-      this.listenerMap[0] && this.listenerMap[0][o] && (s = s.concat(this.listenerMap[0][o])), this.listenerMap[1] && this.listenerMap[1][o] && (s = s.concat(this.listenerMap[1][o]));
+      this.listenerMap[0] && this.listenerMap[0][o] && (a = a.concat(this.listenerMap[0][o])), this.listenerMap[1] && this.listenerMap[1][o] && (a = a.concat(this.listenerMap[1][o]));
       break;
     case 3:
-      s = this.listenerMap[0][o];
+      a = this.listenerMap[0][o];
       break;
   }
   let f = [];
-  for (n = s.length; u && n; ) {
-    for (e = 0; e < n && (a = s[e], !!a); e++)
-      u.tagName && ["button", "input", "select", "textarea"].indexOf(u.tagName.toLowerCase()) > -1 && u.hasAttribute("disabled") ? f = [] : a.matcher.call(u, a.matcherParam, u) && f.push([t, u, a]);
-    if (u === r || (n = s.length, u = u.parentElement || u.parentNode, u instanceof HTMLDocument))
+  for (n = a.length; u && n; ) {
+    for (e = 0; e < n && (s = a[e], !!s); e++)
+      u.tagName && ["button", "input", "select", "textarea"].indexOf(u.tagName.toLowerCase()) > -1 && u.hasAttribute("disabled") ? f = [] : s.matcher.call(u, s.matcherParam, u) && f.push([t, u, s]);
+    if (u === r || (n = a.length, u = u.parentElement || u.parentNode, u instanceof HTMLDocument))
       break;
   }
   let d;
@@ -216,8 +216,8 @@ function ot(t) {
     }
     if (r instanceof Object) {
       e.add(r);
-      for (const [a, c] of Object.entries(r))
-        c instanceof Object && (Array.isArray(r) ? o(c, `${i}[${a}]`) : o(c, `${i}.${a}`));
+      for (const [s, c] of Object.entries(r))
+        c instanceof Object && (Array.isArray(r) ? o(c, `${i}[${s}]`) : o(c, `${i}.${s}`));
     }
   }
   return o(t, ""), n;
@@ -276,51 +276,51 @@ function q(t, e) {
 const S = function(t, e = {}) {
   const n = "o-tracking";
   if (typeof t != "string" || t === "") {
-    const s = new Error("You must specify a name for the store.");
+    const a = new Error("You must specify a name for the store.");
     throw v("oErrors", "log", {
-      error: s.message,
+      error: a.message,
       info: { module: "o-tracking" }
-    }), s;
+    }), a;
   }
   this.config = Object.assign({}, e), this.data = null, this.storageKey = this.config.nameOverride ? this.config.nameOverride : [n, t].join("_"), this.storage = {
     _type: "localStorage",
-    load: function(s) {
-      return window.localStorage.getItem(s);
+    load: function(a) {
+      return window.localStorage.getItem(a);
     },
-    save: function(s, u) {
-      return window.localStorage.setItem(s, u);
+    save: function(a, u) {
+      return window.localStorage.setItem(a, u);
     },
-    remove: function(s) {
-      return i(s), window.localStorage.removeItem(s);
+    remove: function(a) {
+      return i(a), window.localStorage.removeItem(a);
     }
   };
-  function o(s) {
-    s = s + "=";
+  function o(a) {
+    a = a + "=";
     const u = window.document.cookie.split(";");
     let l, f;
     for (l = 0; l < u.length; l = l + 1)
-      if (f = u[l].replace(/^\s+|\s+$/g, ""), f.indexOf(s) === 0)
-        return Ct(f.substring(s.length, f.length));
+      if (f = u[l].replace(/^\s+|\s+$/g, ""), f.indexOf(a) === 0)
+        return Ct(f.substring(a.length, f.length));
     return null;
   }
-  function r(s, u, l) {
+  function r(a, u, l) {
     let f, d = "";
     y(l, "number") && (f = /* @__PURE__ */ new Date(), f.setTime(f.getTime() + l), d = "expires=" + f.toUTCString() + ";");
-    const bt = V(s) + "=" + V(u) + ";" + d + "path=/;" + (e.domain ? "domain=." + e.domain + ";" : "");
+    const bt = V(a) + "=" + V(u) + ";" + d + "path=/;" + (e.domain ? "domain=." + e.domain + ";" : "");
     window.document.cookie = bt;
   }
-  function i(s) {
-    r(s, "", -1);
+  function i(a) {
+    r(a, "", -1);
   }
-  const a = this.storage.load(this.storageKey);
-  if (a)
+  const s = this.storage.load(this.storageKey);
+  if (s)
     try {
-      this.data = JSON.parse(a);
-    } catch (s) {
+      this.data = JSON.parse(s);
+    } catch (a) {
       v("oErrors", "log", {
-        error: s.message,
+        error: a.message,
         module: "o-tracking"
-      }), this.data = a;
+      }), this.data = s;
     }
   const c = o(this.storageKey);
   if (c)
@@ -328,16 +328,16 @@ const S = function(t, e = {}) {
       if (this.storageKey === "spoor-id")
         this.data = c;
       else {
-        const s = JSON.parse(c);
-        this.data ? Object.assign(this.data, s) : this.data = s;
-        for (const u of Object.keys(s))
+        const a = JSON.parse(c);
+        this.data ? Object.assign(this.data, a) : this.data = a;
+        for (const u of Object.keys(a))
           u !== "spoor-id" && i(u);
       }
-    } catch (s) {
+    } catch (a) {
       v("oErrors", "log", {
-        error: s.message,
+        error: a.message,
         module: "o-tracking"
-      }), this.data = a;
+      }), this.data = s;
     }
   return this;
 };
@@ -536,7 +536,7 @@ function at() {
   return (h("config") || {}).queue === !0 ? !1 : !!navigator.sendBeacon;
 }
 function ct(t, e) {
-  const n = t.queueTime, o = (/* @__PURE__ */ new Date()).getTime() - n, r = at() ? j("sendBeacon")() : window.XMLHttpRequest && "withCredentials" in new window.XMLHttpRequest() ? j("xhr")() : j("image")(), i = t.callback, a = h("config") && h("config").system || {}, c = m(a, {
+  const n = t.queueTime, o = (/* @__PURE__ */ new Date()).getTime() - n, r = at() ? j("sendBeacon")() : window.XMLHttpRequest && "withCredentials" in new window.XMLHttpRequest() ? j("xhr")() : j("image")(), i = t.callback, s = h("config") && h("config").system || {}, c = m(s, {
     version: h("version"),
     // Version of the tracking client e.g. '1.2'
     source: h("source"),
@@ -551,7 +551,7 @@ Here are the paths in the data which are circular:
 ` + JSON.stringify(ot(t), void 0, 4);
     throw new Error(l);
   }
-  const s = JSON.stringify(t);
+  const a = JSON.stringify(t);
   r.complete(function(l) {
     y(i, "function") && (i.call(t), P("calling user_callback")), l ? (t.queueTime = n, g.add(t).save(), v("oErrors", "log", {
       error: l.message,
@@ -559,7 +559,7 @@ Here are the paths in the data which are circular:
     })) : e && e();
   });
   let u = "https://spoor-api.ft.com/ingest";
-  t && t.category && t.action && (u += `?type=${t.category}:${t.action}`), r.send(u, s);
+  t && t.category && t.action && (u += `?type=${t.category}:${t.action}`), r.send(u, a);
 }
 function Mt(t) {
   t.queueTime = (/* @__PURE__ */ new Date()).getTime(), at() ? ct(t) : g.add(t).save(), P("AddedToQueue", g);
@@ -570,8 +570,8 @@ function I(t = function() {
   if (e.length > 200) {
     const r = {};
     e.forEach(function(i) {
-      const a = [i.category, i.action].join(":");
-      Object.prototype.hasOwnProperty.call(r, a) || (r[a] = 0), r[a] += 1;
+      const s = [i.category, i.action].join(":");
+      Object.prototype.hasOwnProperty.call(r, s) || (r[s] = 0), r[s] += 1;
     }), g.replace([]), g.add({
       category: "o-tracking",
       action: "queue-bug",
@@ -661,21 +661,21 @@ function qt(t) {
   const e = Bt(t);
   if (typeof e > "u")
     return;
-  const n = e[0], o = function(a) {
-    const c = a.parentElement;
+  const n = e[0], o = function(s) {
+    const c = s.parentElement;
     if (c) {
-      for (let s = 0; s < c.childNodes.length; s++)
-        if (c.childNodes[s] === n)
-          return s;
+      for (let a = 0; a < c.childNodes.length; a++)
+        if (c.childNodes[a] === n)
+          return a;
       return -1;
     } else
       return 0;
-  }(n), r = e.reduceRight(function(i, a) {
-    if (!a.nodeName)
-      return i + " - " + a.constructor.name + `
+  }(n), r = e.reduceRight(function(i, s) {
+    if (!s.nodeName)
+      return i + " - " + s.constructor.name + `
 `;
-    const c = a.nodeName.toLowerCase();
-    return c.indexOf("#") === 0 ? i + "<" + c + ">" : i + "<" + c + ' id="' + (a.id || "") + '">';
+    const c = s.nodeName.toLowerCase();
+    return c.indexOf("#") === 0 ? i + "<" + c + ">" : i + "<" + c + ' id="' + (s.id || "") + '">';
   }, "");
   return Kt(r + "_siblingIndex=" + o);
 }
@@ -759,56 +759,56 @@ E.prototype.captureForType = function(t) {
   return ["blur", "error", "focus", "load", "resize", "scroll"].indexOf(t) !== -1;
 };
 E.prototype.on = function(t, e, n, o) {
-  let r, i, a, c;
+  let r, i, s, c;
   if (!t)
     throw new TypeError("Invalid event type: " + t);
   if (typeof e == "function" && (o = n, n = e, e = null), o === void 0 && (o = this.captureForType(t)), typeof n != "function")
     throw new TypeError("Handler must be a type of Function");
-  return r = this.rootElement, i = this.listenerMap[o ? 1 : 0], i[t] || (r && r.addEventListener(t, this.handle, o), i[t] = []), e ? /^[a-z]+$/i.test(e) ? (c = e, a = Xt) : /^#[a-z0-9\-_]+$/i.test(e) ? (c = e.slice(1), a = Gt) : (c = e, a = Element.prototype.matches) : (c = null, a = Yt.bind(this)), i[t].push({
+  return r = this.rootElement, i = this.listenerMap[o ? 1 : 0], i[t] || (r && r.addEventListener(t, this.handle, o), i[t] = []), e ? /^[a-z]+$/i.test(e) ? (c = e, s = Xt) : /^#[a-z0-9\-_]+$/i.test(e) ? (c = e.slice(1), s = Gt) : (c = e, s = Element.prototype.matches) : (c = null, s = Yt.bind(this)), i[t].push({
     selector: e,
     handler: n,
-    matcher: a,
+    matcher: s,
     matcherParam: c
   }), this;
 };
 E.prototype.off = function(t, e, n, o) {
-  let r, i, a, c, s;
+  let r, i, s, c, a;
   if (typeof e == "function" && (o = n, n = e, e = null), o === void 0)
     return this.off(t, e, n, !0), this.off(t, e, n, !1), this;
-  if (a = this.listenerMap[o ? 1 : 0], !t) {
-    for (s in a)
-      a.hasOwnProperty(s) && this.off(s, e, n);
+  if (s = this.listenerMap[o ? 1 : 0], !t) {
+    for (a in s)
+      s.hasOwnProperty(a) && this.off(a, e, n);
     return this;
   }
-  if (c = a[t], !c || !c.length)
+  if (c = s[t], !c || !c.length)
     return this;
   for (r = c.length - 1; r >= 0; r--)
     i = c[r], (!e || e === i.selector) && (!n || n === i.handler) && (this._removedListeners.push(i), c.splice(r, 1));
-  return c.length || (delete a[t], this.rootElement && this.rootElement.removeEventListener(t, this.handle, o)), this;
+  return c.length || (delete s[t], this.rootElement && this.rootElement.removeEventListener(t, this.handle, o)), this;
 };
 E.prototype.handle = function(t) {
   let e, n;
   const o = t.type;
-  let r, i, a, c, s = [], u;
+  let r, i, s, c, a = [], u;
   const l = "ftLabsDelegateIgnore";
   if (t[l] === !0)
     return;
   switch (u = t.target, u.nodeType === 3 && (u = u.parentNode), u.correspondingUseElement && (u = u.correspondingUseElement), r = this.rootElement, i = t.eventPhase || (t.target !== t.currentTarget ? 3 : 2), i) {
     case 1:
-      s = this.listenerMap[1][o];
+      a = this.listenerMap[1][o];
       break;
     case 2:
-      this.listenerMap[0] && this.listenerMap[0][o] && (s = s.concat(this.listenerMap[0][o])), this.listenerMap[1] && this.listenerMap[1][o] && (s = s.concat(this.listenerMap[1][o]));
+      this.listenerMap[0] && this.listenerMap[0][o] && (a = a.concat(this.listenerMap[0][o])), this.listenerMap[1] && this.listenerMap[1][o] && (a = a.concat(this.listenerMap[1][o]));
       break;
     case 3:
-      s = this.listenerMap[0][o];
+      a = this.listenerMap[0][o];
       break;
   }
   let f = [];
-  for (n = s.length; u && n; ) {
-    for (e = 0; e < n && (a = s[e], !!a); e++)
-      u.tagName && ["button", "input", "select", "textarea"].indexOf(u.tagName.toLowerCase()) > -1 && u.hasAttribute("disabled") ? f = [] : a.matcher.call(u, a.matcherParam, u) && f.push([t, u, a]);
-    if (u === r || (n = s.length, u = u.parentElement || u.parentNode, u instanceof HTMLDocument))
+  for (n = a.length; u && n; ) {
+    for (e = 0; e < n && (s = a[e], !!s); e++)
+      u.tagName && ["button", "input", "select", "textarea"].indexOf(u.tagName.toLowerCase()) > -1 && u.hasAttribute("disabled") ? f = [] : s.matcher.call(u, s.matcherParam, u) && f.push([t, u, s]);
+    if (u === r || (n = a.length, u = u.parentElement || u.parentNode, u instanceof HTMLDocument))
       break;
   }
   let d;
@@ -883,13 +883,13 @@ const Zt = (t, e, n) => {
 function dt(t) {
   const e = document, n = t, o = n.getAttribute("data-trackable") ? `[data-trackable="${n.getAttribute("data-trackable")}"]` : n.nodeName, r = [], i = {};
   for (; t && t !== e; ) {
-    const a = te(t), c = Array.from(t.attributes);
-    let s = oe(c, a);
-    s["data-trackable"] && (s = Object.assign(
-      s,
+    const s = te(t), c = Array.from(t.attributes);
+    let a = oe(c, s);
+    a["data-trackable"] && (a = Object.assign(
+      a,
       Zt(t, n, o)
-    )), r.push(s);
-    const u = re(c, a, t === n);
+    )), r.push(a);
+    const u = re(c, s, t === n);
     _(u, i), t = t.parentNode;
   }
   return { trace: r, customContext: i };
@@ -915,8 +915,8 @@ const ie = [
     return;
   const o = se(e), { trace: r, customContext: i } = dt(n);
   o.domPathTokens = r, o.url = window.document.location.href || null, o.source_id = x.getRootID(), _(i, o), t.context = o;
-  const a = m(h("config"), t);
-  x.track(a);
+  const s = m(h("config"), t);
+  x.track(s);
 }, ce = (t, e) => {
   e = e || 'a, button, input, [role="button"]';
   const n = {
@@ -944,10 +944,10 @@ const ue = {
   if (n.getContextData) {
     if (typeof n.getContextData != "function")
       throw new Error("opts.getContextData is not a function");
-    const a = n.getContextData(e);
-    if (typeof a != "object")
+    const s = n.getContextData(e);
+    if (typeof s != "object")
       throw new Error("opts.getContextData function should return {object}");
-    i = At(a, fe);
+    i = At(s, fe);
   } else
     i = {};
   i.domPathTokens = o, i.url = window.document.location.href || null, _(r, i), t.context = i;
@@ -960,13 +960,13 @@ const ue = {
   if (!n.length)
     return;
   function o(i) {
-    i.forEach((a) => {
-      if (a.isIntersecting || a.intersectionRatio > 0) {
+    i.forEach((s) => {
+      if (s.isIntersecting || s.intersectionRatio > 0) {
         const c = {
           action: t.action || "view",
           category: t.category || "component"
-        }, s = a.target;
-        le(c, s, t), x.track(c), r.unobserve(s);
+        }, a = s.target;
+        le(c, a, t), x.track(c), r.unobserve(a);
       }
     });
   }
@@ -1085,13 +1085,13 @@ const Ee = (t, e, n) => {
 function Se(t, e) {
   const n = t, o = n.getAttribute("data-trackable") ? `[data-trackable="${n.getAttribute("data-trackable")}"]` : n.nodeName, r = [], i = {};
   for (; t && t !== e; ) {
-    const a = ve(t), c = Array.from(t.attributes);
-    let s = Oe(c, a);
-    s["data-trackable"] && (s = Object.assign(
-      s,
+    const s = ve(t), c = Array.from(t.attributes);
+    let a = Oe(c, s);
+    a["data-trackable"] && (a = Object.assign(
+      a,
       Ee(t, n, o)
-    )), r.push(s);
-    const u = Ce(c, a, t === n);
+    )), r.push(a);
+    const u = Ce(c, s, t === n);
     _(u, i), t = t.parentNode;
   }
   return { trace: r, customContext: i };
@@ -1104,10 +1104,10 @@ class Pe {
     subtype: o = "interactive",
     teamName: r = "djd",
     shadowRoot: i = null,
-    category: a = "cta",
+    category: s = "cta",
     elements: c = 'a, button, input, [role="button"]'
-  } = {}) {
-    this.cccId = e, this.cccName = n, this.subtype = o, this.teamName = r, this.shadowRoot = i, this.category = a, this.elements = c, this.isInitialised = !1;
+  }) {
+    this.cccId = e, this.cccName = n, this.subtype = o, this.teamName = r, this.shadowRoot = i, this.category = s, this.elements = c, this.isInitialised = !1;
   }
   // Get properties for the event (as opposed to properties of the clicked element)
   getEventProperties(e) {
@@ -1124,8 +1124,8 @@ class Pe {
   // Controller for handling click events
   handleClickEvent(e, n) {
     return (o, r) => {
-      const i = this.getEventProperties(o), { trace: a, customContext: c } = Se(r, n);
-      i.custom = r.dataset && r.dataset.custom ? JSON.parse(r.dataset.custom) : null, i.domPathTokens = a, i.component = {
+      const i = this.getEventProperties(o), { trace: s, customContext: c } = Se(r, n);
+      i.custom = r.dataset && r.dataset.custom ? JSON.parse(r.dataset.custom) : null, i.domPathTokens = s, i.component = {
         id: this.cccId,
         name: this.cccName,
         type: "custom-code-component",
@@ -1171,7 +1171,7 @@ class Pe {
       const o = {
         action: "click",
         category: this.category
-      }, r = (n = this.shadowRoot) == null ? void 0 : n.querySelector("#component-root");
+      }, r = (n = this.shadowRoot) == null ? void 0 : n.querySelector("[data-component-root]");
       this.shadowRoot && new w(r).on(
         "click",
         this.elements,
@@ -1196,19 +1196,18 @@ class _e extends HTMLElement {
     }, this.channel = new MessageChannel();
   }
   async mount() {
-    var c;
     if (!this.app)
       throw new Error("CCC mounted without App");
     const e = this.shadowRoot ?? this.attachShadow({ mode: this.mode }), n = this.app, o = JSON.parse(this.getAttribute("data-component-props")), r = Object.fromEntries(
-      [...this.attributes].filter((s) => !this.RESERVED_ATTRS.has(s.name)).map((s) => [s.name, s.value])
+      [...this.attributes].filter((c) => !this.RESERVED_ATTRS.has(c.name)).map((c) => [c.name, c.value])
     );
-    (c = this.shadowRoot) == null || c.replaceChildren(), this.tracking = new Pe({
+    this.tracking = new Pe({
       name: `${this.getAttribute("path")}@${this.getAttribute("version")}`,
       subtype: "interactive",
       teamName: "djd",
       shadowRoot: this.shadowRoot
     });
-    const { unmount: i, onmessage: a } = n(
+    const { unmount: i, onmessage: s } = n(
       e,
       {
         ...r,
@@ -1218,18 +1217,18 @@ class _e extends HTMLElement {
       },
       ...this.children
     ) || {};
-    i && (this.unmount = i), a && (this.onmessage = a);
+    i && (this.unmount = i), s && (this.onmessage = s);
   }
   async connectedCallback() {
-    var s;
-    const e = this.getAttribute("path"), n = this.getAttribute("version"), o = this.getAttribute("load-timeout") ?? 2e3, r = (s = this.getAttribute("env")) == null ? void 0 : s.toLowerCase().startsWith("d");
+    var a;
+    const e = this.getAttribute("path"), n = this.getAttribute("version"), o = this.getAttribute("load-timeout") ?? 2e3, r = (a = this.getAttribute("env")) == null ? void 0 : a.toLowerCase().startsWith("d");
     if (!e)
       throw new Error(
         "path attribute not specified in <custom-code-component>"
       );
-    const [i, a, c] = e.split("/").reverse();
-    if (!(!i || !a || !c)) {
-      this.source = r ? `http://localhost:5173/src/${i}/index.jsx` : `https://www.ft.com/__component/${c}/${a}${n ? `@${n}` : "@latest"}/${i}/${i}.js`;
+    const [i, s, c] = e.split("/").reverse();
+    if (!(!i || !s || !c)) {
+      this.source = r ? `http://localhost:5173/src/${i}/index.jsx` : `https://www.ft.com/__component/${c}/${s}${n ? `@${n}` : "@latest"}/${i}/${i}.js`;
       try {
         this.app = await new Promise((u, l) => {
           const f = setTimeout(() => {

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.6",
+  "version": "1.9.8",
   "type": "module",
   "exports": {
     ".": {

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

@@ -26,7 +26,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;
@@ -126,7 +134,7 @@ class Tracking {
         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);