@atlaskit/react-ufo 2.15.0 → 2.16.1

package/dist/es2019/create-payload/index.js

@@ -1,6 +1,7 @@
 import Bowser from 'bowser-ultralight';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getLighthouseMetrics } from '../additional-payload';
+import { CHRReporter } from '../assets';
 import * as bundleEvalTiming from '../bundle-eval-timing';
 import coinflip from '../coinflip';
 import { REACT_UFO_VERSION } from '../common/constants';
@@ -298,6 +299,33 @@ function getSSRProperties(type) {
     'ssr:featureFlags': getSSRFeatureFlags(type)
   };
 }
+const getAssetsMetrics = (interaction, resourceTimings) => {
+  try {
+    const config = getConfig();
+    const {
+      type
+    } = interaction;
+    const isCHREnabled = fg('ufo_chr_config');
+    const allowedTypes = ['page_load', 'transition'];
+    const assetsClassification = config === null || config === void 0 ? void 0 : config.assetsClassification;
+    if (!isCHREnabled || !allowedTypes.includes(type) || !assetsClassification) {
+      // Skip if: FG disabled, not allowed type or assetsClassification isn't configured
+      return {};
+    }
+    const reporter = new CHRReporter();
+    const assets = reporter.get(resourceTimings, assetsClassification);
+    if (assets) {
+      // Only add assets in case it exists
+      return {
+        'event:assets': assets
+      };
+    }
+    return {};
+  } catch (error) {
+    // Skip CHR in case of error
+    return {};
+  }
+};
 const getBrowserMetadata = () => {
   const data = {};
   const now = new Date();
@@ -723,7 +751,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
     };
   };
   // Detailed payload. Page visibility = visible
-  const getDetailedInteractionMetrics = () => {
+  const getDetailedInteractionMetrics = resourceTimings => {
     if (experimental || window.__UFO_COMPACT_PAYLOAD__ || !isDetailedPayload) {
       return {};
     }
@@ -744,7 +772,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
       requestInfo: optimizeRequestInfo(interaction.requestInfo, start),
       customTimings: optimizeCustomTimings(interaction.customTimings, start),
       bundleEvalTimings: objectToArray(getBundleEvalTimings(start)),
-      resourceTimings: objectToArray(getResourceTimings(start, end))
+      resourceTimings: objectToArray(resourceTimings)
     };
   };
   // Page load & detailed payload
@@ -765,6 +793,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
     regularTTAI = getTTAI(interaction);
   }
   const newUFOName = sanitizeUfoName(ufoName);
+  const resourceTimings = getResourceTimings(start, end);
   const payload = {
     actionSubject: 'experience',
     action: 'measured',
@@ -789,6 +818,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
         // root
         ...getBrowserMetadata(),
         ...getSSRProperties(type),
+        ...getAssetsMetrics(interaction, resourceTimings),
         ...getPPSMetrics(interaction),
         ...getPaintMetrics(type),
         ...getNavigationMetrics(type),
@@ -831,7 +861,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
           reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start),
           ...labelStack,
           ...getPageLoadInteractionMetrics(),
-          ...getDetailedInteractionMetrics(),
+          ...getDetailedInteractionMetrics(resourceTimings),
           ...getPageLoadDetailedInteractionMetrics(),
           ...getBm3TrackerTimings(interaction),
           'metric:ttai': experimental ? regularTTAI || expTTAI : undefined,

package/dist/es2019/interaction-id-context/index.js

@@ -1,21 +1,4 @@
 import { createContext } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
-function getGlobalDefaultInteractionID() {
-  if (!fg('platform_ufo_AFO-3379_fix_default_interaction')) {
-    return {
-      current: null
-    };
-  }
-  const ref = globalThis.__react_ufo__DefaultInteractionID;
-  if (ref) {
-    return ref;
-  }
-  const nextRef = {
-    current: null
-  };
-  globalThis.__react_ufo__DefaultInteractionID = nextRef;
-  return nextRef;
-}
 
 // Same structure as react's useRef.
 // This allows modals to use a ref to scope their value
