react-form-action 2.6.0 → 2.8.0

package/README.md

@@ -49,7 +49,7 @@ import { formAction } from "react-form-action";
 import { z } from "zod";
 
 export const subscribeAction = formAction
-  .input(z.object({ email: z.string().email() }))
+  .input(z.object({ email: z.email() }))
   .run(async ({ input }) => {
     return input.email;
   });
@@ -138,7 +138,7 @@ const i18nMiddleware = async () => {
 const authAction = formAction
   .use(i18nMiddleware)
   .use(async ({ ctx: { t } }) =>
-    console.log("🎉 context enhanced by previous middlewares 🎉", t)
+    console.log("🎉 context enhanced by previous middlewares 🎉", t),
   )
   .error(async ({ error }) => {
     if (error instanceof DbError) {
@@ -151,7 +151,7 @@ const authAction = formAction
   });
 
 export const signIn = authAction
-  .input(z.object({ email: z.string().email() }))
+  .input(z.object({ email: z.email() }))
   // 🎉 extend the previous input (only without refinements and transforms)
   .input(z.object({ password: z.string() }))
   .run(async ({ ctx: { t }, input: { email, password } }) => {
@@ -166,14 +166,14 @@ export const signUp = authAction
   .input(
     z
       .object({
-        email: z.string().email(),
+        email: z.email(),
         password: z.string(),
         confirm: z.string(),
       })
       .refine((data) => data.password === data.confirm, {
         message: "Passwords don't match",
         path: ["confirm"],
-      })
+      }),
   ) // if using refinement, only one input call is permited, as schema with ZodEffects is not extendable.
   .run(async ({ ctx: { t }, input: { email, password } }) => {
     // 🎉 passwords match!
@@ -193,35 +193,42 @@ export const signUp = authAction
 The `formAction` builder supports action arguments binding:
 
 ```ts
-// app/update-user/[userId]/action.tsx
+// app/[locale]/update-user/[userId]/action.tsx
 import { formAction } from "react-form-action";
 
 export const updateUser = formAction
-  .args([z.string().uuid()])
+  .args([z.string().uuid(), z.enum("fr", "en")])
   .run(async ({ args: [userId] }) => {
     return userId;
     //     ^? string
+  })
+  .error(({ args: [_, locale] }) => {
+    return locale === "fr"
+      ? "Échec de la mise à jour de l'utilisateur"
+      : "Failed to update user";
   });
 ```
 
 ```tsx
-// app/update-user/[userId]/page.tsx
+// app/[locale]/update-user/[userId]/page.tsx
 import { Action } from "react-form-action/client";
 
+import { locale as localeParam } from "next/root-params";
 import { updateUser } from "./action";
 import { UpdateUserForm } from "./form";
 
 export default function Page({
   params,
-}: {
-  params: Promise<{ userId: string }>;
-}) {
+}: PageProps<"/[locale]/update-user/[userId]">) {
+  const locale = await localeParam();
   const { userId } = await params;
 
-  const action = updateUser.bind(null, userId);
-
   return (
-    <Action action={action} initialData="">
+    <Action
+      action={updateUser}
+      args={[userId, await localeParam()]}
+      initialData=""
+    >
       <SubscribeForm />
     </Action>
   );
@@ -291,7 +298,7 @@ export const updateUser = createFormAction<
 
       return failure({ message: "Failed to update user." });
     }
-  }
+  },
 );
 ```
 
@@ -301,7 +308,7 @@ The action creator supports arguments binding:
 export const updateUser = createFormAction(
   (
     { success, failure, invalid },
-    userId: string /* Here you can specify multiple arguments */
+    userId: string /* Here you can specify multiple arguments */,
   ) =>
     async (prevState, formData) => {
       try {
@@ -327,7 +334,7 @@ export const updateUser = createFormAction(
       } catch (error) {
         // handle error
       }
-    }
+    },
 );
 
 // call bind as usuall, the "123" becomes the "userId"
@@ -421,7 +428,7 @@ export const signUpAction = authAction
     z
       .object({
         user: z.object({
-          email: z.string().email(),
+          email: z.email(),
           name: z.string(),
         }),
         password: z.string().min(8),
@@ -429,7 +436,7 @@ export const signUpAction = authAction
       })
       .refine((data) => data.password === data.confirm, {
         message: "Passwords don't match",
-      })
+      }),
   )
   .run(async ({ ctx, input }) => {
     return null;

package/dist/client.d.mts

@@ -3,10 +3,16 @@ import React__default, { PropsWithChildren, JSX } from 'react';
 import { F as FormAction, A as ActionState, I as InitialState, a as InvalidState, b as FailureState, S as SuccessState } from './createFormAction-DjhozgiG.mjs';
 import { $ZodErrorTree } from 'zod/v4/core';
 
-type ActionProps<Data, Error, ValidationError> = PropsWithChildren<{
-    action: FormAction<Data, Error, ValidationError>;
+type ActionProps<Data, Error, ValidationError, Arguments extends unknown[] = []> = PropsWithChildren<Arguments extends [unknown] ? {
+    action: FormAction<Data, Error, ValidationError, FormData, Arguments>;
+    args: Arguments;
     initialData: Data;
     permalink?: string;
+} : {
+    action: FormAction<Data, Error, ValidationError, FormData, Arguments>;
+    initialData: Data;
+    args?: undefined;
+    permalink?: string;
 }>;
 type ActionStatusFlags<T extends ActionState<unknown, unknown, unknown>["type"] | unknown = unknown> = {
     isInitial: T extends "initial" ? true : false;
@@ -28,8 +34,8 @@ type SpreadActionContext<Data = unknown, Error = unknown, ValidationError = unkn
 /**
  * A hook to consume the form action state from the context.
  */
-declare function useActionContext<Data, Error, ValidationError>(action?: FormAction<Data, Error, ValidationError>): SpreadActionContext<Data, Error, ValidationError>;
-declare function Action<Data, Error, ValidationError>({ children, action: formAction, initialData, permalink, }: ActionProps<Data, Error, ValidationError>): React__default.JSX.Element;
+declare function useActionContext<Data, Error, ValidationError, Args extends unknown[] = []>(action?: FormAction<Data, Error, ValidationError, FormData, Args>): SpreadActionContext<Data, Error, ValidationError>;
+declare function Action<Data, Error, ValidationError, Args extends unknown[] = []>({ children, action: formAction, initialData, args, permalink, }: ActionProps<Data, Error, ValidationError, Args>): React__default.JSX.Element;
 
 type FormProps = Omit<JSX.IntrinsicElements["form"], "action"> & {
     /**
@@ -65,7 +71,7 @@ declare function ZodFieldError<Errors extends $ZodErrorTree<object>, Name extend
 /**
  * Creates a typed components for actions created with the formAction builder.
  */
-declare function createComponents<Data, Error, ValidationError extends $ZodErrorTree<any>>(action: FormAction<Data, Error, ValidationError>): {
+declare function createComponents<Data, Error, ValidationError extends $ZodErrorTree<any>, Args extends unknown[] = []>(action: FormAction<Data, Error, ValidationError, FormData, Args>): {
     FieldError: <Name extends "" | InferZodErrorPaths<ValidationError>>({ name, children, }: {
         name: Name;
         children?: (props: ZodFieldErrorChildrenProps<Name>) => React__default.ReactNode;
@@ -79,6 +85,15 @@ declare function createComponents<Data, Error, ValidationError extends $ZodError
             data: Data;
         }) => React__default.ReactNode;
     }) => React__default.ReactNode;
+    Invalid: ({ children, }: PropsWithChildren | {
+        children?: (props: {
+            isInvalid: false;
+            validationError: null;
+        } | {
+            isInvalid: true;
+            validationError: ValidationError;
+        }) => React__default.ReactNode;
+    }) => React__default.ReactNode;
 };
 
 /**

package/dist/client.mjs

@@ -1 +1 @@
-"use client";import{a as u}from"./chunk-LPB4R2UB.mjs";import S from"react";import{createContext as A,use as P}from"react";import{useActionState as y}from"react";var c={isInitial:!1,isInvalid:!1,isFailure:!1,isSuccess:!1},m=A(null);function a(o){let t=P(m);if(!t)throw new Error("ActionContext must be initialized before use. Is your useActionContext hook wrapped with an <Action> Component?");return t}function b({children:o,action:t,initialData:i,permalink:e}){let[r,n,s]=y(t,u(i),e),d=r.type==="initial"?{...r,...c,action:n,isPending:s,isInitial:!0}:r.type==="invalid"?{...r,...c,action:n,isPending:s,isInvalid:!0}:r.type==="failure"?{...r,...c,action:n,isPending:s,isFailure:!0}:{...r,...c,action:n,isPending:s,isSuccess:!0};return S.createElement(m,{value:d},o)}import h,{startTransition as F}from"react";function I({autoReset:o=!1,...t}){let{action:i}=a();return h.createElement("form",{...o?{action:i}:{onSubmit:r=>{r.preventDefault();let n=r.currentTarget;F(()=>{i(new FormData(n))})}},...t})}import p from"react";import f from"react";var C=".",l=Object.freeze({errors:Object.freeze([])});function E({errors:o,name:t,children:i=({error:e})=>f.createElement(f.Fragment,null,e)}){if(t.length===0)return i({name:t,error:o.errors[0],errors:o.errors});let e=t.split(C),r=o;for(;e.length;){let n=e.shift();if(!r.properties){r=l;break}r=r.properties[n]??l}return i({name:t,error:r.errors[0],errors:r.errors})}function J(o){function t({name:e,children:r}){let{isInvalid:n,validationError:s}=a(o);return p.createElement(E,{errors:s??l,name:e},r??(({error:x})=>n&&p.createElement(p.Fragment,null,x)))}function i({children:e}){let{isSuccess:r,data:n}=a(o);return typeof e=="function"?e(r?{isSuccess:r,data:n}:{isSuccess:r,data:n}):r&&e}return{FieldError:t,Success:i}}function q({children:o}){let{isPending:t}=a();return typeof o=="function"?o({isPending:t}):t&&o}export{b as Action,I as Form,q as Pending,E as ZodFieldError,J as createComponents,l as noError,a as useActionContext};
+"use client";import{a as f}from"./chunk-LPB4R2UB.mjs";import S from"react";import{useActionState as F,createContext as P,use as y}from"react";var c={isInitial:!1,isInvalid:!1,isFailure:!1,isSuccess:!1},E=P(null);function s(e){let t=y(E);if(!t)throw new Error("ActionContext must be initialized before use. Is your useActionContext hook wrapped with an <Action> Component?");return t}function v({children:e,action:t,initialData:a,args:i,permalink:r}){let o=i?t.bind(null,...i):t,[n,l,d]=F(o,f(a),r),u=n.type==="initial"?{...n,...c,action:l,isPending:d,isInitial:!0}:n.type==="invalid"?{...n,...c,action:l,isPending:d,isInvalid:!0}:n.type==="failure"?{...n,...c,action:l,isPending:d,isFailure:!0}:{...n,...c,action:l,isPending:d,isSuccess:!0};return S.createElement(E,{value:u},e)}import h,{startTransition as g}from"react";function I({autoReset:e=!1,...t}){let{action:a}=s();return h.createElement("form",{...e?{action:a}:{onSubmit:r=>{r.preventDefault();let o=r.currentTarget;g(()=>{a(new FormData(o))})}},...t})}import m from"react";import x from"react";var C=".",p=Object.freeze({errors:Object.freeze([])});function A({errors:e,name:t,children:a=({error:i})=>x.createElement(x.Fragment,null,i)}){if(t.length===0)return a({name:t,error:e.errors[0],errors:e.errors});let i=t.split(C),r=e;for(;i.length;){let o=i.shift();if(!r.properties){r=p;break}r=r.properties[o]??p}return a({name:t,error:r.errors[0],errors:r.errors})}function J(e){function t({name:r,children:o}){let{isInvalid:n,validationError:l}=s(e);return m.createElement(A,{errors:l??p,name:r},o??(({error:u})=>n&&m.createElement(m.Fragment,null,u)))}function a({children:r}){let{isSuccess:o,data:n}=s(e);return typeof r=="function"?r(o?{isSuccess:o,data:n}:{isSuccess:o,data:n}):o&&r}function i({children:r}){let{isInvalid:o,validationError:n}=s(e);return typeof r=="function"?r(o?{isInvalid:o,validationError:n}:{isInvalid:o,validationError:n}):o&&r}return{FieldError:t,Success:a,Invalid:i}}function q({children:e}){let{isPending:t}=s();return typeof e=="function"?e({isPending:t}):t&&e}export{v as Action,I as Form,q as Pending,A as ZodFieldError,J as createComponents,p as noError,s as useActionContext};

package/dist/index.d.mts

@@ -9,9 +9,10 @@ type Flatten<T> = Identity<{
     [K in keyof T]: T[K];
 }>;
 type Identity<T> = T;
-type ErrorHandler<Context, Err> = (params: {
+type ErrorHandler<Context, Err, Args extends ZodTuple> = (params: {
     error: unknown;
     ctx: Context;
+    args: z.infer<Args>;
 }) => Promise<Err>;
 type InitialContext = Record<"formData", FormData>;
 /**
@@ -60,7 +61,7 @@ type FormActionBuilder<Schema extends ZodType | EmptyInput, TErr = unknown, Cont
      * @param processError A function which receives action's errors.
      * @returns FormActionBuilder
      */
-    error: <TErr>(processError: ErrorHandler<Context, TErr>) => FormActionBuilder<Schema, TErr, Context, Args>;
+    error: <TErr>(processError: ErrorHandler<Context, TErr, Args>) => FormActionBuilder<Schema, TErr, Context, Args>;
 };
 declare const formAction: FormActionBuilder<typeof emptyInput, unknown, InitialContext, z.ZodTuple<[], null>>;
 

package/dist/index.mjs

@@ -1 +1 @@
-import{a as h,b as f}from"./chunk-LPB4R2UB.mjs";import{z as T}from"zod/v4";import{zfd as g}from"zod-form-data";var m=Symbol();function c(e,s=[],n,a){async function A(t){let r={formData:t};for(let i of s){let u=await i({ctx:r});r={...r,...u}}return r}return{args(t){return c(e,s,n,T.tuple(t))},input(t){if(e===m)return c(t,s,n,a);if(e._zod.def.checks)throw new Error("Previous input is not augmentable because it contains an effect.");if(t._zod.def.checks)throw new Error("Your input contains effect which prevents merging it with the previous inputs.");if(e._zod.def.type==="object"){let r=T.object({...e.shape,...t.shape});return c(r,s)}else throw Error("Merging inputs works only for object schemas without effects.")},use(t){return c(e,[...s,t],n,a)},error(t){return c(e,s,t,a)},run:e===m?t=>f(({success:r,failure:i,invalid:u},...d)=>async(E,y)=>{let p=await A(y);if(a){let o=a.safeParse(d);if(!o.success)return u(T.treeifyError(o.error))}try{return r(await t({args:d,ctx:p}))}catch(o){if(n)return i(await n({error:o,ctx:p}));throw o}}):e===m?void 0:t=>f(({success:r,failure:i,invalid:u},...d)=>{let E=g.formData(e);return async(y,p)=>{let o=await A(p);if(a){let x=a.safeParse(d);if(!x.success)return u(T.treeifyError(x.error))}let l=E.safeParse(p);if(!l.success)return u(T.treeifyError(l.error));let C=l.data;try{return r(await t({args:d,input:C,ctx:o}))}catch(x){if(n)return i(await n({error:x,ctx:o}));throw x}}})}}var j=c(m);export{f as createFormAction,j as formAction,h as initial};
+import{a as h,b as f}from"./chunk-LPB4R2UB.mjs";import{z as T}from"zod/v4";import{zfd as C}from"zod-form-data";var m=Symbol();function c(e,u=[],n,a){async function A(t){let r={formData:t};for(let d of u){let i=await d({ctx:r});r={...r,...i}}return r}return{args(t){return c(e,u,n,T.tuple(t))},input(t){if(e===m)return c(t,u,n,a);if(e._zod.def.checks)throw new Error("Previous input is not augmentable because it contains an effect.");if(t._zod.def.checks)throw new Error("Your input contains effect which prevents merging it with the previous inputs.");if(e._zod.def.type==="object"){let r=T.object({...e.shape,...t.shape});return c(r,u)}else throw Error("Merging inputs works only for object schemas without effects.")},use(t){return c(e,[...u,t],n,a)},error(t){return c(e,u,t,a)},run:e===m?t=>f(({success:r,failure:d,invalid:i},...s)=>async(E,g)=>{let p=await A(g);if(a){let o=a.safeParse(s);if(!o.success)return i(T.treeifyError(o.error))}try{return r(await t({args:s,ctx:p}))}catch(o){if(n)return d(await n({args:s,error:o,ctx:p}));throw o}}):e===m?void 0:t=>f(({success:r,failure:d,invalid:i},...s)=>{let E=C.formData(e);return async(g,p)=>{let o=await A(p);if(a){let x=a.safeParse(s);if(!x.success)return i(T.treeifyError(x.error))}let l=E.safeParse(p);if(!l.success)return i(T.treeifyError(l.error));let y=l.data;try{return r(await t({args:s,input:y,ctx:o}))}catch(x){if(n)return d(await n({args:s,error:x,ctx:o}));throw x}}})}}var j=c(m);export{f as createFormAction,j as formAction,h as initial};

package/package.json

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