react-form-action 2.15.1 → 2.16.0

package/README.md

@@ -24,6 +24,7 @@ End-to-end typesafe success, error & validation state control for Next.js form a
 - ✅ Binds the action with the arguments from the _args_ prop.
 - ✅ Has an optional `validate` prop to validate the form data client-side before calling the server action.
 - ✅ Enables you to reset the action state with the `reset()` callback.
+- ✅ `useResetAction()` hook (or `<ResetAction />` component) to automatically initialize your action when the hook/component unmounts.
 
 **Context-bound `<Form />` component**
 
@@ -335,6 +336,44 @@ export function SignUpAction({ children }: PropsWithChildren) {
 }
 ```
 
+#### Automatic action state reset (when unmounting component)
+
+Works with Next.js routing, where routes are wrapped in `<Activity />`.
+
+```tsx
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { Action, ResetAction } from "react-form-action/client";
+
+import { updateUser } from "./action";
+
+export function UpdateUserAction({ children }: PropsWithChildren) {
+  return (
+    <Action
+      action={updateUser}
+      initialData={undefined}
+    >
+      {/* IMPORTANT: must be rendered as a child of the <Action /> context. */}
+      <ResetAction />
+      {children}
+    </Action>
+  );
+}
+```
+
+When you prefer hooks to JSX, you can use the `useResetAction()` usually in your forms:
+
+```tsx
+import { Form, useResetAction } from "react-form-action/client";
+
+function MyForm() {
+  useResetAction();
+
+  return <Form>...</Form>
+}
+``` 
+
 
 ### `<Form>` Component
 

package/dist/client.d.mts

@@ -123,4 +123,14 @@ declare function Pending({ children }: PropsWithChildren | {
   }) => React.ReactNode;
 }): import("react").ReactNode;
 //#endregion
-export { Action, ActionContextState, ActionProps, Form, FormProps, InferZodErrorPaths, Paths, Pending, SpreadActionContext, ZodFieldError, ZodFieldErrorChildrenProps, ZodFieldErrorProps, createComponents, noError, useActionContext };
+//#region src/useResetAction.d.ts
+/**
+ * Hook to automatically reset the action when the component unmounts, unless it is in the initial state.
+ */
+declare function useResetAction(): void;
+/**
+ * Component that automatically resets the action when it unmounts, unless it is in the initial state.
+ */
+declare function ResetAction(): null;
+//#endregion
+export { Action, ActionContextState, ActionProps, Form, FormProps, InferZodErrorPaths, Paths, Pending, ResetAction, SpreadActionContext, ZodFieldError, ZodFieldErrorChildrenProps, ZodFieldErrorProps, createComponents, noError, useActionContext, useResetAction };

package/dist/client.mjs

@@ -1 +1 @@
-"use client";import{n as e,t}from"./createFormAction-BwMYAzm2.mjs";import{createContext as n,startTransition as r,use as i,useActionState as a,useCallback as o}from"react";import{Fragment as s,jsx as c}from"react/jsx-runtime";const l={isInitial:!1,isInvalid:!1,isFailure:!1,isSuccess:!1},u=n(null);function d(e){let t=i(u);if(!t)throw Error(`ActionContext must be initialized before use. Is your useActionContext hook wrapped with an <Action> Component?`);return t}function f({children:n,action:i,initialData:s,args:d,permalink:f,validate:p}){let m=d?i.bind(null,...d):i,[h,g,_]=a(async(n,r)=>{if(r===null)return e(s);if(p){let e=await t(({invalid:e,success:t})=>async(n,r)=>{let i=p(r);return i?e(i):t(!0)})(n,r);if(e.type===`invalid`)return e}return m(n,r)},e(s),f),v=o(()=>{r(()=>{g(null)})},[g]),y=h.type===`initial`?{...h,...l,action:g,reset:v,isPending:_,isInitial:!0}:h.type===`invalid`?{...h,...l,action:g,reset:v,isPending:_,isInvalid:!0}:h.type===`failure`?{...h,...l,action:g,reset:v,isPending:_,isFailure:!0}:{...h,...l,action:g,reset:v,isPending:_,isSuccess:!0};return c(u,{value:y,children:n})}const p=Object.freeze({errors:Object.freeze([])});function m({errors:e,name:t,children:n=({error:e})=>c(s,{children:e})}){if(t.length===0)return n({name:t,error:e.errors[0],errors:e.errors});let r=t.split(`.`),i=e;for(let e of r){if(!i.properties){i=p;break}i=i.properties[e]??p}return n({name:t,error:i.errors[0],errors:i.errors})}function h(e,t={}){function n({name:n,children:r}){let i=d(e),{isInvalid:a,validationError:o}=i,l=r??(({error:e})=>a&&c(s,{children:e}));return c(m,{errors:o??p,name:n,children:e=>{let n=Object.fromEntries(Object.entries(t.fieldProps??{}).map(([t,n])=>[t,n(i,e)]));return l({...e,...n})}})}function r({children:t}){let{isFailure:n,error:r}=d(e);return n?typeof t==`function`?t({isFailure:n,error:r}):t:null}function i({children:t}){let{isSuccess:n,data:r}=d(e);return typeof t==`function`?t({isSuccess:n,data:r}):n&&t}function a({children:t}){let{isInvalid:n,validationError:r}=d(e);return typeof t==`function`?t({isInvalid:n,validationError:r}):n&&t}return{FieldError:n,Failure:r,Success:i,Invalid:a}}function g({autoReset:e=!1,...t}){let{action:n}=d();return c(`form`,{...e?{action:n}:{onSubmit:e=>{e.preventDefault();let t=e.currentTarget;r(()=>{n(new FormData(t))})}},...t})}function _({children:e}){let{isPending:t}=d();return typeof e==`function`?e({isPending:t}):t&&e}export{f as Action,g as Form,_ as Pending,m as ZodFieldError,h as createComponents,p as noError,d as useActionContext};
+"use client";import{n as e,t}from"./createFormAction-BwMYAzm2.mjs";import{createContext as n,startTransition as r,use as i,useActionState as a,useCallback as o,useEffect as s}from"react";import{Fragment as c,jsx as l}from"react/jsx-runtime";const u={isInitial:!1,isInvalid:!1,isFailure:!1,isSuccess:!1},d=n(null);function f(e){let t=i(d);if(!t)throw Error(`ActionContext must be initialized before use. Is your useActionContext hook wrapped with an <Action> Component?`);return t}function p({children:n,action:i,initialData:s,args:c,permalink:f,validate:p}){let m=c?i.bind(null,...c):i,[h,g,_]=a(async(n,r)=>{if(r===null)return e(s);if(p){let e=await t(({invalid:e,success:t})=>async(n,r)=>{let i=p(r);return i?e(i):t(!0)})(n,r);if(e.type===`invalid`)return e}return m(n,r)},e(s),f),v=o(()=>{r(()=>{g(null)})},[g]),y=h.type===`initial`?{...h,...u,action:g,reset:v,isPending:_,isInitial:!0}:h.type===`invalid`?{...h,...u,action:g,reset:v,isPending:_,isInvalid:!0}:h.type===`failure`?{...h,...u,action:g,reset:v,isPending:_,isFailure:!0}:{...h,...u,action:g,reset:v,isPending:_,isSuccess:!0};return l(d,{value:y,children:n})}const m=Object.freeze({errors:Object.freeze([])});function h({errors:e,name:t,children:n=({error:e})=>l(c,{children:e})}){if(t.length===0)return n({name:t,error:e.errors[0],errors:e.errors});let r=t.split(`.`),i=e;for(let e of r){if(!i.properties){i=m;break}i=i.properties[e]??m}return n({name:t,error:i.errors[0],errors:i.errors})}function g(e,t={}){function n({name:n,children:r}){let i=f(e),{isInvalid:a,validationError:o}=i,s=r??(({error:e})=>a&&l(c,{children:e}));return l(h,{errors:o??m,name:n,children:e=>{let n=Object.fromEntries(Object.entries(t.fieldProps??{}).map(([t,n])=>[t,n(i,e)]));return s({...e,...n})}})}function r({children:t}){let{isFailure:n,error:r}=f(e);return n?typeof t==`function`?t({isFailure:n,error:r}):t:null}function i({children:t}){let{isSuccess:n,data:r}=f(e);return typeof t==`function`?t({isSuccess:n,data:r}):n&&t}function a({children:t}){let{isInvalid:n,validationError:r}=f(e);return typeof t==`function`?t({isInvalid:n,validationError:r}):n&&t}return{FieldError:n,Failure:r,Success:i,Invalid:a}}function _({autoReset:e=!1,...t}){let{action:n}=f();return l(`form`,{...e?{action:n}:{onSubmit:e=>{e.preventDefault();let t=e.currentTarget;r(()=>{n(new FormData(t))})}},...t})}function v({children:e}){let{isPending:t}=f();return typeof e==`function`?e({isPending:t}):t&&e}function y(){let{reset:e,isInitial:t}=f();s(()=>()=>{t||e()},[t,e])}function b(){return y(),null}export{p as Action,_ as Form,v as Pending,b as ResetAction,h as ZodFieldError,g as createComponents,m as noError,f as useActionContext,y as useResetAction};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-action",
-  "version": "2.15.1",
+  "version": "2.16.0",
   "description": "State management helpers for the react form actions.",
   "repository": {
     "type": "git",