@atlaskit/react-ufo 3.14.5 → 3.14.7

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 3.14.7
+
+### Patch Changes
+
+- [#179438](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/179438)
+  [`b0d336b1f78b3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b0d336b1f78b3) -
+  AFO-4081 support ssr-placeholder for ttvc v3
+
+## 3.14.6
+
+### Patch Changes
+
+- [#179156](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/179156)
+  [`81f5605b925fc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/81f5605b925fc) -
+  AFO-4081 ufo vc ignore if no layout shift marker
+
 ## 3.14.5
 
 ### Patch Changes

package/dist/cjs/vc/index.js

@@ -9,8 +9,8 @@ exports.getVCObserver = getVCObserver;
 exports.isEnvironmentSupported = isEnvironmentSupported;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _config = require("../config");
@@ -18,22 +18,45 @@ var _noOpVcObserver = require("./no-op-vc-observer");
 var _vcObserver = require("./vc-observer");
 var _vcObserverNew = _interopRequireDefault(require("./vc-observer-new"));
 var _rllPlaceholders = require("./vc-observer/observers/rll-placeholders");
+var _ssrPlaceholders = require("./vc-observer/observers/ssr-placeholders");
 var _process;
 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; }
 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; }
 var VCObserverWrapper = exports.VCObserverWrapper = /*#__PURE__*/function () {
   function VCObserverWrapper() {
+    var _opts$ssrEnablePageLa, _opts$disableSizeAndP;
     var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     (0, _classCallCheck2.default)(this, VCObserverWrapper);
     this.newVCObserver = null;
     this.oldVCObserver = null;
+
+    // Initialize SSR placeholder handler once
+    this.ssrPlaceholderHandler = new _ssrPlaceholders.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 ((0, _config.isVCRevisionEnabled)('fy25.03')) {
+      var _opts$ssrEnablePageLa2, _opts$disableSizeAndP2;
       this.newVCObserver = new _vcObserverNew.default({
-        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 ((0, _config.isVCRevisionEnabled)('fy25.01') || (0, _config.isVCRevisionEnabled)('fy25.02')) {
-      this.oldVCObserver = new _vcObserver.VCObserver(opts);
+      this.oldVCObserver = new _vcObserver.VCObserver(_objectSpread(_objectSpread({}, opts), {}, {
+        ssrPlaceholderHandler: this.ssrPlaceholderHandler
+      }));
     }
   }
 
@@ -92,6 +115,8 @@ var VCObserverWrapper = exports.VCObserverWrapper = /*#__PURE__*/function () {
         (_this$newVCObserver2 = this.newVCObserver) === null || _this$newVCObserver2 === void 0 || _this$newVCObserver2.stop();
       }
       _rllPlaceholders.RLLPlaceholderHandlers.getInstance().reset();
+      // Clear shared SSR placeholder handler
+      this.ssrPlaceholderHandler.clear();
     }
   }, {
     key: "getVCRawData",
@@ -165,20 +190,28 @@ var VCObserverWrapper = exports.VCObserverWrapper = /*#__PURE__*/function () {
   }, {
     key: "setSSRElement",
     value: function setSSRElement(element) {
-      var _this$oldVCObserver5;
+      var _this$oldVCObserver5, _this$newVCObserver4;
       (_this$oldVCObserver5 = this.oldVCObserver) === null || _this$oldVCObserver5 === void 0 || _this$oldVCObserver5.setSSRElement(element);
+      (_this$newVCObserver4 = this.newVCObserver) === null || _this$newVCObserver4 === void 0 || _this$newVCObserver4.setReactRootElement(element);
     }
   }, {
     key: "setReactRootRenderStart",
     value: function setReactRootRenderStart(startTime) {
-      var _this$oldVCObserver6;
+      var _this$oldVCObserver6, _this$newVCObserver5;
       (_this$oldVCObserver6 = this.oldVCObserver) === null || _this$oldVCObserver6 === void 0 || _this$oldVCObserver6.setReactRootRenderStart(startTime || performance.now());
+      (_this$newVCObserver5 = this.newVCObserver) === null || _this$newVCObserver5 === void 0 || _this$newVCObserver5.setReactRootRenderStart(startTime || performance.now());
     }
   }, {
     key: "setReactRootRenderStop",
     value: function setReactRootRenderStop(stopTime) {
-      var _this$oldVCObserver7;
+      var _this$oldVCObserver7, _this$newVCObserver6;
       (_this$oldVCObserver7 = this.oldVCObserver) === null || _this$oldVCObserver7 === void 0 || _this$oldVCObserver7.setReactRootRenderStop(stopTime || performance.now());
+      (_this$newVCObserver6 = this.newVCObserver) === null || _this$newVCObserver6 === void 0 || _this$newVCObserver6.setReactRootRenderStop(stopTime || performance.now());
+    }
+  }, {
+    key: "collectSSRPlaceholders",
+    value: function collectSSRPlaceholders() {
+      this.ssrPlaceholderHandler.collectExistingPlaceholders();
     }
   }]);
 }(); // Some products set this variable to indicate it is running in SSR

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

