clear-react-router 1.6.8 → 1.7.0

package/README.md

@@ -272,7 +272,7 @@ Actions can be executed declaratively with `<Form />` or imperatively with `useA
 import { Form, useFormContext } from '../clear-router';
 
 const SubmitButton = () => {
-	const { isSubmitting } = useFormContext()
+	const {isSubmitting} = useFormContext()
 	return <button disabled={isSubmitting} type='submit'>Save</button>
 }
 
@@ -305,6 +305,13 @@ 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');
 
@@ -508,29 +515,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 +685,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/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/useActionParams.d.ts

@@ -0,0 +1,7 @@
+export declare const useActionParams: () => {
+    invalidate: (path?: string) => Promise<void>;
+    routeItem: import("..").RouteItem | undefined;
+    latestContext: import("react").RefObject<Record<string, unknown>>;
+    params: Record<string, string>;
+    setContext: (action: Record<string, unknown> | ((prevState: Record<string, unknown>) => Record<string, unknown>)) => 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

@@ -112,7 +112,7 @@ var useCurrentLoaderState = createState(emptyLoaderState);
 var useScrollMap = createState({});
 var useContextState = createState({});
 //#endregion
-//#region \0@oxc-project+runtime@0.132.0/helpers/typeof.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -122,7 +122,7 @@ function _typeof(o) {
 	}, _typeof(o);
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.132.0/helpers/toPrimitive.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -134,13 +134,13 @@ function toPrimitive(t, r) {
 	return ("string" === r ? String : Number)(t);
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.132.0/helpers/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.132.0/helpers/defineProperty.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -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,41 +723,43 @@ 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/useActionParams.ts
+var useActionParams = () => {
 	const invalidate = useInvalidate();
 	const [routeItemData] = useRouteItemData();
 	const [context, setContext] = useContextState();
 	const params = useParams();
 	const { routeItem } = routeItemData;
+	return {
+		invalidate,
+		routeItem,
+		latestContext: useLatest(context),
+		params,
+		setContext
+	};
+};
+//#endregion
+//#region components/Form.tsx
+var Form = ({ children, action: actionKey, onSuccess, onError, autoReset = true }) => {
+	const { invalidate, routeItem, latestContext, params, setContext } = useActionParams();
 	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");
+		if (!routeItem) throw new Error("Route not found");
+		if (!routeItem.actions) throw new Error("Route action creator not found");
 		const action = routeItem.actions({
-			context,
+			context: latestContext.current,
 			setContext,
 			params,
 			invalidate
 		})[actionKey];
-		if (!action) throw new Error("action not found");
+		if (!action) throw new Error(`Action "${actionKey}" not found`);
 		try {
 			setIsSubmitting(true);
 			const result = await action(new FormData(evt.target));
@@ -821,53 +832,39 @@ 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 { invalidate, routeItem, latestContext, params, setContext } = useActionParams();
+	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({
+		if (!routeItem) throw new Error("Route not found");
+		if (!routeItem.actions) throw new Error("Route action creator not found");
+		const currentAction = routeItem.actions({
 			context: latestContext.current,
 			setContext,
 			params,
 			invalidate
-		})[actionKey];
-		if (!action) throw new Error("action not found");
+		})[action];
+		if (!currentAction) throw new Error(`Action "${action}" 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,
+		action,
 		invalidate,
-		onError,
+		latestContext,
+		latestOnError,
+		latestOnSuccess,
 		params,
 		routeItem,
 		setContext
 	]);
 };
 //#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 +959,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 +1024,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.8",
+  "version": "1.7.0",
   "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[];