@intrig/next 1.0.7 → 1.0.11

package/eslint.config.cjs

@@ -0,0 +1,19 @@
+const baseConfig = require('../../eslint.base.config.js');
+
+module.exports = [
+  ...baseConfig,
+  {
+    files: ['**/*.json'],
+    rules: {
+      '@nx/dependency-checks': [
+        'error',
+        {
+          ignoredFiles: ['{projectRoot}/eslint.config.{js,cjs,mjs}'],
+        },
+      ],
+    },
+    languageOptions: {
+      parser: require('jsonc-eslint-parser'),
+    },
+  },
+];

package/jest.config.ts

@@ -0,0 +1,10 @@
+export default {
+  displayName: '@intrig/client-next',
+  preset: '../../jest.preset.js',
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../coverage/lib/client-next',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intrig/next",
-  "version": "1.0.7",
+  "version": "1.0.11",
   "private": false,
   "description": "Placeholder module for autogenerated intrig next.js boilerplate",
   "dependencies": {
@@ -35,8 +35,5 @@
       "import": "./src/*.js",
       "types": "./src/*.d.ts"
     }
-  },
-  "module": "./src/index.js",
-  "main": "./src/index.js",
-  "types": "./src/index.d.ts"
-}
+  }
+}

package/project.json

@@ -0,0 +1,20 @@
+{
+  "name": "client-next",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "lib/client-next/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/lib/client-next",
+        "tsConfig": "lib/client-next/tsconfig.lib.json",
+        "packageJson": "lib/client-next/package.json",
+        "main": "lib/client-next/src/index.ts",
+        "assets": ["lib/client-next/*.md"]
+      }
+    }
+  }
+}

package/src/extra/{index.d.ts → index.ts}

@@ -1,4 +1,4 @@
 export * from './useResolvedValue';
 export * from './useResolvedCachedValue';
-export * from './useAsPromise';
-export * from './useAsNetworkState';
+export * from './useAsPromise'
+export * from './useAsNetworkState'

package/src/extra/useAsNetworkState.ts

@@ -0,0 +1,53 @@
+import { error, init, NetworkState, pending, success } from '@intrig/next/network-state';
+import { useCallback, useId, useMemo } from 'react';
+import { useIntrigContext } from '@intrig/next/intrig-context';
+
+/**
+ * A custom hook that integrates a promise-based operation with a network state management system.
+ * Tracks the network state (e.g., pending, success, error) for a given asynchronous function.
+ *
+ * @param fn A promise-based function that performs an asynchronous operation.
+ * @param key An optional string key to identify the network state uniquely. Defaults to 'default'.
+ * @return A tuple containing:
+ *         1. The current network state of the operation.
+ *         2. A function to execute the provided asynchronous operation.
+ *         3. A function to reset the network state back to the initial state.
+ */
+export function useAsNetworkState<T, F extends ((...args: any) => Promise<T>)>(fn: F, key: string = 'default'): [NetworkState<T>, (...params: Parameters<F>) => void, () => void] {
+  let id = useId();
+
+  let context = useIntrigContext();
+
+  const networkState = useMemo(() => {
+    return context.state?.[`promiseState:${id}:${key}}`] ?? init()
+  }, [context.state?.[`promiseState:${id}:${key}}`]]);
+
+  const dispatch = useCallback(
+    (state: NetworkState<T>) => {
+      context.dispatch({ key, operation: id, source: 'promiseState', state });
+    },
+    [key, context.dispatch]
+  );
+
+  const execute = useCallback((...args: Parameters<F>) => {
+    dispatch(pending())
+    return fn(...args).then(
+      (data) => {
+        dispatch(success(data))
+      },
+      (e) => {
+        dispatch(error(e))
+      }
+    )
+  }, []);
+
+  const clear = useCallback(() => {
+    dispatch(init())
+  }, []);
+
+  return [
+    networkState,
+    execute,
+    clear
+  ]
+}

package/src/extra/{useAsPromise.d.ts → useAsPromise.ts}

