@elementor/editor-components 3.33.0-181 → 3.33.0-183

package/src/store/load-components-styles.ts

@@ -0,0 +1,51 @@
+import { type V1ElementData } from '@elementor/editor-elements';
+import { type StyleDefinition } from '@elementor/editor-styles';
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+
+import { apiClient } from '../api';
+import { type ComponentId, type Element } from '../types';
+import { getComponentIds } from '../utils/get-component-ids';
+import { selectStyles, slice } from './store';
+
+export async function loadComponentsStyles( elements: Element[] ) {
+	const componentIds = Array.from( new Set( getComponentIds( elements ) ) );
+
+	if ( ! componentIds.length ) {
+		return;
+	}
+
+	const knownComponents = selectStyles( getState() );
+	const unknownComponentIds = componentIds.filter( ( id ) => ! knownComponents[ id ] );
+
+	if ( ! unknownComponentIds.length ) {
+		return;
+	}
+
+	addComponentStyles( unknownComponentIds );
+}
+
+async function addComponentStyles( ids: ComponentId[] ) {
+	const newComponents = await loadStyles( ids );
+
+	addStyles( newComponents );
+
+	Object.values( newComponents ).forEach( ( [ , data ] ) => {
+		loadComponentsStyles( data.elements as Element[] );
+	} );
+}
+
+async function loadStyles( ids: number[] ): Promise< [ number, V1ElementData ][] > {
+	return Promise.all( ids.map( async ( id ) => [ id, await apiClient.getComponentConfig( id ) ] ) );
+}
+
+function addStyles( data: ( readonly [ ComponentId, V1ElementData ] )[] ) {
+	const styles = Object.fromEntries(
+		data.map( ( [ componentId, componentData ] ) => [ componentId, extractStyles( componentData ) ] )
+	);
+
+	dispatch( slice.actions.addStyles( styles ) );
+}
+
+function extractStyles( element: V1ElementData ): Array< StyleDefinition > {
+	return [ ...Object.values( element.styles ?? {} ), ...( element.elements ?? [] ).flatMap( extractStyles ) ];
+}

package/src/store/remove-component-styles.ts

@@ -0,0 +1,9 @@
+import { __dispatch as dispatch } from '@elementor/store';
+
+import { apiClient } from '../api';
+import { slice } from './store';
+
+export function removeComponentStyles( id: number ) {
+	apiClient.invalidateComponentConfigCache( id );
+	dispatch( slice.actions.removeStyles( { id } ) );
+}

package/src/{store.ts → store/store.ts}

@@ -5,35 +5,48 @@ import {
 	type SliceState,
 } from '@elementor/store';
 
+import { type Component, type ComponentId, type StylesDefinition } from '../types';
 import { createComponent, loadComponents } from './thunks';
-import { type Component } from './types';
 
 type GetComponentResponse = Component[];
 
 type Status = 'idle' | 'pending' | 'error';
-export type ComponentsState = {
+
+type ComponentsState = {
 	data: Component[];
 	loadStatus: Status;
 	createStatus: Status;
+	styles: StylesDefinition;
 };
 
+type ComponentsSlice = SliceState< typeof slice >;
+
 export const initialState: ComponentsState = {
 	data: [],
 	loadStatus: 'idle',
 	createStatus: 'idle',
+	styles: {},
 };
 
-const SLICE_NAME = 'components';
+export const SLICE_NAME = 'components';
 export const slice = createSlice( {
 	name: SLICE_NAME,
 	initialState,
 	reducers: {
 		add: ( state, { payload } ) => {
-			state.data.push( payload );
+			state.data = { ...payload };
 		},
 		load: ( state, { payload } ) => {
 			state.data = payload;
 		},
+		removeStyles( state, { payload }: PayloadAction< { id: ComponentId } > ) {
+			const { [ payload.id ]: _, ...rest } = state.styles;
+
+			state.styles = rest;
+		},
+		addStyles: ( state, { payload } ) => {
+			state.styles = { ...state.styles, ...payload };
+		},
 	},
 	extraReducers: ( builder ) => {
 		builder.addCase( loadComponents.fulfilled, ( state, { payload }: PayloadAction< GetComponentResponse > ) => {
@@ -62,12 +75,15 @@ export const slice = createSlice( {
 	},
 } );
 
-const selectData = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].data;
-const selectLoadStatus = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].loadStatus;
-const selectCreateStatus = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].createStatus;
+const selectData = ( state: ComponentsSlice ) => state[ SLICE_NAME ].data;
+const selectLoadStatus = ( state: ComponentsSlice ) => state[ SLICE_NAME ].loadStatus;
+const selectCreateStatus = ( state: ComponentsSlice ) => state[ SLICE_NAME ].createStatus;
+const selectStylesDefinitions = ( state: ComponentsSlice ) => state[ SLICE_NAME ].styles ?? {};
 
 export const selectComponents = createSelector( selectData, ( data: Component[] ) => data );
 export const selectLoadIsPending = createSelector( selectLoadStatus, ( status ) => status === 'pending' );
 export const selectLoadIsError = createSelector( selectLoadStatus, ( status ) => status === 'error' );
 export const selectCreateIsPending = createSelector( selectCreateStatus, ( status ) => status === 'pending' );
 export const selectCreateIsError = createSelector( selectCreateStatus, ( status ) => status === 'error' );
+export const selectStyles = ( state: ComponentsSlice ) => state[ SLICE_NAME ].styles ?? {};
+export const selectFlatStyles = createSelector( selectStylesDefinitions, ( data ) => Object.values( data ).flat() );

package/src/{thunks.ts → store/thunks.ts}

@@ -1,6 +1,6 @@
 import { __createAsyncThunk as createAsyncThunk } from '@elementor/store';
 
-import { apiClient, type CreateComponentPayload, type CreateComponentResponse } from './api';
+import { apiClient, type CreateComponentPayload, type CreateComponentResponse } from '../api';
 
 const createComponent = createAsyncThunk< CreateComponentResponse, CreateComponentPayload >(
 	'components/create',

package/src/types.ts

@@ -1,8 +1,23 @@
+import { type V1ElementModelProps, type V1ElementSettingsProps } from '@elementor/editor-elements';
+import { type NumberPropValue } from '@elementor/editor-props';
+import type { StyleDefinition } from '@elementor/editor-styles';
+
 export type ComponentFormValues = {
 	componentName: string;
 };
 
+export type ComponentId = number;
+
+export type StylesDefinition = Record< ComponentId, StyleDefinition[] >;
+
 export type Component = {
 	id: number;
 	name: string;
 };
+
+export type Element = V1ElementModelProps & {
+	elements?: Element[];
+	settings?: V1ElementSettingsProps & {
+		component_id?: NumberPropValue;
+	};
+};

package/src/utils/get-component-ids.ts

@@ -0,0 +1,24 @@
+import { type V1ElementData } from '@elementor/editor-elements';
+import { isTransformable } from '@elementor/editor-props';
+
+export const getComponentIds = ( elements: V1ElementData[] ) => {
+	return elements.flatMap( ( element ) => {
+		const ids: number[] = [];
+
+		const type = element.widgetType || element.elType;
+
+		if (
+			type === 'e-component' &&
+			element.settings?.component_id &&
+			isTransformable( element.settings?.component_id )
+		) {
+			ids.push( element.settings.component_id.value );
+		}
+
+		if ( element.elements ) {
+			ids.push( ...getComponentIds( element.elements ) );
+		}
+
+		return ids;
+	} );
+};