react-form-action 0.2.0 → 0.4.0

package/README.md

@@ -2,10 +2,27 @@
 
 End-to-end typesafe success, error & validation state control for Next.js 14 form actions.
 
+## Features
+
+**Action Creator**
+
+- ✅ Provides `"invalid" | "success" | "failure"` response objects.
+- ✅ Define generic payload for each of the response type.
+
+**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)
+
+**Stateful `<Form />`**
+
+- ✅ `<Form />` component reads the action's response.
+- ✅ Computes progress meta-state like `isInvalid`, `isSuccess` and more.
+
 ## Install
 
 ```
-npm i react-form-action
+npm i react-form-action zod-form-data
 ```
 
 ## Usage
@@ -20,20 +37,18 @@ import { formAction } from "react-form-action";
 import { z } from "zod";
 import { cookies } from "next/headers";
 
-const emailSchema = z.object({ email: z.string().email() });
-
 const i18nMiddleware = async () => {
   const { t } = await useTranslation("auth", cookies().get("i18n")?.value);
   // will be added to context
   return { t };
 };
 
-const authAction = formAction(emailSchema)
+const authAction = formAction
   .use(i18nMiddleware)
   .use(async ({ ctx: { t } }) =>
     console.log("🎉 context enhanced by previous middlewares 🎉", t)
   )
