react-form-action 2.3.0 → 2.4.1

package/README.md

@@ -1,458 +1,497 @@
-# react-form-action
-
-End-to-end typesafe success, error & validation state control for Next.js form actions.
-
-## Features
-
-**Action Creator**
-
-- ✅ Provides envelope objects with `"initial" | "invalid" | "success" | "failure"` response types.
-- ✅ Define generic payload for each of the response type.
-
-**tRPC-like Form Action builder**
-
-- ✅ 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)`.
-
-**React Context access with the `<Action action={myFormAction} />` component**
-
-- ✅ The `useActionState()` accessible via the `useActionContext()` hook.
-- ✅ Computes progress flags like `isInvalid`, `isSuccess` based on the envelope type.
-
-**Context-bound `<Form />` component**
-
-- ✅ Reads the `action` from the `<Action />` context.
-- ✅ Opt-out from the default form reset after action submit.
-
-## Install
-
-```
-npm i react-form-action zod-form-data
-```
-
-<a aria-label="NPM version" href="https://www.npmjs.com/package/react-form-action">
-  <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/subscribe/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/subscribe/SubscribeForm.tsx
-"use client";
-
-import {
-  Form,
-  Pending,
-  createComponents,
-  useActionContext,
-} from "react-form-action/client";
-
-import { subscribeAction } from "./action";
-
-const { FieldError, Success } = createComponents(subscribeAction);
-
-export function SubscribeForm() {
-  const { isPending, isFailure, error, data } =
-    useActionContext(subscribeAction);
-
-  return (
-    <Form>
-      <Success>
-        <p>✅ Email {data} was registered.</p>
-      </Success>
-      <input name="email" />
-      {/*💡 The FieldError "name" prop supports autocompletion */}
-      <FieldError name="email" />
-      <button type="submit" disabled={isPending}>
-        {isPending ? "🌀 Submitting..." : "Submit"}
-      </button>
-      <Pending>Please wait...</Pending>
-    </Form>
-  );
-}
-```
-
-#### 3️⃣ Provide the `<Action>` context on a Page
-
-```tsx
-// app/subscribe/page.tsx
-
-import { Action } from "react-form-action/client";
-
-import { SubscribeForm } from "./SubscribeForm";
-import { subscribeAction } from "./action";
-
-export default function Page() {
-  return (
-    <Action action={subscribeAction} initialData="">
-      <SubscribeForm />
-    </Action>
-  );
-}
-```
-
-## 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";
-
-import { formAction } from "react-form-action";
-import { z } from "zod";
-import { cookies } from "next/headers";
-
-const i18nMiddleware = async () => {
-  const { t } = await useTranslation("auth", cookies().get("i18n")?.value);
-  // will be added to context
-  return { t };
-};
-
-const authAction = formAction
-  .use(i18nMiddleware)
-  .use(async ({ ctx: { t } }) =>
-    console.log("🎉 context enhanced by previous middlewares 🎉", t)
-  )
-  .error(async ({ error }) => {
-    if (error instanceof DbError) {
-      return error.custom.code;
-    } else {
-      // unknown error
-      // default Next.js error handling (error.js boundary)
-      throw error;
-    }
-  });
-
-export const signIn = authAction
-  .input(z.object({ email: z.string().email() }))
-  // 🎉 extend the previous input (only without refinements and transforms)
-  .input(z.object({ password: z.string() }))
-  .run(async ({ ctx: { t }, input: { email, password } }) => {
-    // Type inferred: {email: string, password: string}
-
-    await db.signIn({ email, password });
-
-    return t("verificationEmail.success");
-  });
-
-export const signUp = authAction
-  .input(
-    z
-      .object({
-        email: z.string().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!
-
-    const tokenData = await db.signUp({ email, password });
-
-    if (!tokenData) {
-      return t("signUp.emailVerificationRequired");
-    }
-
-    return t("singUp.success");
-  });
-```
-
-### 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";
-
-import { createFormAction } from "react-form-action";
-import { z } from "zod";
-
-// Define custom serializable error & success data types
-type ErrorData = {
-  message: string;
-};
-
-type SuccessData = {
-  message: string;
-};
-
-type ValiationError = {
-  name?: string;
-};
-
-const updateUserSchema = z.object({ name: z.string() });
-
-export const updateUser = createFormAction<
-  SuccessData,
-  ErrorData,
-  ValiationError
->(({ success, failure, invalid }) =>
-  // success and failure helper functions create wrappers for success & error data respectively
-  async (prevState, formData) => {
-    if (prevState.type === "initial") {
-      // use the initialData passed to <Form /> here
-      // prevState.data === "foobar"
-    }
-
-    try {
-      const { name } = updateUserSchema.parse({
-        name: formData.get("name"),
-      });
-
-      const user = await updateCurrentUser(name);
-
-      if (user) {
-        // {type: "success", data: "Your profile has been updated.", error: null, validationError: null}
-        return success({
-          message: "Your profile has been updated.",
-        });
-      } else {
-        // {type: "error", data: null, error: { message: "No current user." }, validationError: null}
-        return failure({ message: "No current user." });
-      }
-    } catch (error) {
-      if (error instanceof ZodError) {
-        // {type: "invalid", data: null, error: null, validationError: {name: "Invalid input"}}
-        return invalid({
-          name: error.issues[0]?.message ?? "Validation error",
-        });
-      }
-
-      return failure({ message: "Failed to update user." });
-    }
-  }
-);
-```
-
-### Action Context
-
-The `<Action>` components enables you to access your `action`'s state with the `useActionContext()` hook:
-
-```tsx
-// 👉 Define standalone client form component (e.g. /app/auth/signup/SignUpForm.tsx)
-"use client";
-
-import { Action, Form, useActionContext } from "react-form-action/client";
-import type { PropsWithChildren } from "react";
-
-import { signupAction } from "./action";
-
-function Pending({ children }: PropsWithChildren) {
-  // read any state from the ActionContext:
-  const {
-    error,
-    data,
-    validationError,
-    isPending,
-    isFailure,
-    isInvalid,
-    isSuccess,
-    isInitial,
-  } = useActionContext();
-
-  return isPending && children;
-}
-
-// 💡 render this form on your RSC page (/app/auth/signup/page.tsx)
-export function SignupForm() {
-  return (
-    <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. 😎 */}
-        <p>Please wait...</p>
-      </Pending>
-    </Action>
-  );
-}
-```
-
-### `<Form>` 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 { 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 signUpAction = authAction
-  .input(
-    z
-      .object({
-        user: z.object({
-          email: z.string().email(),
-          name: z.string(),
-        }),
-        password: z.string().min(8),
-        confirm: z.string(),
-      })
-      .refine((data) => data.password === data.confirm, {
-        message: "Passwords don't match",
-      })
-  )
-  .run(async ({ ctx, input }) => {
-    return null;
-  });
-
-// 🌟 The FieldError is now bound do the signUpAction input schema which allows autocompletion for its "name" prop
-// ⚠️ Usable only with actions created with the formAction builder
-const { FieldError } = createComponents(signUpAction);
-
-export function SignUpForm() {
-  return (
-    <Action action={signUpAction} 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>
-  );
-}
-```
-
-#### `<Success>`
-
-#### When children are JSX
-
-```tsx
-import { Action, createComponents } from "react-form-action/client";
-
-const { Success } = createComponents(signUpAction);
-
-function MyForm() {
-  return (
-    <Action action={signUpAction}>
-      <Success>
-        {/* 👉 The message will render only after the action has succeeded */}
-        <p>You've been signed up!</p>
-      </Success>
-    </Action>
-  );
-}
-```
-
-#### When children is a render prop
-
-```tsx
-import { createComponents } from "react-form-action/client";
-
-const { Success } = createComponents(signUpAction);
-
-function Label({children}: PropsWithChildren) {
-  return (
-    <Success>
-      {({ isSuccess, data }) => (
-        {/* 👉 With a render prop, the children are always mounted, regardles of the isSuccess flag */}
-        <label className={isSuccess ? "green" : ""}>
-          {children}
-        </label>
-      )}
-    </Success>
-  );
-};
-```
-
-### `<Pending>`
-
-Render children when the action is pending:
-
-#### When children are JSX
-
-```tsx
-import { Action, Pending } from "react-form-action/client";
-
-import { Spinner } from "./components";
-
-function MyForm() {
-  return (
-    <Action action={action}>
-      {/* 👉 Unlike the React.useFormStatus() hook, we don't need here the <form> element at all. */}
-      <Pending>
-        {/* 👉 The spinner will UNMOUNT when the action is NOT pending */}
-        <Spinner />
-      </Pending>
-    </Action>
-  );
-}
-```
-
-#### When children is a render prop
-
-```tsx
-import { Pending } from "react-form-action/client";
-
-function SubmitButton() {
-  return (
-    <Pending>
-      {({ isPending }) => (
-        {/* 👉 With a render prop, the children are always mounted, regardles of the isPending flag */}
-        <button type="submit" disabled={isPending}>
-          {isPending ? "Submitting..." : "Submit"}
-        </button>
-      )}
-    </Pending>
-  );
-};
-```
+# react-form-action
+
+End-to-end typesafe success, error & validation state control for Next.js form actions.
+
+## Features
+
+**Action Creator**
+
+- ✅ Provides envelope objects with `"initial" | "invalid" | "success" | "failure"` response types.
+- ✅ Define generic payload for each of the response type.
+
+**tRPC-like Form Action builder**
+
+- ✅ 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)`.
+
+**React Context access with the `<Action action={myFormAction} />` component**
+
+- ✅ The `useActionState()` accessible via the `useActionContext()` hook.
+- ✅ Computes progress flags like `isInvalid`, `isSuccess` based on the envelope type.
+
+**Context-bound `<Form />` component**
+
+- ✅ Reads the `action` from the `<Action />` context.
+- ✅ Opt-out from the default form reset after action submit.
+
+## Install
+
+```
+npm i react-form-action zod-form-data
+```
+
+<a aria-label="NPM version" href="https://www.npmjs.com/package/react-form-action">
+  <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/subscribe/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/subscribe/form.tsx
+"use client";
+
+import {
+  Form,
+  Pending,
+  createComponents,
+  useActionContext,
+} from "react-form-action/client";
+
+import { subscribeAction } from "./action";
+
+const { FieldError, Success } = createComponents(subscribeAction);
+
+export function SubscribeForm() {
+  const { isPending, isFailure, error, data } =
+    useActionContext(subscribeAction);
+
+  return (
+    <Form>
+      <Success>
+        <p>✅ Email {data} was registered.</p>
+      </Success>
+      <input name="email" />
+      {/*💡 The FieldError "name" prop supports autocompletion */}
+      <FieldError name="email" />
+      <button type="submit" disabled={isPending}>
+        {isPending ? "🌀 Submitting..." : "Submit"}
+      </button>
+      <Pending>Please wait...</Pending>
+    </Form>
+  );
+}
+```
+
+#### 3️⃣ Provide the `<Action>` context on a Page
+
+```tsx
+// app/subscribe/page.tsx
+
+import { Action } from "react-form-action/client";
+
+import { subscribeAction } from "./action";
+import { SubscribeForm } from "./form";
+
+export default function Page() {
+  return (
+    <Action action={subscribeAction} initialData="">
+      <SubscribeForm />
+    </Action>
+  );
+}
+```
+
+## 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";
+
+import { formAction } from "react-form-action";
+import { z } from "zod";
+import { cookies } from "next/headers";
+
+const i18nMiddleware = async () => {
+  const { t } = await useTranslation("auth", cookies().get("i18n")?.value);
+  // will be added to context
+  return { t };
+};
+
+const authAction = formAction
+  .use(i18nMiddleware)
+  .use(async ({ ctx: { t } }) =>
+    console.log("🎉 context enhanced by previous middlewares 🎉", t)
+  )
+  .error(async ({ error }) => {
+    if (error instanceof DbError) {
+      return error.custom.code;
+    } else {
+      // unknown error
+      // default Next.js error handling (error.js boundary)
+      throw error;
+    }
+  });
+
+export const signIn = authAction
+  .input(z.object({ email: z.string().email() }))
+  // 🎉 extend the previous input (only without refinements and transforms)
+  .input(z.object({ password: z.string() }))
+  .run(async ({ ctx: { t }, input: { email, password } }) => {
+    // Type inferred: {email: string, password: string}
+
+    await db.signIn({ email, password });
+
+    return t("verificationEmail.success");
+  });
+
+export const signUp = authAction
+  .input(
+    z
+      .object({
+        email: z.string().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!
+
+    const tokenData = await db.signUp({ email, password });
+
+    if (!tokenData) {
+      return t("signUp.emailVerificationRequired");
+    }
+
+    return t("singUp.success");
+  });
+```
+
+### 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";
+
+import { createFormAction } from "react-form-action";
+import { z } from "zod";
+
+// Define custom serializable error & success data types
+type ErrorData = {
+  message: string;
+};
+
+type SuccessData = {
+  message: string;
+};
+
+type ValiationError = {
+  name?: string;
+};
+
+const updateUserSchema = z.object({ name: z.string() });
+
+export const updateUser = createFormAction<
+  SuccessData,
+  ErrorData,
+  ValiationError
+>(({ success, failure, invalid }) =>
+  // success and failure helper functions create wrappers for success & error data respectively
+  async (prevState, formData) => {
+    if (prevState.type === "initial") {
+      // use the initialData passed to <Form /> here
+      // prevState.data === "foobar"
+    }
+
+    try {
+      const { name } = updateUserSchema.parse({
+        name: formData.get("name"),
+      });
+
+      const user = await updateCurrentUser(name);
+
+      if (user) {
+        // {type: "success", data: "Your profile has been updated.", error: null, validationError: null}
+        return success({
+          message: "Your profile has been updated.",
+        });
+      } else {
+        // {type: "error", data: null, error: { message: "No current user." }, validationError: null}
+        return failure({ message: "No current user." });
+      }
+    } catch (error) {
+      if (error instanceof ZodError) {
+        // {type: "invalid", data: null, error: null, validationError: {name: "Invalid input"}}
+        return invalid({
+          name: error.issues[0]?.message ?? "Validation error",
+        });
+      }
+
+      return failure({ message: "Failed to update user." });
+    }
+  }
+);
+```
+
+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:
+
+```tsx
+// 👉 Define standalone client form component (e.g. /app/auth/signup/SignUpForm.tsx)
+"use client";
+
+import { Action, Form, useActionContext } from "react-form-action/client";
+import type { PropsWithChildren } from "react";
+
+import { signupAction } from "./action";
+
+function Pending({ children }: PropsWithChildren) {
+  // read any state from the ActionContext:
+  const {
+    error,
+    data,
+    validationError,
+    isPending,
+    isFailure,
+    isInvalid,
+    isSuccess,
+    isInitial,
+  } = useActionContext();
+
+  return isPending && children;
+}
+
+// 💡 render this form on your RSC page (/app/auth/signup/page.tsx)
+export function SignupForm() {
+  return (
+    <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. 😎 */}
+        <p>Please wait...</p>
+      </Pending>
+    </Action>
+  );
+}
+```
+
+### `<Form>` 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 { 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 signUpAction = authAction
+  .input(
+    z
+      .object({
+        user: z.object({
+          email: z.string().email(),
+          name: z.string(),
+        }),
+        password: z.string().min(8),
+        confirm: z.string(),
+      })
+      .refine((data) => data.password === data.confirm, {
+        message: "Passwords don't match",
+      })
+  )
+  .run(async ({ ctx, input }) => {
+    return null;
+  });
+
+// 🌟 The FieldError is now bound do the signUpAction input schema which allows autocompletion for its "name" prop
+// ⚠️ Usable only with actions created with the formAction builder
+const { FieldError } = createComponents(signUpAction);
+
+export function SignUpForm() {
+  return (
+    <Action action={signUpAction} 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>
+  );
+}
+```
+
+#### `<Success>`
+
+#### When children are JSX
+
+```tsx
+import { Action, createComponents } from "react-form-action/client";
+
+const { Success } = createComponents(signUpAction);
+
+function MyForm() {
+  return (
+    <Action action={signUpAction}>
+      <Success>
+        {/* 👉 The message will render only after the action has succeeded */}
+        <p>You've been signed up!</p>
+      </Success>
+    </Action>
+  );
+}
+```
+
+#### When children is a render prop
+
+```tsx
+import { createComponents } from "react-form-action/client";
+
+const { Success } = createComponents(signUpAction);
+
+function Label({children}: PropsWithChildren) {
+  return (
+    <Success>
+      {({ isSuccess, data }) => (
+        {/* 👉 With a render prop, the children are always mounted, regardles of the isSuccess flag */}
+        <label className={isSuccess ? "green" : ""}>
+          {children}
+        </label>
+      )}
+    </Success>
+  );
+};
+```
+
+### `<Pending>`
+
+Render children when the action is pending:
+
+#### When children are JSX
+
+```tsx
+import { Action, Pending } from "react-form-action/client";
+
+import { Spinner } from "./components";
+
+function MyForm() {
+  return (
+    <Action action={action}>
+      {/* 👉 Unlike the React.useFormStatus() hook, we don't need here the <form> element at all. */}
+      <Pending>
+        {/* 👉 The spinner will UNMOUNT when the action is NOT pending */}
+        <Spinner />
+      </Pending>
+    </Action>
+  );
+}
+```
+
+#### When children is a render prop
+
+```tsx
+import { Pending } from "react-form-action/client";
+
+function SubmitButton() {
+  return (
+    <Pending>
+      {({ isPending }) => (
+        {/* 👉 With a render prop, the children are always mounted, regardles of the isPending flag */}
+        <button type="submit" disabled={isPending}>
+          {isPending ? "Submitting..." : "Submit"}
+        </button>
+      )}
+    </Pending>
+  );
+};
+```

