@slangy/react - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

dist/hooks/createFetchHook.d.ts

 import { SWRResponse } from 'swr';
-type CreateFetchHookParams<T, DataKey extends string> = {
-    fetcher: () => Promise<T>;
+/**
+ * Represents the shape of the data holder.
+ */
+type DataHolder<T> = {
+    data: T | undefined;
+};
+/**
+ * Describes the parameters required to create a custom fetch hook.
+ *
+ * @template T - The type of data being fetched.
+ * @template FetcherReturnType - The type of data returned from the fetcher function.
+ * @template FetcherArgs - The types of arguments accepted by the fetcher function.
+ * @template ExtraFields - Additional fields that can extend the data holder.
+ */
+type CreateFetchHookParams<T, FetcherReturnType, FetcherArgs extends unknown[], ExtraFields extends DataHolder<T>> = {
+    fetcher: (...args: FetcherArgs) => Promise<FetcherReturnType>;
     swrKey: string;
-    dataKey?: DataKey;
-    defaultData?: T;
+    transform?: (data?: FetcherReturnType) => ExtraFields;
 };
-type HookResponse<T, DataKey extends string> = {
-    [key in DataKey]: T;
-} & Omit<SWRResponse<T>, 'data'>;
-declare const createFetchHook: <T, DataKey extends string = "data">({ fetcher, swrKey, dataKey, defaultData, }: CreateFetchHookParams<T, DataKey>) => () => HookResponse<T, DataKey>;
+/**
+ * The shape of the response from the custom hook.
+ */
+type HookResponse<T, ExtraFields> = {
+    data: T | undefined;
+} & ExtraFields & Omit<SWRResponse, 'data'>;
+/**
+ * A utility hook to create a custom SWR hook with optional data transformation.
+ *
+ * @param fetcher - The function used to fetch data.
+ * @param swrKey - The caching key used by SWR.
+ * @param transform - An optional function to transform or enrich the fetched data.
+ * @returns HookResponse A custom hook tailored to the given configuration.
+ */
+declare const createFetchHook: <T, FetcherReturnType, FetcherArgs extends unknown[], ExtraFields extends DataHolder<T>>({ fetcher, transform, swrKey, }: CreateFetchHookParams<T, FetcherReturnType, FetcherArgs, ExtraFields>) => (...args: FetcherArgs) => HookResponse<T, ExtraFields>;
 export default createFetchHook;
 //# sourceMappingURL=createFetchHook.d.ts.map

dist/hooks/createFetchHook.d.ts.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"createFetchHook.d.ts","sourceRoot":"","sources":["../../src/hooks/createFetchHook.ts"],"names":[],"mappings":"AAAA,OAAe,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC;AAE1C,KAAK,qBAAqB,CAAC,CAAC,EAAE,OAAO,SAAS,MAAM,IAAI;IACtD,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,CAAC;CACjB,CAAC;AAEF,KAAK,YAAY,CAAC,CAAC,EAAE,OAAO,SAAS,MAAM,IAAI;KAC5C,GAAG,IAAI,OAAO,GAAG,CAAC;CACpB,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AAEjC,QAAA,MAAM,eAAe,uJAalB,CAAC;AAEJ,eAAe,eAAe,CAAC"}
+{"version":3,"file":"createFetchHook.d.ts","sourceRoot":"","sources":["../../src/hooks/createFetchHook.ts"],"names":[],"mappings":"AAAA,OAAe,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC;AAE1C;;GAEG;AACH,KAAK,UAAU,CAAC,CAAC,IAAI;IACnB,IAAI,EAAE,CAAC,GAAG,SAAS,CAAC;CACrB,CAAC;AAEF;;;;;;;GAOG;AACH,KAAK,qBAAqB,CACxB,CAAC,EACD,iBAAiB,EACjB,WAAW,SAAS,OAAO,EAAE,EAC7B,WAAW,SAAS,UAAU,CAAC,CAAC,CAAC,IAC/B;IACF,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,WAAW,KAAK,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC9D,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,iBAAiB,KAAK,WAAW,CAAC;CACvD,CAAC;AAEF;;GAEG;AACH,KAAK,YAAY,CAAC,CAAC,EAAE,WAAW,IAAI;IAClC,IAAI,EAAE,CAAC,GAAG,SAAS,CAAC;CACrB,GAAG,WAAW,GACb,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;AAE5B;;;;;;;GAOG;AACH,QAAA,MAAM,eAAe,4PAelB,CAAC;AAEJ,eAAe,eAAe,CAAC"}

dist/hooks/createFetchHook.js

 import useSWR from 'swr';
