server-act 1.1.6 → 1.2.0

package/README.md

@@ -21,10 +21,10 @@ pnpm add server-act zod
 
 ```ts
 // action.ts
-'use server';
+"use server";
 
-import {serverAct} from 'server-act';
-import {z} from 'zod';
+import { serverAct } from "server-act";
+import { z } from "zod";
 
 export const sayHelloAction = serverAct
   .input(
@@ -32,20 +32,20 @@ export const sayHelloAction = serverAct
       name: z.string(),
     }),
   )
-  .action(async ({input}) => {
+  .action(async ({ input }) => {
     return `Hello, ${input.name}`;
   });
 ```
 
 ```tsx
 // client-component.tsx
-'use client';
+"use client";
 
-import {sayHelloAction} from './action';
+import { sayHelloAction } from "./action";
 
 export const ClientComponent = () => {
   const onClick = () => {
-    const message = await sayHelloAction({name: 'John'});
+    const message = await sayHelloAction({ name: "John" });
     console.log(message); // Hello, John
   };
 
@@ -61,79 +61,83 @@ export const ClientComponent = () => {
 
 ```ts
 // action.ts
-'use server';
+"use server";
 
-import {serverAct} from 'server-act';
-import {z} from 'zod';
+import { serverAct } from "server-act";
+import { z } from "zod";
 
 export const sayHelloAction = serverAct
   .middleware(() => {
-    const userId = '...';
-    return {userId};
+    const userId = "...";
+    return { userId };
   })
   .input(
     z.object({
       name: z.string(),
     }),
   )
