clear-react-router 1.8.2 → 1.8.4

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 |
 |----------|------|-------------|
@@ -463,9 +463,7 @@ const UserProfile = () => {
 
 ### `useInvalidate()`
 
-Returns a function that revalidates **cached** route data by executing the route lifecycle again.
-
-Calling `invalidate()` clears the cached loader result and immediately runs both `beforeLoad` and `loader` for the specified route. This is useful after mutations or any operation that changes data used by the route.
+Returns a function that revalidates **cached** route data. Calling `invalidate()` clears cached route data and immediately runs the corresponding route loader again.
 
 #### Current route
 
@@ -490,12 +488,12 @@ await invalidate('/posts');
 You can revalidate several routes at once by passing an array of pathnames:
 
 ```tsx
-await invalidate([ '/posts', '/profile', '/settings' ]);
+await invalidate(['/posts', '/profile', '/settings']);
 ```
 
 #### Dynamic routes
 
-When a dynamic route pattern is provided, every cached route matching that pattern will be revalidated.
+When a dynamic route pattern is provided, every cached route that matches the pattern will be revalidated.
 
 For example:
 
@@ -526,7 +524,7 @@ await invalidate('/posts', { withChildren: true });
 await invalidate(['/posts', '/users'], { withChildren: true });
 ```
 
-This will recursively revalidate cached routes inside the route tree.
+This will recursively revalidate all cached child routes.
 
 For example, if the following routes have been visited:
 
@@ -550,17 +548,23 @@ will revalidate the cached child routes:
 /post/23
 /post/42/comments
 ```
+#### Including `beforeLoad`
+
+To include the `beforeLoad` function in the revalidation process, pass the `withBeforeLoad` option:
+
+```tsx
+await invalidate('/posts', { withBeforeLoad: true });
+await invalidate(['/posts', '/users'], { withBeforeLoad: true });
+```
+
 #### Notes
 
-* `invalidate()` re-executes both `beforeLoad` and `loader` for the invalidated route.
 * **Only routes that already have cached data are revalidated.**
-* Cached data is discarded before the new loader starts.
+* Cached data is cleared before the new loader starts.
 * When used as an event handler, wrap the call in an arrow function:
 
 ```tsx
-<button onClick={() => invalidate()}>
-	Refresh
-</button>
+<button onClick={() => invalidate()}>Refresh</button>
 ```
 
 Passing `invalidate` directly (`onClick={invalidate}`) is not supported because React passes a `MouseEvent` object to event handlers.

package/dist/index.js

@@ -174,55 +174,38 @@ 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
@@ -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) => {
@@ -323,15 +303,12 @@ var createNavigate = (routerState, revalidateCache) => {
 //#region runtime/invalidate.ts
 var redirect = () => Promise.resolve();
 var createInvalidate = ({ routeItemDataState, loaderStateRef, timestampMap, currentLoaderState, contextState }, revalidateCache) => {
-	const invalidatePath = async (routeItem, pathname) => {
+	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) {
+			if (routeItem?.beforeLoad && options?.withBeforeLoad) {
 				const context = contextState.getState();
 				const setContext = contextState.setState;
 				await routeItem.beforeLoad({
@@ -357,21 +334,21 @@ var createInvalidate = ({ routeItemDataState, loaderStateRef, timestampMap, curr
 		});
 		if (pathname === routePathname) currentLoaderState.setState(loaderStateRef.value);
 	};
-	const invalidateItem = async (pathname, withChildren) => {
+	const invalidateItem = async (pathname, options) => {
 		const routeItem = findRoute(pathname);
 		if (!routeItem) return;
 		const pathnameArray = [];
 		for (const [key] of timestampMap) if (comparePaths(routeItem, key)) pathnameArray.push(key);
-		await Promise.all(pathnameArray.map((pathname) => invalidatePath(routeItem, pathname)));
-		if (withChildren && routeItem.children?.length) {
+		await Promise.all(pathnameArray.map((pathname) => invalidatePath(routeItem, pathname, options)));
+		if (options?.withChildren && routeItem.children?.length) {
 			const childPathList = routeItem.children.map((el) => el.path);
-			await Promise.all(childPathList.map((el) => invalidateItem(`${pathname}${el}`, true)));
+			await Promise.all(childPathList.map((el) => invalidateItem(`${pathname}${el}`, options)));
 		}
 	};
 	return async (pathList, options) => {
 		const routePathname = routeItemDataState.getState().location.pathname;
 		const pathnameList = Array.isArray(pathList) ? pathList : pathList ? [pathList] : [routePathname];
-		await Promise.all(pathnameList.map((pathname) => invalidateItem(pathname, options?.withChildren)));
+		await Promise.all(pathnameList.map((pathname) => invalidateItem(pathname, options)));
 	};
 };
 //#endregion
@@ -423,10 +400,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,
@@ -504,13 +478,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({
@@ -549,13 +520,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();

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 = {
@@ -138,6 +135,7 @@ export type RouterType = {
 };
 export type InvalidateOptions = {
     withChildren?: boolean;
+    withBeforeLoad?: boolean;
 };
 export type RevalidateCache = ({ routeItem, pathname }: RevalidateCacheArgs) => Promise<unknown> | undefined;
 export type Options = Partial<{

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.2",
+  "version": "1.8.4",
   "description": "A lightweight, type-safe routing library for React applications",
   "author": "Andrew Bubnov",
   "scripts": {