@elementor/editor-components 4.0.0-675 → 4.0.0-676

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "4.0.0-675",
+  "version": "4.0.0-676",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,31 +40,31 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.0.0-675",
-    "@elementor/editor-canvas": "4.0.0-675",
-    "@elementor/editor-controls": "4.0.0-675",
-    "@elementor/editor-documents": "4.0.0-675",
-    "@elementor/editor-editing-panel": "4.0.0-675",
-    "@elementor/editor-elements": "4.0.0-675",
-    "@elementor/editor-elements-panel": "4.0.0-675",
-    "@elementor/editor-mcp": "4.0.0-675",
-    "@elementor/editor-templates": "4.0.0-675",
-    "@elementor/editor-panels": "4.0.0-675",
-    "@elementor/editor-props": "4.0.0-675",
-    "@elementor/editor-styles-repository": "4.0.0-675",
-    "@elementor/editor-ui": "4.0.0-675",
-    "@elementor/editor-v1-adapters": "4.0.0-675",
-    "@elementor/http-client": "4.0.0-675",
+    "@elementor/editor": "4.0.0-676",
+    "@elementor/editor-canvas": "4.0.0-676",
+    "@elementor/editor-controls": "4.0.0-676",
+    "@elementor/editor-documents": "4.0.0-676",
+    "@elementor/editor-editing-panel": "4.0.0-676",
+    "@elementor/editor-elements": "4.0.0-676",
+    "@elementor/editor-elements-panel": "4.0.0-676",
+    "@elementor/editor-mcp": "4.0.0-676",
+    "@elementor/editor-templates": "4.0.0-676",
+    "@elementor/editor-panels": "4.0.0-676",
+    "@elementor/editor-props": "4.0.0-676",
+    "@elementor/editor-styles-repository": "4.0.0-676",
+    "@elementor/editor-ui": "4.0.0-676",
+    "@elementor/editor-v1-adapters": "4.0.0-676",
+    "@elementor/http-client": "4.0.0-676",
     "@elementor/icons": "^1.68.0",
-    "@elementor/events": "4.0.0-675",
-    "@elementor/query": "4.0.0-675",
-    "@elementor/schema": "4.0.0-675",
-    "@elementor/store": "4.0.0-675",
+    "@elementor/events": "4.0.0-676",
+    "@elementor/query": "4.0.0-676",
+    "@elementor/schema": "4.0.0-676",
+    "@elementor/store": "4.0.0-676",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-675",
+    "@elementor/utils": "4.0.0-676",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "4.0.0-675",
-    "@elementor/editor-current-user": "4.0.0-675"
+    "@elementor/editor-notifications": "4.0.0-676",
+    "@elementor/editor-current-user": "4.0.0-676"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/index.ts

