@elementor/editor-canvas 0.2.0 → 0.4.0

package/src/styles-renderer/multi-props.ts

@@ -0,0 +1,26 @@
+import { type Props, type PropValue } from '@elementor/editor-props';
+
+export type MultiProps = {
+	'$$multi-props': true;
+	value: Props;
+};
+
+export const isMultiProps = ( propValue: PropValue ): propValue is MultiProps => {
+	return (
+		!! propValue &&
+		typeof propValue === 'object' &&
+		'$$multi-props' in propValue &&
+		propValue[ '$$multi-props' ] === true
+	);
+};
+
+export const createMultiPropsValue = ( props: Props ): MultiProps => {
+	return {
+		'$$multi-props': true,
+		value: props,
+	};
+};
+
+export const getMultiPropsValue = ( multiProps: MultiProps ): Props => {
+	return multiProps.value;
+};

package/src/styles-renderer/render.ts

@@ -3,7 +3,8 @@ import { type Breakpoint, type BreakpointId, type BreakpointsMap } from '@elemen
 import { type StyleDefinition, type StyleVariant } from '@elementor/editor-styles';
 import { ensureError } from '@elementor/utils';
 
-import { transformValue } from './transform';
+import { getStylesSchema } from './get-styles-schema';
+import { resolve } from './resolve';
 import { type TransformersMap } from './types';
 
 type RenderParams = {
@@ -81,21 +82,18 @@ function variantToStyleDeclaration(
 	return styleDeclaration;
 }
 
-function propsToCss( props: Props, transformers: TransformersMap ) {
-	return Object.entries( props )
-		.reduce< string[] >( ( acc, [ cssProp, cssValue ] ) => {
-			const prop = camelCaseToDash( cssProp );
-			const value = transformValue( cssValue, transformers );
+function propsToCss( props: Props, transformers: TransformersMap ): string {
+	const schema = getStylesSchema();
 
-			acc.push( prop + ':' + value );
+	const transformed = resolve( { props, schema, transformers } );
+
+	return Object.entries( transformed )
+		.reduce< string[] >( ( acc, [ propName, propValue ] ) => {
+			acc.push( propName + ':' + propValue + ';' );
 
 			return acc;
 		}, [] )
-		.join( ';' );
-}
-
-function camelCaseToDash( str: string ) {
-	return str.replace( /([a-zA-Z])(?=[A-Z])/g, '$1-' ).toLowerCase();
+		.join( '' );
 }
 
 function wrapWithMediaQuery( breakpoints: BreakpointsMap, breakpoint: BreakpointId, css: string ) {

package/src/styles-renderer/resolve.ts

@@ -0,0 +1,99 @@
+import { type PropsSchema } from '@elementor/editor-elements';
+import { isTransformable, type PropKey, type Props, type PropType, type PropValue } from '@elementor/editor-props';
+
+import { getMultiPropsValue, isMultiProps } from './multi-props';
+import { type TransformersMap } from './types';
+
+const TRANSFORM_DEPTH_LIMIT = 3;
+
+type ResolveArgs = {
+	props: Props;
+	schema: PropsSchema;
+	transformers: TransformersMap;
+};
+
+export function resolve( { props, schema, transformers }: ResolveArgs ) {
+	const resolved: Props = {};
+
+	Object.entries( schema ).forEach( ( [ key, propType ] ) => {
+		const value = props[ key ] ?? propType.default;
+
+		const transformed = transform( value, key, propType, transformers );
+
+		if ( transformed === null ) {
+			return;
+		}
+
+		if ( isMultiProps( transformed ) ) {
+			Object.assign( resolved, getMultiPropsValue( transformed ) );
+			return;
+		}
+
+		resolved[ key ] = transformed;
+	} );
+
+	return resolved;
+}
+
+function transform(
+	value: PropValue,
+	propKey: PropKey,
+	propType: PropType,
+	transformers: TransformersMap,
+	depth: number = 0
+) {
+	if ( ! value && value !== 0 ) {
+		return null;
+	}
+
+	if ( ! isTransformable( value ) ) {
+		return value;
+	}
+
+	if ( depth > TRANSFORM_DEPTH_LIMIT ) {
+		return null;
+	}
+
+	if ( value.disabled === true ) {
+		return null;
+	}
+
+	if ( propType.kind === 'union' ) {
+		propType = propType.prop_types[ value.$$type ];
+
+		if ( ! propType ) {
+			return null;
+		}
+	}
+
+	// Warning: This variable is loosely-typed - use with caution.
+	let resolvedValue = value.value;
+
+	if ( propType.kind === 'object' ) {
+		resolvedValue = resolve( {
+			transformers,
+			props: resolvedValue,
+			schema: propType.shape,
+		} );
+	}
+
+	if ( propType.kind === 'array' ) {
+		resolvedValue = resolvedValue.map( ( item: PropValue ) =>
+			transform( item, propKey, propType.item_prop_type, transformers, depth )
+		);
+	}
+
+	const transformer = transformers[ value.$$type ];
+
+	if ( ! transformer ) {
+		return null;
+	}
+
+	try {
+		const transformed = transformer( resolvedValue, propKey );
+
+		return transform( transformed, propKey, propType, transformers, depth + 1 );
+	} catch {
+		return null;
+	}
+}

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

@@ -1,13 +1,9 @@
-import { colorGradientPropTypeUtil } from '@elementor/editor-props';
+import { type ColorGradientPropValue } 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 ),
-		] } )`;
-	}
+const backgroundOverlayTransformer: Transformer< ColorGradientPropValue[ 'value' ] > = ( value ) => {
+	return `linear-gradient(${ value.color },${ value.color })`;
 };
 
 export default backgroundOverlayTransformer;

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

@@ -1,20 +1,9 @@
-import { z } from '@elementor/schema';
-
 import { type Transformer } from '../types';
 
-export const schema = z.object( {
-	$$type: z.string(),
-	value: z.array( z.any() ),
-} );
-
-const createCombineArrayTransformer =
-	( delimiter: string ): Transformer =>
-	( propValue, { transform } ) => {
-		const { success, data } = schema.safeParse( propValue );
+type CreateCombineArrayTransformer = ( delimiter: string ) => Transformer< Array< string | number > >;
 
-		if ( success ) {
-			return data.value.map( ( item ) => transform( item ) ).join( delimiter );
-		}
-	};
+const createCombineArrayTransformer: CreateCombineArrayTransformer = ( delimiter ) => {
+	return ( value ) => value.filter( Boolean ).join( delimiter );
+};
 
 export default createCombineArrayTransformer;

package/src/styles-renderer/transformers/create-corner-sizes-transformer.ts

@@ -0,0 +1,33 @@
+import { type Props, type PropValue } from '@elementor/editor-props';
+
+import { createMultiPropsValue } from '../multi-props';
+import { type Transformer } from '../types';
+
+export type CornerSizes = {
+	top?: PropValue;
+	right?: PropValue;
+	bottom?: PropValue;
+	left?: PropValue;
+};
+
+export type CreateCornerSizesTransformer = (
+	keyGenerator: ( cornerKey: string ) => string
+) => Transformer< CornerSizes >;
+
+const validCorners = [ 'top-left', 'top-right', 'bottom-left', 'bottom-right' ];
+
+const createCornerSizesTransformer: CreateCornerSizesTransformer = ( keyGenerator ) => ( value ) => {
+	const props = Object.entries( value ).reduce< Props >( ( acc, [ corner, cornerValue ] ) => {
+		if ( validCorners.includes( corner ) ) {
+			const key = keyGenerator( corner );
+
+			acc[ key ] = cornerValue;
+		}
+
+		return acc;
+	}, {} );
+
+	return createMultiPropsValue( props );
+};
+
+export default createCornerSizesTransformer;

package/src/styles-renderer/transformers/create-edge-sizes-transformer.ts

@@ -0,0 +1,31 @@
+import { type Props, type PropValue } from '@elementor/editor-props';
+
+import { createMultiPropsValue } from '../multi-props';
+import { type Transformer } from '../types';
+
+export type EdgeSizes = {
+	top?: PropValue;
+	right?: PropValue;
+	bottom?: PropValue;
+	left?: PropValue;
+};
+
+export type CreateEdgeSizesTransformer = ( keyGenerator: ( edgeKey: string ) => string ) => Transformer< EdgeSizes >;
+
+const validEdges = [ 'top', 'right', 'bottom', 'left' ];
+
+const createEdgeSizesTransformer: CreateEdgeSizesTransformer = ( keyGenerator ) => ( value ) => {
+	const props = Object.entries( value ).reduce< Props >( ( acc, [ edge, edgeValue ] ) => {
+		if ( validEdges.includes( edge ) ) {
+			const key = keyGenerator( edge );
+
+			acc[ key ] = edgeValue;
+		}
+
+		return acc;
+	}, {} );
+
+	return createMultiPropsValue( props );
+};
+
+export default createEdgeSizesTransformer;

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

@@ -0,0 +1,20 @@
+import { type GapPropValue, type Props } from '@elementor/editor-props';
+
+import { createMultiPropsValue } from '../multi-props';
+import { type Transformer } from '../types';
+
+const validKeys = [ 'row', 'column' ];
+
+const gapTransformer: Transformer< GapPropValue[ 'value' ] > = ( value, key ) => {
+	const parsed = Object.entries( value ).reduce< Props >( ( acc, [ dimensionKey, dimensionValue ] ) => {
+		if ( dimensionValue && validKeys.includes( dimensionKey ) ) {
+			acc[ `${ dimensionKey }-${ key }` ] = dimensionValue;
+		}
+
+		return acc;
+	}, {} );
+
+	return createMultiPropsValue( parsed );
+};
+
+export default gapTransformer;

package/src/styles-renderer/transformers/index.ts

@@ -1,22 +1,31 @@
+import { type TransformersMap } from '../types';
 import { default as backgroundOverlay } from './background-overlay-transformer';
-import { default as borderRadius } from './border-radius-transformer';
-import { default as borderWidth } from './border-width-transformer';
-import { default as color } from './color-transformer';
 import { default as createCombineArrayTransformer } from './create-combine-array-transformer';
+import createCornerSizesTransformer from './create-corner-sizes-transformer';
+import createEdgeSizesTransformer from './create-edge-sizes-transformer';
+import { default as gap } from './gap-transformer';
 import { default as linkedDimensions } from './linked-dimensions-transformer';
+import { primitiveTransformer } from './primitive-transformer';
 import { default as shadow } from './shadow-transformer';
 import { default as size } from './size-transformer';
 import { default as stroke } from './stroke-transformer';
 
 export default {
-	color,
 	size,
 	shadow,
-	'border-radius': borderRadius,
-	'border-width': borderWidth,
-	'box-shadow': createCombineArrayTransformer( ', ' ),
-	'background-image': createCombineArrayTransformer( ', ' ),
-	'linked-dimensions': linkedDimensions,
 	stroke,
+	gap,
+
+	color: primitiveTransformer,
+	number: primitiveTransformer,
+	string: primitiveTransformer,
+
+	'linked-dimensions': linkedDimensions,
 	'background-overlay': backgroundOverlay,
-};
+
+	'box-shadow': createCombineArrayTransformer( ',' ),
+	'background-image': createCombineArrayTransformer( ',' ),
+
+	'border-width': createEdgeSizesTransformer( ( edgeKey ) => `border-${ edgeKey }-width` ),
+	'border-radius': createCornerSizesTransformer( ( cornerKey ) => `border-${ cornerKey }-radius` ),
+} satisfies TransformersMap;

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

@@ -1,15 +1,20 @@
-import { linkedDimensionsPropTypeUtil } from '@elementor/editor-props';
+import { type LinkedDimensionsPropValue, type Props } from '@elementor/editor-props';
 
+import { createMultiPropsValue } from '../multi-props';
 import { type Transformer } from '../types';
 
-const linkedDimensionsTransformer: Transformer = ( propValue, { transform } ) => {
-	if ( linkedDimensionsPropTypeUtil.isValid( propValue ) ) {
-		const { top, right, bottom, left } = propValue.value || {};
+const validKeys = [ 'top', 'right', 'bottom', 'left' ];
 
-		return `${ transform( top ) || 'unset' } ${ transform( right ) || 'unset' } ${
-			transform( bottom ) || 'unset'
-		} ${ transform( left ) || 'unset' }`;
-	}
+const linkedDimensionsTransformer: Transformer< LinkedDimensionsPropValue[ 'value' ] > = ( value, key ) => {
+	const parsed = Object.entries( value ).reduce< Props >( ( acc, [ dimensionKey, dimensionValue ] ) => {
+		if ( dimensionValue && validKeys.includes( dimensionKey ) ) {
+			acc[ `${ key }-${ dimensionKey }` ] = dimensionValue;
+		}
+
+		return acc;
+	}, {} );
+
+	return createMultiPropsValue( parsed );
 };
 
 export default linkedDimensionsTransformer;

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

@@ -0,0 +1,7 @@
+import { type Transformer } from '../types';
+
+type Primitive = string | number | boolean;
+
+export const primitiveTransformer: Transformer< Primitive > = ( value ) => {
+	return value;
+};

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

@@ -1,22 +1,11 @@
-import { shadowPropTypeUtil } from '@elementor/editor-props';
+import { type ShadowPropValue } from '@elementor/editor-props';
 
 import { type Transformer } from '../types';
 
-const shadowTransformer: Transformer = ( propValue, { transform } ) => {
-	if ( shadowPropTypeUtil.isValid( propValue ) ) {
-		const { position, hOffset, vOffset, blur, spread, color } = propValue.value || {};
-
-		return [
-			transform( hOffset ),
-			transform( vOffset ),
-			transform( blur ),
-			transform( spread ),
-			transform( color ),
-			position,
-		]
-			.filter( Boolean )
-			.join( ' ' );
-	}
+const shadowTransformer: Transformer< ShadowPropValue[ 'value' ] > = ( value ) => {
+	return [ value.hOffset, value.vOffset, value.blur, value.spread, value.color, value.position ]
+		.filter( Boolean )
+		.join( ' ' );
 };
 
 export default shadowTransformer;

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

@@ -1,11 +1,9 @@
-import { sizePropTypeUtil } from '@elementor/editor-props';
+import { type SizePropValue } from '@elementor/editor-props';
 
 import { type Transformer } from '../types';
 
-const sizeTransformer: Transformer = ( propValue ) => {
-	if ( sizePropTypeUtil.isValid( propValue ) ) {
-		return propValue.value && propValue.value.size + propValue.value.unit;
-	}
+const sizeTransformer: Transformer< SizePropValue[ 'value' ] > = ( value ) => {
+	return `${ value.size }${ value.unit }`;
 };
 
 export default sizeTransformer;

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

@@ -1,11 +1,9 @@
-import { strokePropTypeUtil } from '@elementor/editor-props';
+import { type StrokePropValue } from '@elementor/editor-props';
 
 import { type Transformer } from '../types';
 
-const strokeTransformer: Transformer = ( propValue, { transform } ) => {
-	if ( strokePropTypeUtil.isValid( propValue ) ) {
-		return `${ transform( propValue.value?.width ) } ${ transform( propValue.value?.color ) }`;
-	}
+const strokeTransformer: Transformer< StrokePropValue[ 'value' ] > = ( value ) => {
+	return `${ value.width } ${ value.color }`;
 };
 
 export default strokeTransformer;

package/src/styles-renderer/types.ts

@@ -1,9 +1,6 @@
 import { type PropValue } from '@elementor/editor-props';
 
-type TransformerOptions = {
-	transform: ( value: PropValue ) => PropValue;
-};
+export type Transformer< TValue extends PropValue > = ( value: TValue, key: string ) => PropValue;
 
-export type Transformer = ( value: PropValue, options: TransformerOptions ) => PropValue;
-
-export type TransformersMap = Record< string, Transformer >;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type TransformersMap = Record< string, Transformer< any > >;

package/src/styles-renderer/__tests__/__mocks__/style-definitions.ts

@@ -1,171 +0,0 @@
-import { type BreakpointsMap } from '@elementor/editor-responsive';
-import { type StyleDefinition } from '@elementor/editor-styles';
-
-export const singleVariantStyleMock = {
-	id: `single-variants-style`,
-	type: 'class',
-	variants: [
-		{
-			meta: {
-				breakpoint: null,
-				state: null,
-			},
-			props: {
-				fontSize: '24px',
-				fontWeight: 'bold',
-			},
-		},
-	],
-} as unknown as StyleDefinition;
-
-export const breakpointsStyleMock = {
-	id: `breakpoint-style`,
-	type: 'class',
-	variants: [
-		{
-			meta: {
-				breakpoint: null,
-				state: null,
-			},
-			props: {
-				padding: '24px',
-			},
-		},
-		{
-			meta: {
-				breakpoint: 'mobile',
-				state: null,
-			},
-			props: {
-				padding: '4px',
-			},
-		},
-		{
-			meta: {
-				breakpoint: 'tablet',
-				state: null,
-			},
-			props: {
-				padding: '16px',
-			},
-		},
-	],
-} as unknown as StyleDefinition;
-
-export const statesStyleMock = {
-	id: `breakpoint-style`,
-	type: 'class',
-	variants: [
-		{
-			meta: {
-				breakpoint: null,
-				state: null,
-			},
-			props: {
-				fontWeight: 'normal',
-			},
-		},
-		{
-			meta: {
-				breakpoint: null,
-				state: 'hover',
-			},
-			props: {
-				fontWeight: 'bold',
-			},
-		},
-		{
-			meta: {
-				breakpoint: null,
-				state: 'focus',
-			},
-			props: {
-				color: 'red',
-			},
-		},
-	],
-} as unknown as StyleDefinition;
-
-export const transformableStyleMock = {
-	id: `transformable-style`,
-	type: 'class',
-	variants: [
-		{
-			meta: {
-				breakpoint: null,
-				state: null,
-			},
-			props: {
-				fontSize: {
-					$$type: 'size',
-					value: {
-						unit: 'px',
-						size: 24,
-					},
-				},
-			},
-		},
-	],
-} as unknown as StyleDefinition;
-
-export const multiVariantsStyleMock = {
-	id: `multi-variant-style`,
-	type: 'class',
-	variants: [
-		{
-			meta: {
-				breakpoint: null,
-				state: null,
-			},
-			props: {
-				fontSize: {
-					$$type: 'size',
-					value: {
-						unit: 'px',
-						size: 24,
-					},
-				},
-				fontWeight: 'normal',
-			},
-		},
-		{
-			meta: {
-				breakpoint: 'mobile',
-				state: null,
-			},
-			props: {
-				fontSize: {
-					$$type: 'size',
-					value: {
-						unit: 'px',
-						size: 20,
-					},
-				},
-			},
-		},
-		{
-			meta: {
-				breakpoint: null,
-				state: 'hover',
-			},
-			props: {
-				fontWeight: 'bold',
-			},
-		},
-	],
-} as unknown as StyleDefinition;
-
-export const mockBreakpoints = {
-	tablet: {
-		id: 'tablet',
-		width: 992,
-		label: 'Tablet Portrait',
-		type: 'max-width',
-	},
-	mobile: {
-		id: 'mobile',
-		width: 768,
-		label: 'Mobile Portrait',
-		type: 'max-width',
-	},
-} as BreakpointsMap;

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 );
-}