package/dist/chunk-22TNX3DL.mjs

@@ -0,0 +1 @@
+function d(a){return{type:"initial",data:a,error:null,validationError:null}}function u(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 e(r){return{type:"invalid",data:null,error:null,validationError:r}}return(...r)=>{let[n,i,...l]=r.reverse();return a({success:t,failure:o,invalid:e},...l)(i,n)}}export{d as a,u 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>;
@@ -51,7 +50,7 @@ type Paths<Err> = {
 type InferZodErrorPaths<Errors> = Errors extends ZodFormattedError<infer E> ? Paths<E> : never;
 type ZodFieldErrorProps<Errors extends ZodFormattedError<any>, Name extends "" | InferZodErrorPaths<Errors>> = {
     errors: Errors;
-    name?: Name;
+    name: Name;
 } & Partial<RenderProp<ZodFieldErrorChildrenProps<Name>>>;
 type ZodFieldErrorChildrenProps<Name> = {
     name: Name;
@@ -68,7 +67,7 @@ declare function ZodFieldError<Errors extends ZodFormattedError<any>, Name exten
  */
 declare function createComponents<Data, Error, ValidationError extends ZodFormattedError<any>>(action: FormAction<Data, Error, ValidationError>): {
     FieldError: <Name extends "" | InferZodErrorPaths<ValidationError>>({ name, children, }: {
-        name?: Name;
+        name: Name;
     } & Partial<RenderProp<ZodFieldErrorChildrenProps<Name>>>) => React__default.JSX.Element;
     Success: ({ children, }: PropsWithChildren | RP<{
         isSuccess: false;
@@ -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 N({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,N 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-22TNX3DL.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;

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-22TNX3DL.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};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-action",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "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};