@elementor/editor-props 0.2.0

package/src/prop-types/size.ts

@@ -0,0 +1,12 @@
+import { z } from '@elementor/schema';
+import { createPropUtils } from '../utils/create-prop-utils';
+
+export const sizePropType = createPropUtils(
+	'size',
+	z.object( {
+		unit: z.enum( [ 'px', 'em', 'rem', '%', 'vw', 'vh' ] ),
+		size: z.number(),
+	} )
+);
+
+export type SizePropValue = z.infer< typeof sizePropType.schema >;

package/src/prop-types/stroke.ts

@@ -0,0 +1,14 @@
+import { z } from '@elementor/schema';
+import { createPropUtils } from '../utils/create-prop-utils';
+import { colorPropType } from './color';
+import { sizePropType } from './size';
+
+export const strokePropType = createPropUtils(
+	'stroke',
+	z.object( {
+		color: colorPropType.schema,
+		width: sizePropType.schema,
+	} )
+);
+
+export type StrokePropValue = z.infer< typeof strokePropType.schema >;

package/src/prop-types/url.ts

@@ -0,0 +1,6 @@
+import { z } from '@elementor/schema';
+import { createPropUtils } from '../utils/create-prop-utils';
+
+export const urlPropType = createPropUtils( 'url', z.string() );
+
+export type UrlPropValue = z.infer< typeof urlPropType.schema >;

package/src/types.ts

@@ -0,0 +1,51 @@
+type PropTypeKey = string;
+
+type BasePropType = {
+	default: PropValue;
+	settings: Record< string, unknown >;
+	meta: Record< string, unknown >;
+};
+
+export type PlainPropType = BasePropType & {
+	kind: 'plain';
+	key: PropTypeKey;
+};
+
+export type ArrayPropType = BasePropType & {
+	kind: 'array';
+	key: PropTypeKey;
+	item_prop_type: PropType | null;
+};
+
+export type ObjectPropType = BasePropType & {
+	kind: 'object';
+	key: PropTypeKey;
+	shape: Record< string, PropType >;
+};
+
+export type TransformablePropType = PlainPropType | ArrayPropType | ObjectPropType;
+
+export type UnionPropType = BasePropType & {
+	kind: 'union';
+	prop_types: Record< string, TransformablePropType >;
+};
+
+export type PropType = TransformablePropType | UnionPropType;
+
+type MaybeArray< T > = T | T[];
+
+export type TransformablePropValue< Type extends string, Value = unknown > = {
+	$$type: Type;
+	value: Value;
+	disabled?: boolean;
+};
+
+export type PlainPropValue = MaybeArray< string | number | boolean | object | null | undefined >;
+
+export type PropValue = PlainPropValue | TransformablePropValue< string >;
+
+export type PropKey = string;
+
+export type Props = Record< PropKey, PropValue >;
+
+export type PlainProps = Record< PropKey, PlainPropValue >;

package/src/utils/create-prop-utils.ts

@@ -0,0 +1,56 @@
+import { z, type ZodTypeAny } from '@elementor/schema';
+
+type Updater< T > = ( prev?: T ) => T;
+
+/**
+ * Usage example:
+ *
+ * ```ts
+ * const elementsPropUtils = createPropUtils( 'elements', z.array( z.string() ) );
+ *
+ * elementsPropUtils.isValid( element.props?.children );
+ * elementsPropUtils.create( [ 'a', 'b' ] );
+ * elementsPropUtils.create( ( prev = [] ) => [ ...prev, 'c' ], element.props?.children );
+ * ```
+ */
+
+export function createPropUtils< TKey extends string, TValue extends ZodTypeAny >( key: TKey, valueSchema: TValue ) {
+	const schema = z.object( {
+		$$type: z.literal( key ),
+		value: valueSchema,
+	} );
+
+	type Prop = z.infer< typeof schema >;
+
+	function isValid( prop: unknown ): prop is Prop {
+		return schema.safeParse( prop ).success;
+	}
+
+	function create( value: Prop[ 'value' ] ): Prop;
+	function create( value: Updater< Prop[ 'value' ] >, base: unknown ): Prop;
+	function create( value: Prop[ 'value' ] | Updater< Prop[ 'value' ] >, base?: unknown ): Prop {
+		const fn = ( typeof value === 'function' ? value : () => value ) as Updater< Prop[ 'value' ] >;
+
+		if ( ! base ) {
+			return {
+				$$type: key,
+				value: fn(),
+			};
+		}
+
+		if ( ! isValid( base ) ) {
+			throw new Error( `Cannot create prop based on invalid value: ${ JSON.stringify( base ) }` );
+		}
+
+		return {
+			$$type: key,
+			value: fn( base.value ),
+		};
+	}
+
+	return {
+		isValid,
+		create,
+		schema,
+	};
+}

package/src/utils/is-transformable.ts

@@ -0,0 +1,12 @@
+import { z } from '@elementor/schema';
+
+const transformableSchema = z.object( {
+	$$type: z.string(),
+	value: z.any(),
+} );
+
+type TransformablePropValue = z.infer< typeof transformableSchema >;
+
+export const isTransformable = ( value: unknown ): value is TransformablePropValue => {
+	return transformableSchema.safeParse( value ).success;
+};