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

package/dist/custom-code-component.d.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";
 export declare const init: () => void;
@@ -9,7 +9,13 @@ export interface CustomCodeComponent extends ContentTree.Node {
     path: string;
     versionRange: string;
     altText: string;
-    timestamp?: string;
+    lastModified: string;
     fallbackImage?: ContentTree.Image;
-    attributes?: [string, string][];
+    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

@@ -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 i;
+    const n = this.getAttribute("path"), s = this.hasAttribute("shadow-open") ? "open" : "closed", c = this.getAttribute("version"), h = (i = this.getAttribute("env")) == null ? void 0 : i.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, r] = n.split("/").reverse();
+    if (!e || !a || !r)
+      return;
+    const d = h ? `http://localhost:5173/src/${e}/index.jsx` : `https://www.ft.com/__component/${r}/${a}${c ? `@${c}` : "@latest"}/${e}/${e}.js`;
     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> uncaught error from ${n}: `, o);
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/custom-code-component",
-  "version": "0.0.9",
+  "version": "1.0.1",
   "type": "module",
   "exports": {
     ".": {
@@ -18,7 +18,6 @@
     "@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",
@@ -29,6 +28,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
+  "files": [
+    "dist",
+    "src"
+  ],
   "overrides": {
     "react-dom16": {
       "react": "react16"

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";
@@ -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}.js`;
+
     try {
       const App = await import(
         /* webpackIgnore: true */ source /* @vite-ignore */
@@ -69,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 {
@@ -84,7 +89,12 @@ export interface CustomCodeComponent extends ContentTree.Node {
   path: string;
   versionRange: string;
   altText: string;
-  timestamp?: string;
+  lastModified: string;
   fallbackImage?: ContentTree.Image;
-  attributes?: [string, string][];
+  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/.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/.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/.github/CODEOWNERS

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

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/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()],
-});