@financial-times/custom-code-component 1.0.1 → 1.0.5
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.
- package/.eslintignore +1 -0
- package/.eslintrc.cjs +23 -0
- package/index.html +22 -0
- package/package.json +3 -6
- package/test/fixture.xml +21 -0
- package/test/styles.css +6 -0
- package/test/test16.jsx +31 -0
- package/test/test18.jsx +29 -0
- package/test.json +1 -0
- package/vite.config.js +18 -0
- package/dist/custom-code-component.d.ts +0 -21
- package/dist/custom-code-component.js +0 -54
package/.eslintignore
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
dist
|
package/.eslintrc.cjs
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
env: {
|
|
3
|
+
browser: true,
|
|
4
|
+
es2021: true,
|
|
5
|
+
},
|
|
6
|
+
extends: ["eslint:recommended", "plugin:react/recommended"],
|
|
7
|
+
overrides: [
|
|
8
|
+
{
|
|
9
|
+
env: {
|
|
10
|
+
node: true,
|
|
11
|
+
},
|
|
12
|
+
files: [".eslintrc.{js,cjs}"],
|
|
13
|
+
parserOptions: {
|
|
14
|
+
sourceType: "script",
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
],
|
|
18
|
+
parserOptions: {
|
|
19
|
+
ecmaVersion: "latest",
|
|
20
|
+
sourceType: "module",
|
|
21
|
+
},
|
|
22
|
+
rules: {},
|
|
23
|
+
};
|
package/index.html
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>custom-code-component loader</title>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<custom-code-component
|
|
10
|
+
src="../test/test16.jsx"
|
|
11
|
+
data='{"jsonWorks": true}'
|
|
12
|
+
extra="test 1"
|
|
13
|
+
></custom-code-component>
|
|
14
|
+
<custom-code-component
|
|
15
|
+
src="../test/test18.jsx"
|
|
16
|
+
data="./test.json"
|
|
17
|
+
extra="test 2"
|
|
18
|
+
></custom-code-component>
|
|
19
|
+
|
|
20
|
+
<script type="module" src="./src/custom-code-component.js"></script>
|
|
21
|
+
</body>
|
|
22
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@financial-times/custom-code-component",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -11,7 +11,8 @@
|
|
|
11
11
|
"scripts": {
|
|
12
12
|
"dev": "vite",
|
|
13
13
|
"build": "vite build",
|
|
14
|
-
"prepublishOnly": "npm run build"
|
|
14
|
+
"prepublishOnly": "npm run build",
|
|
15
|
+
"test": "echo \"No custom-code-component tests\" && exit 0"
|
|
15
16
|
},
|
|
16
17
|
"devDependencies": {
|
|
17
18
|
"@financial-times/content-tree": "github:financial-times/content-tree",
|
|
@@ -28,10 +29,6 @@
|
|
|
28
29
|
"react": "^18.2.0",
|
|
29
30
|
"react-dom": "^18.2.0"
|
|
30
31
|
},
|
|
31
|
-
"files": [
|
|
32
|
-
"dist",
|
|
33
|
-
"src"
|
|
34
|
-
],
|
|
35
32
|
"overrides": {
|
|
36
33
|
"react-dom16": {
|
|
37
34
|
"react": "react16"
|
package/test/fixture.xml
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<?xml-model href="../src/custom-code-component.xsd"?>
|
|
2
|
+
|
|
3
|
+
<custom-code-component
|
|
4
|
+
path="Financial-Times/awesome-component"
|
|
5
|
+
versionRange="^0.3.5"
|
|
6
|
+
altText="awesome component"
|
|
7
|
+
lastModifiedTimestamp="2024-01-26T03:25Z"
|
|
8
|
+
fallbackImageURL="https://picsum.photos/200/300"
|
|
9
|
+
layout="in-line"
|
|
10
|
+
attributes='{"test": "data"}'
|
|
11
|
+
>
|
|
12
|
+
<custom-code-component
|
|
13
|
+
path="Financial-Times/awesome-child-component"
|
|
14
|
+
versionRange="^0.3.5"
|
|
15
|
+
altText="awesome child component"
|
|
16
|
+
lastModifiedTimestamp="2024-01-26T03:25Z"
|
|
17
|
+
fallbackImageURL="https://picsum.photos/100/100"
|
|
18
|
+
displayFallbackText="true"
|
|
19
|
+
attributes='{"test2": "data2"}'
|
|
20
|
+
/>
|
|
21
|
+
</custom-code-component>
|
package/test/styles.css
ADDED
package/test/test16.jsx
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from "react16";
|
|
2
|
+
import ReactDOM from "react-dom16";
|
|
3
|
+
import css from "./styles.css?inline";
|
|
4
|
+
|
|
5
|
+
// eslint-disable-next-line react/prop-types
|
|
6
|
+
const App = ({ children, ...props }) => (
|
|
7
|
+
<div>
|
|
8
|
+
<h1>React 16 component</h1>
|
|
9
|
+
{JSON.stringify(props)}
|
|
10
|
+
{children}
|
|
11
|
+
</div>
|
|
12
|
+
);
|
|
13
|
+
|
|
14
|
+
export default async (shadowRoot, props, ...children) => {
|
|
15
|
+
const style = document.createElement("style");
|
|
16
|
+
const mountPoint = document.createElement("div");
|
|
17
|
+
|
|
18
|
+
style.innerHTML = css;
|
|
19
|
+
mountPoint.id = "component-root";
|
|
20
|
+
|
|
21
|
+
shadowRoot.appendChild(style);
|
|
22
|
+
shadowRoot.appendChild(mountPoint);
|
|
23
|
+
|
|
24
|
+
// eslint-disable-next-line react/no-deprecated
|
|
25
|
+
ReactDOM.render(
|
|
26
|
+
<React.StrictMode>
|
|
27
|
+
<App {...props}>{children}</App>
|
|
28
|
+
</React.StrictMode>,
|
|
29
|
+
mountPoint
|
|
30
|
+
);
|
|
31
|
+
};
|
package/test/test18.jsx
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import ReactDOM from "react-dom/client";
|
|
3
|
+
import css from "./styles.css?inline";
|
|
4
|
+
|
|
5
|
+
// eslint-disable-next-line react/prop-types
|
|
6
|
+
const App = ({ children, ...props }) => (
|
|
7
|
+
<>
|
|
8
|
+
<h1>React 18 component</h1>
|
|
9
|
+
{JSON.stringify(props)}
|
|
10
|
+
{children}
|
|
11
|
+
</>
|
|
12
|
+
);
|
|
13
|
+
|
|
14
|
+
export default (shadowRoot, props, ...children) => {
|
|
15
|
+
const style = document.createElement("style");
|
|
16
|
+
const mountPoint = document.createElement("div");
|
|
17
|
+
|
|
18
|
+
style.innerHTML = css;
|
|
19
|
+
mountPoint.id = "component-root";
|
|
20
|
+
|
|
21
|
+
shadowRoot.appendChild(style);
|
|
22
|
+
shadowRoot.appendChild(mountPoint);
|
|
23
|
+
|
|
24
|
+
ReactDOM.createRoot(mountPoint).render(
|
|
25
|
+
<React.StrictMode>
|
|
26
|
+
<App {...props}>{children}</App>
|
|
27
|
+
</React.StrictMode>
|
|
28
|
+
);
|
|
29
|
+
};
|
package/test.json
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{ "hasJSON": true }
|
package/vite.config.js
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
// Vite.config.js
|
|
2
|
+
import { defineConfig } from "vite";
|
|
3
|
+
import react from "@vitejs/plugin-react";
|
|
4
|
+
import { basename } from "path";
|
|
5
|
+
import dts from "vite-plugin-dts";
|
|
6
|
+
|
|
7
|
+
export default defineConfig({
|
|
8
|
+
build: {
|
|
9
|
+
lib: {
|
|
10
|
+
// Could also be a dictionary or array of multiple entry points
|
|
11
|
+
entry: "./src/custom-code-component.ts",
|
|
12
|
+
formats: ["es"],
|
|
13
|
+
fileName: (format, entry) => `${basename(entry)}.js`,
|
|
14
|
+
name: "CustomCodeComponent",
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
plugins: [react(), dts()],
|
|
18
|
+
});
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @file
|
|
3
|
-
* Main component definition for custom-code-component
|
|
4
|
-
*/
|
|
5
|
-
import { ContentTree } from "@financial-times/content-tree";
|
|
6
|
-
export declare const init: () => void;
|
|
7
|
-
export interface CustomCodeComponent extends ContentTree.Node {
|
|
8
|
-
type: "CustomCodeComponent";
|
|
9
|
-
path: string;
|
|
10
|
-
versionRange: string;
|
|
11
|
-
altText: string;
|
|
12
|
-
lastModified: string;
|
|
13
|
-
fallbackImage?: ContentTree.Image;
|
|
14
|
-
displayFallbackText: boolean;
|
|
15
|
-
layout: "in-line" | "mid-grid" | "full-grid" | "full-bleed";
|
|
16
|
-
attributes: {
|
|
17
|
-
[key: string]: string | boolean | undefined;
|
|
18
|
-
} | {
|
|
19
|
-
children?: CustomCodeComponent | Array<CustomCodeComponent>;
|
|
20
|
-
};
|
|
21
|
-
}
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
class u extends HTMLElement {
|
|
2
|
-
constructor() {
|
|
3
|
-
super(...arguments), this.RESERVED_ATTRS = /* @__PURE__ */ new Set([
|
|
4
|
-
"iframe",
|
|
5
|
-
"path",
|
|
6
|
-
"version",
|
|
7
|
-
"data-component-props",
|
|
8
|
-
"data-asset-type",
|
|
9
|
-
"shadow-open",
|
|
10
|
-
"env"
|
|
11
|
-
]);
|
|
12
|
-
}
|
|
13
|
-
async connectedCallback() {
|
|
14
|
-
var i;
|
|
15
|
-
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");
|
|
16
|
-
if (!n)
|
|
17
|
-
throw new Error(
|
|
18
|
-
"path attribute not specified in <custom-code-component>"
|
|
19
|
-
);
|
|
20
|
-
const [e, a, r] = n.split("/").reverse();
|
|
21
|
-
if (!e || !a || !r)
|
|
22
|
-
return;
|
|
23
|
-
const d = h ? `http://localhost:5173/src/${e}/index.jsx` : `https://www.ft.com/__component/${r}/${a}${c ? `@${c}` : "@latest"}/${e}/${e}.js`;
|
|
24
|
-
try {
|
|
25
|
-
const o = await import(
|
|
26
|
-
/* webpackIgnore: true */
|
|
27
|
-
d
|
|
28
|
-
/* @vite-ignore */
|
|
29
|
-
), m = JSON.parse(this.getAttribute("data-component-props")), p = Object.fromEntries(
|
|
30
|
-
[...this.attributes].filter((t) => !this.RESERVED_ATTRS.has(t.name)).map((t) => [t.name, t.value])
|
|
31
|
-
);
|
|
32
|
-
if (this.hasAttribute("iframe")) {
|
|
33
|
-
const t = document.createElement("iframe");
|
|
34
|
-
t.addEventListener("load", () => {
|
|
35
|
-
o.default(
|
|
36
|
-
t.contentDocument,
|
|
37
|
-
{ ...p, data: m },
|
|
38
|
-
...this.children
|
|
39
|
-
);
|
|
40
|
-
}), this.attachShadow({ mode: s }).append(t);
|
|
41
|
-
} else {
|
|
42
|
-
const t = this.attachShadow({ mode: s });
|
|
43
|
-
o.default(t, { ...p, data: m }, ...this.children);
|
|
44
|
-
}
|
|
45
|
-
} catch (o) {
|
|
46
|
-
console.info(`<custom-code-component> uncaught error from ${n}: `, o);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
const l = () => customElements.define("custom-code-component", u);
|
|
51
|
-
customElements && !customElements.get("custom-code-component") && l();
|
|
52
|
-
export {
|
|
53
|
-
l as init
|
|
54
|
-
};
|