react-form-action 1.4.1 → 2.0.0

package/README.md

@@ -1,28 +1,29 @@
 # react-form-action
 
-End-to-end typesafe success, error & validation state control for Next.js 14 form actions.
+End-to-end typesafe success, error & validation state control for Next.js form actions.
 
 ## Features
 
 **Action Creator**
 
-- ✅ Provides `"invalid" | "success" | "failure"` response objects.
+- ✅ Provides envelope objects with `"initial" | "invalid" | "success" | "failure"` response types.
 - ✅ Define generic payload for each of the response type.
 
-**Form Action builder**
+**tRPC-like Form Action builder**
 
-- ✅ tRPC-like builder API for `.input(zodSchema)` & context `.use(middleware)`
-- ✅ Parses `formData` with [`zod-form-data`](https://www.npmjs.com/package/zod-form-data)
+- ✅ Define payload schema with the `.input(zodSchema)` to validate the `formData`
+- ✅ Reuse business logic with the `.use(middleware)` method.
+- ✅ Reuse error handling with the `.error(handler)`.
 
-**Stateful `<Form />`**
+**React Context access with the `<Action action={myFormAction} />` component**
 
-- ✅ `<Form />` component reads the action's response.
-- ✅ Computes progress meta-state like `isInvalid`, `isSuccess` and more.
+- ✅ The `useActionState()` accessible via the `useActionContext()` hook.
+- ✅ Computes progress flags like `isInvalid`, `isSuccess` based on the envelope type.
 
-**Context**
+**Context-bound `<Form />` component**
 
-- ✅ Access the action state via `useFormContext()` hook.
-- ✅ Keeps JSX markup free of render-props.
+- ✅ Reads the `action` from the `<Action />` context.
+- ✅ Opt-out from the default form reset after action submit.
 
 ## Install
 
@@ -34,10 +35,95 @@ npm i react-form-action zod-form-data
   <img alt="NPM Version" src="https://img.shields.io/npm/v/react-form-action?style=for-the-badge&labelColor=24292e">
 </a>
 
+## Getting Started
+
+#### 1️⃣ Create a Server Action
+
+```tsx
+// app/subscibe/action.ts
+"use server";
+
+import { formAction } from "react-form-action";
+import { z } from "zod";
+
+export const subscribeAction = formAction
+  .input(z.object({ email: z.string().email() }))
+  .run(async ({ input }) => {
+    return input.email;
+  });
+```
+
+#### 2️⃣ Create a Client Form Component
+
+```tsx
+// app/subscibe/SubscribeForm.tsx
+"use client";
+
+import {
+  Action,
+  Form,
+  Pending,
+  useActionContext,
+} from "react-form-action/client";
+
+import { subscribeAction } from "./action";
+
+const { FieldError } = createComponents(subscribeAction);
+
+export function SubscribeForm() {
+  return (
+    <Action action={subscribeAction} initialData="">
+      <SuccessMessage />
+      <Form>
+        <input name="email" />
+        {/*💡 The name prop supports autocompletion */}
+        <FieldError name="email" />
+      </Form>
+      <SubmitButton />
+      <Pending>Please wait...</Pending>
+    </Action>
+  );
+}
+
+function SuccessMessage() {
+  // Pass action to cast the type of the "data" value
+  const { isSuccess, data } = useActionContext(subscribeAction);
+
+  return isSuccess && <p>Email {data} was registered.</p>;
+}
+
+function SubmitButton() {
+  // no need for action when reading a generic value
+  const { isPending } = useActionContext();
+
+  return (
+    <button type="submit" disabled={isPending}>
+      {isPending ? "Submitting..." : "Submit"}
+    </button>
+  );
+}
+```
+
+#### 3️⃣ Render the form on a Page
+
+```tsx
+// app/subscibe/page.tsx
+
+import { SubscribeForm } from "./SubscribeForm";
+
+function SuccessMessage() {}
+
+export function Page() {
+  return <SubscribeForm />;
+}
+```
+
 ## Usage
 
 ### `formAction` builder
 
+The [`zod-form-data`](https://www.npmjs.com/package/zod-form-data) powered action builder.
+
 ```ts
 // app/actions/auth.ts
 "use server";
@@ -105,7 +191,9 @@ export const signUp = authAction
   });
 ```
 
-### Server Action (usable in Next.js)
+### Action Creator
+
+Low-level action creator, which provides the `success`, `failure` and `invalid` envelope constructors. With the `createFormAction` you must handle the native `FormData` by yourself.
 
 ```ts
 "use server";
@@ -170,61 +258,21 @@ export const updateUser = createFormAction<
 );
 ```
 
-### `<Form>` Component
+### Action Context
 
-```tsx
-"use client";
-// Form connects the formAction to the formState & provides the meta state props via render prop
-import { Form } from "react-form-action/client";
-
-import { updateUser } from "@/actions";
-
-export function UpdateUserForm() {
-  return (
-    <Form action={updateUser} initialData="foobar">
-      {({
-        error,
-        data,
-        validationError,
-        isPending,
-        isFailure,
-        isInvalid,
-        isSuccess,
-        isInitial,
-      }) => (
-        <>
-          {/* safely access the data or error by checking the mutually exclusive boolean flags: */}
-          {isSuccess && <p className="success-message">{data}</p>}
-          {isFailure && <p className="error-message">{error.message}</p>}
-          <input type="text" name="name" disabled={isPending} />
-          {isInvalid && (
-            <span className="input-error">{validationError.name}</span>
-          )}
-
-          <button disabled={isPending}>
-            {isPending ? "Submitting..." : "Submit"}
-          </button>
-        </>
-      )}
-    </Form>
-  );
-}
-```
-
-### Context Form
+The `<Action>` components enables you to access your `action`'s state with the `useActionContext()` hook:
 
 ```tsx
-// Example route: /app/auth/signup/SignUpForm.tsx
+// 👉 Define standalone client form component (e.g. /app/auth/signup/SignUpForm.tsx)
 "use client";
 
-import { createForm, Pending, useFormContext } from "react-form-action/client";
-import { signupAction } from "./actions";
+import { Action, Form, useActionContext } from "react-form-action/client";
+import type { PropsWithChildren } from "react";
 
-// This call will succeed only in client component
-const { Form } = createForm(signupAction);
+import { signupAction } from "./action";
 
-function Error() {
-  // read any state from the FormContext:
+function Pending({ children }: PropsWithChildren) {
+  // read any state from the ActionContext:
   const {
     error,
     data,
@@ -233,36 +281,64 @@ function Error() {
     isFailure,
     isInvalid,
     isSuccess,
-    isInitial
-  } = useFormContext();
+    isInitial,
+  } = useActionContext();
 
-  return isFailure && "Failed to submit". // use the error somehow
+  return isPending && children;
 }
 
-// render this form on your RSC page (/app/auth/signup/page.tsx)
+// 💡 render this form on your RSC page (/app/auth/signup/page.tsx)
 export function SignupForm() {
-  // This Form does not use render props.
   return (
-    <Form>
-      <input name="email" />
-      <input name="password" />
+    <Action action={signupAction}>
+      <Form>
+        <input name="email" />
+        <input name="password" />
+      </Form>
+      {/* 🎆 Read the pending state outside the <Form> */}
       <Pending>
-        {/* This renders only when the action is pending. */}
+        {/* This renders only when the action is pending. 😎 */}
         <p>Please wait...</p>
       </Pending>
-    </Form>
+    </Action>
   );
 }
 ```
 
-### `<ZodFieldError>` Component
+### `<Form>` Component
 
-Actions created with `formAction` builder will have the `validationError` of [`ZodFormattedError`](https://zod.dev/ERROR_HANDLING?id=formatting-errors) type.
-To easily access the nested error, use the helper `<ZodFieldError>` component:
+The `<form>` submits the action in `onSubmit` handler to [prevent automatic form reset](https://github.com/facebook/react/issues/29034).
+Pass `autoReset` prop to use the `action` prop instead and keep the default reset.
 
 ```tsx
 "use client";
-import { Form, ZodFieldError } from "react-form-action/client";
+
+import { Action, Form } from "react-form-action/client";
+
+import { updateUser } from "./action";
+
+export function UpdateUserForm() {
+  return (
+    <Action action={updateUser}>
+      <Form autoReset>{/* ... */}</Form>
+    </Action>
+  );
+}
+```
+
+### Context Bound Components `createComponents()`
+
+Use the `createComponents(action)` helper to create components which use the ActionContext and have types bound to the action type.
+
+### `<FielError>` Component
+
+```tsx
+"use client";
+
+// ⚠️ createComponents is usable only in "use client" components
+import { Form, createComponents } from "react-form-action/client";
+
+import { authAction } from "./actions";
 
 export const signUp = authAction
   .input(
@@ -280,51 +356,47 @@ export const signUp = authAction
       })
   )
   .run(async ({ ctx, input }) => {
-    // implementation
+    return null;
   });
 
+// 🌟 The FieldError is now bound do the signUp input schema which allows autocompletion for its "name" prop
+// ⚠️ Usable only with actions created with the formAction builder
+const { FieldError } = createComponents(signUp);
+
 export function SignUpForm() {
   return (
-    <Form action={signUp} initialData="">
-      {({ isInvalid, validationError }) =>
-        {/* Render ZodFieldError behind the isInvalid flag to narrow type (omits the possibility of null) */}
-        isInvalid && (
-          <>
-            {/*
-              When the "name" prop is ommited, the top-level error will be rendered e.g.:
-              "Passwords don't match"
-            */}
-            <ZodFieldError errors={validationError} />
-            {/* Access fields by their name: */}
-            <ZodFieldError errors={validationError} name="password" />
-            {/* Access nested fields by dot access notation: */}
-            <ZodFieldError errors={validationError} name="user.email" />
-          </>
-        )
-      }
-    </Form>
+    <Action action={signUp} initialData={null}>
+      <Form>
+        {/* 1️⃣ When the "name" prop is ommited, the top-level error will be rendered e.g.:
+          "Passwords don't match" */}
+        <FieldError />
+        {/* 2️⃣ Access fields by their name: */}
+        <FieldError name="password" />
+        {/* 3️⃣ Access nested fields by dot access notation: */}
+        <FieldError name="user.email" />
+      </Form>
+    </Action>
   );
 }
 ```
 
-### Bonus `<FormStatus>`
+### `<Pending>`
 
-The `useFormStatus` hook data exposed via render prop:
+Render children when the action is pending:
 
 ```tsx
-import { FormStatus } from "react-form-action/client";
+import { Action, Pending } from "react-form-action/client";
 
-// <FormStatus> alleviates the need to create a separate <SubmitButton> component using the useFormStatus hook
+import { Spinner } from "./components";
 
 return function MyForm() {
   return (
-    <form action={action}>
-      <FormStatus>
-        {({ pending }) => (
-          <button type="submit">{pending ? "Submitting..." : "Submit"} </button>
-        )}
-      </FormStatus>
-    </form>
+    <Action action={action}>
+      {/* 👉 Unlike the React.useFormStatus() hook, we don't need here the <form> element at all. */}
+      <Pending>
+        <Spinner />
+      </Pending>
+    </Action>
   );
 };
 ```

package/dist/chunk-HL47DG4L.mjs

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

package/dist/client.d.mts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import React__default, { PropsWithChildren, FormHTMLAttributes } from 'react';
-import { b as FormAction, A as ActionState, a as InitialState, I as InvalidState, F as FailureState, S as SuccessState } from './createFormAction-4e719362.js';
+import { b as FormAction, A as ActionState, a as InitialState, I as InvalidState, F as FailureState, S as SuccessState } from './createFormAction-277e6e21.js';
+import { ZodFormattedError } from 'zod';
 import { RenderProp } from 'react-render-prop-type';
 import { useFormStatus } from 'react-dom';
-import { ZodFormattedError } from 'zod';
 
 type ActionProps<Data, Error, ValidationError> = PropsWithChildren<{
     action: FormAction<Data, Error, ValidationError>;
@@ -23,10 +23,14 @@ type ActionContextState<T extends ActionState<unknown, unknown, unknown>> = T &
     action: (payload: FormData) => void;
     isPending: boolean;
 };
+/**
+ * NOTE: ActionContextState<ActionState<...>> would not allow discriminate the union inside of the ActionState.
+ */
+type SpreadActionContext<Data = unknown, Error = unknown, ValidationError = unknown> = ActionContextState<InitialState<Data>> | ActionContextState<InvalidState<ValidationError>> | ActionContextState<FailureState<Error>> | ActionContextState<SuccessState<Data>>;
 /**
  * A hook to consume the form action state from the context.
  */
-declare const useActionContext: () => ActionContextState<ActionState<unknown, unknown, unknown>>;
+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;
 
 type ActionFormProps = Omit<FormHTMLAttributes<HTMLFormElement>, "action"> & {
@@ -40,57 +44,6 @@ type ActionFormProps = Omit<FormHTMLAttributes<HTMLFormElement>, "action"> & {
 };
 declare function ActionForm({ autoReset, ...props }: ActionFormProps): React__default.JSX.Element;
 
-/**
- * Creates a Form component which state is accessible via context - useFormContext() hook.
- */
-declare function createForm<Data, Error = Data, ValidationError = Record<string, never>>(action: FormAction<Data, Error, ValidationError>): {
-    Form: ({ children, ...props }: PropsWithChildren<{
-        initialData: Data;
-    }>) => React__default.JSX.Element;
-};
-
-type FormStateProps<Data, Error, ValidationError, Payload> = {
-    action: (state: ActionState<Data, Error, ValidationError>, payload: Payload) => Promise<ActionState<Data, Error, ValidationError>>;
-    initialData: Data;
-    permalink?: string;
-    /**
-     * Opt-in into automatic form reset by using the form "action" prop.
-     * By default, the onSubmit with a custom transition which opts-out of the implicit form reset.
-     * See for more. https://github.com/facebook/react/issues/29034
-     * @default false
-     */
-    autoReset?: boolean;
-};
-declare function initial<Data>(data: Data): InitialState<Data>;
-type FormStatusFlags<T extends ActionState<unknown, unknown, unknown>["type"] | unknown = unknown> = {
-    isInitial: T extends "initial" ? true : false;
-    isInvalid: T extends "invalid" ? true : false;
-    isFailure: T extends "failure" ? true : false;
-    isSuccess: T extends "success" ? true : false;
-};
-type FormMetaState<T extends ActionState<unknown, unknown, unknown>> = T & FormStatusFlags<T["type"]> & {
-    isPending: boolean;
-};
-type FormProps<Data, Error, ValidationError> = Omit<FormHTMLAttributes<HTMLFormElement>, "action" | "children"> & FormStateProps<Data, Error, ValidationError, FormData> & RenderProp<FormMetaState<InitialState<Data>> | FormMetaState<InvalidState<ValidationError>> | FormMetaState<FailureState<Error>> | FormMetaState<SuccessState<Data>>>;
-declare function Form<Data, Error, ValidationError>({ children, action, initialData, permalink, autoReset, ...props }: FormProps<Data, Error, ValidationError>): React__default.JSX.Element;
-
-/**
- * A context exposing the form action state.
- * @private You don't need to use this component directly. Use the `createForm` function instead.
- */
-declare const FormContext: React.Context<FormMetaState<ActionState<unknown, unknown, unknown>> | null>;
-/**
- * A hook to consume the form action state from the context.
- */
-declare const useFormContext: () => FormMetaState<ActionState<unknown, unknown, unknown>>;
-
-declare function FormStatus({ children, }: RenderProp<ReturnType<typeof useFormStatus>>): React.ReactNode;
-
-/**
- * Conditionally renders the children, when the form action is in the "pending" state.
- */
-declare function Pending({ children }: PropsWithChildren): React.ReactNode;
-
 declare const SEPARATOR: ".";
 type Paths<Err> = {
     [k in keyof Err]: k extends string ? Err[k] extends object ? `${k}${typeof SEPARATOR}${Paths<Err[k]>}` : k : never;
@@ -104,4 +57,20 @@ type ZodFieldErrorProps<Errors extends ZodFormattedError<any>> = {
 }>>;
 declare function ZodFieldError<Errors extends ZodFormattedError<any>>({ errors, name, children, }: ZodFieldErrorProps<Errors>): React__default.ReactNode;
 
-export { Action, ActionContextState, ActionForm, ActionFormProps, ActionProps, Form, FormContext, FormMetaState, FormProps, FormStateProps, FormStatus, InferZodErrorPaths, Paths, Pending, ZodFieldError, ZodFieldErrorProps, createForm, initial, useActionContext, useFormContext };
+/**
+ * Creates a typed components for actions created with the formAction builder.
+ */
+declare function createComponents<Data, Error, ValidationError extends ZodFormattedError<any>>(action: FormAction<Data, Error, ValidationError>): {
+    FieldError: ({ name, }: React__default.PropsWithChildren<{
+        name?: "" | InferZodErrorPaths<ValidationError> | undefined;
+    }>) => false | React__default.JSX.Element;
+};
+
+declare function FormStatus({ children, }: RenderProp<ReturnType<typeof useFormStatus>>): React.ReactNode;
+
+/**
+ * Conditionally renders the children, when the form action is in the "pending" state.
+ */
+declare function Pending({ children }: PropsWithChildren): React.ReactNode;
+
+export { Action, ActionContextState, ActionForm, ActionFormProps, ActionProps, FormStatus, InferZodErrorPaths, Paths, Pending, ZodFieldError, ZodFieldErrorProps, createComponents, useActionContext };

package/dist/client.mjs

@@ -1 +1 @@
-"use client";import k from"react";import{createContext as D,use as T}from"react";import{useActionState as w}from"react";function h(t){return{type:"initial",data:t,error:null,validationError:null}}var l={isInitial:!1,isInvalid:!1,isFailure:!1,isSuccess:!1},d=D(null),f=()=>{let t=T(d);if(!t)throw new Error("ActionContext must be initialized before use. Is your useActionContext hook wrapped with an <Action> Component?");return t};function _({children:t,action:e,initialData:n,permalink:a}){let[r,i,o]=w(e,h(n),a),s=r.type==="initial"?{...r,...l,action:i,isPending:o,isInitial:!0}:r.type==="invalid"?{...r,...l,action:i,isPending:o,isInvalid:!0}:r.type==="failure"?{...r,...l,action:i,isPending:o,isFailure:!0}:{...r,...l,action:i,isPending:o,isSuccess:!0};return k.createElement(d,{value:s},t)}import v,{startTransition as g}from"react";function G({autoReset:t=!1,...e}){let{action:n}=f();return v.createElement("form",{...t?{action:n}:{onSubmit:r=>{r.preventDefault();let i=r.currentTarget;g(()=>{n(new FormData(i))})}},...e})}import S from"react";import C,{useTransition as I}from"react";import{useActionState as b}from"react";function M(t){return{type:"initial",data:t,error:null,validationError:null}}var u={isInitial:!1,isInvalid:!1,isFailure:!1,isSuccess:!1};function F({children:t,action:e,initialData:n,permalink:a,autoReset:r=!1,...i}){let[o,s,m]=b(e,M(n),a),[,y]=I(),A=o.type==="initial"?{...o,...u,isPending:m,isInitial:!0}:o.type==="invalid"?{...o,...u,isPending:m,isInvalid:!0}:o.type==="failure"?{...o,...u,isPending:m,isFailure:!0}:{...o,...u,isPending:m,isSuccess:!0};return C.createElement("form",{...r?{action:s}:{onSubmit:p=>{p.preventDefault();let P=p.currentTarget;y(()=>{s(new FormData(P))})}},...i},t(A))}import{createContext as V,use as R}from"react";var c=V(null),E=()=>{let t=R(c);if(!t)throw new Error("Form Context must be initialized before use.");return t};function ot(t){return{Form:({children:n,...a})=>S.createElement(F,{action:t,...a},r=>S.createElement(c,{value:r},n))}}import{useFormStatus as Z}from"react-dom";function at({children:t}){return t(Z())}function mt({children:t}){let{isPending:e}=E();return e&&t}import x from"react";var H=".",L=Object.freeze({_errors:Object.freeze([])});function ct({errors:t,name:e="",children:n=({errors:a})=>x.createElement(x.Fragment,null,a[0])}){if(e.length===0)return n({errors:t._errors});let a=e.split(H),r=t;for(;a.length;){let i=a.shift();r=r[i]??L}return n({errors:r._errors})}export{_ as Action,G as ActionForm,F as Form,c as FormContext,at as FormStatus,mt as Pending,ct as ZodFieldError,ot as createForm,M as initial,f as useActionContext,E as useFormContext};
+"use client";import{a as p}from"./chunk-HL47DG4L.mjs";import f from"react";import{createContext as E,use as x}from"react";import{useActionState as A}from"react";var c={isInitial:!1,isInvalid:!1,isFailure:!1,isSuccess:!1},m=E(null);function a(t){let o=x(m);if(!o)throw new Error("ActionContext must be initialized before use. Is your useActionContext hook wrapped with an <Action> Component?");return o}function v({children:t,action:o,initialData:e,permalink:n}){let[r,i,s]=A(o,p(e),n),d=r.type==="initial"?{...r,...c,action:i,isPending:s,isInitial:!0}:r.type==="invalid"?{...r,...c,action:i,isPending:s,isInvalid:!0}:r.type==="failure"?{...r,...c,action:i,isPending:s,isFailure:!0}:{...r,...c,action:i,isPending:s,isSuccess:!0};return f.createElement(m,{value:d},t)}import F,{startTransition as y}from"react";function b({autoReset:t=!1,...o}){let{action:e}=a();return F.createElement("form",{...t?{action:e}:{onSubmit:r=>{r.preventDefault();let i=r.currentTarget;y(()=>{e(new FormData(i))})}},...o})}import h from"react";import l from"react";var S=".",P=Object.freeze({_errors:Object.freeze([])});function u({errors:t,name:o="",children:e=({errors:n})=>l.createElement(l.Fragment,null,n[0])}){if(o.length===0)return e({errors:t._errors});let n=o.split(S),r=t;for(;n.length;){let i=n.shift();r=r[i]??P}return e({errors:r._errors})}function L(t){function o({name:e}){let{isInvalid:n,validationError:r}=a(t);return n&&h.createElement(u,{errors:r,name:e})}return{FieldError:o}}import{useFormStatus as C}from"react-dom";function $({children:t}){return t(C())}function G({children:t}){let{isPending:o}=a();return o&&t}export{v as Action,b as ActionForm,$ as FormStatus,G as Pending,u as ZodFieldError,L as createComponents,a as useActionContext};

package/dist/{createFormAction-4e719362.d.ts → createFormAction-277e6e21.d.ts}

@@ -24,10 +24,11 @@ type SuccessState<T> = {
 };
 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>>;
+declare function initial<Data>(data: Data): InitialState<Data>;
 declare function createFormAction<Data, Error = Data, ValidationError = Record<string, never>, Payload = FormData>(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>>;
 
-export { ActionState as A, FailureState as F, InvalidState as I, SuccessState as S, InitialState as a, FormAction as b, createFormAction as c };
+export { ActionState as A, FailureState as F, InvalidState as I, SuccessState as S, InitialState as a, FormAction as b, createFormAction as c, initial as i };

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { A as ActionState, I as InvalidState, F as FailureState, S as SuccessState } from './createFormAction-4e719362.js';
-export { b as FormAction, a as InitialState, c as createFormAction } from './createFormAction-4e719362.js';
+import { A as ActionState, I as InvalidState, F as FailureState, S as SuccessState } from './createFormAction-277e6e21.js';
+export { b as FormAction, a as InitialState, c as createFormAction, i as initial } from './createFormAction-277e6e21.js';
 import { ZodTypeAny, ZodType, ZodObject, ZodRawShape, objectUtil, z, ZodSchema, ZodEffects } from 'zod';
 
 declare const emptyInput: unique symbol;

package/dist/index.mjs

@@ -1 +1 @@
-function y(e){function o(n){return{type:"success",data:n,error:null,validationError:null}}function a(n){return{type:"failure",data:null,error:n,validationError:null}}function s(n){return{type:"invalid",data:null,error:null,validationError:n}}return(n,S)=>e({success:o,failure:a,invalid:s})(n,S)}import{ZodFirstPartyTypeKind as C}from"zod";import{zfd as w}from"zod-form-data";var l=Symbol();function d(e,o=[],a){async function s(t){let r={formData:t};for(let i of o){let u=await i({ctx:r});r={...r,...u}}return r}return{input(t){if(e===l)return d(t,o,a);if(e._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(e._def.typeName===C.ZodObject){let r=e.merge(t);return d(r,o)}else throw Error("Merging inputs works only for object schemas without effects.")},use(t){return d(e,[...o,t],a)},error(t){return d(e,o,t)},run:e===l?t=>y(({success:r,failure:i})=>async(u,x)=>{let m=await s(x);try{return r(await t({ctx:m}))}catch(c){if(a)return i(a({error:c,ctx:m}));throw c}}):e===l?void 0:t=>y(({success:r,failure:i,invalid:u})=>{let x=w.formData(e);return async(m,c)=>{let f=await s(c),p=x.safeParse(c);if(!p.success)return u(p.error.format());let h=p.data;try{return r(await t({input:h,ctx:f}))}catch(E){if(a)return i(a({error:E,ctx:f}));throw E}}})}}var P=d(l);export{y as createFormAction,P as formAction};
+import{a as A,b as p}from"./chunk-HL47DG4L.mjs";import{ZodFirstPartyTypeKind as C}from"zod";import{zfd as w}from"zod-form-data";var x=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===x)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===x?t=>p(({success:e,failure:a})=>async(s,m)=>{let d=await f(m);try{return e(await t({ctx:d}))}catch(c){if(r)return a(r({error:c,ctx:d}));throw c}}):n===x?void 0:t=>p(({success:e,failure:a,invalid:s})=>{let m=w.formData(n);return async(d,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(r)return a(r({error:S,ctx:y}));throw S}}})}}var N=i(x);export{p as createFormAction,N as formAction,A as initial};

package/package.json

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