@@ -25,7 +8,9 @@ function getGlobalDefaultInteractionID() {
 // The default InteractionID object is a global singleton
 // It's the one that holds the root value used in routing,
 // and is overwritten when we have new interactions start.
-export const DefaultInteractionID = getGlobalDefaultInteractionID();
+export const DefaultInteractionID = {
+  current: null
+};
 
 // We use a context to allow modals to have their own lifecycle
 export default /*#__PURE__*/createContext(DefaultInteractionID);

package/dist/es2019/vc/vc-observer/heatmap/heatmap.js

@@ -111,6 +111,7 @@ export class MultiRevisionHeatmap {
   }
   processData({
     VCParts,
+    VCCalculationMethods,
     ssr = UNUSED_SECTOR
   }) {
     return this.heatmaps.map((heatmap, i) => {
@@ -149,24 +150,15 @@ export class MultiRevisionHeatmap {
         }
       }
       const entries = Object.entries(lastUpdate).map(a => [parseInt(a[0], 10), a[1]]).sort((a, b) => a[0] > b[0] ? 1 : -1);
-      const VC = MultiRevisionHeatmap.makeVCReturnObj(VCParts);
-      const VCBox = MultiRevisionHeatmap.makeVCReturnObj(VCParts);
-      entries.reduce((acc = 0, v) => {
-        const VCRatio = v[1] / totalPainted + acc;
-        const time = v[0];
-        VCParts.forEach(value => {
-          if ((VC[value] === null || VC[value] === undefined) && VCRatio >= value / 100) {
-            var _componentsLog$time;
-            VC[value] = time;
-            VCBox[value] = new Set();
-            (_componentsLog$time = componentsLog[time]) === null || _componentsLog$time === void 0 ? void 0 : _componentsLog$time.forEach(v => {
-              var _VCBox$value;
-              return (_VCBox$value = VCBox[value]) === null || _VCBox$value === void 0 ? void 0 : _VCBox$value.add(v.targetName);
-            });
-          }
-        });
-        return VCRatio;
-      }, 0);
+      const {
+        VC,
+        VCBox
+      } = VCCalculationMethods[i]({
+        VCParts,
+        componentsLog,
+        entries,
+        totalPainted
+      });
       const VCEntries = entries.reduce((acc, [timestamp, entryPainted], i) => {
         var _acc$abs, _componentsLog$timest;
         const currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);

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

@@ -253,6 +253,9 @@ export class VCObserver {
       const revisionsData = isMultiHeatmapEnabled && multiHeatmap !== null ? {
         [`${fullPrefix}vc:rev`]: multiHeatmap.getPayloadShapedData({
           VCParts: VCObserver.VCParts.map(v => parseInt(v)),
+          VCCalculationMethods: getRevisions().map(({
+            classifier
+          }) => classifier.VCCalculationMethod),
           ssr,
           clean: !abortReasonInfo
         })

package/dist/es2019/vc/vc-observer/revisions/ViewportUpdateClassifier.js

@@ -7,6 +7,12 @@ export class ViewportUpdateClassifier {
     _defineProperty(this, "__combinedTypes", []);
     _defineProperty(this, "__combinedFilters", []);
   }
+  VCCalculationMethod(_) {
+    return {
+      VC: {},
+      VCBox: {}
+    };
+  }
   mergeConfig() {
     this.__combinedTypes = [...this.types, ...((this === null || this === void 0 ? void 0 : this.__combinedTypes) || [])];
     const previousFilters = this.removedFilters.length === 0 ? this.__combinedFilters : this.__combinedFilters.filter(filter => !this.removedFilters.includes(filter.name));

package/dist/es2019/vc/vc-observer/revisions/fy24_01.js

@@ -2,6 +2,35 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { ViewportUpdateClassifier } from './ViewportUpdateClassifier';
 const legacyIgnoreReasons = ['image', 'ssr-hydration', 'editor-lazy-node-view', 'editor-container-mutation'];
 export class FY24_01Classifier extends ViewportUpdateClassifier {
+  VCCalculationMethod({
+    VCParts,
+    entries,
+    totalPainted,
+    componentsLog
+  }) {
+    const VC = {};
+    const VCBox = {};
+    entries.reduce((acc = 0, v) => {
+      const VCRatio = v[1] / totalPainted + acc;
+      const time = v[0];
+      VCParts.forEach(value => {
+        if ((VC[value] === null || VC[value] === undefined) && VCRatio >= value / 100) {
+          var _componentsLog$time;
+          VC[value] = time;
+          VCBox[value] = new Set();
+          (_componentsLog$time = componentsLog[time]) === null || _componentsLog$time === void 0 ? void 0 : _componentsLog$time.forEach(v => {
+            var _VCBox$value;
+            return (_VCBox$value = VCBox[value]) === null || _VCBox$value === void 0 ? void 0 : _VCBox$value.add(v.targetName);
+          });
+        }
+      });
+      return VCRatio;
+    }, 0);
+    return {
+      VC,
+      VCBox
+    };
+  }
   constructor() {
     super();
     _defineProperty(this, "revision", 'fy24.01');

package/dist/esm/assets/index.js

@@ -0,0 +1,89 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { calculateTransferType, DISK_KEY, MEMORY_KEY, NETWORK_KEY, round } from './utils';
+export var CHRSummary = /*#__PURE__*/function () {
+  function CHRSummary() {
+    _classCallCheck(this, CHRSummary);
+    _defineProperty(this, "bundles", _defineProperty(_defineProperty(_defineProperty({}, MEMORY_KEY, 0), DISK_KEY, 0), NETWORK_KEY, 0));
+    _defineProperty(this, "bundlesCount", 0);
+    _defineProperty(this, "size", _defineProperty(_defineProperty(_defineProperty({}, MEMORY_KEY, 0), DISK_KEY, 0), NETWORK_KEY, 0));
+    _defineProperty(this, "sizeTotal", 0);
+  }
+  return _createClass(CHRSummary, [{
+    key: "add",
+    value: function add(asset) {
+      var size = 'size' in asset ? asset.size : undefined;
+      var encodedSize = 'encodedSize' in asset ? Number(asset.encodedSize) : 0;
+      var type = calculateTransferType(asset.type, asset.duration, size);
+      if (type === null) {
+        return;
+      }
+      this.bundles[type] += 1;
+      this.bundlesCount += 1;
+      this.size[type] += encodedSize;
+      this.sizeTotal += encodedSize;
+    }
+  }], [{
+    key: "makePayload",
+    value: function makePayload(summary) {
+      var size = summary.size,
+        bundlesCount = summary.bundlesCount,
+        sizeTotal = summary.sizeTotal;
+      var cachedSize = size[MEMORY_KEY] + size[DISK_KEY];
+      var sizeRatio = round(cachedSize / summary.sizeTotal);
+      return {
+        size: sizeTotal,
+        chr: sizeRatio,
+        count: bundlesCount
+      };
+    }
+  }]);
+}();
+export var CHRReporter = /*#__PURE__*/function () {
+  function CHRReporter() {
+    _classCallCheck(this, CHRReporter);
+    _defineProperty(this, "all", new CHRSummary());
+    _defineProperty(this, "allAtlassian", new CHRSummary());
+    _defineProperty(this, "preloaded", new CHRSummary());
+  }
+  return _createClass(CHRReporter, [{
+    key: "get",
+    value: function get(resourceTimings, assetsClassification) {
+      var _this = this;
+      try {
+        Object.entries(resourceTimings).map(function (_ref) {
+          var _ref2 = _slicedToArray(_ref, 2),
+            label = _ref2[0],
+            entry = _ref2[1];
+          if (assetsClassification.all) {
+            _this.all.add(entry);
+          }
+          if (assetsClassification.allAtlassian({
+            label: label,
+            entry: entry
+          })) {
+            _this.allAtlassian.add(entry);
+          }
+          if (assetsClassification.preloaded({
+            label: label,
+            entry: entry
+          })) {
+            _this.preloaded.add(entry);
+          }
+        });
+        if (this.all.bundlesCount === 0) {
+          return null;
+        }
+        return {
+          all: CHRSummary.makePayload(this.all),
+          allAtlassian: CHRSummary.makePayload(this.allAtlassian),
+          preloaded: CHRSummary.makePayload(this.preloaded)
+        };
+      } catch (error) {
+        return null;
+      }
+    }
+  }]);
+}();

package/dist/esm/assets/utils.js

@@ -0,0 +1,26 @@
+/* Borrowed from https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/performance/browser-metrics/src/plugins/timings/resource.ts */
+export var cacheableTypes = ['script', 'link'];
+export var MEMORY_KEY = 'mem';
+export var DISK_KEY = 'disk';
+export var NETWORK_KEY = 'net';
+export var calculateTransferType = function calculateTransferType(type, duration, size) {
+  if (!cacheableTypes.includes(type)) {
+    return null;
+  }
+  if ((size === undefined || size === 0) && duration === 0) {
+    return MEMORY_KEY;
+  }
+  if (size === 0 && duration > 0) {
+    return DISK_KEY;
+  }
+  if (size === undefined) {
+    return null;
+  }
+  return NETWORK_KEY;
+};
+export var round = function round(n) {
+  if (isNaN(n)) {
+    return 0;
+  }
+  return Math.round(n * 10000) / 10000;
+};

package/dist/esm/common/assets/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/create-payload/index.js

@@ -11,6 +11,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import Bowser from 'bowser-ultralight';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getLighthouseMetrics } from '../additional-payload';
+import { CHRReporter } from '../assets';
 import * as bundleEvalTiming from '../bundle-eval-timing';
 import coinflip from '../coinflip';
 import { REACT_UFO_VERSION } from '../common/constants';
@@ -304,6 +305,31 @@ function getSSRProperties(type) {
     'ssr:featureFlags': getSSRFeatureFlags(type)
   };
 }
+var getAssetsMetrics = function getAssetsMetrics(interaction, resourceTimings) {
+  try {
+    var config = getConfig();
+    var type = interaction.type;
+    var isCHREnabled = fg('ufo_chr_config');
+    var allowedTypes = ['page_load', 'transition'];
+    var assetsClassification = config === null || config === void 0 ? void 0 : config.assetsClassification;
+    if (!isCHREnabled || !allowedTypes.includes(type) || !assetsClassification) {
+      // Skip if: FG disabled, not allowed type or assetsClassification isn't configured
+      return {};
+    }
+    var reporter = new CHRReporter();
+    var assets = reporter.get(resourceTimings, assetsClassification);
+    if (assets) {
+      // Only add assets in case it exists
+      return {
+        'event:assets': assets
+      };
+    }
+    return {};
+  } catch (error) {
+    // Skip CHR in case of error
+    return {};
+  }
+};
 var getBrowserMetadata = function getBrowserMetadata() {
   var data = {};
   var now = new Date();
@@ -718,7 +744,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
     });
   };
   // Detailed payload. Page visibility = visible
-  var getDetailedInteractionMetrics = function getDetailedInteractionMetrics() {
+  var getDetailedInteractionMetrics = function getDetailedInteractionMetrics(resourceTimings) {
     if (experimental || window.__UFO_COMPACT_PAYLOAD__ || !isDetailedPayload) {
       return {};
     }
@@ -739,7 +765,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
       requestInfo: optimizeRequestInfo(interaction.requestInfo, start),
       customTimings: optimizeCustomTimings(interaction.customTimings, start),
       bundleEvalTimings: objectToArray(getBundleEvalTimings(start)),
-      resourceTimings: objectToArray(getResourceTimings(start, end))
+      resourceTimings: objectToArray(resourceTimings)
     };
   };
   // Page load & detailed payload
@@ -760,6 +786,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
     regularTTAI = getTTAI(interaction);
   }
   var newUFOName = sanitizeUfoName(ufoName);
+  var resourceTimings = getResourceTimings(start, end);
   var payload = {
     actionSubject: 'experience',
     action: 'measured',
@@ -767,7 +794,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
     source: 'measured',
     tags: ['observability'],
     attributes: {
-      properties: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+      properties: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
         // basic
         'event:hostname': ((_window$location = window.location) === null || _window$location === void 0 ? void 0 : _window$location.hostname) || 'unknown',
         'event:product': config.product,
@@ -781,7 +808,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
         'event:region': config.region || 'unknown',
         'experience:key': experimental ? 'custom.experimental-interaction-metrics' : 'custom.interaction-metrics',
         'experience:name': newUFOName
-      }, getBrowserMetadata()), getSSRProperties(type)), getPPSMetrics(interaction)), getPaintMetrics(type)), getNavigationMetrics(type)), getVCMetrics(interaction)), experimental ? getExperimentalVCMetrics(interaction) : undefined), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), getStylesheetMetrics()), getErrorCounts(interaction)), {}, {
+      }, getBrowserMetadata()), getSSRProperties(type)), getAssetsMetrics(interaction, resourceTimings)), getPPSMetrics(interaction)), getPaintMetrics(type)), getNavigationMetrics(type)), getVCMetrics(interaction)), experimental ? getExperimentalVCMetrics(interaction) : undefined), (_config$additionalPay = config.additionalPayloadData) === null || _config$additionalPay === void 0 ? void 0 : _config$additionalPay.call(config, interaction)), getTracingContextData(interaction)), getStylesheetMetrics()), getErrorCounts(interaction)), {}, {
         interactionMetrics: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
           namePrefix: config.namePrefix || '',
           segmentPrefix: config.segmentPrefix || '',
@@ -813,7 +840,7 @@ function createInteractionMetricsPayload(interaction, interactionId, experimenta
           marks: optimizeMarks(interaction.marks),
           customData: optimizeCustomData(interaction),
           reactProfilerTimings: optimizeReactProfilerTimings(interaction.reactProfilerTimings, start)
-        }, labelStack), getPageLoadInteractionMetrics()), getDetailedInteractionMetrics()), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)), {}, {
+        }, labelStack), getPageLoadInteractionMetrics()), getDetailedInteractionMetrics(resourceTimings)), getPageLoadDetailedInteractionMetrics()), getBm3TrackerTimings(interaction)), {}, {
           'metric:ttai': experimental ? regularTTAI || expTTAI : undefined,
           'metric:experimental:ttai': expTTAI
         }),

