clear-react-router 1.8.3 → 1.8.5

package/README.md

@@ -70,7 +70,7 @@ It provides first-class support for:
 
 ### `createRouter(routes)`
 
-Normalizes route configuration. Handles wildcard `*` routes, extracts dynamic params, builds nested paths.
+Normalizes route configuration. Extracts dynamic params, builds nested paths.
 
 | Property | Type | Description |
 |----------|------|-------------|
@@ -88,14 +88,26 @@ Normalizes route configuration. Handles wildcard `*` routes, extracts dynamic pa
 
 ### `Link`
 
-Component for client-side navigation with prefetch support.
+Component for client-side navigation with prefetch support, active state detection, and pending state styling.
 
-| Prop | Type | Default |
-|------|------|---------|
-| `to` | `string` | required |
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `to` | `string` | required | Target path |
 | `prefetch` | `'hover' \| 'render' \| 'viewport' \| 'none'` | `Router` config | Override the global prefetch strategy |
 | `hoverPrefetchDelay` | `number` | `Router` config | Override the global hover delay |
-| `children` | `ReactElement` | required | Content to render inside the link |
+| `children` | `ReactNode` | required | Content to render inside the link |
+| `className` | `string \| ({ isActive, isPending }) => string` | `undefined` | CSS class name(s). Can be a function for dynamic styling |
+| `style` | `CSSProperties \| ({ isActive, isPending }) => CSSProperties` | `undefined` | Inline styles. Can be a function for dynamic styling |
+| `activeClassName` | `string` optional | `'active-link'` | Class name applied when the link matches the current URL |
+| `pendingClassName` | `string` optional | `'pending-link'` | Class name applied when the link's target is loading |
+| `onClick` | `() => void` | `undefined` | Callback fired before navigation |
+
+**State values:**
+
+| State | Type | Description |
+|-------|------|-------------|
+| `isActive` | `boolean` | `true` when the link's `to` matches the current URL |
+| `isPending` | `boolean` | `true` when the target route is currently loading (loader is running) |
 
 ### Prefetch Strategies
 
@@ -123,6 +135,21 @@ import { Router, Link } from 'clear-react-router';
 <Link to="/admin" prefetch="none">
   Admin Panel
 </Link>
