@financial-times/custom-code-component 2.0.1-beta.12 → 2.0.1-beta.14

package/dist/custom-element.js

@@ -28,7 +28,7 @@ l.prototype.on = function(o, t, e, n) {
     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 = R) : /^#[a-z0-9\-_]+$/i.test(t) ? (c = t.slice(1), i = k) : (c = t, i = Element.prototype.matches) : (c = null, i = L.bind(this)), s[o].push({
+  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 = x) : /^#[a-z0-9\-_]+$/i.test(t) ? (c = t.slice(1), i = U) : (c = t, i = Element.prototype.matches) : (c = null, i = P.bind(this)), s[o].push({
     selector: t,
     handler: e,
     matcher: i,
@@ -36,12 +36,12 @@ l.prototype.on = function(o, t, e, n) {
   }), this;
 };
 l.prototype.off = function(o, t, e, n) {
-  let r, s, i, c, h;
+  let r, s, i, c, a;
   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) {
-    for (h in i)
-      i.hasOwnProperty(h) && this.off(h, t, e);
+    for (a in i)
+      i.hasOwnProperty(a) && this.off(a, t, e);
     return this;
   }
   if (c = i[o], !c || !c.length)
@@ -53,43 +53,43 @@ l.prototype.off = function(o, t, e, n) {
 l.prototype.handle = function(o) {
   let t, e;
   const n = o.type;
-  let r, s, i, c, h = [], a;
+  let r, s, i, c, a = [], h;
   const m = "ftLabsDelegateIgnore";
   if (o[m] === !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 (h = o.target, h.nodeType === 3 && (h = h.parentNode), h.correspondingUseElement && (h = h.correspondingUseElement), r = this.rootElement, s = o.eventPhase || (o.target !== o.currentTarget ? 3 : 2), s) {
     case 1:
-      h = this.listenerMap[1][n];
+      a = this.listenerMap[1][n];
       break;
     case 2:
-      this.listenerMap[0] && this.listenerMap[0][n] && (h = h.concat(this.listenerMap[0][n])), this.listenerMap[1] && this.listenerMap[1][n] && (h = h.concat(this.listenerMap[1][n]));
+      this.listenerMap[0] && this.listenerMap[0][n] && (a = a.concat(this.listenerMap[0][n])), this.listenerMap[1] && this.listenerMap[1][n] && (a = a.concat(this.listenerMap[1][n]));
       break;
     case 3:
-      h = this.listenerMap[0][n];
+      a = this.listenerMap[0][n];
       break;
   }
-  let u = [];
-  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))
+  let p = [];
+  for (e = a.length; h && e; ) {
+    for (t = 0; t < e && (i = a[t], !!i); t++)
+      h.tagName && ["button", "input", "select", "textarea"].indexOf(h.tagName.toLowerCase()) > -1 && h.hasAttribute("disabled") ? p = [] : i.matcher.call(h, i.matcherParam, h) && p.push([o, h, i]);
+    if (h === r || (e = a.length, h = h.parentElement || h.parentNode, h instanceof HTMLDocument))
       break;
   }
-  let v;
-  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][m] = !0, u[t][0].preventDefault(), v = !1;
+  let L;
+  for (t = 0; t < p.length; t++)
+    if (!(this._removedListeners.indexOf(p[t][2]) > -1) && (c = this.fire.apply(this, p[t]), c === !1)) {
+      p[t][0][m] = !0, p[t][0].preventDefault(), L = !1;
       break;
     }
-  return v;
+  return L;
 };
 l.prototype.fire = function(o, t, e) {
   return e.handler.call(t, o, t);
 };
