@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
|
@@ -6,6 +6,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
|
6
6
|
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
|
|
7
7
|
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
8
8
|
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
9
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
10
|
import { isContainedWithinMediaWrapper } from '../../vc-observer/media-wrapper/vc-utils';
|
|
10
11
|
import isDnDStyleMutation from '../../vc-observer/observers/non-visual-styles/is-dnd-style-mutation';
|
|
11
12
|
import isNonVisualStyleMutation from '../../vc-observer/observers/non-visual-styles/is-non-visual-style-mutation';
|
|
@@ -74,8 +75,8 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
74
75
|
_defineProperty(this, "handleChildListMutation", /*#__PURE__*/function () {
|
|
75
76
|
var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref4) {
|
|
76
77
|
var target, addedNodes, removedNodes, timestamp, removedNodeRects, targetNode, _iterator, _step, _loop, _ret;
|
|
77
|
-
return _regeneratorRuntime.wrap(function _callee$(
|
|
78
|
-
while (1) switch (
|
|
78
|
+
return _regeneratorRuntime.wrap(function _callee$(_context3) {
|
|
79
|
+
while (1) switch (_context3.prev = _context3.next) {
|
|
79
80
|
case 0:
|
|
80
81
|
target = _ref4.target, addedNodes = _ref4.addedNodes, removedNodes = _ref4.removedNodes, timestamp = _ref4.timestamp;
|
|
81
82
|
removedNodeRects = removedNodes.map(function (ref) {
|
|
@@ -87,22 +88,179 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
87
88
|
});
|
|
88
89
|
targetNode = target.deref();
|
|
89
90
|
_iterator = _createForOfIteratorHelper(addedNodes);
|
|
90
|
-
|
|
91
|
+
_context3.prev = 4;
|
|
91
92
|
_loop = /*#__PURE__*/_regeneratorRuntime.mark(function _loop() {
|
|
92
|
-
var addedNodeRef, addedNode, ssrState, SSRStateEnum, _this$
|
|
93
|
-
return _regeneratorRuntime.wrap(function _loop$(
|
|
94
|
-
while (1) switch (
|
|
93
|
+
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;
|
|
94
|
+
return _regeneratorRuntime.wrap(function _loop$(_context2) {
|
|
95
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
95
96
|
case 0:
|
|
96
97
|
addedNodeRef = _step.value;
|
|
97
98
|
addedNode = addedNodeRef.deref();
|
|
98
99
|
if (addedNode) {
|
|
99
|
-
|
|
100
|
+
_context2.next = 4;
|
|
100
101
|
break;
|
|
101
102
|
}
|
|
102
|
-
return
|
|
103
|
+
return _context2.abrupt("return", 0);
|
|
103
104
|
case 4:
|
|
105
|
+
if (!fg('platform_ufo_ssr_placeholders_for_display_contents')) {
|
|
106
|
+
_context2.next = 26;
|
|
107
|
+
break;
|
|
108
|
+
}
|
|
109
|
+
_iterator2 = _createForOfIteratorHelper(getMutatedElements(addedNode));
|
|
110
|
+
_context2.prev = 6;
|
|
111
|
+
_loop2 = /*#__PURE__*/_regeneratorRuntime.mark(function _loop2() {
|
|
112
|
+
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;
|
|
113
|
+
return _regeneratorRuntime.wrap(function _loop2$(_context) {
|
|
114
|
+
while (1) switch (_context.prev = _context.next) {
|
|
115
|
+
case 0:
|
|
116
|
+
_step2$value = _step2.value, isDisplayContentsElementChildren = _step2$value.isDisplayContentsElementChildren, element = _step2$value.element;
|
|
117
|
+
if (!_this.getSSRState) {
|
|
118
|
+
_context.next = 16;
|
|
119
|
+
break;
|
|
120
|
+
}
|
|
121
|
+
ssrState = _this.getSSRState();
|
|
122
|
+
SSRStateEnum = {
|
|
123
|
+
normal: 1,
|
|
124
|
+
waitingForFirstRender: 2,
|
|
125
|
+
ignoring: 3
|
|
126
|
+
};
|
|
127
|
+
if (!(ssrState.state === SSRStateEnum.waitingForFirstRender && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement)) {
|
|
128
|
+
_context.next = 9;
|
|
129
|
+
break;
|
|
130
|
+
}
|
|
131
|
+
ssrState.state = SSRStateEnum.ignoring;
|
|
132
|
+
if (ssrState.renderStop === -1) {
|
|
133
|
+
// arbitrary 500ms DOM update window
|
|
134
|
+
ssrState.renderStop = timestamp + 500;
|
|
135
|
+
}
|
|
136
|
+
(_this$intersectionObs = _this.intersectionObserver) === null || _this$intersectionObs === void 0 || _this$intersectionObs.watchAndTag(element, 'ssr-hydration');
|
|
137
|
+
return _context.abrupt("return", 0);
|
|
138
|
+
case 9:
|
|
139
|
+
if (!(ssrState.state === SSRStateEnum.ignoring && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement)) {
|
|
140
|
+
_context.next = 16;
|
|
141
|
+
break;
|
|
142
|
+
}
|
|
143
|
+
if (!(timestamp <= ssrState.renderStop)) {
|
|
144
|
+
_context.next = 15;
|
|
145
|
+
break;
|
|
146
|
+
}
|
|
147
|
+
(_this$intersectionObs2 = _this.intersectionObserver) === null || _this$intersectionObs2 === void 0 || _this$intersectionObs2.watchAndTag(element, 'ssr-hydration');
|
|
148
|
+
return _context.abrupt("return", 0);
|
|
149
|
+
case 15:
|
|
150
|
+
ssrState.state = SSRStateEnum.normal;
|
|
151
|
+
case 16:
|
|
152
|
+
if (!_this.getSSRPlaceholderHandler) {
|
|
153
|
+
_context.next = 30;
|
|
154
|
+
break;
|
|
155
|
+
}
|
|
156
|
+
ssrPlaceholderHandler = _this.getSSRPlaceholderHandler();
|
|
157
|
+
if (!ssrPlaceholderHandler) {
|
|
158
|
+
_context.next = 30;
|
|
159
|
+
break;
|
|
160
|
+
}
|
|
161
|
+
if (!(ssrPlaceholderHandler.isPlaceholder(element) || ssrPlaceholderHandler.isPlaceholderIgnored(element))) {
|
|
162
|
+
_context.next = 23;
|
|
163
|
+
break;
|
|
164
|
+
}
|
|
165
|
+
if (!ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(element)) {
|
|
166
|
+
_context.next = 23;
|
|
167
|
+
break;
|
|
168
|
+
}
|
|
169
|
+
(_this$intersectionObs3 = _this.intersectionObserver) === null || _this$intersectionObs3 === void 0 || _this$intersectionObs3.watchAndTag(element, 'mutation:ssr-placeholder');
|
|
170
|
+
return _context.abrupt("return", 0);
|
|
171
|
+
case 23:
|
|
172
|
+
if (!(ssrPlaceholderHandler.isPlaceholderReplacement(element) || ssrPlaceholderHandler.isPlaceholderIgnored(element))) {
|
|
173
|
+
_context.next = 30;
|
|
174
|
+
break;
|
|
175
|
+
}
|
|
176
|
+
_context.next = 26;
|
|
177
|
+
return ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(element);
|
|
178
|
+
case 26:
|
|
179
|
+
result = _context.sent;
|
|
180
|
+
if (!(result !== false)) {
|
|
181
|
+
_context.next = 30;
|
|
182
|
+
break;
|
|
183
|
+
}
|
|
184
|
+
(_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(element, 'mutation:ssr-placeholder');
|
|
185
|
+
return _context.abrupt("return", 0);
|
|
186
|
+
case 30:
|
|
187
|
+
sameDeletedNode = removedNodes.find(function (ref) {
|
|
188
|
+
var n = ref.deref();
|
|
189
|
+
if (!n || !element) {
|
|
190
|
+
return false;
|
|
191
|
+
}
|
|
192
|
+
return n.isEqualNode(element);
|
|
193
|
+
});
|
|
194
|
+
isInIgnoreLsMarker = element instanceof HTMLElement ? isInVCIgnoreIfNoLayoutShiftMarker(element) : false;
|
|
195
|
+
if (!(sameDeletedNode && isInIgnoreLsMarker)) {
|
|
196
|
+
_context.next = 35;
|
|
197
|
+
break;
|
|
198
|
+
}
|
|
199
|
+
(_this$intersectionObs5 = _this.intersectionObserver) === null || _this$intersectionObs5 === void 0 || _this$intersectionObs5.watchAndTag(element, 'mutation:remount');
|
|
200
|
+
return _context.abrupt("return", 0);
|
|
201
|
+
case 35:
|
|
202
|
+
if (!isContainedWithinMediaWrapper(element)) {
|
|
203
|
+
_context.next = 38;
|
|
204
|
+
break;
|
|
205
|
+
}
|
|
206
|
+
(_this$intersectionObs6 = _this.intersectionObserver) === null || _this$intersectionObs6 === void 0 || _this$intersectionObs6.watchAndTag(element, 'mutation:media');
|
|
207
|
+
return _context.abrupt("return", 0);
|
|
208
|
+
case 38:
|
|
209
|
+
_ref6 = element instanceof HTMLElement ? checkWithinComponent(element, 'UFOThirdPartySegment', _this.mapIs3pResult) : {
|
|
210
|
+
isWithin: false
|
|
211
|
+
}, isWithinThirdPartySegment = _ref6.isWithin;
|
|
212
|
+
if (!isWithinThirdPartySegment) {
|
|
213
|
+
_context.next = 42;
|
|
214
|
+
break;
|
|
215
|
+
}
|
|
216
|
+
(_this$intersectionObs7 = _this.intersectionObserver) === null || _this$intersectionObs7 === void 0 || _this$intersectionObs7.watchAndTag(element, 'mutation:third-party-element');
|
|
217
|
+
return _context.abrupt("return", 0);
|
|
218
|
+
case 42:
|
|
219
|
+
if (isDisplayContentsElementChildren) {
|
|
220
|
+
(_this$intersectionObs8 = _this.intersectionObserver) === null || _this$intersectionObs8 === void 0 || _this$intersectionObs8.watchAndTag(element, 'mutation:display-contents-children-element');
|
|
221
|
+
} else {
|
|
222
|
+
(_this$intersectionObs9 = _this.intersectionObserver) === null || _this$intersectionObs9 === void 0 || _this$intersectionObs9.watchAndTag(element, createElementMutationsWatcher(removedNodeRects));
|
|
223
|
+
}
|
|
224
|
+
case 43:
|
|
225
|
+
case "end":
|
|
226
|
+
return _context.stop();
|
|
227
|
+
}
|
|
228
|
+
}, _loop2);
|
|
229
|
+
});
|
|
230
|
+
_iterator2.s();
|
|
231
|
+
case 9:
|
|
232
|
+
if ((_step2 = _iterator2.n()).done) {
|
|
233
|
+
_context2.next = 16;
|
|
234
|
+
break;
|
|
235
|
+
}
|
|
236
|
+
return _context2.delegateYield(_loop2(), "t0", 11);
|
|
237
|
+
case 11:
|
|
238
|
+
_ret2 = _context2.t0;
|
|
239
|
+
if (!(_ret2 === 0)) {
|
|
240
|
+
_context2.next = 14;
|
|
241
|
+
break;
|
|
242
|
+
}
|
|
243
|
+
return _context2.abrupt("continue", 14);
|
|
244
|
+
case 14:
|
|
245
|
+
_context2.next = 9;
|
|
246
|
+
break;
|
|
247
|
+
case 16:
|
|
248
|
+
_context2.next = 21;
|
|
249
|
+
break;
|
|
250
|
+
case 18:
|
|
251
|
+
_context2.prev = 18;
|
|
252
|
+
_context2.t1 = _context2["catch"](6);
|
|
253
|
+
_iterator2.e(_context2.t1);
|
|
254
|
+
case 21:
|
|
255
|
+
_context2.prev = 21;
|
|
256
|
+
_iterator2.f();
|
|
257
|
+
return _context2.finish(21);
|
|
258
|
+
case 24:
|
|
259
|
+
_context2.next = 69;
|
|
260
|
+
break;
|
|
261
|
+
case 26:
|
|
104
262
|
if (!_this.getSSRState) {
|
|
105
|
-
|
|
263
|
+
_context2.next = 41;
|
|
106
264
|
break;
|
|
107
265
|
}
|
|
108
266
|
ssrState = _this.getSSRState();
|
|
@@ -112,7 +270,7 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
112
270
|
ignoring: 3
|
|
113
271
|
};
|
|
114
272
|
if (!(ssrState.state === SSRStateEnum.waitingForFirstRender && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement)) {
|
|
115
|
-
|
|
273
|
+
_context2.next = 34;
|
|
116
274
|
break;
|
|
117
275
|
}
|
|
118
276
|
ssrState.state = SSRStateEnum.ignoring;
|
|
@@ -120,57 +278,57 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
120
278
|
// arbitrary 500ms DOM update window
|
|
121
279
|
ssrState.renderStop = timestamp + 500;
|
|
122
280
|
}
|
|
123
|
-
(_this$
|
|
124
|
-
return
|
|
125
|
-
case
|
|
281
|
+
(_this$intersectionObs0 = _this.intersectionObserver) === null || _this$intersectionObs0 === void 0 || _this$intersectionObs0.watchAndTag(addedNode, 'ssr-hydration');
|
|
282
|
+
return _context2.abrupt("return", 0);
|
|
283
|
+
case 34:
|
|
126
284
|
if (!(ssrState.state === SSRStateEnum.ignoring && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement)) {
|
|
127
|
-
|
|
285
|
+
_context2.next = 41;
|
|
128
286
|
break;
|
|
129
287
|
}
|
|
130
288
|
if (!(timestamp <= ssrState.renderStop)) {
|
|
131
|
-
|
|
289
|
+
_context2.next = 40;
|
|
132
290
|
break;
|
|
133
291
|
}
|
|
134
|
-
(_this$
|
|
135
|
-
return
|
|
136
|
-
case
|
|
292
|
+
(_this$intersectionObs1 = _this.intersectionObserver) === null || _this$intersectionObs1 === void 0 || _this$intersectionObs1.watchAndTag(addedNode, 'ssr-hydration');
|
|
293
|
+
return _context2.abrupt("return", 0);
|
|
294
|
+
case 40:
|
|
137
295
|
ssrState.state = SSRStateEnum.normal;
|
|
138
|
-
case
|
|
296
|
+
case 41:
|
|
139
297
|
if (!_this.getSSRPlaceholderHandler) {
|
|
140
|
-
|
|
298
|
+
_context2.next = 55;
|
|
141
299
|
break;
|
|
142
300
|
}
|
|
143
301
|
ssrPlaceholderHandler = _this.getSSRPlaceholderHandler();
|
|
144
302
|
if (!ssrPlaceholderHandler) {
|
|
145
|
-
|
|
303
|
+
_context2.next = 55;
|
|
146
304
|
break;
|
|
147
305
|
}
|
|
148
306
|
if (!(ssrPlaceholderHandler.isPlaceholder(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode))) {
|
|
149
|
-
|
|
307
|
+
_context2.next = 48;
|
|
150
308
|
break;
|
|
151
309
|
}
|
|
152
310
|
if (!ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(addedNode)) {
|
|
153
|
-
|
|
311
|
+
_context2.next = 48;
|
|
154
312
|
break;
|
|
155
313
|
}
|
|
156
|
-
(_this$
|
|
157
|
-
return
|
|
158
|
-
case
|
|
314
|
+
(_this$intersectionObs10 = _this.intersectionObserver) === null || _this$intersectionObs10 === void 0 || _this$intersectionObs10.watchAndTag(addedNode, 'mutation:ssr-placeholder');
|
|
315
|
+
return _context2.abrupt("return", 0);
|
|
316
|
+
case 48:
|
|
159
317
|
if (!(ssrPlaceholderHandler.isPlaceholderReplacement(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode))) {
|
|
160
|
-
|
|
318
|
+
_context2.next = 55;
|
|
161
319
|
break;
|
|
162
320
|
}
|
|
163
|
-
|
|
321
|
+
_context2.next = 51;
|
|
164
322
|
return ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(addedNode);
|
|
165
|
-
case
|
|
166
|
-
result =
|
|
323
|
+
case 51:
|
|
324
|
+
result = _context2.sent;
|
|
167
325
|
if (!(result !== false)) {
|
|
168
|
-
|
|
326
|
+
_context2.next = 55;
|
|
169
327
|
break;
|
|
170
328
|
}
|
|
171
|
-
(_this$
|
|
172
|
-
return
|
|
173
|
-
case
|
|
329
|
+
(_this$intersectionObs11 = _this.intersectionObserver) === null || _this$intersectionObs11 === void 0 || _this$intersectionObs11.watchAndTag(addedNode, 'mutation:ssr-placeholder');
|
|
330
|
+
return _context2.abrupt("return", 0);
|
|
331
|
+
case 55:
|
|
174
332
|
sameDeletedNode = removedNodes.find(function (ref) {
|
|
175
333
|
var n = ref.deref();
|
|
176
334
|
if (!n || !addedNode) {
|
|
@@ -180,79 +338,79 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
180
338
|
});
|
|
181
339
|
isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(addedNode);
|
|
182
340
|
if (!(sameDeletedNode && isInIgnoreLsMarker)) {
|
|
183
|
-
|
|
341
|
+
_context2.next = 60;
|
|
184
342
|
break;
|
|
185
343
|
}
|
|
186
|
-
(_this$
|
|
187
|
-
return
|
|
188
|
-
case
|
|
344
|
+
(_this$intersectionObs12 = _this.intersectionObserver) === null || _this$intersectionObs12 === void 0 || _this$intersectionObs12.watchAndTag(addedNode, 'mutation:remount');
|
|
345
|
+
return _context2.abrupt("return", 0);
|
|
346
|
+
case 60:
|
|
189
347
|
if (!isContainedWithinMediaWrapper(addedNode)) {
|
|
190
|
-
|
|
348
|
+
_context2.next = 63;
|
|
191
349
|
break;
|
|
192
350
|
}
|
|
193
|
-
(_this$
|
|
194
|
-
return
|
|
195
|
-
case
|
|
351
|
+
(_this$intersectionObs13 = _this.intersectionObserver) === null || _this$intersectionObs13 === void 0 || _this$intersectionObs13.watchAndTag(addedNode, 'mutation:media');
|
|
352
|
+
return _context2.abrupt("return", 0);
|
|
353
|
+
case 63:
|
|
196
354
|
_checkWithinComponent = checkWithinComponent(addedNode, 'UFOThirdPartySegment', _this.mapIs3pResult), isWithinThirdPartySegment = _checkWithinComponent.isWithin;
|
|
197
355
|
if (!isWithinThirdPartySegment) {
|
|
198
|
-
|
|
356
|
+
_context2.next = 67;
|
|
199
357
|
break;
|
|
200
358
|
}
|
|
201
|
-
(_this$
|
|
202
|
-
return
|
|
203
|
-
case
|
|
204
|
-
|
|
359
|
+
(_this$intersectionObs14 = _this.intersectionObserver) === null || _this$intersectionObs14 === void 0 || _this$intersectionObs14.watchAndTag(addedNode, 'mutation:third-party-element');
|
|
360
|
+
return _context2.abrupt("return", 0);
|
|
361
|
+
case 67:
|
|
362
|
+
_iterator3 = _createForOfIteratorHelper(getMutatedElements(addedNode));
|
|
205
363
|
try {
|
|
206
|
-
for (
|
|
207
|
-
|
|
364
|
+
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
|
|
365
|
+
_step3$value = _step3.value, isDisplayContentsElementChildren = _step3$value.isDisplayContentsElementChildren, element = _step3$value.element;
|
|
208
366
|
if (isDisplayContentsElementChildren) {
|
|
209
|
-
(_this$
|
|
367
|
+
(_this$intersectionObs15 = _this.intersectionObserver) === null || _this$intersectionObs15 === void 0 || _this$intersectionObs15.watchAndTag(element, 'mutation:display-contents-children-element');
|
|
210
368
|
} else {
|
|
211
|
-
(_this$
|
|
369
|
+
(_this$intersectionObs16 = _this.intersectionObserver) === null || _this$intersectionObs16 === void 0 || _this$intersectionObs16.watchAndTag(element, createElementMutationsWatcher(removedNodeRects));
|
|
212
370
|
}
|
|
213
371
|
}
|
|
214
372
|
} catch (err) {
|
|
215
|
-
|
|
373
|
+
_iterator3.e(err);
|
|
216
374
|
} finally {
|
|
217
|
-
|
|
375
|
+
_iterator3.f();
|
|
218
376
|
}
|
|
219
|
-
case
|
|
377
|
+
case 69:
|
|
220
378
|
case "end":
|
|
221
|
-
return
|
|
379
|
+
return _context2.stop();
|
|
222
380
|
}
|
|
223
|
-
}, _loop);
|
|
381
|
+
}, _loop, null, [[6, 18, 21, 24]]);
|
|
224
382
|
});
|
|
225
383
|
_iterator.s();
|
|
226
384
|
case 7:
|
|
227
385
|
if ((_step = _iterator.n()).done) {
|
|
228
|
-
|
|
386
|
+
_context3.next = 14;
|
|
229
387
|
break;
|
|
230
388
|
}
|
|
231
|
-
return
|
|
389
|
+
return _context3.delegateYield(_loop(), "t0", 9);
|
|
232
390
|
case 9:
|
|
233
|
-
_ret =
|
|
391
|
+
_ret = _context3.t0;
|
|
234
392
|
if (!(_ret === 0)) {
|
|
235
|
-
|
|
393
|
+
_context3.next = 12;
|
|
236
394
|
break;
|
|
237
395
|
}
|
|
238
|
-
return
|
|
396
|
+
return _context3.abrupt("continue", 12);
|
|
239
397
|
case 12:
|
|
240
|
-
|
|
398
|
+
_context3.next = 7;
|
|
241
399
|
break;
|
|
242
400
|
case 14:
|
|
243
|
-
|
|
401
|
+
_context3.next = 19;
|
|
244
402
|
break;
|
|
245
403
|
case 16:
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
_iterator.e(
|
|
404
|
+
_context3.prev = 16;
|
|
405
|
+
_context3.t1 = _context3["catch"](4);
|
|
406
|
+
_iterator.e(_context3.t1);
|
|
249
407
|
case 19:
|
|
250
|
-
|
|
408
|
+
_context3.prev = 19;
|
|
251
409
|
_iterator.f();
|
|
252
|
-
return
|
|
410
|
+
return _context3.finish(19);
|
|
253
411
|
case 22:
|
|
254
412
|
case "end":
|
|
255
|
-
return
|
|
413
|
+
return _context3.stop();
|
|
256
414
|
}
|
|
257
415
|
}, _callee, null, [[4, 16, 19, 22]]);
|
|
258
416
|
}));
|
|
@@ -260,15 +418,15 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
260
418
|
return _ref5.apply(this, arguments);
|
|
261
419
|
};
|
|
262
420
|
}());
|
|
263
|
-
_defineProperty(this, "handleAttributeMutation", function (
|
|
264
|
-
var _this$
|
|
265
|
-
var target =
|
|
266
|
-
attributeName =
|
|
267
|
-
oldValue =
|
|
268
|
-
newValue =
|
|
269
|
-
(_this$
|
|
270
|
-
var target =
|
|
271
|
-
rect =
|
|
421
|
+
_defineProperty(this, "handleAttributeMutation", function (_ref7) {
|
|
422
|
+
var _this$intersectionObs17;
|
|
423
|
+
var target = _ref7.target,
|
|
424
|
+
attributeName = _ref7.attributeName,
|
|
425
|
+
oldValue = _ref7.oldValue,
|
|
426
|
+
newValue = _ref7.newValue;
|
|
427
|
+
(_this$intersectionObs17 = _this.intersectionObserver) === null || _this$intersectionObs17 === void 0 || _this$intersectionObs17.watchAndTag(target, function (_ref8) {
|
|
428
|
+
var target = _ref8.target,
|
|
429
|
+
rect = _ref8.rect;
|
|
272
430
|
if (isContainedWithinMediaWrapper(target)) {
|
|
273
431
|
return {
|
|
274
432
|
type: 'mutation:media',
|
|
@@ -340,14 +498,14 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
340
498
|
};
|
|
341
499
|
});
|
|
342
500
|
});
|
|
343
|
-
_defineProperty(this, "handleLayoutShift", function (
|
|
344
|
-
var time =
|
|
345
|
-
changedRects =
|
|
346
|
-
var
|
|
347
|
-
|
|
501
|
+
_defineProperty(this, "handleLayoutShift", function (_ref9) {
|
|
502
|
+
var time = _ref9.time,
|
|
503
|
+
changedRects = _ref9.changedRects;
|
|
504
|
+
var _iterator4 = _createForOfIteratorHelper(changedRects),
|
|
505
|
+
_step4;
|
|
348
506
|
try {
|
|
349
|
-
for (
|
|
350
|
-
var changedRect =
|
|
507
|
+
for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
|
|
508
|
+
var changedRect = _step4.value;
|
|
351
509
|
var target = changedRect.node;
|
|
352
510
|
if (target) {
|
|
353
511
|
var isSameCurrentAndPreviousRects = isSameRectDimensions(changedRect.rect, changedRect.previousRect);
|
|
@@ -362,9 +520,9 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
362
520
|
}
|
|
363
521
|
}
|
|
364
522
|
} catch (err) {
|
|
365
|
-
|
|
523
|
+
_iterator4.e(err);
|
|
366
524
|
} finally {
|
|
367
|
-
|
|
525
|
+
_iterator4.f();
|
|
368
526
|
}
|
|
369
527
|
});
|
|
370
528
|
this.mapVisibleNodeRects = new WeakMap();
|
|
@@ -421,12 +579,12 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
421
579
|
}, {
|
|
422
580
|
key: "stop",
|
|
423
581
|
value: function stop() {
|
|
424
|
-
var _this$mutationObserve2, _this$
|
|
582
|
+
var _this$mutationObserve2, _this$intersectionObs18, _this$performanceObse2;
|
|
425
583
|
if (!this.isStarted) {
|
|
426
584
|
return;
|
|
427
585
|
}
|
|
428
586
|
(_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 || _this$mutationObserve2.disconnect();
|
|
429
|
-
(_this$
|
|
587
|
+
(_this$intersectionObs18 = this.intersectionObserver) === null || _this$intersectionObs18 === void 0 || _this$intersectionObs18.disconnect();
|
|
430
588
|
(_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 || _this$performanceObse2.disconnect();
|
|
431
589
|
this.isStarted = false;
|
|
432
590
|
// Clean up caches when stopping
|
|
@@ -79,6 +79,7 @@ export type ReactUFOPayload = {
|
|
|
79
79
|
'event:localTimezoneOffset': number;
|
|
80
80
|
'event:browser:name': string;
|
|
81
81
|
'event:browser:version': string;
|
|
82
|
+
'event:webdriver:enabled'?: boolean;
|
|
82
83
|
'event:cpus': number;
|
|
83
84
|
'event:memory': 0.25 | 0.5 | 1 | 2 | 4 | 8;
|
|
84
85
|
'event:network:effectiveType': 'slow-2g' | '2g' | '3g' | '4g';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export type { ResourceTiming, ResourceTimings } from './common/types';
|
|
1
|
+
export type { ResourceTiming, ResourceTimings, ResourceTimingsConfig } from './common/types';
|
|
2
2
|
export { configure } from './common/utils/config';
|
|
3
3
|
export { getResourceTimings } from './main';
|
|
4
4
|
export { startResourceTimingBuffer } from './utils';
|
|
@@ -34,6 +34,11 @@ export declare class SSRPlaceholderHandlers {
|
|
|
34
34
|
getSize(el: HTMLElement): Promise<Rect>;
|
|
35
35
|
validateReactComponentMatchToPlaceholder(el: HTMLElement): Promise<unknown>;
|
|
36
36
|
hasSameSizePosition(rect: Rect | undefined, boundingClientRect: DOMRectReadOnly): boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Gets the effective bounding rectangle for an element, handling display: contents elements
|
|
39
|
+
* by collecting dimensions from their children instead
|
|
40
|
+
*/
|
|
41
|
+
private getEffectiveBoundingRect;
|
|
37
42
|
isDummyRect(rect: Rect | undefined): boolean;
|
|
38
43
|
intersectionObserverCallback: ({ target, boundingClientRect }: IntersectionObserverEntry) => void;
|
|
39
44
|
}
|
|
@@ -81,6 +81,7 @@ export type ReactUFOPayload = {
|
|
|
81
81
|
'event:localTimezoneOffset': number;
|
|
82
82
|
'event:browser:name': string;
|
|
83
83
|
'event:browser:version': string;
|
|
84
|
+
'event:webdriver:enabled'?: boolean;
|
|
84
85
|
'event:cpus': number;
|
|
85
86
|
'event:memory': 0.25 | 0.5 | 1 | 2 | 4 | 8;
|
|
86
87
|
'event:network:effectiveType': 'slow-2g' | '2g' | '3g' | '4g';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export type { ResourceTiming, ResourceTimings } from './common/types';
|
|
1
|
+
export type { ResourceTiming, ResourceTimings, ResourceTimingsConfig } from './common/types';
|
|
2
2
|
export { configure } from './common/utils/config';
|
|
3
3
|
export { getResourceTimings } from './main';
|
|
4
4
|
export { startResourceTimingBuffer } from './utils';
|
|
@@ -34,6 +34,11 @@ export declare class SSRPlaceholderHandlers {
|
|
|
34
34
|
getSize(el: HTMLElement): Promise<Rect>;
|
|
35
35
|
validateReactComponentMatchToPlaceholder(el: HTMLElement): Promise<unknown>;
|
|
36
36
|
hasSameSizePosition(rect: Rect | undefined, boundingClientRect: DOMRectReadOnly): boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Gets the effective bounding rectangle for an element, handling display: contents elements
|
|
39
|
+
* by collecting dimensions from their children instead
|
|
40
|
+
*/
|
|
41
|
+
private getEffectiveBoundingRect;
|
|
37
42
|
isDummyRect(rect: Rect | undefined): boolean;
|
|
38
43
|
intersectionObserverCallback: ({ target, boundingClientRect }: IntersectionObserverEntry) => void;
|
|
39
44
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/react-ufo",
|
|
3
|
-
"version": "4.12.
|
|
3
|
+
"version": "4.12.5",
|
|
4
4
|
"description": "Parts of React UFO that are publicly available",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -42,6 +42,7 @@
|
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"@af/integration-testing": "workspace:^",
|
|
45
|
+
"@atlassian/feature-flags-test-utils": "^1.0.0",
|
|
45
46
|
"@testing-library/react": "^13.4.0",
|
|
46
47
|
"@types/is-ci": "^3.0.0",
|
|
47
48
|
"is-ci": "^3.0.1"
|
|
@@ -109,6 +110,9 @@
|
|
|
109
110
|
"platform_ufo_critical_metrics_payload": {
|
|
110
111
|
"type": "boolean"
|
|
111
112
|
},
|
|
113
|
+
"platform_ufo_ssr_placeholders_for_display_contents": {
|
|
114
|
+
"type": "boolean"
|
|
115
|
+
},
|
|
112
116
|
"platform_ufo_enable_interactivity_jsm": {
|
|
113
117
|
"type": "boolean"
|
|
114
118
|
},
|
|
@@ -162,6 +166,9 @@
|
|
|
162
166
|
},
|
|
163
167
|
"media-perf-uplift-mutation-fix": {
|
|
164
168
|
"type": "boolean"
|
|
169
|
+
},
|
|
170
|
+
"react_ufo_add_webdriver_info": {
|
|
171
|
+
"type": "boolean"
|
|
165
172
|
}
|
|
166
173
|
}
|
|
167
174
|
}
|