@elementor/editor-canvas 0.14.0 → 0.15.0

package/src/legacy/__tests__/signalized-process.test.ts

@@ -0,0 +1,80 @@
+import { signalizedProcess } from '../signalized-process';
+
+describe( 'signalizedProcess', () => {
+	it( 'should run the steps in order', async () => {
+		// Arrange.
+		const abortController = new AbortController();
+
+		let value = '';
+
+		const process = signalizedProcess( abortController.signal )
+			.then( () => {
+				value += 'a';
+
+				return Promise.resolve( 'b' );
+			} )
+			.then( ( v ) => {
+				value += v;
+
+				return Promise.resolve( 'c' );
+			} )
+			.then( ( v ) => {
+				value += v;
+			} );
+
+		// Act.
+		await process.execute();
+
+		// Assert.
+		expect( value ).toBe( 'abc' );
+	} );
+
+	it( 'should not execute anything when the signal is aborted before the process has started', async () => {
+		// Arrange.
+		const abortController = new AbortController();
+
+		let value = 'initial';
+
+		const process = signalizedProcess( abortController.signal ).then( () => {
+			value = 'updated';
+		} );
+
+		// Act.
+		abortController.abort();
+
+		await process.execute();
+
+		// Assert.
+		expect( value ).toBe( 'initial' );
+	} );
+
+	it( 'should abort all queued steps when the signal is aborted', async () => {
+		// Arrange.
+		const abortController = new AbortController();
+
+		let value = '';
+
+		const process = signalizedProcess( abortController.signal )
+			.then( () => {
+				value += 'a';
+
+				return Promise.resolve( 'b' );
+			} )
+			.then( ( v ) => {
+				value += v;
+
+				abortController.abort();
+
+				return Promise.resolve( 'c' );
+			} )
+			.then( ( v ) => {
+				value += v;
+			} );
+
+		// Act.
+		await process.execute();
+
+		// Assert.
+		expect( value ).toBe( 'ab' );
+	} );
+} );

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

@@ -13,12 +13,12 @@ export function createElementType( type: string ): typeof ElementType {
 		}
 
 		getView() {
-			return createElementView();
+			return createElementViewClassDeclaration();
 		}
 	};
 }
 
