@financial-times/custom-code-component 2.0.1-alpha.11 → 2.0.1-alpha.6
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/dist/{CustomCodeComponent.js → custom-code-component.js} +156 -157
- package/dist/webcomponent/src/custom-code-component.d.ts +55 -0
- package/dist/webcomponent/src/environment.d.ts +15 -0
- package/dist/webcomponent/src/errors.d.ts +27 -0
- package/dist/webcomponent/src/events.d.ts +10 -0
- package/dist/webcomponent/src/get-trace.d.ts +8 -0
- package/dist/{CustomCodeComponent.d.ts → webcomponent/src/index.d.ts} +1 -3
- package/dist/webcomponent/src/logger.d.ts +20 -0
- package/dist/webcomponent/src/path.d.ts +23 -0
- package/dist/webcomponent/src/tracking.d.ts +32 -0
- package/dist/webcomponent/src/util.d.ts +33 -0
- package/dist/webcomponent/test/environment.test.d.ts +1 -0
- package/dist/webcomponent/test/error-handling.test.d.ts +8 -0
- package/dist/webcomponent/test/example.d.ts +11 -0
- package/dist/webcomponent/test/generate-readable-stream.d.ts +8 -0
- package/dist/webcomponent/test/path.test.d.ts +5 -0
- package/dist/webcomponent/test/ssr.test.d.ts +4 -0
- package/dist/webcomponent/test/utils.test.d.ts +1 -0
- package/dist/webcomponent/vite.config.d.ts +2 -0
- package/dist/webcomponent/vitest.config.d.ts +2 -0
- package/package.json +5 -5
- package/src/custom-code-component.ts +66 -72
- package/src/environment.ts +3 -3
- package/dist/CustomCodeComponent.js.map +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
function
|
|
2
|
-
this.listenerMap = [{}, {}], o && this.root(o), this.handle =
|
|
1
|
+
function m(o) {
|
|
2
|
+
this.listenerMap = [{}, {}], o && this.root(o), this.handle = m.prototype.handle.bind(this), this._removedListeners = [];
|
|
3
3
|
}
|
|
4
|
-
|
|
4
|
+
m.prototype.root = function(o) {
|
|
5
5
|
const t = this.listenerMap;
|
|
6
6
|
let e;
|
|
7
7
|
if (this.rootElement) {
|
|
@@ -19,24 +19,24 @@ l.prototype.root = function(o) {
|
|
|
19
19
|
t[0].hasOwnProperty(e) && this.rootElement.addEventListener(e, this.handle, !1);
|
|
20
20
|
return this;
|
|
21
21
|
};
|
|
22
|
-
|
|
22
|
+
m.prototype.captureForType = function(o) {
|
|
23
23
|
return ["blur", "error", "focus", "load", "resize", "scroll"].indexOf(o) !== -1;
|
|
24
24
|
};
|
|
25
|
-
|
|
26
|
-
let
|
|
25
|
+
m.prototype.on = function(o, t, e, n) {
|
|
26
|
+
let r, s, i, c;
|
|
27
27
|
if (!o)
|
|
28
28
|
throw new TypeError("Invalid event type: " + o);
|
|
29
29
|
if (typeof t == "function" && (n = e, e = t, t = null), n === void 0 && (n = this.captureForType(o)), typeof e != "function")
|
|
30
30
|
throw new TypeError("Handler must be a type of Function");
|
|
31
|
-
return
|
|
31
|
+
return r = this.rootElement, s = this.listenerMap[n ? 1 : 0], s[o] || (r && r.addEventListener(o, this.handle, n), s[o] = []), t ? /^[a-z]+$/i.test(t) ? (c = t, i = T) : /^#[a-z0-9\-_]+$/i.test(t) ? (c = t.slice(1), i = $) : (c = t, i = Element.prototype.matches) : (c = null, i = S.bind(this)), s[o].push({
|
|
32
32
|
selector: t,
|
|
33
33
|
handler: e,
|
|
34
34
|
matcher: i,
|
|
35
35
|
matcherParam: c
|
|
36
36
|
}), this;
|
|
37
37
|
};
|
|
38
|
-
|
|
39
|
-
let
|
|
38
|
+
m.prototype.off = function(o, t, e, n) {
|
|
39
|
+
let r, s, i, c, h;
|
|
40
40
|
if (typeof t == "function" && (n = e, e = t, t = null), n === void 0)
|
|
41
41
|
return this.off(o, t, e, !0), this.off(o, t, e, !1), this;
|
|
42
42
|
if (i = this.listenerMap[n ? 1 : 0], !o) {
|
|
@@ -46,18 +46,18 @@ l.prototype.off = function(o, t, e, n) {
|
|
|
46
46
|
}
|
|
47
47
|
if (c = i[o], !c || !c.length)
|
|
48
48
|
return this;
|
|
49
|
-
for (
|
|
50
|
-
|
|
49
|
+
for (r = c.length - 1; r >= 0; r--)
|
|
50
|
+
s = c[r], (!t || t === s.selector) && (!e || e === s.handler) && (this._removedListeners.push(s), c.splice(r, 1));
|
|
51
51
|
return c.length || (delete i[o], this.rootElement && this.rootElement.removeEventListener(o, this.handle, n)), this;
|
|
52
52
|
};
|
|
53
|
-
|
|
53
|
+
m.prototype.handle = function(o) {
|
|
54
54
|
let t, e;
|
|
55
55
|
const n = o.type;
|
|
56
|
-
let
|
|
57
|
-
const
|
|
58
|
-
if (o[
|
|
56
|
+
let r, s, i, c, h = [], a;
|
|
57
|
+
const d = "ftLabsDelegateIgnore";
|
|
58
|
+
if (o[d] === !0)
|
|
59
59
|
return;
|
|
60
|
-
switch (a = o.target, a.nodeType === 3 && (a = a.parentNode), a.correspondingUseElement && (a = a.correspondingUseElement),
|
|
60
|
+
switch (a = o.target, a.nodeType === 3 && (a = a.parentNode), a.correspondingUseElement && (a = a.correspondingUseElement), r = this.rootElement, s = o.eventPhase || (o.target !== o.currentTarget ? 3 : 2), s) {
|
|
61
61
|
case 1:
|
|
62
62
|
h = this.listenerMap[1][n];
|
|
63
63
|
break;
|
|
@@ -72,24 +72,24 @@ l.prototype.handle = function(o) {
|
|
|
72
72
|
for (e = h.length; a && e; ) {
|
|
73
73
|
for (t = 0; t < e && (i = h[t], !!i); t++)
|
|
74
74
|
a.tagName && ["button", "input", "select", "textarea"].indexOf(a.tagName.toLowerCase()) > -1 && a.hasAttribute("disabled") ? u = [] : i.matcher.call(a, i.matcherParam, a) && u.push([o, a, i]);
|
|
75
|
-
if (a ===
|
|
75
|
+
if (a === r || (e = h.length, a = a.parentElement || a.parentNode, a instanceof HTMLDocument))
|
|
76
76
|
break;
|
|
77
77
|
}
|
|
78
|
-
let
|
|
78
|
+
let E;
|
|
79
79
|
for (t = 0; t < u.length; t++)
|
|
80
80
|
if (!(this._removedListeners.indexOf(u[t][2]) > -1) && (c = this.fire.apply(this, u[t]), c === !1)) {
|
|
81
|
-
u[t][0][
|
|
81
|
+
u[t][0][d] = !0, u[t][0].preventDefault(), E = !1;
|
|
82
82
|
break;
|
|
83
83
|
}
|
|
84
|
-
return
|
|
84
|
+
return E;
|
|
85
85
|
};
|
|
86
|
-
|
|
86
|
+
m.prototype.fire = function(o, t, e) {
|
|
87
87
|
return e.handler.call(t, o, t);
|
|
88
88
|
};
|
|
89
|
-
function
|
|
89
|
+
function T(o, t) {
|
|
90
90
|
return o.toLowerCase() === t.tagName.toLowerCase();
|
|
91
91
|
}
|
|
92
|
-
function
|
|
92
|
+
function S(o, t) {
|
|
93
93
|
return this.rootElement === window ? (
|
|
94
94
|
// Match the outer document (dispatched from document)
|
|
95
95
|
t === document || // The <html> element (dispatched from document.body or document.documentElement)
|
|
@@ -97,16 +97,16 @@ function $(o, t) {
|
|
|
97
97
|
t === window
|
|
98
98
|
) : this.rootElement === t;
|
|
99
99
|
}
|
|
100
|
-
function
|
|
100
|
+
function $(o, t) {
|
|
101
101
|
return o === t.id;
|
|
102
102
|
}
|
|
103
|
-
|
|
103
|
+
m.prototype.destroy = function() {
|
|
104
104
|
this.off(), this.root();
|
|
105
105
|
};
|
|
106
|
-
function
|
|
106
|
+
function y(o) {
|
|
107
107
|
return typeof o == "string" ? o.trim() : o;
|
|
108
108
|
}
|
|
109
|
-
function
|
|
109
|
+
function v(o, t) {
|
|
110
110
|
for (const e in o)
|
|
111
111
|
t[e] ? console.warn(`You can't set a custom property called ${e}`) : t[e] = o[e];
|
|
112
112
|
}
|
|
@@ -122,7 +122,7 @@ function N(o) {
|
|
|
122
122
|
const t = o == null ? void 0 : o.toLowerCase();
|
|
123
123
|
return t === "debug" ? p.DEBUG : t === "info" ? p.INFO : t === "warn" ? p.WARN : t === "error" ? p.ERROR : t === "test" ? p.TEST : p.DEFAULT;
|
|
124
124
|
}
|
|
125
|
-
class
|
|
125
|
+
class C {
|
|
126
126
|
constructor({ level: t = p.DEFAULT } = {
|
|
127
127
|
level: p.DEFAULT
|
|
128
128
|
}) {
|
|
@@ -142,13 +142,13 @@ class A {
|
|
|
142
142
|
}
|
|
143
143
|
}
|
|
144
144
|
const L = (o, t, e) => {
|
|
145
|
-
const n = Array.from((o == null ? void 0 : o.querySelectorAll(e)) ?? []),
|
|
146
|
-
if (
|
|
145
|
+
const n = Array.from((o == null ? void 0 : o.querySelectorAll(e)) ?? []), r = n.findIndex((s) => s === t);
|
|
146
|
+
if (r !== -1)
|
|
147
147
|
return {
|
|
148
148
|
siblings: n.length,
|
|
149
|
-
position:
|
|
149
|
+
position: r
|
|
150
150
|
};
|
|
151
|
-
},
|
|
151
|
+
}, k = [
|
|
152
152
|
"nodeName",
|
|
153
153
|
"className",
|
|
154
154
|
"id",
|
|
@@ -157,9 +157,9 @@ const L = (o, t, e) => {
|
|
|
157
157
|
"role"
|
|
158
158
|
], O = (o) => {
|
|
159
159
|
const t = {};
|
|
160
|
-
for (const e of
|
|
160
|
+
for (const e of k) {
|
|
161
161
|
const n = o[e] || o.getAttribute(e) || o.hasAttribute(e);
|
|
162
|
-
n !== void 0 && (typeof n == "boolean" ? t[e] = n : t[e] =
|
|
162
|
+
n !== void 0 && (typeof n == "boolean" ? t[e] = n : t[e] = y(n));
|
|
163
163
|
}
|
|
164
164
|
return t;
|
|
165
165
|
}, P = (o) => {
|
|
@@ -178,25 +178,25 @@ const L = (o, t, e) => {
|
|
|
178
178
|
t[e.name] = e.value;
|
|
179
179
|
}), t), M = (o, t, e) => {
|
|
180
180
|
const n = {};
|
|
181
|
-
return e &&
|
|
182
|
-
typeof t[
|
|
183
|
-
}), o.filter((
|
|
184
|
-
n[
|
|
181
|
+
return e && k.forEach((r) => {
|
|
182
|
+
typeof t[r] < "u" && r !== "id" && (n[r] = t[r]);
|
|
183
|
+
}), o.filter((r) => r.name.match(/^data-trackable-context-/i)).forEach((r) => {
|
|
184
|
+
n[r.name.replace("data-trackable-context-", "")] = x(r.value);
|
|
185
185
|
}), n;
|
|
186
186
|
};
|
|
187
187
|
function D(o, t) {
|
|
188
|
-
const e = o, n = e != null && e.getAttribute("data-trackable") ? `[data-trackable="${e.getAttribute("data-trackable")}"]` : e == null ? void 0 : e.nodeName,
|
|
188
|
+
const e = o, n = e != null && e.getAttribute("data-trackable") ? `[data-trackable="${e.getAttribute("data-trackable")}"]` : e == null ? void 0 : e.nodeName, r = [], s = {};
|
|
189
189
|
for (; o && o !== t; ) {
|
|
190
190
|
const i = O(o), c = Array.from(o.attributes);
|
|
191
191
|
let h = I(c, i);
|
|
192
192
|
h["data-trackable"] && (h = Object.assign(
|
|
193
193
|
h,
|
|
194
194
|
L(o, e, n)
|
|
195
|
-
)),
|
|
195
|
+
)), r.push(h);
|
|
196
196
|
const a = M(c, i, o === e);
|
|
197
|
-
|
|
197
|
+
v(a, s), o = o.parentNode;
|
|
198
198
|
}
|
|
199
|
-
return { trace:
|
|
199
|
+
return { trace: r, customContext: s };
|
|
200
200
|
}
|
|
201
201
|
const U = ["ctrlKey", "altKey", "shiftKey", "metaKey"];
|
|
202
202
|
class F {
|
|
@@ -204,13 +204,13 @@ class F {
|
|
|
204
204
|
id: t = "00000000-0000-0000-0000-000000000000",
|
|
205
205
|
name: e = "ccc-component",
|
|
206
206
|
subtype: n = "interactive",
|
|
207
|
-
teamName:
|
|
208
|
-
shadowRoot:
|
|
207
|
+
teamName: r = "djd",
|
|
208
|
+
shadowRoot: s = null,
|
|
209
209
|
category: i = "cta",
|
|
210
210
|
elements: c = 'a, button, input, [role="button"]',
|
|
211
211
|
logger: h
|
|
212
212
|
}) {
|
|
213
|
-
this.cccId = t, this.cccName = e, this.subtype = n, this.teamName =
|
|
213
|
+
this.cccId = t, this.cccName = e, this.subtype = n, this.teamName = r, this.shadowRoot = s, this.category = i, this.elements = c, this.isInitialised = !1, this.log = h ?? new C();
|
|
214
214
|
}
|
|
215
215
|
// Get properties for the event (as opposed to properties of the clicked element)
|
|
216
216
|
getEventProperties(t) {
|
|
@@ -218,22 +218,22 @@ class F {
|
|
|
218
218
|
for (const n of U)
|
|
219
219
|
if (t[n])
|
|
220
220
|
try {
|
|
221
|
-
e[n] =
|
|
222
|
-
} catch (
|
|
223
|
-
this.log.info(
|
|
221
|
+
e[n] = y(t[n]);
|
|
222
|
+
} catch (r) {
|
|
223
|
+
this.log.info(r);
|
|
224
224
|
}
|
|
225
225
|
return e;
|
|
226
226
|
}
|
|
227
227
|
// Controller for handling click events
|
|
228
228
|
handleClickEvent(t, e) {
|
|
229
|
-
return (n,
|
|
230
|
-
const
|
|
231
|
-
|
|
229
|
+
return (n, r) => {
|
|
230
|
+
const s = this.getEventProperties(n), { trace: i, customContext: c } = D(r, e);
|
|
231
|
+
s.custom = r.dataset && r.dataset.custom ? JSON.parse(r.dataset.custom) : null, s.domPathTokens = i, s.component = {
|
|
232
232
|
id: this.cccId,
|
|
233
233
|
name: this.cccName,
|
|
234
234
|
type: "custom-code-component",
|
|
235
235
|
subtype: this.subtype
|
|
236
|
-
},
|
|
236
|
+
}, s.teamName = this.teamName, s.url = document.URL, v(c, s), s.method = "ftCustomAnalytics", t = { ...t, ...s }, document.body.dispatchEvent(
|
|
237
237
|
new CustomEvent("oTracking.event", {
|
|
238
238
|
detail: t,
|
|
239
239
|
bubbles: !0,
|
|
@@ -272,28 +272,28 @@ class F {
|
|
|
272
272
|
const n = {
|
|
273
273
|
action: "click",
|
|
274
274
|
category: this.category
|
|
275
|
-
},
|
|
276
|
-
|
|
275
|
+
}, r = (e = this.shadowRoot) == null ? void 0 : e.querySelector("[data-component-root]");
|
|
276
|
+
r && new m(r).on(
|
|
277
277
|
"click",
|
|
278
278
|
this.elements,
|
|
279
|
-
this.handleClickEvent(n,
|
|
279
|
+
this.handleClickEvent(n, r),
|
|
280
280
|
!0
|
|
281
281
|
);
|
|
282
282
|
}
|
|
283
283
|
}
|
|
284
284
|
}
|
|
285
|
-
class
|
|
285
|
+
class l {
|
|
286
286
|
constructor(t) {
|
|
287
|
-
const { org: e, repo: n, component:
|
|
287
|
+
const { org: e, repo: n, component: r, versionRange: s } = w(
|
|
288
288
|
t
|
|
289
|
-
) ? t :
|
|
290
|
-
this.org = e, this.repo = n, this.component =
|
|
289
|
+
) ? t : l.fromString(t);
|
|
290
|
+
this.org = e, this.repo = n, this.component = r, this.versionRange = s;
|
|
291
291
|
}
|
|
292
292
|
set path(t) {
|
|
293
|
-
const { org: e, repo: n, component:
|
|
293
|
+
const { org: e, repo: n, component: r, versionRange: s } = w(
|
|
294
294
|
t
|
|
295
|
-
) ? t :
|
|
296
|
-
this.org = e, this.repo = n, this.component =
|
|
295
|
+
) ? t : l.fromString(t);
|
|
296
|
+
this.org = e, this.repo = n, this.component = r, this.versionRange = s;
|
|
297
297
|
}
|
|
298
298
|
get path() {
|
|
299
299
|
return `${this.org}/${this.repo}@${this.versionRange}/${this.component}`;
|
|
@@ -303,40 +303,45 @@ class f {
|
|
|
303
303
|
}
|
|
304
304
|
static fromString(t, e) {
|
|
305
305
|
var c;
|
|
306
|
-
if (!t)
|
|
306
|
+
if (!t)
|
|
307
|
+
throw new f("No path specified");
|
|
307
308
|
const n = e ?? ((c = t.match(/@[^\/]+/)) == null ? void 0 : c.toString().replace("@", "")) ?? "unknown";
|
|
308
|
-
if (!n)
|
|
309
|
-
|
|
310
|
-
|
|
309
|
+
if (!n)
|
|
310
|
+
throw new f("No version specified");
|
|
311
|
+
const [r, s, i] = t.replace(/@[^\/]+/, "").split("/").reverse();
|
|
312
|
+
return new l({ org: i, repo: s, component: r, versionRange: n });
|
|
311
313
|
}
|
|
312
314
|
}
|
|
313
|
-
function
|
|
315
|
+
function w(o) {
|
|
314
316
|
return typeof o == "object" && o !== null ? "org" in o && "repo" in o && "component" in o : !1;
|
|
315
317
|
}
|
|
316
|
-
class
|
|
318
|
+
class f extends Error {
|
|
317
319
|
constructor(t, e) {
|
|
318
|
-
|
|
320
|
+
var n = (...r) => {
|
|
321
|
+
super(...r);
|
|
322
|
+
};
|
|
323
|
+
!e && t ? (n(t), this.component = null) : typeof (e == null ? void 0 : e.component) == "string" ? (n(
|
|
319
324
|
t ?? `${e.cause ?? "Unknown error"} in ${e.component} imported from ${e.source ?? "an undefined source"}.`
|
|
320
|
-
), this.component =
|
|
325
|
+
), this.component = l.fromString(e.component)) : w(e == null ? void 0 : e.component) ? (n(
|
|
321
326
|
t ?? `${e.cause ?? "Unknown error"} in ${e.component.org}/${e.component.repo}/${e.component.component}@${e.component.versionRange} imported from ${e.source ?? "an undefined source"}.`
|
|
322
|
-
), this.component = new
|
|
327
|
+
), this.component = new l(e.component)) : (n(
|
|
323
328
|
`${(e == null ? void 0 : e.cause) ?? "Unknown error"} in unknown component imported from ${(e == null ? void 0 : e.source) ?? "unknown source"}.`
|
|
324
|
-
), this.component = null), this.source = e == null ? void 0 : e.source, Error.captureStackTrace && Error.captureStackTrace(this,
|
|
329
|
+
), this.component = null), this.source = e == null ? void 0 : e.source, Error.captureStackTrace && Error.captureStackTrace(this, f), this.name = "CCCError";
|
|
325
330
|
}
|
|
326
331
|
}
|
|
327
|
-
class g extends
|
|
332
|
+
class g extends f {
|
|
328
333
|
constructor(t, e) {
|
|
329
334
|
super(t, { ...e, cause: "Import error" }), this.name = "CCCImportError";
|
|
330
335
|
}
|
|
331
336
|
}
|
|
332
|
-
class W extends
|
|
337
|
+
class W extends f {
|
|
333
338
|
constructor(t) {
|
|
334
339
|
super(null, { ...t, cause: "Timeout error" }), this.name = "CCCTimeoutError";
|
|
335
340
|
}
|
|
336
341
|
}
|
|
337
|
-
const
|
|
342
|
+
const R = class A extends Event {
|
|
338
343
|
constructor(t, e) {
|
|
339
|
-
super(
|
|
344
|
+
super(A.eventType, {
|
|
340
345
|
bubbles: !0,
|
|
341
346
|
cancelable: !1,
|
|
342
347
|
composed: !0,
|
|
@@ -344,47 +349,48 @@ const w = class w extends Event {
|
|
|
344
349
|
}), this.component = t.component, this.source = t.source;
|
|
345
350
|
}
|
|
346
351
|
};
|
|
347
|
-
|
|
348
|
-
let
|
|
349
|
-
const
|
|
352
|
+
R.eventType = "ccc:ConnectedEvent";
|
|
353
|
+
let j = R;
|
|
354
|
+
const _ = (o) => o.replace(
|
|
350
355
|
/[A-Z]+(?![a-z])|[A-Z]/g,
|
|
351
356
|
(t, e) => (e ? "-" : "") + t.toLowerCase()
|
|
352
357
|
);
|
|
353
358
|
function V(o) {
|
|
354
|
-
return
|
|
359
|
+
return b([
|
|
355
360
|
"localhost",
|
|
356
361
|
"local.ft.com",
|
|
357
362
|
/^.*\.apps\.in\.ft\.com$/
|
|
358
363
|
], o);
|
|
359
364
|
}
|
|
360
365
|
function z() {
|
|
361
|
-
return
|
|
366
|
+
return b([
|
|
362
367
|
"localhost",
|
|
363
368
|
"local.ft.com",
|
|
364
369
|
/^.*\.in\.ft\.com$/
|
|
365
370
|
], window.location.hostname);
|
|
366
371
|
}
|
|
367
372
|
function J() {
|
|
368
|
-
return
|
|
373
|
+
return b([
|
|
369
374
|
"spark.ft.com",
|
|
370
375
|
"spark-staging.ft.com"
|
|
371
376
|
], window.location.host);
|
|
372
377
|
}
|
|
373
|
-
function
|
|
378
|
+
function b(o, t) {
|
|
374
379
|
return t ? o.some((e) => typeof e == "string" ? e === t : e.test(t)) : !1;
|
|
375
380
|
}
|
|
376
381
|
function H(o) {
|
|
377
|
-
if (o
|
|
382
|
+
if (!o)
|
|
378
383
|
return;
|
|
379
384
|
let t;
|
|
380
385
|
const e = new URL("http://localhost:5173");
|
|
381
386
|
try {
|
|
382
387
|
if (typeof o == "string") {
|
|
383
|
-
if (
|
|
388
|
+
if (o === "true" && z())
|
|
384
389
|
t = e;
|
|
385
390
|
else if (t = o.startsWith("http://") || o.startsWith("https://") ? new URL(o) : void 0, t && !V(t == null ? void 0 : t.hostname))
|
|
386
391
|
throw new Error("Unsafe testing host override");
|
|
387
|
-
} else
|
|
392
|
+
} else
|
|
393
|
+
J() && (t = e);
|
|
388
394
|
} catch {
|
|
389
395
|
return t;
|
|
390
396
|
}
|
|
@@ -395,21 +401,21 @@ async function K(o) {
|
|
|
395
401
|
return !1;
|
|
396
402
|
function t(n) {
|
|
397
403
|
try {
|
|
398
|
-
return new Promise((
|
|
399
|
-
const
|
|
400
|
-
s
|
|
404
|
+
return new Promise((r) => {
|
|
405
|
+
const s = new WebSocket(`ws://${n}`, "vite-hmr"), i = setTimeout(() => {
|
|
406
|
+
r(s.readyState === WebSocket.OPEN), s.close();
|
|
401
407
|
}, 50);
|
|
402
|
-
|
|
403
|
-
clearTimeout(i),
|
|
408
|
+
s.addEventListener("error", () => {
|
|
409
|
+
clearTimeout(i), s.close(), r(!1);
|
|
404
410
|
}, { once: !0 });
|
|
405
411
|
});
|
|
406
|
-
} catch {
|
|
407
|
-
return Promise.resolve(!1);
|
|
412
|
+
} catch (r) {
|
|
413
|
+
return console.error("WebSocket creation failed:", r), Promise.resolve(!1);
|
|
408
414
|
}
|
|
409
415
|
}
|
|
410
416
|
return await t(o == null ? void 0 : o.host);
|
|
411
417
|
}
|
|
412
|
-
class
|
|
418
|
+
class q extends HTMLElement {
|
|
413
419
|
constructor() {
|
|
414
420
|
super(), this.mode = "open", this.RESERVED_ATTRS = /* @__PURE__ */ new Set([
|
|
415
421
|
"iframe",
|
|
@@ -421,29 +427,30 @@ class _ extends HTMLElement {
|
|
|
421
427
|
"env",
|
|
422
428
|
"load-timeout"
|
|
423
429
|
]), this.channel = new MessageChannel(), this.initTracking = async () => {
|
|
424
|
-
var
|
|
430
|
+
var r;
|
|
425
431
|
try {
|
|
426
|
-
(
|
|
427
|
-
} catch (
|
|
428
|
-
const
|
|
432
|
+
(r = this.tracking) == null || r.init(this.id);
|
|
433
|
+
} catch (s) {
|
|
434
|
+
const i = this.getAttribute("path"), c = this.getAttribute("version");
|
|
429
435
|
this.log.info(
|
|
430
|
-
`Error initialising tracking on <custom-code-component> ${
|
|
431
|
-
), this.log.error(
|
|
436
|
+
`Error initialising tracking on <custom-code-component> ${i}@${c}`
|
|
437
|
+
), this.log.error(s);
|
|
432
438
|
}
|
|
433
|
-
}, this.log = new
|
|
439
|
+
}, this.log = new C({
|
|
434
440
|
level: N(this.getAttribute("log"))
|
|
435
441
|
});
|
|
436
|
-
const t =
|
|
442
|
+
const t = this.getAttribute("path"), e = this.getAttribute("version");
|
|
443
|
+
this.component = l.fromString(t, e), this.lightRoot = Array.from(this.childNodes);
|
|
444
|
+
const n = HTMLElement.prototype.hasOwnProperty("attachInternals");
|
|
437
445
|
try {
|
|
438
|
-
const
|
|
439
|
-
} catch (
|
|
440
|
-
this.log.error(
|
|
446
|
+
const r = n && this.attachInternals();
|
|
447
|
+
} catch (r) {
|
|
448
|
+
this.log.error(r);
|
|
441
449
|
}
|
|
442
450
|
}
|
|
443
451
|
async connectedCallback() {
|
|
444
452
|
try {
|
|
445
|
-
|
|
446
|
-
this.component = f.fromString(t, e), this.lightRoot = Array.from(this.childNodes), this.app = await this.load(), await this.mount(), await this.initTracking();
|
|
453
|
+
this.app = await this.load(), await this.mount(), await this.initTracking();
|
|
447
454
|
} catch (t) {
|
|
448
455
|
t instanceof Error && requestAnimationFrame(() => {
|
|
449
456
|
this.emitError(t);
|
|
@@ -453,7 +460,7 @@ class _ extends HTMLElement {
|
|
|
453
460
|
emitError(t) {
|
|
454
461
|
var n;
|
|
455
462
|
let e;
|
|
456
|
-
if (t instanceof
|
|
463
|
+
if (t instanceof f && ((n = t.name) != null && n.startsWith("CCC")) ? e = t.name.replace(/^CCC/, "ccc:") : e = `ccc:${(t == null ? void 0 : t.name) ?? "UnknownError"}`, !e)
|
|
457
464
|
return this.log.debug(t);
|
|
458
465
|
this.dispatchEvent(
|
|
459
466
|
new ErrorEvent(e, {
|
|
@@ -484,61 +491,56 @@ class _ extends HTMLElement {
|
|
|
484
491
|
this.channel.port1.postMessage(t);
|
|
485
492
|
}
|
|
486
493
|
async mount(t) {
|
|
487
|
-
var e, n;
|
|
488
494
|
try {
|
|
489
|
-
if (this.mode = this.getAttribute("shadow-open") == "false" ? "closed" : "open", this.
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
this.
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
}
|
|
521
|
-
} catch (s) {
|
|
495
|
+
if (this.mode = this.getAttribute("shadow-open") == "false" ? "closed" : "open", this.dispatchEvent(
|
|
496
|
+
new j({
|
|
497
|
+
component: this.component,
|
|
498
|
+
source: this.source
|
|
499
|
+
})
|
|
500
|
+
), this.dataset.cccReady = "true", delete this.dataset.cccError, !this.app)
|
|
501
|
+
throw new Error("CCC mounted without App");
|
|
502
|
+
const e = this.shadowRoot !== null, n = this.shadowRoot ?? this.attachShadow({ mode: this.mode }), r = JSON.parse(this.getAttribute("data-component-props")), s = Object.fromEntries(
|
|
503
|
+
[...this.attributes].filter((a) => !this.RESERVED_ATTRS.has(a.name)).map((a) => [a.name, a.value])
|
|
504
|
+
);
|
|
505
|
+
this.tracking = new F({
|
|
506
|
+
name: this.component.toString(),
|
|
507
|
+
subtype: "interactive",
|
|
508
|
+
teamName: "djd",
|
|
509
|
+
shadowRoot: this.shadowRoot,
|
|
510
|
+
logger: this.log
|
|
511
|
+
});
|
|
512
|
+
const { unmount: i, onmessage: c, ready: h } = this.app(
|
|
513
|
+
n,
|
|
514
|
+
{
|
|
515
|
+
...s,
|
|
516
|
+
data: r,
|
|
517
|
+
port: this.channel.port2,
|
|
518
|
+
tracking: this.tracking,
|
|
519
|
+
prerendered: !!t,
|
|
520
|
+
children: this.children
|
|
521
|
+
},
|
|
522
|
+
e
|
|
523
|
+
) || {};
|
|
524
|
+
i && (this.onunmount = i), c && (this.onmessage = c), h && this.onready(h);
|
|
525
|
+
} catch (e) {
|
|
522
526
|
throw this.log.info(
|
|
523
|
-
`<custom-code-component> uncaught error during mount from ${
|
|
524
|
-
), this.log.error(
|
|
527
|
+
`<custom-code-component> uncaught error during mount from ${this.component.toString()}`
|
|
528
|
+
), this.log.error(e), e;
|
|
525
529
|
}
|
|
526
530
|
}
|
|
527
531
|
// Called in top-level error handler
|
|
528
532
|
// Replace shadow root with light DOM children on error
|
|
529
533
|
unmount(t) {
|
|
530
534
|
var e;
|
|
531
|
-
this.
|
|
535
|
+
this.onunmount(), (e = this.shadowRoot) == null || e.replaceChildren(...this.lightRoot), this.dataset.cccError || (this.dataset.cccError = _(t.name.replace("CCC", ""))), delete this.dataset.cccReady;
|
|
532
536
|
}
|
|
533
537
|
async load() {
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
const t = this.getAttribute("path"), e = this.getAttribute("version"), n = Number(this.getAttribute("load-timeout") || 1e4), s = this.getAttribute("testEnv"), r = H(s), i = await K(r), c = this.getAttribute("id");
|
|
537
|
-
this.source = i ? `${r == null ? void 0 : r.origin}/src/${this.component.component}/index.jsx?id=${c}` : `https://www.ft.com/__component/${this.component.org}/${this.component.repo}${e ? `@${e}` : "@latest"}/${this.component.component}/${this.component.component}.js?id=${c}`;
|
|
538
|
+
const t = this.getAttribute("path"), e = this.getAttribute("version"), n = Number(this.getAttribute("load-timeout") || 1e4), r = this.getAttribute("testEnv"), s = H(r), i = await K(s), c = this.getAttribute("id");
|
|
539
|
+
this.source = i ? `${s == null ? void 0 : s.origin}/src/${this.component.component}/index.jsx?id=${c}` : `https://www.ft.com/__component/${this.component.org}/${this.component.repo}${e ? `@${e}` : "@latest"}/${this.component.component}/${this.component.component}.js?id=${c}`;
|
|
538
540
|
try {
|
|
539
541
|
return await new Promise(
|
|
540
542
|
(h, a) => {
|
|
541
|
-
const
|
|
543
|
+
const d = setTimeout(() => {
|
|
542
544
|
this.log.error("CCC import timeout error"), a(
|
|
543
545
|
new W({
|
|
544
546
|
component: this.component,
|
|
@@ -553,7 +555,7 @@ class _ extends HTMLElement {
|
|
|
553
555
|
/* @vite-ignore */
|
|
554
556
|
).then(({ default: u }) => {
|
|
555
557
|
if (u)
|
|
556
|
-
clearTimeout(
|
|
558
|
+
clearTimeout(d), h(u);
|
|
557
559
|
else
|
|
558
560
|
throw new g(
|
|
559
561
|
"No component renderer default export found",
|
|
@@ -563,7 +565,7 @@ class _ extends HTMLElement {
|
|
|
563
565
|
}
|
|
564
566
|
);
|
|
565
567
|
}).catch((u) => {
|
|
566
|
-
clearTimeout(
|
|
568
|
+
clearTimeout(d), this.log.error(u), u instanceof Error && !(u instanceof g) ? a(
|
|
567
569
|
new g(u.message, {
|
|
568
570
|
component: this.component,
|
|
569
571
|
source: this.source
|
|
@@ -571,7 +573,7 @@ class _ extends HTMLElement {
|
|
|
571
573
|
) : a(u);
|
|
572
574
|
});
|
|
573
575
|
else
|
|
574
|
-
throw clearTimeout(
|
|
576
|
+
throw clearTimeout(d), new g(`Unable to mount ${t}`, {
|
|
575
577
|
component: this.component,
|
|
576
578
|
source: this.source
|
|
577
579
|
});
|
|
@@ -584,9 +586,6 @@ class _ extends HTMLElement {
|
|
|
584
586
|
}
|
|
585
587
|
}
|
|
586
588
|
}
|
|
587
|
-
const q = () => customElements.define("custom-code-component", _);
|
|
588
|
-
customElements && !customElements.get("custom-code-component") && q();
|
|
589
589
|
export {
|
|
590
|
-
q as
|
|
590
|
+
q as FTCustomCodeComponent
|
|
591
591
|
};
|
|
592
|
-
//# sourceMappingURL=CustomCodeComponent.js.map
|