@elementor/editor-canvas 0.8.0 → 0.10.0

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

@@ -5,16 +5,16 @@ import { createPropsResolver } from '../create-props-resolver';
 describe( 'createPropsResolver', () => {
 	it( 'should resolve simple props', async () => {
 		// Arrange.
-		const resolve = createPropsResolver( { int: ( value ) => value + 1 } );
+		const resolve = createPropsResolver( {
+			transformers: { int: ( value ) => value + 1 },
+			schema: { int: createMockPropType( { kind: 'plain', key: 'int' } ) },
+		} );
 
 		// Act.
 		const result = await resolve( {
 			props: {
 				int: { $$type: 'int', value: 0 },
 			},
-			schema: {
-				int: createMockPropType( { kind: 'plain', key: 'int' } ),
-			},
 		} );
 
 		// Assert.
@@ -23,7 +23,10 @@ describe( 'createPropsResolver', () => {
 
 	it( 'should skip disabled props', async () => {
 		// Arrange.
-		const resolve = createPropsResolver( { int: ( value ) => value + 1 } );
+		const resolve = createPropsResolver( {
+			transformers: { int: ( value ) => value + 1 },
+			schema: { int: createMockPropType( { kind: 'plain', key: 'int' } ) },
+		} );
 
 		// Act.
 		const result = await resolve( {
@@ -34,9 +37,6 @@ describe( 'createPropsResolver', () => {
 					disabled: true,
 				},
 			},
-			schema: {
-				int: createMockPropType( { kind: 'plain', key: 'int' } ),
-			},
 		} );
 
 		// Assert.
@@ -45,11 +45,8 @@ describe( 'createPropsResolver', () => {
 
 	it( 'should fallback to default value when there is no value', async () => {
 		// Arrange.
-		const resolve = createPropsResolver( { int: ( value ) => value + 1 } );
-
-		// Act.
-		const result = await resolve( {
-			props: {},
+		const resolve = createPropsResolver( {
+			transformers: { int: ( value ) => value + 1 },
 			schema: {
 				int: createMockPropType( {
 					kind: 'plain',
@@ -59,13 +56,21 @@ describe( 'createPropsResolver', () => {
 			},
 		} );
 
+		// Act.
+		const result = await resolve( { props: {} } );
+
 		// Assert.
 		expect( result ).toEqual( { int: 4 } );
 	} );
 
 	it( 'should skip props that are not in the schema', async () => {
 		// Arrange.
-		const resolve = createPropsResolver( { int: ( value ) => value + 1 } );
+		const resolve = createPropsResolver( {
+			transformers: { int: ( value ) => value + 1 },
+			schema: {
+				int: createMockPropType( { kind: 'plain', key: 'int' } ),
+			},
+		} );
 
 		// Act.
 		const result = await resolve( {
@@ -79,9 +84,6 @@ describe( 'createPropsResolver', () => {
 					value: 1,
 				},
 			},
-			schema: {
-				int: createMockPropType( { kind: 'plain', key: 'int' } ),
-			},
 		} );
 
 		// Assert.
@@ -90,7 +92,13 @@ describe( 'createPropsResolver', () => {
 
 	it( "should skip props that don't have a transformer", async () => {
 		// Arrange.
-		const resolve = createPropsResolver( { int: ( value ) => value + 1 } );
+		const resolve = createPropsResolver( {
+			transformers: { int: ( value ) => value + 1 },
+			schema: {
+				int: createMockPropType( { kind: 'plain', key: 'int' } ),
+				invalid: createMockPropType( { kind: 'plain', key: 'invalid' } ),
+			},
+		} );
 
 		// Act.
 		const result = await resolve( {
@@ -104,10 +112,6 @@ describe( 'createPropsResolver', () => {
 					value: 1,
 				},
 			},
-			schema: {
-				int: createMockPropType( { kind: 'plain', key: 'int' } ),
-				invalid: createMockPropType( { kind: 'plain', key: 'invalid' } ),
-			},
 		} );
 
 		// Assert.
@@ -116,9 +120,15 @@ describe( 'createPropsResolver', () => {
 
 	it( 'should skip props when their transformer throws an error', async () => {
 		const resolve = createPropsResolver( {
-			int: ( value ) => value + 1,
-			throws: () => {
-				throw new Error( 'Not Working!' );
+			transformers: {
+				int: ( value ) => value + 1,
+				throws: () => {
+					throw new Error( 'Not Working!' );
+				},
+			},
+			schema: {
+				int: createMockPropType( { kind: 'plain', key: 'int' } ),
+				invalid: createMockPropType( { kind: 'plain', key: 'throws' } ),
 			},
 		} );
 
@@ -134,10 +144,6 @@ describe( 'createPropsResolver', () => {
 					value: 1,
 				},
 			},
-			schema: {
-				int: createMockPropType( { kind: 'plain', key: 'int' } ),
-				invalid: createMockPropType( { kind: 'plain', key: 'throws' } ),
-			},
 		} );
 
 		// Assert.
@@ -147,7 +153,14 @@ describe( 'createPropsResolver', () => {
 	it( 'should trigger onResolve when resolving a prop', async () => {
 		const onResolve = jest.fn();
 
-		const resolve = createPropsResolver( { int: ( value ) => value + 1 }, { onPropResolve: onResolve } );
+		const resolve = createPropsResolver( {
+			transformers: { int: ( value ) => value + 1 },
+			schema: {
+				int: createMockPropType( { kind: 'plain', key: 'int' } ),
+				int2: createMockPropType( { kind: 'plain', key: 'int' } ),
+			},
+			onPropResolve: onResolve,
+		} );
 
 		// Act.
 		await resolve( {
@@ -161,10 +174,6 @@ describe( 'createPropsResolver', () => {
 					value: 3,
 				},
 			},
-			schema: {
-				int: createMockPropType( { kind: 'plain', key: 'int' } ),
-				int2: createMockPropType( { kind: 'plain', key: 'int' } ),
-			},
 		} );
 
 		// Assert.

package/src/renderers/__tests__/render-styles.test.ts

@@ -1,18 +1,10 @@
 /* eslint-disable testing-library/render-result-naming-convention */
-import { createMockPropType } from 'test-utils';
 import type { BreakpointsMap } from '@elementor/editor-responsive';
-import { getStylesSchema, type StyleDefinition } from '@elementor/editor-styles';
+import { type StyleDefinition } from '@elementor/editor-styles';
 
 import renderStyles from '../render-styles';
-import { stylesSchemaMock } from './__mocks__/styles-schema';
-
-jest.mock( '@elementor/editor-styles' );
 
 describe( 'renderStyles', () => {
-	beforeEach( () => {
-		jest.mocked( getStylesSchema ).mockReturnValue( stylesSchemaMock );
-	} );
-
 	it( 'should render media queries', async () => {
 		// Arrange.
 		const styleDef: StyleDefinition = {
@@ -32,14 +24,12 @@ describe( 'renderStyles', () => {
 		};
 
 		const resolve = jest.fn( ( { props } ) => props );
-		const schema = { 'font-size': createMockPropType( { kind: 'plain', key: 'string' } ) };
 
 		// Act.
 		const cssString = await renderStyles( {
 			styles: [ styleDef ],
 			resolve,
 			breakpoints: { tablet: { width: 992, type: 'max-width' } } as BreakpointsMap,
-			schema,
 		} );
 
 		// Assert.
@@ -49,8 +39,8 @@ describe( 'renderStyles', () => {
 		expect( cssString ).toBe( `<style data-style-id="test">${ defaultStyle }${ tabletStyle }</style>` );
 
 		expect( resolve ).toHaveBeenCalledTimes( 2 );
-		expect( resolve ).toHaveBeenNthCalledWith( 1, { props: { 'font-size': '24px' }, schema } );
-		expect( resolve ).toHaveBeenNthCalledWith( 2, { props: { 'font-size': '18px' }, schema } );
+		expect( resolve ).toHaveBeenNthCalledWith( 1, { props: { 'font-size': '24px' } } );
+		expect( resolve ).toHaveBeenNthCalledWith( 2, { props: { 'font-size': '18px' } } );
 	} );
 
 	it( 'should render pseudo classes', async () => {
@@ -82,7 +72,6 @@ describe( 'renderStyles', () => {
 			styles: [ styleDef ],
 			resolve,
 			breakpoints: { mobile: { width: 768, type: 'max-width' } } as BreakpointsMap,
-			schema: { 'font-size': createMockPropType( { kind: 'plain', key: 'string' } ) },
 		} );
 
 		// Assert.
@@ -115,7 +104,6 @@ describe( 'renderStyles', () => {
 		const result = await renderStyles( {
 			styles: [ styleDef ],
 			resolve,
-			schema: getStylesSchema(),
 			selectorPrefix: '.elementor-prefix',
 			breakpoints: {} as BreakpointsMap,
 		} );

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

@@ -7,16 +7,18 @@ import {
 	type PropValue,
 } from '@elementor/editor-props';
 
+import { type TransformersMap } from '../transformers/types';
 import { getMultiPropsValue, isMultiProps } from './multi-props';
-import { type TransformersMap } from './types';
 
-type CreatePropResolverOptions = {
+type CreatePropResolverArgs = {
+	transformers: TransformersMap;
+	schema: PropsSchema;
 	onPropResolve?: ( args: { key: string; value: unknown } ) => void;
 };
 
 type ResolveArgs = {
 	props: Props;
-	schema: PropsSchema;
+	schema?: PropsSchema;
 	signal?: AbortSignal;
 };
 
@@ -32,10 +34,33 @@ export type PropsResolver = ReturnType< typeof createPropsResolver >;
 
 const TRANSFORM_DEPTH_LIMIT = 3;
 
-export function createPropsResolver(
-	transformers: TransformersMap,
-	{ onPropResolve }: CreatePropResolverOptions = {}
-) {
+export function createPropsResolver( { transformers, schema: initialSchema, onPropResolve }: CreatePropResolverArgs ) {
+	async function resolve( { props, schema, signal }: ResolveArgs ) {
+		schema = schema ?? initialSchema;
+
+		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 ) );
+	}
+
 	async function transform( { value, key, type, signal, depth = 0 }: TransformArgs ) {
 		if ( value === null || value === undefined ) {
 			return null;
@@ -95,29 +120,5 @@ export function createPropsResolver(
 		}
 	}
 
-	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/renderers/render-styles.ts

@@ -1,4 +1,4 @@
-import { type Props, type PropsSchema } from '@elementor/editor-props';
+import { type Props } from '@elementor/editor-props';
 import { type Breakpoint, type BreakpointsMap } from '@elementor/editor-responsive';
 import { type StyleDefinition, type StyleDefinitionState, type StyleDefinitionType } from '@elementor/editor-styles';
 
@@ -8,7 +8,6 @@ import { UnknownStyleTypeError } from './errors';
 type RenderParams = {
 	resolve: PropsResolver;
 	styles: StyleDefinition[];
-	schema: PropsSchema;
 	breakpoints: BreakpointsMap;
 	selectorPrefix?: string;
 	signal?: AbortSignal;
@@ -16,7 +15,6 @@ type RenderParams = {
 
 type PropsToCssArgs = {
 	props: Props;
-	schema: PropsSchema;
 	resolve: PropsResolver;
 	signal?: AbortSignal;
 };
@@ -28,14 +26,13 @@ const SELECTORS_MAP: Record< StyleDefinitionType, string > = {
 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( { props: variant.props, schema, resolve, signal } );
+			const css = await propsToCss( { props: variant.props, resolve, signal } );
 
 			return createStyleWrapper()
 				.forStyle( style )
@@ -95,8 +92,8 @@ function createStyleWrapper( value: string = '', wrapper?: ( css: string ) => st
 	};
 }
 
-async function propsToCss( { props, resolve, signal, schema }: PropsToCssArgs ) {
-	const transformed = await resolve( { props, schema, signal } );
+async function propsToCss( { props, resolve, signal }: PropsToCssArgs ) {
+	const transformed = await resolve( { props, signal } );
 
 	return Object.entries( transformed )
 		.reduce< string[] >( ( acc, [ propName, propValue ] ) => {

package/src/style-transformers-registry.ts

@@ -0,0 +1,3 @@
+import { createTransformersRegistry } from './transformers/create-transformers-registry';
+
+export const styleTransformersRegistry = createTransformersRegistry();

package/src/transformers/create-transformer.ts

@@ -0,0 +1,6 @@
+import { type Transformer } from './types';
+
+// Wrap transformer for better DX (types) + it will allow us to add more features in the future.
+export function createTransformer< TValue >( cb: Transformer< TValue > ): Transformer< TValue > {
+	return cb;
+}

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

@@ -0,0 +1,16 @@
+import { type AnyTransformer, type TransformerName, type TransformersMap } from './types';
+
+export function createTransformersRegistry() {
+	const transformers: TransformersMap = {};
+
+	return {
+		register( name: TransformerName, transformer: AnyTransformer ) {
+			transformers[ name ] = transformer;
+
+			return this;
+		},
+		all() {
+			return transformers;
+		},
+	};
+}

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

@@ -0,0 +1,5 @@
+import { createTransformer } from '../create-transformer';
+
+export const backgroundColorOverlayTransformer = createTransformer(
+	( value: string ) => `linear-gradient(${ value }, ${ value })`
+);

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

@@ -0,0 +1,28 @@
+import { createTransformer } from '../create-transformer';
+
+const DEFAULT_POSITION_VALUE = '0% 0%';
+
+type BackgroundImageOverlay = {
+	image?: string;
+	size?: string;
+	position?: string;
+	repeat?: string;
+	attachment?: string;
+};
+
+export const backgroundImageOverlayTransformer = createTransformer( ( value: BackgroundImageOverlay ) => {
+	const { image, size = null, position = null, repeat = null, attachment = null } = value;
+
+	if ( ! image ) {
+		return null;
+	}
+
+	const backgroundStyles = [
+		image,
+		repeat,
+		attachment,
+		size ? `${ position || DEFAULT_POSITION_VALUE } / ${ size }` : position,
+	].filter( Boolean );
+
+	return backgroundStyles.join( ' ' );
+} );

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

@@ -0,0 +1,10 @@
+import { createTransformer } from '../create-transformer';
+
+type BackgroundImagePositionOffset = {
+	x?: string;
+	y?: string;
+};
+
+export const backgroundImagePositionOffsetTransformer = createTransformer(
+	( { x = '0px', y = '0px' }: BackgroundImagePositionOffset ) => `${ x } ${ y }`
+);

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

@@ -0,0 +1,10 @@
+import { createTransformer } from '../create-transformer';
+
+type BackgroundImageSizeScale = {
+	width?: string;
+	height?: string;
+};
+
+export const backgroundImageSizeScaleTransformer = createTransformer(
+	( { width = 'auto', height = 'auto' }: BackgroundImageSizeScale ) => `${ width } ${ height }`
+);

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

@@ -0,0 +1,13 @@
+import { createTransformer } from '../create-transformer';
+
+type Background = {
+	'background-overlay'?: string;
+	color?: string;
+};
+
+export const backgroundTransformer = createTransformer( ( value: Background ) => {
+	const overlays = value[ 'background-overlay' ] ?? '';
+	const color = value.color ?? '';
+
+	return `${ overlays } ${ color }`.trim();
+} );

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

@@ -0,0 +1,5 @@
+import { createTransformer } from '../create-transformer';
+
+export const createCombineArrayTransformer = ( delimiter: string ) => {
+	return createTransformer( ( value: Array< string | number > ) => value.filter( Boolean ).join( delimiter ) );
+};

package/src/transformers/styles/create-multi-props-transformer.ts

@@ -0,0 +1,14 @@
+import { createMultiPropsValue } from '../../renderers/multi-props';
+import { createTransformer } from '../create-transformer';
+
+type KeyGenerator = ( { propKey, key }: { propKey: string; key: string } ) => string;
+
+export const createMultiPropsTransformer = ( keys: string[], keyGenerator: KeyGenerator ) => {
+	return createTransformer( ( value: Record< string, string >, { key: propKey } ) => {
+		const entries = keys
+			.filter( ( key ) => value[ key ] )
+			.map( ( key ) => [ keyGenerator( { propKey, key } ), value[ key ] ] );
+
+		return createMultiPropsValue( Object.fromEntries( entries ) );
+	} );
+};

package/src/transformers/styles/image-attachment-transformer.ts

@@ -0,0 +1,15 @@
+import { getMediaAttachment } from '@elementor/wp-media';
+
+import { createTransformer } from '../create-transformer';
+
+type ImageAttachmentId = number;
+
+export const imageAttachmentTransformer = createTransformer( async ( value: ImageAttachmentId ) => {
+	const attachment = await getMediaAttachment( { id: value } );
+
+	if ( ! attachment ) {
+		return null;
+	}
+
+	return attachment;
+} );

package/src/transformers/styles/image-src-transformer.ts

@@ -0,0 +1,11 @@
+import { createTransformer } from '../create-transformer';
+
+type ImageSrc = {
+	id?: unknown;
+	url?: unknown;
+};
+
+export const imageSrcTransformer = createTransformer( ( value: ImageSrc ) => ( {
+	attachment: value.id,
+	url: value.url,
+} ) );

package/src/transformers/styles/image-transformer.ts

@@ -0,0 +1,34 @@
+import { createTransformer } from '../create-transformer';
+
+type Image = {
+	src?: {
+		url?: string;
+		attachment?: {
+			url?: string;
+			sizes?: Record< string, { url: string } >;
+		};
+	};
+	size?: string;
+};
+
+export const imageTransformer = createTransformer( ( value: Image ) => {
+	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/transformers/styles/primitive-transformer.ts

@@ -0,0 +1,3 @@
+import { createTransformer } from '../create-transformer';
+
+export const primitiveTransformer = createTransformer( ( value: unknown ) => value );

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

@@ -0,0 +1,16 @@
+import { createTransformer } from '../create-transformer';
+
+type Shadow = {
+	hOffset?: string;
+	vOffset?: string;
+	blur?: string;
+	spread?: string;
+	color?: string;
+	position?: string;
+};
+
+export const shadowTransformer = createTransformer( ( value: Shadow ) => {
+	return [ value.hOffset, value.vOffset, value.blur, value.spread, value.color, value.position ]
+		.filter( Boolean )
+		.join( ' ' );
+} );

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

@@ -0,0 +1,10 @@
+import { createTransformer } from '../create-transformer';
+
+type Size = {
+	size?: number;
+	unit?: string;
+};
+
+export const sizeTransformer = createTransformer( ( value: Size ) => {
+	return `${ value.size }${ value.unit }`;
+} );

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

@@ -0,0 +1,17 @@
+import { createMultiPropsValue } from '../../renderers/multi-props';
+import { createTransformer } from '../create-transformer';
+
+type Stroke = {
+	width?: string;
+	color?: string;
+};
+
+export const strokeTransformer = createTransformer( ( value: Stroke ) => {
+	const parsed = {
+		'-webkit-text-stroke': `${ value.width } ${ value.color }`,
+		stroke: `${ value.color }`,
+		'stroke-width': `${ value.width }`,
+	};
+
+	return createMultiPropsValue( parsed );
+} );

package/src/transformers/types.ts

@@ -0,0 +1,14 @@
+export type Transformer< TValue > = (
+	value: TValue,
+	options: {
+		key: string;
+		signal?: AbortSignal;
+	}
+) => unknown;
+
+export type TransformerName = string;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyTransformer = Transformer< any >;
+
+export type TransformersMap = Record< string, AnyTransformer >;

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

@@ -1,9 +0,0 @@
-import { type BackgroundColorOverlayPropValue } from '@elementor/editor-props';
-
-import { type Transformer } from '../types';
-
-const backgroundColorOverlayTransformer: Transformer< BackgroundColorOverlayPropValue[ 'value' ] > = ( value ) => {
-	return `linear-gradient(${ value }, ${ value })`;
-};
-
-export default backgroundColorOverlayTransformer;

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

@@ -1,24 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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;