refactor: implement TS exactOptionalPropertyType rule

.changeset/tender-jobs-itch.md

@@ -0,0 +1,9 @@
+---
+"@snapwp/blocks": patch
+"@snapwp/query": patch
+"@snapwp/types": patch
+"@snapwp/core": patch
+"@snapwp/next": patch
+---
+
+refactor: Enforce `exactOptionalPropertyType` TypeScript rule

config/tsconfig.base.json

@@ -7,7 +7,7 @@
 		"allowSyntheticDefaultImports": true,
 		"allowUnreachableCode": false,
 		"allowUnusedLabels": false,
-		"exactOptionalPropertyTypes": false, // @todo Enable this.
+		"exactOptionalPropertyTypes": true,
 		"noFallthroughCasesInSwitch": true,
 		"noImplicitOverride": true,
 		"noImplicitReturns": true,

packages/blocks/src/block-manager/index.tsx

@@ -27,8 +27,12 @@ export default class BlockManager {
 	 * @return A tree of blocks.
 	 */
 	public static flatListToHierarchical(
-		blockList?: BlockData[] | null
+		blockList?: BlockData[] | null | undefined
 	): BlockTreeNode[] {
+		if ( ! blockList ) {
+			return [];
+		}
+
 		return flatListToHierarchical(
 			blockList as unknown as Record< string | number, unknown >[],
 			{
@@ -75,10 +79,18 @@ export default class BlockManager {
 	 * @return A tree of blocks with render functions.
 	 */
 	public static parseBlockForRendering(
-		blockList?: BlockData[] | null
+		blockList?: BlockData[] | null | undefined
 	): BlockTreeNode[] {
+		if ( ! blockList ) {
+			return [];
+		}
+
 		const BlockTreeNodeArray = this.flatListToHierarchical( blockList );
 
+		if ( ! BlockTreeNodeArray ) {
+			return [];
+		}
+
 		BlockTreeNodeArray.forEach( this.attachRendererToTreeNode );
 
 		return BlockTreeNodeArray;

packages/blocks/src/blocks/core-audio.tsx

@@ -36,7 +36,10 @@ const CoreAudio: CoreAudioType = ( {
 	const classNames = cn( classNamesFromString );
 
 	return (
-		<figure className={ classNames } style={ styleObject }>
+		<figure
+			className={ classNames }
+			{ ...( styleObject && { style: styleObject } ) }
+		>
 			<audio
 				controls
 				src={ src }

packages/blocks/src/blocks/core-button.tsx

@@ -31,8 +31,8 @@ const CoreButton: CoreButtonType = ( { attributes }: CoreButtonProps ) => {
 
 	const classNames = cn( cssClassName );
 	const styleObject = getStylesFromAttributes( { style } );
-
 	const { homeUrl, nextUrl } = getConfig();
+
 	const commonProps = {
 		className: linkClassName ?? undefined,
 		style: styleObject,
@@ -56,12 +56,13 @@ const CoreButton: CoreButtonType = ( { attributes }: CoreButtonProps ) => {
 
 	if ( url ) {
 		const href = replaceHostUrl( url, homeUrl, nextUrl );
+
 		return (
 			<div className={ classNames }>
 				<Link
 					href={ href }
-					target={ linkTarget ?? undefined }
-					rel={ rel ?? undefined }
+					target={ linkTarget }
+					rel={ rel }
 					{ ...commonProps }
 				>
 					{ !! text && <Parse html={ text } /> }

packages/blocks/src/blocks/core-buttons.tsx

@@ -23,7 +23,10 @@ const CoreButtons: CoreButtonsType = ( {
 	const styleObject = getStylesFromAttributes( { style } );
 
 	return (
-		<div className={ classNames } style={ styleObject }>
+		<div
+			className={ classNames }
+			{ ...( styleObject && { style: styleObject } ) }
+		>
 			{ children }
 		</div>
 	);

packages/blocks/src/blocks/core-code.tsx

@@ -12,10 +12,14 @@ import type { CoreCode as CoreCodeType, CoreCodeProps } from '@snapwp/types';
  */
 const CoreCode: CoreCodeType = ( { attributes }: CoreCodeProps ) => {
 	const { style, cssClassName, content } = attributes || {};
+
 	const styleObject = getStylesFromAttributes( { style } );
 
 	return (
-		<pre className={ cssClassName || '' } style={ styleObject }>
+		<pre
+			{ ...( cssClassName && { className: cssClassName } ) }
+			{ ...( styleObject && { style: styleObject } ) }
+		>
 			<code>{ !! content && <Parse html={ content } /> }</code>
 		</pre>
 	);

packages/blocks/src/blocks/core-column.tsx

@@ -3,6 +3,7 @@ import type {
 	CoreColumn as CoreColumnType,
 	CoreColumnProps,
 } from '@snapwp/types';
+import type { CSSProperties } from 'react';
 
 /**
  * Renders the core/column block.
@@ -22,7 +23,7 @@ const CoreColumn: CoreColumnType = ( {
 	const classNames = cn( cssClassName );
 	const styleObject = getStylesFromAttributes( { style } );
 
-	const combinedStyles: React.CSSProperties = {
+	const combinedStyles: CSSProperties = {
 		...styleObject,
 		flexBasis: width ?? undefined,
 	};

packages/blocks/src/blocks/core-columns.tsx

@@ -23,7 +23,10 @@ const CoreColumns: CoreColumnsType = ( {
 	const classNames = cn( cssClassName );
 
 	return (
-		<div className={ classNames } style={ styleObject }>
+		<div
+			className={ classNames }
+			{ ...( styleObject && { style: styleObject } ) }
+		>
 			{ children }
 		</div>
 	);

packages/blocks/src/blocks/core-cover.tsx

@@ -25,7 +25,9 @@ const DEFAULT_FOCAL_POINT = { x: 0.5, y: 0.5 };
  *
  * @return CSS position string or undefined if no focal point
  */
-const mediaPosition = ( focalPoint?: FocalPoint | null ): string => {
+const mediaPosition = (
+	focalPoint?: FocalPoint | null | undefined
+): string => {
 	if ( ! focalPoint ) {
 		focalPoint = DEFAULT_FOCAL_POINT;
 	}

packages/blocks/src/blocks/core-details.tsx

@@ -38,8 +38,8 @@ const CoreDetails: CoreDetailsType = ( {
 	return (
 		<details
 			className={ classNames }
-			style={ styleObject }
 			open={ showContent }
+			{ ...( styleObject && { style: styleObject } ) }
 		>
 			<summary>{ summary }</summary>
 			{ children }

packages/blocks/src/blocks/core-file.tsx

@@ -50,7 +50,10 @@ const CoreFile: CoreFileType = ( {
 	const downloadText = downloadButtonText || FALLBACK_DOWNLOAD_BUTTON_TEXT;
 
 	return (
-		<div className={ classNames } style={ styleObject }>
+		<div
+			className={ classNames }
+			{ ...( styleObject && { style: styleObject } ) }
+		>
 			{ displayPreview && (
 				<object
 					className="wp-block-file__embed"
@@ -65,9 +68,9 @@ const CoreFile: CoreFileType = ( {
 			) }
 			{ fileName && textLinkHref && (
 				<Link
-					id={ fileId || undefined }
+					id={ fileId }
 					href={ textLinkHref }
-					target={ textLinkTarget || undefined }
+					target={ textLinkTarget }
 					rel={ textLinkTarget ? 'noreferrer noopener' : undefined }
 				>
 					{ !! fileName && <Parse html={ fileName } /> }

packages/blocks/src/blocks/core-gallery.tsx

@@ -36,7 +36,10 @@ const CoreGallery: CoreGalleryType = ( {
 	const className = cn( classNamesFromString ) || undefined;
 
 	return (
-		<figure className={ className } style={ styleObject }>
+		<figure
+			className={ className }
+			{ ...( styleObject && { style: styleObject } ) }
+		>
 			{ children }
 			{ caption && (
 				<figcaption className="wp-element-caption">

packages/blocks/src/blocks/core-group.tsx

@@ -1,14 +1,14 @@
-import { createElement } from 'react';
+import {
+	createElement,
+	type CSSProperties,
+	type PropsWithChildren,
+} from 'react';
 import {
 	cn,
 	getClassNamesFromString,
 	getStylesFromAttributes,
 } from '@snapwp/core';
-import type {
-	CoreGroup as CoreGroupType,
-	CoreGroupProps,
-	TagProps,
-} from '@snapwp/types';
+import type { CoreGroup as CoreGroupType, CoreGroupProps } from '@snapwp/types';
 
 /**
  * Renders an HTML element with the specified tag name.
@@ -21,7 +21,16 @@ import type {
  *
  * @return The rendered HTML element or the children if no tag name is provided.
  */
-const Tag = ( { name, className, style, children }: TagProps ) => {
+const Tag = ( {
+	name,
+	className,
+	style,
+	children,
+}: PropsWithChildren< {
+	name?: string;
+	className: string;
+	style?: CSSProperties;
+} > ) => {
 	if ( ! name ) {
 		return <>{ children }</>;
 	}
@@ -59,7 +68,11 @@ const CoreGroup: CoreGroupType = ( {
 	const tag = tagName || 'div';
 
 	return (
-		<Tag name={ tag } className={ classNames } style={ styleObject }>
+		<Tag
+			name={ tag }
+			className={ classNames }
+			{ ...( !! styleObject && { style: styleObject } ) }
+		>
 			{ children }
 		</Tag>
 	);

packages/blocks/src/blocks/core-heading.tsx

@@ -25,8 +25,8 @@ const CoreHeading: CoreHeadingType = ( { attributes }: CoreHeadingProps ) => {
 
 	return (
 		<HeadingTag
-			style={ styleObject }
-			className={ cssClassName || undefined }
+			className={ cssClassName }
+			{ ...( styleObject && { style: styleObject } ) }
 		>
 			{ !! content && <Parse html={ content } /> }
 		</HeadingTag>

packages/blocks/src/blocks/core-image.tsx

@@ -56,7 +56,7 @@ const Figure = ( {
 					href={ href }
 					className={ linkClass }
 					target={ linkTarget }
-					{ ...( rel && { rel } ) }
+					rel={ rel }
 				>
 					{ children }
 				</Link>
@@ -198,9 +198,9 @@ const getImageProps = (
 	};
 
 	const imageProps: ComponentProps< typeof Image > = {
-		src: url,
-		alt,
 		title,
+		alt,
+		src: url,
 	};
 
 	if ( connectedMediaItem?.node ) {
@@ -269,7 +269,7 @@ const isLightboxEnabled = ( lightbox?: string | null ) => {
  */
 const extractInteractivityAttributesForElement = (
 	element: string,
-	renderedHtml?: string | null
+	renderedHtml?: string | null | undefined
 ) => {
 	if ( ! renderedHtml ) {
 		return {};

packages/blocks/src/blocks/core-list-item.tsx

@@ -39,7 +39,10 @@ const CoreListItem: CoreListItemType = ( {
 	const firstLineContent = content ? content.split( '\n' )[ 0 ] : undefined;
 
 	return (
-		<li className={ classNames || undefined } style={ styleObject }>
+		<li
+			className={ classNames || undefined }
+			{ ...( styleObject && { style: styleObject } ) }
+		>
 			{ firstLineContent && <Parse html={ firstLineContent } /> }
 			{ children }
 		</li>

packages/blocks/src/blocks/core-list.tsx

@@ -1,5 +1,6 @@
 import { cn, getStylesFromAttributes } from '@snapwp/core';
 import type { CoreList as CoreListType, CoreListProps } from '@snapwp/types';
+import type { CSSProperties } from 'react';
 
 /**
  * Renders the core/list block.
@@ -20,7 +21,7 @@ const CoreList: CoreListType = ( { attributes, children }: CoreListProps ) => {
 
 	const styleObject = getStylesFromAttributes( { style } );
 
-	const combinedStyles: React.CSSProperties = {
+	const combinedStyles: CSSProperties = {
 		...styleObject,
 		listStyleType: type ?? undefined,
 	};

packages/blocks/src/blocks/core-paragraph.tsx

@@ -27,7 +27,7 @@ const CoreParagraph: CoreParagraphType = ( {
 		textColor,
 	} = attributes || {};
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = getStylesFromAttributes( { style } ) || {};
 
 	/**
 	 * Add missing styles to the style object
@@ -50,8 +50,10 @@ const CoreParagraph: CoreParagraphType = ( {
 	return (
 		<p
 			className={ cssClassName || undefined }
-			style={ styleObject }
 			dir={ direction || undefined }
+			{ ...( Object.keys( styleObject ).length > 0 && {
+				style: styleObject,
+			} ) }
 		>
 			{ !! content && <Parse html={ content } /> }
 		</p>

packages/blocks/src/blocks/core-preformatted.tsx

@@ -36,7 +36,10 @@ const CorePreformatted: CorePreformattedType = ( {
 	const classNames = cn( classNamesFromString );
 
 	return (
-		<pre style={ styleObject } className={ classNames }>
+		<pre
+			className={ classNames }
+			{ ...( styleObject && { style: styleObject } ) }
+		>
 			{ !! content && <Parse html={ content } /> }
 		</pre>
 	);

packages/blocks/src/blocks/core-pullquote.tsx

@@ -36,7 +36,10 @@ const CorePullquote: CorePullquoteType = ( {
 	const classNames = cn( classNamesFromString );
 
 	return (
-		<figure style={ styleObject } className={ classNames }>
+		<figure
+			className={ classNames }
+			{ ...( styleObject && { style: styleObject } ) }
+		>
 			<blockquote>
 				{ pullquoteValue && (
 					<p>

packages/blocks/src/blocks/core-quote.tsx

@@ -20,7 +20,10 @@ const CoreQuote: CoreQuoteType = ( {
 	const styleObject = getStylesFromAttributes( { style } );
 
 	return (
-		<blockquote className={ cssClassName || '' } style={ styleObject }>
+		<blockquote
+			className={ cssClassName || undefined }
+			{ ...( styleObject && { style: styleObject } ) }
+		>
 			{ children }
 
 			{ !! citation && (

packages/blocks/src/blocks/core-verse.tsx

@@ -33,7 +33,10 @@ const CoreVerse: CoreVerseType = ( {
 	const classNames = cn( classNamesFromString );
 
 	return (
-		<pre className={ classNames } style={ styleObject }>
+		<pre
+			className={ classNames }
+			{ ...( styleObject && { style: styleObject } ) }
+		>
 			{ !! content && <Parse html={ content } /> }
 		</pre>
 	);