-  .error((error) => {
+  .error(({ error }) => {
     if (error instanceof DbError) {
       return error.custom.code;
     } else {
@@ -43,25 +58,38 @@ const authAction = formAction(emailSchema)
     }
   });
 
-export const resendVerifyEmailAction = authAction.run(
-  async ({ ctx: { t }, input: { email } }) => {
-    // do custom work
-    await db.resendVerificationEmail({ email });
+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}
 
-    // return translated success message
-    return t("verificationEmail.success");
-  }
-);
+    await db.signIn({ email, password });
 
-export const sendResetPasswordEmail = authAction.run(
-  async ({ ctx: { t }, input: { email } }) => {
-    // do custom work
-    await db.emailPasswordSendPasswordResetEmail({ email });
+    return t("verificationEmail.success");
+  });
 
-    // return translated success message
-    return t("resetPasswordEmail.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!
+
+    await db.signUp({ email, password });
+
+    return t("signUp.success");
+  });
 ```
 
 ### Server Action (usable in Next.js)

package/dist/client.d.mts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { FormHTMLAttributes } from 'react';
 import { RenderProp } from 'react-render-prop-type';
-import { I as InitialState, a as InvalidState, b as FailureState, S as SuccessState, F as FormState } from './createFormAction-0c8f36ce.js';
+import { b as InitialState, I as InvalidState, a as FailureState, S as SuccessState, F as FormState } from './createFormAction-3a51310f.js';
 import { useFormStatus } from 'react-dom';
 
 type FormStateProps<Data, ValidationError, Error, Payload> = {

package/dist/{createFormAction-0c8f36ce.d.ts → createFormAction-3a51310f.d.ts}

@@ -29,4 +29,4 @@ declare function createFormAction<Data, Error = Data, ValidationError = Record<s
     invalid: (validationError: ValidationError) => InvalidState<ValidationError>;
 }) => (state: FormState<Data, Error, ValidationError>, payload: Payload) => Promise<FormState<Data, Error, ValidationError>>): (state: FormState<Data, Error, ValidationError>, payload: Payload) => Promise<FormState<Data, Error, ValidationError>>;
 
-export { FormState as F, InitialState as I, SuccessState as S, InvalidState as a, FailureState as b, createFormAction as c };
+export { FormState as F, InvalidState as I, SuccessState as S, FailureState as a, InitialState as b, createFormAction as c };

package/dist/index.d.mts

@@ -1,10 +1,13 @@
-import { F as FormState } from './createFormAction-0c8f36ce.js';
-export { b as FailureState, I as InitialState, a as InvalidState, S as SuccessState, c as createFormAction } from './createFormAction-0c8f36ce.js';
-import { ZodSchema, ZodUndefined, z } from 'zod';
+import { F as FormState, I as InvalidState, a as FailureState, S as SuccessState } from './createFormAction-3a51310f.js';
+export { b as InitialState, c as createFormAction } from './createFormAction-3a51310f.js';
+import { ZodTypeAny, ZodType, ZodObject, ZodRawShape, objectUtil, z, ZodSchema, ZodEffects } from 'zod';
 
-type MiddlewareFn<Context, NewContext extends Record<string, unknown> = Record<string, unknown>> = ({ ctx }: {
-    ctx: Context;
-}) => Promise<NewContext>;
+declare const emptyInput: unique symbol;
+type EmptyInput = typeof emptyInput;
+type Flatten<T> = Identity<{
+    [K in keyof T]: T[K];
+}>;
+type Identity<T> = T;
 type InitialContext = Record<"formData", FormData>;
 /**
  * Action without schema has no input.
@@ -19,13 +22,15 @@ type SchemaAction<Data, Context, Schema extends ZodSchema> = (params: {
     ctx: Context;
     input: z.infer<Schema>;
 }) => Promise<Data>;
-type FormActionBuilder<Schema extends ZodSchema = ZodUndefined, Err = Error, Context = InitialContext> = {
+type AnyZodEffects = ZodEffects<any, any, any>;
+type FormActionBuilder<Schema extends ZodTypeAny | EmptyInput, Err = Error, Context = InitialContext> = {
+    input: <T extends ZodTypeAny>(newInput: T extends ZodType<infer Out extends Record<string, unknown>> ? Schema extends AnyZodEffects ? "Extending schema with effect is not possible." : Schema extends EmptyInput ? T : Schema extends ZodTypeAny ? T extends AnyZodEffects ? "Your input contains effect which prevents merging it with the previous inputs." : T : T : "The schema output must be an object.") => FormActionBuilder<Schema extends ZodObject<infer O1 extends ZodRawShape> ? T extends ZodObject<infer O2 extends ZodRawShape> ? ZodObject<objectUtil.extendShape<O1, O2>> : never : T, Err, Context>;
     /**
      * A finishing call on the builder completing your action.
      * @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 undefined ? <Data>(action: Action<Data, Context>) => (state: FormState<Data, Err>, payload: FormData) => Promise<Data> : <Data>(action: SchemaAction<Data, Context, Schema>) => (state: FormState<Data, Err, ZodErrorMessages<Schema>>, payload: FormData) => Promise<Data>;
+    run: Schema extends ZodTypeAny ? <Data>(action: SchemaAction<Data, Context, Schema>) => (state: FormState<Data, Err, z.inferFlattenedErrors<Schema>>, payload: FormData) => Promise<Flatten<InvalidState<z.inferFlattenedErrors<Schema>> | FailureState<Err> | SuccessState<Data>>> : <Data>(action: Action<Data, Context>) => (state: FormState<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.
@@ -40,19 +45,11 @@ type FormActionBuilder<Schema extends ZodSchema = ZodUndefined, Err = Error, Con
      * @param processError A function which receives action's errors.
      * @returns FormActionBuilder
      */
-    error: <Err>(processError: (error: unknown) => Err) => FormActionBuilder<Schema, Err, Context>;
-};
-declare function formAction<Schema extends ZodSchema = ZodUndefined, Err = Error, Context = InitialContext, NewContext extends Record<string, unknown> = Record<string, unknown>>(schema?: Schema, 
-/**
- * @private
- */
-middleware?: MiddlewareFn<Context, NewContext>[], 
-/**
- * @private
- */
-processError?: (error: unknown) => Err): FormActionBuilder<Schema, Err, Context>;
-type ZodErrorMessages<Schema extends ZodSchema> = {
-    [k in keyof z.infer<Schema>]?: string;
+    error: <Err>(processError: (params: {
+        error: unknown;
+        ctx: Context;
+    }) => Err) => FormActionBuilder<Schema, Err, Context>;
 };
+declare const formAction: FormActionBuilder<typeof emptyInput, Error, InitialContext>;
 
-export { FormState, formAction };
+export { FailureState, FormState, InvalidState, SuccessState, formAction };

package/dist/index.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-action",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "State management helpers for the react form actions.",
   "repository": {
     "type": "git",
@@ -13,7 +13,8 @@
   ],
   "scripts": {
     "build": "tsup",
-    "test": "vitest"
+    "test": "vitest",
+    "typecheck": "vitest --typecheck"
   },
   "exports": {
     ".": {
@@ -43,7 +44,8 @@
   "peerDependencies": {
     "react": ">=18.2",
     "react-dom": ">=18.2",
-    "zod": "^3"
+    "zod": "^3",
+    "zod-form-data": "^2"
   },
   "devDependencies": {
     "@types/react": "^18.2.37",