@atlaskit/react-ufo 4.9.0 → 4.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/dist/cjs/additional-payload/utils/lighthouse-metrics/cls/index.js +17 -2
- package/dist/cjs/create-post-interaction-log-payload/index.js +1 -1
- package/dist/cjs/interaction-metrics/post-interaction-log.js +2 -1
- package/dist/es2019/additional-payload/utils/lighthouse-metrics/cls/index.js +17 -1
- package/dist/es2019/create-post-interaction-log-payload/index.js +1 -1
- package/dist/es2019/interaction-metrics/post-interaction-log.js +2 -1
- package/dist/esm/additional-payload/utils/lighthouse-metrics/cls/index.js +17 -2
- package/dist/esm/create-post-interaction-log-payload/index.js +1 -1
- package/dist/esm/interaction-metrics/post-interaction-log.js +2 -1
- package/dist/types/additional-payload/utils/lighthouse-metrics/cls/types.d.ts +7 -0
- package/dist/types-ts4.5/additional-payload/utils/lighthouse-metrics/cls/types.d.ts +7 -0
- package/package.json +9 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/ufo-interaction-ignore
|
|
2
2
|
|
|
3
|
+
## 4.10.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`012e311801a01`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/012e311801a01) -
|
|
8
|
+
ensure singleton bundling of the package
|
|
9
|
+
|
|
10
|
+
### Patch Changes
|
|
11
|
+
|
|
12
|
+
- Updated dependencies
|
|
13
|
+
|
|
14
|
+
## 4.9.1
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- [`70c6ad9a84f0a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/70c6ad9a84f0a) -
|
|
19
|
+
filter out layout shifts where every source is the same rectangle
|
|
20
|
+
|
|
3
21
|
## 4.9.0
|
|
4
22
|
|
|
5
23
|
### Minor Changes
|
|
@@ -4,12 +4,27 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.getCLS = getCLS;
|
|
7
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
7
8
|
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; } } }; }
|
|
8
9
|
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; } }
|
|
9
10
|
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; }
|
|
11
|
+
function isSameRects(rect1, rect2) {
|
|
12
|
+
return rect1.x === rect2.x && rect1.y === rect2.y && rect1.width === rect2.width && rect1.height === rect2.height && rect1.top === rect2.top && rect1.right === rect2.right && rect1.bottom === rect2.bottom && rect1.left === rect2.left;
|
|
13
|
+
}
|
|
10
14
|
function getCLS(start, stop, buffer) {
|
|
11
|
-
var layoutShifts = buffer.getAll().filter(function (
|
|
12
|
-
|
|
15
|
+
var layoutShifts = buffer.getAll().filter(function (_entry) {
|
|
16
|
+
var entry = _entry;
|
|
17
|
+
var isWithinObservationWindow = entry.startTime >= start && entry.startTime <= stop;
|
|
18
|
+
if ((0, _platformFeatureFlags.fg)('platform_ufo_filter_cls_logs_same_rects_positions')) {
|
|
19
|
+
var _entry$sources;
|
|
20
|
+
var allSourcesHaveSameRects = entry === null || entry === void 0 || (_entry$sources = entry.sources) === null || _entry$sources === void 0 ? void 0 : _entry$sources.every(function (_ref) {
|
|
21
|
+
var previousRect = _ref.previousRect,
|
|
22
|
+
currentRect = _ref.currentRect;
|
|
23
|
+
return isSameRects(previousRect, currentRect);
|
|
24
|
+
});
|
|
25
|
+
return isWithinObservationWindow && !allSourcesHaveSameRects;
|
|
26
|
+
}
|
|
27
|
+
return isWithinObservationWindow;
|
|
13
28
|
});
|
|
14
29
|
var sessionWindows = [];
|
|
15
30
|
var currentWindow = null;
|
|
@@ -152,7 +152,7 @@ function createPostInteractionLogPayload(_ref2) {
|
|
|
152
152
|
if (lastInteractionFinish.errors.length > 0) {
|
|
153
153
|
return null;
|
|
154
154
|
}
|
|
155
|
-
var maxEndTimeFromProfiler = reactProfilerTimings ? Math.max.apply(Math, (0, _toConsumableArray2.default)(reactProfilerTimings.map(function (t) {
|
|
155
|
+
var maxEndTimeFromProfiler = reactProfilerTimings && reactProfilerTimings.length > 0 ? Math.max.apply(Math, (0, _toConsumableArray2.default)(reactProfilerTimings.map(function (t) {
|
|
156
156
|
return t.commitTime;
|
|
157
157
|
}))) : lastInteractionFinish.end;
|
|
158
158
|
var revisedEndTime = Math.round(maxEndTimeFromProfiler);
|
|
@@ -10,6 +10,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
|
|
|
10
10
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
11
11
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
12
12
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
14
|
var _config = require("../config");
|
|
14
15
|
var _vc = require("../vc");
|
|
15
16
|
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; }
|
|
@@ -125,7 +126,7 @@ var PostInteractionLog = exports.default = /*#__PURE__*/function () {
|
|
|
125
126
|
return _regenerator.default.wrap(function _callee$(_context) {
|
|
126
127
|
while (1) switch (_context.prev = _context.next) {
|
|
127
128
|
case 0:
|
|
128
|
-
if (!(!this.
|
|
129
|
+
if (!(!this.lastInteractionFinish || !this.sinkHandlerFn || !this.hasData() && !(0, _platformFeatureFlags.fg)('platform_ufo_always_send_post_interaction_log'))) {
|
|
129
130
|
_context.next = 4;
|
|
130
131
|
break;
|
|
131
132
|
}
|
|
@@ -1,5 +1,21 @@
|
|
|
1
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
|
+
function isSameRects(rect1, rect2) {
|
|
3
|
+
return rect1.x === rect2.x && rect1.y === rect2.y && rect1.width === rect2.width && rect1.height === rect2.height && rect1.top === rect2.top && rect1.right === rect2.right && rect1.bottom === rect2.bottom && rect1.left === rect2.left;
|
|
4
|
+
}
|
|
1
5
|
export function getCLS(start, stop, buffer) {
|
|
2
|
-
const layoutShifts = buffer.getAll().filter(
|
|
6
|
+
const layoutShifts = buffer.getAll().filter(_entry => {
|
|
7
|
+
const entry = _entry;
|
|
8
|
+
const isWithinObservationWindow = entry.startTime >= start && entry.startTime <= stop;
|
|
9
|
+
if (fg('platform_ufo_filter_cls_logs_same_rects_positions')) {
|
|
10
|
+
var _entry$sources;
|
|
11
|
+
const allSourcesHaveSameRects = entry === null || entry === void 0 ? void 0 : (_entry$sources = entry.sources) === null || _entry$sources === void 0 ? void 0 : _entry$sources.every(({
|
|
12
|
+
previousRect,
|
|
13
|
+
currentRect
|
|
14
|
+
}) => isSameRects(previousRect, currentRect));
|
|
15
|
+
return isWithinObservationWindow && !allSourcesHaveSameRects;
|
|
16
|
+
}
|
|
17
|
+
return isWithinObservationWindow;
|
|
18
|
+
});
|
|
3
19
|
const sessionWindows = [];
|
|
4
20
|
let currentWindow = null;
|
|
5
21
|
|
|
@@ -139,7 +139,7 @@ function createPostInteractionLogPayload({
|
|
|
139
139
|
if (lastInteractionFinish.errors.length > 0) {
|
|
140
140
|
return null;
|
|
141
141
|
}
|
|
142
|
-
const maxEndTimeFromProfiler = reactProfilerTimings ? Math.max(...reactProfilerTimings.map(t => t.commitTime)) : lastInteractionFinish.end;
|
|
142
|
+
const maxEndTimeFromProfiler = reactProfilerTimings && reactProfilerTimings.length > 0 ? Math.max(...reactProfilerTimings.map(t => t.commitTime)) : lastInteractionFinish.end;
|
|
143
143
|
const revisedEndTime = Math.round(maxEndTimeFromProfiler);
|
|
144
144
|
const revisedTtai = Math.round(maxEndTimeFromProfiler - lastInteractionFinish.start);
|
|
145
145
|
const lastInteractionFinishStart = Math.round(lastInteractionFinish.start);
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
3
|
import { getConfig } from '../config';
|
|
3
4
|
import { VCObserverWrapper } from '../vc';
|
|
4
5
|
const POST_INTERACTION_LOG_SEND_DEFAULT_TIMEOUT = 3000;
|
|
@@ -89,7 +90,7 @@ export default class PostInteractionLog {
|
|
|
89
90
|
*/
|
|
90
91
|
async sendPostInteractionLog() {
|
|
91
92
|
var _this$vcObserver4, _config$vc, _config$vc2, _this$vcObserver5;
|
|
92
|
-
if (!this.
|
|
93
|
+
if (!this.lastInteractionFinish || !this.sinkHandlerFn || !this.hasData() && !fg('platform_ufo_always_send_post_interaction_log')) {
|
|
93
94
|
var _this$vcObserver3;
|
|
94
95
|
this.reset();
|
|
95
96
|
(_this$vcObserver3 = this.vcObserver) === null || _this$vcObserver3 === void 0 ? void 0 : _this$vcObserver3.stop();
|
|
@@ -1,9 +1,24 @@
|
|
|
1
1
|
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; } } }; }
|
|
2
2
|
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; } }
|
|
3
3
|
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; }
|
|
4
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
|
+
function isSameRects(rect1, rect2) {
|
|
6
|
+
return rect1.x === rect2.x && rect1.y === rect2.y && rect1.width === rect2.width && rect1.height === rect2.height && rect1.top === rect2.top && rect1.right === rect2.right && rect1.bottom === rect2.bottom && rect1.left === rect2.left;
|
|
7
|
+
}
|
|
4
8
|
export function getCLS(start, stop, buffer) {
|
|
5
|
-
var layoutShifts = buffer.getAll().filter(function (
|
|
6
|
-
|
|
9
|
+
var layoutShifts = buffer.getAll().filter(function (_entry) {
|
|
10
|
+
var entry = _entry;
|
|
11
|
+
var isWithinObservationWindow = entry.startTime >= start && entry.startTime <= stop;
|
|
12
|
+
if (fg('platform_ufo_filter_cls_logs_same_rects_positions')) {
|
|
13
|
+
var _entry$sources;
|
|
14
|
+
var allSourcesHaveSameRects = entry === null || entry === void 0 || (_entry$sources = entry.sources) === null || _entry$sources === void 0 ? void 0 : _entry$sources.every(function (_ref) {
|
|
15
|
+
var previousRect = _ref.previousRect,
|
|
16
|
+
currentRect = _ref.currentRect;
|
|
17
|
+
return isSameRects(previousRect, currentRect);
|
|
18
|
+
});
|
|
19
|
+
return isWithinObservationWindow && !allSourcesHaveSameRects;
|
|
20
|
+
}
|
|
21
|
+
return isWithinObservationWindow;
|
|
7
22
|
});
|
|
8
23
|
var sessionWindows = [];
|
|
9
24
|
var currentWindow = null;
|
|
@@ -145,7 +145,7 @@ function createPostInteractionLogPayload(_ref2) {
|
|
|
145
145
|
if (lastInteractionFinish.errors.length > 0) {
|
|
146
146
|
return null;
|
|
147
147
|
}
|
|
148
|
-
var maxEndTimeFromProfiler = reactProfilerTimings ? Math.max.apply(Math, _toConsumableArray(reactProfilerTimings.map(function (t) {
|
|
148
|
+
var maxEndTimeFromProfiler = reactProfilerTimings && reactProfilerTimings.length > 0 ? Math.max.apply(Math, _toConsumableArray(reactProfilerTimings.map(function (t) {
|
|
149
149
|
return t.commitTime;
|
|
150
150
|
}))) : lastInteractionFinish.end;
|
|
151
151
|
var revisedEndTime = Math.round(maxEndTimeFromProfiler);
|
|
@@ -5,6 +5,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
5
5
|
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
6
6
|
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; }
|
|
7
7
|
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; }
|
|
8
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
9
|
import { getConfig } from '../config';
|
|
9
10
|
import { VCObserverWrapper } from '../vc';
|
|
10
11
|
var POST_INTERACTION_LOG_SEND_DEFAULT_TIMEOUT = 3000;
|
|
@@ -118,7 +119,7 @@ var PostInteractionLog = /*#__PURE__*/function () {
|
|
|
118
119
|
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
119
120
|
while (1) switch (_context.prev = _context.next) {
|
|
120
121
|
case 0:
|
|
121
|
-
if (!(!this.
|
|
122
|
+
if (!(!this.lastInteractionFinish || !this.sinkHandlerFn || !this.hasData() && !fg('platform_ufo_always_send_post_interaction_log'))) {
|
|
122
123
|
_context.next = 4;
|
|
123
124
|
break;
|
|
124
125
|
}
|
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
export interface LayoutShiftAttribution {
|
|
2
|
+
readonly node: Node;
|
|
3
|
+
readonly previousRect: DOMRectReadOnly;
|
|
4
|
+
readonly currentRect: DOMRectReadOnly;
|
|
5
|
+
readonly toJSON: () => object;
|
|
6
|
+
}
|
|
1
7
|
export interface LayoutShiftPerformanceEntry extends PerformanceEntry {
|
|
2
8
|
value: number;
|
|
9
|
+
sources: LayoutShiftAttribution[];
|
|
3
10
|
}
|
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
export interface LayoutShiftAttribution {
|
|
2
|
+
readonly node: Node;
|
|
3
|
+
readonly previousRect: DOMRectReadOnly;
|
|
4
|
+
readonly currentRect: DOMRectReadOnly;
|
|
5
|
+
readonly toJSON: () => object;
|
|
6
|
+
}
|
|
1
7
|
export interface LayoutShiftPerformanceEntry extends PerformanceEntry {
|
|
2
8
|
value: number;
|
|
9
|
+
sources: LayoutShiftAttribution[];
|
|
3
10
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/react-ufo",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.10.0",
|
|
4
4
|
"description": "Parts of React UFO that are publicly available",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
"registry": "https://registry.npmjs.org/"
|
|
9
9
|
},
|
|
10
10
|
"atlassian": {
|
|
11
|
+
"singleton": true,
|
|
11
12
|
"team": "UIP Frontend Observability"
|
|
12
13
|
},
|
|
13
14
|
"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
|
|
@@ -28,7 +29,7 @@
|
|
|
28
29
|
"dependencies": {
|
|
29
30
|
"@atlaskit/browser-apis": "^0.0.1",
|
|
30
31
|
"@atlaskit/feature-gate-js-client": "^5.5.0",
|
|
31
|
-
"@atlaskit/interaction-context": "^3.
|
|
32
|
+
"@atlaskit/interaction-context": "^3.1.0",
|
|
32
33
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
33
34
|
"@babel/runtime": "^7.0.0",
|
|
34
35
|
"bind-event-listener": "^3.0.0",
|
|
@@ -156,6 +157,9 @@
|
|
|
156
157
|
"platform_ufo_enable_late_mutation_label_stacks": {
|
|
157
158
|
"type": "boolean"
|
|
158
159
|
},
|
|
160
|
+
"platform_ufo_filter_cls_logs_same_rects_positions": {
|
|
161
|
+
"type": "boolean"
|
|
162
|
+
},
|
|
159
163
|
"platform_editor_exclude_dnd_anchor_name_from_ttvc": {
|
|
160
164
|
"type": "boolean"
|
|
161
165
|
},
|
|
@@ -164,6 +168,9 @@
|
|
|
164
168
|
},
|
|
165
169
|
"react_ufo_unified_search_ignoring_sain_metric": {
|
|
166
170
|
"type": "boolean"
|
|
171
|
+
},
|
|
172
|
+
"platform_ufo_always_send_post_interaction_log": {
|
|
173
|
+
"type": "boolean"
|
|
167
174
|
}
|
|
168
175
|
}
|
|
169
176
|
}
|