[FIX] usePromiseSuspensible invalidateManually option

Author: nDriaDev

README.md

@@ -855,7 +855,7 @@ usePopover({ mode, onBeforeToggle, onToggle }: UsePopoverProps): UsePopoverResul
 
 Hook to resolve promise with Suspense support. The component that uses it, it need to be wrapped with Suspense component. This hook can be used in conditional blocks. [See demo](https://react-tools.ndria.dev/#/hooks/api-dom/usePromiseSuspensible)
 ```tsx
-usePromiseSuspensible<T>(promise: ()=>Promise<T>, deps: DependencyList, options: { cache?: "unmount" | number, cleanOnError?: boolean, identifier?: string } = {}): Awaited<ReturnType<typeof promise>>
+usePromiseSuspensible<T>(promise: () => Promise<T>, deps: DependencyList, options: { cache?: "unmount" | number, cleanOnError?: boolean, identifier?: string, invalidateManually?: boolean } = {}): Awaited<ReturnType<typeof promise>> | [Awaited<ReturnType<typeof promise>>, () => void]
 ```
 
 ### usePublishSubscribe

apps/react-tools-demo/src/markdown/usePromiseSuspensible.md

@@ -5,7 +5,7 @@ Hook to resolve promise with Suspense support. The component that uses it, it ne
 
 ```tsx
 const Delayed = () => {
-	const data = usePromiseSuspensible(
+	const [data, invalidate] = usePromiseSuspensible(
 		async () => {
 			return await new Promise<number[]>((res, rej) => {
 				console.log("called");
@@ -20,11 +20,13 @@ const Delayed = () => {
 		{
 			cache: 25, //25 seconds
 			cleanOnError: true,
-			identifier: "ss"
+			identifier: "ss",
+			invalidateManually: true
 		}
 	);
 
 	return <>
+		<button onClick={invalidate}>Invalidate</button>
 		<pre>{JSON.stringify(data)}</pre>
 	</>;
 }
@@ -48,7 +50,7 @@ export const UsePromiseSuspensible = () => {
 ## API
 
 ```tsx
-usePromiseSuspensible<T>(promise: ()=>Promise<T>, deps: DependencyList, options: { cache?: "unmount" | number, cleanOnError?: boolean, identifier?: string } = {}): Awaited<ReturnType<typeof promise>>
+usePromiseSuspensible<T>(promise: () => Promise<T>, deps: DependencyList, options: { cache?: "unmount" | number, cleanOnError?: boolean, identifier?: string, invalidateManually?: boolean } = {}): Awaited<ReturnType<typeof promise>> | [Awaited<ReturnType<typeof promise>>, () => void]
 ```
 
 
@@ -64,6 +66,8 @@ optional options.
 value can be "unmount", to clean promise cached at component unmounting, or it can be the duration in __seconds__ of cached promise.
 > - __options.cleanOnError=undefined?__: _boolean_  
 if true, when there is an error, remove promise from cache with a delay of 20 millisecond (due to multiple renders of react strict mode).
+> - __options.invalidateManually=undefined?__: _boolean_  
+if true, returns data and a function to invalidate data and revaluates promise.
 > - __options.identifier=undefined?__: _string_  
 a string to identify _promise_. If it isn't present, a serialization of _promise_ will be used.
 >
@@ -73,5 +77,9 @@ a string to identify _promise_. If it isn't present, a serialization of _promise
 > ### Returns
 >
 > __result__: resolve promise value.
-> - _Awaited<ReturnType<T>>_  
+> - __Union of__:  
+>     - _Awaited<ReturnType<T>>_  
+>     - __Array__:  
+>         - _Awaited<ReturnType<T>>_  
+>         - _()=>void_  
 >

apps/react-tools-demo/src/pages/hooks/api-dom/usePromiseSuspensible/UsePromiseSuspensible.tsx

@@ -2,10 +2,10 @@ import { Suspense, useCallback } from "react"
 import { ErrorBoundary, usePromiseSuspensible } from "../../../../../../../packages/react-tools-lib/src";
 
 /**
-The _Delayed_ component uses _usePromiseSuspensible_ hook to call a promise that resolves with an array of number or reject: if promise has been resolved, array number is rendered, otherwise an alert is invocked. Delayed component is returned from _UsePromiseSuspensible_ component.
+The _Delayed_ component uses _usePromiseSuspensible_ hook to call a promise that resolves with an array of number or reject: if promise has been resolved, array number is rendered with a button to invalidate result, otherwise an alert is invocked. Delayed component is returned from _UsePromiseSuspensible_ component.
  */
 const Delayed = () => {
-	const data = usePromiseSuspensible(
+	const [data, invalidate] = usePromiseSuspensible(
 		async () => {
 			return await new Promise<number[]>((res, rej) => {
 				console.log("called");
@@ -20,11 +20,13 @@ const Delayed = () => {
 		{
 			cache: 25, //25 seconds
 			cleanOnError: true,
-			identifier: "ss"
+			identifier: "ss",
+			invalidateManually: true
 		}
 	);
 
 	return <>
+		<button onClick={invalidate}>Invalidate</button>
 		<pre>{JSON.stringify(data)}</pre>
 	</>;
 }

packages/react-tools-lib/README.md

@@ -855,7 +855,7 @@ usePopover({ mode, onBeforeToggle, onToggle }: UsePopoverProps): UsePopoverResul
 
 Hook to resolve promise with Suspense support. The component that uses it, it need to be wrapped with Suspense component. This hook can be used in conditional blocks. [See demo](https://react-tools.ndria.dev/#/hooks/api-dom/usePromiseSuspensible)
 ```tsx
-usePromiseSuspensible<T>(promise: ()=>Promise<T>, deps: DependencyList, options: { cache?: "unmount" | number, cleanOnError?: boolean, identifier?: string } = {}): Awaited<ReturnType<typeof promise>>
+usePromiseSuspensible<T>(promise: () => Promise<T>, deps: DependencyList, options: { cache?: "unmount" | number, cleanOnError?: boolean, identifier?: string, invalidateManually?: boolean } = {}): Awaited<ReturnType<typeof promise>> | [Awaited<ReturnType<typeof promise>>, () => void]
 ```
 
 ### usePublishSubscribe

packages/react-tools-lib/src/hooks/api-dom/usePromiseSuspensible.ts

@@ -1,4 +1,4 @@
-import { DependencyList } from "react";
+import { DependencyList, useReducer } from "react";
 import { useEffectOnce } from "../lifecycle";
 import { isDeepEqual } from "../../utils";
 
@@ -11,11 +11,17 @@ const promiseCache: { deps: DependencyList, promise: Promise<void>, error?: unkn
  * @param {{ clearCacheOnUnmount?: "unmount"|number, cleanOnError?: boolean }} [options] - optional options.
  * @param {"unmount"|number} [options.cache=undefined] - value can be "unmount", to clean promise cached at component unmounting, or it can be the duration in __seconds__ of cached promise.
  * @param {boolean} [options.cleanOnError=undefined] - if true, when there is an error, remove promise from cache with a delay of 20 millisecond (due to multiple renders of react strict mode).
+ * @param {boolean} [options.invalidateManually=undefined] - if true, returns resolved promise value and a function to invalidate and revaluate promise.
  * @param {string} [options.identifier=undefined] - a string to identify _promise_. If it isn't present, a serialization of _promise_ will be used.
- * @returns {Awaited<ReturnType<T>>} result - resolve promise value.
+ * @returns {Awaited<ReturnType<T>> | [Awaited<ReturnType<T>>, ()=>void]} result - resolve promise value.
  */
-export const usePromiseSuspensible = <T>(promise: ()=>Promise<T>, deps: DependencyList, options: { cache?: "unmount" | number, cleanOnError?: boolean, identifier?: string } = {}): Awaited<ReturnType<typeof promise>> => {
+function usePromiseSuspensible<T>(promise: () => Promise<T>, deps: DependencyList, options: { cache?: "unmount" | number, cleanOnError?: boolean, identifier?: string, invalidateManually?: undefined }): Awaited<ReturnType<typeof promise>>;
+function usePromiseSuspensible<T>(promise: () => Promise<T>, deps: DependencyList, options: { cache?: "unmount" | number, cleanOnError?: boolean, identifier?: string, invalidateManually?: false }): Awaited<ReturnType<typeof promise>>;
+function usePromiseSuspensible<T>(promise: () => Promise<T>, deps: DependencyList, options: { cache?: "unmount" | number, cleanOnError?: boolean, identifier?: string, invalidateManually?: true }): [Awaited<ReturnType<typeof promise>>, ()=>void];
+function usePromiseSuspensible<T>(promise: () => Promise<T>, deps: DependencyList, options: { cache?: "unmount" | number, cleanOnError?: boolean, identifier?: string, invalidateManually?: boolean } = {}): Awaited<ReturnType<typeof promise>> | [Awaited<ReturnType<typeof promise>>, () => void] {
 	let index = -1;
+	const [, reRender] = useReducer(t => t + 0.00000000001, 0);
+
 	useEffectOnce(() => () => {
 		if (options.cache === "unmount") {
 			index !== -1 && promiseCache.splice(index, 1);
@@ -39,6 +45,16 @@ export const usePromiseSuspensible = <T>(promise: ()=>Promise<T>, deps: Dependen
 					throw promiseCache[ind].error;
 				}
 				if ("response" in promiseCache[ind]) {
+					if (options.invalidateManually) {
+						return [
+							promiseCache[ind].response,
+							() => {
+								index !== -1 && promiseCache.splice(index, 1);
+								index = -1;
+								reRender();
+							}
+						] as [Awaited<ReturnType<typeof promise>>, () => void]
+					}
 					return promiseCache[ind].response as Awaited<ReturnType<typeof promise>>;
 				}
 				throw promiseCache[ind].promise;
@@ -60,4 +76,6 @@ export const usePromiseSuspensible = <T>(promise: ()=>Promise<T>, deps: Dependen
 
 	index = promiseCache.push(cached) - 1;
 	throw cached.promise;
-}
+}
+
+export { usePromiseSuspensible };