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

package/dist/custom-code-component.js

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

package/package.json

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

package/src/custom-code-component.ts

@@ -16,7 +16,13 @@ class FTCustomCodeComponent extends HTMLElement {
     "env",
   ]);
 
-  async connectedCallback() {
+  static get observedAttributes() {
+    return ["path", "version", "env", "data-component-props"];
+  }
+
+  unmount = () => {};
+
+  async mount() {
     const path = this.getAttribute("path");
     const mode = this.hasAttribute("shadow-open") ? "open" : "closed";
     const componentVersionRange = this.getAttribute("version");
@@ -64,29 +70,39 @@ class FTCustomCodeComponent extends HTMLElement {
             ...this.children
           );
 
-          if (unmount) this.disconnectedCallback = unmount;
+          if (unmount) this.unmount = unmount;
         });
 
         this.attachShadow({ mode }).append(mountPoint);
       } else {
-        const shadowRoot = this.attachShadow({ mode });
+        if (!this.shadowRoot) this.attachShadow({ mode });
+        else this.shadowRoot.innerHTML = "";
 
         const unmount = await App.default(
-          shadowRoot,
+          this.shadowRoot,
           { ...extraProps, data },
           ...this.children
         );
 
-        if (unmount) this.disconnectedCallback = unmount;
+        if (unmount) this.unmount = unmount;
       }
     } catch (e) {
       console.info(`<custom-code-component> uncaught error from ${path}: `, e);
     }
   }
 
-  async disconnectedCallback() {
+  connectedCallback() {
+    this.mount();
+  }
+
+  attributeChangedCallback() {
+    this.mount();
+  }
+
+  disconnectedCallback() {
     const path = this.getAttribute("path");
     console.info(`<custom-code-component:${path}> disconnected`);
+    this.unmount();
   }
 }