@@ -1,4 +1,15 @@
-import { BinaryFunctionHook, BinaryHookOptions, BinaryProduceHook, ConstantHook, UnaryFunctionHook, UnaryHookOptions, UnaryProduceHook, UnitHook, UnitHookOptions } from '@intrig/next/network-state';
+import {
+  BinaryFunctionHook,
+  BinaryHookOptions,
+  BinaryProduceHook,
+  ConstantHook, IntrigHook, IntrigHookOptions, isError, isSuccess, isValidationError, UnaryFunctionHook,
+  UnaryHookOptions,
+  UnaryProduceHook,
+  UnitHook,
+  UnitHookOptions
+} from '@intrig/next/network-state';
+import { useCallback, useEffect, useRef } from 'react';
+
 /**
  * Transforms a unit hook into a promise, enabling asynchronous usage of the hook's lifecycle or events.
  *
@@ -7,7 +18,8 @@ import { BinaryFunctionHook, BinaryHookOptions, BinaryProduceHook, ConstantHook,
  * @return {[() => Promise<never>, () => void]} A tuple containing a function that returns a promise resolving with the hook's completion
  * result or rejecting with an error, and a function to clean up the hook's resources when no longer needed.
  */
-export declare function useAsPromise<E>(hook: UnitHook<E>, options: UnitHookOptions): [() => Promise<never>, () => void];
+export function useAsPromise<E>(hook: UnitHook<E>, options: UnitHookOptions): [() => Promise<never>, () => void];
+
 /**
  * Converts a constant hook into a promise-based interface that can be invoked and reset.
  *
@@ -15,7 +27,8 @@ export declare function useAsPromise<E>(hook: UnitHook<E>, options: UnitHookOpti
  * @param {UnitHookOptions} options - Configuration options for the hook behavior.
  * @return {[() => Promise<T>, () => void]} A tuple where the first element is a function that returns a promise resolving with the hook value, and the second element is a reset function.
  */
-export declare function useAsPromise<T, E>(hook: ConstantHook<T, E>, options: UnitHookOptions): [() => Promise<T>, () => void];
+export function useAsPromise<T, E>(hook: ConstantHook<T, E>, options: UnitHookOptions): [() => Promise<T>, () => void];
+
 /**
  * Wraps the provided hook function to return a promise-based API, offering more flexibility
  * in asynchronous operations. This utility converts the hook into a callable function that
@@ -27,7 +40,8 @@ export declare function useAsPromise<T, E>(hook: ConstantHook<T, E>, options: Un
  * is a function that takes the hook's parameters and returns a `Promise`, and the second element
  * is a cleanup function for resource management.
  */
-export declare function useAsPromise<P, E>(hook: UnaryProduceHook<P, E>, options?: UnaryHookOptions<P>): [(params: P) => Promise<never>, () => void];
+export function useAsPromise<P, E>(hook: UnaryProduceHook<P, E>, options?: UnaryHookOptions<P>): [(params: P) => Promise<never>, () => void];
+
 /**
  * Allows the usage of a hook's asynchronous behavior as a Promise.
  *
@@ -37,7 +51,8 @@ export declare function useAsPromise<P, E>(hook: UnaryProduceHook<P, E>, options
  *     - A function that accepts parameters and returns a Promise resolving to the hook's result.
  *     - A cleanup function to properly dispose of the hook when no longer needed.
  */
-export declare function useAsPromise<P, T, E>(hook: UnaryFunctionHook<P, T, E>, options?: UnaryHookOptions<P>): [(params: P) => Promise<T>, () => void];
+export function useAsPromise<P, T, E>(  hook: UnaryFunctionHook<P, T, E>, options?: UnaryHookOptions<P>): [(params: P) => Promise<T>, () => void];
+
 /**
  * Converts a binary hook into a promise-based function, allowing the hook to be used asynchronously.
  *
@@ -48,7 +63,8 @@ export declare function useAsPromise<P, T, E>(hook: UnaryFunctionHook<P, T, E>,
  * @param {BinaryHookOptions<P, B>} [options] Optional configuration for the binary hook.
  * @return {[(body: B, params: P) => Promise<never>, () => void]} A tuple where the first element is a function that returns a promise and the second is a cleanup function.
  */
