@elementor/editor-canvas 0.3.0 → 0.5.0

package/src/styles-renderer/transform.ts

@@ -1,34 +0,0 @@
-import { isTransformable, type PropValue } from '@elementor/editor-props';
-
-import { type TransformersMap } from './types';
-
-const FALLBACK_VALUE = 'unset';
-
-export function transformValue( value: PropValue | undefined, transformers: TransformersMap ): PropValue {
-	if ( ! isTransformable( value ) ) {
-		return value;
-	}
-
-	const transformer = transformers[ value.$$type ];
-
-	if ( ! transformer ) {
-		// eslint-disable-next-line no-console
-		console.error( `Transformer not found for prop type '${ value.$$type }'` );
-
-		return FALLBACK_VALUE;
-	}
-
-	const transformedValue = transformer( value, {
-		transform: ( v ) => transformValue( v, transformers ),
-	} );
-
-	if ( transformedValue === undefined ) {
-		// eslint-disable-next-line no-console
-		console.error( `Transformer '${ value.$$type }' received unsupported value` );
-
-		return FALLBACK_VALUE;
-	}
-
-	// Transform recursively to support transformers that return transformable values.
-	return transformValue( transformedValue, transformers );
-}

package/src/styles-renderer/transformers/__tests__/background-overlay-transformer.test.ts

@@ -1,46 +0,0 @@
-import backgroundOverlayTransformer from '../background-overlay-transformer';
-
-describe( 'background-overlay-transformer', () => {
-	it( 'should return undefined if invalid', () => {
-		// Arrange.
-		const transform = jest.fn( ( item ) => item );
-		const initialData = {
-			$$type: 'background-overlay',
-			value: {
-				color: {
-					$$type: 'color',
-					value: null,
-				},
-				'invalid-key': null,
-			},
-		};
-
-		// Act.
-		const result = backgroundOverlayTransformer( initialData, { transform } );
-
-		expect( result ).toBe( undefined );
-		expect( transform ).not.toHaveBeenCalled();
-	} );
-
-	it( 'should transform valid color input to linear gradient string', () => {
-		const transform = jest.fn( ( item ) =>
-			item?.value.size ? `${ item.value.size }${ item.value.unit }` : item?.value
-		);
-
-		const prop = {
-			$$type: 'background-overlay',
-			value: {
-				color: {
-					$$type: 'color',
-					value: 'rgba(0, 0, 0, 0.2)',
-				},
-			},
-		};
-
-		// Act.
-		const result = backgroundOverlayTransformer( prop, { transform } );
-
-		// Assert.
-		expect( result ).toBe( `linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) )` );
-	} );
-} );

package/src/styles-renderer/transformers/__tests__/create-combine-array-transformer.test.ts

@@ -1,61 +0,0 @@
-import { type PropValue } from '@elementor/editor-props';
-
-import createCombineArrayTransformer from '../create-combine-array-transformer';
-
-describe( 'combine-array-transformer', () => {
-	it.each( [
-		'string',
-		{ $$type: 'object', value: { unit: 'px', size: 1 } },
-		{ $$type: 'string', value: 'rgba(0, 0, 0, 1)' },
-		{ $$type: 'number', value: 1 },
-		{ $$type: 'boolean', value: true },
-	] )( 'should return undefined if value is not an array', ( data ) => {
-		// Arrange.
-		const transform = jest.fn();
-		const transformer = createCombineArrayTransformer( ' ' );
-
-		// Act.
-		const result = transformer( data, { transform } );
-
-		// Assert.
-		expect( result ).toBe( undefined );
-		expect( transform ).not.toHaveBeenCalled();
-	} );
-
-	it( 'should return empty string if value is an empty array', () => {
-		// Arrange.
-		const transform = jest.fn();
-		const transformer = createCombineArrayTransformer( ' ' );
-		const data = {
-			$$type: 'array',
-			value: [],
-		};
-
-		// Act.
-		const result = transformer( data, { transform } );
-
-		// Assert.
-		expect( result ).toBe( '' );
-	} );
-
-	it( 'should combine array of strings with given delimiter', () => {
-		// Arrange.
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		const transform = ( item: PropValue ) => ( item as any ).value;
-		const transformer = createCombineArrayTransformer( ', ' );
-		const data = {
-			$$type: 'array',
-			value: [
-				{ $$type: 'string', value: 'a' },
-				{ $$type: 'string', value: 'b' },
-				{ $$type: 'string', value: 'c' },
-			],
-		};
-
-		// Act.
-		const result = transformer( data, { transform } );
-
-		// Assert.
-		expect( result ).toBe( 'a, b, c' );
-	} );
-} );

