clear-react-router 1.3.2 → 1.3.3

package/README.md

@@ -26,9 +26,9 @@ Normalizes route configuration. Handles wildcard `*` routes, extracts dynamic pa
 |----------|------|-------------|
 | `path` | `string` | Route path, e.g., `/user/:userId` |
 | `element` | `ReactElement \| () => ReactElement \| LazyComponent` | Component to render |
-| `loader` | `({ params, context }) => Promise<unknown>` | Fetch data using route params and context |
-| `beforeLoad` | `({ params, context, redirect }) => Promise<unknown> \| undefined` | Auth checks and redirects. `redirect` is provided by the router |
-| `afterLoad` | `({ params, context }) => Promise<void>` | Analytics, side effects after data is loaded |
+| `loader` | `({ params, context, setContext }) => Promise<unknown>` | Fetch data using route params and context. Can update context via `setContext` |
+| `beforeLoad` | `({ params, context, redirect, setContext }) => Promise<unknown> \| undefined \| void` | Auth checks and redirects. Can update context via `setContext`. `redirect` is provided by the router |
+| `afterLoad` | `({ params, context, setContext }) => Promise<void>` | Analytics, side effects after data is loaded. Can update context via `setContext` |
 | `fallback` | `ReactElement \| () => ReactElement` | Loading fallback (for lazy loading) |
 | `loaderFallback` | `ReactElement \| () => ReactElement` | Loading fallback (for loader) |
 | `errorElement` | `ReactElement \| () => ReactElement` | Error fallback |
@@ -95,7 +95,7 @@ Function provided to `beforeLoad` for programmatic redirection.
 **Type:** `(arg: Location | string) => Promise<void>`
 
 ```
-import type { Location } from 'clear-react-router';
+import type { createRouter } from 'clear-react-router';
 
 const routes = createRouter([
   {
@@ -107,8 +107,6 @@ const routes = createRouter([
   },
 ]);
 
-or
-
 const routes = createRouter([
   {
     path: '/dashboard',
@@ -118,6 +116,21 @@ const routes = createRouter([
     },
   },
 ]);
+
+const routes = createRouter([
+  {
+    path: '/user/:userId',
+    loader: async ({ params, context, setContext }) => {
+      const user = await fetchUser(params.userId);
+      setContext({ ...context, currentUser: user });
+      return { user };
+    },
+    beforeLoad: async ({ context, setContext, redirect }) => {
+      if (!context.token) return redirect('/login');
+      setContext({ ...context, lastVisit: Date.now() });
+    },
+  }
+]);
  
 ```
 

package/dist/hooks/useHandleNavigation.d.ts