@@ -455,7 +455,8 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
     this.devToolsEnabled = options.devToolsEnabled || false;
     this.oldDomUpdatesEnabled = options.oldDomUpdates || false;
     var ssrEnablePageLayoutPlaceholder = options.ssrEnablePageLayoutPlaceholder,
-      disableSizeAndPositionCheck = options.disableSizeAndPositionCheck;
+      disableSizeAndPositionCheck = options.disableSizeAndPositionCheck,
+      ssrPlaceholderHandler = options.ssrPlaceholderHandler;
     this.observers = new _observers.Observers({
       selectorConfig: options.selectorConfig || {
         id: false,
@@ -467,7 +468,8 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
       SSRConfig: {
         enablePageLayoutPlaceholder: ssrEnablePageLayoutPlaceholder || false,
         disableSizeAndPositionCheck: disableSizeAndPositionCheck
-      }
+      },
+      ssrPlaceholderHandler: ssrPlaceholderHandler
     });
     this.heatmap = !(0, _config.isVCRevisionEnabled)('fy25.01') ? [] : this.getCleanHeatmap();
     this.heatmapNext = this.getCleanHeatmap();
@@ -527,6 +529,12 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
       var stopTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : performance.now();
       this.observers.setReactRootRenderStop(stopTime);
     }
