clear-react-router 1.7.7 → 1.7.9

package/README.md

@@ -64,6 +64,8 @@ Normalizes route configuration. Handles wildcard `*` routes, extracts dynamic pa
 | `animationDuration` | `number` | `optional` | Animation duration in milliseconds (browser default is used if not set) |
 | `defaultLoaderFallback` | `ReactElement \| () => ReactElement` | `optional` | Default loading fallback for every route loader |
 | `defaultErrorElement` | `ReactElement \| () => ReactElement` | `optional` | Default error fallback for every route |
+| `beforeLoad` | `({ params, context, redirect, setContext }) => Promise<unknown> \| undefined \| void` | `undefined` | Runs before every navigation. Useful for authentication, analytics, or updating shared context.            |
+| `afterLoad`  | `({ params, context, setContext }) => Promise<void>`  | `undefined` | Runs after every successful navigation. Useful for analytics, page tracking, or other global side effects. |
 | `spinner` | `boolean \| undefined` | `true` | Show a small spinner in the corner while loading data (only when `isAnimated` is enabled) |
 | `preserveScroll` | `boolean \| undefined` | `true` | Save and restore scroll position when navigating between pages |
 | `showFallbackOnAnimation` | `boolean \| undefined` | `false` | Show `loaderFallback` even when `isAnimated` is `true` (instead of spinner) |
@@ -72,6 +74,8 @@ Normalizes route configuration. Handles wildcard `*` routes, extracts dynamic pa
 | `context` | `object` | `{}` | Initial context (user, theme, etc.) |
 | `errorBoundary` | `ComponentType<{ children: ReactNode }>` | `undefined` | Custom error boundary component for catching render errors in route components |
 