-export declare function useAsPromise<P, B, E>(hook: BinaryProduceHook<P, B, E>, options?: BinaryHookOptions<P, B>): [(body: B, params: P) => Promise<never>, () => void];
+export function useAsPromise<P, B, E>(hook: BinaryProduceHook<P, B, E>, options?: BinaryHookOptions<P, B>): [(body: B, params: P) => Promise<never>, () => void];
+
 /**
  * Wraps a binary function hook into a promise-based interface.
  *
@@ -56,4 +72,39 @@ export declare function useAsPromise<P, B, E>(hook: BinaryProduceHook<P, B, E>,
  * @param {BinaryHookOptions<P, B>} [options] Optional configuration options for the hook.
  * @return {[function(B, P): Promise<T>, function(): void]} Returns a tuple containing a function that invokes the hook and returns a promise, and a cleanup function to dispose of the hook's resources.
  */
-export declare function useAsPromise<P, B, T, E>(hook: BinaryFunctionHook<P, B, T, E>, options?: BinaryHookOptions<P, B>): [(body: B, params: P) => Promise<T>, () => void];
+export function useAsPromise<P, B, T, E>(hook: BinaryFunctionHook<P, B, T, E>, options?: BinaryHookOptions<P, B>): [(body: B, params: P) => Promise<T>, () => void];
+
+// **Implementation**
+export function useAsPromise<P, B, T, E>(
+  hook: IntrigHook<P, B, T, E>,
+  options?: IntrigHookOptions<P, B>
+): [(...args: any[]) => Promise<T>, () => void] {  // <- Compatible return type
+  const resolveRef = useRef<(value: T) => void>();
+  const rejectRef = useRef<(reason?: any) => void>();
+
+  let [state, dispatch, clear] = hook(options as any); // Casting to `any` to match all overloads
+
+  useEffect(() => {
+    if (isSuccess(state)) {
+      resolveRef.current?.(state.data);
+      clear();
+    } else if (isError(state)) {
+      rejectRef.current?.(state.error);
+      clear();
+    }
+  }, [state]);
+
+  const promiseFn = useCallback((...args: any[]) => {
+    return new Promise<T>((resolve, reject) => {
+      resolveRef.current = resolve;
+      rejectRef.current = reject;
+
+      let dispatchState = (dispatch as any)(...args);
+      if (isValidationError(dispatchState)) {
+        reject(dispatchState.error);
+      }
+    });
+  }, [dispatch]);
+
+  return [promiseFn, clear];
+}

package/src/extra/useLocalReducer.ts

@@ -0,0 +1,61 @@
+import { useIntrigContext } from '@intrig/next/intrig-context';
+import { useCallback, useMemo } from 'react';
+import { error, init, isInit, isSuccess, NetworkState, success } from '@intrig/next/network-state';
+
+export interface LocalReducerOptions<T, E> {
+  initState?: T;
+  key?: string;
+}
+
+function isPromise<T>(item: any): item is Promise<T> {
+  return !!item && typeof item.then === 'function' && typeof item.catch === 'function';
+}
+
+export function useLocalReducer<T, E, F extends (event: E, curState?: T) => T | Promise<T>>(fn: F, options: LocalReducerOptions<T, E>) {
+  let context = useIntrigContext();
+
+  const key = useMemo(() => {
+    return options.key ?? 'default';
+  }, []);
+
+  const networkState: NetworkState<T> = useMemo(() => {
+    return context.state?.[`localState:reduce:${key}`] ?? init()
+  }, [context.state?.[`localState:reduce:${key}`]]);
+
+  const dispatch = useCallback(
+    (state: NetworkState<T>) => {
+      context.dispatch({ key, operation: 'reduce', source: 'localState', state });
+    },
+    [key, context.dispatch]
+  );
+
+  const execute = useCallback((event: E) => {
+    try {
+      if (isSuccess(networkState)) {
+        let data = fn(event, networkState.data);
+        if (isPromise(data)) {
+          dispatch(init());
+          data.then(data => dispatch(success(data)));
+        } else {
+          dispatch(success(data));
+        }
+      } else if (isInit(networkState)) {
+        let data1 = fn(event, options.initState);
+        if (isPromise(data1)) {
+          dispatch(init());
+          data1.then(data => dispatch(success(data)));
+        } else {
+          dispatch(success(data1));
+        }
+      }
+    } catch (e) {
+      dispatch(error(e));
+    }
+  }, [networkState, dispatch, fn]);
+
+  const clear = useCallback(() => {
+    dispatch(init())
+  }, []);
+
+  return [networkState, execute, clear]
+}

