@financial-times/custom-code-component 1.1.4 → 1.1.6

package/dist/custom-code-component.js

@@ -1,4 +1,4 @@
-class f extends HTMLElement {
+class g extends HTMLElement {
   constructor() {
     super(...arguments), this.RESERVED_ATTRS = /* @__PURE__ */ new Set([
       "iframe",
@@ -9,48 +9,50 @@ class f extends HTMLElement {
       "shadow-open",
       "env"
     ]), this.unmount = () => {
-    };
+    }, this.channel = new MessageChannel();
   }
   static get observedAttributes() {
     return ["path", "version", "env", "data-component-props"];
   }
   async mount() {
-    var a, r, m;
-    const e = this.getAttribute("path"), s = this.getAttribute("version"), d = (a = this.getAttribute("env")) == null ? void 0 : a.toLowerCase().startsWith("d");
+    var r, h, m;
+    const e = this.getAttribute("path"), a = this.getAttribute("version"), l = (r = this.getAttribute("env")) == null ? void 0 : r.toLowerCase().startsWith("d");
     if (!e)
       throw new Error(
         "path attribute not specified in <custom-code-component>"
       );
-    const [o, c, i] = e.split("/").reverse();
-    if (!o || !c || !i)
+    const [n, i, c] = e.split("/").reverse();
+    if (!n || !i || !c)
       return;
-    const l = d ? `http://localhost:5173/src/${o}/index.jsx` : `https://www.ft.com/__component/${i}/${c}${s ? `@${s}` : "@latest"}/${o}/${o}.js`;
+    const f = l ? `http://localhost:5173/src/${n}/index.jsx` : `https://www.ft.com/__component/${c}/${i}${a ? `@${a}` : "@latest"}/${n}/${n}.js`;
     try {
-      const n = await import(
+      const s = await import(
         /* webpackIgnore: true */
-        l
+        f
         /* @vite-ignore */
-      ), h = JSON.parse(this.getAttribute("data-component-props")), u = Object.fromEntries(
+      ), p = JSON.parse(this.getAttribute("data-component-props")), u = Object.fromEntries(
         [...this.attributes].filter((t) => !this.RESERVED_ATTRS.has(t.name)).map((t) => [t.name, t.value])
       );
-      if ((r = this.shadowRoot) == null || r.replaceChildren(), this.hasAttribute("iframe")) {
+      if ((h = this.shadowRoot) == null || h.replaceChildren(), this.hasAttribute("iframe")) {
         const t = document.createElement("iframe");
         t.addEventListener("load", () => {
-          const p = n.default(
+          const { unmount: o, onmessage: d } = s.default(
             t.contentDocument,
-            { ...u, data: h },
+            { ...u, data: p, port: this.channel.port2 },
             ...this.children
-          );
-          p && (this.unmount = p);
+          ) || {};
+          o && (this.unmount = o), d && (this.onmessage = d);
         }), (m = this.shadowRoot) == null || m.append(t);
-      } else
-        this.unmount = await n.default(
+      } else {
+        const { unmount: t, onmessage: o } = await s.default(
           this.shadowRoot,
-          { ...u, data: h },
+          { ...u, data: p, port: this.channel.port2 },
           ...this.children
-        );
-    } catch (n) {
-      console.info(`<custom-code-component> uncaught error from ${e}: `, n);
+        ) || {};
+        t && (this.unmount = t), o && (this.onmessage = o);
+      }
+    } catch (s) {
+      console.info(`<custom-code-component> uncaught error from ${e}: `, s);
     }
   }
   connectedCallback() {
@@ -64,9 +66,15 @@ class f extends HTMLElement {
     const e = this.getAttribute("path");
     console.info(`<custom-code-component:${e}> 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);
+  }
 }
-const b = () => customElements.define("custom-code-component", f);
-customElements && !customElements.get("custom-code-component") && b();
+const w = () => customElements.define("custom-code-component", g);
+customElements && !customElements.get("custom-code-component") && w();
 export {
-  b as init
+  w as init
 };

package/package.json

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

package/src/custom-code-component.ts

@@ -20,8 +20,6 @@ class FTCustomCodeComponent extends HTMLElement {
     return ["path", "version", "env", "data-component-props"];
   }
 
-  unmount = () => {};
-
   async mount() {
     const path = this.getAttribute("path");
     const componentVersionRange = this.getAttribute("version");
@@ -66,28 +64,36 @@ class FTCustomCodeComponent extends HTMLElement {
         const mountPoint = document.createElement("iframe");
 
         mountPoint.addEventListener("load", () => {
-          const unmount = App.default(
-            mountPoint.contentDocument,
-            { ...extraProps, data },
-            ...this.children
-          );
+          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);
       } else {
-        this.unmount = await App.default(
-          this.shadowRoot,
-          { ...extraProps, data },
-          ...this.children
-        );
+        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;
       }
     } catch (e) {
       console.info(`<custom-code-component> uncaught error from ${path}: `, e);
     }
   }
 
+  unmount = () => {};
+
   connectedCallback() {
     const mode =
       this.getAttribute("shadow-open") == "false" ? "closed" : "open";
@@ -105,6 +111,14 @@ class FTCustomCodeComponent extends HTMLElement {
     console.info(`<custom-code-component:${path}> disconnected`);
     if (typeof this.unmount === "function") this.unmount();
   }
+
+  channel = new MessageChannel();
+
+  onmessage() {} // I'm honestly not sure what to do with this
+
+  postMessage(event: any) {
+    this.channel.port1.postMessage(event);
+  }
 }
 
 // Register the custom element