@elementor/editor-components 3.35.0-357 → 3.35.0-358

package/package.json

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

package/src/component-instance-transformer.ts

@@ -1,24 +1,48 @@
-import { createTransformer } from '@elementor/editor-canvas';
+import { createTransformer, RenderContext } from '@elementor/editor-canvas';
 import { __getState as getState } from '@elementor/store';
 
 import { selectUnpublishedComponents } from './store/store';
+import { type ComponentOverridePropValue } from './types';
 import { getComponentDocumentData } from './utils/component-document-data';
 
+type ComponentInstanceContext = {
+	overrides?: Record< string, unknown >;
+};
+
+export const componentInstanceContext = new RenderContext< ComponentInstanceContext >( 'component-instance', {
+	overrides: {},
+} );
+
 export const componentInstanceTransformer = createTransformer(
-	async ( { component_id: id }: { component_id: number | string } ) => {
+	async ( {
+		component_id: id,
+		overrides: overridesValue,
+	}: {
+		component_id: number | string;
+		overrides?: ComponentOverridePropValue[];
+	} ) => {
 		const unpublishedComponents = selectUnpublishedComponents( getState() );
 
 		const unpublishedComponent = unpublishedComponents.find( ( { uid } ) => uid === id );
+
+		const overrides = overridesValue?.reduce( ( acc, override ) => ( { ...acc, ...override } ), {} );
+
 		if ( unpublishedComponent ) {
-			return structuredClone( unpublishedComponent.elements );
+			return {
+				elements: structuredClone( unpublishedComponent.elements ),
+				overrides,
+			};
 		}
 
 		if ( typeof id !== 'number' ) {
-			throw new Error( `Component ID "${ id }" not found.` );
+			throw new Error( `Component ID "${ id }" not valid.` );
 		}
 
 		const data = await getComponentDocumentData( id );
 
-		return data?.elements ?? [];
+		return {
+			elements: data?.elements ?? [],
+			overrides,
+		};
 	}
 );

package/src/component-overridable-transformer.ts

@@ -1,8 +1,55 @@
-import { createTransformer } from '@elementor/editor-canvas';
+import { createTransformer, settingsTransformersRegistry } from '@elementor/editor-canvas';
+import { type PropValue, type TransformablePropValue } from '@elementor/editor-props';
 
+import { componentInstanceContext } from './component-instance-transformer';
 import { type ComponentOverridable } from './types';
 
-export const componentOverridableTransformer = createTransformer( ( value: ComponentOverridable ) => {
-	// todo: render component overrides
-	return value.origin_value;
-} );
+export const componentOverridableTransformer = createTransformer(
+	( value: ComponentOverridable, options: { key: string } ) => {
+		const { overrides } = componentInstanceContext.get();
+
+		const overrideValue = overrides?.[ value.override_key ];
+
+		if ( overrideValue ) {
+			const isOverride = isOriginValueOverride( value.origin_value );
+
+			if ( isOverride ) {
+				return transformOverride( value, options, overrideValue );
+			}
+
+			return overrideValue;
+		}
+
+		return value.origin_value;
+	}
+);
+
+function transformOverride(
+	value: ComponentOverridable,
+	options: {
+		key: string;
+	},
+	overrideValue: PropValue
+) {
+	const transformer = settingsTransformersRegistry.get( 'override' );
+
+	if ( ! transformer ) {
+		return null;
+	}
+
+	const transformedValue = transformer( value.origin_value.value, options );
+
+	if ( ! transformedValue ) {
+		return null;
+	}
+
+	const [ key ] = Object.keys( transformedValue as Record< string, unknown > );
+
+	return {
+		[ key ]: overrideValue,
+	};
+}
+
+function isOriginValueOverride( originValue: TransformablePropValue< string > ): boolean {
+	return originValue.$$type === 'override';
+}

package/src/component-override-transformer.ts

@@ -0,0 +1,9 @@
+import { createTransformer } from '@elementor/editor-canvas';
+
+import { type ComponentOverridePropValue } from './types';
+
+export const componentOverrideTransformer = createTransformer( ( override: ComponentOverridePropValue ) => {
+	const { override_key: key, override_value: overrideValue } = override;
+
+	return { [ key ]: overrideValue };
+} );

package/src/create-component-type.ts

@@ -91,9 +91,16 @@ function createComponentView(
 		}
 
 		afterSettingsResolve( settings: { [ key: string ]: unknown } ) {
-			if ( settings.component_instance ) {
+			const componentInstance = settings.component_instance as
+				| {
+						overrides?: Record< string, unknown >;
+						elements?: unknown[];
+				  }
+				| undefined;
+
+			if ( componentInstance ) {
 				this.collection = this.legacyWindow.elementor.createBackboneElementsCollection(
-					settings.component_instance
+					componentInstance.elements
 				);
 
 				this.collection.models.forEach( setInactiveRecursively );

package/src/init.ts

@@ -21,6 +21,7 @@ import { __ } from '@wordpress/i18n';
 
 import { componentInstanceTransformer } from './component-instance-transformer';
 import { componentOverridableTransformer } from './component-overridable-transformer';
+import { componentOverrideTransformer } from './component-override-transformer';
 import { ComponentPanelHeader } from './components/component-panel-header/component-panel-header';
 import { Components } from './components/components-tab/components';
 import { COMPONENT_DOCUMENT_TYPE } from './components/consts';
@@ -119,6 +120,7 @@ export function init() {
 
 	settingsTransformersRegistry.register( 'component-instance', componentInstanceTransformer );
 	settingsTransformersRegistry.register( 'overridable', componentOverridableTransformer );
+	settingsTransformersRegistry.register( 'override', componentOverrideTransformer );
 
 	initMcp();
 }

package/src/types.ts

@@ -79,7 +79,7 @@ type ComponentOverrides = TransformablePropValue< 'overrides', ComponentOverride
 
 type ComponentOverride = TransformablePropValue< 'override', ComponentOverridePropValue >;
 
-type ComponentOverridePropValue = {
+export type ComponentOverridePropValue = {
 	override_key: string;
 	override_value: TransformablePropValue< string >;
 	schema_source: {