@financial-times/custom-code-component 0.0.1

package/.circleci/config.yml

@@ -0,0 +1,44 @@
+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

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

package/.eslintrc.cjs

@@ -0,0 +1,23 @@
+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

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

package/README.md

@@ -0,0 +1,61 @@
+# custom-code-component (`<custom-code-component>`)
+## Web component custom element for instantiating Visual & Data Journalism team projects
+
+## Usage:
+
+Instantiate the web component and pass it a URL to a bundled component you wish to render into the component root.
+
+#### example.jsx
+
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import css from './Component.css?inline';
+
+const App = (props) => <div>{JSON.stringify(props)}</div>;
+
+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>
+  );
+};
+
+```
+
+#### index.html
+```html
+<script src="custom-code-component.js" type="module"></script>
+
+<custom-code-component path="ft-interactive/test-project/test-component" version="^1" data-component-props="{}" data-asset-type="custom-code-component">
+  <img alt="test component" src="https://ig.ft.com/components/ft-interactive/test-project/test-component@^1.png">
+</custom-code-component>
+```
+
+## Attributes
+* `path` (string)
+  * Component name in the format `[org]/[repo]/[component]`.
+    * If `[org]` is `ccc-sdk` or ommitted, component will be loaded from Vite local dev server (127.0.0.1:5173).
+    * Otherwise, it will be loaded from the CCCCDN
+* `version` (string)
+  * [Semantic Versioning](https://semver.org) range for the component.
+* `data-component-props` (string)
+    * Pass stringified JSON to make it available to children as the `data` prop.
+* `iframe` (boolean)
+    * Render inside an iframe using `srcdoc` for extra sandboxing (default: false)
+* `shadow-open` (boolean)
+    * Sets the shadow root to either open or closed (default: false)
+* `data-asset-type="custom-code-component"`
+    * Part of spec.
+* <any other attributes>
+    * All remaining attributes get passed as an object named `props` to render().

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

@@ -0,0 +1,15 @@
+/**
+ * @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?: [string, string][];
+}

package/dist/custom-code-component.js

@@ -0,0 +1,52 @@
+class h extends HTMLElement {
+  constructor() {
+    super(...arguments), this.RESERVED_ATTRS = /* @__PURE__ */ new Set([
+      "iframe",
+      "path",
+      "version",
+      "data-component-props",
+      "data-asset-type",
+      "shadow-open"
+    ]);
+  }
+  async connectedCallback() {
+    const o = this.getAttribute("path"), n = this.hasAttribute("shadow-open") ? "open" : "closed", s = this.getAttribute("version");
+    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://127.0.0.1:5173/src/${c}/index.jsx` : (
+      // @TODO create component service -- this URL may change!!!
+      `https://ig.ft.com/component/${i}/${a}/${c}${s ? `@${s}` : "@latest"}`
+    );
+    try {
+      const e = await import(
+        /* webpackIgnore: true */
+        p
+        /* @vite-ignore */
+      ), m = 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")) {
+        const t = document.createElement("iframe");
+        t.addEventListener("load", () => {
+          e.default(
+            t.contentDocument,
+            { ...r, data: m },
+            ...this.children
+          );
+        }), this.attachShadow({ mode: n }).append(t);
+      } else {
+        const t = this.attachShadow({ mode: n });
+        e.default(t, { ...r, data: m }, ...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();
+export {
+  d as init
+};

package/index.html

@@ -0,0 +1,22 @@
+<!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/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@financial-times/custom-code-component",
+  "version": "0.0.1",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/custom-code-component.js",
+      "types": "./dist/custom-code-component.d.ts"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "prepublishOnly": "npm run build"
+  },
+  "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",
+    "vite": "^4.4.9",
+    "vite-plugin-dts": "^3.6.0"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "overrides": {
+    "react-dom16": {
+      "react": "react16"
+    },
+    "react16": {
+      "react-dom": "react-dom16"
+    }
+  }
+}

package/src/custom-code-component.ts

@@ -0,0 +1,88 @@
+/**
+ * @file
+ * Main component definition for g-react-loader
+ */
+
+import { ContentTree } from "@financial-times/content-tree";
+
+class FTCustomCodeComponent extends HTMLElement {
+  RESERVED_ATTRS = new Set([
+    "iframe",
+    "path",
+    "version",
+    "data-component-props",
+    "data-asset-type",
+    "shadow-open",
+  ]);
+
+  async connectedCallback() {
+    const path = this.getAttribute("path");
+    const mode = this.hasAttribute("shadow-open") ? "open" : "closed";
+    const componentVersionRange = this.getAttribute("version");
+
+    if (!path)
+      throw new Error(
+        "path attribute not specified in <custom-code-component>"
+      );
+
+    const [componentName, componentRepo, componentOrg] = path
+      .split("/")
+      .reverse();
+
+    const source =
+      !componentOrg || componentRepo === "ccc-sdk"
+        ? `http://127.0.0.1:5173/src/${componentName}/index.jsx`
+        : // @TODO create component service -- this URL may change!!!
+          `https://ig.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 extraProps = Object.fromEntries(
+        [...this.attributes]
+          .filter((attribute) => !this.RESERVED_ATTRS.has(attribute.name))
+          .map((attribute) => [attribute.name, attribute.value])
+      );
+
+      if (this.hasAttribute("iframe")) {
+        const mountPoint = document.createElement("iframe");
+
+        mountPoint.addEventListener("load", () => {
+          App.default(
+            mountPoint.contentDocument,
+            { ...extraProps, data },
+            ...this.children
+          );
+        });
+
+        this.attachShadow({ mode }).append(mountPoint);
+      } else {
+        const shadowRoot = this.attachShadow({ mode });
+
+        App.default(shadowRoot, { ...extraProps, data }, ...this.children);
+      }
+    } catch (e) {
+      console.info("<custom-code-component> caught: ", e);
+    }
+  }
+}
+
+export const init = () =>
+  customElements.define("custom-code-component", FTCustomCodeComponent);
+
+if (customElements && !customElements.get("custom-code-component")) init();
+
+export interface CustomCodeComponent extends ContentTree.Node {
+  type: "CustomCodeComponent";
+  path: string;
+  versionRange: string;
+  altText: string;
+  timestamp?: string;
+  fallbackImage?: ContentTree.Image;
+  attributes?: [string, string][];
+}

package/test/styles.css

@@ -0,0 +1,6 @@
+@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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,29 @@
+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

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

package/vite.config.js

@@ -0,0 +1,18 @@
+// 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()],
+});