@atlaskit/react-ufo 3.14.6 → 3.14.7

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

@@ -1,6 +1,8 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 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; }
@@ -19,7 +21,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
@@ -67,9 +69,13 @@ var createElementMutationsWatcher = function createElementMutationsWatcher(remov
   };
 };
 var ViewportObserver = /*#__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;
     _classCallCheck(this, ViewportObserver);
     _defineProperty(this, "handleIntersectionEntry", function (_ref3) {
       var target = _ref3.target,
@@ -93,65 +99,198 @@ var ViewportObserver = /*#__PURE__*/function () {
         mutationData: mutationData
       });
     });
-    _defineProperty(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;
+    _defineProperty(this, "handleChildListMutation", /*#__PURE__*/function () {
+      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref4) {
+        var target, addedNodes, removedNodes, timestamp, removedNodeRects, targetNode, _iterator, _step, _loop, _ret;
+        return _regeneratorRuntime.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__*/_regeneratorRuntime.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 _regeneratorRuntime.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 && 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 && 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 = isInVCIgnoreIfNoLayoutShiftMarker(addedNode);
+                      isNoLsMarkerEnabled = 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 (!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 = checkThirdPartySegmentWithIgnoreReason(addedNode), isWithinThirdPartySegment = _checkThirdPartySegme.isWithinThirdPartySegment, ignoredReason = _checkThirdPartySegme.ignoredReason;
+                      if (!isWithinThirdPartySegment) {
+                        _context.next = 50;
+                        break;
+                      }
+                      assignedReason = 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);
-        });
-        var isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(addedNode);
-        var isNoLsMarkerEnabled = 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)) {
-          var _this$intersectionObs;
-          (_this$intersectionObs = _this.intersectionObserver) === null || _this$intersectionObs === void 0 || _this$intersectionObs.watchAndTag(addedNode, 'mutation:remount');
-          return;
-        }
-        if (isContainedWithinMediaWrapper(addedNode)) {
-          var _this$intersectionObs2;
-          (_this$intersectionObs2 = _this.intersectionObserver) === null || _this$intersectionObs2 === void 0 || _this$intersectionObs2.watchAndTag(addedNode, 'mutation:media');
-          return;
-        }
-        var _checkThirdPartySegme = checkThirdPartySegmentWithIgnoreReason(addedNode),
-          isWithinThirdPartySegment = _checkThirdPartySegme.isWithinThirdPartySegment,
-          ignoredReason = _checkThirdPartySegme.ignoredReason;
-        if (isWithinThirdPartySegment) {
-          var _this$intersectionObs3;
-          var assignedReason = 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));
-      });
-    });
-    _defineProperty(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);
+      };
+    }());
+    _defineProperty(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 (isContainedWithinMediaWrapper(target)) {
           return {
             type: 'mutation:media',
@@ -222,14 +361,14 @@ var ViewportObserver = /*#__PURE__*/function () {
         };
       });
     });
