@atlaskit/react-ufo 4.12.3 → 4.12.5
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 +14 -0
- package/dist/cjs/create-payload/utils/get-browser-metadata.js +9 -0
- package/dist/cjs/vc/vc-observer/observers/ssr-placeholders/index.js +53 -3
- package/dist/cjs/vc/vc-observer/observers/ssr-placeholders/ssr-scripts/collectSSRPlaceholderDimensions.js +54 -4
- package/dist/cjs/vc/vc-observer-new/viewport-observer/index.js +247 -89
- package/dist/es2019/create-payload/utils/get-browser-metadata.js +9 -0
- package/dist/es2019/vc/vc-observer/observers/ssr-placeholders/index.js +51 -3
- package/dist/es2019/vc/vc-observer/observers/ssr-placeholders/ssr-scripts/collectSSRPlaceholderDimensions.js +55 -4
- package/dist/es2019/vc/vc-observer-new/viewport-observer/index.js +175 -80
- package/dist/esm/create-payload/utils/get-browser-metadata.js +9 -0
- package/dist/esm/vc/vc-observer/observers/ssr-placeholders/index.js +53 -3
- package/dist/esm/vc/vc-observer/observers/ssr-placeholders/ssr-scripts/collectSSRPlaceholderDimensions.js +55 -4
- package/dist/esm/vc/vc-observer-new/viewport-observer/index.js +247 -89
- package/dist/types/common/react-ufo-payload-schema.d.ts +1 -0
- package/dist/types/create-payload/utils/get-browser-metadata.d.ts +1 -0
- package/dist/types/resource-timing/index.d.ts +1 -1
- package/dist/types/vc/vc-observer/observers/ssr-placeholders/index.d.ts +5 -0
- package/dist/types-ts4.5/common/react-ufo-payload-schema.d.ts +1 -0
- package/dist/types-ts4.5/create-payload/utils/get-browser-metadata.d.ts +1 -0
- package/dist/types-ts4.5/resource-timing/index.d.ts +1 -1
- package/dist/types-ts4.5/vc/vc-observer/observers/ssr-placeholders/index.d.ts +5 -0
- package/package.json +8 -1
|
@@ -11,6 +11,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
|
|
|
11
11
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
12
12
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
13
13
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
14
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
14
15
|
var _vcUtils = require("../../vc-observer/media-wrapper/vc-utils");
|
|
15
16
|
var _isDndStyleMutation = _interopRequireDefault(require("../../vc-observer/observers/non-visual-styles/is-dnd-style-mutation"));
|
|
16
17
|
var _isNonVisualStyleMutation = _interopRequireDefault(require("../../vc-observer/observers/non-visual-styles/is-non-visual-style-mutation"));
|
|
@@ -83,8 +84,8 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
|
|
|
83
84
|
(0, _defineProperty2.default)(this, "handleChildListMutation", /*#__PURE__*/function () {
|
|
84
85
|
var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref4) {
|
|
85
86
|
var target, addedNodes, removedNodes, timestamp, removedNodeRects, targetNode, _iterator, _step, _loop, _ret;
|
|
86
|
-
return _regenerator.default.wrap(function _callee$(
|
|
87
|
-
while (1) switch (
|
|
87
|
+
return _regenerator.default.wrap(function _callee$(_context3) {
|
|
88
|
+
while (1) switch (_context3.prev = _context3.next) {
|
|
88
89
|
case 0:
|
|
89
90
|
target = _ref4.target, addedNodes = _ref4.addedNodes, removedNodes = _ref4.removedNodes, timestamp = _ref4.timestamp;
|
|
90
91
|
removedNodeRects = removedNodes.map(function (ref) {
|
|
@@ -96,22 +97,179 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
|
|
|
96
97
|
});
|
|
97
98
|
targetNode = target.deref();
|
|
98
99
|
_iterator = _createForOfIteratorHelper(addedNodes);
|
|
99
|
-
|
|
100
|
+
_context3.prev = 4;
|
|
100
101
|
_loop = /*#__PURE__*/_regenerator.default.mark(function _loop() {
|
|
101
|
-
var addedNodeRef, addedNode, ssrState, SSRStateEnum, _this$
|
|
102
|
-
return _regenerator.default.wrap(function _loop$(
|
|
103
|
-
while (1) switch (
|
|
102
|
+
var addedNodeRef, addedNode, _iterator2, _step2, _loop2, _ret2, ssrState, SSRStateEnum, _this$intersectionObs0, _this$intersectionObs1, ssrPlaceholderHandler, _this$intersectionObs10, result, _this$intersectionObs11, sameDeletedNode, isInIgnoreLsMarker, _this$intersectionObs12, _this$intersectionObs13, _checkWithinComponent, isWithinThirdPartySegment, _this$intersectionObs14, _iterator3, _step3, _step3$value, isDisplayContentsElementChildren, element, _this$intersectionObs15, _this$intersectionObs16;
|
|
103
|
+
return _regenerator.default.wrap(function _loop$(_context2) {
|
|
104
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
104
105
|
case 0:
|
|
105
106
|
addedNodeRef = _step.value;
|
|
106
107
|
addedNode = addedNodeRef.deref();
|
|
107
108
|
if (addedNode) {
|
|
108
|
-
|
|
109
|
+
_context2.next = 4;
|
|
109
110
|
break;
|
|
110
111
|
}
|
|
111
|
-
return
|
|
112
|
+
return _context2.abrupt("return", 0);
|
|
112
113
|
case 4:
|
|
114
|
+
if (!(0, _platformFeatureFlags.fg)('platform_ufo_ssr_placeholders_for_display_contents')) {
|
|
115
|
+
_context2.next = 26;
|
|
116
|
+
break;
|
|
117
|
+
}
|
|
118
|
+
_iterator2 = _createForOfIteratorHelper((0, _getMutatedElements.getMutatedElements)(addedNode));
|
|
119
|
+
_context2.prev = 6;
|
|
120
|
+
_loop2 = /*#__PURE__*/_regenerator.default.mark(function _loop2() {
|
|
121
|
+
var _step2$value, isDisplayContentsElementChildren, element, ssrState, SSRStateEnum, _this$intersectionObs, _this$intersectionObs2, ssrPlaceholderHandler, _this$intersectionObs3, result, _this$intersectionObs4, sameDeletedNode, isInIgnoreLsMarker, _this$intersectionObs5, _this$intersectionObs6, _ref6, isWithinThirdPartySegment, _this$intersectionObs7, _this$intersectionObs8, _this$intersectionObs9;
|
|
122
|
+
return _regenerator.default.wrap(function _loop2$(_context) {
|
|
123
|
+
while (1) switch (_context.prev = _context.next) {
|
|
124
|
+
case 0:
|
|
125
|
+
_step2$value = _step2.value, isDisplayContentsElementChildren = _step2$value.isDisplayContentsElementChildren, element = _step2$value.element;
|
|
126
|
+
if (!_this.getSSRState) {
|
|
127
|
+
_context.next = 16;
|
|
128
|
+
break;
|
|
129
|
+
}
|
|
130
|
+
ssrState = _this.getSSRState();
|
|
131
|
+
SSRStateEnum = {
|
|
132
|
+
normal: 1,
|
|
133
|
+
waitingForFirstRender: 2,
|
|
134
|
+
ignoring: 3
|
|
135
|
+
};
|
|
136
|
+
if (!(ssrState.state === SSRStateEnum.waitingForFirstRender && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement)) {
|
|
137
|
+
_context.next = 9;
|
|
138
|
+
break;
|
|
139
|
+
}
|
|
140
|
+
ssrState.state = SSRStateEnum.ignoring;
|
|
141
|
+
if (ssrState.renderStop === -1) {
|
|
142
|
+
// arbitrary 500ms DOM update window
|
|
143
|
+
ssrState.renderStop = timestamp + 500;
|
|
144
|
+
}
|
|
145
|
+
(_this$intersectionObs = _this.intersectionObserver) === null || _this$intersectionObs === void 0 || _this$intersectionObs.watchAndTag(element, 'ssr-hydration');
|
|
146
|
+
return _context.abrupt("return", 0);
|
|
147
|
+
case 9:
|
|
148
|
+
if (!(ssrState.state === SSRStateEnum.ignoring && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement)) {
|
|
149
|
+
_context.next = 16;
|
|
150
|
+
break;
|
|
151
|
+
}
|
|
152
|
+
if (!(timestamp <= ssrState.renderStop)) {
|
|
153
|
+
_context.next = 15;
|
|
154
|
+
break;
|
|
155
|
+
}
|
|
156
|
+
(_this$intersectionObs2 = _this.intersectionObserver) === null || _this$intersectionObs2 === void 0 || _this$intersectionObs2.watchAndTag(element, 'ssr-hydration');
|
|
157
|
+
return _context.abrupt("return", 0);
|
|
158
|
+
case 15:
|
|
159
|
+
ssrState.state = SSRStateEnum.normal;
|
|
160
|
+
case 16:
|
|
161
|
+
if (!_this.getSSRPlaceholderHandler) {
|
|
162
|
+
_context.next = 30;
|
|
163
|
+
break;
|
|
164
|
+
}
|
|
165
|
+
ssrPlaceholderHandler = _this.getSSRPlaceholderHandler();
|
|
166
|
+
if (!ssrPlaceholderHandler) {
|
|
167
|
+
_context.next = 30;
|
|
168
|
+
break;
|
|
169
|
+
}
|
|
170
|
+
if (!(ssrPlaceholderHandler.isPlaceholder(element) || ssrPlaceholderHandler.isPlaceholderIgnored(element))) {
|
|
171
|
+
_context.next = 23;
|
|
172
|
+
break;
|
|
173
|
+
}
|
|
174
|
+
if (!ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(element)) {
|
|
175
|
+
_context.next = 23;
|
|
176
|
+
break;
|
|
177
|
+
}
|
|
178
|
+
(_this$intersectionObs3 = _this.intersectionObserver) === null || _this$intersectionObs3 === void 0 || _this$intersectionObs3.watchAndTag(element, 'mutation:ssr-placeholder');
|
|
179
|
+
return _context.abrupt("return", 0);
|
|
180
|
+
case 23:
|
|
181
|
+
if (!(ssrPlaceholderHandler.isPlaceholderReplacement(element) || ssrPlaceholderHandler.isPlaceholderIgnored(element))) {
|
|
182
|
+
_context.next = 30;
|
|
183
|
+
break;
|
|
184
|
+
}
|
|
185
|
+
_context.next = 26;
|
|
186
|
+
return ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(element);
|
|
187
|
+
case 26:
|
|
188
|
+
result = _context.sent;
|
|
189
|
+
if (!(result !== false)) {
|
|
190
|
+
_context.next = 30;
|
|
191
|
+
break;
|
|
192
|
+
}
|
|
193
|
+
(_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(element, 'mutation:ssr-placeholder');
|
|
194
|
+
return _context.abrupt("return", 0);
|
|
195
|
+
case 30:
|
|
196
|
+
sameDeletedNode = removedNodes.find(function (ref) {
|
|
197
|
+
var n = ref.deref();
|
|
198
|
+
if (!n || !element) {
|
|
199
|
+
return false;
|
|
200
|
+
}
|
|
201
|
+
return n.isEqualNode(element);
|
|
202
|
+
});
|
|
203
|
+
isInIgnoreLsMarker = element instanceof HTMLElement ? (0, _isInVcIgnoreIfNoLayoutShiftMarker.default)(element) : false;
|
|
204
|
+
if (!(sameDeletedNode && isInIgnoreLsMarker)) {
|
|
205
|
+
_context.next = 35;
|
|
206
|
+
break;
|
|
207
|
+
}
|
|
208
|
+
(_this$intersectionObs5 = _this.intersectionObserver) === null || _this$intersectionObs5 === void 0 || _this$intersectionObs5.watchAndTag(element, 'mutation:remount');
|
|
209
|
+
return _context.abrupt("return", 0);
|
|
210
|
+
case 35:
|
|
211
|
+
if (!(0, _vcUtils.isContainedWithinMediaWrapper)(element)) {
|
|
212
|
+
_context.next = 38;
|
|
213
|
+
break;
|
|
214
|
+
}
|
|
215
|
+
(_this$intersectionObs6 = _this.intersectionObserver) === null || _this$intersectionObs6 === void 0 || _this$intersectionObs6.watchAndTag(element, 'mutation:media');
|
|
216
|
+
return _context.abrupt("return", 0);
|
|
217
|
+
case 38:
|
|
218
|
+
_ref6 = element instanceof HTMLElement ? (0, _checkWithinComponent2.default)(element, 'UFOThirdPartySegment', _this.mapIs3pResult) : {
|
|
219
|
+
isWithin: false
|
|
220
|
+
}, isWithinThirdPartySegment = _ref6.isWithin;
|
|
221
|
+
if (!isWithinThirdPartySegment) {
|
|
222
|
+
_context.next = 42;
|
|
223
|
+
break;
|
|
224
|
+
}
|
|
225
|
+
(_this$intersectionObs7 = _this.intersectionObserver) === null || _this$intersectionObs7 === void 0 || _this$intersectionObs7.watchAndTag(element, 'mutation:third-party-element');
|
|
226
|
+
return _context.abrupt("return", 0);
|
|
227
|
+
case 42:
|
|
228
|
+
if (isDisplayContentsElementChildren) {
|
|
229
|
+
(_this$intersectionObs8 = _this.intersectionObserver) === null || _this$intersectionObs8 === void 0 || _this$intersectionObs8.watchAndTag(element, 'mutation:display-contents-children-element');
|
|
230
|
+
} else {
|
|
231
|
+
(_this$intersectionObs9 = _this.intersectionObserver) === null || _this$intersectionObs9 === void 0 || _this$intersectionObs9.watchAndTag(element, createElementMutationsWatcher(removedNodeRects));
|
|
232
|
+
}
|
|
233
|
+
case 43:
|
|
234
|
+
case "end":
|
|
235
|
+
return _context.stop();
|
|
236
|
+
}
|
|
237
|
+
}, _loop2);
|
|
238
|
+
});
|
|
239
|
+
_iterator2.s();
|
|
240
|
+
case 9:
|
|
241
|
+
if ((_step2 = _iterator2.n()).done) {
|
|
242
|
+
_context2.next = 16;
|
|
243
|
+
break;
|
|
244
|
+
}
|
|
245
|
+
return _context2.delegateYield(_loop2(), "t0", 11);
|
|
246
|
+
case 11:
|
|
247
|
+
_ret2 = _context2.t0;
|
|
248
|
+
if (!(_ret2 === 0)) {
|
|
249
|
+
_context2.next = 14;
|
|
250
|
+
break;
|
|
251
|
+
}
|
|
252
|
+
return _context2.abrupt("continue", 14);
|
|
253
|
+
case 14:
|
|
254
|
+
_context2.next = 9;
|
|
255
|
+
break;
|
|
256
|
+
case 16:
|
|
257
|
+
_context2.next = 21;
|
|
258
|
+
break;
|
|
259
|
+
case 18:
|
|
260
|
+
_context2.prev = 18;
|
|
261
|
+
_context2.t1 = _context2["catch"](6);
|
|
262
|
+
_iterator2.e(_context2.t1);
|
|
263
|
+
case 21:
|
|
264
|
+
_context2.prev = 21;
|
|
265
|
+
_iterator2.f();
|
|
266
|
+
return _context2.finish(21);
|
|
267
|
+
case 24:
|
|
268
|
+
_context2.next = 69;
|
|
269
|
+
break;
|
|
270
|
+
case 26:
|
|
113
271
|
if (!_this.getSSRState) {
|
|
114
|
-
|
|
272
|
+
_context2.next = 41;
|
|
115
273
|
break;
|
|
116
274
|
}
|
|
117
275
|
ssrState = _this.getSSRState();
|
|
@@ -121,7 +279,7 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
|
|
|
121
279
|
ignoring: 3
|
|
122
280
|
};
|
|
123
281
|
if (!(ssrState.state === SSRStateEnum.waitingForFirstRender && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement)) {
|
|
124
|
-
|
|
282
|
+
_context2.next = 34;
|
|
125
283
|
break;
|
|
126
284
|
}
|
|
127
285
|
ssrState.state = SSRStateEnum.ignoring;
|
|
@@ -129,57 +287,57 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
|
|
|
129
287
|
// arbitrary 500ms DOM update window
|
|
130
288
|
ssrState.renderStop = timestamp + 500;
|
|
131
289
|
}
|
|
132
|
-
(_this$
|
|
133
|
-
return
|
|
134
|
-
case
|
|
290
|
+
(_this$intersectionObs0 = _this.intersectionObserver) === null || _this$intersectionObs0 === void 0 || _this$intersectionObs0.watchAndTag(addedNode, 'ssr-hydration');
|
|
291
|
+
return _context2.abrupt("return", 0);
|
|
292
|
+
case 34:
|
|
135
293
|
if (!(ssrState.state === SSRStateEnum.ignoring && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement)) {
|
|
136
|
-
|
|
294
|
+
_context2.next = 41;
|
|
137
295
|
break;
|
|
138
296
|
}
|
|
139
297
|
if (!(timestamp <= ssrState.renderStop)) {
|
|
140
|
-
|
|
298
|
+
_context2.next = 40;
|
|
141
299
|
break;
|
|
142
300
|
}
|
|
143
|
-
(_this$
|
|
144
|
-
return
|
|
145
|
-
case
|
|
301
|
+
(_this$intersectionObs1 = _this.intersectionObserver) === null || _this$intersectionObs1 === void 0 || _this$intersectionObs1.watchAndTag(addedNode, 'ssr-hydration');
|
|
302
|
+
return _context2.abrupt("return", 0);
|
|
303
|
+
case 40:
|
|
146
304
|
ssrState.state = SSRStateEnum.normal;
|
|
147
|
-
case
|
|
305
|
+
case 41:
|
|
148
306
|
if (!_this.getSSRPlaceholderHandler) {
|
|
149
|
-
|
|
307
|
+
_context2.next = 55;
|
|
150
308
|
break;
|
|
151
309
|
}
|
|
152
310
|
ssrPlaceholderHandler = _this.getSSRPlaceholderHandler();
|
|
153
311
|
if (!ssrPlaceholderHandler) {
|
|
154
|
-
|
|
312
|
+
_context2.next = 55;
|
|
155
313
|
break;
|
|
156
314
|
}
|
|
157
315
|
if (!(ssrPlaceholderHandler.isPlaceholder(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode))) {
|
|
158
|
-
|
|
316
|
+
_context2.next = 48;
|
|
159
317
|
break;
|
|
160
318
|
}
|
|
161
319
|
if (!ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(addedNode)) {
|
|
162
|
-
|
|
320
|
+
_context2.next = 48;
|
|
163
321
|
break;
|
|
164
322
|
}
|
|
165
|
-
(_this$
|
|
166
|
-
return
|
|
167
|
-
case
|
|
323
|
+
(_this$intersectionObs10 = _this.intersectionObserver) === null || _this$intersectionObs10 === void 0 || _this$intersectionObs10.watchAndTag(addedNode, 'mutation:ssr-placeholder');
|
|
324
|
+
return _context2.abrupt("return", 0);
|
|
325
|
+
case 48:
|
|
168
326
|
if (!(ssrPlaceholderHandler.isPlaceholderReplacement(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode))) {
|
|
169
|
-
|
|
327
|
+
_context2.next = 55;
|
|
170
328
|
break;
|
|
171
329
|
}
|
|
172
|
-
|
|
330
|
+
_context2.next = 51;
|
|
173
331
|
return ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(addedNode);
|
|
174
|
-
case
|
|
175
|
-
result =
|
|
332
|
+
case 51:
|
|
333
|
+
result = _context2.sent;
|
|
176
334
|
if (!(result !== false)) {
|
|
177
|
-
|
|
335
|
+
_context2.next = 55;
|
|
178
336
|
break;
|
|
179
337
|
}
|
|
180
|
-
(_this$
|
|
181
|
-
return
|
|
182
|
-
case
|
|
338
|
+
(_this$intersectionObs11 = _this.intersectionObserver) === null || _this$intersectionObs11 === void 0 || _this$intersectionObs11.watchAndTag(addedNode, 'mutation:ssr-placeholder');
|
|
339
|
+
return _context2.abrupt("return", 0);
|
|
340
|
+
case 55:
|
|
183
341
|
sameDeletedNode = removedNodes.find(function (ref) {
|
|
184
342
|
var n = ref.deref();
|
|
185
343
|
if (!n || !addedNode) {
|
|
@@ -189,79 +347,79 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
|
|
|
189
347
|
});
|
|
190
348
|
isInIgnoreLsMarker = (0, _isInVcIgnoreIfNoLayoutShiftMarker.default)(addedNode);
|
|
191
349
|
if (!(sameDeletedNode && isInIgnoreLsMarker)) {
|
|
192
|
-
|
|
350
|
+
_context2.next = 60;
|
|
193
351
|
break;
|
|
194
352
|
}
|
|
195
|
-
(_this$
|
|
196
|
-
return
|
|
197
|
-
case
|
|
353
|
+
(_this$intersectionObs12 = _this.intersectionObserver) === null || _this$intersectionObs12 === void 0 || _this$intersectionObs12.watchAndTag(addedNode, 'mutation:remount');
|
|
354
|
+
return _context2.abrupt("return", 0);
|
|
355
|
+
case 60:
|
|
198
356
|
if (!(0, _vcUtils.isContainedWithinMediaWrapper)(addedNode)) {
|
|
199
|
-
|
|
357
|
+
_context2.next = 63;
|
|
200
358
|
break;
|
|
201
359
|
}
|
|
202
|
-
(_this$
|
|
203
|
-
return
|
|
204
|
-
case
|
|
360
|
+
(_this$intersectionObs13 = _this.intersectionObserver) === null || _this$intersectionObs13 === void 0 || _this$intersectionObs13.watchAndTag(addedNode, 'mutation:media');
|
|
361
|
+
return _context2.abrupt("return", 0);
|
|
362
|
+
case 63:
|
|
205
363
|
_checkWithinComponent = (0, _checkWithinComponent2.default)(addedNode, 'UFOThirdPartySegment', _this.mapIs3pResult), isWithinThirdPartySegment = _checkWithinComponent.isWithin;
|
|
206
364
|
if (!isWithinThirdPartySegment) {
|
|
207
|
-
|
|
365
|
+
_context2.next = 67;
|
|
208
366
|
break;
|
|
209
367
|
}
|
|
210
|
-
(_this$
|
|
211
|
-
return
|
|
212
|
-
case
|
|
213
|
-
|
|
368
|
+
(_this$intersectionObs14 = _this.intersectionObserver) === null || _this$intersectionObs14 === void 0 || _this$intersectionObs14.watchAndTag(addedNode, 'mutation:third-party-element');
|
|
369
|
+
return _context2.abrupt("return", 0);
|
|
370
|
+
case 67:
|
|
371
|
+
_iterator3 = _createForOfIteratorHelper((0, _getMutatedElements.getMutatedElements)(addedNode));
|
|
214
372
|
try {
|
|
215
|
-
for (
|
|
216
|
-
|
|
373
|
+
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
|
|
374
|
+
_step3$value = _step3.value, isDisplayContentsElementChildren = _step3$value.isDisplayContentsElementChildren, element = _step3$value.element;
|
|
217
375
|
if (isDisplayContentsElementChildren) {
|
|
218
|
-
(_this$
|
|
376
|
+
(_this$intersectionObs15 = _this.intersectionObserver) === null || _this$intersectionObs15 === void 0 || _this$intersectionObs15.watchAndTag(element, 'mutation:display-contents-children-element');
|
|
219
377
|
} else {
|
|
220
|
-
(_this$
|
|
378
|
+
(_this$intersectionObs16 = _this.intersectionObserver) === null || _this$intersectionObs16 === void 0 || _this$intersectionObs16.watchAndTag(element, createElementMutationsWatcher(removedNodeRects));
|
|
221
379
|
}
|
|
222
380
|
}
|
|
223
381
|
} catch (err) {
|
|
224
|
-
|
|
382
|
+
_iterator3.e(err);
|
|
225
383
|
} finally {
|
|
226
|
-
|
|
384
|
+
_iterator3.f();
|
|
227
385
|
}
|
|
228
|
-
case
|
|
386
|
+
case 69:
|
|
229
387
|
case "end":
|
|
230
|
-
return
|
|
388
|
+
return _context2.stop();
|
|
231
389
|
}
|
|
232
|
-
}, _loop);
|
|
390
|
+
}, _loop, null, [[6, 18, 21, 24]]);
|
|
233
391
|
});
|
|
234
392
|
_iterator.s();
|
|
235
393
|
case 7:
|
|
236
394
|
if ((_step = _iterator.n()).done) {
|
|
237
|
-
|
|
395
|
+
_context3.next = 14;
|
|
238
396
|
break;
|
|
239
397
|
}
|
|
240
|
-
return
|
|
398
|
+
return _context3.delegateYield(_loop(), "t0", 9);
|
|
241
399
|
case 9:
|
|
242
|
-
_ret =
|
|
400
|
+
_ret = _context3.t0;
|
|
243
401
|
if (!(_ret === 0)) {
|
|
244
|
-
|
|
402
|
+
_context3.next = 12;
|
|
245
403
|
break;
|
|
246
404
|
}
|
|
247
|
-
return
|
|
405
|
+
return _context3.abrupt("continue", 12);
|
|
248
406
|
case 12:
|
|
249
|
-
|
|
407
|
+
_context3.next = 7;
|
|
250
408
|
break;
|
|
251
409
|
case 14:
|
|
252
|
-
|
|
410
|
+
_context3.next = 19;
|
|
253
411
|
break;
|
|
254
412
|
case 16:
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
_iterator.e(
|
|
413
|
+
_context3.prev = 16;
|
|
414
|
+
_context3.t1 = _context3["catch"](4);
|
|
415
|
+
_iterator.e(_context3.t1);
|
|
258
416
|
case 19:
|
|
259
|
-
|
|
417
|
+
_context3.prev = 19;
|
|
260
418
|
_iterator.f();
|
|
261
|
-
return
|
|
419
|
+
return _context3.finish(19);
|
|
262
420
|
case 22:
|
|
263
421
|
case "end":
|
|
264
|
-
return
|
|
422
|
+
return _context3.stop();
|
|
265
423
|
}
|
|
266
424
|
}, _callee, null, [[4, 16, 19, 22]]);
|
|
267
425
|
}));
|
|
@@ -269,15 +427,15 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
|
|
|
269
427
|
return _ref5.apply(this, arguments);
|
|
270
428
|
};
|
|
271
429
|
}());
|
|
272
|
-
(0, _defineProperty2.default)(this, "handleAttributeMutation", function (
|
|
273
|
-
var _this$
|
|
274
|
-
var target =
|
|
275
|
-
attributeName =
|
|
276
|
-
oldValue =
|
|
277
|
-
newValue =
|
|
278
|
-
(_this$
|
|
279
|
-
var target =
|
|
280
|
-
rect =
|
|
430
|
+
(0, _defineProperty2.default)(this, "handleAttributeMutation", function (_ref7) {
|
|
431
|
+
var _this$intersectionObs17;
|
|
432
|
+
var target = _ref7.target,
|
|
433
|
+
attributeName = _ref7.attributeName,
|
|
434
|
+
oldValue = _ref7.oldValue,
|
|
435
|
+
newValue = _ref7.newValue;
|
|
436
|
+
(_this$intersectionObs17 = _this.intersectionObserver) === null || _this$intersectionObs17 === void 0 || _this$intersectionObs17.watchAndTag(target, function (_ref8) {
|
|
437
|
+
var target = _ref8.target,
|
|
438
|
+
rect = _ref8.rect;
|
|
281
439
|
if ((0, _vcUtils.isContainedWithinMediaWrapper)(target)) {
|
|
282
440
|
return {
|
|
283
441
|
type: 'mutation:media',
|
|
@@ -349,14 +507,14 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
|
|
|
349
507
|
};
|
|
350
508
|
});
|
|
351
509
|
});
|
|
352
|
-
(0, _defineProperty2.default)(this, "handleLayoutShift", function (
|
|
353
|
-
var time =
|
|
354
|
-
changedRects =
|
|
355
|
-
var
|
|
356
|
-
|
|
510
|
+
(0, _defineProperty2.default)(this, "handleLayoutShift", function (_ref9) {
|
|
511
|
+
var time = _ref9.time,
|
|
512
|
+
changedRects = _ref9.changedRects;
|
|
513
|
+
var _iterator4 = _createForOfIteratorHelper(changedRects),
|
|
514
|
+
_step4;
|
|
357
515
|
try {
|
|
358
|
-
for (
|
|
359
|
-
var changedRect =
|
|
516
|
+
for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
|
|
517
|
+
var changedRect = _step4.value;
|
|
360
518
|
var target = changedRect.node;
|
|
361
519
|
if (target) {
|
|
362
520
|
var isSameCurrentAndPreviousRects = (0, _isSameRectDimensions.isSameRectDimensions)(changedRect.rect, changedRect.previousRect);
|
|
@@ -371,9 +529,9 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
|
|
|
371
529
|
}
|
|
372
530
|
}
|
|
373
531
|
} catch (err) {
|
|
374
|
-
|
|
532
|
+
_iterator4.e(err);
|
|
375
533
|
} finally {
|
|
376
|
-
|
|
534
|
+
_iterator4.f();
|
|
377
535
|
}
|
|
378
536
|
});
|
|
379
537
|
this.mapVisibleNodeRects = new WeakMap();
|
|
@@ -430,12 +588,12 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
|
|
|
430
588
|
}, {
|
|
431
589
|
key: "stop",
|
|
432
590
|
value: function stop() {
|
|
433
|
-
var _this$mutationObserve2, _this$
|
|
591
|
+
var _this$mutationObserve2, _this$intersectionObs18, _this$performanceObse2;
|
|
434
592
|
if (!this.isStarted) {
|
|
435
593
|
return;
|
|
436
594
|
}
|
|
437
595
|
(_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 || _this$mutationObserve2.disconnect();
|
|
438
|
-
(_this$
|
|
596
|
+
(_this$intersectionObs18 = this.intersectionObserver) === null || _this$intersectionObs18 === void 0 || _this$intersectionObs18.disconnect();
|
|
439
597
|
(_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 || _this$performanceObse2.disconnect();
|
|
440
598
|
this.isStarted = false;
|
|
441
599
|
// Clean up caches when stopping
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import Bowser from 'bowser-ultralight';
|
|
2
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
3
|
export default function getBrowserMetadata() {
|
|
3
4
|
const data = {
|
|
4
5
|
time: {
|
|
@@ -40,6 +41,9 @@ export default function getBrowserMetadata() {
|
|
|
40
41
|
downlink: navigator.connection.downlink
|
|
41
42
|
};
|
|
42
43
|
}
|
|
44
|
+
if (typeof navigator !== 'undefined' && fg('react_ufo_add_webdriver_info')) {
|
|
45
|
+
data.webdriver = Boolean(navigator.webdriver);
|
|
46
|
+
}
|
|
43
47
|
return data;
|
|
44
48
|
}
|
|
45
49
|
|
|
@@ -59,6 +63,11 @@ export function getBrowserMetadataToLegacyFormat() {
|
|
|
59
63
|
legacyFormat['event:browser:version'] = metadata.browser.version;
|
|
60
64
|
}
|
|
61
65
|
|
|
66
|
+
// Webdriver data
|
|
67
|
+
if (metadata.webdriver !== undefined) {
|
|
68
|
+
legacyFormat['event:browser:webdriver'] = metadata.webdriver;
|
|
69
|
+
}
|
|
70
|
+
|
|
62
71
|
// Device data
|
|
63
72
|
if (metadata.device) {
|
|
64
73
|
if (metadata.device.cpus !== undefined) {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
3
|
const ANCESTOR_LOOKUP_LIMIT = 10;
|
|
3
4
|
const PAGE_LAYOUT_ID = 'page-layout.root';
|
|
4
5
|
export class SSRPlaceholderHandlers {
|
|
@@ -56,7 +57,7 @@ export class SSRPlaceholderHandlers {
|
|
|
56
57
|
resolve(hasSameSizePosition);
|
|
57
58
|
} else {
|
|
58
59
|
requestAnimationFrame(() => {
|
|
59
|
-
const targetRect =
|
|
60
|
+
const targetRect = this.getEffectiveBoundingRect(target);
|
|
60
61
|
const hasSameSizePosition = this.hasSameSizePosition(rect, targetRect);
|
|
61
62
|
resolve(hasSameSizePosition);
|
|
62
63
|
});
|
|
@@ -75,7 +76,7 @@ export class SSRPlaceholderHandlers {
|
|
|
75
76
|
resolve(hasSameSizePosition);
|
|
76
77
|
} else {
|
|
77
78
|
requestAnimationFrame(() => {
|
|
78
|
-
const targetRect =
|
|
79
|
+
const targetRect = this.getEffectiveBoundingRect(target);
|
|
79
80
|
const hasSameSizePosition = this.hasSameSizePosition(rect, targetRect);
|
|
80
81
|
resolve(hasSameSizePosition);
|
|
81
82
|
});
|
|
@@ -209,7 +210,7 @@ export class SSRPlaceholderHandlers {
|
|
|
209
210
|
if (!placeholderRects) {
|
|
210
211
|
return false;
|
|
211
212
|
}
|
|
212
|
-
return this.hasSameSizePosition(placeholderRects,
|
|
213
|
+
return this.hasSameSizePosition(placeholderRects, this.getEffectiveBoundingRect(el));
|
|
213
214
|
}
|
|
214
215
|
getSize(el) {
|
|
215
216
|
return new Promise(resolve => {
|
|
@@ -240,6 +241,53 @@ export class SSRPlaceholderHandlers {
|
|
|
240
241
|
const verticalCheck = Math.abs(rect.y - boundingClientRect.y) < this.EQUALITY_THRESHOLD && Math.abs(rect.height - boundingClientRect.height) < this.EQUALITY_THRESHOLD;
|
|
241
242
|
return horizontalCheck && verticalCheck || false;
|
|
242
243
|
}
|
|
244
|
+
|
|
245
|
+
/**
|
|
246
|
+
* Gets the effective bounding rectangle for an element, handling display: contents elements
|
|
247
|
+
* by collecting dimensions from their children instead
|
|
248
|
+
*/
|
|
249
|
+
getEffectiveBoundingRect(el) {
|
|
250
|
+
const enableDisplayContentsSupport = fg('platform_ufo_ssr_placeholders_for_display_contents');
|
|
251
|
+
|
|
252
|
+
// Only handle display: contents if feature flag is enabled
|
|
253
|
+
if (enableDisplayContentsSupport) {
|
|
254
|
+
const computedStyle = window.getComputedStyle(el);
|
|
255
|
+
|
|
256
|
+
// If element has display: contents, collect bounding rect from children
|
|
257
|
+
if (computedStyle.display === 'contents') {
|
|
258
|
+
const children = Array.from(el.children);
|
|
259
|
+
if (children.length === 0) {
|
|
260
|
+
// No children, return zero rect
|
|
261
|
+
return new DOMRect(0, 0, 0, 0);
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
// Calculate union of all children's bounding rects
|
|
265
|
+
let minX = Infinity;
|
|
266
|
+
let minY = Infinity;
|
|
267
|
+
let maxX = -Infinity;
|
|
268
|
+
let maxY = -Infinity;
|
|
269
|
+
children.forEach(child => {
|
|
270
|
+
const childRect = child.getBoundingClientRect();
|
|
271
|
+
// Skip children with zero dimensions (likely also display: contents)
|
|
272
|
+
if (childRect.width > 0 || childRect.height > 0) {
|
|
273
|
+
minX = Math.min(minX, childRect.left);
|
|
274
|
+
minY = Math.min(minY, childRect.top);
|
|
275
|
+
maxX = Math.max(maxX, childRect.right);
|
|
276
|
+
maxY = Math.max(maxY, childRect.bottom);
|
|
277
|
+
}
|
|
278
|
+
});
|
|
279
|
+
|
|
280
|
+
// If no children with dimensions found, return zero rect
|
|
281
|
+
if (minX === Infinity) {
|
|
282
|
+
return new DOMRect(0, 0, 0, 0);
|
|
283
|
+
}
|
|
284
|
+
return new DOMRect(minX, minY, maxX - minX, maxY - minY);
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
// Normal element or feature flag disabled, return its bounding rect
|
|
289
|
+
return el.getBoundingClientRect();
|
|
290
|
+
}
|
|
243
291
|
isDummyRect(rect) {
|
|
244
292
|
return rect && rect.width < 0 && rect.height < 0 || false;
|
|
245
293
|
}
|