@atlaskit/react-ufo 4.2.3 → 4.2.4
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 +8 -0
- package/dist/cjs/vc/vc-observer/observers/ssr-placeholders/index.js +11 -0
- package/dist/cjs/vc/vc-observer-new/viewport-observer/index.js +45 -30
- package/dist/es2019/vc/vc-observer/observers/ssr-placeholders/index.js +9 -0
- package/dist/es2019/vc/vc-observer-new/viewport-observer/index.js +28 -19
- package/dist/esm/vc/vc-observer/observers/ssr-placeholders/index.js +11 -0
- package/dist/esm/vc/vc-observer-new/viewport-observer/index.js +45 -30
- package/dist/types/vc/vc-observer/observers/ssr-placeholders/index.d.ts +1 -0
- package/dist/types-ts4.5/vc/vc-observer/observers/ssr-placeholders/index.d.ts +1 -0
- package/package.json +4 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/ufo-interaction-ignore
|
|
2
2
|
|
|
3
|
+
## 4.2.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#199942](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199942)
|
|
8
|
+
[`260cb0fb9e934`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/260cb0fb9e934) -
|
|
9
|
+
Fix ssr placeholder size/dimension check resolution in TTVC v3
|
|
10
|
+
|
|
3
11
|
## 4.2.3
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -213,6 +213,8 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
|
|
|
213
213
|
}
|
|
214
214
|
return element;
|
|
215
215
|
}
|
|
216
|
+
|
|
217
|
+
// NOTE - for use when the FG `platform_ufo_ssr_placeholder_resolution_ttvc_v3` is disabled
|
|
216
218
|
}, {
|
|
217
219
|
key: "checkIfExistedAndSizeMatching",
|
|
218
220
|
value: function checkIfExistedAndSizeMatching(el) {
|
|
@@ -230,6 +232,15 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
|
|
|
230
232
|
}
|
|
231
233
|
});
|
|
232
234
|
}
|
|
235
|
+
|
|
236
|
+
// NOTE - for use when the FG `platform_ufo_ssr_placeholder_resolution_ttvc_v3` is enabled
|
|
237
|
+
}, {
|
|
238
|
+
key: "checkIfExistedAndSizeMatchingV3",
|
|
239
|
+
value: function checkIfExistedAndSizeMatchingV3(el) {
|
|
240
|
+
el = this.findNearestPlaceholderContainerIfIgnored(el);
|
|
241
|
+
var id = this.getPlaceholderId(el);
|
|
242
|
+
return this.staticPlaceholders.has(id);
|
|
243
|
+
}
|
|
233
244
|
}, {
|
|
234
245
|
key: "getSize",
|
|
235
246
|
value: function getSize(el) {
|
|
@@ -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 _isNonVisualStyleMutation = _interopRequireDefault(require("../../vc-observer/observers/non-visual-styles/is-non-visual-style-mutation"));
|
|
16
17
|
var _rllPlaceholders = require("../../vc-observer/observers/rll-placeholders");
|
|
@@ -122,8 +123,8 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
|
|
|
122
123
|
_iterator = _createForOfIteratorHelper(addedNodes);
|
|
123
124
|
_context2.prev = 4;
|
|
124
125
|
_loop = /*#__PURE__*/_regenerator.default.mark(function _loop() {
|
|
125
|
-
var _this$
|
|
126
|
-
var addedNodeRef, addedNode, ssrState, SSRStateEnum, _this$intersectionObs, _this$intersectionObs2, ssrPlaceholderHandler, result, _this$
|
|
126
|
+
var _this$intersectionObs9;
|
|
127
|
+
var addedNodeRef, addedNode, ssrState, SSRStateEnum, _this$intersectionObs, _this$intersectionObs2, ssrPlaceholderHandler, _this$intersectionObs3, result, _this$intersectionObs4, _result, _this$intersectionObs5, sameDeletedNode, isInIgnoreLsMarker, _this$intersectionObs6, _this$intersectionObs7, _checkWithinComponent, isWithinThirdPartySegment, _this$intersectionObs8;
|
|
127
128
|
return _regenerator.default.wrap(function _loop$(_context) {
|
|
128
129
|
while (1) switch (_context.prev = _context.next) {
|
|
129
130
|
case 0:
|
|
@@ -171,44 +172,58 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
|
|
|
171
172
|
ssrState.state = SSRStateEnum.normal;
|
|
172
173
|
case 19:
|
|
173
174
|
if (!_this.getSSRPlaceholderHandler) {
|
|
174
|
-
_context.next =
|
|
175
|
+
_context.next = 42;
|
|
175
176
|
break;
|
|
176
177
|
}
|
|
177
178
|
ssrPlaceholderHandler = _this.getSSRPlaceholderHandler();
|
|
178
179
|
if (!ssrPlaceholderHandler) {
|
|
179
|
-
_context.next =
|
|
180
|
+
_context.next = 42;
|
|
180
181
|
break;
|
|
181
182
|
}
|
|
182
183
|
if (!(ssrPlaceholderHandler.isPlaceholder(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode))) {
|
|
184
|
+
_context.next = 35;
|
|
185
|
+
break;
|
|
186
|
+
}
|
|
187
|
+
if (!(0, _platformFeatureFlags.fg)('platform_ufo_ssr_placeholder_resolution_ttvc_v3')) {
|
|
183
188
|
_context.next = 29;
|
|
184
189
|
break;
|
|
185
190
|
}
|
|
186
|
-
|
|
191
|
+
if (!ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(addedNode)) {
|
|
192
|
+
_context.next = 27;
|
|
193
|
+
break;
|
|
194
|
+
}
|
|
195
|
+
(_this$intersectionObs3 = _this.intersectionObserver) === null || _this$intersectionObs3 === void 0 || _this$intersectionObs3.watchAndTag(addedNode, 'mutation:ssr-placeholder');
|
|
196
|
+
return _context.abrupt("return", 0);
|
|
197
|
+
case 27:
|
|
198
|
+
_context.next = 35;
|
|
199
|
+
break;
|
|
200
|
+
case 29:
|
|
201
|
+
_context.next = 31;
|
|
187
202
|
return ssrPlaceholderHandler.checkIfExistedAndSizeMatching(addedNode);
|
|
188
|
-
case
|
|
203
|
+
case 31:
|
|
189
204
|
result = _context.sent;
|
|
190
205
|
if (!(result !== false)) {
|
|
191
|
-
_context.next =
|
|
206
|
+
_context.next = 35;
|
|
192
207
|
break;
|
|
193
208
|
}
|
|
194
|
-
(_this$
|
|
209
|
+
(_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(addedNode, 'mutation:ssr-placeholder');
|
|
195
210
|
return _context.abrupt("return", 0);
|
|
196
|
-
case
|
|
211
|
+
case 35:
|
|
197
212
|
if (!(ssrPlaceholderHandler.isPlaceholderReplacement(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode))) {
|
|
198
|
-
_context.next =
|
|
213
|
+
_context.next = 42;
|
|
199
214
|
break;
|
|
200
215
|
}
|
|
201
|
-
_context.next =
|
|
216
|
+
_context.next = 38;
|
|
202
217
|
return ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(addedNode);
|
|
203
|
-
case
|
|
218
|
+
case 38:
|
|
204
219
|
_result = _context.sent;
|
|
205
220
|
if (!(_result !== false)) {
|
|
206
|
-
_context.next =
|
|
221
|
+
_context.next = 42;
|
|
207
222
|
break;
|
|
208
223
|
}
|
|
209
|
-
(_this$
|
|
224
|
+
(_this$intersectionObs5 = _this.intersectionObserver) === null || _this$intersectionObs5 === void 0 || _this$intersectionObs5.watchAndTag(addedNode, 'mutation:ssr-placeholder');
|
|
210
225
|
return _context.abrupt("return", 0);
|
|
211
|
-
case
|
|
226
|
+
case 42:
|
|
212
227
|
sameDeletedNode = removedNodes.find(function (ref) {
|
|
213
228
|
var n = ref.deref();
|
|
214
229
|
if (!n || !addedNode) {
|
|
@@ -218,29 +233,29 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
|
|
|
218
233
|
});
|
|
219
234
|
isInIgnoreLsMarker = (0, _isInVcIgnoreIfNoLayoutShiftMarker.default)(addedNode);
|
|
220
235
|
if (!(sameDeletedNode && isInIgnoreLsMarker)) {
|
|
221
|
-
_context.next =
|
|
236
|
+
_context.next = 47;
|
|
222
237
|
break;
|
|
223
238
|
}
|
|
224
|
-
(_this$
|
|
239
|
+
(_this$intersectionObs6 = _this.intersectionObserver) === null || _this$intersectionObs6 === void 0 || _this$intersectionObs6.watchAndTag(addedNode, 'mutation:remount');
|
|
225
240
|
return _context.abrupt("return", 0);
|
|
226
|
-
case
|
|
241
|
+
case 47:
|
|
227
242
|
if (!(0, _vcUtils.isContainedWithinMediaWrapper)(addedNode)) {
|
|
228
|
-
_context.next =
|
|
243
|
+
_context.next = 50;
|
|
229
244
|
break;
|
|
230
245
|
}
|
|
231
|
-
(_this$
|
|
246
|
+
(_this$intersectionObs7 = _this.intersectionObserver) === null || _this$intersectionObs7 === void 0 || _this$intersectionObs7.watchAndTag(addedNode, 'mutation:media');
|
|
232
247
|
return _context.abrupt("return", 0);
|
|
233
|
-
case
|
|
248
|
+
case 50:
|
|
234
249
|
_checkWithinComponent = (0, _checkWithinComponent2.default)(addedNode, 'UFOThirdPartySegment', _this.mapIs3pResult), isWithinThirdPartySegment = _checkWithinComponent.isWithin;
|
|
235
250
|
if (!isWithinThirdPartySegment) {
|
|
236
|
-
_context.next =
|
|
251
|
+
_context.next = 54;
|
|
237
252
|
break;
|
|
238
253
|
}
|
|
239
|
-
(_this$
|
|
254
|
+
(_this$intersectionObs8 = _this.intersectionObserver) === null || _this$intersectionObs8 === void 0 || _this$intersectionObs8.watchAndTag(addedNode, 'mutation:third-party-element');
|
|
240
255
|
return _context.abrupt("return", 0);
|
|
241
|
-
case
|
|
242
|
-
(_this$
|
|
243
|
-
case
|
|
256
|
+
case 54:
|
|
257
|
+
(_this$intersectionObs9 = _this.intersectionObserver) === null || _this$intersectionObs9 === void 0 || _this$intersectionObs9.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
|
|
258
|
+
case 55:
|
|
244
259
|
case "end":
|
|
245
260
|
return _context.stop();
|
|
246
261
|
}
|
|
@@ -285,12 +300,12 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
|
|
|
285
300
|
};
|
|
286
301
|
}());
|
|
287
302
|
(0, _defineProperty2.default)(this, "handleAttributeMutation", function (_ref6) {
|
|
288
|
-
var _this$
|
|
303
|
+
var _this$intersectionObs0;
|
|
289
304
|
var target = _ref6.target,
|
|
290
305
|
attributeName = _ref6.attributeName,
|
|
291
306
|
oldValue = _ref6.oldValue,
|
|
292
307
|
newValue = _ref6.newValue;
|
|
293
|
-
(_this$
|
|
308
|
+
(_this$intersectionObs0 = _this.intersectionObserver) === null || _this$intersectionObs0 === void 0 || _this$intersectionObs0.watchAndTag(target, function (_ref7) {
|
|
294
309
|
var target = _ref7.target,
|
|
295
310
|
rect = _ref7.rect;
|
|
296
311
|
if ((0, _vcUtils.isContainedWithinMediaWrapper)(target)) {
|
|
@@ -430,12 +445,12 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
|
|
|
430
445
|
}, {
|
|
431
446
|
key: "stop",
|
|
432
447
|
value: function stop() {
|
|
433
|
-
var _this$mutationObserve2, _this$
|
|
448
|
+
var _this$mutationObserve2, _this$intersectionObs1, _this$performanceObse2;
|
|
434
449
|
if (!this.isStarted) {
|
|
435
450
|
return;
|
|
436
451
|
}
|
|
437
452
|
(_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 || _this$mutationObserve2.disconnect();
|
|
438
|
-
(_this$
|
|
453
|
+
(_this$intersectionObs1 = this.intersectionObserver) === null || _this$intersectionObs1 === void 0 || _this$intersectionObs1.disconnect();
|
|
439
454
|
(_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 || _this$performanceObse2.disconnect();
|
|
440
455
|
this.isStarted = false;
|
|
441
456
|
// Clean up caches when stopping
|
|
@@ -184,6 +184,8 @@ export class SSRPlaceholderHandlers {
|
|
|
184
184
|
}
|
|
185
185
|
return element;
|
|
186
186
|
}
|
|
187
|
+
|
|
188
|
+
// NOTE - for use when the FG `platform_ufo_ssr_placeholder_resolution_ttvc_v3` is disabled
|
|
187
189
|
checkIfExistedAndSizeMatching(el) {
|
|
188
190
|
el = this.findNearestPlaceholderContainerIfIgnored(el);
|
|
189
191
|
const id = this.getPlaceholderId(el);
|
|
@@ -198,6 +200,13 @@ export class SSRPlaceholderHandlers {
|
|
|
198
200
|
}
|
|
199
201
|
});
|
|
200
202
|
}
|
|
203
|
+
|
|
204
|
+
// NOTE - for use when the FG `platform_ufo_ssr_placeholder_resolution_ttvc_v3` is enabled
|
|
205
|
+
checkIfExistedAndSizeMatchingV3(el) {
|
|
206
|
+
el = this.findNearestPlaceholderContainerIfIgnored(el);
|
|
207
|
+
const id = this.getPlaceholderId(el);
|
|
208
|
+
return this.staticPlaceholders.has(id);
|
|
209
|
+
}
|
|
201
210
|
getSize(el) {
|
|
202
211
|
return new Promise(resolve => {
|
|
203
212
|
var _this$intersectionObs4;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
3
|
import { isContainedWithinMediaWrapper } from '../../vc-observer/media-wrapper/vc-utils';
|
|
3
4
|
import isNonVisualStyleMutation from '../../vc-observer/observers/non-visual-styles/is-non-visual-style-mutation';
|
|
4
5
|
import { RLLPlaceholderHandlers } from '../../vc-observer/observers/rll-placeholders';
|
|
@@ -100,7 +101,7 @@ export default class ViewportObserver {
|
|
|
100
101
|
});
|
|
101
102
|
const targetNode = target.deref();
|
|
102
103
|
for (const addedNodeRef of addedNodes) {
|
|
103
|
-
var _this$
|
|
104
|
+
var _this$intersectionObs9;
|
|
104
105
|
const addedNode = addedNodeRef.deref();
|
|
105
106
|
if (!addedNode) {
|
|
106
107
|
continue;
|
|
@@ -140,19 +141,27 @@ export default class ViewportObserver {
|
|
|
140
141
|
const ssrPlaceholderHandler = this.getSSRPlaceholderHandler();
|
|
141
142
|
if (ssrPlaceholderHandler) {
|
|
142
143
|
if (ssrPlaceholderHandler.isPlaceholder(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode)) {
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
144
|
+
if (fg('platform_ufo_ssr_placeholder_resolution_ttvc_v3')) {
|
|
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;
|
|
149
|
+
}
|
|
150
|
+
} else {
|
|
151
|
+
const result = await ssrPlaceholderHandler.checkIfExistedAndSizeMatching(addedNode);
|
|
152
|
+
if (result !== false) {
|
|
153
|
+
var _this$intersectionObs4;
|
|
154
|
+
(_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.watchAndTag(addedNode, 'mutation:ssr-placeholder');
|
|
155
|
+
continue;
|
|
156
|
+
}
|
|
148
157
|
}
|
|
149
158
|
// If result is false, continue to normal mutation logic below
|
|
150
159
|
}
|
|
151
160
|
if (ssrPlaceholderHandler.isPlaceholderReplacement(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode)) {
|
|
152
161
|
const result = await ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(addedNode);
|
|
153
162
|
if (result !== false) {
|
|
154
|
-
var _this$
|
|
155
|
-
(_this$
|
|
163
|
+
var _this$intersectionObs5;
|
|
164
|
+
(_this$intersectionObs5 = this.intersectionObserver) === null || _this$intersectionObs5 === void 0 ? void 0 : _this$intersectionObs5.watchAndTag(addedNode, 'mutation:ssr-placeholder');
|
|
156
165
|
continue;
|
|
157
166
|
}
|
|
158
167
|
// If result is false, continue to normal mutation logic below
|
|
@@ -168,24 +177,24 @@ export default class ViewportObserver {
|
|
|
168
177
|
});
|
|
169
178
|
const isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(addedNode);
|
|
170
179
|
if (sameDeletedNode && isInIgnoreLsMarker) {
|
|
171
|
-
var _this$
|
|
172
|
-
(_this$
|
|
180
|
+
var _this$intersectionObs6;
|
|
181
|
+
(_this$intersectionObs6 = this.intersectionObserver) === null || _this$intersectionObs6 === void 0 ? void 0 : _this$intersectionObs6.watchAndTag(addedNode, 'mutation:remount');
|
|
173
182
|
continue;
|
|
174
183
|
}
|
|
175
184
|
if (isContainedWithinMediaWrapper(addedNode)) {
|
|
176
|
-
var _this$
|
|
177
|
-
(_this$
|
|
185
|
+
var _this$intersectionObs7;
|
|
186
|
+
(_this$intersectionObs7 = this.intersectionObserver) === null || _this$intersectionObs7 === void 0 ? void 0 : _this$intersectionObs7.watchAndTag(addedNode, 'mutation:media');
|
|
178
187
|
continue;
|
|
179
188
|
}
|
|
180
189
|
const {
|
|
181
190
|
isWithin: isWithinThirdPartySegment
|
|
182
191
|
} = checkWithinComponent(addedNode, 'UFOThirdPartySegment', this.mapIs3pResult);
|
|
183
192
|
if (isWithinThirdPartySegment) {
|
|
184
|
-
var _this$
|
|
185
|
-
(_this$
|
|
193
|
+
var _this$intersectionObs8;
|
|
194
|
+
(_this$intersectionObs8 = this.intersectionObserver) === null || _this$intersectionObs8 === void 0 ? void 0 : _this$intersectionObs8.watchAndTag(addedNode, 'mutation:third-party-element');
|
|
186
195
|
continue;
|
|
187
196
|
}
|
|
188
|
-
(_this$
|
|
197
|
+
(_this$intersectionObs9 = this.intersectionObserver) === null || _this$intersectionObs9 === void 0 ? void 0 : _this$intersectionObs9.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
|
|
189
198
|
}
|
|
190
199
|
});
|
|
191
200
|
_defineProperty(this, "handleAttributeMutation", ({
|
|
@@ -194,8 +203,8 @@ export default class ViewportObserver {
|
|
|
194
203
|
oldValue,
|
|
195
204
|
newValue
|
|
196
205
|
}) => {
|
|
197
|
-
var _this$
|
|
198
|
-
(_this$
|
|
206
|
+
var _this$intersectionObs0;
|
|
207
|
+
(_this$intersectionObs0 = this.intersectionObserver) === null || _this$intersectionObs0 === void 0 ? void 0 : _this$intersectionObs0.watchAndTag(target, ({
|
|
199
208
|
target,
|
|
200
209
|
rect
|
|
201
210
|
}) => {
|
|
@@ -322,12 +331,12 @@ export default class ViewportObserver {
|
|
|
322
331
|
this.isStarted = true;
|
|
323
332
|
}
|
|
324
333
|
stop() {
|
|
325
|
-
var _this$mutationObserve2, _this$
|
|
334
|
+
var _this$mutationObserve2, _this$intersectionObs1, _this$performanceObse2;
|
|
326
335
|
if (!this.isStarted) {
|
|
327
336
|
return;
|
|
328
337
|
}
|
|
329
338
|
(_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 ? void 0 : _this$mutationObserve2.disconnect();
|
|
330
|
-
(_this$
|
|
339
|
+
(_this$intersectionObs1 = this.intersectionObserver) === null || _this$intersectionObs1 === void 0 ? void 0 : _this$intersectionObs1.disconnect();
|
|
331
340
|
(_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 ? void 0 : _this$performanceObse2.disconnect();
|
|
332
341
|
this.isStarted = false;
|
|
333
342
|
// Clean up caches when stopping
|
|
@@ -206,6 +206,8 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
|
|
|
206
206
|
}
|
|
207
207
|
return element;
|
|
208
208
|
}
|
|
209
|
+
|
|
210
|
+
// NOTE - for use when the FG `platform_ufo_ssr_placeholder_resolution_ttvc_v3` is disabled
|
|
209
211
|
}, {
|
|
210
212
|
key: "checkIfExistedAndSizeMatching",
|
|
211
213
|
value: function checkIfExistedAndSizeMatching(el) {
|
|
@@ -223,6 +225,15 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
|
|
|
223
225
|
}
|
|
224
226
|
});
|
|
225
227
|
}
|
|
228
|
+
|
|
229
|
+
// NOTE - for use when the FG `platform_ufo_ssr_placeholder_resolution_ttvc_v3` is enabled
|
|
230
|
+
}, {
|
|
231
|
+
key: "checkIfExistedAndSizeMatchingV3",
|
|
232
|
+
value: function checkIfExistedAndSizeMatchingV3(el) {
|
|
233
|
+
el = this.findNearestPlaceholderContainerIfIgnored(el);
|
|
234
|
+
var id = this.getPlaceholderId(el);
|
|
235
|
+
return this.staticPlaceholders.has(id);
|
|
236
|
+
}
|
|
226
237
|
}, {
|
|
227
238
|
key: "getSize",
|
|
228
239
|
value: function getSize(el) {
|
|
@@ -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 isNonVisualStyleMutation from '../../vc-observer/observers/non-visual-styles/is-non-visual-style-mutation';
|
|
11
12
|
import { RLLPlaceholderHandlers } from '../../vc-observer/observers/rll-placeholders';
|
|
@@ -113,8 +114,8 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
113
114
|
_iterator = _createForOfIteratorHelper(addedNodes);
|
|
114
115
|
_context2.prev = 4;
|
|
115
116
|
_loop = /*#__PURE__*/_regeneratorRuntime.mark(function _loop() {
|
|
116
|
-
var _this$
|
|
117
|
-
var addedNodeRef, addedNode, ssrState, SSRStateEnum, _this$intersectionObs, _this$intersectionObs2, ssrPlaceholderHandler, result, _this$
|
|
117
|
+
var _this$intersectionObs9;
|
|
118
|
+
var addedNodeRef, addedNode, ssrState, SSRStateEnum, _this$intersectionObs, _this$intersectionObs2, ssrPlaceholderHandler, _this$intersectionObs3, result, _this$intersectionObs4, _result, _this$intersectionObs5, sameDeletedNode, isInIgnoreLsMarker, _this$intersectionObs6, _this$intersectionObs7, _checkWithinComponent, isWithinThirdPartySegment, _this$intersectionObs8;
|
|
118
119
|
return _regeneratorRuntime.wrap(function _loop$(_context) {
|
|
119
120
|
while (1) switch (_context.prev = _context.next) {
|
|
120
121
|
case 0:
|
|
@@ -162,44 +163,58 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
162
163
|
ssrState.state = SSRStateEnum.normal;
|
|
163
164
|
case 19:
|
|
164
165
|
if (!_this.getSSRPlaceholderHandler) {
|
|
165
|
-
_context.next =
|
|
166
|
+
_context.next = 42;
|
|
166
167
|
break;
|
|
167
168
|
}
|
|
168
169
|
ssrPlaceholderHandler = _this.getSSRPlaceholderHandler();
|
|
169
170
|
if (!ssrPlaceholderHandler) {
|
|
170
|
-
_context.next =
|
|
171
|
+
_context.next = 42;
|
|
171
172
|
break;
|
|
172
173
|
}
|
|
173
174
|
if (!(ssrPlaceholderHandler.isPlaceholder(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode))) {
|
|
175
|
+
_context.next = 35;
|
|
176
|
+
break;
|
|
177
|
+
}
|
|
178
|
+
if (!fg('platform_ufo_ssr_placeholder_resolution_ttvc_v3')) {
|
|
174
179
|
_context.next = 29;
|
|
175
180
|
break;
|
|
176
181
|
}
|
|
177
|
-
|
|
182
|
+
if (!ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(addedNode)) {
|
|
183
|
+
_context.next = 27;
|
|
184
|
+
break;
|
|
185
|
+
}
|
|
186
|
+
(_this$intersectionObs3 = _this.intersectionObserver) === null || _this$intersectionObs3 === void 0 || _this$intersectionObs3.watchAndTag(addedNode, 'mutation:ssr-placeholder');
|
|
187
|
+
return _context.abrupt("return", 0);
|
|
188
|
+
case 27:
|
|
189
|
+
_context.next = 35;
|
|
190
|
+
break;
|
|
191
|
+
case 29:
|
|
192
|
+
_context.next = 31;
|
|
178
193
|
return ssrPlaceholderHandler.checkIfExistedAndSizeMatching(addedNode);
|
|
179
|
-
case
|
|
194
|
+
case 31:
|
|
180
195
|
result = _context.sent;
|
|
181
196
|
if (!(result !== false)) {
|
|
182
|
-
_context.next =
|
|
197
|
+
_context.next = 35;
|
|
183
198
|
break;
|
|
184
199
|
}
|
|
185
|
-
(_this$
|
|
200
|
+
(_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(addedNode, 'mutation:ssr-placeholder');
|
|
186
201
|
return _context.abrupt("return", 0);
|
|
187
|
-
case
|
|
202
|
+
case 35:
|
|
188
203
|
if (!(ssrPlaceholderHandler.isPlaceholderReplacement(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode))) {
|
|
189
|
-
_context.next =
|
|
204
|
+
_context.next = 42;
|
|
190
205
|
break;
|
|
191
206
|
}
|
|
192
|
-
_context.next =
|
|
207
|
+
_context.next = 38;
|
|
193
208
|
return ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(addedNode);
|
|
194
|
-
case
|
|
209
|
+
case 38:
|
|
195
210
|
_result = _context.sent;
|
|
196
211
|
if (!(_result !== false)) {
|
|
197
|
-
_context.next =
|
|
212
|
+
_context.next = 42;
|
|
198
213
|
break;
|
|
199
214
|
}
|
|
200
|
-
(_this$
|
|
215
|
+
(_this$intersectionObs5 = _this.intersectionObserver) === null || _this$intersectionObs5 === void 0 || _this$intersectionObs5.watchAndTag(addedNode, 'mutation:ssr-placeholder');
|
|
201
216
|
return _context.abrupt("return", 0);
|
|
202
|
-
case
|
|
217
|
+
case 42:
|
|
203
218
|
sameDeletedNode = removedNodes.find(function (ref) {
|
|
204
219
|
var n = ref.deref();
|
|
205
220
|
if (!n || !addedNode) {
|
|
@@ -209,29 +224,29 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
209
224
|
});
|
|
210
225
|
isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(addedNode);
|
|
211
226
|
if (!(sameDeletedNode && isInIgnoreLsMarker)) {
|
|
212
|
-
_context.next =
|
|
227
|
+
_context.next = 47;
|
|
213
228
|
break;
|
|
214
229
|
}
|
|
215
|
-
(_this$
|
|
230
|
+
(_this$intersectionObs6 = _this.intersectionObserver) === null || _this$intersectionObs6 === void 0 || _this$intersectionObs6.watchAndTag(addedNode, 'mutation:remount');
|
|
216
231
|
return _context.abrupt("return", 0);
|
|
217
|
-
case
|
|
232
|
+
case 47:
|
|
218
233
|
if (!isContainedWithinMediaWrapper(addedNode)) {
|
|
219
|
-
_context.next =
|
|
234
|
+
_context.next = 50;
|
|
220
235
|
break;
|
|
221
236
|
}
|
|
222
|
-
(_this$
|
|
237
|
+
(_this$intersectionObs7 = _this.intersectionObserver) === null || _this$intersectionObs7 === void 0 || _this$intersectionObs7.watchAndTag(addedNode, 'mutation:media');
|
|
223
238
|
return _context.abrupt("return", 0);
|
|
224
|
-
case
|
|
239
|
+
case 50:
|
|
225
240
|
_checkWithinComponent = checkWithinComponent(addedNode, 'UFOThirdPartySegment', _this.mapIs3pResult), isWithinThirdPartySegment = _checkWithinComponent.isWithin;
|
|
226
241
|
if (!isWithinThirdPartySegment) {
|
|
227
|
-
_context.next =
|
|
242
|
+
_context.next = 54;
|
|
228
243
|
break;
|
|
229
244
|
}
|
|
230
|
-
(_this$
|
|
245
|
+
(_this$intersectionObs8 = _this.intersectionObserver) === null || _this$intersectionObs8 === void 0 || _this$intersectionObs8.watchAndTag(addedNode, 'mutation:third-party-element');
|
|
231
246
|
return _context.abrupt("return", 0);
|
|
232
|
-
case
|
|
233
|
-
(_this$
|
|
234
|
-
case
|
|
247
|
+
case 54:
|
|
248
|
+
(_this$intersectionObs9 = _this.intersectionObserver) === null || _this$intersectionObs9 === void 0 || _this$intersectionObs9.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
|
|
249
|
+
case 55:
|
|
235
250
|
case "end":
|
|
236
251
|
return _context.stop();
|
|
237
252
|
}
|
|
@@ -276,12 +291,12 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
276
291
|
};
|
|
277
292
|
}());
|
|
278
293
|
_defineProperty(this, "handleAttributeMutation", function (_ref6) {
|
|
279
|
-
var _this$
|
|
294
|
+
var _this$intersectionObs0;
|
|
280
295
|
var target = _ref6.target,
|
|
281
296
|
attributeName = _ref6.attributeName,
|
|
282
297
|
oldValue = _ref6.oldValue,
|
|
283
298
|
newValue = _ref6.newValue;
|
|
284
|
-
(_this$
|
|
299
|
+
(_this$intersectionObs0 = _this.intersectionObserver) === null || _this$intersectionObs0 === void 0 || _this$intersectionObs0.watchAndTag(target, function (_ref7) {
|
|
285
300
|
var target = _ref7.target,
|
|
286
301
|
rect = _ref7.rect;
|
|
287
302
|
if (isContainedWithinMediaWrapper(target)) {
|
|
@@ -421,12 +436,12 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
421
436
|
}, {
|
|
422
437
|
key: "stop",
|
|
423
438
|
value: function stop() {
|
|
424
|
-
var _this$mutationObserve2, _this$
|
|
439
|
+
var _this$mutationObserve2, _this$intersectionObs1, _this$performanceObse2;
|
|
425
440
|
if (!this.isStarted) {
|
|
426
441
|
return;
|
|
427
442
|
}
|
|
428
443
|
(_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 || _this$mutationObserve2.disconnect();
|
|
429
|
-
(_this$
|
|
444
|
+
(_this$intersectionObs1 = this.intersectionObserver) === null || _this$intersectionObs1 === void 0 || _this$intersectionObs1.disconnect();
|
|
430
445
|
(_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 || _this$performanceObse2.disconnect();
|
|
431
446
|
this.isStarted = false;
|
|
432
447
|
// Clean up caches when stopping
|
|
@@ -30,6 +30,7 @@ export declare class SSRPlaceholderHandlers {
|
|
|
30
30
|
isPlaceholderIgnored(element: HTMLElement): boolean;
|
|
31
31
|
findNearestPlaceholderContainerIfIgnored(element: HTMLElement): HTMLElement;
|
|
32
32
|
checkIfExistedAndSizeMatching(el: HTMLElement): Promise<unknown>;
|
|
33
|
+
checkIfExistedAndSizeMatchingV3(el: HTMLElement): boolean;
|
|
33
34
|
getSize(el: HTMLElement): Promise<Rect>;
|
|
34
35
|
validateReactComponentMatchToPlaceholder(el: HTMLElement): Promise<unknown>;
|
|
35
36
|
hasSameSizePosition(rect: Rect | undefined, boundingClientRect: DOMRectReadOnly): boolean;
|
|
@@ -30,6 +30,7 @@ export declare class SSRPlaceholderHandlers {
|
|
|
30
30
|
isPlaceholderIgnored(element: HTMLElement): boolean;
|
|
31
31
|
findNearestPlaceholderContainerIfIgnored(element: HTMLElement): HTMLElement;
|
|
32
32
|
checkIfExistedAndSizeMatching(el: HTMLElement): Promise<unknown>;
|
|
33
|
+
checkIfExistedAndSizeMatchingV3(el: HTMLElement): boolean;
|
|
33
34
|
getSize(el: HTMLElement): Promise<Rect>;
|
|
34
35
|
validateReactComponentMatchToPlaceholder(el: HTMLElement): Promise<unknown>;
|
|
35
36
|
hasSameSizePosition(rect: Rect | undefined, boundingClientRect: DOMRectReadOnly): boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/react-ufo",
|
|
3
|
-
"version": "4.2.
|
|
3
|
+
"version": "4.2.4",
|
|
4
4
|
"description": "Parts of React UFO that are publicly available",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -200,6 +200,9 @@
|
|
|
200
200
|
},
|
|
201
201
|
"platform_ufo_add_segments_count_threshold": {
|
|
202
202
|
"type": "boolean"
|
|
203
|
+
},
|
|
204
|
+
"platform_ufo_ssr_placeholder_resolution_ttvc_v3": {
|
|
205
|
+
"type": "boolean"
|
|
203
206
|
}
|
|
204
207
|
}
|
|
205
208
|
}
|