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

package/dist/CustomCodeComponent.js

@@ -1,579 +1,7 @@
-function l(o) {
-  this.listenerMap = [{}, {}], o && this.root(o), this.handle = l.prototype.handle.bind(this), this._removedListeners = [];
-}
-l.prototype.root = function(o) {
-  const t = this.listenerMap;
-  let e;
-  if (this.rootElement) {
-    for (e in t[1])
-      t[1].hasOwnProperty(e) && this.rootElement.removeEventListener(e, this.handle, !0);
-    for (e in t[0])
-      t[0].hasOwnProperty(e) && this.rootElement.removeEventListener(e, this.handle, !1);
-  }
-  if (!o || !o.addEventListener)
-    return this.rootElement && delete this.rootElement, this;
-  this.rootElement = o;
-  for (e in t[1])
-    t[1].hasOwnProperty(e) && this.rootElement.addEventListener(e, this.handle, !0);
-  for (e in t[0])
-    t[0].hasOwnProperty(e) && this.rootElement.addEventListener(e, this.handle, !1);
-  return this;
-};
-l.prototype.captureForType = function(o) {
-  return ["blur", "error", "focus", "load", "resize", "scroll"].indexOf(o) !== -1;
-};
-l.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 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 = $) : /^#[a-z0-9\-_]+$/i.test(t) ? (c = t.slice(1), i = L) : (c = t, i = Element.prototype.matches) : (c = null, i = T.bind(this)), r[o].push({
-    selector: t,
-    handler: e,
-    matcher: i,
-    matcherParam: c
-  }), this;
-};
-l.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) {
-    for (h in i)
-      i.hasOwnProperty(h) && this.off(h, t, e);
-    return this;
-  }
-  if (c = i[o], !c || !c.length)
-    return this;
-  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;
-};
-l.prototype.handle = function(o) {
-  let t, e;
-  const n = o.type;
-  let s, r, i, c, h = [], a;
-  const p = "ftLabsDelegateIgnore";
-  if (o[p] === !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:
-      h = 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]));
-      break;
-    case 3:
-      h = 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 === s || (e = h.length, a = a.parentElement || a.parentNode, a 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][p] = !0, u[t][0].preventDefault(), v = !1;
-      break;
-    }
-  return v;
-};
-l.prototype.fire = function(o, t, e) {
-  return e.handler.call(t, o, t);
-};
-function $(o, t) {
-  return o.toLowerCase() === t.tagName.toLowerCase();
-}
-function T(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)
-    t === document.documentElement || // Or the window itself (dispatched from window)
-    t === window
-  ) : this.rootElement === t;
-}
-function L(o, t) {
-  return o === t.id;
-}
-l.prototype.destroy = function() {
-  this.off(), this.root();
-};
-function R(o) {
-  return typeof o == "string" ? o.trim() : o;
-}
-function A(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 m = Object.freeze({
-  DEBUG: 0,
-  INFO: 1,
-  WARN: 2,
-  ERROR: 3,
-  TEST: 4,
-  DEFAULT: 2
-});
-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 k {
-  constructor({ level: t = m.DEFAULT } = {
-    level: m.DEFAULT
-  }) {
-    this.log = this.debug, this.level = t;
-  }
-  debug(...t) {
-    this.level <= m.DEBUG && console.info(...t);
-  }
-  info(...t) {
-    this.level <= m.INFO && console.info(...t);
-  }
-  warn(...t) {
-    this.level <= m.WARN && console.warn(...t);
-  }
-  error(...t) {
-    this.level <= m.ERROR && console.error(...t);
-  }
-}
-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
-    };
-}, C = [
-  "nodeName",
-  "className",
-  "id",
-  "href",
-  "text",
-  "role"
-], O = (o) => {
-  const t = {};
-  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] = R(n));
-  }
-  return t;
-}, P = (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);
-  return t ? e : o;
-}, I = (o, t) => (o.filter(
-  (e) => e.name.match(/^data-trackable|^data-o-|^aria-/i)
-).forEach((e) => {
-  t[e.name] = e.value;
-}), t), M = (o, t, e) => {
-  const n = {};
-  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);
-  }), 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, 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,
-      S(o, e, n)
-    )), s.push(h);
-    const a = M(c, i, o === e);
-    A(a, r), o = o.parentNode;
-  }
-  return { trace: s, customContext: r };
-}
-const U = ["ctrlKey", "altKey", "shiftKey", "metaKey"];
-class F {
-  constructor({
-    id: t = "00000000-0000-0000-0000-000000000000",
-    name: e = "ccc-component",
-    subtype: n = "interactive",
-    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 = 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) {
-    const e = {};
-    for (const n of U)
-      if (t[n])
-        try {
-          e[n] = R(t[n]);
-        } catch (s) {
-          this.log.info(s);
-        }
-    return e;
-  }
-  // Controller for handling click events
-  handleClickEvent(t, e) {
-    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
-      }, r.teamName = this.teamName, r.url = document.URL, A(c, r), r.method = "ftCustomAnalytics", t = { ...t, ...r }, document.body.dispatchEvent(
-        new CustomEvent("oTracking.event", {
-          detail: t,
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    };
-  }
-  sendSpoorEvent(t, e) {
-    const n = {
-      category: "component",
-      action: "act",
-      component: {
-        id: this.cccId,
-        name: this.cccName,
-        type: "custom-code-component",
-        subtype: this.subtype
-      },
-      teamName: this.teamName,
-      trigger_action: t,
-      custom: e,
-      method: "ftCustomAnalytics"
-    };
-    document.body.dispatchEvent(
-      new CustomEvent("oTracking.event", {
-        detail: n,
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  init(t) {
-    var e;
-    if (!this.isInitialised) {
-      this.isInitialised = !0, this.cccId = t || this.cccId;
-      const n = {
-        action: "click",
-        category: this.category
-      }, s = (e = this.shadowRoot) == null ? void 0 : e.querySelector("[data-component-root]");
-      s && new l(s).on(
-        "click",
-        this.elements,
-        this.handleClickEvent(n, s),
-        !0
-      );
-    }
-  }
-}
-class f {
-  constructor(t) {
-    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, 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.name}`;
-  }
-  toString() {
-    return this.path;
-  }
-  static fromString(t, e) {
-    var c;
-    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 E(o) {
-  return typeof o == "object" && o !== null ? "org" in o && "repo" in o && "name" in o : !1;
-}
-class d extends Error {
-  constructor(t, e) {
-    !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(
-      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, d), this.name = "CCCError";
-  }
-}
-class g extends d {
-  constructor(t, e) {
-    super(t, { ...e, cause: "Import error" }), this.name = "CCCImportError";
-  }
-}
-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, {
-      bubbles: !0,
-      cancelable: !1,
-      composed: !0,
-      ...e
-    }), this.component = t.component, this.source = t.source;
-  }
-};
-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 z(o) {
-  return y([
-    "localhost",
-    "local.ft.com",
-    /^.*\.apps\.in\.ft\.com$/
-  ], o);
-}
-function J() {
-  return y([
-    "localhost",
-    "local.ft.com",
-    /^.*\.in\.ft\.com$/
-  ], window.location.hostname);
-}
-function W() {
-  return y([
-    "spark.ft.com",
-    "spark-staging.ft.com"
-  ], window.location.host);
-}
-function y(o, t) {
-  return t ? o.some((e) => typeof e == "string" ? e === t : e.test(t)) : !1;
-}
-function H(o) {
-  if (o === null)
-    return;
-  let t;
-  const e = new URL("http://localhost:5173");
-  try {
-    if (typeof o == "string") {
-      if ((o === "" || o.toLowerCase() === "true") && J())
-        t = e;
-      else if (t = o.startsWith("http://") || o.startsWith("https://") ? new URL(o) : void 0, t && !z(t == null ? void 0 : t.hostname))
-        throw new Error("Unsafe testing host override");
-    } else W() && (t = e);
-  } catch {
-    return t;
-  }
-  return t;
-}
-async function q(o, t) {
-  return t ? fetch(
-    new URL(`src/${o}/config.yaml`, t),
-    {
-      method: "HEAD"
-    }
-  ).then(() => !0).catch(() => !1) : !1;
-}
-class K extends HTMLElement {
-  constructor() {
-    super(), this.mode = "open", this.RESERVED_ATTRS = /* @__PURE__ */ new Set([
-      "iframe",
-      "path",
-      "version",
-      "data-component-props",
-      "data-asset-type",
-      "shadow-open",
-      "env",
-      "load-timeout"
-    ]), this.channel = new MessageChannel(), this.initTracking = async () => {
-      var e;
-      try {
-        (e = this.tracking) == null || e.init(this.id);
-      } catch (n) {
-        const s = this.getAttribute("path"), r = this.getAttribute("version");
-        this.log.info(
-          `Error initialising tracking on <custom-code-component> ${s}@${r}`
-        ), this.log.error(n);
-      }
-    }, this.log = new k({
-      level: N(this.getAttribute("log"))
-    });
-    const t = HTMLElement.prototype.hasOwnProperty("attachInternals");
-    try {
-      const e = t && this.attachInternals();
-    } catch (e) {
-      this.log.error(e);
-    }
-  }
-  async connectedCallback() {
-    try {
-      const t = this.getAttribute("path"), e = this.getAttribute("version");
-      this.component = f.fromString(t, e), this.lightRoot = Array.from(this.childNodes), this.app = await this.load(), await this.mount(), await this.initTracking();
-    } catch (t) {
-      t instanceof Error && requestAnimationFrame(() => {
-        this.emitError(t);
-      }), this.unmount(t);
-    }
-  }
-  emitError(t) {
-    var n;
-    let 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, {
-        bubbles: !0,
-        cancelable: !1,
-        composed: !0,
-        error: t,
-        message: t.message
-      })
-    );
-  }
-  disconnectedCallback() {
-    const t = this.getAttribute("path");
-    this.log.info(`<custom-code-component:${t}> disconnected`), typeof this.onunmount == "function" && this.onunmount();
-  }
-  onmessage() {
-  }
-  onunmount(t) {
-  }
-  async onready(t) {
-    try {
-      await t;
-    } catch (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.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 }), 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: p } = 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), p && this.onready(p);
-      }
-    } catch (s) {
-      throw this.log.info(
-        `<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
-  unmount(t) {
-    var e;
-    this.lightRoot && (this.onunmount(), (e = this.shadowRoot) == null || e.replaceChildren(...this.lightRoot), this.dataset.cccError || (this.dataset.cccError = V(t.name.replace("CCC", ""))), delete this.dataset.cccReady);
-  }
-  async load() {
-    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 = H(s), i = await q(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 p = setTimeout(() => {
-            this.log.error("CCC import timeout error"), a(
-              new j({
-                component: this.component,
-                source: this.source
-              })
-            );
-          }, Number(n));
-          if (this.source)
-            import(
-              /* webpackIgnore: true */
-              this.source
-              /* @vite-ignore */
-            ).then(({ default: u }) => {
-              if (u)
-                clearTimeout(p), h(u);
-              else
-                throw new g(
-                  "No component renderer default export found",
-                  {
-                    component: this.component,
-                    source: this.source
-                  }
-                );
-            }).catch((u) => {
-              clearTimeout(p), this.log.error(u), u instanceof Error && !(u instanceof g) ? a(
-                new g(u.message, {
-                  component: this.component,
-                  source: this.source
-                })
-              ) : a(u);
-            });
-          else
-            throw clearTimeout(p), new g(`Unable to mount ${t}`, {
-              component: this.component,
-              source: this.source
-            });
-        }
-      );
-    } catch (h) {
-      throw this.log.error(
-        `<custom-code-component> error during import from ${t}@${e}`
-      ), h;
-    }
-  }
-}
-const _ = () => customElements.define("custom-code-component", K);
-customElements && !customElements.get("custom-code-component") && _();
+import { FTCustomCodeComponent as o } from "./custom-element.js";
+const t = () => customElements.define("custom-code-component", o);
+customElements && !customElements.get("custom-code-component") && t();
 export {
-  _ as init
+  t as init
 };
 //# sourceMappingURL=CustomCodeComponent.js.map