@financial-times/custom-code-component 1.11.2 → 2.0.1-alpha.10

package/dist/custom-code-component.js

@@ -1,380 +0,0 @@
-function d(o) {
-  this.listenerMap = [{}, {}], o && this.root(o), this.handle = d.prototype.handle.bind(this), this._removedListeners = [];
-}
-d.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;
-};
-d.prototype.captureForType = function(o) {
-  return ["blur", "error", "focus", "load", "resize", "scroll"].indexOf(o) !== -1;
-};
-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, 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: a,
-    matcherParam: r
-  }), this;
-};
-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 (a = this.listenerMap[n ? 1 : 0], !o) {
-    for (h in a)
-      a.hasOwnProperty(h) && this.off(h, t, e);
-    return this;
-  }
-  if (r = a[o], !r || !r.length)
-    return 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;
-};
-d.prototype.handle = function(o) {
-  let t, e;
-  const n = o.type;
-  let s, i, a, r, h = [], c;
-  const l = "ftLabsDelegateIgnore";
-  if (o[l] === !0)
-    return;
-  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;
-    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; 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 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 m;
-};
-d.prototype.fire = function(o, t, e) {
-  return e.handler.call(t, o, t);
-};
-function y(o, t) {
-  return o.toLowerCase() === t.tagName.toLowerCase();
-}
-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)
-    t === document.documentElement || // Or the window itself (dispatched from window)
-    t === window
-  ) : this.rootElement === t;
-}
-function v(o, t) {
-  return o === t.id;
-}
-d.prototype.destroy = function() {
-  this.off(), this.root();
-};
-function g(o) {
-  return typeof o == "string" ? o.trim() : o;
-}
-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 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
-    };
-}, E = [
-  "nodeName",
-  "className",
-  "id",
-  "href",
-  "text",
-  "role"
-], A = (o) => {
-  const t = {};
-  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] = g(n));
-  }
-  return t;
-}, 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];
-  }
-}, P = (o) => {
-  const [t, e] = N(o);
-  return t ? e : o;
-}, $ = (o, t) => (o.filter(
-  (e) => e.name.match(/^data-trackable|^data-o-|^aria-/i)
-).forEach((e) => {
-  t[e.name] = e.value;
-}), t), C = (o, t, e) => {
-  const n = {};
-  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-", "")] = P(s.value);
-  }), n;
-};
-function L(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 a = A(o), r = Array.from(o.attributes);
-    let h = $(r, a);
-    h["data-trackable"] && (h = Object.assign(
-      h,
-      k(o, e, n)
-    )), s.push(h);
-    const c = C(r, a, o === e);
-    b(c, i), o = o.parentNode;
-  }
-  return { trace: s, customContext: i };
-}
-const x = ["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: 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 = 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 x)
-      if (t[n])
-        try {
-          e[n] = g(t[n]);
-        } catch (s) {
-          console.log(s);
-        }
-    return e;
-  }
-  // Controller for handling click events
-  handleClickEvent(t, e) {
-    return (n, s) => {
-      const i = this.getEventProperties(n), { trace: a, customContext: r } = L(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
-      }, i.teamName = this.teamName, i.url = document.URL, b(r, i), i.method = "ftCustomAnalytics", t = { ...t, ...i }, 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]");
-      this.shadowRoot && new d(s).on(
-        "click",
-        this.elements,
-        this.handleClickEvent(n, s),
-        !0
-      );
-    }
-  }
-}
-class R extends HTMLElement {
-  constructor() {
-    super(...arguments), this.RESERVED_ATTRS = /* @__PURE__ */ new Set([
-      "iframe",
-      "path",
-      "version",
-      "data-component-props",
-      "data-asset-type",
-      "shadow-open",
-      "env",
-      "load-timeout"
-    ]), this.unmount = (t) => {
-    }, this.channel = new MessageChannel();
-  }
-  async mount() {
-    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((r) => !this.RESERVED_ATTRS.has(r.name)).map((r) => [r.name, r.value])
-    );
-    this.tracking = new M({
-      name: `${this.getAttribute("path")}@${this.getAttribute("version")}`,
-      subtype: "interactive",
-      teamName: "djd",
-      shadowRoot: this.shadowRoot
-    });
-    const { unmount: i, onmessage: a } = e(
-      t,
-      {
-        ...s,
-        data: n,
-        port: this.channel.port2,
-        tracking: this.tracking
-      },
-      ...this.children
-    ) || {};
-    i && (this.unmount = i), a && (this.onmessage = a);
-  }
-  async connectedCallback() {
-    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 [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() {
-    const t = this.getAttribute("path");
-    console.info(`<custom-code-component:${t}> disconnected`), typeof this.unmount == "function" && this.unmount();
-  }
-  onmessage() {
-  }
-  // I'm honestly not sure what to do with this
-  postMessage(t) {
-    this.channel.port1.postMessage(t);
-  }
-}
-const O = () => customElements.define("custom-code-component", R);
-customElements && !customElements.get("custom-code-component") && O();
-class f extends Error {
-  constructor(...t) {
-    super(...t), Error.captureStackTrace && Error.captureStackTrace(this, f), this.name = "CCCImportError";
-  }
-}
-export {
-  O as init
-};

package/src/custom-code-component.xsd

@@ -1,67 +0,0 @@
-<?xml version="1.0"?>
-
-<xs:schema
-    xmlns:xs="http://www.w3.org/2001/XMLSchema"
-    xmlns:sch="http://purl.oclc.org/dsdl/schematron"
-    >
-  <xs:complexType name="CustomCodeComponent">
-    <xs:sequence minOccurs="0">
-      <xs:element
-          name="custom-code-component"
-          type="CustomCodeComponent"
-          maxOccurs="unbounded"
-          />
-    </xs:sequence>
-    <xs:attribute
-        name="path"
-        type="xs:anyURI"
-        use="required"
-        />
-    <xs:attribute
-        name="versionRange"
-        type="xs:string"
-        use="required"
-        />
-    <xs:attribute
-        name="altText"
-        type="xs:string"
-        use="required"
-        />
-    <xs:attribute
-        name="lastModifiedTimestamp"
-        type="xs:string"
-        use="required"
-        />
-    <xs:attribute
-        name="fallbackImageURL"
-        type="xs:string"
-        />
-    <xs:attribute
-        name="displayFallbackText"
-        type="xs:boolean"
-        default="false"
-        />
-    <xs:attribute
-        name="layout"
-        default="in-line"
-        >
-      <xs:simpleType>
-        <xs:restriction base="xs:string">
-          <xs:enumeration value="in-line" />
-          <xs:enumeration value="mid-grid" />
-          <xs:enumeration value="full-grid" />
-          <xs:enumeration value="full-bleed" />
-        </xs:restriction>
-      </xs:simpleType>
-    </xs:attribute>
-    <xs:attribute
-        name="attributes"
-        type="xs:string"
-        default="{}"
-        />
-  </xs:complexType>
-  <xs:element
-      name="custom-code-component"
-      type="CustomCodeComponent"
-      />
-</xs:schema>