@@ -51,6 +51,8 @@ export { componentsActions } from './store/dispatchers';
 export { componentsSelectors } from './store/selectors';
 export {
 	SLICE_NAME,
+	createComponentsAction,
+	registerComponentsReducer,
 	selectOverridableProps,
 	selectPath,
 	slice,
@@ -59,7 +61,7 @@ export {
 	useIsSanitizedComponent,
 	useOverridableProps,
 } from './store/store';
-export type { ComponentsPathItem, ComponentsSlice, SanitizeAttributes } from './store/store';
+export type { ComponentsPathItem, ComponentsSlice, ComponentsState, SanitizeAttributes } from './store/store';
 
 export { publishDraftComponentsInPageBeforeSave } from './sync/publish-draft-components-in-page-before-save';
 

package/src/store/extensible-slice.ts

@@ -0,0 +1,168 @@
+import type { V1Document } from '@elementor/editor-documents';
+import {
+	__createAction as createAction,
+	__createSlice as createSlice,
+	__dispatch as dispatch,
+	type AnyAction,
+	type PayloadAction,
+} from '@elementor/store';
+
+import type { ComponentId, OverridableProps, PublishedComponent, UnpublishedComponent } from '../types';
+import { type ComponentsState, initialState, type SanitizeAttributes, SLICE_NAME } from './store-types';
+import { loadComponents } from './thunks';
+
+type GetComponentResponse = PublishedComponent[];
+
+type ComponentsReducer< P > = ( state: ComponentsState, action: PayloadAction< P > ) => void;
+
+const extraReducersMap = new Map< string, ComponentsReducer< unknown > >();
+
+export function registerComponentsReducer< P >( name: string, reducer: ComponentsReducer< P > ) {
+	extraReducersMap.set( `${ SLICE_NAME }/${ name }`, reducer as ComponentsReducer< unknown > );
+}
+
+export function createComponentsAction< P >( name: string ) {
+	const action = createAction< P >( `${ SLICE_NAME }/${ name }` );
+
+	return {
+		action,
+		register( reducer: ComponentsReducer< P > ) {
+			registerComponentsReducer( name, reducer );
+		},
+		dispatch( payload: P ) {
+			dispatch( action( payload ) );
+		},
+	};
+}
+
+export function __resetExtraReducers() {
+	extraReducersMap.clear();
+}
+
+const baseSlice = createSlice( {
+	name: SLICE_NAME,
+	initialState,
+	reducers: {
+		add: ( state, { payload }: PayloadAction< PublishedComponent | PublishedComponent[] > ) => {
+			if ( Array.isArray( payload ) ) {
+				state.data = [ ...payload, ...state.data ];
+			} else {
+				state.data.unshift( payload );
+			}
+		},
+		load: ( state, { payload }: PayloadAction< PublishedComponent[] > ) => {
+			state.data = payload;
+		},
+		addUnpublished: ( state, { payload }: PayloadAction< UnpublishedComponent > ) => {
+			state.unpublishedData.unshift( payload );
+		},
+		removeUnpublished: ( state, { payload }: PayloadAction< string | string[] > ) => {
+			const uidsToRemove = Array.isArray( payload ) ? payload : [ payload ];
+			state.unpublishedData = state.unpublishedData.filter(
+				( component ) => ! uidsToRemove.includes( component.uid )
+			);
+		},
+		resetUnpublished: ( state ) => {
+			state.unpublishedData = [];
+		},
+		removeStyles( state, { payload }: PayloadAction< { id: ComponentId } > ) {
+			const { [ payload.id ]: _, ...rest } = state.styles;
+
+			state.styles = rest;
+		},
+		addStyles: ( state, { payload } ) => {
+			state.styles = { ...state.styles, ...payload };
+		},
+		addCreatedThisSession: ( state, { payload }: PayloadAction< string > ) => {
+			state.createdThisSession.push( payload );
+		},
+		removeCreatedThisSession: ( state, { payload }: PayloadAction< string > ) => {
+			state.createdThisSession = state.createdThisSession.filter( ( uid ) => uid !== payload );
+		},
+		archive: ( state, { payload }: PayloadAction< number > ) => {
+			const component = state.data.find( ( comp ) => comp.id === payload );
+
+			if ( component ) {
+				component.isArchived = true;
+				state.archivedThisSession.push( payload );
+			}
+		},
+		setCurrentComponentId: ( state, { payload }: PayloadAction< V1Document[ 'id' ] | null > ) => {
+			state.currentComponentId = payload;
+		},
+		setPath: ( state, { payload }: PayloadAction< ComponentsState[ 'path' ] > ) => {
+			state.path = payload;
+		},
+		setOverridableProps: (
+			state,
+			{ payload }: PayloadAction< { componentId: ComponentId; overridableProps: OverridableProps } >
+		) => {
+			const component = state.data.find( ( comp ) => comp.id === payload.componentId );
+
+			if ( ! component ) {
+				return;
+			}
+
+			component.overridableProps = payload.overridableProps;
+		},
+		rename: ( state, { payload }: PayloadAction< { componentUid: string; name: string } > ) => {
+			const component = state.data.find( ( comp ) => comp.uid === payload.componentUid );
+
+			if ( ! component ) {
+				return;
+			}
+			if ( component.id ) {
+				state.updatedComponentNames[ component.id ] = payload.name;
+			}
+			component.name = payload.name;
+		},
+		cleanUpdatedComponentNames: ( state ) => {
+			state.updatedComponentNames = {};
+		},
+		updateComponentSanitizedAttribute: (
+			state,
+			{
+				payload: { componentId, attribute },
+			}: PayloadAction< { componentId: ComponentId; attribute: SanitizeAttributes } >
+		) => {
+			if ( ! state.sanitized[ componentId ] ) {
+				state.sanitized[ componentId ] = {};
+			}
+
+			state.sanitized[ componentId ][ attribute ] = true;
+		},
+		resetSanitizedComponents: ( state ) => {
+			state.sanitized = {};
+		},
+	},
+	extraReducers: ( builder ) => {
+		builder.addCase( loadComponents.fulfilled, ( state, { payload }: PayloadAction< GetComponentResponse > ) => {
+			state.data = payload;
+			state.loadStatus = 'idle';
+		} );
+		builder.addCase( loadComponents.pending, ( state ) => {
+			state.loadStatus = 'pending';
+		} );
+		builder.addCase( loadComponents.rejected, ( state ) => {
+			state.loadStatus = 'error';
+		} );
+	},
+} );
+
+export const slice: typeof baseSlice = {
+	...baseSlice,
+	reducer( state: ComponentsState | undefined, action: AnyAction ) {
+		const nextState = baseSlice.reducer( state, action );
+
+		const extraReducer = extraReducersMap.get( action.type );
+
+		if ( ! extraReducer || ! nextState ) {
+			return nextState;
+		}
+
+		const clonedState = structuredClone( nextState );
+		extraReducer( clonedState, action as PayloadAction< unknown > );
+
+		return clonedState;
+	},
+};

package/src/store/selectors.ts

@@ -6,6 +6,7 @@ import {
 	selectArchivedThisSession,
 	selectComponentByUid,
 	selectComponents,
+	selectCreatedThisSession,
 	selectCurrentComponent,
 	selectCurrentComponentId,
 	selectOverridableProps,
@@ -40,6 +41,9 @@ export const componentsSelectors = {
 	getArchivedThisSession() {
 		return selectArchivedThisSession( getState() );
 	},
+	getCreatedThisSession() {
+		return selectCreatedThisSession( getState() );
+	},
 	getComponents() {
 		return selectComponents( getState() );
 	},

package/src/store/store-types.ts

@@ -0,0 +1,48 @@
+import { type V1Document } from '@elementor/editor-documents';
+
+import {
+	type Component,
+	type ComponentId,
+	type PublishedComponent,
+	type StylesDefinition,
+	type UnpublishedComponent,
+} from '../types';
+
+export type SanitizeAttributes = 'overridableProps';
+
+export type ComponentsState = {
+	data: PublishedComponent[];
+	unpublishedData: UnpublishedComponent[];
+	loadStatus: 'idle' | 'pending' | 'error';
+	styles: StylesDefinition;
+	createdThisSession: Component[ 'uid' ][];
+	archivedThisSession: ComponentId[];
+	path: ComponentsPathItem[];
+	currentComponentId: V1Document[ 'id' ] | null;
+	updatedComponentNames: Record< number, string >;
+
+	// We use this map to flag any sanitized attribute of a given component
+	// This map currently resets in response to the `editor/documents/open` command
+	sanitized: Record< ComponentId, Partial< Record< SanitizeAttributes, boolean > > >;
+};
+
+export type ComponentsPathItem = {
+	instanceId?: string;
+	instanceTitle?: string;
+	componentId: V1Document[ 'id' ];
+};
+
+export const initialState: ComponentsState = {
+	data: [],
+	unpublishedData: [],
+	loadStatus: 'idle',
+	styles: {},
+	createdThisSession: [],
+	archivedThisSession: [],
+	path: [],
+	currentComponentId: null,
+	updatedComponentNames: {},
+	sanitized: {},
+};
+
+export const SLICE_NAME = 'components';

package/src/store/store.ts

@@ -1,176 +1,14 @@
-import { type V1Document } from '@elementor/editor-documents';
-import {
-	__createSelector as createSelector,
-	__createSlice as createSlice,
-	__useSelector as useSelector,
-	type PayloadAction,
-	type SliceState,
-} from '@elementor/store';
+import { __createSelector as createSelector, __useSelector as useSelector, type SliceState } from '@elementor/store';
 
-import {
-	type Component,
-	type ComponentId,
-	type OverridableProps,
-	type PublishedComponent,
-	type StylesDefinition,
-	type UnpublishedComponent,
-} from '../types';
-import { loadComponents } from './thunks';
-
-type GetComponentResponse = PublishedComponent[];
-
-type Status = 'idle' | 'pending' | 'error';
-
-export type SanitizeAttributes = 'overridableProps';
-
-type ComponentsState = {
-	data: PublishedComponent[];
-	unpublishedData: UnpublishedComponent[];
-	loadStatus: Status;
-	styles: StylesDefinition;
-	createdThisSession: Component[ 'uid' ][];
-	archivedThisSession: ComponentId[];
-	path: ComponentsPathItem[];
-	currentComponentId: V1Document[ 'id' ] | null;
-	updatedComponentNames: Record< number, string >;
-
-	// We use this map to flag any sanitized attribute of a given component
-	// This map currently resets in response to the `editor/documents/open` command
-	sanitized: Record< ComponentId, Partial< Record< SanitizeAttributes, boolean > > >;
-};
+import type { ComponentId, OverridableProps, PublishedComponent, UnpublishedComponent } from '../types';
+import { type slice } from './extensible-slice';
+import { type SanitizeAttributes, SLICE_NAME } from './store-types';
 
 export type ComponentsSlice = SliceState< typeof slice >;
 
-export type ComponentsPathItem = {
-	instanceId?: string;
-	instanceTitle?: string;
-	componentId: V1Document[ 'id' ];
-};
-
-export const initialState: ComponentsState = {
-	data: [],
-	unpublishedData: [],
-	loadStatus: 'idle',
-	styles: {},
-	createdThisSession: [],
-	archivedThisSession: [],
-	path: [],
-	currentComponentId: null,
-	updatedComponentNames: {},
-	sanitized: {},
-};
-
-export const SLICE_NAME = 'components';
-
-export const slice = createSlice( {
-	name: SLICE_NAME,
-	initialState,
-	reducers: {
-		add: ( state, { payload }: PayloadAction< PublishedComponent | PublishedComponent[] > ) => {
-			if ( Array.isArray( payload ) ) {
-				state.data = [ ...payload, ...state.data ];
-			} else {
-				state.data.unshift( payload );
-			}
-		},
-		load: ( state, { payload }: PayloadAction< PublishedComponent[] > ) => {
-			state.data = payload;
-		},
-		addUnpublished: ( state, { payload }: PayloadAction< UnpublishedComponent > ) => {
-			state.unpublishedData.unshift( payload );
-		},
-		removeUnpublished: ( state, { payload }: PayloadAction< string | string[] > ) => {
-			const uidsToRemove = Array.isArray( payload ) ? payload : [ payload ];
-			state.unpublishedData = state.unpublishedData.filter(
-				( component ) => ! uidsToRemove.includes( component.uid )
-			);
-		},
-		resetUnpublished: ( state ) => {
-			state.unpublishedData = [];
-		},
-		removeStyles( state, { payload }: PayloadAction< { id: ComponentId } > ) {
-			const { [ payload.id ]: _, ...rest } = state.styles;
-
-			state.styles = rest;
-		},
-		addStyles: ( state, { payload } ) => {
-			state.styles = { ...state.styles, ...payload };
-		},
-		addCreatedThisSession: ( state, { payload }: PayloadAction< string > ) => {
-			state.createdThisSession.push( payload );
-		},
-		removeCreatedThisSession: ( state, { payload }: PayloadAction< string > ) => {
-			state.createdThisSession = state.createdThisSession.filter( ( uid ) => uid !== payload );
-		},
-		archive: ( state, { payload }: PayloadAction< number > ) => {
-			const component = state.data.find( ( comp ) => comp.id === payload );
-
-			if ( component ) {
-				component.isArchived = true;
-				state.archivedThisSession.push( payload );
-			}
-		},
-		setCurrentComponentId: ( state, { payload }: PayloadAction< V1Document[ 'id' ] | null > ) => {
-			state.currentComponentId = payload;
-		},
-		setPath: ( state, { payload }: PayloadAction< ComponentsPathItem[] > ) => {
-			state.path = payload;
-		},
-		setOverridableProps: (
-			state,
-			{ payload }: PayloadAction< { componentId: ComponentId; overridableProps: OverridableProps } >
-		) => {
-			const component = state.data.find( ( comp ) => comp.id === payload.componentId );
-
-			if ( ! component ) {
-				return;
-			}
-
-			component.overridableProps = payload.overridableProps;
-		},
-		rename: ( state, { payload }: PayloadAction< { componentUid: string; name: string } > ) => {
-			const component = state.data.find( ( comp ) => comp.uid === payload.componentUid );
-
-			if ( ! component ) {
-				return;
-			}
-			if ( component.id ) {
-				state.updatedComponentNames[ component.id ] = payload.name;
-			}
-			component.name = payload.name;
-		},
-		cleanUpdatedComponentNames: ( state ) => {
-			state.updatedComponentNames = {};
-		},
-		updateComponentSanitizedAttribute: (
-			state,
-			{
-				payload: { componentId, attribute },
-			}: PayloadAction< { componentId: ComponentId; attribute: SanitizeAttributes } >
-		) => {
-			if ( ! state.sanitized[ componentId ] ) {
-				state.sanitized[ componentId ] = {};
-			}
-
-			state.sanitized[ componentId ][ attribute ] = true;
-		},
-		resetSanitizedComponents: ( state ) => {
-			state.sanitized = {};
-		},
-	},
-	extraReducers: ( builder ) => {
-		builder.addCase( loadComponents.fulfilled, ( state, { payload }: PayloadAction< GetComponentResponse > ) => {
-			state.data = payload;
-			state.loadStatus = 'idle';
-		} );
-		builder.addCase( loadComponents.pending, ( state ) => {
-			state.loadStatus = 'pending';
-		} );
-		builder.addCase( loadComponents.rejected, ( state ) => {
-			state.loadStatus = 'error';
-		} );
-	},
-} );
+export { slice, registerComponentsReducer, createComponentsAction, __resetExtraReducers } from './extensible-slice';
+export type { ComponentsState, ComponentsPathItem, SanitizeAttributes } from './store-types';
+export { initialState, SLICE_NAME } from './store-types';
 
 export const selectData = ( state: ComponentsSlice ) => state[ SLICE_NAME ].data;
 export const selectArchivedThisSession = ( state: ComponentsSlice ) => state[ SLICE_NAME ].archivedThisSession;