@elementor/editor-canvas 0.1.0 → 0.2.0

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

@@ -0,0 +1,171 @@
+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/__tests__/enqueue-used-fonts.test.ts

@@ -0,0 +1,54 @@
+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': 'Open Sans',
+						},
+					},
+				],
+			},
+			{
+				id: '2',
+				type: 'class',
+				variants: [
+					{
+						meta: {
+							breakpoint: null,
+							state: 'hover',
+						},
+						props: {
+							'font-family': 'Roboto',
+						},
+					},
+				],
+			},
+		] as unknown as StyleDefinition[];
+
+		// Act.
+		enqueueUsedFonts( styles );
+
+		// Assert.
+		expect( enqueueFont ).toHaveBeenCalledTimes( 2 );
+		expect( enqueueFont ).toHaveBeenCalledWith( 'Open Sans' );
+		expect( enqueueFont ).toHaveBeenCalledWith( 'Roboto' );
+	} );
+} );

package/src/styles-renderer/__tests__/index.test.ts

@@ -0,0 +1,132 @@
+import { transformers } from '../index';
+import createStyles from '../render';
+import {
+	breakpointsStyleMock,
+	mockBreakpoints,
+	multiVariantsStyleMock,
+	singleVariantStyleMock,
+	statesStyleMock,
+	transformableStyleMock,
+} from './__mocks__/style-definitions';
+
+describe( 'style renderer', () => {
+	it( 'should return a string wrapped with style tag or without', () => {
+		// Arrange.
+		const styleRule = `.${ singleVariantStyleMock.id }{font-size:24px;font-weight:bold}`;
+
+		// Act.
+		const cssString = createStyles( {
+			styles: [ singleVariantStyleMock ],
+			transformers: {},
+			breakpoints: mockBreakpoints,
+		} );
+
+		// Assert.
+		expect( cssString ).toEqual( `<style data-style-id="${ singleVariantStyleMock.id }">${ styleRule }</style>` );
+	} );
+
+	it( 'should support breakpoints using media queries', () => {
+		// Arrange.
+		const className = `.${ breakpointsStyleMock.id }`;
+		const defaultStyleRule = `${ className }{padding:24px}`;
+		const smStyleRule = `@media(max-width:768px){${ className }{padding:4px}}`;
+		const mdStyleRule = `@media(max-width:992px){${ className }{padding:16px}}`;
+
+		// Act.
+		const cssString = createStyles( {
+			styles: [ breakpointsStyleMock ],
+			transformers: {},
+			breakpoints: mockBreakpoints,
+		} );
+
+		// Assert.
+		expect( cssString ).toEqual(
+			`<style data-style-id="${ breakpointsStyleMock.id }">${ [ defaultStyleRule, smStyleRule, mdStyleRule ].join(
+				''
+			) }</style>`
+		);
+	} );
+
+	it( 'should support states using pseudo selectors', () => {
+		// Arrange.
+		const className = `.${ statesStyleMock.id }`;
+		const defaultStyleRule = `${ className }{font-weight:normal}`;
+		const hoverStyleRule = `${ className }:hover{font-weight:bold}`;
+		const focusStyleRule = `${ className }:focus{color:red}`;
+
+		// Act.
+		const cssString = createStyles( {
+			styles: [ statesStyleMock ],
+			transformers: {},
+			breakpoints: mockBreakpoints,
+		} );
+
+		// Assert.
+		expect( cssString ).toEqual(
+			`<style data-style-id="${ breakpointsStyleMock.id }">${ [
+				defaultStyleRule,
+				hoverStyleRule,
+				focusStyleRule,
+			].join( '' ) }</style>`
+		);
+	} );
+
+	it( 'should suppress non supported transformable values', () => {
+		// Arrange.
+		const defaultStyleRule = `.${ transformableStyleMock.id }{font-size:unset}`;
+
+		// Act.
+		const cssString = createStyles( {
+			styles: [ transformableStyleMock ],
+			transformers: {},
+			breakpoints: mockBreakpoints,
+		} );
+
+		// Assert.
+		expect( console ).toHaveErrored();
+		expect( cssString ).toEqual(
+			`<style data-style-id="${ transformableStyleMock.id }">${ defaultStyleRule }</style>`
+		);
+	} );
+
+	it( 'should support known transformable values', () => {
+		// Arrange.
+		const defaultStyleRule = `.${ transformableStyleMock.id }{font-size:24px}`;
+
+		// Act.
+		const cssString = createStyles( {
+			styles: [ transformableStyleMock ],
+			transformers: { size: transformers.size },
+			breakpoints: mockBreakpoints,
+		} );
+
+		// Assert.
+		expect( cssString ).toEqual(
+			`<style data-style-id="${ transformableStyleMock.id }">${ defaultStyleRule }</style>`
+		);
+	} );
+
+	it( 'should support multi variants of mixed variation types', () => {
+		// Arrange.
+		const className = `.${ multiVariantsStyleMock.id }`;
+		const defaultStyleRule = `${ className }{font-size:24px;font-weight:normal}`;
+		const smStyleRule = `@media(max-width:768px){${ className }{font-size:20px}}`;
+		const hoverStyleRule = `${ className }:hover{font-weight:bold}`;
+
+		// Act.
+		const cssString = createStyles( {
+			styles: [ multiVariantsStyleMock ],
+			transformers: { size: transformers.size },
+			breakpoints: mockBreakpoints,
+		} );
+
+		// Assert.
+		expect( cssString ).toEqual(
+			`<style data-style-id="${ multiVariantsStyleMock.id }">${ [
+				defaultStyleRule,
+				smStyleRule,
+				hoverStyleRule,
+			].join( '' ) }</style>`
+		);
+	} );
+} );

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

