react-form-action 2.4.0 → 2.4.2

package/README.md

@@ -8,6 +8,7 @@ End-to-end typesafe success, error & validation state control for Next.js form a
 
 - ✅ Provides envelope objects with `"initial" | "invalid" | "success" | "failure"` response types.
 - ✅ Define generic payload for each of the response type.
+- ✅ Bind action arguments.
 
 **tRPC-like Form Action builder**
 
@@ -250,6 +251,45 @@ export const updateUser = createFormAction<
 );
 ```
 
+The action creator supports arguments binding:
+
+```ts
+export const updateUser = createFormAction(
+  (
+    { success, failure, invalid },
+    userId: string /* Here you can specify multiple arguments */
+  ) =>
+    async (prevState, formData) => {
+      try {
+        const { name } = updateUserSchema.parse({
+          name: formData.get("name"),
+        });
+
+        const user = await db.users.findById(userId);
+
+        if (!user) {
+          return failure({ message: "No such user." });
+        }
+
+        const updated = await user.update({ name });
+
+        if (updated) {
+          return success({
+            message: "User has been updated.",
+          });
+        } else {
+          return failure({ message: "Failed to update." });
+        }
+      } catch (error) {
+        // handle error
+      }
+    }
+);
+
+// call bind as usuall, the "123" becomes the "userId"
+updateUser.bind(null, "123");
+```
+
 ### Action Context
 
 The `<Action>` components enables you to access your `action`'s state with the `useActionContext()` hook:

package/dist/chunk-LPB4R2UB.mjs

@@ -0,0 +1 @@
+function u(a){return{type:"initial",data:a,error:null,validationError:null}}function d(a){function t(r){return{type:"success",data:r,error:null,validationError:null}}function o(r){return{type:"failure",data:null,error:r,validationError:null}}function n(r){return{type:"invalid",data:null,error:null,validationError:r}}return(...r)=>{let e=r.pop(),i=r.pop(),l=[...r];return a({success:t,failure:o,invalid:n},...l)(i,e)}}export{u as a,d as b};

package/dist/client.d.mts

@@ -1,9 +1,8 @@
 import * as React from 'react';
 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-CX4Fk5xA.mjs';
+import { F as FormAction, A as ActionState, I as InitialState, a as InvalidState, b as FailureState, S as SuccessState } from './createFormAction-DjhozgiG.mjs';
 import { ZodFormattedError } from 'zod';
 import { RenderProp, RP } from 'react-render-prop-type';
-import { useFormStatus } from 'react-dom';
 
 type ActionProps<Data, Error, ValidationError> = PropsWithChildren<{
     action: FormAction<Data, Error, ValidationError>;
@@ -79,8 +78,6 @@ declare function createComponents<Data, Error, ValidationError extends ZodFormat
     }>) => React__default.ReactNode;
 };
 
-declare function FormStatus({ children, }: RenderProp<ReturnType<typeof useFormStatus>>): React.ReactNode;
-
 /**
  * Conditionally renders the children, when the form action is in the "pending" state.
  */
@@ -88,4 +85,4 @@ declare function Pending({ children, }: PropsWithChildren | RP<{
     isPending: boolean;
 }>): React.ReactNode;
 
-export { Action, type ActionContextState, type ActionProps, Form, type FormProps, FormStatus, type InferZodErrorPaths, type Paths, Pending, ZodFieldError, type ZodFieldErrorChildrenProps, type ZodFieldErrorProps, createComponents, noError, useActionContext };
+export { Action, type ActionContextState, type ActionProps, Form, type FormProps, type InferZodErrorPaths, type Paths, Pending, ZodFieldError, type ZodFieldErrorChildrenProps, type ZodFieldErrorProps, createComponents, noError, useActionContext };

package/dist/client.mjs

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

package/dist/{createFormAction-CX4Fk5xA.d.mts → createFormAction-DjhozgiG.d.mts}

@@ -23,12 +23,16 @@ type SuccessState<T> = {
     validationError: null;
 };
 type ActionState<Data, Error, ValidationError = Record<string, never>> = InitialState<Data> | InvalidState<ValidationError> | FailureState<Error> | SuccessState<Data>;
-type FormAction<Data, Error = Data, ValidationError = Record<string, never>, Payload = FormData> = (state: ActionState<Data, Error, ValidationError>, payload: Payload) => Promise<ActionState<Data, Error, ValidationError>>;
+type FormAction<Data, Error = Data, ValidationError = Record<string, never>, Payload = FormData, Arguments extends unknown[] = []> = (...args: [
+    ...Arguments,
+    state: ActionState<Data, Error, ValidationError>,
+    payload: Payload
+]) => Promise<ActionState<Data, Error, ValidationError>>;
 declare function initial<Data>(data: Data): InitialState<Data>;
-declare function createFormAction<Data, Error = Data, ValidationError = Record<string, never>, Payload = FormData>(formAction: (params: {
+declare function createFormAction<Data, Error = Data, ValidationError = Record<string, never>, Payload = FormData, Arguments extends [...unknown[]] = []>(formAction: (params: {
     success: (data: Data) => SuccessState<Data>;
     failure: (error: Error) => FailureState<Error>;
     invalid: (validationError: ValidationError) => InvalidState<ValidationError>;
-}) => FormAction<Data, Error, ValidationError, Payload>): (state: ActionState<Data, Error, ValidationError>, payload: Payload) => Promise<ActionState<Data, Error, ValidationError>>;
+}, ...args: Arguments) => FormAction<Data, Error, ValidationError, Payload>): (...args: [...Arguments, state: ActionState<Data, Error, ValidationError>, payload: Payload]) => Promise<ActionState<Data, Error, ValidationError>>;
 
 export { type ActionState as A, type FormAction as F, type InitialState as I, type SuccessState as S, type InvalidState as a, type FailureState as b, createFormAction as c, initial as i };

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { A as ActionState, a as InvalidState, b as FailureState, S as SuccessState } from './createFormAction-CX4Fk5xA.mjs';
-export { F as FormAction, I as InitialState, c as createFormAction, i as initial } from './createFormAction-CX4Fk5xA.mjs';
+import { A as ActionState, a as InvalidState, b as FailureState, S as SuccessState } from './createFormAction-DjhozgiG.mjs';
+export { F as FormAction, I as InitialState, c as createFormAction, i as initial } from './createFormAction-DjhozgiG.mjs';
 import { ZodTypeAny, ZodType, ZodObject, ZodRawShape, objectUtil, z, ZodSchema, ZodEffects } from 'zod';
 
 declare const emptyInput: unique symbol;
@@ -34,7 +34,7 @@ type FormActionBuilder<Schema extends ZodTypeAny | EmptyInput, Err = Error, Cont
      * @param action async function to execute. It will receive parsed formData as input, when the builder was initialized with a schema.
      * @returns runnable server action exportable from a module.
      */
-    run: Schema extends ZodTypeAny ? <Data>(action: SchemaAction<Data, Context, Schema>) => (state: ActionState<Data, Err, z.inferFormattedError<Schema>>, payload: FormData) => Promise<Flatten<InvalidState<z.inferFormattedError<Schema>> | FailureState<Err> | SuccessState<Data>>> : <Data>(action: Action<Data, Context>) => (state: ActionState<Data, Err>, payload: FormData) => Promise<Flatten<FailureState<Err> | SuccessState<Data>>>;
+    run: Schema extends ZodTypeAny ? <Data>(action: SchemaAction<Data, Flatten<Context>, Schema>) => (state: ActionState<Data, Err, z.inferFormattedError<Schema>>, payload: FormData) => Promise<Flatten<InvalidState<z.inferFormattedError<Schema>> | FailureState<Err> | SuccessState<Data>>> : <Data>(action: Action<Data, Flatten<Context>>) => (state: ActionState<Data, Err>, payload: FormData) => Promise<Flatten<FailureState<Err> | SuccessState<Data>>>;
     /**
      * A chainable context enhancing helper.
      * @param middleware A function which receives the current context, and returns an object which will be added to the context.

package/dist/index.mjs

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

package/package.json

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

package/dist/chunk-HL47DG4L.mjs

@@ -1 +0,0 @@
-function l(a){return{type:"initial",data:a,error:null,validationError:null}}function n(a){function t(r){return{type:"success",data:r,error:null,validationError:null}}function o(r){return{type:"failure",data:null,error:r,validationError:null}}function i(r){return{type:"invalid",data:null,error:null,validationError:r}}return(r,e)=>a({success:t,failure:o,invalid:i})(r,e)}export{l as a,n as b};