-const createFetchHook = ({ fetcher, swrKey, dataKey = 'data', defaultData, }) => () => {
-    const { data = defaultData, ...rest } = useSWR(swrKey, fetcher);
+/**
+ * A utility hook to create a custom SWR hook with optional data transformation.
+ *
+ * @param fetcher - The function used to fetch data.
+ * @param swrKey - The caching key used by SWR.
+ * @param transform - An optional function to transform or enrich the fetched data.
+ * @returns HookResponse A custom hook tailored to the given configuration.
+ */
+const createFetchHook = ({ fetcher, transform, swrKey, }) => (...args) => {
+    const { data, ...rest } = useSWR([swrKey, args], ([, fetcherArgs]) => fetcher(...fetcherArgs));
+    const transformedData = transform ? transform(data) : { data };
     return {
-        [dataKey]: data,
         ...rest,
+        ...transformedData,
     };
@@ -8,0 +17,0 @@ };

dist/hooks/createFetchHook.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"createFetchHook.js","sourceRoot":"","sources":["../../src/hooks/createFetchHook.ts"],"names":[],"mappings":"AAAA,OAAO,MAAuB,MAAM,KAAK,CAAC;AAa1C,MAAM,eAAe,GACnB,CAAqC,EACnC,OAAO,EACP,MAAM,EACN,OAAO,GAAG,MAAiB,EAC3B,WAAW,GACuB,EAAE,EAAE,CACxC,GAAG,EAAE;IACH,MAAM,EAAE,IAAI,GAAG,WAAW,EAAE,GAAG,IAAI,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChE,OAAO;QACL,CAAC,OAAO,CAAC,EAAE,IAAI;QACf,GAAG,IAAI;KACoB,CAAC;AAChC,CAAC,CAAC;AAEJ,eAAe,eAAe,CAAC"}
+{"version":3,"file":"createFetchHook.js","sourceRoot":"","sources":["../../src/hooks/createFetchHook.ts"],"names":[],"mappings":"AAAA,OAAO,MAAuB,MAAM,KAAK,CAAC;AAoC1C;;;;;;;GAOG;AACH,MAAM,eAAe,GACnB,CAAyF,EACvF,OAAO,EACP,SAAS,EACT,MAAM,GACgE,EAAE,EAAE,CAC5E,CAAC,GAAG,IAAiB,EAAgC,EAAE;IACrD,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,MAAM,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC;IAE/F,MAAM,eAAe,GAAG,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAE,EAAE,IAAI,EAAkB,CAAC;IAEhF,OAAO;QACL,GAAG,IAAI;QACP,GAAG,eAAe;KACnB,CAAC;AACJ,CAAC,CAAC;AAEJ,eAAe,eAAe,CAAC"}

package.json

 {
   "name": "@slangy/react",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "author": {
@@ -38,6 +38,6 @@ "name": "Dani Lupión",
     "@types/node": "^20.8.2",
-    "@types/react": "^18.2.24",
-    "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@typescript-eslint/parser": "^6.7.4",
-    "eslint": "^8.50.0",
+    "@types/react": "^18.2.28",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@typescript-eslint/parser": "^6.7.5",
+    "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
@@ -44,0 +44,0 @@ "eslint-import-resolver-typescript": "^3.6.1",

src/hooks/createFetchHook.ts

 import useSWR, { SWRResponse } from 'swr';
 
-type CreateFetchHookParams<T, DataKey extends string> = {
-  fetcher: () => Promise<T>;
-  swrKey: string;
-  dataKey?: DataKey;
-  defaultData?: T;
+/**
+ * Represents the shape of the data holder.
+ */
+type DataHolder<T> = {
+  data: T | undefined;
 };
 
-type HookResponse<T, DataKey extends string> = {
-  [key in DataKey]: T;
-} & Omit<SWRResponse<T>, 'data'>;
+/**
+ * Describes the parameters required to create a custom fetch hook.
+ *
+ * @template T - The type of data being fetched.
+ * @template FetcherReturnType - The type of data returned from the fetcher function.
+ * @template FetcherArgs - The types of arguments accepted by the fetcher function.
+ * @template ExtraFields - Additional fields that can extend the data holder.
+ */
+type CreateFetchHookParams<
+  T,
+  FetcherReturnType,
+  FetcherArgs extends unknown[],
+  ExtraFields extends DataHolder<T>,
+> = {
+  fetcher: (...args: FetcherArgs) => Promise<FetcherReturnType>; // A function responsible for data fetching.
+  swrKey: string; // The caching key used by SWR.
+  transform?: (data?: FetcherReturnType) => ExtraFields; // An optional function to transform or enrich the data.
+};
 
+/**
+ * The shape of the response from the custom hook.
+ */
+type HookResponse<T, ExtraFields> = {
+  data: T | undefined;
+} & ExtraFields &
+  Omit<SWRResponse, 'data'>;
+
+/**
+ * A utility hook to create a custom SWR hook with optional data transformation.
+ *
+ * @param fetcher - The function used to fetch data.
+ * @param swrKey - The caching key used by SWR.
+ * @param transform - An optional function to transform or enrich the fetched data.
+ * @returns HookResponse A custom hook tailored to the given configuration.
+ */
 const createFetchHook =
-  <T, DataKey extends string = 'data'>({
+  <T, FetcherReturnType, FetcherArgs extends unknown[], ExtraFields extends DataHolder<T>>({
     fetcher,
+    transform,
     swrKey,
-    dataKey = 'data' as DataKey,
-    defaultData,
-  }: CreateFetchHookParams<T, DataKey>) =>
-  () => {
-    const { data = defaultData, ...rest } = useSWR(swrKey, fetcher);
+  }: CreateFetchHookParams<T, FetcherReturnType, FetcherArgs, ExtraFields>) =>
+  (...args: FetcherArgs): HookResponse<T, ExtraFields> => {
+    const { data, ...rest } = useSWR([swrKey, args], ([, fetcherArgs]) => fetcher(...fetcherArgs));
+
+    const transformedData = transform ? transform(data) : ({ data } as ExtraFields);
+
     return {
-      [dataKey]: data,
       ...rest,
-    } as HookResponse<T, DataKey>;
+      ...transformedData,
+    };
   };
 
 export default createFetchHook;

No alert changes

Improved metrics

Total package byte prevSize

20285

19.16%

Lines of code

264

32%

No dependency changes