@firtoz/router-toolkit 0.1.5 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firtoz/router-toolkit",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "Type-safe React Router 7 framework mode helpers with enhanced fetching, form submission, and state management",
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from "./types/index";
+export * from "./useCachedFetch";
+export * from "./useDynamicSubmitter";
+export * from "./useDynamicSubmitter";
+export * from "./useFetcherStateChanged";

package/src/types/MaybeError.ts

@@ -0,0 +1,45 @@
+export type DefiniteError<TError = string> = {
+	success: false;
+	error: TError;
+};
+
+export type DefiniteSuccess<T = undefined> = {
+	success: true;
+} & (T extends undefined
+	? {
+			result?: T;
+		}
+	: {
+			result: T;
+		});
+
+export type MaybeError<T = undefined, TError = string> =
+	| DefiniteSuccess<T>
+	| DefiniteError<TError>;
+
+export type AssumeSuccess<T extends MaybeError<unknown>> = Exclude<
+	T,
+	undefined
+> extends MaybeError<infer U>
+	? U
+	: never;
+
+export const success = <T = undefined>(
+	...params: T extends undefined ? [] : [T]
+): DefiniteSuccess<T> => {
+	if (params.length === 0) {
+		return { success: true } as unknown as DefiniteSuccess<T>;
+	}
+
+	return {
+		success: true,
+		result: params[0],
+	} as unknown as DefiniteSuccess<T>;
+};
+
+export const fail = <TError = string>(error: TError): DefiniteError<TError> => {
+	return {
+		success: false,
+		error,
+	};
+};

package/src/types/RouteWithLoaderModule.ts

@@ -0,0 +1,7 @@
+import type { Func } from "./Func";
+import type { RegisterPages } from "./RegisterPages";
+
+export type RouteWithLoaderModule = {
+	file: keyof RegisterPages;
+	loader: Func;
+};

package/src/types/index.ts

@@ -0,0 +1,3 @@
+export * from "./HrefArgs";
+export * from "./MaybeError";
+export * from "./RoutePath";

package/src/useCachedFetch.ts

@@ -0,0 +1,75 @@
+import { useEffect, useMemo, useState } from "react";
+import { href, type useLoaderData } from "react-router";
+import type { HrefArgs } from "./types/HrefArgs";
+import type { RouteWithLoaderModule } from "./types/RouteWithLoaderModule";
+
+// Cache for the useCachedFetch hook (regular fetch, not useFetcher)
+const fetchCache = new Map<string, unknown>();
+
+// Hook that uses regular fetch instead of useFetcher to avoid route invalidation
+export const useCachedFetch = <TInfo extends RouteWithLoaderModule>(
+	path: TInfo["file"],
+	...args: TInfo["file"] extends "undefined"
+		? HrefArgs<"/">
+		: HrefArgs<TInfo["file"]>
+): {
+	data: ReturnType<typeof useLoaderData<TInfo["loader"]>> | undefined;
+	isLoading: boolean;
+	error: Error | undefined;
+} => {
+	// Generate URL using href, same as useDynamicFetcher
+	const url = useMemo(() => {
+		return href<typeof path>(path, ...args);
+	}, [path, args]);
+
+	// Use the generated URL as the cache key
+	const cacheKey = url;
+
+	// Local state
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState<Error | undefined>(undefined);
+	const [data, setData] = useState<
+		ReturnType<typeof useLoaderData<TInfo["loader"]>> | undefined
+	>(() =>
+		fetchCache.has(cacheKey)
+			? (fetchCache.get(cacheKey) as ReturnType<
+					typeof useLoaderData<TInfo["loader"]>
+				>)
+			: undefined,
+	);
+
+	// Auto-fetch on mount or when URL changes, if not in cache
+	useEffect(() => {
+		const fetchData = async () => {
+			// Skip fetch if data is already cached
+			if (fetchCache.has(cacheKey)) {
+				return;
+			}
+
+			setIsLoading(true);
+			setError(undefined);
+
+			try {
+				const response = await fetch(url);
+
+				if (!response.ok) {
+					throw new Error(`HTTP error! Status: ${response.status}`);
+				}
+
+				const result = await response.json();
+
+				// Update cache and state
+				fetchCache.set(cacheKey, result);
+				setData(result as ReturnType<typeof useLoaderData<TInfo["loader"]>>);
+			} catch (err) {
+				setError(err instanceof Error ? err : new Error(String(err)));
+			} finally {
+				setIsLoading(false);
+			}
+		};
+
+		fetchData();
+	}, [url, cacheKey]);
+
+	return { data, isLoading, error };
+};

