react-form-action 0.4.0 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -2
- package/dist/client.d.mts +7 -6
- package/dist/client.mjs +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -25,6 +25,10 @@ End-to-end typesafe success, error & validation state control for Next.js 14 for
|
|
|
25
25
|
npm i react-form-action zod-form-data
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
+
<a aria-label="NPM version" href="https://www.npmjs.com/package/react-form-action">
|
|
29
|
+
<img alt="NPM Version" src="https://img.shields.io/npm/v/react-form-action?style=for-the-badge&labelColor=24292e">
|
|
30
|
+
</a>
|
|
31
|
+
|
|
28
32
|
## Usage
|
|
29
33
|
|
|
30
34
|
### `formAction` builder
|
|
@@ -86,9 +90,13 @@ export const signUp = authAction
|
|
|
86
90
|
.run(async ({ ctx: { t }, input: { email, password } }) => {
|
|
87
91
|
// 🎉 passwords match!
|
|
88
92
|
|
|
89
|
-
await db.signUp({ email, password });
|
|
93
|
+
const tokenData = await db.signUp({ email, password });
|
|
94
|
+
|
|
95
|
+
if (!tokenData) {
|
|
96
|
+
return t("signUp.emailVerificationRequired");
|
|
97
|
+
}
|
|
90
98
|
|
|
91
|
-
return t("
|
|
99
|
+
return t("singUp.success");
|
|
92
100
|
});
|
|
93
101
|
```
|
|
94
102
|
|
package/dist/client.d.mts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import React__default, { FormHTMLAttributes } from 'react';
|
|
3
3
|
import { RenderProp } from 'react-render-prop-type';
|
|
4
|
-
import { b as InitialState, I as InvalidState, a as FailureState, S as SuccessState
|
|
4
|
+
import { F as FormState, b as InitialState, I as InvalidState, a as FailureState, S as SuccessState } from './createFormAction-3a51310f.js';
|
|
5
5
|
import { useFormStatus } from 'react-dom';
|
|
6
6
|
|
|
7
|
-
type FormStateProps<Data,
|
|
8
|
-
action: (state: FormState<Data,
|
|
7
|
+
type FormStateProps<Data, Error, ValidationError, Payload> = {
|
|
8
|
+
action: (state: FormState<Data, Error, ValidationError>, payload: Payload) => Promise<FormState<Data, Error, ValidationError>>;
|
|
9
9
|
initialData: Data;
|
|
10
10
|
permalink?: string;
|
|
11
11
|
};
|
|
@@ -13,12 +13,13 @@ declare function initial<Data>(data: Data): InitialState<Data>;
|
|
|
13
13
|
type FormMetaState<T extends FormState<unknown, unknown, unknown>> = T & {
|
|
14
14
|
isPending: boolean;
|
|
15
15
|
isInitial: T["type"] extends "initial" ? true : false;
|
|
16
|
+
isInvalid: T["type"] extends "invalid" ? true : false;
|
|
16
17
|
isFailure: T["type"] extends "failure" ? true : false;
|
|
17
18
|
isSuccess: T["type"] extends "success" ? true : false;
|
|
18
|
-
isInvalid: T["type"] extends "invalid" ? true : false;
|
|
19
19
|
};
|
|
20
|
-
|
|
20
|
+
type FormProps<Data, Error, ValidationError> = Omit<FormHTMLAttributes<HTMLFormElement>, "action" | "children"> & FormStateProps<Data, Error, ValidationError, FormData> & RenderProp<FormMetaState<InitialState<Data>> | FormMetaState<InvalidState<ValidationError>> | FormMetaState<FailureState<Error>> | FormMetaState<SuccessState<Data>>>;
|
|
21
|
+
declare function Form<Data, Error, ValidationError>({ children, action, initialData, permalink, ...props }: FormProps<Data, Error, ValidationError>): React__default.JSX.Element;
|
|
21
22
|
|
|
22
23
|
declare function FormStatus({ children, }: RenderProp<ReturnType<typeof useFormStatus>>): React.ReactNode;
|
|
23
24
|
|
|
24
|
-
export { Form, FormStatus, initial };
|
|
25
|
+
export { Form, FormProps, FormStateProps, FormStatus, initial };
|
package/dist/client.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import a from"react";import{useFormState as u}from"react-dom";import{useFormStatus as p}from"react-dom";function e({children:t}){return t(p())}function
|
|
1
|
+
"use client";import a from"react";import{useFormState as u}from"react-dom";import{useFormStatus as p}from"react-dom";function e({children:t}){return t(p())}function d(t){return{type:"initial",data:t,error:null,validationError:null}}function E({children:t,action:o,initialData:i,permalink:n,...s}){let[r,m]=u(o,d(i),n);return a.createElement("form",{action:m,...s},a.createElement(e,null,({pending:l})=>t({...r,isPending:l,isInitial:r.type==="initial",isInvalid:r.type==="invalid",isFailure:r.type==="failure",isSuccess:r.type==="success"})))}export{E as Form,e as FormStatus,d as initial};
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function y(e){function a
|
|
1
|
+
function y(e){function o(a){return{type:"success",data:a,error:null,validationError:null}}function n(a){return{type:"failure",data:null,error:a,validationError:null}}function d(a){return{type:"invalid",data:null,error:null,validationError:a}}return(a,S)=>e({success:o,failure:n,invalid:d})(a,S)}import{ZodFirstPartyTypeKind as C}from"zod";import{zfd as w}from"zod-form-data";var l=Symbol();function s(e,o=[],n){async function d(t){let r={formData:t};for(let i of o){let u=await i({ctx:r});r={...r,...u}}return r}return{input(t){if(e===l)return s(t,o,n);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,o)}else throw Error("Merging inputs works only for object schemas without effects.")},use(t){return s(e,[...o,t],n)},error(t){return s(e,o,t)},run:e===l?t=>y(({success:r,failure:i})=>async(u,x)=>{let m=await d(x);try{return r(await t({ctx:m}))}catch(c){if(n)return i(n({error:c,ctx:m}));throw c}}):e===l?void 0:t=>y(({success:r,failure:i,invalid:u})=>{let x=w.formData(e);return async(m,c)=>{let f=await d(c),p=x.safeParse(c);if(!p.success)return u(p.error.flatten());let h=p.data;try{return r(await t({input:h,ctx:f}))}catch(E){if(n)return i(n({error:E,ctx:f}));throw E}}})}}var b=s(l);export{y as createFormAction,b as formAction};
|