@atlaskit/react-ufo 3.13.18 → 3.13.19
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/index.js +2 -0
- package/dist/cjs/vc/vc-observer/getVCRevisionDebugDetails.js +109 -11
- package/dist/cjs/vc/vc-observer/index.js +35 -29
- package/dist/cjs/vc/vc-observer/observers/index.js +4 -0
- package/dist/cjs/vc/vc-observer/observers/rll-placeholders/index.js +208 -0
- package/dist/cjs/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js +123 -18
- package/dist/cjs/vc/vc-observer-new/viewport-observer/index.js +16 -0
- package/dist/es2019/vc/index.js +2 -0
- package/dist/es2019/vc/vc-observer/getVCRevisionDebugDetails.js +71 -9
- package/dist/es2019/vc/vc-observer/index.js +39 -33
- package/dist/es2019/vc/vc-observer/observers/index.js +4 -0
- package/dist/es2019/vc/vc-observer/observers/rll-placeholders/index.js +182 -0
- package/dist/es2019/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js +96 -16
- package/dist/es2019/vc/vc-observer-new/viewport-observer/index.js +16 -0
- package/dist/esm/vc/index.js +2 -0
- package/dist/esm/vc/vc-observer/getVCRevisionDebugDetails.js +108 -11
- package/dist/esm/vc/vc-observer/index.js +35 -29
- package/dist/esm/vc/vc-observer/observers/index.js +4 -0
- package/dist/esm/vc/vc-observer/observers/rll-placeholders/index.js +201 -0
- package/dist/esm/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js +124 -18
- package/dist/esm/vc/vc-observer-new/viewport-observer/index.js +16 -0
- package/dist/types/common/vc/types.d.ts +1 -1
- package/dist/types/vc/vc-observer/getVCRevisionDebugDetails.d.ts +16 -14
- package/dist/types/vc/vc-observer/observers/rll-placeholders/index.d.ts +49 -0
- package/dist/types/vc/vc-observer-new/types.d.ts +1 -1
- package/dist/types-ts4.5/common/vc/types.d.ts +1 -1
- package/dist/types-ts4.5/vc/vc-observer/getVCRevisionDebugDetails.d.ts +16 -14
- package/dist/types-ts4.5/vc/vc-observer/observers/rll-placeholders/index.d.ts +49 -0
- package/dist/types-ts4.5/vc/vc-observer-new/types.d.ts +1 -1
- package/package.json +4 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/ufo-interaction-ignore
|
|
2
2
|
|
|
3
|
+
## 3.13.19
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#166738](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/166738)
|
|
8
|
+
[`0a681029d17a9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0a681029d17a9) -
|
|
9
|
+
AFO-3998 TTVC ignore RLL hydration
|
|
10
|
+
|
|
3
11
|
## 3.13.18
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
package/dist/cjs/vc/index.js
CHANGED
|
@@ -17,6 +17,7 @@ var _config = require("../config");
|
|
|
17
17
|
var _noOpVcObserver = require("./no-op-vc-observer");
|
|
18
18
|
var _vcObserver = require("./vc-observer");
|
|
19
19
|
var _vcObserverNew = _interopRequireDefault(require("./vc-observer-new"));
|
|
20
|
+
var _rllPlaceholders = require("./vc-observer/observers/rll-placeholders");
|
|
20
21
|
var _process;
|
|
21
22
|
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; }
|
|
22
23
|
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; }
|
|
@@ -90,6 +91,7 @@ var VCObserverWrapper = exports.VCObserverWrapper = /*#__PURE__*/function () {
|
|
|
90
91
|
var _this$newVCObserver2;
|
|
91
92
|
(_this$newVCObserver2 = this.newVCObserver) === null || _this$newVCObserver2 === void 0 || _this$newVCObserver2.stop();
|
|
92
93
|
}
|
|
94
|
+
_rllPlaceholders.RLLPlaceholderHandlers.getInstance().reset();
|
|
93
95
|
}
|
|
94
96
|
}, {
|
|
95
97
|
key: "getVCRawData",
|
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
7
|
exports.getVCRevisionDebugDetails = getVCRevisionDebugDetails;
|
|
8
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
9
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
10
|
+
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; } } }; }
|
|
11
|
+
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; } }
|
|
12
|
+
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; }
|
|
7
13
|
function getVCRevisionDebugDetails(_ref) {
|
|
8
14
|
var revision = _ref.revision,
|
|
9
15
|
isClean = _ref.isClean,
|
|
@@ -11,17 +17,59 @@ function getVCRevisionDebugDetails(_ref) {
|
|
|
11
17
|
VCEntries = _ref.VCEntries,
|
|
12
18
|
componentsLog = _ref.componentsLog,
|
|
13
19
|
interactionId = _ref.interactionId;
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
+
// Pre-sort VCEntries by time for efficient lookups
|
|
21
|
+
var sortedVCEntries = (0, _toConsumableArray2.default)(VCEntries).sort(function (a, b) {
|
|
22
|
+
return a.time - b.time;
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
// Pre-calculate max viewport percentage up to each time for efficient lookups
|
|
26
|
+
var maxViewportPercentageAtTime = new Map();
|
|
27
|
+
var maxSoFar = 0;
|
|
28
|
+
var _iterator = _createForOfIteratorHelper(sortedVCEntries),
|
|
29
|
+
_step;
|
|
30
|
+
try {
|
|
31
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
32
|
+
var entry = _step.value;
|
|
33
|
+
maxSoFar = Math.max(maxSoFar, entry.vc);
|
|
34
|
+
maxViewportPercentageAtTime.set(entry.time, maxSoFar);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// Helper function to find the biggest previous viewport percentage
|
|
38
|
+
} catch (err) {
|
|
39
|
+
_iterator.e(err);
|
|
40
|
+
} finally {
|
|
41
|
+
_iterator.f();
|
|
42
|
+
}
|
|
43
|
+
var getBiggestPreviousViewportPercentage = function getBiggestPreviousViewportPercentage(targetTime) {
|
|
44
|
+
// Binary search for the largest time <= targetTime
|
|
45
|
+
var left = 0;
|
|
46
|
+
var right = sortedVCEntries.length - 1;
|
|
47
|
+
var result = -1;
|
|
48
|
+
while (left <= right) {
|
|
49
|
+
var mid = Math.floor((left + right) / 2);
|
|
50
|
+
if (sortedVCEntries[mid].time <= targetTime) {
|
|
51
|
+
result = mid;
|
|
52
|
+
left = mid + 1;
|
|
53
|
+
} else {
|
|
54
|
+
right = mid - 1;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
return result >= 0 ? maxViewportPercentageAtTime.get(sortedVCEntries[result].time) || null : null;
|
|
58
|
+
};
|
|
59
|
+
var allVcLogs = [];
|
|
60
|
+
|
|
61
|
+
// Add regular VC entries
|
|
62
|
+
var _iterator2 = _createForOfIteratorHelper(VCEntries),
|
|
63
|
+
_step2;
|
|
64
|
+
try {
|
|
65
|
+
var _loop = function _loop() {
|
|
66
|
+
var entry = _step2.value;
|
|
67
|
+
var timeLogEntries = componentsLog[entry.time];
|
|
68
|
+
allVcLogs.push({
|
|
20
69
|
time: entry.time,
|
|
21
70
|
viewportPercentage: entry.vc,
|
|
22
71
|
entries: entry.elements.map(function (element) {
|
|
23
|
-
var
|
|
24
|
-
var logEntry = (_componentsLog$entry$ = componentsLog[entry.time]) === null || _componentsLog$entry$ === void 0 ? void 0 : _componentsLog$entry$.find(function (log) {
|
|
72
|
+
var logEntry = timeLogEntries === null || timeLogEntries === void 0 ? void 0 : timeLogEntries.find(function (log) {
|
|
25
73
|
return log.targetName === element;
|
|
26
74
|
});
|
|
27
75
|
return {
|
|
@@ -31,11 +79,61 @@ function getVCRevisionDebugDetails(_ref) {
|
|
|
31
79
|
visible: true,
|
|
32
80
|
attributeName: logEntry === null || logEntry === void 0 ? void 0 : logEntry.attributeName,
|
|
33
81
|
oldValue: logEntry === null || logEntry === void 0 ? void 0 : logEntry.oldValue,
|
|
34
|
-
newValue: logEntry === null || logEntry === void 0 ? void 0 : logEntry.newValue
|
|
82
|
+
newValue: logEntry === null || logEntry === void 0 ? void 0 : logEntry.newValue,
|
|
83
|
+
ignoreReason: logEntry === null || logEntry === void 0 ? void 0 : logEntry.ignoreReason
|
|
35
84
|
};
|
|
36
85
|
})
|
|
37
|
-
};
|
|
38
|
-
}
|
|
86
|
+
});
|
|
87
|
+
};
|
|
88
|
+
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
|
89
|
+
_loop();
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
// Add ignored elements - only process timestamps that have ignored elements
|
|
93
|
+
} catch (err) {
|
|
94
|
+
_iterator2.e(err);
|
|
95
|
+
} finally {
|
|
96
|
+
_iterator2.f();
|
|
97
|
+
}
|
|
98
|
+
for (var _i = 0, _Object$entries = Object.entries(componentsLog); _i < _Object$entries.length; _i++) {
|
|
99
|
+
var _Object$entries$_i = (0, _slicedToArray2.default)(_Object$entries[_i], 2),
|
|
100
|
+
timestamp = _Object$entries$_i[0],
|
|
101
|
+
timeLogEntries = _Object$entries$_i[1];
|
|
102
|
+
var ignoredElements = timeLogEntries.filter(function (log) {
|
|
103
|
+
return log.ignoreReason;
|
|
104
|
+
});
|
|
105
|
+
if (ignoredElements.length === 0) {
|
|
106
|
+
continue;
|
|
107
|
+
}
|
|
108
|
+
var time = Number(timestamp);
|
|
109
|
+
var viewportPercentage = getBiggestPreviousViewportPercentage(time);
|
|
110
|
+
allVcLogs.push({
|
|
111
|
+
time: time,
|
|
112
|
+
viewportPercentage: viewportPercentage,
|
|
113
|
+
entries: ignoredElements.map(function (logEntry) {
|
|
114
|
+
return {
|
|
115
|
+
elementName: logEntry.targetName,
|
|
116
|
+
type: logEntry.type,
|
|
117
|
+
rect: logEntry.intersectionRect,
|
|
118
|
+
visible: false,
|
|
119
|
+
attributeName: logEntry.attributeName,
|
|
120
|
+
oldValue: logEntry.oldValue,
|
|
121
|
+
newValue: logEntry.newValue,
|
|
122
|
+
ignoreReason: logEntry.ignoreReason
|
|
123
|
+
};
|
|
124
|
+
})
|
|
125
|
+
});
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
// Sort once at the end
|
|
129
|
+
allVcLogs.sort(function (a, b) {
|
|
130
|
+
return a.time - b.time;
|
|
131
|
+
});
|
|
132
|
+
return {
|
|
133
|
+
revision: revision,
|
|
134
|
+
isClean: isClean,
|
|
135
|
+
abortReason: abortReason,
|
|
136
|
+
vcLogs: allVcLogs,
|
|
39
137
|
interactionId: interactionId
|
|
40
138
|
};
|
|
41
139
|
}
|
|
@@ -103,7 +103,7 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
103
103
|
});
|
|
104
104
|
(0, _defineProperty2.default)(this, "getVCResult", /*#__PURE__*/function () {
|
|
105
105
|
var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref3) {
|
|
106
|
-
var start, stop, tti, prefix, ssr, vc, isEventAborted, experienceKey, interactionId, includeSSRRatio, startTime, fullPrefix, rawData, abortReason, abortReasonInfo, heatmap, heatmapNext, outOfBoundaryInfo, totalTime, componentsLog, viewport, devToolsEnabled, ratios, isTTVCv1Disabled, vcAbortedResultWithRevisions, ttvcV1Result, VC, VCBox, VCEntries, totalPainted, _componentsLog, vcNext, outOfBoundary, stopTime, ttvcV1DevToolInfo, ttvcV2DevToolInfo, v1RevisionDebugDetails, v2RevisionDebugDetails, _window$__ufo_devtool2, _window2, _window$__ufo_devtool, _window, _window$__on_ufo_vc_d2, _window4, _window$__on_ufo_vc_d, _window3, isVCClean, revisionsData, speedIndex, SSRRatio, SSRRatioNext, SSRRatioPayload, isTTVCv3Enabled;
|
|
106
|
+
var start, stop, tti, prefix, ssr, vc, isEventAborted, experienceKey, interactionId, includeSSRRatio, startTime, fullPrefix, rawData, abortReason, abortReasonInfo, heatmap, heatmapNext, outOfBoundaryInfo, totalTime, componentsLog, viewport, devToolsEnabled, ratios, isTTVCv1Disabled, vcAbortedResultWithRevisions, ttvcV1Result, VC, VCBox, VCEntries, totalPainted, _componentsLog, vcNext, outOfBoundary, stopTime, ttvcV1DevToolInfo, ttvcV2DevToolInfo, shouldCreateDebugDetails, v1RevisionDebugDetails, v2RevisionDebugDetails, _window$__ufo_devtool2, _window2, _window$__ufo_devtool, _window, _window$__on_ufo_vc_d2, _window4, _window$__on_ufo_vc_d, _window3, isVCClean, revisionsData, speedIndex, SSRRatio, SSRRatioNext, SSRRatioPayload, isTTVCv3Enabled;
|
|
107
107
|
return _regenerator.default.wrap(function _callee$(_context) {
|
|
108
108
|
while (1) switch (_context.prev = _context.next) {
|
|
109
109
|
case 0:
|
|
@@ -272,36 +272,42 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
|
|
|
272
272
|
entries: isTTVCv1Disabled ? vcNext.VCEntries.rel : VCEntries.rel
|
|
273
273
|
}
|
|
274
274
|
}));
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
}
|
|
275
|
+
}
|
|
276
|
+
if (!_this.isPostInteraction) {
|
|
277
|
+
// Only create revision debug details if callbacks exist
|
|
278
|
+
shouldCreateDebugDetails = typeof window.__ufo_devtool_onVCRevisionReady__ === 'function' || typeof window.__on_ufo_vc_debug_data_ready === 'function' && (0, _platformFeatureFlags.fg)('platform_ufo_emit_vc_debug_data');
|
|
279
|
+
if (shouldCreateDebugDetails) {
|
|
280
|
+
v1RevisionDebugDetails = (0, _getVCRevisionDebugDetails.getVCRevisionDebugDetails)({
|
|
281
|
+
revision: 'fy25.01',
|
|
282
|
+
isClean: !abortReasonInfo,
|
|
283
|
+
abortReason: abortReason.reason,
|
|
284
|
+
VCEntries: VCEntries.rel,
|
|
285
|
+
componentsLog: componentsLog,
|
|
286
|
+
interactionId: interactionId
|
|
287
|
+
});
|
|
288
|
+
v2RevisionDebugDetails = (0, _getVCRevisionDebugDetails.getVCRevisionDebugDetails)({
|
|
289
|
+
revision: 'fy25.02',
|
|
290
|
+
isClean: !abortReasonInfo,
|
|
291
|
+
abortReason: abortReason.reason,
|
|
292
|
+
VCEntries: vcNext.VCEntries.rel,
|
|
293
|
+
componentsLog: componentsLog,
|
|
294
|
+
interactionId: interactionId
|
|
295
|
+
}); // Add devtool callback for both v1 and v2
|
|
296
|
+
if (typeof window.__ufo_devtool_onVCRevisionReady__ === 'function') {
|
|
297
|
+
// Handle v1 if not disabled
|
|
298
|
+
if (!isTTVCv1Disabled) {
|
|
299
|
+
(_window$__ufo_devtool = (_window = window).__ufo_devtool_onVCRevisionReady__) === null || _window$__ufo_devtool === void 0 || _window$__ufo_devtool.call(_window, v1RevisionDebugDetails);
|
|
300
|
+
}
|
|
296
301
|
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
302
|
+
// Handle v2
|
|
303
|
+
(_window$__ufo_devtool2 = (_window2 = window).__ufo_devtool_onVCRevisionReady__) === null || _window$__ufo_devtool2 === void 0 || _window$__ufo_devtool2.call(_window2, v2RevisionDebugDetails);
|
|
304
|
+
}
|
|
305
|
+
if (typeof window.__on_ufo_vc_debug_data_ready === 'function' && (0, _platformFeatureFlags.fg)('platform_ufo_emit_vc_debug_data')) {
|
|
306
|
+
if (!isTTVCv1Disabled) {
|
|
307
|
+
(_window$__on_ufo_vc_d = (_window3 = window).__on_ufo_vc_debug_data_ready) === null || _window$__on_ufo_vc_d === void 0 || _window$__on_ufo_vc_d.call(_window3, v1RevisionDebugDetails);
|
|
308
|
+
}
|
|
309
|
+
(_window$__on_ufo_vc_d2 = (_window4 = window).__on_ufo_vc_debug_data_ready) === null || _window$__on_ufo_vc_d2 === void 0 || _window$__on_ufo_vc_d2.call(_window4, v2RevisionDebugDetails);
|
|
303
310
|
}
|
|
304
|
-
(_window$__on_ufo_vc_d2 = (_window4 = window).__on_ufo_vc_debug_data_ready) === null || _window$__on_ufo_vc_d2 === void 0 || _window$__on_ufo_vc_d2.call(_window4, v2RevisionDebugDetails);
|
|
305
311
|
}
|
|
306
312
|
}
|
|
307
313
|
} catch (e) {
|
|
@@ -10,6 +10,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
|
|
|
10
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
11
|
var _vcUtils = require("../media-wrapper/vc-utils");
|
|
12
12
|
var _isNonVisualStyleMutation = _interopRequireDefault(require("./non-visual-styles/is-non-visual-style-mutation"));
|
|
13
|
+
var _rllPlaceholders = require("./rll-placeholders");
|
|
13
14
|
var _ssrPlaceholders = require("./ssr-placeholders");
|
|
14
15
|
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; }
|
|
15
16
|
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; }
|
|
@@ -279,6 +280,9 @@ var Observers = exports.Observers = /*#__PURE__*/function () {
|
|
|
279
280
|
if (!isElementVisible(target)) {
|
|
280
281
|
data.ignoreReason = 'not-visible';
|
|
281
282
|
}
|
|
283
|
+
if (_rllPlaceholders.RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(ir)) {
|
|
284
|
+
data.ignoreReason = 'rll-placeholder';
|
|
285
|
+
}
|
|
282
286
|
_this3.callbacks.forEach(function (callback) {
|
|
283
287
|
var elementName;
|
|
284
288
|
try {
|
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.RLLPlaceholderHandlers = void 0;
|
|
8
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
9
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
12
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
|
+
var GLOBAL_RLL_HANDLERS_KEY = '__REACT_UFO_RLL_PLACEHOLDER_HANDLERS__';
|
|
14
|
+
var RLLPlaceholderHandlers = exports.RLLPlaceholderHandlers = /*#__PURE__*/function () {
|
|
15
|
+
function RLLPlaceholderHandlers() {
|
|
16
|
+
(0, _classCallCheck2.default)(this, RLLPlaceholderHandlers);
|
|
17
|
+
(0, _defineProperty2.default)(this, "placeholders", []);
|
|
18
|
+
if (typeof window !== 'undefined' && typeof document !== 'undefined' && typeof window.document !== 'undefined') {
|
|
19
|
+
this.collectRLLPlaceholders();
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Gets the global singleton instance of RLLPlaceholderHandlers.
|
|
25
|
+
* Creates the instance if it doesn't exist and stores it in globalThis.
|
|
26
|
+
* @returns The singleton instance of RLLPlaceholderHandlers
|
|
27
|
+
*/
|
|
28
|
+
return (0, _createClass2.default)(RLLPlaceholderHandlers, [{
|
|
29
|
+
key: "reset",
|
|
30
|
+
value: function reset() {
|
|
31
|
+
this.placeholders = [];
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Collects all React Loosely Lazy (RLL) placeholders from the DOM and caches their viewport intersecting rectangles.
|
|
36
|
+
* RLL placeholders are marked with data-lazy-begin and data-lazy-end attributes on hidden input elements.
|
|
37
|
+
* Performance optimized to batch getBoundingClientRect calls and minimize layout thrashing.
|
|
38
|
+
* Only stores the intersecting portions of rectangles that are currently visible in the viewport.
|
|
39
|
+
*/
|
|
40
|
+
}, {
|
|
41
|
+
key: "collectRLLPlaceholders",
|
|
42
|
+
value: function collectRLLPlaceholders() {
|
|
43
|
+
if (typeof window === 'undefined' || typeof document === 'undefined' || typeof window.document === 'undefined') {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
if (!(0, _platformFeatureFlags.fg)('platform_ufo_rll_placeholder_ignore')) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
var beginElements = document.querySelectorAll('input[data-lazy-begin]');
|
|
50
|
+
var beginCount = beginElements.length;
|
|
51
|
+
if (beginCount === 0) {
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
// Performance optimization: pre-allocate array with estimated size
|
|
56
|
+
var allElements = [];
|
|
57
|
+
|
|
58
|
+
// Performance optimization: use traditional for loop instead of forEach
|
|
59
|
+
for (var i = 0; i < beginCount; i++) {
|
|
60
|
+
var beginEl = beginElements[i];
|
|
61
|
+
var id = beginEl.getAttribute('data-lazy-begin');
|
|
62
|
+
if (!id) {
|
|
63
|
+
continue;
|
|
64
|
+
}
|
|
65
|
+
var elements = this.refElements(beginEl, id);
|
|
66
|
+
if (elements.length > 0) {
|
|
67
|
+
allElements.push.apply(allElements, (0, _toConsumableArray2.default)(elements));
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// Second pass: batch all getBoundingClientRect calls to minimize reflow cycles
|
|
72
|
+
var allElementsLength = allElements.length;
|
|
73
|
+
if (allElementsLength > 0) {
|
|
74
|
+
// Performance optimization: pre-allocate array with exact size
|
|
75
|
+
var intersectingRects = [];
|
|
76
|
+
var windowWidth = window.innerWidth;
|
|
77
|
+
var windowHeight = window.innerHeight;
|
|
78
|
+
for (var _i = 0; _i < allElementsLength; _i++) {
|
|
79
|
+
var rect = allElements[_i].getBoundingClientRect();
|
|
80
|
+
|
|
81
|
+
// Performance optimization: inline intersection calculation to avoid function call overhead
|
|
82
|
+
var left = Math.max(rect.left, 0);
|
|
83
|
+
var top = Math.max(rect.top, 0);
|
|
84
|
+
var right = Math.min(rect.right, windowWidth);
|
|
85
|
+
var bottom = Math.min(rect.bottom, windowHeight);
|
|
86
|
+
|
|
87
|
+
// Check if there's a valid intersection with non-zero width and height
|
|
88
|
+
if (left < right && top < bottom) {
|
|
89
|
+
intersectingRects.push(new DOMRect(left, top, right - left, bottom - top));
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
this.placeholders = intersectingRects;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/**
|
|
97
|
+
* Traverses DOM siblings to find all elements between RLL begin and end markers.
|
|
98
|
+
* Based on the refElements pattern from react-loosely-lazy's platform/packages/async/react-loosely-lazy/src/collect/hydrate.ts
|
|
99
|
+
* Performance optimized to minimize iterations and early exit conditions.
|
|
100
|
+
*
|
|
101
|
+
* @param fromEl - The input element with data-lazy-begin attribute
|
|
102
|
+
* @param id - The placeholder ID to match against data-lazy-end
|
|
103
|
+
* @returns Array of DOM elements between the begin/end markers
|
|
104
|
+
*/
|
|
105
|
+
}, {
|
|
106
|
+
key: "refElements",
|
|
107
|
+
value: function refElements(fromEl, id) {
|
|
108
|
+
var result = [];
|
|
109
|
+
var el = fromEl.nextSibling;
|
|
110
|
+
|
|
111
|
+
// Performance optimization: use while loop instead of recursive calls
|
|
112
|
+
while (el) {
|
|
113
|
+
var _el$dataset;
|
|
114
|
+
if (((_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset.lazyEnd) === id) {
|
|
115
|
+
break;
|
|
116
|
+
}
|
|
117
|
+
if (el.nodeType === Node.ELEMENT_NODE) {
|
|
118
|
+
result.push(el);
|
|
119
|
+
}
|
|
120
|
+
el = el.nextSibling;
|
|
121
|
+
}
|
|
122
|
+
return result;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/**
|
|
126
|
+
* Returns the cached intersecting viewport rectangles for all RLL placeholder elements.
|
|
127
|
+
* @returns Array of DOMRect objects representing the intersecting portions of placeholders within the viewport
|
|
128
|
+
*/
|
|
129
|
+
}, {
|
|
130
|
+
key: "getPlaceholders",
|
|
131
|
+
value: function getPlaceholders() {
|
|
132
|
+
return this.placeholders;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/**
|
|
136
|
+
* Checks if the given intersecting rectangle matches any of the cached RLL placeholder intersecting rectangles.
|
|
137
|
+
* This is designed to be called from IntersectionObserver with the intersectionRect.
|
|
138
|
+
* Performance optimized with early exits and minimal calculations.
|
|
139
|
+
* @param intersectingRect - The intersecting rectangle from IntersectionObserver
|
|
140
|
+
* @returns true if the intersecting rectangle matches a cached placeholder rectangle and hasn't exceeded match limit, false otherwise
|
|
141
|
+
*/
|
|
142
|
+
}, {
|
|
143
|
+
key: "isRLLPlaceholderHydration",
|
|
144
|
+
value: function isRLLPlaceholderHydration(intersectingRect) {
|
|
145
|
+
var placeholdersLength = this.placeholders.length;
|
|
146
|
+
if (placeholdersLength === 0) {
|
|
147
|
+
return false;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
// Performance optimization: cache array length and use traditional for loop
|
|
151
|
+
for (var i = 0; i < placeholdersLength; i++) {
|
|
152
|
+
var placeholderRect = this.placeholders[i];
|
|
153
|
+
if (this.areRectsEqual(intersectingRect, placeholderRect)) {
|
|
154
|
+
return true;
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
return false;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
/**
|
|
161
|
+
* Compares two DOMRect objects for equality with ±1 pixel tolerance.
|
|
162
|
+
* Performance optimized to minimize calculations and early exit on major differences.
|
|
163
|
+
* @param rect1 - First rectangle to compare
|
|
164
|
+
* @param rect2 - Second rectangle to compare
|
|
165
|
+
* @returns true if rectangles are within 1 pixel tolerance for all properties
|
|
166
|
+
*/
|
|
167
|
+
}, {
|
|
168
|
+
key: "areRectsEqual",
|
|
169
|
+
value: function areRectsEqual(rect1, rect2) {
|
|
170
|
+
// Early exit for exact matches (most common case)
|
|
171
|
+
if (rect1.left === rect2.left && rect1.top === rect2.top && rect1.right === rect2.right && rect1.bottom === rect2.bottom) {
|
|
172
|
+
return true;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
// Performance optimization: check largest differences first for early exit
|
|
176
|
+
var leftDiff = rect1.left - rect2.left;
|
|
177
|
+
if (leftDiff > 1 || leftDiff < -1) {
|
|
178
|
+
return false;
|
|
179
|
+
}
|
|
180
|
+
var rightDiff = rect1.right - rect2.right;
|
|
181
|
+
if (rightDiff > 1 || rightDiff < -1) {
|
|
182
|
+
return false;
|
|
183
|
+
}
|
|
184
|
+
var topDiff = rect1.top - rect2.top;
|
|
185
|
+
if (topDiff > 1 || topDiff < -1) {
|
|
186
|
+
return false;
|
|
187
|
+
}
|
|
188
|
+
var bottomDiff = rect1.bottom - rect2.bottom;
|
|
189
|
+
if (bottomDiff > 1 || bottomDiff < -1) {
|
|
190
|
+
return false;
|
|
191
|
+
}
|
|
192
|
+
return true;
|
|
193
|
+
}
|
|
194
|
+
}], [{
|
|
195
|
+
key: "getInstance",
|
|
196
|
+
value: function getInstance() {
|
|
197
|
+
if (typeof globalThis !== 'undefined') {
|
|
198
|
+
if (!globalThis[GLOBAL_RLL_HANDLERS_KEY]) {
|
|
199
|
+
globalThis[GLOBAL_RLL_HANDLERS_KEY] = new RLLPlaceholderHandlers();
|
|
200
|
+
}
|
|
201
|
+
return globalThis[GLOBAL_RLL_HANDLERS_KEY];
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
// Fallback for environments without globalThis (should be rare)
|
|
205
|
+
return new RLLPlaceholderHandlers();
|
|
206
|
+
}
|
|
207
|
+
}]);
|
|
208
|
+
}();
|