Merge pull request #218 from atomic-state/features/params-types

features(params):

Author: danybeltran

package.json

@@ -1,6 +1,6 @@
 {
   "name": "http-react",
-  "version": "3.8.7",
+  "version": "3.8.8",
   "description": "React hooks for data fetching",
   "main": "dist/index.js",
   "scripts": {

src/hooks/others.ts

@@ -699,6 +699,7 @@ export function useServerAction<T extends (args: any) => any>(
   let mockServerActionId = config?.id ?? getMockServerActionId(action)
 
   const $action = useFetch(mockServerActionId, {
+    params: {},
     fetcher: async function proxied(_, config) {
       const actionParam = actionForms.get(mockServerActionId) ?? config?.params
       $action.resetError()

src/hooks/use-fetch.ts

@@ -41,6 +41,8 @@ import {
   FetchContextType,
   HTTP_METHODS,
   ImperativeFetch,
+  StaticFetchConfig,
+  StaticFetchConfigNoUrl,
   TimeSpan
 } from '../types'
 
@@ -82,9 +84,16 @@ const temporaryFormData = new Map()
 /**
  * Fetch hook
  */
-export function useFetch<FetchDataType = any, TransformData = any>(
-  init: FetchConfigType<FetchDataType, TransformData> | string | Request,
-  options?: FetchConfigTypeNoUrl<FetchDataType, TransformData>
+export function useFetch<
+  FetchDataType = any,
+  TransformData = any,
+  UrlType extends string = string
+>(
+  init:
+    | StaticFetchConfig<FetchDataType, TransformData, UrlType>
+    | UrlType
+    | Request,
+  options?: StaticFetchConfigNoUrl<FetchDataType, TransformData, UrlType>
 ) {
   const $ctx = useHRFContext()
 
@@ -129,7 +138,7 @@ export function useFetch<FetchDataType = any, TransformData = any>(
           ...options,
           // @ts-expect-error
           id: init?.id ?? init?.key
-        } as Required<FetchConfigType<FetchDataType, TransformData>>)
+        } as Required<StaticFetchConfig<FetchDataType, TransformData, UrlType>>)
 
   const {
     onOnline = ctx.onOnline,

src/types/index.ts

@@ -371,3 +371,53 @@ export type FetchInit<FDT = any, TransformData = any> = FetchConfigType<
   FDT,
   TransformData
 >;
+
+// types related to params parsing
+
+/** Helper type to extract the parameter name from a segment like :id or {id} or [id] */
+export type ExtractParam<Segment extends string> =
+  Segment extends `[${infer Name}]`
+    ? Name // [name]
+    : Segment extends `:${infer Name}`
+    ? Name // :name
+    : Segment extends `{${infer Name}}`
+    ? Name // {name}
+    : never;
+
+type CleanPath<Path extends string> = Path extends `/${infer Rest}`
+  ? CleanPath<Rest>
+  : Path extends `${infer Rest}/`
+  ? CleanPath<Rest>
+  : Path extends `${infer Base}?${any}`
+  ? CleanPath<Base>
+  : Path;
+
+type ParsePathParams<Path extends string> =
+  Path extends `${infer Segment}/${infer Rest}`
+    ? (ExtractParam<Segment> extends never
+        ? {}
+        : { [K in ExtractParam<Segment>]: string | number }) &
+        ParsePathParams<Rest>
+    : ExtractParam<Path> extends never
+    ? {}
+    : { [K in ExtractParam<Path>]: string | number };
+
+export type PathParams<Path extends string> = ParsePathParams<CleanPath<Path>>;
+
+export type StaticParams<UrlType extends string> =
+  PathParams<UrlType> extends Record<string, never>
+    ? { params?: any }
+    : { params: PathParams<UrlType> };
+
+export type StaticFetchConfig<D, T, U extends string> = Omit<
+  FetchConfigType<D, T>,
+  "url" | "params"
+> & {
+  url?: U;
+} & StaticParams<U>;
+
+export type StaticFetchConfigNoUrl<D, T, U extends string> = Omit<
+  FetchConfigTypeNoUrl<D, T>,
+  "params"
+> &
+  StaticParams<U>;

src/utils/index.ts

@@ -11,7 +11,7 @@ import {
   requestInitialTimes,
   requestsProvider,
   runningMutate,
-  valuesMemory,
+  valuesMemory
 } from "../internal";
 
 import { UNITS_MILISECONDS_EQUIVALENTS } from "../internal/constants";
@@ -24,6 +24,8 @@ import {
   TimeSpan,
   FetchConfigTypeNoUrl,
   FetchConfigType,
+  StaticFetchConfig,
+  StaticFetchConfigNoUrl
 } from "../types";
 import {
   gql,
@@ -32,7 +34,7 @@ import {
   isFunction,
   queue,
   serialize,
-  windowExists,
+  windowExists
 } from "./shared";
 
 export function getMiliseconds(v: TimeSpan): number {
@@ -67,28 +69,28 @@ export const createImperativeFetch = (ctx: FetchContextType) => {
     "PATCH",
     "PURGE",
     "LINK",
-    "UNLINK",
+    "UNLINK"
   ];
 
   const { baseUrl } = ctx;
 
   return {
     ...Object.fromEntries(
       new Map(
-        keys.map((k) => [
+        keys.map(k => [
           k.toLowerCase(),
           (url, config = {}) =>
             (useFetch as any)[k.toLowerCase()](
               hasBaseUrl(url) ? url : baseUrl + url,
               {
                 ...ctx,
-                ...config,
+                ...config
               }
-            ),
+            )
         ])
       )
     ),
-    config: ctx,
+    config: ctx
   } as ImperativeFetch;
 };
 
@@ -101,7 +103,7 @@ export const useIsomorphicLayoutEffect = windowExists
  */
 export function revalidate(id: any | any[], __reval__ = true) {
   if (Array.isArray(id)) {
-    id.map((reqId) => {
+    id.map(reqId => {
       if (isDefined(reqId)) {
         const key = serialize(reqId);
 
@@ -118,7 +120,7 @@ export function revalidate(id: any | any[], __reval__ = true) {
             queue(() => {
               requestsProvider.emit(key, {
                 loading: true,
-                error: false,
+                error: false
               });
             });
           }
@@ -142,7 +144,7 @@ export function revalidate(id: any | any[], __reval__ = true) {
           queue(() => {
             requestsProvider.emit(key, {
               loading: true,
-              error: false,
+              error: false
             });
           });
         }
@@ -157,17 +159,17 @@ export function revalidateKey(key: any) {
 
 export function cancelRequest(id: any | any[]) {
   if (Array.isArray(id)) {
-    id.map((reqId) => {
+    id.map(reqId => {
       if (isDefined(reqId)) {
         const key = serialize({
-          idString: serialize(reqId),
+          idString: serialize(reqId)
         });
         if (isPending(key)) {
           revalidate(reqId, false);
           queue(() => {
             requestsProvider.emit(key, {
               loading: false,
-              error: false,
+              error: false
             });
           });
         }
@@ -176,14 +178,14 @@ export function cancelRequest(id: any | any[]) {
   } else {
     if (isDefined(id)) {
       const key = serialize({
-        idString: serialize(id),
+        idString: serialize(id)
       });
       if (isPending(key)) {
         revalidate(id, false);
         queue(() => {
           requestsProvider.emit(key, {
             loading: false,
-            error: false,
+            error: false
           });
         });
       }
@@ -249,7 +251,7 @@ export function queryProvider<R>(
 
     const queryVariables = {
       ...thisDefaults?.variables,
-      ...(otherConfig as any)?.variables,
+      ...(otherConfig as any)?.variables
     };
 
     const { config = {} } = providerConfig || {};
@@ -276,7 +278,7 @@ export function queryProvider<R>(
       headers: {
         ...others?.headers,
         ...thisDefaults?.headers,
-        ...otherConfig?.headers,
+        ...otherConfig?.headers
       },
       ...{ __fromProvider: true },
       default: {
@@ -287,15 +289,15 @@ export function queryProvider<R>(
              * 'value' property (when using the `gql` function)
              */
             // @ts-ignore
-            otherConfig?.default) as R[P]["value"],
+            otherConfig?.default) as R[P]["value"]
       },
-      variables: queryVariables,
+      variables: queryVariables
     });
 
     const thisData = useMemo(
       () => ({
         ...g?.data,
-        variables: queryVariables,
+        variables: queryVariables
       }),
       [serialize({ data: g?.data, queryVariables })]
     );
@@ -304,9 +306,9 @@ export function queryProvider<R>(
       ...g,
       config: {
         ...g?.config,
-        config: undefined,
+        config: undefined
       },
-      data: thisData,
+      data: thisData
     } as Omit<typeof g, "data"> & {
       data: {
         data: QuerysType[P] extends ReturnType<typeof gql>
@@ -338,7 +340,7 @@ export function mutateData(
         requestsProvider.emit(key, {
           data: newVal,
           isMutating: true,
-          requestCallId,
+          requestCallId
         });
         if (_revalidate) {
           previousConfig.set(key, undefined);
@@ -353,7 +355,7 @@ export function mutateData(
         requestsProvider.emit(key, {
           requestCallId,
           isMutating: true,
-          data: v,
+          data: v
         });
         if (_revalidate) {
           previousConfig.set(key, undefined);
@@ -368,11 +370,16 @@ export function mutateData(
   }
 }
 
-export function fetchOptions<T = any, TransformData = any>(
-  init: string | FetchConfigType<T, TransformData>,
-  options?: FetchConfigTypeNoUrl<T, TransformData>
-) {
+export function fetchOptions<
+  T = any,
+  TransformData = any,
+  UrlType extends string = string
+>(
+  init: UrlType | StaticFetchConfig<T, TransformData, UrlType>,
+  options?: Partial<StaticFetchConfigNoUrl<T, TransformData, UrlType>>
+): StaticFetchConfig<T, TransformData, UrlType> {
+  // Changed return type
   return (
     typeof init === "string" ? { url: init, ...options } : init
-  ) as FetchConfigType<T, TransformData>;
+  ) as StaticFetchConfig<T, TransformData, UrlType>; // Changed cast
 }