clear-react-router 1.7.0 → 1.7.1

package/README.md

@@ -264,12 +264,12 @@ 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()
@@ -317,17 +317,11 @@ 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.

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/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.js

@@ -729,40 +729,38 @@ var useParams = () => {
 	}) : void 0, [pathname, routeItem]);
 };
 //#endregion
-//#region hooks/useActionParams.ts
-var useActionParams = () => {
+//#region hooks/useGetAction.ts
+var useGetAction = (actionKey) => {
 	const invalidate = useInvalidate();
 	const [routeItemData] = useRouteItemData();
 	const [context, setContext] = useContextState();
 	const params = useParams();
 	const { routeItem } = routeItemData;
-	return {
-		invalidate,
-		routeItem,
-		latestContext: useLatest(context),
+	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,
-		setContext
+		invalidate
+	})[actionKey];
+	if (!action) throw new Error(`Action "${actionKey}" not found`);
+	return {
+		currentAction: action,
+		invalidate
 	};
 };
 //#endregion
 //#region components/Form.tsx
-var Form = ({ children, action: actionKey, onSuccess, onError, autoReset = true }) => {
-	const { invalidate, routeItem, latestContext, params, setContext } = useActionParams();
+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: latestContext.current,
-			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);
@@ -833,19 +831,10 @@ var useBlocker = (blockerFn) => {
 //#endregion
 //#region hooks/useAction.ts
 var useAction = (action, options = {}) => {
-	const { invalidate, routeItem, latestContext, params, setContext } = useActionParams();
+	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 currentAction = routeItem.actions({
-			context: latestContext.current,
-			setContext,
-			params,
-			invalidate
-		})[action];
-		if (!currentAction) throw new Error(`Action "${action}" not found`);
 		try {
 			const result = await currentAction(formData);
 			await invalidate();
@@ -854,14 +843,10 @@ var useAction = (action, options = {}) => {
 			latestOnError.current?.(error);
 		}
 	}, [
-		action,
+		currentAction,
 		invalidate,
-		latestContext,
 		latestOnError,
-		latestOnSuccess,
-		params,
-		routeItem,
-		setContext
+		latestOnSuccess
 	]);
 };
 //#endregion

package/package.json

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

package/dist/hooks/useActionParams.d.ts

@@ -1,7 +0,0 @@
-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;
-};