@atlaskit/react-ufo 2.4.7 → 2.5.1
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 +23 -0
- package/dist/cjs/additional-payload/utils/lighthouse-metrics/utils/buffer/index.js +2 -4
- package/dist/cjs/common/constants.js +2 -1
- package/dist/cjs/config/index.js +18 -40
- package/dist/cjs/create-payload/common/utils/index.js +1 -85
- package/dist/cjs/create-payload/index.js +77 -37
- package/dist/cjs/interaction-metrics/common/constants.js +1 -7
- package/dist/cjs/interaction-metrics/index.js +205 -140
- package/dist/cjs/interaction-metrics/post-interaction-log.js +1 -2
- package/dist/cjs/interaction-metrics-init/index.js +9 -27
- package/dist/cjs/load-hold/UFOLoadHold.js +4 -3
- package/dist/cjs/segment/segment.js +9 -7
- package/dist/cjs/trace-pageload/index.js +1 -2
- package/dist/cjs/vc/vc-observer/index.js +50 -38
- package/dist/cjs/vc/vc-observer/observers/editor-lnv/index.js +1 -2
- package/dist/cjs/vc/vc-observer/observers/editor-lnv/test-utils.js +1 -2
- package/dist/cjs/vc/vc-observer/observers/index.js +1 -2
- package/dist/cjs/vc/vc-observer/observers/ssr-placeholders/index.js +1 -2
- package/dist/es2019/common/constants.js +3 -1
- package/dist/es2019/config/index.js +0 -22
- package/dist/es2019/create-payload/common/utils/index.js +1 -86
- package/dist/es2019/create-payload/index.js +74 -28
- package/dist/es2019/interaction-metrics/common/constants.js +0 -6
- package/dist/es2019/interaction-metrics/index.js +130 -93
- package/dist/es2019/interaction-metrics-init/index.js +8 -21
- package/dist/es2019/load-hold/UFOLoadHold.js +4 -3
- package/dist/es2019/segment/segment.js +12 -6
- package/dist/es2019/trace-pageload/index.js +1 -1
- package/dist/es2019/vc/vc-observer/index.js +17 -5
- package/dist/esm/additional-payload/utils/lighthouse-metrics/utils/buffer/index.js +2 -4
- package/dist/esm/common/constants.js +3 -1
- package/dist/esm/config/index.js +18 -39
- package/dist/esm/create-payload/common/utils/index.js +1 -80
- package/dist/esm/create-payload/index.js +75 -33
- package/dist/esm/interaction-metrics/common/constants.js +0 -6
- package/dist/esm/interaction-metrics/index.js +157 -88
- package/dist/esm/interaction-metrics/post-interaction-log.js +1 -2
- package/dist/esm/interaction-metrics-init/index.js +10 -24
- package/dist/esm/load-hold/UFOLoadHold.js +4 -3
- package/dist/esm/segment/segment.js +9 -7
- package/dist/esm/trace-pageload/index.js +1 -1
- package/dist/esm/vc/vc-observer/index.js +50 -38
- package/dist/esm/vc/vc-observer/observers/editor-lnv/index.js +1 -2
- package/dist/esm/vc/vc-observer/observers/editor-lnv/test-utils.js +1 -2
- package/dist/esm/vc/vc-observer/observers/index.js +1 -2
- package/dist/esm/vc/vc-observer/observers/ssr-placeholders/index.js +1 -2
- package/dist/types/common/common/types.d.ts +4 -6
- package/dist/types/config/index.d.ts +0 -6
- package/dist/types/create-payload/common/utils/index.d.ts +0 -12
- package/dist/types/create-payload/index.d.ts +5660 -13
- package/dist/types/interaction-metrics/common/constants.d.ts +1 -31
- package/dist/types/interaction-metrics/index.d.ts +15 -4
- package/dist/types/load-hold/UFOLoadHold.d.ts +2 -1
- package/dist/types/trace-pageload/index.d.ts +0 -1
- package/dist/types/vc/vc-observer/index.d.ts +1 -1
- package/dist/types-ts4.5/common/common/types.d.ts +4 -6
- package/dist/types-ts4.5/config/index.d.ts +0 -6
- package/dist/types-ts4.5/create-payload/common/utils/index.d.ts +0 -12
- package/dist/types-ts4.5/create-payload/index.d.ts +5660 -13
- package/dist/types-ts4.5/interaction-metrics/common/constants.d.ts +1 -31
- package/dist/types-ts4.5/interaction-metrics/index.d.ts +15 -4
- package/dist/types-ts4.5/load-hold/UFOLoadHold.d.ts +2 -1
- package/dist/types-ts4.5/trace-pageload/index.d.ts +0 -1
- package/dist/types-ts4.5/vc/vc-observer/index.d.ts +1 -1
- package/package.json +6 -5
- package/create-experimental-interaction-metrics-payload/package.json +0 -15
- package/dist/cjs/create-experimental-interaction-metrics-payload/index.js +0 -89
- package/dist/cjs/interaction-metrics/common/index.js +0 -151
- package/dist/es2019/create-experimental-interaction-metrics-payload/index.js +0 -67
- package/dist/es2019/interaction-metrics/common/index.js +0 -103
- package/dist/esm/create-experimental-interaction-metrics-payload/index.js +0 -81
- package/dist/esm/interaction-metrics/common/index.js +0 -132
- package/dist/types/create-experimental-interaction-metrics-payload/index.d.ts +0 -31
- package/dist/types/interaction-metrics/common/index.d.ts +0 -16
- package/dist/types-ts4.5/create-experimental-interaction-metrics-payload/index.d.ts +0 -31
- package/dist/types-ts4.5/interaction-metrics/common/index.d.ts +0 -16
|
@@ -26,14 +26,6 @@ function sinkInteraction(instance, payloadPackage) {
|
|
|
26
26
|
});
|
|
27
27
|
});
|
|
28
28
|
}
|
|
29
|
-
function sinkExperimentalInteractionMetrics(instance, payloadPackage) {
|
|
30
|
-
(0, _interactionMetrics.sinkExperimentalHandler)(function (interactionId, interaction) {
|
|
31
|
-
(0, _scheduler.unstable_scheduleCallback)(_scheduler.unstable_IdlePriority, function () {
|
|
32
|
-
var payload = payloadPackage.createExperimentalInteractionMetricsPayload(interactionId, interaction);
|
|
33
|
-
instance.sendOperationalEvent(payload);
|
|
34
|
-
});
|
|
35
|
-
});
|
|
36
|
-
}
|
|
37
29
|
function sinkPostInteractionLog(instance, createPostInteractionLogPayload) {
|
|
38
30
|
(0, _interactionMetrics.sinkPostInteractionLogHandler)(function (logOutput) {
|
|
39
31
|
(0, _scheduler.unstable_scheduleCallback)(_scheduler.unstable_IdlePriority, function () {
|
|
@@ -64,43 +56,33 @@ var init = exports.init = function init(analyticsWebClientAsync, config) {
|
|
|
64
56
|
_interactionMetrics.postInteractionLog.startVCObserver({
|
|
65
57
|
startTime: 0
|
|
66
58
|
});
|
|
67
|
-
_interactionMetrics.experimentalInteractionLog.initializeVCObserver(vcOptions).startVCObserver({
|
|
68
|
-
startTime: 0
|
|
69
|
-
});
|
|
70
59
|
}
|
|
71
60
|
(0, _hiddenTiming.setupHiddenTimingCapture)();
|
|
72
61
|
(0, _additionalPayload.startLighthouseObserver)();
|
|
73
62
|
initialized = true;
|
|
74
|
-
Promise.all([analyticsWebClientAsync,
|
|
63
|
+
Promise.all([analyticsWebClientAsync, // eslint-disable-next-line import/dynamic-import-chunkname
|
|
64
|
+
Promise.resolve().then(function () {
|
|
75
65
|
return _interopRequireWildcard(require( /* webpackChunkName: "create-payloads" */'../create-payload'));
|
|
76
|
-
}),
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
return _interopRequireWildcard(require( /* webpackChunkName: "create-post-interaction-log-payload" */'../create-post-interaction-log-payload'));
|
|
66
|
+
}), // eslint-disable-next-line import/dynamic-import-chunkname
|
|
67
|
+
Promise.resolve().then(function () {
|
|
68
|
+
return _interopRequireWildcard(require( /* webpackChunkName: "create-post-intreaction-log-payload" */'../create-post-interaction-log-payload'));
|
|
80
69
|
})]).then(function (_ref) {
|
|
81
|
-
var _ref2 = (0, _slicedToArray2.default)(_ref,
|
|
70
|
+
var _ref2 = (0, _slicedToArray2.default)(_ref, 3),
|
|
82
71
|
awc = _ref2[0],
|
|
83
72
|
payloadPackage = _ref2[1],
|
|
84
|
-
|
|
85
|
-
createPostInteractionLogPayloadPackage = _ref2[3];
|
|
73
|
+
createPostInteractionLogPayloadPackage = _ref2[2];
|
|
86
74
|
if (awc.getAnalyticsWebClientPromise) {
|
|
87
75
|
awc.getAnalyticsWebClientPromise().then(function (client) {
|
|
88
|
-
var _config$
|
|
76
|
+
var _config$postInteracti;
|
|
89
77
|
var instance = client.getInstance();
|
|
90
78
|
sinkInteraction(instance, payloadPackage);
|
|
91
|
-
if (config !== null && config !== void 0 && (_config$experimentalI = config.experimentalInteractionMetrics) !== null && _config$experimentalI !== void 0 && _config$experimentalI.enabled) {
|
|
92
|
-
sinkExperimentalInteractionMetrics(instance, createExperimentalInteractionMetricsPayload);
|
|
93
|
-
}
|
|
94
79
|
if ((_config$postInteracti = config.postInteractionLog) !== null && _config$postInteracti !== void 0 && _config$postInteracti.enabled) {
|
|
95
80
|
sinkPostInteractionLog(instance, createPostInteractionLogPayloadPackage.default);
|
|
96
81
|
}
|
|
97
82
|
});
|
|
98
83
|
} else if (awc.sendOperationalEvent) {
|
|
99
|
-
var _config$
|
|
84
|
+
var _config$postInteracti2;
|
|
100
85
|
sinkInteraction(awc, payloadPackage);
|
|
101
|
-
if (config !== null && config !== void 0 && (_config$experimentalI2 = config.experimentalInteractionMetrics) !== null && _config$experimentalI2 !== void 0 && _config$experimentalI2.enabled) {
|
|
102
|
-
sinkExperimentalInteractionMetrics(awc, createExperimentalInteractionMetricsPayload);
|
|
103
|
-
}
|
|
104
86
|
if ((_config$postInteracti2 = config.postInteractionLog) !== null && _config$postInteracti2 !== void 0 && _config$postInteracti2.enabled) {
|
|
105
87
|
sinkPostInteractionLog(awc, createPostInteractionLogPayloadPackage.default);
|
|
106
88
|
}
|
|
@@ -32,7 +32,8 @@ var useLayoutEffectSAFE = typeof window === 'undefined' ? _react.useEffect : _re
|
|
|
32
32
|
* return (
|
|
33
33
|
* <>
|
|
34
34
|
* <Skeleton />
|
|
35
|
-
* <UFOLoadHold name="card"
|
|
35
|
+
* <UFOLoadHold name="card">
|
|
36
|
+
* </UFOLoadHold>
|
|
36
37
|
* )
|
|
37
38
|
* }
|
|
38
39
|
* ```
|
|
@@ -67,8 +68,8 @@ function UFOLoadHold(_ref) {
|
|
|
67
68
|
// react-18: useId instead
|
|
68
69
|
var context = (0, _react.useContext)(_interactionContext.default);
|
|
69
70
|
useLayoutEffectSAFE(function () {
|
|
70
|
-
if (hold && context != null) {
|
|
71
|
-
return context.hold(name
|
|
71
|
+
if (hold && !experimental && context != null) {
|
|
72
|
+
return context.hold(name);
|
|
72
73
|
}
|
|
73
74
|
}, [hold, context, name]);
|
|
74
75
|
|
|
@@ -91,14 +91,15 @@ function UFOSegment(_ref) {
|
|
|
91
91
|
}
|
|
92
92
|
}
|
|
93
93
|
}
|
|
94
|
-
function _internalHold(labelStack, name
|
|
95
|
-
|
|
94
|
+
function _internalHold(labelStack, name
|
|
95
|
+
// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
|
|
96
|
+
) {
|
|
96
97
|
if (interactionId.current != null) {
|
|
97
98
|
if (parentContext) {
|
|
98
|
-
return parentContext._internalHold(labelStack, name
|
|
99
|
+
return parentContext._internalHold(labelStack, name);
|
|
99
100
|
} else {
|
|
100
101
|
var capturedInteractionId = interactionId.current;
|
|
101
|
-
var disposeHold = (0, _interactionMetrics.addHold)(interactionId.current, labelStack, name
|
|
102
|
+
var disposeHold = (0, _interactionMetrics.addHold)(interactionId.current, labelStack, name);
|
|
102
103
|
return function () {
|
|
103
104
|
if (capturedInteractionId === interactionId.current) {
|
|
104
105
|
disposeHold();
|
|
@@ -107,7 +108,9 @@ function UFOSegment(_ref) {
|
|
|
107
108
|
}
|
|
108
109
|
}
|
|
109
110
|
}
|
|
110
|
-
function _internalHoldByID(labelStack, id, name, remove
|
|
111
|
+
function _internalHoldByID(labelStack, id, name, remove
|
|
112
|
+
// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
|
|
113
|
+
) {
|
|
111
114
|
if (interactionId.current != null) {
|
|
112
115
|
if (parentContext) {
|
|
113
116
|
parentContext._internalHoldByID(labelStack, name, id, remove);
|
|
@@ -130,8 +133,7 @@ function UFOSegment(_ref) {
|
|
|
130
133
|
labelStack: labelStack,
|
|
131
134
|
hold: function hold() {
|
|
132
135
|
var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'unknown';
|
|
133
|
-
|
|
134
|
-
return this._internalHold(this.labelStack, name, experimental);
|
|
136
|
+
return this._internalHold(this.labelStack, name);
|
|
135
137
|
},
|
|
136
138
|
addHoldByID: function addHoldByID(labelStack, id) {
|
|
137
139
|
var name = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'unknown';
|
|
@@ -4,7 +4,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.AWAITING_PAGELOAD_NAME = void 0;
|
|
8
7
|
exports.default = traceUFOPageLoad;
|
|
9
8
|
exports.updatePageloadName = updatePageloadName;
|
|
10
9
|
var _uuid = require("uuid");
|
|
@@ -14,7 +13,7 @@ var _experienceTraceIdContext = require("../experience-trace-id-context");
|
|
|
14
13
|
var _interactionIdContext = require("../interaction-id-context");
|
|
15
14
|
var _interactionMetrics = require("../interaction-metrics");
|
|
16
15
|
var _routeNameContext = _interopRequireDefault(require("../route-name-context"));
|
|
17
|
-
var AWAITING_PAGELOAD_NAME =
|
|
16
|
+
var AWAITING_PAGELOAD_NAME = 'awaiting_pageload_name';
|
|
18
17
|
function traceUFOPageLoad(ufoName) {
|
|
19
18
|
var routeName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ufoName;
|
|
20
19
|
var activeInteraction = (0, _interactionMetrics.getActiveInteraction)();
|
|
@@ -10,6 +10,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
|
|
|
10
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
11
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
12
12
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
13
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
14
|
var _attachAbortListeners = require("./attachAbortListeners");
|
|
14
15
|
var _getViewport = require("./getViewport");
|
|
15
16
|
var _observers = require("./observers");
|
|
@@ -70,7 +71,7 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
70
71
|
var info = _this.abortReason.info !== '' ? " ".concat(_this.abortReason.info) : '';
|
|
71
72
|
return "".concat(_this.abortReason.reason).concat(info);
|
|
72
73
|
});
|
|
73
|
-
(0, _defineProperty2.default)(this, "getVCRawData", function () {
|
|
74
|
+
(0, _defineProperty2.default)(this, "getVCRawData", function (stopTime) {
|
|
74
75
|
_this.measureStart();
|
|
75
76
|
if (!_this.active) {
|
|
76
77
|
_this.measureStop();
|
|
@@ -79,6 +80,20 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
79
80
|
_this.stop();
|
|
80
81
|
var abortReasonInfo = _this.getAbortReasonInfo();
|
|
81
82
|
_this.measureStop();
|
|
83
|
+
var componentsLog = {};
|
|
84
|
+
if (stopTime && (0, _platformFeatureFlags.fg)('ufo-remove-vc-component-observations-after-ttai')) {
|
|
85
|
+
Object.entries(_this.componentsLog).forEach(function (_ref3) {
|
|
86
|
+
var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
|
|
87
|
+
_timestamp = _ref4[0],
|
|
88
|
+
value = _ref4[1];
|
|
89
|
+
var timestamp = Number(_timestamp);
|
|
90
|
+
if (stopTime > timestamp) {
|
|
91
|
+
componentsLog[timestamp] = value;
|
|
92
|
+
}
|
|
93
|
+
});
|
|
94
|
+
} else {
|
|
95
|
+
componentsLog = _objectSpread({}, _this.componentsLog);
|
|
96
|
+
}
|
|
82
97
|
return {
|
|
83
98
|
abortReasonInfo: abortReasonInfo,
|
|
84
99
|
abortReason: _objectSpread({}, _this.abortReason),
|
|
@@ -86,25 +101,24 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
86
101
|
heatmapNext: _this.heatmapNext,
|
|
87
102
|
outOfBoundaryInfo: _this.outOfBoundaryInfo,
|
|
88
103
|
totalTime: Math.round(_this.totalTime + _this.observers.getTotalTime()),
|
|
89
|
-
componentsLog:
|
|
104
|
+
componentsLog: componentsLog,
|
|
90
105
|
viewport: _objectSpread({}, _this.viewport),
|
|
91
106
|
oldDomUpdatesEnabled: _this.oldDomUpdatesEnabled,
|
|
92
107
|
devToolsEnabled: _this.devToolsEnabled,
|
|
93
108
|
ratios: _this.vcRatios
|
|
94
109
|
};
|
|
95
110
|
});
|
|
96
|
-
(0, _defineProperty2.default)(this, "getVCResult", function (
|
|
97
|
-
var
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
vc = _ref3.vc;
|
|
111
|
+
(0, _defineProperty2.default)(this, "getVCResult", function (_ref5) {
|
|
112
|
+
var start = _ref5.start,
|
|
113
|
+
stop = _ref5.stop,
|
|
114
|
+
tti = _ref5.tti,
|
|
115
|
+
prefix = _ref5.prefix,
|
|
116
|
+
ssr = _ref5.ssr,
|
|
117
|
+
vc = _ref5.vc;
|
|
104
118
|
var startTime = performance.now();
|
|
105
119
|
// add local measurement
|
|
106
120
|
var fullPrefix = prefix !== undefined && prefix !== '' ? "".concat(prefix, ":") : '';
|
|
107
|
-
var rawData = vc !== undefined ? vc : _this.getVCRawData();
|
|
121
|
+
var rawData = vc !== undefined ? vc : _this.getVCRawData(stop);
|
|
108
122
|
if (rawData === null) {
|
|
109
123
|
return {};
|
|
110
124
|
}
|
|
@@ -119,14 +133,13 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
119
133
|
devToolsEnabled = rawData.devToolsEnabled,
|
|
120
134
|
ratios = rawData.ratios;
|
|
121
135
|
if (abortReasonInfo !== null && abortReason.blocking) {
|
|
122
|
-
var _ref4;
|
|
123
136
|
// exposing data to devtools
|
|
124
137
|
try {
|
|
125
138
|
if (devToolsEnabled && !_this.isPostInteraction) {
|
|
126
139
|
window.__vcNotAvailableReason = abortReasonInfo;
|
|
127
140
|
}
|
|
128
141
|
} catch (e) {}
|
|
129
|
-
return
|
|
142
|
+
return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(fullPrefix, "vc:state"), false), "".concat(fullPrefix, "vc:abort:reason"), abortReasonInfo), "".concat(fullPrefix, "vc:abort:timestamp"), abortReason.timestamp);
|
|
130
143
|
}
|
|
131
144
|
var _VCObserver$calculate = VCObserver.calculateVC({
|
|
132
145
|
heatmap: heatmap,
|
|
@@ -196,9 +209,9 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
196
209
|
} catch (e) {
|
|
197
210
|
/* do nothing */
|
|
198
211
|
}
|
|
199
|
-
return _objectSpread(_objectSpread((
|
|
212
|
+
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)({
|
|
200
213
|
'metrics:vc': VC
|
|
201
|
-
},
|
|
214
|
+
}, "".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)({}, "".concat(fullPrefix, "vc:next"), vcNext.VC), "".concat(fullPrefix, "vc:ignored"), _this.getIgnoredElements(componentsLog)));
|
|
202
215
|
});
|
|
203
216
|
(0, _defineProperty2.default)(this, "handleUpdate", function (rawTime, intersectionRect, targetName, element, type, ignoreReason) {
|
|
204
217
|
_this.measureStart();
|
|
@@ -281,10 +294,10 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
281
294
|
var unbinds = (0, _attachAbortListeners.attachAbortListeners)(window, _this.viewport, _this.abortReasonCallback);
|
|
282
295
|
if ((_window = window) !== null && _window !== void 0 && _window.__SSR_ABORT_LISTENERS__) {
|
|
283
296
|
var _window2;
|
|
284
|
-
Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (
|
|
285
|
-
var
|
|
286
|
-
key =
|
|
287
|
-
time =
|
|
297
|
+
Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref8) {
|
|
298
|
+
var _ref9 = (0, _slicedToArray2.default)(_ref8, 2),
|
|
299
|
+
key = _ref9[0],
|
|
300
|
+
time = _ref9[1];
|
|
288
301
|
if (time) {
|
|
289
302
|
_this.abortReasonCallback(key, time);
|
|
290
303
|
}
|
|
@@ -310,10 +323,10 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
310
323
|
this.heatmapNext = this.getCleanHeatmap();
|
|
311
324
|
this.isPostInteraction = options.isPostInteraction || false;
|
|
312
325
|
}
|
|
313
|
-
(0, _createClass2.default)(VCObserver, [{
|
|
326
|
+
return (0, _createClass2.default)(VCObserver, [{
|
|
314
327
|
key: "start",
|
|
315
|
-
value: function start(
|
|
316
|
-
var startTime =
|
|
328
|
+
value: function start(_ref10) {
|
|
329
|
+
var startTime = _ref10.startTime;
|
|
317
330
|
this.active = true;
|
|
318
331
|
if (this.observers.isBrowserSupported()) {
|
|
319
332
|
this.setViewportSize();
|
|
@@ -335,12 +348,12 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
335
348
|
}, {
|
|
336
349
|
key: "getIgnoredElements",
|
|
337
350
|
value: function getIgnoredElements(componentsLog) {
|
|
338
|
-
return Object.values(componentsLog).flat().filter(function (
|
|
339
|
-
var ignoreReason =
|
|
351
|
+
return Object.values(componentsLog).flat().filter(function (_ref11) {
|
|
352
|
+
var ignoreReason = _ref11.ignoreReason;
|
|
340
353
|
return Boolean(ignoreReason);
|
|
341
|
-
}).map(function (
|
|
342
|
-
var targetName =
|
|
343
|
-
ignoreReason =
|
|
354
|
+
}).map(function (_ref12) {
|
|
355
|
+
var targetName = _ref12.targetName,
|
|
356
|
+
ignoreReason = _ref12.ignoreReason;
|
|
344
357
|
return {
|
|
345
358
|
targetName: targetName,
|
|
346
359
|
ignoreReason: ignoreReason
|
|
@@ -461,12 +474,12 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
461
474
|
}
|
|
462
475
|
}], [{
|
|
463
476
|
key: "calculateVC",
|
|
464
|
-
value: function calculateVC(
|
|
465
|
-
var heatmap =
|
|
466
|
-
|
|
467
|
-
ssr =
|
|
468
|
-
componentsLog =
|
|
469
|
-
viewport =
|
|
477
|
+
value: function calculateVC(_ref13) {
|
|
478
|
+
var heatmap = _ref13.heatmap,
|
|
479
|
+
_ref13$ssr = _ref13.ssr,
|
|
480
|
+
ssr = _ref13$ssr === void 0 ? UNUSED_SECTOR : _ref13$ssr,
|
|
481
|
+
componentsLog = _ref13.componentsLog,
|
|
482
|
+
viewport = _ref13.viewport;
|
|
470
483
|
var lastUpdate = {};
|
|
471
484
|
var totalPainted = 0;
|
|
472
485
|
if (ssr !== UNUSED_SECTOR) {
|
|
@@ -526,11 +539,11 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
526
539
|
});
|
|
527
540
|
return VCRatio;
|
|
528
541
|
}, 0);
|
|
529
|
-
var VCEntries = entries.reduce(function (acc,
|
|
542
|
+
var VCEntries = entries.reduce(function (acc, _ref14, i) {
|
|
530
543
|
var _acc$abs, _componentsLog$timest;
|
|
531
|
-
var
|
|
532
|
-
timestamp =
|
|
533
|
-
entryPainted =
|
|
544
|
+
var _ref15 = (0, _slicedToArray2.default)(_ref14, 2),
|
|
545
|
+
timestamp = _ref15[0],
|
|
546
|
+
entryPainted = _ref15[1];
|
|
534
547
|
var currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
|
|
535
548
|
var currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
|
|
536
549
|
var logEntry = (_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.map(function (v) {
|
|
@@ -564,7 +577,6 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
564
577
|
return vc;
|
|
565
578
|
}
|
|
566
579
|
}]);
|
|
567
|
-
return VCObserver;
|
|
568
580
|
}();
|
|
569
581
|
/** config * */
|
|
570
582
|
(0, _defineProperty2.default)(VCObserver, "VCParts", ['25', '50', '75', '80', '85', '90', '95', '98', '99']);
|
|
@@ -78,7 +78,7 @@ var EditorLnvHandler = exports.EditorLnvHandler = /*#__PURE__*/function () {
|
|
|
78
78
|
}).forEach(_this.intersectionObserverCallback);
|
|
79
79
|
});
|
|
80
80
|
}
|
|
81
|
-
(0, _createClass2.default)(EditorLnvHandler, [{
|
|
81
|
+
return (0, _createClass2.default)(EditorLnvHandler, [{
|
|
82
82
|
key: "shouldHandleAddedNode",
|
|
83
83
|
value: function shouldHandleAddedNode(el) {
|
|
84
84
|
var _el$dataset, _el$dataset2;
|
|
@@ -183,5 +183,4 @@ var EditorLnvHandler = exports.EditorLnvHandler = /*#__PURE__*/function () {
|
|
|
183
183
|
return Math.abs(a.width - b.width) < 1 && Math.abs(a.height - b.height) < 1;
|
|
184
184
|
}
|
|
185
185
|
}]);
|
|
186
|
-
return EditorLnvHandler;
|
|
187
186
|
}();
|
|
@@ -54,7 +54,7 @@ function createMockIntersectionObserver(cbRef) {
|
|
|
54
54
|
}));
|
|
55
55
|
};
|
|
56
56
|
}
|
|
57
|
-
(0, _createClass2.default)(_class, [{
|
|
57
|
+
return (0, _createClass2.default)(_class, [{
|
|
58
58
|
key: "observe",
|
|
59
59
|
value: function observe() {}
|
|
60
60
|
}, {
|
|
@@ -64,6 +64,5 @@ function createMockIntersectionObserver(cbRef) {
|
|
|
64
64
|
key: "disconnect",
|
|
65
65
|
value: function disconnect() {}
|
|
66
66
|
}]);
|
|
67
|
-
return _class;
|
|
68
67
|
}();
|
|
69
68
|
}
|
|
@@ -65,7 +65,7 @@ var Observers = exports.Observers = /*#__PURE__*/function () {
|
|
|
65
65
|
this.ssrPlaceholderHandler = new _ssrPlaceholders.SSRPlaceholderHandlers();
|
|
66
66
|
this.editorLnvHandler = new _editorLnv.EditorLnvHandler();
|
|
67
67
|
}
|
|
68
|
-
(0, _createClass2.default)(Observers, [{
|
|
68
|
+
return (0, _createClass2.default)(Observers, [{
|
|
69
69
|
key: "isBrowserSupported",
|
|
70
70
|
value: function isBrowserSupported() {
|
|
71
71
|
return typeof window.IntersectionObserver === 'function' && typeof window.MutationObserver === 'function';
|
|
@@ -301,5 +301,4 @@ var Observers = exports.Observers = /*#__PURE__*/function () {
|
|
|
301
301
|
this._startMeasureTimestamp = -1;
|
|
302
302
|
}
|
|
303
303
|
}]);
|
|
304
|
-
return Observers;
|
|
305
304
|
}();
|
|
@@ -89,7 +89,7 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
|
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
|
-
(0, _createClass2.default)(SSRPlaceholderHandlers, [{
|
|
92
|
+
return (0, _createClass2.default)(SSRPlaceholderHandlers, [{
|
|
93
93
|
key: "clear",
|
|
94
94
|
value: function clear() {
|
|
95
95
|
this.staticPlaceholders = new Map();
|
|
@@ -177,5 +177,4 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
|
|
|
177
177
|
return rect && Math.abs(rect.x - boundingClientRect.x) < EQUALITY_THRESHOLD && Math.abs(rect.y - boundingClientRect.y) < EQUALITY_THRESHOLD && Math.abs(rect.width - boundingClientRect.width) < EQUALITY_THRESHOLD && Math.abs(rect.height - boundingClientRect.height) < EQUALITY_THRESHOLD || false;
|
|
178
178
|
}
|
|
179
179
|
}]);
|
|
180
|
-
return SSRPlaceholderHandlers;
|
|
181
180
|
}();
|
|
@@ -1,2 +1,4 @@
|
|
|
1
1
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
|
-
|
|
2
|
+
|
|
3
|
+
// eslint-disable-next-line @atlaskit/platform/no-module-level-eval
|
|
4
|
+
export const REACT_UFO_VERSION = fg('enable-react-ufo-payload-segment-compressed') ? '2.0.0' : '1.0.1';
|
|
@@ -67,28 +67,6 @@ export function getInteractionRate(name, interactionKind) {
|
|
|
67
67
|
return 0;
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
|
-
export function getExperimentalInteractionRate(name, interactionType) {
|
|
71
|
-
try {
|
|
72
|
-
if (!config) {
|
|
73
|
-
return 0;
|
|
74
|
-
}
|
|
75
|
-
const {
|
|
76
|
-
experimentalInteractionMetrics
|
|
77
|
-
} = config;
|
|
78
|
-
if (!(experimentalInteractionMetrics !== null && experimentalInteractionMetrics !== void 0 && experimentalInteractionMetrics.enabled)) {
|
|
79
|
-
return 0;
|
|
80
|
-
}
|
|
81
|
-
if (experimentalInteractionMetrics.rates && typeof experimentalInteractionMetrics.rates[name] === 'number') {
|
|
82
|
-
return experimentalInteractionMetrics.rates[name];
|
|
83
|
-
}
|
|
84
|
-
if (experimentalInteractionMetrics.kind && typeof experimentalInteractionMetrics.kind[interactionType] === 'number') {
|
|
85
|
-
return experimentalInteractionMetrics.kind[interactionType];
|
|
86
|
-
}
|
|
87
|
-
return 0;
|
|
88
|
-
} catch (e) {
|
|
89
|
-
return 0;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
70
|
export function getPostInteractionRate(name, interactionType) {
|
|
93
71
|
try {
|
|
94
72
|
if (!config) {
|
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
/* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
|
|
2
|
-
|
|
3
2
|
import { REACT_UFO_VERSION } from '../../../common/constants';
|
|
4
|
-
import { getConfig } from '../../../config';
|
|
5
|
-
import { getPageVisibilityState } from '../../../hidden-timing';
|
|
6
|
-
import { experimentalInteractionLog, postInteractionLog } from '../../../interaction-metrics';
|
|
7
|
-
import * as ssr from '../../../ssr';
|
|
8
|
-
import { getVCObserver } from '../../../vc';
|
|
9
3
|
export const sanitizeUfoName = name => {
|
|
10
4
|
return name.replace(/_/g, '-');
|
|
11
5
|
};
|
|
@@ -59,83 +53,4 @@ export function optimizeLabelStack(labelStack) {
|
|
|
59
53
|
s: ls.segmentId
|
|
60
54
|
} : {})
|
|
61
55
|
}));
|
|
62
|
-
}
|
|
63
|
-
export const getInteractionStatus = interaction => {
|
|
64
|
-
const originalInteractionStatus = interaction.abortReason ? 'ABORTED' : 'SUCCEEDED';
|
|
65
|
-
const hasBm3TTI = interaction.apdex.length > 0;
|
|
66
|
-
const overrideStatus = hasBm3TTI ? 'SUCCEEDED' : originalInteractionStatus;
|
|
67
|
-
return {
|
|
68
|
-
originalInteractionStatus,
|
|
69
|
-
overrideStatus
|
|
70
|
-
};
|
|
71
|
-
};
|
|
72
|
-
export const getPageVisibilityUpToTTAI = interaction => {
|
|
73
|
-
const {
|
|
74
|
-
start,
|
|
75
|
-
end
|
|
76
|
-
} = interaction;
|
|
77
|
-
return getPageVisibilityState(start, end);
|
|
78
|
-
};
|
|
79
|
-
export const calculateVCMetrics = (interaction, prefix, getVCResultFn) => {
|
|
80
|
-
var _interaction$apdex, _interaction$apdex$;
|
|
81
|
-
const result = getVCResultFn({
|
|
82
|
-
start: interaction.start,
|
|
83
|
-
stop: interaction.end,
|
|
84
|
-
tti: (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 ? void 0 : (_interaction$apdex$ = _interaction$apdex[0]) === null || _interaction$apdex$ === void 0 ? void 0 : _interaction$apdex$.stopTime,
|
|
85
|
-
prefix,
|
|
86
|
-
vc: interaction.vc
|
|
87
|
-
});
|
|
88
|
-
const VC = result === null || result === void 0 ? void 0 : result['metrics:vc'];
|
|
89
|
-
if (!VC || !(result !== null && result !== void 0 && result[`${prefix}:vc:clean`])) {
|
|
90
|
-
return result;
|
|
91
|
-
}
|
|
92
|
-
const interactionStatus = getInteractionStatus(interaction);
|
|
93
|
-
const pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
|
|
94
|
-
if (interactionStatus.originalInteractionStatus !== 'SUCCEEDED' || pageVisibilityUpToTTAI !== 'visible') {
|
|
95
|
-
return result;
|
|
96
|
-
}
|
|
97
|
-
return result;
|
|
98
|
-
};
|
|
99
|
-
export function getSSRDoneTimeValue(config) {
|
|
100
|
-
var _config$ssr, _config$ssr2;
|
|
101
|
-
return config !== null && config !== void 0 && (_config$ssr = config.ssr) !== null && _config$ssr !== void 0 && _config$ssr.getSSRDoneTime ? config === null || config === void 0 ? void 0 : (_config$ssr2 = config.ssr) === null || _config$ssr2 === void 0 ? void 0 : _config$ssr2.getSSRDoneTime() : ssr.getSSRDoneTime();
|
|
102
|
-
}
|
|
103
|
-
export const getVCMetrics = interaction => {
|
|
104
|
-
var _config$vc, _result$metricsVc;
|
|
105
|
-
const config = getConfig();
|
|
106
|
-
if (!(config !== null && config !== void 0 && (_config$vc = config.vc) !== null && _config$vc !== void 0 && _config$vc.enabled)) {
|
|
107
|
-
return {};
|
|
108
|
-
}
|
|
109
|
-
if (interaction.type !== 'page_load' && interaction.type !== 'transition') {
|
|
110
|
-
return {};
|
|
111
|
-
}
|
|
112
|
-
const ssr = interaction.type === 'page_load' && config !== null && config !== void 0 && config.ssr ? {
|
|
113
|
-
ssr: getSSRDoneTimeValue(config)
|
|
114
|
-
} : null;
|
|
115
|
-
postInteractionLog.setVCObserverSSRConfig(ssr);
|
|
116
|
-
const result = calculateVCMetrics(interaction, 'ufo', getVCObserver().getVCResult);
|
|
117
|
-
return {
|
|
118
|
-
...result,
|
|
119
|
-
'metric:vc90': result === null || result === void 0 ? void 0 : (_result$metricsVc = result['metrics:vc']) === null || _result$metricsVc === void 0 ? void 0 : _result$metricsVc['90']
|
|
120
|
-
};
|
|
121
|
-
};
|
|
122
|
-
export const getExperimentalVCMetrics = interaction => {
|
|
123
|
-
if (experimentalInteractionLog.vcObserver) {
|
|
124
|
-
var _result$metricsVc2;
|
|
125
|
-
const result = calculateVCMetrics(interaction, 'ufo-experimental', experimentalInteractionLog.vcObserver.getVCResult);
|
|
126
|
-
return {
|
|
127
|
-
...result,
|
|
128
|
-
'metric:experimental:vc90': result === null || result === void 0 ? void 0 : (_result$metricsVc2 = result['metrics:vc']) === null || _result$metricsVc2 === void 0 ? void 0 : _result$metricsVc2['90']
|
|
129
|
-
};
|
|
130
|
-
}
|
|
131
|
-
return null;
|
|
132
|
-
};
|
|
133
|
-
export const getTTAI = interaction => {
|
|
134
|
-
const {
|
|
135
|
-
start,
|
|
136
|
-
end
|
|
137
|
-
} = interaction;
|
|
138
|
-
const interactionStatus = getInteractionStatus(interaction);
|
|
139
|
-
const pageVisibilityUpToTTAI = getPageVisibilityUpToTTAI(interaction);
|
|
140
|
-
return interactionStatus.originalInteractionStatus === 'SUCCEEDED' && pageVisibilityUpToTTAI === 'visible' ? Math.round(end - start) : undefined;
|
|
141
|
-
};
|
|
56
|
+
}
|