@atlaskit/react-ufo 4.7.1 → 4.7.2
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 +9 -0
- package/dist/cjs/vc/vc-observer/observers/ssr-placeholders/index.js +2 -2
- package/dist/cjs/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js +4 -6
- package/dist/cjs/vc/vc-observer-new/viewport-observer/index.js +30 -48
- package/dist/es2019/vc/vc-observer/observers/ssr-placeholders/index.js +2 -2
- package/dist/es2019/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js +9 -13
- package/dist/es2019/vc/vc-observer-new/viewport-observer/index.js +20 -29
- package/dist/esm/vc/vc-observer/observers/ssr-placeholders/index.js +2 -2
- package/dist/esm/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js +4 -6
- package/dist/esm/vc/vc-observer-new/viewport-observer/index.js +30 -48
- package/package.json +1 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/ufo-interaction-ignore
|
|
2
2
|
|
|
3
|
+
## 4.7.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`d1ac995997b02`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d1ac995997b02) -
|
|
8
|
+
FG cleanup - platform_ufo_ssr_placeholder_resolution_ttvc_v3
|
|
9
|
+
- [`c7980ce6abb45`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c7980ce6abb45) -
|
|
10
|
+
FG cleanup - platform_ufo_serialise_ttvc_v3_debug_data
|
|
11
|
+
|
|
3
12
|
## 4.7.1
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
|
@@ -214,7 +214,7 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
|
|
|
214
214
|
return element;
|
|
215
215
|
}
|
|
216
216
|
|
|
217
|
-
//
|
|
217
|
+
// Validates placeholder match using asynchronous observation and resolves with the result
|
|
218
218
|
}, {
|
|
219
219
|
key: "checkIfExistedAndSizeMatching",
|
|
220
220
|
value: function checkIfExistedAndSizeMatching(el) {
|
|
@@ -233,7 +233,7 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
|
|
|
233
233
|
});
|
|
234
234
|
}
|
|
235
235
|
|
|
236
|
-
//
|
|
236
|
+
// Validates placeholder match synchronously using stored SSR dimensions and current bounds
|
|
237
237
|
}, {
|
|
238
238
|
key: "checkIfExistedAndSizeMatchingV3",
|
|
239
239
|
value: function checkIfExistedAndSizeMatchingV3(el) {
|
|
@@ -204,15 +204,14 @@ var AbstractVCCalculatorBase = exports.default = /*#__PURE__*/function () {
|
|
|
204
204
|
}
|
|
205
205
|
}
|
|
206
206
|
enhancedVcLogs = vcLogs ? vcLogs.map(function (log) {
|
|
207
|
-
return _objectSpread(_objectSpread(
|
|
207
|
+
return _objectSpread(_objectSpread({}, log), {}, {
|
|
208
208
|
entries: log.entries.map(function (entry) {
|
|
209
209
|
var _entry$rect, _entry$previousRect;
|
|
210
210
|
return _objectSpread(_objectSpread({}, entry), {}, {
|
|
211
211
|
rect: (_entry$rect = entry.rect) === null || _entry$rect === void 0 ? void 0 : _entry$rect.toJSON(),
|
|
212
212
|
previousRect: (_entry$previousRect = entry.previousRect) === null || _entry$previousRect === void 0 ? void 0 : _entry$previousRect.toJSON()
|
|
213
213
|
});
|
|
214
|
-
})
|
|
215
|
-
}), {}, {
|
|
214
|
+
}),
|
|
216
215
|
viewportPercentage: log.viewportPercentage
|
|
217
216
|
});
|
|
218
217
|
}) : []; // If 3p metric enabled - calculate the debug details
|
|
@@ -268,10 +267,9 @@ var AbstractVCCalculatorBase = exports.default = /*#__PURE__*/function () {
|
|
|
268
267
|
if (!ignoredEntriesByTime.has(timestamp)) {
|
|
269
268
|
ignoredEntriesByTime.set(timestamp, []);
|
|
270
269
|
}
|
|
271
|
-
(_ignoredEntriesByTime = ignoredEntriesByTime.get(timestamp)) === null || _ignoredEntriesByTime === void 0 || _ignoredEntriesByTime.push(_objectSpread(_objectSpread(
|
|
270
|
+
(_ignoredEntriesByTime = ignoredEntriesByTime.get(timestamp)) === null || _ignoredEntriesByTime === void 0 || _ignoredEntriesByTime.push(_objectSpread(_objectSpread({}, viewportData), {}, {
|
|
272
271
|
rect: (_viewportData$rect = viewportData.rect) === null || _viewportData$rect === void 0 ? void 0 : _viewportData$rect.toJSON(),
|
|
273
|
-
previousRect: (_viewportData$previou = viewportData.previousRect) === null || _viewportData$previou === void 0 ? void 0 : _viewportData$previou.toJSON()
|
|
274
|
-
}), {}, {
|
|
272
|
+
previousRect: (_viewportData$previou = viewportData.previousRect) === null || _viewportData$previou === void 0 ? void 0 : _viewportData$previou.toJSON(),
|
|
275
273
|
ignoreReason: viewportData.visible ? viewportData.type : 'not-visible'
|
|
276
274
|
}));
|
|
277
275
|
}
|
|
@@ -125,7 +125,7 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
|
|
|
125
125
|
_iterator = _createForOfIteratorHelper(addedNodes);
|
|
126
126
|
_context2.prev = 4;
|
|
127
127
|
_loop = /*#__PURE__*/_regenerator.default.mark(function _loop() {
|
|
128
|
-
var addedNodeRef, addedNode, ssrState, SSRStateEnum, _this$intersectionObs, _this$intersectionObs2, ssrPlaceholderHandler, _this$intersectionObs3, result, _this$intersectionObs4,
|
|
128
|
+
var addedNodeRef, addedNode, ssrState, SSRStateEnum, _this$intersectionObs, _this$intersectionObs2, ssrPlaceholderHandler, _this$intersectionObs3, result, _this$intersectionObs4, sameDeletedNode, isInIgnoreLsMarker, _this$intersectionObs5, _this$intersectionObs6, _checkWithinComponent, isWithinThirdPartySegment, _this$intersectionObs7, validTargets, _iterator2, _step2, _this$intersectionObs8, validTarget, _this$intersectionObs9;
|
|
129
129
|
return _regenerator.default.wrap(function _loop$(_context) {
|
|
130
130
|
while (1) switch (_context.prev = _context.next) {
|
|
131
131
|
case 0:
|
|
@@ -173,58 +173,40 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
|
|
|
173
173
|
ssrState.state = SSRStateEnum.normal;
|
|
174
174
|
case 19:
|
|
175
175
|
if (!_this.getSSRPlaceholderHandler) {
|
|
176
|
-
_context.next =
|
|
176
|
+
_context.next = 33;
|
|
177
177
|
break;
|
|
178
178
|
}
|
|
179
179
|
ssrPlaceholderHandler = _this.getSSRPlaceholderHandler();
|
|
180
180
|
if (!ssrPlaceholderHandler) {
|
|
181
|
-
_context.next =
|
|
181
|
+
_context.next = 33;
|
|
182
182
|
break;
|
|
183
183
|
}
|
|
184
184
|
if (!(ssrPlaceholderHandler.isPlaceholder(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode))) {
|
|
185
|
-
_context.next =
|
|
186
|
-
break;
|
|
187
|
-
}
|
|
188
|
-
if (!(0, _platformFeatureFlags.fg)('platform_ufo_ssr_placeholder_resolution_ttvc_v3')) {
|
|
189
|
-
_context.next = 29;
|
|
185
|
+
_context.next = 26;
|
|
190
186
|
break;
|
|
191
187
|
}
|
|
192
188
|
if (!ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(addedNode)) {
|
|
193
|
-
_context.next =
|
|
189
|
+
_context.next = 26;
|
|
194
190
|
break;
|
|
195
191
|
}
|
|
196
192
|
(_this$intersectionObs3 = _this.intersectionObserver) === null || _this$intersectionObs3 === void 0 || _this$intersectionObs3.watchAndTag(addedNode, 'mutation:ssr-placeholder');
|
|
197
193
|
return _context.abrupt("return", 0);
|
|
198
|
-
case
|
|
199
|
-
_context.next = 35;
|
|
200
|
-
break;
|
|
201
|
-
case 29:
|
|
202
|
-
_context.next = 31;
|
|
203
|
-
return ssrPlaceholderHandler.checkIfExistedAndSizeMatching(addedNode);
|
|
204
|
-
case 31:
|
|
205
|
-
result = _context.sent;
|
|
206
|
-
if (!(result !== false)) {
|
|
207
|
-
_context.next = 35;
|
|
208
|
-
break;
|
|
209
|
-
}
|
|
210
|
-
(_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(addedNode, 'mutation:ssr-placeholder');
|
|
211
|
-
return _context.abrupt("return", 0);
|
|
212
|
-
case 35:
|
|
194
|
+
case 26:
|
|
213
195
|
if (!(ssrPlaceholderHandler.isPlaceholderReplacement(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode))) {
|
|
214
|
-
_context.next =
|
|
196
|
+
_context.next = 33;
|
|
215
197
|
break;
|
|
216
198
|
}
|
|
217
|
-
_context.next =
|
|
199
|
+
_context.next = 29;
|
|
218
200
|
return ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(addedNode);
|
|
219
|
-
case
|
|
220
|
-
|
|
221
|
-
if (!(
|
|
222
|
-
_context.next =
|
|
201
|
+
case 29:
|
|
202
|
+
result = _context.sent;
|
|
203
|
+
if (!(result !== false)) {
|
|
204
|
+
_context.next = 33;
|
|
223
205
|
break;
|
|
224
206
|
}
|
|
225
|
-
(_this$
|
|
207
|
+
(_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(addedNode, 'mutation:ssr-placeholder');
|
|
226
208
|
return _context.abrupt("return", 0);
|
|
227
|
-
case
|
|
209
|
+
case 33:
|
|
228
210
|
sameDeletedNode = removedNodes.find(function (ref) {
|
|
229
211
|
var n = ref.deref();
|
|
230
212
|
if (!n || !addedNode) {
|
|
@@ -234,27 +216,27 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
|
|
|
234
216
|
});
|
|
235
217
|
isInIgnoreLsMarker = (0, _isInVcIgnoreIfNoLayoutShiftMarker.default)(addedNode);
|
|
236
218
|
if (!(sameDeletedNode && isInIgnoreLsMarker)) {
|
|
237
|
-
_context.next =
|
|
219
|
+
_context.next = 38;
|
|
238
220
|
break;
|
|
239
221
|
}
|
|
240
|
-
(_this$
|
|
222
|
+
(_this$intersectionObs5 = _this.intersectionObserver) === null || _this$intersectionObs5 === void 0 || _this$intersectionObs5.watchAndTag(addedNode, 'mutation:remount');
|
|
241
223
|
return _context.abrupt("return", 0);
|
|
242
|
-
case
|
|
224
|
+
case 38:
|
|
243
225
|
if (!(0, _vcUtils.isContainedWithinMediaWrapper)(addedNode)) {
|
|
244
|
-
_context.next =
|
|
226
|
+
_context.next = 41;
|
|
245
227
|
break;
|
|
246
228
|
}
|
|
247
|
-
(_this$
|
|
229
|
+
(_this$intersectionObs6 = _this.intersectionObserver) === null || _this$intersectionObs6 === void 0 || _this$intersectionObs6.watchAndTag(addedNode, 'mutation:media');
|
|
248
230
|
return _context.abrupt("return", 0);
|
|
249
|
-
case
|
|
231
|
+
case 41:
|
|
250
232
|
_checkWithinComponent = (0, _checkWithinComponent2.default)(addedNode, 'UFOThirdPartySegment', _this.mapIs3pResult), isWithinThirdPartySegment = _checkWithinComponent.isWithin;
|
|
251
233
|
if (!isWithinThirdPartySegment) {
|
|
252
|
-
_context.next =
|
|
234
|
+
_context.next = 45;
|
|
253
235
|
break;
|
|
254
236
|
}
|
|
255
|
-
(_this$
|
|
237
|
+
(_this$intersectionObs7 = _this.intersectionObserver) === null || _this$intersectionObs7 === void 0 || _this$intersectionObs7.watchAndTag(addedNode, 'mutation:third-party-element');
|
|
256
238
|
return _context.abrupt("return", 0);
|
|
257
|
-
case
|
|
239
|
+
case 45:
|
|
258
240
|
if ((0, _platformFeatureFlags.fg)('platform_ufo_display_content_resolution_ttvc_v3')) {
|
|
259
241
|
// Check if the target has display:content css property, return array of valid targets
|
|
260
242
|
validTargets = (0, _checkDisplayContent.default)(addedNode);
|
|
@@ -262,7 +244,7 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
|
|
|
262
244
|
try {
|
|
263
245
|
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
|
264
246
|
validTarget = _step2.value;
|
|
265
|
-
(_this$
|
|
247
|
+
(_this$intersectionObs8 = _this.intersectionObserver) === null || _this$intersectionObs8 === void 0 || _this$intersectionObs8.watchAndTag(validTarget, createElementMutationsWatcher(removedNodeRects));
|
|
266
248
|
}
|
|
267
249
|
} catch (err) {
|
|
268
250
|
_iterator2.e(err);
|
|
@@ -273,9 +255,9 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
|
|
|
273
255
|
if ((0, _platformFeatureFlags.fg)('platform_ufo_display_content_track_occurrence')) {
|
|
274
256
|
(0, _trackDisplayContentOccurrence.default)(addedNode);
|
|
275
257
|
}
|
|
276
|
-
(_this$
|
|
258
|
+
(_this$intersectionObs9 = _this.intersectionObserver) === null || _this$intersectionObs9 === void 0 || _this$intersectionObs9.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
|
|
277
259
|
}
|
|
278
|
-
case
|
|
260
|
+
case 46:
|
|
279
261
|
case "end":
|
|
280
262
|
return _context.stop();
|
|
281
263
|
}
|
|
@@ -320,12 +302,12 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
|
|
|
320
302
|
};
|
|
321
303
|
}());
|
|
322
304
|
(0, _defineProperty2.default)(this, "handleAttributeMutation", function (_ref6) {
|
|
323
|
-
var _this$
|
|
305
|
+
var _this$intersectionObs0;
|
|
324
306
|
var target = _ref6.target,
|
|
325
307
|
attributeName = _ref6.attributeName,
|
|
326
308
|
oldValue = _ref6.oldValue,
|
|
327
309
|
newValue = _ref6.newValue;
|
|
328
|
-
(_this$
|
|
310
|
+
(_this$intersectionObs0 = _this.intersectionObserver) === null || _this$intersectionObs0 === void 0 || _this$intersectionObs0.watchAndTag(target, function (_ref7) {
|
|
329
311
|
var target = _ref7.target,
|
|
330
312
|
rect = _ref7.rect;
|
|
331
313
|
if ((0, _vcUtils.isContainedWithinMediaWrapper)(target)) {
|
|
@@ -465,12 +447,12 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
|
|
|
465
447
|
}, {
|
|
466
448
|
key: "stop",
|
|
467
449
|
value: function stop() {
|
|
468
|
-
var _this$mutationObserve2, _this$
|
|
450
|
+
var _this$mutationObserve2, _this$intersectionObs1, _this$performanceObse2;
|
|
469
451
|
if (!this.isStarted) {
|
|
470
452
|
return;
|
|
471
453
|
}
|
|
472
454
|
(_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 || _this$mutationObserve2.disconnect();
|
|
473
|
-
(_this$
|
|
455
|
+
(_this$intersectionObs1 = this.intersectionObserver) === null || _this$intersectionObs1 === void 0 || _this$intersectionObs1.disconnect();
|
|
474
456
|
(_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 || _this$performanceObse2.disconnect();
|
|
475
457
|
this.isStarted = false;
|
|
476
458
|
// Clean up caches when stopping
|
|
@@ -185,7 +185,7 @@ export class SSRPlaceholderHandlers {
|
|
|
185
185
|
return element;
|
|
186
186
|
}
|
|
187
187
|
|
|
188
|
-
//
|
|
188
|
+
// Validates placeholder match using asynchronous observation and resolves with the result
|
|
189
189
|
checkIfExistedAndSizeMatching(el) {
|
|
190
190
|
el = this.findNearestPlaceholderContainerIfIgnored(el);
|
|
191
191
|
const id = this.getPlaceholderId(el);
|
|
@@ -201,7 +201,7 @@ export class SSRPlaceholderHandlers {
|
|
|
201
201
|
});
|
|
202
202
|
}
|
|
203
203
|
|
|
204
|
-
//
|
|
204
|
+
// Validates placeholder match synchronously using stored SSR dimensions and current bounds
|
|
205
205
|
checkIfExistedAndSizeMatchingV3(el) {
|
|
206
206
|
el = this.findNearestPlaceholderContainerIfIgnored(el);
|
|
207
207
|
const id = this.getPlaceholderId(el);
|
|
@@ -121,15 +121,13 @@ export default class AbstractVCCalculatorBase {
|
|
|
121
121
|
}
|
|
122
122
|
let enhancedVcLogs = vcLogs ? vcLogs.map(log => ({
|
|
123
123
|
...log,
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
};
|
|
132
|
-
})
|
|
124
|
+
entries: log.entries.map(entry => {
|
|
125
|
+
var _entry$rect, _entry$previousRect;
|
|
126
|
+
return {
|
|
127
|
+
...entry,
|
|
128
|
+
rect: (_entry$rect = entry.rect) === null || _entry$rect === void 0 ? void 0 : _entry$rect.toJSON(),
|
|
129
|
+
previousRect: (_entry$previousRect = entry.previousRect) === null || _entry$previousRect === void 0 ? void 0 : _entry$previousRect.toJSON()
|
|
130
|
+
};
|
|
133
131
|
}),
|
|
134
132
|
viewportPercentage: log.viewportPercentage
|
|
135
133
|
})) : [];
|
|
@@ -182,10 +180,8 @@ export default class AbstractVCCalculatorBase {
|
|
|
182
180
|
}
|
|
183
181
|
(_ignoredEntriesByTime = ignoredEntriesByTime.get(timestamp)) === null || _ignoredEntriesByTime === void 0 ? void 0 : _ignoredEntriesByTime.push({
|
|
184
182
|
...viewportData,
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
previousRect: (_viewportData$previou = viewportData.previousRect) === null || _viewportData$previou === void 0 ? void 0 : _viewportData$previou.toJSON()
|
|
188
|
-
}),
|
|
183
|
+
rect: (_viewportData$rect = viewportData.rect) === null || _viewportData$rect === void 0 ? void 0 : _viewportData$rect.toJSON(),
|
|
184
|
+
previousRect: (_viewportData$previou = viewportData.previousRect) === null || _viewportData$previou === void 0 ? void 0 : _viewportData$previou.toJSON(),
|
|
189
185
|
ignoreReason: viewportData.visible ? viewportData.type : 'not-visible'
|
|
190
186
|
});
|
|
191
187
|
}
|
|
@@ -142,27 +142,18 @@ export default class ViewportObserver {
|
|
|
142
142
|
const ssrPlaceholderHandler = this.getSSRPlaceholderHandler();
|
|
143
143
|
if (ssrPlaceholderHandler) {
|
|
144
144
|
if (ssrPlaceholderHandler.isPlaceholder(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode)) {
|
|
145
|
-
if (
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
continue;
|
|
150
|
-
}
|
|
151
|
-
} else {
|
|
152
|
-
const result = await ssrPlaceholderHandler.checkIfExistedAndSizeMatching(addedNode);
|
|
153
|
-
if (result !== false) {
|
|
154
|
-
var _this$intersectionObs4;
|
|
155
|
-
(_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.watchAndTag(addedNode, 'mutation:ssr-placeholder');
|
|
156
|
-
continue;
|
|
157
|
-
}
|
|
145
|
+
if (ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(addedNode)) {
|
|
146
|
+
var _this$intersectionObs3;
|
|
147
|
+
(_this$intersectionObs3 = this.intersectionObserver) === null || _this$intersectionObs3 === void 0 ? void 0 : _this$intersectionObs3.watchAndTag(addedNode, 'mutation:ssr-placeholder');
|
|
148
|
+
continue;
|
|
158
149
|
}
|
|
159
150
|
// If result is false, continue to normal mutation logic below
|
|
160
151
|
}
|
|
161
152
|
if (ssrPlaceholderHandler.isPlaceholderReplacement(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode)) {
|
|
162
153
|
const result = await ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(addedNode);
|
|
163
154
|
if (result !== false) {
|
|
164
|
-
var _this$
|
|
165
|
-
(_this$
|
|
155
|
+
var _this$intersectionObs4;
|
|
156
|
+
(_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.watchAndTag(addedNode, 'mutation:ssr-placeholder');
|
|
166
157
|
continue;
|
|
167
158
|
}
|
|
168
159
|
// If result is false, continue to normal mutation logic below
|
|
@@ -178,36 +169,36 @@ export default class ViewportObserver {
|
|
|
178
169
|
});
|
|
179
170
|
const isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(addedNode);
|
|
180
171
|
if (sameDeletedNode && isInIgnoreLsMarker) {
|
|
181
|
-
var _this$
|
|
182
|
-
(_this$
|
|
172
|
+
var _this$intersectionObs5;
|
|
173
|
+
(_this$intersectionObs5 = this.intersectionObserver) === null || _this$intersectionObs5 === void 0 ? void 0 : _this$intersectionObs5.watchAndTag(addedNode, 'mutation:remount');
|
|
183
174
|
continue;
|
|
184
175
|
}
|
|
185
176
|
if (isContainedWithinMediaWrapper(addedNode)) {
|
|
186
|
-
var _this$
|
|
187
|
-
(_this$
|
|
177
|
+
var _this$intersectionObs6;
|
|
178
|
+
(_this$intersectionObs6 = this.intersectionObserver) === null || _this$intersectionObs6 === void 0 ? void 0 : _this$intersectionObs6.watchAndTag(addedNode, 'mutation:media');
|
|
188
179
|
continue;
|
|
189
180
|
}
|
|
190
181
|
const {
|
|
191
182
|
isWithin: isWithinThirdPartySegment
|
|
192
183
|
} = checkWithinComponent(addedNode, 'UFOThirdPartySegment', this.mapIs3pResult);
|
|
193
184
|
if (isWithinThirdPartySegment) {
|
|
194
|
-
var _this$
|
|
195
|
-
(_this$
|
|
185
|
+
var _this$intersectionObs7;
|
|
186
|
+
(_this$intersectionObs7 = this.intersectionObserver) === null || _this$intersectionObs7 === void 0 ? void 0 : _this$intersectionObs7.watchAndTag(addedNode, 'mutation:third-party-element');
|
|
196
187
|
continue;
|
|
197
188
|
}
|
|
198
189
|
if (fg('platform_ufo_display_content_resolution_ttvc_v3')) {
|
|
199
190
|
// Check if the target has display:content css property, return array of valid targets
|
|
200
191
|
const validTargets = checkCssProperty(addedNode);
|
|
201
192
|
for (const validTarget of validTargets) {
|
|
202
|
-
var _this$
|
|
203
|
-
(_this$
|
|
193
|
+
var _this$intersectionObs8;
|
|
194
|
+
(_this$intersectionObs8 = this.intersectionObserver) === null || _this$intersectionObs8 === void 0 ? void 0 : _this$intersectionObs8.watchAndTag(validTarget, createElementMutationsWatcher(removedNodeRects));
|
|
204
195
|
}
|
|
205
196
|
} else {
|
|
206
|
-
var _this$
|
|
197
|
+
var _this$intersectionObs9;
|
|
207
198
|
if (fg('platform_ufo_display_content_track_occurrence')) {
|
|
208
199
|
trackDisplayContentsOccurrence(addedNode);
|
|
209
200
|
}
|
|
210
|
-
(_this$
|
|
201
|
+
(_this$intersectionObs9 = this.intersectionObserver) === null || _this$intersectionObs9 === void 0 ? void 0 : _this$intersectionObs9.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
|
|
211
202
|
}
|
|
212
203
|
}
|
|
213
204
|
});
|
|
@@ -217,8 +208,8 @@ export default class ViewportObserver {
|
|
|
217
208
|
oldValue,
|
|
218
209
|
newValue
|
|
219
210
|
}) => {
|
|
220
|
-
var _this$
|
|
221
|
-
(_this$
|
|
211
|
+
var _this$intersectionObs0;
|
|
212
|
+
(_this$intersectionObs0 = this.intersectionObserver) === null || _this$intersectionObs0 === void 0 ? void 0 : _this$intersectionObs0.watchAndTag(target, ({
|
|
222
213
|
target,
|
|
223
214
|
rect
|
|
224
215
|
}) => {
|
|
@@ -345,12 +336,12 @@ export default class ViewportObserver {
|
|
|
345
336
|
this.isStarted = true;
|
|
346
337
|
}
|
|
347
338
|
stop() {
|
|
348
|
-
var _this$mutationObserve2, _this$
|
|
339
|
+
var _this$mutationObserve2, _this$intersectionObs1, _this$performanceObse2;
|
|
349
340
|
if (!this.isStarted) {
|
|
350
341
|
return;
|
|
351
342
|
}
|
|
352
343
|
(_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 ? void 0 : _this$mutationObserve2.disconnect();
|
|
353
|
-
(_this$
|
|
344
|
+
(_this$intersectionObs1 = this.intersectionObserver) === null || _this$intersectionObs1 === void 0 ? void 0 : _this$intersectionObs1.disconnect();
|
|
354
345
|
(_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 ? void 0 : _this$performanceObse2.disconnect();
|
|
355
346
|
this.isStarted = false;
|
|
356
347
|
// Clean up caches when stopping
|
|
@@ -207,7 +207,7 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
|
|
|
207
207
|
return element;
|
|
208
208
|
}
|
|
209
209
|
|
|
210
|
-
//
|
|
210
|
+
// Validates placeholder match using asynchronous observation and resolves with the result
|
|
211
211
|
}, {
|
|
212
212
|
key: "checkIfExistedAndSizeMatching",
|
|
213
213
|
value: function checkIfExistedAndSizeMatching(el) {
|
|
@@ -226,7 +226,7 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
|
|
|
226
226
|
});
|
|
227
227
|
}
|
|
228
228
|
|
|
229
|
-
//
|
|
229
|
+
// Validates placeholder match synchronously using stored SSR dimensions and current bounds
|
|
230
230
|
}, {
|
|
231
231
|
key: "checkIfExistedAndSizeMatchingV3",
|
|
232
232
|
value: function checkIfExistedAndSizeMatchingV3(el) {
|
|
@@ -198,15 +198,14 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
|
|
|
198
198
|
}
|
|
199
199
|
}
|
|
200
200
|
enhancedVcLogs = vcLogs ? vcLogs.map(function (log) {
|
|
201
|
-
return _objectSpread(_objectSpread(
|
|
201
|
+
return _objectSpread(_objectSpread({}, log), {}, {
|
|
202
202
|
entries: log.entries.map(function (entry) {
|
|
203
203
|
var _entry$rect, _entry$previousRect;
|
|
204
204
|
return _objectSpread(_objectSpread({}, entry), {}, {
|
|
205
205
|
rect: (_entry$rect = entry.rect) === null || _entry$rect === void 0 ? void 0 : _entry$rect.toJSON(),
|
|
206
206
|
previousRect: (_entry$previousRect = entry.previousRect) === null || _entry$previousRect === void 0 ? void 0 : _entry$previousRect.toJSON()
|
|
207
207
|
});
|
|
208
|
-
})
|
|
209
|
-
}), {}, {
|
|
208
|
+
}),
|
|
210
209
|
viewportPercentage: log.viewportPercentage
|
|
211
210
|
});
|
|
212
211
|
}) : []; // If 3p metric enabled - calculate the debug details
|
|
@@ -262,10 +261,9 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
|
|
|
262
261
|
if (!ignoredEntriesByTime.has(timestamp)) {
|
|
263
262
|
ignoredEntriesByTime.set(timestamp, []);
|
|
264
263
|
}
|
|
265
|
-
(_ignoredEntriesByTime = ignoredEntriesByTime.get(timestamp)) === null || _ignoredEntriesByTime === void 0 || _ignoredEntriesByTime.push(_objectSpread(_objectSpread(
|
|
264
|
+
(_ignoredEntriesByTime = ignoredEntriesByTime.get(timestamp)) === null || _ignoredEntriesByTime === void 0 || _ignoredEntriesByTime.push(_objectSpread(_objectSpread({}, viewportData), {}, {
|
|
266
265
|
rect: (_viewportData$rect = viewportData.rect) === null || _viewportData$rect === void 0 ? void 0 : _viewportData$rect.toJSON(),
|
|
267
|
-
previousRect: (_viewportData$previou = viewportData.previousRect) === null || _viewportData$previou === void 0 ? void 0 : _viewportData$previou.toJSON()
|
|
268
|
-
}), {}, {
|
|
266
|
+
previousRect: (_viewportData$previou = viewportData.previousRect) === null || _viewportData$previou === void 0 ? void 0 : _viewportData$previou.toJSON(),
|
|
269
267
|
ignoreReason: viewportData.visible ? viewportData.type : 'not-visible'
|
|
270
268
|
}));
|
|
271
269
|
}
|
|
@@ -116,7 +116,7 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
116
116
|
_iterator = _createForOfIteratorHelper(addedNodes);
|
|
117
117
|
_context2.prev = 4;
|
|
118
118
|
_loop = /*#__PURE__*/_regeneratorRuntime.mark(function _loop() {
|
|
119
|
-
var addedNodeRef, addedNode, ssrState, SSRStateEnum, _this$intersectionObs, _this$intersectionObs2, ssrPlaceholderHandler, _this$intersectionObs3, result, _this$intersectionObs4,
|
|
119
|
+
var addedNodeRef, addedNode, ssrState, SSRStateEnum, _this$intersectionObs, _this$intersectionObs2, ssrPlaceholderHandler, _this$intersectionObs3, result, _this$intersectionObs4, sameDeletedNode, isInIgnoreLsMarker, _this$intersectionObs5, _this$intersectionObs6, _checkWithinComponent, isWithinThirdPartySegment, _this$intersectionObs7, validTargets, _iterator2, _step2, _this$intersectionObs8, validTarget, _this$intersectionObs9;
|
|
120
120
|
return _regeneratorRuntime.wrap(function _loop$(_context) {
|
|
121
121
|
while (1) switch (_context.prev = _context.next) {
|
|
122
122
|
case 0:
|
|
@@ -164,58 +164,40 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
164
164
|
ssrState.state = SSRStateEnum.normal;
|
|
165
165
|
case 19:
|
|
166
166
|
if (!_this.getSSRPlaceholderHandler) {
|
|
167
|
-
_context.next =
|
|
167
|
+
_context.next = 33;
|
|
168
168
|
break;
|
|
169
169
|
}
|
|
170
170
|
ssrPlaceholderHandler = _this.getSSRPlaceholderHandler();
|
|
171
171
|
if (!ssrPlaceholderHandler) {
|
|
172
|
-
_context.next =
|
|
172
|
+
_context.next = 33;
|
|
173
173
|
break;
|
|
174
174
|
}
|
|
175
175
|
if (!(ssrPlaceholderHandler.isPlaceholder(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode))) {
|
|
176
|
-
_context.next =
|
|
177
|
-
break;
|
|
178
|
-
}
|
|
179
|
-
if (!fg('platform_ufo_ssr_placeholder_resolution_ttvc_v3')) {
|
|
180
|
-
_context.next = 29;
|
|
176
|
+
_context.next = 26;
|
|
181
177
|
break;
|
|
182
178
|
}
|
|
183
179
|
if (!ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(addedNode)) {
|
|
184
|
-
_context.next =
|
|
180
|
+
_context.next = 26;
|
|
185
181
|
break;
|
|
186
182
|
}
|
|
187
183
|
(_this$intersectionObs3 = _this.intersectionObserver) === null || _this$intersectionObs3 === void 0 || _this$intersectionObs3.watchAndTag(addedNode, 'mutation:ssr-placeholder');
|
|
188
184
|
return _context.abrupt("return", 0);
|
|
189
|
-
case
|
|
190
|
-
_context.next = 35;
|
|
191
|
-
break;
|
|
192
|
-
case 29:
|
|
193
|
-
_context.next = 31;
|
|
194
|
-
return ssrPlaceholderHandler.checkIfExistedAndSizeMatching(addedNode);
|
|
195
|
-
case 31:
|
|
196
|
-
result = _context.sent;
|
|
197
|
-
if (!(result !== false)) {
|
|
198
|
-
_context.next = 35;
|
|
199
|
-
break;
|
|
200
|
-
}
|
|
201
|
-
(_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(addedNode, 'mutation:ssr-placeholder');
|
|
202
|
-
return _context.abrupt("return", 0);
|
|
203
|
-
case 35:
|
|
185
|
+
case 26:
|
|
204
186
|
if (!(ssrPlaceholderHandler.isPlaceholderReplacement(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode))) {
|
|
205
|
-
_context.next =
|
|
187
|
+
_context.next = 33;
|
|
206
188
|
break;
|
|
207
189
|
}
|
|
208
|
-
_context.next =
|
|
190
|
+
_context.next = 29;
|
|
209
191
|
return ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(addedNode);
|
|
210
|
-
case
|
|
211
|
-
|
|
212
|
-
if (!(
|
|
213
|
-
_context.next =
|
|
192
|
+
case 29:
|
|
193
|
+
result = _context.sent;
|
|
194
|
+
if (!(result !== false)) {
|
|
195
|
+
_context.next = 33;
|
|
214
196
|
break;
|
|
215
197
|
}
|
|
216
|
-
(_this$
|
|
198
|
+
(_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(addedNode, 'mutation:ssr-placeholder');
|
|
217
199
|
return _context.abrupt("return", 0);
|
|
218
|
-
case
|
|
200
|
+
case 33:
|
|
219
201
|
sameDeletedNode = removedNodes.find(function (ref) {
|
|
220
202
|
var n = ref.deref();
|
|
221
203
|
if (!n || !addedNode) {
|
|
@@ -225,27 +207,27 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
225
207
|
});
|
|
226
208
|
isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(addedNode);
|
|
227
209
|
if (!(sameDeletedNode && isInIgnoreLsMarker)) {
|
|
228
|
-
_context.next =
|
|
210
|
+
_context.next = 38;
|
|
229
211
|
break;
|
|
230
212
|
}
|
|
231
|
-
(_this$
|
|
213
|
+
(_this$intersectionObs5 = _this.intersectionObserver) === null || _this$intersectionObs5 === void 0 || _this$intersectionObs5.watchAndTag(addedNode, 'mutation:remount');
|
|
232
214
|
return _context.abrupt("return", 0);
|
|
233
|
-
case
|
|
215
|
+
case 38:
|
|
234
216
|
if (!isContainedWithinMediaWrapper(addedNode)) {
|
|
235
|
-
_context.next =
|
|
217
|
+
_context.next = 41;
|
|
236
218
|
break;
|
|
237
219
|
}
|
|
238
|
-
(_this$
|
|
220
|
+
(_this$intersectionObs6 = _this.intersectionObserver) === null || _this$intersectionObs6 === void 0 || _this$intersectionObs6.watchAndTag(addedNode, 'mutation:media');
|
|
239
221
|
return _context.abrupt("return", 0);
|
|
240
|
-
case
|
|
222
|
+
case 41:
|
|
241
223
|
_checkWithinComponent = checkWithinComponent(addedNode, 'UFOThirdPartySegment', _this.mapIs3pResult), isWithinThirdPartySegment = _checkWithinComponent.isWithin;
|
|
242
224
|
if (!isWithinThirdPartySegment) {
|
|
243
|
-
_context.next =
|
|
225
|
+
_context.next = 45;
|
|
244
226
|
break;
|
|
245
227
|
}
|
|
246
|
-
(_this$
|
|
228
|
+
(_this$intersectionObs7 = _this.intersectionObserver) === null || _this$intersectionObs7 === void 0 || _this$intersectionObs7.watchAndTag(addedNode, 'mutation:third-party-element');
|
|
247
229
|
return _context.abrupt("return", 0);
|
|
248
|
-
case
|
|
230
|
+
case 45:
|
|
249
231
|
if (fg('platform_ufo_display_content_resolution_ttvc_v3')) {
|
|
250
232
|
// Check if the target has display:content css property, return array of valid targets
|
|
251
233
|
validTargets = checkCssProperty(addedNode);
|
|
@@ -253,7 +235,7 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
253
235
|
try {
|
|
254
236
|
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
|
255
237
|
validTarget = _step2.value;
|
|
256
|
-
(_this$
|
|
238
|
+
(_this$intersectionObs8 = _this.intersectionObserver) === null || _this$intersectionObs8 === void 0 || _this$intersectionObs8.watchAndTag(validTarget, createElementMutationsWatcher(removedNodeRects));
|
|
257
239
|
}
|
|
258
240
|
} catch (err) {
|
|
259
241
|
_iterator2.e(err);
|
|
@@ -264,9 +246,9 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
264
246
|
if (fg('platform_ufo_display_content_track_occurrence')) {
|
|
265
247
|
trackDisplayContentsOccurrence(addedNode);
|
|
266
248
|
}
|
|
267
|
-
(_this$
|
|
249
|
+
(_this$intersectionObs9 = _this.intersectionObserver) === null || _this$intersectionObs9 === void 0 || _this$intersectionObs9.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
|
|
268
250
|
}
|
|
269
|
-
case
|
|
251
|
+
case 46:
|
|
270
252
|
case "end":
|
|
271
253
|
return _context.stop();
|
|
272
254
|
}
|
|
@@ -311,12 +293,12 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
311
293
|
};
|
|
312
294
|
}());
|
|
313
295
|
_defineProperty(this, "handleAttributeMutation", function (_ref6) {
|
|
314
|
-
var _this$
|
|
296
|
+
var _this$intersectionObs0;
|
|
315
297
|
var target = _ref6.target,
|
|
316
298
|
attributeName = _ref6.attributeName,
|
|
317
299
|
oldValue = _ref6.oldValue,
|
|
318
300
|
newValue = _ref6.newValue;
|
|
319
|
-
(_this$
|
|
301
|
+
(_this$intersectionObs0 = _this.intersectionObserver) === null || _this$intersectionObs0 === void 0 || _this$intersectionObs0.watchAndTag(target, function (_ref7) {
|
|
320
302
|
var target = _ref7.target,
|
|
321
303
|
rect = _ref7.rect;
|
|
322
304
|
if (isContainedWithinMediaWrapper(target)) {
|
|
@@ -456,12 +438,12 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
456
438
|
}, {
|
|
457
439
|
key: "stop",
|
|
458
440
|
value: function stop() {
|
|
459
|
-
var _this$mutationObserve2, _this$
|
|
441
|
+
var _this$mutationObserve2, _this$intersectionObs1, _this$performanceObse2;
|
|
460
442
|
if (!this.isStarted) {
|
|
461
443
|
return;
|
|
462
444
|
}
|
|
463
445
|
(_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 || _this$mutationObserve2.disconnect();
|
|
464
|
-
(_this$
|
|
446
|
+
(_this$intersectionObs1 = this.intersectionObserver) === null || _this$intersectionObs1 === void 0 || _this$intersectionObs1.disconnect();
|
|
465
447
|
(_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 || _this$performanceObse2.disconnect();
|
|
466
448
|
this.isStarted = false;
|
|
467
449
|
// Clean up caches when stopping
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/react-ufo",
|
|
3
|
-
"version": "4.7.
|
|
3
|
+
"version": "4.7.2",
|
|
4
4
|
"description": "Parts of React UFO that are publicly available",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -105,9 +105,6 @@
|
|
|
105
105
|
"ufo_payload_use_idle_callback": {
|
|
106
106
|
"type": "boolean"
|
|
107
107
|
},
|
|
108
|
-
"platform_ufo_serialise_ttvc_v3_debug_data": {
|
|
109
|
-
"type": "boolean"
|
|
110
|
-
},
|
|
111
108
|
"platform_ufo_assets_check_for_nan": {
|
|
112
109
|
"type": "boolean"
|
|
113
110
|
},
|
|
@@ -138,9 +135,6 @@
|
|
|
138
135
|
"platform_ufo_add_segments_count_threshold": {
|
|
139
136
|
"type": "boolean"
|
|
140
137
|
},
|
|
141
|
-
"platform_ufo_ssr_placeholder_resolution_ttvc_v3": {
|
|
142
|
-
"type": "boolean"
|
|
143
|
-
},
|
|
144
138
|
"platform_ufo_display_content_resolution_ttvc_v3": {
|
|
145
139
|
"type": "boolean"
|
|
146
140
|
},
|