clear-react-router 1.6.9 → 1.7.1

package/README.md

@@ -264,15 +264,15 @@ Actions can be executed declaratively with `<Form />` or imperatively with `useA
 
 ## Form
 
-`Form` automatically creates a `FormData` object, executes the specified route action, invalidates the current route, and optionally resets the form.
+`Form` automatically creates a `FormData` object on submit event, executes the specified route action, invalidates the current route, and optionally resets the form, if fields are uncontrolled.
 
 `isSubmitting` value available inside the `Form` component from the `useFormContext` hook
 
 ```tsx
-import { Form, useFormContext } from '../clear-router';
+import { Form, useFormContext } from 'clear-react-router';
 
 const SubmitButton = () => {
-	const { isSubmitting } = useFormContext()
+	const {isSubmitting} = useFormContext()
 	return <button disabled={isSubmitting} type='submit'>Save</button>
 }
 
@@ -305,22 +305,23 @@ After a successful action:
 
 `useAction` provides direct access to a route action without rendering a `<Form />`.
 
+### Arguments
+
+| Argument | Type | Description |
+|----------|------|-------------|
+| `action` | `string` | Name of the route action to execute. Must match a key returned from the route's `actions` configuration. |
+| `options` | `{ onSuccess?, onError? }` | Optional callbacks invoked after the action succeeds or fails. |
+
 ```tsx
 const save = useAction('save');
 
 const handleClick = async () => {
   const data = new FormData();
-
   data.append('title', 'Hello');
-
   await save(data);
 };
-```
 
-```tsx
-<button onClick={handleClick}>
-  Save
-</button>
+<button onClick={handleClick}>Save</button>
 ```
 
 `useAction` automatically invalidates the current route after a successful action, causing both `beforeLoad` and `loader` to run again in the background.