-function createElementView(): typeof ElementView {
+export function createElementViewClassDeclaration(): typeof ElementView {
 	const legacyWindow = window as unknown as LegacyWindow;
 
 	return class extends legacyWindow.elementor.modules.elements.views.Widget {

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

@@ -0,0 +1,131 @@
+import type { V1ElementConfig } from '@elementor/editor-elements';
+
+import { type DomRenderer } from '../renderers/create-dom-renderer';
+import { createPropsResolver, type PropsResolver } from '../renderers/create-props-resolver';
+import { settingsTransformersRegistry } from '../settings-transformers-registry';
+import { createElementViewClassDeclaration } from './create-element-type';
+import { signalizedProcess } from './signalized-process';
+import { type ElementType, type ElementView, type LegacyWindow } from './types';
+
+type CreateTypeOptions = {
+	type: string;
+	renderer: DomRenderer;
+	element: TemplatedElementConfig;
+};
+
+type TemplatedElementConfig = Required<
+	Pick< V1ElementConfig, 'twig_templates' | 'twig_main_template' | 'atomic_props_schema' | 'base_styles_dictionary' >
+>;
+
+export function createTemplatedElementType( { type, renderer, element }: CreateTypeOptions ): typeof ElementType {
+	const legacyWindow = window as unknown as LegacyWindow;
+
+	Object.entries( element.twig_templates ).forEach( ( [ key, template ] ) => {
+		renderer.register( key, template );
+	} );
+
+	const propsResolver = createPropsResolver( {
+		transformers: settingsTransformersRegistry,
+		schema: element.atomic_props_schema,
+	} );
+
+	return class extends legacyWindow.elementor.modules.elements.types.Widget {
+		getType() {
+			return type;
+		}
+
+		getView() {
+			return createTemplatedElementViewClassDeclaration( {
+				type,
+				renderer,
+				propsResolver,
+				baseStylesDictionary: element.base_styles_dictionary,
+				templateKey: element.twig_main_template,
+			} );
+		}
+	};
+}
+
+export function canBeTemplated( element: Partial< TemplatedElementConfig > ): element is TemplatedElementConfig {
+	return !! (
+		element.atomic_props_schema &&
+		element.twig_templates &&
+		element.twig_main_template &&
+		element.base_styles_dictionary
+	);
+}
+
+type CreateViewOptions = {
+	type: string;
+	renderer: DomRenderer;
+	propsResolver: PropsResolver;
+	templateKey: string;
+	baseStylesDictionary: Record< string, string >;
+};
+
+function createTemplatedElementViewClassDeclaration( {
+	type,
+	renderer,
+	propsResolver: resolveProps,
+	templateKey,
+	baseStylesDictionary,
+}: CreateViewOptions ): typeof ElementView {
+	const BaseView = createElementViewClassDeclaration();
+
+	return class extends BaseView {
+		#abortController: AbortController | null = null;
+
+		getTemplateType() {
+			return 'twig';
+		}
+
+		renderOnChange() {
+			this.render();
+		}
+
+		// Overriding Marionette original render method to inject our renderer.
+		async _renderTemplate() {
+			this.#beforeRenderTemplate();
+
+			this.#abortController?.abort();
+			this.#abortController = new AbortController();
+
+			const process = signalizedProcess( this.#abortController.signal )
+				.then( ( _, signal ) => {
+					const settings = this.model.get( 'settings' ).toJSON();
+
+					return resolveProps( {
+						props: settings,
+						signal,
+					} );
+				} )
+				.then( ( resolvedSettings ) => {
+					// Same as the Backend.
+					const context = {
+						id: this.model.get( 'id' ),
+						type,
+						settings: resolvedSettings,
+						base_styles: baseStylesDictionary,
+					};
+
+					return renderer.render( templateKey, context );
+				} )
+				.then( ( html ) => this.$el.html( html ) );
+
+			await process.execute();
+
+			this.#afterRenderTemplate();
+		}
+
+		// Emulating the original Marionette behavior.
+		#beforeRenderTemplate() {
+			this.triggerMethod( 'before:render:template' );
+		}
+
+		#afterRenderTemplate() {
+			this.bindUIElements();
+
+			this.triggerMethod( 'render:template' );
+		}
+	};
+}

package/src/legacy/init-legacy-views.ts

@@ -1,7 +1,9 @@
 import { getWidgetsCache } from '@elementor/editor-elements';
 import { __privateListenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';
 
+import { createDomRenderer } from '../renderers/create-dom-renderer';
 import { createElementType } from './create-element-type';
+import { canBeTemplated, createTemplatedElementType } from './create-templated-element-type';
 import type { LegacyWindow } from './types';
 
 export function initLegacyViews() {
@@ -9,12 +11,16 @@ export function initLegacyViews() {
 		const config = getWidgetsCache() ?? {};
 		const legacyWindow = window as unknown as LegacyWindow;
 
+		const renderer = createDomRenderer();
+
 		Object.entries( config ).forEach( ( [ type, element ] ) => {
 			if ( ! element.atomic ) {
 				return;
 			}
 
-			const ElementType = createElementType( type );
+			const ElementType = canBeTemplated( element )
+				? createTemplatedElementType( { type, renderer, element } )
+				: createElementType( type );
 
 			legacyWindow.elementor.elementsManager.registerElementType( new ElementType() );
 		} );

package/src/legacy/signalized-process.ts

@@ -0,0 +1,35 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyFn = ( ...args: any[] ) => any;
+
+type SignalizedProcess< TNextArg = never > = {
+	then: < TReturn >(
+		cb: ( arg: TNextArg, signal: AbortSignal ) => TReturn
+	) => SignalizedProcess< Awaited< TReturn > >;
+
+	execute: () => Promise< void >;
+};
+
+export function signalizedProcess< TNextArg = never >(
+	signal: AbortSignal,
+	steps: AnyFn[] = []
+): SignalizedProcess< TNextArg > {
+	return {
+		then: ( cb ) => {
+			steps.push( cb );
+
+			return signalizedProcess( signal, steps );
+		},
+
+		execute: async () => {
+			let lastResult: TNextArg | undefined;
+
+			for ( const step of steps ) {
+				if ( signal.aborted ) {
+					break;
+				}
+
+				lastResult = await step( lastResult, signal );
+			}
+		},
+	};
+}

package/src/legacy/types.ts

@@ -1,3 +1,5 @@
+import { type Props } from '@elementor/editor-props';
+
 export type LegacyWindow = Window & {
 	elementor: {
 		modules: {
@@ -25,7 +27,7 @@ export declare class ElementType {
 export declare class ElementView {
 	$el: JQueryElement;
 
-	model: BackboneModel;
+	model: BackboneModel< ElementModel >;
 
 	onRender( ...args: unknown[] ): void;
 
@@ -40,18 +42,40 @@ export declare class ElementView {
 	getHandlesOverlay(): JQueryElement | null;
 
 	getContextMenuGroups(): ContextMenuGroup[];
+
+	/**
+	 * Templated view methods:
+	 */
+	getTemplateType(): string;
+
+	renderOnChange(): void;
+
+	render(): void;
+
+	_renderTemplate(): void;
+
+	triggerMethod( method: string ): void;
+
+	bindUIElements(): void;
 }
 
 type JQueryElement = {
 	find: ( selector: string ) => JQueryElement;
+	html: ( html: string ) => void;
 };
 
-type BackboneModel = {
+type BackboneModel< Model extends object > = {
 	get: < T extends keyof Model >( key: T ) => Model[ T ];
+	toJSON: () => ToJSON< Model >;
 };
 
-type Model = {
+type ElementModel = {
 	id: string;
+	settings: BackboneModel< Props >;
+};
+
+type ToJSON< T > = {
+	[ K in keyof T ]: T[ K ] extends BackboneModel< infer M > ? ToJSON< M > : T[ K ];
 };
 
 type ContextMenuGroup = {

package/src/renderers/create-dom-renderer.ts

@@ -1,6 +1,6 @@
 import { createArrayLoader, createEnvironment, type TwingArrayLoader, type TwingEnvironment } from '@elementor/twing';
 
-type DomRenderer = {
+export type DomRenderer = {
 	register: TwingArrayLoader[ 'setTemplate' ];
 	render: TwingEnvironment[ 'render' ];
 };

package/src/renderers/create-props-resolver.ts

@@ -30,12 +30,14 @@ type TransformArgs = {
 	depth?: number;
 };
 
+type ResolvedProps = Record< string, unknown >;
+
 export type PropsResolver = ReturnType< typeof createPropsResolver >;
 
 const TRANSFORM_DEPTH_LIMIT = 3;
 
 export function createPropsResolver( { transformers, schema: initialSchema, onPropResolve }: CreatePropResolverArgs ) {
-	async function resolve( { props, schema, signal }: ResolveArgs ) {
+	async function resolve( { props, schema, signal }: ResolveArgs ): Promise< ResolvedProps > {
 		schema = schema ?? initialSchema;
 
 		const promises = Promise.all(