@elementor/editor-canvas 3.35.0-434 → 3.35.0-436

package/dist/index.d.mts

@@ -100,6 +100,7 @@ declare class ElementView {
     getRenderContext(): NamespacedRenderContext | undefined;
     getResolverRenderContext(): RenderContext | undefined;
     getNamespaceKey(): string;
+    invalidateRenderCache(): void;
 }
 type JQueryElement = {
     find: (selector: string) => JQueryElement;

package/dist/index.d.ts

@@ -100,6 +100,7 @@ declare class ElementView {
     getRenderContext(): NamespacedRenderContext | undefined;
     getResolverRenderContext(): RenderContext | undefined;
     getNamespaceKey(): string;
+    invalidateRenderCache(): void;
 }
 type JQueryElement = {
     find: (selector: string) => JQueryElement;

package/dist/index.js

@@ -1605,6 +1605,8 @@ function createTemplatedElementView({
   return class extends BaseView {
     #abortController = null;
     #childrenRenderPromises = [];
+    #lastResolvedSettingsHash = null;
+    #domUpdateWasSkipped = false;
     getTemplateType() {
       return "twig";
     }
@@ -1620,8 +1622,9 @@ function createTemplatedElementView({
     getResolverRenderContext() {
       return this._parent?.getResolverRenderContext?.();
     }
-    // Override `render` function to support async `_renderTemplate`
-    // Note that `_renderChildren` asynchronity is still NOT supported, so only the parent element rendering can be async
+    invalidateRenderCache() {
+      this.#lastResolvedSettingsHash = null;
+    }
     render() {
       this.#abortController?.abort();
       this.#abortController = new AbortController();
@@ -1630,21 +1633,35 @@ function createTemplatedElementView({
       return this._currentRenderPromise;
     }
     async _renderChildren() {
-      super._renderChildren();
       this.#childrenRenderPromises = [];
+      if (this.#shouldReuseChildren()) {
+        this.#rerenderExistingChildren();
+      } else {
+        super._renderChildren();
+      }
+      this.#collectChildrenRenderPromises();
+      await this._waitForChildrenToComplete();
+    }
+    #shouldReuseChildren() {
+      return this.#domUpdateWasSkipped && this.children?.length > 0;
+    }
+    #rerenderExistingChildren() {
+      this.children?.each((childView) => {
+        childView.render();
+      });
+    }
+    #collectChildrenRenderPromises() {
       this.children?.each((childView) => {
         if (childView._currentRenderPromise) {
           this.#childrenRenderPromises.push(childView._currentRenderPromise);
         }
       });
-      await this._waitForChildrenToComplete();
     }
     async _waitForChildrenToComplete() {
       if (this.#childrenRenderPromises.length > 0) {
         await Promise.all(this.#childrenRenderPromises);
       }
     }
-    // Overriding Marionette original `_renderTemplate` method to inject our renderer.
     async _renderTemplate() {
       this.triggerMethod("before:render:template");
       const process = signalizedProcess(this.#abortController?.signal).then((_, signal) => {
@@ -1657,6 +1674,14 @@ function createTemplatedElementView({
       }).then((settings) => {
         return this.afterSettingsResolve(settings);
       }).then(async (settings) => {
+        const settingsHash = JSON.stringify(settings);
+        const settingsChanged = settingsHash !== this.#lastResolvedSettingsHash;
+        if (!settingsChanged && this.isRendered) {
+          this.#domUpdateWasSkipped = true;
+          return null;
+        }
+        this.#domUpdateWasSkipped = false;
+        this.#lastResolvedSettingsHash = settingsHash;
         const context = {
           id: this.model.get("id"),
           type,
@@ -1664,7 +1689,12 @@ function createTemplatedElementView({
           base_styles: baseStylesDictionary
         };
         return renderer.render(templateKey, context);
-      }).then((html) => this.$el.html(html));
+      }).then((html) => {
+        if (html === null) {
+          return;
+        }
+        this.$el.html(html);
+      });
       await process.execute();
       this.bindUIElements();
       this.triggerMethod("render:template");
@@ -1980,10 +2010,11 @@ var createViewWithReplacements = (options) => {
         element: this.el,
         type: this?.model?.get("widgetType") ?? this.container?.model?.get("elType") ?? null,
         id: this?.model?.get("id") ?? null,
-        refreshView: this.render.bind(this)
+        refreshView: this.refreshView.bind(this)
       };
     }
     refreshView() {
+      this.invalidateRenderCache?.();
       this.render();
     }
     renderOnChange() {

package/dist/index.mjs

@@ -1564,6 +1564,8 @@ function createTemplatedElementView({
   return class extends BaseView {
     #abortController = null;
     #childrenRenderPromises = [];
+    #lastResolvedSettingsHash = null;
+    #domUpdateWasSkipped = false;
     getTemplateType() {
       return "twig";
     }
@@ -1579,8 +1581,9 @@ function createTemplatedElementView({
     getResolverRenderContext() {
       return this._parent?.getResolverRenderContext?.();
     }
-    // Override `render` function to support async `_renderTemplate`
-    // Note that `_renderChildren` asynchronity is still NOT supported, so only the parent element rendering can be async
+    invalidateRenderCache() {
+      this.#lastResolvedSettingsHash = null;
+    }
     render() {
       this.#abortController?.abort();
       this.#abortController = new AbortController();
@@ -1589,21 +1592,35 @@ function createTemplatedElementView({
       return this._currentRenderPromise;
     }
     async _renderChildren() {
-      super._renderChildren();
       this.#childrenRenderPromises = [];
+      if (this.#shouldReuseChildren()) {
+        this.#rerenderExistingChildren();
+      } else {
+        super._renderChildren();
+      }
+      this.#collectChildrenRenderPromises();
+      await this._waitForChildrenToComplete();
+    }
+    #shouldReuseChildren() {
+      return this.#domUpdateWasSkipped && this.children?.length > 0;
+    }
+    #rerenderExistingChildren() {
+      this.children?.each((childView) => {
+        childView.render();
+      });
+    }
+    #collectChildrenRenderPromises() {
       this.children?.each((childView) => {
         if (childView._currentRenderPromise) {
           this.#childrenRenderPromises.push(childView._currentRenderPromise);
         }
       });
-      await this._waitForChildrenToComplete();
     }
     async _waitForChildrenToComplete() {
       if (this.#childrenRenderPromises.length > 0) {
         await Promise.all(this.#childrenRenderPromises);
       }
     }
-    // Overriding Marionette original `_renderTemplate` method to inject our renderer.
     async _renderTemplate() {
       this.triggerMethod("before:render:template");
       const process = signalizedProcess(this.#abortController?.signal).then((_, signal) => {
@@ -1616,6 +1633,14 @@ function createTemplatedElementView({
       }).then((settings) => {
         return this.afterSettingsResolve(settings);
       }).then(async (settings) => {
+        const settingsHash = JSON.stringify(settings);
+        const settingsChanged = settingsHash !== this.#lastResolvedSettingsHash;
+        if (!settingsChanged && this.isRendered) {
+          this.#domUpdateWasSkipped = true;
+          return null;
+        }
+        this.#domUpdateWasSkipped = false;
+        this.#lastResolvedSettingsHash = settingsHash;
         const context = {
           id: this.model.get("id"),
           type,
@@ -1623,7 +1648,12 @@ function createTemplatedElementView({
           base_styles: baseStylesDictionary
         };
         return renderer.render(templateKey, context);
-      }).then((html) => this.$el.html(html));
+      }).then((html) => {
+        if (html === null) {
+          return;
+        }
+        this.$el.html(html);
+      });
       await process.execute();
       this.bindUIElements();
       this.triggerMethod("render:template");
@@ -1942,10 +1972,11 @@ var createViewWithReplacements = (options) => {
         element: this.el,
         type: this?.model?.get("widgetType") ?? this.container?.model?.get("elType") ?? null,
         id: this?.model?.get("id") ?? null,
-        refreshView: this.render.bind(this)
+        refreshView: this.refreshView.bind(this)
       };
     }
     refreshView() {
+      this.invalidateRenderCache?.();
       this.render();
     }
     renderOnChange() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "3.35.0-434",
+  "version": "3.35.0-436",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,24 +37,24 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "3.35.0-434",
-    "@elementor/editor-controls": "3.35.0-434",
-    "@elementor/editor-documents": "3.35.0-434",
-    "@elementor/editor-elements": "3.35.0-434",
-    "@elementor/editor-interactions": "3.35.0-434",
-    "@elementor/editor-mcp": "3.35.0-434",
-    "@elementor/editor-notifications": "3.35.0-434",
-    "@elementor/editor-props": "3.35.0-434",
-    "@elementor/editor-responsive": "3.35.0-434",
-    "@elementor/editor-styles": "3.35.0-434",
-    "@elementor/editor-styles-repository": "3.35.0-434",
-    "@elementor/editor-ui": "3.35.0-434",
-    "@elementor/editor-v1-adapters": "3.35.0-434",
-    "@elementor/schema": "3.35.0-434",
-    "@elementor/twing": "3.35.0-434",
+    "@elementor/editor": "3.35.0-436",
+    "@elementor/editor-controls": "3.35.0-436",
+    "@elementor/editor-documents": "3.35.0-436",
+    "@elementor/editor-elements": "3.35.0-436",
+    "@elementor/editor-interactions": "3.35.0-436",
+    "@elementor/editor-mcp": "3.35.0-436",
+    "@elementor/editor-notifications": "3.35.0-436",
+    "@elementor/editor-props": "3.35.0-436",
+    "@elementor/editor-responsive": "3.35.0-436",
+    "@elementor/editor-styles": "3.35.0-436",
+    "@elementor/editor-styles-repository": "3.35.0-436",
+    "@elementor/editor-ui": "3.35.0-436",
+    "@elementor/editor-v1-adapters": "3.35.0-436",
+    "@elementor/schema": "3.35.0-436",
+    "@elementor/twing": "3.35.0-436",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-434",
-    "@elementor/wp-media": "3.35.0-434",
+    "@elementor/utils": "3.35.0-436",
+    "@elementor/wp-media": "3.35.0-436",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/legacy/__tests__/create-templated-element-type.test.ts

@@ -1,12 +1,17 @@
 import { mockLegacyElementor } from 'test-utils';
 
-import { createTemplatedElementType } from '../create-templated-element-type';
+import {
+	canBeTemplated,
+	createTemplatedElementType,
+	createTemplatedElementView,
+} from '../create-templated-element-type';
 
 const MOCK_ELEMENT_TYPE = 'test-element';
+const MOCK_HTML = '<div>Element</div>';
 
 const createMockRenderer = () => ( {
 	register: jest.fn(),
-	render: jest.fn( () => Promise.resolve( '<div>Element</div>' ) ),
+	render: jest.fn( () => Promise.resolve( MOCK_HTML ) ),
 } );
 
 const createMockElementConfig = () => ( {
@@ -54,3 +59,134 @@ describe( 'createTemplatedElementType', () => {
 		expect( viewClass1 ).toBe( viewClass2 );
 	} );
 } );
+
+describe( 'createTemplatedElementView', () => {
+	beforeEach( () => {
+		mockLegacyElementor();
+	} );
+
+	describe( 'class structure', () => {
+		it( 'should return twig as template type', () => {
+			// Arrange
+			const ViewClass = createTemplatedElementView( {
+				type: MOCK_ELEMENT_TYPE,
+				renderer: createMockRenderer(),
+				element: createMockElementConfig(),
+			} );
+
+			// Assert
+			expect( ViewClass.prototype.getTemplateType() ).toBe( 'twig' );
+		} );
+
+		it( 'should return element type as namespace key', () => {
+			// Arrange
+			const ViewClass = createTemplatedElementView( {
+				type: MOCK_ELEMENT_TYPE,
+				renderer: createMockRenderer(),
+				element: createMockElementConfig(),
+			} );
+
+			// Assert
+			expect( ViewClass.prototype.getNamespaceKey() ).toBe( MOCK_ELEMENT_TYPE );
+		} );
+	} );
+
+	describe( 'template registration', () => {
+		it( 'should register templates with the renderer', () => {
+			// Arrange
+			const utils = createMockRenderer();
+			const elementConfig = {
+				...createMockElementConfig(),
+				twig_templates: {
+					template1: '<div>Template 1</div>',
+					template2: '<div>Template 2</div>',
+				},
+			};
+
+			// Act
+			createTemplatedElementView( {
+				type: MOCK_ELEMENT_TYPE,
+				renderer: utils,
+				element: elementConfig,
+			} );
+
+			// Assert
+			expect( utils.register ).toHaveBeenCalledTimes( 2 );
+			expect( utils.register ).toHaveBeenCalledWith( 'template1', '<div>Template 1</div>' );
+			expect( utils.register ).toHaveBeenCalledWith( 'template2', '<div>Template 2</div>' );
+		} );
+	} );
+} );
+
+describe( 'canBeTemplated', () => {
+	it( 'should return true when all required properties are present', () => {
+		// Arrange
+		const element = createMockElementConfig();
+
+		// Act
+		const result = canBeTemplated( element );
+
+		// Assert
+		expect( result ).toBe( true );
+	} );
+
+	it( 'should return false when atomic_props_schema is missing', () => {
+		// Arrange
+		const element = {
+			twig_templates: {},
+			twig_main_template: 'main',
+			base_styles_dictionary: {},
+		};
+
+		// Act
+		const result = canBeTemplated( element );
+
+		// Assert
+		expect( result ).toBe( false );
+	} );
+
+	it( 'should return false when twig_templates is missing', () => {
+		// Arrange
+		const element = {
+			twig_main_template: 'main',
+			atomic_props_schema: {},
+			base_styles_dictionary: {},
+		};
+
+		// Act
+		const result = canBeTemplated( element );
+
+		// Assert
+		expect( result ).toBe( false );
+	} );
+
+	it( 'should return false when twig_main_template is missing', () => {
+		// Arrange
+		const element = {
+			twig_templates: {},
+			atomic_props_schema: {},
+			base_styles_dictionary: {},
+		};
+
+		// Act
+		const result = canBeTemplated( element );
+
+		// Assert
+		expect( result ).toBe( false );
+	} );
+
+	it( 'should return false when base_styles_dictionary is missing', () => {
+		// Arrange
+		const element = {
+			twig_templates: {},
+			twig_main_template: 'main',
+			atomic_props_schema: {},
+		};
+
+		// Act
+		const result = canBeTemplated( element );
+
+		// Assert
+		expect( result ).toBe( false );
+	} );
+} );

package/src/legacy/create-templated-element-type.ts

@@ -79,6 +79,8 @@ export function createTemplatedElementView( {
 	return class extends BaseView {
 		#abortController: AbortController | null = null;
 		#childrenRenderPromises: Promise< void >[] = [];
+		#lastResolvedSettingsHash: string | null = null;
+		#domUpdateWasSkipped = false;
 
 		getTemplateType() {
 			return 'twig';
@@ -100,8 +102,10 @@ export function createTemplatedElementView( {
 			return this._parent?.getResolverRenderContext?.();
 		}
 
-		// Override `render` function to support async `_renderTemplate`
-		// Note that `_renderChildren` asynchronity is still NOT supported, so only the parent element rendering can be async
+		invalidateRenderCache() {
+			this.#lastResolvedSettingsHash = null;
+		}
+
 		render() {
 			this.#abortController?.abort();
 			this.#abortController = new AbortController();
@@ -118,17 +122,35 @@ export function createTemplatedElementView( {
 		}
 
 		async _renderChildren() {
-			super._renderChildren();
-
 			this.#childrenRenderPromises = [];
 
+			// Optimize rendering by reusing existing child views instead of recreating them.
+			if ( this.#shouldReuseChildren() ) {
+				this.#rerenderExistingChildren();
+			} else {
+				super._renderChildren();
+			}
+
+			this.#collectChildrenRenderPromises();
+			await this._waitForChildrenToComplete();
+		}
+
+		#shouldReuseChildren() {
+			return this.#domUpdateWasSkipped && this.children?.length > 0;
+		}
+
+		#rerenderExistingChildren() {
+			this.children?.each( ( childView: ElementView ) => {
+				childView.render();
+			} );
+		}
+
+		#collectChildrenRenderPromises() {
 			this.children?.each( ( childView: ElementView ) => {
 				if ( childView._currentRenderPromise ) {
 					this.#childrenRenderPromises.push( childView._currentRenderPromise );
 				}
 			} );
-
-			await this._waitForChildrenToComplete();
 		}
 
 		async _waitForChildrenToComplete() {
@@ -137,14 +159,12 @@ export function createTemplatedElementView( {
 			}
 		}
 
-		// Overriding Marionette original `_renderTemplate` method to inject our renderer.
 		async _renderTemplate() {
 			this.triggerMethod( 'before:render:template' );
 
 			const process = signalizedProcess( this.#abortController?.signal as AbortSignal )
 				.then( ( _, signal ) => {
 					const settings = this.model.get( 'settings' ).toJSON();
-
 					return resolveProps( {
 						props: settings,
 						signal,
@@ -155,7 +175,17 @@ export function createTemplatedElementView( {
 					return this.afterSettingsResolve( settings );
 				} )
 				.then( async ( settings ) => {
-					// Same as the Backend.
+					const settingsHash = JSON.stringify( settings );
+					const settingsChanged = settingsHash !== this.#lastResolvedSettingsHash;
+
+					if ( ! settingsChanged && this.isRendered ) {
+						this.#domUpdateWasSkipped = true;
+						return null;
+					}
+					this.#domUpdateWasSkipped = false;
+
+					this.#lastResolvedSettingsHash = settingsHash;
+
 					const context = {
 						id: this.model.get( 'id' ),
 						type,
@@ -165,7 +195,13 @@ export function createTemplatedElementView( {
 
 					return renderer.render( templateKey, context );
 				} )
-				.then( ( html ) => this.$el.html( html ) );
+				.then( ( html ) => {
+					if ( html === null ) {
+						return;
+					}
+
+					this.$el.html( html );
+				} );
 
 			await process.execute();
 

package/src/legacy/replacements/manager.ts

@@ -45,11 +45,12 @@ export const createViewWithReplacements = ( options: CreateTemplatedElementTypeO
 				element: this.el,
 				type: this?.model?.get( 'widgetType' ) ?? this.container?.model?.get( 'elType' ) ?? null,
 				id: this?.model?.get( 'id' ) ?? null,
-				refreshView: this.render.bind( this ),
+				refreshView: this.refreshView.bind( this ),
 			};
 		}
 
 		refreshView() {
+			this.invalidateRenderCache?.();
 			this.render();
 		}
 

package/src/legacy/types.ts

@@ -121,6 +121,8 @@ export declare class ElementView {
 	getResolverRenderContext(): RenderContext | undefined;
 
 	getNamespaceKey(): string;
+
+	invalidateRenderCache(): void;
 }
 
 type JQueryElement = {