@financial-times/custom-code-component 0.0.1-THIS-IS-UPDATED-BY-CI

package/README.md

@@ -0,0 +1,61 @@
+# custom-code-component (`<custom-code-component>`)
+## Web component custom element for instantiating Visual & Data Journalism team projects
+
+## Usage:
+
+Instantiate the web component and pass it a URL to a bundled component you wish to render into the component root.
+
+#### example.jsx
+
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import css from './Component.css?inline';
+
+const App = (props) => <div>{JSON.stringify(props)}</div>;
+
+export default (shadowRoot, props, ...children) => {
+  const style = document.createElement("style");
+  const mountPoint = document.createElement("div");
+
+  style.innerHTML = css;
+  mountPoint.id = "component-root";
+
+  shadowRoot.appendChild(style);
+  shadowRoot.appendChild(mountPoint);
+
+  ReactDOM.createRoot(mountPoint).render(
+    <React.StrictMode>
+      <App {...props}>{children}</App>
+    </React.StrictMode>
+  );
+};
+
+```
+
+#### index.html
+```html
+<script src="custom-code-component.js" type="module"></script>
+
+<custom-code-component path="ft-interactive/test-project/test-component" version="^1" data-component-props="{}" data-asset-type="custom-code-component">
+  <img alt="test component" src="https://ig.ft.com/components/ft-interactive/test-project/test-component@^1.png">
+</custom-code-component>
+```
+
+## Attributes
+* `path` (string)
+  * Component name in the format `[org]/[repo]/[component]`.
+    * If `[org]` is `ccc-sdk` or ommitted, component will be loaded from Vite local dev server (127.0.0.1:5173).
+    * Otherwise, it will be loaded from the CCCCDN
+* `version` (string)
+  * [Semantic Versioning](https://semver.org) range for the component.
+* `data-component-props` (string)
+    * Pass stringified JSON to make it available to children as the `data` prop.
+* `iframe` (boolean)
+    * Render inside an iframe using `srcdoc` for extra sandboxing (default: false)
+* `shadow-open` (boolean)
+    * Sets the shadow root to either open or closed (default: false)
+* `data-asset-type="custom-code-component"`
+    * Part of spec.
+* <any other attributes>
+    * All remaining attributes get passed as an object named `props` to render().

package/dist/custom-code-component.js

@@ -0,0 +1,591 @@
+function m(o) {
+  this.listenerMap = [{}, {}], o && this.root(o), this.handle = m.prototype.handle.bind(this), this._removedListeners = [];
+}
+m.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;
+};
+m.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;
+  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({
+    selector: t,
+    handler: e,
+    matcher: i,
+    matcherParam: c
+  }), this;
+};
+m.prototype.off = function(o, t, e, n) {
+  let r, s, 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 (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));
+  return c.length || (delete i[o], this.rootElement && this.rootElement.removeEventListener(o, this.handle, n)), this;
+};
+m.prototype.handle = function(o) {
+  let t, e;
+  const n = o.type;
+  let r, s, 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) {
+    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 === r || (e = h.length, a = a.parentElement || a.parentNode, a instanceof HTMLDocument))
+      break;
+  }
+  let E;
+  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;
+      break;
+    }
+  return E;
+};
+m.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) {
+  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 $(o, t) {
+  return o === t.id;
+}
+m.prototype.destroy = function() {
+  this.off(), this.root();
+};
+function y(o) {
+  return typeof o == "string" ? o.trim() : o;
+}
+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({
+  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" ? p.DEBUG : t === "info" ? p.INFO : t === "warn" ? p.WARN : t === "error" ? p.ERROR : t === "test" ? p.TEST : p.DEFAULT;
+}
+class C {
+  constructor({ level: t = p.DEFAULT } = {
+    level: p.DEFAULT
+  }) {
+    this.log = this.debug, this.level = t;
+  }
+  debug(...t) {
+    this.level <= p.DEBUG && console.info(...t);
+  }
+  info(...t) {
+    this.level <= p.INFO && console.info(...t);
+  }
+  warn(...t) {
+    this.level <= p.WARN && console.warn(...t);
+  }
+  error(...t) {
+    this.level <= p.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)
+    return {
+      siblings: n.length,
+      position: r
+    };
+}, k = [
+  "nodeName",
+  "className",
+  "id",
+  "href",
+  "text",
+  "role"
+], O = (o) => {
+  const t = {};
+  for (const e of k) {
+    const n = o[e] || o.getAttribute(e) || o.hasAttribute(e);
+    n !== void 0 && (typeof n == "boolean" ? t[e] = n : t[e] = y(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 && 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);
+  }), 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 = {};
+  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);
+    const a = M(c, i, o === e);
+    v(a, s), o = o.parentNode;
+  }
+  return { trace: r, customContext: s };
+}
+const U = ["ctrlKey", "altKey", "shiftKey", "metaKey"];
+class F {
+  constructor({
+    id: t = "00000000-0000-0000-0000-000000000000",
+    name: e = "ccc-component",
+    subtype: n = "interactive",
+    teamName: r = "djd",
+    shadowRoot: s = 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();
+  }
+  // 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] = y(t[n]);
+        } catch (r) {
+          this.log.info(r);
+        }
+    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 = {
+        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(
+        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
+      }, r = (e = this.shadowRoot) == null ? void 0 : e.querySelector("[data-component-root]");
+      r && new m(r).on(
+        "click",
+        this.elements,
+        this.handleClickEvent(n, r),
+        !0
+      );
+    }
+  }
+}
+class l {
+  constructor(t) {
+    const { org: e, repo: n, component: r, versionRange: s } = w(
+      t
+    ) ? t : l.fromString(t);
+    this.org = e, this.repo = n, this.component = r, this.versionRange = s;
+  }
+  set path(t) {
+    const { org: e, repo: n, component: r, versionRange: s } = w(
+      t
+    ) ? t : l.fromString(t);
+    this.org = e, this.repo = n, this.component = r, this.versionRange = s;
+  }
+  get path() {
+    return `${this.org}/${this.repo}@${this.versionRange}/${this.component}`;
+  }
+  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 [r, s, i] = t.replace(/@[^\/]+/, "").split("/").reverse();
+    return new l({ org: i, repo: s, component: r, versionRange: n });
+  }
+}
+function w(o) {
+  return typeof o == "object" && o !== null ? "org" in o && "repo" in o && "component" in o : !1;
+}
+class f extends Error {
+  constructor(t, e) {
+    var n = (...r) => {
+      super(...r);
+    };
+    !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"}.`
+    ), 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(
+      `${(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";
+  }
+}
+class g extends f {
+  constructor(t, e) {
+    super(t, { ...e, cause: "Import error" }), this.name = "CCCImportError";
+  }
+}
+class W extends f {
+  constructor(t) {
+    super(null, { ...t, cause: "Timeout error" }), this.name = "CCCTimeoutError";
+  }
+}
+const R = class A extends Event {
+  constructor(t, e) {
+    super(A.eventType, {
+      bubbles: !0,
+      cancelable: !1,
+      composed: !0,
+      ...e
+    }), this.component = t.component, this.source = t.source;
+  }
+};
+R.eventType = "ccc:ConnectedEvent";
+let j = R;
+const _ = (o) => o.replace(
+  /[A-Z]+(?![a-z])|[A-Z]/g,
+  (t, e) => (e ? "-" : "") + t.toLowerCase()
+);
+function V(o) {
+  return b([
+    "localhost",
+    "local.ft.com",
+    /^.*\.apps\.in\.ft\.com$/
+  ], o);
+}
+function z() {
+  return b([
+    "localhost",
+    "local.ft.com",
+    /^.*\.in\.ft\.com$/
+  ], window.location.hostname);
+}
+function J() {
+  return b([
+    "spark.ft.com",
+    "spark-staging.ft.com"
+  ], window.location.host);
+}
+function b(o, t) {
+  return t ? o.some((e) => typeof e == "string" ? e === t : e.test(t)) : !1;
+}
+function H(o) {
+  if (!o)
+    return;
+  let t;
+  const e = new URL("http://localhost:5173");
+  try {
+    if (typeof o == "string") {
+      if (o === "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");
+    } else
+      J() && (t = e);
+  } catch {
+    return t;
+  }
+  return t;
+}
+async function K(o) {
+  if (!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();
+        }, 50);
+        s.addEventListener("error", () => {
+          clearTimeout(i), s.close(), r(!1);
+        }, { once: !0 });
+      });
+    } catch (r) {
+      return console.error("WebSocket creation failed:", r), Promise.resolve(!1);
+    }
+  }
+  return await t(o == null ? void 0 : o.host);
+}
+class q 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 r;
+      try {
+        (r = this.tracking) == null || r.init(this.id);
+      } catch (s) {
+        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 = new C({
+      level: N(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);
+    }
+  }
+  async connectedCallback() {
+    try {
+      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 f && ((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 && this.emitError(e);
+    }
+  }
+  postMessage(t) {
+    this.channel.port1.postMessage(t);
+  }
+  async mount(t) {
+    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 }), r = JSON.parse(this.getAttribute("data-component-props")), s = 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,
+        {
+          ...s,
+          data: r,
+          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) {
+      throw this.log.info(
+        `<custom-code-component> uncaught error during mount from ${this.component.toString()}`
+      ), this.log.error(e), e;
+    }
+  }
+  // Called in top-level error handler
+  // Replace shadow root with light DOM children on error
+  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;
+  }
+  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}`;
+    try {
+      return await new Promise(
+        (h, a) => {
+          const d = setTimeout(() => {
+            this.log.error("CCC import timeout error"), a(
+              new W({
+                component: this.component,
+                source: this.source
+              })
+            );
+          }, Number(n));
+          if (this.source)
+            import(
+              /* webpackIgnore: true */
+              this.source
+              /* @vite-ignore */
+            ).then(({ default: u }) => {
+              if (u)
+                clearTimeout(d), h(u);
+              else
+                throw new g(
+                  "No component renderer default export found",
+                  {
+                    component: this.component,
+                    source: this.source
+                  }
+                );
+            }).catch((u) => {
+              clearTimeout(d), 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(d), 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;
+    }
+  }
+}
+export {
+  q as FTCustomCodeComponent
+};

package/dist/webcomponent/src/custom-code-component.d.ts

@@ -0,0 +1,55 @@
+/**
+ * @file
+ * Main component definition for custom-code-component
+ */
+import type { ContentTree } from "@financial-times/content-tree";
+import { BaseRenderer } from "../../ccc-sdk/src/renderers/BaseRenderer";
+import Tracking from "./tracking";
+import { Logger } from "./logger";
+import { ComponentPath } from "./path";
+export declare class FTCustomCodeComponent extends HTMLElement {
+    app?: typeof BaseRenderer.prototype.render;
+    mode: "closed" | "open";
+    RESERVED_ATTRS: Set<string>;
+    source?: string;
+    tracking?: Tracking;
+    lightRoot: ChildNode[];
+    component: ComponentPath;
+    log: Logger;
+    constructor();
+    connectedCallback(): Promise<void>;
+    emitError(error: Error): void;
+    disconnectedCallback(): void;
+    channel: MessageChannel;
+    onmessage(): void;
+    onunmount(root?: any): void;
+    onready(app: Promise<void>): Promise<void>;
+    postMessage(event: any): void;
+    mount(prerendered?: ShadowRoot | null): Promise<void>;
+    unmount(e: Error): void;
+    load(): Promise<(shadowRoot: ShadowRoot, attrs: any, ssr?: boolean) => {
+        unmount: (root: any) => void;
+        onmessage: {
+            (...data: any[]): void;
+            (message?: any, ...optionalParams: any[]): void;
+        };
+        ready: Promise<void>;
+    }>;
+    initTracking: () => Promise<void>;
+}
+export interface CustomCodeComponent extends ContentTree.Node {
+    type: "CustomCodeComponent";
+    path: string;
+    versionRange: string;
+    altText: string;
+    lastModified: string;
+    fallbackImage?: ContentTree.Image;
+    displayFallbackText: boolean;
+    layout: "in-line" | "mid-grid" | "full-grid" | "full-bleed";
+    attributes: {
+        [key: string]: string | boolean | undefined;
+    } | {
+        children?: CustomCodeComponent | Array<CustomCodeComponent>;
+    };
+}
+export type { FTCustomCodeComponent as CCCHTMLElement };