package/src/extra/{useResolvedCachedValue.d.ts → useResolvedCachedValue.ts}

@@ -1,4 +1,15 @@
-import { BinaryFunctionHook, BinaryHookOptions, BinaryProduceHook, ConstantHook, UnaryFunctionHook, UnaryHookOptions, UnaryProduceHook, UnitHook, UnitHookOptions } from '@intrig/next/network-state';
+import {
+  BinaryFunctionHook,
+  BinaryHookOptions,
+  BinaryProduceHook,
+  ConstantHook, IntrigHook, IntrigHookOptions, isSuccess, UnaryFunctionHook,
+  UnaryHookOptions,
+  UnaryProduceHook,
+  UnitHook,
+  UnitHookOptions
+} from '@intrig/next/network-state';
+import { useEffect, useState } from 'react';
+
 /**
  * Resolves and caches the computed value of a given hook.
  *
@@ -6,7 +17,8 @@ import { BinaryFunctionHook, BinaryHookOptions, BinaryProduceHook, ConstantHook,
  * @param {UnitHookOptions} options - Options to customize the behavior of the hook resolution and caching process.
  * @return {undefined} This function does not return a value.
  */
-export declare function useResolvedCachedValue<E>(hook: UnitHook<E>, options: UnitHookOptions): undefined;
+export function useResolvedCachedValue<E>(hook: UnitHook<E>, options: UnitHookOptions): undefined;
+
 /**
  * Resolves and retrieves a cached value by utilizing a specified hook and options.
  *
@@ -14,7 +26,8 @@ export declare function useResolvedCachedValue<E>(hook: UnitHook<E>, options: Un
  * @param {UnitHookOptions} options - Options controlling the behavior or configuration of the hook.
  * @return {T | undefined} The resolved cached value or undefined if the value couldn't be determined.
  */
-export declare function useResolvedCachedValue<T, E>(hook: ConstantHook<T, E>, options: UnitHookOptions): T | undefined;
+export function useResolvedCachedValue<T, E>(hook: ConstantHook<T, E>, options: UnitHookOptions): T | undefined;
+
 /**
  * Resolves and caches the value produced by the specified hook.
  * This utility helps in managing hook-driven computational results within a component context by caching
@@ -24,7 +37,8 @@ export declare function useResolvedCachedValue<T, E>(hook: ConstantHook<T, E>, o
  * @param {UnaryHookOptions<P>} options - The configuration options that control how the hook is executed.
  * @return {undefined} Returns undefined since the resolution and caching of the value are managed internally.
  */
-export declare function useResolvedCachedValue<P, E>(hook: UnaryProduceHook<P, E>, options: UnaryHookOptions<P>): undefined;
+export function useResolvedCachedValue<P, E>(hook: UnaryProduceHook<P, E>, options: UnaryHookOptions<P>): undefined;
+
 /**
  * Resolves a cached value using the provided hook and options.
  *
@@ -33,7 +47,8 @@ export declare function useResolvedCachedValue<P, E>(hook: UnaryProduceHook<P, E
  * @param {UnaryHookOptions<P>} options - Configuration settings or arguments required by the hook to retrieve the cached value.
  * @return {T | undefined} A value of type T if resolved successfully, or undefined if not available.
  */
