@atlaskit/react-ufo 3.10.3 → 3.10.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 3.10.4
+
+### Patch Changes
+
+- [#152686](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/152686)
+  [`d4b943e998cff`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d4b943e998cff) -
+  AFO-3823 improve VCObserverNew perf overhead
+
 ## 3.10.3
 
 ### Patch Changes

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

@@ -7,13 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 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 EntriesTimeline = exports.default = /*#__PURE__*/function () {
   function EntriesTimeline() {
     (0, _classCallCheck2.default)(this, EntriesTimeline);
-    (0, _defineProperty2.default)(this, "unorderedEntries", []);
-    (0, _defineProperty2.default)(this, "sortedEntriesCache", new Map());
     this.unorderedEntries = [];
+    this.sortedEntriesCache = new Map();
   }
   return (0, _createClass2.default)(EntriesTimeline, [{
     key: "push",

package/dist/cjs/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/canvas-pixel.js

@@ -11,15 +11,16 @@ 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _taskYield = _interopRequireDefault(require("../../utils/task-yield"));
 // 24-bit color value
 /**
  * Class responsible for managing a scaled canvas and tracking pixel drawing operations.
- * It uses an OffscreenCanvas for better performance and maintains a mapping between
- * colors and timestamps for pixel counting purposes.
+ * It uses either an OffscreenCanvas (if available) or a regular HTML Canvas for better performance
+ * and maintains a mapping between colors and timestamps for pixel counting purposes.
  */
 var ViewportCanvas = exports.ViewportCanvas = /*#__PURE__*/function () {
-  /** The underlying OffscreenCanvas instance */
+  /** The underlying Canvas instance (either OffscreenCanvas or HTMLCanvasElement) */
 
   /** The 2D rendering context of the canvas */
 
@@ -50,10 +51,8 @@ var ViewportCanvas = exports.ViewportCanvas = /*#__PURE__*/function () {
     this.scaleX = this.scaledWidth / safeViewportWidth;
     this.scaleY = this.scaledHeight / safeViewportHeight;
 
-    // Initialize OffscreenCanvas with scaled dimensions
-    this.canvas = document.createElement('canvas');
-    this.canvas.width = this.scaledWidth;
-    this.canvas.height = this.scaledHeight;
+    // Initialize canvas with scaled dimensions
+    this.canvas = this.createCanvas(this.scaledWidth, this.scaledHeight);
     var ctx = this.canvas.getContext('2d', {
       alpha: false,
       // Disable alpha channel for better performance
@@ -66,9 +65,28 @@ var ViewportCanvas = exports.ViewportCanvas = /*#__PURE__*/function () {
     }
     this.ctx = ctx;
     this.ctx.globalCompositeOperation = 'source-over';
+    if ((0, _platformFeatureFlags.fg)('platform_ufo_use_offscreen_canvas')) {
+      this.ctx.imageSmoothingEnabled = false; // Disable image smoothing for better performance
+    }
     this.clear();
   }
+
+  /**
+   * Creates a canvas instance, falling back to HTMLCanvasElement if OffscreenCanvas is not available
+   * or if the feature flag is disabled
+   */
   return (0, _createClass2.default)(ViewportCanvas, [{
+    key: "createCanvas",
+    value: function createCanvas(width, height) {
+      if (typeof OffscreenCanvas !== 'undefined' && (0, _platformFeatureFlags.fg)('platform_ufo_use_offscreen_canvas')) {
+        return new OffscreenCanvas(width, height);
+      }
+      var canvas = document.createElement('canvas');
+      canvas.width = width;
+      canvas.height = height;
+      return canvas;
+    }
+  }, {
     key: "getScaledDimensions",
     value: function getScaledDimensions() {
       return {

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 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 _vcUtils = require("../../vc-observer/media-wrapper/vc-utils");
 var _isNonVisualStyleMutation = _interopRequireDefault(require("../../vc-observer/observers/non-visual-styles/is-non-visual-style-mutation"));
 var _intersectionObserver = require("./intersection-observer");
@@ -61,139 +62,154 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
     var _this = this;
     var onChange = _ref2.onChange;
     (0, _classCallCheck2.default)(this, ViewportObserver);
-    this.mapVisibleNodeRects = new WeakMap();
-    this.intersectionObserver = (0, _intersectionObserver.createIntersectionObserver)({
-      onEntry: function onEntry(_ref3) {
-        var target = _ref3.target,
-          rect = _ref3.rect,
-          time = _ref3.time,
-          type = _ref3.type,
-          mutationData = _ref3.mutationData;
-        if (!target) {
-          return;
-        }
-        var visible = isElementVisible(target);
-        var lastElementRect = _this.mapVisibleNodeRects.get(target);
-        _this.mapVisibleNodeRects.set(target, rect);
-        onChange({
-          time: time,
-          type: type,
-          elementRef: new WeakRef(target),
-          visible: visible,
-          rect: rect,
-          previousRect: lastElementRect,
-          mutationData: mutationData
-        });
+    (0, _defineProperty2.default)(this, "handleIntersectionEntry", function (_ref3) {
+      var target = _ref3.target,
+        rect = _ref3.rect,
+        time = _ref3.time,
+        type = _ref3.type,
+        mutationData = _ref3.mutationData;
+      if (!target) {
+        return;
       }
+      var visible = isElementVisible(target);
+      var lastElementRect = _this.mapVisibleNodeRects.get(target);
+      _this.mapVisibleNodeRects.set(target, rect);
+      _this.onChange({
+        time: time,
+        type: type,
+        elementRef: new WeakRef(target),
+        visible: visible,
+        rect: rect,
+        previousRect: lastElementRect,
+        mutationData: mutationData
+      });
     });
-    this.mutationObserver = (0, _mutationObserver.default)({
-      onChildListMutation: function onChildListMutation(_ref4) {
-        var _removedNodes$map;
-        var addedNodes = _ref4.addedNodes,
-          removedNodes = _ref4.removedNodes;
-        var removedNodeRects = (_removedNodes$map = removedNodes === null || removedNodes === void 0 ? void 0 : removedNodes.map(function (n) {
-          return _this.mapVisibleNodeRects.get(n);
-        })) !== null && _removedNodes$map !== void 0 ? _removedNodes$map : [];
-        addedNodes.forEach(function (addedNode) {
-          var _this$intersectionObs3;
-          // for (const elem of addedNode.querySelectorAll('*')) {
-          // 	this.intersectionObserver?.watchAndTag(elem, 'mutation:child-element');
-          // }
-
-          var sameDeletedNode = removedNodes.find(function (n) {
-            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;
-          }
-          (_this$intersectionObs3 = _this.intersectionObserver) === null || _this$intersectionObs3 === void 0 || _this$intersectionObs3.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
+    (0, _defineProperty2.default)(this, "handleChildListMutation", function (_ref4) {
+      var addedNodes = _ref4.addedNodes,
+        removedNodes = _ref4.removedNodes;
+      var removedNodeRects = removedNodes.map(function (n) {
+        return _this.mapVisibleNodeRects.get(n);
+      });
+      addedNodes.forEach(function (addedNode) {
+        var _this$intersectionObs3;
+        var sameDeletedNode = removedNodes.find(function (n) {
+          return n.isEqualNode(addedNode);
         });
-      },
-      onAttributeMutation: function onAttributeMutation(_ref5) {
-        var _this$intersectionObs4;
-        var target = _ref5.target,
-          attributeName = _ref5.attributeName;
-        (_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(target, function (_ref6) {
-          var target = _ref6.target,
-            rect = _ref6.rect;
-          if ((0, _vcUtils.isContainedWithinMediaWrapper)(target)) {
-            return {
-              type: 'mutation:media',
-              mutationData: {
-                attributeName: attributeName
-              }
-            };
-          }
-          if ((0, _isNonVisualStyleMutation.default)({
-            target: target,
-            attributeName: attributeName,
-            type: 'attributes'
-          })) {
-            return {
-              type: 'mutation:attribute:non-visual-style',
-              mutationData: {
-                attributeName: attributeName
-              }
-            };
-          }
-          var lastElementRect = _this.mapVisibleNodeRects.get(target);
-          if (lastElementRect && sameRectSize(rect, lastElementRect)) {
-            return {
-              type: 'mutation:attribute:no-layout-shift',
-              mutationData: {
-                attributeName: attributeName
-              }
-            };
-          }
+        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;
+        }
+        (_this$intersectionObs3 = _this.intersectionObserver) === null || _this$intersectionObs3 === void 0 || _this$intersectionObs3.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
+      });
+    });
+    (0, _defineProperty2.default)(this, "handleAttributeMutation", function (_ref5) {
+      var _this$intersectionObs4;
+      var target = _ref5.target,
+        attributeName = _ref5.attributeName;
+      (_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(target, function (_ref6) {
+        var target = _ref6.target,
+          rect = _ref6.rect;
+        if ((0, _vcUtils.isContainedWithinMediaWrapper)(target)) {
           return {
-            type: 'mutation:attribute',
+            type: 'mutation:media',
             mutationData: {
               attributeName: attributeName
             }
           };
-        });
-      }
-    });
-    this.performanceObserver = (0, _performanceObserver.default)({
-      onLayoutShift: function onLayoutShift(_ref7) {
-        var time = _ref7.time,
-          changedRects = _ref7.changedRects;
-        var _iterator = _createForOfIteratorHelper(changedRects),
-          _step;
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var changedRect = _step.value;
-            var target = changedRect.node;
-            if (target) {
-              onChange({
-                time: time,
-                elementRef: new WeakRef(target),
-                visible: true,
-                rect: changedRect.rect,
-                previousRect: changedRect.previousRect,
-                type: 'layout-shift'
-              });
+        }
+        if ((0, _isNonVisualStyleMutation.default)({
+          target: target,
+          attributeName: attributeName,
+          type: 'attributes'
+        })) {
+          return {
+            type: 'mutation:attribute:non-visual-style',
+            mutationData: {
+              attributeName: attributeName
+            }
+          };
+        }
+        var lastElementRect = _this.mapVisibleNodeRects.get(target);
+        if (lastElementRect && sameRectSize(rect, lastElementRect)) {
+          return {
+            type: 'mutation:attribute:no-layout-shift',
+            mutationData: {
+              attributeName: attributeName
             }
+          };
+        }
+        return {
+          type: 'mutation:attribute',
+          mutationData: {
+            attributeName: attributeName
+          }
+        };
+      });
+    });
+    (0, _defineProperty2.default)(this, "handleLayoutShift", function (_ref7) {
+      var time = _ref7.time,
+        changedRects = _ref7.changedRects;
+      var _iterator = _createForOfIteratorHelper(changedRects),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var changedRect = _step.value;
+          var target = changedRect.node;
+          if (target) {
+            _this.onChange({
+              time: time,
+              elementRef: new WeakRef(target),
+              visible: true,
+              rect: changedRect.rect,
+              previousRect: changedRect.previousRect,
+              type: 'layout-shift'
+            });
           }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
         }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
       }
     });
+    this.mapVisibleNodeRects = new WeakMap();
+    this.onChange = onChange;
+    this.isStarted = false;
+    this.intersectionObserver = null;
+    this.mutationObserver = null;
+    this.performanceObserver = null;
   }
   return (0, _createClass2.default)(ViewportObserver, [{
+    key: "initializeObservers",
+    value: function initializeObservers() {
+      if (this.isStarted) {
+        return;
+      }
+      this.intersectionObserver = (0, _intersectionObserver.createIntersectionObserver)({
+        onEntry: this.handleIntersectionEntry
+      });
+      this.mutationObserver = (0, _mutationObserver.default)({
+        onChildListMutation: this.handleChildListMutation,
+        onAttributeMutation: this.handleAttributeMutation
+      });
+      this.performanceObserver = (0, _performanceObserver.default)({
+        onLayoutShift: this.handleLayoutShift
+      });
+    }
+  }, {
     key: "start",
     value: function start() {
       var _this$mutationObserve, _this$performanceObse;
+      if (this.isStarted) {
+        return;
+      }
+      this.initializeObservers();
       (_this$mutationObserve = this.mutationObserver) === null || _this$mutationObserve === void 0 || _this$mutationObserve.observe(document.body, {
         attributeOldValue: true,
         attributes: true,
@@ -206,14 +222,19 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
         // @ts-ignore-error
         durationThreshold: 30
       });
+      this.isStarted = true;
     }
   }, {
     key: "stop",
     value: function stop() {
       var _this$mutationObserve2, _this$intersectionObs5, _this$performanceObse2;
+      if (!this.isStarted) {
+        return;
+      }
       (_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 || _this$mutationObserve2.disconnect();
       (_this$intersectionObs5 = this.intersectionObserver) === null || _this$intersectionObs5 === void 0 || _this$intersectionObs5.disconnect();
       (_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 || _this$performanceObse2.disconnect();
+      this.isStarted = false;
     }
   }]);
 }();

package/dist/es2019/vc/vc-observer-new/entries-timeline/index.js

@@ -1,9 +1,7 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 export default class EntriesTimeline {
   constructor() {
-    _defineProperty(this, "unorderedEntries", []);
-    _defineProperty(this, "sortedEntriesCache", new Map());
     this.unorderedEntries = [];
+    this.sortedEntriesCache = new Map();
   }
   push(entry) {
     this.unorderedEntries.push(entry);

package/dist/es2019/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/canvas-pixel.js

@@ -1,14 +1,15 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 import taskYield from '../../utils/task-yield';
 
 // 24-bit color value
 
 /**
  * Class responsible for managing a scaled canvas and tracking pixel drawing operations.
- * It uses an OffscreenCanvas for better performance and maintains a mapping between
- * colors and timestamps for pixel counting purposes.
+ * It uses either an OffscreenCanvas (if available) or a regular HTML Canvas for better performance
+ * and maintains a mapping between colors and timestamps for pixel counting purposes.
  */
 export class ViewportCanvas {
-  /** The underlying OffscreenCanvas instance */
+  /** The underlying Canvas instance (either OffscreenCanvas or HTMLCanvasElement) */
 
   /** The 2D rendering context of the canvas */
 
@@ -37,10 +38,8 @@ export class ViewportCanvas {
     this.scaleX = this.scaledWidth / safeViewportWidth;
     this.scaleY = this.scaledHeight / safeViewportHeight;
 
-    // Initialize OffscreenCanvas with scaled dimensions
-    this.canvas = document.createElement('canvas');
-    this.canvas.width = this.scaledWidth;
-    this.canvas.height = this.scaledHeight;
+    // Initialize canvas with scaled dimensions
+    this.canvas = this.createCanvas(this.scaledWidth, this.scaledHeight);
     const ctx = this.canvas.getContext('2d', {
       alpha: false,
       // Disable alpha channel for better performance
@@ -53,8 +52,25 @@ export class ViewportCanvas {
     }
     this.ctx = ctx;
     this.ctx.globalCompositeOperation = 'source-over';
+    if (fg('platform_ufo_use_offscreen_canvas')) {
+      this.ctx.imageSmoothingEnabled = false; // Disable image smoothing for better performance
+    }
     this.clear();
   }
+
+  /**
+   * Creates a canvas instance, falling back to HTMLCanvasElement if OffscreenCanvas is not available
+   * or if the feature flag is disabled
+   */
+  createCanvas(width, height) {
+    if (typeof OffscreenCanvas !== 'undefined' && fg('platform_ufo_use_offscreen_canvas')) {
+      return new OffscreenCanvas(width, height);
+    }
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    return canvas;
+  }
   getScaledDimensions() {
     return {
       width: this.scaledWidth,

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

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { isContainedWithinMediaWrapper } from '../../vc-observer/media-wrapper/vc-utils';
 import isNonVisualStyleMutation from '../../vc-observer/observers/non-visual-styles/is-non-visual-style-mutation';
 import { createIntersectionObserver } from './intersection-observer';
@@ -43,131 +44,144 @@ const createElementMutationsWatcher = removedNodeRects => ({
 };
 export default class ViewportObserver {
   constructor({
-    onChange: onChange
+    onChange
   }) {
-    this.mapVisibleNodeRects = new WeakMap();
-    this.intersectionObserver = createIntersectionObserver({
-      onEntry: ({
-        target,
-        rect,
+    _defineProperty(this, "handleIntersectionEntry", ({
+      target,
+      rect,
+      time,
+      type,
+      mutationData
+    }) => {
+      if (!target) {
+        return;
+      }
+      const visible = isElementVisible(target);
+      const lastElementRect = this.mapVisibleNodeRects.get(target);
+      this.mapVisibleNodeRects.set(target, rect);
+      this.onChange({
         time,
         type,
+        elementRef: new WeakRef(target),
+        visible,
+        rect,
+        previousRect: lastElementRect,
         mutationData
-      }) => {
-        if (!target) {
+      });
+    });
+    _defineProperty(this, "handleChildListMutation", ({
+      addedNodes,
+      removedNodes
+    }) => {
+      const removedNodeRects = removedNodes.map(n => this.mapVisibleNodeRects.get(n));
+      addedNodes.forEach(addedNode => {
+        var _this$intersectionObs3;
+        const sameDeletedNode = removedNodes.find(n => n.isEqualNode(addedNode));
+        if (sameDeletedNode) {
+          var _this$intersectionObs;
+          (_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.watchAndTag(addedNode, 'mutation:remount');
           return;
         }
-        const visible = isElementVisible(target);
-        const lastElementRect = this.mapVisibleNodeRects.get(target);
-        this.mapVisibleNodeRects.set(target, rect);
-        onChange({
-          time,
-          type,
-          elementRef: new WeakRef(target),
-          visible,
-          rect,
-          previousRect: lastElementRect,
-          mutationData
-        });
-      }
+        if (isContainedWithinMediaWrapper(addedNode)) {
+          var _this$intersectionObs2;
+          (_this$intersectionObs2 = this.intersectionObserver) === null || _this$intersectionObs2 === void 0 ? void 0 : _this$intersectionObs2.watchAndTag(addedNode, 'mutation:media');
+          return;
+        }
+        (_this$intersectionObs3 = this.intersectionObserver) === null || _this$intersectionObs3 === void 0 ? void 0 : _this$intersectionObs3.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
+      });
     });
-    this.mutationObserver = createMutationObserver({
-      onChildListMutation: ({
-        addedNodes,
-        removedNodes
-      }) => {
-        var _removedNodes$map;
-        const removedNodeRects = (_removedNodes$map = removedNodes === null || removedNodes === void 0 ? void 0 : removedNodes.map(n => this.mapVisibleNodeRects.get(n))) !== null && _removedNodes$map !== void 0 ? _removedNodes$map : [];
-        addedNodes.forEach(addedNode => {
-          var _this$intersectionObs3;
-          // for (const elem of addedNode.querySelectorAll('*')) {
-          // 	this.intersectionObserver?.watchAndTag(elem, 'mutation:child-element');
-          // }
-
-          const sameDeletedNode = removedNodes.find(n => n.isEqualNode(addedNode));
-          if (sameDeletedNode) {
-            var _this$intersectionObs;
-            (_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.watchAndTag(addedNode, 'mutation:remount');
-            return;
-          }
-          if (isContainedWithinMediaWrapper(addedNode)) {
-            var _this$intersectionObs2;
-            (_this$intersectionObs2 = this.intersectionObserver) === null || _this$intersectionObs2 === void 0 ? void 0 : _this$intersectionObs2.watchAndTag(addedNode, 'mutation:media');
-            return;
-          }
-          (_this$intersectionObs3 = this.intersectionObserver) === null || _this$intersectionObs3 === void 0 ? void 0 : _this$intersectionObs3.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
-        });
-      },
-      onAttributeMutation: ({
+    _defineProperty(this, "handleAttributeMutation", ({
+      target,
+      attributeName
+    }) => {
+      var _this$intersectionObs4;
+      (_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.watchAndTag(target, ({
         target,
-        attributeName
+        rect
       }) => {
-        var _this$intersectionObs4;
-        (_this$intersectionObs4 = this.intersectionObserver) === null || _this$intersectionObs4 === void 0 ? void 0 : _this$intersectionObs4.watchAndTag(target, ({
+        if (isContainedWithinMediaWrapper(target)) {
+          return {
+            type: 'mutation:media',
+            mutationData: {
+              attributeName
+            }
+          };
+        }
+        if (isNonVisualStyleMutation({
           target,
-          rect
-        }) => {
-          if (isContainedWithinMediaWrapper(target)) {
-            return {
-              type: 'mutation:media',
-              mutationData: {
-                attributeName
-              }
-            };
-          }
-          if (isNonVisualStyleMutation({
-            target,
-            attributeName,
-            type: 'attributes'
-          })) {
-            return {
-              type: 'mutation:attribute:non-visual-style',
-              mutationData: {
-                attributeName
-              }
-            };
-          }
-          const lastElementRect = this.mapVisibleNodeRects.get(target);
-          if (lastElementRect && sameRectSize(rect, lastElementRect)) {
-            return {
-              type: 'mutation:attribute:no-layout-shift',
-              mutationData: {
-                attributeName
-              }
-            };
-          }
+          attributeName,
+          type: 'attributes'
+        })) {
           return {
-            type: 'mutation:attribute',
+            type: 'mutation:attribute:non-visual-style',
             mutationData: {
               attributeName
             }
           };
-        });
-      }
-    });
-    this.performanceObserver = createPerformanceObserver({
-      onLayoutShift: ({
-        time,
-        changedRects
-      }) => {
-        for (const changedRect of changedRects) {
-          const target = changedRect.node;
-          if (target) {
-            onChange({
-              time,
-              elementRef: new WeakRef(target),
-              visible: true,
-              rect: changedRect.rect,
-              previousRect: changedRect.previousRect,
-              type: 'layout-shift'
-            });
+        }
+        const lastElementRect = this.mapVisibleNodeRects.get(target);
+        if (lastElementRect && sameRectSize(rect, lastElementRect)) {
+          return {
+            type: 'mutation:attribute:no-layout-shift',
+            mutationData: {
+              attributeName
+            }
+          };
+        }
+        return {
+          type: 'mutation:attribute',
+          mutationData: {
+            attributeName
           }
+        };
+      });
+    });
+    _defineProperty(this, "handleLayoutShift", ({
+      time,
+      changedRects
+    }) => {
+      for (const changedRect of changedRects) {
+        const target = changedRect.node;
+        if (target) {
+          this.onChange({
+            time,
+            elementRef: new WeakRef(target),
+            visible: true,
+            rect: changedRect.rect,
+            previousRect: changedRect.previousRect,
+            type: 'layout-shift'
+          });
         }
       }
     });
+    this.mapVisibleNodeRects = new WeakMap();
+    this.onChange = onChange;
+    this.isStarted = false;
+    this.intersectionObserver = null;
+    this.mutationObserver = null;
+    this.performanceObserver = null;
+  }
+  initializeObservers() {
+    if (this.isStarted) {
+      return;
+    }
+    this.intersectionObserver = createIntersectionObserver({
+      onEntry: this.handleIntersectionEntry
+    });
+    this.mutationObserver = createMutationObserver({
+      onChildListMutation: this.handleChildListMutation,
+      onAttributeMutation: this.handleAttributeMutation
+    });
+    this.performanceObserver = createPerformanceObserver({
+      onLayoutShift: this.handleLayoutShift
+    });
   }
   start() {
     var _this$mutationObserve, _this$performanceObse;
+    if (this.isStarted) {
+      return;
+    }
+    this.initializeObservers();
     (_this$mutationObserve = this.mutationObserver) === null || _this$mutationObserve === void 0 ? void 0 : _this$mutationObserve.observe(document.body, {
       attributeOldValue: true,
       attributes: true,
@@ -180,11 +194,16 @@ export default class ViewportObserver {
       // @ts-ignore-error
       durationThreshold: 30
     });
+    this.isStarted = true;
   }
   stop() {
     var _this$mutationObserve2, _this$intersectionObs5, _this$performanceObse2;
+    if (!this.isStarted) {
+      return;
+    }
     (_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 ? void 0 : _this$mutationObserve2.disconnect();
     (_this$intersectionObs5 = this.intersectionObserver) === null || _this$intersectionObs5 === void 0 ? void 0 : _this$intersectionObs5.disconnect();
     (_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 ? void 0 : _this$performanceObse2.disconnect();
+    this.isStarted = false;
   }
 }

package/dist/esm/vc/vc-observer-new/entries-timeline/index.js

@@ -1,12 +1,10 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var EntriesTimeline = /*#__PURE__*/function () {
   function EntriesTimeline() {
     _classCallCheck(this, EntriesTimeline);
-    _defineProperty(this, "unorderedEntries", []);
-    _defineProperty(this, "sortedEntriesCache", new Map());
     this.unorderedEntries = [];
+    this.sortedEntriesCache = new Map();
   }
   return _createClass(EntriesTimeline, [{
     key: "push",

package/dist/esm/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/canvas-pixel.js

@@ -2,17 +2,18 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { fg } from '@atlaskit/platform-feature-flags';
 import taskYield from '../../utils/task-yield';
 
 // 24-bit color value
 
 /**
  * Class responsible for managing a scaled canvas and tracking pixel drawing operations.
- * It uses an OffscreenCanvas for better performance and maintains a mapping between
- * colors and timestamps for pixel counting purposes.
+ * It uses either an OffscreenCanvas (if available) or a regular HTML Canvas for better performance
+ * and maintains a mapping between colors and timestamps for pixel counting purposes.
  */
 export var ViewportCanvas = /*#__PURE__*/function () {
-  /** The underlying OffscreenCanvas instance */
+  /** The underlying Canvas instance (either OffscreenCanvas or HTMLCanvasElement) */
 
   /** The 2D rendering context of the canvas */
 
@@ -43,10 +44,8 @@ export var ViewportCanvas = /*#__PURE__*/function () {
     this.scaleX = this.scaledWidth / safeViewportWidth;
     this.scaleY = this.scaledHeight / safeViewportHeight;
 
-    // Initialize OffscreenCanvas with scaled dimensions
-    this.canvas = document.createElement('canvas');
-    this.canvas.width = this.scaledWidth;
-    this.canvas.height = this.scaledHeight;
+    // Initialize canvas with scaled dimensions
+    this.canvas = this.createCanvas(this.scaledWidth, this.scaledHeight);
     var ctx = this.canvas.getContext('2d', {
       alpha: false,
       // Disable alpha channel for better performance
@@ -59,9 +58,28 @@ export var ViewportCanvas = /*#__PURE__*/function () {
     }
     this.ctx = ctx;
     this.ctx.globalCompositeOperation = 'source-over';
+    if (fg('platform_ufo_use_offscreen_canvas')) {
+      this.ctx.imageSmoothingEnabled = false; // Disable image smoothing for better performance
+    }
     this.clear();
   }
+
+  /**
+   * Creates a canvas instance, falling back to HTMLCanvasElement if OffscreenCanvas is not available
+   * or if the feature flag is disabled
+   */
   return _createClass(ViewportCanvas, [{
+    key: "createCanvas",
+    value: function createCanvas(width, height) {
+      if (typeof OffscreenCanvas !== 'undefined' && fg('platform_ufo_use_offscreen_canvas')) {
+        return new OffscreenCanvas(width, height);
+      }
+      var canvas = document.createElement('canvas');
+      canvas.width = width;
+      canvas.height = height;
+      return canvas;
+    }
+  }, {
     key: "getScaledDimensions",
     value: function getScaledDimensions() {
       return {

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

@@ -1,5 +1,6 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
@@ -54,139 +55,154 @@ var ViewportObserver = /*#__PURE__*/function () {
     var _this = this;
     var onChange = _ref2.onChange;
     _classCallCheck(this, ViewportObserver);
-    this.mapVisibleNodeRects = new WeakMap();
-    this.intersectionObserver = createIntersectionObserver({
-      onEntry: function onEntry(_ref3) {
-        var target = _ref3.target,
-          rect = _ref3.rect,
-          time = _ref3.time,
-          type = _ref3.type,
-          mutationData = _ref3.mutationData;
-        if (!target) {
-          return;
-        }
-        var visible = isElementVisible(target);
-        var lastElementRect = _this.mapVisibleNodeRects.get(target);
-        _this.mapVisibleNodeRects.set(target, rect);
-        onChange({
-          time: time,
-          type: type,
-          elementRef: new WeakRef(target),
-          visible: visible,
-          rect: rect,
-          previousRect: lastElementRect,
-          mutationData: mutationData
-        });
+    _defineProperty(this, "handleIntersectionEntry", function (_ref3) {
+      var target = _ref3.target,
+        rect = _ref3.rect,
+        time = _ref3.time,
+        type = _ref3.type,
+        mutationData = _ref3.mutationData;
+      if (!target) {
+        return;
       }
+      var visible = isElementVisible(target);
+      var lastElementRect = _this.mapVisibleNodeRects.get(target);
+      _this.mapVisibleNodeRects.set(target, rect);
+      _this.onChange({
+        time: time,
+        type: type,
+        elementRef: new WeakRef(target),
+        visible: visible,
+        rect: rect,
+        previousRect: lastElementRect,
+        mutationData: mutationData
+      });
     });
-    this.mutationObserver = createMutationObserver({
-      onChildListMutation: function onChildListMutation(_ref4) {
-        var _removedNodes$map;
-        var addedNodes = _ref4.addedNodes,
-          removedNodes = _ref4.removedNodes;
-        var removedNodeRects = (_removedNodes$map = removedNodes === null || removedNodes === void 0 ? void 0 : removedNodes.map(function (n) {
-          return _this.mapVisibleNodeRects.get(n);
-        })) !== null && _removedNodes$map !== void 0 ? _removedNodes$map : [];
-        addedNodes.forEach(function (addedNode) {
-          var _this$intersectionObs3;
-          // for (const elem of addedNode.querySelectorAll('*')) {
-          // 	this.intersectionObserver?.watchAndTag(elem, 'mutation:child-element');
-          // }
-
-          var sameDeletedNode = removedNodes.find(function (n) {
-            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 (isContainedWithinMediaWrapper(addedNode)) {
-            var _this$intersectionObs2;
-            (_this$intersectionObs2 = _this.intersectionObserver) === null || _this$intersectionObs2 === void 0 || _this$intersectionObs2.watchAndTag(addedNode, 'mutation:media');
-            return;
-          }
-          (_this$intersectionObs3 = _this.intersectionObserver) === null || _this$intersectionObs3 === void 0 || _this$intersectionObs3.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
+    _defineProperty(this, "handleChildListMutation", function (_ref4) {
+      var addedNodes = _ref4.addedNodes,
+        removedNodes = _ref4.removedNodes;
+      var removedNodeRects = removedNodes.map(function (n) {
+        return _this.mapVisibleNodeRects.get(n);
+      });
+      addedNodes.forEach(function (addedNode) {
+        var _this$intersectionObs3;
+        var sameDeletedNode = removedNodes.find(function (n) {
+          return n.isEqualNode(addedNode);
         });
-      },
-      onAttributeMutation: function onAttributeMutation(_ref5) {
-        var _this$intersectionObs4;
-        var target = _ref5.target,
-          attributeName = _ref5.attributeName;
-        (_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(target, function (_ref6) {
-          var target = _ref6.target,
-            rect = _ref6.rect;
-          if (isContainedWithinMediaWrapper(target)) {
-            return {
-              type: 'mutation:media',
-              mutationData: {
-                attributeName: attributeName
-              }
-            };
-          }
-          if (isNonVisualStyleMutation({
-            target: target,
-            attributeName: attributeName,
-            type: 'attributes'
-          })) {
-            return {
-              type: 'mutation:attribute:non-visual-style',
-              mutationData: {
-                attributeName: attributeName
-              }
-            };
-          }
-          var lastElementRect = _this.mapVisibleNodeRects.get(target);
-          if (lastElementRect && sameRectSize(rect, lastElementRect)) {
-            return {
-              type: 'mutation:attribute:no-layout-shift',
-              mutationData: {
-                attributeName: attributeName
-              }
-            };
-          }
+        if (sameDeletedNode) {
+          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;
+        }
+        (_this$intersectionObs3 = _this.intersectionObserver) === null || _this$intersectionObs3 === void 0 || _this$intersectionObs3.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects));
+      });
+    });
+    _defineProperty(this, "handleAttributeMutation", function (_ref5) {
+      var _this$intersectionObs4;
+      var target = _ref5.target,
+        attributeName = _ref5.attributeName;
+      (_this$intersectionObs4 = _this.intersectionObserver) === null || _this$intersectionObs4 === void 0 || _this$intersectionObs4.watchAndTag(target, function (_ref6) {
+        var target = _ref6.target,
+          rect = _ref6.rect;
+        if (isContainedWithinMediaWrapper(target)) {
           return {
-            type: 'mutation:attribute',
+            type: 'mutation:media',
             mutationData: {
               attributeName: attributeName
             }
           };
-        });
-      }
-    });
-    this.performanceObserver = createPerformanceObserver({
-      onLayoutShift: function onLayoutShift(_ref7) {
-        var time = _ref7.time,
-          changedRects = _ref7.changedRects;
-        var _iterator = _createForOfIteratorHelper(changedRects),
-          _step;
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var changedRect = _step.value;
-            var target = changedRect.node;
-            if (target) {
-              onChange({
-                time: time,
-                elementRef: new WeakRef(target),
-                visible: true,
-                rect: changedRect.rect,
-                previousRect: changedRect.previousRect,
-                type: 'layout-shift'
-              });
+        }
+        if (isNonVisualStyleMutation({
+          target: target,
+          attributeName: attributeName,
+          type: 'attributes'
+        })) {
+          return {
+            type: 'mutation:attribute:non-visual-style',
+            mutationData: {
+              attributeName: attributeName
+            }
+          };
+        }
+        var lastElementRect = _this.mapVisibleNodeRects.get(target);
+        if (lastElementRect && sameRectSize(rect, lastElementRect)) {
+          return {
+            type: 'mutation:attribute:no-layout-shift',
+            mutationData: {
+              attributeName: attributeName
             }
+          };
+        }
+        return {
+          type: 'mutation:attribute',
+          mutationData: {
+            attributeName: attributeName
+          }
+        };
+      });
+    });
+    _defineProperty(this, "handleLayoutShift", function (_ref7) {
+      var time = _ref7.time,
+        changedRects = _ref7.changedRects;
+      var _iterator = _createForOfIteratorHelper(changedRects),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var changedRect = _step.value;
+          var target = changedRect.node;
+          if (target) {
+            _this.onChange({
+              time: time,
+              elementRef: new WeakRef(target),
+              visible: true,
+              rect: changedRect.rect,
+              previousRect: changedRect.previousRect,
+              type: 'layout-shift'
+            });
           }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
         }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
       }
     });
+    this.mapVisibleNodeRects = new WeakMap();
+    this.onChange = onChange;
+    this.isStarted = false;
+    this.intersectionObserver = null;
+    this.mutationObserver = null;
+    this.performanceObserver = null;
   }
   return _createClass(ViewportObserver, [{
+    key: "initializeObservers",
+    value: function initializeObservers() {
+      if (this.isStarted) {
+        return;
+      }
+      this.intersectionObserver = createIntersectionObserver({
+        onEntry: this.handleIntersectionEntry
+      });
+      this.mutationObserver = createMutationObserver({
+        onChildListMutation: this.handleChildListMutation,
+        onAttributeMutation: this.handleAttributeMutation
+      });
+      this.performanceObserver = createPerformanceObserver({
+        onLayoutShift: this.handleLayoutShift
+      });
+    }
+  }, {
     key: "start",
     value: function start() {
       var _this$mutationObserve, _this$performanceObse;
+      if (this.isStarted) {
+        return;
+      }
+      this.initializeObservers();
       (_this$mutationObserve = this.mutationObserver) === null || _this$mutationObserve === void 0 || _this$mutationObserve.observe(document.body, {
         attributeOldValue: true,
         attributes: true,
@@ -199,14 +215,19 @@ var ViewportObserver = /*#__PURE__*/function () {
         // @ts-ignore-error
         durationThreshold: 30
       });
+      this.isStarted = true;
     }
   }, {
     key: "stop",
     value: function stop() {
       var _this$mutationObserve2, _this$intersectionObs5, _this$performanceObse2;
+      if (!this.isStarted) {
+        return;
+      }
       (_this$mutationObserve2 = this.mutationObserver) === null || _this$mutationObserve2 === void 0 || _this$mutationObserve2.disconnect();
       (_this$intersectionObs5 = this.intersectionObserver) === null || _this$intersectionObs5 === void 0 || _this$intersectionObs5.disconnect();
       (_this$performanceObse2 = this.performanceObserver) === null || _this$performanceObse2 === void 0 || _this$performanceObse2.disconnect();
+      this.isStarted = false;
     }
   }]);
 }();

package/dist/types/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/canvas-pixel.d.ts

@@ -5,11 +5,11 @@ type Viewport = {
 };
 /**
  * Class responsible for managing a scaled canvas and tracking pixel drawing operations.
- * It uses an OffscreenCanvas for better performance and maintains a mapping between
- * colors and timestamps for pixel counting purposes.
+ * It uses either an OffscreenCanvas (if available) or a regular HTML Canvas for better performance
+ * and maintains a mapping between colors and timestamps for pixel counting purposes.
  */
 export declare class ViewportCanvas {
-    /** The underlying OffscreenCanvas instance */
+    /** The underlying Canvas instance (either OffscreenCanvas or HTMLCanvasElement) */
     private readonly canvas;
     /** The 2D rendering context of the canvas */
     private readonly ctx;
@@ -30,6 +30,11 @@ export declare class ViewportCanvas {
      * @throws {Error} If canvas context cannot be obtained
      */
     constructor(viewport: Viewport, scaleFactor?: number);
+    /**
+     * Creates a canvas instance, falling back to HTMLCanvasElement if OffscreenCanvas is not available
+     * or if the feature flag is disabled
+     */
+    private createCanvas;
     getScaledDimensions(): {
         width: number;
         height: number;

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

@@ -16,7 +16,14 @@ export default class ViewportObserver {
     private mutationObserver;
     private performanceObserver;
     private mapVisibleNodeRects;
-    constructor({ onChange: onChange }: ViewPortObserverConstructorArgs);
+    private onChange;
+    private isStarted;
+    constructor({ onChange }: ViewPortObserverConstructorArgs);
+    private handleIntersectionEntry;
+    private handleChildListMutation;
+    private handleAttributeMutation;
+    private handleLayoutShift;
+    private initializeObservers;
     start(): void;
     stop(): void;
 }

package/dist/types-ts4.5/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/canvas-pixel.d.ts

@@ -5,11 +5,11 @@ type Viewport = {
 };
 /**
  * Class responsible for managing a scaled canvas and tracking pixel drawing operations.
- * It uses an OffscreenCanvas for better performance and maintains a mapping between
- * colors and timestamps for pixel counting purposes.
+ * It uses either an OffscreenCanvas (if available) or a regular HTML Canvas for better performance
+ * and maintains a mapping between colors and timestamps for pixel counting purposes.
  */
 export declare class ViewportCanvas {
-    /** The underlying OffscreenCanvas instance */
+    /** The underlying Canvas instance (either OffscreenCanvas or HTMLCanvasElement) */
     private readonly canvas;
     /** The 2D rendering context of the canvas */
     private readonly ctx;
@@ -30,6 +30,11 @@ export declare class ViewportCanvas {
      * @throws {Error} If canvas context cannot be obtained
      */
     constructor(viewport: Viewport, scaleFactor?: number);
+    /**
+     * Creates a canvas instance, falling back to HTMLCanvasElement if OffscreenCanvas is not available
+     * or if the feature flag is disabled
+     */
+    private createCanvas;
     getScaledDimensions(): {
         width: number;
         height: number;

package/dist/types-ts4.5/vc/vc-observer-new/viewport-observer/index.d.ts

@@ -16,7 +16,14 @@ export default class ViewportObserver {
     private mutationObserver;
     private performanceObserver;
     private mapVisibleNodeRects;
-    constructor({ onChange: onChange }: ViewPortObserverConstructorArgs);
+    private onChange;
+    private isStarted;
+    constructor({ onChange }: ViewPortObserverConstructorArgs);
+    private handleIntersectionEntry;
+    private handleChildListMutation;
+    private handleAttributeMutation;
+    private handleLayoutShift;
+    private initializeObservers;
     start(): void;
     stop(): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "3.10.3",
+	"version": "3.10.4",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -127,6 +127,9 @@
 		}
 	},
 	"platform-feature-flags": {
+		"platform_ufo_use_offscreen_canvas": {
+			"type": "boolean"
+		},
 		"platform_ufo_canvas_heatmap_full_precision": {
 			"type": "boolean"
 		},