package/src/styles-renderer/transformers/__tests__/linked-dimensions-transformer.test.ts

@@ -1,34 +0,0 @@
-import LinkedDimensionsTransformer from '../linked-dimensions-transformer';
-
-describe( 'linked-dimensions-transformer', () => {
-	it.each( [
-		{ value: { isLinked: true, top: '10', right: '10', bottom: '10', 'invalid-left-key': '10' } },
-		{ value: { 'invalid-key': '10' } },
-	] )( 'should return undefined if invalid', async ( { value } ) => {
-		// Arrange.
-		const transform = jest.fn( ( item ) => item );
-		const initialData = { $$type: 'linked-dimensions', value };
-
-		// Act.
-		const result = LinkedDimensionsTransformer( initialData, { transform } );
-
-		// Assert.
-		expect( result ).toBe( undefined );
-		expect( transform ).not.toHaveBeenCalled();
-	} );
-
-	it( 'should transform linked-dimensions to a string', () => {
-		// Arrange.
-		const transform = jest.fn( ( value ) => value );
-		const linkedDimensions = { isLinked: false, top: undefined, right: '10', bottom: undefined, left: '10' };
-
-		// Act.
-		const result = LinkedDimensionsTransformer(
-			{ $$type: 'linked-dimensions', value: linkedDimensions },
-			{ transform }
-		);
-
-		// Assert.
-		expect( result ).toBe( 'unset 10 unset 10' );
-	} );
-} );

package/src/styles-renderer/transformers/__tests__/shadow-transformer.test.ts

@@ -1,127 +0,0 @@
-import shadowTransformer from '../shadow-transformer';
-
-describe( 'box-shadow-transformer', () => {
-	const validShadow = {
-		position: 'inset',
-		hOffset: {
-			$$type: 'size',
-			value: { unit: 'px', size: 1 },
-		},
-		vOffset: {
-			$$type: 'size',
-			value: { unit: 'px', size: 2 },
-		},
-		blur: {
-			$$type: 'size',
-			value: { unit: 'px', size: 3 },
-		},
-		spread: {
-			$$type: 'size',
-			value: { unit: 'px', size: 4 },
-		},
-		color: {
-			$$type: 'color',
-			value: 'rgba(0, 0, 0, 1)',
-		},
-	};
-
-	it.each( [ 'position', 'hOffset', 'vOffset', 'blur', 'spread', 'color' ] )(
-		'should return undefined if %s is missing',
-		( prop ) => {
-			// Arrange.
-			const transform = jest.fn( ( item ) => item?.value.size ?? item?.value );
-			const { [ prop as never ]: _, ...shadowWithoutProp } = validShadow;
-			const data = {
-				$$type: 'shadow',
-				value: {
-					...shadowWithoutProp,
-					'invalid-key': undefined,
-				},
-			};
-
-			// Act.
-			const result = shadowTransformer( data, { transform } );
-
-			// Assert.
-			expect( result ).toBe( undefined );
-			expect( transform ).not.toHaveBeenCalled();
-		}
-	);
-
-	it( 'should transform box-shadow to a string position is null', () => {
-		// Arrange.
-
-		const transform = jest.fn( ( item ) => item?.value.size ?? item?.value );
-		const data = {
-			$$type: 'shadow',
-			value: {
-				position: null,
-				hOffset: {
-					$$type: 'size',
-					value: { unit: 'px', size: 1 },
-				},
-				vOffset: {
-					$$type: 'size',
-					value: { unit: 'px', size: 2 },
-				},
-				blur: {
-					$$type: 'size',
-					value: { unit: 'px', size: 3 },
-				},
-				spread: {
-					$$type: 'size',
-					value: { unit: 'px', size: 4 },
-				},
-				color: {
-					$$type: 'color',
-					value: 'rgba(0, 0, 0, 1)',
-				},
-			},
-		};
-
-		// Act.
-		const result = shadowTransformer( data, { transform } );
-
-		// Assert.
-		expect( result ).toBe( '1 2 3 4 rgba(0, 0, 0, 1)' );
-		expect( transform ).toHaveBeenCalledTimes( 5 );
-	} );
-
-	it( 'should transform box-shadow to a string if all the props exist', () => {
-		// Arrange.
-		const transform = jest.fn( ( item ) => item?.value.size ?? item?.value );
-		const data = {
-			$$type: 'shadow',
-			value: {
-				position: 'inset',
-				hOffset: {
-					$$type: 'size',
-					value: { unit: 'px', size: 1 },
-				},
-				vOffset: {
-					$$type: 'size',
-					value: { unit: 'px', size: 2 },
-				},
-				blur: {
-					$$type: 'size',
-					value: { unit: 'px', size: 3 },
-				},
-				spread: {
-					$$type: 'size',
-					value: { unit: 'px', size: 4 },
-				},
-				color: {
-					$$type: 'color',
-					value: 'rgba(0, 0, 0, 1)',
-				},
-			},
-		};
-
-		// Act.
-		const result = shadowTransformer( data, { transform } );
-
-		// Assert.
-		expect( result ).toBe( '1 2 3 4 rgba(0, 0, 0, 1) inset' );
-		expect( transform ).toHaveBeenCalledTimes( 5 );
-	} );
-} );