@@ -508,29 +509,6 @@ useEffect(() => {
 }, [state, process, reset]);
 ```
 
-### `useBeforeUnload(callback?)`
-
-Executes a callback when the page is about to be closed or reloaded. Perfect for auto-saving data at the last moment.
-
-**Parameters:**
-
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| `callback` | `() => void \| undefined` | Function to execute before page unload (e.g., auto-save) |
-
-**Note:** This hook does not show a browser confirmation dialog. It silently executes the callback, allowing you to save user data in the background before the page closes.
-
-```tsx
-const [text, setText] = useState('');
-const onSave = useCallback(() => {
-  localStorage.setItem('draft', text);
-}, [text]);
-
-// Auto-save when user tries to close/reload the page
-useBeforeUnload(text ? onSave : undefined);
-```
-> **Note:** Pass `undefined` to disable the handler (e.g., if there is no changes).
-
 ### `useQueryParam()`
 
 A flexible hook for working with typed query parameters. You provide an adapter object with `parse` and `serialize` functions, and it returns the parsed value and a setter.
@@ -701,18 +679,6 @@ function ProductFilter() {
 
 > **Note:** `getSearchParams` returns `string` for single values, `string[]` for multiple values, and `''` if the key is not found.
 
-### `useHistoricalTrail()`
-
-Returns an array of pathnames representing the user's actual navigation history. Perfect for **history-based breadcrumbs** in dashboards, admin panels, multi-step forms, or any app where users navigate non-linearly.
-
-**Returns:** Array of pathnames in chronological visit order (e.g., `['/dashboard', '/users', '/settings']`)
-
-**Key features:**
-- **Chronological order** — Paths are stored in the order the user visited them
-- **Unique entries** — Revisiting a page trims the trail to that point
-- **Respects navigation blocking** — Only successful navigations are added
-- **Redirect-safe** — Redirected pages are not added to the trail
-
 ## Lazy Loading
 
 Clear Router supports code-splitting out of the box. Simply pass a function that returns a dynamic import:

package/dist/components/Form.d.ts

@@ -5,5 +5,5 @@ type FormProps = {
     onError?(arg: unknown): void;
     autoReset?: boolean;
 };
-export declare const Form: ({ children, action: actionKey, onSuccess, onError, autoReset, }: PropsWithChildren<FormProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Form: ({ children, action, onSuccess, onError, autoReset }: PropsWithChildren<FormProps>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/hooks/useAction.d.ts

@@ -1 +1,6 @@
-export declare const useAction: (actionKey: string, onError?: (args: unknown) => void) => (formData: FormData) => Promise<void>;
+type Options = Partial<{
+    onSuccess: (args: unknown) => void;
+    onError: (args: unknown) => void;
+}> | undefined;
+export declare const useAction: (action: string, options?: Options) => (formData: FormData) => Promise<void>;
+export {};

package/dist/hooks/useGetAction.d.ts

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

package/dist/index.d.ts

@@ -9,11 +9,9 @@ export { useLoaderState } from './hooks/useLoaderState';
 export { useInvalidate } from './hooks/useInvalidate';
 export { useBlocker } from './hooks/useBlocker';
 export { useAction } from './hooks/useAction';
-export { useBeforeUnload } from './hooks/useBeforeUnload';
 export { useRouterContext } from './hooks/useRouterContext';
 export { useQueryParam } from './hooks/useQueryParam';
 export { useSearchParams } from './hooks/useSearchParams';
-export { useHistoricalTrail } from './hooks/useHistoricalTrail';
 export { useFormContext } from './hooks/useFormContext';
 export { adapter } from './utils/adapter';
 export { createRouter } from './utils/utils';

package/dist/index.js

@@ -704,6 +704,15 @@ var Link = ({ children, to, prefetch: prefetchLink, hoverPrefetchDelay }) => {
 	});
 };
 //#endregion
+//#region context/FormContext.ts
+var FormContext = createContext({ isSubmitting: false });
+//#endregion
+//#region provider/FormProvider.tsx
+var FormProvider = ({ children, isSubmitting }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormContext.Provider, {
+	value: { isSubmitting },
+	children
+});
+//#endregion
 //#region hooks/useInvalidate.ts
 var useInvalidate = () => {
 	const { invalidate } = useRouterActions();
@@ -714,44 +723,44 @@ var useInvalidate = () => {
 var useParams = () => {
 	const [routeItemData] = useRouteItemData();
 	const { routeItem, location: { pathname } } = routeItemData;
-	if (!routeItem) return void 0;
-	return getParamsObject({
+	return useMemo(() => routeItem ? getParamsObject({
 		params: routeItem?.params,
 		pathname
-	});
+	}) : void 0, [pathname, routeItem]);
 };
 //#endregion
-//#region context/FormContext.ts
-var FormContext = createContext({ isSubmitting: false });
-//#endregion
-//#region provider/FormProvider.tsx
-var FormProvider = ({ children, isSubmitting }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormContext.Provider, {
-	value: { isSubmitting },
-	children
-});
-//#endregion
-//#region components/Form.tsx
-var Form = ({ children, action: actionKey, onSuccess, onError, autoReset = true }) => {
+//#region hooks/useGetAction.ts
+var useGetAction = (actionKey) => {
 	const invalidate = useInvalidate();
 	const [routeItemData] = useRouteItemData();
 	const [context, setContext] = useContextState();
 	const params = useParams();
 	const { routeItem } = routeItemData;
+	const latestContext = useLatest(context);
+	if (!routeItem) throw new Error("Route not found");
+	if (!routeItem.actions) throw new Error("Route action creator not found");
+	const action = routeItem.actions({
+		context: latestContext.current,
+		setContext,
+		params,
+		invalidate
+	})[actionKey];
+	if (!action) throw new Error(`Action "${actionKey}" not found`);
+	return {
+		currentAction: action,
+		invalidate
+	};
+};
+//#endregion
+//#region components/Form.tsx
+var Form = ({ children, action, onSuccess, onError, autoReset = true }) => {
+	const { currentAction, invalidate } = useGetAction(action);
 	const [isSubmitting, setIsSubmitting] = useState(false);
 	const onSubmit = async (evt) => {
 		evt.preventDefault();
-		if (!routeItem) throw new Error("Route not found");
-		if (!routeItem.actions) throw new Error("Route action creator not found");
-		const action = routeItem.actions({
-			context,
-			setContext,
-			params,
-			invalidate
-		})[actionKey];
-		if (!action) throw new Error(`Action "${actionKey}" not found`);
 		try {
 			setIsSubmitting(true);
-			const result = await action(new FormData(evt.target));
+			const result = await currentAction(new FormData(evt.target));
 			await invalidate();
 			if (autoReset) evt.target.reset();
 			onSuccess?.(result);
@@ -821,53 +830,26 @@ var useBlocker = (blockerFn) => {
 };
 //#endregion
 //#region hooks/useAction.ts
-var useAction = (actionKey, onError) => {
-	const invalidate = useInvalidate();
-	const [routeItemData] = useRouteItemData();
-	const [context, setContext] = useContextState();
-	const params = useParams();
-	const { routeItem } = routeItemData;
-	const latestContext = useLatest(context);
+var useAction = (action, options = {}) => {
+	const { currentAction, invalidate } = useGetAction(action);
+	const latestOnSuccess = useLatest(options?.onSuccess);
+	const latestOnError = useLatest(options?.onError);
 	return useCallback(async (formData) => {
-		if (!routeItem) throw new Error("Route not found");
-		if (!routeItem.actions) throw new Error("Route action creator not found");
-		const action = routeItem.actions({
-			context: latestContext.current,
-			setContext,
-			params,
-			invalidate
-		})[actionKey];
-		if (!action) throw new Error(`Action "${actionKey}" not found`);
 		try {
-			await action(formData);
+			const result = await currentAction(formData);
 			await invalidate();
+			latestOnSuccess.current?.(result);
 		} catch (error) {
-			onError?.(error);
+			latestOnError.current?.(error);
 		}
 	}, [
-		actionKey,
-		latestContext,
+		currentAction,
 		invalidate,
-		onError,
-		params,
-		routeItem,
-		setContext
+		latestOnError,
+		latestOnSuccess
 	]);
 };
 //#endregion
-//#region hooks/useBeforeUnload.ts
-var useBeforeUnload = (callback) => {
-	useEffect(() => {
-		const handler = (event) => {
-			if (!callback) return;
-			event.preventDefault();
-			callback();
-		};
-		window.addEventListener("beforeunload", handler);
-		return () => window.removeEventListener("beforeunload", handler);
-	}, [callback]);
-};
-//#endregion
 //#region hooks/useRouterContext.ts
 var useRouterContext = () => {
 	const [context, setContext] = useContextState();
@@ -962,20 +944,6 @@ function useQueryParam(field, adapter, defaultValue) {
 	])];
 }
 //#endregion
-//#region hooks/useHistoricalTrail.ts
-var useHistoricalTrail = () => {
-	const { pathname } = useLocation();
-	const [trail, setTrail] = useState([]);
-	useEffect(() => {
-		if (!pathname) return;
-		setTrail((prevState) => {
-			const index = prevState.indexOf(pathname);
-			return index === -1 ? [...prevState, pathname] : prevState.slice(0, index + 1);
-		});
-	}, [pathname]);
-	return trail;
-};
-//#endregion
 //#region hooks/useFormContext.ts
 var useFormContext = () => useContext(FormContext);
 //#endregion
@@ -1041,4 +1009,4 @@ var adapter = {
 	})
 };
 //#endregion
-export { Form, Link, Router, RouterProvider, adapter, createRouter, useAction, useBeforeUnload, useBlocker, useFormContext, useHistoricalTrail, useInvalidate, useLoaderState, useLocation, useNavigate, useParams, useQueryParam, useRouterContext, useSearchParams };
+export { Form, Link, Router, RouterProvider, adapter, createRouter, useAction, useBlocker, useFormContext, useInvalidate, useLoaderState, useLocation, useNavigate, useParams, useQueryParam, useRouterContext, useSearchParams };

package/package.json

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

package/dist/hooks/useBeforeUnload.d.ts

@@ -1 +0,0 @@
-export declare const useBeforeUnload: (callback?: () => void) => void;

package/dist/hooks/useHistoricalTrail.d.ts

@@ -1 +0,0 @@
-export declare const useHistoricalTrail: () => string[];