@elementor/editor-global-classes 0.17.4 → 0.17.6

package/src/save-global-classes.ts

@@ -1,27 +1,63 @@
 import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
 
-import { apiClient, type UpdateContext } from './api';
-import { type GlobalClassesState, slice } from './store';
+import { apiClient, type ApiContext } from './api';
+import { type GlobalClasses, selectData, selectFrontendInitialData, selectPreviewInitialData, slice } from './store';
 
 type Options = {
-	context: UpdateContext;
+	context: ApiContext;
 };
 
 export async function saveGlobalClasses( { context }: Options ) {
-	const state: GlobalClassesState = getState().globalClasses;
-
-	const data = {
-		items: state.items,
-		order: state.order,
-	};
+	const state = selectData( getState() );
 
 	if ( context === 'preview' ) {
-		await apiClient.saveDraft( data );
-
-		return;
+		await apiClient.saveDraft( {
+			items: state.items,
+			order: state.order,
+			changes: calculateChanges( state, selectPreviewInitialData( getState() ) ),
+		} );
+	} else {
+		await apiClient.publish( {
+			items: state.items,
+			order: state.order,
+			changes: calculateChanges( state, selectFrontendInitialData( getState() ) ),
+		} );
 	}
 
-	await apiClient.publish( data );
+	dispatch( slice.actions.reset( { context } ) );
+}
+
+function calculateChanges( state: GlobalClasses, initialData: GlobalClasses ) {
+	const stateIds = Object.keys( state.items );
+	const initialDataIds = Object.keys( initialData.items );
+
+	return {
+		added: stateIds.filter( ( id ) => ! initialDataIds.includes( id ) ),
+		deleted: initialDataIds.filter( ( id ) => ! stateIds.includes( id ) ),
+		modified: stateIds.filter( ( id ) => {
+			return id in initialData.items && hash( state.items[ id ] ) !== hash( initialData.items[ id ] );
+		} ),
+	};
+}
+
+type UnknownObject = Record< string, unknown >;
+
+// Inspired by:
+// https://github.com/TanStack/query/blob/66ea5f2fc/packages/query-core/src/utils.ts#L212
+function hash( obj: UnknownObject ): string {
+	return JSON.stringify( obj, ( _, value ) =>
+		isPlainObject( value )
+			? Object.keys( value )
+					.sort()
+					.reduce< UnknownObject >( ( result, key ) => {
+						result[ key ] = value[ key ];
+
+						return result;
+					}, {} )
+			: value
+	);
+}
 
-	dispatch( slice.actions.setPristine() );
+function isPlainObject( value: unknown ): value is UnknownObject {
+	return !! value && typeof value === 'object' && ! Array.isArray( value );
 }

package/src/store.ts

@@ -13,17 +13,29 @@ import {
 	type SliceState,
 } from '@elementor/store';
 
+import type { ApiContext } from './api';
 import { GlobalClassNotFoundError } from './errors';
 
