refactor: implement TS exactOptionalPropertyType 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/blocks/core-audio.tsx

@@ -25,7 +25,7 @@ const CoreAudio: CoreAudioType = ( {
 		return null;
 	}
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	/**
 	 * @todo replace with cssClassName once it's supported.

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

@@ -30,7 +30,7 @@ const CoreButton: CoreButtonType = ( { attributes }: CoreButtonProps ) => {
 	} = attributes || {};
 
 	const classNames = cn( cssClassName );
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	const { homeUrl, nextUrl } = getConfig();
 	const commonProps = {
@@ -60,7 +60,7 @@ const CoreButton: CoreButtonType = ( { attributes }: CoreButtonProps ) => {
 			<div className={ classNames }>
 				<Link
 					href={ href }
-					target={ linkTarget ?? undefined }
+					{ ...( linkTarget ? { target: linkTarget } : {} ) }
 					rel={ rel ?? undefined }
 					{ ...commonProps }
 				>

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

@@ -21,7 +21,7 @@ const CoreButtons: CoreButtonsType = ( {
 	const { cssClassName, style } = attributes || {};
 	const classNames = cn( cssClassName );
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	return (
 		<div className={ classNames } style={ styleObject }>

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

@@ -13,7 +13,7 @@ import type { CoreCode as CoreCodeType, CoreCodeProps } from '@snapwp/types';
  */
 const CoreCode: CoreCodeType = ( { attributes }: CoreCodeProps ) => {
 	const { style, cssClassName, content } = attributes || {};
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	return (
 		<pre className={ cssClassName || '' } style={ styleObject }>

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

@@ -21,7 +21,7 @@ const CoreColumn: CoreColumnType = ( {
 	const { cssClassName, style, width } = attributes || {};
 
 	const classNames = cn( cssClassName );
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	const combinedStyles: React.CSSProperties = {
 		...styleObject,

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

@@ -20,7 +20,7 @@ const CoreColumns: CoreColumnsType = ( {
 }: CoreColumnsProps ) => {
 	const { cssClassName, style } = attributes || {};
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 	const classNames = cn( cssClassName );
 
 	return (

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

@@ -93,7 +93,7 @@ const CoreCover: CoreCoverType = ( {
 	const isImgElement = ! ( hasParallax || isRepeated );
 
 	const styleObject = {
-		...getStylesFromAttributes( { style } ),
+		...( style ? getStylesFromAttributes( { style } ) : {} ),
 		minHeight: minHeight || undefined,
 	};
 
@@ -146,11 +146,13 @@ const CoreCover: CoreCoverType = ( {
 					<Image
 						{ ...imageProps }
 						className={ imgClasses }
-						alt={ alt }
 						src={ url }
 						style={ { objectPosition } }
 						data-object-fit="cover"
 						data-object-position={ objectPosition }
+						{ ...( imageProps?.alt
+							? { alt: imageProps.alt }
+							: {} ) }
 					/>
 				) : (
 					<div

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

@@ -25,7 +25,7 @@ const CoreDetails: CoreDetailsType = ( {
 	renderedHtml,
 }: CoreDetailsProps ) => {
 	const { style, showContent, summary } = attributes ?? {};
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	/**
 	 * @todo replace with cssClassName once it's supported.

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

@@ -45,7 +45,7 @@ const CoreFile: CoreFileType = ( {
 		: '';
 	const classNames = cn( classNamesFromString );
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	const ariaLabel = fileName || FALLBACK_ARIA_LABEL;
 	const downloadText = downloadButtonText || FALLBACK_DOWNLOAD_BUTTON_TEXT;
@@ -68,7 +68,7 @@ const CoreFile: CoreFileType = ( {
 				<Link
 					id={ fileId || undefined }
 					href={ textLinkHref }
-					target={ textLinkTarget || undefined }
+					{ ...( textLinkTarget ? { target: textLinkTarget } : {} ) }
 					rel={ textLinkTarget ? 'noreferrer noopener' : undefined }
 				>
 					{ !! fileName && <Parse html={ fileName } /> }
@@ -78,6 +78,7 @@ const CoreFile: CoreFileType = ( {
 				<Link
 					href={ href }
 					className="wp-block-file__button wp-element-button"
+					//@ts-ignore allowing download prop in link
 					download
 					aria-describedby={ fileId || undefined }
 				>

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

@@ -26,7 +26,7 @@ const CoreGallery: CoreGalleryType = ( {
 }: CoreGalleryProps ) => {
 	const { caption, style } = attributes || {};
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	/**
 	 * @todo replace with cssClassName once it's supported.

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

@@ -46,7 +46,7 @@ const CoreGroup: CoreGroupType = ( {
 }: CoreGroupProps ) => {
 	const { style, tagName } = attributes ?? {};
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	/**
 	 * @todo replace with cssClassName once it's supported.

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

@@ -17,7 +17,7 @@ import type {
 const CoreHeading: CoreHeadingType = ( { attributes }: CoreHeadingProps ) => {
 	const { style, cssClassName, content, level } = attributes || {};
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	const HeadingTag = level
 		? ( `h${ level }` as keyof JSX.IntrinsicElements )

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

@@ -55,7 +55,7 @@ const Figure = ( {
 				<Link
 					href={ href }
 					className={ linkClass }
-					target={ linkTarget }
+					{ ...( linkTarget && { target: linkTarget } ) }
 					{ ...( rel && { rel } ) }
 				>
 					{ children }
@@ -124,7 +124,7 @@ const CoreImage: CoreImageType = ( {
 
 	return (
 		<Figure
-			renderedHtml={ renderedHtml }
+			renderedHtml={ renderedHtml ?? null }
 			classNames={ classNames }
 			{ ...attributes }
 		>
@@ -189,7 +189,7 @@ const getImageProps = (
 		sizeSlug,
 	} = attributes || {};
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	const imageStyles: CSSProperties = {
 		...styleObject,
@@ -198,10 +198,14 @@ const getImageProps = (
 	};
 
 	const imageProps: ComponentProps< typeof Image > = {
-		src: url,
-		alt,
 		title,
 	};
+	if ( url ) {
+		imageProps.src = url;
+	}
+	if ( alt ) {
+		imageProps.alt = alt;
+	}
 
 	if ( connectedMediaItem?.node ) {
 		imageProps.sizes = connectedMediaItem.node.sizes;

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

@@ -27,7 +27,7 @@ const CoreListItem: CoreListItemType = ( {
 }: CoreListItemProps ) => {
 	const { content, style } = attributes || {};
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	/**
 	 * @todo replace with cssClassName once it's supported.

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

@@ -19,7 +19,7 @@ const CoreList: CoreListType = ( { attributes, children }: CoreListProps ) => {
 
 	const classNames = cn( cssClassName );
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	const combinedStyles: React.CSSProperties = {
 		...styleObject,

packages/blocks/src/blocks/core-media-text.tsx

@@ -110,7 +110,7 @@ const CoreMediaText: CoreMediaTextType = ( {
 		<Image
 			{ ...imageProps }
 			src={ mediaUrl }
-			alt={ mediaAlt }
+			{ ...( mediaAlt ? { alt: mediaAlt } : {} ) }
 			className={ imageClasses }
 			style={ positionStyles }
 		/>
@@ -121,7 +121,7 @@ const CoreMediaText: CoreMediaTextType = ( {
 			<Link
 				className={ linkClass }
 				href={ href }
-				target={ linkTarget }
+				{ ...( linkTarget ? { target: linkTarget } : {} ) }
 				rel={ newRel }
 			>
 				{ image }
@@ -138,7 +138,7 @@ const CoreMediaText: CoreMediaTextType = ( {
 		? getClassNamesFromString( renderedHtml )
 		: '';
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	let gridTemplateColumns;
 	if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {

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

@@ -28,7 +28,7 @@ const CoreParagraph: CoreParagraphType = ( {
 		textColor,
 	} = attributes || {};
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	/**
 	 * Add missing styles to the style object

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

@@ -25,7 +25,7 @@ const CorePreformatted: CorePreformattedType = ( {
 }: CorePreformattedProps ) => {
 	const { content, style } = attributes || {};
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	/**
 	 * @todo replace with cssClassName once it's supported.

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

@@ -25,8 +25,7 @@ const CorePullquote: CorePullquoteType = ( {
 }: CorePullquoteProps ) => {
 	const { style, pullquoteValue, citation } = attributes || {};
 
-	const styleObject = getStylesFromAttributes( { style } );
-
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 	/**
 	 * @todo replace with cssClassName once it's supported.
 	 */

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

@@ -18,7 +18,7 @@ const CoreQuote: CoreQuoteType = ( {
 }: CoreQuoteProps ) => {
 	const { style, citation, cssClassName } = attributes || {};
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	return (
 		<blockquote className={ cssClassName || '' } style={ styleObject }>

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

@@ -31,7 +31,7 @@ const CoreSpacer: CoreSpacerType = ( {
 	const finalHeight =
 		selfStretch === 'fill' || selfStretch === 'fit' ? undefined : height;
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	const classNamesFromString = renderedHtml
 		? getClassNamesFromString( renderedHtml )

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

@@ -22,7 +22,7 @@ const CoreVerse: CoreVerseType = ( {
 }: CoreVerseProps ) => {
 	const { style, content } = attributes ?? {};
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	/**
 	 * @todo replace with cssClassName once it's supported.

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

@@ -69,7 +69,7 @@ const CoreVideo: CoreVideoType = ( {
 		return null;
 	}
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	/**
 	 * @todo replace with cssClassName once it's supported.
@@ -110,7 +110,7 @@ const CoreVideo: CoreVideoType = ( {
 				src={ src }
 				playsInline={ playsInline || undefined }
 			>
-				<Tracks tracks={ formattedTracks } />
+				<Tracks tracks={ formattedTracks || [] } />
 			</video>
 
 			{ caption && (

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

@@ -70,6 +70,7 @@ describe( 'CoreAudio', () => {
 		};
 
 		const { container, asFragment } = render(
+			// @ts-ignore to test undefined props
 			<CoreAudio attributes={ attributesWithoutSrc } renderedHtml="" />
 		);
 		expect( container.firstChild ).toBeNull();

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

@@ -210,6 +210,7 @@ describe( 'CoreButton Component', () => {
 
 	test( 'renders with undefined attributes', () => {
 		const { asFragment, container } = render(
+			//@ts-ignore to test undefined props
 			<CoreButton attributes={ undefined } />
 		);
 		const linkElement = container.querySelector( 'a' );

packages/core/src/config/snapwp-config-manager.ts

@@ -59,10 +59,7 @@ type ConfigSchema< T > = {
 	};
 };
 
-/**
- * Default configuration.
- */
-const defaultConfig: Partial< SnapWPEnv & SnapWPConfig > = {
+const DEFAULTS = {
 	graphqlEndpoint: 'index.php?graphql',
 	uploadsDirectory: '/wp-content/uploads',
 	restUrlPrefix: '/wp-json',
@@ -71,22 +68,40 @@ const defaultConfig: Partial< SnapWPEnv & SnapWPConfig > = {
 	useCorsProxy: process.env.NODE_ENV === 'development',
 };
 
+/**
+ * Default configuration.
+ */
+const defaultConfig: Partial< SnapWPEnv & SnapWPConfig > = {
+	graphqlEndpoint: DEFAULTS.graphqlEndpoint,
+	uploadsDirectory: DEFAULTS.uploadsDirectory,
+	restUrlPrefix: DEFAULTS.restUrlPrefix,
+	corsProxyPrefix: DEFAULTS.corsProxyPrefix,
+	useCorsProxy: DEFAULTS.useCorsProxy,
+};
+
 /**
  * Get the configuration from environment variables.
  *
  * This is a function (instead of a constant) so we can inject the variables in Jest.
  *
  * @return The configuration object.
  */
+//@ts-ignore - ignore check for nextUrl,homeUrl to run missing environment variable test.
 const envConfig = (): Partial< SnapWPEnv > => ( {
 	/* eslint-disable n/no-process-env */
 	nextUrl: process.env.NEXT_PUBLIC_URL,
 	homeUrl: process.env.NEXT_PUBLIC_WORDPRESS_URL,
-	graphqlEndpoint: process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT,
-	uploadsDirectory: process.env.NEXT_PUBLIC_WORDPRESS_UPLOADS_PATH,
-	restUrlPrefix: process.env.NEXT_PUBLIC_WORDPRESS_REST_URL_PREFIX,
+	graphqlEndpoint:
+		process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT || DEFAULTS.graphqlEndpoint,
+	uploadsDirectory:
+		process.env.NEXT_PUBLIC_WORDPRESS_UPLOADS_PATH ||
+		DEFAULTS.uploadsDirectory,
+	restUrlPrefix:
+		process.env.NEXT_PUBLIC_WORDPRESS_REST_URL_PREFIX ||
+		DEFAULTS.restUrlPrefix,
 	useCorsProxy: process.env.NEXT_PUBLIC_USE_CORS_PROXY === 'true',
-	corsProxyPrefix: process.env.NEXT_PUBLIC_CORS_PROXY_PREFIX,
+	corsProxyPrefix:
+		process.env.NEXT_PUBLIC_CORS_PROXY_PREFIX || DEFAULTS.corsProxyPrefix,
 	/* eslint-enable n/no-process-env */
 } );