@financial-times/custom-code-component 2.0.1-alpha.6 → 2.0.1-alpha.8

package/dist/{custom-code-component.js → index.js}

@@ -1,7 +1,7 @@
-function m(o) {
-  this.listenerMap = [{}, {}], o && this.root(o), this.handle = m.prototype.handle.bind(this), this._removedListeners = [];
+function p(o) {
+  this.listenerMap = [{}, {}], o && this.root(o), this.handle = p.prototype.handle.bind(this), this._removedListeners = [];
 }
-m.prototype.root = function(o) {
+p.prototype.root = function(o) {
   const t = this.listenerMap;
   let e;
   if (this.rootElement) {
@@ -19,24 +19,24 @@ m.prototype.root = function(o) {
     t[0].hasOwnProperty(e) && this.rootElement.addEventListener(e, this.handle, !1);
   return this;
 };
-m.prototype.captureForType = function(o) {
+p.prototype.captureForType = function(o) {
   return ["blur", "error", "focus", "load", "resize", "scroll"].indexOf(o) !== -1;
 };
-m.prototype.on = function(o, t, e, n) {
-  let r, s, i, c;
+p.prototype.on = function(o, t, e, n) {
+  let s, r, i, c;
   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 r = this.rootElement, s = this.listenerMap[n ? 1 : 0], s[o] || (r && r.addEventListener(o, this.handle, n), s[o] = []), t ? /^[a-z]+$/i.test(t) ? (c = t, i = T) : /^#[a-z0-9\-_]+$/i.test(t) ? (c = t.slice(1), i = $) : (c = t, i = Element.prototype.matches) : (c = null, i = S.bind(this)), s[o].push({
+  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) ? (c = t, i = T) : /^#[a-z0-9\-_]+$/i.test(t) ? (c = t.slice(1), i = S) : (c = t, i = Element.prototype.matches) : (c = null, i = $.bind(this)), r[o].push({
     selector: t,
     handler: e,
     matcher: i,
     matcherParam: c
   }), this;
 };
-m.prototype.off = function(o, t, e, n) {
-  let r, s, i, c, h;
+p.prototype.off = function(o, t, e, n) {
+  let s, r, i, c, 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 (i = this.listenerMap[n ? 1 : 0], !o) {
@@ -46,18 +46,18 @@ m.prototype.off = function(o, t, e, n) {
   }
   if (c = i[o], !c || !c.length)
     return this;
-  for (r = c.length - 1; r >= 0; r--)
-    s = c[r], (!t || t === s.selector) && (!e || e === s.handler) && (this._removedListeners.push(s), c.splice(r, 1));
+  for (s = c.length - 1; s >= 0; s--)
+    r = c[s], (!t || t === r.selector) && (!e || e === r.handler) && (this._removedListeners.push(r), c.splice(s, 1));
   return c.length || (delete i[o], this.rootElement && this.rootElement.removeEventListener(o, this.handle, n)), this;
 };
-m.prototype.handle = function(o) {
+p.prototype.handle = function(o) {
   let t, e;
   const n = o.type;
-  let r, s, i, c, h = [], a;
+  let s, r, i, c, h = [], a;
   const d = "ftLabsDelegateIgnore";
   if (o[d] === !0)
     return;
-  switch (a = o.target, a.nodeType === 3 && (a = a.parentNode), a.correspondingUseElement && (a = a.correspondingUseElement), r = this.rootElement, s = o.eventPhase || (o.target !== o.currentTarget ? 3 : 2), s) {
+  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) {
     case 1:
       h = this.listenerMap[1][n];
       break;
@@ -72,24 +72,24 @@ m.prototype.handle = function(o) {
   for (e = h.length; a && e; ) {
     for (t = 0; t < e && (i = h[t], !!i); t++)
       a.tagName && ["button", "input", "select", "textarea"].indexOf(a.tagName.toLowerCase()) > -1 && a.hasAttribute("disabled") ? u = [] : i.matcher.call(a, i.matcherParam, a) && u.push([o, a, i]);
-    if (a === r || (e = h.length, a = a.parentElement || a.parentNode, a instanceof HTMLDocument))
+    if (a === s || (e = h.length, a = a.parentElement || a.parentNode, a instanceof HTMLDocument))
       break;
   }
-  let E;
+  let b;
   for (t = 0; t < u.length; t++)
     if (!(this._removedListeners.indexOf(u[t][2]) > -1) && (c = this.fire.apply(this, u[t]), c === !1)) {
-      u[t][0][d] = !0, u[t][0].preventDefault(), E = !1;
+      u[t][0][d] = !0, u[t][0].preventDefault(), b = !1;
       break;
     }
-  return E;
+  return b;
 };
-m.prototype.fire = function(o, t, e) {
+p.prototype.fire = function(o, t, e) {
   return e.handler.call(t, o, t);
 };
 function T(o, t) {
   return o.toLowerCase() === t.tagName.toLowerCase();
 }
-function S(o, t) {
+function $(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,10 +97,10 @@ function S(o, t) {
     t === window
   ) : this.rootElement === t;
 }
-function $(o, t) {
+function S(o, t) {
   return o === t.id;
 }
-m.prototype.destroy = function() {
+p.prototype.destroy = function() {
   this.off(), this.root();
 };
 function y(o) {
@@ -110,7 +110,7 @@ function v(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 p = Object.freeze({
+const m = Object.freeze({
   DEBUG: 0,
   INFO: 1,
   WARN: 2,
@@ -118,35 +118,35 @@ const p = Object.freeze({
   TEST: 4,
   DEFAULT: 2
 });
-function N(o) {
+function L(o) {
   const t = o == null ? void 0 : o.toLowerCase();
-  return t === "debug" ? p.DEBUG : t === "info" ? p.INFO : t === "warn" ? p.WARN : t === "error" ? p.ERROR : t === "test" ? p.TEST : p.DEFAULT;
+  return t === "debug" ? m.DEBUG : t === "info" ? m.INFO : t === "warn" ? m.WARN : t === "error" ? m.ERROR : t === "test" ? m.TEST : m.DEFAULT;
 }
 class C {
-  constructor({ level: t = p.DEFAULT } = {
-    level: p.DEFAULT
+  constructor({ level: t = m.DEFAULT } = {
+    level: m.DEFAULT
   }) {
     this.log = this.debug, this.level = t;
   }
   debug(...t) {
-    this.level <= p.DEBUG && console.info(...t);
+    this.level <= m.DEBUG && console.info(...t);
   }
   info(...t) {
-    this.level <= p.INFO && console.info(...t);
+    this.level <= m.INFO && console.info(...t);
   }
   warn(...t) {
-    this.level <= p.WARN && console.warn(...t);
+    this.level <= m.WARN && console.warn(...t);
   }
   error(...t) {
-    this.level <= p.ERROR && console.error(...t);
+    this.level <= m.ERROR && console.error(...t);
   }
 }
-const L = (o, t, e) => {
-  const n = Array.from((o == null ? void 0 : o.querySelectorAll(e)) ?? []), r = n.findIndex((s) => s === t);
-  if (r !== -1)
+const N = (o, t, e) => {
+  const n = Array.from((o == null ? void 0 : o.querySelectorAll(e)) ?? []), s = n.findIndex((r) => r === t);
+  if (s !== -1)
     return {
       siblings: n.length,
-      position: r
+      position: s
     };
 }, k = [
   "nodeName",
@@ -178,25 +178,25 @@ const L = (o, t, e) => {
   t[e.name] = e.value;
 }), t), M = (o, t, e) => {
   const n = {};
-  return e && k.forEach((r) => {
-    typeof t[r] < "u" && r !== "id" && (n[r] = t[r]);
-  }), o.filter((r) => r.name.match(/^data-trackable-context-/i)).forEach((r) => {
-    n[r.name.replace("data-trackable-context-", "")] = x(r.value);
+  return e && k.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-", "")] = x(s.value);
   }), n;
 };
 function D(o, t) {
-  const e = o, n = e != null && e.getAttribute("data-trackable") ? `[data-trackable="${e.getAttribute("data-trackable")}"]` : e == null ? void 0 : e.nodeName, r = [], s = {};
+  const e = o, n = e != null && e.getAttribute("data-trackable") ? `[data-trackable="${e.getAttribute("data-trackable")}"]` : e == null ? void 0 : e.nodeName, s = [], r = {};
   for (; o && o !== t; ) {
     const i = O(o), c = Array.from(o.attributes);
     let h = I(c, i);
     h["data-trackable"] && (h = Object.assign(
       h,
-      L(o, e, n)
-    )), r.push(h);
+      N(o, e, n)
+    )), s.push(h);
     const a = M(c, i, o === e);
-    v(a, s), o = o.parentNode;
+    v(a, r), o = o.parentNode;
   }
-  return { trace: r, customContext: s };
+  return { trace: s, customContext: r };
 }
 const U = ["ctrlKey", "altKey", "shiftKey", "metaKey"];
 class F {
@@ -204,13 +204,13 @@ class F {
     id: t = "00000000-0000-0000-0000-000000000000",
     name: e = "ccc-component",
     subtype: n = "interactive",
-    teamName: r = "djd",
-    shadowRoot: s = null,
+    teamName: s = "djd",
+    shadowRoot: r = null,
     category: i = "cta",
     elements: c = 'a, button, input, [role="button"]',
     logger: h
   }) {
-    this.cccId = t, this.cccName = e, this.subtype = n, this.teamName = r, this.shadowRoot = s, this.category = i, this.elements = c, this.isInitialised = !1, this.log = h ?? new C();
+    this.cccId = t, this.cccName = e, this.subtype = n, this.teamName = s, this.shadowRoot = r, this.category = i, this.elements = c, this.isInitialised = !1, this.log = h ?? new C();
   }
   // Get properties for the event (as opposed to properties of the clicked element)
   getEventProperties(t) {
@@ -219,21 +219,21 @@ class F {
       if (t[n])
         try {
           e[n] = y(t[n]);
-        } catch (r) {
-          this.log.info(r);
+        } catch (s) {
+          this.log.info(s);
         }
     return e;
   }
   // Controller for handling click events
   handleClickEvent(t, e) {
-    return (n, r) => {
-      const s = this.getEventProperties(n), { trace: i, customContext: c } = D(r, e);
-      s.custom = r.dataset && r.dataset.custom ? JSON.parse(r.dataset.custom) : null, s.domPathTokens = i, s.component = {
+    return (n, s) => {
+      const r = this.getEventProperties(n), { trace: i, customContext: c } = D(s, e);
+      r.custom = s.dataset && s.dataset.custom ? JSON.parse(s.dataset.custom) : null, r.domPathTokens = i, r.component = {
         id: this.cccId,
         name: this.cccName,
         type: "custom-code-component",
         subtype: this.subtype
-      }, s.teamName = this.teamName, s.url = document.URL, v(c, s), s.method = "ftCustomAnalytics", t = { ...t, ...s }, document.body.dispatchEvent(
+      }, r.teamName = this.teamName, r.url = document.URL, v(c, r), r.method = "ftCustomAnalytics", t = { ...t, ...r }, document.body.dispatchEvent(
         new CustomEvent("oTracking.event", {
           detail: t,
           bubbles: !0,
@@ -272,11 +272,11 @@ class F {
       const n = {
         action: "click",
         category: this.category
-      }, r = (e = this.shadowRoot) == null ? void 0 : e.querySelector("[data-component-root]");
-      r && new m(r).on(
+      }, s = (e = this.shadowRoot) == null ? void 0 : e.querySelector("[data-component-root]");
+      s && new p(s).on(
         "click",
         this.elements,
-        this.handleClickEvent(n, r),
+        this.handleClickEvent(n, s),
         !0
       );
     }
@@ -284,16 +284,16 @@ class F {
 }
 class l {
   constructor(t) {
-    const { org: e, repo: n, component: r, versionRange: s } = w(
+    const { org: e, repo: n, component: s, versionRange: r } = w(
       t
     ) ? t : l.fromString(t);
-    this.org = e, this.repo = n, this.component = r, this.versionRange = s;
+    this.org = e, this.repo = n, this.component = s, this.versionRange = r;
   }
   set path(t) {
-    const { org: e, repo: n, component: r, versionRange: s } = w(
+    const { org: e, repo: n, component: s, versionRange: r } = w(
       t
     ) ? t : l.fromString(t);
-    this.org = e, this.repo = n, this.component = r, this.versionRange = s;
+    this.org = e, this.repo = n, this.component = s, this.versionRange = r;
   }
   get path() {
     return `${this.org}/${this.repo}@${this.versionRange}/${this.component}`;
@@ -308,8 +308,8 @@ class l {
     const n = e ?? ((c = t.match(/@[^\/]+/)) == null ? void 0 : c.toString().replace("@", "")) ?? "unknown";
     if (!n)
       throw new f("No version specified");
-    const [r, s, i] = t.replace(/@[^\/]+/, "").split("/").reverse();
-    return new l({ org: i, repo: s, component: r, versionRange: n });
+    const [s, r, i] = t.replace(/@[^\/]+/, "").split("/").reverse();
+    return new l({ org: i, repo: r, component: s, versionRange: n });
   }
 }
 function w(o) {
@@ -317,8 +317,8 @@ function w(o) {
 }
 class f extends Error {
   constructor(t, e) {
-    var n = (...r) => {
-      super(...r);
+    var n = (...s) => {
+      super(...s);
     };
     !e && t ? (n(t), this.component = null) : typeof (e == null ? void 0 : e.component) == "string" ? (n(
       t ?? `${e.cause ?? "Unknown error"} in ${e.component} imported from ${e.source ?? "an undefined source"}.`
@@ -356,36 +356,36 @@ const _ = (o) => o.replace(
   (t, e) => (e ? "-" : "") + t.toLowerCase()
 );
 function V(o) {
-  return b([
+  return E([
     "localhost",
     "local.ft.com",
     /^.*\.apps\.in\.ft\.com$/
   ], o);
 }
 function z() {
-  return b([
+  return E([
     "localhost",
     "local.ft.com",
     /^.*\.in\.ft\.com$/
   ], window.location.hostname);
 }
 function J() {
-  return b([
+  return E([
     "spark.ft.com",
     "spark-staging.ft.com"
   ], window.location.host);
 }
-function b(o, t) {
+function E(o, t) {
   return t ? o.some((e) => typeof e == "string" ? e === t : e.test(t)) : !1;
 }
 function H(o) {
-  if (!o)
+  if (o === null)
     return;
   let t;
   const e = new URL("http://localhost:5173");
   try {
     if (typeof o == "string") {
-      if (o === "true" && z())
+      if ((o === "" || o.toLowerCase() === "true") && z())
         t = e;
       else if (t = o.startsWith("http://") || o.startsWith("https://") ? new URL(o) : void 0, t && !V(t == null ? void 0 : t.hostname))
         throw new Error("Unsafe testing host override");
@@ -401,16 +401,16 @@ async function K(o) {
     return !1;
   function t(n) {
     try {
-      return new Promise((r) => {
-        const s = new WebSocket(`ws://${n}`, "vite-hmr"), i = setTimeout(() => {
-          r(s.readyState === WebSocket.OPEN), s.close();
+      return new Promise((s) => {
+        const r = new WebSocket(`ws://${n}`, "vite-hmr"), i = setTimeout(() => {
+          s(r.readyState === WebSocket.OPEN), r.close();
         }, 50);
-        s.addEventListener("error", () => {
-          clearTimeout(i), s.close(), r(!1);
+        r.addEventListener("error", () => {
+          clearTimeout(i), r.close(), s(!1);
         }, { once: !0 });
       });
-    } catch (r) {
-      return console.error("WebSocket creation failed:", r), Promise.resolve(!1);
+    } catch {
+      return Promise.resolve(!1);
     }
   }
   return await t(o == null ? void 0 : o.host);
@@ -427,25 +427,25 @@ class q extends HTMLElement {
       "env",
       "load-timeout"
     ]), this.channel = new MessageChannel(), this.initTracking = async () => {
-      var r;
+      var s;
       try {
-        (r = this.tracking) == null || r.init(this.id);
-      } catch (s) {
+        (s = this.tracking) == null || s.init(this.id);
+      } catch (r) {
         const i = this.getAttribute("path"), c = this.getAttribute("version");
         this.log.info(
           `Error initialising tracking on <custom-code-component> ${i}@${c}`
-        ), this.log.error(s);
+        ), this.log.error(r);
       }
     }, this.log = new C({
-      level: N(this.getAttribute("log"))
+      level: L(this.getAttribute("log"))
     });
     const t = this.getAttribute("path"), e = this.getAttribute("version");
     this.component = l.fromString(t, e), this.lightRoot = Array.from(this.childNodes);
     const n = HTMLElement.prototype.hasOwnProperty("attachInternals");
     try {
-      const r = n && this.attachInternals();
-    } catch (r) {
-      this.log.error(r);
+      const s = n && this.attachInternals();
+    } catch (s) {
+      this.log.error(s);
     }
   }
   async connectedCallback() {
@@ -499,7 +499,7 @@ class q extends HTMLElement {
         })
       ), this.dataset.cccReady = "true", delete this.dataset.cccError, !this.app)
         throw new Error("CCC mounted without App");
-      const e = this.shadowRoot !== null, n = this.shadowRoot ?? this.attachShadow({ mode: this.mode }), r = JSON.parse(this.getAttribute("data-component-props")), s = Object.fromEntries(
+      const e = this.shadowRoot !== null, n = this.shadowRoot ?? this.attachShadow({ mode: this.mode }), s = JSON.parse(this.getAttribute("data-component-props")), r = Object.fromEntries(
         [...this.attributes].filter((a) => !this.RESERVED_ATTRS.has(a.name)).map((a) => [a.name, a.value])
       );
       this.tracking = new F({
@@ -512,8 +512,8 @@ class q extends HTMLElement {
       const { unmount: i, onmessage: c, ready: h } = this.app(
         n,
         {
-          ...s,
-          data: r,
+          ...r,
+          data: s,
           port: this.channel.port2,
           tracking: this.tracking,
           prerendered: !!t,
@@ -535,8 +535,8 @@ class q extends HTMLElement {
     this.onunmount(), (e = this.shadowRoot) == null || e.replaceChildren(...this.lightRoot), this.dataset.cccError || (this.dataset.cccError = _(t.name.replace("CCC", ""))), delete this.dataset.cccReady;
   }
   async load() {
-    const t = this.getAttribute("path"), e = this.getAttribute("version"), n = Number(this.getAttribute("load-timeout") || 1e4), r = this.getAttribute("testEnv"), s = H(r), i = await K(s), c = this.getAttribute("id");
-    this.source = i ? `${s == null ? void 0 : s.origin}/src/${this.component.component}/index.jsx?id=${c}` : `https://www.ft.com/__component/${this.component.org}/${this.component.repo}${e ? `@${e}` : "@latest"}/${this.component.component}/${this.component.component}.js?id=${c}`;
+    const t = this.getAttribute("path"), e = this.getAttribute("version"), n = Number(this.getAttribute("load-timeout") || 1e4), s = this.getAttribute("testEnv"), r = H(s), i = await K(r), c = this.getAttribute("id");
+    this.source = i ? `${r == null ? void 0 : r.origin}/src/${this.component.component}/index.jsx?id=${c}` : `https://www.ft.com/__component/${this.component.org}/${this.component.repo}${e ? `@${e}` : "@latest"}/${this.component.component}/${this.component.component}.js?id=${c}`;
     try {
       return await new Promise(
         (h, a) => {
@@ -586,6 +586,8 @@ class q extends HTMLElement {
     }
   }
 }
+const B = () => customElements.define("custom-code-component", q);
+customElements && !customElements.get("custom-code-component") && B();
 export {
-  q as FTCustomCodeComponent
+  B as init
 };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@financial-times/custom-code-component",
-  "version": "2.0.1-alpha.6",
+  "version": "2.0.1-alpha.8",
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/custom-code-component.js",
+      "default": "./dist/custom-code-component.js",
       "types": "./dist/custom-code-component.d.ts"
     }
   },

package/src/environment.ts

@@ -8,15 +8,16 @@ import { isLocalEnv, isSafeTestEnv, isSparkEnv } from "./util"
  * @returns A `URL` object if valid and safe, or `undefined` if invalid.
  */
 export function assignTestURL(testEnv: string | null): URL | undefined {
-  if (!testEnv) {
+  if (testEnv === null) {
     return
   }
+
   let testUrl
   const defaultTestUrl = new URL('http://localhost:5173')
 
   try {
     if (typeof testEnv === 'string') {
-      if (testEnv === 'true' && isLocalEnv()) {
+      if ((testEnv === '' || testEnv.toLowerCase() === 'true') && isLocalEnv()) {
         testUrl = defaultTestUrl
       } else {
         const hasProtocol = testEnv.startsWith('http://') || testEnv.startsWith('https://')
@@ -66,7 +67,6 @@ export async function useComponentTestEnv(testUrl?: URL): Promise<boolean> {
         }, { once: true });
       });
     } catch (err) {
-      console.error("WebSocket creation failed:", err);
       return Promise.resolve(false);
     }
   }