@financial-times/custom-code-component 1.8.7 → 1.9.0

package/dist/custom-code-component.js

@@ -1,4 +1,4 @@
-class l extends HTMLElement {
+class d extends HTMLElement {
   constructor() {
     super(...arguments), this.RESERVED_ATTRS = /* @__PURE__ */ new Set([
       "iframe",
@@ -19,32 +19,43 @@ class l extends HTMLElement {
     var c;
     if (!this.app)
       throw new Error("CCC mounted without App");
-    const t = this.shadowRoot ?? this.attachShadow({ mode: this.mode }), o = this.app, u = JSON.parse(this.getAttribute("data-component-props")), m = Object.fromEntries(
-      [...this.attributes].filter((r) => !this.RESERVED_ATTRS.has(r.name)).map((r) => [r.name, r.value])
+    const t = this.shadowRoot ?? this.attachShadow({ mode: this.mode }), e = this.app, h = JSON.parse(this.getAttribute("data-component-props")), u = Object.fromEntries(
+      [...this.attributes].filter((s) => !this.RESERVED_ATTRS.has(s.name)).map((s) => [s.name, s.value])
     );
     (c = this.shadowRoot) == null || c.replaceChildren();
-    const { unmount: s, onmessage: n } = o(
+    const { unmount: o, onmessage: r } = e(
       t,
-      { ...m, data: u, port: this.channel.port2 },
+      { ...u, data: h, port: this.channel.port2 },
       ...this.children
     ) || {};
-    s && (this.unmount = s), n && (this.onmessage = n);
+    o && (this.unmount = o), r && (this.onmessage = r);
   }
   async connectedCallback() {
-    var r;
-    const t = this.getAttribute("path"), o = this.getAttribute("version"), u = this.getAttribute("load-timeout") ?? 2e3, m = (r = this.getAttribute("env")) == null ? void 0 : r.toLowerCase().startsWith("d");
+    var s;
+    const t = this.getAttribute("path"), e = this.getAttribute("version"), h = this.getAttribute("load-timeout") ?? 2e3, u = (s = this.getAttribute("env")) == null ? void 0 : s.toLowerCase().startsWith("d");
     if (!t)
       throw new Error(
         "path attribute not specified in <custom-code-component>"
       );
-    const [s, n, c] = t.split("/").reverse();
-    if (!(!s || !n || !c)) {
-      this.source = m ? `http://localhost:5173/src/${s}/index.jsx` : `https://www.ft.com/__component/${c}/${n}${o ? `@${o}` : "@latest"}/${s}/${s}.js`;
+    const [o, r, c] = t.split("/").reverse();
+    if (!(!o || !r || !c)) {
+      this.source = u ? `http://localhost:5173/src/${o}/index.jsx` : `https://www.ft.com/__component/${c}/${r}${e ? `@${e}` : "@latest"}/${o}/${o}.js`;
       try {
-        this.app = await new Promise((e, p) => {
-          const d = setTimeout(
-            () => p(new i("CCC import timeout")),
-            Number(u)
+        this.app = await new Promise((n, m) => {
+          const p = 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(h)
           );
           import(
             /* webpackIgnore: true */
@@ -52,17 +63,17 @@ class l extends HTMLElement {
             /* @vite-ignore */
           ).then(({ default: a }) => {
             if (a)
-              clearTimeout(d), e(a);
+              clearTimeout(p), n(a);
             else
-              throw new h(
+              throw new i(
                 "No component renderer default export found"
               );
-          }).catch((a) => p(new h(a)));
+          }).catch((a) => m(new i(a)));
         });
-      } catch (e) {
+      } catch (n) {
         console.error(
-          `<custom-code-component> error during import from ${t}@${o}`
-        ), delete this.dataset.cccReady, e instanceof i ? this.dataset.cccError = "import-timeout" : this.dataset.cccError = "import-failure", this.dispatchEvent(new ErrorEvent("error", e)), console.error(e);
+          `<custom-code-component> error during import from ${t}@${e}`
+        ), delete this.dataset.cccReady, this.dataset.cccError = "import-failure", this.dispatchEvent(new ErrorEvent("error", n)), console.error(n);
         return;
       }
       try {
@@ -71,15 +82,15 @@ class l extends HTMLElement {
             bubbles: !0,
             cancelable: !0,
             detail: {
-              component: `${t}@${o}`,
+              component: `${t}@${e}`,
               source: this.source
             }
           })
         ), this.dataset.cccReady = "true", delete this.dataset.cccError;
-      } catch (e) {
+      } catch (n) {
         console.info(
-          `<custom-code-component> uncaught error during mount from ${t}@${o}`
-        ), console.error(e), this.dispatchEvent(new ErrorEvent("error", e)), this.dataset.cccError = "mount-error", delete this.dataset.cccReady;
+          `<custom-code-component> uncaught error during mount from ${t}@${e}`
+        ), console.error(n), this.dispatchEvent(new ErrorEvent("error", n)), this.dataset.cccError = "mount-error", delete this.dataset.cccReady;
       }
     }
   }
@@ -97,18 +108,13 @@ class l extends HTMLElement {
     this.channel.port1.postMessage(t);
   }
 }
-const E = () => customElements.define("custom-code-component", l);
-customElements && !customElements.get("custom-code-component") && E();
+const l = () => customElements.define("custom-code-component", d);
+customElements && !customElements.get("custom-code-component") && l();
 class i extends Error {
   constructor(...t) {
-    super(...t), Error.captureStackTrace && Error.captureStackTrace(this, i), this.name = "CCCImportTimeoutError";
-  }
-}
-class h extends Error {
-  constructor(...t) {
-    super(...t), Error.captureStackTrace && Error.captureStackTrace(this, h), this.name = "CCCImportError";
+    super(...t), Error.captureStackTrace && Error.captureStackTrace(this, i), this.name = "CCCImportError";
   }
 }
 export {
-  E as init
+  l as init
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/custom-code-component",
-  "version": "1.8.7",
+  "version": "1.9.0",
   "type": "module",
   "exports": {
     ".": {

package/src/custom-code-component.ts

@@ -88,7 +88,20 @@ class FTCustomCodeComponent extends HTMLElement {
     try {
       this.app = await new Promise((resolve, reject) => {
         const to = setTimeout(
-          () => reject(new CCCTimeoutError("CCC import timeout")),
+          () => {
+            this.dispatchEvent(
+              new CustomEvent("ccc-timeout", {
+                bubbles: true,
+                cancelable: true,
+                detail: {
+                  component: `${path}@${componentVersionRange}`,
+                  source: this.source,
+                },
+              })
+            );
+            this.dataset.cccError = "import-timeout";
+            delete this.dataset.cccReady;
+          },
           Number(timeout)
         );
         import(/* webpackIgnore: true */ this.source /* @vite-ignore */)
@@ -109,12 +122,7 @@ class FTCustomCodeComponent extends HTMLElement {
       );
 
       delete this.dataset.cccReady;
-
-      if (e instanceof CCCTimeoutError) {
-        this.dataset.cccError = "import-timeout";
-      } else {
-        this.dataset.cccError = "import-failure";
-      }
+      this.dataset.cccError = "import-failure";
 
       this.dispatchEvent(new ErrorEvent("error", e));
       console.error(e);
@@ -195,20 +203,6 @@ export interface CustomCodeComponent extends ContentTree.Node {
   } | { children?: CustomCodeComponent | Array<CustomCodeComponent> };
 }
 
-class CCCTimeoutError extends Error {
-  constructor(...params) {
-    // Pass remaining arguments (including vendor specific ones) to parent constructor
-    super(...params);
-
-    // Maintains proper stack trace for where our error was thrown (only available on V8)
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, CCCTimeoutError);
-    }
-
-    this.name = "CCCImportTimeoutError";
-  }
-}
-
 class CCCImportError extends Error {
   constructor(...params) {
     // Pass remaining arguments (including vendor specific ones) to parent constructor