-export declare function useResolvedCachedValue<P, T, E>(hook: UnaryFunctionHook<P, T, E>, options: UnaryHookOptions<P>): T | undefined;
+export function useResolvedCachedValue<P, T, E>(hook: UnaryFunctionHook<P, T, E>, options: UnaryHookOptions<P>): T | undefined;
+
 /**
  * Resolves and caches the value produced by the provided binary hook function.
  * This function ensures that the hook's resolved value is reused efficiently across invocations
@@ -43,7 +58,8 @@ export declare function useResolvedCachedValue<P, T, E>(hook: UnaryFunctionHook<
  * @param {BinaryHookOptions<P, B>} options - Configuration options for controlling the behavior of the hook and its caching mechanism.
  * @return {undefined} - Returns undefined as the resolution is managed internally via the hook's lifecycle.
  */
-export declare function useResolvedCachedValue<P, B, E>(hook: BinaryProduceHook<P, B, E>, options: BinaryHookOptions<P, B>): undefined;
+export function useResolvedCachedValue<P, B, E>(hook: BinaryProduceHook<P, B, E>, options: BinaryHookOptions<P, B>): undefined;
+
 /**
  * A hook utility function that resolves and caches a value based on the given binary function hook and options.
  *
@@ -51,4 +67,20 @@ export declare function useResolvedCachedValue<P, B, E>(hook: BinaryProduceHook<
  * @param {BinaryHookOptions<P, B>} options - The options object containing parameters and configuration for the hook.
  * @return {T | undefined} The resolved and cached value, or undefined if it cannot be resolved.
  */
-export declare function useResolvedCachedValue<P, B, T, E>(hook: BinaryFunctionHook<P, B, T, E>, options: BinaryHookOptions<P, B>): T | undefined;
+export function useResolvedCachedValue<P, B, T, E>(hook: BinaryFunctionHook<P, B, T, E>, options: BinaryHookOptions<P, B>): T | undefined;
+
+// **Implementation**
+export function useResolvedCachedValue<P, B, T, E>(hook: IntrigHook<P, B, T, E>, options: IntrigHookOptions<P, B>): T | undefined {
+  const [cachedValue, setCachedValue] = useState<T | undefined>();
+
+  let [state] = hook(options as any); // Ensure compatibility with different hook types
+
+  useEffect(() => {
+    if (isSuccess(state)) {
+      setCachedValue(state.data);
+    }
+    // Do not clear cached value if state is unsuccessful
+  }, [state]);
+
+  return cachedValue;
+}

package/src/extra/{useResolvedValue.d.ts → useResolvedValue.ts}

@@ -1,4 +1,15 @@
-import { BinaryFunctionHook, BinaryHookOptions, BinaryProduceHook, ConstantHook, UnaryFunctionHook, UnaryHookOptions, UnaryProduceHook, UnitHook, UnitHookOptions } from '@intrig/next/network-state';
+import {
+  BinaryFunctionHook,
+  BinaryHookOptions,
+  BinaryProduceHook,
+  ConstantHook, IntrigHook, IntrigHookOptions, isSuccess, UnaryFunctionHook,
+  UnaryHookOptions,
+  UnaryProduceHook,
+  UnitHook,
+  UnitHookOptions
+} from '@intrig/next/network-state';
+import { useEffect, useState } from 'react';
+
 /**
  * A function that resolves the value provided by a unit hook based on specified options.
  *
@@ -6,7 +17,8 @@ import { BinaryFunctionHook, BinaryHookOptions, BinaryProduceHook, ConstantHook,
  * @param {UnitHookOptions} options - Configuration options to control how the unit hook is resolved.
  * @return {undefined} Returns undefined after resolving the unit hook value.
  */
-export declare function useResolvedValue<E>(hook: UnitHook<E>, options: UnitHookOptions): undefined;
+export function useResolvedValue<E>(hook: UnitHook<E>, options: UnitHookOptions): undefined;
+
 /**
  * Resolves the value of a given constant hook based on the provided options.
  *
@@ -14,7 +26,7 @@ export declare function useResolvedValue<E>(hook: UnitHook<E>, options: UnitHook
  * @param {UnitHookOptions} options - The options used to configure the resolution of the hook value.
  * @return {T | undefined} The resolved value of the hook or undefined if the hook cannot be resolved.
  */