@@ -1,3 +1,4 @@
+import { type Dispatch, type SetStateAction } from 'react';
 import type { BlockerState, Location, RevalidateCacheArgs, RouteItem, UpdateBlockedRouteProps } from '../types/global';
 type UseHandleNavigation = {
     routeList: RouteItem[];
@@ -5,8 +6,9 @@ type UseHandleNavigation = {
     context: Record<string, unknown>;
     revalidateCache(arg: RevalidateCacheArgs): Promise<void>;
     isAnimated: boolean;
+    setContext: Dispatch<SetStateAction<Record<string, unknown>>>;
 };
-export declare const useHandleNavigation: ({ setLocation, routeList, context, revalidateCache, isAnimated, }: UseHandleNavigation) => {
+export declare const useHandleNavigation: ({ setLocation, routeList, context, revalidateCache, isAnimated, setContext, }: UseHandleNavigation) => {
     blockerState: BlockerState;
     updateLocation: (nextLocation: Location) => Promise<void>;
     updateBlockedRoute: ({ type, payload }: UpdateBlockedRouteProps) => void;

package/dist/hooks/useLoader.d.ts

@@ -1,9 +1,11 @@
+import { type Dispatch, type SetStateAction } from 'react';
 import type { RevalidateCacheArgs, RouteItem } from '../types/global';
 type UseLoaderParams = {
     routeList: RouteItem[];
     context: Record<string, unknown>;
+    setContext: Dispatch<SetStateAction<Record<string, unknown>>>;
 };
-export declare const useLoader: ({ routeList, context }: UseLoaderParams) => {
+export declare const useLoader: ({ routeList, context, setContext }: UseLoaderParams) => {
     loaderCache: unknown;
     loaderError: boolean;
     prefetchLoader: (pathname: string) => Promise<void>;

package/dist/index.js

@@ -77,6 +77,15 @@ var Provider = ({ children, setContext, context, updateBlockedRoute, updateLocat
 	});
 };
 //#endregion
+//#region hooks/useLatest.ts
+var useLatest = (value) => {
+	const ref = useRef(value);
+	useEffect(() => {
+		ref.current = value;
+	}, [value]);
+	return ref;
+};
+//#endregion
 //#region utils/createLazyComponent.tsx
 var createLazyComponent = (importFn, fallback) => {
 	const LazyComp = lazy(() => importFn().then((module) => ({ default: module.default || module })));
@@ -128,17 +137,8 @@ var comparePaths = (el, pathname) => {
 	return splitElementPath.every((item, index) => item === splitPathname[index + (index ? 1 : 0)]) && splitPathname.length === splitElementPath.length + paramsLength;
 };
 //#endregion
-//#region hooks/useLatest.ts
-var useLatest = (value) => {
-	const ref = useRef(value);
-	useEffect(() => {
-		ref.current = value;
-	}, [value]);
-	return ref;
-};
-//#endregion
 //#region hooks/useHandleNavigation.ts
-var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, isAnimated }) => {
+var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, isAnimated, setContext }) => {
 	const [blockedRoute, setBlockedRoute] = useState({
 		from: "",
 		to: ""
@@ -174,7 +174,8 @@ var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, i
 			await nextItem.beforeLoad({
 				context,
 				redirect,
-				params
+				params,
+				setContext
 			});
 		} catch {
 			setBeforeLoadError(true);
@@ -199,14 +200,16 @@ var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, i
 		setBeforeLoadError(false);
 		if (nextItem?.afterLoad) await nextItem.afterLoad({
 			context,
-			params
+			params,
+			setContext
 		});
 	}, [
 		context,
 		revalidateCache,
 		routeList,
 		transitionedNavigation,
-		isAnimated
+		isAnimated,
+		setContext
 	]);
 	const setNextLocationRef = useLatest(navigationHandler);
 	const updateBlockedRoute = useCallback(({ type, payload = "" }) => setBlockedRoute((prevState) => {
@@ -265,7 +268,7 @@ var useHandleNavigation = ({ setLocation, routeList, context, revalidateCache, i
 };
 //#endregion
 //#region hooks/useLoader.ts
-var useLoader = ({ routeList, context }) => {
+var useLoader = ({ routeList, context, setContext }) => {
 	const [loaderCache, setLoaderCache] = useState();
 	const [loaderError, setLoaderError] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
@@ -301,7 +304,8 @@ var useLoader = ({ routeList, context }) => {
 			});
 			const result = await routeItem?.loader({
 				params,
-				context
+				context,
+				setContext
 			});
 			cacheTimestampsRef.current = {
 				...cacheTimestampsRef.current,
@@ -317,7 +321,11 @@ var useLoader = ({ routeList, context }) => {
 		} finally {
 			if (isCurrentRoute) setIsLoading(false);
 		}
-	}, [context, isCacheItemFresh]);
+	}, [
+		context,
+		isCacheItemFresh,
+		setContext
+	]);
 	return {
 		loaderCache,
 		loaderError,
@@ -377,12 +385,14 @@ var RouterProvider = ({ children, routeList, context: initialContext = {}, isAni
 	useApplyCustomAnimation(animationDuration);
 	const { loaderError, loaderCache, prefetchLoader, revalidateCache, isLoading } = useLoader({
 		routeList,
-		context
+		context,
+		setContext
 	});
 	const { blockerState, updateLocation, updateBlockedRoute, beforeLoadError } = useHandleNavigation({
 		setLocation,
 		routeList,
 		context,
+		setContext,
 		revalidateCache,
 		isAnimated
 	});

package/dist/types/global.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentType, ReactElement } from 'react';
+import type { ComponentType, Dispatch, ReactElement, SetStateAction } from 'react';
 export type LazyComponent = () => Promise<{
     default: ComponentType<unknown>;
 }>;
@@ -8,6 +8,7 @@ export type ClientRouteItem = {
     loader?(arg: {
         params: Record<string, string>;
         context: Record<string, unknown>;
+        setContext: Dispatch<SetStateAction<Record<string, unknown>>>;
     }): Promise<unknown>;
     loaderFallback?: (() => ReactElement) | ReactElement;
     errorElement?: (() => ReactElement) | ReactElement;
@@ -18,10 +19,12 @@ export type ClientRouteItem = {
         context: Record<string, unknown>;
         redirect: (arg: Location | string) => Promise<void>;
         params: Record<string, string>;
-    }) => Promise<unknown> | undefined;
+        setContext: Dispatch<SetStateAction<Record<string, unknown>>>;
+    }) => Promise<unknown> | undefined | void;
     afterLoad?: (arg: {
         context: Record<string, unknown>;
         params: Record<string, string>;
+        setContext: Dispatch<SetStateAction<Record<string, unknown>>>;
     }) => Promise<void>;
 };
 export type RouteItem = ClientRouteItem & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clear-react-router",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "A lightweight, type-safe routing library for React applications",
   "author": "Andrew Bubnov",
   "scripts": {