@financial-times/custom-code-component 1.7.2 → 1.8.0

package/dist/custom-code-component.js

@@ -1,4 +1,4 @@
-class f extends HTMLElement {
+class l extends HTMLElement {
   constructor() {
     super(...arguments), this.RESERVED_ATTRS = /* @__PURE__ */ new Set([
       "iframe",
@@ -7,86 +7,108 @@ class f extends HTMLElement {
       "data-component-props",
       "data-asset-type",
       "shadow-open",
-      "env"
-    ]), this.source = null, this.unmount = () => {
+      "env",
+      "load-timeout"
+    ]), this.unmount = (t) => {
     }, this.channel = new MessageChannel();
   }
   static get observedAttributes() {
     return ["path", "version", "env", "data-component-props"];
   }
   async mount() {
-    var h, u, m;
-    const e = this.getAttribute("path"), n = this.getAttribute("version"), i = (h = this.getAttribute("env")) == null ? void 0 : h.toLowerCase().startsWith("d");
-    if (!e)
+    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])
+    );
+    (c = this.shadowRoot) == null || c.replaceChildren();
+    const { unmount: s, onmessage: n } = o(
+      t,
+      { ...m, data: u, port: this.channel.port2 },
+      ...this.children
+    ) || {};
+    s && (this.unmount = s), n && (this.onmessage = n);
+  }
+  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");
+    if (!t)
       throw new Error(
         "path attribute not specified in <custom-code-component>"
       );
