@financial-times/custom-code-component 1.0.6 → 1.1.0

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

@@ -0,0 +1,21 @@
+/**
+ * @file
+ * Main component definition for custom-code-component
+ */
+import { ContentTree } from "@financial-times/content-tree";
+export declare const init: () => void;
+export interface CustomCodeComponent extends ContentTree.Node {
+    type: "CustomCodeComponent";
+    path: string;
+    versionRange: string;
+    altText: string;
+    lastModified: string;
+    fallbackImage?: ContentTree.Image;
+    displayFallbackText: boolean;
+    layout: "in-line" | "mid-grid" | "full-grid" | "full-bleed";
+    attributes: {
+        [key: string]: string | boolean | undefined;
+    } | {
+        children?: CustomCodeComponent | Array<CustomCodeComponent>;
+    };
+}

package/dist/custom-code-component.js

@@ -0,0 +1,64 @@
+class l extends HTMLElement {
+  constructor() {
+    super(...arguments), this.RESERVED_ATTRS = /* @__PURE__ */ new Set([
+      "iframe",
+      "path",
+      "version",
+      "data-component-props",
+      "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"), p = (m = this.getAttribute("env")) == null ? void 0 : m.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)
+      return;
+    const d = p ? `http://localhost:5173/src/${n}/index.jsx` : `https://www.ft.com/__component/${r}/${i}${a ? `@${a}` : "@latest"}/${n}/${n}.js`;
+    try {
+      const s = await import(
+        /* webpackIgnore: true */
+        d
+        /* @vite-ignore */
+      ), 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")) {
+        const t = document.createElement("iframe");
+        t.addEventListener("load", () => {
+          const o = s.default(
+            t.contentDocument,
+            { ...u, data: h },
+            ...this.children
+          );
+          o && (this.unmount = o);
+        }), this.attachShadow({ mode: c }).append(t);
+      } else {
+        const t = this.attachShadow({ mode: c }), o = await s.default(
+          t,
+          { ...u, data: h },
+          ...this.children
+        );
+        o && (this.unmount = o);
+      }
+    } catch (s) {
+      console.info(`<custom-code-component> uncaught error from ${e}: `, s);
+    }
+  }
+  async disconnectedCallback() {
+    const e = this.getAttribute("path");
+    console.info(`<custom-code-component:${e}> disconnected`), this.unmount();
+  }
+}
+const f = () => customElements.define("custom-code-component", l);
+customElements && !customElements.get("custom-code-component") && f();
+export {
+  f as init
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/custom-code-component",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "type": "module",
   "exports": {
     ".": {
@@ -36,5 +36,9 @@
     "react16": {
       "react-dom": "react-dom16"
     }
-  }
+  },
+  "files": [
+    "dist",
+    "src"
+  ]
 }

package/src/custom-code-component.ts

@@ -16,6 +16,8 @@ class FTCustomCodeComponent extends HTMLElement {
     "env",
   ]);
 
+  unmount = () => {};
+
   async connectedCallback() {
     const path = this.getAttribute("path");
     const mode = this.hasAttribute("shadow-open") ? "open" : "closed";
@@ -64,7 +66,7 @@ class FTCustomCodeComponent extends HTMLElement {
             ...this.children
           );
 
-          if (unmount) this.disconnectedCallback = unmount;
+          if (unmount) this.unmount = unmount;
         });
 
         this.attachShadow({ mode }).append(mountPoint);
@@ -77,7 +79,7 @@ class FTCustomCodeComponent extends HTMLElement {
           ...this.children
         );
 
-        if (unmount) this.disconnectedCallback = unmount;
+        if (unmount) this.unmount = unmount;
       }
     } catch (e) {
       console.info(`<custom-code-component> uncaught error from ${path}: `, e);
@@ -87,6 +89,7 @@ class FTCustomCodeComponent extends HTMLElement {
   async disconnectedCallback() {
     const path = this.getAttribute("path");
     console.info(`<custom-code-component:${path}> disconnected`);
+    this.unmount();
   }
 }
 

package/.eslintignore

@@ -1 +0,0 @@
-dist

package/.eslintrc.cjs

@@ -1,23 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: ["eslint:recommended", "plugin:react/recommended"],
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: [".eslintrc.{js,cjs}"],
-      parserOptions: {
-        sourceType: "script",
-      },
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-  },
-  rules: {},
-};