+> **Note:** Global lifecycle hooks wrap every route navigation. The global beforeLoad runs **before** the route-specific beforeLoad, while the global afterLoad runs **after** the route-specific afterLoad.
+
 ```tsx
 <div>
   <Navbar />

package/dist/components/Router.d.ts

@@ -1,2 +1,2 @@
 import { RouterProps } from '../types/global';
-export declare const Router: ({ routes, animationDuration, isAnimated, spinner, preserveScroll, showFallbackOnAnimation, prefetch, hoverPrefetchDelay, errorBoundary: ErrorBoundary, context: initialContext, defaultLoaderFallback, defaultErrorElement, }: RouterProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Router: ({ routes, beforeLoad, afterLoad, animationDuration, isAnimated, spinner, preserveScroll, showFallbackOnAnimation, prefetch, hoverPrefetchDelay, errorBoundary: ErrorBoundary, context: initialContext, defaultLoaderFallback, defaultErrorElement, }: RouterProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/config/routerConfig.d.ts

@@ -1,10 +1,12 @@
-import { RouterProps } from '../types/global';
+import { ClientRouteItem, RouterProps } from '../types/global';
 declare class RouterConfig {
     routes: RouterProps['routes'];
     prefetch: RouterProps['prefetch'];
     isAnimated: RouterProps['isAnimated'];
     showFallbackOnAnimation: RouterProps['showFallbackOnAnimation'];
     hoverPrefetchDelay: number;
+    beforeLoad?: ClientRouteItem['beforeLoad'];
+    afterLoad?: ClientRouteItem['afterLoad'];
     configure(config: Partial<RouterConfig>): void;
 }
 export declare const routerConfig: RouterConfig;

package/dist/index.js

@@ -210,6 +210,7 @@ var parseWindowLocation = (location) => ({
 	search: location.search
 });
 var comparePaths = (el, pathname) => {
+	if (!el.params?.length) return el.path.replaceAll("/", "") === pathname.replaceAll("/", "");
 	const splitElementPath = el.path.split("/").filter(Boolean);
 	const paramsLength = el.params ? Object.keys(el.params).length : 0;
 	const splitPathname = pathname.split("/").filter(Boolean);
@@ -271,8 +272,8 @@ var revalidateCache = ({ routeItem, pathname }) => {
 	return promise;
 };
 //#endregion
-//#region utils/navigationExecutor.ts
-var navigationExecutor = (nextLocation, routeItem) => {
+//#region utils/commitState.ts
+var commitState = (nextLocation, routeItem) => {
 	routeItemDataState.setState({
 		routeItem,
 		location: nextLocation
@@ -294,6 +295,8 @@ var RouterConfig = class {
 		_defineProperty(this, "isAnimated", false);
 		_defineProperty(this, "showFallbackOnAnimation", false);
 		_defineProperty(this, "hoverPrefetchDelay", 150);
+		_defineProperty(this, "beforeLoad", void 0);
+		_defineProperty(this, "afterLoad", void 0);
 	}
 	configure(config) {
 		Object.assign(this, config);
@@ -301,17 +304,17 @@ var RouterConfig = class {
 };
 var routerConfig = new RouterConfig();
 //#endregion
-//#region utils/transitionedNavigation.ts
-var transitionedNavigation = (nextLocation, routeItem) => {
+//#region utils/commitNavigation.ts
+var commitNavigation = (nextLocation, routeItem) => {
 	const { isAnimated } = routerConfig;
 	if (!isAnimated || !prevPathnameRef.value) {
-		navigationExecutor(nextLocation, routeItem);
+		commitState(nextLocation, routeItem);
 		return;
 	}
 	try {
-		document.startViewTransition(() => navigationExecutor(nextLocation, routeItem));
+		document.startViewTransition(() => commitState(nextLocation, routeItem));
 	} catch {
-		navigationExecutor(nextLocation, routeItem);
+		commitState(nextLocation, routeItem);
 	}
 };
 var findRoute = (pathname, includeAll) => {
@@ -321,25 +324,26 @@ var findRoute = (pathname, includeAll) => {
 //#endregion
 //#region runtime/navigate.ts
 var navigationSeq = 0;
-var navigate = async (nextLocation) => {
-	navigationSeq = navigationSeq + 1;
-	const seq = navigationSeq;
+var routeResolve = (location) => {
 	loaderStateRef.set(emptyLoaderState);
-	const { isAnimated, showFallbackOnAnimation: showFallback } = routerConfig;
-	const nextItem = findRoute(nextLocation.pathname, true);
-	const params = getParamsObject({
-		params: nextItem?.params,
-		pathname: nextLocation.pathname
-	});
-	const { context, setContext } = getContext();
-	if (nextItem?.beforeLoad) {
-		const redirect = async (location) => await navigate(typeof location === "string" ? { pathname: location } : location);
+	const nextItem = findRoute(location.pathname, true);
+	return {
+		nextItem,
+		params: getParamsObject({
+			params: nextItem?.params,
+			pathname: location.pathname
+		})
+	};
+};
+var beforeLoad = async (routeItem, params) => {
+	const { beforeLoad } = routerConfig;
+	const runBeforeLoad = async (loaderFn) => {
+		const redirect = async (redirected) => await navigate(typeof redirected === "string" ? { pathname: redirected } : redirected);
 		try {
-			await nextItem.beforeLoad({
-				context,
+			await loaderFn({
+				...getContext(),
 				redirect,
-				params,
-				setContext
+				params
 			});
 			loaderStateRef.set((prev) => ({
 				...prev,
@@ -350,10 +354,13 @@ var navigate = async (nextLocation) => {
 				...prev,
 				beforeLoadError: error
 			}));
-			return transitionedNavigation(nextLocation, nextItem);
 		}
-	}
-	if (seq !== navigationSeq) return;
+	};
+	if (beforeLoad) await runBeforeLoad(beforeLoad);
+	if (routeItem?.beforeLoad) await runBeforeLoad(routeItem?.beforeLoad);
+};
+var prepareNavigation = (routeItem, location) => {
+	const { isAnimated, showFallbackOnAnimation: showFallback } = routerConfig;
 	scrollMapState.setState((prevState) => {
 		const scrollPosition = document.scrollingElement?.scrollTop ?? 0;
 		if (!scrollPosition || prevState[prevPathnameRef.value] === scrollPosition) return prevState;
@@ -363,24 +370,41 @@ var navigate = async (nextLocation) => {
 		};
 	});
 	loaderFallbackState.setState(isCacheItemFresh({
-		routeItem: nextItem,
-		pathname: nextLocation.pathname
-	}) || isAnimated && !showFallback ? void 0 : nextItem?.loaderFallback);
-	if (nextItem?.loader) {
-		isLoadingState.setState(true);
-		await revalidateCache({
-			routeItem: nextItem,
-			pathname: nextLocation.pathname
-		});
-	}
-	if (seq !== navigationSeq) return;
-	transitionedNavigation(nextLocation, nextItem);
-	if (nextItem?.afterLoad) await nextItem.afterLoad({
-		context,
-		params,
-		setContext
+		routeItem,
+		pathname: location.pathname
+	}) || isAnimated && !showFallback ? void 0 : routeItem?.loaderFallback);
+};
+var loader = async (routeItem, location) => {
+	if (!routeItem?.loader) return;
+	isLoadingState.setState(true);
+	await revalidateCache({
+		routeItem,
+		pathname: location.pathname
 	});
 };
+var afterLoad = async (routeItem, params) => {
+	const { afterLoad } = routerConfig;
+	if (routeItem?.afterLoad) await routeItem.afterLoad({
+		...getContext(),
+		params
+	});
+	if (afterLoad) await afterLoad({
+		...getContext(),
+		params
+	});
+};
+var navigate = async (nextLocation) => {
+	navigationSeq = navigationSeq + 1;
+	const seq = navigationSeq;
+	const { nextItem, params } = routeResolve(nextLocation);
+	await beforeLoad(nextItem, params);
+	if (seq !== navigationSeq) return;
+	prepareNavigation(nextItem, nextLocation);
+	await loader(nextItem, nextLocation);
+	if (seq !== navigationSeq) return;
+	commitNavigation(nextLocation, nextItem);
+	await afterLoad(nextItem, params);
+};
 //#endregion
 //#region hooks/useNavigation.ts
 var useNavigation = () => {
@@ -490,7 +514,7 @@ var renderElement = (Component) => {
 //#endregion
 //#region components/Router.tsx
 var EmptyBoundary = ({ children }) => children;
-var Router = ({ routes, animationDuration, isAnimated = false, spinner = true, preserveScroll = true, showFallbackOnAnimation = false, prefetch = "hover", hoverPrefetchDelay = 150, errorBoundary: ErrorBoundary = EmptyBoundary, context: initialContext, defaultLoaderFallback, defaultErrorElement }) => {
+var Router = ({ routes, beforeLoad, afterLoad, animationDuration, isAnimated = false, spinner = true, preserveScroll = true, showFallbackOnAnimation = false, prefetch = "hover", hoverPrefetchDelay = 150, errorBoundary: ErrorBoundary = EmptyBoundary, context: initialContext, defaultLoaderFallback, defaultErrorElement }) => {
 	const [isLoading] = useIsLoading();
 	const [currentLoaderFallback] = useLoaderFallback();
 	const [routeItemData] = useRouteItemData();
@@ -501,7 +525,9 @@ var Router = ({ routes, animationDuration, isAnimated = false, spinner = true, p
 		isAnimated,
 		prefetch,
 		hoverPrefetchDelay,
-		showFallbackOnAnimation
+		showFallbackOnAnimation,
+		beforeLoad,
+		afterLoad
 	});
 	useApplyCustomAnimation(animationDuration);
 	useSetInitialContext(initialContext);

package/dist/types/global.d.ts

@@ -3,6 +3,17 @@ export type LazyComponent = () => Promise<{
     default: ComponentType<unknown>;
 }>;
 export type RenderElement = (() => ReactElement) | ReactElement;
+export type BeforeLoad = (arg: {
+    context: Record<string, unknown>;
+    redirect: (arg: Location | string) => Promise<void>;
+    params: Record<string, string>;
+    setContext: Dispatch<SetStateAction<Record<string, unknown>>>;
+}) => Promise<unknown> | undefined | void;
+export type AfterLoad = (arg: {
+    context: Record<string, unknown>;
+    params: Record<string, string>;
+    setContext: Dispatch<SetStateAction<Record<string, unknown>>>;
+}) => Promise<void>;
 export type ClientRouteItem = {
     path: string;
     element: RenderElement | LazyComponent;
@@ -16,12 +27,7 @@ export type ClientRouteItem = {
     fallback?: RenderElement;
     children?: ClientRouteItem[];
     staleTime?: number;
-    beforeLoad?: (arg: {
-        context: Record<string, unknown>;
-        redirect: (arg: Location | string) => Promise<void>;
-        params: Record<string, string>;
-        setContext: Dispatch<SetStateAction<Record<string, unknown>>>;
-    }) => Promise<unknown> | undefined | void;
+    beforeLoad?: BeforeLoad;
     afterLoad?: (arg: {
         context: Record<string, unknown>;
         params: Record<string, string>;
@@ -79,5 +85,7 @@ export type RouterProps = {
     errorBoundary?: ComponentType<{
         children: ReactNode;
     }>;
+    beforeLoad?: ClientRouteItem['beforeLoad'];
+    afterLoad?: ClientRouteItem['afterLoad'];
     context?: Record<string, unknown>;
 };

package/dist/utils/commitNavigation.d.ts

@@ -0,0 +1,2 @@
+import { Location, RouteItem } from '../types/global';
+export declare const commitNavigation: (nextLocation: Location, routeItem: RouteItem | undefined) => void;

package/dist/utils/commitState.d.ts

@@ -0,0 +1,2 @@
+import { Location, RouteItem } from '../types/global';
+export declare const commitState: (nextLocation: Location, routeItem: RouteItem | undefined) => void;

package/package.json

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

package/dist/utils/navigationExecutor.d.ts

@@ -1,2 +0,0 @@
-import { Location, RouteItem } from '../types/global';
-export declare const navigationExecutor: (nextLocation: Location, routeItem: RouteItem | undefined) => void;

package/dist/utils/transitionedNavigation.d.ts

@@ -1,2 +0,0 @@
-import { Location, RouteItem } from '../types/global';
-export declare const transitionedNavigation: (nextLocation: Location, routeItem: RouteItem | undefined) => void;