package/dist/esm/interaction-id-context/index.js

@@ -1,21 +1,4 @@
 import { createContext } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
-function getGlobalDefaultInteractionID() {
-  if (!fg('platform_ufo_AFO-3379_fix_default_interaction')) {
-    return {
-      current: null
-    };
-  }
-  var ref = globalThis.__react_ufo__DefaultInteractionID;
-  if (ref) {
-    return ref;
-  }
-  var nextRef = {
-    current: null
-  };
-  globalThis.__react_ufo__DefaultInteractionID = nextRef;
-  return nextRef;
-}
 
 // Same structure as react's useRef.
 // This allows modals to use a ref to scope their value
@@ -25,7 +8,9 @@ function getGlobalDefaultInteractionID() {
 // The default InteractionID object is a global singleton
 // It's the one that holds the root value used in routing,
 // and is overwritten when we have new interactions start.
-export var DefaultInteractionID = getGlobalDefaultInteractionID();
+export var DefaultInteractionID = {
+  current: null
+};
 
 // We use a context to allow modals to have their own lifecycle
 export default /*#__PURE__*/createContext(DefaultInteractionID);

package/dist/esm/vc/vc-observer/heatmap/heatmap.js

@@ -123,6 +123,7 @@ export var MultiRevisionHeatmap = /*#__PURE__*/function () {
     value: function processData(_ref4) {
       var _this3 = this;
       var VCParts = _ref4.VCParts,
+        VCCalculationMethods = _ref4.VCCalculationMethods,
         _ref4$ssr = _ref4.ssr,
         ssr = _ref4$ssr === void 0 ? UNUSED_SECTOR : _ref4$ssr;
       return this.heatmaps.map(function (heatmap, i) {
@@ -165,26 +166,14 @@ export var MultiRevisionHeatmap = /*#__PURE__*/function () {
         }).sort(function (a, b) {
           return a[0] > b[0] ? 1 : -1;
         });
-        var VC = MultiRevisionHeatmap.makeVCReturnObj(VCParts);
-        var VCBox = MultiRevisionHeatmap.makeVCReturnObj(VCParts);
-        entries.reduce(function () {
-          var acc = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-          var v = arguments.length > 1 ? arguments[1] : undefined;
-          var VCRatio = v[1] / totalPainted + acc;
-          var time = v[0];
-          VCParts.forEach(function (value) {
-            if ((VC[value] === null || VC[value] === undefined) && VCRatio >= value / 100) {
-              var _componentsLog$time;
-              VC[value] = time;
-              VCBox[value] = new Set();
-              (_componentsLog$time = componentsLog[time]) === null || _componentsLog$time === void 0 || _componentsLog$time.forEach(function (v) {
-                var _VCBox$value;
-                return (_VCBox$value = VCBox[value]) === null || _VCBox$value === void 0 ? void 0 : _VCBox$value.add(v.targetName);
-              });
-            }
-          });
-          return VCRatio;
-        }, 0);
+        var _VCCalculationMethods = VCCalculationMethods[i]({
+            VCParts: VCParts,
+            componentsLog: componentsLog,
+            entries: entries,
+            totalPainted: totalPainted
+          }),
+          VC = _VCCalculationMethods.VC,
+          VCBox = _VCCalculationMethods.VCBox;
         var VCEntries = entries.reduce(function (acc, _ref5, i) {
           var _acc$abs, _componentsLog$timest;
           var _ref6 = _slicedToArray(_ref5, 2),

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

@@ -249,6 +249,10 @@ export var VCObserver = /*#__PURE__*/function () {
         VCParts: VCObserver.VCParts.map(function (v) {
           return parseInt(v);
         }),
+        VCCalculationMethods: getRevisions().map(function (_ref8) {
+          var classifier = _ref8.classifier;
+          return classifier.VCCalculationMethod;
+        }),
         ssr: ssr,
         clean: !abortReasonInfo
       })) : null;
@@ -295,13 +299,13 @@ export var VCObserver = /*#__PURE__*/function () {
         });
       }
     });
