@financial-times/custom-code-component 2.0.4 → 2.0.6

package/README.md

@@ -58,4 +58,37 @@ export default (shadowRoot, props, ...children) => {
 * `data-asset-type="custom-code-component"`
     * Part of spec.
 * <any other attributes>
-    * All remaining attributes get passed as an object named `props` to render().
+    * All remaining attributes get passed as an object named `props` to render().
+
+## client-metrics-adaptor
+
+This module is an adaptor of the [dotcom-reliability-kit client metrics package](https://github.com/Financial-Times/dotcom-reliability-kit/tree/main/packages/client-metrics-web) to help integrating RUM metrics for the Custom Code Components.
+
+### Requirements
+
+To use it, you are required to have pre-installed the client-metrics-web package.
+
+### Options
+
+- **enrichEventCb** (optional): function to enrich the event payload before is sent to AWS RUM
+- **shouldIgnoreEventCb** (optional): function that checks if the event should be sent or not to AWS RUM
+
+### Usage:
+
+Initialise the ClientMetrics Adaptor in your project to start listening to CCC Events and dispatch automatically AWS RUM events
+
+
+#### example.jsx
+
+```js
+import { MetricsClient } from '@dotcom-reliability-kit/client-metrics-web';
+import * as ClientMetricsAdaptor from '@financial-times/custom-code-component';
+
+const client = new MetricsClient({
+    // Options go here
+});
+
+ClientMetricsAdaptor.init(client, {
+  enrichEventCb: enrichCCCEventWithHomepageContext,
+  shouldIgnoreEventCb: shouldIgnoreCCCEvent,
+});

package/dist/client-metrics-adaptor.d.ts

@@ -0,0 +1,107 @@
+declare class CCCEvent extends Event {
+    component: ComponentPath;
+    source?: string;
+    static eventType: string;
+    constructor(eventType: string | undefined, detail: {
+        component: ComponentPath;
+        source?: string;
+    }, opts?: EventInit);
+}
+
+declare class ComponentPath {
+    org: string;
+    repo: string;
+    name: string;
+    versionRange: string;
+    constructor(path?: ComponentPathType | string);
+    set path(path: ComponentPathType | string);
+    get path(): string;
+    get isValid(): boolean;
+    toString(): string;
+    static fromString(p?: string | null, v?: string | null): ComponentPath;
+}
+
+declare type ComponentPathType = {
+    org: string;
+    repo: string;
+    name: string;
+    versionRange: string;
+};
+
+export declare const DEFAULT_VALUE = "uknown";
+
+export declare const EVENT_TYPES: Record<string, EventType>;
+
+declare type EventType = {
+    namespace: string;
+    payloadFn: (event: GenericCCCEvent) => Record<string, unknown>;
+};
+
+export declare type GenericCCCEvent = CCCEvent | ErrorEvent;
+
+export declare function getComponentProps(eventComponentProp: ComponentPathType): {
+    name: string;
+    org: string;
+    repo: string;
+    versionRange: string;
+};
+
+export declare function getEnrichEventProps(event: GenericCCCEvent): Record<string, unknown>;
+
+export declare function getErrorPayload(event: GenericCCCEvent): Record<string, unknown>;
+
+export declare function getPendingEventsQueue(): PendingEvent[];
+
+export declare function getSuccessPayload(event: GenericCCCEvent): Record<string, unknown>;
+
+/**
+ * Initialises the Adaptor with the provided configuration and starts listening to CCC events.
+ * If there's any pending event, it'll send them to the Metrics server
+ * @param _metricsClient MetricClient instance
+ * @param _options Options to configure adaptor
+ */
+export declare function init(_metricsClient: MetricsClient, _options?: Options): void;
+
+export declare const MAX_PENDING_EVENTS = 50;
+
+export declare type MetricsClient = {
+    recordEvent: (namespace: string, payload?: Record<string, unknown>) => void;
+};
+
+export declare function onEventReceived(_event: Event): void;
+
+declare type Options = {
+    enrichEventCb?: (event: GenericCCCEvent) => Record<string, unknown> | void;
+    shouldIgnoreEventCb?: (event: GenericCCCEvent) => boolean;
+};
+
+declare type PendingEvent = {
+    time: number;
+    event: GenericCCCEvent;
+};
+
+export declare function processEvent(event: GenericCCCEvent): void;
+
+/**
+ * Sends all pending events waiting to be processed
+ *
+ * Notes:
+ * 1. All these events will be registered in RUM with the same time
+ * (at this moment the MetricsClient API doesn't allow to override it)
+ * 2. It's safe to process them in bulk since ClientMetrics will send them in bulk
+ * (all in 1 request)
+ */
+export declare function sendPendingEvents(): void;
+
+/**
+ * Start listening to CCC events
+ * In case there's no MetricsClient registered, it'll store them until they can be sent
+ */
+export declare function startListeners(): void;
+
+/**
+ * Stop listening CCC events
+ */
+export declare function stopListeners(): void;
+
+export { }

package/dist/client-metrics-adaptor.js

@@ -0,0 +1,98 @@
+const f = Object.freeze({
+  "ccc:ready": {
+    namespace: "ccc.success",
+    payloadFn: y
+  },
+  "ccc:error": {
+    namespace: "ccc.failure",
+    payloadFn: w
+  }
+}), i = "uknown", t = [], g = 50;
+let a, n, s = !1;
+function h() {
+  s || (window.addEventListener("ccc:error", u), window.addEventListener("ccc:ready", u)), s = !0;
+}
+function b() {
+  s && (window.removeEventListener("ccc:error", u), window.removeEventListener("ccc:ready", u)), s = !1, t.length = 0, a = null, n = {};
+}
+function v(e, c) {
+  if (!e || typeof e.recordEvent != "function") {
+    console.warn("CCC Can't initialise MetricsClientAdaptor");
+    return;
+  }
+  a = e, n = {}, typeof (c == null ? void 0 : c.shouldIgnoreEventCb) == "function" && (n.shouldIgnoreEventCb = c.shouldIgnoreEventCb), typeof (c == null ? void 0 : c.enrichEventCb) == "function" && (n.enrichEventCb = c.enrichEventCb), o(), h();
+}
+function d(e) {
+  var c;
+  try {
+    const r = ((c = n == null ? void 0 : n.enrichEventCb) == null ? void 0 : c.call(n, e)) || {};
+    if (typeof r != "object" || Array.isArray(r))
+      throw new TypeError("Enrich event callback returned invalid value");
+    return r;
+  } catch (r) {
+    return console.error("CCC RUM event couldn't be enriched", r), {};
+  }
+}
+function l(e) {
+  return {
+    name: (e == null ? void 0 : e.name) || i,
+    org: (e == null ? void 0 : e.org) || i,
+    repo: (e == null ? void 0 : e.repo) || i,
+    versionRange: (e == null ? void 0 : e.versionRange) || i
+  };
+}
+function y(e) {
+  return {
+    ...d(e),
+    component: l(e.component)
+  };
+}
+function w(e) {
+  const c = e.error, r = c == null ? void 0 : c.name;
+  return {
+    ...d(e),
+    component: l(c == null ? void 0 : c.component),
+    error: r || i
+  };
+}
+function E(e) {
+  if (n.shouldIgnoreEventCb && n.shouldIgnoreEventCb(e))
+    return;
+  if (!a) {
+    console.warn("CCC Couldn't process event: ClientMetrics not initialised");
+    return;
+  }
+  const c = f[e.type];
+  if (!c) {
+    console.warn("CCC event.type not registered");
+    return;
+  }
+  a.recordEvent(c.namespace, c.payloadFn(e));
+}
+function u(e) {
+  const c = e;
+  a ? E(c) : (t.push({ event: c, time: Date.now() }), t.splice(0, t.length - g));
+}
+function o() {
+  t.forEach(({ event: e }) => E(e)), t.length = 0;
+}
+function L() {
+  return t;
+}
+export {
+  i as DEFAULT_VALUE,
+  f as EVENT_TYPES,
+  g as MAX_PENDING_EVENTS,
+  l as getComponentProps,
+  d as getEnrichEventProps,
+  w as getErrorPayload,
+  L as getPendingEventsQueue,
+  y as getSuccessPayload,
+  v as init,
+  u as onEventReceived,
+  E as processEvent,
+  o as sendPendingEvents,
+  h as startListeners,
+  b as stopListeners
+};
+//# sourceMappingURL=client-metrics-adaptor.js.map

package/dist/client-metrics-adaptor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"client-metrics-adaptor.js","sources":["../src/client-metrics-adaptor.ts"],"sourcesContent":["// MetricsClient type from https://github.com/Financial-Times/dotcom-reliability-kit/tree/main/packages/client-metrics-web\n// We intentionally copied this type here to avoid having version conflicts between this module and it's client\nimport type { ComponentPathType } from './path'\nimport type { CCCEvent } from './events'\n\nexport type MetricsClient = {\n  recordEvent: (namespace: string, payload?: Record<string, unknown>) => void\n};\n\nexport type GenericCCCEvent = CCCEvent | ErrorEvent;\n\ntype Options = {\n  enrichEventCb?: (event: GenericCCCEvent) => Record<string, unknown> | void\n  shouldIgnoreEventCb?: (event: GenericCCCEvent) => boolean\n};\n\ntype PendingEvent = {\n  time: number\n  event: GenericCCCEvent\n};\n\ntype EventType = {\n  namespace: string\n  payloadFn: (event: GenericCCCEvent) => Record<string, unknown>\n};\n\nexport const EVENT_TYPES: Record<string, EventType> = Object.freeze({\n  'ccc:ready': {\n    namespace: 'ccc.success',\n    payloadFn: getSuccessPayload,\n  },\n  'ccc:error': {\n    namespace: 'ccc.failure',\n    payloadFn: getErrorPayload,\n  },\n});\n\nexport const DEFAULT_VALUE = 'uknown';\n\nconst pendingEvents: PendingEvent[] = [];\nexport const MAX_PENDING_EVENTS = 50;\nlet metricsClient: MetricsClient | null;\nlet options: Options;\nlet isRunning = false;\n\n/**\n * Start listening to CCC events\n * In case there's no MetricsClient registered, it'll store them until they can be sent\n */\nexport function startListeners() {\n  if (!isRunning) {\n    window.addEventListener('ccc:error', onEventReceived);\n    window.addEventListener('ccc:ready', onEventReceived);\n  }\n  isRunning = true;\n}\n\n/**\n * Stop listening CCC events\n */\nexport function stopListeners() {\n  if (isRunning) {\n    window.removeEventListener('ccc:error', onEventReceived);\n    window.removeEventListener('ccc:ready', onEventReceived);\n  }\n\n  isRunning = false;\n  pendingEvents.length = 0;\n  metricsClient = null;\n  options = {};\n}\n\n/**\n * Initialises the Adaptor with the provided configuration and starts listening to CCC events.\n * If there's any pending event, it'll send them to the Metrics server\n * @param _metricsClient MetricClient instance\n * @param _options Options to configure adaptor\n */\nexport function init(_metricsClient: MetricsClient, _options?: Options) {\n  if (!_metricsClient || typeof _metricsClient.recordEvent !== 'function') {\n    console.warn(\"CCC Can't initialise MetricsClientAdaptor\");\n    return;\n  }\n\n  metricsClient = _metricsClient;\n\n  options = {};\n  if (typeof _options?.shouldIgnoreEventCb === 'function') {\n    options.shouldIgnoreEventCb = _options.shouldIgnoreEventCb;\n  }\n  if (typeof _options?.enrichEventCb === 'function') {\n    options.enrichEventCb = _options.enrichEventCb;\n  }\n\n  sendPendingEvents();\n  startListeners();\n}\n\nexport function getEnrichEventProps(event: GenericCCCEvent) {\n  try {\n    const props = options?.enrichEventCb?.(event) || {};\n    if (typeof props !== 'object' || Array.isArray(props)) {\n      throw new TypeError('Enrich event callback returned invalid value');\n    }\n    return props;\n  } catch (error) {\n    console.error(\"CCC RUM event couldn't be enriched\", error);\n    return {};\n  }\n}\n\nexport function getComponentProps(eventComponentProp: ComponentPathType) {\n  return {\n    name: eventComponentProp?.name || DEFAULT_VALUE,\n    org: eventComponentProp?.org || DEFAULT_VALUE,\n    repo: eventComponentProp?.repo || DEFAULT_VALUE,\n    versionRange: eventComponentProp?.versionRange || DEFAULT_VALUE,\n  };\n}\n\nexport function getSuccessPayload(event: GenericCCCEvent): Record<string, unknown> {\n  return {\n    ...getEnrichEventProps(event),\n    component: getComponentProps((event as CCCEvent).component),\n  };\n}\n\nexport function getErrorPayload(event: GenericCCCEvent): Record<string, unknown> {\n  const error = (event as ErrorEvent).error;\n  const errorName = error?.name;\n\n  return {\n    ...getEnrichEventProps(event),\n    component: getComponentProps(error?.component),\n    error: errorName || DEFAULT_VALUE,\n  };\n}\n\nexport function processEvent(event: GenericCCCEvent) {\n  // Stop processing the event if we should ignore it\n  if (options.shouldIgnoreEventCb && options.shouldIgnoreEventCb(event)) {\n    return;\n  }\n\n  if (!metricsClient) {\n    console.warn(\"CCC Couldn't process event: ClientMetrics not initialised\");\n    return;\n  }\n\n  const eventType = EVENT_TYPES[event.type];\n  if (!eventType) {\n    console.warn('CCC event.type not registered');\n    return;\n  }\n\n  metricsClient.recordEvent(eventType.namespace, eventType.payloadFn(event));\n}\n\nexport function onEventReceived(_event: Event) {\n  // The Event object dispatched from the CCC has extra custom props\n  const event = _event as GenericCCCEvent\n\n  if (metricsClient) {\n    processEvent(event);\n  } else {\n    pendingEvents.push({ event: event, time: Date.now() });\n    // keep only the last MAX_PENDING_EVENTS events (FIFO)\n    pendingEvents.splice(0, pendingEvents.length - MAX_PENDING_EVENTS);\n  }\n}\n\n/**\n * Sends all pending events waiting to be processed\n *\n * Notes:\n * 1. All these events will be registered in RUM with the same time\n * (at this moment the MetricsClient API doesn't allow to override it)\n * 2. It's safe to process them in bulk since ClientMetrics will send them in bulk\n * (all in 1 request)\n */\nexport function sendPendingEvents() {\n  pendingEvents.forEach(({ event }) => processEvent(event));\n  pendingEvents.length = 0;\n}\n\nexport function getPendingEventsQueue() {\n  return pendingEvents;\n}\n"],"names":["EVENT_TYPES","getSuccessPayload","getErrorPayload","DEFAULT_VALUE","pendingEvents","MAX_PENDING_EVENTS","metricsClient","options","isRunning","startListeners","onEventReceived","stopListeners","init","_metricsClient","_options","sendPendingEvents","getEnrichEventProps","event","_a","props","error","getComponentProps","eventComponentProp","errorName","processEvent","eventType","_event","getPendingEventsQueue"],"mappings":"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"}

package/dist/custom-element.d.ts

@@ -53,13 +53,12 @@ declare class FTCustomCodeComponent extends HTMLElement {
     disconnectedCallback(): void;
     channel: MessageChannel;
     onmessage(): void;
-    onunmount(root?: any): void;
+    onunmount(e: Error): 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, props: any, ssr?: boolean) => {
-        unmount: (root: any) => void;
+    load(): Promise<(shadowRoot: ShadowRoot, props: any, ssr?: boolean, onErrorCallback?: Function) => {
         onmessage: {
             (...data: any[]): void;
             (message?: any, ...optionalParams: any[]): void;

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 = 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({
+  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 = P) : /^#[a-z0-9\-_]+$/i.test(t) ? (c = t.slice(1), i = I) : (c = t, i = Element.prototype.matches) : (c = null, i = U.bind(this)), s[o].push({
     selector: t,
     handler: e,
     matcher: i,
@@ -54,8 +54,8 @@ l.prototype.handle = function(o) {
   let t, e;
   const n = o.type;
   let r, s, i, c, a = [], h;
-  const m = "ftLabsDelegateIgnore";
-  if (o[m] === !0)
+  const p = "ftLabsDelegateIgnore";
+  if (o[p] === !0)
     return;
   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:
@@ -68,17 +68,17 @@ l.prototype.handle = function(o) {
       a = this.listenerMap[0][n];
       break;
   }
-  let p = [];
+  let u = [];
   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]);
+      h.tagName && ["button", "input", "select", "textarea"].indexOf(h.tagName.toLowerCase()) > -1 && h.hasAttribute("disabled") ? u = [] : i.matcher.call(h, i.matcherParam, h) && u.push([o, h, i]);
     if (h === r || (e = a.length, h = h.parentElement || h.parentNode, h instanceof HTMLDocument))
       break;
   }
   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;
+  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(), L = !1;
       break;
     }
   return L;
@@ -86,10 +86,10 @@ l.prototype.handle = function(o) {
 l.prototype.fire = function(o, t, e) {
   return e.handler.call(t, o, t);
 };
-function x(o, t) {
+function P(o, t) {
   return o.toLowerCase() === t.tagName.toLowerCase();
 }
-function P(o, t) {
+function U(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 P(o, t) {
     t === window
   ) : this.rootElement === t;
 }
-function U(o, t) {
+function I(o, t) {
   return o === t.id;
 }
 l.prototype.destroy = function() {
   this.off(), this.root();
 };
-function $(o) {
+function C(o) {
   return typeof o == "string" ? o.trim() : o;
 }
-function C(o, t) {
+function N(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 u = Object.freeze({
+const m = Object.freeze({
   DEBUG: 0,
   INFO: 1,
   WARN: 2,
@@ -118,51 +118,51 @@ const u = Object.freeze({
   TEST: 4,
   DEFAULT: 2
 });
-function I(o) {
+function D(o) {
   const t = o == null ? void 0 : o.toLowerCase();
-  return t === "debug" ? u.DEBUG : t === "info" ? u.INFO : t === "warn" ? u.WARN : t === "error" ? u.ERROR : t === "test" ? u.TEST : u.DEFAULT;
+  return t === "debug" ? m.DEBUG : t === "info" ? m.INFO : t === "warn" ? m.WARN : t === "error" ? m.ERROR : t === "test" ? m.TEST : m.DEFAULT;
 }
-class N {
-  constructor({ level: t = u.DEFAULT } = {
-    level: u.DEFAULT
+class O {
+  constructor({ level: t = m.DEFAULT } = {
+    level: m.DEFAULT
   }) {
     this.log = this.debug, this.level = t;
   }
   debug(...t) {
-    this.level <= u.DEBUG && console.info(...t);
+    this.level <= m.DEBUG && console.info(...t);
   }
   info(...t) {
-    this.level <= u.INFO && console.info(...t);
+    this.level <= m.INFO && console.info(...t);
   }
   warn(...t) {
-    this.level <= u.WARN && console.warn(...t);
+    this.level <= m.WARN && console.warn(...t);
   }
   error(...t) {
-    this.level <= u.ERROR && console.error(...t);
+    this.level <= m.ERROR && console.error(...t);
   }
 }
-const D = (o, t, e) => {
+const M = (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
     };
-}, O = [
+}, x = [
   "nodeName",
   "className",
   "id",
   "href",
   "text",
   "role"
-], M = (o) => {
+], j = (o) => {
   const t = {};
-  for (const e of O) {
+  for (const e of x) {
     const n = o[e] || o.getAttribute(e) || o.hasAttribute(e);
-    n !== void 0 && (typeof n == "boolean" ? t[e] = n : t[e] = $(n));
+    n !== void 0 && (typeof n == "boolean" ? t[e] = n : t[e] = C(n));
   }
   return t;
-}, j = (o) => {
+}, F = (o) => {
   try {
     const t = JSON.parse(o), e = Object.prototype.toString.call(t);
     return [e === "[object Object]" || e === "[object Array]", t];
@@ -170,31 +170,31 @@ const D = (o, t, e) => {
     return [!1, null];
   }
 }, _ = (o) => {
-  const [t, e] = j(o);
+  const [t, e] = F(o);
   return t ? e : o;
-}, F = (o, t) => (o.filter(
+}, H = (o, t) => (o.filter(
   (e) => e.name.match(/^data-trackable|^data-o-|^aria-/i)
 ).forEach((e) => {
   t[e.name] = e.value;
-}), t), H = (o, t, e) => {
+}), t), z = (o, t, e) => {
   const n = {};
-  return e && O.forEach((r) => {
+  return e && x.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-", "")] = _(r.value);
   }), n;
 };
-function z(o, t) {
+function q(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 = M(o), c = Array.from(o.attributes);
-    let a = F(c, i);
+    const i = j(o), c = Array.from(o.attributes);
+    let a = H(c, i);
     a["data-trackable"] && (a = Object.assign(
       a,
-      D(o, e, n)
+      M(o, e, n)
     )), r.push(a);
-    const h = H(c, i, o === e);
-    C(h, s), o = o.parentNode;
+    const h = z(c, i, o === e);
+    N(h, s), o = o.parentNode;
   }
   return { trace: r, customContext: s };
 }
@@ -210,7 +210,7 @@ class Y {
     elements: c = 'a, button, input, [role="button"]',
     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 = a ?? new N();
+    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 O();
   }
   // Get properties for the event (as opposed to properties of the clicked element)
   getEventProperties(t) {
@@ -218,7 +218,7 @@ class Y {
     for (const n of V)
       if (t[n])
         try {
-          e[n] = $(t[n]);
+          e[n] = C(t[n]);
         } catch (r) {
           this.log.info(r);
         }
@@ -227,13 +227,13 @@ class Y {
   // Controller for handling click events
   handleClickEvent(t, e) {
     return (n, r) => {
-      const s = this.getEventProperties(n), { trace: i, customContext: c } = z(r, e);
+      const s = this.getEventProperties(n), { trace: i, customContext: c } = q(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, C(c, s), s.method = "ftCustomAnalytics", t = { ...t, ...s }, document.body.dispatchEvent(
+      }, s.teamName = this.teamName, s.url = document.URL, N(c, s), s.method = "ftCustomAnalytics", t = { ...t, ...s }, document.body.dispatchEvent(
         new CustomEvent("oTracking.event", {
           detail: t,
           bubbles: !0,
@@ -330,7 +330,7 @@ class w extends d {
     super(t, { ...e, cause: "Import error" }), this.name = "CCCImportError";
   }
 }
-class q extends d {
+class $ extends d {
   constructor(t, e) {
     super(t, { ...e, cause: "Render error" }), this.name = "CCCRenderError";
   }
@@ -352,20 +352,20 @@ const b = class b extends Event {
 };
 b.eventType = "ccc:event";
 let g = b;
-const y = class y extends g {
+const E = class E extends g {
   constructor(t, e) {
-    super(y.eventType, t, e);
+    super(E.eventType, t, e);
   }
 };
-y.eventType = "ccc:connected";
-let T = y;
-const E = class E extends g {
+E.eventType = "ccc:connected";
+let T = E;
+const y = class y extends g {
   constructor(t, e) {
-    super(E.eventType, t, e);
+    super(y.eventType, t, e);
   }
 };
-E.eventType = "ccc:ready";
-let k = E;
+y.eventType = "ccc:ready";
+let k = y;
 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;
@@ -471,8 +471,8 @@ class tt extends HTMLElement {
     `.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"))
+    }, this.log = new O({
+      level: D(this.getAttribute("log"))
     });
     const t = HTMLElement.prototype.hasOwnProperty("attachInternals");
     try {
@@ -492,7 +492,7 @@ class tt extends HTMLElement {
     }
   }
   emitError(t) {
-    if (t instanceof d)
+    if (console.debug("ccc#emitError", t), t instanceof d)
       this.dispatchEvent(
         new ErrorEvent("ccc:error", {
           bubbles: !0,
@@ -520,11 +520,20 @@ class tt extends HTMLElement {
   }
   disconnectedCallback() {
     const t = this.getAttribute("path");
-    this.log.info(`<custom-code-component:${t}> disconnected`), typeof this.onunmount == "function" && this.onunmount(), this.observer.disconnect();
+    this.log.info(`<custom-code-component:${t}> disconnected`), this.observer.disconnect();
   }
   onmessage() {
   }
   onunmount(t) {
+    if (t instanceof Error) {
+      const e = new $(t.message, {
+        error: t,
+        component: this.component
+      });
+      requestAnimationFrame(() => {
+        this.emitError(e), this.unmount(e);
+      });
+    }
   }
   async onready(t) {
     try {
@@ -536,7 +545,7 @@ class tt extends HTMLElement {
       ), this.dataset.cccReady = "true", delete this.dataset.cccError, this.observer.observe(this);
     } catch (e) {
       if (e instanceof Error) {
-        const n = new q(e.message, {
+        const n = new $(e.message, {
           error: e,
           component: this.component
         });
@@ -585,11 +594,7 @@ class tt extends HTMLElement {
           "text-decoration: underline;",
           " attribute instead."
         ));
-        const {
-          unmount: a,
-          onmessage: h,
-          ready: m = Promise.resolve()
-        } = this.app(
+        const { onmessage: a, ready: h = Promise.resolve() } = this.app(
           s,
           {
             ...i ?? c,
@@ -599,9 +604,10 @@ class tt extends HTMLElement {
             prerendered: !!t,
             children: this.children
           },
-          r
+          r,
+          this.onunmount.bind(this)
         ) || {};
-        a && (this.onunmount = a), h && (this.onmessage = h), m && this.onready(m);
+        a && (this.onmessage = a), this.onready(h);
       }
     } catch (r) {
       throw this.log.info(
@@ -614,7 +620,6 @@ class tt extends HTMLElement {
   // slot on failure
   unmount(t) {
     var n;
-    this.onunmount(t);
     const e = this.querySelector(
       "template[data-component-fallback]"
     ) ?? this.querySelector("template");
@@ -634,7 +639,7 @@ class tt extends HTMLElement {
     try {
       return await new Promise(
         (a, h) => {
-          const m = setTimeout(() => {
+          const p = setTimeout(() => {
             this.log.error("CCC import timeout error"), h(
               new J({
                 component: this.component,
@@ -647,9 +652,9 @@ class tt extends HTMLElement {
               /* webpackIgnore: true */
               this.source
               /* @vite-ignore */
-            ).then(({ default: p }) => {
-              if (p)
-                clearTimeout(m), a(p);
+            ).then(({ default: u }) => {
+              if (u)
+                clearTimeout(p), a(u);
               else
                 throw new w(
                   "No component renderer default export found",
@@ -658,16 +663,16 @@ class tt extends HTMLElement {
                     source: this.source
                   }
                 );
-            }).catch((p) => {
-              clearTimeout(m), this.log.error(p), p instanceof Error && !(p instanceof w) ? h(
-                new w(p.message, {
+            }).catch((u) => {
+              clearTimeout(p), this.log.error(u), u instanceof Error && !(u instanceof w) ? h(
+                new w(u.message, {
                   component: this.component,
                   source: this.source
                 })
-              ) : h(p);
+              ) : h(u);
             });
           else
-            throw clearTimeout(m), new w(`Unable to mount ${t}`, {
+            throw clearTimeout(p), new w(`Unable to mount ${t}`, {
               component: this.component,
               source: this.source
             });