Use JSX.Element instead of ReactNode in types. Fixed with-typescript

example.

Author: ghengeveld

examples/basic-fetch/package.json

@@ -3,10 +3,10 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
-    "react": "^16.8.5",
+    "react": "^16.8.6",
     "react-async": "latest",
-    "react-dom": "^16.8.5",
-    "react-scripts": "2.1.8"
+    "react-dom": "^16.8.6",
+    "react-scripts": "^3.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

examples/with-typescript/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

examples/with-typescript/package.json

@@ -3,15 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@types/jest": "24.0.11",
-    "@types/node": "11.11.7",
-    "@types/react": "16.8.8",
-    "@types/react-dom": "16.8.3",
-    "react": "16.8.5",
-    "react-async": "5.1.2",
-    "react-dom": "16.8.5",
-    "react-scripts": "2.1.8",
-    "typescript": "3.3.4000"
+    "@types/node": "^12.0.8",
+    "@types/react": "^16.8.19",
+    "@types/react-dom": "^16.8.4",
+    "react": "^16.8.6",
+    "react-async": "latest",
+    "react-dom": "^16.8.6",
+    "react-scripts": "^3.0.1",
+    "typescript": "^3.5.1"
   },
   "scripts": {
     "start": "react-scripts start",

examples/with-typescript/src/App.tsx

@@ -7,9 +7,9 @@ class App extends Component {
     return (
       <div className="App">
         <header className="App-header">
-          <Async promiseFn={() => Promise.resolve("foo")}>{({ data }: { data: string }) => data}</Async>
+          <Async promiseFn={() => Promise.resolve("foo")}>{({ data }) => <>{data}</>}</Async>
           <Async promiseFn={() => Promise.resolve("bar")}>
-            <Async.Pending>{(data: string) => data}</Async.Pending>
+            <Async.Resolved>{data => <>{data}</>}</Async.Resolved>
           </Async>
         </header>
       </div>

src/index.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react"
+import { Component } from "react"
 
-export type AsyncChildren<T> = ((state: AsyncState<T>) => React.ReactNode) | React.ReactNode
+export type AsyncChildren<T> = ((state: AsyncState<T>) => JSX.Element) | JSX.Element
 export type PromiseFn<T> = (props: object, controller: AbortController) => Promise<T>
 export type DeferFn<T> = (args: any[], props: object, controller: AbortController) => Promise<T>
 
@@ -113,37 +113,25 @@ export type AsyncRejected<T> = AbstractState<T> & {
 }
 export type AsyncState<T> = AsyncInitial<T> | AsyncPending<T> | AsyncFulfilled<T> | AsyncRejected<T>
 
-declare class Async<T> extends React.Component<AsyncProps<T>, AsyncState<T>> {}
+declare class Async<T> extends Component<AsyncProps<T>, AsyncState<T>> {}
 
 declare namespace Async {
-  export function Initial<T>(props: {
-    children?: AsyncChildren<T>
-    persist?: boolean
-  }): React.ReactNode
-  export function Pending<T>(props: {
-    children?: AsyncChildren<T>
-    initial?: boolean
-  }): React.ReactNode
-  export function Loading<T>(props: {
-    children?: AsyncChildren<T>
-    initial?: boolean
-  }): React.ReactNode
+  export function Initial<T>(props: { children?: AsyncChildren<T>; persist?: boolean }): JSX.Element
+  export function Pending<T>(props: { children?: AsyncChildren<T>; initial?: boolean }): JSX.Element
+  export function Loading<T>(props: { children?: AsyncChildren<T>; initial?: boolean }): JSX.Element
   export function Fulfilled<T>(props: {
     children?: AsyncChildren<T>
     persist?: boolean
-  }): React.ReactNode
+  }): JSX.Element
   export function Resolved<T>(props: {
     children?: AsyncChildren<T>
     persist?: boolean
-  }): React.ReactNode
+  }): JSX.Element
   export function Rejected<T>(props: {
     children?: AsyncChildren<T>
     persist?: boolean
-  }): React.ReactNode
-  export function Settled<T>(props: {
-    children?: AsyncChildren<T>
-    persist?: boolean
-  }): React.ReactNode
+  }): JSX.Element
+  export function Settled<T>(props: { children?: AsyncChildren<T>; persist?: boolean }): JSX.Element
 }
 
 export function createInstance<T>(defaultProps?: AsyncProps<T>): Async<T>