@atlaskit/react-ufo 2.0.7 → 2.0.9
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 +16 -0
- package/dist/cjs/vc/vc-observer/index.js +30 -28
- package/dist/cjs/vc/vc-observer/observers/index.js +7 -8
- package/dist/es2019/vc/vc-observer/index.js +8 -8
- package/dist/es2019/vc/vc-observer/observers/index.js +7 -8
- package/dist/esm/vc/vc-observer/index.js +30 -28
- package/dist/esm/vc/vc-observer/observers/index.js +7 -8
- package/dist/types/vc/vc-observer/observers/types.d.ts +1 -1
- package/dist/types-ts4.5/vc/vc-observer/observers/types.d.ts +1 -1
- package/package.json +1 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/ufo-interaction-ignore
|
|
2
2
|
|
|
3
|
+
## 2.0.9
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#154926](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/154926)
|
|
8
|
+
[`33fd71f8d4196`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/33fd71f8d4196) -
|
|
9
|
+
Reporting VC with HTML attributes updates as separate field
|
|
10
|
+
|
|
11
|
+
## 2.0.8
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [#159176](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/159176)
|
|
16
|
+
[`b682bf3a24cd4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b682bf3a24cd4) -
|
|
17
|
+
Remove include_node_counts_in_ttvc_metric and no_ssr_placeholder_check_when_not_intersecting
|
|
18
|
+
|
|
3
19
|
## 2.0.7
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -94,7 +94,7 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
94
94
|
};
|
|
95
95
|
});
|
|
96
96
|
(0, _defineProperty2.default)(this, "getVCResult", function (_ref3) {
|
|
97
|
-
var _objectSpread2;
|
|
97
|
+
var _objectSpread2, _objectSpread3;
|
|
98
98
|
var start = _ref3.start,
|
|
99
99
|
stop = _ref3.stop,
|
|
100
100
|
tti = _ref3.tti,
|
|
@@ -116,7 +116,6 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
116
116
|
totalTime = rawData.totalTime,
|
|
117
117
|
componentsLog = rawData.componentsLog,
|
|
118
118
|
viewport = rawData.viewport,
|
|
119
|
-
oldDomUpdatesEnabled = rawData.oldDomUpdatesEnabled,
|
|
120
119
|
devToolsEnabled = rawData.devToolsEnabled,
|
|
121
120
|
ratios = rawData.ratios;
|
|
122
121
|
if (abortReasonInfo !== null && abortReason.blocking) {
|
|
@@ -161,7 +160,8 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
161
160
|
viewport: viewport
|
|
162
161
|
});
|
|
163
162
|
var outOfBoundary = outOfBoundaryInfo ? (0, _defineProperty2.default)({}, "".concat(fullPrefix, "vc:oob"), outOfBoundaryInfo) : {};
|
|
164
|
-
|
|
163
|
+
//const oldDomUpdates = oldDomUpdatesEnabled ? { [`${fullPrefix}vc:old:dom`]: ssrVC.VCBox } : {};
|
|
164
|
+
|
|
165
165
|
var stopTime = performance.now();
|
|
166
166
|
|
|
167
167
|
// exposing data to devtools
|
|
@@ -196,18 +196,20 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
196
196
|
} catch (e) {
|
|
197
197
|
/* do nothing */
|
|
198
198
|
}
|
|
199
|
-
return _objectSpread(_objectSpread(
|
|
199
|
+
return _objectSpread(_objectSpread((_objectSpread2 = {
|
|
200
200
|
'metrics:vc': VC
|
|
201
|
-
}, (0, _defineProperty2.default)(_objectSpread2, "".concat(fullPrefix, "vc:state"), true), (0, _defineProperty2.default)(_objectSpread2, "".concat(fullPrefix, "vc:clean"), !abortReasonInfo), (0, _defineProperty2.default)(_objectSpread2, "".concat(fullPrefix, "vc:dom"), VCBox), (0, _defineProperty2.default)(_objectSpread2, "".concat(fullPrefix, "vc:updates"), VCEntries.rel.slice(0, 50)), (0, _defineProperty2.default)(_objectSpread2, "".concat(fullPrefix, "vc:size"), viewport), (0, _defineProperty2.default)(_objectSpread2, "".concat(fullPrefix, "vc:time"), Math.round(totalTime + (stopTime - startTime))), (0, _defineProperty2.default)(_objectSpread2, "".concat(fullPrefix, "vc:total"), totalPainted), (0, _defineProperty2.default)(_objectSpread2, "".concat(fullPrefix, "vc:ratios"), ratios), _objectSpread2), outOfBoundary), {}, (0, _defineProperty2.default)(
|
|
201
|
+
}, (0, _defineProperty2.default)(_objectSpread2, "".concat(fullPrefix, "vc:state"), true), (0, _defineProperty2.default)(_objectSpread2, "".concat(fullPrefix, "vc:clean"), !abortReasonInfo), (0, _defineProperty2.default)(_objectSpread2, "".concat(fullPrefix, "vc:dom"), VCBox), (0, _defineProperty2.default)(_objectSpread2, "".concat(fullPrefix, "vc:updates"), VCEntries.rel.slice(0, 50)), (0, _defineProperty2.default)(_objectSpread2, "".concat(fullPrefix, "vc:size"), viewport), (0, _defineProperty2.default)(_objectSpread2, "".concat(fullPrefix, "vc:time"), Math.round(totalTime + (stopTime - startTime))), (0, _defineProperty2.default)(_objectSpread2, "".concat(fullPrefix, "vc:total"), totalPainted), (0, _defineProperty2.default)(_objectSpread2, "".concat(fullPrefix, "vc:ratios"), ratios), _objectSpread2), outOfBoundary), {}, (_objectSpread3 = {}, (0, _defineProperty2.default)(_objectSpread3, "".concat(fullPrefix, "vc:attrs"), ssrVC.VC), (0, _defineProperty2.default)(_objectSpread3, "".concat(fullPrefix, "vc:ignored"), _this.getIgnoredElements(componentsLog)), _objectSpread3));
|
|
202
202
|
});
|
|
203
|
-
(0, _defineProperty2.default)(this, "handleUpdate", function (rawTime, intersectionRect, targetName, element, ignoreReason) {
|
|
203
|
+
(0, _defineProperty2.default)(this, "handleUpdate", function (rawTime, intersectionRect, targetName, element, type, ignoreReason) {
|
|
204
204
|
_this.measureStart();
|
|
205
205
|
if (_this.abortReason.reason === null || _this.abortReason.blocking === false) {
|
|
206
206
|
var time = Math.round(rawTime - _this.startTime);
|
|
207
207
|
var mappedValues = _this.mapPixelsToHeatmap(intersectionRect.left, intersectionRect.top, intersectionRect.width, intersectionRect.height);
|
|
208
208
|
_this.vcRatios[targetName] = _this.getElementRatio(mappedValues);
|
|
209
|
-
_this.applyChangesToHeatMap(mappedValues, time, _this.heatmap);
|
|
210
209
|
if (!ignoreReason) {
|
|
210
|
+
_this.applyChangesToHeatMap(mappedValues, time, _this.heatmap);
|
|
211
|
+
}
|
|
212
|
+
if (!ignoreReason && type !== 'attr') {
|
|
211
213
|
_this.applyChangesToHeatMap(mappedValues, time, _this.ssrInclusiveHeatmap);
|
|
212
214
|
}
|
|
213
215
|
if (!_this.componentsLog[time]) {
|
|
@@ -279,10 +281,10 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
279
281
|
var unbinds = (0, _attachAbortListeners.attachAbortListeners)(window, _this.viewport, _this.abortReasonCallback);
|
|
280
282
|
if ((_window = window) !== null && _window !== void 0 && _window.__SSR_ABORT_LISTENERS__) {
|
|
281
283
|
var _window2;
|
|
282
|
-
Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (
|
|
283
|
-
var
|
|
284
|
-
key =
|
|
285
|
-
time =
|
|
284
|
+
Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref6) {
|
|
285
|
+
var _ref7 = (0, _slicedToArray2.default)(_ref6, 2),
|
|
286
|
+
key = _ref7[0],
|
|
287
|
+
time = _ref7[1];
|
|
286
288
|
if (time) {
|
|
287
289
|
_this.abortReasonCallback(key, time);
|
|
288
290
|
}
|
|
@@ -310,8 +312,8 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
310
312
|
}
|
|
311
313
|
(0, _createClass2.default)(VCObserver, [{
|
|
312
314
|
key: "start",
|
|
313
|
-
value: function start(
|
|
314
|
-
var startTime =
|
|
315
|
+
value: function start(_ref8) {
|
|
316
|
+
var startTime = _ref8.startTime;
|
|
315
317
|
this.active = true;
|
|
316
318
|
if (this.observers.isBrowserSupported()) {
|
|
317
319
|
this.setViewportSize();
|
|
@@ -333,12 +335,12 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
333
335
|
}, {
|
|
334
336
|
key: "getIgnoredElements",
|
|
335
337
|
value: function getIgnoredElements(componentsLog) {
|
|
336
|
-
return Object.values(componentsLog).flat().filter(function (
|
|
337
|
-
var ignoreReason =
|
|
338
|
+
return Object.values(componentsLog).flat().filter(function (_ref9) {
|
|
339
|
+
var ignoreReason = _ref9.ignoreReason;
|
|
338
340
|
return Boolean(ignoreReason);
|
|
339
|
-
}).map(function (
|
|
340
|
-
var targetName =
|
|
341
|
-
ignoreReason =
|
|
341
|
+
}).map(function (_ref10) {
|
|
342
|
+
var targetName = _ref10.targetName,
|
|
343
|
+
ignoreReason = _ref10.ignoreReason;
|
|
342
344
|
return {
|
|
343
345
|
targetName: targetName,
|
|
344
346
|
ignoreReason: ignoreReason
|
|
@@ -453,12 +455,12 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
453
455
|
}
|
|
454
456
|
}], [{
|
|
455
457
|
key: "calculateVC",
|
|
456
|
-
value: function calculateVC(
|
|
457
|
-
var heatmap =
|
|
458
|
-
|
|
459
|
-
ssr =
|
|
460
|
-
componentsLog =
|
|
461
|
-
viewport =
|
|
458
|
+
value: function calculateVC(_ref11) {
|
|
459
|
+
var heatmap = _ref11.heatmap,
|
|
460
|
+
_ref11$ssr = _ref11.ssr,
|
|
461
|
+
ssr = _ref11$ssr === void 0 ? UNUSED_SECTOR : _ref11$ssr,
|
|
462
|
+
componentsLog = _ref11.componentsLog,
|
|
463
|
+
viewport = _ref11.viewport;
|
|
462
464
|
var lastUpdate = {};
|
|
463
465
|
var totalPainted = 0;
|
|
464
466
|
if (ssr !== UNUSED_SECTOR) {
|
|
@@ -518,11 +520,11 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
518
520
|
});
|
|
519
521
|
return VCRatio;
|
|
520
522
|
}, 0);
|
|
521
|
-
var VCEntries = entries.reduce(function (acc,
|
|
523
|
+
var VCEntries = entries.reduce(function (acc, _ref12, i) {
|
|
522
524
|
var _acc$abs, _componentsLog$timest;
|
|
523
|
-
var
|
|
524
|
-
timestamp =
|
|
525
|
-
entryPainted =
|
|
525
|
+
var _ref13 = (0, _slicedToArray2.default)(_ref12, 2),
|
|
526
|
+
timestamp = _ref13[0],
|
|
527
|
+
entryPainted = _ref13[1];
|
|
526
528
|
var currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
|
|
527
529
|
var currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
|
|
528
530
|
var logEntry = (_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.map(function (v) {
|
|
@@ -42,12 +42,13 @@ var Observers = exports.Observers = /*#__PURE__*/function () {
|
|
|
42
42
|
(0, _defineProperty2.default)(this, "subscribeResults", function (cb) {
|
|
43
43
|
_this.callbacks.add(cb);
|
|
44
44
|
});
|
|
45
|
-
(0, _defineProperty2.default)(this, "observeElement", function (node, mutation,
|
|
45
|
+
(0, _defineProperty2.default)(this, "observeElement", function (node, mutation, type, ignoreReason) {
|
|
46
46
|
var _this$intersectionObs;
|
|
47
47
|
(_this$intersectionObs = _this.intersectionObserver) === null || _this$intersectionObs === void 0 || _this$intersectionObs.observe(node);
|
|
48
48
|
_this.observedMutations.set(node, {
|
|
49
49
|
mutation: mutation,
|
|
50
|
-
ignoreReason: ignoreReason
|
|
50
|
+
ignoreReason: ignoreReason,
|
|
51
|
+
type: type
|
|
51
52
|
});
|
|
52
53
|
});
|
|
53
54
|
this.selectorConfig = _objectSpread(_objectSpread({}, this.selectorConfig), opts.selectorConfig);
|
|
@@ -177,11 +178,9 @@ var Observers = exports.Observers = /*#__PURE__*/function () {
|
|
|
177
178
|
}
|
|
178
179
|
});
|
|
179
180
|
} else if (mutation.type === 'attributes') {
|
|
180
|
-
mutation.
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
}
|
|
184
|
-
});
|
|
181
|
+
if (mutation.target instanceof HTMLElement) {
|
|
182
|
+
_this2.observeElement(mutation.target, mutation, 'attr', ignoreReason);
|
|
183
|
+
}
|
|
185
184
|
}
|
|
186
185
|
});
|
|
187
186
|
_this2.measureStop();
|
|
@@ -241,7 +240,7 @@ var Observers = exports.Observers = /*#__PURE__*/function () {
|
|
|
241
240
|
} catch (e) {
|
|
242
241
|
elementName = 'error';
|
|
243
242
|
}
|
|
244
|
-
callback(data.mutation.timestamp || performance.now(), ir, elementName, target, data.ignoreReason);
|
|
243
|
+
callback(data.mutation.timestamp || performance.now(), ir, elementName, target, data.type, data.ignoreReason);
|
|
245
244
|
});
|
|
246
245
|
_this3.elementsInView.add(target);
|
|
247
246
|
} else {
|
|
@@ -104,7 +104,6 @@ export class VCObserver {
|
|
|
104
104
|
totalTime,
|
|
105
105
|
componentsLog,
|
|
106
106
|
viewport,
|
|
107
|
-
oldDomUpdatesEnabled,
|
|
108
107
|
devToolsEnabled,
|
|
109
108
|
ratios
|
|
110
109
|
} = rawData;
|
|
@@ -160,9 +159,8 @@ export class VCObserver {
|
|
|
160
159
|
const outOfBoundary = outOfBoundaryInfo ? {
|
|
161
160
|
[`${fullPrefix}vc:oob`]: outOfBoundaryInfo
|
|
162
161
|
} : {};
|
|
163
|
-
const oldDomUpdates = oldDomUpdatesEnabled ? {
|
|
164
|
-
|
|
165
|
-
} : {};
|
|
162
|
+
//const oldDomUpdates = oldDomUpdatesEnabled ? { [`${fullPrefix}vc:old:dom`]: ssrVC.VCBox } : {};
|
|
163
|
+
|
|
166
164
|
const stopTime = performance.now();
|
|
167
165
|
|
|
168
166
|
// exposing data to devtools
|
|
@@ -209,19 +207,21 @@ export class VCObserver {
|
|
|
209
207
|
[`${fullPrefix}vc:total`]: totalPainted,
|
|
210
208
|
[`${fullPrefix}vc:ratios`]: ratios,
|
|
211
209
|
...outOfBoundary,
|
|
212
|
-
[`${fullPrefix}vc:
|
|
213
|
-
|
|
210
|
+
[`${fullPrefix}vc:attrs`]: ssrVC.VC,
|
|
211
|
+
//...oldDomUpdates,
|
|
214
212
|
[`${fullPrefix}vc:ignored`]: this.getIgnoredElements(componentsLog)
|
|
215
213
|
};
|
|
216
214
|
});
|
|
217
|
-
_defineProperty(this, "handleUpdate", (rawTime, intersectionRect, targetName, element, ignoreReason) => {
|
|
215
|
+
_defineProperty(this, "handleUpdate", (rawTime, intersectionRect, targetName, element, type, ignoreReason) => {
|
|
218
216
|
this.measureStart();
|
|
219
217
|
if (this.abortReason.reason === null || this.abortReason.blocking === false) {
|
|
220
218
|
const time = Math.round(rawTime - this.startTime);
|
|
221
219
|
const mappedValues = this.mapPixelsToHeatmap(intersectionRect.left, intersectionRect.top, intersectionRect.width, intersectionRect.height);
|
|
222
220
|
this.vcRatios[targetName] = this.getElementRatio(mappedValues);
|
|
223
|
-
this.applyChangesToHeatMap(mappedValues, time, this.heatmap);
|
|
224
221
|
if (!ignoreReason) {
|
|
222
|
+
this.applyChangesToHeatMap(mappedValues, time, this.heatmap);
|
|
223
|
+
}
|
|
224
|
+
if (!ignoreReason && type !== 'attr') {
|
|
225
225
|
this.applyChangesToHeatMap(mappedValues, time, this.ssrInclusiveHeatmap);
|
|
226
226
|
}
|
|
227
227
|
if (!this.componentsLog[time]) {
|
|
@@ -29,12 +29,13 @@ export class Observers {
|
|
|
29
29
|
_defineProperty(this, "subscribeResults", cb => {
|
|
30
30
|
this.callbacks.add(cb);
|
|
31
31
|
});
|
|
32
|
-
_defineProperty(this, "observeElement", (node, mutation,
|
|
32
|
+
_defineProperty(this, "observeElement", (node, mutation, type, ignoreReason) => {
|
|
33
33
|
var _this$intersectionObs;
|
|
34
34
|
(_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.observe(node);
|
|
35
35
|
this.observedMutations.set(node, {
|
|
36
36
|
mutation,
|
|
37
|
-
ignoreReason
|
|
37
|
+
ignoreReason,
|
|
38
|
+
type
|
|
38
39
|
});
|
|
39
40
|
});
|
|
40
41
|
this.selectorConfig = {
|
|
@@ -148,11 +149,9 @@ export class Observers {
|
|
|
148
149
|
}
|
|
149
150
|
});
|
|
150
151
|
} else if (mutation.type === 'attributes') {
|
|
151
|
-
mutation.
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
}
|
|
155
|
-
});
|
|
152
|
+
if (mutation.target instanceof HTMLElement) {
|
|
153
|
+
this.observeElement(mutation.target, mutation, 'attr', ignoreReason);
|
|
154
|
+
}
|
|
156
155
|
}
|
|
157
156
|
});
|
|
158
157
|
this.measureStop();
|
|
@@ -208,7 +207,7 @@ export class Observers {
|
|
|
208
207
|
} catch (e) {
|
|
209
208
|
elementName = 'error';
|
|
210
209
|
}
|
|
211
|
-
callback(data.mutation.timestamp || performance.now(), ir, elementName, target, data.ignoreReason);
|
|
210
|
+
callback(data.mutation.timestamp || performance.now(), ir, elementName, target, data.type, data.ignoreReason);
|
|
212
211
|
});
|
|
213
212
|
this.elementsInView.add(target);
|
|
214
213
|
} else {
|
|
@@ -87,7 +87,7 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
87
87
|
};
|
|
88
88
|
});
|
|
89
89
|
_defineProperty(this, "getVCResult", function (_ref3) {
|
|
90
|
-
var _objectSpread2;
|
|
90
|
+
var _objectSpread2, _objectSpread3;
|
|
91
91
|
var start = _ref3.start,
|
|
92
92
|
stop = _ref3.stop,
|
|
93
93
|
tti = _ref3.tti,
|
|
@@ -109,7 +109,6 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
109
109
|
totalTime = rawData.totalTime,
|
|
110
110
|
componentsLog = rawData.componentsLog,
|
|
111
111
|
viewport = rawData.viewport,
|
|
112
|
-
oldDomUpdatesEnabled = rawData.oldDomUpdatesEnabled,
|
|
113
112
|
devToolsEnabled = rawData.devToolsEnabled,
|
|
114
113
|
ratios = rawData.ratios;
|
|
115
114
|
if (abortReasonInfo !== null && abortReason.blocking) {
|
|
@@ -154,7 +153,8 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
154
153
|
viewport: viewport
|
|
155
154
|
});
|
|
156
155
|
var outOfBoundary = outOfBoundaryInfo ? _defineProperty({}, "".concat(fullPrefix, "vc:oob"), outOfBoundaryInfo) : {};
|
|
157
|
-
|
|
156
|
+
//const oldDomUpdates = oldDomUpdatesEnabled ? { [`${fullPrefix}vc:old:dom`]: ssrVC.VCBox } : {};
|
|
157
|
+
|
|
158
158
|
var stopTime = performance.now();
|
|
159
159
|
|
|
160
160
|
// exposing data to devtools
|
|
@@ -189,18 +189,20 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
189
189
|
} catch (e) {
|
|
190
190
|
/* do nothing */
|
|
191
191
|
}
|
|
192
|
-
return _objectSpread(_objectSpread(
|
|
192
|
+
return _objectSpread(_objectSpread((_objectSpread2 = {
|
|
193
193
|
'metrics:vc': VC
|
|
194
|
-
}, _defineProperty(_objectSpread2, "".concat(fullPrefix, "vc:state"), true), _defineProperty(_objectSpread2, "".concat(fullPrefix, "vc:clean"), !abortReasonInfo), _defineProperty(_objectSpread2, "".concat(fullPrefix, "vc:dom"), VCBox), _defineProperty(_objectSpread2, "".concat(fullPrefix, "vc:updates"), VCEntries.rel.slice(0, 50)), _defineProperty(_objectSpread2, "".concat(fullPrefix, "vc:size"), viewport), _defineProperty(_objectSpread2, "".concat(fullPrefix, "vc:time"), Math.round(totalTime + (stopTime - startTime))), _defineProperty(_objectSpread2, "".concat(fullPrefix, "vc:total"), totalPainted), _defineProperty(_objectSpread2, "".concat(fullPrefix, "vc:ratios"), ratios), _objectSpread2), outOfBoundary), {},
|
|
194
|
+
}, _defineProperty(_objectSpread2, "".concat(fullPrefix, "vc:state"), true), _defineProperty(_objectSpread2, "".concat(fullPrefix, "vc:clean"), !abortReasonInfo), _defineProperty(_objectSpread2, "".concat(fullPrefix, "vc:dom"), VCBox), _defineProperty(_objectSpread2, "".concat(fullPrefix, "vc:updates"), VCEntries.rel.slice(0, 50)), _defineProperty(_objectSpread2, "".concat(fullPrefix, "vc:size"), viewport), _defineProperty(_objectSpread2, "".concat(fullPrefix, "vc:time"), Math.round(totalTime + (stopTime - startTime))), _defineProperty(_objectSpread2, "".concat(fullPrefix, "vc:total"), totalPainted), _defineProperty(_objectSpread2, "".concat(fullPrefix, "vc:ratios"), ratios), _objectSpread2), outOfBoundary), {}, (_objectSpread3 = {}, _defineProperty(_objectSpread3, "".concat(fullPrefix, "vc:attrs"), ssrVC.VC), _defineProperty(_objectSpread3, "".concat(fullPrefix, "vc:ignored"), _this.getIgnoredElements(componentsLog)), _objectSpread3));
|
|
195
195
|
});
|
|
196
|
-
_defineProperty(this, "handleUpdate", function (rawTime, intersectionRect, targetName, element, ignoreReason) {
|
|
196
|
+
_defineProperty(this, "handleUpdate", function (rawTime, intersectionRect, targetName, element, type, ignoreReason) {
|
|
197
197
|
_this.measureStart();
|
|
198
198
|
if (_this.abortReason.reason === null || _this.abortReason.blocking === false) {
|
|
199
199
|
var time = Math.round(rawTime - _this.startTime);
|
|
200
200
|
var mappedValues = _this.mapPixelsToHeatmap(intersectionRect.left, intersectionRect.top, intersectionRect.width, intersectionRect.height);
|
|
201
201
|
_this.vcRatios[targetName] = _this.getElementRatio(mappedValues);
|
|
202
|
-
_this.applyChangesToHeatMap(mappedValues, time, _this.heatmap);
|
|
203
202
|
if (!ignoreReason) {
|
|
203
|
+
_this.applyChangesToHeatMap(mappedValues, time, _this.heatmap);
|
|
204
|
+
}
|
|
205
|
+
if (!ignoreReason && type !== 'attr') {
|
|
204
206
|
_this.applyChangesToHeatMap(mappedValues, time, _this.ssrInclusiveHeatmap);
|
|
205
207
|
}
|
|
206
208
|
if (!_this.componentsLog[time]) {
|
|
@@ -272,10 +274,10 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
272
274
|
var unbinds = attachAbortListeners(window, _this.viewport, _this.abortReasonCallback);
|
|
273
275
|
if ((_window = window) !== null && _window !== void 0 && _window.__SSR_ABORT_LISTENERS__) {
|
|
274
276
|
var _window2;
|
|
275
|
-
Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (
|
|
276
|
-
var
|
|
277
|
-
key =
|
|
278
|
-
time =
|
|
277
|
+
Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref6) {
|
|
278
|
+
var _ref7 = _slicedToArray(_ref6, 2),
|
|
279
|
+
key = _ref7[0],
|
|
280
|
+
time = _ref7[1];
|
|
279
281
|
if (time) {
|
|
280
282
|
_this.abortReasonCallback(key, time);
|
|
281
283
|
}
|
|
@@ -303,8 +305,8 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
303
305
|
}
|
|
304
306
|
_createClass(VCObserver, [{
|
|
305
307
|
key: "start",
|
|
306
|
-
value: function start(
|
|
307
|
-
var startTime =
|
|
308
|
+
value: function start(_ref8) {
|
|
309
|
+
var startTime = _ref8.startTime;
|
|
308
310
|
this.active = true;
|
|
309
311
|
if (this.observers.isBrowserSupported()) {
|
|
310
312
|
this.setViewportSize();
|
|
@@ -326,12 +328,12 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
326
328
|
}, {
|
|
327
329
|
key: "getIgnoredElements",
|
|
328
330
|
value: function getIgnoredElements(componentsLog) {
|
|
329
|
-
return Object.values(componentsLog).flat().filter(function (
|
|
330
|
-
var ignoreReason =
|
|
331
|
+
return Object.values(componentsLog).flat().filter(function (_ref9) {
|
|
332
|
+
var ignoreReason = _ref9.ignoreReason;
|
|
331
333
|
return Boolean(ignoreReason);
|
|
332
|
-
}).map(function (
|
|
333
|
-
var targetName =
|
|
334
|
-
ignoreReason =
|
|
334
|
+
}).map(function (_ref10) {
|
|
335
|
+
var targetName = _ref10.targetName,
|
|
336
|
+
ignoreReason = _ref10.ignoreReason;
|
|
335
337
|
return {
|
|
336
338
|
targetName: targetName,
|
|
337
339
|
ignoreReason: ignoreReason
|
|
@@ -446,12 +448,12 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
446
448
|
}
|
|
447
449
|
}], [{
|
|
448
450
|
key: "calculateVC",
|
|
449
|
-
value: function calculateVC(
|
|
450
|
-
var heatmap =
|
|
451
|
-
|
|
452
|
-
ssr =
|
|
453
|
-
componentsLog =
|
|
454
|
-
viewport =
|
|
451
|
+
value: function calculateVC(_ref11) {
|
|
452
|
+
var heatmap = _ref11.heatmap,
|
|
453
|
+
_ref11$ssr = _ref11.ssr,
|
|
454
|
+
ssr = _ref11$ssr === void 0 ? UNUSED_SECTOR : _ref11$ssr,
|
|
455
|
+
componentsLog = _ref11.componentsLog,
|
|
456
|
+
viewport = _ref11.viewport;
|
|
455
457
|
var lastUpdate = {};
|
|
456
458
|
var totalPainted = 0;
|
|
457
459
|
if (ssr !== UNUSED_SECTOR) {
|
|
@@ -511,11 +513,11 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
511
513
|
});
|
|
512
514
|
return VCRatio;
|
|
513
515
|
}, 0);
|
|
514
|
-
var VCEntries = entries.reduce(function (acc,
|
|
516
|
+
var VCEntries = entries.reduce(function (acc, _ref12, i) {
|
|
515
517
|
var _acc$abs, _componentsLog$timest;
|
|
516
|
-
var
|
|
517
|
-
timestamp =
|
|
518
|
-
entryPainted =
|
|
518
|
+
var _ref13 = _slicedToArray(_ref12, 2),
|
|
519
|
+
timestamp = _ref13[0],
|
|
520
|
+
entryPainted = _ref13[1];
|
|
519
521
|
var currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
|
|
520
522
|
var currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
|
|
521
523
|
var logEntry = (_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.map(function (v) {
|
|
@@ -35,12 +35,13 @@ export var Observers = /*#__PURE__*/function () {
|
|
|
35
35
|
_defineProperty(this, "subscribeResults", function (cb) {
|
|
36
36
|
_this.callbacks.add(cb);
|
|
37
37
|
});
|
|
38
|
-
_defineProperty(this, "observeElement", function (node, mutation,
|
|
38
|
+
_defineProperty(this, "observeElement", function (node, mutation, type, ignoreReason) {
|
|
39
39
|
var _this$intersectionObs;
|
|
40
40
|
(_this$intersectionObs = _this.intersectionObserver) === null || _this$intersectionObs === void 0 || _this$intersectionObs.observe(node);
|
|
41
41
|
_this.observedMutations.set(node, {
|
|
42
42
|
mutation: mutation,
|
|
43
|
-
ignoreReason: ignoreReason
|
|
43
|
+
ignoreReason: ignoreReason,
|
|
44
|
+
type: type
|
|
44
45
|
});
|
|
45
46
|
});
|
|
46
47
|
this.selectorConfig = _objectSpread(_objectSpread({}, this.selectorConfig), opts.selectorConfig);
|
|
@@ -170,11 +171,9 @@ export var Observers = /*#__PURE__*/function () {
|
|
|
170
171
|
}
|
|
171
172
|
});
|
|
172
173
|
} else if (mutation.type === 'attributes') {
|
|
173
|
-
mutation.
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
}
|
|
177
|
-
});
|
|
174
|
+
if (mutation.target instanceof HTMLElement) {
|
|
175
|
+
_this2.observeElement(mutation.target, mutation, 'attr', ignoreReason);
|
|
176
|
+
}
|
|
178
177
|
}
|
|
179
178
|
});
|
|
180
179
|
_this2.measureStop();
|
|
@@ -234,7 +233,7 @@ export var Observers = /*#__PURE__*/function () {
|
|
|
234
233
|
} catch (e) {
|
|
235
234
|
elementName = 'error';
|
|
236
235
|
}
|
|
237
|
-
callback(data.mutation.timestamp || performance.now(), ir, elementName, target, data.ignoreReason);
|
|
236
|
+
callback(data.mutation.timestamp || performance.now(), ir, elementName, target, data.type, data.ignoreReason);
|
|
238
237
|
});
|
|
239
238
|
_this3.elementsInView.add(target);
|
|
240
239
|
} else {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type VCIgnoreReason } from '../../../common/vc/types';
|
|
2
|
-
export type Callback = (time: number, box: DOMRectReadOnly, targetName: string, node: HTMLElement, ignoreReason?: VCIgnoreReason) => void;
|
|
2
|
+
export type Callback = (time: number, box: DOMRectReadOnly, targetName: string, node: HTMLElement, type: string, ignoreReason?: VCIgnoreReason) => void;
|
|
3
3
|
export type MutationRecordWithTimestamp = MutationRecord & {
|
|
4
4
|
timestamp?: number;
|
|
5
5
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type VCIgnoreReason } from '../../../common/vc/types';
|
|
2
|
-
export type Callback = (time: number, box: DOMRectReadOnly, targetName: string, node: HTMLElement, ignoreReason?: VCIgnoreReason) => void;
|
|
2
|
+
export type Callback = (time: number, box: DOMRectReadOnly, targetName: string, node: HTMLElement, type: string, ignoreReason?: VCIgnoreReason) => void;
|
|
3
3
|
export type MutationRecordWithTimestamp = MutationRecord & {
|
|
4
4
|
timestamp?: number;
|
|
5
5
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/react-ufo",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.9",
|
|
4
4
|
"description": "Parts of React UFO that are publicly available",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -122,10 +122,5 @@
|
|
|
122
122
|
"import-no-extraneous-disable-for-examples-and-docs"
|
|
123
123
|
]
|
|
124
124
|
}
|
|
125
|
-
},
|
|
126
|
-
"platform-feature-flags": {
|
|
127
|
-
"no_ssr_placeholder_check_when_not_intersecting": {
|
|
128
|
-
"type": "boolean"
|
|
129
|
-
}
|
|
130
125
|
}
|
|
131
126
|
}
|