@atlaskit/react-ufo 4.15.15 → 4.15.17
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/assets/index.js +1 -1
- package/dist/cjs/config/index.js +12 -12
- package/dist/cjs/create-payload/utils/add-performance-measures.js +1 -1
- package/dist/cjs/create-payload/utils/get-navigation-metrics.js +1 -1
- package/dist/cjs/create-payload/utils/get-visibility-state-from-performance.js +1 -1
- package/dist/cjs/feature-flags-accessed/common/utils/index.js +2 -2
- package/dist/cjs/interaction-metrics/index.js +11 -11
- package/dist/cjs/machine-utilisation/index.js +2 -2
- package/dist/cjs/resource-timing/common/utils/config.js +1 -1
- package/dist/cjs/vc/index.js +3 -1
- package/dist/cjs/vc/vc-observer/getViewport.js +2 -2
- package/dist/cjs/vc/vc-observer/observers/index.js +2 -2
- package/dist/cjs/vc/vc-observer/observers/ssr-placeholders/index.js +2 -2
- package/dist/cjs/vc/vc-observer-new/get-element-name.js +1 -1
- package/dist/cjs/vc/vc-observer-new/get-unique-element-name.js +1 -1
- package/dist/cjs/vc/vc-observer-new/index.js +97 -19
- package/dist/cjs/vc/vc-observer-new/metric-calculator/{vcnext → fy26_04}/index.js +8 -14
- package/dist/cjs/vc/vc-observer-new/metric-calculator/utils/get-viewport-height.js +1 -1
- package/dist/cjs/vc/vc-observer-new/metric-calculator/utils/get-viewport-width.js +1 -1
- package/dist/cjs/vc/vc-observer-new/viewport-observer/index.js +60 -237
- package/dist/cjs/vc/vc-observer-new/viewport-observer/intersection-observer/index.js +28 -31
- package/dist/cjs/vc/vc-observer-new/viewport-observer/utils/is-element-visible.js +1 -1
- package/dist/es2019/assets/index.js +1 -1
- package/dist/es2019/config/index.js +11 -11
- package/dist/es2019/create-payload/utils/add-performance-measures.js +1 -1
- package/dist/es2019/create-payload/utils/get-battery-info.js +1 -1
- package/dist/es2019/create-payload/utils/get-navigation-metrics.js +1 -1
- package/dist/es2019/create-payload/utils/get-visibility-state-from-performance.js +1 -1
- package/dist/es2019/feature-flags-accessed/common/utils/index.js +2 -2
- package/dist/es2019/interaction-metrics/index.js +11 -11
- package/dist/es2019/machine-utilisation/index.js +1 -1
- package/dist/es2019/resource-timing/common/utils/config.js +1 -1
- package/dist/es2019/vc/index.js +3 -1
- package/dist/es2019/vc/vc-observer/getViewport.js +2 -2
- package/dist/es2019/vc/vc-observer/observers/index.js +2 -2
- package/dist/es2019/vc/vc-observer/observers/ssr-placeholders/index.js +2 -2
- package/dist/es2019/vc/vc-observer-new/get-element-name.js +1 -1
- package/dist/es2019/vc/vc-observer-new/get-unique-element-name.js +1 -1
- package/dist/es2019/vc/vc-observer-new/index.js +85 -38
- package/dist/es2019/vc/vc-observer-new/metric-calculator/{vcnext → fy26_04}/index.js +3 -10
- package/dist/es2019/vc/vc-observer-new/metric-calculator/utils/get-viewport-height.js +1 -1
- package/dist/es2019/vc/vc-observer-new/metric-calculator/utils/get-viewport-width.js +1 -1
- package/dist/es2019/vc/vc-observer-new/viewport-observer/index.js +17 -131
- package/dist/es2019/vc/vc-observer-new/viewport-observer/intersection-observer/index.js +19 -22
- package/dist/es2019/vc/vc-observer-new/viewport-observer/utils/is-element-visible.js +1 -1
- package/dist/esm/assets/index.js +1 -1
- package/dist/esm/config/index.js +12 -12
- package/dist/esm/create-payload/utils/add-performance-measures.js +1 -1
- package/dist/esm/create-payload/utils/get-navigation-metrics.js +1 -1
- package/dist/esm/create-payload/utils/get-visibility-state-from-performance.js +1 -1
- package/dist/esm/feature-flags-accessed/common/utils/index.js +2 -2
- package/dist/esm/interaction-metrics/index.js +11 -11
- package/dist/esm/machine-utilisation/index.js +2 -2
- package/dist/esm/resource-timing/common/utils/config.js +1 -1
- package/dist/esm/vc/index.js +3 -1
- package/dist/esm/vc/vc-observer/getViewport.js +2 -2
- package/dist/esm/vc/vc-observer/observers/index.js +2 -2
- package/dist/esm/vc/vc-observer/observers/ssr-placeholders/index.js +2 -2
- package/dist/esm/vc/vc-observer-new/get-element-name.js +1 -1
- package/dist/esm/vc/vc-observer-new/get-unique-element-name.js +1 -1
- package/dist/esm/vc/vc-observer-new/index.js +95 -17
- package/dist/esm/vc/vc-observer-new/metric-calculator/{vcnext → fy26_04}/index.js +9 -16
- package/dist/esm/vc/vc-observer-new/metric-calculator/utils/get-viewport-height.js +1 -1
- package/dist/esm/vc/vc-observer-new/metric-calculator/utils/get-viewport-width.js +1 -1
- package/dist/esm/vc/vc-observer-new/viewport-observer/index.js +60 -237
- package/dist/esm/vc/vc-observer-new/viewport-observer/intersection-observer/index.js +28 -31
- package/dist/esm/vc/vc-observer-new/viewport-observer/utils/is-element-visible.js +1 -1
- package/dist/types/config/index.d.ts +1 -1
- package/dist/{types-ts4.5/vc/vc-observer-new/metric-calculator/vcnext → types/vc/vc-observer-new/metric-calculator/fy26_04}/index.d.ts +1 -1
- package/dist/types-ts4.5/config/index.d.ts +1 -1
- package/dist/{types/vc/vc-observer-new/metric-calculator/vcnext → types-ts4.5/vc/vc-observer-new/metric-calculator/fy26_04}/index.d.ts +1 -1
- package/package.json +4 -4
|
@@ -172,7 +172,7 @@ export function addCustomTiming(interactionId, labelStack, data) {
|
|
|
172
172
|
}
|
|
173
173
|
}
|
|
174
174
|
});
|
|
175
|
-
} catch
|
|
175
|
+
} catch {
|
|
176
176
|
// do nothing
|
|
177
177
|
}
|
|
178
178
|
}
|
|
@@ -249,7 +249,7 @@ export function addSpan(interactionId, type, name, labelStack, start, end = perf
|
|
|
249
249
|
}
|
|
250
250
|
}
|
|
251
251
|
});
|
|
252
|
-
} catch
|
|
252
|
+
} catch {
|
|
253
253
|
// do nothing
|
|
254
254
|
}
|
|
255
255
|
}
|
|
@@ -279,7 +279,7 @@ export function addSpanToAll(type, name, labelStack, start, end = performance.no
|
|
|
279
279
|
}
|
|
280
280
|
}
|
|
281
281
|
});
|
|
282
|
-
} catch
|
|
282
|
+
} catch {
|
|
283
283
|
// do nothing
|
|
284
284
|
}
|
|
285
285
|
}
|
|
@@ -375,7 +375,7 @@ export function addHold(interactionId, labelStack, name, experimental) {
|
|
|
375
375
|
}
|
|
376
376
|
}
|
|
377
377
|
});
|
|
378
|
-
} catch
|
|
378
|
+
} catch {
|
|
379
379
|
// do nothing
|
|
380
380
|
}
|
|
381
381
|
}
|
|
@@ -571,7 +571,7 @@ export function addProfilerTimings(interactionId, labelStack, type, actualDurati
|
|
|
571
571
|
}
|
|
572
572
|
}
|
|
573
573
|
});
|
|
574
|
-
} catch
|
|
574
|
+
} catch {
|
|
575
575
|
// do nothing
|
|
576
576
|
}
|
|
577
577
|
}
|
|
@@ -625,7 +625,7 @@ function finishInteraction(id, data, endTime = performance.now()) {
|
|
|
625
625
|
}
|
|
626
626
|
}
|
|
627
627
|
});
|
|
628
|
-
} catch
|
|
628
|
+
} catch {
|
|
629
629
|
// do nothing
|
|
630
630
|
}
|
|
631
631
|
if (data.featureFlags) {
|
|
@@ -710,7 +710,7 @@ function finishInteraction(id, data, endTime = performance.now()) {
|
|
|
710
710
|
}
|
|
711
711
|
});
|
|
712
712
|
}
|
|
713
|
-
} catch
|
|
713
|
+
} catch {
|
|
714
714
|
// do nothing
|
|
715
715
|
}
|
|
716
716
|
}
|
|
@@ -719,7 +719,7 @@ function finishInteraction(id, data, endTime = performance.now()) {
|
|
|
719
719
|
window.dispatchEvent(new CustomEvent('UFO_FINISH_INTERACTION', {
|
|
720
720
|
detail: data
|
|
721
721
|
}));
|
|
722
|
-
} catch
|
|
722
|
+
} catch {
|
|
723
723
|
// do nothing
|
|
724
724
|
}
|
|
725
725
|
}
|
|
@@ -1091,7 +1091,7 @@ export function addApdexToAll(apdex) {
|
|
|
1091
1091
|
}
|
|
1092
1092
|
}
|
|
1093
1093
|
});
|
|
1094
|
-
} catch
|
|
1094
|
+
} catch {
|
|
1095
1095
|
// do nothing
|
|
1096
1096
|
}
|
|
1097
1097
|
if (interaction.type === 'page_load' || interaction.type === 'transition') {
|
|
@@ -1125,7 +1125,7 @@ export function addApdex(interactionId, apdexInfo) {
|
|
|
1125
1125
|
}
|
|
1126
1126
|
}
|
|
1127
1127
|
});
|
|
1128
|
-
} catch
|
|
1128
|
+
} catch {
|
|
1129
1129
|
// do nothing
|
|
1130
1130
|
}
|
|
1131
1131
|
if (interaction.type === 'page_load' || interaction.type === 'transition') {
|
|
@@ -1204,7 +1204,7 @@ export function addRedirect(interactionId, fromUfoName, nextUfoName, nextRouteNa
|
|
|
1204
1204
|
}
|
|
1205
1205
|
}
|
|
1206
1206
|
});
|
|
1207
|
-
} catch
|
|
1207
|
+
} catch {
|
|
1208
1208
|
// do nothing
|
|
1209
1209
|
}
|
|
1210
1210
|
}
|
package/dist/es2019/vc/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
var _process, _process$env;
|
|
2
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
3
|
import { isVCRevisionEnabled } from '../config';
|
|
3
4
|
import { VCObserverNOOP } from './no-op-vc-observer';
|
|
4
5
|
import { VCObserver } from './vc-observer';
|
|
@@ -15,7 +16,8 @@ export class VCObserverWrapper {
|
|
|
15
16
|
this.ssrPlaceholderHandler = new SSRPlaceholderHandlers({
|
|
16
17
|
enablePageLayoutPlaceholder: (_opts$ssrEnablePageLa = opts.ssrEnablePageLayoutPlaceholder) !== null && _opts$ssrEnablePageLa !== void 0 ? _opts$ssrEnablePageLa : false
|
|
17
18
|
});
|
|
18
|
-
|
|
19
|
+
const ttvcV4RevisionName = fg('platform_ufo_vcnext_to_fy26_04_revision_update') ? 'fy26.04' : 'next';
|
|
20
|
+
if (isVCRevisionEnabled('fy25.03') || isVCRevisionEnabled(ttvcV4RevisionName)) {
|
|
19
21
|
var _opts$ssrEnablePageLa2;
|
|
20
22
|
this.newVCObserver = new VCObserverNew({
|
|
21
23
|
selectorConfig: opts.selectorConfig,
|
|
@@ -2,7 +2,7 @@ export function getViewportWidth(document = window.document) {
|
|
|
2
2
|
let documentWidth;
|
|
3
3
|
try {
|
|
4
4
|
documentWidth = document.documentElement.clientWidth || 0;
|
|
5
|
-
} catch
|
|
5
|
+
} catch {
|
|
6
6
|
documentWidth = 0;
|
|
7
7
|
}
|
|
8
8
|
return Math.max(documentWidth, window.innerWidth || 0);
|
|
@@ -11,7 +11,7 @@ export function getViewportHeight(document = window.document) {
|
|
|
11
11
|
let documentHeight;
|
|
12
12
|
try {
|
|
13
13
|
documentHeight = document.documentElement.clientHeight || 0;
|
|
14
|
-
} catch
|
|
14
|
+
} catch {
|
|
15
15
|
documentHeight = 0;
|
|
16
16
|
}
|
|
17
17
|
return Math.max(documentHeight, window.innerHeight || 0);
|
|
@@ -225,7 +225,7 @@ export class Observers {
|
|
|
225
225
|
idString = [tagName, attrs || classList].join('');
|
|
226
226
|
}
|
|
227
227
|
return idString;
|
|
228
|
-
} catch
|
|
228
|
+
} catch {
|
|
229
229
|
return 'error';
|
|
230
230
|
}
|
|
231
231
|
}
|
|
@@ -260,7 +260,7 @@ export class Observers {
|
|
|
260
260
|
let elementName;
|
|
261
261
|
try {
|
|
262
262
|
elementName = this.getElementName(target);
|
|
263
|
-
} catch
|
|
263
|
+
} catch {
|
|
264
264
|
elementName = 'error';
|
|
265
265
|
}
|
|
266
266
|
callback(data.mutation.timestamp || performance.now(), ir, elementName, target, data.type, data.ignoreReason, data.attributeName, data.oldValue, data.newValue);
|
|
@@ -94,7 +94,7 @@ export class SSRPlaceholderHandlers {
|
|
|
94
94
|
try {
|
|
95
95
|
// Collect initial placeholders using SSR dimensions
|
|
96
96
|
this.collectPlaceholdersInternal();
|
|
97
|
-
} catch
|
|
97
|
+
} catch {} finally {
|
|
98
98
|
delete window.__SSR_PLACEHOLDERS_DIMENSIONS__;
|
|
99
99
|
}
|
|
100
100
|
}
|
|
@@ -154,7 +154,7 @@ export class SSRPlaceholderHandlers {
|
|
|
154
154
|
try {
|
|
155
155
|
// Collect placeholders using SSR dimensions or fallback to live dimensions
|
|
156
156
|
this.collectPlaceholdersInternal();
|
|
157
|
-
} catch
|
|
157
|
+
} catch {
|
|
158
158
|
// Silently fail if there are any issues
|
|
159
159
|
} finally {
|
|
160
160
|
delete window.__SSR_PLACEHOLDERS_DIMENSIONS__;
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
|
+
import { isVCRevisionEnabled } from '../../config';
|
|
3
4
|
import { getActiveInteraction } from '../../interaction-metrics';
|
|
4
5
|
import { SSRPlaceholderHandlers } from '../vc-observer/observers/ssr-placeholders';
|
|
5
6
|
import EntriesTimeline from './entries-timeline';
|
|
6
7
|
import getElementName from './get-element-name';
|
|
7
8
|
import VCCalculator_FY25_03 from './metric-calculator/fy25_03';
|
|
9
|
+
import VCCalculator_FY26_04 from './metric-calculator/fy26_04';
|
|
8
10
|
import getViewportHeight from './metric-calculator/utils/get-viewport-height';
|
|
9
11
|
import getViewportWidth from './metric-calculator/utils/get-viewport-width';
|
|
10
|
-
import VCNextCalculator from './metric-calculator/vcnext';
|
|
11
12
|
import RawDataHandler from './raw-data-handler';
|
|
12
13
|
import ViewportObserver from './viewport-observer';
|
|
13
14
|
import WindowEventObserver from './window-event-observer';
|
|
@@ -225,45 +226,91 @@ export default class VCObserverNew {
|
|
|
225
226
|
start,
|
|
226
227
|
stop
|
|
227
228
|
});
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
229
|
+
if (fg('platform_ufo_vcnext_to_fy26_04_revision_update')) {
|
|
230
|
+
const fy25_03 = isVCRevisionEnabled('fy25.03') ? await calculator_fy25_03.calculate({
|
|
231
|
+
orderedEntries,
|
|
232
|
+
startTime: start,
|
|
233
|
+
stopTime: stop,
|
|
234
|
+
interactionId,
|
|
235
|
+
interactionType,
|
|
236
|
+
isPostInteraction: this.isPostInteraction,
|
|
237
|
+
include3p,
|
|
238
|
+
excludeSmartAnswersInSearch,
|
|
239
|
+
includeSSRRatio,
|
|
240
|
+
isPageVisible,
|
|
241
|
+
interactionAbortReason
|
|
242
|
+
}) : null;
|
|
243
|
+
if (fy25_03) {
|
|
244
|
+
results.push(fy25_03);
|
|
245
|
+
}
|
|
244
246
|
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
247
|
+
// From TTVC v4 onwards, ensuring that SSR entry is always auto-added, whenever it is configured.
|
|
248
|
+
// From the next major version release (where TTVC v4 becomes the default TTVC version), the config for `includeSSRInV3` will be deprecated
|
|
249
|
+
if (param.ssr && !param.includeSSRInV3 && fg('platform_ufo_auto_add_ssr_entry_in_ttvc_v4')) {
|
|
250
|
+
this.addSSR(param.ssr);
|
|
251
|
+
}
|
|
252
|
+
const calculator_fy26_04 = new VCCalculator_FY26_04();
|
|
253
|
+
const fy26_04 = isVCRevisionEnabled('fy26.04') || isVCRevisionEnabled('next') ? await calculator_fy26_04.calculate({
|
|
254
|
+
orderedEntries,
|
|
255
|
+
startTime: start,
|
|
256
|
+
stopTime: stop,
|
|
257
|
+
interactionId,
|
|
258
|
+
interactionType,
|
|
259
|
+
isPostInteraction: this.isPostInteraction,
|
|
260
|
+
include3p,
|
|
261
|
+
includeSSRRatio,
|
|
262
|
+
isPageVisible,
|
|
263
|
+
interactionAbortReason
|
|
264
|
+
}) : null;
|
|
265
|
+
if (fy26_04) {
|
|
266
|
+
const vcNext = {
|
|
267
|
+
revision: 'next',
|
|
268
|
+
'metric:vc90': fy26_04['metric:vc90'],
|
|
269
|
+
clean: fy26_04['clean']
|
|
270
|
+
};
|
|
271
|
+
results.push(fy26_04);
|
|
272
|
+
results.push(vcNext);
|
|
273
|
+
}
|
|
274
|
+
} else {
|
|
275
|
+
const fy25_03 = await calculator_fy25_03.calculate({
|
|
276
|
+
orderedEntries,
|
|
277
|
+
startTime: start,
|
|
278
|
+
stopTime: stop,
|
|
279
|
+
interactionId,
|
|
280
|
+
interactionType,
|
|
281
|
+
isPostInteraction: this.isPostInteraction,
|
|
282
|
+
include3p,
|
|
283
|
+
excludeSmartAnswersInSearch,
|
|
284
|
+
includeSSRRatio,
|
|
285
|
+
isPageVisible,
|
|
286
|
+
interactionAbortReason
|
|
287
|
+
});
|
|
288
|
+
if (fy25_03) {
|
|
289
|
+
results.push(fy25_03);
|
|
290
|
+
}
|
|
250
291
|
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
292
|
+
// From TTVC v4 onwards, ensuring that SSR entry is always auto-added, whenever it is configured.
|
|
293
|
+
// From the next major version release (where TTVC v4 becomes the default TTVC version), the config for `includeSSRInV3` will be deprecated
|
|
294
|
+
if (param.ssr && !param.includeSSRInV3 && fg('platform_ufo_auto_add_ssr_entry_in_ttvc_v4')) {
|
|
295
|
+
this.addSSR(param.ssr);
|
|
296
|
+
}
|
|
297
|
+
const calculator_next = new VCCalculator_FY26_04();
|
|
298
|
+
const vcNext = await calculator_next.calculate({
|
|
299
|
+
orderedEntries,
|
|
300
|
+
startTime: start,
|
|
301
|
+
stopTime: stop,
|
|
302
|
+
interactionId,
|
|
303
|
+
interactionType,
|
|
304
|
+
isPostInteraction: this.isPostInteraction,
|
|
305
|
+
include3p,
|
|
306
|
+
includeSSRRatio,
|
|
307
|
+
isPageVisible,
|
|
308
|
+
interactionAbortReason
|
|
309
|
+
});
|
|
310
|
+
if (vcNext) {
|
|
311
|
+
vcNext.revision = 'next';
|
|
312
|
+
results.push(vcNext);
|
|
313
|
+
}
|
|
267
314
|
}
|
|
268
315
|
const feVCCalculationEndTime = performance.now();
|
|
269
316
|
if (includeRawData && fg('platform_ufo_enable_vc_raw_data')) {
|
|
@@ -1,17 +1,12 @@
|
|
|
1
1
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
2
|
import VCCalculator_FY25_03 from '../fy25_03';
|
|
3
3
|
import { KNOWN_ATTRIBUTES_THAT_DOES_NOT_CAUSE_LAYOUT_SHIFTS, NON_VISUAL_ARIA_ATTRIBUTES, THIRD_PARTY_BROWSER_EXTENSION_ATTRIBUTES } from '../utils/constants';
|
|
4
|
-
|
|
5
|
-
// NOTE: `next` to be renamed `fy26.04` once stable
|
|
6
|
-
const REVISION_NO = 'next';
|
|
7
4
|
const getConsideredEntryTypes = () => {
|
|
8
5
|
const consideredEntryTypes = ['mutation:display-contents-children-element'];
|
|
9
6
|
if (fg('platform_ufo_remove_ssr_placeholder_in_ttvc_v4')) {
|
|
10
7
|
consideredEntryTypes.push('mutation:ssr-placeholder');
|
|
11
8
|
}
|
|
12
|
-
|
|
13
|
-
consideredEntryTypes.push('mutation:display-contents-children-attribute');
|
|
14
|
-
}
|
|
9
|
+
consideredEntryTypes.push('mutation:display-contents-children-attribute');
|
|
15
10
|
return consideredEntryTypes;
|
|
16
11
|
};
|
|
17
12
|
const getExcludedEntryTypes = () => {
|
|
@@ -21,11 +16,9 @@ const getExcludedEntryTypes = () => {
|
|
|
21
16
|
}
|
|
22
17
|
return excludedEntryTypes;
|
|
23
18
|
};
|
|
24
|
-
|
|
25
|
-
// NOTE: `VCNext` to be renamed `FY26_04` once stable
|
|
26
|
-
export default class VCNextCalculator extends VCCalculator_FY25_03 {
|
|
19
|
+
export default class VCCalculator_FY26_04 extends VCCalculator_FY25_03 {
|
|
27
20
|
constructor() {
|
|
28
|
-
super(
|
|
21
|
+
super('fy26.04');
|
|
29
22
|
}
|
|
30
23
|
isEntryIncluded(entry, include3p) {
|
|
31
24
|
const isEntryIncludedInV3 = super.isEntryIncluded(entry, include3p);
|
|
@@ -8,31 +8,12 @@ import { createIntersectionObserver } from './intersection-observer';
|
|
|
8
8
|
import createMutationObserver from './mutation-observer';
|
|
9
9
|
import createPerformanceObserver from './performance-observer';
|
|
10
10
|
import checkWithinComponent, { cleanupCaches } from './utils/check-within-component';
|
|
11
|
-
import { getMutatedElements } from './utils/get-mutated-elements';
|
|
12
11
|
import { isElementVisible } from './utils/is-element-visible';
|
|
13
12
|
import isInVCIgnoreIfNoLayoutShiftMarker from './utils/is-in-vc-ignore-if-no-layout-shift-marker';
|
|
14
13
|
import { isInputNameMutation } from './utils/is-input-name-mutation';
|
|
15
14
|
import { isSameRectDimensions } from './utils/is-same-rect-dimensions';
|
|
16
15
|
import { isSameRectSize } from './utils/is-same-rect-size';
|
|
17
|
-
const createElementMutationsWatcher = removedNodeRects => ({
|
|
18
|
-
target,
|
|
19
|
-
rect
|
|
20
|
-
}) => {
|
|
21
|
-
const isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(target);
|
|
22
|
-
if (!isInIgnoreLsMarker) {
|
|
23
|
-
return 'mutation:element';
|
|
24
|
-
}
|
|
25
|
-
const isRLLPlaceholder = RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(rect);
|
|
26
|
-
if (isRLLPlaceholder && isInIgnoreLsMarker) {
|
|
27
|
-
return 'mutation:rll-placeholder';
|
|
28
|
-
}
|
|
29
|
-
const wasDeleted = removedNodeRects.some(nr => isSameRectDimensions(nr, rect));
|
|
30
|
-
if (wasDeleted && isInIgnoreLsMarker) {
|
|
31
|
-
return 'mutation:element-replacement';
|
|
32
|
-
}
|
|
33
|
-
return 'mutation:element';
|
|
34
|
-
};
|
|
35
|
-
const createElementMutationsWatcherV4 = (removedNodeRects, isWithinThirdPartySegment, hasSameDeletedNode, timestamp, isTargetReactRoot, getSSRState, getSSRPlaceholderHandler) => ({
|
|
16
|
+
const createElementMutationsWatcher = (removedNodeRects, isWithinThirdPartySegment, hasSameDeletedNode, timestamp, isTargetReactRoot, getSSRState, getSSRPlaceholderHandler) => ({
|
|
36
17
|
target,
|
|
37
18
|
rect
|
|
38
19
|
}) => {
|
|
@@ -139,118 +120,23 @@ export default class ViewportObserver {
|
|
|
139
120
|
});
|
|
140
121
|
const targetNode = target.deref();
|
|
141
122
|
for (const addedNodeRef of addedNodes) {
|
|
123
|
+
var _this$getSSRState, _this$getSSRState$cal, _this$intersectionObs;
|
|
142
124
|
const addedNode = addedNodeRef.deref();
|
|
143
125
|
if (!addedNode) {
|
|
144
126
|
continue;
|
|
145
127
|
}
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
if (!n || !addedNode) {
|
|
151
|
-
return false;
|
|
152
|
-
}
|
|
153
|
-
return n.isEqualNode(addedNode);
|
|
154
|
-
});
|
|
155
|
-
const {
|
|
156
|
-
isWithin: isWithinThirdPartySegment
|
|
157
|
-
} = checkWithinComponent(addedNode, 'UFOThirdPartySegment', this.mapIs3pResult);
|
|
158
|
-
const isTargetReactRoot = targetNode === ((_this$getSSRState = this.getSSRState) === null || _this$getSSRState === void 0 ? void 0 : (_this$getSSRState$cal = _this$getSSRState.call(this)) === null || _this$getSSRState$cal === void 0 ? void 0 : _this$getSSRState$cal.reactRootElement);
|
|
159
|
-
(_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.watchAndTag(addedNode, createElementMutationsWatcherV4(removedNodeRects, isWithinThirdPartySegment, !!hasSameDeletedNode, timestamp, isTargetReactRoot, this.getSSRState, this.getSSRPlaceholderHandler));
|
|
160
|
-
} else {
|
|
161
|
-
for (const {
|
|
162
|
-
isDisplayContentsElementChildren,
|
|
163
|
-
element
|
|
164
|
-
} of getMutatedElements(addedNode)) {
|
|
165
|
-
// SSR hydration logic
|
|
166
|
-
if (this.getSSRState) {
|
|
167
|
-
const ssrState = this.getSSRState();
|
|
168
|
-
const SSRStateEnum = {
|
|
169
|
-
normal: 1,
|
|
170
|
-
waitingForFirstRender: 2,
|
|
171
|
-
ignoring: 3
|
|
172
|
-
};
|
|
173
|
-
if (ssrState.state === SSRStateEnum.waitingForFirstRender && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement) {
|
|
174
|
-
var _this$intersectionObs2;
|
|
175
|
-
ssrState.state = SSRStateEnum.ignoring;
|
|
176
|
-
if (ssrState.renderStop === -1) {
|
|
177
|
-
// arbitrary 500ms DOM update window
|
|
178
|
-
ssrState.renderStop = timestamp + 500;
|
|
179
|
-
}
|
|
180
|
-
(_this$intersectionObs2 = this.intersectionObserver) === null || _this$intersectionObs2 === void 0 ? void 0 : _this$intersectionObs2.watchAndTag(element, 'ssr-hydration');
|
|
181
|
-
continue;
|
|
182
|
-
}
|
|
183
|
-
if (ssrState.state === SSRStateEnum.ignoring && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement) {
|
|
184
|
-
if (timestamp <= ssrState.renderStop) {
|
|
185
|
-
var _this$intersectionObs3;
|
|
186
|
-
(_this$intersectionObs3 = this.intersectionObserver) === null || _this$intersectionObs3 === void 0 ? void 0 : _this$intersectionObs3.watchAndTag(element, 'ssr-hydration');
|
|
187
|
-
continue;
|
|
188
|
-
} else {
|
|
189
|
-
ssrState.state = SSRStateEnum.normal;
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
// SSR placeholder logic - check and handle with await
|
|
195
|
-
if (this.getSSRPlaceholderHandler) {
|
|
196
|
-
const ssrPlaceholderHandler = this.getSSRPlaceholderHandler();
|
|
197
|
-
if (ssrPlaceholderHandler) {
|
|
198
|
-
if (ssrPlaceholderHandler.isPlaceholder(element) || ssrPlaceholderHandler.isPlaceholderIgnored(element)) {
|
|
199
|
-
if (ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(element)) {
|
|
200
|
-
var _this$intersectionObs4;
|
|
201
|
-
(_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.watchAndTag(element, 'mutation:ssr-placeholder');
|
|
202
|
-
continue;
|
|
203
|
-
}
|
|
204
|
-
// If result is false, continue to normal mutation logic below
|
|
205
|
-
}
|
|
206
|
-
if (ssrPlaceholderHandler.isPlaceholderReplacement(element) || ssrPlaceholderHandler.isPlaceholderIgnored(element)) {
|
|
207
|
-
const result = await ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(element);
|
|
208
|
-
if (result !== false) {
|
|
209
|
-
var _this$intersectionObs5;
|
|
210
|
-
(_this$intersectionObs5 = this.intersectionObserver) === null || _this$intersectionObs5 === void 0 ? void 0 : _this$intersectionObs5.watchAndTag(element, 'mutation:ssr-placeholder');
|
|
211
|
-
continue;
|
|
212
|
-
}
|
|
213
|
-
// If result is false, continue to normal mutation logic below
|
|
214
|
-
}
|
|
215
|
-
}
|
|
216
|
-
}
|
|
217
|
-
const sameDeletedNode = removedNodes.find(ref => {
|
|
218
|
-
const n = ref.deref();
|
|
219
|
-
if (!n || !element) {
|
|
220
|
-
return false;
|
|
221
|
-
}
|
|
222
|
-
return n.isEqualNode(element);
|
|
223
|
-
});
|
|
224
|
-
const isInIgnoreLsMarker = element instanceof HTMLElement ? isInVCIgnoreIfNoLayoutShiftMarker(element) : false;
|
|
225
|
-
if (sameDeletedNode && isInIgnoreLsMarker) {
|
|
226
|
-
var _this$intersectionObs6;
|
|
227
|
-
(_this$intersectionObs6 = this.intersectionObserver) === null || _this$intersectionObs6 === void 0 ? void 0 : _this$intersectionObs6.watchAndTag(element, 'mutation:remount');
|
|
228
|
-
continue;
|
|
229
|
-
}
|
|
230
|
-
if (isContainedWithinMediaWrapper(element)) {
|
|
231
|
-
var _this$intersectionObs7;
|
|
232
|
-
(_this$intersectionObs7 = this.intersectionObserver) === null || _this$intersectionObs7 === void 0 ? void 0 : _this$intersectionObs7.watchAndTag(element, 'mutation:media');
|
|
233
|
-
continue;
|
|
234
|
-
}
|
|
235
|
-
const {
|
|
236
|
-
isWithin: isWithinThirdPartySegment
|
|
237
|
-
} = element instanceof HTMLElement ? checkWithinComponent(element, 'UFOThirdPartySegment', this.mapIs3pResult) : {
|
|
238
|
-
isWithin: false
|
|
239
|
-
};
|
|
240
|
-
if (isWithinThirdPartySegment) {
|
|
241
|
-
var _this$intersectionObs8;
|
|
242
|
-
(_this$intersectionObs8 = this.intersectionObserver) === null || _this$intersectionObs8 === void 0 ? void 0 : _this$intersectionObs8.watchAndTag(element, 'mutation:third-party-element');
|
|
243
|
-
continue;
|
|
244
|
-
}
|
|
245
|
-
if (isDisplayContentsElementChildren) {
|
|
246
|
-
var _this$intersectionObs9;
|
|
247
|
-
(_this$intersectionObs9 = this.intersectionObserver) === null || _this$intersectionObs9 === void 0 ? void 0 : _this$intersectionObs9.watchAndTag(element, 'mutation:display-contents-children-element');
|
|
248
|
-
} else {
|
|
249
|
-
var _this$intersectionObs0;
|
|
250
|
-
(_this$intersectionObs0 = this.intersectionObserver) === null || _this$intersectionObs0 === void 0 ? void 0 : _this$intersectionObs0.watchAndTag(element, createElementMutationsWatcher(removedNodeRects));
|
|
251
|
-
}
|
|
128
|
+
const hasSameDeletedNode = removedNodes.find(ref => {
|
|
129
|
+
const n = ref.deref();
|
|
130
|
+
if (!n || !addedNode) {
|
|
131
|
+
return false;
|
|
252
132
|
}
|
|
253
|
-
|
|
133
|
+
return n.isEqualNode(addedNode);
|
|
134
|
+
});
|
|
135
|
+
const {
|
|
136
|
+
isWithin: isWithinThirdPartySegment
|
|
137
|
+
} = checkWithinComponent(addedNode, 'UFOThirdPartySegment', this.mapIs3pResult);
|
|
138
|
+
const isTargetReactRoot = targetNode === ((_this$getSSRState = this.getSSRState) === null || _this$getSSRState === void 0 ? void 0 : (_this$getSSRState$cal = _this$getSSRState.call(this)) === null || _this$getSSRState$cal === void 0 ? void 0 : _this$getSSRState$cal.reactRootElement);
|
|
139
|
+
(_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects, isWithinThirdPartySegment, !!hasSameDeletedNode, timestamp, isTargetReactRoot, this.getSSRState, this.getSSRPlaceholderHandler));
|
|
254
140
|
}
|
|
255
141
|
});
|
|
256
142
|
_defineProperty(this, "handleAttributeMutation", ({
|
|
@@ -259,8 +145,8 @@ export default class ViewportObserver {
|
|
|
259
145
|
oldValue,
|
|
260
146
|
newValue
|
|
261
147
|
}) => {
|
|
262
|
-
var _this$
|
|
263
|
-
(_this$
|
|
148
|
+
var _this$intersectionObs2;
|
|
149
|
+
(_this$intersectionObs2 = this.intersectionObserver) === null || _this$intersectionObs2 === void 0 ? void 0 : _this$intersectionObs2.watchAndTag(target, ({
|
|
264
150
|
target,
|
|
265
151
|
rect
|
|
266
152
|
}) => {
|
|
@@ -432,12 +318,12 @@ export default class ViewportObserver {
|
|
|
432
318
|
this.isStarted = true;
|
|
433
319
|
}
|
|
434
320
|
stop() {
|
|
435
|
-
var _this$mutationObserve2, _this$
|
|
321
|
+
var _this$mutationObserve2, _this$intersectionObs3, _this$performanceObse2;
|
|
436
322
|
if (!this.isStarted) {
|
|
437
323
|
return;
|
|
438
324
|
}
|
|
439
325
|
(_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 ? void 0 : _this$mutationObserve2.disconnect();
|
|
440
|
-
(_this$
|
|
326
|
+
(_this$intersectionObs3 = this.intersectionObserver) === null || _this$intersectionObs3 === void 0 ? void 0 : _this$intersectionObs3.disconnect();
|
|
441
327
|
(_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 ? void 0 : _this$performanceObse2.disconnect();
|
|
442
328
|
this.isStarted = false;
|
|
443
329
|
// Clean up caches when stopping
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
1
|
import { isZeroDimensionRectangle } from '../utils/is-zero-dimension-rectangle';
|
|
3
2
|
function isValidEntry(entry) {
|
|
4
3
|
return entry.isIntersecting && entry.intersectionRect.width > 0 && entry.intersectionRect.height > 0;
|
|
@@ -20,31 +19,29 @@ export function createIntersectionObserver({
|
|
|
20
19
|
return;
|
|
21
20
|
}
|
|
22
21
|
const tagOrCallback = callbacksPerElement.get(entry.target);
|
|
23
|
-
if (
|
|
24
|
-
|
|
25
|
-
const
|
|
26
|
-
const tagOrCallbackResult = typeof tagOrCallback === 'function' ? tagOrCallback(props) : tagOrCallback;
|
|
22
|
+
if (isZeroDimensionRectangle(entry.intersectionRect)) {
|
|
23
|
+
const zeroDimensionRectangleTagCallback = props => {
|
|
24
|
+
const tagOrCallbackResult = typeof tagOrCallback === 'function' ? tagOrCallback(props) : tagOrCallback;
|
|
27
25
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
26
|
+
// override as display-contents mutation
|
|
27
|
+
if (tagOrCallbackResult === 'mutation:element') {
|
|
28
|
+
return 'mutation:display-contents-children-element';
|
|
29
|
+
}
|
|
32
30
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
return tagOrCallbackResult;
|
|
41
|
-
};
|
|
42
|
-
for (const child of entry.target.children) {
|
|
43
|
-
observer.observe(child);
|
|
44
|
-
callbacksPerElement.set(child, zeroDimensionRectangleTagCallback);
|
|
31
|
+
// override as display-contents mutation
|
|
32
|
+
if (tagOrCallbackResult && typeof tagOrCallbackResult !== 'string' && tagOrCallbackResult.type === 'mutation:attribute') {
|
|
33
|
+
return {
|
|
34
|
+
type: 'mutation:display-contents-children-attribute',
|
|
35
|
+
mutationData: tagOrCallbackResult.mutationData
|
|
36
|
+
};
|
|
45
37
|
}
|
|
46
|
-
return;
|
|
38
|
+
return tagOrCallbackResult;
|
|
39
|
+
};
|
|
40
|
+
for (const child of entry.target.children) {
|
|
41
|
+
observer.observe(child);
|
|
42
|
+
callbacksPerElement.set(child, zeroDimensionRectangleTagCallback);
|
|
47
43
|
}
|
|
44
|
+
return;
|
|
48
45
|
}
|
|
49
46
|
if (!isValidEntry(entry)) {
|
|
50
47
|
return;
|