@elementor/editor-responsive 0.10.4 → 0.10.6

package/src/sync/__tests__/sync-store.test.ts

@@ -5,7 +5,7 @@ import { __createStore, __dispatch, __registerSlice, SliceState, Store } from '@
 import { selectActiveBreakpoint, selectEntities } from '../../store/selectors';
 
 describe( '@elementor/editor-responsive - Sync Store', () => {
-	let store: Store<SliceState<typeof slice>>;
+	let store: Store< SliceState< typeof slice > >;
 	let extendedWindow: ExtendedWindow;
 
 	beforeEach( () => {
@@ -14,7 +14,7 @@ describe( '@elementor/editor-responsive - Sync Store', () => {
 
 		syncStore();
 
-		extendedWindow = ( window as unknown as ExtendedWindow );
+		extendedWindow = window as unknown as ExtendedWindow;
 	} );
 
 	it( 'should initialize the store when V1 is ready', () => {
@@ -58,13 +58,15 @@ describe( '@elementor/editor-responsive - Sync Store', () => {
 		// Arrange.
 		mockV1BreakpointsConfig();
 
-		__dispatch( slice.actions.init( {
-			entities: [
-				{ id: 'desktop', label: 'Desktop' },
-				{ id: 'mobile', label: 'Mobile Portrait', width: 767, type: 'max-width' },
-			],
-			activeId: 'mobile',
-		} ) );
+		__dispatch(
+			slice.actions.init( {
+				entities: [
+					{ id: 'desktop', label: 'Desktop' },
+					{ id: 'mobile', label: 'Mobile Portrait', width: 767, type: 'max-width' },
+				],
+				activeId: 'mobile',
+			} )
+		);
 
 		// Act - Mock a change.
 		jest.mocked( extendedWindow.elementor.channels.deviceMode.request ).mockReturnValue( 'desktop' );
@@ -78,13 +80,15 @@ describe( '@elementor/editor-responsive - Sync Store', () => {
 		// Arrange.
 		mockV1BreakpointsConfig();
 
-		__dispatch( slice.actions.init( {
-			entities: [
-				{ id: 'desktop', label: 'Desktop' },
-				{ id: 'mobile', label: 'Mobile Portrait', width: 767, type: 'max-width' },
-			],
-			activeId: 'desktop',
-		} ) );
+		__dispatch(
+			slice.actions.init( {
+				entities: [
+					{ id: 'desktop', label: 'Desktop' },
+					{ id: 'mobile', label: 'Mobile Portrait', width: 767, type: 'max-width' },
+				],
+				activeId: 'desktop',
+			} )
+		);
 
 		// Act - Mock a change.
 		jest.mocked( extendedWindow.elementor.channels.deviceMode.request ).mockReturnValue( '' as BreakpointId );

package/src/sync/sync-store.ts

@@ -12,28 +12,24 @@ export default function syncStore() {
 function syncInitialization() {
 	const { init } = slice.actions;
 
-	listenTo(
-		v1ReadyEvent(),
-		() => {
-			__dispatch( init( {
+	listenTo( v1ReadyEvent(), () => {
+		__dispatch(
+			init( {
 				entities: getBreakpoints(),
 				activeId: getActiveBreakpoint(),
-			} ) );
-		}
-	);
+			} )
+		);
+	} );
 }
 
 function syncOnChange() {
 	const { activateBreakpoint } = slice.actions;
 
-	listenTo(
-		deviceModeChangeEvent(),
-		() => {
-			const activeBreakpoint = getActiveBreakpoint();
+	listenTo( deviceModeChangeEvent(), () => {
+		const activeBreakpoint = getActiveBreakpoint();
 
-			__dispatch( activateBreakpoint( activeBreakpoint ) );
-		},
-	);
+		__dispatch( activateBreakpoint( activeBreakpoint ) );
+	} );
 }
 
 function getBreakpoints() {
@@ -43,8 +39,7 @@ function getBreakpoints() {
 		return [];
 	}
 
-	const entities = Object
-		.entries( breakpoints )
+	const entities = Object.entries( breakpoints )
 		.filter( ( [ , breakpoint ] ) => breakpoint.is_enabled )
 		.map( ( [ id, { value, direction, label } ] ) => {
 			return {

package/src/types.ts

@@ -5,40 +5,43 @@ export type BreakpointSize = number;
 export type BreakpointLabel = string;
 
 export type Breakpoint = {
-	id: BreakpointId,
-	label: BreakpointLabel,
-	width?: BreakpointSize,
-	type?: 'min-width' | 'max-width',
-}
+	id: BreakpointId;
+	label: BreakpointLabel;
+	width?: BreakpointSize;
+	type?: 'min-width' | 'max-width';
+};
 
 export type ExtendedWindow = Window & {
 	elementor: {
 		config: {
 			responsive: {
-				breakpoints: Record<Exclude<BreakpointId, 'desktop'>, {
-					direction: 'min' | 'max',
-					is_enabled: boolean,
-					value: BreakpointSize,
-					label: BreakpointLabel,
-				}>
-			}
-		},
+				breakpoints: Record<
+					Exclude< BreakpointId, 'desktop' >,
+					{
+						direction: 'min' | 'max';
+						is_enabled: boolean;
+						value: BreakpointSize;
+						label: BreakpointLabel;
+					}
+				>;
+			};
+		};
 		channels: {
 			deviceMode: {
-				request: ( request: 'currentMode' ) => BreakpointId,
-			}
-		},
+				request: ( request: 'currentMode' ) => BreakpointId;
+			};
+		};
 		editorEvents: {
-			dispatchEvent: ( name: string, data: Record<string, string> ) => void
+			dispatchEvent: ( name: string, data: Record< string, string > ) => void;
 			config: {
-				locations: Record<string, string>,
-				secondaryLocations: Record<string, string>,
-				triggers: Record<string, string>,
-				elements: Record<string, string>
+				locations: Record< string, string >;
+				secondaryLocations: Record< string, string >;
+				triggers: Record< string, string >;
+				elements: Record< string, string >;
 				names: {
-					topBar: Record<string, string>
-				}
-			}
-		}
-	}
-}
+					topBar: Record< string, string >;
+				};
+			};
+		};
+	};
+};