Returning JSX.Element rather than ReactElement

Author: weotch

packages/contentful/src/ContentfulVisual.tsx

@@ -1,4 +1,3 @@
-import type { ReactElement } from 'react'
 import ReactVisual from '@react-visual/react'
 import { ContentfulAsset, ContentfulVisualProps } from './types/contentfulVisualTypes'
 import {
@@ -17,7 +16,7 @@ import {
 // Render a Visual using Contentful data
 export default function ContentfulVisual(
   props: ContentfulVisualProps
-): ReactElement | null {
+): JSX.Element | null {
 
   // Destructure some props
   const {

packages/next/src/NextVisual.tsx

@@ -3,8 +3,6 @@
 import _Image from "next/image";
 const Image = ("default" in _Image ? _Image.default : _Image) as typeof _Image;
 
-import type { ReactElement } from 'react'
-
 import { makeImagePlaceholder } from './lib/placeholder'
 import {
   VisualWrapper,
@@ -17,7 +15,7 @@ import { NextVisualProps } from './types/nextVisualTypes'
 // Render a Sanity image via Next/Image
 export default function NextVisual(
   props: NextVisualProps
-): ReactElement | null {
+): JSX.Element | null {
 
   // Destructure props
   const {
@@ -82,8 +80,15 @@ export default function NextVisual(
 
 // An image rendered within the Visual
 function NextImage({
-  src, sizes, alt, fit, position, priority, loader, placeholderData
-}: any): ReactElement {
+  src,
+  sizes,
+  alt,
+  fit,
+  position,
+  priority,
+  loader,
+  placeholderData,
+}: any): JSX.Element {
   return (
     <Image
       { ...{ src, sizes, priority, loader, alt } }

packages/react/src/LazyVideo/AccessibilityControls.tsx

@@ -1,8 +1,5 @@
 import { LazyVideoProps } from '../types/lazyVideoTypes'
-import {
-  CSSProperties,
-  type ReactElement,
-} from 'react';
+import type { CSSProperties } from 'react';
 import { PositionOption } from '../types/reactVisualTypes'
 
 // How big to make the button.  Can't be too small and still be ADA friendly
@@ -33,7 +30,7 @@ export default function AccessibilityControls({
   pauseIcon,
   hideAccessibilityControls,
   accessibilityControlsPosition,
-}: AccessibilityControlsProps): ReactElement | null {
+}: AccessibilityControlsProps): JSX.Element | null {
   // If hidden, return nothing
   if (hideAccessibilityControls) return null;
 

packages/react/src/LazyVideo/LazyVideoClient.tsx

@@ -3,7 +3,7 @@
 
 import { useInView } from 'react-intersection-observer'
 import { useMediaQueries } from '@react-hook/media-query'
-import { useEffect, type ReactElement, useRef, useCallback, type MutableRefObject, useState } from 'react'
+import { useEffect, useRef, useCallback, type MutableRefObject, useState } from 'react'
 import type { LazyVideoProps } from '../types/lazyVideoTypes';
 import { fillStyles, transparentGif } from '../lib/styles'
 import AccessibilityControls from './AccessibilityControls'
@@ -38,8 +38,7 @@ export default function LazyVideoClient({
   pauseIcon,
   hideAccessibilityControls,
   accessibilityControlsPosition,
-}: LazyVideoClientProps): ReactElement {
-
+}: LazyVideoClientProps): JSX.Element {
   // Track the actual video playback state. Start in a paused state because
   // even with an autoplay video, it won't actually have started playing yet.
   const [isVideoPaused, setVideoPaused] = useState(true)
@@ -173,9 +172,9 @@ export default function LazyVideoClient({
 
 // Switch the video asset depending on media queries
 function ResponsiveSource({
-  mediaSrcs, videoRef
-}: ResponsiveVideoSourceProps): ReactElement | undefined {
-
+  mediaSrcs,
+  videoRef,
+}: ResponsiveVideoSourceProps): JSX.Element {
   // Find the src url that is currently active
   const { matches } = useMediaQueries(mediaSrcs)
   const srcUrl = getFirstMatch(matches)

packages/react/src/LazyVideo/LazyVideoServer.tsx

@@ -1,14 +1,10 @@
-import type { ReactElement } from 'react'
 import type { LazyVideoProps } from '../types/lazyVideoTypes'
 import LazyVideoClient from './LazyVideoClient'
 
 // This wrapper function exists to take Function props and make them
 // serializable for the LazyVideoClient component, which is a Next.js style
 // client component.
-export default function LazyVideo(
-  props: LazyVideoProps
-): ReactElement | undefined {
-
+export default function LazyVideo(props: LazyVideoProps): JSX.Element | null {
   // Destructure some props
   const {
     src,
@@ -32,7 +28,7 @@ export default function LazyVideo(
       return [url, media]
     })
     // If the array ended up empty, abort
-    if (mediaSrcEntries.filter(([url]) => !!url).length == 0) return
+    if (mediaSrcEntries.filter(([url]) => !!url).length == 0) return null;
 
     // Make the hash
     mediaSrcs = Object.fromEntries(mediaSrcEntries)
@@ -41,7 +37,7 @@ export default function LazyVideo(
   } else {
     if (videoLoader) srcUrl = videoLoader({ src })
     else if (typeof src == 'string') srcUrl = src
-    if (!srcUrl) return // If no url could be built, abort
+    if (!srcUrl) return null; // If no url could be built, abort
   }
 
   // Render client component

packages/react/src/PictureImage.tsx

@@ -1,4 +1,3 @@
-import type { ReactElement } from 'react'
 import type { PictureImageProps } from './types/pictureImageTypes'
 import type { ImageLoader, SourceMedia, SourceType } from './types/reactVisualTypes'
 import { deviceSizes, imageSizes } from './lib/sizes'
@@ -14,10 +13,7 @@ type ImageSourceProps = {
   media?: SourceMedia
 }
 
-export default function PictureImage(
-  props: PictureImageProps
-): ReactElement {
-
+export default function PictureImage(props: PictureImageProps): JSX.Element {
   // Destructure props
   const {
     src,
@@ -94,12 +90,17 @@ function makeSrcUrl(
 
 // Make a source tag with srcset for the provided type and/or media attribute
 function Source({
-   widths, imageLoader, sizes, src, type, media
-}: ImageSourceProps): ReactElement {
   const srcSet = makeSrcSet(widths, imageLoader, { src, type, media })
   return (
     <source {...{ type, media, srcSet, sizes }} />
   )
+  widths,
+  imageLoader,
+  sizes,
+  src,
+  type,
+  media,
+}: ImageSourceProps): JSX.Element {
 }
 
 // Make a srcset string from an array of width integers using the imageLoader

packages/react/src/ReactVisual.tsx

@@ -1,5 +1,3 @@
-import type { ReactElement } from 'react'
-
 import VisualWrapper from './VisualWrapper'
 import LazyVideo from './LazyVideo'
 import PictureImage from './PictureImage'
@@ -10,7 +8,7 @@ import { fillStyles } from './lib/styles'
 
 export default function ReactVisual(
   props: ReactVisualProps
-): ReactElement | null {
+): JSX.Element | null {
 
   // Destructure props
   const {

packages/react/src/VisualWrapper.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactElement } from 'react'
+import type { CSSProperties } from 'react'
 import { fillStyles, cx } from './lib/styles'
 import { isNumeric } from './lib/values'
 import type { VisualWrapperProps } from './types/visualWrapperTypes'
@@ -13,11 +13,18 @@ type MakeResponsiveAspectsProps = Pick<VisualWrapperProps,
 
 // Wraps media elements and applys layout and other functionality
 export default function VisualWrapper({
-  expand, width, height,
-  aspect, sourceMedia, image, video,
-  children, className, style, dataAttributes
-}: VisualWrapperProps): ReactElement {
-
+  expand,
+  width,
+  height,
+  aspect,
+  sourceMedia,
+  image,
+  video,
+  children,
+  className,
+  style,
+  dataAttributes,
+}: VisualWrapperProps): JSX.Element {
   // If aspect is a function, invoke it to determine the aspect ratio
   let aspectRatio, aspectStyleTag, aspectClasses
   if (typeof aspect == 'function' && sourceMedia && sourceMedia.length) {
@@ -51,10 +58,13 @@ export default function VisualWrapper({
 
 // Create a style tag that applies responsive aspect ratio values
 function makeResponsiveAspects({
-  aspectCalculator, sourceMedia, image, video
+  aspectCalculator,
+  sourceMedia,
+  image,
+  video,
 }: MakeResponsiveAspectsProps): {
-  aspectClasses: string
-  aspectStyleTag: ReactElement
+  aspectClasses: string;
+  aspectStyleTag: JSX.Element;
 } {
 
   // Make CSS classes and related rules that are specific to the query and

packages/sanity-next/src/SanityNextVisual.tsx

@@ -1,4 +1,3 @@
-import type { ReactElement } from 'react'
 import NextVisual from '@react-visual/next'
 import { makeImageUrl, makeFileUrl, makeImageLoader } from './lib/urlBuilding'
 import {
@@ -11,7 +10,7 @@ import { SanityNextVisualProps } from './types/sanityNextVisualTypes'
 
 export default function SanityNextVisual(
   props: SanityNextVisualProps
-): ReactElement | null {
+): JSX.Element | null {
 
   // Destructure some props
   let {