package/src/styles-renderer/transformers/__tests__/size-transformer.test.ts

@@ -1,37 +0,0 @@
-import sizeTransformer from '../size-transformer';
-
-describe( 'size-transformer', () => {
-	it( 'should return undefined if invalid', () => {
-		// Arrange.
-		const transform = jest.fn( ( value ) => value );
-		const props = [ '20px', { unit: 'px' }, { size: 20 } ].map( ( array ) => ( { $$type: 'array', array } ) );
-
-		// Act.
-		const results = props.map( ( prop ) => sizeTransformer( prop, { transform } ) );
-
-		// Assert.
-		results.forEach( ( result ) => {
-			expect( result ).toBe( undefined );
-		} );
-		expect( transform ).not.toHaveBeenCalled();
-	} );
-
-	it( 'should transform a valid transformable size prop to a string', () => {
-		// Arrange.
-		const transform = jest.fn();
-		const prop = {
-			$$type: 'size',
-			value: {
-				unit: 'px',
-				size: 20,
-			},
-		};
-
-		// Act.
-		const result = sizeTransformer( prop, { transform } );
-
-		// Assert.
-		expect( result ).toBe( '20px' );
-		expect( transform ).not.toHaveBeenCalled();
-	} );
-} );

package/src/styles-renderer/transformers/__tests__/stroke-transformer.test.ts

@@ -1,59 +0,0 @@
-import strokeTransformer from '../stroke-transformer';
-
-describe( 'stroke-transformer', () => {
-	it( 'should return undefined if invalid', () => {
-		// Arrange.
-		const transform = jest.fn( ( item ) => item );
-		const initialData = {
-			$$type: 'stroke',
-			value: {
-				color: {
-					$$type: 'color',
-					value: 'red',
-				},
-				width: {
-					$$type: 'size',
-					value: {
-						unit: 'px',
-					},
-				},
-				'invalid-key': null,
-			},
-		};
-
-		// Act.
-		const result = strokeTransformer( initialData, { transform } );
-
-		expect( result ).toBe( undefined );
-		expect( transform ).not.toHaveBeenCalled();
-	} );
-
-	it( 'should transform valid stroke to text-stroke string', () => {
-		const transform = jest.fn( ( item ) =>
-			item?.value.size ? `${ item.value.size }${ item.value.unit }` : item?.value
-		);
-
-		const prop = {
-			$$type: 'stroke',
-			value: {
-				color: {
-					$$type: 'color',
-					value: '#ff0000',
-				},
-				width: {
-					$$type: 'size',
-					value: {
-						unit: 'px',
-						size: 5,
-					},
-				},
-			},
-		};
-
-		// Act.
-		const result = strokeTransformer( prop, { transform } );
-
-		// Assert.
-		expect( result ).toBe( '5px #ff0000' );
-	} );
-} );

