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

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",
@@ -12,57 +12,62 @@ class l extends HTMLElement {
     ]), this.unmount = (t) => {
     }, this.channel = new MessageChannel();
   }
-  static get observedAttributes() {
-    return ["path", "version", "env", "data-component-props"];
-  }
   async mount() {
     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 */
             this.source
             /* @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,21 +76,18 @@ 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;
       }
     }
   }
-  attributeChangedCallback() {
-    this.mount();
-  }
   disconnectedCallback() {
     const t = this.getAttribute("path");
     console.info(`<custom-code-component:${t}> disconnected`), typeof this.unmount == "function" && this.unmount();
@@ -97,18 +99,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.1",
   "type": "module",
   "exports": {
     ".": {

package/src/custom-code-component.ts

@@ -21,10 +21,6 @@ class FTCustomCodeComponent extends HTMLElement {
     "load-timeout",
   ]);
 
-  static get observedAttributes() {
-    return ["path", "version", "env", "data-component-props"];
-  }
-
   source: string;
 
   async mount() {
@@ -87,10 +83,20 @@ class FTCustomCodeComponent extends HTMLElement {
 
     try {
       this.app = await new Promise((resolve, reject) => {
-        const to = setTimeout(
-          () => reject(new CCCTimeoutError("CCC import timeout")),
-          Number(timeout)
-        );
+        const to = setTimeout(() => {
+          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 */)
           .then(({ default: componentRenderFunction }) => {
             if (componentRenderFunction) {
@@ -109,12 +115,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);
@@ -154,10 +155,6 @@ class FTCustomCodeComponent extends HTMLElement {
     }
   }
 
-  attributeChangedCallback() {
-    this.mount();
-  }
-
   disconnectedCallback() {
     const path = this.getAttribute("path");
     console.info(`<custom-code-component:${path}> disconnected`);
@@ -195,20 +192,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