-export declare function useResolvedValue<T, E>(hook: ConstantHook<T, E>, options: UnitHookOptions): T | undefined;
+export function useResolvedValue<T, E>(hook: ConstantHook<T, E>, options: UnitHookOptions): T | undefined;
 /**
  * This function is a utility hook that evaluates and resolves the value of the provided hook function.
  * It takes a hook function and its corresponding options as arguments to produce side effects or state updates.
@@ -23,7 +35,8 @@ export declare function useResolvedValue<T, E>(hook: ConstantHook<T, E>, options
  * @param {UnaryHookOptions<P>} options - Configuration options for the hook, such as parameters or behaviors.
  * @return {undefined} This function does not return a value; it operates through side effects or resolves implicitly.
  */
-export declare function useResolvedValue<P, E>(hook: UnaryProduceHook<P, E>, options: UnaryHookOptions<P>): undefined;
+export function useResolvedValue<P, E>(hook: UnaryProduceHook<P, E>, options: UnaryHookOptions<P>): undefined;
+
 /**
  * A custom hook that provides a resolved value based on the provided unary function hook and options.
  *
@@ -31,7 +44,8 @@ export declare function useResolvedValue<P, E>(hook: UnaryProduceHook<P, E>, opt
  * @param {UnaryHookOptions<P>} options - The configuration object containing parameters for the unary hook execution.
  * @return {T | undefined} The resolved value of type T if successful, or undefined if no value is resolved.
  */
-export declare function useResolvedValue<P, T, E>(hook: UnaryFunctionHook<P, T, E>, options: UnaryHookOptions<P>): T | undefined;
+export function useResolvedValue<P, T, E>(hook: UnaryFunctionHook<P, T, E>, options: UnaryHookOptions<P>): T | undefined;
+
 /**
  * A custom hook that processes a binary produce hook and its options to produce a resolved value.
  *
@@ -39,7 +53,8 @@ export declare function useResolvedValue<P, T, E>(hook: UnaryFunctionHook<P, T,
  * @param {BinaryHookOptions<P, B>} options - The options provided to the binary hook for processing.
  * @return {undefined} Returns `undefined` after the hook is resolved.
  */
-export declare function useResolvedValue<P, B, E>(hook: BinaryProduceHook<P, B, E>, options: BinaryHookOptions<P, B>): undefined;
+export function useResolvedValue<P, B, E>(hook: BinaryProduceHook<P, B, E>, options: BinaryHookOptions<P, B>): undefined;
+
 /**
  * Resolves a value based on the provided binary function hook and options.
  *
@@ -47,4 +62,21 @@ export declare function useResolvedValue<P, B, E>(hook: BinaryProduceHook<P, B,
  * @param {BinaryHookOptions<P, B>} options - Configuration options for the binary function hook.
  * @return {T | undefined} The resolved value of type T, or undefined if the resolution fails.
  */
-export declare function useResolvedValue<P, B, T, E>(hook: BinaryFunctionHook<P, B, T, E>, options: BinaryHookOptions<P, B>): T | undefined;
+export function useResolvedValue<P, B, T, E>(hook: BinaryFunctionHook<P, B, T, E>, options: BinaryHookOptions<P, B>): T | undefined;
+
+// **Implementation**
+export function useResolvedValue<P, B, T, E>(hook: IntrigHook<P, B, T, E>, options: IntrigHookOptions<P, B>): T | undefined {
+  const [value, setValue] = useState<T | undefined>();
+
+  let [state] = hook(options as any); // Ensure compatibility with different hook types
+
+  useEffect(() => {
+    if (isSuccess(state)) {
+      setValue(state.data);
+    } else {
+      setValue(undefined);
+    }
+  }, [state]); // Add `state` to the dependency array to ensure updates
+
+  return value;
+}

package/src/extra.ts

