react-form-action 2.0.1 → 2.2.0

package/README.md

@@ -328,7 +328,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 +338,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 +357,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,23 +378,87 @@ 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:
 
+#### When children are JSX
+
 ```tsx
 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. */}
       <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/client.d.mts

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

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 S}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 v({children:t,action:o,initialData:e,permalink:n}){let[r,i,s]=S(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 y,{startTransition as A}from"react";function V({autoReset:t=!1,...o}){let{action:e}=a();return y.createElement("form",{...t?{action:e}:{onSubmit:r=>{r.preventDefault();let i=r.currentTarget;A(()=>{e(new FormData(i))})}},...o})}import h from"react";import l from"react";var F=".",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(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&&h.createElement(u,{errors:r,name:e})}return{FieldError:o}}import{useFormStatus as C}from"react-dom";function X({children:t}){return t(C())}function q({children:t}){let{isPending:o}=a();return o&&t}export{v as Action,V as Form,X as FormStatus,q as Pending,u 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/{createFormAction-277e6e21.d.ts → createFormAction-CX4Fk5xA.d.mts}

@@ -31,4 +31,4 @@ declare function createFormAction<Data, Error = Data, ValidationError = Record<s
     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, initial as i };
+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, 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 { 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 { ZodTypeAny, ZodType, ZodObject, ZodRawShape, objectUtil, z, ZodSchema, ZodEffects } from 'zod';
 
 declare const emptyInput: unique symbol;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-action",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "description": "State management helpers for the react form actions.",
   "repository": {
     "type": "git",
@@ -23,14 +23,14 @@
     ".": {
       "import": "./dist/index.mjs",
       "module": "./dist/index.mjs",
-      "default": "./dist/index.mjs",
-      "types": "./dist/index.d.mts"
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
     },
     "./client": {
       "import": "./dist/client.mjs",
       "module": "./dist/client.mjs",
-      "default": "./dist/client.mjs",
-      "types": "./dist/client.d.mts"
+      "types": "./dist/client.d.mts",
+      "default": "./dist/client.mjs"
     }
   },
   "keywords": [
@@ -58,14 +58,14 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.1",
     "@vitejs/plugin-react": "^4.3.4",
-    "happy-dom": "^15.11.7",
-    "npm-check-updates": "^17.1.11",
+    "happy-dom": "^16.0.0",
+    "npm-check-updates": "^17.1.12",
     "prettier": "^3.4.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-render-prop-type": "^0.1.0",
-    "tsup": "^7.2.0",
-    "typescript": "^5.2.2",
+    "react-render-prop-type": "^1.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
     "vitest": "^1.3.1",
     "zod": "^3.23.8",
     "zod-form-data": "^2.0.2"