package/src/styles-renderer/transformers/background-overlay-transformer.ts

@@ -1,13 +0,0 @@
-import { colorGradientPropTypeUtil } from '@elementor/editor-props';
-
-import { type Transformer } from '../types';
-
-const backgroundOverlayTransformer: Transformer = ( propValue, { transform } ) => {
-	if ( colorGradientPropTypeUtil.isValid( propValue ) ) {
-		return `linear-gradient( ${ [ transform( propValue.value.color ) ] }, ${ [
-			transform( propValue.value.color ),
-		] } )`;
-	}
-};
-
-export default backgroundOverlayTransformer;

package/src/styles-renderer/transformers/border-radius-transformer.ts

@@ -1,20 +0,0 @@
-import { borderRadiusPropTypeUtil } from '@elementor/editor-props';
-
-import { type Transformer } from '../types';
-
-const borderRadiusTransformer: Transformer = ( propValue, { transform } ) => {
-	if ( borderRadiusPropTypeUtil.isValid( propValue ) ) {
-		const {
-			'top-left': topLeft,
-			'top-right': topRight,
-			'bottom-right': bottomRight,
-			'bottom-left': bottomLeft,
-		} = propValue.value || {};
-
-		return `${ transform( topLeft ) || 'unset' } ${ transform( topRight ) || 'unset' } ${
-			transform( bottomRight ) || 'unset'
-		} ${ transform( bottomLeft ) || 'unset' }`;
-	}
-};
-
-export default borderRadiusTransformer;

package/src/styles-renderer/transformers/border-width-transformer.ts

@@ -1,15 +0,0 @@
-import { borderWidthPropTypeUtil } from '@elementor/editor-props';
-
-import { type Transformer } from '../types';
-
-const borderWidthTransformer: Transformer = ( propValue, { transform } ) => {
-	if ( borderWidthPropTypeUtil.isValid( propValue ) ) {
-		const { top, right, bottom, left } = propValue.value || {};
-
-		return `${ transform( top ) || 'unset' } ${ transform( right ) || 'unset' } ${
-			transform( bottom ) || 'unset'
-		} ${ transform( left ) || 'unset' }`;
-	}
-};
-
-export default borderWidthTransformer;

package/src/styles-renderer/transformers/color-transformer.ts

@@ -1,11 +0,0 @@
-import { colorPropTypeUtil } from '@elementor/editor-props';
-
-import { type Transformer } from '../types';
-
-const colorTransformer: Transformer = ( propValue ) => {
-	if ( colorPropTypeUtil.isValid( propValue ) ) {
-		return propValue.value;
-	}
-};
-
-export default colorTransformer;

package/src/styles-renderer/transformers/number-transformer.ts

@@ -1,11 +0,0 @@
-import { numberPropTypeUtil } from '@elementor/editor-props';
-
-import { type Transformer } from '../types';
-
-const numberTransformer: Transformer = ( propValue ) => {
-	if ( numberPropTypeUtil.isValid( propValue ) ) {
-		return propValue.value;
-	}
-};
-
-export default numberTransformer;

package/src/styles-renderer/transformers/string-transformer.ts

@@ -1,11 +0,0 @@
-import { stringPropTypeUtil } from '@elementor/editor-props';
-
-import { type Transformer } from '../types';
-
-const stringTransformer: Transformer = ( propValue ) => {
-	if ( stringPropTypeUtil.isValid( propValue ) ) {
-		return propValue.value;
-	}
-};
-
-export default stringTransformer;