-    _defineProperty(this, "onViewportChangeDetected", function (_ref9) {
-      var element = _ref9.element,
-        type = _ref9.type,
-        ignoreReason = _ref9.ignoreReason,
-        timestamp = _ref9.timestamp,
-        targetName = _ref9.targetName,
-        intersectionRect = _ref9.intersectionRect;
+    _defineProperty(this, "onViewportChangeDetected", function (_ref10) {
+      var element = _ref10.element,
+        type = _ref10.type,
+        ignoreReason = _ref10.ignoreReason,
+        timestamp = _ref10.timestamp,
+        targetName = _ref10.targetName,
+        intersectionRect = _ref10.intersectionRect;
       if (_this.multiHeatmap === null) {
         return;
       }
@@ -383,10 +387,10 @@ export var VCObserver = /*#__PURE__*/function () {
       var unbinds = attachAbortListeners(window, _this.viewport, _this.abortReasonCallback);
       if ((_window = window) !== null && _window !== void 0 && _window.__SSR_ABORT_LISTENERS__) {
         var _window2;
-        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref10) {
-          var _ref11 = _slicedToArray(_ref10, 2),
-            key = _ref11[0],
-            time = _ref11[1];
+        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref11) {
+          var _ref12 = _slicedToArray(_ref11, 2),
+            key = _ref12[0],
+            time = _ref12[1];
           if (time) {
             _this.abortReasonCallback(key, time);
           }
@@ -421,8 +425,8 @@ export var VCObserver = /*#__PURE__*/function () {
   }
   return _createClass(VCObserver, [{
     key: "start",
-    value: function start(_ref12) {
-      var startTime = _ref12.startTime;
+    value: function start(_ref13) {
+      var startTime = _ref13.startTime;
       this.active = true;
       if (this.observers.isBrowserSupported()) {
         this.setViewportSize();
@@ -444,12 +448,12 @@ export var VCObserver = /*#__PURE__*/function () {
   }, {
     key: "getIgnoredElements",
     value: function getIgnoredElements(componentsLog) {
-      return Object.values(componentsLog).flat().filter(function (_ref13) {
-        var ignoreReason = _ref13.ignoreReason;
+      return Object.values(componentsLog).flat().filter(function (_ref14) {
+        var ignoreReason = _ref14.ignoreReason;
         return Boolean(ignoreReason);
-      }).map(function (_ref14) {
-        var targetName = _ref14.targetName,
-          ignoreReason = _ref14.ignoreReason;
+      }).map(function (_ref15) {
+        var targetName = _ref15.targetName,
+          ignoreReason = _ref15.ignoreReason;
         return {
           targetName: targetName,
           ignoreReason: ignoreReason
@@ -570,12 +574,12 @@ export var VCObserver = /*#__PURE__*/function () {
     }
   }], [{
     key: "calculateVC",
-    value: function calculateVC(_ref15) {
-      var heatmap = _ref15.heatmap,
-        _ref15$ssr = _ref15.ssr,
-        ssr = _ref15$ssr === void 0 ? UNUSED_SECTOR : _ref15$ssr,
-        componentsLog = _ref15.componentsLog,
-        viewport = _ref15.viewport;
+    value: function calculateVC(_ref16) {
+      var heatmap = _ref16.heatmap,
+        _ref16$ssr = _ref16.ssr,
+        ssr = _ref16$ssr === void 0 ? UNUSED_SECTOR : _ref16$ssr,
+        componentsLog = _ref16.componentsLog,
+        viewport = _ref16.viewport;
       var lastUpdate = {};
       var totalPainted = 0;
       if (ssr !== UNUSED_SECTOR) {
@@ -644,11 +648,11 @@ export var VCObserver = /*#__PURE__*/function () {
         });
         return VCRatio;
       }, 0);
-      var VCEntries = entries.reduce(function (acc, _ref16, i) {
+      var VCEntries = entries.reduce(function (acc, _ref17, i) {
         var _acc$abs, _componentsLog$timest, _acc$rel$vc, _acc$rel;
-        var _ref17 = _slicedToArray(_ref16, 2),
-          timestamp = _ref17[0],
-          entryPainted = _ref17[1];
+        var _ref18 = _slicedToArray(_ref17, 2),
+          timestamp = _ref18[0],
+          entryPainted = _ref18[1];
         var currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
         var currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
         var logEntry = (_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.map(function (v) {

package/dist/esm/vc/vc-observer/revisions/ViewportUpdateClassifier.js

@@ -12,6 +12,14 @@ export var ViewportUpdateClassifier = /*#__PURE__*/function () {
     _defineProperty(this, "__combinedFilters", []);
   }
   return _createClass(ViewportUpdateClassifier, [{
+    key: "VCCalculationMethod",
+    value: function VCCalculationMethod(_) {
+      return {
+        VC: {},
+        VCBox: {}
+      };
+    }
+  }, {
     key: "mergeConfig",
     value: function mergeConfig() {
       var _this = this;