@elementor/editor-canvas 0.13.1 → 0.15.0

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

@@ -1,13 +1,19 @@
 import { createMockPropType } from 'test-utils';
 
 import { createTransformer } from '../../transformers/create-transformer';
+import { createTransformersRegistry } from '../../transformers/create-transformers-registry';
 import { createPropsResolver } from '../create-props-resolver';
 
 describe( 'createPropsResolver', () => {
 	it( 'should resolve simple props', async () => {
 		// Arrange.
+		const transformers = createTransformersRegistry().register(
+			'int',
+			createTransformer( ( value: number ) => value + 1 )
+		);
+
 		const resolve = createPropsResolver( {
-			transformers: { int: createTransformer( ( value: number ) => value + 1 ) },
+			transformers,
 			schema: { int: createMockPropType( { kind: 'plain', key: 'int' } ) },
 		} );
 
@@ -24,8 +30,13 @@ describe( 'createPropsResolver', () => {
 
 	it( 'should skip disabled props', async () => {
 		// Arrange.
+		const transformers = createTransformersRegistry().register(
+			'int',
+			createTransformer( ( value: number ) => value + 1 )
+		);
+
 		const resolve = createPropsResolver( {
-			transformers: { int: createTransformer( ( value: number ) => value + 1 ) },
+			transformers,
 			schema: { int: createMockPropType( { kind: 'plain', key: 'int' } ) },
 		} );
 
@@ -41,13 +52,18 @@ describe( 'createPropsResolver', () => {
 		} );
 
 		// Assert.
-		expect( result ).toEqual( {} );
+		expect( result ).toEqual( { int: null } );
 	} );
 
 	it( 'should fallback to default value when there is no value', async () => {
 		// Arrange.
+		const transformers = createTransformersRegistry().register(
+			'int',
+			createTransformer( ( value: number ) => value + 1 )
+		);
+
 		const resolve = createPropsResolver( {
-			transformers: { int: createTransformer( ( value: number ) => value + 1 ) },
+			transformers,
 			schema: {
 				int: createMockPropType( {
 					kind: 'plain',
@@ -66,8 +82,13 @@ describe( 'createPropsResolver', () => {
 
 	it( 'should skip props that are not in the schema', async () => {
 		// Arrange.
+		const transformers = createTransformersRegistry().register(
+			'int',
+			createTransformer( ( value: number ) => value + 1 )
+		);
+
 		const resolve = createPropsResolver( {
-			transformers: { int: createTransformer( ( value: number ) => value + 1 ) },
+			transformers,
 			schema: {
 				int: createMockPropType( { kind: 'plain', key: 'int' } ),
 			},
@@ -93,8 +114,13 @@ describe( 'createPropsResolver', () => {
 
 	it( "should skip props that don't have a transformer", async () => {
 		// Arrange.
+		const transformers = createTransformersRegistry().register(
+			'int',
+			createTransformer( ( value: number ) => value + 1 )
+		);
+
 		const resolve = createPropsResolver( {
-			transformers: { int: createTransformer( ( value: number ) => value + 1 ) },
+			transformers,
 			schema: {
 				int: createMockPropType( { kind: 'plain', key: 'int' } ),
 				invalid: createMockPropType( { kind: 'plain', key: 'invalid' } ),
@@ -116,17 +142,94 @@ describe( 'createPropsResolver', () => {
 		} );
 
 		// Assert.
-		expect( result ).toEqual( { int: 2 } );
+		expect( result ).toEqual( { int: 2, invalid: null } );
 	} );
 
-	it( 'should skip props when their transformer throws an error', async () => {
+	it( 'should not skip props if there is a fallback transformer', async () => {
+		// Arrange.
+		const transformers = createTransformersRegistry()
+			.register(
+				'int',
+				createTransformer( ( value: number ) => value + 1 )
+			)
+			.registerFallback( createTransformer( ( value: string ) => value + ' world' ) );
+
 		const resolve = createPropsResolver( {
-			transformers: {
-				int: createTransformer( ( value: number ) => value + 1 ),
-				throws: createTransformer< number >( () => {
-					throw new Error( 'Not Working!' );
-				} ),
+			transformers,
+			schema: {
+				int: createMockPropType( { kind: 'plain', key: 'int' } ),
+				greet: createMockPropType( { kind: 'plain', key: 'string' } ),
+			},
+		} );
+
+		// Act.
+		const result = await resolve( {
+			props: {
+				int: {
+					$$type: 'int',
+					value: 1,
+				},
+				greet: {
+					$$type: 'string',
+					value: 'hello',
+				},
+			},
+		} );
+
+		// Assert.
+		expect( result ).toEqual( { int: 2, greet: 'hello world' } );
+	} );
+
+	it( 'should return null if the prop is value is not match the prop type', async () => {
+		// Arrange.
+		const transformers = createTransformersRegistry()
+			.register(
+				'int',
+				createTransformer( ( value: number ) => value + 1 )
+			)
+			.registerFallback( createTransformer( ( value: string ) => value + ' world' ) );
+
+		const resolve = createPropsResolver( {
+			transformers,
+			schema: {
+				int: createMockPropType( { kind: 'plain', key: 'int' } ),
+				greet: createMockPropType( { kind: 'plain', key: 'string' } ),
 			},
+		} );
+
+		// Act.
+		const result = await resolve( {
+			props: {
+				int: {
+					$$type: 'int',
+					value: 1,
+				},
+				greet: {
+					$$type: 'int',
+					value: 2,
+				},
+			},
+		} );
+
+		// Assert.
+		expect( result ).toEqual( { int: 2, greet: null } );
+	} );
+
+	it( 'should skip props when their transformer throws an error', async () => {
+		const transformers = createTransformersRegistry()
+			.register(
+				'int',
+				createTransformer( ( value: number ) => value + 1 )
+			)
+			.register(
+				'throws',
+				createTransformer< number >( () => {
+					throw new Error( 'Not Working!' );
+				} )
+			);
+
+		const resolve = createPropsResolver( {
+			transformers,
 			schema: {
 				int: createMockPropType( { kind: 'plain', key: 'int' } ),
 				invalid: createMockPropType( { kind: 'plain', key: 'throws' } ),
@@ -148,14 +251,19 @@ describe( 'createPropsResolver', () => {
 		} );
 
 		// Assert.
-		expect( result ).toEqual( { int: 2 } );
+		expect( result ).toEqual( { int: 2, invalid: null } );
 	} );
 
 	it( 'should trigger onResolve when resolving a prop', async () => {
+		const transformers = createTransformersRegistry().register(
+			'int',
+			createTransformer( ( value: number ) => value + 1 )
+		);
+
 		const onResolve = jest.fn();
 
 		const resolve = createPropsResolver( {
-			transformers: { int: createTransformer( ( value: number ) => value + 1 ) },
+			transformers,
 			schema: {
 				int: createMockPropType( { kind: 'plain', key: 'int' } ),
 				int2: createMockPropType( { kind: 'plain', key: 'int' } ),

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

@@ -0,0 +1,56 @@
+import { createArrayLoader, createEnvironment, type TwingArrayLoader, type TwingEnvironment } from '@elementor/twing';
+
+export type DomRenderer = {
+	register: TwingArrayLoader[ 'setTemplate' ];
+	render: TwingEnvironment[ 'render' ];
+};
+
+export function createDomRenderer(): DomRenderer {
+	const loader = createArrayLoader( {} );
+	const environment = createEnvironment( loader );
+
+	environment.registerEscapingStrategy( escapeHtmlTag, 'html_tag' );
+	environment.registerEscapingStrategy( escapeURL, 'full_url' );
+
+	return {
+		register: loader.setTemplate,
+		render: environment.render,
+	};
+}
+
+function escapeHtmlTag( value: string ) {
+	const allowedTags = [
+		'a',
+		'article',
+		'aside',
+		'button',
+		'div',
+		'footer',
+		'h1',
+		'h2',
+		'h3',
+		'h4',
+		'h5',
+		'h6',
+		'header',
+		'main',
+		'nav',
+		'p',
+		'section',
+		'span',
+	];
+
+	return allowedTags.includes( value ) ? value : 'div';
+}
+
+function escapeURL( value: string ) {
+	const allowedProtocols = [ 'http:', 'https:', 'mailto:', 'tel:' ];
+
+	try {
+		const parsed = new URL( value );
+
+		return allowedProtocols.includes( parsed.protocol ) ? value : '';
+	} catch {
+		return '';
+	}
+}

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

@@ -7,11 +7,11 @@ import {
 	type PropValue,
 } from '@elementor/editor-props';
 
-import { type TransformersMap } from '../transformers/types';
+import { type TransformersRegistry } from '../transformers/create-transformers-registry';
 import { getMultiPropsValue, isMultiProps } from './multi-props';
 
 type CreatePropResolverArgs = {
-	transformers: TransformersMap;
+	transformers: TransformersRegistry;
 	schema: PropsSchema;
 	onPropResolve?: ( args: { key: string; value: unknown } ) => void;
 };
@@ -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(
@@ -44,10 +46,6 @@ export function createPropsResolver( { transformers, schema: initialSchema, onPr
 
 				const transformed = await transform( { value, key, type, signal } );
 
-				if ( transformed === null ) {
-					return;
-				}
-
 				onPropResolve?.( { key, value: transformed } );
 
 				if ( isMultiProps( transformed ) ) {
@@ -86,6 +84,10 @@ export function createPropsResolver( { transformers, schema: initialSchema, onPr
 			}
 		}
 
+		if ( value.$$type !== type.key ) {
+			return null;
+		}
+
 		// Warning: This variable is loosely-typed - use with caution.
 		let resolvedValue = value.value;
 
@@ -105,7 +107,7 @@ export function createPropsResolver( { transformers, schema: initialSchema, onPr
 			);
 		}
 
-		const transformer = transformers[ value.$$type ];
+		const transformer = transformers.get( value.$$type );
 
 		if ( ! transformer ) {
 			return null;

package/src/renderers/render-styles.ts

@@ -97,6 +97,10 @@ async function propsToCss( { props, resolve, signal }: PropsToCssArgs ) {
 
 	return Object.entries( transformed )
 		.reduce< string[] >( ( acc, [ propName, propValue ] ) => {
+			if ( propValue === null ) {
+				return acc;
+			}
+
 			acc.push( propName + ':' + propValue + ';' );
 
 			return acc;

package/src/transformers/create-transformers-registry.ts

@@ -1,16 +1,27 @@
-import { type AnyTransformer, type TransformerName, type TransformersMap } from './types';
+import { type PropTypeKey } from '@elementor/editor-props';
+
+import { type AnyTransformer, type TransformersMap } from './types';
+
+export type TransformersRegistry = ReturnType< typeof createTransformersRegistry >;
 
 export function createTransformersRegistry() {
 	const transformers: TransformersMap = {};
 
+	let fallbackTransformer: AnyTransformer | null = null;
+
 	return {
-		register( name: TransformerName, transformer: AnyTransformer ) {
-			transformers[ name ] = transformer;
+		register( type: PropTypeKey, transformer: AnyTransformer ) {
+			transformers[ type ] = transformer;
+
+			return this;
+		},
+		registerFallback( transformer: AnyTransformer ) {
+			fallbackTransformer = transformer;
 
 			return this;
 		},
-		all() {
-			return transformers;
+		get( type: PropTypeKey ): AnyTransformer | null {
+			return transformers[ type ] ?? fallbackTransformer;
 		},
 	};
 }

package/src/transformers/styles/background-image-position-offset-transformer.ts

@@ -6,5 +6,5 @@ type BackgroundImagePositionOffset = {
 };
 
 export const backgroundImagePositionOffsetTransformer = createTransformer(
-	( { x = '0px', y = '0px' }: BackgroundImagePositionOffset ) => `${ x } ${ y }`
+	( { x, y }: BackgroundImagePositionOffset ) => `${ x ?? '0px' } ${ y ?? '0px' }`
 );

package/src/transformers/styles/background-image-size-scale-transformer.ts

@@ -6,5 +6,5 @@ type BackgroundImageSizeScale = {
 };
 
 export const backgroundImageSizeScaleTransformer = createTransformer(
-	( { width = 'auto', height = 'auto' }: BackgroundImageSizeScale ) => `${ width } ${ height }`
+	( { width, height }: BackgroundImageSizeScale ) => `${ width ?? 'auto' } ${ height ?? 'auto' }`
 );

package/src/transformers/types.ts

@@ -6,14 +6,10 @@ export type UnbrandedTransformer< TValue > = (
 	}
 ) => unknown;
 
-const brand = Symbol( 'transformer-brand' );
-
 export type Transformer< TValue > = UnbrandedTransformer< TValue > & {
-	[ brand ]: true;
+	__transformer: true;
 };
 
-export type TransformerName = string;
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type AnyTransformer = Transformer< any >;