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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/custom-code-component",
-  "version": "1.0.0",
+  "version": "1.0.4",
   "type": "module",
   "exports": {
     ".": {
@@ -11,14 +11,14 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "test": "echo \"No custom-code-component tests\" && exit 0"
   },
   "devDependencies": {
     "@financial-times/content-tree": "github:financial-times/content-tree",
     "@vitejs/plugin-react": "^4.0.4",
     "eslint": "^8.47.0",
     "eslint-plugin-react": "^7.33.1",
-    "prettier": "^3.0.1",
     "react-dom16": "npm:react-dom@^16.14.0",
     "react16": "npm:react@^16.14.0",
     "typescript": "^5.2.2",

package/src/custom-code-component.ts

@@ -1,6 +1,6 @@
 /**
  * @file
- * Main component definition for g-react-loader
+ * Main component definition for custom-code-component
  */
 
 import { ContentTree } from "@financial-times/content-tree";
@@ -39,7 +39,7 @@ class FTCustomCodeComponent extends HTMLElement {
       ? `http://localhost:5173/src/${componentName}/index.jsx`
       : `https://www.ft.com/__component/${componentOrg}/${componentRepo}${
           componentVersionRange ? `@${componentVersionRange}` : "@latest"
-        }/${componentName}/${componentName}`;
+        }/${componentName}/${componentName}.js`;
 
     try {
       const App = await import(
@@ -72,14 +72,16 @@ class FTCustomCodeComponent extends HTMLElement {
         App.default(shadowRoot, { ...extraProps, data }, ...this.children);
       }
     } catch (e) {
-      console.info("<custom-code-component> caught: ", e);
+      console.info(`<custom-code-component> uncaught error from ${path}: `, e);
     }
   }
 }
 
+// Register the custom element
 export const init = () =>
   customElements.define("custom-code-component", FTCustomCodeComponent);
 
+// Allows module to be imported multiple times but custom element only registered once
 if (customElements && !customElements.get("custom-code-component")) init();
 
 export interface CustomCodeComponent extends ContentTree.Node {
@@ -87,8 +89,12 @@ export interface CustomCodeComponent extends ContentTree.Node {
   path: string;
   versionRange: string;
   altText: string;
-  timestamp?: string;
+  lastModified: string;
   fallbackImage?: ContentTree.Image;
-  attributes?: Array<[string, string]>;
-  children?: Array<ContentTree.Node | CustomCodeComponent>;
+  displayFallbackText: boolean;
+  layout: "in-line" | "mid-grid" | "full-grid" | "full-bleed";
+  /* prettier-ignore */
+  attributes: { 
+    [key: string]: string | boolean | undefined;
+  } | { children?: CustomCodeComponent | Array<CustomCodeComponent> };
 }

package/src/custom-code-component.xsd

@@ -0,0 +1,67 @@
+<?xml version="1.0"?>
+
+<xs:schema
+    xmlns:xs="http://www.w3.org/2001/XMLSchema"
+    xmlns:sch="http://purl.oclc.org/dsdl/schematron"
+    >
+  <xs:complexType name="CustomCodeComponent">
+    <xs:sequence minOccurs="0">
+      <xs:element
+          name="custom-code-component"
+          type="CustomCodeComponent"
+          maxOccurs="unbounded"
+          />
+    </xs:sequence>
+    <xs:attribute
+        name="path"
+        type="xs:anyURI"
+        use="required"
+        />
+    <xs:attribute
+        name="versionRange"
+        type="xs:string"
+        use="required"
+        />
+    <xs:attribute
+        name="altText"
+        type="xs:string"
+        use="required"
+        />
+    <xs:attribute
+        name="lastModifiedTimestamp"
+        type="xs:string"
+        use="required"
+        />
+    <xs:attribute
+        name="fallbackImageURL"
+        type="xs:string"
+        />
+    <xs:attribute
+        name="displayFallbackText"
+        type="xs:boolean"
+        default="false"
+        />
+    <xs:attribute
+        name="layout"
+        default="in-line"
+        >
+      <xs:simpleType>
+        <xs:restriction base="xs:string">
+          <xs:enumeration value="in-line" />
+          <xs:enumeration value="mid-grid" />
+          <xs:enumeration value="full-grid" />
+          <xs:enumeration value="full-bleed" />
+        </xs:restriction>
+      </xs:simpleType>
+    </xs:attribute>
+    <xs:attribute
+        name="attributes"
+        type="xs:string"
+        default="{}"
+        />
+  </xs:complexType>
+  <xs:element
+      name="custom-code-component"
+      type="CustomCodeComponent"
+      />
+</xs:schema>

package/test/fixture.xml

@@ -0,0 +1,21 @@
+<?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/.circleci/config.yml

@@ -1,44 +0,0 @@
-version: 2.1
-
-orbs:
-  node: circleci/node@5.1.0
-  doppler-circleci: ft-circleci-orbs/doppler-circleci@1.3
-
-references:
-  default_container_config: &default_container_config
-    executor:
-      name: node/default
-      tag: 'lts'
-
-  only_version_tags: &only_version_tags
-    tags:
-      only: /^v.*/
-    branches:
-      ignore: /.*/
-
-jobs:
-  build:
-    <<: *default_container_config
-    steps:
-      - checkout
-      - doppler-circleci/install
-      - doppler-circleci/load_secrets:
-          doppler_token: DOPPLER_TOKEN_VS_COMPONENTS
-      - run:
-          name: Install dependencies
-          command: npm install
-      - run:
-          name: Publish package
-          command: |
-            npm set @Financial-Times:registry=https://npm.pkg.github.com/
-            npm set //npm.pkg.github.com/:_authToken=${GPR_WRITE_AUTH_TOKEN}
-            npm publish
-
-workflows:
-  build-and-release:
-    jobs:
-      - build:
-          context:
-            - djd-starter-kit-s3-deployment # context is named the same in both orgs
-          filters:
-            <<: *only_version_tags

package/.github/CODEOWNERS

@@ -1 +0,0 @@
-* @Financial-Times/visual-data-journalism-admins

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

@@ -1,16 +0,0 @@
-/**
- * @file
- * Main component definition for g-react-loader
- */
-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;
-    timestamp?: string;
-    fallbackImage?: ContentTree.Image;
-    attributes?: Array<[string, string]>;
-    children?: Array<ContentTree.Node | CustomCodeComponent>;
-}

package/dist/custom-code-component.js

@@ -1,54 +0,0 @@
-class u extends HTMLElement {
-  constructor() {
-    super(...arguments), this.RESERVED_ATTRS = /* @__PURE__ */ new Set([
-      "iframe",
-      "path",
-      "version",
-      "data-component-props",
-      "data-asset-type",
-      "shadow-open",
-      "env"
-    ]);
-  }
-  async connectedCallback() {
-    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 [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 o = await import(
-        /* webpackIgnore: true */
-        d
-        /* @vite-ignore */
-      ), 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", () => {
-          o.default(
-            t.contentDocument,
-            { ...p, data: m },
-            ...this.children
-          );
-        }), this.attachShadow({ mode: s }).append(t);
-      } else {
-        const t = this.attachShadow({ mode: s });
-        o.default(t, { ...p, data: m }, ...this.children);
-      }
-    } catch (o) {
-      console.info("<custom-code-component> caught: ", o);
-    }
-  }
-}
-const l = () => customElements.define("custom-code-component", u);
-customElements && !customElements.get("custom-code-component") && l();
-export {
-  l as init
-};