package/index.html

@@ -1,22 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>custom-code-component loader</title>
-  </head>
-  <body>
-    <custom-code-component
-      src="../test/test16.jsx"
-      data='{"jsonWorks": true}'
-      extra="test 1"
-    ></custom-code-component>
-    <custom-code-component
-      src="../test/test18.jsx"
-      data="./test.json"
-      extra="test 2"
-    ></custom-code-component>
-
-    <script type="module" src="./src/custom-code-component.js"></script>
-  </body>
-</html>

package/test/fixture.xml

@@ -1,21 +0,0 @@
-<?xml-model href="../src/custom-code-component.xsd"?>
-
-<custom-code-component
-    path="Financial-Times/awesome-component"
-    versionRange="^0.3.5"
-    altText="awesome component"
-    lastModifiedTimestamp="2024-01-26T03:25Z"
-    fallbackImageURL="https://picsum.photos/200/300"
-    layout="in-line"
-    attributes='{"test": "data"}'
-    >
-  <custom-code-component
-      path="Financial-Times/awesome-child-component"
-      versionRange="^0.3.5"
-      altText="awesome child component"
-      lastModifiedTimestamp="2024-01-26T03:25Z"
-      fallbackImageURL="https://picsum.photos/100/100"
-      displayFallbackText="true"
-      attributes='{"test2": "data2"}'
-      />
-</custom-code-component>

package/test/styles.css

@@ -1,6 +0,0 @@
-@import url("https://www.ft.com/__origami/service/build/v3/bundles/css?components=o-fonts@^5&brand=core&system_code=djd-projects");
-
-:host {
-    background: 'transparent';
-    font-family: 'Metric', 'MetricWeb';
-}

package/test/test16.jsx

@@ -1,31 +0,0 @@
-import React from "react16";
-import ReactDOM from "react-dom16";
-import css from "./styles.css?inline";
-
-// eslint-disable-next-line react/prop-types
-const App = ({ children, ...props }) => (
-  <div>
-    <h1>React 16 component</h1>
-    {JSON.stringify(props)}
-    {children}
-  </div>
-);
-
-export default async (shadowRoot, props, ...children) => {
-  const style = document.createElement("style");
-  const mountPoint = document.createElement("div");
-
-  style.innerHTML = css;
-  mountPoint.id = "component-root";
-
-  shadowRoot.appendChild(style);
-  shadowRoot.appendChild(mountPoint);
-
-  // eslint-disable-next-line react/no-deprecated
-  ReactDOM.render(
-    <React.StrictMode>
-      <App {...props}>{children}</App>
-    </React.StrictMode>,
-    mountPoint
-  );
-};

package/test/test18.jsx

@@ -1,29 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import css from "./styles.css?inline";
-
-// eslint-disable-next-line react/prop-types
-const App = ({ children, ...props }) => (
-  <>
-    <h1>React 18 component</h1>
-    {JSON.stringify(props)}
-    {children}
-  </>
-);
-
-export default (shadowRoot, props, ...children) => {
-  const style = document.createElement("style");
-  const mountPoint = document.createElement("div");
-
-  style.innerHTML = css;
-  mountPoint.id = "component-root";
-
-  shadowRoot.appendChild(style);
-  shadowRoot.appendChild(mountPoint);
-
-  ReactDOM.createRoot(mountPoint).render(
-    <React.StrictMode>
-      <App {...props}>{children}</App>
-    </React.StrictMode>
-  );
-};

package/test.json

@@ -1 +0,0 @@
-{ "hasJSON": true }

package/vite.config.js

@@ -1,18 +0,0 @@
-// Vite.config.js
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import { basename } from "path";
-import dts from "vite-plugin-dts";
-
-export default defineConfig({
-  build: {
-    lib: {
-      // Could also be a dictionary or array of multiple entry points
-      entry: "./src/custom-code-component.ts",
-      formats: ["es"],
-      fileName: (format, entry) => `${basename(entry)}.js`,
-      name: "CustomCodeComponent",
-    },
-  },
-  plugins: [react(), dts()],
-});