-    _defineProperty(this, "handleLayoutShift", function (_ref7) {
-      var time = _ref7.time,
-        changedRects = _ref7.changedRects;
-      var _iterator = _createForOfIteratorHelper(changedRects),
-        _step;
+    _defineProperty(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({
@@ -243,9 +382,9 @@ var ViewportObserver = /*#__PURE__*/function () {
           }
         }
       } catch (err) {
-        _iterator.e(err);
+        _iterator2.e(err);
       } finally {
-        _iterator.f();
+        _iterator2.f();
       }
     });
     this.mapVisibleNodeRects = new WeakMap();
@@ -254,6 +393,10 @@ var ViewportObserver = /*#__PURE__*/function () {
     this.intersectionObserver = null;
     this.mutationObserver = null;
     this.performanceObserver = null;
+
+    // Initialize SSR context functions
+    this.getSSRState = getSSRState;
+    this.getSSRPlaceholderHandler = getSSRPlaceholderHandler;
   }
   return _createClass(ViewportObserver, [{
     key: "initializeObservers",
@@ -297,12 +440,12 @@ var ViewportObserver = /*#__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/esm/vc/vc-observer-new/viewport-observer/mutation-observer/index.js

@@ -1,7 +1,8 @@
 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; }
-import { fg } from '@atlaskit/platform-feature-flags';
+// Batched mutation data for performance optimization
+
 function createMutationObserver(_ref) {
   var onAttributeMutation = _ref.onAttributeMutation,
     onChildListMutation = _ref.onChildListMutation,
@@ -10,82 +11,119 @@ function createMutationObserver(_ref) {
     return null;
   }
   var mutationObserverCallback = function mutationObserverCallback(mutations) {
-    var addedNodes = [];
-    var removedNodes = [];
-    var attributeMutations = [];
     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) {
-            if (fg('platform_vc_ignore_no_ls_mutation_marker')) {
+      var _loop = function _loop() {
+          var mut = _step.value;
+          if (!(mut.target instanceof HTMLElement)) {
+            return 0; // 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;
-              attributeMutations.push({
-                target: new WeakRef(_mut.target),
-                attributeName: (_mut$attributeName = _mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown',
-                oldValue: oldValue,
-                newValue: newValue
-              });
-            } else {
-              var _mut$attributeName2;
               onAttributeMutation({
-                target: _mut.target,
-                attributeName: (_mut$attributeName2 = _mut.attributeName) !== null && _mut$attributeName2 !== void 0 ? _mut$attributeName2 : 'unknown',
+                target: mut.target,
+                attributeName: (_mut$attributeName = mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown',
                 oldValue: oldValue,
                 newValue: newValue
               });
             }
-          }
-          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));
+            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);
             }
-          });
-          ((_mut$removedNodes = _mut.removedNodes) !== null && _mut$removedNodes !== void 0 ? _mut$removedNodes : []).forEach(function (node) {
-            if (node instanceof HTMLElement) {
-              removedNodes.push(new WeakRef(node));
+
+            // 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);
             }
-          });
-        }
-        targets.push(_mut.target);
+
+            // 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
-    });
-    for (var _i = 0, _attributeMutations = attributeMutations; _i < _attributeMutations.length; _i++) {
-      var mut = _attributeMutations[_i];
-      onAttributeMutation({
-        target: mut.target.deref(),
-        attributeName: mut.attributeName,
-        oldValue: mut.oldValue,
-        newValue: mut.newValue
-      });
+    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/types/vc/index.d.ts

@@ -7,6 +7,7 @@ declare global {
 export declare class VCObserverWrapper implements VCObserverInterface {
     private oldVCObserver;
     private newVCObserver;
+    private ssrPlaceholderHandler;
     constructor(opts?: VCObserverOptions);
     private processSsrAbortListeners;
     start({ startTime, experienceKey }: {
@@ -19,6 +20,7 @@ export declare class VCObserverWrapper implements VCObserverInterface {
     setSSRElement(element: HTMLElement): void;
     setReactRootRenderStart(startTime: number): void;
     setReactRootRenderStop(stopTime: number): void;
+    collectSSRPlaceholders(): void;
 }
 export declare function isEnvironmentSupported(): boolean;
 export declare function getVCObserver(opts?: VCObserverOptions): VCObserverInterface;

package/dist/types/vc/types.d.ts

@@ -30,6 +30,7 @@ export type VCObserverOptions = {
         v: boolean;
         h: boolean;
     };
+    ssrPlaceholderHandler?: any;
 };
 export interface VCObserverInterface {
     start(startArg: {
@@ -42,4 +43,5 @@ export interface VCObserverInterface {
     setSSRElement(element: HTMLElement): void;
     setReactRootRenderStart(startTime?: number): void;
     setReactRootRenderStop(stopTime?: number): void;
+    collectSSRPlaceholders?(): void;
 }

package/dist/types/vc/vc-observer/index.d.ts

@@ -74,6 +74,7 @@ export declare class VCObserver implements VCObserverInterface {
     setSSRElement(element: HTMLElement): void;
     setReactRootRenderStart(startTime?: number): void;
     setReactRootRenderStop(stopTime?: number): void;
+    collectSSRPlaceholders(): void;
     private handleUpdate;
     private setAbortReason;
     private resetState;

package/dist/types/vc/vc-observer/observers/index.d.ts

@@ -1,3 +1,4 @@
+import { SSRPlaceholderHandlers } from './ssr-placeholders';
 import type { BrowserObservers, Callback } from './types';
 export type { ObservedMutationType } from './types';
 export type SelectorConfig = {
@@ -16,6 +17,7 @@ type ConstructorOptions = {
             h: boolean;
         };
     };
+    ssrPlaceholderHandler?: SSRPlaceholderHandlers | null;
 };
 export declare class Observers implements BrowserObservers {
     private intersectionObserver;

package/dist/types/vc/vc-observer/observers/ssr-placeholders/index.d.ts

@@ -25,6 +25,12 @@ export declare class SSRPlaceholderHandlers {
     private getPlaceholderId;
     private getPlaceholderReplacementId;
     clear(): void;
+    private collectPlaceholdersInternal;
+    /**
+     * Added this method to be utilised for testing purposes.
+     * In production it collection placeholder should only happens on constructor
+     */
+    collectExistingPlaceholders(): void;
     isPlaceholder(element: HTMLElement): boolean;
     isPlaceholderReplacement(element: HTMLElement): boolean;
     isPlaceholderIgnored(element: HTMLElement): boolean;