@elementor/editor-components 4.3.0-999 → 4.3.0-beta2

package/package.json

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

package/src/component-overridable-transformer.ts

@@ -7,24 +7,36 @@ export const componentOverridableTransformer = createTransformer(
 	( value: ComponentOverridable, options: TransformerOptions ) => {
 		const { overrides } = options.renderContext ?? {};
 
+		const originValue = normalizeOriginValue( value.origin_value );
 		const overrideValue = overrides?.[ value.override_key as keyof typeof overrides ];
 
 		if ( overrideValue ) {
-			const isOverride = isOriginValueOverride( value.origin_value );
-
-			if ( isOverride ) {
-				return transformOverride( value, options, overrideValue );
+			if ( isOriginValueOverride( originValue ) ) {
+				return transformOverride( originValue, options, overrideValue );
 			}
 
 			return overrideValue;
 		}
 
-		return value.origin_value;
+		return originValue;
 	}
 );
 
+/**
+ * Mirrors `Overridable_Prop_Type::normalize_origin_value()` on the PHP side. Rendering resolves
+ * props without validating them, so an empty origin value written by an older editor reaches this
+ * transformer untouched until the document is next saved.
+ *
+ * @param originValue The origin_value nested on a component-overridable prop.
+ */
+function normalizeOriginValue( originValue: ComponentOverridable[ 'origin_value' ] ) {
+	const isEmpty = !! originValue && Object.keys( originValue ).length === 0;
+
+	return isEmpty ? null : originValue;
+}
+
 function transformOverride(
-	value: ComponentOverridable,
+	originValue: TransformablePropValue< string >,
 	options: {
 		key: string;
 	},
@@ -36,7 +48,7 @@ function transformOverride(
 		return null;
 	}
 
-	const transformedValue = transformer( value.origin_value.value, options );
+	const transformedValue = transformer( originValue.value, options );
 
 	if ( ! transformedValue ) {
 		return null;
@@ -49,6 +61,8 @@ function transformOverride(
 	};
 }
 
-function isOriginValueOverride( originValue: TransformablePropValue< string > ): boolean {
-	return originValue.$$type === 'override';
+function isOriginValueOverride(
+	originValue: TransformablePropValue< string > | null
+): originValue is TransformablePropValue< string > {
+	return originValue?.$$type === 'override';
 }

package/src/create-component-type.ts

@@ -26,6 +26,7 @@ import { type ComponentRenderContext, type ExtendedWindow } from './types';
 import { detachComponentInstance } from './utils/detach-component-instance';
 import { formatComponentElementsId } from './utils/format-component-elements-id';
 import { isProComponentsSupported, isProOutdatedForComponents } from './utils/is-pro-components-supported';
+import { reconcileComponentInstanceElements } from './utils/reconcile-component-instance-elements';
 import { switchToComponent } from './utils/switch-to-component';
 import { trackComponentEvent } from './utils/tracking';
 
@@ -219,7 +220,11 @@ function createComponentView( options: ComponentTypeOptions ): typeof TemplatedE
 
 				const instanceId = this.model.get( 'id' );
 				const elements = componentInstance.elements ?? [];
-				const formattedElements = formatComponentElementsId( elements, [ instanceId ] );
+				const reconciledElements = reconcileComponentInstanceElements(
+					elements,
+					componentInstance.overrides ?? {}
+				);
+				const formattedElements = formatComponentElementsId( reconciledElements, [ instanceId ] );
 
 				this.collection = legacyWindow.elementor.createBackboneElementsCollection( formattedElements );
 

package/src/types.ts

@@ -89,7 +89,7 @@ export type ExtendedWindow = Window & {
 
 export type ComponentOverridable = {
 	override_key: string;
-	origin_value: TransformablePropValue< string >;
+	origin_value: TransformablePropValue< string > | null;
 };
 
 export type ComponentRenderContext = RenderContext< {

package/src/utils/component-document-data.ts

@@ -1,13 +1,30 @@
-import { type Document, getV1DocumentsManager } from '@elementor/editor-documents';
+import { type Document } from '@elementor/editor-documents';
+import { ajax } from '@elementor/editor-v1-adapters';
 
-type ComponentDocumentData = Document;
+// Mirrors the v1 documents manager request args so both share one ajax cache entry, keeping
+// `elementor.documents.invalidateCache()` effective. Unlike the manager, this omits `immediately`,
+// so component fetches triggered together merge into a single batched request.
+const getComponentDocumentParams = ( id: number ) => ( {
+	action: 'get_document_config',
+	unique_id: `document-${ id }`,
+	data: { id },
+} );
 
-export const getComponentDocumentData = async ( id: number ) => {
-	const documentManager = getV1DocumentsManager();
+const pendingRequests = new Map< number, Promise< Document | null > >();
 
-	try {
-		return await documentManager.request< ComponentDocumentData >( id );
-	} catch {
-		return null;
+export const getComponentDocumentData = ( id: number ): Promise< Document | null > => {
+	const pendingRequest = pendingRequests.get( id );
+
+	if ( pendingRequest ) {
+		return pendingRequest;
 	}
+
+	const request = ajax
+		.load< { id: number }, Document >( getComponentDocumentParams( id ) )
+		.catch( () => null )
+		.finally( () => pendingRequests.delete( id ) );
+
+	pendingRequests.set( id, request );
+
+	return request;
 };

package/src/utils/reconcile-component-instance-elements.ts

@@ -0,0 +1,107 @@
+import {
+	getWidgetsCache,
+	reconcileInitialChildren,
+	type V1ElementConfig,
+	type V1ElementData,
+	type V1ElementSettingsProps,
+} from '@elementor/editor-elements';
+import { type AnyTransformable } from '@elementor/editor-props';
+import { hashString } from '@elementor/utils';
+
+import {
+	applyOverridesToSettings,
+	type ElementSettings,
+	type OverridesMapping,
+	unwrapOverridableSettings,
+} from '../components/instance-editing-panel/utils/resolve-element-settings';
+
+const ELEMENT_ID_LENGTH = 7;
+
+function overridesRecordToMapping( overrides: Record< string, unknown > ): OverridesMapping {
+	const mapping: OverridesMapping = {};
+
+	for ( const [ key, value ] of Object.entries( overrides ) ) {
+		mapping[ key ] = { value: value as AnyTransformable };
+	}
+
+	return mapping;
+}
+
+function getElementConfig( element: V1ElementData ): V1ElementConfig | undefined {
+	const type = element.elType === 'widget' ? element.widgetType : element.elType;
+
+	if ( ! type ) {
+		return undefined;
+	}
+
+	return getWidgetsCache()?.[ type ];
+}
+
+/**
+ * Children inserted by dependency rules come from static `default_model` config, so
+ * `reconcileInitialChildren` gives them random ids. Replace them with ids derived from the
+ * parent id and the position in the subtree, so the instance-scoped hashing applied later by
+ * `formatComponentElementsId` is stable across renders. Keep in sync with `derive_ids()` in
+ * `modules/components/utils/reconcile-component-instance-elements.php`.
+ *
+ * Instance children are not directly editable, so overwriting the ids of a model that
+ * `reconcileInitialChildren` restored from the stash is safe and keeps the canvas aligned
+ * with the render, which has no stash to restore from.
+ *
+ * @param element The inserted element to assign ids to, recursively.
+ * @param seed    Stable string the element's id is hashed from.
+ */
+function deriveIds( element: V1ElementData, seed: string ): V1ElementData {
+	const id = hashString( seed, ELEMENT_ID_LENGTH );
+
+	return {
+		...element,
+		id,
+		elements: ( element.elements ?? [] ).map( ( child, index ) => deriveIds( child, `${ id }_${ index }` ) ),
+	};
+}
+
+function reconcileElementTree( element: V1ElementData, overridesMapping: OverridesMapping ): V1ElementData {
+	const elementConfig = getElementConfig( element );
+	const withOverrides = applyOverridesToSettings( ( element.settings ?? {} ) as ElementSettings, overridesMapping );
+	const effectiveSettings = unwrapOverridableSettings( withOverrides ) as V1ElementSettingsProps;
+
+	const originalChildren = element.elements ?? [];
+	const originalChildIds = new Set( originalChildren.map( ( child ) => child.id ) );
+
+	const attributes: {
+		elements?: V1ElementData[];
+		settings?: V1ElementSettingsProps;
+	} = {
+		elements: [ ...originalChildren ],
+		settings: effectiveSettings,
+	};
+
+	if ( elementConfig?.children_dependencies?.length ) {
+		reconcileInitialChildren( {
+			elementId: element.id,
+			elementConfig,
+			attributes,
+		} );
+	}
+
+	const reconciledChildren = ( attributes.elements ?? [] )
+		.map( ( child ) =>
+			originalChildIds.has( child.id ) ? child : deriveIds( child, `${ element.id }_${ child.elType }` )
+		)
+		.map( ( child ) => reconcileElementTree( child, overridesMapping ) );
+
+	return {
+		...element,
+		elements: reconciledChildren,
+	};
+}
+
+export function reconcileComponentInstanceElements(
+	elements: V1ElementData[],
+	overrides: Record< string, unknown > = {}
+): V1ElementData[] {
+	const overridesMapping = overridesRecordToMapping( overrides );
+
+	return elements.map( ( element ) => reconcileElementTree( element, overridesMapping ) );
+}