-function R(o, t) {
+function x(o, t) {
   return o.toLowerCase() === t.tagName.toLowerCase();
 }
-function L(o, t) {
+function P(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,20 +97,20 @@ function L(o, t) {
     t === window
   ) : this.rootElement === t;
 }
-function k(o, t) {
+function U(o, t) {
   return o === t.id;
 }
 l.prototype.destroy = function() {
   this.off(), this.root();
 };
-function C(o) {
+function $(o) {
   return typeof o == "string" ? o.trim() : o;
 }
-function S(o, t) {
+function C(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 u = Object.freeze({
   DEBUG: 0,
   INFO: 1,
   WARN: 2,
@@ -118,88 +118,88 @@ const p = Object.freeze({
   TEST: 4,
   DEFAULT: 2
 });
-function $(o) {
+function I(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" ? u.DEBUG : t === "info" ? u.INFO : t === "warn" ? u.WARN : t === "error" ? u.ERROR : t === "test" ? u.TEST : u.DEFAULT;
 }
-class T {
-  constructor({ level: t = p.DEFAULT } = {
-    level: p.DEFAULT
+class N {
+  constructor({ level: t = u.DEFAULT } = {
+    level: u.DEFAULT
   }) {
     this.log = this.debug, this.level = t;
   }
   debug(...t) {
-    this.level <= p.DEBUG && console.info(...t);
+    this.level <= u.DEBUG && console.info(...t);
   }
   info(...t) {
-    this.level <= p.INFO && console.info(...t);
+    this.level <= u.INFO && console.info(...t);
   }
   warn(...t) {
-    this.level <= p.WARN && console.warn(...t);
+    this.level <= u.WARN && console.warn(...t);
   }
   error(...t) {
-    this.level <= p.ERROR && console.error(...t);
+    this.level <= u.ERROR && console.error(...t);
   }
 }
-const N = (o, t, e) => {
+const D = (o, t, e) => {
   const n = Array.from((o == null ? void 0 : o.querySelectorAll(e)) ?? []), r = n.findIndex((s) => s === t);
   if (r !== -1)
     return {
       siblings: n.length,
       position: r
     };
-}, A = [
+}, O = [
   "nodeName",
   "className",
   "id",
   "href",
   "text",
   "role"
-], O = (o) => {
+], M = (o) => {
   const t = {};
-  for (const e of A) {
+  for (const e of O) {
     const n = o[e] || o.getAttribute(e) || o.hasAttribute(e);
-    n !== void 0 && (typeof n == "boolean" ? t[e] = n : t[e] = C(n));
+    n !== void 0 && (typeof n == "boolean" ? t[e] = n : t[e] = $(n));
   }
   return t;
-}, P = (o) => {
+}, j = (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];
   }
-}, x = (o) => {
-  const [t, e] = P(o);
+}, _ = (o) => {
+  const [t, e] = j(o);
   return t ? e : o;
-}, D = (o, t) => (o.filter(
+}, F = (o, t) => (o.filter(
   (e) => e.name.match(/^data-trackable|^data-o-|^aria-/i)
 ).forEach((e) => {
   t[e.name] = e.value;
-}), t), I = (o, t, e) => {
+}), t), H = (o, t, e) => {
   const n = {};
-  return e && A.forEach((r) => {
+  return e && O.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);
+    n[r.name.replace("data-trackable-context-", "")] = _(r.value);
   }), n;
 };
-function M(o, t) {
+function z(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 = {};
   for (; o && o !== t; ) {
-    const i = O(o), c = Array.from(o.attributes);
-    let h = D(c, i);
-    h["data-trackable"] && (h = Object.assign(
-      h,
-      N(o, e, n)
-    )), r.push(h);
-    const a = I(c, i, o === e);
-    S(a, s), o = o.parentNode;
+    const i = M(o), c = Array.from(o.attributes);
+    let a = F(c, i);
+    a["data-trackable"] && (a = Object.assign(
+      a,
+      D(o, e, n)
+    )), r.push(a);
+    const h = H(c, i, o === e);
+    C(h, s), o = o.parentNode;
   }
   return { trace: r, customContext: s };
 }
-const U = ["ctrlKey", "altKey", "shiftKey", "metaKey"];
-class F {
+const V = ["ctrlKey", "altKey", "shiftKey", "metaKey"];
+class Y {
   constructor({
     id: t = "00000000-0000-0000-0000-000000000000",
     name: e = "ccc-component",
@@ -208,17 +208,17 @@ class F {
     shadowRoot: s = null,
     category: i = "cta",
     elements: c = 'a, button, input, [role="button"]',
-    logger: h
+    logger: a
   }) {
-    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 T();
+    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 = a ?? new N();
   }
   // Get properties for the event (as opposed to properties of the clicked element)
   getEventProperties(t) {
     const e = {};
-    for (const n of U)
+    for (const n of V)
       if (t[n])
         try {
-          e[n] = C(t[n]);
+          e[n] = $(t[n]);
         } catch (r) {
           this.log.info(r);
         }
@@ -227,13 +227,13 @@ class F {
   // Controller for handling click events
   handleClickEvent(t, e) {
     return (n, r) => {
-      const s = this.getEventProperties(n), { trace: i, customContext: c } = M(r, e);
+      const s = this.getEventProperties(n), { trace: i, customContext: c } = z(r, e);
       s.custom = r.dataset && r.dataset.custom ? JSON.parse(r.dataset.custom) : null, s.domPathTokens = i, s.component = {
         id: this.cccId,
         name: this.cccName,
         type: "custom-code-component",
         subtype: this.subtype
-      }, s.teamName = this.teamName, s.url = document.URL, S(c, s), s.method = "ftCustomAnalytics", t = { ...t, ...s }, document.body.dispatchEvent(
+      }, s.teamName = this.teamName, s.url = document.URL, C(c, s), s.method = "ftCustomAnalytics", t = { ...t, ...s }, document.body.dispatchEvent(
         new CustomEvent("oTracking.event", {
           detail: t,
           bubbles: !0,
@@ -285,28 +285,32 @@ class F {
 class f {
   constructor(t) {
     this.org = "local", this.repo = "dev";
-    const { org: e, repo: n, name: r, versionRange: s } = E(t) ? t : f.fromString(t);
+    const { org: e, repo: n, name: r, versionRange: s } = S(t) ? t : f.fromString(t);
     e && (this.org = e), n && (this.repo = n), this.name = r, this.versionRange = s;
   }
   set path(t) {
-    const { org: e, repo: n, name: r, versionRange: s } = E(t) ? t : f.fromString(t);
+    const { org: e, repo: n, name: r, versionRange: s } = S(t) ? t : f.fromString(t);
     this.org = e, this.repo = n, this.name = r, this.versionRange = s;
   }
   get path() {
     return `${this.org}/${this.repo}@${this.versionRange}/${this.name}`;
   }
+  get isValid() {
+    return [this.org, this.repo, this.name].every(
+      (t) => t !== "unknown"
+    );
+  }
   toString() {
     return this.path;
   }
   static fromString(t, e) {
-    var c;
-    if (!t) throw new d("No path specified");
-    const [n, r, s] = t.replace(/@[^\/]+/, "").split("/").reverse(), i = e ?? ((c = t.match(/@[^\/]+/)) == null ? void 0 : c.toString().replace("@", "")) ?? "unknown";
-    if (r && !i) throw new d("No version specified");
-    return new f({ org: s, repo: r, name: n, versionRange: i });
+    var a;
+    const n = t ?? "unknown/unknown/unknown", [r, s, i] = n.replace(/@[^\/]+/, "").split("/").reverse(), c = e ?? ((a = n.match(/@[^\/]+/)) == null ? void 0 : a.toString().replace("@", "")) ?? "unknown";
+    if (s && !c) throw new d("No version specified");
+    return new f({ org: i, repo: s, name: r, versionRange: c });
   }
 }
-function E(o) {
+function S(o) {
   return typeof o == "object" && o !== null ? "org" in o && "repo" in o && "name" in o : !1;
 }
 class d extends Error {
@@ -314,85 +318,106 @@ class d extends Error {
     var n;
     !e && t ? (super(t), this.component = null) : typeof (e == null ? void 0 : e.component) == "string" ? (super(
       t ?? `${e.cause ?? "Unknown error"} in ${e.component} imported from ${e.source ?? "an undefined source"}.`
-    ), this.component = f.fromString(e.component)) : E(e == null ? void 0 : e.component) ? (super(
+    ), this.component = f.fromString(e.component)) : S(e == null ? void 0 : e.component) ? (super(
       t ?? `${e.cause ?? "Unknown error"} in ${e.component.org}/${e.component.repo}/${e.component.name}@${e.component.versionRange} imported from ${e.source ?? "an undefined source"}.`
     ), this.component = new f(e.component)) : (super(
       `${(e == null ? void 0 : e.cause) ?? "Unknown error"} in unknown component imported from ${(e == null ? void 0 : e.source) ?? "unknown source"}.`
     ), this.component = null), this.source = (e == null ? void 0 : e.source) ?? "unknown source", this.errors = [], e != null && e.error && ((n = this.errors) == null || n.push(e == null ? void 0 : e.error)), Error.captureStackTrace && Error.captureStackTrace(this, d), this.name = "CCCError";
   }
 }
-class g extends d {
+class w extends d {
   constructor(t, e) {
     super(t, { ...e, cause: "Import error" }), this.name = "CCCImportError";
   }
 }
-class _ extends d {
+class q extends d {
   constructor(t, e) {
     super(t, { ...e, cause: "Render error" }), this.name = "CCCRenderError";
   }
 }
-class j extends d {
+class J extends d {
   constructor(t) {
     super(null, { ...t, cause: "Timeout error" }), this.name = "CCCTimeoutError";
   }
 }
-const w = class w extends Event {
-  constructor(t, e) {
-    super(w.eventType, {
+const b = class b extends Event {
+  constructor(t = b.eventType, e, n) {
+    super(t, {
       bubbles: !0,
       cancelable: !1,
       composed: !0,
-      ...e
-    }), this.component = t.component, this.source = t.source;
+      ...n
+    }), this.component = e.component, this.source = e.source;
+  }
+};
+b.eventType = "ccc:event";
+let g = b;
+const y = class y extends g {
+  constructor(t, e) {
+    super(y.eventType, t, e);
   }
 };
-w.eventType = "ccc:connected";
-let b = w;
-const H = (o) => o.replace(
+y.eventType = "ccc:connected";
+let T = y;
+const E = class E extends g {
+  constructor(t, e) {
+    super(E.eventType, t, e);
+  }
+};
+E.eventType = "ccc:ready";
+let k = E;
+const v = class v extends g {
+  constructor(t, e) {
+    super(v.eventType, t, e), this.intersecting = !1, this.intersecting = t.intersecting, this.entry = t.entry;
+  }
+};
+v.eventType = "ccc:viewport";
+let R = v;
+const W = (o) => o.replace(
   /[A-Z]+(?![a-z])|[A-Z]/g,
   (t, e) => (e ? "-" : "") + t.toLowerCase()
 );
-function z(o) {
-  return y([
+function G(o) {
+  return A([
     "localhost",
     "local.ft.com",
     /^.*\.apps\.in\.ft\.com$/
   ], o);
 }
-function Y() {
-  return y([
+function K() {
+  return A([
     "localhost",
     "local.ft.com",
     /^.*\.in\.ft\.com$/
   ], window.location.hostname);
 }
-function q() {
-  return y([
+function B() {
+  return A([
     "spark.ft.com",
     "spark-staging.ft.com"
   ], window.location.host);
 }
-function y(o, t) {
+function A(o, t) {
   return t ? o.some((e) => typeof e == "string" ? e === t : e.test(t)) : !1;
 }
-function V(o) {
+function Z(o) {
   if (o === null)
     return;
   let t;
   const e = new URL("http://localhost:5173");
   try {
     if (typeof o == "string") {
-      if ((o === "" || o.toLowerCase() === "true") && Y())
+      if ((o === "" || o.toLowerCase() === "true") && K())
         t = e;
-      else if (t = o.startsWith("http://") || o.startsWith("https://") ? new URL(o) : void 0, t && !z(t == null ? void 0 : t.hostname))
+      else if (t = o.startsWith("http://") || o.startsWith("https://") ? new URL(o) : void 0, t && !G(t == null ? void 0 : t.hostname))
         throw new Error("Unsafe testing host override");
-    } else q() && (t = e);
+    } else B() && (t = e);
   } catch {
     return t;
   }
   return t;
 }
-async function J(o, t) {
+async function Q(o, t) {
   return t ? fetch(
     new URL(`src/${o}/config.yaml`, t),
     {
@@ -400,8 +425,8 @@ async function J(o, t) {
     }
   ).then(() => !0).catch(() => !1) : !1;
 }
-const W = ":host{width:var(--ccc-root-width, 100%);margin:var(--ccc-root-margin);padding:var(--ccc-root-padding);display:var(--ccc-root-display, block);font-size:var(--ccc-root-fontSize);box-sizing:var(--ccc-root-boxSizing);border:var(--ccc-root-border);grid:var(--ccc-root-grid);line-height:var(--ccc-root-lineHeight)}";
-class K extends HTMLElement {
+const X = ":host{width:var(--ccc-root-width, 100%);margin:var(--ccc-root-margin);padding:var(--ccc-root-padding);display:var(--ccc-root-display, block);font-size:var(--ccc-root-fontSize);box-sizing:var(--ccc-root-boxSizing);border:var(--ccc-root-border);grid:var(--ccc-root-grid);line-height:var(--ccc-root-lineHeight)}";
+class tt extends HTMLElement {
   constructor() {
     super(), this.mode = "open", this.RESERVED_ATTRS = /* @__PURE__ */ new Set([
       "iframe",
@@ -412,7 +437,18 @@ class K extends HTMLElement {
       "shadow-open",
       "env",
       "load-timeout"
-    ]), this.channel = new MessageChannel(), this.initTracking = async () => {
+    ]), this.component = new f(), this.observer = new IntersectionObserver((e) => {
+      e.forEach((n) => {
+        this.dispatchEvent(
+          new R({
+            component: this.component,
+            source: this.source,
+            intersecting: n.isIntersecting,
+            entry: n
+          })
+        );
+      });
+    }), this.channel = new MessageChannel(), this.initTracking = async () => {
       var e;
       try {
         (e = this.tracking) == null || e.init(this.id);
@@ -422,8 +458,21 @@ class K extends HTMLElement {
           `Error initialising tracking on <custom-code-component> ${r}@${s}`
         ), this.log.error(n);
       }
-    }, this.log = new T({
-      level: $(this.getAttribute("log"))
+    }, this.injectViteScripts = () => {
+      var r, s;
+      if (document.querySelector('script[name="ccc-sdk-react-preamble"]')) return;
+      const e = document.createElement("script");
+      e.type = "module", e.setAttribute("name", "ccc-sdk-react-preamble"), e.textContent = `
+      import RefreshRuntime from "${(r = this.testUrl) == null ? void 0 : r.origin}/@react-refresh";
+      RefreshRuntime.injectIntoGlobalHook(window);
+      window.$RefreshReg$ = () => {};
+      window.$RefreshSig$ = () => (type) => type;
+      window.__vite_plugin_react_preamble_installed__ = true;
+    `.trim(), document.head.appendChild(e);
+      const n = document.createElement("script");
+      n.type = "module", n.src = `${(s = this.testUrl) == null ? void 0 : s.origin}/@vite/client`, document.head.appendChild(n);
+    }, this.log = new N({
+      level: I(this.getAttribute("log"))
     });
     const t = HTMLElement.prototype.hasOwnProperty("attachInternals");
     try {
@@ -443,17 +492,35 @@ class K extends HTMLElement {
     }
   }
   emitError(t) {
-    this.dispatchEvent(new ErrorEvent("ccc:error", {
-      bubbles: !0,
-      cancelable: !1,
-      composed: !0,
-      error: t,
-      message: t.message
-    }));
+    if (t instanceof d)
+      this.dispatchEvent(
+        new ErrorEvent("ccc:error", {
+          bubbles: !0,
+          cancelable: !1,
+          composed: !0,
+          error: t,
+          message: t.message
+        })
+      );
+    else {
+      const e = new d(t.message, {
+        component: this.component,
+        error: t
+      });
+      this.dispatchEvent(
+        new ErrorEvent("ccc:error", {
+          bubbles: !0,
+          cancelable: !1,
+          composed: !0,
+          error: e,
+          message: e.message
+        })
+      );
+    }
   }
   disconnectedCallback() {
     const t = this.getAttribute("path");
-    this.log.info(`<custom-code-component:${t}> disconnected`), typeof this.onunmount == "function" && this.onunmount();
+    this.log.info(`<custom-code-component:${t}> disconnected`), typeof this.onunmount == "function" && this.onunmount(), this.observer.disconnect();
   }
   onmessage() {
   }
@@ -461,10 +528,15 @@ class K extends HTMLElement {
   }
   async onready(t) {
     try {
-      await t;
+      await t, this.dispatchEvent(
+        new k({
+          component: this.component,
+          source: this.source
+        })
+      ), this.dataset.cccReady = "true", delete this.dataset.cccError, this.observer.observe(this);
     } catch (e) {
       if (e instanceof Error) {
-        const n = new _(e.message, {
+        const n = new q(e.message, {
           error: e,
           component: this.component
         });
@@ -481,24 +553,24 @@ class K extends HTMLElement {
     var e, n;
     try {
       if (this.mode = this.getAttribute("shadow-open") == "false" ? "closed" : "open", this.component) {
+        if (!this.app)
+          throw new Error("CCC mounted without App");
+        const r = this.shadowRoot !== null, s = this.shadowRoot ?? this.attachShadow({ mode: this.mode });
         if (this.dispatchEvent(
-          new b({
+          new T({
             component: this.component,
             source: this.source
           })
-        ), this.dataset.cccReady = "true", delete this.dataset.cccError, !this.app)
-          throw new Error("CCC mounted without App");
-        const r = this.shadowRoot !== null, s = this.shadowRoot ?? this.attachShadow({ mode: this.mode });
-        if (!s.querySelector('link[href~="custom-code-component.css"]') && !s.adoptedStyleSheets.length && (window.CCC_LAYOUT_STYLESHEET || (window.CCC_LAYOUT_STYLESHEET = new CSSStyleSheet(), window.CCC_LAYOUT_STYLESHEET.replaceSync(W)), s.adoptedStyleSheets = [window.CCC_LAYOUT_STYLESHEET]), !r) {
-          const u = document.createElement("template");
-          u.innerHTML = "<div data-component-root><slot></slot></div>", this.appendChild(u), s.appendChild(u.content.cloneNode(!0));
+        ), !s.querySelector('link[href~="custom-code-component.css"]') && !s.adoptedStyleSheets.length && (window.CCC_LAYOUT_STYLESHEET || (window.CCC_LAYOUT_STYLESHEET = new CSSStyleSheet(), window.CCC_LAYOUT_STYLESHEET.replaceSync(X)), s.adoptedStyleSheets = [window.CCC_LAYOUT_STYLESHEET]), !r) {
+          const p = document.createElement("template");
+          p.innerHTML = "<div data-component-root><slot></slot></div>", this.appendChild(p), s.appendChild(p.content.cloneNode(!0));
         }
         const i = JSON.parse(this.getAttribute("data-component-props")), c = Object.fromEntries(
           [...this.attributes].filter(
-            (u) => !this.RESERVED_ATTRS.has(u.name) && !u.name.startsWith("data-")
-          ).map((u) => [u.name, u.value])
+            (p) => !this.RESERVED_ATTRS.has(p.name) && !p.name.startsWith("data-")
+          ).map((p) => [p.name, p.value])
         );
-        this.tracking = new F({
+        this.tracking = new Y({
           name: (e = this.component) == null ? void 0 : e.toString(),
           subtype: "interactive",
           teamName: "djd",
@@ -513,7 +585,7 @@ class K extends HTMLElement {
           "text-decoration: underline;",
           " attribute instead."
         ));
-        const { unmount: h, onmessage: a, ready: m } = this.app(
+        const { unmount: a, onmessage: h, ready: m } = this.app(
           s,
           {
             ...i ?? c,
@@ -525,7 +597,7 @@ class K extends HTMLElement {
           },
           r
         ) || {};
-        h && (this.onunmount = h), a && (this.onmessage = a), m && this.onready(m);
+        a && (this.onunmount = a), h && (this.onmessage = h), m && this.onready(m);
       }
     } catch (r) {
       throw this.log.info(
@@ -542,19 +614,25 @@ class K extends HTMLElement {
     const e = this.querySelector(
       "template[data-component-fallback]"
     ) ?? this.querySelector("template");
-    e && ((n = this.shadowRoot) == null || n.replaceChildren(e.content.cloneNode(!0))), this.dataset.cccError || (this.dataset.cccError = H(t.name.replace("CCC", ""))), delete this.dataset.cccReady;
+    e && ((n = this.shadowRoot) == null || n.replaceChildren(e.content.cloneNode(!0))), this.dataset.cccError || (this.dataset.cccError = W(t.name.replace("CCC", ""))), delete this.dataset.cccReady, this.observer.disconnect();
   }
   async load() {
-    if (!this.component)
+    var c;
+    if (!this.component.isValid)
       throw new Error("No path found");
-    const t = this.getAttribute("path"), e = this.getAttribute("version"), n = Number(this.getAttribute("load-timeout") || 1e4), r = this.getAttribute("test-env"), s = V(r), i = await J(this.component.name, s), c = this.getAttribute("id");
-    this.source = i ? `${s == null ? void 0 : s.origin}/src/${this.component.name}/index.jsx?id=${c}` : `https://www.ft.com/__component/${this.component.org}/${this.component.repo}${e ? `@${e}` : "@latest"}/${this.component.name}/${this.component.name}.js?id=${c}`;
+    const t = this.getAttribute("path"), e = this.getAttribute("version"), n = Number(this.getAttribute("load-timeout") || 1e4), r = this.getAttribute("test-env");
+    this.testUrl = Z(r);
+    const s = await Q(
+      this.component.name,
+      this.testUrl
+    ), i = this.getAttribute("id");
+    s && this.testUrl && this.injectViteScripts(), this.source = s ? `${(c = this.testUrl) == null ? void 0 : c.origin}/src/${this.component.name}/index.jsx?id=${i}` : `https://www.ft.com/__component/${this.component.org}/${this.component.repo}${e ? `@${e}` : "@latest"}/${this.component.name}/${this.component.name}.js?id=${i}`;
     try {
       return await new Promise(
-        (h, a) => {
+        (a, h) => {
           const m = setTimeout(() => {
-            this.log.error("CCC import timeout error"), a(
-              new j({
+            this.log.error("CCC import timeout error"), h(
+              new J({
                 component: this.component,
                 source: this.source
               })
@@ -565,40 +643,40 @@ class K extends HTMLElement {
               /* webpackIgnore: true */
               this.source
               /* @vite-ignore */
-            ).then(({ default: u }) => {
-              if (u)
-                clearTimeout(m), h(u);
+            ).then(({ default: p }) => {
+              if (p)
+                clearTimeout(m), a(p);
               else
-                throw new g(
+                throw new w(
                   "No component renderer default export found",
                   {
                     component: this.component,
                     source: this.source
                   }
                 );
-            }).catch((u) => {
-              clearTimeout(m), this.log.error(u), u instanceof Error && !(u instanceof g) ? a(
-                new g(u.message, {
+            }).catch((p) => {
+              clearTimeout(m), this.log.error(p), p instanceof Error && !(p instanceof w) ? h(
+                new w(p.message, {
                   component: this.component,
                   source: this.source
                 })
-              ) : a(u);
+              ) : h(p);
             });
           else
-            throw clearTimeout(m), new g(`Unable to mount ${t}`, {
+            throw clearTimeout(m), new w(`Unable to mount ${t}`, {
               component: this.component,
               source: this.source
             });
         }
       );
-    } catch (h) {
+    } catch (a) {
       throw this.log.error(
         `<custom-code-component> error during import from ${t}@${e}`
-      ), h;
+      ), a;
     }
   }
 }
 export {
-  K as FTCustomCodeComponent
+  tt as FTCustomCodeComponent
 };
 //# sourceMappingURL=custom-element.js.map