@atlaskit/react-ufo 2.2.0 → 2.2.2

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

@@ -7,7 +7,9 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 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; }
 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) { _defineProperty(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; }
+import { fg } from '@atlaskit/platform-feature-flags';
 import { isContainedWithinMediaWrapper } from '../media-wrapper/vc-utils';
+import { EditorLnvHandler } from './editor-lnv';
 import { SSRPlaceholderHandlers } from './ssr-placeholders';
 var state = {
   normal: 1,
@@ -52,6 +54,7 @@ export var Observers = /*#__PURE__*/function () {
     this.intersectionObserver = this.getIntersectionObserver();
     this.mutationObserver = this.getMutationObserver();
     this.ssrPlaceholderHandler = new SSRPlaceholderHandlers();
+    this.editorLnvHandler = new EditorLnvHandler();
   }
   _createClass(Observers, [{
     key: "isBrowserSupported",
@@ -88,6 +91,7 @@ export var Observers = /*#__PURE__*/function () {
       this.callbacks = new Set();
       this.ssr.reactRootElement = null;
       this.ssrPlaceholderHandler.clear();
+      this.editorLnvHandler.clear();
     }
   }, {
     key: "getTotalTime",
@@ -161,6 +165,15 @@ export var Observers = /*#__PURE__*/function () {
                   });
                   return;
                 }
+                if (fg('platform_editor_ed-25557_lnv_add_ssr_placeholder')) {
+                  if (_this2.editorLnvHandler.shouldHandleAddedNode(node)) {
+                    _this2.editorLnvHandler.handleAddedNode(node).then(function (_ref) {
+                      var shouldIgnore = _ref.shouldIgnore;
+                      _this2.observeElement(node, mutation, 'html', shouldIgnore ? 'editor-lazy-node-view' : ignoreReason);
+                    });
+                    return;
+                  }
+                }
                 _this2.observeElement(node, mutation, 'html', ignoreReason);
               }
               if (node instanceof Text && node.parentElement != null) {
@@ -257,10 +270,10 @@ export var Observers = /*#__PURE__*/function () {
       var _this3 = this;
       return this.isBrowserSupported() ? new IntersectionObserver(function (entries) {
         _this3.measureStart();
-        entries.forEach(function (_ref) {
-          var isIntersecting = _ref.isIntersecting,
-            ir = _ref.intersectionRect,
-            target = _ref.target;
+        entries.forEach(function (_ref2) {
+          var isIntersecting = _ref2.isIntersecting,
+            ir = _ref2.intersectionRect,
+            target = _ref2.target;
           var data = _this3.observedMutations.get(target);
           _this3.observedMutations.delete(target);
           if (isIntersecting && ir.width > 0 && ir.height > 0) {

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

@@ -33,7 +33,6 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
           _this.callbacks.delete(staticKey);
         }
       } else {
-        // react component check
         var key = target.dataset.ssrPlaceholderReplace || '';
         var _resolve2 = _this.reactValidateCallbacks.get(key);
         if (!_resolve2) {

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

@@ -35,7 +35,7 @@ export type VCEntryType = {
     vc: number;
     elements: string[];
 };
-export type VCIgnoreReason = 'image' | 'ssr-hydration' | '';
+export type VCIgnoreReason = 'image' | 'ssr-hydration' | 'editor-lazy-node-view' | '';
 export type ComponentsLogEntry = {
     targetName: string;
     __debug__element: WeakRef<Element> | null;

package/dist/types/config/index.d.ts

@@ -1,6 +1,6 @@
 import type { InteractionMetrics, InteractionType } from '../common';
 export interface AdditionalData {
-    [key: string]: null | undefined | string | number | boolean | undefined | AdditionalData | Record<string, AdditionalData> | Array<AdditionalData>;
+    [key: string]: null | string | number | boolean | undefined | AdditionalData | Record<string, AdditionalData> | Array<AdditionalData>;
 }
 export interface SSRTiming {
     label: string;
@@ -73,6 +73,7 @@ export type Config = {
         readonly kind?: Record<InteractionType, number>;
     };
     readonly enableSegmentHighlighting?: boolean;
+    readonly enableAdditionalPerformanceMarks?: boolean;
     readonly shouldCalculateLighthouseMetricsFromTTAI?: boolean;
     readonly timeWindowForLateMutationsInMilliseconds?: number;
     readonly manuallyTrackReactProfilerMounts?: boolean;

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

@@ -0,0 +1,24 @@
+type HandlerResult = {
+    shouldIgnore: boolean;
+};
+export declare class EditorLnvHandler {
+    private placeholders;
+    private intersectionObserver;
+    private getSizeCallbacks;
+    private isAddedPlaceholderMatchingSizeCallbacks;
+    private isAddedReplaceMatchingSizeCallbacks;
+    constructor();
+    shouldHandleAddedNode(el: HTMLElement): string | undefined;
+    handleAddedNode(el: HTMLElement): Promise<HandlerResult>;
+    clear(): void;
+    private handleAddedPlaceholderNode;
+    private handleAddedReplaceNode;
+    private isExistingPlaceholder;
+    private registerPlaceholder;
+    private getSize;
+    private isAddedPlaceholderMatchingSize;
+    private isAddedReplaceMatchingSize;
+    private areRectsSameSize;
+    private intersectionObserverCallback;
+}
+export {};

package/dist/types/vc/vc-observer/observers/editor-lnv/test-utils.d.ts

@@ -0,0 +1,35 @@
+import type { EditorLnvHandler } from './index';
+type MockIntersectionObserverEntry = {
+    target: HTMLElement;
+    boundingClientRect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+};
+export type MockIntersectionObserverCallback = (entries: MockIntersectionObserverEntry[]) => void;
+export type MockIntersectionObserverCallbackRef = {
+    current: MockIntersectionObserverCallback | null;
+};
+export declare function createPlaceholderElement(id: string): HTMLDivElement;
+export declare function createReplaceElement(id: string): HTMLDivElement;
+export declare function handleElements(elements: {
+    element: HTMLElement;
+    rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}[], handler: EditorLnvHandler, observerCallback: MockIntersectionObserverCallback, callback: (result: {
+    shouldIgnore: boolean;
+}) => void): void;
+export declare function createMockIntersectionObserver(cbRef: MockIntersectionObserverCallbackRef): {
+    new (fn: MockIntersectionObserverCallback): {
+        observe(): void;
+        unobserve(): void;
+        disconnect(): void;
+    };
+};
+export {};

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

@@ -19,6 +19,7 @@ export declare class Observers implements BrowserObservers {
     private totalTime;
     private _startMeasureTimestamp;
     private ssrPlaceholderHandler;
+    private editorLnvHandler;
     private ssr;
     private selectorConfig;
     constructor(opts: ConstructorOptions);

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

@@ -1,3 +1,9 @@
+type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
 export declare class SSRPlaceholderHandlers {
     private staticPlaceholders;
     private callbacks;
@@ -11,13 +17,9 @@ export declare class SSRPlaceholderHandlers {
     isPlaceholderIgnored(element: HTMLElement): boolean;
     findNearestPlaceholderContainerIfIgnored(element: HTMLElement): HTMLElement;
     checkIfExistedAndSizeMatching(el: HTMLElement): Promise<unknown>;
-    getSize(el: HTMLElement): Promise<unknown>;
+    getSize(el: HTMLElement): Promise<Rect>;
     validateReactComponentMatchToPlaceholder(el: HTMLElement): Promise<unknown>;
-    hasSameSizePosition(rect: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    } | undefined, boundingClientRect: DOMRectReadOnly): boolean;
+    hasSameSizePosition(rect: Rect | undefined, boundingClientRect: DOMRectReadOnly): boolean;
     intersectionObserverCallback: ({ target, boundingClientRect }: IntersectionObserverEntry) => void;
 }
+export {};

package/dist/types-ts4.5/common/vc/types.d.ts

@@ -35,7 +35,7 @@ export type VCEntryType = {
     vc: number;
     elements: string[];
 };
-export type VCIgnoreReason = 'image' | 'ssr-hydration' | '';
+export type VCIgnoreReason = 'image' | 'ssr-hydration' | 'editor-lazy-node-view' | '';
 export type ComponentsLogEntry = {
     targetName: string;
     __debug__element: WeakRef<Element> | null;

package/dist/types-ts4.5/config/index.d.ts

@@ -1,6 +1,6 @@
 import type { InteractionMetrics, InteractionType } from '../common';
 export interface AdditionalData {
-    [key: string]: null | undefined | string | number | boolean | undefined | AdditionalData | Record<string, AdditionalData> | Array<AdditionalData>;
+    [key: string]: null | string | number | boolean | undefined | AdditionalData | Record<string, AdditionalData> | Array<AdditionalData>;
 }
 export interface SSRTiming {
     label: string;
@@ -73,6 +73,7 @@ export type Config = {
         readonly kind?: Record<InteractionType, number>;
     };
     readonly enableSegmentHighlighting?: boolean;
+    readonly enableAdditionalPerformanceMarks?: boolean;
     readonly shouldCalculateLighthouseMetricsFromTTAI?: boolean;
     readonly timeWindowForLateMutationsInMilliseconds?: number;
     readonly manuallyTrackReactProfilerMounts?: boolean;

package/dist/types-ts4.5/vc/vc-observer/observers/editor-lnv/index.d.ts

@@ -0,0 +1,24 @@
+type HandlerResult = {
+    shouldIgnore: boolean;
+};
+export declare class EditorLnvHandler {
+    private placeholders;
+    private intersectionObserver;
+    private getSizeCallbacks;
+    private isAddedPlaceholderMatchingSizeCallbacks;
+    private isAddedReplaceMatchingSizeCallbacks;
+    constructor();
+    shouldHandleAddedNode(el: HTMLElement): string | undefined;
+    handleAddedNode(el: HTMLElement): Promise<HandlerResult>;
+    clear(): void;
+    private handleAddedPlaceholderNode;
+    private handleAddedReplaceNode;
+    private isExistingPlaceholder;
+    private registerPlaceholder;
+    private getSize;
+    private isAddedPlaceholderMatchingSize;
+    private isAddedReplaceMatchingSize;
+    private areRectsSameSize;
+    private intersectionObserverCallback;
+}
+export {};

package/dist/types-ts4.5/vc/vc-observer/observers/editor-lnv/test-utils.d.ts

@@ -0,0 +1,35 @@
+import type { EditorLnvHandler } from './index';
+type MockIntersectionObserverEntry = {
+    target: HTMLElement;
+    boundingClientRect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+};
+export type MockIntersectionObserverCallback = (entries: MockIntersectionObserverEntry[]) => void;
+export type MockIntersectionObserverCallbackRef = {
+    current: MockIntersectionObserverCallback | null;
+};
+export declare function createPlaceholderElement(id: string): HTMLDivElement;
+export declare function createReplaceElement(id: string): HTMLDivElement;
+export declare function handleElements(elements: {
+    element: HTMLElement;
+    rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}[], handler: EditorLnvHandler, observerCallback: MockIntersectionObserverCallback, callback: (result: {
+    shouldIgnore: boolean;
+}) => void): void;
+export declare function createMockIntersectionObserver(cbRef: MockIntersectionObserverCallbackRef): {
+    new (fn: MockIntersectionObserverCallback): {
+        observe(): void;
+        unobserve(): void;
+        disconnect(): void;
+    };
+};
+export {};

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

@@ -19,6 +19,7 @@ export declare class Observers implements BrowserObservers {
     private totalTime;
     private _startMeasureTimestamp;
     private ssrPlaceholderHandler;
+    private editorLnvHandler;
     private ssr;
     private selectorConfig;
     constructor(opts: ConstructorOptions);

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

@@ -1,3 +1,9 @@
+type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
 export declare class SSRPlaceholderHandlers {
     private staticPlaceholders;
     private callbacks;
@@ -11,13 +17,9 @@ export declare class SSRPlaceholderHandlers {
     isPlaceholderIgnored(element: HTMLElement): boolean;
     findNearestPlaceholderContainerIfIgnored(element: HTMLElement): HTMLElement;
     checkIfExistedAndSizeMatching(el: HTMLElement): Promise<unknown>;
-    getSize(el: HTMLElement): Promise<unknown>;
+    getSize(el: HTMLElement): Promise<Rect>;
     validateReactComponentMatchToPlaceholder(el: HTMLElement): Promise<unknown>;
-    hasSameSizePosition(rect: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    } | undefined, boundingClientRect: DOMRectReadOnly): boolean;
+    hasSameSizePosition(rect: Rect | undefined, boundingClientRect: DOMRectReadOnly): boolean;
     intersectionObserverCallback: ({ target, boundingClientRect }: IntersectionObserverEntry) => void;
 }
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "2.2.0",
+	"version": "2.2.2",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -122,5 +122,10 @@
 				"import-no-extraneous-disable-for-examples-and-docs"
 			]
 		}
+	},
+	"platform-feature-flags": {
+		"platform_editor_ed-25557_lnv_add_ssr_placeholder": {
+			"type": "boolean"
+		}
 	}
 }