clear-react-router 1.6.7 → 1.6.8

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>
 }
 

package/dist/index.d.ts

@@ -1,12 +1,14 @@
 export { RouterProvider } from './components/RouterProvider';
 export { Router } from './components/Router';
 export { Link } from './components/Link';
+export { Form } from './components/Form';
 export { useNavigate } from './hooks/useNavigate';
 export { useParams } from './hooks/useParams';
 export { useLocation } from './hooks/useLocation';
 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';

package/dist/index.js

@@ -704,6 +704,12 @@ var Link = ({ children, to, prefetch: prefetchLink, hoverPrefetchDelay }) => {
 	});
 };
 //#endregion
+//#region hooks/useInvalidate.ts
+var useInvalidate = () => {
+	const { invalidate } = useRouterActions();
+	return invalidate;
+};
+//#endregion
 //#region hooks/useParams.ts
 var useParams = () => {
 	const [routeItemData] = useRouteItemData();
@@ -715,18 +721,61 @@ var useParams = () => {
 	});
 };
 //#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 }) => {
+	const invalidate = useInvalidate();
+	const [routeItemData] = useRouteItemData();
+	const [context, setContext] = useContextState();
+	const params = useParams();
+	const { routeItem } = routeItemData;
+	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 not found");
+		try {
+			setIsSubmitting(true);
+			const result = await action(new FormData(evt.target));
+			await invalidate();
+			if (autoReset) evt.target.reset();
+			onSuccess?.(result);
+		} catch (error) {
+			onError?.(error);
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormProvider, {
+		isSubmitting,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", {
+			onSubmit,
+			children
+		})
+	});
+};
+//#endregion
 //#region hooks/useLoaderState.ts
 var useLoaderState = () => {
 	const [loaderState] = useCurrentLoaderState();
 	return loaderState;
 };
 //#endregion
-//#region hooks/useInvalidate.ts
-var useInvalidate = () => {
-	const { invalidate } = useRouterActions();
-	return invalidate;
-};
-//#endregion
 //#region hooks/useBlocker.ts
 var useBlocker = (blockerFn) => {
 	const [blockedRoute, setBlockedRoute] = useBlockedRoute();
@@ -771,6 +820,41 @@ 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);
+	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 not found");
+		try {
+			await action(formData);
+			await invalidate();
+		} catch (error) {
+			onError?.(error);
+		}
+	}, [
+		actionKey,
+		latestContext,
+		invalidate,
+		onError,
+		params,
+		routeItem,
+		setContext
+	]);
+};
+//#endregion
 //#region hooks/useBeforeUnload.ts
 var useBeforeUnload = (callback) => {
 	useEffect(() => {
@@ -892,9 +976,6 @@ var useHistoricalTrail = () => {
 	return trail;
 };
 //#endregion
-//#region context/FormContext.ts
-var FormContext = createContext({ isSubmitting: false });
-//#endregion
 //#region hooks/useFormContext.ts
 var useFormContext = () => useContext(FormContext);
 //#endregion
@@ -960,4 +1041,4 @@ var adapter = {
 	})
 };
 //#endregion
-export { Link, Router, RouterProvider, adapter, createRouter, useBeforeUnload, useBlocker, useFormContext, useHistoricalTrail, useInvalidate, useLoaderState, useLocation, useNavigate, useParams, useQueryParam, useRouterContext, useSearchParams };
+export { Form, Link, Router, RouterProvider, adapter, createRouter, useAction, useBeforeUnload, useBlocker, useFormContext, useHistoricalTrail, useInvalidate, useLoaderState, useLocation, useNavigate, useParams, useQueryParam, useRouterContext, useSearchParams };

package/package.json

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