+
+// With custom active/pending classes
+<Link to="/settings" activeClassName="active-nav-link" pendingClassName="loading-nav-link">
+  Settings
+</Link>
+
+// With dynamic className
+<Link to="/dashboard" className={({ isActive, isPending }) => isActive ? 'text-blue-600' : isPending ? 'text-gray-400' : 'text-gray-600'}>
+  Dashboard
+</Link>
+
+// With dynamic style
+<Link to="/profile" style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}>
+  Profile
+</Link>
 ```
 **Important**: prefetch="render" should be used sparingly, as it preloads data immediately when the link is rendered, which may cause unnecessary network requests.
 

package/dist/components/Link.d.ts

@@ -1,13 +1,21 @@
-import { type ReactElement, type MouseEvent, type CSSProperties } from 'react';
+import { type CSSProperties, ReactNode } from 'react';
 import { RouterProps } from '../types';
 type LinkProps = {
     to: string;
-    children: ReactElement<{
-        onClick: (e: MouseEvent) => void;
-        style: CSSProperties;
-    }>;
+    children: ReactNode;
     prefetch?: RouterProps['prefetch'];
     hoverPrefetchDelay?: number;
+    style?: CSSProperties | (({ isActive }: {
+        isActive: boolean;
+        isPending: boolean;
+    }) => CSSProperties);
+    className?: string | (({ isActive }: {
+        isActive: boolean;
+        isPending: boolean;
+    }) => string);
+    activeClassName?: string;
+    pendingClassName?: string;
+    onClick?(): void;
 };
-export declare const Link: ({ children, to, prefetch: prefetchLink, hoverPrefetchDelay }: LinkProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Link: ({ children, to, prefetch: prefetchLink, hoverPrefetchDelay, className, style, onClick, activeClassName, pendingClassName, }: LinkProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/hooks/useIsRoutePending.d.ts

@@ -0,0 +1 @@
+export declare const useIsRoutePending: (routePath: string) => boolean;

package/dist/index.js

@@ -174,62 +174,45 @@ var createLazyComponent = (importFn, fallback) => {
 //#endregion
 //#region utils/utils.ts
 var isLazy = (el) => typeof el.element === "function" && el.element.toString().includes("import(");
-var parseClientRouteItem = (el, parentParams = [], parentPath = "") => {
-	const segments = el.path.split("/").filter(Boolean);
-	const staticSegments = [];
-	const currentParams = [...parentParams];
-	let lastStaticSegment = "";
-	for (const segment of segments) if (segment.startsWith(":")) {
-		if (!lastStaticSegment) throw new Error(`Route "${el.path}" cannot start with a parameter.`);
-		currentParams.push({
-			key: lastStaticSegment,
-			value: segment.slice(1)
-		});
-	} else {
-		lastStaticSegment = segment;
-		staticSegments.push(segment);
-	}
-	const path = `${parentPath}/${staticSegments.join("/")}`.replace(/\/+/g, "/");
+var parseClientRouteItem = (el, parentPattern = "") => {
+	const pattern = `${parentPattern}/${el.path}`.replace(/\/+/g, "/");
 	const resolvedElement = isLazy(el) ? createLazyComponent(el.element, el.fallback) : el.element;
 	return [{
 		...el,
-		path,
-		params: currentParams,
+		pattern,
 		element: resolvedElement
-	}, ...el.children?.flatMap((child) => parseClientRouteItem(child, currentParams, path)) ?? []];
+	}, ...el.children?.flatMap((child) => parseClientRouteItem(child, pattern)) ?? []];
 };
-var createRouter = (clientList) => clientList.flatMap((el) => parseClientRouteItem(el, []));
-var getParamsObject = ({ params, pathname }) => {
-	if (!params) return {};
-	const split = pathname.split("/");
-	return (params || []).map((el) => ({
-		index: split.findIndex((item) => item === el.key),
-		value: el.value
-	})).reduce((acc, cur) => ({
-		...acc,
-		[cur.value]: split[cur.index + 1]
-	}), {});
+var createRouter = (clientList) => clientList.flatMap((el) => parseClientRouteItem(el));
+var getParamsObject = (nextItem, nextPathname) => {
+	const { routeItem: stateItem, location: { pathname: statePathname } } = router.state.routeItemDataState.getState();
+	const routeItem = nextItem || stateItem;
+	const pathname = nextPathname || statePathname;
+	if (!routeItem) return {};
+	const pathnameSegments = pathname.split("/");
+	return routeItem.pattern.split("/").reduce((acc, segment, index) => {
+		if (segment.startsWith(":")) acc[segment.slice(1)] = pathnameSegments[index];
+		return acc;
+	}, {});
 };
 var parseWindowLocation = (location) => ({
 	pathname: location.pathname,
 	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);
-	return splitElementPath.every((item, index) => item === splitPathname[2 * index]) && splitPathname.length === splitElementPath.length + paramsLength;
+var comparePaths = (route, pathname) => {
+	const pattern = route.pattern.split("/").filter(Boolean);
+	const current = pathname.split("/").filter(Boolean);
+	return pattern.length === current.length ? pattern.every((segment, index) => segment.startsWith(":") || segment === current[index]) : false;
 };
 var findRoute = (pathname, includeAll) => {
-	if (includeAll) return routerConfig.routes.find((el) => el.path === "/*" || comparePaths(el, pathname));
+	if (includeAll) return routerConfig.routes.find((el) => el.path === "*" || comparePaths(el, pathname));
 	return routerConfig.routes.find((el) => comparePaths(el, pathname));
 };
 //#endregion
 //#region runtime/navigate.ts
 var navigationSeq = 0;
 var createNavigate = (routerState, revalidateCache) => {
-	const { loaderStateRef, scrollMapState, prevPathnameRef, loaderFallbackState, isLoadingState, contextState, timestampMap } = routerState;
+	const { loaderStateRef, scrollMapState, prevPathnameRef, loaderFallbackState, isLoadingState, contextState, timestampMap, pendingPathRef } = routerState;
 	const commitNavigation = createCommitNavigation(createCommitState(routerState), prevPathnameRef);
 	const isCacheItemFresh = createIsCacheItemFresh(timestampMap);
 	const getContext = () => ({
@@ -241,10 +224,7 @@ var createNavigate = (routerState, revalidateCache) => {
 		const nextItem = findRoute(location.pathname, true);
 		return {
 			nextItem,
-			params: getParamsObject({
-				params: nextItem?.params,
-				pathname: location.pathname
-			})
+			params: getParamsObject(nextItem, location.pathname)
 		};
 	};
 	const beforeLoad = async (routeItem, params) => {
@@ -289,10 +269,12 @@ var createNavigate = (routerState, revalidateCache) => {
 	const loader = async (routeItem, location) => {
 		if (!routeItem?.loader) return;
 		isLoadingState.setState(true);
+		pendingPathRef.set(location.pathname);
 		await revalidateCache({
 			routeItem,
 			pathname: location.pathname
 		});
+		pendingPathRef.set("");
 	};
 	const afterLoad = async (routeItem, params) => {
 		const { afterLoad } = routerConfig;
@@ -326,10 +308,7 @@ var createInvalidate = ({ routeItemDataState, loaderStateRef, timestampMap, curr
 	const invalidatePath = async (routeItem, pathname, options) => {
 		const routePathname = routeItemDataState.getState().location.pathname;
 		timestampMap.delete(pathname);
-		const params = getParamsObject({
-			params: routeItem?.params,
-			pathname
-		});
+		const params = getParamsObject();
 		try {
 			if (routeItem?.beforeLoad && options?.withBeforeLoad) {
 				const context = contextState.getState();
@@ -406,10 +385,10 @@ var getRetry = (routeItem) => {
 };
 var sleep = async (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 var createRevalidateCache = (routerState) => {
+	const { loaderStateRef, timestampMap, contextState } = routerState;
 	const revalidateCache = async ({ routeItem, pathname }, retried = 0) => {
 		if (!routeItem?.loader) return;
-		const isCacheItemFresh = createIsCacheItemFresh(routerState.timestampMap);
-		const { loaderStateRef, timestampMap, contextState } = routerState;
+		const isCacheItemFresh = createIsCacheItemFresh(timestampMap);
 		if (loadingPromises.has(pathname)) return loadingPromises.get(pathname);
 		if (isCacheItemFresh({
 			routeItem,
@@ -423,10 +402,7 @@ var createRevalidateCache = (routerState) => {
 			try {
 				const context = contextState.getState();
 				const setContext = contextState.setState;
-				const params = getParamsObject({
-					params: routeItem.params,
-					pathname
-				});
+				const params = getParamsObject(routeItem, pathname);
 				const result = await routeItem?.loader({
 					params,
 					context,
@@ -497,6 +473,7 @@ var createRouterInstance = () => {
 		}),
 		loaderStateRef: new Cell(emptyLoaderState),
 		prevPathnameRef: new Cell(""),
+		pendingPathRef: new Cell(""),
 		timestampMap: /* @__PURE__ */ new Map()
 	};
 	const revalidateCache = createRevalidateCache(routerState);
@@ -504,13 +481,10 @@ var createRouterInstance = () => {
 	const invalidate = createInvalidate(routerState, revalidateCache);
 	const prefetch = createPrefetch(revalidateCache);
 	const useGetAction = (actionKey) => {
-		const { routeItem, location } = routerState.routeItemDataState.getState();
+		const { routeItem } = routerState.routeItemDataState.getState();
 		const context = routerState.contextState.getState();
 		const setContext = routerState.contextState.setState;
-		const params = getParamsObject({
-			params: routeItem?.params,
-			pathname: location.pathname
-		});
+		const params = getParamsObject();
 		if (!routeItem) throw new Error("Route not found");
 		if (!routeItem.actions) throw new Error("Route action creator not found");
 		const action = routeItem.actions({
@@ -534,7 +508,8 @@ var createRouterInstance = () => {
 			scrollMapState: routerState.scrollMapState,
 			contextState: routerState.contextState,
 			blockedRouteState: routerState.blockedRouteState,
-			prevPathnameRef: routerState.prevPathnameRef
+			prevPathnameRef: routerState.prevPathnameRef,
+			pendingPathRef: routerState.pendingPathRef
 		},
 		runtime: {
 			navigate,
@@ -549,13 +524,7 @@ var createRouterInstance = () => {
 			useCurrentLoaderState: () => useGlobalState(routerState.currentLoaderState),
 			useScrollMap: () => useGlobalState(routerState.scrollMapState),
 			useContextState: () => useGlobalState(routerState.contextState),
-			useParams: () => {
-				const routeItemData = routerState.routeItemDataState.getState();
-				return getParamsObject({
-					params: routeItemData.routeItem?.params,
-					pathname: routeItemData.location.pathname
-				});
-			},
+			useParams: () => getParamsObject(),
 			useNavigate: () => {
 				const { blockedRouteState } = routerState;
 				const { location } = routerState.routeItemDataState.getState();
@@ -746,17 +715,26 @@ var Router = ({ routes, beforeLoad, afterLoad, animationDuration, isAnimated = f
 	});
 };
 //#endregion
+//#region hooks/useIsRoutePending.ts
+var useIsRoutePending = (routePath) => {
+	const { hooks: { useIsLoading }, state: { pendingPathRef } } = router;
+	const [isPending] = useIsLoading();
+	return isPending && pendingPathRef.value === routePath;
+};
+//#endregion
 //#region hooks/useNavigate.ts
 var useNavigate = router.hooks.useNavigate;
 //#endregion
 //#region components/Link.tsx
-var Link = ({ children, to, prefetch: prefetchLink, hoverPrefetchDelay }) => {
-	const { prefetch: configPrefetch, hoverPrefetchDelay: configPrefetchDelay } = routerConfig;
-	const prefetch = prefetchLink || configPrefetch;
-	const prefetchDelay = hoverPrefetchDelay ?? configPrefetchDelay;
+var Link = ({ children, to, prefetch: prefetchLink, hoverPrefetchDelay, className, style, onClick, activeClassName = "active-link", pendingClassName = "pending-link" }) => {
+	const isPending = useIsRoutePending(to);
+	const { pathname } = useLocation();
 	const navigate = useNavigate();
 	const timeout = useRef(0);
 	const ref = useRef(null);
+	const { prefetch: configPrefetch, hoverPrefetchDelay: configPrefetchDelay } = routerConfig;
+	const prefetch = prefetchLink || configPrefetch;
+	const prefetchDelay = hoverPrefetchDelay ?? configPrefetchDelay;
 	const onMouseEnter = useCallback(() => {
 		if (prefetch !== "hover" || !prefetchDelay) return;
 		if (timeout.current) clearTimeout(timeout.current);
@@ -791,10 +769,31 @@ var Link = ({ children, to, prefetch: prefetchLink, hoverPrefetchDelay }) => {
 			if (element) observer.disconnect();
 		};
 	}, [prefetch, to]);
+	const isActive = to === pathname;
+	const normalizedClassName = typeof className === "function" ? className({
+		isActive,
+		isPending
+	}) : className;
+	const normalizedStyle = typeof style === "function" ? style({
+		isActive,
+		isPending
+	}) : style;
+	const resultClassName = [
+		isActive && activeClassName,
+		isPending && pendingClassName,
+		normalizedClassName
+	].filter(Boolean).join(" ");
+	const clickHandler = async (event) => {
+		event.preventDefault();
+		onClick?.();
+		await navigate(to);
+	};
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
+		href: to,
 		ref,
-		style: { cursor: "pointer" },
-		onClick: () => navigate(to),
+		style: normalizedStyle,
+		className: resultClassName,
+		onClick: clickHandler,
 		onMouseEnter,
 		onMouseLeave,
 		children

package/dist/types.d.ts

@@ -40,10 +40,7 @@ export type ClientRouteItem = {
 };
 export type RouteItem = ClientRouteItem & {
     element: RenderElement;
-    params?: {
-        key: string;
-        value: string;
-    }[];
+    pattern: string;
     cacheTimestamp?: number;
 };
 export type Location = {
@@ -106,6 +103,7 @@ export type RouterState = {
     }>;
     loaderStateRef: Cell<LoaderState>;
     prevPathnameRef: Cell<string>;
+    pendingPathRef: Cell<string>;
     timestampMap: Map<string, number>;
 };
 export type RouterType = {

package/dist/utils/findRoute.d.ts

@@ -1,2 +1,2 @@
-export declare const ALL_LOCATIONS = "/*";
+export declare const NOT_FOUND = "*";
 export declare const findRoute: (pathname: string, includeAll?: boolean) => import("..").RouteItem | undefined;

package/dist/utils/utils.d.ts

@@ -1,8 +1,5 @@
 import { ClientRouteItem, Location, RouteItem } from '../types';
 export declare const createRouter: (clientList: ClientRouteItem[]) => RouteItem[];
-export declare const getParamsObject: ({ params, pathname }: {
-    params?: RouteItem["params"];
-    pathname: string;
-}) => {};
+export declare const getParamsObject: (nextItem?: RouteItem, nextPathname?: string) => Record<string, string>;
 export declare const parseWindowLocation: (location: typeof window.location) => Location;
-export declare const comparePaths: (el: RouteItem, pathname: string) => boolean;
+export declare const comparePaths: (route: RouteItem, pathname: string) => boolean;

package/package.json

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