@atlaskit/react-ufo 4.12.4 → 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.
Files changed (7) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/vc/vc-observer-new/viewport-observer/index.js +247 -89
  3. package/dist/es2019/vc/vc-observer-new/viewport-observer/index.js +175 -80
  4. package/dist/esm/vc/vc-observer-new/viewport-observer/index.js +247 -89
  5. package/dist/types/resource-timing/index.d.ts +1 -1
  6. package/dist/types-ts4.5/resource-timing/index.d.ts +1 -1
  7. package/package.json +1 -1
package/dist/es2019/vc/vc-observer-new/viewport-observer/index.js CHANGED
@@ -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 isDnDStyleMutation from '../../vc-observer/observers/non-visual-styles/is-dnd-style-mutation';
4
5
  import isNonVisualStyleMutation from '../../vc-observer/observers/non-visual-styles/is-non-visual-style-mutation';
@@ -80,95 +81,189 @@ export default class ViewportObserver {
80
81
  if (!addedNode) {
81
82
  continue;
82
83
  }
84
+ if (fg('platform_ufo_ssr_placeholders_for_display_contents')) {
85
+ for (const {
86
+ isDisplayContentsElementChildren,
87
+ element
88
+ } of getMutatedElements(addedNode)) {
89
+ // SSR hydration logic
90
+ if (this.getSSRState) {
91
+ const ssrState = this.getSSRState();
92
+ const SSRStateEnum = {
93
+ normal: 1,
94
+ waitingForFirstRender: 2,
95
+ ignoring: 3
96
+ };
97
+ if (ssrState.state === SSRStateEnum.waitingForFirstRender && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement) {
98
+ var _this$intersectionObs;
99
+ ssrState.state = SSRStateEnum.ignoring;
100
+ if (ssrState.renderStop === -1) {
101
+ // arbitrary 500ms DOM update window
102
+ ssrState.renderStop = timestamp + 500;
103
+ }
104
+ (_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.watchAndTag(element, 'ssr-hydration');
105
+ continue;
106
+ }
107
+ if (ssrState.state === SSRStateEnum.ignoring && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement) {
108
+ if (timestamp <= ssrState.renderStop) {
109
+ var _this$intersectionObs2;
110
+ (_this$intersectionObs2 = this.intersectionObserver) === null || _this$intersectionObs2 === void 0 ? void 0 : _this$intersectionObs2.watchAndTag(element, 'ssr-hydration');
111
+ continue;
112
+ } else {
113
+ ssrState.state = SSRStateEnum.normal;
114
+ }
115
+ }
116
+ }
83
117
 
84
- // SSR hydration logic
85
- if (this.getSSRState) {
86
- const ssrState = this.getSSRState();
87
- const SSRStateEnum = {
88
- normal: 1,
89
- waitingForFirstRender: 2,
90
- ignoring: 3
91
- };
92
- if (ssrState.state === SSRStateEnum.waitingForFirstRender && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement) {
93
- var _this$intersectionObs;
94
- ssrState.state = SSRStateEnum.ignoring;
95
- if (ssrState.renderStop === -1) {
96
- // arbitrary 500ms DOM update window
97
- ssrState.renderStop = timestamp + 500;
118
+ // SSR placeholder logic - check and handle with await
119
+ if (this.getSSRPlaceholderHandler) {
120
+ const ssrPlaceholderHandler = this.getSSRPlaceholderHandler();
121
+ if (ssrPlaceholderHandler) {
122
+ if (ssrPlaceholderHandler.isPlaceholder(element) || ssrPlaceholderHandler.isPlaceholderIgnored(element)) {
123
+ if (ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(element)) {
124
+ var _this$intersectionObs3;
125
+ (_this$intersectionObs3 = this.intersectionObserver) === null || _this$intersectionObs3 === void 0 ? void 0 : _this$intersectionObs3.watchAndTag(element, 'mutation:ssr-placeholder');
126
+ continue;
127
+ }
128
+ // If result is false, continue to normal mutation logic below
129
+ }
130
+ if (ssrPlaceholderHandler.isPlaceholderReplacement(element) || ssrPlaceholderHandler.isPlaceholderIgnored(element)) {
131
+ const result = await ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(element);
132
+ if (result !== false) {
133
+ var _this$intersectionObs4;
134
+ (_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.watchAndTag(element, 'mutation:ssr-placeholder');
135
+ continue;
136
+ }
137
+ // If result is false, continue to normal mutation logic below
138
+ }
139
+ }
98
140
  }
99
- (_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.watchAndTag(addedNode, 'ssr-hydration');
100
- continue;
101
- }
102
- if (ssrState.state === SSRStateEnum.ignoring && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement) {
103
- if (timestamp <= ssrState.renderStop) {
104
- var _this$intersectionObs2;
105
- (_this$intersectionObs2 = this.intersectionObserver) === null || _this$intersectionObs2 === void 0 ? void 0 : _this$intersectionObs2.watchAndTag(addedNode, 'ssr-hydration');
141
+ const sameDeletedNode = removedNodes.find(ref => {
142
+ const n = ref.deref();
143
+ if (!n || !element) {
144
+ return false;
145
+ }
146
+ return n.isEqualNode(element);
147
+ });
148
+ const isInIgnoreLsMarker = element instanceof HTMLElement ? isInVCIgnoreIfNoLayoutShiftMarker(element) : false;
149
+ if (sameDeletedNode && isInIgnoreLsMarker) {
150
+ var _this$intersectionObs5;
151
+ (_this$intersectionObs5 = this.intersectionObserver) === null || _this$intersectionObs5 === void 0 ? void 0 : _this$intersectionObs5.watchAndTag(element, 'mutation:remount');
152
+ continue;
153
+ }
154
+ if (isContainedWithinMediaWrapper(element)) {
155
+ var _this$intersectionObs6;
156
+ (_this$intersectionObs6 = this.intersectionObserver) === null || _this$intersectionObs6 === void 0 ? void 0 : _this$intersectionObs6.watchAndTag(element, 'mutation:media');
157
+ continue;
158
+ }
159
+ const {
160
+ isWithin: isWithinThirdPartySegment
161
+ } = element instanceof HTMLElement ? checkWithinComponent(element, 'UFOThirdPartySegment', this.mapIs3pResult) : {
162
+ isWithin: false
163
+ };
164
+ if (isWithinThirdPartySegment) {
165
+ var _this$intersectionObs7;
166
+ (_this$intersectionObs7 = this.intersectionObserver) === null || _this$intersectionObs7 === void 0 ? void 0 : _this$intersectionObs7.watchAndTag(element, 'mutation:third-party-element');
106
167
  continue;
168
+ }
169
+ if (isDisplayContentsElementChildren) {
170
+ var _this$intersectionObs8;
171
+ (_this$intersectionObs8 = this.intersectionObserver) === null || _this$intersectionObs8 === void 0 ? void 0 : _this$intersectionObs8.watchAndTag(element, 'mutation:display-contents-children-element');
107
172
  } else {
108
- ssrState.state = SSRStateEnum.normal;
173
+ var _this$intersectionObs9;
174
+ (_this$intersectionObs9 = this.intersectionObserver) === null || _this$intersectionObs9 === void 0 ? void 0 : _this$intersectionObs9.watchAndTag(element, createElementMutationsWatcher(removedNodeRects));
109
175
  }
110
176
  }
111
- }
112
-
113
- // SSR placeholder logic - check and handle with await
114
- if (this.getSSRPlaceholderHandler) {
115
- const ssrPlaceholderHandler = this.getSSRPlaceholderHandler();
116
- if (ssrPlaceholderHandler) {
117
- if (ssrPlaceholderHandler.isPlaceholder(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode)) {
118
- if (ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(addedNode)) {
119
- var _this$intersectionObs3;
120
- (_this$intersectionObs3 = this.intersectionObserver) === null || _this$intersectionObs3 === void 0 ? void 0 : _this$intersectionObs3.watchAndTag(addedNode, 'mutation:ssr-placeholder');
121
- continue;
177
+ } else {
178
+ // SSR hydration logic
179
+ if (this.getSSRState) {
180
+ const ssrState = this.getSSRState();
181
+ const SSRStateEnum = {
182
+ normal: 1,
183
+ waitingForFirstRender: 2,
184
+ ignoring: 3
185
+ };
186
+ if (ssrState.state === SSRStateEnum.waitingForFirstRender && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement) {
187
+ var _this$intersectionObs0;
188
+ ssrState.state = SSRStateEnum.ignoring;
189
+ if (ssrState.renderStop === -1) {
190
+ // arbitrary 500ms DOM update window
191
+ ssrState.renderStop = timestamp + 500;
122
192
  }
123
- // If result is false, continue to normal mutation logic below
193
+ (_this$intersectionObs0 = this.intersectionObserver) === null || _this$intersectionObs0 === void 0 ? void 0 : _this$intersectionObs0.watchAndTag(addedNode, 'ssr-hydration');
194
+ continue;
124
195
  }
125
- if (ssrPlaceholderHandler.isPlaceholderReplacement(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode)) {
126
- const result = await ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(addedNode);
127
- if (result !== false) {
128
- var _this$intersectionObs4;
129
- (_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.watchAndTag(addedNode, 'mutation:ssr-placeholder');
196
+ if (ssrState.state === SSRStateEnum.ignoring && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement) {
197
+ if (timestamp <= ssrState.renderStop) {
198
+ var _this$intersectionObs1;
199
+ (_this$intersectionObs1 = this.intersectionObserver) === null || _this$intersectionObs1 === void 0 ? void 0 : _this$intersectionObs1.watchAndTag(addedNode, 'ssr-hydration');
130
200
  continue;
201
+ } else {
202
+ ssrState.state = SSRStateEnum.normal;
131
203
  }
132
- // If result is false, continue to normal mutation logic below
133
204
  }
134
205
  }
135
- }
136
- const sameDeletedNode = removedNodes.find(ref => {
137
- const n = ref.deref();
138
- if (!n || !addedNode) {
139
- return false;
206
+
207
+ // SSR placeholder logic - check and handle with await
208
+ if (this.getSSRPlaceholderHandler) {
209
+ const ssrPlaceholderHandler = this.getSSRPlaceholderHandler();
210
+ if (ssrPlaceholderHandler) {
211
+ if (ssrPlaceholderHandler.isPlaceholder(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode)) {
212
+ if (ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(addedNode)) {
213
+ var _this$intersectionObs10;
214
+ (_this$intersectionObs10 = this.intersectionObserver) === null || _this$intersectionObs10 === void 0 ? void 0 : _this$intersectionObs10.watchAndTag(addedNode, 'mutation:ssr-placeholder');
215
+ continue;
216
+ }
217
+ // If result is false, continue to normal mutation logic below
218
+ }
219
+ if (ssrPlaceholderHandler.isPlaceholderReplacement(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode)) {
220
+ const result = await ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(addedNode);
221
+ if (result !== false) {
222
+ var _this$intersectionObs11;
223
+ (_this$intersectionObs11 = this.intersectionObserver) === null || _this$intersectionObs11 === void 0 ? void 0 : _this$intersectionObs11.watchAndTag(addedNode, 'mutation:ssr-placeholder');
224
+ continue;
225
+ }
226
+ // If result is false, continue to normal mutation logic below
227
+ }
228
+ }
140
229
  }
141
- return n.isEqualNode(addedNode);
142
- });
143
- const isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(addedNode);
144
- if (sameDeletedNode && isInIgnoreLsMarker) {
145
- var _this$intersectionObs5;
146
- (_this$intersectionObs5 = this.intersectionObserver) === null || _this$intersectionObs5 === void 0 ? void 0 : _this$intersectionObs5.watchAndTag(addedNode, 'mutation:remount');
147
- continue;
148
- }
149
- if (isContainedWithinMediaWrapper(addedNode)) {
150
- var _this$intersectionObs6;
151
- (_this$intersectionObs6 = this.intersectionObserver) === null || _this$intersectionObs6 === void 0 ? void 0 : _this$intersectionObs6.watchAndTag(addedNode, 'mutation:media');
152
- continue;
153
- }
154
- const {
155
- isWithin: isWithinThirdPartySegment
156
- } = checkWithinComponent(addedNode, 'UFOThirdPartySegment', this.mapIs3pResult);
157
- if (isWithinThirdPartySegment) {
158
- var _this$intersectionObs7;
159
- (_this$intersectionObs7 = this.intersectionObserver) === null || _this$intersectionObs7 === void 0 ? void 0 : _this$intersectionObs7.watchAndTag(addedNode, 'mutation:third-party-element');
160
- continue;
161
- }
162
- for (const {
163
- isDisplayContentsElementChildren,
164
- element
165
- } of getMutatedElements(addedNode)) {
166
- if (isDisplayContentsElementChildren) {
167
- var _this$intersectionObs8;
168
- (_this$intersectionObs8 = this.intersectionObserver) === null || _this$intersectionObs8 === void 0 ? void 0 : _this$intersectionObs8.watchAndTag(element, 'mutation:display-contents-children-element');
169
- } else {
170
- var _this$intersectionObs9;
171
- (_this$intersectionObs9 = this.intersectionObserver) === null || _this$intersectionObs9 === void 0 ? void 0 : _this$intersectionObs9.watchAndTag(element, createElementMutationsWatcher(removedNodeRects));
230
+ const sameDeletedNode = removedNodes.find(ref => {
231
+ const n = ref.deref();
232
+ if (!n || !addedNode) {
233
+ return false;
234
+ }
235
+ return n.isEqualNode(addedNode);
236
+ });
237
+ const isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(addedNode);
238
+ if (sameDeletedNode && isInIgnoreLsMarker) {
239
+ var _this$intersectionObs12;
240
+ (_this$intersectionObs12 = this.intersectionObserver) === null || _this$intersectionObs12 === void 0 ? void 0 : _this$intersectionObs12.watchAndTag(addedNode, 'mutation:remount');
241
+ continue;
242
+ }
243
+ if (isContainedWithinMediaWrapper(addedNode)) {
244
+ var _this$intersectionObs13;
245
+ (_this$intersectionObs13 = this.intersectionObserver) === null || _this$intersectionObs13 === void 0 ? void 0 : _this$intersectionObs13.watchAndTag(addedNode, 'mutation:media');
246
+ continue;
247
+ }
248
+ const {
249
+ isWithin: isWithinThirdPartySegment
250
+ } = checkWithinComponent(addedNode, 'UFOThirdPartySegment', this.mapIs3pResult);
251
+ if (isWithinThirdPartySegment) {
252
+ var _this$intersectionObs14;
253
+ (_this$intersectionObs14 = this.intersectionObserver) === null || _this$intersectionObs14 === void 0 ? void 0 : _this$intersectionObs14.watchAndTag(addedNode, 'mutation:third-party-element');
254
+ continue;
255
+ }
256
+ for (const {
257
+ isDisplayContentsElementChildren,
258
+ element
259
+ } of getMutatedElements(addedNode)) {
260
+ if (isDisplayContentsElementChildren) {
261
+ var _this$intersectionObs15;
262
+ (_this$intersectionObs15 = this.intersectionObserver) === null || _this$intersectionObs15 === void 0 ? void 0 : _this$intersectionObs15.watchAndTag(element, 'mutation:display-contents-children-element');
263
+ } else {
264
+ var _this$intersectionObs16;
265
+ (_this$intersectionObs16 = this.intersectionObserver) === null || _this$intersectionObs16 === void 0 ? void 0 : _this$intersectionObs16.watchAndTag(element, createElementMutationsWatcher(removedNodeRects));
266
+ }
172
267
  }
173
268
  }
174
269
  }
@@ -179,8 +274,8 @@ export default class ViewportObserver {
179
274
  oldValue,
180
275
  newValue
181
276
  }) => {
182
- var _this$intersectionObs0;
183
- (_this$intersectionObs0 = this.intersectionObserver) === null || _this$intersectionObs0 === void 0 ? void 0 : _this$intersectionObs0.watchAndTag(target, ({
277
+ var _this$intersectionObs17;
278
+ (_this$intersectionObs17 = this.intersectionObserver) === null || _this$intersectionObs17 === void 0 ? void 0 : _this$intersectionObs17.watchAndTag(target, ({
184
279
  target,
185
280
  rect
186
281
  }) => {
@@ -322,12 +417,12 @@ export default class ViewportObserver {
322
417
  this.isStarted = true;
323
418
  }
324
419
  stop() {
325
- var _this$mutationObserve2, _this$intersectionObs1, _this$performanceObse2;
420
+ var _this$mutationObserve2, _this$intersectionObs18, _this$performanceObse2;
326
421
  if (!this.isStarted) {
327
422
  return;
328
423
  }
329
424
  (_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 ? void 0 : _this$mutationObserve2.disconnect();
330
- (_this$intersectionObs1 = this.intersectionObserver) === null || _this$intersectionObs1 === void 0 ? void 0 : _this$intersectionObs1.disconnect();
425
+ (_this$intersectionObs18 = this.intersectionObserver) === null || _this$intersectionObs18 === void 0 ? void 0 : _this$intersectionObs18.disconnect();
331
426
  (_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 ? void 0 : _this$performanceObse2.disconnect();
332
427
  this.isStarted = false;
333
428
  // Clean up caches when stopping