-  .action(async ({ctx, input}) => {
-    console.log('User ID', ctx.userId);
+  .action(async ({ ctx, input }) => {
+    console.log("User ID", ctx.userId);
     return `Hello, ${input.name}`;
   });
 ```
 
-### `useFormState` Support
+### `useActionState` Support
 
-> `useFormState` Documentation:
+> `useActionState` Documentation:
 >
-> - https://nextjs.org/docs/app/building-your-application/data-fetching/forms-and-mutations#error-handling
-> - https://react.dev/reference/react-dom/hooks/useFormState
+> - https://react.dev/reference/react/useActionState
 
 We recommend using [zod-form-data](https://www.npmjs.com/package/zod-form-data) for input validation.
 
 ```ts
 // action.ts;
-'use server';
+"use server";
 
-import {serverAct} from 'server-act';
-import {z} from 'zod';
-import {zfd} from 'zod-form-data';
+import { serverAct } from "server-act";
+import { z } from "zod";
+import { zfd } from "zod-form-data";
 
 export const sayHelloAction = serverAct
   .input(
     zfd.formData({
       name: zfd.text(
         z
-          .string({required_error: `You haven't told me your name`})
-          .nonempty({message: 'You need to tell me your name!'}),
+          .string({ required_error: `You haven't told me your name` })
+          .max(20, { message: "Any shorter name? You name is too long 😬" }),
       ),
     }),
   )
-  .formAction(async ({input, formErrors, ctx}) => {
+  .formAction(async ({ formData, input, formErrors, ctx }) => {
     if (formErrors) {
-      return {formErrors: formErrors.formErrors.fieldErrors};
+      return { formData, formErrors: formErrors.formErrors.fieldErrors };
     }
-    return {message: `Hello, ${input.name}!`};
+    return { message: `Hello, ${input.name}!` };
   });
 ```
 
 ```tsx
 // client-component.tsx
-'use client';
+"use client";
 
-import {sayHelloAction} from './action';
+import { useActionState } from "react";
+import { sayHelloAction } from "./action";
 
 export const ClientComponent = () => {
-  const [state, dispatch] = useFormState(sayHelloAction, {formErrors: {}});
+  const [state, dispatch] = useFormState(sayHelloAction, undefined);
 
   return (
     <form action={dispatch}>
-      <input name="name" required />
-      {state.formErrors?.name?.map((error) => <p key={error}>{error}</p>)}
+      <input
+        name="name"
+        required
+        defaultValue={state?.formData?.get("name")?.toString()}
+      />
+      {state?.formErrors?.name?.map((error) => <p key={error}>{error}</p>)}
 
       <button type="submit">Submit</button>
 
-      {!!state.message && <p>{state.message}</p>}
+      {!!state?.message && <p>{state.message}</p>}
     </form>
   );
 };

package/dist/index.d.mts

@@ -7,8 +7,8 @@ type Prettify<T> = {
     [P in keyof T]: T[P];
 } & {};
 type SanitizeFunctionParam<T extends (param: any) => any> = T extends (param: infer P) => infer R ? Equals<P, undefined> extends true ? () => R : Equals<P, P | undefined> extends true ? (param?: P) => R : (param: P) => R : never;
-type InferParserType<T, TType extends 'in' | 'out'> = T extends z.ZodEffects<infer I, any, any> ? I[TType extends 'in' ? '_input' : '_output'] : T extends z.ZodType ? T[TType extends 'in' ? '_input' : '_output'] : never;
-type InferInputType<T, TType extends 'in' | 'out'> = T extends UnsetMarker ? undefined : InferParserType<T, TType>;
+type InferParserType<T, TType extends "in" | "out"> = T extends z.ZodEffects<infer I, any, any> ? I[TType extends "in" ? "_input" : "_output"] : T extends z.ZodType ? T[TType extends "in" ? "_input" : "_output"] : never;
+type InferInputType<T, TType extends "in" | "out"> = T extends UnsetMarker ? undefined : InferParserType<T, TType>;
 type InferContextType<T> = T extends UnsetMarker ? undefined : T;
 interface ActionParams<TInput = unknown, TContext = unknown> {
     _input: TInput;
@@ -19,7 +19,7 @@ interface ActionBuilder<TParams extends ActionParams> {
      * Middleware allows you to run code before the action, its return value will pass as context to the action.
      */
     middleware: <TContext>(middleware: () => Promise<TContext> | TContext) => ActionBuilder<{
-        _input: TParams['_input'];
+        _input: TParams["_input"];
         _context: TContext;
     }>;
     /**
@@ -27,28 +27,29 @@ interface ActionBuilder<TParams extends ActionParams> {
      */
     input: <TParser extends z.ZodType>(input: TParser) => ActionBuilder<{
         _input: TParser;
-        _context: TParams['_context'];
+        _context: TParams["_context"];
     }>;
     /**
      * Create an action.
      */
     action: <TOutput>(action: (params: {
-        ctx: InferContextType<TParams['_context']>;
-        input: InferInputType<TParams['_input'], 'out'>;
-    }) => Promise<TOutput>) => SanitizeFunctionParam<(input: InferInputType<TParams['_input'], 'in'>) => Promise<TOutput>>;
+        ctx: InferContextType<TParams["_context"]>;
+        input: InferInputType<TParams["_input"], "out">;
+    }) => Promise<TOutput>) => SanitizeFunctionParam<(input: InferInputType<TParams["_input"], "in">) => Promise<TOutput>>;
     /**
      * Create an action for React `useFormState`
      */
-    formAction: <TState>(action: (params: Prettify<{
-        ctx: InferContextType<TParams['_context']>;
+    formAction: <TState, TPrevState = undefined>(action: (params: Prettify<{
+        ctx: InferContextType<TParams["_context"]>;
         prevState: any;
+        formData: FormData;
     } & ({
-        input: InferInputType<TParams['_input'], 'out'>;
+        input: InferInputType<TParams["_input"], "out">;
         formErrors?: undefined;
     } | {
         input?: undefined;
-        formErrors: z.ZodError<InferInputType<TParams['_input'], 'in'>>;
-    })>) => Promise<TState>) => (prevState: TState, formData: FormData) => Promise<TState>;
+        formErrors: z.ZodError<InferInputType<TParams["_input"], "in">>;
+    })>) => Promise<TState>) => (prevState: TState | TPrevState, formData: FormData) => Promise<TState | TPrevState>;
 }
 /**
  * Server action builder

package/dist/index.d.ts

@@ -7,8 +7,8 @@ type Prettify<T> = {
     [P in keyof T]: T[P];
 } & {};
 type SanitizeFunctionParam<T extends (param: any) => any> = T extends (param: infer P) => infer R ? Equals<P, undefined> extends true ? () => R : Equals<P, P | undefined> extends true ? (param?: P) => R : (param: P) => R : never;
-type InferParserType<T, TType extends 'in' | 'out'> = T extends z.ZodEffects<infer I, any, any> ? I[TType extends 'in' ? '_input' : '_output'] : T extends z.ZodType ? T[TType extends 'in' ? '_input' : '_output'] : never;
-type InferInputType<T, TType extends 'in' | 'out'> = T extends UnsetMarker ? undefined : InferParserType<T, TType>;
+type InferParserType<T, TType extends "in" | "out"> = T extends z.ZodEffects<infer I, any, any> ? I[TType extends "in" ? "_input" : "_output"] : T extends z.ZodType ? T[TType extends "in" ? "_input" : "_output"] : never;
+type InferInputType<T, TType extends "in" | "out"> = T extends UnsetMarker ? undefined : InferParserType<T, TType>;
 type InferContextType<T> = T extends UnsetMarker ? undefined : T;
 interface ActionParams<TInput = unknown, TContext = unknown> {
     _input: TInput;
@@ -19,7 +19,7 @@ interface ActionBuilder<TParams extends ActionParams> {
      * Middleware allows you to run code before the action, its return value will pass as context to the action.
      */
     middleware: <TContext>(middleware: () => Promise<TContext> | TContext) => ActionBuilder<{
-        _input: TParams['_input'];
+        _input: TParams["_input"];
         _context: TContext;
     }>;
     /**
@@ -27,28 +27,29 @@ interface ActionBuilder<TParams extends ActionParams> {
      */
     input: <TParser extends z.ZodType>(input: TParser) => ActionBuilder<{
         _input: TParser;
-        _context: TParams['_context'];
+        _context: TParams["_context"];
     }>;
     /**
      * Create an action.
      */
     action: <TOutput>(action: (params: {
-        ctx: InferContextType<TParams['_context']>;
-        input: InferInputType<TParams['_input'], 'out'>;
-    }) => Promise<TOutput>) => SanitizeFunctionParam<(input: InferInputType<TParams['_input'], 'in'>) => Promise<TOutput>>;
+        ctx: InferContextType<TParams["_context"]>;
+        input: InferInputType<TParams["_input"], "out">;
+    }) => Promise<TOutput>) => SanitizeFunctionParam<(input: InferInputType<TParams["_input"], "in">) => Promise<TOutput>>;
     /**
      * Create an action for React `useFormState`
      */
