@elementor/editor-canvas 0.7.1 → 0.9.0

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

@@ -0,0 +1,123 @@
+import {
+	isTransformable,
+	type PropKey,
+	type Props,
+	type PropsSchema,
+	type PropType,
+	type PropValue,
+} from '@elementor/editor-props';
+
+import { getMultiPropsValue, isMultiProps } from './multi-props';
+import { type TransformersMap } from './types';
+
+type CreatePropResolverOptions = {
+	onPropResolve?: ( args: { key: string; value: unknown } ) => void;
+};
+
+type ResolveArgs = {
+	props: Props;
+	schema: PropsSchema;
+	signal?: AbortSignal;
+};
+
+type TransformArgs = {
+	value: unknown;
+	key: PropKey;
+	type: PropType;
+	signal?: AbortSignal;
+	depth?: number;
+};
+
+export type PropsResolver = ReturnType< typeof createPropsResolver >;
+
+const TRANSFORM_DEPTH_LIMIT = 3;
+
+export function createPropsResolver(
+	transformers: TransformersMap,
+	{ onPropResolve }: CreatePropResolverOptions = {}
+) {
+	async function transform( { value, key, type, signal, depth = 0 }: TransformArgs ) {
+		if ( value === null || value === undefined ) {
+			return null;
+		}
+
+		if ( ! isTransformable( value ) ) {
+			return value;
+		}
+
+		if ( depth > TRANSFORM_DEPTH_LIMIT ) {
+			return null;
+		}
+
+		if ( value.disabled === true ) {
+			return null;
+		}
+
+		if ( type.kind === 'union' ) {
+			type = type.prop_types[ value.$$type ];
+
+			if ( ! type ) {
+				return null;
+			}
+		}
+
+		// Warning: This variable is loosely-typed - use with caution.
+		let resolvedValue = value.value;
+
+		if ( type.kind === 'object' ) {
+			resolvedValue = await resolve( {
+				props: resolvedValue,
+				schema: type.shape,
+				signal,
+			} );
+		}
+
+		if ( type.kind === 'array' ) {
+			resolvedValue = await Promise.all(
+				resolvedValue.map( ( item: PropValue ) =>
+					transform( { value: item, key, type: type.item_prop_type, depth, signal } )
+				)
+			);
+		}
+
+		const transformer = transformers[ value.$$type ];
+
+		if ( ! transformer ) {
+			return null;
+		}
+
+		try {
+			const transformed = await transformer( resolvedValue, { key, signal } );
+
+			return transform( { value: transformed, key, type, signal, depth: depth + 1 } );
+		} catch {
+			return null;
+		}
+	}
+
+	async function resolve( { props, schema, signal }: ResolveArgs ) {
+		const promises = Promise.all(
+			Object.entries( schema ).map( async ( [ key, type ] ) => {
+				const value = props[ key ] ?? type.default;
+
+				const transformed = await transform( { value, key, type, signal } );
+
+				if ( transformed === null ) {
+					return;
+				}
+
+				onPropResolve?.( { key, value: transformed } );
+
+				if ( isMultiProps( transformed ) ) {
+					return getMultiPropsValue( transformed );
+				}
+
+				return { [ key ]: transformed };
+			} )
+		);
+
+		return Object.assign( {}, ...( await promises ).filter( Boolean ) );
+	}
+
+	return resolve;
+}

package/src/{styles-renderer → renderers}/multi-props.ts

@@ -1,6 +1,6 @@
 import { type Props, type PropValue } from '@elementor/editor-props';
 
