@financial-times/custom-code-component 0.0.5 → 0.0.8

package/dist/custom-code-component.js

@@ -1,4 +1,4 @@
-class h extends HTMLElement {
+class u extends HTMLElement {
   constructor() {
     super(...arguments), this.RESERVED_ATTRS = /* @__PURE__ */ new Set([
       "iframe",
@@ -6,25 +6,27 @@ class h extends HTMLElement {
       "version",
       "data-component-props",
       "data-asset-type",
-      "shadow-open"
+      "shadow-open",
+      "env"
     ]);
   }
   async connectedCallback() {
-    const o = this.getAttribute("path"), n = this.hasAttribute("shadow-open") ? "open" : "closed", s = this.getAttribute("version");
+    var a;
+    const o = this.getAttribute("path"), n = this.hasAttribute("shadow-open") ? "open" : "closed", s = this.getAttribute("version"), m = (a = this.getAttribute("env")) == null ? void 0 : a.toLowerCase().startsWith("d");
     if (!o)
       throw new Error(
         "path attribute not specified in <custom-code-component>"
       );
-    const [c, a, i] = o.split("/").reverse(), p = !i || a === "ccc-sdk" ? `http://localhost:5173/src/${c}/index.jsx` : (
+    const [c, p, h] = o.split("/").reverse(), d = m ? `http://localhost:5173/src/${c}/index.jsx` : (
       // @TODO create component service -- this URL may change!!!
-      `https://www.ft.com/__component/${i}/${a}/${c}${s ? `@${s}` : "@latest"}`
+      `https://www.ft.com/__component/${h}/${p}/${c}${s ? `@${s}` : "@latest"}`
     );
     try {
       const e = await import(
         /* webpackIgnore: true */
-        p
+        d
         /* @vite-ignore */
-      ), m = JSON.parse(this.getAttribute("data-component-props") || ""), r = Object.fromEntries(
+      ), i = JSON.parse(this.getAttribute("data-component-props")), r = Object.fromEntries(
         [...this.attributes].filter((t) => !this.RESERVED_ATTRS.has(t.name)).map((t) => [t.name, t.value])
       );
       if (this.hasAttribute("iframe")) {
@@ -32,21 +34,21 @@ class h extends HTMLElement {
         t.addEventListener("load", () => {
           e.default(
             t.contentDocument,
-            { ...r, data: m },
+            { ...r, data: i },
             ...this.children
           );
         }), this.attachShadow({ mode: n }).append(t);
       } else {
         const t = this.attachShadow({ mode: n });
-        e.default(t, { ...r, data: m }, ...this.children);
+        e.default(t, { ...r, data: i }, ...this.children);
       }
     } catch (e) {
       console.info("<custom-code-component> caught: ", e);
     }
   }
 }
-const d = () => customElements.define("custom-code-component", h);
-customElements && !customElements.get("custom-code-component") && d();
+const l = () => customElements.define("custom-code-component", u);
+customElements && !customElements.get("custom-code-component") && l();
 export {
-  d as init
+  l as init
 };

package/package.json

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

package/src/custom-code-component.ts

@@ -13,12 +13,16 @@ class FTCustomCodeComponent extends HTMLElement {
     "data-component-props",
     "data-asset-type",
     "shadow-open",
+    "env",
   ]);
 
   async connectedCallback() {
     const path = this.getAttribute("path");
     const mode = this.hasAttribute("shadow-open") ? "open" : "closed";
     const componentVersionRange = this.getAttribute("version");
+    const useLocalVersion = this.getAttribute("env")
+      ?.toLowerCase()
+      .startsWith("d");
 
     if (!path)
       throw new Error(
@@ -29,19 +33,18 @@ class FTCustomCodeComponent extends HTMLElement {
       .split("/")
       .reverse();
 
-    const source =
-      !componentOrg || componentRepo === "ccc-sdk"
-        ? `http://localhost:5173/src/${componentName}/index.jsx`
-        : // @TODO create component service -- this URL may change!!!
-          `https://www.ft.com/__component/${componentOrg}/${componentRepo}/${componentName}${
-            componentVersionRange ? `@${componentVersionRange}` : "@latest"
-          }`;
+    const source = useLocalVersion
+      ? `http://localhost:5173/src/${componentName}/index.jsx`
+      : // @TODO create component service -- this URL may change!!!
+        `https://www.ft.com/__component/${componentOrg}/${componentRepo}/${componentName}${
+          componentVersionRange ? `@${componentVersionRange}` : "@latest"
+        }`;
     try {
       const App = await import(
         /* webpackIgnore: true */ source /* @vite-ignore */
       );
 
-      const data = JSON.parse(this.getAttribute("data-component-props") || "");
+      const data = JSON.parse(this.getAttribute("data-component-props")!);
 
       const extraProps = Object.fromEntries(
         [...this.attributes]