@atlaskit/react-ufo 2.14.2 → 2.14.3
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 +8 -0
- package/dist/cjs/create-payload/index.js +1 -0
- package/dist/cjs/vc/vc-observer/index.js +19 -4
- package/dist/cjs/vc/vc-observer/observers/ssr-placeholders/index.js +16 -27
- package/dist/es2019/create-payload/index.js +1 -0
- package/dist/es2019/vc/vc-observer/index.js +21 -4
- package/dist/es2019/vc/vc-observer/observers/ssr-placeholders/index.js +16 -27
- package/dist/esm/create-payload/index.js +1 -0
- package/dist/esm/vc/vc-observer/index.js +19 -4
- package/dist/esm/vc/vc-observer/observers/ssr-placeholders/index.js +16 -27
- package/dist/types/common/vc/types.d.ts +1 -1
- package/dist/types/create-payload/index.d.ts +16 -0
- package/dist/types/interaction-ignore/ufo-interaction-ignore.d.ts +2 -2
- package/dist/types/label/UFOLabel.d.ts +2 -2
- package/dist/types/load-hold/UFOLoadHold.d.ts +2 -2
- package/dist/types/placeholder/Placeholder.d.ts +2 -2
- package/dist/types/placeholder/loosely-lazy/lazy-suspense.d.ts +2 -2
- package/dist/types/segment/segment-highlight.d.ts +2 -2
- package/dist/types/segment/segment.d.ts +2 -2
- package/dist/types/vc/vc-observer/index.d.ts +1 -0
- package/dist/types/vc/vc-observer/media-wrapper/MediaWrapper.d.ts +1 -1
- package/dist/types-ts4.5/common/vc/types.d.ts +1 -1
- package/dist/types-ts4.5/create-payload/index.d.ts +16 -0
- package/dist/types-ts4.5/interaction-ignore/ufo-interaction-ignore.d.ts +2 -2
- package/dist/types-ts4.5/label/UFOLabel.d.ts +2 -2
- package/dist/types-ts4.5/load-hold/UFOLoadHold.d.ts +2 -2
- package/dist/types-ts4.5/placeholder/Placeholder.d.ts +2 -2
- package/dist/types-ts4.5/placeholder/loosely-lazy/lazy-suspense.d.ts +2 -2
- package/dist/types-ts4.5/segment/segment-highlight.d.ts +2 -2
- package/dist/types-ts4.5/segment/segment.d.ts +2 -2
- package/dist/types-ts4.5/vc/vc-observer/index.d.ts +1 -0
- package/dist/types-ts4.5/vc/vc-observer/media-wrapper/MediaWrapper.d.ts +1 -1
- package/package.json +10 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/ufo-interaction-ignore
|
|
2
2
|
|
|
3
|
+
## 2.14.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#112416](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112416)
|
|
8
|
+
[`7bc761ae449f4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7bc761ae449f4) -
|
|
9
|
+
VC ratio calculation precision fix
|
|
10
|
+
|
|
3
11
|
## 2.14.2
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -622,6 +622,7 @@ function getPayloadSize(payload) {
|
|
|
622
622
|
return Math.round(new TextEncoder().encode(JSON.stringify(payload)).length / 1024);
|
|
623
623
|
}
|
|
624
624
|
function getStylesheetMetrics() {
|
|
625
|
+
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
625
626
|
if (!(0, _platformFeatureFlags.fg)('ufo_capture_stylesheet_metrics')) {
|
|
626
627
|
return {};
|
|
627
628
|
}
|
|
@@ -224,9 +224,10 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
224
224
|
} catch (e) {
|
|
225
225
|
/* do nothing */
|
|
226
226
|
}
|
|
227
|
+
var isCalcSpeedIndexEnabled = (0, _platformFeatureFlags.fg)('ufo-calc-speed-index');
|
|
227
228
|
return _objectSpread(_objectSpread((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
|
|
228
229
|
'metrics:vc': VC
|
|
229
|
-
}, "".concat(fullPrefix, "vc:state"), true), "".concat(fullPrefix, "vc:clean"), !abortReasonInfo), "".concat(fullPrefix, "vc:dom"), VCBox), "".concat(fullPrefix, "vc:updates"), VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:size"), viewport), "".concat(fullPrefix, "vc:time"), Math.round(totalTime + (stopTime - startTime))), "".concat(fullPrefix, "vc:total"), totalPainted), "".concat(fullPrefix, "vc:ratios"), ratios), outOfBoundary), {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(fullPrefix, "vc:next"), vcNext.VC), "".concat(fullPrefix, "vc:next:updates"), vcNext.VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:next:dom"), vcNext.VCBox), "".concat(fullPrefix, "vc:ignored"), _this.getIgnoredElements(componentsLog)));
|
|
230
|
+
}, "".concat(fullPrefix, "vc:state"), true), "".concat(fullPrefix, "vc:clean"), !abortReasonInfo), "".concat(fullPrefix, "vc:dom"), VCBox), "".concat(fullPrefix, "vc:updates"), VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:size"), viewport), "".concat(fullPrefix, "vc:time"), Math.round(totalTime + (stopTime - startTime))), "".concat(fullPrefix, "vc:total"), totalPainted), "".concat(fullPrefix, "vc:ratios"), ratios), outOfBoundary), {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(fullPrefix, "vc:next"), vcNext.VC), "".concat(fullPrefix, "vc:next:updates"), vcNext.VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:next:dom"), vcNext.VCBox), "".concat(fullPrefix, "vc:ignored"), _this.getIgnoredElements(componentsLog)), "ufo:speedIndex", isCalcSpeedIndexEnabled ? VCEntries.speedIndex : undefined), "ufo:next:speedIndex", isCalcSpeedIndexEnabled ? vcNext.VCEntries.speedIndex : undefined));
|
|
230
231
|
});
|
|
231
232
|
(0, _defineProperty2.default)(this, "handleUpdate", function (rawTime, intersectionRect, targetName, element, type, ignoreReason) {
|
|
232
233
|
_this.measureStart();
|
|
@@ -537,10 +538,17 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
537
538
|
});
|
|
538
539
|
var VC = VCObserver.makeVCReturnObj();
|
|
539
540
|
var VCBox = VCObserver.makeVCReturnObj();
|
|
541
|
+
var isCalcSpeedIndexEnabled = (0, _platformFeatureFlags.fg)('ufo-calc-speed-index');
|
|
540
542
|
entries.reduce(function () {
|
|
541
543
|
var acc = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
542
544
|
var v = arguments.length > 1 ? arguments[1] : undefined;
|
|
543
|
-
var
|
|
545
|
+
var currRatio = v[1] / totalPainted;
|
|
546
|
+
var VCRatio = currRatio + acc;
|
|
547
|
+
if ((0, _platformFeatureFlags.fg)('platform_ufo_fix_vc_observer_rounding_error')) {
|
|
548
|
+
var preciseCurrRatio = Math.round(100 * (v[1] / totalPainted));
|
|
549
|
+
var preciseAccRatio = Math.round(acc * 100);
|
|
550
|
+
VCRatio = (preciseCurrRatio + preciseAccRatio) / 100;
|
|
551
|
+
}
|
|
544
552
|
var time = v[0];
|
|
545
553
|
VCObserver.VCParts.forEach(function (key) {
|
|
546
554
|
var value = parseInt(key, 10);
|
|
@@ -555,7 +563,7 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
555
563
|
return VCRatio;
|
|
556
564
|
}, 0);
|
|
557
565
|
var VCEntries = entries.reduce(function (acc, _ref14, i) {
|
|
558
|
-
var _acc$abs, _componentsLog$timest;
|
|
566
|
+
var _acc$abs, _componentsLog$timest, _acc$rel$vc, _acc$rel;
|
|
559
567
|
var _ref15 = (0, _slicedToArray2.default)(_ref14, 2),
|
|
560
568
|
timestamp = _ref15[0],
|
|
561
569
|
entryPainted = _ref15[1];
|
|
@@ -564,6 +572,11 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
564
572
|
var logEntry = (_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.map(function (v) {
|
|
565
573
|
return v.targetName;
|
|
566
574
|
});
|
|
575
|
+
var ratioDelta = (currentlyPaintedRatio - ((_acc$rel$vc = (_acc$rel = acc.rel[i - 1]) === null || _acc$rel === void 0 ? void 0 : _acc$rel.vc) !== null && _acc$rel$vc !== void 0 ? _acc$rel$vc : 0)) / 100;
|
|
576
|
+
if (isCalcSpeedIndexEnabled) {
|
|
577
|
+
var speedIndex = timestamp * ratioDelta;
|
|
578
|
+
acc.speedIndex += speedIndex;
|
|
579
|
+
}
|
|
567
580
|
acc.abs.push([timestamp, currentlyPainted]);
|
|
568
581
|
acc.rel.push({
|
|
569
582
|
time: timestamp,
|
|
@@ -573,8 +586,10 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
573
586
|
return acc;
|
|
574
587
|
}, {
|
|
575
588
|
abs: [],
|
|
576
|
-
rel: []
|
|
589
|
+
rel: [],
|
|
590
|
+
speedIndex: 0
|
|
577
591
|
});
|
|
592
|
+
VCEntries.speedIndex = Math.round(VCEntries.speedIndex);
|
|
578
593
|
return {
|
|
579
594
|
VC: VC,
|
|
580
595
|
VCBox: VCBox,
|
|
@@ -8,7 +8,6 @@ exports.SSRPlaceholderHandlers = void 0;
|
|
|
8
8
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
9
9
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
10
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
12
11
|
var EQUALITY_THRESHOLD = 0.1;
|
|
13
12
|
var ANCESTOR_LOOKUP_LIMIT = 10;
|
|
14
13
|
var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/function () {
|
|
@@ -36,20 +35,15 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
|
|
|
36
35
|
return;
|
|
37
36
|
}
|
|
38
37
|
var rect = _this.staticPlaceholders.get(staticKey);
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
_resolve(hasSameSizePosition);
|
|
43
|
-
} else {
|
|
44
|
-
requestAnimationFrame(function () {
|
|
45
|
-
var targetRect = target.getBoundingClientRect();
|
|
46
|
-
var hasSameSizePosition = _this.hasSameSizePosition(rect, targetRect);
|
|
47
|
-
_resolve(hasSameSizePosition);
|
|
48
|
-
});
|
|
49
|
-
}
|
|
38
|
+
var hasSameSizePosition = _this.hasSameSizePosition(rect, boundingClientRect);
|
|
39
|
+
if (hasSameSizePosition || _this.isDummyRect(rect)) {
|
|
40
|
+
_resolve(hasSameSizePosition);
|
|
50
41
|
} else {
|
|
51
|
-
|
|
52
|
-
|
|
42
|
+
requestAnimationFrame(function () {
|
|
43
|
+
var targetRect = target.getBoundingClientRect();
|
|
44
|
+
var hasSameSizePosition = _this.hasSameSizePosition(rect, targetRect);
|
|
45
|
+
_resolve(hasSameSizePosition);
|
|
46
|
+
});
|
|
53
47
|
}
|
|
54
48
|
_this.callbacks.delete(staticKey);
|
|
55
49
|
}
|
|
@@ -60,20 +54,15 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
|
|
|
60
54
|
return;
|
|
61
55
|
}
|
|
62
56
|
var _rect = _this.staticPlaceholders.get(key);
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
_resolve2(_hasSameSizePosition2);
|
|
67
|
-
} else {
|
|
68
|
-
requestAnimationFrame(function () {
|
|
69
|
-
var targetRect = target.getBoundingClientRect();
|
|
70
|
-
var hasSameSizePosition = _this.hasSameSizePosition(_rect, targetRect);
|
|
71
|
-
_resolve2(hasSameSizePosition);
|
|
72
|
-
});
|
|
73
|
-
}
|
|
57
|
+
var _hasSameSizePosition = _this.hasSameSizePosition(_rect, boundingClientRect);
|
|
58
|
+
if (_hasSameSizePosition || _this.isDummyRect(_rect)) {
|
|
59
|
+
_resolve2(_hasSameSizePosition);
|
|
74
60
|
} else {
|
|
75
|
-
|
|
76
|
-
|
|
61
|
+
requestAnimationFrame(function () {
|
|
62
|
+
var targetRect = target.getBoundingClientRect();
|
|
63
|
+
var hasSameSizePosition = _this.hasSameSizePosition(_rect, targetRect);
|
|
64
|
+
_resolve2(hasSameSizePosition);
|
|
65
|
+
});
|
|
77
66
|
}
|
|
78
67
|
_this.staticPlaceholders.delete(staticKey);
|
|
79
68
|
_this.reactValidateCallbacks.delete(staticKey);
|
|
@@ -615,6 +615,7 @@ function getPayloadSize(payload) {
|
|
|
615
615
|
return Math.round(new TextEncoder().encode(JSON.stringify(payload)).length / 1024);
|
|
616
616
|
}
|
|
617
617
|
function getStylesheetMetrics() {
|
|
618
|
+
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
618
619
|
if (!fg('ufo_capture_stylesheet_metrics')) {
|
|
619
620
|
return {};
|
|
620
621
|
}
|
|
@@ -222,6 +222,7 @@ export class VCObserver {
|
|
|
222
222
|
} catch (e) {
|
|
223
223
|
/* do nothing */
|
|
224
224
|
}
|
|
225
|
+
const isCalcSpeedIndexEnabled = fg('ufo-calc-speed-index');
|
|
225
226
|
return {
|
|
226
227
|
'metrics:vc': VC,
|
|
227
228
|
[`${fullPrefix}vc:state`]: true,
|
|
@@ -238,7 +239,9 @@ export class VCObserver {
|
|
|
238
239
|
[`${fullPrefix}vc:next:updates`]: vcNext.VCEntries.rel.slice(0, 50),
|
|
239
240
|
[`${fullPrefix}vc:next:dom`]: vcNext.VCBox,
|
|
240
241
|
//...oldDomUpdates,
|
|
241
|
-
[`${fullPrefix}vc:ignored`]: this.getIgnoredElements(componentsLog)
|
|
242
|
+
[`${fullPrefix}vc:ignored`]: this.getIgnoredElements(componentsLog),
|
|
243
|
+
[`ufo:speedIndex`]: isCalcSpeedIndexEnabled ? VCEntries.speedIndex : undefined,
|
|
244
|
+
[`ufo:next:speedIndex`]: isCalcSpeedIndexEnabled ? vcNext.VCEntries.speedIndex : undefined
|
|
242
245
|
};
|
|
243
246
|
});
|
|
244
247
|
_defineProperty(this, "handleUpdate", (rawTime, intersectionRect, targetName, element, type, ignoreReason) => {
|
|
@@ -425,8 +428,15 @@ export class VCObserver {
|
|
|
425
428
|
const entries = Object.entries(lastUpdate).map(a => [parseInt(a[0], 10), a[1]]).sort((a, b) => a[0] > b[0] ? 1 : -1);
|
|
426
429
|
const VC = VCObserver.makeVCReturnObj();
|
|
427
430
|
const VCBox = VCObserver.makeVCReturnObj();
|
|
431
|
+
const isCalcSpeedIndexEnabled = fg('ufo-calc-speed-index');
|
|
428
432
|
entries.reduce((acc = 0, v) => {
|
|
429
|
-
const
|
|
433
|
+
const currRatio = v[1] / totalPainted;
|
|
434
|
+
let VCRatio = currRatio + acc;
|
|
435
|
+
if (fg('platform_ufo_fix_vc_observer_rounding_error')) {
|
|
436
|
+
const preciseCurrRatio = Math.round(100 * (v[1] / totalPainted));
|
|
437
|
+
const preciseAccRatio = Math.round(acc * 100);
|
|
438
|
+
VCRatio = (preciseCurrRatio + preciseAccRatio) / 100;
|
|
439
|
+
}
|
|
430
440
|
const time = v[0];
|
|
431
441
|
VCObserver.VCParts.forEach(key => {
|
|
432
442
|
const value = parseInt(key, 10);
|
|
@@ -439,10 +449,15 @@ export class VCObserver {
|
|
|
439
449
|
return VCRatio;
|
|
440
450
|
}, 0);
|
|
441
451
|
const VCEntries = entries.reduce((acc, [timestamp, entryPainted], i) => {
|
|
442
|
-
var _acc$abs, _componentsLog$timest;
|
|
452
|
+
var _acc$abs, _componentsLog$timest, _acc$rel$vc, _acc$rel;
|
|
443
453
|
const currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
|
|
444
454
|
const currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
|
|
445
455
|
const logEntry = (_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.map(v => v.targetName);
|
|
456
|
+
const ratioDelta = (currentlyPaintedRatio - ((_acc$rel$vc = (_acc$rel = acc.rel[i - 1]) === null || _acc$rel === void 0 ? void 0 : _acc$rel.vc) !== null && _acc$rel$vc !== void 0 ? _acc$rel$vc : 0)) / 100;
|
|
457
|
+
if (isCalcSpeedIndexEnabled) {
|
|
458
|
+
const speedIndex = timestamp * ratioDelta;
|
|
459
|
+
acc.speedIndex += speedIndex;
|
|
460
|
+
}
|
|
446
461
|
acc.abs.push([timestamp, currentlyPainted]);
|
|
447
462
|
acc.rel.push({
|
|
448
463
|
time: timestamp,
|
|
@@ -452,8 +467,10 @@ export class VCObserver {
|
|
|
452
467
|
return acc;
|
|
453
468
|
}, {
|
|
454
469
|
abs: [],
|
|
455
|
-
rel: []
|
|
470
|
+
rel: [],
|
|
471
|
+
speedIndex: 0
|
|
456
472
|
});
|
|
473
|
+
VCEntries.speedIndex = Math.round(VCEntries.speedIndex);
|
|
457
474
|
return {
|
|
458
475
|
VC,
|
|
459
476
|
VCBox,
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
2
|
const EQUALITY_THRESHOLD = 0.1;
|
|
4
3
|
const ANCESTOR_LOOKUP_LIMIT = 10;
|
|
5
4
|
export class SSRPlaceholderHandlers {
|
|
@@ -26,20 +25,15 @@ export class SSRPlaceholderHandlers {
|
|
|
26
25
|
return;
|
|
27
26
|
}
|
|
28
27
|
const rect = this.staticPlaceholders.get(staticKey);
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
if (hasSameSizePosition || this.isDummyRect(rect)) {
|
|
32
|
-
resolve(hasSameSizePosition);
|
|
33
|
-
} else {
|
|
34
|
-
requestAnimationFrame(() => {
|
|
35
|
-
const targetRect = target.getBoundingClientRect();
|
|
36
|
-
const hasSameSizePosition = this.hasSameSizePosition(rect, targetRect);
|
|
37
|
-
resolve(hasSameSizePosition);
|
|
38
|
-
});
|
|
39
|
-
}
|
|
40
|
-
} else {
|
|
41
|
-
const hasSameSizePosition = this.hasSameSizePosition(rect, boundingClientRect);
|
|
28
|
+
const hasSameSizePosition = this.hasSameSizePosition(rect, boundingClientRect);
|
|
29
|
+
if (hasSameSizePosition || this.isDummyRect(rect)) {
|
|
42
30
|
resolve(hasSameSizePosition);
|
|
31
|
+
} else {
|
|
32
|
+
requestAnimationFrame(() => {
|
|
33
|
+
const targetRect = target.getBoundingClientRect();
|
|
34
|
+
const hasSameSizePosition = this.hasSameSizePosition(rect, targetRect);
|
|
35
|
+
resolve(hasSameSizePosition);
|
|
36
|
+
});
|
|
43
37
|
}
|
|
44
38
|
this.callbacks.delete(staticKey);
|
|
45
39
|
}
|
|
@@ -50,20 +44,15 @@ export class SSRPlaceholderHandlers {
|
|
|
50
44
|
return;
|
|
51
45
|
}
|
|
52
46
|
const rect = this.staticPlaceholders.get(key);
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
if (hasSameSizePosition || this.isDummyRect(rect)) {
|
|
56
|
-
resolve(hasSameSizePosition);
|
|
57
|
-
} else {
|
|
58
|
-
requestAnimationFrame(() => {
|
|
59
|
-
const targetRect = target.getBoundingClientRect();
|
|
60
|
-
const hasSameSizePosition = this.hasSameSizePosition(rect, targetRect);
|
|
61
|
-
resolve(hasSameSizePosition);
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
} else {
|
|
65
|
-
const hasSameSizePosition = this.hasSameSizePosition(rect, boundingClientRect);
|
|
47
|
+
const hasSameSizePosition = this.hasSameSizePosition(rect, boundingClientRect);
|
|
48
|
+
if (hasSameSizePosition || this.isDummyRect(rect)) {
|
|
66
49
|
resolve(hasSameSizePosition);
|
|
50
|
+
} else {
|
|
51
|
+
requestAnimationFrame(() => {
|
|
52
|
+
const targetRect = target.getBoundingClientRect();
|
|
53
|
+
const hasSameSizePosition = this.hasSameSizePosition(rect, targetRect);
|
|
54
|
+
resolve(hasSameSizePosition);
|
|
55
|
+
});
|
|
67
56
|
}
|
|
68
57
|
this.staticPlaceholders.delete(staticKey);
|
|
69
58
|
this.reactValidateCallbacks.delete(staticKey);
|
|
@@ -611,6 +611,7 @@ function getPayloadSize(payload) {
|
|
|
611
611
|
return Math.round(new TextEncoder().encode(JSON.stringify(payload)).length / 1024);
|
|
612
612
|
}
|
|
613
613
|
function getStylesheetMetrics() {
|
|
614
|
+
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
|
|
614
615
|
if (!fg('ufo_capture_stylesheet_metrics')) {
|
|
615
616
|
return {};
|
|
616
617
|
}
|
|
@@ -217,9 +217,10 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
217
217
|
} catch (e) {
|
|
218
218
|
/* do nothing */
|
|
219
219
|
}
|
|
220
|
+
var isCalcSpeedIndexEnabled = fg('ufo-calc-speed-index');
|
|
220
221
|
return _objectSpread(_objectSpread(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
|
|
221
222
|
'metrics:vc': VC
|
|
222
|
-
}, "".concat(fullPrefix, "vc:state"), true), "".concat(fullPrefix, "vc:clean"), !abortReasonInfo), "".concat(fullPrefix, "vc:dom"), VCBox), "".concat(fullPrefix, "vc:updates"), VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:size"), viewport), "".concat(fullPrefix, "vc:time"), Math.round(totalTime + (stopTime - startTime))), "".concat(fullPrefix, "vc:total"), totalPainted), "".concat(fullPrefix, "vc:ratios"), ratios), outOfBoundary), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(fullPrefix, "vc:next"), vcNext.VC), "".concat(fullPrefix, "vc:next:updates"), vcNext.VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:next:dom"), vcNext.VCBox), "".concat(fullPrefix, "vc:ignored"), _this.getIgnoredElements(componentsLog)));
|
|
223
|
+
}, "".concat(fullPrefix, "vc:state"), true), "".concat(fullPrefix, "vc:clean"), !abortReasonInfo), "".concat(fullPrefix, "vc:dom"), VCBox), "".concat(fullPrefix, "vc:updates"), VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:size"), viewport), "".concat(fullPrefix, "vc:time"), Math.round(totalTime + (stopTime - startTime))), "".concat(fullPrefix, "vc:total"), totalPainted), "".concat(fullPrefix, "vc:ratios"), ratios), outOfBoundary), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(fullPrefix, "vc:next"), vcNext.VC), "".concat(fullPrefix, "vc:next:updates"), vcNext.VCEntries.rel.slice(0, 50)), "".concat(fullPrefix, "vc:next:dom"), vcNext.VCBox), "".concat(fullPrefix, "vc:ignored"), _this.getIgnoredElements(componentsLog)), "ufo:speedIndex", isCalcSpeedIndexEnabled ? VCEntries.speedIndex : undefined), "ufo:next:speedIndex", isCalcSpeedIndexEnabled ? vcNext.VCEntries.speedIndex : undefined));
|
|
223
224
|
});
|
|
224
225
|
_defineProperty(this, "handleUpdate", function (rawTime, intersectionRect, targetName, element, type, ignoreReason) {
|
|
225
226
|
_this.measureStart();
|
|
@@ -530,10 +531,17 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
530
531
|
});
|
|
531
532
|
var VC = VCObserver.makeVCReturnObj();
|
|
532
533
|
var VCBox = VCObserver.makeVCReturnObj();
|
|
534
|
+
var isCalcSpeedIndexEnabled = fg('ufo-calc-speed-index');
|
|
533
535
|
entries.reduce(function () {
|
|
534
536
|
var acc = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
535
537
|
var v = arguments.length > 1 ? arguments[1] : undefined;
|
|
536
|
-
var
|
|
538
|
+
var currRatio = v[1] / totalPainted;
|
|
539
|
+
var VCRatio = currRatio + acc;
|
|
540
|
+
if (fg('platform_ufo_fix_vc_observer_rounding_error')) {
|
|
541
|
+
var preciseCurrRatio = Math.round(100 * (v[1] / totalPainted));
|
|
542
|
+
var preciseAccRatio = Math.round(acc * 100);
|
|
543
|
+
VCRatio = (preciseCurrRatio + preciseAccRatio) / 100;
|
|
544
|
+
}
|
|
537
545
|
var time = v[0];
|
|
538
546
|
VCObserver.VCParts.forEach(function (key) {
|
|
539
547
|
var value = parseInt(key, 10);
|
|
@@ -548,7 +556,7 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
548
556
|
return VCRatio;
|
|
549
557
|
}, 0);
|
|
550
558
|
var VCEntries = entries.reduce(function (acc, _ref14, i) {
|
|
551
|
-
var _acc$abs, _componentsLog$timest;
|
|
559
|
+
var _acc$abs, _componentsLog$timest, _acc$rel$vc, _acc$rel;
|
|
552
560
|
var _ref15 = _slicedToArray(_ref14, 2),
|
|
553
561
|
timestamp = _ref15[0],
|
|
554
562
|
entryPainted = _ref15[1];
|
|
@@ -557,6 +565,11 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
557
565
|
var logEntry = (_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.map(function (v) {
|
|
558
566
|
return v.targetName;
|
|
559
567
|
});
|
|
568
|
+
var ratioDelta = (currentlyPaintedRatio - ((_acc$rel$vc = (_acc$rel = acc.rel[i - 1]) === null || _acc$rel === void 0 ? void 0 : _acc$rel.vc) !== null && _acc$rel$vc !== void 0 ? _acc$rel$vc : 0)) / 100;
|
|
569
|
+
if (isCalcSpeedIndexEnabled) {
|
|
570
|
+
var speedIndex = timestamp * ratioDelta;
|
|
571
|
+
acc.speedIndex += speedIndex;
|
|
572
|
+
}
|
|
560
573
|
acc.abs.push([timestamp, currentlyPainted]);
|
|
561
574
|
acc.rel.push({
|
|
562
575
|
time: timestamp,
|
|
@@ -566,8 +579,10 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
566
579
|
return acc;
|
|
567
580
|
}, {
|
|
568
581
|
abs: [],
|
|
569
|
-
rel: []
|
|
582
|
+
rel: [],
|
|
583
|
+
speedIndex: 0
|
|
570
584
|
});
|
|
585
|
+
VCEntries.speedIndex = Math.round(VCEntries.speedIndex);
|
|
571
586
|
return {
|
|
572
587
|
VC: VC,
|
|
573
588
|
VCBox: VCBox,
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
2
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
3
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
4
|
var EQUALITY_THRESHOLD = 0.1;
|
|
6
5
|
var ANCESTOR_LOOKUP_LIMIT = 10;
|
|
7
6
|
export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
|
|
@@ -29,20 +28,15 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
|
|
|
29
28
|
return;
|
|
30
29
|
}
|
|
31
30
|
var rect = _this.staticPlaceholders.get(staticKey);
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
_resolve(hasSameSizePosition);
|
|
36
|
-
} else {
|
|
37
|
-
requestAnimationFrame(function () {
|
|
38
|
-
var targetRect = target.getBoundingClientRect();
|
|
39
|
-
var hasSameSizePosition = _this.hasSameSizePosition(rect, targetRect);
|
|
40
|
-
_resolve(hasSameSizePosition);
|
|
41
|
-
});
|
|
42
|
-
}
|
|
31
|
+
var hasSameSizePosition = _this.hasSameSizePosition(rect, boundingClientRect);
|
|
32
|
+
if (hasSameSizePosition || _this.isDummyRect(rect)) {
|
|
33
|
+
_resolve(hasSameSizePosition);
|
|
43
34
|
} else {
|
|
44
|
-
|
|
45
|
-
|
|
35
|
+
requestAnimationFrame(function () {
|
|
36
|
+
var targetRect = target.getBoundingClientRect();
|
|
37
|
+
var hasSameSizePosition = _this.hasSameSizePosition(rect, targetRect);
|
|
38
|
+
_resolve(hasSameSizePosition);
|
|
39
|
+
});
|
|
46
40
|
}
|
|
47
41
|
_this.callbacks.delete(staticKey);
|
|
48
42
|
}
|
|
@@ -53,20 +47,15 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
|
|
|
53
47
|
return;
|
|
54
48
|
}
|
|
55
49
|
var _rect = _this.staticPlaceholders.get(key);
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
_resolve2(_hasSameSizePosition2);
|
|
60
|
-
} else {
|
|
61
|
-
requestAnimationFrame(function () {
|
|
62
|
-
var targetRect = target.getBoundingClientRect();
|
|
63
|
-
var hasSameSizePosition = _this.hasSameSizePosition(_rect, targetRect);
|
|
64
|
-
_resolve2(hasSameSizePosition);
|
|
65
|
-
});
|
|
66
|
-
}
|
|
50
|
+
var _hasSameSizePosition = _this.hasSameSizePosition(_rect, boundingClientRect);
|
|
51
|
+
if (_hasSameSizePosition || _this.isDummyRect(_rect)) {
|
|
52
|
+
_resolve2(_hasSameSizePosition);
|
|
67
53
|
} else {
|
|
68
|
-
|
|
69
|
-
|
|
54
|
+
requestAnimationFrame(function () {
|
|
55
|
+
var targetRect = target.getBoundingClientRect();
|
|
56
|
+
var hasSameSizePosition = _this.hasSameSizePosition(_rect, targetRect);
|
|
57
|
+
_resolve2(hasSameSizePosition);
|
|
58
|
+
});
|
|
70
59
|
}
|
|
71
60
|
_this.staticPlaceholders.delete(staticKey);
|
|
72
61
|
_this.reactValidateCallbacks.delete(staticKey);
|
|
@@ -44,7 +44,7 @@ export type ComponentsLogEntry = {
|
|
|
44
44
|
};
|
|
45
45
|
export type VCIgnoredElement = Pick<ComponentsLogEntry, 'targetName' | 'ignoreReason'>;
|
|
46
46
|
export type VCResult = {
|
|
47
|
-
[key: string]: boolean | number | string | null | VCEntryType[] | VCIgnoredElement[] | {
|
|
47
|
+
[key: string]: boolean | number | string | null | undefined | VCEntryType[] | VCIgnoredElement[] | {
|
|
48
48
|
w: number;
|
|
49
49
|
h: number;
|
|
50
50
|
} | {
|
|
@@ -694,6 +694,7 @@ export declare function createPayloads(interactionId: string, interaction: Inter
|
|
|
694
694
|
'ufo:styleProps'?: undefined;
|
|
695
695
|
'ufo:styleDeclarations'?: undefined;
|
|
696
696
|
'ufo:cssrules'?: undefined;
|
|
697
|
+
'metric:vc90'?: number | null | undefined;
|
|
697
698
|
'metrics:navigation'?: undefined;
|
|
698
699
|
'ssr:success': boolean | undefined;
|
|
699
700
|
'ssr:featureFlags': ssr.SSRFeatureFlags | undefined;
|
|
@@ -1405,6 +1406,7 @@ export declare function createPayloads(interactionId: string, interaction: Inter
|
|
|
1405
1406
|
'ufo:styleProps': number;
|
|
1406
1407
|
'ufo:styleDeclarations': number;
|
|
1407
1408
|
'ufo:cssrules': number;
|
|
1409
|
+
'metric:vc90'?: number | null | undefined;
|
|
1408
1410
|
'metrics:navigation'?: undefined;
|
|
1409
1411
|
'ssr:success': boolean | undefined;
|
|
1410
1412
|
'ssr:featureFlags': ssr.SSRFeatureFlags | undefined;
|
|
@@ -2116,6 +2118,7 @@ export declare function createPayloads(interactionId: string, interaction: Inter
|
|
|
2116
2118
|
'ufo:styleProps'?: undefined;
|
|
2117
2119
|
'ufo:styleDeclarations'?: undefined;
|
|
2118
2120
|
'ufo:cssrules'?: undefined;
|
|
2121
|
+
'metric:vc90'?: number | null | undefined;
|
|
2119
2122
|
'metrics:navigation': {
|
|
2120
2123
|
redirectStart: number;
|
|
2121
2124
|
redirectEnd: number;
|
|
@@ -2848,6 +2851,7 @@ export declare function createPayloads(interactionId: string, interaction: Inter
|
|
|
2848
2851
|
'ufo:styleProps': number;
|
|
2849
2852
|
'ufo:styleDeclarations': number;
|
|
2850
2853
|
'ufo:cssrules': number;
|
|
2854
|
+
'metric:vc90'?: number | null | undefined;
|
|
2851
2855
|
'metrics:navigation': {
|
|
2852
2856
|
redirectStart: number;
|
|
2853
2857
|
redirectEnd: number;
|
|
@@ -3580,6 +3584,7 @@ export declare function createPayloads(interactionId: string, interaction: Inter
|
|
|
3580
3584
|
'ufo:styleProps'?: undefined;
|
|
3581
3585
|
'ufo:styleDeclarations'?: undefined;
|
|
3582
3586
|
'ufo:cssrules'?: undefined;
|
|
3587
|
+
'metric:vc90'?: number | null | undefined;
|
|
3583
3588
|
'metrics:navigation'?: undefined;
|
|
3584
3589
|
'metrics@ttai': {
|
|
3585
3590
|
[key: string]: number;
|
|
@@ -4294,6 +4299,7 @@ export declare function createPayloads(interactionId: string, interaction: Inter
|
|
|
4294
4299
|
'ufo:styleProps': number;
|
|
4295
4300
|
'ufo:styleDeclarations': number;
|
|
4296
4301
|
'ufo:cssrules': number;
|
|
4302
|
+
'metric:vc90'?: number | null | undefined;
|
|
4297
4303
|
'metrics:navigation'?: undefined;
|
|
4298
4304
|
'metrics@ttai': {
|
|
4299
4305
|
[key: string]: number;
|
|
@@ -5008,6 +5014,7 @@ export declare function createPayloads(interactionId: string, interaction: Inter
|
|
|
5008
5014
|
'ufo:styleProps'?: undefined;
|
|
5009
5015
|
'ufo:styleDeclarations'?: undefined;
|
|
5010
5016
|
'ufo:cssrules'?: undefined;
|
|
5017
|
+
'metric:vc90'?: number | null | undefined;
|
|
5011
5018
|
'metrics:navigation': {
|
|
5012
5019
|
redirectStart: number;
|
|
5013
5020
|
redirectEnd: number;
|
|
@@ -5743,6 +5750,7 @@ export declare function createPayloads(interactionId: string, interaction: Inter
|
|
|
5743
5750
|
'ufo:styleProps': number;
|
|
5744
5751
|
'ufo:styleDeclarations': number;
|
|
5745
5752
|
'ufo:cssrules': number;
|
|
5753
|
+
'metric:vc90'?: number | null | undefined;
|
|
5746
5754
|
'metrics:navigation': {
|
|
5747
5755
|
redirectStart: number;
|
|
5748
5756
|
redirectEnd: number;
|
|
@@ -6488,6 +6496,7 @@ export declare function createExperimentalMetricsPayload(interactionId: string,
|
|
|
6488
6496
|
'ufo:styleProps'?: undefined;
|
|
6489
6497
|
'ufo:styleDeclarations'?: undefined;
|
|
6490
6498
|
'ufo:cssrules'?: undefined;
|
|
6499
|
+
'metric:vc90'?: number | null | undefined;
|
|
6491
6500
|
'metrics:navigation'?: undefined;
|
|
6492
6501
|
'ssr:success': boolean | undefined;
|
|
6493
6502
|
'ssr:featureFlags': ssr.SSRFeatureFlags | undefined;
|
|
@@ -7199,6 +7208,7 @@ export declare function createExperimentalMetricsPayload(interactionId: string,
|
|
|
7199
7208
|
'ufo:styleProps': number;
|
|
7200
7209
|
'ufo:styleDeclarations': number;
|
|
7201
7210
|
'ufo:cssrules': number;
|
|
7211
|
+
'metric:vc90'?: number | null | undefined;
|
|
7202
7212
|
'metrics:navigation'?: undefined;
|
|
7203
7213
|
'ssr:success': boolean | undefined;
|
|
7204
7214
|
'ssr:featureFlags': ssr.SSRFeatureFlags | undefined;
|
|
@@ -7910,6 +7920,7 @@ export declare function createExperimentalMetricsPayload(interactionId: string,
|
|
|
7910
7920
|
'ufo:styleProps'?: undefined;
|
|
7911
7921
|
'ufo:styleDeclarations'?: undefined;
|
|
7912
7922
|
'ufo:cssrules'?: undefined;
|
|
7923
|
+
'metric:vc90'?: number | null | undefined;
|
|
7913
7924
|
'metrics:navigation': {
|
|
7914
7925
|
redirectStart: number;
|
|
7915
7926
|
redirectEnd: number;
|
|
@@ -8642,6 +8653,7 @@ export declare function createExperimentalMetricsPayload(interactionId: string,
|
|
|
8642
8653
|
'ufo:styleProps': number;
|
|
8643
8654
|
'ufo:styleDeclarations': number;
|
|
8644
8655
|
'ufo:cssrules': number;
|
|
8656
|
+
'metric:vc90'?: number | null | undefined;
|
|
8645
8657
|
'metrics:navigation': {
|
|
8646
8658
|
redirectStart: number;
|
|
8647
8659
|
redirectEnd: number;
|
|
@@ -9374,6 +9386,7 @@ export declare function createExperimentalMetricsPayload(interactionId: string,
|
|
|
9374
9386
|
'ufo:styleProps'?: undefined;
|
|
9375
9387
|
'ufo:styleDeclarations'?: undefined;
|
|
9376
9388
|
'ufo:cssrules'?: undefined;
|
|
9389
|
+
'metric:vc90'?: number | null | undefined;
|
|
9377
9390
|
'metrics:navigation'?: undefined;
|
|
9378
9391
|
'metrics@ttai': {
|
|
9379
9392
|
[key: string]: number;
|
|
@@ -10088,6 +10101,7 @@ export declare function createExperimentalMetricsPayload(interactionId: string,
|
|
|
10088
10101
|
'ufo:styleProps': number;
|
|
10089
10102
|
'ufo:styleDeclarations': number;
|
|
10090
10103
|
'ufo:cssrules': number;
|
|
10104
|
+
'metric:vc90'?: number | null | undefined;
|
|
10091
10105
|
'metrics:navigation'?: undefined;
|
|
10092
10106
|
'metrics@ttai': {
|
|
10093
10107
|
[key: string]: number;
|
|
@@ -10802,6 +10816,7 @@ export declare function createExperimentalMetricsPayload(interactionId: string,
|
|
|
10802
10816
|
'ufo:styleProps'?: undefined;
|
|
10803
10817
|
'ufo:styleDeclarations'?: undefined;
|
|
10804
10818
|
'ufo:cssrules'?: undefined;
|
|
10819
|
+
'metric:vc90'?: number | null | undefined;
|
|
10805
10820
|
'metrics:navigation': {
|
|
10806
10821
|
redirectStart: number;
|
|
10807
10822
|
redirectEnd: number;
|
|
@@ -11537,6 +11552,7 @@ export declare function createExperimentalMetricsPayload(interactionId: string,
|
|
|
11537
11552
|
'ufo:styleProps': number;
|
|
11538
11553
|
'ufo:styleDeclarations': number;
|
|
11539
11554
|
'ufo:cssrules': number;
|
|
11555
|
+
'metric:vc90'?: number | null | undefined;
|
|
11540
11556
|
'metrics:navigation': {
|
|
11541
11557
|
redirectStart: number;
|
|
11542
11558
|
redirectEnd: number;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
1
|
+
import React, { type ReactNode } from 'react';
|
|
2
2
|
/**
|
|
3
3
|
* Prevent a subtree from holding up an interaction
|
|
4
4
|
* Use this when you have a component which loads in late, but
|
|
@@ -20,4 +20,4 @@ import { type ReactNode } from 'react';
|
|
|
20
20
|
export default function UFOInteractionIgnore({ children, ignore, }: {
|
|
21
21
|
children?: ReactNode;
|
|
22
22
|
ignore?: boolean;
|
|
23
|
-
}): JSX.Element;
|
|
23
|
+
}): React.JSX.Element;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
1
|
+
import React, { type ReactNode } from 'react';
|
|
2
2
|
/**
|
|
3
3
|
* Annotate part of the react tree with a product name
|
|
4
4
|
* ```
|
|
@@ -10,4 +10,4 @@ import { type ReactNode } from 'react';
|
|
|
10
10
|
export default function UFOLabel({ name, children }: {
|
|
11
11
|
name: string;
|
|
12
12
|
children: ReactNode;
|
|
13
|
-
}): JSX.Element;
|
|
13
|
+
}): React.JSX.Element;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
1
|
+
import React, { type ReactNode } from 'react';
|
|
2
2
|
/**
|
|
3
3
|
* Render this whenever you're loading.
|
|
4
4
|
*
|
|
@@ -49,5 +49,5 @@ type Props = {
|
|
|
49
49
|
children?: ReactNode;
|
|
50
50
|
experimental?: boolean;
|
|
51
51
|
};
|
|
52
|
-
export default function UFOLoadHold({ children, name, hold, experimental }: Props): JSX.Element | null;
|
|
52
|
+
export default function UFOLoadHold({ children, name, hold, experimental }: Props): React.JSX.Element | null;
|
|
53
53
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { type LazySuspenseProps } from './loosely-lazy';
|
|
3
3
|
/**
|
|
4
4
|
* Provides a placeholder for lazily loaded content, improving perceived performance.
|
|
@@ -10,4 +10,4 @@ export default function Placeholder({ name, children, fallback, }: {
|
|
|
10
10
|
name: string;
|
|
11
11
|
children?: LazySuspenseProps['children'];
|
|
12
12
|
fallback?: LazySuspenseProps['fallback'];
|
|
13
|
-
}): JSX.Element;
|
|
13
|
+
}): React.JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import type { LazySuspenseProps } from './types';
|
|
3
3
|
export declare const LazySuspense: {
|
|
4
|
-
({ fallback, children, name }: LazySuspenseProps): JSX.Element;
|
|
4
|
+
({ fallback, children, name }: LazySuspenseProps): React.JSX.Element;
|
|
5
5
|
displayName: string;
|
|
6
6
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
2
|
type Props = {
|
|
3
3
|
segmentName: string;
|
|
4
4
|
};
|
|
5
|
-
export declare function SegmentHighlight({ segmentName }: Props): JSX.Element | null;
|
|
5
|
+
export declare function SegmentHighlight({ segmentName }: Props): React.JSX.Element | null;
|
|
6
6
|
export {};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
1
|
+
import React, { type ReactNode } from 'react';
|
|
2
2
|
type Props = {
|
|
3
3
|
name: string;
|
|
4
4
|
children: ReactNode;
|
|
5
5
|
};
|
|
6
6
|
/** A portion of the page we apply measurement to */
|
|
7
|
-
export default function UFOSegment({ name: segmentName, children }: Props): JSX.Element;
|
|
7
|
+
export default function UFOSegment({ name: segmentName, children }: Props): React.JSX.Element;
|
|
8
8
|
export {};
|
|
@@ -6,5 +6,5 @@ export declare const MEDIA_WRAPPER_TAG = "data-media-vc-wrapper";
|
|
|
6
6
|
export declare const VcMediaWrapperProps: {
|
|
7
7
|
"data-media-vc-wrapper": boolean;
|
|
8
8
|
};
|
|
9
|
-
export default function MediaWrapper({ children }: Props): JSX.Element;
|
|
9
|
+
export default function MediaWrapper({ children }: Props): React.JSX.Element;
|
|
10
10
|
export {};
|
|
@@ -44,7 +44,7 @@ export type ComponentsLogEntry = {
|
|
|
44
44
|
};
|
|
45
45
|
export type VCIgnoredElement = Pick<ComponentsLogEntry, 'targetName' | 'ignoreReason'>;
|
|
46
46
|
export type VCResult = {
|
|
47
|
-
[key: string]: boolean | number | string | null | VCEntryType[] | VCIgnoredElement[] | {
|
|
47
|
+
[key: string]: boolean | number | string | null | undefined | VCEntryType[] | VCIgnoredElement[] | {
|
|
48
48
|
w: number;
|
|
49
49
|
h: number;
|
|
50
50
|
} | {
|
|
@@ -694,6 +694,7 @@ export declare function createPayloads(interactionId: string, interaction: Inter
|
|
|
694
694
|
'ufo:styleProps'?: undefined;
|
|
695
695
|
'ufo:styleDeclarations'?: undefined;
|
|
696
696
|
'ufo:cssrules'?: undefined;
|
|
697
|
+
'metric:vc90'?: number | null | undefined;
|
|
697
698
|
'metrics:navigation'?: undefined;
|
|
698
699
|
'ssr:success': boolean | undefined;
|
|
699
700
|
'ssr:featureFlags': ssr.SSRFeatureFlags | undefined;
|
|
@@ -1405,6 +1406,7 @@ export declare function createPayloads(interactionId: string, interaction: Inter
|
|
|
1405
1406
|
'ufo:styleProps': number;
|
|
1406
1407
|
'ufo:styleDeclarations': number;
|
|
1407
1408
|
'ufo:cssrules': number;
|
|
1409
|
+
'metric:vc90'?: number | null | undefined;
|
|
1408
1410
|
'metrics:navigation'?: undefined;
|
|
1409
1411
|
'ssr:success': boolean | undefined;
|
|
1410
1412
|
'ssr:featureFlags': ssr.SSRFeatureFlags | undefined;
|
|
@@ -2116,6 +2118,7 @@ export declare function createPayloads(interactionId: string, interaction: Inter
|
|
|
2116
2118
|
'ufo:styleProps'?: undefined;
|
|
2117
2119
|
'ufo:styleDeclarations'?: undefined;
|
|
2118
2120
|
'ufo:cssrules'?: undefined;
|
|
2121
|
+
'metric:vc90'?: number | null | undefined;
|
|
2119
2122
|
'metrics:navigation': {
|
|
2120
2123
|
redirectStart: number;
|
|
2121
2124
|
redirectEnd: number;
|
|
@@ -2848,6 +2851,7 @@ export declare function createPayloads(interactionId: string, interaction: Inter
|
|
|
2848
2851
|
'ufo:styleProps': number;
|
|
2849
2852
|
'ufo:styleDeclarations': number;
|
|
2850
2853
|
'ufo:cssrules': number;
|
|
2854
|
+
'metric:vc90'?: number | null | undefined;
|
|
2851
2855
|
'metrics:navigation': {
|
|
2852
2856
|
redirectStart: number;
|
|
2853
2857
|
redirectEnd: number;
|
|
@@ -3580,6 +3584,7 @@ export declare function createPayloads(interactionId: string, interaction: Inter
|
|
|
3580
3584
|
'ufo:styleProps'?: undefined;
|
|
3581
3585
|
'ufo:styleDeclarations'?: undefined;
|
|
3582
3586
|
'ufo:cssrules'?: undefined;
|
|
3587
|
+
'metric:vc90'?: number | null | undefined;
|
|
3583
3588
|
'metrics:navigation'?: undefined;
|
|
3584
3589
|
'metrics@ttai': {
|
|
3585
3590
|
[key: string]: number;
|
|
@@ -4294,6 +4299,7 @@ export declare function createPayloads(interactionId: string, interaction: Inter
|
|
|
4294
4299
|
'ufo:styleProps': number;
|
|
4295
4300
|
'ufo:styleDeclarations': number;
|
|
4296
4301
|
'ufo:cssrules': number;
|
|
4302
|
+
'metric:vc90'?: number | null | undefined;
|
|
4297
4303
|
'metrics:navigation'?: undefined;
|
|
4298
4304
|
'metrics@ttai': {
|
|
4299
4305
|
[key: string]: number;
|
|
@@ -5008,6 +5014,7 @@ export declare function createPayloads(interactionId: string, interaction: Inter
|
|
|
5008
5014
|
'ufo:styleProps'?: undefined;
|
|
5009
5015
|
'ufo:styleDeclarations'?: undefined;
|
|
5010
5016
|
'ufo:cssrules'?: undefined;
|
|
5017
|
+
'metric:vc90'?: number | null | undefined;
|
|
5011
5018
|
'metrics:navigation': {
|
|
5012
5019
|
redirectStart: number;
|
|
5013
5020
|
redirectEnd: number;
|
|
@@ -5743,6 +5750,7 @@ export declare function createPayloads(interactionId: string, interaction: Inter
|
|
|
5743
5750
|
'ufo:styleProps': number;
|
|
5744
5751
|
'ufo:styleDeclarations': number;
|
|
5745
5752
|
'ufo:cssrules': number;
|
|
5753
|
+
'metric:vc90'?: number | null | undefined;
|
|
5746
5754
|
'metrics:navigation': {
|
|
5747
5755
|
redirectStart: number;
|
|
5748
5756
|
redirectEnd: number;
|
|
@@ -6488,6 +6496,7 @@ export declare function createExperimentalMetricsPayload(interactionId: string,
|
|
|
6488
6496
|
'ufo:styleProps'?: undefined;
|
|
6489
6497
|
'ufo:styleDeclarations'?: undefined;
|
|
6490
6498
|
'ufo:cssrules'?: undefined;
|
|
6499
|
+
'metric:vc90'?: number | null | undefined;
|
|
6491
6500
|
'metrics:navigation'?: undefined;
|
|
6492
6501
|
'ssr:success': boolean | undefined;
|
|
6493
6502
|
'ssr:featureFlags': ssr.SSRFeatureFlags | undefined;
|
|
@@ -7199,6 +7208,7 @@ export declare function createExperimentalMetricsPayload(interactionId: string,
|
|
|
7199
7208
|
'ufo:styleProps': number;
|
|
7200
7209
|
'ufo:styleDeclarations': number;
|
|
7201
7210
|
'ufo:cssrules': number;
|
|
7211
|
+
'metric:vc90'?: number | null | undefined;
|
|
7202
7212
|
'metrics:navigation'?: undefined;
|
|
7203
7213
|
'ssr:success': boolean | undefined;
|
|
7204
7214
|
'ssr:featureFlags': ssr.SSRFeatureFlags | undefined;
|
|
@@ -7910,6 +7920,7 @@ export declare function createExperimentalMetricsPayload(interactionId: string,
|
|
|
7910
7920
|
'ufo:styleProps'?: undefined;
|
|
7911
7921
|
'ufo:styleDeclarations'?: undefined;
|
|
7912
7922
|
'ufo:cssrules'?: undefined;
|
|
7923
|
+
'metric:vc90'?: number | null | undefined;
|
|
7913
7924
|
'metrics:navigation': {
|
|
7914
7925
|
redirectStart: number;
|
|
7915
7926
|
redirectEnd: number;
|
|
@@ -8642,6 +8653,7 @@ export declare function createExperimentalMetricsPayload(interactionId: string,
|
|
|
8642
8653
|
'ufo:styleProps': number;
|
|
8643
8654
|
'ufo:styleDeclarations': number;
|
|
8644
8655
|
'ufo:cssrules': number;
|
|
8656
|
+
'metric:vc90'?: number | null | undefined;
|
|
8645
8657
|
'metrics:navigation': {
|
|
8646
8658
|
redirectStart: number;
|
|
8647
8659
|
redirectEnd: number;
|
|
@@ -9374,6 +9386,7 @@ export declare function createExperimentalMetricsPayload(interactionId: string,
|
|
|
9374
9386
|
'ufo:styleProps'?: undefined;
|
|
9375
9387
|
'ufo:styleDeclarations'?: undefined;
|
|
9376
9388
|
'ufo:cssrules'?: undefined;
|
|
9389
|
+
'metric:vc90'?: number | null | undefined;
|
|
9377
9390
|
'metrics:navigation'?: undefined;
|
|
9378
9391
|
'metrics@ttai': {
|
|
9379
9392
|
[key: string]: number;
|
|
@@ -10088,6 +10101,7 @@ export declare function createExperimentalMetricsPayload(interactionId: string,
|
|
|
10088
10101
|
'ufo:styleProps': number;
|
|
10089
10102
|
'ufo:styleDeclarations': number;
|
|
10090
10103
|
'ufo:cssrules': number;
|
|
10104
|
+
'metric:vc90'?: number | null | undefined;
|
|
10091
10105
|
'metrics:navigation'?: undefined;
|
|
10092
10106
|
'metrics@ttai': {
|
|
10093
10107
|
[key: string]: number;
|
|
@@ -10802,6 +10816,7 @@ export declare function createExperimentalMetricsPayload(interactionId: string,
|
|
|
10802
10816
|
'ufo:styleProps'?: undefined;
|
|
10803
10817
|
'ufo:styleDeclarations'?: undefined;
|
|
10804
10818
|
'ufo:cssrules'?: undefined;
|
|
10819
|
+
'metric:vc90'?: number | null | undefined;
|
|
10805
10820
|
'metrics:navigation': {
|
|
10806
10821
|
redirectStart: number;
|
|
10807
10822
|
redirectEnd: number;
|
|
@@ -11537,6 +11552,7 @@ export declare function createExperimentalMetricsPayload(interactionId: string,
|
|
|
11537
11552
|
'ufo:styleProps': number;
|
|
11538
11553
|
'ufo:styleDeclarations': number;
|
|
11539
11554
|
'ufo:cssrules': number;
|
|
11555
|
+
'metric:vc90'?: number | null | undefined;
|
|
11540
11556
|
'metrics:navigation': {
|
|
11541
11557
|
redirectStart: number;
|
|
11542
11558
|
redirectEnd: number;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
1
|
+
import React, { type ReactNode } from 'react';
|
|
2
2
|
/**
|
|
3
3
|
* Prevent a subtree from holding up an interaction
|
|
4
4
|
* Use this when you have a component which loads in late, but
|
|
@@ -20,4 +20,4 @@ import { type ReactNode } from 'react';
|
|
|
20
20
|
export default function UFOInteractionIgnore({ children, ignore, }: {
|
|
21
21
|
children?: ReactNode;
|
|
22
22
|
ignore?: boolean;
|
|
23
|
-
}): JSX.Element;
|
|
23
|
+
}): React.JSX.Element;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
1
|
+
import React, { type ReactNode } from 'react';
|
|
2
2
|
/**
|
|
3
3
|
* Annotate part of the react tree with a product name
|
|
4
4
|
* ```
|
|
@@ -10,4 +10,4 @@ import { type ReactNode } from 'react';
|
|
|
10
10
|
export default function UFOLabel({ name, children }: {
|
|
11
11
|
name: string;
|
|
12
12
|
children: ReactNode;
|
|
13
|
-
}): JSX.Element;
|
|
13
|
+
}): React.JSX.Element;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
1
|
+
import React, { type ReactNode } from 'react';
|
|
2
2
|
/**
|
|
3
3
|
* Render this whenever you're loading.
|
|
4
4
|
*
|
|
@@ -49,5 +49,5 @@ type Props = {
|
|
|
49
49
|
children?: ReactNode;
|
|
50
50
|
experimental?: boolean;
|
|
51
51
|
};
|
|
52
|
-
export default function UFOLoadHold({ children, name, hold, experimental }: Props): JSX.Element | null;
|
|
52
|
+
export default function UFOLoadHold({ children, name, hold, experimental }: Props): React.JSX.Element | null;
|
|
53
53
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { type LazySuspenseProps } from './loosely-lazy';
|
|
3
3
|
/**
|
|
4
4
|
* Provides a placeholder for lazily loaded content, improving perceived performance.
|
|
@@ -10,4 +10,4 @@ export default function Placeholder({ name, children, fallback, }: {
|
|
|
10
10
|
name: string;
|
|
11
11
|
children?: LazySuspenseProps['children'];
|
|
12
12
|
fallback?: LazySuspenseProps['fallback'];
|
|
13
|
-
}): JSX.Element;
|
|
13
|
+
}): React.JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import type { LazySuspenseProps } from './types';
|
|
3
3
|
export declare const LazySuspense: {
|
|
4
|
-
({ fallback, children, name }: LazySuspenseProps): JSX.Element;
|
|
4
|
+
({ fallback, children, name }: LazySuspenseProps): React.JSX.Element;
|
|
5
5
|
displayName: string;
|
|
6
6
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
2
|
type Props = {
|
|
3
3
|
segmentName: string;
|
|
4
4
|
};
|
|
5
|
-
export declare function SegmentHighlight({ segmentName }: Props): JSX.Element | null;
|
|
5
|
+
export declare function SegmentHighlight({ segmentName }: Props): React.JSX.Element | null;
|
|
6
6
|
export {};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
1
|
+
import React, { type ReactNode } from 'react';
|
|
2
2
|
type Props = {
|
|
3
3
|
name: string;
|
|
4
4
|
children: ReactNode;
|
|
5
5
|
};
|
|
6
6
|
/** A portion of the page we apply measurement to */
|
|
7
|
-
export default function UFOSegment({ name: segmentName, children }: Props): JSX.Element;
|
|
7
|
+
export default function UFOSegment({ name: segmentName, children }: Props): React.JSX.Element;
|
|
8
8
|
export {};
|
|
@@ -6,5 +6,5 @@ export declare const MEDIA_WRAPPER_TAG = "data-media-vc-wrapper";
|
|
|
6
6
|
export declare const VcMediaWrapperProps: {
|
|
7
7
|
"data-media-vc-wrapper": boolean;
|
|
8
8
|
};
|
|
9
|
-
export default function MediaWrapper({ children }: Props): JSX.Element;
|
|
9
|
+
export default function MediaWrapper({ children }: Props): React.JSX.Element;
|
|
10
10
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/react-ufo",
|
|
3
|
-
"version": "2.14.
|
|
3
|
+
"version": "2.14.3",
|
|
4
4
|
"description": "Parts of React UFO that are publicly available",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -87,7 +87,9 @@
|
|
|
87
87
|
},
|
|
88
88
|
"devDependencies": {
|
|
89
89
|
"@af/integration-testing": "*",
|
|
90
|
-
"@testing-library/react": "^13.4.0"
|
|
90
|
+
"@testing-library/react": "^13.4.0",
|
|
91
|
+
"@types/is-ci": "^3.0.0",
|
|
92
|
+
"is-ci": "^3.0.1"
|
|
91
93
|
},
|
|
92
94
|
"techstack": {
|
|
93
95
|
"@atlassian/frontend": {
|
|
@@ -125,13 +127,13 @@
|
|
|
125
127
|
}
|
|
126
128
|
},
|
|
127
129
|
"platform-feature-flags": {
|
|
128
|
-
"
|
|
130
|
+
"platform_ufo_fix_vc_observer_rounding_error": {
|
|
129
131
|
"type": "boolean"
|
|
130
132
|
},
|
|
131
|
-
"
|
|
133
|
+
"platform_ufo_AFO-3379_fix_default_interaction": {
|
|
132
134
|
"type": "boolean"
|
|
133
135
|
},
|
|
134
|
-
"
|
|
136
|
+
"platform_editor_ed-25937_ignore_mutations_for_ttvc": {
|
|
135
137
|
"type": "boolean"
|
|
136
138
|
},
|
|
137
139
|
"platform-ufo-invisible-element-vc-calculations": {
|
|
@@ -148,6 +150,9 @@
|
|
|
148
150
|
},
|
|
149
151
|
"ufo-remove-vc-component-observations-after-ttai": {
|
|
150
152
|
"type": "boolean"
|
|
153
|
+
},
|
|
154
|
+
"ufo-calc-speed-index": {
|
|
155
|
+
"type": "boolean"
|
|
151
156
|
}
|
|
152
157
|
}
|
|
153
158
|
}
|