-    formAction: <TState>(action: (params: Prettify<{
-        ctx: InferContextType<TParams['_context']>;
+    formAction: <TState, TPrevState = undefined>(action: (params: Prettify<{
+        ctx: InferContextType<TParams["_context"]>;
         prevState: any;
+        formData: FormData;
     } & ({
-        input: InferInputType<TParams['_input'], 'out'>;
+        input: InferInputType<TParams["_input"], "out">;
         formErrors?: undefined;
     } | {
         input?: undefined;
-        formErrors: z.ZodError<InferInputType<TParams['_input'], 'in'>>;
-    })>) => Promise<TState>) => (prevState: TState, formData: FormData) => Promise<TState>;
+        formErrors: z.ZodError<InferInputType<TParams["_input"], "in">>;
+    })>) => Promise<TState>) => (prevState: TState | TPrevState, formData: FormData) => Promise<TState | TPrevState>;
 }
 /**
  * Server action builder

package/dist/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */ /* eslint-disable @typescript-eslint/no-explicit-any */ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
         var value = info.value;
@@ -43,10 +43,10 @@ function _extends() {
     };
     return _extends.apply(this, arguments);
 }
-const createNewServerActionBuilder = (def)=>{
+function createNewServerActionBuilder(def) {
     return createServerActionBuilder(def);
-};
-const createServerActionBuilder = (initDef = {})=>{
+}
+function createServerActionBuilder(initDef = {}) {
     const _def = _extends({
         input: undefined,
         middleware: undefined
@@ -59,13 +59,14 @@ const createServerActionBuilder = (initDef = {})=>{
                 input
             })),
         action: (action)=>{
+            // biome-ignore lint/suspicious/noExplicitAny: Intended
             return /*#__PURE__*/ _async_to_generator(function*(input) {
                 const ctx = yield _def.middleware == null ? void 0 : _def.middleware.call(_def);
                 if (_def.input) {
                     const result = _def.input.safeParse(input);
                     if (!result.success) {
-                        console.error('❌ Input validation error:', result.error.errors);
-                        throw new Error('Input validation error');
+                        console.error("❌ Input validation error:", result.error.errors);
+                        throw new Error("Input validation error");
                     }
                 }
                 return yield action({
@@ -78,29 +79,32 @@ const createServerActionBuilder = (initDef = {})=>{
             return /*#__PURE__*/ _async_to_generator(function*(prevState, formData) {
                 const ctx = yield _def.middleware == null ? void 0 : _def.middleware.call(_def);
                 if (_def.input) {
-                    const result = _def.input.safeParse(formData);
+                    const result = yield _def.input.safeParseAsync(formData);
                     if (!result.success) {
                         return yield action({
                             ctx,
                             prevState,
+                            formData,
                             formErrors: result.error
                         });
                     }
                     return yield action({
                         ctx,
                         prevState,
+                        formData,
                         input: result.data
                     });
                 }
                 return yield action({
                     ctx,
                     prevState,
+                    formData,
                     input: undefined
                 });
             });
         }
     };
-};
+}
 /**
  * Server action builder
  */ const serverAct = createServerActionBuilder();

package/dist/index.mjs

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */ /* eslint-disable @typescript-eslint/no-explicit-any */ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
         var info = gen[key](arg);
         var value = info.value;
@@ -41,10 +41,10 @@ function _extends() {
     };
     return _extends.apply(this, arguments);
 }
-const createNewServerActionBuilder = (def)=>{
+function createNewServerActionBuilder(def) {
     return createServerActionBuilder(def);
-};
-const createServerActionBuilder = (initDef = {})=>{
+}
+function createServerActionBuilder(initDef = {}) {
     const _def = _extends({
         input: undefined,
         middleware: undefined
@@ -57,13 +57,14 @@ const createServerActionBuilder = (initDef = {})=>{
                 input
             })),
         action: (action)=>{
+            // biome-ignore lint/suspicious/noExplicitAny: Intended
             return /*#__PURE__*/ _async_to_generator(function*(input) {
                 const ctx = yield _def.middleware == null ? void 0 : _def.middleware.call(_def);
                 if (_def.input) {
                     const result = _def.input.safeParse(input);
                     if (!result.success) {
-                        console.error('❌ Input validation error:', result.error.errors);
-                        throw new Error('Input validation error');
+                        console.error("❌ Input validation error:", result.error.errors);
+                        throw new Error("Input validation error");
                     }
                 }
                 return yield action({
@@ -76,29 +77,32 @@ const createServerActionBuilder = (initDef = {})=>{
             return /*#__PURE__*/ _async_to_generator(function*(prevState, formData) {
                 const ctx = yield _def.middleware == null ? void 0 : _def.middleware.call(_def);
                 if (_def.input) {
-                    const result = _def.input.safeParse(formData);
+                    const result = yield _def.input.safeParseAsync(formData);
                     if (!result.success) {
                         return yield action({
                             ctx,
                             prevState,
+                            formData,
                             formErrors: result.error
                         });
                     }
                     return yield action({
                         ctx,
                         prevState,
+                        formData,
                         input: result.data
                     });
                 }
                 return yield action({
                     ctx,
                     prevState,
+                    formData,
                     input: undefined
                 });
             });
         }
     };
-};
+}
 /**
  * Server action builder
  */ const serverAct = createServerActionBuilder();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "server-act",
-  "version": "1.1.6",
+  "version": "1.2.0",
   "homepage": "https://github.com/chungweileong94/server-act#readme",
   "author": "chungweileong94",
   "license": "MIT",
@@ -44,16 +44,13 @@
     "action"
   ],
   "devDependencies": {
-    "bunchee": "^4.3.3",
-    "eslint": "^8.49.0",
-    "eslint-config-whiteroom": "^3.3.0",
-    "prettier": "^3.0.3",
-    "typescript": "^5.2.2",
+    "bunchee": "^5.1.2",
+    "typescript": "^5.4.5",
     "zod": "^3.22.2",
     "zod-form-data": "^2.0.2"
   },
   "peerDependencies": {
-    "typescript": "^5.2.2",
+    "typescript": ">=5.0.0",
     "zod": "^3.22.2"
   },
   "peerDependenciesMeta": {
@@ -64,7 +61,7 @@
   "scripts": {
     "build": "bunchee",
     "dev": "bunchee -w",
-    "test": "vitest run",
-    "lint": "eslint src --ext .ts"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
   }
 }