@financial-times/custom-code-component 1.1.1 → 1.1.3

package/dist/custom-code-component.js

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

package/package.json

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

package/src/custom-code-component.ts

@@ -24,7 +24,6 @@ class FTCustomCodeComponent extends HTMLElement {
 
   async mount() {
     const path = this.getAttribute("path");
-    const mode = this.hasAttribute("shadow-open") ? "open" : "closed";
     const componentVersionRange = this.getAttribute("version");
     const useLocalVersion = this.getAttribute("env")
       ?.toLowerCase()
@@ -60,6 +59,9 @@ class FTCustomCodeComponent extends HTMLElement {
           .map((attribute) => [attribute.name, attribute.value])
       );
 
+      // Clear old children
+      this.shadowRoot?.replaceChildren();
+
       if (this.hasAttribute("iframe")) {
         const mountPoint = document.createElement("iframe");
 
@@ -73,18 +75,13 @@ class FTCustomCodeComponent extends HTMLElement {
           if (unmount) this.unmount = unmount;
         });
 
-        this.attachShadow({ mode }).append(mountPoint);
+        this.shadowRoot?.append(mountPoint);
       } else {
-        if (!this.shadowRoot) this.attachShadow({ mode });
-        else this.shadowRoot.innerHTML = "";
-
-        const unmount = await App.default(
+        this.unmount = await App.default(
           this.shadowRoot,
           { ...extraProps, data },
           ...this.children
         );
-
-        if (unmount) this.unmount = unmount;
       }
     } catch (e) {
       console.info(`<custom-code-component> uncaught error from ${path}: `, e);
@@ -92,6 +89,10 @@ class FTCustomCodeComponent extends HTMLElement {
   }
 
   connectedCallback() {
+    const mode =
+      this.getAttribute("shadow-open") == "false" ? "closed" : "open";
+
+    this.attachShadow({ mode });
     this.mount();
   }
 
@@ -102,7 +103,7 @@ class FTCustomCodeComponent extends HTMLElement {
   disconnectedCallback() {
     const path = this.getAttribute("path");
     console.info(`<custom-code-component:${path}> disconnected`);
-    this.unmount();
+    if (typeof this.unmount === "function") this.unmount();
   }
 }