Add support for the promise prop (closes #27) (#28)

* Add the `promise` prop.

* Add tests for 'promise' prop.

* Share common tests between component and hook.

Author: ghengeveld

README.md

@@ -278,6 +278,7 @@ const MyComponent = () => (
 
 These can be passed in an object to `useAsync()`, or as props to `<Async>` and custom instances.
 
+- `promise` An already started Promise instance.
 - `promiseFn` Function that returns a Promise, automatically invoked.
 - `deferFn` Function that returns a Promise, manually invoked with `run`.
 - `watch` Watch a value and automatically reload when it changes.
@@ -286,6 +287,16 @@ These can be passed in an object to `useAsync()`, or as props to `<Async>` and c
 - `onResolve` Callback invoked when Promise resolves.
 - `onReject` Callback invoked when Promise rejects.
 
+#### `promise`
+
+> `Promise`
+
+A Promise instance which has already started. It will simply add the necessary resolve/reject callbacks and set
+`startedAt` to the time `promise` was first provided. Changing the value of `promise` will cancel any pending promise
+and listen to the new one. If `promise` is initially undefined, the React Async state will be `pending`.
+
+> Note that `reload` will not do anything when using `promise`. Use `promiseFn` instead.
+
 #### `promiseFn`
 
 > `function(props: object, controller: AbortController): Promise`
@@ -441,7 +452,7 @@ They don't have to be direct children of `<Async>` and you can use the same comp
 
 ### `<Async.Loading>`
 
-This component renders only while the promise is loading.
+This component renders only while the promise is loading (unsettled).
 
 #### Props
 
@@ -462,7 +473,7 @@ This component renders only while the promise is loading.
 
 ### `<Async.Resolved>`
 
-This component renders only when the promise is resolved with data (`data !== undefined`).
+This component renders only when the promise is fulfilled with data (`data !== undefined`).
 
 #### Props
 
@@ -500,7 +511,7 @@ This component renders only when the promise is rejected.
 
 ### `<Async.Pending>`
 
-Renders only while the deferred promise is still pending (not yet run).
+Renders only while the deferred promise is still pending (not yet run), or you have not provided any promise.
 
 #### Props
 

src/Async.js

@@ -27,6 +27,7 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
       this.setData = this.setData.bind(this)
       this.setError = this.setError.bind(this)
 
+      const promise = props.promise
       const promiseFn = props.promiseFn || defaultProps.promiseFn
       const initialValue = props.initialValue || defaultProps.initialValue
       const initialError = initialValue instanceof Error ? initialValue : undefined
@@ -40,8 +41,8 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
         initialValue,
         data: initialData,
         error: initialError,
-        isLoading: !initialValue && isFunction(promiseFn),
-        startedAt: undefined,
+        isLoading: !!promise || (promiseFn && !initialValue),
+        startedAt: promise ? new Date() : undefined,
         finishedAt: initialValue ? new Date() : undefined,
         counter: this.counter,
         cancel: this.cancel,
@@ -57,14 +58,20 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
 
     componentDidMount() {
       this.mounted = true
-      this.state.initialValue || this.load()
+      if (this.props.promise || !this.state.initialValue) {
+        this.load()
+      }
     }
 
     componentDidUpdate(prevProps) {
-      const { watch, watchFn = defaultProps.watchFn, promiseFn } = this.props
+      const { watch, watchFn = defaultProps.watchFn, promise, promiseFn } = this.props
       if (watch !== prevProps.watch) this.load()
       if (watchFn && watchFn({ ...defaultProps, ...this.props }, { ...defaultProps, ...prevProps }))
         this.load()
+      if (promise !== prevProps.promise) {
+        if (promise) this.load()
+        else this.cancel()
+      }
       if (promiseFn !== prevProps.promiseFn) {
         if (promiseFn) this.load()
         else this.cancel()
@@ -91,24 +98,32 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
     }
 
     load() {
+      const promise = this.props.promise
+      if (promise) {
+        this.start()
+        return promise.then(this.onResolve(this.counter), this.onReject(this.counter))
+      }
+
       const promiseFn = this.props.promiseFn || defaultProps.promiseFn
-      if (!promiseFn) return
-      this.start()
-      return promiseFn(this.props, this.abortController).then(
-        this.onResolve(this.counter),
-        this.onReject(this.counter)
-      )
+      if (promiseFn) {
+        this.start()
+        return promiseFn(this.props, this.abortController).then(
+          this.onResolve(this.counter),
+          this.onReject(this.counter)
+        )
+      }
     }
 
     run(...args) {
       const deferFn = this.props.deferFn || defaultProps.deferFn
-      if (!deferFn) return
-      this.args = args
-      this.start()
-      return deferFn(args, { ...defaultProps, ...this.props }, this.abortController).then(
-        this.onResolve(this.counter),
-        this.onReject(this.counter)
-      )
+      if (deferFn) {
+        this.args = args
+        this.start()
+        return deferFn(args, { ...defaultProps, ...this.props }, this.abortController).then(
+          this.onResolve(this.counter),
+          this.onReject(this.counter)
+        )
+      }
     }
 
     cancel() {
@@ -162,6 +177,7 @@ export const createInstance = (defaultProps = {}, displayName = "Async") => {
   if (PropTypes) {
     Async.propTypes = {
       children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+      promise: PropTypes.instanceOf(Promise),
       promiseFn: PropTypes.func,
       deferFn: PropTypes.func,
       watch: PropTypes.any,