react-form-action 2.1.0 → 2.2.1

package/README.md

@@ -60,59 +60,53 @@ export const subscribeAction = formAction
 "use client";
 
 import {
-  Action,
   Form,
   Pending,
+  createComponents,
   useActionContext,
 } from "react-form-action/client";
 
 import { subscribeAction } from "./action";
 
-const { FieldError } = createComponents(subscribeAction);
+const { FieldError, Success } = 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();
+  const { isPending, isFailure, error, data } =
+    useActionContext(subscribeAction);
 
   return (
-    <button type="submit" disabled={isPending}>
-      {isPending ? "Submitting..." : "Submit"}
-    </button>
+    <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️⃣ Render the form on a Page
+#### 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 function Page() {
-  return <SubscribeForm />;
+export default function Page() {
+  return (
+    <Action action={subscribeAction} initialData="">
+      <SubscribeForm />
+    </Action>
+  );
 }
 ```
 
@@ -328,7 +322,7 @@ export function UpdateUserForm() {
 
 Use the `createComponents(action)` helper to create components which use the ActionContext and have types bound to the action type.
 
-### `<FielError>` Component
+#### `<FielError>` Component
 
 ```tsx
 "use client";
@@ -338,7 +332,7 @@ import { Form, createComponents } from "react-form-action/client";
 
 import { authAction } from "./actions";
 
-export const signUp = authAction
+export const signUpAction = authAction
   .input(
     z
       .object({
@@ -357,13 +351,13 @@ export const signUp = authAction
     return null;
   });
 
-// 🌟 The FieldError is now bound do the signUp input schema which allows autocompletion for its "name" prop
+// 🌟 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(signUp);
+const { FieldError } = createComponents(signUpAction);
 
 export function SignUpForm() {
   return (
-    <Action action={signUp} initialData={null}>
+    <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" */}
@@ -378,6 +372,48 @@ export function SignUpForm() {
 }
 ```
 
+#### `<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:
@@ -389,7 +425,7 @@ import { Action, Pending } from "react-form-action/client";
 
 import { Spinner } from "./components";
 
-return function MyForm() {
+function MyForm() {
   return (
     <Action action={action}>
       {/* 👉 Unlike the React.useFormStatus() hook, we don't need here the <form> element at all. */}
@@ -399,7 +435,7 @@ return function MyForm() {
       </Pending>
     </Action>
   );
-};
+}
 ```
 
 #### When children is a render prop
@@ -407,7 +443,7 @@ return function MyForm() {
 ```tsx
 import { Pending } from "react-form-action/client";
 
-return function SubmitButton() {
+function SubmitButton() {
   return (
     <Pending>
       {({ isPending }) => (

package/dist/client.d.mts

@@ -64,6 +64,13 @@ declare function createComponents<Data, Error, ValidationError extends ZodFormat
     FieldError: ({ name, }: PropsWithChildren<{
         name?: "" | InferZodErrorPaths<ValidationError>;
     }>) => false | React__default.JSX.Element;
+    Success: ({ children, }: PropsWithChildren | RP<{
+        isSuccess: false;
+        data: Data | null;
+    } | {
+        isSuccess: true;
+        data: Data;
+    }>) => React__default.ReactNode;
 };
 
 declare function FormStatus({ children, }: RenderProp<ReturnType<typeof useFormStatus>>): React.ReactNode;

package/dist/client.mjs

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

package/dist/index.d.mts

@@ -8,6 +8,10 @@ type Flatten<T> = Identity<{
     [K in keyof T]: T[K];
 }>;
 type Identity<T> = T;
+type ErrorHandler<Context, Err> = (params: {
+    error: unknown;
+    ctx: Context;
+}) => Promise<Err>;
 type InitialContext = Record<"formData", FormData>;
 /**
  * Action without schema has no input.
@@ -45,10 +49,7 @@ type FormActionBuilder<Schema extends ZodTypeAny | EmptyInput, Err = Error, Cont
      * @param processError A function which receives action's errors.
      * @returns FormActionBuilder
      */
-    error: <Err>(processError: (params: {
-        error: unknown;
-        ctx: Context;
-    }) => Err) => FormActionBuilder<Schema, Err, Context>;
+    error: <Err>(processError: ErrorHandler<Context, Err>) => FormActionBuilder<Schema, Err, Context>;
 };
 declare const formAction: FormActionBuilder<typeof emptyInput, Error, InitialContext>;
 

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 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};
+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};

package/package.json

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