package/src/useDynamicFetcher.ts

@@ -1,15 +1,9 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { href, useFetcher, type useLoaderData } from "react-router";
-import type { Func } from "./types/Func";
+import { useCallback, useMemo } from "react";
+import { href, useFetcher } from "react-router";
 import type { HrefArgs } from "./types/HrefArgs";
-import type { RegisterPages } from "./types/RegisterPages";
+import type { RouteWithLoaderModule } from "./types/RouteWithLoaderModule";
 
-type RouteModule = {
-	file: keyof RegisterPages;
-	loader: Func;
-};
-
-export const useDynamicFetcher = <TInfo extends RouteModule>(
+export const useDynamicFetcher = <TInfo extends RouteWithLoaderModule>(
 	path: TInfo["file"],
 	...args: TInfo["file"] extends "undefined"
 		? HrefArgs<"/">
@@ -47,75 +41,3 @@ export const useDynamicFetcher = <TInfo extends RouteModule>(
 		load,
 	};
 };
-
-// Cache for the useCachedFetch hook (regular fetch, not useFetcher)
-const fetchCache = new Map<string, unknown>();
-
-// Hook that uses regular fetch instead of useFetcher to avoid route invalidation
-export const useCachedFetch = <TInfo extends RouteModule>(
-	path: TInfo["file"],
-	...args: TInfo["file"] extends "undefined"
-		? HrefArgs<"/">
-		: HrefArgs<TInfo["file"]>
-): {
-	data: ReturnType<typeof useLoaderData<TInfo["loader"]>> | undefined;
-	isLoading: boolean;
-	error: Error | undefined;
-} => {
-	// Generate URL using href, same as useDynamicFetcher
-	const url = useMemo(() => {
-		// biome-ignore lint/suspicious/noExplicitAny: Complex conditional typing prevents TypeScript from inferring args when spreading
-		return href<typeof path>(path, ...(args as any));
-	}, [path, args]);
-
-	// Use the generated URL as the cache key
-	const cacheKey = url;
-
-	// Local state
-	const [isLoading, setIsLoading] = useState(false);
-	const [error, setError] = useState<Error | undefined>(undefined);
-	const [data, setData] = useState<
-		ReturnType<typeof useLoaderData<TInfo["loader"]>> | undefined
-	>(() =>
-		fetchCache.has(cacheKey)
-			? (fetchCache.get(cacheKey) as ReturnType<
-					typeof useLoaderData<TInfo["loader"]>
-				>)
-			: undefined,
-	);
-
-	// Auto-fetch on mount or when URL changes, if not in cache
-	useEffect(() => {
-		const fetchData = async () => {
-			// Skip fetch if data is already cached
-			if (fetchCache.has(cacheKey)) {
-				return;
-			}
-
-			setIsLoading(true);
-			setError(undefined);
-
-			try {
-				const response = await fetch(url);
-
-				if (!response.ok) {
-					throw new Error(`HTTP error! Status: ${response.status}`);
-				}
-
-				const result = await response.json();
-
-				// Update cache and state
-				fetchCache.set(cacheKey, result);
-				setData(result as ReturnType<typeof useLoaderData<TInfo["loader"]>>);
-			} catch (err) {
-				setError(err instanceof Error ? err : new Error(String(err)));
-			} finally {
-				setIsLoading(false);
-			}
-		};
-
-		fetchData();
-	}, [url, cacheKey]);
-
-	return { data, isLoading, error };
-};

package/src/useDynamicSubmitter.tsx

@@ -46,8 +46,7 @@ export const useDynamicSubmitter = <TInfo extends RouteModule>(
 	Form: SubmitForm;
 } => {
 	const url = useMemo(() => {
-		// biome-ignore lint/suspicious/noExplicitAny: We are sure the args are correct
-		return href<typeof path>(path, ...(args as any));
+		return href<typeof path>(path, ...args);
 	}, [path, args]);
 
 	const fetcher = useFetcher<TInfo["action"]>({