@financial-times/custom-code-component 2.0.1-alpha.9 → 2.0.1-beta.2

package/dist/{webcomponent/src/index.d.ts → CustomCodeComponent.d.ts}

@@ -1 +1,3 @@
-export declare const init: () => void;
+export declare const init: () => void;
+
+export { }

package/dist/{index.js → CustomCodeComponent.js}

@@ -28,7 +28,7 @@ p.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 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({
+  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 = L) : (c = t, i = Element.prototype.matches) : (c = null, i = $.bind(this)), r[o].push({
     selector: t,
     handler: e,
     matcher: i,
@@ -54,8 +54,8 @@ p.prototype.handle = function(o) {
   let t, e;
   const n = o.type;
   let s, r, i, c, h = [], a;
-  const d = "ftLabsDelegateIgnore";
-  if (o[d] === !0)
+  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) {
     case 1:
@@ -75,13 +75,13 @@ p.prototype.handle = function(o) {
     if (a === s || (e = h.length, a = a.parentElement || a.parentNode, a instanceof HTMLDocument))
       break;
   }
-  let b;
+  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][d] = !0, u[t][0].preventDefault(), b = !1;
+      u[t][0][l] = !0, u[t][0].preventDefault(), v = !1;
       break;
     }
-  return b;
+  return v;
 };
 p.prototype.fire = function(o, t, e) {
   return e.handler.call(t, o, t);
@@ -97,16 +97,16 @@ function $(o, t) {
     t === window
   ) : this.rootElement === t;
 }
-function S(o, t) {
+function L(o, t) {
   return o === t.id;
 }
 p.prototype.destroy = function() {
   this.off(), this.root();
 };
-function y(o) {
+function A(o) {
   return typeof o == "string" ? o.trim() : o;
 }
-function v(o, t) {
+function R(o, t) {
   for (const e in o)
     t[e] ? console.warn(`You can't set a custom property called ${e}`) : t[e] = o[e];
 }
@@ -118,11 +118,11 @@ const m = Object.freeze({
   TEST: 4,
   DEFAULT: 2
 });
-function L(o) {
+function N(o) {
   const t = o == null ? void 0 : o.toLowerCase();
   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 {
+class k {
   constructor({ level: t = m.DEFAULT } = {
     level: m.DEFAULT
   }) {
@@ -141,14 +141,14 @@ class C {
     this.level <= m.ERROR && console.error(...t);
   }
 }
-const N = (o, t, e) => {
+const S = (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: s
     };
-}, k = [
+}, C = [
   "nodeName",
   "className",
   "id",
@@ -157,9 +157,9 @@ const N = (o, t, e) => {
   "role"
 ], O = (o) => {
   const t = {};
-  for (const e of k) {
+  for (const e of C) {
     const n = o[e] || o.getAttribute(e) || o.hasAttribute(e);
-    n !== void 0 && (typeof n == "boolean" ? t[e] = n : t[e] = y(n));
+    n !== void 0 && (typeof n == "boolean" ? t[e] = n : t[e] = A(n));
   }
   return t;
 }, P = (o) => {
@@ -178,7 +178,7 @@ const N = (o, t, e) => {
   t[e.name] = e.value;
 }), t), M = (o, t, e) => {
   const n = {};
-  return e && k.forEach((s) => {
+  return e && C.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);
@@ -191,10 +191,10 @@ function D(o, t) {
     let h = I(c, i);
     h["data-trackable"] && (h = Object.assign(
       h,
-      N(o, e, n)
+      S(o, e, n)
     )), s.push(h);
     const a = M(c, i, o === e);
-    v(a, r), o = o.parentNode;
+    R(a, r), o = o.parentNode;
   }
   return { trace: s, customContext: r };
 }
@@ -210,7 +210,7 @@ class F {
     elements: c = 'a, button, input, [role="button"]',
     logger: h
   }) {
-    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();
+    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 k();
   }
   // Get properties for the event (as opposed to properties of the clicked element)
   getEventProperties(t) {
@@ -218,7 +218,7 @@ class F {
     for (const n of U)
       if (t[n])
         try {
-          e[n] = y(t[n]);
+          e[n] = A(t[n]);
         } catch (s) {
           this.log.info(s);
         }
@@ -233,7 +233,7 @@ class F {
         name: this.cccName,
         type: "custom-code-component",
         subtype: this.subtype
-      }, r.teamName = this.teamName, r.url = document.URL, v(c, r), r.method = "ftCustomAnalytics", t = { ...t, ...r }, document.body.dispatchEvent(
+      }, r.teamName = this.teamName, r.url = document.URL, R(c, r), r.method = "ftCustomAnalytics", t = { ...t, ...r }, document.body.dispatchEvent(
         new CustomEvent("oTracking.event", {
           detail: t,
           bubbles: !0,
@@ -282,66 +282,57 @@ class F {
     }
   }
 }
-class l {
+class f {
   constructor(t) {
-    const { org: e, repo: n, component: s, versionRange: r } = w(
-      t
-    ) ? t : l.fromString(t);
-    this.org = e, this.repo = n, this.component = s, this.versionRange = r;
+    this.org = "local", this.repo = "dev";
+    const { org: e, repo: n, name: s, versionRange: r } = E(t) ? t : f.fromString(t);
+    e && (this.org = e), n && (this.repo = n), this.name = s, this.versionRange = r;
   }
   set path(t) {
-    const { org: e, repo: n, component: s, versionRange: r } = w(
-      t
-    ) ? t : l.fromString(t);
-    this.org = e, this.repo = n, this.component = s, this.versionRange = r;
+    const { org: e, repo: n, name: s, versionRange: r } = E(t) ? t : f.fromString(t);
+    this.org = e, this.repo = n, this.name = s, this.versionRange = r;
   }
   get path() {
-    return `${this.org}/${this.repo}@${this.versionRange}/${this.component}`;
+    return `${this.org}/${this.repo}@${this.versionRange}/${this.name}`;
   }
   toString() {
     return this.path;
   }
   static fromString(t, e) {
     var c;
-    if (!t)
-      throw new f("No path specified");
-    const n = e ?? ((c = t.match(/@[^\/]+/)) == null ? void 0 : c.toString().replace("@", "")) ?? "unknown";
-    if (!n)
-      throw new f("No version specified");
-    const [s, r, i] = t.replace(/@[^\/]+/, "").split("/").reverse();
-    return new l({ org: i, repo: r, component: s, versionRange: n });
+    if (!t) throw new d("No path specified");
+    const [n, s, r] = t.replace(/@[^\/]+/, "").split("/").reverse(), i = e ?? ((c = t.match(/@[^\/]+/)) == null ? void 0 : c.toString().replace("@", "")) ?? "unknown";
+    if (s && !i) throw new d("No version specified");
+    return new f({ org: r, repo: s, name: n, versionRange: i });
   }
 }
-function w(o) {
-  return typeof o == "object" && o !== null ? "org" in o && "repo" in o && "component" in o : !1;
+function E(o) {
+  return typeof o == "object" && o !== null ? "org" in o && "repo" in o && "name" in o : !1;
 }
-class f extends Error {
+class d extends Error {
   constructor(t, e) {
-    var n = (...s) => {
-      super(...s);
-    };
-    !e && t ? (n(t), this.component = null) : typeof (e == null ? void 0 : e.component) == "string" ? (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 = l.fromString(e.component)) : w(e == null ? void 0 : e.component) ? (n(
-      t ?? `${e.cause ?? "Unknown error"} in ${e.component.org}/${e.component.repo}/${e.component.component}@${e.component.versionRange} imported from ${e.source ?? "an undefined source"}.`
-    ), this.component = new l(e.component)) : (n(
+    ), this.component = f.fromString(e.component)) : E(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, Error.captureStackTrace && Error.captureStackTrace(this, f), this.name = "CCCError";
+    ), this.component = null), this.source = e == null ? void 0 : e.source, Error.captureStackTrace && Error.captureStackTrace(this, d), this.name = "CCCError";
   }
 }
-class g extends f {
+class g extends d {
   constructor(t, e) {
     super(t, { ...e, cause: "Import error" }), this.name = "CCCImportError";
   }
 }
-class W extends f {
+class j extends d {
   constructor(t) {
     super(null, { ...t, cause: "Timeout error" }), this.name = "CCCTimeoutError";
   }
 }
-const R = class A extends Event {
+const w = class w extends Event {
   constructor(t, e) {
-    super(A.eventType, {
+    super(w.eventType, {
       bubbles: !0,
       cancelable: !1,
       composed: !0,
@@ -349,36 +340,36 @@ const R = class A extends Event {
     }), this.component = t.component, this.source = t.source;
   }
 };
-R.eventType = "ccc:ConnectedEvent";
-let j = R;
-const _ = (o) => o.replace(
+w.eventType = "ccc:ConnectedEvent";
+let b = w;
+const V = (o) => o.replace(
   /[A-Z]+(?![a-z])|[A-Z]/g,
   (t, e) => (e ? "-" : "") + t.toLowerCase()
 );
-function V(o) {
-  return E([
+function q(o) {
+  return y([
     "localhost",
     "local.ft.com",
     /^.*\.apps\.in\.ft\.com$/
   ], o);
 }
 function z() {
-  return E([
+  return y([
     "localhost",
     "local.ft.com",
     /^.*\.in\.ft\.com$/
   ], window.location.hostname);
 }
-function J() {
-  return E([
+function H() {
+  return y([
     "spark.ft.com",
     "spark-staging.ft.com"
   ], window.location.host);
 }
-function E(o, t) {
+function y(o, t) {
   return t ? o.some((e) => typeof e == "string" ? e === t : e.test(t)) : !1;
 }
-function H(o) {
+function J(o) {
   if (o === null)
     return;
   let t;
@@ -387,35 +378,23 @@ function H(o) {
     if (typeof o == "string") {
       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))
+      else if (t = o.startsWith("http://") || o.startsWith("https://") ? new URL(o) : void 0, t && !q(t == null ? void 0 : t.hostname))
         throw new Error("Unsafe testing host override");
-    } else
-      J() && (t = e);
+    } else H() && (t = e);
   } catch {
     return t;
   }
   return t;
 }
-async function K(o) {
-  if (!o)
-    return !1;
-  function t(n) {
-    try {
-      return new Promise((s) => {
-        const r = new WebSocket(`ws://${n}`, "vite-hmr"), i = setTimeout(() => {
-          s(r.readyState === WebSocket.OPEN), r.close();
-        }, 50);
-        r.addEventListener("error", () => {
-          clearTimeout(i), r.close(), s(!1);
-        }, { once: !0 });
-      });
-    } catch {
-      return Promise.resolve(!1);
+async function W(o, t) {
+  return t ? fetch(
+    new URL(`src/${o}/config.yaml`, t),
+    {
+      method: "HEAD"
     }
-  }
-  return await t(o == null ? void 0 : o.host);
+  ).then(() => !0).catch(() => !1) : !1;
 }
-class q extends HTMLElement {
+class K extends HTMLElement {
   constructor() {
     super(), this.mode = "open", this.RESERVED_ATTRS = /* @__PURE__ */ new Set([
       "iframe",
@@ -436,8 +415,8 @@ class q extends HTMLElement {
           `Error initialising tracking on <custom-code-component> ${s}@${r}`
         ), this.log.error(n);
       }
-    }, this.log = new C({
-      level: L(this.getAttribute("log"))
+    }, this.log = new k({
+      level: N(this.getAttribute("log"))
     });
     const t = HTMLElement.prototype.hasOwnProperty("attachInternals");
     try {
@@ -449,7 +428,7 @@ class q extends HTMLElement {
   async connectedCallback() {
     try {
       const t = this.getAttribute("path"), e = this.getAttribute("version");
-      this.component = l.fromString(t, e), this.lightRoot = Array.from(this.childNodes), this.app = await this.load(), await this.mount(), await this.initTracking();
+      this.component = f.fromString(t, e), this.app = await this.load(), await this.mount(), await this.initTracking();
     } catch (t) {
       t instanceof Error && requestAnimationFrame(() => {
         this.emitError(t);
@@ -459,7 +438,7 @@ class q extends HTMLElement {
   emitError(t) {
     var n;
     let e;
-    if (t instanceof f && ((n = t.name) != null && n.startsWith("CCC")) ? e = t.name.replace(/^CCC/, "ccc:") : e = `ccc:${(t == null ? void 0 : t.name) ?? "UnknownError"}`, !e)
+    if (t instanceof d && ((n = t.name) != null && n.startsWith("CCC")) ? e = t.name.replace(/^CCC/, "ccc:") : e = `ccc:${(t == null ? void 0 : t.name) ?? "UnknownError"}`, !e)
       return this.log.debug(t);
     this.dispatchEvent(
       new ErrorEvent(e, {
@@ -483,65 +462,82 @@ class q extends HTMLElement {
     try {
       await t;
     } catch (e) {
-      e instanceof Error && this.emitError(e);
+      e instanceof Error && requestAnimationFrame(() => {
+        this.emitError(e);
+      }), this.unmount(e);
     }
   }
   postMessage(t) {
     this.channel.port1.postMessage(t);
   }
   async mount(t) {
+    var e, n;
     try {
-      if (this.mode = this.getAttribute("shadow-open") == "false" ? "closed" : "open", this.dispatchEvent(
-        new j({
-          component: this.component,
-          source: this.source
-        })
-      ), 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 }), 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({
-        name: this.component.toString(),
-        subtype: "interactive",
-        teamName: "djd",
-        shadowRoot: this.shadowRoot,
-        logger: this.log
-      });
-      const { unmount: i, onmessage: c, ready: h } = this.app(
-        n,
-        {
-          ...r,
-          data: s,
-          port: this.channel.port2,
-          tracking: this.tracking,
-          prerendered: !!t,
-          children: this.children
-        },
-        e
-      ) || {};
-      i && (this.onunmount = i), c && (this.onmessage = c), h && this.onready(h);
-    } catch (e) {
+      if (this.mode = this.getAttribute("shadow-open") == "false" ? "closed" : "open", this.component) {
+        if (this.dispatchEvent(
+          new b({
+            component: this.component,
+            source: this.source
+          })
+        ), this.dataset.cccReady = "true", delete this.dataset.cccError, !this.app)
+          throw new Error("CCC mounted without App");
+        const s = this.shadowRoot !== null, r = this.shadowRoot ?? this.attachShadow({ mode: this.mode });
+        if (!s) {
+          const u = document.createElement("template");
+          u.innerHTML = "<div data-component-root><slot></slot></div>", this.appendChild(u), r.appendChild(u.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)).map((u) => [u.name, u.value])
+        );
+        this.tracking = new F({
+          name: (e = this.component) == null ? void 0 : e.toString(),
+          subtype: "interactive",
+          teamName: "djd",
+          shadowRoot: this.shadowRoot,
+          logger: this.log
+        });
+        const { unmount: h, onmessage: a, ready: l } = this.app(
+          r,
+          {
+            ...c,
+            data: i,
+            port: this.channel.port2,
+            tracking: this.tracking,
+            prerendered: !!t,
+            children: this.children
+          },
+          s
+        ) || {};
+        h && (this.onunmount = h), a && (this.onmessage = a), l && this.onready(l);
+      }
+    } catch (s) {
       throw this.log.info(
-        `<custom-code-component> uncaught error during mount from ${this.component.toString()}`
-      ), this.log.error(e), e;
+        `<custom-code-component> uncaught error during mount from ${(n = this.component) == null ? void 0 : n.toString()}`
+      ), this.log.error(s), s;
     }
   }
   // Called in top-level error handler
-  // Replace shadow root with light DOM children on error
+  // Replace shadow root with either <slot> or template[data-component-fallback]
+  // slot on failure
   unmount(t) {
-    var e;
-    this.onunmount(), (e = this.shadowRoot) == null || e.replaceChildren(...this.lightRoot), this.dataset.cccError || (this.dataset.cccError = _(t.name.replace("CCC", ""))), delete this.dataset.cccReady;
+    var n;
+    this.onunmount();
+    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 = V(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), 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}`;
+    if (!this.component)
+      throw new Error("No path found");
+    const t = this.getAttribute("path"), e = this.getAttribute("version"), n = Number(this.getAttribute("load-timeout") || 1e4), s = this.getAttribute("testEnv"), r = J(s), i = await W(this.component.name, r), c = this.getAttribute("id");
+    this.source = i ? `${r == null ? void 0 : r.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}`;
     try {
       return await new Promise(
         (h, a) => {
-          const d = setTimeout(() => {
+          const l = setTimeout(() => {
             this.log.error("CCC import timeout error"), a(
-              new W({
+              new j({
                 component: this.component,
                 source: this.source
               })
@@ -554,7 +550,7 @@ class q extends HTMLElement {
               /* @vite-ignore */
             ).then(({ default: u }) => {
               if (u)
-                clearTimeout(d), h(u);
+                clearTimeout(l), h(u);
               else
                 throw new g(
                   "No component renderer default export found",
@@ -564,7 +560,7 @@ class q extends HTMLElement {
                   }
                 );
             }).catch((u) => {
-              clearTimeout(d), this.log.error(u), u instanceof Error && !(u instanceof g) ? a(
+              clearTimeout(l), this.log.error(u), u instanceof Error && !(u instanceof g) ? a(
                 new g(u.message, {
                   component: this.component,
                   source: this.source
@@ -572,7 +568,7 @@ class q extends HTMLElement {
               ) : a(u);
             });
           else
-            throw clearTimeout(d), new g(`Unable to mount ${t}`, {
+            throw clearTimeout(l), new g(`Unable to mount ${t}`, {
               component: this.component,
               source: this.source
             });
@@ -585,9 +581,9 @@ class q extends HTMLElement {
     }
   }
 }
-const B = () => customElements.define("custom-code-component", q);
-customElements && !customElements.get("custom-code-component") && B();
+const _ = () => customElements.define("custom-code-component", K);
+customElements && !customElements.get("custom-code-component") && _();
 export {
-  B as init
+  _ as init
 };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=CustomCodeComponent.js.map