@financial-times/custom-code-component 0.0.9 → 1.0.0

package/dist/custom-code-component.d.ts

@@ -11,5 +11,6 @@ export interface CustomCodeComponent extends ContentTree.Node {
     altText: string;
     timestamp?: string;
     fallbackImage?: ContentTree.Image;
-    attributes?: [string, string][];
+    attributes?: Array<[string, string]>;
+    children?: Array<ContentTree.Node | CustomCodeComponent>;
 }

package/dist/custom-code-component.js

@@ -11,36 +11,39 @@ class u extends HTMLElement {
     ]);
   }
   async connectedCallback() {
-    var a;
-    const n = this.getAttribute("path"), s = this.hasAttribute("shadow-open") ? "open" : "closed", c = this.getAttribute("version"), m = (a = this.getAttribute("env")) == null ? void 0 : a.toLowerCase().startsWith("d");
+    var r;
+    const n = this.getAttribute("path"), s = this.hasAttribute("shadow-open") ? "open" : "closed", c = this.getAttribute("version"), h = (r = this.getAttribute("env")) == null ? void 0 : r.toLowerCase().startsWith("d");
     if (!n)
       throw new Error(
         "path attribute not specified in <custom-code-component>"
       );
-    const [o, p, h] = n.split("/").reverse(), d = m ? `http://localhost:5173/src/${o}/index.jsx` : `https://www.ft.com/__component/${h}/${p}/${o}${c ? `@${c}` : "@latest"}/${o}.js`;
+    const [e, a, i] = n.split("/").reverse();
+    if (!e || !a || !i)
+      return;
+    const d = h ? `http://localhost:5173/src/${e}/index.jsx` : `https://www.ft.com/__component/${i}/${a}${c ? `@${c}` : "@latest"}/${e}/${e}`;
     try {
-      const e = await import(
+      const o = await import(
         /* webpackIgnore: true */
         d
         /* @vite-ignore */
-      ), i = JSON.parse(this.getAttribute("data-component-props")), r = Object.fromEntries(
+      ), m = JSON.parse(this.getAttribute("data-component-props")), p = 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", () => {
-          e.default(
+          o.default(
             t.contentDocument,
-            { ...r, data: i },
+            { ...p, data: m },
             ...this.children
           );
         }), this.attachShadow({ mode: s }).append(t);
       } else {
         const t = this.attachShadow({ mode: s });
-        e.default(t, { ...r, data: i }, ...this.children);
+        o.default(t, { ...p, data: m }, ...this.children);
       }
-    } catch (e) {
-      console.info("<custom-code-component> caught: ", e);
+    } catch (o) {
+      console.info("<custom-code-component> caught: ", o);
     }
   }
 }

package/package.json

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

package/src/custom-code-component.ts

@@ -33,11 +33,14 @@ class FTCustomCodeComponent extends HTMLElement {
       .split("/")
       .reverse();
 
+    if (!componentName || !componentRepo || !componentOrg) return;
+
     const source = useLocalVersion
       ? `http://localhost:5173/src/${componentName}/index.jsx`
-      : `https://www.ft.com/__component/${componentOrg}/${componentRepo}/${componentName}${
+      : `https://www.ft.com/__component/${componentOrg}/${componentRepo}${
           componentVersionRange ? `@${componentVersionRange}` : "@latest"
-        }/${componentName}.js`;
+        }/${componentName}/${componentName}`;
+
     try {
       const App = await import(
         /* webpackIgnore: true */ source /* @vite-ignore */
@@ -86,5 +89,6 @@ export interface CustomCodeComponent extends ContentTree.Node {
   altText: string;
   timestamp?: string;
   fallbackImage?: ContentTree.Image;
-  attributes?: [string, string][];
+  attributes?: Array<[string, string]>;
+  children?: Array<ContentTree.Node | CustomCodeComponent>;
 }