@atlaskit/react-ufo 4.1.13 → 4.2.0
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/interaction-metrics/index.js +1 -2
- package/dist/cjs/interaction-metrics-init/index.js +1 -2
- package/dist/cjs/vc/index.js +4 -12
- package/dist/cjs/vc/vc-observer/index.js +1 -3
- package/dist/cjs/vc/vc-observer/observers/index.js +2 -3
- package/dist/cjs/vc/vc-observer/observers/ssr-placeholders/index.js +3 -13
- package/dist/cjs/vc/vc-observer-new/index.js +2 -6
- package/dist/cjs/vc/vc-observer-new/viewport-observer/index.js +8 -14
- package/dist/cjs/vc/vc-observer-new/viewport-observer/utils/check-fiber-within-component.js +25 -0
- package/dist/cjs/vc/vc-observer-new/viewport-observer/utils/check-within-component.js +63 -0
- package/dist/cjs/vc/vc-observer-new/viewport-observer/utils/find-fiber-with-cache.js +28 -0
- package/dist/es2019/interaction-metrics/index.js +1 -2
- package/dist/es2019/interaction-metrics-init/index.js +1 -2
- package/dist/es2019/vc/index.js +4 -12
- package/dist/es2019/vc/vc-observer/index.js +1 -3
- package/dist/es2019/vc/vc-observer/observers/index.js +2 -3
- package/dist/es2019/vc/vc-observer/observers/ssr-placeholders/index.js +3 -12
- package/dist/es2019/vc/vc-observer-new/index.js +2 -6
- package/dist/es2019/vc/vc-observer-new/viewport-observer/index.js +6 -15
- package/dist/es2019/vc/vc-observer-new/viewport-observer/utils/check-fiber-within-component.js +19 -0
- package/dist/es2019/vc/vc-observer-new/viewport-observer/utils/check-within-component.js +55 -0
- package/dist/es2019/vc/vc-observer-new/viewport-observer/utils/find-fiber-with-cache.js +21 -0
- package/dist/esm/interaction-metrics/index.js +1 -2
- package/dist/esm/interaction-metrics-init/index.js +1 -2
- package/dist/esm/vc/index.js +4 -12
- package/dist/esm/vc/vc-observer/index.js +1 -3
- package/dist/esm/vc/vc-observer/observers/index.js +2 -3
- package/dist/esm/vc/vc-observer/observers/ssr-placeholders/index.js +3 -13
- package/dist/esm/vc/vc-observer-new/index.js +2 -6
- package/dist/esm/vc/vc-observer-new/viewport-observer/index.js +6 -14
- package/dist/esm/vc/vc-observer-new/viewport-observer/utils/check-fiber-within-component.js +19 -0
- package/dist/esm/vc/vc-observer-new/viewport-observer/utils/check-within-component.js +55 -0
- package/dist/esm/vc/vc-observer-new/viewport-observer/utils/find-fiber-with-cache.js +21 -0
- package/dist/types/config/index.d.ts +0 -4
- package/dist/types/vc/types.d.ts +0 -4
- package/dist/types/vc/vc-observer/observers/index.d.ts +0 -4
- package/dist/types/vc/vc-observer/observers/ssr-placeholders/index.d.ts +1 -7
- package/dist/types/vc/vc-observer-new/index.d.ts +0 -4
- package/dist/types/vc/vc-observer-new/viewport-observer/index.d.ts +1 -0
- package/dist/types/vc/vc-observer-new/viewport-observer/utils/check-fiber-within-component.d.ts +1 -0
- package/dist/types/vc/vc-observer-new/viewport-observer/utils/check-within-component.d.ts +4 -0
- package/dist/types/vc/vc-observer-new/viewport-observer/utils/find-fiber-with-cache.d.ts +1 -0
- package/dist/types-ts4.5/config/index.d.ts +0 -4
- package/dist/types-ts4.5/vc/types.d.ts +0 -4
- package/dist/types-ts4.5/vc/vc-observer/observers/index.d.ts +0 -4
- package/dist/types-ts4.5/vc/vc-observer/observers/ssr-placeholders/index.d.ts +1 -7
- package/dist/types-ts4.5/vc/vc-observer-new/index.d.ts +0 -4
- package/dist/types-ts4.5/vc/vc-observer-new/viewport-observer/index.d.ts +1 -0
- package/dist/types-ts4.5/vc/vc-observer-new/viewport-observer/utils/check-fiber-within-component.d.ts +1 -0
- package/dist/types-ts4.5/vc/vc-observer-new/viewport-observer/utils/check-within-component.d.ts +4 -0
- package/dist/types-ts4.5/vc/vc-observer-new/viewport-observer/utils/find-fiber-with-cache.d.ts +1 -0
- package/package.json +1 -1
- package/dist/cjs/vc/vc-observer-new/viewport-observer/utils/check-within-component-and-extract-child-props.js +0 -69
- package/dist/es2019/vc/vc-observer-new/viewport-observer/utils/check-within-component-and-extract-child-props.js +0 -60
- package/dist/esm/vc/vc-observer-new/viewport-observer/utils/check-within-component-and-extract-child-props.js +0 -62
- package/dist/types/vc/vc-observer-new/viewport-observer/utils/check-within-component-and-extract-child-props.d.ts +0 -8
- package/dist/types-ts4.5/vc/vc-observer-new/viewport-observer/utils/check-within-component-and-extract-child-props.d.ts +0 -8
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import findReactFiber from './find-react-fiber';
|
|
2
|
+
export default function findFiberWithCache(element, maxLevel, checkedNodes) {
|
|
3
|
+
// Stop when no more levels to traverse
|
|
4
|
+
if (maxLevel <= 0) {
|
|
5
|
+
return null;
|
|
6
|
+
}
|
|
7
|
+
checkedNodes.push(element);
|
|
8
|
+
const fiber = findReactFiber(element);
|
|
9
|
+
if (fiber) {
|
|
10
|
+
return fiber;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
// Walk up the DOM tree to find the fiber
|
|
14
|
+
const parent = element.parentElement;
|
|
15
|
+
if (!parent) {
|
|
16
|
+
return null;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
// Recursively check parent
|
|
20
|
+
return findFiberWithCache(parent, maxLevel - 1, checkedNodes);
|
|
21
|
+
}
|
|
@@ -888,8 +888,7 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
|
|
|
888
888
|
oldDomUpdates: config.vc.oldDomUpdates,
|
|
889
889
|
devToolsEnabled: config.vc.devToolsEnabled,
|
|
890
890
|
selectorConfig: config.vc.selectorConfig,
|
|
891
|
-
ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder
|
|
892
|
-
disableSizeAndPositionCheck: config.vc.disableSizeAndPositionCheck
|
|
891
|
+
ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder
|
|
893
892
|
};
|
|
894
893
|
vcObserver = newVCObserver(vcOptions);
|
|
895
894
|
}
|
|
@@ -86,8 +86,7 @@ export function init(analyticsWebClientAsync, config) {
|
|
|
86
86
|
oldDomUpdates: config.vc.oldDomUpdates,
|
|
87
87
|
devToolsEnabled: config.vc.devToolsEnabled,
|
|
88
88
|
selectorConfig: config.vc.selectorConfig,
|
|
89
|
-
ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder
|
|
90
|
-
disableSizeAndPositionCheck: config.vc.disableSizeAndPositionCheck
|
|
89
|
+
ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder
|
|
91
90
|
};
|
|
92
91
|
postInteractionLog.initializeVCObserver(vcOptions);
|
|
93
92
|
if (config !== null && config !== void 0 && (_config$experimentalI = config.experimentalInteractionMetrics) !== null && _config$experimentalI !== void 0 && _config$experimentalI.enabled) {
|
package/dist/esm/vc/index.js
CHANGED
|
@@ -15,7 +15,7 @@ import { RLLPlaceholderHandlers } from './vc-observer/observers/rll-placeholders
|
|
|
15
15
|
import { SSRPlaceholderHandlers } from './vc-observer/observers/ssr-placeholders';
|
|
16
16
|
export var VCObserverWrapper = /*#__PURE__*/function () {
|
|
17
17
|
function VCObserverWrapper() {
|
|
18
|
-
var _opts$ssrEnablePageLa
|
|
18
|
+
var _opts$ssrEnablePageLa;
|
|
19
19
|
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
20
20
|
_classCallCheck(this, VCObserverWrapper);
|
|
21
21
|
this.newVCObserver = null;
|
|
@@ -23,23 +23,15 @@ export var VCObserverWrapper = /*#__PURE__*/function () {
|
|
|
23
23
|
|
|
24
24
|
// Initialize SSR placeholder handler once
|
|
25
25
|
this.ssrPlaceholderHandler = new SSRPlaceholderHandlers({
|
|
26
|
-
enablePageLayoutPlaceholder: (_opts$ssrEnablePageLa = opts.ssrEnablePageLayoutPlaceholder) !== null && _opts$ssrEnablePageLa !== void 0 ? _opts$ssrEnablePageLa : false
|
|
27
|
-
disableSizeAndPositionCheck: (_opts$disableSizeAndP = opts.disableSizeAndPositionCheck) !== null && _opts$disableSizeAndP !== void 0 ? _opts$disableSizeAndP : {
|
|
28
|
-
v: false,
|
|
29
|
-
h: false
|
|
30
|
-
}
|
|
26
|
+
enablePageLayoutPlaceholder: (_opts$ssrEnablePageLa = opts.ssrEnablePageLayoutPlaceholder) !== null && _opts$ssrEnablePageLa !== void 0 ? _opts$ssrEnablePageLa : false
|
|
31
27
|
});
|
|
32
28
|
if (isVCRevisionEnabled('fy25.03')) {
|
|
33
|
-
var _opts$ssrEnablePageLa2
|
|
29
|
+
var _opts$ssrEnablePageLa2;
|
|
34
30
|
this.newVCObserver = new VCObserverNew({
|
|
35
31
|
selectorConfig: opts.selectorConfig,
|
|
36
32
|
isPostInteraction: opts.isPostInteraction,
|
|
37
33
|
SSRConfig: {
|
|
38
|
-
enablePageLayoutPlaceholder: (_opts$ssrEnablePageLa2 = opts.ssrEnablePageLayoutPlaceholder) !== null && _opts$ssrEnablePageLa2 !== void 0 ? _opts$ssrEnablePageLa2 : false
|
|
39
|
-
disableSizeAndPositionCheck: (_opts$disableSizeAndP2 = opts.disableSizeAndPositionCheck) !== null && _opts$disableSizeAndP2 !== void 0 ? _opts$disableSizeAndP2 : {
|
|
40
|
-
v: false,
|
|
41
|
-
h: false
|
|
42
|
-
}
|
|
34
|
+
enablePageLayoutPlaceholder: (_opts$ssrEnablePageLa2 = opts.ssrEnablePageLayoutPlaceholder) !== null && _opts$ssrEnablePageLa2 !== void 0 ? _opts$ssrEnablePageLa2 : false
|
|
43
35
|
},
|
|
44
36
|
ssrPlaceholderHandler: this.ssrPlaceholderHandler
|
|
45
37
|
});
|
|
@@ -454,7 +454,6 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
454
454
|
this.devToolsEnabled = options.devToolsEnabled || false;
|
|
455
455
|
this.oldDomUpdatesEnabled = options.oldDomUpdates || false;
|
|
456
456
|
var ssrEnablePageLayoutPlaceholder = options.ssrEnablePageLayoutPlaceholder,
|
|
457
|
-
disableSizeAndPositionCheck = options.disableSizeAndPositionCheck,
|
|
458
457
|
ssrPlaceholderHandler = options.ssrPlaceholderHandler;
|
|
459
458
|
this.observers = new Observers({
|
|
460
459
|
selectorConfig: options.selectorConfig || {
|
|
@@ -465,8 +464,7 @@ export var VCObserver = /*#__PURE__*/function () {
|
|
|
465
464
|
dataVC: true
|
|
466
465
|
},
|
|
467
466
|
SSRConfig: {
|
|
468
|
-
enablePageLayoutPlaceholder: ssrEnablePageLayoutPlaceholder || false
|
|
469
|
-
disableSizeAndPositionCheck: disableSizeAndPositionCheck
|
|
467
|
+
enablePageLayoutPlaceholder: ssrEnablePageLayoutPlaceholder || false
|
|
470
468
|
},
|
|
471
469
|
ssrPlaceholderHandler: ssrPlaceholderHandler
|
|
472
470
|
});
|
|
@@ -70,10 +70,9 @@ export var Observers = /*#__PURE__*/function () {
|
|
|
70
70
|
if (opts.ssrPlaceholderHandler) {
|
|
71
71
|
this.ssrPlaceholderHandler = opts.ssrPlaceholderHandler;
|
|
72
72
|
} else {
|
|
73
|
-
var _opts$SSRConfig
|
|
73
|
+
var _opts$SSRConfig;
|
|
74
74
|
this.ssrPlaceholderHandler = new SSRPlaceholderHandlers({
|
|
75
|
-
enablePageLayoutPlaceholder: (_opts$SSRConfig = opts.SSRConfig) === null || _opts$SSRConfig === void 0 ? void 0 : _opts$SSRConfig.enablePageLayoutPlaceholder
|
|
76
|
-
disableSizeAndPositionCheck: (_opts$SSRConfig2 = opts.SSRConfig) === null || _opts$SSRConfig2 === void 0 ? void 0 : _opts$SSRConfig2.disableSizeAndPositionCheck
|
|
75
|
+
enablePageLayoutPlaceholder: (_opts$SSRConfig = opts.SSRConfig) === null || _opts$SSRConfig === void 0 ? void 0 : _opts$SSRConfig.enablePageLayoutPlaceholder
|
|
77
76
|
});
|
|
78
77
|
}
|
|
79
78
|
}
|
|
@@ -7,12 +7,7 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
|
|
|
7
7
|
function SSRPlaceholderHandlers(_ref) {
|
|
8
8
|
var _this = this;
|
|
9
9
|
var _ref$enablePageLayout = _ref.enablePageLayoutPlaceholder,
|
|
10
|
-
enablePageLayoutPlaceholder = _ref$enablePageLayout === void 0 ? false : _ref$enablePageLayout
|
|
11
|
-
_ref$disableSizeAndPo = _ref.disableSizeAndPositionCheck,
|
|
12
|
-
disableSizeAndPositionCheck = _ref$disableSizeAndPo === void 0 ? {
|
|
13
|
-
v: false,
|
|
14
|
-
h: false
|
|
15
|
-
} : _ref$disableSizeAndPo;
|
|
10
|
+
enablePageLayoutPlaceholder = _ref$enablePageLayout === void 0 ? false : _ref$enablePageLayout;
|
|
16
11
|
_classCallCheck(this, SSRPlaceholderHandlers);
|
|
17
12
|
_defineProperty(this, "staticPlaceholders", new Map());
|
|
18
13
|
_defineProperty(this, "callbacks", new Map());
|
|
@@ -101,7 +96,6 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
|
|
|
101
96
|
});
|
|
102
97
|
}
|
|
103
98
|
this.enablePageLayoutPlaceholder = enablePageLayoutPlaceholder;
|
|
104
|
-
this.disableSizeAndPositionCheck = disableSizeAndPositionCheck;
|
|
105
99
|
if (window.document) {
|
|
106
100
|
try {
|
|
107
101
|
// Collect initial placeholders using SSR dimensions
|
|
@@ -259,15 +253,11 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
|
|
|
259
253
|
}, {
|
|
260
254
|
key: "hasSameSizePosition",
|
|
261
255
|
value: function hasSameSizePosition(rect, boundingClientRect) {
|
|
262
|
-
var _this$disableSizeAndP, _this$disableSizeAndP2;
|
|
263
|
-
if ((_this$disableSizeAndP = this.disableSizeAndPositionCheck) !== null && _this$disableSizeAndP !== void 0 && _this$disableSizeAndP.v && (_this$disableSizeAndP2 = this.disableSizeAndPositionCheck) !== null && _this$disableSizeAndP2 !== void 0 && _this$disableSizeAndP2.h) {
|
|
264
|
-
return true;
|
|
265
|
-
}
|
|
266
256
|
if (!rect) {
|
|
267
257
|
return false;
|
|
268
258
|
}
|
|
269
|
-
var horizontalCheck =
|
|
270
|
-
var verticalCheck =
|
|
259
|
+
var horizontalCheck = Math.abs(rect.x - boundingClientRect.x) < this.EQUALITY_THRESHOLD && Math.abs(rect.width - boundingClientRect.width) < this.EQUALITY_THRESHOLD;
|
|
260
|
+
var verticalCheck = Math.abs(rect.y - boundingClientRect.y) < this.EQUALITY_THRESHOLD && Math.abs(rect.height - boundingClientRect.height) < this.EQUALITY_THRESHOLD;
|
|
271
261
|
return horizontalCheck && verticalCheck || false;
|
|
272
262
|
}
|
|
273
263
|
}, {
|
|
@@ -49,13 +49,9 @@ var VCObserverNew = /*#__PURE__*/function () {
|
|
|
49
49
|
if (config.ssrPlaceholderHandler) {
|
|
50
50
|
this.ssrPlaceholderHandler = config.ssrPlaceholderHandler;
|
|
51
51
|
} else {
|
|
52
|
-
var _config$SSRConfig$ena, _config$SSRConfig
|
|
52
|
+
var _config$SSRConfig$ena, _config$SSRConfig;
|
|
53
53
|
this.ssrPlaceholderHandler = new SSRPlaceholderHandlers({
|
|
54
|
-
enablePageLayoutPlaceholder: (_config$SSRConfig$ena = (_config$SSRConfig = config.SSRConfig) === null || _config$SSRConfig === void 0 ? void 0 : _config$SSRConfig.enablePageLayoutPlaceholder) !== null && _config$SSRConfig$ena !== void 0 ? _config$SSRConfig$ena : false
|
|
55
|
-
disableSizeAndPositionCheck: (_config$SSRConfig$dis = (_config$SSRConfig2 = config.SSRConfig) === null || _config$SSRConfig2 === void 0 ? void 0 : _config$SSRConfig2.disableSizeAndPositionCheck) !== null && _config$SSRConfig$dis !== void 0 ? _config$SSRConfig$dis : {
|
|
56
|
-
v: false,
|
|
57
|
-
h: false
|
|
58
|
-
}
|
|
54
|
+
enablePageLayoutPlaceholder: (_config$SSRConfig$ena = (_config$SSRConfig = config.SSRConfig) === null || _config$SSRConfig === void 0 ? void 0 : _config$SSRConfig.enablePageLayoutPlaceholder) !== null && _config$SSRConfig$ena !== void 0 ? _config$SSRConfig$ena : false
|
|
59
55
|
});
|
|
60
56
|
}
|
|
61
57
|
this.viewportObserver = new ViewportObserver({
|
|
@@ -12,7 +12,7 @@ import { RLLPlaceholderHandlers } from '../../vc-observer/observers/rll-placehol
|
|
|
12
12
|
import { createIntersectionObserver } from './intersection-observer';
|
|
13
13
|
import createMutationObserver from './mutation-observer';
|
|
14
14
|
import createPerformanceObserver from './performance-observer';
|
|
15
|
-
import
|
|
15
|
+
import checkWithinComponent, { cleanupCaches } from './utils/check-within-component';
|
|
16
16
|
import isInVCIgnoreIfNoLayoutShiftMarker from './utils/is-in-vc-ignore-if-no-layout-shift-marker';
|
|
17
17
|
function isElementVisible(element) {
|
|
18
18
|
if (!(element instanceof HTMLElement)) {
|
|
@@ -222,7 +222,7 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
222
222
|
(_this$intersectionObs6 = _this.intersectionObserver) === null || _this$intersectionObs6 === void 0 || _this$intersectionObs6.watchAndTag(addedNode, 'mutation:media');
|
|
223
223
|
return _context.abrupt("return", 0);
|
|
224
224
|
case 44:
|
|
225
|
-
_checkWithinComponent =
|
|
225
|
+
_checkWithinComponent = checkWithinComponent(addedNode, 'UFOThirdPartySegment', _this.mapIs3pResult), isWithinThirdPartySegment = _checkWithinComponent.isWithin;
|
|
226
226
|
if (!isWithinThirdPartySegment) {
|
|
227
227
|
_context.next = 48;
|
|
228
228
|
break;
|
|
@@ -319,18 +319,6 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
319
319
|
}
|
|
320
320
|
};
|
|
321
321
|
}
|
|
322
|
-
var _checkWithinComponent2 = checkWithinComponentAndExtractChildProps(target, 'UFOThirdPartySegment'),
|
|
323
|
-
isWithinThirdPartySegment = _checkWithinComponent2.isWithin;
|
|
324
|
-
if (isWithinThirdPartySegment) {
|
|
325
|
-
return {
|
|
326
|
-
type: 'mutation:third-party-element',
|
|
327
|
-
mutationData: {
|
|
328
|
-
attributeName: attributeName,
|
|
329
|
-
oldValue: oldValue,
|
|
330
|
-
newValue: newValue
|
|
331
|
-
}
|
|
332
|
-
};
|
|
333
|
-
}
|
|
334
322
|
var lastElementRect = _this.mapVisibleNodeRects.get(target);
|
|
335
323
|
if (lastElementRect && sameRectSize(rect, lastElementRect)) {
|
|
336
324
|
return {
|
|
@@ -351,6 +339,7 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
351
339
|
}
|
|
352
340
|
};
|
|
353
341
|
});
|
|
342
|
+
// }
|
|
354
343
|
});
|
|
355
344
|
_defineProperty(this, "handleLayoutShift", function (_ref8) {
|
|
356
345
|
var time = _ref8.time,
|
|
@@ -379,6 +368,7 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
379
368
|
}
|
|
380
369
|
});
|
|
381
370
|
this.mapVisibleNodeRects = new WeakMap();
|
|
371
|
+
this.mapIs3pResult = new WeakMap();
|
|
382
372
|
this.onChange = onChange;
|
|
383
373
|
this.isStarted = false;
|
|
384
374
|
this.intersectionObserver = null;
|
|
@@ -439,6 +429,8 @@ var ViewportObserver = /*#__PURE__*/function () {
|
|
|
439
429
|
(_this$intersectionObs0 = this.intersectionObserver) === null || _this$intersectionObs0 === void 0 || _this$intersectionObs0.disconnect();
|
|
440
430
|
(_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 || _this$performanceObse2.disconnect();
|
|
441
431
|
this.isStarted = false;
|
|
432
|
+
// Clean up caches when stopping
|
|
433
|
+
cleanupCaches(this.mapIs3pResult);
|
|
442
434
|
}
|
|
443
435
|
}]);
|
|
444
436
|
}();
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import getComponentName from './get-component-name';
|
|
2
|
+
|
|
3
|
+
// Helper to check fiber within component
|
|
4
|
+
export default function checkFiberWithinComponent(fiber, targetComponentName, maxLevel) {
|
|
5
|
+
// Stop when no more levels to traverse
|
|
6
|
+
if (maxLevel <= 0) {
|
|
7
|
+
return false;
|
|
8
|
+
}
|
|
9
|
+
if (!fiber) {
|
|
10
|
+
return false;
|
|
11
|
+
}
|
|
12
|
+
var componentName = getComponentName(fiber);
|
|
13
|
+
if (componentName === targetComponentName) {
|
|
14
|
+
return true;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
// Recursively traverse up the fiber tree
|
|
18
|
+
return checkFiberWithinComponent(fiber.return, targetComponentName, maxLevel - 1);
|
|
19
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
|
+
import coinflip from '../../../../coinflip';
|
|
3
|
+
import checkFiberWithinComponent from './check-fiber-within-component';
|
|
4
|
+
import findFiberWithCache from './find-fiber-with-cache';
|
|
5
|
+
import findReactFiber from './find-react-fiber';
|
|
6
|
+
var DEFAULT_MAX_LEVEL = 20;
|
|
7
|
+
|
|
8
|
+
// Cache cleanup
|
|
9
|
+
var callCount = 0;
|
|
10
|
+
var CLEANUP_THRESHOLD = 50;
|
|
11
|
+
function maybeCleanup(resultCache) {
|
|
12
|
+
callCount++;
|
|
13
|
+
if (callCount >= CLEANUP_THRESHOLD && coinflip(0.3)) {
|
|
14
|
+
cleanupCaches(resultCache);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
export function cleanupCaches(resultCache) {
|
|
18
|
+
resultCache = new WeakMap();
|
|
19
|
+
callCount = 0;
|
|
20
|
+
}
|
|
21
|
+
export default function checkWithinComponent(node, targetComponentName, resultCache) {
|
|
22
|
+
maybeCleanup(resultCache);
|
|
23
|
+
if (resultCache.has(node)) {
|
|
24
|
+
var _resultCache$get;
|
|
25
|
+
return {
|
|
26
|
+
isWithin: (_resultCache$get = resultCache.get(node)) !== null && _resultCache$get !== void 0 ? _resultCache$get : false
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
var fiber = null;
|
|
30
|
+
var checkedNodes = [];
|
|
31
|
+
if (fg('platform_ufo_handle_non_react_element_for_3p')) {
|
|
32
|
+
fiber = findFiberWithCache(node, DEFAULT_MAX_LEVEL, checkedNodes);
|
|
33
|
+
} else {
|
|
34
|
+
fiber = findReactFiber(node);
|
|
35
|
+
}
|
|
36
|
+
if (!fiber) {
|
|
37
|
+
if (fg('platform_ufo_handle_non_react_element_for_3p')) {
|
|
38
|
+
checkedNodes.forEach(function (checkedNode) {
|
|
39
|
+
resultCache.set(checkedNode, false);
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
return {
|
|
43
|
+
isWithin: false
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
var isWithin = checkFiberWithinComponent(fiber, targetComponentName, DEFAULT_MAX_LEVEL);
|
|
47
|
+
if (fg('platform_ufo_handle_non_react_element_for_3p')) {
|
|
48
|
+
checkedNodes.forEach(function (checkedNode) {
|
|
49
|
+
resultCache.set(checkedNode, isWithin);
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
return {
|
|
53
|
+
isWithin: isWithin
|
|
54
|
+
};
|
|
55
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import findReactFiber from './find-react-fiber';
|
|
2
|
+
export default function findFiberWithCache(element, maxLevel, checkedNodes) {
|
|
3
|
+
// Stop when no more levels to traverse
|
|
4
|
+
if (maxLevel <= 0) {
|
|
5
|
+
return null;
|
|
6
|
+
}
|
|
7
|
+
checkedNodes.push(element);
|
|
8
|
+
var fiber = findReactFiber(element);
|
|
9
|
+
if (fiber) {
|
|
10
|
+
return fiber;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
// Walk up the DOM tree to find the fiber
|
|
14
|
+
var parent = element.parentElement;
|
|
15
|
+
if (!parent) {
|
|
16
|
+
return null;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
// Recursively check parent
|
|
20
|
+
return findFiberWithCache(parent, maxLevel - 1, checkedNodes);
|
|
21
|
+
}
|
|
@@ -77,10 +77,6 @@ export type Config = {
|
|
|
77
77
|
readonly ssr?: boolean;
|
|
78
78
|
readonly ssrWhitelist?: string[];
|
|
79
79
|
readonly ssrEnablePageLayoutPlaceholder?: boolean;
|
|
80
|
-
readonly disableSizeAndPositionCheck?: {
|
|
81
|
-
v: boolean;
|
|
82
|
-
h: boolean;
|
|
83
|
-
};
|
|
84
80
|
readonly includeSSRInV3?: boolean;
|
|
85
81
|
readonly stopVCAtInteractionFinish?: boolean;
|
|
86
82
|
readonly includeSSRRatio?: boolean;
|
package/dist/types/vc/types.d.ts
CHANGED
|
@@ -26,10 +26,6 @@ export type VCObserverOptions = {
|
|
|
26
26
|
selectorConfig?: SelectorConfig | undefined;
|
|
27
27
|
isPostInteraction?: boolean;
|
|
28
28
|
ssrEnablePageLayoutPlaceholder?: boolean;
|
|
29
|
-
disableSizeAndPositionCheck?: {
|
|
30
|
-
v: boolean;
|
|
31
|
-
h: boolean;
|
|
32
|
-
};
|
|
33
29
|
ssrPlaceholderHandler?: any;
|
|
34
30
|
};
|
|
35
31
|
export interface VCObserverInterface {
|
|
@@ -12,10 +12,6 @@ type ConstructorOptions = {
|
|
|
12
12
|
selectorConfig: SelectorConfig;
|
|
13
13
|
SSRConfig?: {
|
|
14
14
|
enablePageLayoutPlaceholder: boolean;
|
|
15
|
-
disableSizeAndPositionCheck?: {
|
|
16
|
-
v: boolean;
|
|
17
|
-
h: boolean;
|
|
18
|
-
};
|
|
19
15
|
};
|
|
20
16
|
ssrPlaceholderHandler?: SSRPlaceholderHandlers | null;
|
|
21
17
|
};
|
|
@@ -4,13 +4,8 @@ type Rect = {
|
|
|
4
4
|
width: number;
|
|
5
5
|
height: number;
|
|
6
6
|
};
|
|
7
|
-
type DisableSizeAndPositionCheckType = {
|
|
8
|
-
v: boolean;
|
|
9
|
-
h: boolean;
|
|
10
|
-
};
|
|
11
7
|
type SSRPlaceholderHandlersConfig = {
|
|
12
8
|
enablePageLayoutPlaceholder?: boolean;
|
|
13
|
-
disableSizeAndPositionCheck?: DisableSizeAndPositionCheckType;
|
|
14
9
|
};
|
|
15
10
|
export declare class SSRPlaceholderHandlers {
|
|
16
11
|
private staticPlaceholders;
|
|
@@ -20,8 +15,7 @@ export declare class SSRPlaceholderHandlers {
|
|
|
20
15
|
private intersectionObserver;
|
|
21
16
|
private EQUALITY_THRESHOLD;
|
|
22
17
|
private enablePageLayoutPlaceholder;
|
|
23
|
-
|
|
24
|
-
constructor({ enablePageLayoutPlaceholder, disableSizeAndPositionCheck, }: SSRPlaceholderHandlersConfig);
|
|
18
|
+
constructor({ enablePageLayoutPlaceholder, }: SSRPlaceholderHandlersConfig);
|
|
25
19
|
private getPlaceholderId;
|
|
26
20
|
private getPlaceholderReplacementId;
|
|
27
21
|
clear(): void;
|
|
@@ -7,10 +7,6 @@ export type VCObserverNewConfig = {
|
|
|
7
7
|
isPostInteraction?: boolean;
|
|
8
8
|
SSRConfig?: {
|
|
9
9
|
enablePageLayoutPlaceholder?: boolean;
|
|
10
|
-
disableSizeAndPositionCheck?: {
|
|
11
|
-
v: boolean;
|
|
12
|
-
h: boolean;
|
|
13
|
-
};
|
|
14
10
|
};
|
|
15
11
|
ssrPlaceholderHandler?: SSRPlaceholderHandlers | null;
|
|
16
12
|
};
|
package/dist/types/vc/vc-observer-new/viewport-observer/utils/check-fiber-within-component.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function checkFiberWithinComponent(fiber: any, targetComponentName: string, maxLevel: number): boolean;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function findFiberWithCache(element: HTMLElement, maxLevel: number, checkedNodes: HTMLElement[]): any | null;
|
|
@@ -77,10 +77,6 @@ export type Config = {
|
|
|
77
77
|
readonly ssr?: boolean;
|
|
78
78
|
readonly ssrWhitelist?: string[];
|
|
79
79
|
readonly ssrEnablePageLayoutPlaceholder?: boolean;
|
|
80
|
-
readonly disableSizeAndPositionCheck?: {
|
|
81
|
-
v: boolean;
|
|
82
|
-
h: boolean;
|
|
83
|
-
};
|
|
84
80
|
readonly includeSSRInV3?: boolean;
|
|
85
81
|
readonly stopVCAtInteractionFinish?: boolean;
|
|
86
82
|
readonly includeSSRRatio?: boolean;
|
|
@@ -26,10 +26,6 @@ export type VCObserverOptions = {
|
|
|
26
26
|
selectorConfig?: SelectorConfig | undefined;
|
|
27
27
|
isPostInteraction?: boolean;
|
|
28
28
|
ssrEnablePageLayoutPlaceholder?: boolean;
|
|
29
|
-
disableSizeAndPositionCheck?: {
|
|
30
|
-
v: boolean;
|
|
31
|
-
h: boolean;
|
|
32
|
-
};
|
|
33
29
|
ssrPlaceholderHandler?: any;
|
|
34
30
|
};
|
|
35
31
|
export interface VCObserverInterface {
|
|
@@ -12,10 +12,6 @@ type ConstructorOptions = {
|
|
|
12
12
|
selectorConfig: SelectorConfig;
|
|
13
13
|
SSRConfig?: {
|
|
14
14
|
enablePageLayoutPlaceholder: boolean;
|
|
15
|
-
disableSizeAndPositionCheck?: {
|
|
16
|
-
v: boolean;
|
|
17
|
-
h: boolean;
|
|
18
|
-
};
|
|
19
15
|
};
|
|
20
16
|
ssrPlaceholderHandler?: SSRPlaceholderHandlers | null;
|
|
21
17
|
};
|
|
@@ -4,13 +4,8 @@ type Rect = {
|
|
|
4
4
|
width: number;
|
|
5
5
|
height: number;
|
|
6
6
|
};
|
|
7
|
-
type DisableSizeAndPositionCheckType = {
|
|
8
|
-
v: boolean;
|
|
9
|
-
h: boolean;
|
|
10
|
-
};
|
|
11
7
|
type SSRPlaceholderHandlersConfig = {
|
|
12
8
|
enablePageLayoutPlaceholder?: boolean;
|
|
13
|
-
disableSizeAndPositionCheck?: DisableSizeAndPositionCheckType;
|
|
14
9
|
};
|
|
15
10
|
export declare class SSRPlaceholderHandlers {
|
|
16
11
|
private staticPlaceholders;
|
|
@@ -20,8 +15,7 @@ export declare class SSRPlaceholderHandlers {
|
|
|
20
15
|
private intersectionObserver;
|
|
21
16
|
private EQUALITY_THRESHOLD;
|
|
22
17
|
private enablePageLayoutPlaceholder;
|
|
23
|
-
|
|
24
|
-
constructor({ enablePageLayoutPlaceholder, disableSizeAndPositionCheck, }: SSRPlaceholderHandlersConfig);
|
|
18
|
+
constructor({ enablePageLayoutPlaceholder, }: SSRPlaceholderHandlersConfig);
|
|
25
19
|
private getPlaceholderId;
|
|
26
20
|
private getPlaceholderReplacementId;
|
|
27
21
|
clear(): void;
|
|
@@ -7,10 +7,6 @@ export type VCObserverNewConfig = {
|
|
|
7
7
|
isPostInteraction?: boolean;
|
|
8
8
|
SSRConfig?: {
|
|
9
9
|
enablePageLayoutPlaceholder?: boolean;
|
|
10
|
-
disableSizeAndPositionCheck?: {
|
|
11
|
-
v: boolean;
|
|
12
|
-
h: boolean;
|
|
13
|
-
};
|
|
14
10
|
};
|
|
15
11
|
ssrPlaceholderHandler?: SSRPlaceholderHandlers | null;
|
|
16
12
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function checkFiberWithinComponent(fiber: any, targetComponentName: string, maxLevel: number): boolean;
|
package/dist/types-ts4.5/vc/vc-observer-new/viewport-observer/utils/find-fiber-with-cache.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function findFiberWithCache(element: HTMLElement, maxLevel: number, checkedNodes: HTMLElement[]): any | null;
|
package/package.json
CHANGED
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = checkWithinComponentAndExtractChildProps;
|
|
8
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
10
|
-
var _findReactFiber = _interopRequireDefault(require("./find-react-fiber"));
|
|
11
|
-
var _getComponentName = _interopRequireDefault(require("./get-component-name"));
|
|
12
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
13
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
14
|
-
var DEFAULT_MAX_LEVEL = 20;
|
|
15
|
-
// Using the React Fiber tree to traverse up the DOM and check if a node is within a specific component
|
|
16
|
-
// and extract child component props if needed.
|
|
17
|
-
function checkWithinComponentAndExtractChildProps(node, targetComponentName, childComponentConfig) {
|
|
18
|
-
var fiber = null;
|
|
19
|
-
if ((0, _platformFeatureFlags.fg)('platform_ufo_handle_non_react_element_for_3p')) {
|
|
20
|
-
// Walk up the DOM tree to find React fiber (handles non-React-rendered elements)
|
|
21
|
-
var currentElement = node;
|
|
22
|
-
var levelsTraversed = 0;
|
|
23
|
-
while (currentElement && !fiber && levelsTraversed < DEFAULT_MAX_LEVEL) {
|
|
24
|
-
fiber = (0, _findReactFiber.default)(currentElement);
|
|
25
|
-
if (!fiber) {
|
|
26
|
-
currentElement = currentElement.parentElement;
|
|
27
|
-
}
|
|
28
|
-
levelsTraversed++;
|
|
29
|
-
}
|
|
30
|
-
} else {
|
|
31
|
-
fiber = (0, _findReactFiber.default)(node);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
// If no React fiber found, return false
|
|
35
|
-
if (!fiber) {
|
|
36
|
-
return {
|
|
37
|
-
isWithin: false
|
|
38
|
-
};
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
// Traverse up the fiber tree
|
|
42
|
-
var currentFiber = fiber;
|
|
43
|
-
var childProp;
|
|
44
|
-
while (currentFiber) {
|
|
45
|
-
var componentName = (0, _getComponentName.default)(currentFiber);
|
|
46
|
-
|
|
47
|
-
// Check if this is a child component we're looking for
|
|
48
|
-
if (childComponentConfig && componentName === childComponentConfig.componentName) {
|
|
49
|
-
var props = currentFiber.memoizedProps || currentFiber.pendingProps;
|
|
50
|
-
if (props && props[childComponentConfig.propName] !== undefined) {
|
|
51
|
-
// Overwrite with the nearest child prop (closest to the target component)
|
|
52
|
-
childProp = childComponentConfig.extractValue ? childComponentConfig.extractValue(props) : props[childComponentConfig.propName];
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
// Check if we found the target component
|
|
57
|
-
if (componentName === targetComponentName) {
|
|
58
|
-
return _objectSpread({
|
|
59
|
-
isWithin: true
|
|
60
|
-
}, childComponentConfig && {
|
|
61
|
-
childProp: childProp
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
currentFiber = currentFiber.return;
|
|
65
|
-
}
|
|
66
|
-
return {
|
|
67
|
-
isWithin: false
|
|
68
|
-
};
|
|
69
|
-
}
|