@@ -0,0 +1,21 @@
+import { type StyleDefinition } from '@elementor/editor-styles';
+import { ensureError } from '@elementor/utils';
+
+import { enqueueFont } from '../sync/enqueue-font';
+
+export default function enqueueUsedFonts( styles: StyleDefinition[] ) {
+	try {
+		styles.forEach( ( styleDef ) => {
+			Object.values( styleDef.variants ).forEach( ( variant ) => {
+				const fontFamily = variant.props[ 'font-family' ] ?? null;
+
+				if ( fontFamily && typeof fontFamily === 'string' ) {
+					enqueueFont( fontFamily );
+				}
+			} );
+		} );
+	} catch ( error: unknown ) {
+		// eslint-disable-next-line no-console
+		console.error( `Cannot enqueue font': ${ ensureError( error ).message }` );
+	}
+}

package/src/styles-renderer/index.ts

@@ -0,0 +1,2 @@
+export { default as transformers } from './transformers';
+export { default as render } from './render';

package/src/styles-renderer/render.ts

@@ -0,0 +1,112 @@
+import { type Props } from '@elementor/editor-props';
+import { type Breakpoint, type BreakpointId, type BreakpointsMap } from '@elementor/editor-responsive';
+import { type StyleDefinition, type StyleVariant } from '@elementor/editor-styles';
+import { ensureError } from '@elementor/utils';
+
+import { transformValue } from './transform';
+import { type TransformersMap } from './types';
+
+type RenderParams = {
+	transformers: TransformersMap;
+	styles: StyleDefinition[];
+	breakpoints: BreakpointsMap;
+};
+
+export default function render( { transformers, styles, breakpoints }: RenderParams ) {
+	const cssStyle: string[] = [];
+
+	try {
+		styles.forEach( ( styleDef ) => {
+			const style = renderStyle( styleDef, transformers, breakpoints );
+
+			cssStyle.push( wrapWithStyleElement( styleDef.id, style ) );
+		} );
+	} catch ( error: unknown ) {
+		// eslint-disable-next-line no-console
+		console.error( `Cannot render style': ${ ensureError( error ).message }` );
+	}
+
+	return cssStyle.join( '' );
+}
+
+function renderStyle( style: StyleDefinition, transformers: TransformersMap, breakpoints: BreakpointsMap ) {
+	const baseSelector = getBaseSelector( style );
+
+	if ( ! baseSelector ) {
+		return '';
+	}
+
+	const stylesheet: string[] = [];
+
+	Object.values( style.variants ).forEach( ( variant ) => {
+		const styleDeclaration = variantToStyleDeclaration( baseSelector, variant, transformers, breakpoints );
+
+		if ( styleDeclaration ) {
+			stylesheet.push( styleDeclaration );
+		}
+	} );
+
+	return stylesheet.join( '' );
+}
+
+function getBaseSelector( styleDef: StyleDefinition ) {
+	const map = {
+		class: '.',
+	};
+
+	return `${ map[ styleDef.type ] }${ styleDef.id }`;
+}
+
+function variantToStyleDeclaration(
+	baseSelector: string,
+	variant: StyleVariant,
+	transformers: TransformersMap,
+	breakpoints: BreakpointsMap
+) {
+	const css = propsToCss( variant.props, transformers );
+
+	if ( ! css ) {
+		return '';
+	}
+
+	const state = variant.meta.state ? `:${ variant.meta.state }` : '';
+	const selector = `${ baseSelector }${ state }`;
+
+	let styleDeclaration = `${ selector }{${ css }}`;
+
+	if ( variant.meta.breakpoint ) {
+		styleDeclaration = wrapWithMediaQuery( breakpoints, variant.meta.breakpoint, styleDeclaration );
+	}
+
+	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 );
+
+			acc.push( prop + ':' + value );
+
+			return acc;
+		}, [] )
+		.join( ';' );
+}
+
+function camelCaseToDash( str: string ) {
+	return str.replace( /([a-zA-Z])(?=[A-Z])/g, '$1-' ).toLowerCase();
+}
+
+function wrapWithMediaQuery( breakpoints: BreakpointsMap, breakpoint: BreakpointId, css: string ) {
+	const size = getBreakpointSize( breakpoints[ breakpoint ] );
+	return size ? `@media(${ size }){${ css }}` : css;
+}
+
+function getBreakpointSize( breakpoint: Breakpoint ) {
+	return breakpoint.type ? `${ breakpoint.type }:${ breakpoint.width }px` : null;
+}
+
+function wrapWithStyleElement( id: string, content: string ) {
+	return `<style data-style-id="${ id }">${ content }</style>`;
+}

package/src/styles-renderer/transform.ts

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

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

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

@@ -0,0 +1,34 @@
+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' );
+	} );
+} );