npm - @financial-times/custom-code-component - Versions diffs - 1.0.6 → 1.0.7 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/custom-code-component.d.ts +21 -0
package/dist/custom-code-component.js +63 -0
package/package.json +6 -2
package/.eslintignore +0 -1
package/.eslintrc.cjs +0 -23
package/index.html +0 -22
package/test/fixture.xml +0 -21
package/test/styles.css +0 -6
package/test/test16.jsx +0 -31
package/test/test18.jsx +0 -29
package/test.json +0 -1
package/vite.config.js +0 -18

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

@@ -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 ADDED Viewed

@@ -0,0 +1,63 @@
+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"
+    ]);
+  }
+  async connectedCallback() {
+    var m;
+    const e = this.getAttribute("path"), c = this.hasAttribute("shadow-open") ? "open" : "closed", a = this.getAttribute("version"), d = (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 u = d ? `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 */
+        u
+        /* @vite-ignore */
+      ), p = JSON.parse(this.getAttribute("data-component-props")), h = 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,
+            { ...h, data: p },
+            ...this.children
+          );
+          o && (this.disconnectedCallback = o);
+        }), this.attachShadow({ mode: c }).append(t);
+      } else {
+        const t = this.attachShadow({ mode: c }), o = await s.default(
+          t,
+          { ...h, data: p },
+          ...this.children
+        );
+        o && (this.disconnectedCallback = 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`);
+  }
+}
+const f = () => customElements.define("custom-code-component", l);
+customElements && !customElements.get("custom-code-component") && f();
+export {
+  f as init
+};

package/package.json CHANGED Viewed

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

package/.eslintignore DELETED Viewed

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

package/.eslintrc.cjs DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

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

package/vite.config.js DELETED Viewed

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