-    const [s, a, r] = e.split("/").reverse();
-    if (!(!s || !a || !r)) {
-      this.source = i ? `http://localhost:5173/src/${s}/index.jsx` : `https://www.ft.com/__component/${r}/${a}${n ? `@${n}` : "@latest"}/${s}/${s}.js`;
+    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`;
+      try {
+        this.app = await new Promise((e, p) => {
+          const d = setTimeout(
+            () => p(new i("CCC import timeout")),
+            Number(u)
+          );
+          import(
+            /* webpackIgnore: true */
+            this.source
+            /* @vite-ignore */
+          ).then(({ default: a }) => {
+            if (a)
+              clearTimeout(d), e(a);
+            else
+              throw new h(
+                "No component renderer default export found"
+              );
+          }).catch((a) => p(new h(a)));
+        });
+      } catch (e) {
+        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);
+        return;
+      }
       try {
-        const c = await import(
-          /* webpackIgnore: true */
-          this.source
-          /* @vite-ignore */
-        ), p = JSON.parse(this.getAttribute("data-component-props")), d = Object.fromEntries(
-          [...this.attributes].filter((t) => !this.RESERVED_ATTRS.has(t.name)).map((t) => [t.name, t.value])
-        );
-        if ((u = this.shadowRoot) == null || u.replaceChildren(), this.hasAttribute("iframe")) {
-          const t = document.createElement("iframe");
-          t.addEventListener("load", () => {
-            const { unmount: o, onmessage: l } = c.default(
-              t.contentDocument,
-              { ...d, data: p, port: this.channel.port2 },
-              ...this.children
-            ) || {};
-            o && (this.unmount = o), l && (this.onmessage = l);
-          }), (m = this.shadowRoot) == null || m.append(t);
-        } else {
-          const { unmount: t, onmessage: o } = await c.default(
-            this.shadowRoot,
-            { ...d, data: p, port: this.channel.port2 },
-            ...this.children
-          ) || {};
-          t && (this.unmount = t), o && (this.onmessage = o);
-        }
-      } catch (c) {
-        console.info(`<custom-code-component> uncaught error from ${e}`), console.error(c);
+        this.mode = this.getAttribute("shadow-open") == "false" ? "closed" : "open", await this.mount(), this.dispatchEvent(
+          new CustomEvent("ccc-connected", {
+            bubbles: !0,
+            cancelable: !0,
+            detail: {
+              component: `${t}@${o}`,
+              source: this.source
+            }
+          })
+        ), this.dataset.cccReady = "true", delete this.dataset.cccError;
+      } catch (e) {
+        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;
       }
     }
   }
-  connectedCallback() {
-    const e = this.getAttribute("shadow-open") == "false" ? "closed" : "open";
-    this.attachShadow({ mode: e }), this.mount().then(() => {
-      const n = this.getAttribute("path"), i = this.getAttribute("version");
-      this.dispatchEvent(
-        new CustomEvent("ccc-connected", {
-          bubbles: !0,
-          cancelable: !0,
-          detail: {
-            component: `${n}@${i}`,
-            source: this.source
-          }
-        })
-      );
-    });
-  }
   attributeChangedCallback() {
     this.mount();
   }
   disconnectedCallback() {
-    const e = this.getAttribute("path");
-    console.info(`<custom-code-component:${e}> disconnected`), typeof this.unmount == "function" && this.unmount();
+    const t = this.getAttribute("path");
+    console.info(`<custom-code-component:${t}> disconnected`), typeof this.unmount == "function" && this.unmount();
   }
   onmessage() {
   }
   // I'm honestly not sure what to do with this
-  postMessage(e) {
-    this.channel.port1.postMessage(e);
+  postMessage(t) {
+    this.channel.port1.postMessage(t);
+  }
+}
+const E = () => customElements.define("custom-code-component", l);
+customElements && !customElements.get("custom-code-component") && E();
+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";
   }
 }
-const g = () => customElements.define("custom-code-component", f);
-customElements && !customElements.get("custom-code-component") && g();
 export {
-  g as init
+  E as init
 };

package/package.json

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

package/src/custom-code-component.ts

@@ -4,8 +4,12 @@
  */
 
 import { ContentTree } from "@financial-times/content-tree";
-
+import { BaseRenderer } from "../../ccc-sdk/src/renderers/AbstractBaseRenderer";
 class FTCustomCodeComponent extends HTMLElement {
+  app: typeof BaseRenderer.prototype.render;
+
+  mode: "closed" | "open";
+
   RESERVED_ATTRS = new Set([
     "iframe",
     "path",
@@ -14,17 +18,52 @@ class FTCustomCodeComponent extends HTMLElement {
     "data-asset-type",
     "shadow-open",
     "env",
+    "load-timeout",
   ]);
 
   static get observedAttributes() {
     return ["path", "version", "env", "data-component-props"];
   }
 
-  source: string | null = null;
+  source: string;
 
   async mount() {
+    if (!this.app) {
+      throw new Error("CCC mounted without App");
+    }
+
+    const shadow = this.shadowRoot ?? this.attachShadow({ mode: this.mode });
+
+    const App = this.app;
+
+    const data = JSON.parse(this.getAttribute("data-component-props")!);
+
+    const extraProps = Object.fromEntries(
+      [...this.attributes]
+        .filter((attribute) => !this.RESERVED_ATTRS.has(attribute.name))
+        .map((attribute) => [attribute.name, attribute.value])
+    );
+
+    // Clear old children
+    this.shadowRoot?.replaceChildren();
+
+    const { unmount, onmessage } =
+      App(
+        shadow,
+        { ...extraProps, data, port: this.channel.port2 },
+        ...this.children
+      ) || {};
+
+    if (unmount) this.unmount = unmount;
+    if (onmessage) this.onmessage = onmessage;
+  }
+
+  unmount = (root?: any) => {};
+
+  async connectedCallback() {
     const path = this.getAttribute("path");
     const componentVersionRange = this.getAttribute("version");
+    const timeout = this.getAttribute("load-timeout") ?? 2000;
     const useLocalVersion = this.getAttribute("env")
       ?.toLowerCase()
       .startsWith("d");
@@ -47,64 +86,48 @@ class FTCustomCodeComponent extends HTMLElement {
         }/${componentName}/${componentName}.js`;
 
     try {
-      const App = await import(
-        /* webpackIgnore: true */ this.source /* @vite-ignore */
-      );
-
-      const data = JSON.parse(this.getAttribute("data-component-props")!);
-
-      const extraProps = Object.fromEntries(
-        [...this.attributes]
-          .filter((attribute) => !this.RESERVED_ATTRS.has(attribute.name))
-          .map((attribute) => [attribute.name, attribute.value])
+      this.app = await new Promise((resolve, reject) => {
+        const to = setTimeout(
+          () => reject(new CCCTimeoutError("CCC import timeout")),
+          Number(timeout)
+        );
+        import(/* webpackIgnore: true */ this.source /* @vite-ignore */)
+          .then(({ default: componentRenderFunction }) => {
+            if (componentRenderFunction) {
+              clearTimeout(to);
+              resolve(componentRenderFunction);
+            } else
+              throw new CCCImportError(
+                "No component renderer default export found"
+              );
+          })
+          .catch((e) => reject(new CCCImportError(e)));
+      });
+    } catch (e) {
+      console.error(
+        `<custom-code-component> error during import from ${path}@${componentVersionRange}`
       );
 
-      // Clear old children
-      this.shadowRoot?.replaceChildren();
+      delete this.dataset.cccReady;
 
-      if (this.hasAttribute("iframe")) {
-        const mountPoint = document.createElement("iframe");
-
-        mountPoint.addEventListener("load", () => {
-          const { unmount, onmessage } =
-            App.default(
-              mountPoint.contentDocument,
-              { ...extraProps, data, port: this.channel.port2 },
-              ...this.children
-            ) || {};
-
-          if (unmount) this.unmount = unmount;
-          if (onmessage) this.onmessage = onmessage;
-        });
-
-        this.shadowRoot?.append(mountPoint);
+      if (e instanceof CCCTimeoutError) {
+        this.dataset.cccError = "import-timeout";
       } else {
-        const { unmount, onmessage } =
-          (await App.default(
-            this.shadowRoot,
-            { ...extraProps, data, port: this.channel.port2 },
-            ...this.children
-          )) || {};
-
-        if (unmount) this.unmount = unmount;
-        if (onmessage) this.onmessage = onmessage;
+        this.dataset.cccError = "import-failure";
       }
-    } catch (e) {
-      console.info(`<custom-code-component> uncaught error from ${path}`);
+
+      this.dispatchEvent(new ErrorEvent("error", e));
       console.error(e);
+
+      return; // prevent mounting on caught error
     }
-  }
 
-  unmount = () => {};
+    try {
+      this.mode =
+        this.getAttribute("shadow-open") == "false" ? "closed" : "open";
 
-  connectedCallback() {
-    const mode =
-      this.getAttribute("shadow-open") == "false" ? "closed" : "open";
+      await this.mount();
 
-    this.attachShadow({ mode });
-    this.mount().then(() => {
-      const path = this.getAttribute("path");
-      const componentVersionRange = this.getAttribute("version");
       this.dispatchEvent(
         new CustomEvent("ccc-connected", {
           bubbles: true,
@@ -115,7 +138,20 @@ class FTCustomCodeComponent extends HTMLElement {
           },
         })
       );
-    });
+
+      this.dataset.cccReady = "true";
+      delete this.dataset.cccError;
+    } catch (e) {
+      console.info(
+        `<custom-code-component> uncaught error during mount from ${path}@${componentVersionRange}`
+      );
+      console.error(e);
+
+      this.dispatchEvent(new ErrorEvent("error", e));
+      this.dataset.cccError = "mount-error";
+
+      delete this.dataset.cccReady;
+    }
   }
 
   attributeChangedCallback() {
@@ -158,3 +194,31 @@ export interface CustomCodeComponent extends ContentTree.Node {
     [key: string]: string | boolean | undefined;
   } | { 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
+    super(...params);
+
+    // Maintains proper stack trace for where our error was thrown (only available on V8)
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, CCCImportError);
+    }
+
+    this.name = "CCCImportError";
+  }
+}