@elementor/editor-styles-repository 4.4.0-1090 → 4.4.0-1092

package/dist/index.js

@@ -197,7 +197,25 @@ var documentElementsStylesProvider = createStylesProvider({
   },
   priority: 50,
   isPregeneratedLink: ({ id }) => PREGENERATED_LINK_PATTERN.test(id),
-  subscribe: (cb) => (0, import_editor_v1_adapters.__privateListenTo)(import_editor_elements.styleRerenderEvents, () => cb()),
+  subscribe: (cb) => {
+    let scheduledFrame = null;
+    const unsubscribe = (0, import_editor_v1_adapters.__privateListenTo)(import_editor_elements.styleRerenderEvents, () => {
+      if (scheduledFrame !== null) {
+        return;
+      }
+      scheduledFrame = requestAnimationFrame(() => {
+        scheduledFrame = null;
+        cb();
+      });
+    });
+    return () => {
+      if (scheduledFrame !== null) {
+        cancelAnimationFrame(scheduledFrame);
+        scheduledFrame = null;
+      }
+      unsubscribe();
+    };
+  },
   actions: {
     all: (meta = {}) => {
       let elements = (0, import_editor_elements.getElements)();

package/dist/index.mjs

@@ -167,7 +167,25 @@ var documentElementsStylesProvider = createStylesProvider({
   },
   priority: 50,
   isPregeneratedLink: ({ id }) => PREGENERATED_LINK_PATTERN.test(id),
-  subscribe: (cb) => listenTo(styleRerenderEvents, () => cb()),
+  subscribe: (cb) => {
+    let scheduledFrame = null;
+    const unsubscribe = listenTo(styleRerenderEvents, () => {
+      if (scheduledFrame !== null) {
+        return;
+      }
+      scheduledFrame = requestAnimationFrame(() => {
+        scheduledFrame = null;
+        cb();
+      });
+    });
+    return () => {
+      if (scheduledFrame !== null) {
+        cancelAnimationFrame(scheduledFrame);
+        scheduledFrame = null;
+      }
+      unsubscribe();
+    };
+  },
   actions: {
     all: (meta = {}) => {
       let elements = getElements();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-styles-repository",
   "description": "Elementor Editor Styles Repository",
-  "version": "4.4.0-1090",
+  "version": "4.4.0-1092",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -33,13 +33,13 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.4.0-1090",
-    "@elementor/editor-elements": "4.4.0-1090",
-    "@elementor/editor-props": "4.4.0-1090",
-    "@elementor/editor-styles": "4.4.0-1090",
-    "@elementor/editor-v1-adapters": "4.4.0-1090",
-    "@elementor/schema": "4.4.0-1090",
-    "@elementor/utils": "4.4.0-1090",
+    "@elementor/editor-current-user": "4.4.0-1092",
+    "@elementor/editor-elements": "4.4.0-1092",
+    "@elementor/editor-props": "4.4.0-1092",
+    "@elementor/editor-styles": "4.4.0-1092",
+    "@elementor/editor-v1-adapters": "4.4.0-1092",
+    "@elementor/schema": "4.4.0-1092",
+    "@elementor/utils": "4.4.0-1092",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/__tests__/document-elements-styles-provider.test.ts

@@ -1,12 +1,24 @@
 import { createMockElement, createMockStyleDefinition } from 'test-utils';
-import { getCurrentDocumentId, getElements, getElementStyles, updateElementStyle } from '@elementor/editor-elements';
+import {
+	ELEMENT_STYLE_CHANGE_EVENT,
+	getCurrentDocumentId,
+	getElements,
+	getElementStyles,
+	updateElementStyle,
+} from '@elementor/editor-elements';
 import type { StyleDefinition } from '@elementor/editor-styles';
+import { __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';
 
 import { InvalidElementsStyleProviderMetaError } from '../errors';
 import { documentElementsStylesProvider } from '../providers/document-elements-styles-provider';
 
 jest.mock( '@elementor/editor-elements' );
 
+jest.mock( '@elementor/editor-v1-adapters', () => ( {
+	...jest.requireActual( '@elementor/editor-v1-adapters' ),
+	__privateListenTo: jest.fn(),
+} ) );
+
 describe( 'documentElementsStylesProvider', () => {
 	beforeEach( () => {
 		jest.mocked( getElements ).mockReturnValue( [
@@ -155,4 +167,94 @@ describe( 'documentElementsStylesProvider', () => {
 				)
 		).toThrow( new InvalidElementsStyleProviderMetaError() );
 	} );
+
+	describe( 'subscribe', () => {
+		const setupListener = () => {
+			const unsubscribeFromEvents = jest.fn();
+			let emit = () => {};
+
+			jest.mocked( listenTo ).mockImplementation( ( _events, callback ) => {
+				emit = () =>
+					callback( {
+						type: 'window-event',
+						event: ELEMENT_STYLE_CHANGE_EVENT,
+						originalEvent: new CustomEvent( ELEMENT_STYLE_CHANGE_EVENT ),
+					} );
+
+				return unsubscribeFromEvents;
+			} );
+
+			const frames: FrameRequestCallback[] = [];
+
+			jest.spyOn( window, 'requestAnimationFrame' ).mockImplementation( ( frame: FrameRequestCallback ) => {
+				frames.push( frame );
+
+				return frames.length;
+			} );
+
+			return {
+				emitStyleRerenderEvent: () => emit(),
+				runFrame: ( index: number ) => frames[ index ]( 0 ),
+				frames: () => frames,
+				unsubscribeFromEvents,
+			};
+		};
+
+		it( 'should notify subscribers once per frame regardless of the number of events', () => {
+			// Arrange.
+			const listener = setupListener();
+			const subscriber = jest.fn();
+
+			documentElementsStylesProvider.subscribe( subscriber );
+
+			// Act.
+			listener.emitStyleRerenderEvent();
+			listener.emitStyleRerenderEvent();
+			listener.emitStyleRerenderEvent();
+
+			// Assert.
+			expect( listener.frames() ).toHaveLength( 1 );
+			expect( subscriber ).not.toHaveBeenCalled();
+
+			// Act.
+			listener.runFrame( 0 );
+
+			// Assert.
+			expect( subscriber ).toHaveBeenCalledTimes( 1 );
+		} );
+
+		it( 'should schedule a new frame after the pending one ran', () => {
+			// Arrange.
+			const listener = setupListener();
+			const subscriber = jest.fn();
+
+			documentElementsStylesProvider.subscribe( subscriber );
+
+			// Act.
+			listener.emitStyleRerenderEvent();
+			listener.runFrame( 0 );
+			listener.emitStyleRerenderEvent();
+			listener.runFrame( 1 );
+
+			// Assert.
+			expect( subscriber ).toHaveBeenCalledTimes( 2 );
+		} );
+
+		it( 'should cancel a pending frame when unsubscribing', () => {
+			// Arrange.
+			const listener = setupListener();
+			const subscriber = jest.fn();
+			const cancelAnimationFrameSpy = jest.spyOn( window, 'cancelAnimationFrame' ).mockImplementation();
+
+			const unsubscribe = documentElementsStylesProvider.subscribe( subscriber );
+
+			// Act.
+			listener.emitStyleRerenderEvent();
+			unsubscribe();
+
+			// Assert.
+			expect( cancelAnimationFrameSpy ).toHaveBeenCalledTimes( 1 );
+			expect( listener.unsubscribeFromEvents ).toHaveBeenCalledTimes( 1 );
+		} );
+	} );
 } );

package/src/providers/document-elements-styles-provider.ts

@@ -30,7 +30,29 @@ export const documentElementsStylesProvider = createStylesProvider( {
 	},
 	priority: 50,
 	isPregeneratedLink: ( { id } ) => PREGENERATED_LINK_PATTERN.test( id ),
-	subscribe: ( cb ) => listenTo( styleRerenderEvents, () => cb() ),
+	subscribe: ( cb ) => {
+		let scheduledFrame: number | null = null;
+
+		const unsubscribe = listenTo( styleRerenderEvents, () => {
+			if ( scheduledFrame !== null ) {
+				return;
+			}
+
+			scheduledFrame = requestAnimationFrame( () => {
+				scheduledFrame = null;
+				cb();
+			} );
+		} );
+
+		return () => {
+			if ( scheduledFrame !== null ) {
+				cancelAnimationFrame( scheduledFrame );
+				scheduledFrame = null;
+			}
+
+			unsubscribe();
+		};
+	},
 	actions: {
 		all: ( meta = {} ) => {
 			let elements = getElements();