From b44b9f3671627cbab29e7b0fadf01c01daf3f63d Mon Sep 17 00:00:00 2001
From: Lukas Weiss <lukas.weiss@aboutbits.it>
Date: Tue, 12 Mar 2024 12:24:37 +0100
Subject: [PATCH 1/2] support react-node as return type for render functions

---
 src/async-data/AsyncView.tsx | 29 +++++++++++++----------------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/async-data/AsyncView.tsx b/src/async-data/AsyncView.tsx
index 0318ec2..9fedf3c 100644
--- a/src/async-data/AsyncView.tsx
+++ b/src/async-data/AsyncView.tsx
@@ -1,23 +1,22 @@
-import React from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 import { isFunction } from '../util'
 
-type LoadingFunction = () => React.ReactElement<any, any> | null
-type SuccessFunction<Data> = (data: Data) => React.ReactElement<any, any> | null
-type ErrorFunction<Error> = (
-  error: Error
-) => React.ReactElement<any, any> | null
+type LoadingFunction = () => ReactNode
+type SuccessFunction<Data> = (data: Data) => ReactNode
+type ErrorFunction<Error> = (error: Error) => ReactNode
 
 type Props<Data, Error> = {
   data?: Data
   error?: Error
-  renderLoading?: React.ReactNode | LoadingFunction
-  renderSuccess: React.ReactNode | SuccessFunction<Data>
-  renderError?: React.ReactNode | ErrorFunction<Error>
+  renderLoading?: ReactNode | LoadingFunction
+  renderSuccess: ReactNode | SuccessFunction<Data>
+  renderError?: ReactNode | ErrorFunction<Error>
 }
 
 const AsyncView = <Data, Error>(
   props: Props<Data, Error>
-): React.ReactElement<any, any> | null => {
+  // The `ReactElement<any, any> | null` type is for React 17 compatibility (see type FunctionComponent). With React 18 it can be a ReactNode and we can remove the Fragment wrappers.
+): ReactElement<any, any> | null => {
   const {
     data,
     error,
@@ -26,15 +25,13 @@ const AsyncView = <Data, Error>(
     renderError = null,
   } = props
   if (error != null && error != undefined) {
-    return isFunction(renderError) ? renderError(error) : <>{renderError}</>
+    return <>{isFunction(renderError) ? renderError(error) : renderError}</>
   } else if (data != null && data != undefined) {
-    return isFunction(renderSuccess) ? (
-      renderSuccess(data)
-    ) : (
-      <>{renderSuccess}</>
+    return (
+      <>{isFunction(renderSuccess) ? renderSuccess(data) : renderSuccess}</>
     )
   } else {
-    return isFunction(renderLoading) ? renderLoading() : <>{renderLoading}</>
+    return <>{isFunction(renderLoading) ? renderLoading() : renderLoading}</>
   }
 }
 

From 77c6e5ca5bb8f3fff3467719d60df83f83301b64 Mon Sep 17 00:00:00 2001
From: Lukas Weiss <lukas.weiss@aboutbits.it>
Date: Tue, 12 Mar 2024 12:30:38 +0100
Subject: [PATCH 2/2] make data + error types non-nullable for async-view's
 render functions

---
 src/async-data/AsyncView.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/async-data/AsyncView.tsx b/src/async-data/AsyncView.tsx
index 9fedf3c..82a9075 100644
--- a/src/async-data/AsyncView.tsx
+++ b/src/async-data/AsyncView.tsx
@@ -2,8 +2,8 @@ import React, { ReactElement, ReactNode } from 'react'
 import { isFunction } from '../util'
 
 type LoadingFunction = () => ReactNode
-type SuccessFunction<Data> = (data: Data) => ReactNode
-type ErrorFunction<Error> = (error: Error) => ReactNode
+type SuccessFunction<Data> = (data: NonNullable<Data>) => ReactNode
+type ErrorFunction<Error> = (error: NonNullable<Error>) => ReactNode
 
 type Props<Data, Error> = {
   data?: Data
@@ -24,9 +24,9 @@ const AsyncView = <Data, Error>(
     renderSuccess,
     renderError = null,
   } = props
-  if (error != null && error != undefined) {
+  if (error !== null && error !== undefined) {
     return <>{isFunction(renderError) ? renderError(error) : renderError}</>
-  } else if (data != null && data != undefined) {
+  } else if (data !== null && data !== undefined) {
     return (
       <>{isFunction(renderSuccess) ? renderSuccess(data) : renderSuccess}</>
     )