@elementor/editor-components 3.35.0-472 → 3.35.0-474

package/package.json

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

package/src/store/actions/load-components-assets.ts

@@ -1,27 +1,22 @@
 import { isDocumentDirty, setDocumentModifiedStatus } from '@elementor/editor-documents';
 import { type V1ElementData } from '@elementor/editor-elements';
 
-import { getComponentDocumentData } from '../../utils/component-document-data';
-import { getComponentIds } from '../../utils/get-component-ids';
+import { type ComponentDocumentsMap, getComponentDocuments } from '../../utils/get-component-documents';
 import { loadComponentsOverridableProps } from './load-components-overridable-props';
 import { loadComponentsStyles } from './load-components-styles';
 
 export async function loadComponentsAssets( elements: V1ElementData[] ) {
-	const componentIds = await getComponentIds( elements );
+	const documents = await getComponentDocuments( elements );
 
 	return Promise.all( [
-		updateDocumentState( componentIds ),
-		loadComponentsOverridableProps( componentIds ),
-		loadComponentsStyles( componentIds ),
+		updateDocumentState( documents ),
+		loadComponentsOverridableProps( [ ...documents.keys() ] ),
+		loadComponentsStyles( documents ),
 	] );
 }
 
-async function updateDocumentState( componentIds: number[] ) {
-	const components = ( await Promise.all( componentIds.map( getComponentDocumentData ) ) ).filter(
-		( document ) => !! document
-	);
-
-	const isDrafted = components.some( isDocumentDirty );
+function updateDocumentState( documents: ComponentDocumentsMap ) {
+	const isDrafted = [ ...documents.values() ].some( isDocumentDirty );
 
 	if ( isDrafted ) {
 		setDocumentModifiedStatus( true );

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

@@ -1,44 +1,45 @@
+import { type Document } from '@elementor/editor-documents';
 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 } from '../../types';
+import { type ComponentDocumentsMap } from '../../utils/get-component-documents';
 import { selectStyles, slice } from '../store';
 
-export async function loadComponentsStyles( componentIds: number[] ) {
-	if ( ! componentIds.length ) {
+export function loadComponentsStyles( documents: ComponentDocumentsMap ) {
+	if ( ! documents.size ) {
 		return;
 	}
 
 	const knownComponents = selectStyles( getState() );
-	const unknownComponentIds = componentIds.filter( ( id ) => ! knownComponents[ id ] );
+	const unknownDocuments = new Map( [ ...documents.entries() ].filter( ( [ id ] ) => ! knownComponents[ id ] ) );
 
-	if ( ! unknownComponentIds.length ) {
+	if ( ! unknownDocuments.size ) {
 		return;
 	}
 
-	await addComponentStyles( unknownComponentIds );
+	addStyles( unknownDocuments );
 }
 
-async function addComponentStyles( ids: ComponentId[] ) {
-	const newComponents = await loadStyles( ids );
-
-	addStyles( newComponents );
-}
-
-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 ] )[] ) {
+function addStyles( documents: ComponentDocumentsMap ) {
 	const styles = Object.fromEntries(
-		data.map( ( [ componentId, componentData ] ) => [ componentId, extractStyles( componentData ) ] )
+		[ ...documents.entries() ].map( ( [ id, document ] ) => [ id, extractStylesFromDocument( document ) ] )
 	);
 
 	dispatch( slice.actions.addStyles( styles ) );
 }
 
-function extractStyles( element: V1ElementData ): Array< StyleDefinition > {
-	return [ ...Object.values( element.styles ?? {} ), ...( element.elements ?? [] ).flatMap( extractStyles ) ];
+function extractStylesFromDocument( document: Document ): Array< StyleDefinition > {
+	if ( ! document.elements?.length ) {
+		return [];
+	}
+
+	return document.elements.flatMap( extractStylesFromElement );
+}
+
+function extractStylesFromElement( element: V1ElementData ): Array< StyleDefinition > {
+	return [
+		...Object.values( element.styles ?? {} ),
+		...( element.elements ?? [] ).flatMap( extractStylesFromElement ),
+	];
 }

package/src/sync/update-components-before-save.ts

@@ -3,8 +3,8 @@ import { type V1ElementData } from '@elementor/editor-elements';
 
 import { apiClient } from '../api';
 import { type DocumentSaveStatus } from '../types';
-import { getComponentDocumentData, invalidateComponentDocumentData } from '../utils/component-document-data';
-import { getComponentIds } from '../utils/get-component-ids';
+import { invalidateComponentDocumentData } from '../utils/component-document-data';
+import { getComponentDocuments } from '../utils/get-component-documents';
 
 type Options = {
 	status: DocumentSaveStatus;
@@ -16,14 +16,9 @@ export async function updateComponentsBeforeSave( { status, elements }: Options
 		return;
 	}
 
-	const componentIds = await getComponentIds( elements );
+	const documents = await getComponentDocuments( elements );
 
-	const componentDocumentData = await Promise.all( componentIds.map( getComponentDocumentData ) );
-
-	const draftIds = componentDocumentData
-		.filter( ( document ) => !! document )
-		.filter( isDocumentDirty )
-		.map( ( document ) => document.id );
+	const draftIds = [ ...documents.values() ].filter( isDocumentDirty ).map( ( document ) => document.id );
 
 	if ( draftIds.length === 0 ) {
 		return;

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

@@ -0,0 +1,70 @@
+import { type Document } from '@elementor/editor-documents';
+import { type V1ElementData } from '@elementor/editor-elements';
+
+import { type ComponentInstanceProp } from '../prop-types/component-instance-prop-type';
+import { getComponentDocumentData } from './component-document-data';
+import { isComponentInstance } from './is-component-instance';
+
+export type ComponentDocumentsMap = Map< number, Document >;
+
+type ProcessedCache = Map< number, Promise< Document | null > >;
+
+export async function getComponentDocuments(
+	elements: V1ElementData[],
+	cache: ProcessedCache = new Map()
+): Promise< ComponentDocumentsMap > {
+	const componentIds = await getComponentIds( elements, cache );
+
+	return getDocumentsMap( componentIds, cache );
+}
+
+async function getComponentIds( elements: V1ElementData[], cache: ProcessedCache ): Promise< number[] > {
+	const results = await Promise.all(
+		elements.map( async ( { widgetType, elType, elements: childElements, settings } ) => {
+			const ids: number[] = [];
+
+			if ( isComponentInstance( { widgetType, elType } ) ) {
+				const componentId = ( settings?.component_instance as ComponentInstanceProp )?.value?.component_id
+					.value;
+
+				if ( ! componentId ) {
+					return ids;
+				}
+
+				ids.push( componentId );
+
+				if ( ! cache.has( componentId ) ) {
+					cache.set( componentId, getComponentDocumentData( componentId ) );
+				}
+
+				const doc = await cache.get( componentId );
+				childElements = doc?.elements;
+			}
+
+			if ( childElements?.length ) {
+				const childIds = await getComponentIds( childElements, cache );
+				ids.push( ...childIds );
+			}
+
+			return ids;
+		} )
+	);
+
+	return [ ...new Set( results.flat() ) ];
+}
+
+async function getDocumentsMap( ids: number[], cache: ProcessedCache ): Promise< ComponentDocumentsMap > {
+	const documents = await Promise.all(
+		ids.map( async ( id ) => {
+			const document = await cache.get( id );
+
+			if ( ! document ) {
+				return null;
+			}
+
+			return [ id, document ];
+		} )
+	);
+
+	return new Map( documents.filter( ( document ): document is [ number, Document ] => document !== null ) );
+}

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

@@ -1,41 +0,0 @@
-import { type V1ElementData } from '@elementor/editor-elements';
-
-import { type ComponentInstanceProp } from '../prop-types/component-instance-prop-type';
-import { getComponentDocumentData } from './component-document-data';
-import { isComponentInstance } from './is-component-instance';
-
-export const getComponentIds = async ( elements: V1ElementData[] ): Promise< number[] > => {
-	const components = elements.map( async ( { widgetType, elType, elements: childElements, settings } ) => {
-		const ids: number[] = [];
-
-		const isComponent = isComponentInstance( { widgetType, elType } );
-
-		if ( isComponent ) {
-			const componentId = ( settings?.component_instance as ComponentInstanceProp )?.value?.component_id.value;
-
-			if ( ! componentId ) {
-				return;
-			}
-
-			const document = await getComponentDocumentData( componentId );
-
-			childElements = document?.elements;
-
-			if ( Boolean( componentId ) ) {
-				ids.push( componentId );
-			}
-		}
-
-		if ( !! childElements?.length ) {
-			const newIds = await getComponentIds( childElements );
-
-			ids.push( ...Array.from( new Set( newIds ) ) );
-		}
-
-		return ids;
-	} );
-
-	const result = ( await Promise.all( components ) ).flat();
-
-	return Array.from( new Set( result ) ).filter( ( value ) => value !== undefined );
-};