+  }, {
+    key: "collectSSRPlaceholders",
+    value: function collectSSRPlaceholders() {
+      // This is handled by the shared SSRPlaceholderHandlers in VCObserverWrapper
+      // Individual observers don't need to implement this
+    }
   }, {
     key: "setAbortReason",
     value: function setAbortReason(abort, timestamp) {

package/dist/cjs/vc/vc-observer/observers/index.js

@@ -32,9 +32,7 @@ function isElementVisible(target) {
 }
 var Observers = exports.Observers = /*#__PURE__*/function () {
   function Observers(opts) {
-    var _this = this,
-      _opts$SSRConfig,
-      _opts$SSRConfig2;
+    var _this = this;
     (0, _classCallCheck2.default)(this, Observers);
     (0, _defineProperty2.default)(this, "observedMutations", new WeakMap());
     (0, _defineProperty2.default)(this, "elementsInView", new Set());
@@ -74,10 +72,17 @@ var Observers = exports.Observers = /*#__PURE__*/function () {
     this.selectorConfig = _objectSpread(_objectSpread({}, this.selectorConfig), opts.selectorConfig);
     this.intersectionObserver = this.getIntersectionObserver();
     this.mutationObserver = this.getMutationObserver();
-    this.ssrPlaceholderHandler = new _ssrPlaceholders.SSRPlaceholderHandlers({
-      enablePageLayoutPlaceholder: (_opts$SSRConfig = opts.SSRConfig) === null || _opts$SSRConfig === void 0 ? void 0 : _opts$SSRConfig.enablePageLayoutPlaceholder,
-      disableSizeAndPositionCheck: (_opts$SSRConfig2 = opts.SSRConfig) === null || _opts$SSRConfig2 === void 0 ? void 0 : _opts$SSRConfig2.disableSizeAndPositionCheck
-    });
+
+    // Use shared SSR placeholder handler if provided, otherwise create new one
+    if (opts.ssrPlaceholderHandler) {
+      this.ssrPlaceholderHandler = opts.ssrPlaceholderHandler;
+    } else {
+      var _opts$SSRConfig, _opts$SSRConfig2;
+      this.ssrPlaceholderHandler = new _ssrPlaceholders.SSRPlaceholderHandlers({
+        enablePageLayoutPlaceholder: (_opts$SSRConfig = opts.SSRConfig) === null || _opts$SSRConfig === void 0 ? void 0 : _opts$SSRConfig.enablePageLayoutPlaceholder,
+        disableSizeAndPositionCheck: (_opts$SSRConfig2 = opts.SSRConfig) === null || _opts$SSRConfig2 === void 0 ? void 0 : _opts$SSRConfig2.disableSizeAndPositionCheck
+      });
+    }
   }
   return (0, _createClass2.default)(Observers, [{
     key: "isBrowserSupported",

package/dist/cjs/vc/vc-observer/observers/ssr-placeholders/index.js

@@ -111,32 +111,8 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
     this.disableSizeAndPositionCheck = disableSizeAndPositionCheck;
     if (window.document) {
       try {
-        var selector = this.enablePageLayoutPlaceholder ? '[data-ssr-placeholder],[data-testid="page-layout.root"]' : '[data-ssr-placeholder]';
-        var existingElements = document.querySelectorAll(selector);
-        existingElements.forEach(function (el) {
-          var placeholderId = el instanceof HTMLElement && _this.getPlaceholderId(el);
-          if (placeholderId) {
-            var _window$__SSR_PLACEHO, _this$intersectionObs2;
-            var width = -1;
-            var height = -1;
-            var x = -1;
-            var y = -1;
-            var boundingClientRect = (_window$__SSR_PLACEHO = window.__SSR_PLACEHOLDERS_DIMENSIONS__) === null || _window$__SSR_PLACEHO === void 0 ? void 0 : _window$__SSR_PLACEHO[placeholderId];
-            if (boundingClientRect) {
-              width = boundingClientRect.width;
-              height = boundingClientRect.height;
-              x = boundingClientRect.x;
-              y = boundingClientRect.y;
-            }
-            _this.staticPlaceholders.set(placeholderId, {
-              width: width,
-              height: height,
-              x: x,
-              y: y
-            });
-            (_this$intersectionObs2 = _this.intersectionObserver) === null || _this$intersectionObs2 === void 0 || _this$intersectionObs2.observe(el);
-          }
-        });
+        // Collect initial placeholders using SSR dimensions
+        this.collectPlaceholdersInternal();
       } catch (e) {} finally {
         delete window.__SSR_PLACEHOLDERS_DIMENSIONS__;
       }
@@ -150,6 +126,66 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
       this.getSizeCallbacks = new Map();
       this.reactValidateCallbacks = new Map();
     }
+  }, {
+    key: "collectPlaceholdersInternal",
+    value: function collectPlaceholdersInternal() {
+      var _this2 = this;
+      var selector = this.enablePageLayoutPlaceholder ? '[data-ssr-placeholder],[data-testid="page-layout.root"]' : '[data-ssr-placeholder]';
+      var existingElements = document.querySelectorAll(selector);
+      existingElements.forEach(function (el) {
+        var placeholderId = el instanceof HTMLElement && _this2.getPlaceholderId(el);
+        if (placeholderId && !_this2.staticPlaceholders.has(placeholderId)) {
+          var _window$__SSR_PLACEHO, _this2$intersectionOb;
+          var width = -1;
+          var height = -1;
+          var x = -1;
+          var y = -1;
+
+          // Use SSR dimensions from window global if available
+          var boundingClientRect = (_window$__SSR_PLACEHO = window.__SSR_PLACEHOLDERS_DIMENSIONS__) === null || _window$__SSR_PLACEHO === void 0 ? void 0 : _window$__SSR_PLACEHO[placeholderId];
+          if (boundingClientRect) {
+            width = boundingClientRect.width;
+            height = boundingClientRect.height;
+            x = boundingClientRect.x;
+            y = boundingClientRect.y;
+          } else {
+            // Fallback to current bounding rect if SSR dimensions not available
+            var rect = el.getBoundingClientRect();
+            width = rect.width;
+            height = rect.height;
+            x = rect.x;
+            y = rect.y;
+          }
+          _this2.staticPlaceholders.set(placeholderId, {
+            width: width,
+            height: height,
+            x: x,
+            y: y
+          });
+          (_this2$intersectionOb = _this2.intersectionObserver) === null || _this2$intersectionOb === void 0 || _this2$intersectionOb.observe(el);
+        }
+      });
+    }
+
+    /**
+     * Added this method to be utilised for testing purposes.
+     * In production it collection placeholder should only happens on constructor
+     */
+  }, {
+    key: "collectExistingPlaceholders",
+    value: function collectExistingPlaceholders() {
+      if (!window.document) {
+        return;
+      }
+      try {
+        // Collect placeholders using SSR dimensions or fallback to live dimensions
+        this.collectPlaceholdersInternal();
+      } catch (e) {
+        // Silently fail if there are any issues
+      } finally {
+        delete window.__SSR_PLACEHOLDERS_DIMENSIONS__;
+      }
+    }
   }, {
     key: "isPlaceholder",
     value: function isPlaceholder(element) {
@@ -186,44 +222,44 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
   }, {
     key: "checkIfExistedAndSizeMatching",
     value: function checkIfExistedAndSizeMatching(el) {
-      var _this2 = this;
+      var _this3 = this;
       el = this.findNearestPlaceholderContainerIfIgnored(el);
       var id = this.getPlaceholderId(el);
       return new Promise(function (resolve) {
-        if (!_this2.staticPlaceholders.has(id)) {
+        if (!_this3.staticPlaceholders.has(id)) {
           resolve(false);
           return;
         } else {
-          var _this2$intersectionOb;
-          _this2.callbacks.set(id, resolve);
-          (_this2$intersectionOb = _this2.intersectionObserver) === null || _this2$intersectionOb === void 0 || _this2$intersectionOb.observe(el);
+          var _this3$intersectionOb;
+          _this3.callbacks.set(id, resolve);
+          (_this3$intersectionOb = _this3.intersectionObserver) === null || _this3$intersectionOb === void 0 || _this3$intersectionOb.observe(el);
         }
       });
     }
   }, {
     key: "getSize",
     value: function getSize(el) {
-      var _this3 = this;
+      var _this4 = this;
       return new Promise(function (resolve) {
-        var _this3$intersectionOb;
-        _this3.getSizeCallbacks.set(_this3.getPlaceholderId(el), resolve);
-        (_this3$intersectionOb = _this3.intersectionObserver) === null || _this3$intersectionOb === void 0 || _this3$intersectionOb.observe(el);
+        var _this4$intersectionOb;
+        _this4.getSizeCallbacks.set(_this4.getPlaceholderId(el), resolve);
+        (_this4$intersectionOb = _this4.intersectionObserver) === null || _this4$intersectionOb === void 0 || _this4$intersectionOb.observe(el);
       });
     }
   }, {
     key: "validateReactComponentMatchToPlaceholder",
     value: function validateReactComponentMatchToPlaceholder(el) {
-      var _this4 = this;
+      var _this5 = this;
       el = this.findNearestPlaceholderContainerIfIgnored(el);
       var id = this.getPlaceholderReplacementId(el);
       return new Promise(function (resolve) {
-        if (!_this4.staticPlaceholders.has(id)) {
+        if (!_this5.staticPlaceholders.has(id)) {
           resolve(false);
           return;
         } else {
-          var _this4$intersectionOb;
-          _this4.reactValidateCallbacks.set(id, resolve);
-          (_this4$intersectionOb = _this4.intersectionObserver) === null || _this4$intersectionOb === void 0 || _this4$intersectionOb.observe(el);
+          var _this5$intersectionOb;
+          _this5.reactValidateCallbacks.set(id, resolve);
+          (_this5$intersectionOb = _this5.intersectionObserver) === null || _this5$intersectionOb === void 0 || _this5$intersectionOb.observe(el);
         }
       });
     }

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

@@ -13,6 +13,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _ssrPlaceholders = require("../vc-observer/observers/ssr-placeholders");
 var _entriesTimeline = _interopRequireDefault(require("./entries-timeline"));
 var _getElementName2 = _interopRequireDefault(require("./get-element-name"));
 var _fy25_ = _interopRequireDefault(require("./metric-calculator/fy25_03"));
@@ -20,6 +21,11 @@ var _getViewportHeight = _interopRequireDefault(require("./metric-calculator/uti
 var _getViewportWidth = _interopRequireDefault(require("./metric-calculator/utils/get-viewport-width"));
 var _viewportObserver = _interopRequireDefault(require("./viewport-observer"));
 var _windowEventObserver = _interopRequireDefault(require("./window-event-observer"));
+var SSRState = {
+  normal: 1,
+  waitingForFirstRender: 2,
+  ignoring: 3
+};
 var DEFAULT_SELECTOR_CONFIG = {
   id: false,
   testId: true,
@@ -35,9 +41,31 @@ var VCObserverNew = exports.default = /*#__PURE__*/function () {
     (0, _classCallCheck2.default)(this, VCObserverNew);
     (0, _defineProperty2.default)(this, "viewportObserver", null);
     (0, _defineProperty2.default)(this, "windowEventObserver", null);
+    // SSR related properties
+    (0, _defineProperty2.default)(this, "ssrPlaceholderHandler", null);
+    (0, _defineProperty2.default)(this, "ssr", {
+      state: SSRState.normal,
+      reactRootElement: null,
+      renderStart: -1,
+      renderStop: -1
+    });
     this.entriesTimeline = new _entriesTimeline.default();
     this.isPostInteraction = (_config$isPostInterac = config.isPostInteraction) !== null && _config$isPostInterac !== void 0 ? _config$isPostInterac : false;
     this.selectorConfig = (_config$selectorConfi = config.selectorConfig) !== null && _config$selectorConfi !== void 0 ? _config$selectorConfi : DEFAULT_SELECTOR_CONFIG;
+
+    // Use shared SSR placeholder handler if provided, otherwise create new one if feature flag is enabled
+    if (config.ssrPlaceholderHandler) {
+      this.ssrPlaceholderHandler = config.ssrPlaceholderHandler;
+    } else {
+      var _config$SSRConfig$ena, _config$SSRConfig, _config$SSRConfig$dis, _config$SSRConfig2;
+      this.ssrPlaceholderHandler = new _ssrPlaceholders.SSRPlaceholderHandlers({
+        enablePageLayoutPlaceholder: (_config$SSRConfig$ena = (_config$SSRConfig = config.SSRConfig) === null || _config$SSRConfig === void 0 ? void 0 : _config$SSRConfig.enablePageLayoutPlaceholder) !== null && _config$SSRConfig$ena !== void 0 ? _config$SSRConfig$ena : false,
+        disableSizeAndPositionCheck: (_config$SSRConfig$dis = (_config$SSRConfig2 = config.SSRConfig) === null || _config$SSRConfig2 === void 0 ? void 0 : _config$SSRConfig2.disableSizeAndPositionCheck) !== null && _config$SSRConfig$dis !== void 0 ? _config$SSRConfig$dis : {
+          v: false,
+          h: false
+        }
+      });
+    }
     this.viewportObserver = new _viewportObserver.default({
       onChange: function onChange(onChangeArg) {
         var time = onChangeArg.time,
@@ -65,6 +93,13 @@ var VCObserverNew = exports.default = /*#__PURE__*/function () {
             newValue: mutationData === null || mutationData === void 0 ? void 0 : mutationData.newValue
           }
         });
+      },
+      // Pass SSR context to ViewportObserver
+      getSSRState: function getSSRState() {
+        return _this.getSSRState();
+      },
+      getSSRPlaceholderHandler: function getSSRPlaceholderHandler() {
+        return _this.getSSRPlaceholderHandler();
       }
     });
     this.windowEventObserver = new _windowEventObserver.default({
@@ -89,6 +124,14 @@ var VCObserverNew = exports.default = /*#__PURE__*/function () {
         _this2 = this,
         _this$windowEventObse;
       var startTime = _ref2.startTime;
+      // Reset SSR state on start (matches old VCObserver behavior)
+      this.ssr = {
+        state: SSRState.normal,
+        reactRootElement: null,
+        // Reset to null (matches old VCObserver)
+        renderStart: -1,
+        renderStop: -1
+      };
       (_this$viewportObserve = this.viewportObserver) === null || _this$viewportObserve === void 0 || _this$viewportObserve.start();
       if ((_window = window) !== null && _window !== void 0 && _window.__SSR_ABORT_LISTENERS__ && (0, _platformFeatureFlags.fg)('platform_ufo_vc_observer_new_ssr_abort_listener')) {
         var abortListeners = window.__SSR_ABORT_LISTENERS__;
@@ -119,6 +162,47 @@ var VCObserverNew = exports.default = /*#__PURE__*/function () {
       var _this$viewportObserve2, _this$windowEventObse2;
       (_this$viewportObserve2 = this.viewportObserver) === null || _this$viewportObserve2 === void 0 || _this$viewportObserve2.stop();
       (_this$windowEventObse2 = this.windowEventObserver) === null || _this$windowEventObse2 === void 0 || _this$windowEventObse2.stop();
+
+      // Clear SSR state on stop (matches old VCObserver behavior)
+      this.ssr.reactRootElement = null;
+    }
+
+    // SSR related methods
+  }, {
+    key: "setReactRootElement",
+    value: function setReactRootElement(element) {
+      this.ssr.reactRootElement = element;
+    }
+  }, {
+    key: "setReactRootRenderStart",
+    value: function setReactRootRenderStart() {
+      var startTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : performance.now();
+      this.ssr.renderStart = startTime;
+      this.ssr.state = SSRState.waitingForFirstRender;
+    }
+  }, {
+    key: "setReactRootRenderStop",
+    value: function setReactRootRenderStop() {
+      var stopTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : performance.now();
+      this.ssr.renderStop = stopTime;
+    }
+  }, {
+    key: "collectSSRPlaceholders",
+    value: function collectSSRPlaceholders() {
+      // This is handled by the shared SSRPlaceholderHandlers in VCObserverWrapper
+      // Individual observers don't need to implement this
+    }
+
+    // Internal methods for ViewportObserver to access SSR state
+  }, {
+    key: "getSSRState",
+    value: function getSSRState() {
+      return this.ssr;
+    }
+  }, {
+    key: "getSSRPlaceholderHandler",
+    value: function getSSRPlaceholderHandler() {
+      return this.ssrPlaceholderHandler;
     }
   }, {
     key: "addSSR",