-export type GlobalClassesState = {
+export type GlobalClasses = {
 	items: Record< StyleDefinitionID, StyleDefinition >;
 	order: StyleDefinitionID[];
+};
+
+type GlobalClassesState = {
+	data: GlobalClasses;
+	initialData: {
+		frontend: GlobalClasses;
+		preview: GlobalClasses;
+	};
 	isDirty: boolean;
 };
 
 const initialState: GlobalClassesState = {
-	items: {},
-	order: [],
+	data: { items: {}, order: [] },
+	initialData: {
+		frontend: { items: {}, order: [] },
+		preview: { items: {}, order: [] },
+	},
 	isDirty: false,
 };
 
@@ -36,49 +48,65 @@ export const slice = createSlice( {
 	name: SLICE_NAME,
 	initialState,
 	reducers: {
-		init( state, { payload }: PayloadAction< Pick< GlobalClassesState, 'items' | 'order' > > ) {
-			state.items = payload.items;
-			state.order = payload.order;
+		load(
+			state,
+			{
+				payload: { frontend, preview },
+			}: PayloadAction< {
+				frontend: GlobalClasses;
+				preview: GlobalClasses;
+			} >
+		) {
+			state.initialData.frontend = frontend;
+			state.initialData.preview = preview;
+			state.data = preview;
 
 			state.isDirty = false;
 		},
+
 		add( state, { payload }: PayloadAction< StyleDefinition > ) {
-			state.items[ payload.id ] = payload;
-			state.order.unshift( payload.id );
+			state.data.items[ payload.id ] = payload;
+			state.data.order.unshift( payload.id );
 
 			state.isDirty = true;
 		},
+
 		delete( state, { payload }: PayloadAction< StyleDefinitionID > ) {
-			state.items = Object.fromEntries( Object.entries( state.items ).filter( ( [ id ] ) => id !== payload ) );
+			state.data.items = Object.fromEntries(
+				Object.entries( state.data.items ).filter( ( [ id ] ) => id !== payload )
+			);
 
-			state.order = state.order.filter( ( id ) => id !== payload );
+			state.data.order = state.data.order.filter( ( id ) => id !== payload );
 
 			state.isDirty = true;
 		},
+
 		setOrder( state, { payload }: PayloadAction< StyleDefinitionID[] > ) {
-			state.order = payload;
+			state.data.order = payload;
 
 			state.isDirty = true;
 		},
+
 		update( state, { payload }: PayloadAction< { style: UpdateActionPayload } > ) {
-			const style = state.items[ payload.style.id ];
+			const style = state.data.items[ payload.style.id ];
 
 			const mergedData = {
 				...style,
 				...payload.style,
 			};
 
-			state.items[ payload.style.id ] = mergedData;
+			state.data.items[ payload.style.id ] = mergedData;
 
 			state.isDirty = true;
 		},
+
 		updateProps(
 			state,
 			{
 				payload,
 			}: PayloadAction< { id: StyleDefinitionID; meta: StyleDefinitionVariant[ 'meta' ]; props: Props } >
 		) {
-			const style = state.items[ payload.id ];
+			const style = state.data.items[ payload.id ];
 
 			if ( ! style ) {
 				throw new GlobalClassNotFoundError( { context: { styleId: payload.id } } );
@@ -95,22 +123,36 @@ export const slice = createSlice( {
 			state.isDirty = true;
 		},
 
-		setPristine( state ) {
-			state.isDirty = false;
+		reset( state, { payload: { context } }: PayloadAction< { context: ApiContext } > ) {
+			if ( context === 'frontend' ) {
+				state.initialData.frontend = state.data;
+
+				state.isDirty = false;
+			}
+
+			state.initialData.preview = state.data;
 		},
 	},
 } );
 
 // Selectors
-export const selectOrder = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].order;
+export const selectData = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].data;
 
-export const selectGlobalClasses = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].items;
+export const selectFrontendInitialData = ( state: SliceState< typeof slice > ) =>
+	state[ SLICE_NAME ].initialData.frontend;
+
+export const selectPreviewInitialData = ( state: SliceState< typeof slice > ) =>
+	state[ SLICE_NAME ].initialData.preview;
+
+export const selectOrder = createSelector( selectData, ( { order } ) => order );
+
+export const selectGlobalClasses = createSelector( selectData, ( { items } ) => items );
+
+export const selectIsDirty = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].isDirty;
 
 export const selectOrderedClasses = createSelector( selectGlobalClasses, selectOrder, ( items, order ) =>
 	order.map( ( id ) => items[ id ] )
 );
 
 export const selectClass = ( state: SliceState< typeof slice >, id: StyleDefinitionID ) =>
-	state[ SLICE_NAME ].items[ id ] ?? null;
-
-export const selectIsDirty = ( state: SliceState< typeof slice > ) => state.globalClasses.isDirty;
+	state[ SLICE_NAME ].data.items[ id ] ?? null;