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

package/dist/custom-code-component.js

@@ -1,7 +1,7 @@
-function u(o) {
-  this.listenerMap = [{}, {}], o && this.root(o), this.handle = u.prototype.handle.bind(this), this._removedListeners = [];
+function d(o) {
+  this.listenerMap = [{}, {}], o && this.root(o), this.handle = d.prototype.handle.bind(this), this._removedListeners = [];
 }
-u.prototype.root = function(o) {
+d.prototype.root = function(o) {
   const t = this.listenerMap;
   let e;
   if (this.rootElement) {
@@ -19,45 +19,45 @@ u.prototype.root = function(o) {
     t[0].hasOwnProperty(e) && this.rootElement.addEventListener(e, this.handle, !1);
   return this;
 };
-u.prototype.captureForType = function(o) {
+d.prototype.captureForType = function(o) {
   return ["blur", "error", "focus", "load", "resize", "scroll"].indexOf(o) !== -1;
 };
-u.prototype.on = function(o, t, e, n) {
-  let s, r, c, i;
+d.prototype.on = function(o, t, e, n) {
+  let s, i, a, r;
   if (!o)
     throw new TypeError("Invalid event type: " + o);
   if (typeof t == "function" && (n = e, e = t, t = null), n === void 0 && (n = this.captureForType(o)), typeof e != "function")
     throw new TypeError("Handler must be a type of Function");
-  return s = this.rootElement, r = this.listenerMap[n ? 1 : 0], r[o] || (s && s.addEventListener(o, this.handle, n), r[o] = []), t ? /^[a-z]+$/i.test(t) ? (i = t, c = E) : /^#[a-z0-9\-_]+$/i.test(t) ? (i = t.slice(1), c = w) : (i = t, c = Element.prototype.matches) : (i = null, c = y.bind(this)), r[o].push({
+  return s = this.rootElement, i = this.listenerMap[n ? 1 : 0], i[o] || (s && s.addEventListener(o, this.handle, n), i[o] = []), t ? /^[a-z]+$/i.test(t) ? (r = t, a = y) : /^#[a-z0-9\-_]+$/i.test(t) ? (r = t.slice(1), a = v) : (r = t, a = Element.prototype.matches) : (r = null, a = w.bind(this)), i[o].push({
     selector: t,
     handler: e,
-    matcher: c,
-    matcherParam: i
+    matcher: a,
+    matcherParam: r
   }), this;
 };
-u.prototype.off = function(o, t, e, n) {
-  let s, r, c, i, h;
+d.prototype.off = function(o, t, e, n) {
+  let s, i, a, r, h;
   if (typeof t == "function" && (n = e, e = t, t = null), n === void 0)
     return this.off(o, t, e, !0), this.off(o, t, e, !1), this;
-  if (c = this.listenerMap[n ? 1 : 0], !o) {
-    for (h in c)
-      c.hasOwnProperty(h) && this.off(h, t, e);
+  if (a = this.listenerMap[n ? 1 : 0], !o) {
+    for (h in a)
+      a.hasOwnProperty(h) && this.off(h, t, e);
     return this;
   }
-  if (i = c[o], !i || !i.length)
+  if (r = a[o], !r || !r.length)
     return this;
-  for (s = i.length - 1; s >= 0; s--)
-    r = i[s], (!t || t === r.selector) && (!e || e === r.handler) && (this._removedListeners.push(r), i.splice(s, 1));
-  return i.length || (delete c[o], this.rootElement && this.rootElement.removeEventListener(o, this.handle, n)), this;
+  for (s = r.length - 1; s >= 0; s--)
+    i = r[s], (!t || t === i.selector) && (!e || e === i.handler) && (this._removedListeners.push(i), r.splice(s, 1));
+  return r.length || (delete a[o], this.rootElement && this.rootElement.removeEventListener(o, this.handle, n)), this;
 };
-u.prototype.handle = function(o) {
+d.prototype.handle = function(o) {
   let t, e;
   const n = o.type;
-  let s, r, c, i, h = [], a;
-  const m = "ftLabsDelegateIgnore";
-  if (o[m] === !0)
+  let s, i, a, r, h = [], c;
+  const l = "ftLabsDelegateIgnore";
+  if (o[l] === !0)
     return;
-  switch (a = o.target, a.nodeType === 3 && (a = a.parentNode), a.correspondingUseElement && (a = a.correspondingUseElement), s = this.rootElement, r = o.eventPhase || (o.target !== o.currentTarget ? 3 : 2), r) {
+  switch (c = o.target, c.nodeType === 3 && (c = c.parentNode), c.correspondingUseElement && (c = c.correspondingUseElement), s = this.rootElement, i = o.eventPhase || (o.target !== o.currentTarget ? 3 : 2), i) {
     case 1:
       h = this.listenerMap[1][n];
       break;
@@ -68,28 +68,28 @@ u.prototype.handle = function(o) {
       h = this.listenerMap[0][n];
       break;
   }
-  let l = [];
-  for (e = h.length; a && e; ) {
-    for (t = 0; t < e && (c = h[t], !!c); t++)
-      a.tagName && ["button", "input", "select", "textarea"].indexOf(a.tagName.toLowerCase()) > -1 && a.hasAttribute("disabled") ? l = [] : c.matcher.call(a, c.matcherParam, a) && l.push([o, a, c]);
-    if (a === s || (e = h.length, a = a.parentElement || a.parentNode, a instanceof HTMLDocument))
+  let u = [];
+  for (e = h.length; c && e; ) {
+    for (t = 0; t < e && (a = h[t], !!a); t++)
+      c.tagName && ["button", "input", "select", "textarea"].indexOf(c.tagName.toLowerCase()) > -1 && c.hasAttribute("disabled") ? u = [] : a.matcher.call(c, a.matcherParam, c) && u.push([o, c, a]);
+    if (c === s || (e = h.length, c = c.parentElement || c.parentNode, c instanceof HTMLDocument))
       break;
   }
-  let d;
-  for (t = 0; t < l.length; t++)
-    if (!(this._removedListeners.indexOf(l[t][2]) > -1) && (i = this.fire.apply(this, l[t]), i === !1)) {
-      l[t][0][m] = !0, l[t][0].preventDefault(), d = !1;
+  let m;
+  for (t = 0; t < u.length; t++)
+    if (!(this._removedListeners.indexOf(u[t][2]) > -1) && (r = this.fire.apply(this, u[t]), r === !1)) {
+      u[t][0][l] = !0, u[t][0].preventDefault(), m = !1;
       break;
     }
-  return d;
+  return m;
 };
-u.prototype.fire = function(o, t, e) {
+d.prototype.fire = function(o, t, e) {
   return e.handler.call(t, o, t);
 };
-function E(o, t) {
+function y(o, t) {
   return o.toLowerCase() === t.tagName.toLowerCase();
 }
-function y(o, t) {
+function w(o, t) {
   return this.rootElement === window ? (
     // Match the outer document (dispatched from document)
     t === document || // The <html> element (dispatched from document.body or document.documentElement)
@@ -97,96 +97,96 @@ function y(o, t) {
     t === window
   ) : this.rootElement === t;
 }
-function w(o, t) {
+function v(o, t) {
   return o === t.id;
 }
-u.prototype.destroy = function() {
+d.prototype.destroy = function() {
   this.off(), this.root();
 };
-function f(o) {
+function g(o) {
   return typeof o == "string" ? o.trim() : o;
 }
-function g(o, t) {
+function b(o, t) {
   for (const e in o)
     t[e] ? console.warn(`You can't set a custom property called ${e}`) : t[e] = o[e];
 }
-const v = (o, t, e) => {
-  const n = Array.from(o.querySelectorAll(e)), s = n.findIndex((r) => r === t);
+const k = (o, t, e) => {
+  const n = Array.from(o.querySelectorAll(e)), s = n.findIndex((i) => i === t);
   if (s !== -1)
     return {
       siblings: n.length,
       position: s
     };
-}, b = [
+}, E = [
   "nodeName",
   "className",
   "id",
   "href",
   "text",
   "role"
-], k = (o) => {
+], A = (o) => {
   const t = {};
-  for (const e of b) {
+  for (const e of E) {
     const n = o[e] || o.getAttribute(e) || o.hasAttribute(e);
-    n !== void 0 && (typeof n == "boolean" ? t[e] = n : t[e] = f(n));
+    n !== void 0 && (typeof n == "boolean" ? t[e] = n : t[e] = g(n));
   }
   return t;
-}, A = (o) => {
+}, N = (o) => {
   try {
     const t = JSON.parse(o), e = Object.prototype.toString.call(t);
     return [e === "[object Object]" || e === "[object Array]", t];
   } catch {
     return [!1, null];
   }
-}, N = (o) => {
-  const [t, e] = A(o);
+}, P = (o) => {
+  const [t, e] = N(o);
   return t ? e : o;
-}, P = (o, t) => (o.filter(
+}, $ = (o, t) => (o.filter(
   (e) => e.name.match(/^data-trackable|^data-o-|^aria-/i)
 ).forEach((e) => {
   t[e.name] = e.value;
-}), t), $ = (o, t, e) => {
+}), t), x = (o, t, e) => {
   const n = {};
-  return e && b.forEach((s) => {
+  return e && E.forEach((s) => {
     typeof t[s] < "u" && s !== "id" && (n[s] = t[s]);
   }), o.filter((s) => s.name.match(/^data-trackable-context-/i)).forEach((s) => {
-    n[s.name.replace("data-trackable-context-", "")] = N(s.value);
+    n[s.name.replace("data-trackable-context-", "")] = P(s.value);
   }), n;
 };
-function x(o, t) {
-  const e = o, n = e.getAttribute("data-trackable") ? `[data-trackable="${e.getAttribute("data-trackable")}"]` : e.nodeName, s = [], r = {};
+function C(o, t) {
+  const e = o, n = e.getAttribute("data-trackable") ? `[data-trackable="${e.getAttribute("data-trackable")}"]` : e.nodeName, s = [], i = {};
   for (; o && o !== t; ) {
-    const c = k(o), i = Array.from(o.attributes);
-    let h = P(i, c);
+    const a = A(o), r = Array.from(o.attributes);
+    let h = $(r, a);
     h["data-trackable"] && (h = Object.assign(
       h,
-      v(o, e, n)
+      k(o, e, n)
     )), s.push(h);
-    const a = $(i, c, o === e);
-    g(a, r), o = o.parentNode;
+    const c = x(r, a, o === e);
+    b(c, i), o = o.parentNode;
   }
-  return { trace: s, customContext: r };
+  return { trace: s, customContext: i };
 }
-const C = ["ctrlKey", "altKey", "shiftKey", "metaKey"];
-class L {
+const L = ["ctrlKey", "altKey", "shiftKey", "metaKey"];
+class M {
   constructor({
     id: t = "00000000-0000-0000-0000-000000000000",
     name: e = "ccc-component",
     subtype: n = "interactive",
     teamName: s = "djd",
-    shadowRoot: r = null,
-    category: c = "cta",
-    elements: i = 'a, button, input, [role="button"]'
+    shadowRoot: i = null,
+    category: a = "cta",
+    elements: r = 'a, button, input, [role="button"]'
   }) {
-    this.cccId = t, this.cccName = e, this.subtype = n, this.teamName = s, this.shadowRoot = r, this.category = c, this.elements = i, this.isInitialised = !1;
+    this.cccId = t, this.cccName = e, this.subtype = n, this.teamName = s, this.shadowRoot = i, this.category = a, this.elements = r, this.isInitialised = !1;
   }
   // Get properties for the event (as opposed to properties of the clicked element)
   getEventProperties(t) {
     const e = {};
-    for (const n of C)
+    for (const n of L)
       if (t[n])
         try {
-          e[n] = f(t[n]);
+          e[n] = g(t[n]);
         } catch (s) {
           console.log(s);
         }
@@ -195,13 +195,13 @@ class L {
   // Controller for handling click events
   handleClickEvent(t, e) {
     return (n, s) => {
-      const r = this.getEventProperties(n), { trace: c, customContext: i } = x(s, e);
-      r.custom = s.dataset && s.dataset.custom ? JSON.parse(s.dataset.custom) : null, r.domPathTokens = c, r.component = {
+      const i = this.getEventProperties(n), { trace: a, customContext: r } = C(s, e);
+      i.custom = s.dataset && s.dataset.custom ? JSON.parse(s.dataset.custom) : null, i.domPathTokens = a, i.component = {
         id: this.cccId,
         name: this.cccName,
         type: "custom-code-component",
         subtype: this.subtype
-      }, r.teamName = this.teamName, g(i, r), t.context = r, t.method = "ftCustomAnalytics", document.body.dispatchEvent(
+      }, i.teamName = this.teamName, b(r, i), t.context = i, t.method = "ftCustomAnalytics", document.body.dispatchEvent(
         new CustomEvent("oTracking.event", {
           detail: t,
           bubbles: !0,
@@ -243,7 +243,7 @@ class L {
         action: "click",
         category: this.category
       }, s = (e = this.shadowRoot) == null ? void 0 : e.querySelector("[data-component-root]");
-      this.shadowRoot && new u(s).on(
+      this.shadowRoot && new d(s).on(
         "click",
         this.elements,
         this.handleClickEvent(n, s),
@@ -252,7 +252,7 @@ class L {
     }
   }
 }
-class M extends HTMLElement {
+class O extends HTMLElement {
   constructor() {
     super(...arguments), this.RESERVED_ATTRS = /* @__PURE__ */ new Set([
       "iframe",
@@ -270,15 +270,15 @@ class M extends HTMLElement {
     if (!this.app)
       throw new Error("CCC mounted without App");
     const t = this.shadowRoot ?? this.attachShadow({ mode: this.mode }), e = this.app, n = JSON.parse(this.getAttribute("data-component-props")), s = Object.fromEntries(
-      [...this.attributes].filter((i) => !this.RESERVED_ATTRS.has(i.name)).map((i) => [i.name, i.value])
+      [...this.attributes].filter((r) => !this.RESERVED_ATTRS.has(r.name)).map((r) => [r.name, r.value])
     );
-    this.tracking = new L({
+    this.tracking = new M({
       name: `${this.getAttribute("path")}@${this.getAttribute("version")}`,
       subtype: "interactive",
       teamName: "djd",
       shadowRoot: this.shadowRoot
     });
-    const { unmount: r, onmessage: c } = e(
+    const { unmount: i, onmessage: a } = e(
       t,
       {
         ...s,
@@ -288,74 +288,75 @@ class M extends HTMLElement {
       },
       ...this.children
     ) || {};
-    r && (this.unmount = r), c && (this.onmessage = c);
+    i && (this.unmount = i), a && (this.onmessage = a);
   }
   async connectedCallback() {
-    var h;
-    const t = this.getAttribute("path"), e = this.getAttribute("version"), n = this.getAttribute("load-timeout") ?? 2e3, s = (h = this.getAttribute("env")) == null ? void 0 : h.toLowerCase().startsWith("d");
+    var c;
+    const t = this.getAttribute("path"), e = this.getAttribute("version"), n = this.getAttribute("load-timeout") ?? 2e3, s = (c = this.getAttribute("env")) == null ? void 0 : c.toLowerCase().startsWith("d");
     if (!t)
       throw new Error(
         "path attribute not specified in <custom-code-component>"
       );
-    const [r, c, i] = t.split("/").reverse();
-    if (!(!r || !c || !i)) {
-      this.source = s ? `http://localhost:5173/src/${r}/index.jsx` : `https://www.ft.com/__component/${i}/${c}${e ? `@${e}` : "@latest"}/${r}/${r}.js`;
-      try {
-        this.app = await new Promise((a, m) => {
-          const l = setTimeout(() => {
-            this.dispatchEvent(
-              new CustomEvent("ccc-timeout", {
-                bubbles: !0,
-                cancelable: !0,
-                detail: {
-                  component: `${t}@${e}`,
-                  source: this.source
-                }
-              })
-            ), this.dataset.cccError = "import-timeout", delete this.dataset.cccReady;
-          }, Number(n));
-          import(
-            /* webpackIgnore: true */
-            this.source
-            /* @vite-ignore */
-          ).then(({ default: d }) => {
-            if (d)
-              clearTimeout(l), a(d);
-            else
-              throw new p(
-                "No component renderer default export found"
-              );
-          }).catch((d) => m(new p(d)));
-        });
-      } catch (a) {
-        console.error(
-          `<custom-code-component> error during import from ${t}@${e}`
-        ), delete this.dataset.cccReady, this.dataset.cccError = "import-failure", this.dispatchEvent(new ErrorEvent("error", a)), console.error(a);
-        return;
-      }
-      try {
-        this.mode = this.getAttribute("shadow-open") == "false" ? "closed" : "open", await this.mount(), this.dispatchEvent(
-          new CustomEvent("ccc-connected", {
-            bubbles: !0,
-            cancelable: !0,
-            detail: {
-              component: `${t}@${e}`,
-              source: this.source
-            }
-          })
-        ), this.dataset.cccReady = "true", delete this.dataset.cccError;
-      } catch (a) {
-        console.info(
-          `<custom-code-component> uncaught error during mount from ${t}@${e}`
-        ), console.error(a), this.dispatchEvent(new ErrorEvent("error", a)), this.dataset.cccError = "mount-error", delete this.dataset.cccReady;
-      }
-      try {
-        this.tracking.init(this.id);
-      } catch (a) {
-        console.info(
-          `Error initialising tracking on <custom-code-component> ${t}@${e}`
-        ), console.error(a);
-      }
+    const [i, a, r] = t.split("/").reverse();
+    if (!i || !a || !r)
+      return;
+    const h = this.getAttribute("id");
+    this.source = s ? `http://localhost:5173/src/${i}/index.jsx?id=${h}` : `https://www.ft.com/__component/${r}/${a}${e ? `@${e}` : "@latest"}/${i}/${i}.js?id=${h}`;
+    try {
+      this.app = await new Promise((l, u) => {
+        const m = setTimeout(() => {
+          this.dispatchEvent(
+            new CustomEvent("ccc-timeout", {
+              bubbles: !0,
+              cancelable: !0,
+              detail: {
+                component: `${t}@${e}`,
+                source: this.source
+              }
+            })
+          ), this.dataset.cccError = "import-timeout", delete this.dataset.cccReady;
+        }, Number(n));
+        import(
+          /* webpackIgnore: true */
+          this.source
+          /* @vite-ignore */
+        ).then(({ default: p }) => {
+          if (p)
+            clearTimeout(m), l(p);
+          else
+            throw new f(
+              "No component renderer default export found"
+            );
+        }).catch((p) => u(new f(p)));
+      });
+    } catch (l) {
+      console.error(
+        `<custom-code-component> error during import from ${t}@${e}`
+      ), delete this.dataset.cccReady, this.dataset.cccError = "import-failure", this.dispatchEvent(new ErrorEvent("error", l)), console.error(l);
+      return;
+    }
+    try {
+      this.mode = this.getAttribute("shadow-open") == "false" ? "closed" : "open", await this.mount(), this.dispatchEvent(
+        new CustomEvent("ccc-connected", {
+          bubbles: !0,
+          cancelable: !0,
+          detail: {
+            component: `${t}@${e}`,
+            source: this.source
+          }
+        })
+      ), this.dataset.cccReady = "true", delete this.dataset.cccError;
+    } catch (l) {
+      console.info(
+        `<custom-code-component> uncaught error during mount from ${t}@${e}`
+      ), console.error(l), this.dispatchEvent(new ErrorEvent("error", l)), this.dataset.cccError = "mount-error", delete this.dataset.cccReady;
+    }
+    try {
+      this.tracking.init(this.id);
+    } catch (l) {
+      console.info(
+        `Error initialising tracking on <custom-code-component> ${t}@${e}`
+      ), console.error(l);
     }
   }
   disconnectedCallback() {
@@ -369,13 +370,13 @@ class M extends HTMLElement {
     this.channel.port1.postMessage(t);
   }
 }
-const O = () => customElements.define("custom-code-component", M);
-customElements && !customElements.get("custom-code-component") && O();
-class p extends Error {
+const R = () => customElements.define("custom-code-component", O);
+customElements && !customElements.get("custom-code-component") && R();
+class f extends Error {
   constructor(...t) {
-    super(...t), Error.captureStackTrace && Error.captureStackTrace(this, p), this.name = "CCCImportError";
+    super(...t), Error.captureStackTrace && Error.captureStackTrace(this, f), this.name = "CCCImportError";
   }
 }
 export {
-  O as init
+  R as init
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/custom-code-component",
-  "version": "1.9.9",
+  "version": "1.10.0",
   "type": "module",
   "exports": {
     ".": {

package/src/custom-code-component.ts

@@ -91,11 +91,15 @@ class FTCustomCodeComponent extends HTMLElement {
 
     if (!componentName || !componentRepo || !componentOrg) return;
 
+    const id = this.getAttribute('id');
+
+    // id querystring necessary to multiple allow components with the same source (same name and version number) to appear on the page correctly
     this.source = useLocalVersion
-      ? `http://localhost:5173/src/${componentName}/index.jsx`
+      ? `http://localhost:5173/src/${componentName}/index.jsx?id=${id}`
       : `https://www.ft.com/__component/${componentOrg}/${componentRepo}${
           componentVersionRange ? `@${componentVersionRange}` : "@latest"
-        }/${componentName}/${componentName}.js`;
+        }/${componentName}/${componentName}.js?id=${id}`;
+    
 
     try {
       this.app = await new Promise((resolve, reject) => {