@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 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 (entry) {
12
- return entry.startTime >= start && entry.startTime <= stop;
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.hasData() || !this.lastInteractionFinish || !this.sinkHandlerFn)) {
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(entry => entry.startTime >= start && entry.startTime <= stop);
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.hasData() || !this.lastInteractionFinish || !this.sinkHandlerFn) {
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 (entry) {
6
- return entry.startTime >= start && entry.startTime <= stop;
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.hasData() || !this.lastInteractionFinish || !this.sinkHandlerFn)) {
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.9.0",
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.0.0",
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
  }