@financial-times/custom-code-component 2.0.22 → 2.0.25

package/dist/custom-element.d.ts

@@ -1,5 +1,6 @@
 import { BaseRenderer } from '../../ccc-sdk/src/renderers/BaseRenderer';
 import { ContentTree } from '@financial-times/content-tree';
+import { default as default_2 } from 'ftdomdelegate/main';
 
 declare class ComponentPath {
     org: string;
@@ -71,6 +72,10 @@ declare class FTCustomCodeComponent extends HTMLElement {
      * Logger instance. Set log level using `this.logger.setLogLevel(string|number|null)`.
      */
     logger: Logger;
+    /**
+     * Abort controller used to abort async connectedCallback functionality when disconnectedCallback is called`.
+     */
+    ac: AbortController | null;
     /**
      * IntersectionObserver that dispatches CCCViewportEvents
      */
@@ -141,7 +146,7 @@ declare class FTCustomCodeComponent extends HTMLElement {
      *
      * @param prerendered
      */
-    mount(prerendered?: ShadowRoot | null): Promise<void>;
+    mount(prerendered?: ShadowRoot | null): void;
     /**
      * Called in top-level error handler or by child component on unhandled error.
      * Replace shadow root with either <slot> or template[data-component-fallback]
@@ -155,7 +160,7 @@ declare class FTCustomCodeComponent extends HTMLElement {
      *
      * @returns Promise resolving to component renderer function
      */
-    load(): Promise<(shadowRoot: ShadowRoot, props: any, ssr?: boolean, onErrorCallback?: Function, log?: Logger) => {
+    load(signal: AbortSignal): Promise<(shadowRoot: ShadowRoot, props: any, ssr?: boolean, onErrorCallback?: Function, log?: Logger) => {
         onmessage: {
             (...data: any[]): void;
             (message?: any, ...optionalParams: any[]): void;
@@ -165,7 +170,11 @@ declare class FTCustomCodeComponent extends HTMLElement {
     /**
      * Initialises OTracking
      */
-    initTracking: () => Promise<void>;
+    initTracking: () => void;
+    /**
+     * Destroys OTracking to avoid duplicate events
+     */
+    destroyTracking: () => void;
     /**
      * Injects Vite HMR scripts during dev environment usage
      */
@@ -208,6 +217,7 @@ declare class Tracking {
     elements: string | string[];
     isInitialised: boolean;
     log: Logger;
+    shadowDelegate: typeof default_2;
     constructor({ id, name, subtype, teamName, shadowRoot, category, elements, logger, }: {
         id?: string;
         name: string;
@@ -227,6 +237,7 @@ declare class Tracking {
     }, root: Element): (clickEvent: Event, clickElement: HTMLElement) => void;
     sendSpoorEvent(triggerAction: any, extraDetail: any): void;
     init(id: string): void;
+    destroy(): void;
 }
 
 export { }

package/dist/custom-element.js

@@ -1,7 +1,7 @@
-function m(o) {
-  this.listenerMap = [{}, {}], o && this.root(o), this.handle = m.prototype.handle.bind(this), this._removedListeners = [];
+function g(o) {
+  this.listenerMap = [{}, {}], o && this.root(o), this.handle = g.prototype.handle.bind(this), this._removedListeners = [];
 }
-m.prototype.root = function(o) {
+g.prototype.root = function(o) {
   const t = this.listenerMap;
   let e;
   if (this.rootElement) {
@@ -19,10 +19,10 @@ m.prototype.root = function(o) {
     t[0].hasOwnProperty(e) && this.rootElement.addEventListener(e, this.handle, !1);
   return this;
 };
-m.prototype.captureForType = function(o) {
+g.prototype.captureForType = function(o) {
   return ["blur", "error", "focus", "load", "resize", "scroll"].indexOf(o) !== -1;
 };
-m.prototype.on = function(o, t, e, n) {
+g.prototype.on = function(o, t, e, n) {
   let r, s, i, c;
   if (!o)
     throw new TypeError("Invalid event type: " + o);
@@ -35,7 +35,7 @@ m.prototype.on = function(o, t, e, n) {
     matcherParam: c
   }), this;
 };
-m.prototype.off = function(o, t, e, n) {
+g.prototype.off = function(o, t, e, n) {
   let r, s, i, c, a;
   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;
@@ -50,7 +50,7 @@ m.prototype.off = function(o, t, e, n) {
     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) {
+g.prototype.handle = function(o) {
   let t, e;
   const n = o.type;
   let r, s, i, c, a = [], h;
@@ -68,22 +68,22 @@ m.prototype.handle = function(o) {
       a = this.listenerMap[0][n];
       break;
   }
-  let u = [];
+  let p = [];
   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") ? u = [] : i.matcher.call(h, i.matcherParam, h) && u.push([o, h, i]);
+      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]);
     if (h === r || (e = a.length, h = h.parentElement || h.parentNode, h instanceof HTMLDocument))
       break;
   }
-  let $;
-  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][l] = !0, u[t][0].preventDefault(), $ = !1;
+  let m;
+  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][l] = !0, p[t][0].preventDefault(), m = !1;
       break;
     }
-  return $;
+  return m;
 };
-m.prototype.fire = function(o, t, e) {
+g.prototype.fire = function(o, t, e) {
   return e.handler.call(t, o, t);
 };
 function U(o, t) {
@@ -100,7 +100,7 @@ function _(o, t) {
 function D(o, t) {
   return o === t.id;
 }
-m.prototype.destroy = function() {
+g.prototype.destroy = function() {
   this.off(), this.root();
 };
 function N(o) {
@@ -110,41 +110,41 @@ function I(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({
+const u = Object.freeze({
   DEBUG: 0,
   INFO: 1,
   WARN: 2,
   ERROR: 3,
   TEST: 4,
   DEFAULT: 2
-}), b = "CCC:";
+}), w = "CCC:";
 function S(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;
+  return t === "debug" ? u.DEBUG : t === "info" ? u.INFO : t === "warn" ? u.WARN : t === "error" ? u.ERROR : t === "test" ? u.TEST : u.DEFAULT;
 }
 class P {
   constructor({
-    level: t = p.DEFAULT,
+    level: t = u.DEFAULT,
     component: e
   } = {
-    level: p.DEFAULT
+    level: u.DEFAULT
   }) {
-    this.log = this.debug, this.level = localStorage.getItem("CCC_LOG_LEVEL") ? S(localStorage.getItem("CCC_LOG_LEVEL")) : t, this.component = e;
+    this.log = this.debug, this.level = localStorage != null && localStorage.getItem("CCC_LOG_LEVEL") ? S(localStorage.getItem("CCC_LOG_LEVEL")) : t, this.component = e;
   }
   debug(...t) {
-    this.level <= p.DEBUG && console.info(b, ...t, this.component);
+    this.level <= u.DEBUG && console.info(w, ...t, this.component);
   }
   info(...t) {
-    this.level <= p.INFO && console.info(b, ...t, this.component);
+    this.level <= u.INFO && console.info(w, ...t, this.component);
   }
   warn(...t) {
-    this.level <= p.WARN && console.warn(b, ...t, this.component);
+    this.level <= u.WARN && console.warn(w, ...t, this.component);
   }
   error(...t) {
-    this.level <= p.ERROR && console.error(b, ...t, this.component);
+    this.level <= u.ERROR && console.error(w, ...t, this.component);
   }
   setLogLevel(t) {
-    localStorage.getItem("CCC_LOG_LEVEL") ? this.level = S(localStorage.getItem("CCC_LOG_LEVEL")) : typeof t == "number" ? this.level = t : this.level = S(t);
+    localStorage != null && localStorage.getItem("CCC_LOG_LEVEL") ? this.level = S(localStorage.getItem("CCC_LOG_LEVEL")) : typeof t == "number" ? this.level = t : this.level = S(t);
   }
 }
 const M = (o, t, e) => {
@@ -168,17 +168,17 @@ const M = (o, t, e) => {
     n !== void 0 && (typeof n == "boolean" ? t[e] = n : t[e] = N(n));
   }
   return t;
-}, j = (o) => {
+}, V = (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];
   }
-}, H = (o) => {
-  const [t, e] = j(o);
+}, j = (o) => {
+  const [t, e] = V(o);
   return t ? e : o;
-}, V = (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;
@@ -187,14 +187,14 @@ const M = (o, t, e) => {
   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-", "")] = H(r.value);
+    n[r.name.replace("data-trackable-context-", "")] = j(r.value);
   }), n;
 };
 function z(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 = F(o), c = Array.from(o.attributes);
-    let a = V(c, i);
+    let a = H(c, i);
     a["data-trackable"] && (a = Object.assign(
       a,
       M(o, e, n)
@@ -279,23 +279,27 @@ class G {
         action: "click",
         category: this.category
       }, r = (e = this.shadowRoot) == null ? void 0 : e.querySelector("[data-component-root]");
-      r && new m(r).on(
+      r && (this.shadowDelegate = new g(r), this.shadowDelegate.on(
         "click",
         this.elements,
         this.handleClickEvent(n, r),
         !0
-      );
+      ));
     }
   }
+  destroy() {
+    var t;
+    (t = this.shadowDelegate) == null || t.off();
+  }
 }
-class g {
+class d {
   constructor(t) {
     this.org = "local", this.repo = "dev";
-    const { org: e, repo: n, name: r, versionRange: s } = L(t) ? t : g.fromString(t);
+    const { org: e, repo: n, name: r, versionRange: s } = T(t) ? t : d.fromString(t);
     e && (this.org = e), n && (this.repo = n), this.name = r, this.versionRange = s;
   }
   set path(t) {
-    const { org: e, repo: n, name: r, versionRange: s } = L(t) ? t : g.fromString(t);
+    const { org: e, repo: n, name: r, versionRange: s } = T(t) ? t : d.fromString(t);
     this.org = e, this.repo = n, this.name = r, this.versionRange = s;
   }
   get path() {
@@ -312,42 +316,42 @@ class g {
   static fromString(t, e) {
     var a;
     const n = t ?? "unknown/unknown/unknown", [r, s, i] = n.replace(/@[^\/]+/, "").split("/").reverse(), c = e ?? ((a = n.match(/@[^\/]+/)) == null ? void 0 : a.toString().replace("@", "")) ?? "unknown";
-    if (s && !c) throw new d("No version specified");
-    return new g({ org: i, repo: s, name: r, versionRange: c });
+    if (s && !c) throw new f("No version specified");
+    return new d({ org: i, repo: s, name: r, versionRange: c });
   }
 }
-function L(o) {
+function T(o) {
   return typeof o == "object" && o !== null ? "org" in o && "repo" in o && "name" in o : !1;
 }
-class d extends Error {
+class f extends Error {
   constructor(t, e) {
     var 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 = g.fromString(e.component)) : L(e == null ? void 0 : e.component) ? (super(
+    ), this.component = d.fromString(e.component)) : T(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 g(e.component)) : (super(
+    ), this.component = new d(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) ?? "unknown source", this.errors = [], e != null && e.error && ((n = this.errors) == null || n.push(e == null ? void 0 : e.error)), Error.captureStackTrace && Error.captureStackTrace(this, d), this.name = "CCCError";
+    ), this.component = null), this.source = (e == null ? void 0 : e.source) ?? "unknown source", this.errors = [], e != null && e.error && ((n = this.errors) == null || n.push(e == null ? void 0 : e.error)), Error.captureStackTrace && Error.captureStackTrace(this, f), this.name = "CCCError";
   }
 }
-class w extends d {
+class E extends f {
   constructor(t, e) {
     super(t, { ...e, cause: "Import error" }), this.name = "CCCImportError";
   }
 }
-class O extends d {
+class O extends f {
   constructor(t, e) {
     super(t, { ...e, cause: "Render error" }), this.name = "CCCRenderError";
   }
 }
-class J extends d {
+class J extends f {
   constructor(t) {
     super(null, { ...t, cause: "Timeout error" }), this.name = "CCCTimeoutError";
   }
 }
-const E = class E extends Event {
-  constructor(t = E.eventType, e, n) {
+const y = class y extends Event {
+  constructor(t = y.eventType, e, n) {
     super(t, {
       bubbles: !0,
       cancelable: !1,
@@ -356,54 +360,54 @@ const E = class E extends Event {
     }), this.component = e.component, this.source = e.source;
   }
 };
-E.eventType = "ccc:event";
-let f = E;
-const y = class y extends f {
+y.eventType = "ccc:event";
+let b = y;
+const v = class v extends b {
   constructor(t, e) {
-    super(y.eventType, t, e);
+    super(v.eventType, t, e);
   }
 };
-y.eventType = "ccc:connected";
-let T = y;
-const v = class v extends f {
+v.eventType = "ccc:connected";
+let k = v;
+const C = class C extends b {
   constructor(t, e) {
-    super(v.eventType, t, e);
+    super(C.eventType, t, e);
   }
 };
-v.eventType = "ccc:ready";
-let k = v;
-const C = class C extends f {
+C.eventType = "ccc:ready";
+let A = C;
+const L = class L extends b {
   constructor(t, e) {
-    super(C.eventType, t, e), this.intersecting = !1, this.intersecting = t.intersecting, this.entry = t.entry;
+    super(L.eventType, t, e), this.intersecting = !1, this.intersecting = t.intersecting, this.entry = t.entry;
   }
 };
-C.eventType = "ccc:viewport";
-let R = C;
+L.eventType = "ccc:viewport";
+let R = L;
 const W = (o) => o.replace(
   /[A-Z]+(?![a-z])|[A-Z]/g,
   (t, e) => (e ? "-" : "") + t.toLowerCase()
 );
 function K(o) {
-  return A([
+  return $([
     "localhost",
     "local.ft.com",
     /^.*\.apps\.in\.ft\.com$/
   ], o);
 }
 function B() {
-  return A([
+  return $([
     "localhost",
     "local.ft.com",
     /^.*\.in\.ft\.com$/
   ], window.location.hostname);
 }
 function Z() {
-  return A([
+  return $([
     "spark.ft.com",
     "spark-staging.ft.com"
   ], window.location.host);
 }
-function A(o, t) {
+function $(o, t) {
   return t ? o.some((e) => typeof e == "string" ? e === t : e.test(t)) : !1;
 }
 function X(o) {
@@ -449,7 +453,7 @@ class et extends HTMLElement {
       "shadow-open",
       "env",
       "load-timeout"
-    ]), this.component = new g(), this.observer = new IntersectionObserver((e) => {
+    ]), this.component = new d(), this.ac = null, this.observer = new IntersectionObserver((e) => {
       this.logger.debug("Intersection Observer callback", { entries: e }), e.forEach((n) => {
         this.dispatchEvent(
           new R({
@@ -460,7 +464,7 @@ class et extends HTMLElement {
           })
         );
       });
-    }), this.channel = new MessageChannel(), this.initTracking = async () => {
+    }), this.channel = new MessageChannel(), this.initTracking = () => {
       var e;
       this.logger.debug("initTracking", { cccId: this.id });
       try {
@@ -471,6 +475,17 @@ class et extends HTMLElement {
           `Error initialising tracking on <custom-code-component> ${r}@${s}`
         ), this.logger.error(n);
       }
+    }, this.destroyTracking = () => {
+      var e;
+      this.logger.debug("destroyTracking", { cccId: this.id });
+      try {
+        (e = this.tracking) == null || e.destroy();
+      } catch (n) {
+        const r = this.getAttribute("path"), s = this.getAttribute("version");
+        this.logger.info(
+          `Error destroying tracking on <custom-code-component> ${r}@${s}`
+        ), this.logger.error(n);
+      }
     }, this.injectViteScripts = () => {
       var r, s;
       if (document.querySelector('script[name="ccc-sdk-react-preamble"]')) return;
@@ -498,13 +513,14 @@ class et extends HTMLElement {
    * Called whenever a <custom-code-component> element is mounted to the DOM.
    */
   async connectedCallback() {
+    var t;
     try {
-      const t = this.getAttribute("path"), e = this.getAttribute("version");
-      this.component = g.fromString(t, e), this.logger.component = this.component, this.logger.setLogLevel(this.getAttribute("log")), this.logger.debug("connectedCallback"), this.app = await this.load(), await this.mount(), await this.initTracking();
-    } catch (t) {
-      t instanceof Error && requestAnimationFrame(() => {
-        this.emitError(t);
-      }), this.unmount(t);
+      const e = this.getAttribute("path"), n = this.getAttribute("version");
+      this.component = d.fromString(e, n), this.logger.component = this.component, this.logger.setLogLevel(this.getAttribute("log")), this.logger.debug("connectedCallback"), (t = this.ac) == null || t.abort(), this.ac = new AbortController(), this.app = await this.load(this.ac.signal), this.mount(), this.initTracking();
+    } catch (e) {
+      e instanceof Error && requestAnimationFrame(() => {
+        this.emitError(e);
+      }), this.unmount(e);
     }
   }
   /**
@@ -513,7 +529,7 @@ class et extends HTMLElement {
    * @param error
    */
   emitError(t) {
-    if (this.logger.debug("emitError", { error: t }), t instanceof d)
+    if (this.logger.debug("emitError", { error: t }), t instanceof f)
       this.dispatchEvent(
         new ErrorEvent("ccc:error", {
           bubbles: !0,
@@ -524,7 +540,7 @@ class et extends HTMLElement {
         })
       );
     else {
-      const e = new d(t.message, {
+      const e = new f(t.message, {
         component: this.component,
         error: t
       });
@@ -545,9 +561,10 @@ class et extends HTMLElement {
    * Called when a <custom-code-component> element is removed from DOM.
    */
   disconnectedCallback() {
-    this.logger.debug("disconnectedCallback");
+    var e;
+    (e = this.ac) == null || e.abort(), this.logger.debug("disconnectedCallback");
     const t = this.getAttribute("path");
-    this.logger.info(`<custom-code-component:${t}> disconnected`), this.observer.disconnect();
+    this.destroyTracking(), this.logger.info(`<custom-code-component:${t}> disconnected`), this.observer.disconnect();
   }
   /**
    * MessageChannel postMessage callback
@@ -583,7 +600,7 @@ class et extends HTMLElement {
   async onready(t) {
     try {
       await t, this.logger.debug("onready", { app: t }), this.dispatchEvent(
-        new k({
+        new A({
           component: this.component,
           source: this.source
         })
@@ -617,7 +634,7 @@ class et extends HTMLElement {
    *
    * @param prerendered
    */
-  async mount(t) {
+  mount(t) {
     var e, n;
     this.logger.debug("mount", t);
     try {
@@ -626,7 +643,7 @@ class et extends HTMLElement {
           throw new Error("CCC mounted without App");
         const r = this.shadowRoot !== null, s = this.shadowRoot ?? this.attachShadow({ mode: this.mode });
         if (this.dispatchEvent(
-          new T({
+          new k({
             component: this.component,
             source: this.source
           })
@@ -697,63 +714,71 @@ class et extends HTMLElement {
    *
    * @returns Promise resolving to component renderer function
    */
-  async load() {
-    var c;
+  async load(t) {
+    var a;
     if (this.logger.debug("load"), !this.component.isValid)
       throw new Error("No path found");
-    const t = this.getAttribute("path"), e = this.getAttribute("version"), n = Number(this.getAttribute("load-timeout") || 1e4), r = this.getAttribute("test-env");
-    this.testUrl = X(r);
-    const s = await Q(
+    const e = this.getAttribute("path"), n = this.getAttribute("version"), r = Number(this.getAttribute("load-timeout") || 1e4), s = this.getAttribute("test-env");
+    this.testUrl = X(s);
+    const i = await Q(
       this.component.name,
       this.testUrl
-    ), i = this.getAttribute("id");
-    s && this.testUrl && (this.logger.debug("load adding Vite scripts"), this.injectViteScripts()), this.source = s ? `${(c = this.testUrl) == null ? void 0 : c.origin}/src/${this.component.name}/index.jsx?id=${i}` : `https://www.ft.com/__component/${this.component.org}/${this.component.repo}${e ? `@${e}` : "@latest"}/${this.component.name}/${this.component.name}.js?id=${i}`;
+    ), c = this.getAttribute("id");
+    i && this.testUrl && (this.logger.debug("load adding Vite scripts"), this.injectViteScripts()), this.source = i ? `${(a = this.testUrl) == null ? void 0 : a.origin}/src/${this.component.name}/index.jsx?id=${c}` : `https://www.ft.com/__component/${this.component.org}/${this.component.repo}${n ? `@${n}` : "@latest"}/${this.component.name}/${this.component.name}.js?id=${c}`;
     try {
       return await new Promise(
-        (a, h) => {
-          const l = setTimeout(() => {
-            this.logger.error("CCC import timeout error"), h(
+        (h, l) => {
+          t.throwIfAborted();
+          const p = setTimeout(() => {
+            this.logger.error("CCC import timeout error"), l(
               new J({
                 component: this.component,
                 source: this.source
               })
             );
-          }, Number(n));
+          }, Number(r));
           if (this.source)
             import(
               /* webpackIgnore: true */
               this.source
               /* @vite-ignore */
-            ).then(({ default: u }) => {
-              if (u)
-                clearTimeout(l), a(u);
+            ).then(({ default: m }) => {
+              if (m)
+                clearTimeout(p), h(m);
               else
-                throw new w(
+                throw new E(
                   "No component renderer default export found",
                   {
                     component: this.component,
                     source: this.source
                   }
                 );
-            }).catch((u) => {
-              clearTimeout(l), this.logger.error(u), u instanceof Error && !(u instanceof w) ? h(
-                new w(u.message, {
+            }).catch((m) => {
+              clearTimeout(p), this.logger.error(m), m instanceof Error && !(m instanceof E) ? l(
+                new E(m.message, {
                   component: this.component,
                   source: this.source
                 })
-              ) : h(u);
+              ) : l(m);
             });
           else
-            throw clearTimeout(l), new w(`Unable to mount ${t}`, {
+            throw clearTimeout(p), new E(`Unable to mount ${e}`, {
               component: this.component,
               source: this.source
             });
+          t.addEventListener(
+            "abort",
+            () => {
+              l(t.reason);
+            },
+            { once: !0 }
+          );
         }
       );
-    } catch (a) {
+    } catch (h) {
       throw this.logger.error(
-        `<custom-code-component> error during import from ${t}@${e}`
-      ), a;
+        `<custom-code-component> error during import from ${e}@${n}`
+      ), h;
     }
   }
   /**