@atlaskit/react-ufo 4.1.9 → 4.1.11
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/CHANGELOG.md +15 -0
- package/dist/cjs/interaction-metrics/index.js +179 -43
- package/dist/cjs/vc/index.js +47 -3
- package/dist/cjs/vc/vc-observer/index.js +23 -16
- package/dist/cjs/vc/vc-observer-new/viewport-observer/index.js +14 -20
- package/dist/es2019/interaction-metrics/index.js +179 -43
- package/dist/es2019/vc/index.js +42 -0
- package/dist/es2019/vc/vc-observer/index.js +23 -16
- package/dist/es2019/vc/vc-observer-new/viewport-observer/index.js +6 -14
- package/dist/esm/interaction-metrics/index.js +179 -43
- package/dist/esm/vc/index.js +47 -3
- package/dist/esm/vc/vc-observer/index.js +23 -16
- package/dist/esm/vc/vc-observer-new/viewport-observer/index.js +14 -20
- package/dist/types/vc/index.d.ts +1 -0
- package/dist/types-ts4.5/vc/index.d.ts +1 -0
- package/package.json +4 -7
|
@@ -189,10 +189,23 @@ export function addCustomTiming(interactionId, labelStack, data) {
|
|
|
189
189
|
endTime = timingData.endTime;
|
|
190
190
|
try {
|
|
191
191
|
// for Firefox 102 and older
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
192
|
+
if (fg('ufo_chrome_devtools_uplift')) {
|
|
193
|
+
performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack, key), " [custom_timing]"), {
|
|
194
|
+
start: startTime,
|
|
195
|
+
end: endTime,
|
|
196
|
+
detail: {
|
|
197
|
+
devtools: {
|
|
198
|
+
track: '🛸 reactUFO detailed timings',
|
|
199
|
+
color: 'tertiary-light'
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
});
|
|
203
|
+
} else {
|
|
204
|
+
performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack, key), " [custom_timing]"), {
|
|
205
|
+
start: startTime,
|
|
206
|
+
end: endTime
|
|
207
|
+
});
|
|
208
|
+
}
|
|
196
209
|
} catch (e) {
|
|
197
210
|
// do nothing
|
|
198
211
|
}
|
|
@@ -249,10 +262,23 @@ export function addSpan(interactionId, type, name, labelStack, start) {
|
|
|
249
262
|
if (isPerformanceTracingEnabled()) {
|
|
250
263
|
try {
|
|
251
264
|
// for Firefox 102 and older
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
265
|
+
if (fg('ufo_chrome_devtools_uplift')) {
|
|
266
|
+
performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack, name), " [").concat(type, "]"), {
|
|
267
|
+
start: start,
|
|
268
|
+
end: end,
|
|
269
|
+
detail: {
|
|
270
|
+
devtools: {
|
|
271
|
+
track: '🛸 reactUFO detailed timings',
|
|
272
|
+
color: 'secondary'
|
|
273
|
+
}
|
|
274
|
+
}
|
|
275
|
+
});
|
|
276
|
+
} else {
|
|
277
|
+
performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack, name), " [").concat(type, "]"), {
|
|
278
|
+
start: start,
|
|
279
|
+
end: end
|
|
280
|
+
});
|
|
281
|
+
}
|
|
256
282
|
} catch (e) {
|
|
257
283
|
// do nothing
|
|
258
284
|
}
|
|
@@ -275,10 +301,23 @@ export function addSpanToAll(type, name, labelStack, start) {
|
|
|
275
301
|
if (isPerformanceTracingEnabled()) {
|
|
276
302
|
try {
|
|
277
303
|
// for Firefox 102 and older
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
304
|
+
if (fg('ufo_chrome_devtools_uplift')) {
|
|
305
|
+
performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack, name), " [").concat(type, "]"), {
|
|
306
|
+
start: start,
|
|
307
|
+
end: end,
|
|
308
|
+
detail: {
|
|
309
|
+
devtools: {
|
|
310
|
+
track: '🛸 reactUFO detailed timings',
|
|
311
|
+
color: 'secondary'
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
});
|
|
315
|
+
} else {
|
|
316
|
+
performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack, name), " [").concat(type, "]"), {
|
|
317
|
+
start: start,
|
|
318
|
+
end: end
|
|
319
|
+
});
|
|
320
|
+
}
|
|
282
321
|
} catch (e) {
|
|
283
322
|
// do nothing
|
|
284
323
|
}
|
|
@@ -339,10 +378,23 @@ export function addHold(interactionId, labelStack, name, experimental) {
|
|
|
339
378
|
if (isPerformanceTracingEnabled()) {
|
|
340
379
|
try {
|
|
341
380
|
// for Firefox 102 and older
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
381
|
+
if (fg('ufo_chrome_devtools_uplift')) {
|
|
382
|
+
performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack, name), " [hold]"), {
|
|
383
|
+
start: start,
|
|
384
|
+
end: end,
|
|
385
|
+
detail: {
|
|
386
|
+
devtools: {
|
|
387
|
+
track: '🛸 reactUFO detailed timings',
|
|
388
|
+
color: 'secondary-light'
|
|
389
|
+
}
|
|
390
|
+
}
|
|
391
|
+
});
|
|
392
|
+
} else {
|
|
393
|
+
performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack, name), " [hold]"), {
|
|
394
|
+
start: start,
|
|
395
|
+
end: end
|
|
396
|
+
});
|
|
397
|
+
}
|
|
346
398
|
} catch (e) {
|
|
347
399
|
// do nothing
|
|
348
400
|
}
|
|
@@ -469,10 +521,23 @@ export function addProfilerTimings(interactionId, labelStack, type, actualDurati
|
|
|
469
521
|
if (isPerformanceTracingEnabled()) {
|
|
470
522
|
try {
|
|
471
523
|
// for Firefox 102 and older
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
524
|
+
if (fg('ufo_chrome_devtools_uplift')) {
|
|
525
|
+
performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack), " [react-profiler] ").concat(type), {
|
|
526
|
+
start: startTime,
|
|
527
|
+
duration: actualDuration,
|
|
528
|
+
detail: {
|
|
529
|
+
devtools: {
|
|
530
|
+
track: '🛸 reactUFO detailed timings',
|
|
531
|
+
color: 'secondary-dark'
|
|
532
|
+
}
|
|
533
|
+
}
|
|
534
|
+
});
|
|
535
|
+
} else {
|
|
536
|
+
performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack), " [react-profiler] ").concat(type), {
|
|
537
|
+
start: startTime,
|
|
538
|
+
duration: actualDuration
|
|
539
|
+
});
|
|
540
|
+
}
|
|
476
541
|
} catch (e) {
|
|
477
542
|
// do nothing
|
|
478
543
|
}
|
|
@@ -509,10 +574,24 @@ function finishInteraction(id, data) {
|
|
|
509
574
|
data.end = endTime;
|
|
510
575
|
try {
|
|
511
576
|
// for Firefox 102 and older
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
577
|
+
if (fg('ufo_chrome_devtools_uplift')) {
|
|
578
|
+
performance.measure("\uD83D\uDEF8 [".concat(data.type, "] ").concat(data.ufoName, " [ttai]"), {
|
|
579
|
+
start: data.start,
|
|
580
|
+
end: data.end,
|
|
581
|
+
detail: {
|
|
582
|
+
devtools: {
|
|
583
|
+
track: 'main metrics',
|
|
584
|
+
trackGroup: '🛸 reactUFO metrics',
|
|
585
|
+
color: 'tertiary'
|
|
586
|
+
}
|
|
587
|
+
}
|
|
588
|
+
});
|
|
589
|
+
} else {
|
|
590
|
+
performance.measure("\uD83D\uDEF8 [".concat(data.type, "] ").concat(data.ufoName, " [ttai]"), {
|
|
591
|
+
start: data.start,
|
|
592
|
+
end: data.end
|
|
593
|
+
});
|
|
594
|
+
}
|
|
516
595
|
} catch (e) {
|
|
517
596
|
// do nothing
|
|
518
597
|
}
|
|
@@ -561,10 +640,23 @@ function finishInteraction(id, data) {
|
|
|
561
640
|
labelStack = _step3$value$.labelStack,
|
|
562
641
|
start = _step3$value$.start,
|
|
563
642
|
end = _step3$value$.end;
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
643
|
+
if (fg('ufo_chrome_devtools_uplift')) {
|
|
644
|
+
performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack), " [segment_ttai]"), {
|
|
645
|
+
start: start,
|
|
646
|
+
end: end,
|
|
647
|
+
detail: {
|
|
648
|
+
devtools: {
|
|
649
|
+
track: '🛸 reactUFO detailed timings',
|
|
650
|
+
color: 'secondary-dark'
|
|
651
|
+
}
|
|
652
|
+
}
|
|
653
|
+
});
|
|
654
|
+
} else {
|
|
655
|
+
performance.measure("\uD83D\uDEF8 ".concat(labelStackToString(labelStack), " [segment_ttai]"), {
|
|
656
|
+
start: start,
|
|
657
|
+
end: end
|
|
658
|
+
});
|
|
659
|
+
}
|
|
568
660
|
}
|
|
569
661
|
} catch (err) {
|
|
570
662
|
_iterator3.e(err);
|
|
@@ -894,12 +986,27 @@ export function addApdexToAll(apdex) {
|
|
|
894
986
|
interactions.forEach(function (interaction, key) {
|
|
895
987
|
interaction.apdex.push(apdex);
|
|
896
988
|
try {
|
|
897
|
-
var _apdex$startTime;
|
|
898
989
|
// for Firefox 102 and older
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
990
|
+
if (fg('ufo_chrome_devtools_uplift')) {
|
|
991
|
+
var _apdex$startTime;
|
|
992
|
+
performance.measure("\uD83D\uDEF8 ".concat(apdex.key, " [bm3_tti]"), {
|
|
993
|
+
start: (_apdex$startTime = apdex.startTime) !== null && _apdex$startTime !== void 0 ? _apdex$startTime : interaction.start,
|
|
994
|
+
end: apdex.stopTime,
|
|
995
|
+
detail: {
|
|
996
|
+
devtools: {
|
|
997
|
+
track: 'main metrics',
|
|
998
|
+
trackGroup: '🛸 reactUFO metrics',
|
|
999
|
+
color: 'primary-dark'
|
|
1000
|
+
}
|
|
1001
|
+
}
|
|
1002
|
+
});
|
|
1003
|
+
} else {
|
|
1004
|
+
var _apdex$startTime2;
|
|
1005
|
+
performance.measure("\uD83D\uDEF8 ".concat(apdex.key, " [bm3_tti]"), {
|
|
1006
|
+
start: (_apdex$startTime2 = apdex.startTime) !== null && _apdex$startTime2 !== void 0 ? _apdex$startTime2 : interaction.start,
|
|
1007
|
+
end: apdex.stopTime
|
|
1008
|
+
});
|
|
1009
|
+
}
|
|
903
1010
|
} catch (e) {
|
|
904
1011
|
// do nothing
|
|
905
1012
|
}
|
|
@@ -913,12 +1020,27 @@ export function addApdex(interactionId, apdexInfo) {
|
|
|
913
1020
|
if (interaction != null) {
|
|
914
1021
|
interaction.apdex.push(apdexInfo);
|
|
915
1022
|
try {
|
|
916
|
-
var _apdexInfo$startTime;
|
|
917
1023
|
// for Firefox 102 and older
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
1024
|
+
if (fg('ufo_chrome_devtools_uplift')) {
|
|
1025
|
+
var _apdexInfo$startTime;
|
|
1026
|
+
performance.measure("\uD83D\uDEF8 ".concat(apdexInfo.key, " [bm3_tti]"), {
|
|
1027
|
+
start: (_apdexInfo$startTime = apdexInfo.startTime) !== null && _apdexInfo$startTime !== void 0 ? _apdexInfo$startTime : interaction.start,
|
|
1028
|
+
end: apdexInfo.stopTime,
|
|
1029
|
+
detail: {
|
|
1030
|
+
devtools: {
|
|
1031
|
+
track: 'main metrics',
|
|
1032
|
+
trackGroup: '🛸 reactUFO metrics',
|
|
1033
|
+
color: 'primary-dark'
|
|
1034
|
+
}
|
|
1035
|
+
}
|
|
1036
|
+
});
|
|
1037
|
+
} else {
|
|
1038
|
+
var _apdexInfo$startTime2;
|
|
1039
|
+
performance.measure("\uD83D\uDEF8 ".concat(apdexInfo.key, " [bm3_tti]"), {
|
|
1040
|
+
start: (_apdexInfo$startTime2 = apdexInfo.startTime) !== null && _apdexInfo$startTime2 !== void 0 ? _apdexInfo$startTime2 : interaction.start,
|
|
1041
|
+
end: apdexInfo.stopTime
|
|
1042
|
+
});
|
|
1043
|
+
}
|
|
922
1044
|
} catch (e) {
|
|
923
1045
|
// do nothing
|
|
924
1046
|
}
|
|
@@ -981,12 +1103,26 @@ export function addRedirect(interactionId, fromUfoName, nextUfoName, nextRouteNa
|
|
|
981
1103
|
if (isPerformanceTracingEnabled()) {
|
|
982
1104
|
var prevRedirect = interaction.redirects.at(-2);
|
|
983
1105
|
try {
|
|
984
|
-
var _prevRedirect$time;
|
|
985
1106
|
// for Firefox 102 and older
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
1107
|
+
if (fg('ufo_chrome_devtools_uplift')) {
|
|
1108
|
+
var _prevRedirect$time;
|
|
1109
|
+
performance.measure("\uD83D\uDEF8 ".concat(nextUfoName, " [redirect]"), {
|
|
1110
|
+
start: (_prevRedirect$time = prevRedirect === null || prevRedirect === void 0 ? void 0 : prevRedirect.time) !== null && _prevRedirect$time !== void 0 ? _prevRedirect$time : interaction.start,
|
|
1111
|
+
end: time,
|
|
1112
|
+
detail: {
|
|
1113
|
+
devtools: {
|
|
1114
|
+
track: '🛸 reactUFO detailed timings',
|
|
1115
|
+
color: 'tertiary'
|
|
1116
|
+
}
|
|
1117
|
+
}
|
|
1118
|
+
});
|
|
1119
|
+
} else {
|
|
1120
|
+
var _prevRedirect$time2;
|
|
1121
|
+
performance.measure("\uD83D\uDEF8 ".concat(nextUfoName, " [redirect]"), {
|
|
1122
|
+
start: (_prevRedirect$time2 = prevRedirect === null || prevRedirect === void 0 ? void 0 : prevRedirect.time) !== null && _prevRedirect$time2 !== void 0 ? _prevRedirect$time2 : interaction.start,
|
|
1123
|
+
end: time
|
|
1124
|
+
});
|
|
1125
|
+
}
|
|
990
1126
|
} catch (e) {
|
|
991
1127
|
// do nothing
|
|
992
1128
|
}
|
package/dist/esm/vc/index.js
CHANGED
|
@@ -7,6 +7,7 @@ var _process;
|
|
|
7
7
|
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
8
8
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
9
9
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
10
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
11
|
import { isVCRevisionEnabled } from '../config';
|
|
11
12
|
import { VCObserverNOOP } from './no-op-vc-observer';
|
|
12
13
|
import { VCObserver } from './vc-observer';
|
|
@@ -158,16 +159,17 @@ export var VCObserverWrapper = /*#__PURE__*/function () {
|
|
|
158
159
|
_context.t1 = [];
|
|
159
160
|
case 16:
|
|
160
161
|
v3Result = _context.t1;
|
|
162
|
+
fg('ufo_chrome_devtools_uplift') && this.addPerformanceMeasures(param.start, [].concat(_toConsumableArray((v1v2Result === null || v1v2Result === void 0 ? void 0 : v1v2Result['ufo:vc:rev']) || []), _toConsumableArray(v3Result !== null && v3Result !== void 0 ? v3Result : [])));
|
|
161
163
|
if (v3Result) {
|
|
162
|
-
_context.next =
|
|
164
|
+
_context.next = 20;
|
|
163
165
|
break;
|
|
164
166
|
}
|
|
165
167
|
return _context.abrupt("return", v1v2Result !== null && v1v2Result !== void 0 ? v1v2Result : {});
|
|
166
|
-
case
|
|
168
|
+
case 20:
|
|
167
169
|
return _context.abrupt("return", _objectSpread(_objectSpread({}, v1v2Result), {}, {
|
|
168
170
|
'ufo:vc:rev': [].concat(_toConsumableArray((_ref2 = v1v2Result === null || v1v2Result === void 0 ? void 0 : v1v2Result['ufo:vc:rev']) !== null && _ref2 !== void 0 ? _ref2 : []), _toConsumableArray(v3Result !== null && v3Result !== void 0 ? v3Result : []))
|
|
169
171
|
}));
|
|
170
|
-
case
|
|
172
|
+
case 21:
|
|
171
173
|
case "end":
|
|
172
174
|
return _context.stop();
|
|
173
175
|
}
|
|
@@ -204,6 +206,48 @@ export var VCObserverWrapper = /*#__PURE__*/function () {
|
|
|
204
206
|
value: function collectSSRPlaceholders() {
|
|
205
207
|
this.ssrPlaceholderHandler.collectExistingPlaceholders();
|
|
206
208
|
}
|
|
209
|
+
}, {
|
|
210
|
+
key: "addPerformanceMeasures",
|
|
211
|
+
value: function addPerformanceMeasures(start, measures) {
|
|
212
|
+
try {
|
|
213
|
+
measures.forEach(function (entry) {
|
|
214
|
+
var _entry$vcDetails;
|
|
215
|
+
if (!entry || !entry.vcDetails) {
|
|
216
|
+
return;
|
|
217
|
+
}
|
|
218
|
+
var VCParts = Object.keys(entry.vcDetails);
|
|
219
|
+
performance.measure("VC90 (".concat(entry.revision, ")"), {
|
|
220
|
+
start: start,
|
|
221
|
+
duration: (_entry$vcDetails = entry.vcDetails) === null || _entry$vcDetails === void 0 || (_entry$vcDetails = _entry$vcDetails['90']) === null || _entry$vcDetails === void 0 ? void 0 : _entry$vcDetails.t,
|
|
222
|
+
detail: {
|
|
223
|
+
devtools: {
|
|
224
|
+
track: "main metrics",
|
|
225
|
+
trackGroup: '🛸 reactUFO metrics',
|
|
226
|
+
color: 'tertiary'
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
});
|
|
230
|
+
VCParts.forEach(function (key) {
|
|
231
|
+
var _entry$vcDetails2;
|
|
232
|
+
var duration = (_entry$vcDetails2 = entry.vcDetails) === null || _entry$vcDetails2 === void 0 ? void 0 : _entry$vcDetails2[key].t;
|
|
233
|
+
if (typeof duration !== 'number') {
|
|
234
|
+
return;
|
|
235
|
+
}
|
|
236
|
+
performance.measure("VC".concat(key), {
|
|
237
|
+
start: start,
|
|
238
|
+
duration: duration,
|
|
239
|
+
detail: {
|
|
240
|
+
devtools: {
|
|
241
|
+
track: "VC ".concat(entry.revision),
|
|
242
|
+
trackGroup: '🛸 reactUFO metrics',
|
|
243
|
+
color: key === '90' ? 'tertiary' : 'primary-light'
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
});
|
|
247
|
+
});
|
|
248
|
+
});
|
|
249
|
+
} catch (error) {}
|
|
250
|
+
}
|
|
207
251
|
}]);
|
|
208
252
|
}();
|
|
209
253
|
|
|
@@ -9,6 +9,7 @@ var _excluded = ["__debug__element"];
|
|
|
9
9
|
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
10
10
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
11
11
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
12
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
13
|
import { isVCRevisionEnabled } from '../../config';
|
|
13
14
|
import { getActiveInteraction } from '../../interaction-metrics';
|
|
14
15
|
import { attachAbortListeners } from './attachAbortListeners';
|
|
@@ -177,29 +178,35 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
177
178
|
if (isTTVCv1Disabled) {
|
|
178
179
|
var duration = vcNext.VC[key];
|
|
179
180
|
if (duration !== null && duration !== undefined) {
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
181
|
+
if (!fg('ufo_chrome_devtools_uplift')) {
|
|
182
|
+
performance.measure("VC".concat(key), {
|
|
183
|
+
start: start,
|
|
184
|
+
duration: duration
|
|
185
|
+
});
|
|
186
|
+
performance.measure("VC_Next".concat(key), {
|
|
187
|
+
start: start,
|
|
188
|
+
duration: duration
|
|
189
|
+
});
|
|
190
|
+
}
|
|
188
191
|
}
|
|
189
192
|
} else {
|
|
190
193
|
var ttvcV1duration = VC[key];
|
|
191
194
|
if (ttvcV1duration !== null && ttvcV1duration !== undefined) {
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
195
|
+
if (!fg('ufo_chrome_devtools_uplift')) {
|
|
196
|
+
performance.measure("VC".concat(key), {
|
|
197
|
+
start: start,
|
|
198
|
+
duration: ttvcV1duration
|
|
199
|
+
});
|
|
200
|
+
}
|
|
196
201
|
}
|
|
197
202
|
var ttvcV2duration = vcNext.VC[key];
|
|
198
203
|
if (ttvcV2duration !== null && ttvcV2duration !== undefined) {
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
204
|
+
if (!fg('ufo_chrome_devtools_uplift')) {
|
|
205
|
+
performance.measure("VC_Next".concat(key), {
|
|
206
|
+
start: start,
|
|
207
|
+
duration: ttvcV2duration
|
|
208
|
+
});
|
|
209
|
+
}
|
|
203
210
|
}
|
|
204
211
|
}
|
|
205
212
|
});
|
|
@@ -6,7 +6,6 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
|
6
6
|
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
|
|
7
7
|
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
8
8
|
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
9
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
9
|
import { isContainedWithinMediaWrapper } from '../../vc-observer/media-wrapper/vc-utils';
|
|
11
10
|
import isNonVisualStyleMutation from '../../vc-observer/observers/non-visual-styles/is-non-visual-style-mutation';
|
|
12
11
|
import { RLLPlaceholderHandlers } from '../../vc-observer/observers/rll-placeholders';
|
|
@@ -48,21 +47,18 @@ var createElementMutationsWatcher = function createElementMutationsWatcher(remov
|
|
|
48
47
|
return function (_ref) {
|
|
49
48
|
var target = _ref.target,
|
|
50
49
|
rect = _ref.rect;
|
|
51
|
-
var isNoLsMarkerEnabled = fg('platform_vc_ignore_no_ls_mutation_marker');
|
|
52
50
|
var isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(target);
|
|
53
|
-
if (!isInIgnoreLsMarker
|
|
51
|
+
if (!isInIgnoreLsMarker) {
|
|
54
52
|
return 'mutation:element';
|
|
55
53
|
}
|
|
56
54
|
var isRLLPlaceholder = RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(rect);
|
|
57
|
-
if (isRLLPlaceholder &&
|
|
55
|
+
if (isRLLPlaceholder && isInIgnoreLsMarker) {
|
|
58
56
|
return 'mutation:rll-placeholder';
|
|
59
57
|
}
|
|
60
58
|
var wasDeleted = removedNodeRects.some(function (nr) {
|
|
61
59
|
return sameRectDimensions(nr, rect);
|
|
62
60
|
});
|
|
63
|
-
|
|
64
|
-
// no layout shift mutation is excluded as per existing fy25.03 logic
|
|
65
|
-
if (wasDeleted && (!isNoLsMarkerEnabled || isInIgnoreLsMarker)) {
|
|
61
|
+
if (wasDeleted && isInIgnoreLsMarker) {
|
|
66
62
|
return 'mutation:element-replacement';
|
|
67
63
|
}
|
|
68
64
|
return 'mutation:element';
|
|
@@ -118,7 +114,7 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
118
114
|
_context2.prev = 4;
|
|
119
115
|
_loop = /*#__PURE__*/_regeneratorRuntime.mark(function _loop() {
|
|
120
116
|
var _this$intersectionObs8;
|
|
121
|
-
var addedNodeRef, addedNode, ssrState, SSRStateEnum, _this$intersectionObs, _this$intersectionObs2, ssrPlaceholderHandler, result, _this$intersectionObs3, _result, _this$intersectionObs4, sameDeletedNode, isInIgnoreLsMarker,
|
|
117
|
+
var addedNodeRef, addedNode, ssrState, SSRStateEnum, _this$intersectionObs, _this$intersectionObs2, ssrPlaceholderHandler, result, _this$intersectionObs3, _result, _this$intersectionObs4, sameDeletedNode, isInIgnoreLsMarker, _this$intersectionObs5, _this$intersectionObs6, _checkWithinComponent, isWithinThirdPartySegment, _this$intersectionObs7;
|
|
122
118
|
return _regeneratorRuntime.wrap(function _loop$(_context) {
|
|
123
119
|
while (1) switch (_context.prev = _context.next) {
|
|
124
120
|
case 0:
|
|
@@ -130,7 +126,7 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
130
126
|
}
|
|
131
127
|
return _context.abrupt("return", 0);
|
|
132
128
|
case 4:
|
|
133
|
-
if (!
|
|
129
|
+
if (!_this.getSSRState) {
|
|
134
130
|
_context.next = 19;
|
|
135
131
|
break;
|
|
136
132
|
}
|
|
@@ -165,7 +161,7 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
165
161
|
case 18:
|
|
166
162
|
ssrState.state = SSRStateEnum.normal;
|
|
167
163
|
case 19:
|
|
168
|
-
if (!
|
|
164
|
+
if (!_this.getSSRPlaceholderHandler) {
|
|
169
165
|
_context.next = 36;
|
|
170
166
|
break;
|
|
171
167
|
}
|
|
@@ -212,32 +208,30 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
212
208
|
return n.isEqualNode(addedNode);
|
|
213
209
|
});
|
|
214
210
|
isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(addedNode);
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
if (!(sameDeletedNode && (!isNoLsMarkerEnabled || isInIgnoreLsMarker))) {
|
|
218
|
-
_context.next = 42;
|
|
211
|
+
if (!(sameDeletedNode && isInIgnoreLsMarker)) {
|
|
212
|
+
_context.next = 41;
|
|
219
213
|
break;
|
|
220
214
|
}
|
|
221
215
|
(_this$intersectionObs5 = _this.intersectionObserver) === null || _this$intersectionObs5 === void 0 || _this$intersectionObs5.watchAndTag(addedNode, 'mutation:remount');
|
|
222
216
|
return _context.abrupt("return", 0);
|
|
223
|
-
case
|
|
217
|
+
case 41:
|
|
224
218
|
if (!isContainedWithinMediaWrapper(addedNode)) {
|
|
225
|
-
_context.next =
|
|
219
|
+
_context.next = 44;
|
|
226
220
|
break;
|
|
227
221
|
}
|
|
228
222
|
(_this$intersectionObs6 = _this.intersectionObserver) === null || _this$intersectionObs6 === void 0 || _this$intersectionObs6.watchAndTag(addedNode, 'mutation:media');
|
|
229
223
|
return _context.abrupt("return", 0);
|
|
230
|
-
case
|
|
224
|
+
case 44:
|
|
231
225
|
_checkWithinComponent = checkWithinComponentAndExtractChildProps(addedNode, 'UFOThirdPartySegment'), isWithinThirdPartySegment = _checkWithinComponent.isWithin;
|
|
232
226
|
if (!isWithinThirdPartySegment) {
|
|
233
|
-
_context.next =
|
|
227
|
+
_context.next = 48;
|
|
234
228
|
break;
|
|
235
229
|
}
|
|
236
230
|
(_this$intersectionObs7 = _this.intersectionObserver) === null || _this$intersectionObs7 === void 0 || _this$intersectionObs7.watchAndTag(addedNode, 'mutation:third-party-element');
|
|
237
231
|
return _context.abrupt("return", 0);
|
|
238
|
-
case
|
|
232
|
+
case 48:
|
|
239
233
|
(_this$intersectionObs8 = _this.intersectionObserver) === null || _this$intersectionObs8 === void 0 || _this$intersectionObs8.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
|
|
240
|
-
case
|
|
234
|
+
case 49:
|
|
241
235
|
case "end":
|
|
242
236
|
return _context.stop();
|
|
243
237
|
}
|
package/dist/types/vc/index.d.ts
CHANGED
|
@@ -21,6 +21,7 @@ export declare class VCObserverWrapper implements VCObserverInterface {
|
|
|
21
21
|
setReactRootRenderStart(startTime: number): void;
|
|
22
22
|
setReactRootRenderStop(stopTime: number): void;
|
|
23
23
|
collectSSRPlaceholders(): void;
|
|
24
|
+
private addPerformanceMeasures;
|
|
24
25
|
}
|
|
25
26
|
export declare function isEnvironmentSupported(): boolean;
|
|
26
27
|
export declare function getVCObserver(opts?: VCObserverOptions): VCObserverInterface;
|
|
@@ -21,6 +21,7 @@ export declare class VCObserverWrapper implements VCObserverInterface {
|
|
|
21
21
|
setReactRootRenderStart(startTime: number): void;
|
|
22
22
|
setReactRootRenderStop(stopTime: number): void;
|
|
23
23
|
collectSSRPlaceholders(): void;
|
|
24
|
+
private addPerformanceMeasures;
|
|
24
25
|
}
|
|
25
26
|
export declare function isEnvironmentSupported(): boolean;
|
|
26
27
|
export declare function getVCObserver(opts?: VCObserverOptions): VCObserverInterface;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/react-ufo",
|
|
3
|
-
"version": "4.1.
|
|
3
|
+
"version": "4.1.11",
|
|
4
4
|
"description": "Parts of React UFO that are publicly available",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -180,12 +180,6 @@
|
|
|
180
180
|
"platform_ufo_add_type_for_3p_segments": {
|
|
181
181
|
"type": "boolean"
|
|
182
182
|
},
|
|
183
|
-
"platform_vc_ignore_no_ls_mutation_marker": {
|
|
184
|
-
"type": "boolean"
|
|
185
|
-
},
|
|
186
|
-
"platform_ufo_vc_v3_ssr_placeholder": {
|
|
187
|
-
"type": "boolean"
|
|
188
|
-
},
|
|
189
183
|
"platform_ufo_enable_vc_press_interactions": {
|
|
190
184
|
"type": "boolean"
|
|
191
185
|
},
|
|
@@ -197,6 +191,9 @@
|
|
|
197
191
|
},
|
|
198
192
|
"platform_ufo_segment_critical_metrics": {
|
|
199
193
|
"type": "boolean"
|
|
194
|
+
},
|
|
195
|
+
"ufo_chrome_devtools_uplift": {
|
|
196
|
+
"type": "boolean"
|
|
200
197
|
}
|
|
201
198
|
}
|
|
202
199
|
}
|