clear-react-router 1.7.6 → 1.7.7

package/README.md

@@ -396,13 +396,13 @@ const UserProfile = () => {
 
 ### `useInvalidate()`
 
-Returns a function that marks route data as stale and re-runs the route lifecycle.
+Returns a function that revalidates cached route data by executing the route lifecycle again.
 
-Calling `invalidate()` clears the cached loader result for a route and executes both `beforeLoad` and `loader` again. This is useful after mutations or any operation that changes data used by the route.
+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.
 
 #### Current route
 
-Invalidate the currently active route:
+Revalidate the currently active route:
 
 ```tsx
 const invalidate = useInvalidate();
@@ -412,41 +412,80 @@ await invalidate();
 
 #### Specific route
 
-You can also invalidate any registered route by passing its pathname:
+Revalidate any registered route by passing its pathname:
 
 ```tsx
-const invalidate = useInvalidate();
-
 await invalidate('/posts');
 ```
 
-The route does not need to be currently active. Its cache will be marked as stale, and the next time it is visited, `beforeLoad` and `loader` will run again.
+#### Multiple routes
 
-#### Why use it?
+You can revalidate several routes at once by passing an array of pathnames:
 
-A common use case is refreshing route data after a mutation.
+```tsx
+await invalidate([ '/posts', '/profile', '/settings' ]);
+```
 
-For example, after deleting a post while viewing `/posts/42`, you may want the posts list to be reloaded the next time the user navigates to `/posts`:
+#### Dynamic routes
+
+When a dynamic route pattern is provided, every cached route matching that pattern will be revalidated.
+
+For example:
 
 ```tsx
-const invalidate = useInvalidate();
+await invalidate('/post/[id]');
+```
 
-await deletePost(id);
-await invalidate('/posts');
+will revalidate all cached routes such as:
+
+```text
+/post/1
+/post/17
+/post/42
 ```
 
-Likewise, after updating the current page, you can immediately refresh its data:
+This also works for nested dynamic routes:
 
 ```tsx
-const invalidate = useInvalidate();
+await invalidate('/post/[id]/comment/[id]');
+```
 
-await updateProfile(data);
-await invalidate();
+#### Including child routes
+
+To revalidate a single route together with its cached child routes, pass the `withChildren` option:
+
+```tsx
+await invalidate('/posts', { withChildren: true }); // a route, not a route list
+```
+
+This will recursively revalidate cached routes inside the route tree.
+
+For example, if the following routes have been visited:
+
+```text
+/posts
+/post/17
+/post/23
+/post/42/comments
 ```
 
+then:
+
+```tsx
+await invalidate('/posts', { withChildren: true });
+```
+
+will revalidate the cached child routes:
+
+```text
+/post/17
+/post/23
+/post/42/comments
+```
 #### 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.
 * When used as an event handler, wrap the call in an arrow function:
 

package/dist/hooks/useGetAction.d.ts

@@ -1,4 +1,4 @@
 export declare const useGetAction: (actionKey: string) => {
     currentAction: (arg: FormData) => Promise<unknown> | Promise<void> | void | unknown;
-    invalidate: (path?: string) => Promise<void>;
+    invalidate: typeof import("../runtime/invalidate").invalidate;
 };

package/dist/hooks/useInvalidate.d.ts

@@ -1 +1,2 @@
-export declare const useInvalidate: () => (path?: string) => Promise<void>;
+import { invalidate } from '../runtime/invalidate';
+export declare const useInvalidate: () => typeof invalidate;

package/dist/index.js

@@ -170,21 +170,28 @@ var createLazyComponent = (importFn, fallback) => {
 //#region utils/utils.ts
 var isLazy = (el) => typeof el.element === "function" && el.element.toString().includes("import(");
 var parseClientRouteItem = (el, parentParams = [], parentPath = "") => {
-	const currentParamsList = el.path.match(/:[^/]+/g);
-	const normalizedSplitPath = el.path.replaceAll(/:[^/]+(\/|$)/g, "").split("/").filter(Boolean);
-	const splitPath = el.path.split("/");
-	const currentParams = currentParamsList ? [...parentParams, ...currentParamsList.map((param, index) => ({
-		key: normalizedSplitPath[index],
-		value: param.slice(1)
-	}))] : parentParams;
-	const path = currentParams.length ? `${parentPath}${splitPath.slice(0, splitPath.length - 1).join("/")}` : el.path;
+	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, "/");
 	const resolvedElement = isLazy(el) ? createLazyComponent(el.element, el.fallback) : el.element;
 	return [{
 		...el,
 		path,
 		params: currentParams,
 		element: resolvedElement
-	}, ...el.children?.flatMap((child) => parseClientRouteItem(child, currentParams, path)) || []];
+	}, ...el.children?.flatMap((child) => parseClientRouteItem(child, currentParams, path)) ?? []];
 };
 var createRouter = (clientList) => clientList.flatMap((el) => parseClientRouteItem(el, []));
 var getParamsObject = ({ params, pathname }) => {
@@ -625,22 +632,21 @@ var FormProvider = ({ children, isSubmitting }) => /* @__PURE__ */ (0, import_js
 });
 //#endregion
 //#region runtime/invalidate.ts
-var invalidate = async (path) => {
+var redirect = () => Promise.resolve();
+var invalidatePath = async (routeItem, pathname) => {
 	const routePathname = routeItemDataState.getState().location.pathname;
-	const pathname = path || routePathname;
-	const routeItem = findRoute(pathname);
-	const resultParams = getParamsObject({
+	timestampMap.delete(pathname);
+	const params = getParamsObject({
 		params: routeItem?.params,
 		pathname
 	});
-	timestampMap.delete(pathname);
 	try {
 		if (routeItem?.beforeLoad) {
 			const { context, setContext } = getContext();
 			await routeItem.beforeLoad({
 				context,
-				redirect: () => Promise.resolve(),
-				params: resultParams,
+				redirect,
+				params,
 				setContext
 			});
 		}
@@ -660,6 +666,22 @@ var invalidate = async (path) => {
 	});
 	if (pathname === routePathname) currentLoaderState.setState(loaderStateRef.value);
 };
+var invalidateItem = async (pathname, withChildren) => {
+	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) {
+		const childPathList = routeItem.children.map((el) => el.path);
+		await Promise.all(childPathList.map((el) => invalidateItem(`${pathname}${el}`, withChildren)));
+	}
+};
+async function invalidate(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)));
+}
 //#endregion
 //#region hooks/useInvalidate.ts
 var useInvalidate = () => invalidate;

package/dist/runtime/invalidate.d.ts

@@ -1 +1,6 @@
-export declare const invalidate: (path?: string) => Promise<void>;
+type Options = {
+    withChildren?: boolean;
+};
+export declare function invalidate(path?: string[]): Promise<void>;
+export declare function invalidate(path?: string, options?: Options): Promise<void>;
+export {};

package/package.json

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