@@ -0,0 +1,190 @@
+"use client"
+import {
+  BinaryFunctionHook,
+  BinaryHookOptions,
+  BinaryProduceHook,
+  ConstantHook,
+  error,
+  init, IntrigHook, IntrigHookOptions,
+  isError,
+  isSuccess,
+  isValidationError,
+  NetworkState,
+  pending,
+  success, UnaryFunctionHook, UnaryHookOptions, UnaryProduceHook,
+  UnitHook,
+  UnitHookOptions
+} from '@intrig/next/network-state';
+import { useCallback, useEffect, useId, useMemo, useReducer, useRef, useState } from 'react';
+import { useIntrigContext } from '@intrig/next/intrig-context';
+
+/**
+ * Converts a given hook into a promise-based function.
+ *
+ * @param {IntrigHook<P, B, T>} hook - The hook function to be converted.
+ * @param options
+ *
+ * @return {[(...params: Parameters<ReturnType<IntrigHook<P, B, T>>[1]>) => Promise<T>, () => void]}
+ * Returns a tuple containing a function that invokes the hook as a promise and a function to clear the state.
+ */
+export function useAsPromise<E>(hook: UnitHook<E>, options: UnitHookOptions): [() => Promise<never>, () => void];
+export function useAsPromise<T, E>(hook: ConstantHook<T, E>, options: UnitHookOptions): [() => Promise<T>, () => void];
+export function useAsPromise<P, E>(hook: UnaryProduceHook<P, E>, options?: UnaryHookOptions<P>): [(params: P) => Promise<never>, () => void];
+export function useAsPromise<P, T, E>(  hook: UnaryFunctionHook<P, T, E>, options?: UnaryHookOptions<P>): [(params: P) => Promise<T>, () => void];
+export function useAsPromise<P, B, E>(hook: BinaryProduceHook<P, B, E>, options?: BinaryHookOptions<P, B>): [(body: B, params: P) => Promise<never>, () => void];
+export function useAsPromise<P, B, T, E>(hook: BinaryFunctionHook<P, B, T, E>, options?: BinaryHookOptions<P, B>): [(body: B, params: P) => Promise<T>, () => void];
+
+// **Implementation**
+export function useAsPromise<P, B, T, E>(
+  hook: IntrigHook<P, B, T, E>,
+  options?: IntrigHookOptions<P, B>
+): [(...args: any[]) => Promise<T>, () => void] {  // <- Compatible return type
+  const resolveRef = useRef<(value: T) => void>();
+  const rejectRef = useRef<(reason?: any) => void>();
+
+  let [state, dispatch, clear] = hook(options as any); // Casting to `any` to match all overloads
+
+  useEffect(() => {
+    if (isSuccess(state)) {
+      resolveRef.current?.(state.data);
+      clear();
+    } else if (isError(state)) {
+      rejectRef.current?.(state.error);
+      clear();
+    }
+  }, [state]);
+
+  const promiseFn = useCallback((...args: any[]) => {
+    return new Promise<T>((resolve, reject) => {
+      resolveRef.current = resolve;
+      rejectRef.current = reject;
+
+      let dispatchState = (dispatch as any)(...args);
+      if (isValidationError(dispatchState)) {
+        reject(dispatchState.error);
+      }
+    });
+  }, [dispatch]);
+
+  return [promiseFn, clear];
+}
+
+/**
+ * A custom hook that manages and returns the network state of a promise-based function,
+ * providing a way to execute the function and clear its state.
+ *
+ * @param fn The promise-based function whose network state is to be managed. It should be a function that returns a promise.
+ * @param key An optional identifier for the network state. Defaults to 'default'.
+ * @return A tuple containing the current network state, a function to execute the promise, and a function to clear the state.
+ */
+export function useAsNetworkState<T, F extends ((...args: any) => Promise<T>)>(fn: F, key: string = 'default'): [NetworkState<T>, (...params: Parameters<F>) => void, () => void] {
+  let id = useId();
+
+  let context = useIntrigContext();
+
+  const networkState = useMemo(() => {
+    return context.state?.[`promiseState:${id}:${key}}`] ?? init()
+  }, [context.state?.[`promiseState:${id}:${key}}`]]);
+
+  const dispatch = useCallback(
+    (state: NetworkState<T>) => {
+      context.dispatch({ key, operation: id, source: 'promiseState', state });
+    },
+    [key, context.dispatch]
+  );
+
+  const execute = useCallback((...args: Parameters<F>) => {
+    dispatch(pending())
+    return fn(...args).then(
+      (data) => {
+        dispatch(success(data))
+      },
+      (e) => {
+        dispatch(error(e))
+      }
+    )
+  }, []);
+
+  const clear = useCallback(() => {
+    dispatch(init())
+  }, []);
+
+  return [
+    networkState,
+    execute,
+    clear
+  ]
+}
+
+/**
+ * A custom hook that resolves the value from the provided hook's state and updates it whenever the state changes.
+ *
+ * @param {IntrigHook<P, B, T>} hook - The hook that provides the state to observe and resolve data from.
+ * @param options
+ * @return {T | undefined} The resolved value from the hook's state or undefined if the state is not successful.
+ */
+export function useResolvedValue<E>(hook: UnitHook<E>, options: UnitHookOptions): undefined;
+
+export function useResolvedValue<T, E>(hook: ConstantHook<T, E>, options: UnitHookOptions): T | undefined;
+
+export function useResolvedValue<P, E>(hook: UnaryProduceHook<P, E>, options: UnaryHookOptions<P>): undefined;
+
+export function useResolvedValue<P, T, E>(hook: UnaryFunctionHook<P, T, E>, options: UnaryHookOptions<P>): T | undefined;
+
+export function useResolvedValue<P, B, E>(hook: BinaryProduceHook<P, B, E>, options: BinaryHookOptions<P, B>): undefined;
+
+export function useResolvedValue<P, B, T, E>(hook: BinaryFunctionHook<P, B, T, E>, options: BinaryHookOptions<P, B>): T | undefined;
+
+// **Implementation**
+export function useResolvedValue<P, B, T, E>(hook: IntrigHook<P, B, T, E>, options: IntrigHookOptions<P, B>): T | undefined {
+  const [value, setValue] = useState<T | undefined>();
+
+  let [state] = hook(options as any); // Ensure compatibility with different hook types
+
+  useEffect(() => {
+    if (isSuccess(state)) {
+      setValue(state.data);
+    } else {
+      setValue(undefined);
+    }
+  }, [state]); // Add `state` to the dependency array to ensure updates
+
+  return value;
+}
+
+
+/**
+ * A custom hook that resolves and caches the value from a successful state provided by the given hook.
+ * The state is updated only when it is in a successful state.
+ *
+ * @param {IntrigHook<P, B, T>} hook - The hook that provides the state to observe and cache data from.
+ * @param options
+ * @return {T | undefined} The cached value from the hook's state or undefined if the state is not successful.
+ */
+export function useResolvedCachedValue<E>(hook: UnitHook<E>, options: UnitHookOptions): undefined;
+
+export function useResolvedCachedValue<T, E>(hook: ConstantHook<T, E>, options: UnitHookOptions): T | undefined;
+
+export function useResolvedCachedValue<P, E>(hook: UnaryProduceHook<P, E>, options: UnaryHookOptions<P>): undefined;
+
+export function useResolvedCachedValue<P, T, E>(hook: UnaryFunctionHook<P, T, E>, options: UnaryHookOptions<P>): T | undefined;
+
+export function useResolvedCachedValue<P, B, E>(hook: BinaryProduceHook<P, B, E>, options: BinaryHookOptions<P, B>): undefined;
+
+export function useResolvedCachedValue<P, B, T, E>(hook: BinaryFunctionHook<P, B, T, E>, options: BinaryHookOptions<P, B>): T | undefined;
+
+// **Implementation**
+export function useResolvedCachedValue<P, B, T, E>(hook: IntrigHook<P, B, T, E>, options: IntrigHookOptions<P, B>): T | undefined {
+  const [cachedValue, setCachedValue] = useState<T | undefined>();
+
+  let [state] = hook(options as any); // Ensure compatibility with different hook types
+
+  useEffect(() => {
+    if (isSuccess(state)) {
+      setCachedValue(state.data);
+    }
+    // Do not clear cached value if state is unsuccessful
+  }, [state]); 
+
+  return cachedValue;
+}