@atlaskit/react-ufo 3.14.5 → 3.14.7

package/dist/cjs/vc/vc-observer-new/viewport-observer/index.js

@@ -5,9 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _vcUtils = require("../../vc-observer/media-wrapper/vc-utils");
 var _isNonVisualStyleMutation = _interopRequireDefault(require("../../vc-observer/observers/non-visual-styles/is-non-visual-style-mutation"));
 var _rllPlaceholders = require("../../vc-observer/observers/rll-placeholders");
@@ -15,6 +18,7 @@ var _intersectionObserver = require("./intersection-observer");
 var _mutationObserver = _interopRequireDefault(require("./mutation-observer"));
 var _performanceObserver = _interopRequireDefault(require("./performance-observer"));
 var _getComponentNameAndChildProps = require("./utils/get-component-name-and-child-props");
+var _isInVcIgnoreIfNoLayoutShiftMarker = _interopRequireDefault(require("./utils/is-in-vc-ignore-if-no-layout-shift-marker"));
 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; } } }; }
 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; } }
 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; }
@@ -24,7 +28,7 @@ function isElementVisible(element) {
   }
   try {
     var visible = element.checkVisibility({
-      // @ts-expect-error
+      // @ts-ignore - visibilityProperty may not exist in all TS environments
       visibilityProperty: true,
       contentVisibilityAuto: true,
       opacityProperty: true
@@ -49,24 +53,36 @@ function sameRectDimensions(a, b) {
 }
 var createElementMutationsWatcher = function createElementMutationsWatcher(removedNodeRects) {
   return function (_ref) {
-    var rect = _ref.rect;
+    var target = _ref.target,
+      rect = _ref.rect;
+    var isNoLsMarkerEnabled = (0, _platformFeatureFlags.fg)('platform_vc_ignore_no_ls_mutation_marker');
+    var isInIgnoreLsMarker = (0, _isInVcIgnoreIfNoLayoutShiftMarker.default)(target);
+    if (!isInIgnoreLsMarker && isNoLsMarkerEnabled) {
+      return 'mutation:element';
+    }
     var isRLLPlaceholder = _rllPlaceholders.RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(rect);
-    if (isRLLPlaceholder) {
+    if (isRLLPlaceholder && (!isNoLsMarkerEnabled || isInIgnoreLsMarker)) {
       return 'mutation:rll-placeholder';
     }
     var wasDeleted = removedNodeRects.some(function (nr) {
       return sameRectDimensions(nr, rect);
     });
-    if (wasDeleted) {
+    // When fg('platform_vc_ignore_no_ls_mutation_marker') is not enabled,
+    // no layout shift mutation is excluded as per existing fy25.03 logic
+    if (wasDeleted && (!isNoLsMarkerEnabled || isInIgnoreLsMarker)) {
       return 'mutation:element-replacement';
     }
     return 'mutation:element';
   };
 };
 var ViewportObserver = exports.default = /*#__PURE__*/function () {
+  // SSR context functions
+
   function ViewportObserver(_ref2) {
     var _this = this;
-    var onChange = _ref2.onChange;
+    var onChange = _ref2.onChange,
+      getSSRState = _ref2.getSSRState,
+      getSSRPlaceholderHandler = _ref2.getSSRPlaceholderHandler;
     (0, _classCallCheck2.default)(this, ViewportObserver);
     (0, _defineProperty2.default)(this, "handleIntersectionEntry", function (_ref3) {
       var target = _ref3.target,
@@ -90,60 +106,198 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
         mutationData: mutationData
       });
     });
-    (0, _defineProperty2.default)(this, "handleChildListMutation", function (_ref4) {
-      var addedNodes = _ref4.addedNodes,
-        removedNodes = _ref4.removedNodes;
-      var removedNodeRects = removedNodes.map(function (ref) {
-        var n = ref.deref();
-        if (!n) {
-          return;
-        }
-        return _this.mapVisibleNodeRects.get(n);
-      });
-      addedNodes.forEach(function (addedNodeRef) {
-        var _this$intersectionObs4;
-        var addedNode = addedNodeRef.deref();
-        if (!addedNode) {
-          return;
-        }
-        var sameDeletedNode = removedNodes.find(function (ref) {
-          var n = ref.deref();
-          if (!n || !addedNode) {
-            return false;
+    (0, _defineProperty2.default)(this, "handleChildListMutation", /*#__PURE__*/function () {
+      var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref4) {
+        var target, addedNodes, removedNodes, timestamp, removedNodeRects, targetNode, _iterator, _step, _loop, _ret;
+        return _regenerator.default.wrap(function _callee$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              target = _ref4.target, addedNodes = _ref4.addedNodes, removedNodes = _ref4.removedNodes, timestamp = _ref4.timestamp;
+              removedNodeRects = removedNodes.map(function (ref) {
+                var n = ref.deref();
+                if (!n) {
+                  return;
+                }
+                return _this.mapVisibleNodeRects.get(n);
+              });
+              targetNode = target.deref();
+              _iterator = _createForOfIteratorHelper(addedNodes);
+              _context2.prev = 4;
+              _loop = /*#__PURE__*/_regenerator.default.mark(function _loop() {
+                var _this$intersectionObs8;
+                var addedNodeRef, addedNode, ssrState, SSRStateEnum, _this$intersectionObs, _this$intersectionObs2, ssrPlaceholderHandler, result, _this$intersectionObs3, _result, _this$intersectionObs4, sameDeletedNode, isInIgnoreLsMarker, isNoLsMarkerEnabled, _this$intersectionObs5, _this$intersectionObs6, _checkThirdPartySegme, isWithinThirdPartySegment, ignoredReason, _this$intersectionObs7, assignedReason;
+                return _regenerator.default.wrap(function _loop$(_context) {
+                  while (1) switch (_context.prev = _context.next) {
+                    case 0:
+                      addedNodeRef = _step.value;
+                      addedNode = addedNodeRef.deref();
+                      if (addedNode) {
+                        _context.next = 4;
+                        break;
+                      }
+                      return _context.abrupt("return", 0);
+                    case 4:
+                      if (!(_this.getSSRState && (0, _platformFeatureFlags.fg)('platform_ufo_vc_v3_ssr_placeholder'))) {
+                        _context.next = 19;
+                        break;
+                      }
+                      ssrState = _this.getSSRState();
+                      SSRStateEnum = {
+                        normal: 1,
+                        waitingForFirstRender: 2,
+                        ignoring: 3
+                      };
+                      if (!(ssrState.state === SSRStateEnum.waitingForFirstRender && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement)) {
+                        _context.next = 12;
+                        break;
+                      }
+                      ssrState.state = SSRStateEnum.ignoring;
+                      if (ssrState.renderStop === -1) {
+                        // arbitrary 500ms DOM update window
+                        ssrState.renderStop = timestamp + 500;
+                      }
+                      (_this$intersectionObs = _this.intersectionObserver) === null || _this$intersectionObs === void 0 || _this$intersectionObs.watchAndTag(addedNode, 'ssr-hydration');
+                      return _context.abrupt("return", 0);
+                    case 12:
+                      if (!(ssrState.state === SSRStateEnum.ignoring && timestamp > ssrState.renderStart && targetNode === ssrState.reactRootElement)) {
+                        _context.next = 19;
+                        break;
+                      }
+                      if (!(timestamp <= ssrState.renderStop)) {
+                        _context.next = 18;
+                        break;
+                      }
+                      (_this$intersectionObs2 = _this.intersectionObserver) === null || _this$intersectionObs2 === void 0 || _this$intersectionObs2.watchAndTag(addedNode, 'ssr-hydration');
+                      return _context.abrupt("return", 0);
+                    case 18:
+                      ssrState.state = SSRStateEnum.normal;
+                    case 19:
+                      if (!(_this.getSSRPlaceholderHandler && (0, _platformFeatureFlags.fg)('platform_ufo_vc_v3_ssr_placeholder'))) {
+                        _context.next = 36;
+                        break;
+                      }
+                      ssrPlaceholderHandler = _this.getSSRPlaceholderHandler();
+                      if (!ssrPlaceholderHandler) {
+                        _context.next = 36;
+                        break;
+                      }
+                      if (!(ssrPlaceholderHandler.isPlaceholder(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode))) {
+                        _context.next = 29;
+                        break;
+                      }
+                      _context.next = 25;
+                      return ssrPlaceholderHandler.checkIfExistedAndSizeMatching(addedNode);
+                    case 25:
+                      result = _context.sent;
+                      if (!(result !== false)) {
+                        _context.next = 29;
+                        break;
+                      }
+                      (_this$intersectionObs3 = _this.intersectionObserver) === null || _this$intersectionObs3 === void 0 || _this$intersectionObs3.watchAndTag(addedNode, 'mutation:ssr-placeholder');
+                      return _context.abrupt("return", 0);
+                    case 29:
+                      if (!(ssrPlaceholderHandler.isPlaceholderReplacement(addedNode) || ssrPlaceholderHandler.isPlaceholderIgnored(addedNode))) {
+                        _context.next = 36;
+                        break;
+                      }
+                      _context.next = 32;
+                      return ssrPlaceholderHandler.validateReactComponentMatchToPlaceholder(addedNode);
+                    case 32:
+                      _result = _context.sent;
+                      if (!(_result !== false)) {
+                        _context.next = 36;
+                        break;
+                      }
+                      (_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(addedNode, 'mutation:ssr-placeholder');
+                      return _context.abrupt("return", 0);
+                    case 36:
+                      sameDeletedNode = removedNodes.find(function (ref) {
+                        var n = ref.deref();
+                        if (!n || !addedNode) {
+                          return false;
+                        }
+                        return n.isEqualNode(addedNode);
+                      });
+                      isInIgnoreLsMarker = (0, _isInVcIgnoreIfNoLayoutShiftMarker.default)(addedNode);
+                      isNoLsMarkerEnabled = (0, _platformFeatureFlags.fg)('platform_vc_ignore_no_ls_mutation_marker'); // When fg('platform_vc_ignore_no_ls_mutation_marker') is not enabled,
+                      // no layout shift mutation is excluded as per existing fy25.03 logic
+                      if (!(sameDeletedNode && (!isNoLsMarkerEnabled || isInIgnoreLsMarker))) {
+                        _context.next = 42;
+                        break;
+                      }
+                      (_this$intersectionObs5 = _this.intersectionObserver) === null || _this$intersectionObs5 === void 0 || _this$intersectionObs5.watchAndTag(addedNode, 'mutation:remount');
+                      return _context.abrupt("return", 0);
+                    case 42:
+                      if (!(0, _vcUtils.isContainedWithinMediaWrapper)(addedNode)) {
+                        _context.next = 45;
+                        break;
+                      }
+                      (_this$intersectionObs6 = _this.intersectionObserver) === null || _this$intersectionObs6 === void 0 || _this$intersectionObs6.watchAndTag(addedNode, 'mutation:media');
+                      return _context.abrupt("return", 0);
+                    case 45:
+                      _checkThirdPartySegme = (0, _getComponentNameAndChildProps.checkThirdPartySegmentWithIgnoreReason)(addedNode), isWithinThirdPartySegment = _checkThirdPartySegme.isWithinThirdPartySegment, ignoredReason = _checkThirdPartySegme.ignoredReason;
+                      if (!isWithinThirdPartySegment) {
+                        _context.next = 50;
+                        break;
+                      }
+                      assignedReason = (0, _getComponentNameAndChildProps.createMutationTypeWithIgnoredReason)(ignoredReason || 'third-party-element');
+                      (_this$intersectionObs7 = _this.intersectionObserver) === null || _this$intersectionObs7 === void 0 || _this$intersectionObs7.watchAndTag(addedNode, assignedReason);
+                      return _context.abrupt("return", 0);
+                    case 50:
+                      (_this$intersectionObs8 = _this.intersectionObserver) === null || _this$intersectionObs8 === void 0 || _this$intersectionObs8.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
+                    case 51:
+                    case "end":
+                      return _context.stop();
+                  }
+                }, _loop);
+              });
+              _iterator.s();
+            case 7:
+              if ((_step = _iterator.n()).done) {
+                _context2.next = 14;
+                break;
+              }
+              return _context2.delegateYield(_loop(), "t0", 9);
+            case 9:
+              _ret = _context2.t0;
+              if (!(_ret === 0)) {
+                _context2.next = 12;
+                break;
+              }
+              return _context2.abrupt("continue", 12);
+            case 12:
+              _context2.next = 7;
+              break;
+            case 14:
+              _context2.next = 19;
+              break;
+            case 16:
+              _context2.prev = 16;
+              _context2.t1 = _context2["catch"](4);
+              _iterator.e(_context2.t1);
+            case 19:
+              _context2.prev = 19;
+              _iterator.f();
+              return _context2.finish(19);
+            case 22:
+            case "end":
+              return _context2.stop();
           }
-          return n.isEqualNode(addedNode);
-        });
-        if (sameDeletedNode) {
-          var _this$intersectionObs;
-          (_this$intersectionObs = _this.intersectionObserver) === null || _this$intersectionObs === void 0 || _this$intersectionObs.watchAndTag(addedNode, 'mutation:remount');
-          return;
-        }
-        if ((0, _vcUtils.isContainedWithinMediaWrapper)(addedNode)) {
-          var _this$intersectionObs2;
-          (_this$intersectionObs2 = _this.intersectionObserver) === null || _this$intersectionObs2 === void 0 || _this$intersectionObs2.watchAndTag(addedNode, 'mutation:media');
-          return;
-        }
-        var _checkThirdPartySegme = (0, _getComponentNameAndChildProps.checkThirdPartySegmentWithIgnoreReason)(addedNode),
-          isWithinThirdPartySegment = _checkThirdPartySegme.isWithinThirdPartySegment,
-          ignoredReason = _checkThirdPartySegme.ignoredReason;
-        if (isWithinThirdPartySegment) {
-          var _this$intersectionObs3;
-          var assignedReason = (0, _getComponentNameAndChildProps.createMutationTypeWithIgnoredReason)(ignoredReason || 'third-party-element');
-          (_this$intersectionObs3 = _this.intersectionObserver) === null || _this$intersectionObs3 === void 0 || _this$intersectionObs3.watchAndTag(addedNode, assignedReason);
-          return;
-        }
-        (_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
-      });
-    });
-    (0, _defineProperty2.default)(this, "handleAttributeMutation", function (_ref5) {
-      var _this$intersectionObs5;
-      var target = _ref5.target,
-        attributeName = _ref5.attributeName,
-        oldValue = _ref5.oldValue,
-        newValue = _ref5.newValue;
-      (_this$intersectionObs5 = _this.intersectionObserver) === null || _this$intersectionObs5 === void 0 || _this$intersectionObs5.watchAndTag(target, function (_ref6) {
-        var target = _ref6.target,
-          rect = _ref6.rect;
+        }, _callee, null, [[4, 16, 19, 22]]);
+      }));
+      return function (_x) {
+        return _ref5.apply(this, arguments);
+      };
+    }());
+    (0, _defineProperty2.default)(this, "handleAttributeMutation", function (_ref6) {
+      var _this$intersectionObs9;
+      var target = _ref6.target,
+        attributeName = _ref6.attributeName,
+        oldValue = _ref6.oldValue,
+        newValue = _ref6.newValue;
+      (_this$intersectionObs9 = _this.intersectionObserver) === null || _this$intersectionObs9 === void 0 || _this$intersectionObs9.watchAndTag(target, function (_ref7) {
+        var target = _ref7.target,
+          rect = _ref7.rect;
         if ((0, _vcUtils.isContainedWithinMediaWrapper)(target)) {
           return {
             type: 'mutation:media',
@@ -214,14 +368,14 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
         };
       });
     });
-    (0, _defineProperty2.default)(this, "handleLayoutShift", function (_ref7) {
-      var time = _ref7.time,
-        changedRects = _ref7.changedRects;
-      var _iterator = _createForOfIteratorHelper(changedRects),
-        _step;
+    (0, _defineProperty2.default)(this, "handleLayoutShift", function (_ref8) {
+      var time = _ref8.time,
+        changedRects = _ref8.changedRects;
+      var _iterator2 = _createForOfIteratorHelper(changedRects),
+        _step2;
       try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var changedRect = _step.value;
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var changedRect = _step2.value;
           var target = changedRect.node;
           if (target) {
             _this.onChange({
@@ -235,9 +389,9 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
           }
         }
       } catch (err) {
-        _iterator.e(err);
+        _iterator2.e(err);
       } finally {
-        _iterator.f();
+        _iterator2.f();
       }
     });
     this.mapVisibleNodeRects = new WeakMap();
@@ -246,6 +400,10 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
     this.intersectionObserver = null;
     this.mutationObserver = null;
     this.performanceObserver = null;
+
+    // Initialize SSR context functions
+    this.getSSRState = getSSRState;
+    this.getSSRPlaceholderHandler = getSSRPlaceholderHandler;
   }
   return (0, _createClass2.default)(ViewportObserver, [{
     key: "initializeObservers",
@@ -289,12 +447,12 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
   }, {
     key: "stop",
     value: function stop() {
-      var _this$mutationObserve2, _this$intersectionObs6, _this$performanceObse2;
+      var _this$mutationObserve2, _this$intersectionObs0, _this$performanceObse2;
       if (!this.isStarted) {
         return;
       }
       (_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 || _this$mutationObserve2.disconnect();
-      (_this$intersectionObs6 = this.intersectionObserver) === null || _this$intersectionObs6 === void 0 || _this$intersectionObs6.disconnect();
+      (_this$intersectionObs0 = this.intersectionObserver) === null || _this$intersectionObs0 === void 0 || _this$intersectionObs0.disconnect();
       (_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 || _this$performanceObse2.disconnect();
       this.isStarted = false;
     }

package/dist/cjs/vc/vc-observer-new/viewport-observer/mutation-observer/index.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 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; } } }; }
 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; } }
 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; }
+// Batched mutation data for performance optimization
+
 function createMutationObserver(_ref) {
   var onAttributeMutation = _ref.onAttributeMutation,
     onChildListMutation = _ref.onChildListMutation,
@@ -15,63 +17,120 @@ function createMutationObserver(_ref) {
     return null;
   }
   var mutationObserverCallback = function mutationObserverCallback(mutations) {
-    var addedNodes = [];
-    var removedNodes = [];
     var targets = [];
+    // Use nested Maps for O(1) batching performance
+    // Short-lived Maps are safe since they're discarded after each callback
+    var batchedMutations = new Map();
     var _iterator = _createForOfIteratorHelper(mutations),
       _step;
     try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var mut = _step.value;
-        if (!(mut.target instanceof HTMLElement)) {
-          continue;
-        }
-        if (mut.type === 'attributes') {
-          var _mut$oldValue;
-          /*
-          			"MutationObserver was explicitly designed to work that way, but I can't now recall the reasoning.
-          			I think it might have been something along the lines that for consistency every setAttribute call should create a record.
-          			Conceptually there is after all a mutation: there is an old value replaced with a new one,
-          			and whether or not they are the same doesn't really matter.
-          			And Custom elements should work the same way as MutationObserver."
-          			https://github.com/whatwg/dom/issues/520#issuecomment-336574796
-          		*/
-          var oldValue = (_mut$oldValue = mut.oldValue) !== null && _mut$oldValue !== void 0 ? _mut$oldValue : undefined;
-          var newValue = mut.attributeName ? mut.target.getAttribute(mut.attributeName) : undefined;
-          if (oldValue !== newValue) {
-            var _mut$attributeName;
-            onAttributeMutation({
-              target: mut.target,
-              attributeName: (_mut$attributeName = mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown',
-              oldValue: oldValue,
-              newValue: newValue
-            });
+      var _loop = function _loop() {
+          var mut = _step.value;
+          if (!(mut.target instanceof HTMLElement)) {
+            return 0; // continue
           }
-          continue;
-        } else if (mut.type === 'childList') {
-          var _mut$addedNodes, _mut$removedNodes;
-          ((_mut$addedNodes = mut.addedNodes) !== null && _mut$addedNodes !== void 0 ? _mut$addedNodes : []).forEach(function (node) {
-            if (node instanceof HTMLElement) {
-              addedNodes.push(new WeakRef(node));
+          if (mut.type === 'attributes') {
+            var _mut$oldValue;
+            /*
+            			"MutationObserver was explicitly designed to work that way, but I can't now recall the reasoning.
+            			I think it might have been something along the lines that for consistency every setAttribute call should create a record.
+            			Conceptually there is after all a mutation: there is an old value replaced with a new one,
+            			and whether or not they are the same doesn't really matter.
+            			And Custom elements should work the same way as MutationObserver."
+            			https://github.com/whatwg/dom/issues/520#issuecomment-336574796
+            		*/
+            var oldValue = (_mut$oldValue = mut.oldValue) !== null && _mut$oldValue !== void 0 ? _mut$oldValue : undefined;
+            var newValue = mut.attributeName ? mut.target.getAttribute(mut.attributeName) : undefined;
+            if (oldValue !== newValue) {
+              var _mut$attributeName;
+              onAttributeMutation({
+                target: mut.target,
+                attributeName: (_mut$attributeName = mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown',
+                oldValue: oldValue,
+                newValue: newValue
+              });
             }
-          });
-          ((_mut$removedNodes = mut.removedNodes) !== null && _mut$removedNodes !== void 0 ? _mut$removedNodes : []).forEach(function (node) {
-            if (node instanceof HTMLElement) {
-              removedNodes.push(new WeakRef(node));
+            return 0; // continue
+          } else if (mut.type === 'childList') {
+            var _mut$addedNodes, _mut$removedNodes;
+            // In chromium browser MutationRecord has timestamp field, which we should use.
+            var timestamp = Math.round(mut.timestamp || performance.now());
+
+            // Get or create timestamp bucket
+            var timestampBucket = batchedMutations.get(timestamp);
+            if (!timestampBucket) {
+              timestampBucket = new Map();
+              batchedMutations.set(timestamp, timestampBucket);
             }
-          });
-        }
-        targets.push(mut.target);
+
+            // Get or create target batch within timestamp bucket
+            var batch = timestampBucket.get(mut.target);
+            if (!batch) {
+              batch = {
+                target: new WeakRef(mut.target),
+                addedNodes: [],
+                removedNodes: [],
+                timestamp: timestamp
+              };
+              timestampBucket.set(mut.target, batch);
+            }
+
+            // Accumulate added nodes
+            ((_mut$addedNodes = mut.addedNodes) !== null && _mut$addedNodes !== void 0 ? _mut$addedNodes : []).forEach(function (node) {
+              if (node instanceof HTMLElement) {
+                batch.addedNodes.push(new WeakRef(node));
+              }
+            });
+
+            // Accumulate removed nodes
+            ((_mut$removedNodes = mut.removedNodes) !== null && _mut$removedNodes !== void 0 ? _mut$removedNodes : []).forEach(function (node) {
+              if (node instanceof HTMLElement) {
+                batch.removedNodes.push(new WeakRef(node));
+              }
+            });
+          }
+          targets.push(mut.target);
+        },
+        _ret;
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        _ret = _loop();
+        if (_ret === 0) continue;
       }
+
+      // Process all batched childList mutations
     } catch (err) {
       _iterator.e(err);
     } finally {
       _iterator.f();
     }
-    onChildListMutation({
-      addedNodes: addedNodes,
-      removedNodes: removedNodes
-    });
+    var _iterator2 = _createForOfIteratorHelper(batchedMutations.values()),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var timestampBucket = _step2.value;
+        var _iterator3 = _createForOfIteratorHelper(timestampBucket.values()),
+          _step3;
+        try {
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+            var batch = _step3.value;
+            onChildListMutation({
+              target: batch.target,
+              addedNodes: batch.addedNodes,
+              removedNodes: batch.removedNodes,
+              timestamp: batch.timestamp
+            });
+          }
+        } catch (err) {
+          _iterator3.e(err);
+        } finally {
+          _iterator3.f();
+        }
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
     onMutationFinished === null || onMutationFinished === void 0 || onMutationFinished({
       targets: targets
     });

package/dist/cjs/vc/vc-observer-new/viewport-observer/utils/is-in-vc-ignore-if-no-layout-shift-marker.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = isInVCIgnoreIfNoLayoutShiftMarker;
+/**
+ * Check if the element is in the VC ignore if no layout shift marker.
+ * @param element - The element to check.
+ * @returns True if the element has the data-vc-ignore-if-no-layout-shift attribute == 'true or its parent has it, false otherwise.
+ */
+function isInVCIgnoreIfNoLayoutShiftMarker(element) {
+  if (!element) {
+    return false;
+  }
+  return element.getAttribute('data-vc-ignore-if-no-layout-shift') === 'true' || isInVCIgnoreIfNoLayoutShiftMarker(element.parentElement);
+}

package/dist/es2019/vc/index.js

@@ -4,17 +4,41 @@ import { VCObserverNOOP } from './no-op-vc-observer';
 import { VCObserver } from './vc-observer';
 import VCObserverNew from './vc-observer-new';
 import { RLLPlaceholderHandlers } from './vc-observer/observers/rll-placeholders';
+import { SSRPlaceholderHandlers } from './vc-observer/observers/ssr-placeholders';
 export class VCObserverWrapper {
   constructor(opts = {}) {
+    var _opts$ssrEnablePageLa, _opts$disableSizeAndP;
     this.newVCObserver = null;
     this.oldVCObserver = null;
+
+    // Initialize SSR placeholder handler once
+    this.ssrPlaceholderHandler = new SSRPlaceholderHandlers({
+      enablePageLayoutPlaceholder: (_opts$ssrEnablePageLa = opts.ssrEnablePageLayoutPlaceholder) !== null && _opts$ssrEnablePageLa !== void 0 ? _opts$ssrEnablePageLa : false,
+      disableSizeAndPositionCheck: (_opts$disableSizeAndP = opts.disableSizeAndPositionCheck) !== null && _opts$disableSizeAndP !== void 0 ? _opts$disableSizeAndP : {
+        v: false,
+        h: false
+      }
+    });
     if (isVCRevisionEnabled('fy25.03')) {
+      var _opts$ssrEnablePageLa2, _opts$disableSizeAndP2;
       this.newVCObserver = new VCObserverNew({
-        selectorConfig: opts.selectorConfig
+        selectorConfig: opts.selectorConfig,
+        isPostInteraction: opts.isPostInteraction,
+        SSRConfig: {
+          enablePageLayoutPlaceholder: (_opts$ssrEnablePageLa2 = opts.ssrEnablePageLayoutPlaceholder) !== null && _opts$ssrEnablePageLa2 !== void 0 ? _opts$ssrEnablePageLa2 : false,
+          disableSizeAndPositionCheck: (_opts$disableSizeAndP2 = opts.disableSizeAndPositionCheck) !== null && _opts$disableSizeAndP2 !== void 0 ? _opts$disableSizeAndP2 : {
+            v: false,
+            h: false
+          }
+        },
+        ssrPlaceholderHandler: this.ssrPlaceholderHandler
       });
     }
     if (isVCRevisionEnabled('fy25.01') || isVCRevisionEnabled('fy25.02')) {
-      this.oldVCObserver = new VCObserver(opts);
+      this.oldVCObserver = new VCObserver({
+        ...opts,
+        ssrPlaceholderHandler: this.ssrPlaceholderHandler
+      });
     }
   }
 
@@ -68,6 +92,8 @@ export class VCObserverWrapper {
       (_this$newVCObserver2 = this.newVCObserver) === null || _this$newVCObserver2 === void 0 ? void 0 : _this$newVCObserver2.stop();
     }
     RLLPlaceholderHandlers.getInstance().reset();
+    // Clear shared SSR placeholder handler
+    this.ssrPlaceholderHandler.clear();
   }
   getVCRawData() {
     var _this$oldVCObserver$g, _this$oldVCObserver3;
@@ -94,16 +120,22 @@ export class VCObserverWrapper {
     };
   }
   setSSRElement(element) {
-    var _this$oldVCObserver5;
+    var _this$oldVCObserver5, _this$newVCObserver4;
     (_this$oldVCObserver5 = this.oldVCObserver) === null || _this$oldVCObserver5 === void 0 ? void 0 : _this$oldVCObserver5.setSSRElement(element);
+    (_this$newVCObserver4 = this.newVCObserver) === null || _this$newVCObserver4 === void 0 ? void 0 : _this$newVCObserver4.setReactRootElement(element);
   }
   setReactRootRenderStart(startTime) {
-    var _this$oldVCObserver6;
+    var _this$oldVCObserver6, _this$newVCObserver5;
     (_this$oldVCObserver6 = this.oldVCObserver) === null || _this$oldVCObserver6 === void 0 ? void 0 : _this$oldVCObserver6.setReactRootRenderStart(startTime || performance.now());
+    (_this$newVCObserver5 = this.newVCObserver) === null || _this$newVCObserver5 === void 0 ? void 0 : _this$newVCObserver5.setReactRootRenderStart(startTime || performance.now());
   }
   setReactRootRenderStop(stopTime) {
-    var _this$oldVCObserver7;
+    var _this$oldVCObserver7, _this$newVCObserver6;
     (_this$oldVCObserver7 = this.oldVCObserver) === null || _this$oldVCObserver7 === void 0 ? void 0 : _this$oldVCObserver7.setReactRootRenderStop(stopTime || performance.now());
+    (_this$newVCObserver6 = this.newVCObserver) === null || _this$newVCObserver6 === void 0 ? void 0 : _this$newVCObserver6.setReactRootRenderStop(stopTime || performance.now());
+  }
+  collectSSRPlaceholders() {
+    this.ssrPlaceholderHandler.collectExistingPlaceholders();
   }
 }