-export type MultiProps = {
+type MultiProps = {
 	'$$multi-props': true;
 	value: Props;
 };

package/src/{styles-renderer/render.ts → renderers/render-styles.ts}

@@ -1,38 +1,41 @@
-import { type Props } from '@elementor/editor-props';
+import { type Props, type PropsSchema } from '@elementor/editor-props';
 import { type Breakpoint, type BreakpointsMap } from '@elementor/editor-responsive';
-import {
-	getStylesSchema,
-	type StyleDefinition,
-	type StyleDefinitionState,
-	type StyleDefinitionType,
-} from '@elementor/editor-styles';
+import { type StyleDefinition, type StyleDefinitionState, type StyleDefinitionType } from '@elementor/editor-styles';
 
+import { type PropsResolver } from './create-props-resolver';
 import { UnknownStyleTypeError } from './errors';
-import { resolve } from './resolve';
-import { type TransformersMap } from './types';
 
 type RenderParams = {
-	transformers: TransformersMap;
+	resolve: PropsResolver;
 	styles: StyleDefinition[];
+	schema: PropsSchema;
 	breakpoints: BreakpointsMap;
 	selectorPrefix?: string;
 	signal?: AbortSignal;
 };
 
+type PropsToCssArgs = {
+	props: Props;
+	schema: PropsSchema;
+	resolve: PropsResolver;
+	signal?: AbortSignal;
+};
+
 const SELECTORS_MAP: Record< StyleDefinitionType, string > = {
 	class: '.',
 };
 
-export default async function render( {
-	transformers,
+export default async function renderStyles( {
+	resolve,
 	styles,
+	schema,
 	breakpoints,
 	selectorPrefix = '',
 	signal,
 }: RenderParams ) {
 	const stylesCssPromises = styles.map( async ( style ) => {
 		const variantCssPromises = Object.values( style.variants ).map( async ( variant ) => {
-			const css = await propsToCss( variant.props, transformers, signal );
+			const css = await propsToCss( { props: variant.props, schema, resolve, signal } );
 
 			return createStyleWrapper()
 				.forStyle( style )
@@ -92,10 +95,8 @@ function createStyleWrapper( value: string = '', wrapper?: ( css: string ) => st
 	};
 }
 
-async function propsToCss( props: Props, transformers: TransformersMap, signal?: AbortSignal ) {
-	const schema = getStylesSchema();
-
-	const transformed = await resolve( { props, schema, transformers, signal } );
+async function propsToCss( { props, resolve, signal, schema }: PropsToCssArgs ) {
+	const transformed = await resolve( { props, schema, signal } );
 
 	return Object.entries( transformed )
 		.reduce< string[] >( ( acc, [ propName, propValue ] ) => {

package/src/renderers/style-transformers/background-image-overlay-transformer.ts

@@ -0,0 +1,24 @@
+import { type BackgroundImageOverlayPropValue } from '@elementor/editor-props';
+
+import { type Transformer } from '../types';
+
+const DEFAULT_POSITION_VALUE = '0% 0%';
+
+const backgroundImageOverlayTransformer: Transformer< BackgroundImageOverlayPropValue[ 'value' ] > = ( value ) => {
+	const { image: imageSrc, size = null, position = null, repeat = null, attachment = null } = value;
+
+	if ( ! imageSrc ) {
+		return null;
+	}
+
+	const backgroundStyles = [
+		imageSrc,
+		repeat,
+		attachment,
+		size ? `${ position || DEFAULT_POSITION_VALUE } / ${ size }` : position,
+	].filter( Boolean );
+
+	return backgroundStyles.join( ' ' );
+};
+
+export default backgroundImageOverlayTransformer;

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

@@ -0,0 +1,10 @@
+import type { BackgroundImagePositionOffsetPropValue } from '@elementor/editor-props';
+
+import { type Transformer } from '../types';
+
+const backgroundImagePositionOffsetTransformer: Transformer< BackgroundImagePositionOffsetPropValue[ 'value' ] > = ( {
+	x = '0px',
+	y = '0px',
+} ) => `${ x } ${ y }`;
+
+export default backgroundImagePositionOffsetTransformer;

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

@@ -0,0 +1,10 @@
+import type { BackgroundImageSizeScalePropValue } from '@elementor/editor-props';
+
+import { type Transformer } from '../types';
+
+const backgroundImageSizeScaleTransformer: Transformer< BackgroundImageSizeScalePropValue[ 'value' ] > = ( {
+	width = 'auto',
+	height = 'auto',
+} ) => `${ width } ${ height }`;
+
+export default backgroundImageSizeScaleTransformer;

package/src/{styles-renderer/transformers → renderers/style-transformers}/create-corner-sizes-transformer.ts

@@ -3,18 +3,16 @@ 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;
+type CornerSizes = {
+	'start-start'?: PropValue;
+	'start-end'?: PropValue;
+	'end-start'?: PropValue;
+	'end-end'?: PropValue;
 };
 
-export type CreateCornerSizesTransformer = (
-	keyGenerator: ( cornerKey: string ) => string
-) => Transformer< CornerSizes >;
+type CreateCornerSizesTransformer = ( keyGenerator: ( cornerKey: string ) => string ) => Transformer< CornerSizes >;
 
-const validCorners = [ 'top-left', 'top-right', 'bottom-left', 'bottom-right' ];
+const validCorners = [ 'start-start', 'start-end', 'end-start', 'end-end' ];
 
 const createCornerSizesTransformer: CreateCornerSizesTransformer = ( keyGenerator ) => ( value ) => {
 	const props = Object.entries( value ).reduce< Props >( ( acc, [ corner, cornerValue ] ) => {

package/src/{styles-renderer/transformers → renderers/style-transformers}/create-edge-sizes-transformer.ts

@@ -3,14 +3,14 @@ import { type Props, type PropValue } from '@elementor/editor-props';
 import { createMultiPropsValue } from '../multi-props';
 import { type Transformer } from '../types';
 
-export type EdgeSizes = {
+type EdgeSizes = {
 	top?: PropValue;
 	right?: PropValue;
 	bottom?: PropValue;
 	left?: PropValue;
 };
 
-export type CreateEdgeSizesTransformer = ( keyGenerator: ( edgeKey: string ) => string ) => Transformer< EdgeSizes >;
+type CreateEdgeSizesTransformer = ( keyGenerator: ( edgeKey: string ) => string ) => Transformer< EdgeSizes >;
 
 const validEdges = [ 'top', 'right', 'bottom', 'left' ];
 

package/src/{styles-renderer/transformers → renderers/style-transformers}/image-attachment.ts

@@ -10,5 +10,5 @@ export const imageAttachmentTransformer: Transformer< ImageSrcPropValue[ 'value'
 		return null;
 	}
 
-	return attachment.url;
+	return attachment;
 };

package/src/{styles-renderer/transformers → renderers/style-transformers}/image-src.ts

@@ -2,10 +2,7 @@ import { type ImageSrcPropValue } from '@elementor/editor-props';
 
 import { type Transformer } from '../types';
 
-export const imageSrcTransformer: Transformer< ImageSrcPropValue[ 'value' ] > = ( value ) => {
-	const url = value.id ?? value.url?.value;
-
-	if ( url ) {
-		return `url(${ url })`;
-	}
-};
+export const imageSrcTransformer: Transformer< ImageSrcPropValue[ 'value' ] > = ( value ) => ( {
+	attachment: value.id,
+	url: value.url,
+} );

package/src/renderers/style-transformers/image.ts

@@ -0,0 +1,25 @@
+import { type ImagePropValue } from '@elementor/editor-props';
+
+import { type Transformer } from '../types';
+
+export const imageTransformer: Transformer< ImagePropValue[ 'value' ] > = ( value ) => {
+	const { src, size } = value;
+
+	if ( src.url ) {
+		return `url(${ src.url })`;
+	}
+
+	const sizeUrl = src.attachment?.sizes[ size ]?.url;
+
+	if ( sizeUrl ) {
+		return `url(${ sizeUrl })`;
+	}
+
+	const attachmentUrl = src.attachment?.url;
+
+	if ( attachmentUrl ) {
+		return `url(${ attachmentUrl })`;
+	}
+
+	return null;
+};

package/src/{styles-renderer/transformers → renderers/style-transformers}/index.ts

@@ -1,11 +1,14 @@
 import { type TransformersMap } from '../types';
 import backgroundColorOverlayTransformer from './background-color-overlay-transformer';
 import backgroundImageOverlayTransformer from './background-image-overlay-transformer';
+import backgroundImagePositionOffsetTransformer from './background-image-position-offset-transformer';
+import backgroundImageSizeScaleTransformer from './background-image-size-scale-transformer';
 import { default as background } from './background-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 dimensions } from './dimensions';
+import { imageTransformer } from './image';
 import { imageAttachmentTransformer } from './image-attachment';
 import { imageSrcTransformer } from './image-src';
 import { default as layoutDirection } from './layout-direction-transformer';
@@ -14,7 +17,7 @@ import { default as shadow } from './shadow-transformer';
 import { default as size } from './size-transformer';
 import { default as stroke } from './stroke-transformer';
 
-export default {
+export const styleTransformers: TransformersMap = {
 	size,
 	shadow,
 	stroke,
@@ -23,10 +26,13 @@ export default {
 	color: primitiveTransformer,
 	number: primitiveTransformer,
 	string: primitiveTransformer,
+	url: primitiveTransformer,
 
 	dimensions,
 	'background-color-overlay': backgroundColorOverlayTransformer,
 	'background-image-overlay': backgroundImageOverlayTransformer,
+	'background-image-position-offset': backgroundImagePositionOffsetTransformer,
+	'background-image-size-scale': backgroundImageSizeScaleTransformer,
 	'background-overlay': createCombineArrayTransformer( ',' ),
 
 	'box-shadow': createCombineArrayTransformer( ',' ),
@@ -36,6 +42,7 @@ export default {
 
 	'image-attachment-id': imageAttachmentTransformer,
 	'image-src': imageSrcTransformer,
+	image: imageTransformer,
 
 	'layout-direction': layoutDirection,
-} satisfies TransformersMap;
+};

package/src/renderers/style-transformers/stroke-transformer.ts

@@ -0,0 +1,16 @@
+import { type StrokePropValue } from '@elementor/editor-props';
+
+import { createMultiPropsValue } from '../multi-props';
+import { type Transformer } from '../types';
+
+const strokeTransformer: Transformer< StrokePropValue[ 'value' ] > = ( value ) => {
+	const parsed = {
+		'-webkit-text-stroke': `${ value.width } ${ value.color }`,
+		stroke: `${ value.color }`,
+		'stroke-width': `${ value.width }`,
+	};
+
+	return createMultiPropsValue( parsed );
+};
+
+export default strokeTransformer;

package/src/renderers/types.ts

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

package/src/styles-renderer/__tests__/enqueue-used-fonts.test.ts

@@ -1,60 +0,0 @@
-import { type StyleDefinition } from '@elementor/editor-styles';
-
-import { enqueueFont } from '../../sync/enqueue-font';
-import enqueueUsedFonts from '../enqueue-used-fonts';
-
-jest.mock( '../../sync/enqueue-font' );
-
-describe( 'enqueueUsedFonts', () => {
-	it( 'should run enqueueFont for each font family found in the style defs', () => {
-		// Arrange.
-		jest.mocked( enqueueFont ).mockImplementation( () => {} );
-
-		const styles = [
-			{
-				id: '1',
-				type: 'class',
-				variants: [
-					{
-						meta: {
-							breakpoint: null,
-							state: null,
-						},
-						props: {
-							'font-family': {
-								$$type: 'string',
-								value: 'Open Sans',
-							},
-						},
-					},
-				],
-			},
-			{
-				id: '2',
-				type: 'class',
-				variants: [
-					{
-						meta: {
-							breakpoint: null,
-							state: 'hover',
-						},
-						props: {
-							'font-family': {
-								$$type: 'string',
-								value: 'Roboto',
-							},
-						},
-					},
-				],
-			},
-		] as unknown as StyleDefinition[];
-
-		// Act.
-		enqueueUsedFonts( styles );
-
-		// Assert.
-		expect( enqueueFont ).toHaveBeenCalledTimes( 2 );
-		expect( enqueueFont ).toHaveBeenCalledWith( 'Open Sans' );
-		expect( enqueueFont ).toHaveBeenCalledWith( 'Roboto' );
-	} );
-} );