@financial-times/custom-code-component 1.5.8 → 1.6.0

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 (3) hide show
  1. package/dist/custom-code-component.js +49 -37
  2. package/package.json +1 -1
  3. package/src/custom-code-component.ts +18 -3
package/dist/custom-code-component.js CHANGED
@@ -1,4 +1,4 @@
1
- class g extends HTMLElement {
1
+ class f extends HTMLElement {
2
2
  constructor() {
3
3
  super(...arguments), this.RESERVED_ATTRS = /* @__PURE__ */ new Set([
4
4
  "iframe",
@@ -8,56 +8,68 @@ class g extends HTMLElement {
8
8
  "data-asset-type",
9
9
  "shadow-open",
10
10
  "env"
11
- ]), this.unmount = () => {
11
+ ]), this.source = null, this.unmount = () => {
12
12
  }, this.channel = new MessageChannel();
13
13
  }
14
14
  static get observedAttributes() {
15
15
  return ["path", "version", "env", "data-component-props"];
16
16
  }
17
17
  async mount() {
18
- var r, h, m;
19
- const e = this.getAttribute("path"), a = this.getAttribute("version"), l = (r = this.getAttribute("env")) == null ? void 0 : r.toLowerCase().startsWith("d");
18
+ var h, u, m;
19
+ const e = this.getAttribute("path"), n = this.getAttribute("version"), i = (h = this.getAttribute("env")) == null ? void 0 : h.toLowerCase().startsWith("d");
20
20
  if (!e)
21
21
  throw new Error(
22
22
  "path attribute not specified in <custom-code-component>"
23
23
  );
24
- const [n, c, i] = e.split("/").reverse();
25
- if (!n || !c || !i)
26
- return;
27
- const f = l ? `http://localhost:5173/src/${n}/index.jsx` : `https://www.ft.com/__component/${i}/${c}${a ? `@${a}` : "@latest"}/${n}/${n}.js`;
28
- try {
29
- const s = await import(
30
- /* webpackIgnore: true */
31
- f
32
- /* @vite-ignore */
33
- ), p = JSON.parse(this.getAttribute("data-component-props")), u = Object.fromEntries(
34
- [...this.attributes].filter((t) => !this.RESERVED_ATTRS.has(t.name)).map((t) => [t.name, t.value])
35
- );
36
- if ((h = this.shadowRoot) == null || h.replaceChildren(), this.hasAttribute("iframe")) {
37
- const t = document.createElement("iframe");
38
- t.addEventListener("load", () => {
39
- const { unmount: o, onmessage: d } = s.default(
40
- t.contentDocument,
41
- { ...u, data: p, port: this.channel.port2 },
24
+ const [s, a, r] = e.split("/").reverse();
25
+ if (!(!s || !a || !r)) {
26
+ this.source = i ? `http://localhost:5173/src/${s}/index.jsx` : `https://www.ft.com/__component/${r}/${a}${n ? `@${n}` : "@latest"}/${s}/${s}.js`;
27
+ try {
28
+ const c = await import(
29
+ /* webpackIgnore: true */
30
+ this.source
31
+ /* @vite-ignore */
32
+ ), p = JSON.parse(this.getAttribute("data-component-props")), d = Object.fromEntries(
33
+ [...this.attributes].filter((t) => !this.RESERVED_ATTRS.has(t.name)).map((t) => [t.name, t.value])
34
+ );
35
+ if ((u = this.shadowRoot) == null || u.replaceChildren(), this.hasAttribute("iframe")) {
36
+ const t = document.createElement("iframe");
37
+ t.addEventListener("load", () => {
38
+ const { unmount: o, onmessage: l } = c.default(
39
+ t.contentDocument,
40
+ { ...d, data: p, port: this.channel.port2 },
41
+ ...this.children
42
+ ) || {};
43
+ o && (this.unmount = o), l && (this.onmessage = l);
44
+ }), (m = this.shadowRoot) == null || m.append(t);
45
+ } else {
46
+ const { unmount: t, onmessage: o } = await c.default(
47
+ this.shadowRoot,
48
+ { ...d, data: p, port: this.channel.port2 },
42
49
  ...this.children
43
50
  ) || {};
44
- o && (this.unmount = o), d && (this.onmessage = d);
45
- }), (m = this.shadowRoot) == null || m.append(t);
46
- } else {
47
- const { unmount: t, onmessage: o } = await s.default(
48
- this.shadowRoot,
49
- { ...u, data: p, port: this.channel.port2 },
50
- ...this.children
51
- ) || {};
52
- t && (this.unmount = t), o && (this.onmessage = o);
51
+ t && (this.unmount = t), o && (this.onmessage = o);
52
+ }
53
+ } catch (c) {
54
+ console.info(`<custom-code-component> uncaught error from ${e}`), console.error(c);
53
55
  }
54
- } catch (s) {
55
- console.info(`<custom-code-component> uncaught error from ${e}`), console.error(s);
56
56
  }
57
57
  }
58
58
  connectedCallback() {
59
59
  const e = this.getAttribute("shadow-open") == "false" ? "closed" : "open";
60
- this.attachShadow({ mode: e }), this.mount();
60
+ this.attachShadow({ mode: e }), this.mount().then(() => {
61
+ const n = this.getAttribute("path"), i = this.getAttribute("version");
62
+ this.dispatchEvent(
63
+ new CustomEvent("ccc-connected", {
64
+ bubbles: !0,
65
+ cancelable: !0,
66
+ detail: {
67
+ component: `${n}@${i}`,
68
+ source: this.source
69
+ }
70
+ })
71
+ );
72
+ });
61
73
  }
62
74
  attributeChangedCallback() {
63
75
  this.mount();
@@ -73,8 +85,8 @@ class g extends HTMLElement {
73
85
  this.channel.port1.postMessage(e);
74
86
  }
75
87
  }
76
- const w = () => customElements.define("custom-code-component", g);
77
- customElements && !customElements.get("custom-code-component") && w();
88
+ const g = () => customElements.define("custom-code-component", f);
89
+ customElements && !customElements.get("custom-code-component") && g();
78
90
  export {
79
- w as init
91
+ g as init
80
92
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/custom-code-component",
3
- "version": "1.5.8",
3
+ "version": "1.6.0",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  ".": {
package/src/custom-code-component.ts CHANGED
@@ -20,6 +20,8 @@ class FTCustomCodeComponent extends HTMLElement {
20
20
  return ["path", "version", "env", "data-component-props"];
21
21
  }
22
22
 
23
+ source: string | null = null;
24
+
23
25
  async mount() {
24
26
  const path = this.getAttribute("path");
25
27
  const componentVersionRange = this.getAttribute("version");
@@ -38,7 +40,7 @@ class FTCustomCodeComponent extends HTMLElement {
38
40
 
39
41
  if (!componentName || !componentRepo || !componentOrg) return;
40
42
 
41
- const source = useLocalVersion
43
+ this.source = useLocalVersion
42
44
  ? `http://localhost:5173/src/${componentName}/index.jsx`
43
45
  : `https://www.ft.com/__component/${componentOrg}/${componentRepo}${
44
46
  componentVersionRange ? `@${componentVersionRange}` : "@latest"
@@ -46,7 +48,7 @@ class FTCustomCodeComponent extends HTMLElement {
46
48
 
47
49
  try {
48
50
  const App = await import(
49
- /* webpackIgnore: true */ source /* @vite-ignore */
51
+ /* webpackIgnore: true */ this.source /* @vite-ignore */
50
52
  );
51
53
 
52
54
  const data = JSON.parse(this.getAttribute("data-component-props")!);
@@ -100,7 +102,20 @@ class FTCustomCodeComponent extends HTMLElement {
100
102
  this.getAttribute("shadow-open") == "false" ? "closed" : "open";
101
103
 
102
104
  this.attachShadow({ mode });
103
- this.mount();
105
+ this.mount().then(() => {
106
+ const path = this.getAttribute("path");
107
+ const componentVersionRange = this.getAttribute("version");
108
+ this.dispatchEvent(
109
+ new CustomEvent("ccc-connected", {
110
+ bubbles: true,
111
+ cancelable: true,
112
+ detail: {
113
+ component: `${path}@${componentVersionRange}`,
114
+ source: this.source,
115
+ },
116
+ })
117
+ );
118
+ });
104
119
  }
105
120
 
106
121
  attributeChangedCallback() {