@tanstack/react-form 1.13.1 → 1.14.0
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/dist/cjs/createFormHook.cjs +4 -2
- package/dist/cjs/createFormHook.cjs.map +1 -1
- package/dist/cjs/useForm.cjs +1 -1
- package/dist/cjs/useForm.cjs.map +1 -1
- package/dist/esm/createFormHook.js +4 -2
- package/dist/esm/createFormHook.js.map +1 -1
- package/dist/esm/useForm.js +1 -1
- package/dist/esm/useForm.js.map +1 -1
- package/package.json +3 -3
- package/src/createFormHook.tsx +4 -2
- package/src/useForm.tsx +1 -1
|
@@ -35,17 +35,19 @@ function createFormHook({
|
|
|
35
35
|
function useAppForm(props) {
|
|
36
36
|
const form = useForm.useForm(props);
|
|
37
37
|
const AppForm = react.useMemo(() => {
|
|
38
|
-
|
|
38
|
+
const AppForm2 = ({ children }) => {
|
|
39
39
|
return /* @__PURE__ */ jsxRuntime.jsx(formContext.Provider, { value: form, children });
|
|
40
40
|
};
|
|
41
|
+
return AppForm2;
|
|
41
42
|
}, [form]);
|
|
42
43
|
const AppField = react.useMemo(() => {
|
|
43
|
-
|
|
44
|
+
const AppField2 = ({ children, ...props2 }) => {
|
|
44
45
|
return /* @__PURE__ */ jsxRuntime.jsx(form.Field, { ...props2, children: (field) => (
|
|
45
46
|
// eslint-disable-next-line @eslint-react/no-context-provider
|
|
46
47
|
/* @__PURE__ */ jsxRuntime.jsx(fieldContext.Provider, { value: field, children: children(Object.assign(field, fieldComponents)) })
|
|
47
48
|
) });
|
|
48
49
|
};
|
|
50
|
+
return AppField2;
|
|
49
51
|
}, [form]);
|
|
50
52
|
const extendedForm = react.useMemo(() => {
|
|
51
53
|
return Object.assign(form, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createFormHook.cjs","sources":["../../src/createFormHook.tsx"],"sourcesContent":["import { createContext, useContext, useMemo } from 'react'\nimport { useForm } from './useForm'\nimport type {\n AnyFieldApi,\n AnyFormApi,\n FieldApi,\n FormApi,\n FormAsyncValidateOrFn,\n FormOptions,\n FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { ComponentType, Context, JSX, PropsWithChildren } from 'react'\nimport type { FieldComponent } from './useField'\nimport type { ReactFormExtendedApi } from './useForm'\n\n/**\n * TypeScript inferencing is weird.\n *\n * If you have:\n *\n * @example\n *\n * interface Args<T> {\n * arg?: T\n * }\n *\n * function test<T>(arg?: Partial<Args<T>>): T {\n * return 0 as any;\n * }\n *\n * const a = test({});\n *\n * Then `T` will default to `unknown`.\n *\n * However, if we change `test` to be:\n *\n * @example\n *\n * function test<T extends undefined>(arg?: Partial<Args<T>>): T;\n *\n * Then `T` becomes `undefined`.\n *\n * Here, we are checking if the passed type `T` extends `DefaultT` and **only**\n * `DefaultT`, as if that's the case we assume that inferencing has not occured.\n */\ntype UnwrapOrAny<T> = [unknown] extends [T] ? any : T\ntype UnwrapDefaultOrAny<DefaultT, T> = [DefaultT] extends [T]\n ? [T] extends [DefaultT]\n ? any\n : T\n : T\n\nexport function createFormHookContexts() {\n // We should never hit the `null` case here\n const fieldContext = createContext<AnyFieldApi>(null as never)\n\n function useFieldContext<TData>() {\n const field = useContext(fieldContext)\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!field) {\n throw new Error(\n '`fieldContext` only works when within a `fieldComponent` passed to `createFormHook`',\n )\n }\n\n return field as FieldApi<\n any,\n string,\n TData,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any\n >\n }\n\n // We should never hit the `null` case here\n const formContext = createContext<AnyFormApi>(null as never)\n\n function useFormContext() {\n const form = useContext(formContext)\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!form) {\n throw new Error(\n '`formContext` only works when within a `formComponent` passed to `createFormHook`',\n )\n }\n\n return form as ReactFormExtendedApi<\n // If you need access to the form data, you need to use `withForm` instead\n Record<string, never>,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any\n >\n }\n\n return { fieldContext, useFieldContext, useFormContext, formContext }\n}\n\ninterface CreateFormHookProps<\n TFieldComponents extends Record<string, ComponentType<any>>,\n TFormComponents extends Record<string, ComponentType<any>>,\n> {\n fieldComponents: TFieldComponents\n fieldContext: Context<AnyFieldApi>\n formComponents: TFormComponents\n formContext: Context<AnyFormApi>\n}\n\ntype AppFieldExtendedReactFormApi<\n TFormData,\n TOnMount extends undefined | FormValidateOrFn<TFormData>,\n TOnChange extends undefined | FormValidateOrFn<TFormData>,\n TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n TSubmitMeta,\n TFieldComponents extends Record<string, ComponentType<any>>,\n TFormComponents extends Record<string, ComponentType<any>>,\n> = ReactFormExtendedApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n> &\n NoInfer<TFormComponents> & {\n AppField: FieldComponent<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta,\n NoInfer<TFieldComponents>\n >\n AppForm: ComponentType<PropsWithChildren>\n }\n\nexport interface WithFormProps<\n TFormData,\n TOnMount extends undefined | FormValidateOrFn<TFormData>,\n TOnChange extends undefined | FormValidateOrFn<TFormData>,\n TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n TSubmitMeta,\n TFieldComponents extends Record<string, ComponentType<any>>,\n TFormComponents extends Record<string, ComponentType<any>>,\n TRenderProps extends object = Record<string, never>,\n> extends FormOptions<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n > {\n // Optional, but adds props to the `render` function outside of `form`\n props?: TRenderProps\n render: (\n props: PropsWithChildren<\n NoInfer<TRenderProps> & {\n form: AppFieldExtendedReactFormApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta,\n TFieldComponents,\n TFormComponents\n >\n }\n >,\n ) => JSX.Element\n}\n\nexport function createFormHook<\n const TComponents extends Record<string, ComponentType<any>>,\n const TFormComponents extends Record<string, ComponentType<any>>,\n>({\n fieldComponents,\n fieldContext,\n formContext,\n formComponents,\n}: CreateFormHookProps<TComponents, TFormComponents>) {\n function useAppForm<\n TFormData,\n TOnMount extends undefined | FormValidateOrFn<TFormData>,\n TOnChange extends undefined | FormValidateOrFn<TFormData>,\n TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n TSubmitMeta,\n >(\n props: FormOptions<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n >,\n ): AppFieldExtendedReactFormApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta,\n TComponents,\n TFormComponents\n > {\n const form = useForm(props)\n\n const AppForm = useMemo(() => {\n return (({ children }) => {\n return (\n <formContext.Provider value={form}>{children}</formContext.Provider>\n )\n }) as ComponentType<PropsWithChildren>\n }, [form])\n\n const AppField = useMemo(() => {\n return (({ children, ...props }) => {\n return (\n <form.Field {...props}>\n {(field) => (\n // eslint-disable-next-line @eslint-react/no-context-provider\n <fieldContext.Provider value={field}>\n {children(Object.assign(field, fieldComponents))}\n </fieldContext.Provider>\n )}\n </form.Field>\n )\n }) as FieldComponent<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta,\n TComponents\n >\n }, [form])\n\n const extendedForm = useMemo(() => {\n return Object.assign(form, {\n AppField,\n AppForm,\n ...formComponents,\n })\n }, [form, AppField, AppForm])\n\n return extendedForm\n }\n\n function withForm<\n TFormData,\n TOnMount extends undefined | FormValidateOrFn<TFormData>,\n TOnChange extends undefined | FormValidateOrFn<TFormData>,\n TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n TSubmitMeta,\n TRenderProps extends object = {},\n >({\n render,\n props,\n }: WithFormProps<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta,\n TComponents,\n TFormComponents,\n TRenderProps\n >): WithFormProps<\n UnwrapOrAny<TFormData>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnMount>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnChange>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnChangeAsync>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnBlur>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnBlurAsync>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnSubmit>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnServer>,\n UnwrapOrAny<TSubmitMeta>,\n UnwrapOrAny<TComponents>,\n UnwrapOrAny<TFormComponents>,\n UnwrapOrAny<TRenderProps>\n >['render'] {\n return (innerProps) => render({ ...props, ...innerProps })\n }\n\n return {\n useAppForm,\n withForm,\n }\n}\n"],"names":["createContext","useContext","useForm","useMemo","props","jsx"],"mappings":";;;;;AAoDO,SAAS,yBAAyB;AAEjC,QAAA,eAAeA,oBAA2B,IAAa;AAE7D,WAAS,kBAAyB;AAC1B,UAAA,QAAQC,iBAAW,YAAY;AAGrC,QAAI,CAAC,OAAO;AACV,YAAM,IAAI;AAAA,QACR;AAAA,MACF;AAAA,IAAA;AAGK,WAAA;AAAA,EAAA;AAwBH,QAAA,cAAcD,oBAA0B,IAAa;AAE3D,WAAS,iBAAiB;AAClB,UAAA,OAAOC,iBAAW,WAAW;AAGnC,QAAI,CAAC,MAAM;AACT,YAAM,IAAI;AAAA,QACR;AAAA,MACF;AAAA,IAAA;AAGK,WAAA;AAAA,EAAA;AAeT,SAAO,EAAE,cAAc,iBAAiB,gBAAgB,YAAY;AACtE;AAwGO,SAAS,eAGd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsD;AACpD,WAAS,WAYP,OAyBA;AACM,UAAA,OAAOC,gBAAQ,KAAK;AAEpB,UAAA,UAAUC,MAAAA,QAAQ,MAAM;AACpB,aAAA,CAAC,EAAE,eAAe;AACxB,8CACG,YAAY,UAAZ,EAAqB,OAAO,MAAO,UAAS;AAAA,MAEjD;AAAA,IAAA,GACC,CAAC,IAAI,CAAC;AAEH,UAAA,WAAWA,MAAAA,QAAQ,MAAM;AAC7B,aAAQ,CAAC,EAAE,UAAU,GAAGC,aAAY;AAClC,8CACG,KAAK,OAAL,EAAY,GAAGA,QACb,UAAC,CAAA;AAAA;AAAA,UAECC,2BAAAA,IAAA,aAAa,UAAb,EAAsB,OAAO,OAC3B,UAAS,SAAA,OAAO,OAAO,OAAO,eAAe,CAAC,EACjD,CAAA;AAAA,WAEJ;AAAA,MAEJ;AAAA,IAAA,GAaC,CAAC,IAAI,CAAC;AAEH,UAAA,eAAeF,MAAAA,QAAQ,MAAM;AAC1B,aAAA,OAAO,OAAO,MAAM;AAAA,QACzB;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MAAA,CACJ;AAAA,IACA,GAAA,CAAC,MAAM,UAAU,OAAO,CAAC;AAErB,WAAA;AAAA,EAAA;AAGT,WAAS,SAYP;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GA6BU;AACH,WAAA,CAAC,eAAe,OAAO,EAAE,GAAG,OAAO,GAAG,YAAY;AAAA,EAAA;AAGpD,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;;;"}
|
|
1
|
+
{"version":3,"file":"createFormHook.cjs","sources":["../../src/createFormHook.tsx"],"sourcesContent":["import { createContext, useContext, useMemo } from 'react'\nimport { useForm } from './useForm'\nimport type {\n AnyFieldApi,\n AnyFormApi,\n FieldApi,\n FormApi,\n FormAsyncValidateOrFn,\n FormOptions,\n FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { ComponentType, Context, JSX, PropsWithChildren } from 'react'\nimport type { FieldComponent } from './useField'\nimport type { ReactFormExtendedApi } from './useForm'\n\n/**\n * TypeScript inferencing is weird.\n *\n * If you have:\n *\n * @example\n *\n * interface Args<T> {\n * arg?: T\n * }\n *\n * function test<T>(arg?: Partial<Args<T>>): T {\n * return 0 as any;\n * }\n *\n * const a = test({});\n *\n * Then `T` will default to `unknown`.\n *\n * However, if we change `test` to be:\n *\n * @example\n *\n * function test<T extends undefined>(arg?: Partial<Args<T>>): T;\n *\n * Then `T` becomes `undefined`.\n *\n * Here, we are checking if the passed type `T` extends `DefaultT` and **only**\n * `DefaultT`, as if that's the case we assume that inferencing has not occured.\n */\ntype UnwrapOrAny<T> = [unknown] extends [T] ? any : T\ntype UnwrapDefaultOrAny<DefaultT, T> = [DefaultT] extends [T]\n ? [T] extends [DefaultT]\n ? any\n : T\n : T\n\nexport function createFormHookContexts() {\n // We should never hit the `null` case here\n const fieldContext = createContext<AnyFieldApi>(null as never)\n\n function useFieldContext<TData>() {\n const field = useContext(fieldContext)\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!field) {\n throw new Error(\n '`fieldContext` only works when within a `fieldComponent` passed to `createFormHook`',\n )\n }\n\n return field as FieldApi<\n any,\n string,\n TData,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any\n >\n }\n\n // We should never hit the `null` case here\n const formContext = createContext<AnyFormApi>(null as never)\n\n function useFormContext() {\n const form = useContext(formContext)\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!form) {\n throw new Error(\n '`formContext` only works when within a `formComponent` passed to `createFormHook`',\n )\n }\n\n return form as ReactFormExtendedApi<\n // If you need access to the form data, you need to use `withForm` instead\n Record<string, never>,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any\n >\n }\n\n return { fieldContext, useFieldContext, useFormContext, formContext }\n}\n\ninterface CreateFormHookProps<\n TFieldComponents extends Record<string, ComponentType<any>>,\n TFormComponents extends Record<string, ComponentType<any>>,\n> {\n fieldComponents: TFieldComponents\n fieldContext: Context<AnyFieldApi>\n formComponents: TFormComponents\n formContext: Context<AnyFormApi>\n}\n\ntype AppFieldExtendedReactFormApi<\n TFormData,\n TOnMount extends undefined | FormValidateOrFn<TFormData>,\n TOnChange extends undefined | FormValidateOrFn<TFormData>,\n TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n TSubmitMeta,\n TFieldComponents extends Record<string, ComponentType<any>>,\n TFormComponents extends Record<string, ComponentType<any>>,\n> = ReactFormExtendedApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n> &\n NoInfer<TFormComponents> & {\n AppField: FieldComponent<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta,\n NoInfer<TFieldComponents>\n >\n AppForm: ComponentType<PropsWithChildren>\n }\n\nexport interface WithFormProps<\n TFormData,\n TOnMount extends undefined | FormValidateOrFn<TFormData>,\n TOnChange extends undefined | FormValidateOrFn<TFormData>,\n TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n TSubmitMeta,\n TFieldComponents extends Record<string, ComponentType<any>>,\n TFormComponents extends Record<string, ComponentType<any>>,\n TRenderProps extends object = Record<string, never>,\n> extends FormOptions<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n > {\n // Optional, but adds props to the `render` function outside of `form`\n props?: TRenderProps\n render: (\n props: PropsWithChildren<\n NoInfer<TRenderProps> & {\n form: AppFieldExtendedReactFormApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta,\n TFieldComponents,\n TFormComponents\n >\n }\n >,\n ) => JSX.Element\n}\n\nexport function createFormHook<\n const TComponents extends Record<string, ComponentType<any>>,\n const TFormComponents extends Record<string, ComponentType<any>>,\n>({\n fieldComponents,\n fieldContext,\n formContext,\n formComponents,\n}: CreateFormHookProps<TComponents, TFormComponents>) {\n function useAppForm<\n TFormData,\n TOnMount extends undefined | FormValidateOrFn<TFormData>,\n TOnChange extends undefined | FormValidateOrFn<TFormData>,\n TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n TSubmitMeta,\n >(\n props: FormOptions<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n >,\n ): AppFieldExtendedReactFormApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta,\n TComponents,\n TFormComponents\n > {\n const form = useForm(props)\n\n const AppForm = useMemo(() => {\n const AppForm = (({ children }) => {\n return (\n <formContext.Provider value={form}>{children}</formContext.Provider>\n )\n }) as ComponentType<PropsWithChildren>\n return AppForm\n }, [form])\n\n const AppField = useMemo(() => {\n const AppField = (({ children, ...props }) => {\n return (\n <form.Field {...props}>\n {(field) => (\n // eslint-disable-next-line @eslint-react/no-context-provider\n <fieldContext.Provider value={field}>\n {children(Object.assign(field, fieldComponents))}\n </fieldContext.Provider>\n )}\n </form.Field>\n )\n }) as FieldComponent<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta,\n TComponents\n >\n return AppField\n }, [form])\n\n const extendedForm = useMemo(() => {\n return Object.assign(form, {\n AppField,\n AppForm,\n ...formComponents,\n })\n }, [form, AppField, AppForm])\n\n return extendedForm\n }\n\n function withForm<\n TFormData,\n TOnMount extends undefined | FormValidateOrFn<TFormData>,\n TOnChange extends undefined | FormValidateOrFn<TFormData>,\n TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n TSubmitMeta,\n TRenderProps extends object = {},\n >({\n render,\n props,\n }: WithFormProps<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta,\n TComponents,\n TFormComponents,\n TRenderProps\n >): WithFormProps<\n UnwrapOrAny<TFormData>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnMount>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnChange>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnChangeAsync>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnBlur>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnBlurAsync>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnSubmit>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnServer>,\n UnwrapOrAny<TSubmitMeta>,\n UnwrapOrAny<TComponents>,\n UnwrapOrAny<TFormComponents>,\n UnwrapOrAny<TRenderProps>\n >['render'] {\n return (innerProps) => render({ ...props, ...innerProps })\n }\n\n return {\n useAppForm,\n withForm,\n }\n}\n"],"names":["createContext","useContext","useForm","useMemo","AppForm","AppField","props","jsx"],"mappings":";;;;;AAoDO,SAAS,yBAAyB;AAEjC,QAAA,eAAeA,oBAA2B,IAAa;AAE7D,WAAS,kBAAyB;AAC1B,UAAA,QAAQC,iBAAW,YAAY;AAGrC,QAAI,CAAC,OAAO;AACV,YAAM,IAAI;AAAA,QACR;AAAA,MACF;AAAA,IAAA;AAGK,WAAA;AAAA,EAAA;AAwBH,QAAA,cAAcD,oBAA0B,IAAa;AAE3D,WAAS,iBAAiB;AAClB,UAAA,OAAOC,iBAAW,WAAW;AAGnC,QAAI,CAAC,MAAM;AACT,YAAM,IAAI;AAAA,QACR;AAAA,MACF;AAAA,IAAA;AAGK,WAAA;AAAA,EAAA;AAeT,SAAO,EAAE,cAAc,iBAAiB,gBAAgB,YAAY;AACtE;AAwGO,SAAS,eAGd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsD;AACpD,WAAS,WAYP,OAyBA;AACM,UAAA,OAAOC,gBAAQ,KAAK;AAEpB,UAAA,UAAUC,MAAAA,QAAQ,MAAM;AAC5B,YAAMC,WAAW,CAAC,EAAE,eAAe;AACjC,8CACG,YAAY,UAAZ,EAAqB,OAAO,MAAO,UAAS;AAAA,MAEjD;AACOA,aAAAA;AAAAA,IAAA,GACN,CAAC,IAAI,CAAC;AAEH,UAAA,WAAWD,MAAAA,QAAQ,MAAM;AAC7B,YAAME,YAAY,CAAC,EAAE,UAAU,GAAGC,aAAY;AAC5C,8CACG,KAAK,OAAL,EAAY,GAAGA,QACb,UAAC,CAAA;AAAA;AAAA,UAECC,2BAAAA,IAAA,aAAa,UAAb,EAAsB,OAAO,OAC3B,UAAS,SAAA,OAAO,OAAO,OAAO,eAAe,CAAC,EACjD,CAAA;AAAA,WAEJ;AAAA,MAEJ;AAaOF,aAAAA;AAAAA,IAAA,GACN,CAAC,IAAI,CAAC;AAEH,UAAA,eAAeF,MAAAA,QAAQ,MAAM;AAC1B,aAAA,OAAO,OAAO,MAAM;AAAA,QACzB;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MAAA,CACJ;AAAA,IACA,GAAA,CAAC,MAAM,UAAU,OAAO,CAAC;AAErB,WAAA;AAAA,EAAA;AAGT,WAAS,SAYP;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GA6BU;AACH,WAAA,CAAC,eAAe,OAAO,EAAE,GAAG,OAAO,GAAG,YAAY;AAAA,EAAA;AAGpD,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;;;"}
|
package/dist/cjs/useForm.cjs
CHANGED
|
@@ -21,7 +21,7 @@ function useForm(opts) {
|
|
|
21
21
|
extendedApi.Field = function APIField(props) {
|
|
22
22
|
return /* @__PURE__ */ jsxRuntime.jsx(useField.Field, { ...props, form: api });
|
|
23
23
|
};
|
|
24
|
-
extendedApi.Subscribe = (props)
|
|
24
|
+
extendedApi.Subscribe = function Subscribe(props) {
|
|
25
25
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
26
26
|
LocalSubscribe,
|
|
27
27
|
{
|
package/dist/cjs/useForm.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useForm.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport React, { useState } from 'react'\nimport { Field } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type {\n AnyFormApi,\n AnyFormState,\n FormAsyncValidateOrFn,\n FormOptions,\n FormState,\n FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { PropsWithChildren, ReactNode } from 'react'\nimport type { FieldComponent } from './useField'\nimport type { NoInfer } from '@tanstack/react-store'\n\n/**\n * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`\n */\nexport interface ReactFormApi<\n in out TFormData,\n in out TOnMount extends undefined | FormValidateOrFn<TFormData>,\n in out TOnChange extends undefined | FormValidateOrFn<TFormData>,\n in out TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n in out TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n in out TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TSubmitMeta,\n> {\n /**\n * A React component to render form fields. With this, you can render and manage individual form fields.\n */\n Field: FieldComponent<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n >\n /**\n * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.\n */\n Subscribe: <\n TSelected = NoInfer<\n FormState<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer\n >\n >,\n >(props: {\n selector?: (\n state: NoInfer<\n FormState<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer\n >\n >,\n ) => TSelected\n children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n }) => ReactNode\n}\n\n/**\n * An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi`\n */\nexport type ReactFormExtendedApi<\n TFormData,\n TOnMount extends undefined | FormValidateOrFn<TFormData>,\n TOnChange extends undefined | FormValidateOrFn<TFormData>,\n TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n TSubmitMeta,\n> = FormApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n> &\n ReactFormApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n >\n\nfunction LocalSubscribe({\n form,\n selector,\n children,\n}: PropsWithChildren<{\n form: AnyFormApi\n selector: (state: AnyFormState) => AnyFormState\n}>) {\n const data = useStore(form.store, selector)\n\n return functionalUpdate(children, data)\n}\n\n/**\n * A custom React Hook that returns an extended instance of the `FormApi` class.\n *\n * This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields\n */\nexport function useForm<\n TFormData,\n TOnMount extends undefined | FormValidateOrFn<TFormData>,\n TOnChange extends undefined | FormValidateOrFn<TFormData>,\n TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n TSubmitMeta,\n>(\n opts?: FormOptions<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n >,\n) {\n const [formApi] = useState(() => {\n const api = new FormApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n >(opts)\n\n const extendedApi: ReactFormExtendedApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n > = api as never\n extendedApi.Field = function APIField(props) {\n return <Field {...props} form={api} />\n }\n extendedApi.Subscribe = (props: any)
|
|
1
|
+
{"version":3,"file":"useForm.cjs","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport React, { useState } from 'react'\nimport { Field } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type {\n AnyFormApi,\n AnyFormState,\n FormAsyncValidateOrFn,\n FormOptions,\n FormState,\n FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { PropsWithChildren, ReactNode } from 'react'\nimport type { FieldComponent } from './useField'\nimport type { NoInfer } from '@tanstack/react-store'\n\n/**\n * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`\n */\nexport interface ReactFormApi<\n in out TFormData,\n in out TOnMount extends undefined | FormValidateOrFn<TFormData>,\n in out TOnChange extends undefined | FormValidateOrFn<TFormData>,\n in out TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n in out TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n in out TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TSubmitMeta,\n> {\n /**\n * A React component to render form fields. With this, you can render and manage individual form fields.\n */\n Field: FieldComponent<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n >\n /**\n * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.\n */\n Subscribe: <\n TSelected = NoInfer<\n FormState<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer\n >\n >,\n >(props: {\n selector?: (\n state: NoInfer<\n FormState<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer\n >\n >,\n ) => TSelected\n children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n }) => ReactNode\n}\n\n/**\n * An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi`\n */\nexport type ReactFormExtendedApi<\n TFormData,\n TOnMount extends undefined | FormValidateOrFn<TFormData>,\n TOnChange extends undefined | FormValidateOrFn<TFormData>,\n TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n TSubmitMeta,\n> = FormApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n> &\n ReactFormApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n >\n\nfunction LocalSubscribe({\n form,\n selector,\n children,\n}: PropsWithChildren<{\n form: AnyFormApi\n selector: (state: AnyFormState) => AnyFormState\n}>) {\n const data = useStore(form.store, selector)\n\n return functionalUpdate(children, data)\n}\n\n/**\n * A custom React Hook that returns an extended instance of the `FormApi` class.\n *\n * This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields\n */\nexport function useForm<\n TFormData,\n TOnMount extends undefined | FormValidateOrFn<TFormData>,\n TOnChange extends undefined | FormValidateOrFn<TFormData>,\n TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n TSubmitMeta,\n>(\n opts?: FormOptions<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n >,\n) {\n const [formApi] = useState(() => {\n const api = new FormApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n >(opts)\n\n const extendedApi: ReactFormExtendedApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n > = api as never\n extendedApi.Field = function APIField(props) {\n return <Field {...props} form={api} />\n }\n extendedApi.Subscribe = function Subscribe(props: any) {\n return (\n <LocalSubscribe\n form={api}\n selector={props.selector}\n children={props.children}\n />\n )\n }\n\n return extendedApi\n })\n\n useIsomorphicLayoutEffect(formApi.mount, [])\n\n useStore(formApi.store, (state) => state.isSubmitting)\n\n /**\n * formApi.update should not have any side effects. Think of it like a `useRef`\n * that we need to keep updated every render with the most up-to-date information.\n */\n useIsomorphicLayoutEffect(() => {\n formApi.update(opts)\n })\n\n return formApi\n}\n"],"names":["useStore","functionalUpdate","useState","FormApi","jsx","Field","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;AA2HA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,GAGI;AACF,QAAM,OAAOA,WAAA,SAAS,KAAK,OAAO,QAAQ;AAEnC,SAAAC,SAAA,iBAAiB,UAAU,IAAI;AACxC;AAOO,SAAS,QAYd,MAYA;AACA,QAAM,CAAC,OAAO,IAAIC,MAAAA,SAAS,MAAM;AACzB,UAAA,MAAM,IAAIC,SAAA,QAWd,IAAI;AAEN,UAAM,cAWF;AACQ,gBAAA,QAAQ,SAAS,SAAS,OAAO;AAC3C,aAAQC,2BAAAA,IAAAC,SAAAA,OAAA,EAAO,GAAG,OAAO,MAAM,KAAK;AAAA,IACtC;AACY,gBAAA,YAAY,SAAS,UAAU,OAAY;AAEnD,aAAAD,2BAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,UAAU,MAAM;AAAA,UAChB,UAAU,MAAM;AAAA,QAAA;AAAA,MAClB;AAAA,IAEJ;AAEO,WAAA;AAAA,EAAA,CACR;AAEyBE,sDAAA,QAAQ,OAAO,EAAE;AAE3CN,aAAA,SAAS,QAAQ,OAAO,CAAC,UAAU,MAAM,YAAY;AAMrDM,4BAAAA,0BAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EAAA,CACpB;AAEM,SAAA;AACT;;"}
|
|
@@ -33,17 +33,19 @@ function createFormHook({
|
|
|
33
33
|
function useAppForm(props) {
|
|
34
34
|
const form = useForm(props);
|
|
35
35
|
const AppForm = useMemo(() => {
|
|
36
|
-
|
|
36
|
+
const AppForm2 = ({ children }) => {
|
|
37
37
|
return /* @__PURE__ */ jsx(formContext.Provider, { value: form, children });
|
|
38
38
|
};
|
|
39
|
+
return AppForm2;
|
|
39
40
|
}, [form]);
|
|
40
41
|
const AppField = useMemo(() => {
|
|
41
|
-
|
|
42
|
+
const AppField2 = ({ children, ...props2 }) => {
|
|
42
43
|
return /* @__PURE__ */ jsx(form.Field, { ...props2, children: (field) => (
|
|
43
44
|
// eslint-disable-next-line @eslint-react/no-context-provider
|
|
44
45
|
/* @__PURE__ */ jsx(fieldContext.Provider, { value: field, children: children(Object.assign(field, fieldComponents)) })
|
|
45
46
|
) });
|
|
46
47
|
};
|
|
48
|
+
return AppField2;
|
|
47
49
|
}, [form]);
|
|
48
50
|
const extendedForm = useMemo(() => {
|
|
49
51
|
return Object.assign(form, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createFormHook.js","sources":["../../src/createFormHook.tsx"],"sourcesContent":["import { createContext, useContext, useMemo } from 'react'\nimport { useForm } from './useForm'\nimport type {\n AnyFieldApi,\n AnyFormApi,\n FieldApi,\n FormApi,\n FormAsyncValidateOrFn,\n FormOptions,\n FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { ComponentType, Context, JSX, PropsWithChildren } from 'react'\nimport type { FieldComponent } from './useField'\nimport type { ReactFormExtendedApi } from './useForm'\n\n/**\n * TypeScript inferencing is weird.\n *\n * If you have:\n *\n * @example\n *\n * interface Args<T> {\n * arg?: T\n * }\n *\n * function test<T>(arg?: Partial<Args<T>>): T {\n * return 0 as any;\n * }\n *\n * const a = test({});\n *\n * Then `T` will default to `unknown`.\n *\n * However, if we change `test` to be:\n *\n * @example\n *\n * function test<T extends undefined>(arg?: Partial<Args<T>>): T;\n *\n * Then `T` becomes `undefined`.\n *\n * Here, we are checking if the passed type `T` extends `DefaultT` and **only**\n * `DefaultT`, as if that's the case we assume that inferencing has not occured.\n */\ntype UnwrapOrAny<T> = [unknown] extends [T] ? any : T\ntype UnwrapDefaultOrAny<DefaultT, T> = [DefaultT] extends [T]\n ? [T] extends [DefaultT]\n ? any\n : T\n : T\n\nexport function createFormHookContexts() {\n // We should never hit the `null` case here\n const fieldContext = createContext<AnyFieldApi>(null as never)\n\n function useFieldContext<TData>() {\n const field = useContext(fieldContext)\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!field) {\n throw new Error(\n '`fieldContext` only works when within a `fieldComponent` passed to `createFormHook`',\n )\n }\n\n return field as FieldApi<\n any,\n string,\n TData,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any\n >\n }\n\n // We should never hit the `null` case here\n const formContext = createContext<AnyFormApi>(null as never)\n\n function useFormContext() {\n const form = useContext(formContext)\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!form) {\n throw new Error(\n '`formContext` only works when within a `formComponent` passed to `createFormHook`',\n )\n }\n\n return form as ReactFormExtendedApi<\n // If you need access to the form data, you need to use `withForm` instead\n Record<string, never>,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any\n >\n }\n\n return { fieldContext, useFieldContext, useFormContext, formContext }\n}\n\ninterface CreateFormHookProps<\n TFieldComponents extends Record<string, ComponentType<any>>,\n TFormComponents extends Record<string, ComponentType<any>>,\n> {\n fieldComponents: TFieldComponents\n fieldContext: Context<AnyFieldApi>\n formComponents: TFormComponents\n formContext: Context<AnyFormApi>\n}\n\ntype AppFieldExtendedReactFormApi<\n TFormData,\n TOnMount extends undefined | FormValidateOrFn<TFormData>,\n TOnChange extends undefined | FormValidateOrFn<TFormData>,\n TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n TSubmitMeta,\n TFieldComponents extends Record<string, ComponentType<any>>,\n TFormComponents extends Record<string, ComponentType<any>>,\n> = ReactFormExtendedApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n> &\n NoInfer<TFormComponents> & {\n AppField: FieldComponent<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta,\n NoInfer<TFieldComponents>\n >\n AppForm: ComponentType<PropsWithChildren>\n }\n\nexport interface WithFormProps<\n TFormData,\n TOnMount extends undefined | FormValidateOrFn<TFormData>,\n TOnChange extends undefined | FormValidateOrFn<TFormData>,\n TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n TSubmitMeta,\n TFieldComponents extends Record<string, ComponentType<any>>,\n TFormComponents extends Record<string, ComponentType<any>>,\n TRenderProps extends object = Record<string, never>,\n> extends FormOptions<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n > {\n // Optional, but adds props to the `render` function outside of `form`\n props?: TRenderProps\n render: (\n props: PropsWithChildren<\n NoInfer<TRenderProps> & {\n form: AppFieldExtendedReactFormApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta,\n TFieldComponents,\n TFormComponents\n >\n }\n >,\n ) => JSX.Element\n}\n\nexport function createFormHook<\n const TComponents extends Record<string, ComponentType<any>>,\n const TFormComponents extends Record<string, ComponentType<any>>,\n>({\n fieldComponents,\n fieldContext,\n formContext,\n formComponents,\n}: CreateFormHookProps<TComponents, TFormComponents>) {\n function useAppForm<\n TFormData,\n TOnMount extends undefined | FormValidateOrFn<TFormData>,\n TOnChange extends undefined | FormValidateOrFn<TFormData>,\n TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n TSubmitMeta,\n >(\n props: FormOptions<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n >,\n ): AppFieldExtendedReactFormApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta,\n TComponents,\n TFormComponents\n > {\n const form = useForm(props)\n\n const AppForm = useMemo(() => {\n return (({ children }) => {\n return (\n <formContext.Provider value={form}>{children}</formContext.Provider>\n )\n }) as ComponentType<PropsWithChildren>\n }, [form])\n\n const AppField = useMemo(() => {\n return (({ children, ...props }) => {\n return (\n <form.Field {...props}>\n {(field) => (\n // eslint-disable-next-line @eslint-react/no-context-provider\n <fieldContext.Provider value={field}>\n {children(Object.assign(field, fieldComponents))}\n </fieldContext.Provider>\n )}\n </form.Field>\n )\n }) as FieldComponent<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta,\n TComponents\n >\n }, [form])\n\n const extendedForm = useMemo(() => {\n return Object.assign(form, {\n AppField,\n AppForm,\n ...formComponents,\n })\n }, [form, AppField, AppForm])\n\n return extendedForm\n }\n\n function withForm<\n TFormData,\n TOnMount extends undefined | FormValidateOrFn<TFormData>,\n TOnChange extends undefined | FormValidateOrFn<TFormData>,\n TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n TSubmitMeta,\n TRenderProps extends object = {},\n >({\n render,\n props,\n }: WithFormProps<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta,\n TComponents,\n TFormComponents,\n TRenderProps\n >): WithFormProps<\n UnwrapOrAny<TFormData>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnMount>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnChange>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnChangeAsync>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnBlur>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnBlurAsync>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnSubmit>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnServer>,\n UnwrapOrAny<TSubmitMeta>,\n UnwrapOrAny<TComponents>,\n UnwrapOrAny<TFormComponents>,\n UnwrapOrAny<TRenderProps>\n >['render'] {\n return (innerProps) => render({ ...props, ...innerProps })\n }\n\n return {\n useAppForm,\n withForm,\n }\n}\n"],"names":["props"],"mappings":";;;AAoDO,SAAS,yBAAyB;AAEjC,QAAA,eAAe,cAA2B,IAAa;AAE7D,WAAS,kBAAyB;AAC1B,UAAA,QAAQ,WAAW,YAAY;AAGrC,QAAI,CAAC,OAAO;AACV,YAAM,IAAI;AAAA,QACR;AAAA,MACF;AAAA,IAAA;AAGK,WAAA;AAAA,EAAA;AAwBH,QAAA,cAAc,cAA0B,IAAa;AAE3D,WAAS,iBAAiB;AAClB,UAAA,OAAO,WAAW,WAAW;AAGnC,QAAI,CAAC,MAAM;AACT,YAAM,IAAI;AAAA,QACR;AAAA,MACF;AAAA,IAAA;AAGK,WAAA;AAAA,EAAA;AAeT,SAAO,EAAE,cAAc,iBAAiB,gBAAgB,YAAY;AACtE;AAwGO,SAAS,eAGd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsD;AACpD,WAAS,WAYP,OAyBA;AACM,UAAA,OAAO,QAAQ,KAAK;AAEpB,UAAA,UAAU,QAAQ,MAAM;AACpB,aAAA,CAAC,EAAE,eAAe;AACxB,mCACG,YAAY,UAAZ,EAAqB,OAAO,MAAO,UAAS;AAAA,MAEjD;AAAA,IAAA,GACC,CAAC,IAAI,CAAC;AAEH,UAAA,WAAW,QAAQ,MAAM;AAC7B,aAAQ,CAAC,EAAE,UAAU,GAAGA,aAAY;AAClC,mCACG,KAAK,OAAL,EAAY,GAAGA,QACb,UAAC,CAAA;AAAA;AAAA,UAEC,oBAAA,aAAa,UAAb,EAAsB,OAAO,OAC3B,UAAS,SAAA,OAAO,OAAO,OAAO,eAAe,CAAC,EACjD,CAAA;AAAA,WAEJ;AAAA,MAEJ;AAAA,IAAA,GAaC,CAAC,IAAI,CAAC;AAEH,UAAA,eAAe,QAAQ,MAAM;AAC1B,aAAA,OAAO,OAAO,MAAM;AAAA,QACzB;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MAAA,CACJ;AAAA,IACA,GAAA,CAAC,MAAM,UAAU,OAAO,CAAC;AAErB,WAAA;AAAA,EAAA;AAGT,WAAS,SAYP;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GA6BU;AACH,WAAA,CAAC,eAAe,OAAO,EAAE,GAAG,OAAO,GAAG,YAAY;AAAA,EAAA;AAGpD,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;"}
|
|
1
|
+
{"version":3,"file":"createFormHook.js","sources":["../../src/createFormHook.tsx"],"sourcesContent":["import { createContext, useContext, useMemo } from 'react'\nimport { useForm } from './useForm'\nimport type {\n AnyFieldApi,\n AnyFormApi,\n FieldApi,\n FormApi,\n FormAsyncValidateOrFn,\n FormOptions,\n FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { ComponentType, Context, JSX, PropsWithChildren } from 'react'\nimport type { FieldComponent } from './useField'\nimport type { ReactFormExtendedApi } from './useForm'\n\n/**\n * TypeScript inferencing is weird.\n *\n * If you have:\n *\n * @example\n *\n * interface Args<T> {\n * arg?: T\n * }\n *\n * function test<T>(arg?: Partial<Args<T>>): T {\n * return 0 as any;\n * }\n *\n * const a = test({});\n *\n * Then `T` will default to `unknown`.\n *\n * However, if we change `test` to be:\n *\n * @example\n *\n * function test<T extends undefined>(arg?: Partial<Args<T>>): T;\n *\n * Then `T` becomes `undefined`.\n *\n * Here, we are checking if the passed type `T` extends `DefaultT` and **only**\n * `DefaultT`, as if that's the case we assume that inferencing has not occured.\n */\ntype UnwrapOrAny<T> = [unknown] extends [T] ? any : T\ntype UnwrapDefaultOrAny<DefaultT, T> = [DefaultT] extends [T]\n ? [T] extends [DefaultT]\n ? any\n : T\n : T\n\nexport function createFormHookContexts() {\n // We should never hit the `null` case here\n const fieldContext = createContext<AnyFieldApi>(null as never)\n\n function useFieldContext<TData>() {\n const field = useContext(fieldContext)\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!field) {\n throw new Error(\n '`fieldContext` only works when within a `fieldComponent` passed to `createFormHook`',\n )\n }\n\n return field as FieldApi<\n any,\n string,\n TData,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any\n >\n }\n\n // We should never hit the `null` case here\n const formContext = createContext<AnyFormApi>(null as never)\n\n function useFormContext() {\n const form = useContext(formContext)\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (!form) {\n throw new Error(\n '`formContext` only works when within a `formComponent` passed to `createFormHook`',\n )\n }\n\n return form as ReactFormExtendedApi<\n // If you need access to the form data, you need to use `withForm` instead\n Record<string, never>,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any,\n any\n >\n }\n\n return { fieldContext, useFieldContext, useFormContext, formContext }\n}\n\ninterface CreateFormHookProps<\n TFieldComponents extends Record<string, ComponentType<any>>,\n TFormComponents extends Record<string, ComponentType<any>>,\n> {\n fieldComponents: TFieldComponents\n fieldContext: Context<AnyFieldApi>\n formComponents: TFormComponents\n formContext: Context<AnyFormApi>\n}\n\ntype AppFieldExtendedReactFormApi<\n TFormData,\n TOnMount extends undefined | FormValidateOrFn<TFormData>,\n TOnChange extends undefined | FormValidateOrFn<TFormData>,\n TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n TSubmitMeta,\n TFieldComponents extends Record<string, ComponentType<any>>,\n TFormComponents extends Record<string, ComponentType<any>>,\n> = ReactFormExtendedApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n> &\n NoInfer<TFormComponents> & {\n AppField: FieldComponent<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta,\n NoInfer<TFieldComponents>\n >\n AppForm: ComponentType<PropsWithChildren>\n }\n\nexport interface WithFormProps<\n TFormData,\n TOnMount extends undefined | FormValidateOrFn<TFormData>,\n TOnChange extends undefined | FormValidateOrFn<TFormData>,\n TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n TSubmitMeta,\n TFieldComponents extends Record<string, ComponentType<any>>,\n TFormComponents extends Record<string, ComponentType<any>>,\n TRenderProps extends object = Record<string, never>,\n> extends FormOptions<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n > {\n // Optional, but adds props to the `render` function outside of `form`\n props?: TRenderProps\n render: (\n props: PropsWithChildren<\n NoInfer<TRenderProps> & {\n form: AppFieldExtendedReactFormApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta,\n TFieldComponents,\n TFormComponents\n >\n }\n >,\n ) => JSX.Element\n}\n\nexport function createFormHook<\n const TComponents extends Record<string, ComponentType<any>>,\n const TFormComponents extends Record<string, ComponentType<any>>,\n>({\n fieldComponents,\n fieldContext,\n formContext,\n formComponents,\n}: CreateFormHookProps<TComponents, TFormComponents>) {\n function useAppForm<\n TFormData,\n TOnMount extends undefined | FormValidateOrFn<TFormData>,\n TOnChange extends undefined | FormValidateOrFn<TFormData>,\n TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n TSubmitMeta,\n >(\n props: FormOptions<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n >,\n ): AppFieldExtendedReactFormApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta,\n TComponents,\n TFormComponents\n > {\n const form = useForm(props)\n\n const AppForm = useMemo(() => {\n const AppForm = (({ children }) => {\n return (\n <formContext.Provider value={form}>{children}</formContext.Provider>\n )\n }) as ComponentType<PropsWithChildren>\n return AppForm\n }, [form])\n\n const AppField = useMemo(() => {\n const AppField = (({ children, ...props }) => {\n return (\n <form.Field {...props}>\n {(field) => (\n // eslint-disable-next-line @eslint-react/no-context-provider\n <fieldContext.Provider value={field}>\n {children(Object.assign(field, fieldComponents))}\n </fieldContext.Provider>\n )}\n </form.Field>\n )\n }) as FieldComponent<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta,\n TComponents\n >\n return AppField\n }, [form])\n\n const extendedForm = useMemo(() => {\n return Object.assign(form, {\n AppField,\n AppForm,\n ...formComponents,\n })\n }, [form, AppField, AppForm])\n\n return extendedForm\n }\n\n function withForm<\n TFormData,\n TOnMount extends undefined | FormValidateOrFn<TFormData>,\n TOnChange extends undefined | FormValidateOrFn<TFormData>,\n TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n TSubmitMeta,\n TRenderProps extends object = {},\n >({\n render,\n props,\n }: WithFormProps<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta,\n TComponents,\n TFormComponents,\n TRenderProps\n >): WithFormProps<\n UnwrapOrAny<TFormData>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnMount>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnChange>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnChangeAsync>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnBlur>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnBlurAsync>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnSubmit>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync>,\n UnwrapDefaultOrAny<undefined | FormValidateOrFn<TFormData>, TOnServer>,\n UnwrapOrAny<TSubmitMeta>,\n UnwrapOrAny<TComponents>,\n UnwrapOrAny<TFormComponents>,\n UnwrapOrAny<TRenderProps>\n >['render'] {\n return (innerProps) => render({ ...props, ...innerProps })\n }\n\n return {\n useAppForm,\n withForm,\n }\n}\n"],"names":["AppForm","AppField","props"],"mappings":";;;AAoDO,SAAS,yBAAyB;AAEjC,QAAA,eAAe,cAA2B,IAAa;AAE7D,WAAS,kBAAyB;AAC1B,UAAA,QAAQ,WAAW,YAAY;AAGrC,QAAI,CAAC,OAAO;AACV,YAAM,IAAI;AAAA,QACR;AAAA,MACF;AAAA,IAAA;AAGK,WAAA;AAAA,EAAA;AAwBH,QAAA,cAAc,cAA0B,IAAa;AAE3D,WAAS,iBAAiB;AAClB,UAAA,OAAO,WAAW,WAAW;AAGnC,QAAI,CAAC,MAAM;AACT,YAAM,IAAI;AAAA,QACR;AAAA,MACF;AAAA,IAAA;AAGK,WAAA;AAAA,EAAA;AAeT,SAAO,EAAE,cAAc,iBAAiB,gBAAgB,YAAY;AACtE;AAwGO,SAAS,eAGd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsD;AACpD,WAAS,WAYP,OAyBA;AACM,UAAA,OAAO,QAAQ,KAAK;AAEpB,UAAA,UAAU,QAAQ,MAAM;AAC5B,YAAMA,WAAW,CAAC,EAAE,eAAe;AACjC,mCACG,YAAY,UAAZ,EAAqB,OAAO,MAAO,UAAS;AAAA,MAEjD;AACOA,aAAAA;AAAAA,IAAA,GACN,CAAC,IAAI,CAAC;AAEH,UAAA,WAAW,QAAQ,MAAM;AAC7B,YAAMC,YAAY,CAAC,EAAE,UAAU,GAAGC,aAAY;AAC5C,mCACG,KAAK,OAAL,EAAY,GAAGA,QACb,UAAC,CAAA;AAAA;AAAA,UAEC,oBAAA,aAAa,UAAb,EAAsB,OAAO,OAC3B,UAAS,SAAA,OAAO,OAAO,OAAO,eAAe,CAAC,EACjD,CAAA;AAAA,WAEJ;AAAA,MAEJ;AAaOD,aAAAA;AAAAA,IAAA,GACN,CAAC,IAAI,CAAC;AAEH,UAAA,eAAe,QAAQ,MAAM;AAC1B,aAAA,OAAO,OAAO,MAAM;AAAA,QACzB;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MAAA,CACJ;AAAA,IACA,GAAA,CAAC,MAAM,UAAU,OAAO,CAAC;AAErB,WAAA;AAAA,EAAA;AAGT,WAAS,SAYP;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GA6BU;AACH,WAAA,CAAC,eAAe,OAAO,EAAE,GAAG,OAAO,GAAG,YAAY;AAAA,EAAA;AAGpD,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;"}
|
package/dist/esm/useForm.js
CHANGED
|
@@ -19,7 +19,7 @@ function useForm(opts) {
|
|
|
19
19
|
extendedApi.Field = function APIField(props) {
|
|
20
20
|
return /* @__PURE__ */ jsx(Field, { ...props, form: api });
|
|
21
21
|
};
|
|
22
|
-
extendedApi.Subscribe = (props)
|
|
22
|
+
extendedApi.Subscribe = function Subscribe(props) {
|
|
23
23
|
return /* @__PURE__ */ jsx(
|
|
24
24
|
LocalSubscribe,
|
|
25
25
|
{
|
package/dist/esm/useForm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport React, { useState } from 'react'\nimport { Field } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type {\n AnyFormApi,\n AnyFormState,\n FormAsyncValidateOrFn,\n FormOptions,\n FormState,\n FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { PropsWithChildren, ReactNode } from 'react'\nimport type { FieldComponent } from './useField'\nimport type { NoInfer } from '@tanstack/react-store'\n\n/**\n * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`\n */\nexport interface ReactFormApi<\n in out TFormData,\n in out TOnMount extends undefined | FormValidateOrFn<TFormData>,\n in out TOnChange extends undefined | FormValidateOrFn<TFormData>,\n in out TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n in out TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n in out TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TSubmitMeta,\n> {\n /**\n * A React component to render form fields. With this, you can render and manage individual form fields.\n */\n Field: FieldComponent<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n >\n /**\n * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.\n */\n Subscribe: <\n TSelected = NoInfer<\n FormState<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer\n >\n >,\n >(props: {\n selector?: (\n state: NoInfer<\n FormState<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer\n >\n >,\n ) => TSelected\n children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n }) => ReactNode\n}\n\n/**\n * An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi`\n */\nexport type ReactFormExtendedApi<\n TFormData,\n TOnMount extends undefined | FormValidateOrFn<TFormData>,\n TOnChange extends undefined | FormValidateOrFn<TFormData>,\n TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n TSubmitMeta,\n> = FormApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n> &\n ReactFormApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n >\n\nfunction LocalSubscribe({\n form,\n selector,\n children,\n}: PropsWithChildren<{\n form: AnyFormApi\n selector: (state: AnyFormState) => AnyFormState\n}>) {\n const data = useStore(form.store, selector)\n\n return functionalUpdate(children, data)\n}\n\n/**\n * A custom React Hook that returns an extended instance of the `FormApi` class.\n *\n * This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields\n */\nexport function useForm<\n TFormData,\n TOnMount extends undefined | FormValidateOrFn<TFormData>,\n TOnChange extends undefined | FormValidateOrFn<TFormData>,\n TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n TSubmitMeta,\n>(\n opts?: FormOptions<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n >,\n) {\n const [formApi] = useState(() => {\n const api = new FormApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n >(opts)\n\n const extendedApi: ReactFormExtendedApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n > = api as never\n extendedApi.Field = function APIField(props) {\n return <Field {...props} form={api} />\n }\n extendedApi.Subscribe = (props: any)
|
|
1
|
+
{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/react-store'\nimport React, { useState } from 'react'\nimport { Field } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type {\n AnyFormApi,\n AnyFormState,\n FormAsyncValidateOrFn,\n FormOptions,\n FormState,\n FormValidateOrFn,\n} from '@tanstack/form-core'\nimport type { PropsWithChildren, ReactNode } from 'react'\nimport type { FieldComponent } from './useField'\nimport type { NoInfer } from '@tanstack/react-store'\n\n/**\n * Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm`\n */\nexport interface ReactFormApi<\n in out TFormData,\n in out TOnMount extends undefined | FormValidateOrFn<TFormData>,\n in out TOnChange extends undefined | FormValidateOrFn<TFormData>,\n in out TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n in out TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n in out TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n in out TSubmitMeta,\n> {\n /**\n * A React component to render form fields. With this, you can render and manage individual form fields.\n */\n Field: FieldComponent<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n >\n /**\n * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.\n */\n Subscribe: <\n TSelected = NoInfer<\n FormState<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer\n >\n >,\n >(props: {\n selector?: (\n state: NoInfer<\n FormState<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer\n >\n >,\n ) => TSelected\n children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n }) => ReactNode\n}\n\n/**\n * An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi`\n */\nexport type ReactFormExtendedApi<\n TFormData,\n TOnMount extends undefined | FormValidateOrFn<TFormData>,\n TOnChange extends undefined | FormValidateOrFn<TFormData>,\n TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n TSubmitMeta,\n> = FormApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n> &\n ReactFormApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n >\n\nfunction LocalSubscribe({\n form,\n selector,\n children,\n}: PropsWithChildren<{\n form: AnyFormApi\n selector: (state: AnyFormState) => AnyFormState\n}>) {\n const data = useStore(form.store, selector)\n\n return functionalUpdate(children, data)\n}\n\n/**\n * A custom React Hook that returns an extended instance of the `FormApi` class.\n *\n * This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields\n */\nexport function useForm<\n TFormData,\n TOnMount extends undefined | FormValidateOrFn<TFormData>,\n TOnChange extends undefined | FormValidateOrFn<TFormData>,\n TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnBlur extends undefined | FormValidateOrFn<TFormData>,\n TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnSubmit extends undefined | FormValidateOrFn<TFormData>,\n TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,\n TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,\n TSubmitMeta,\n>(\n opts?: FormOptions<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n >,\n) {\n const [formApi] = useState(() => {\n const api = new FormApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n >(opts)\n\n const extendedApi: ReactFormExtendedApi<\n TFormData,\n TOnMount,\n TOnChange,\n TOnChangeAsync,\n TOnBlur,\n TOnBlurAsync,\n TOnSubmit,\n TOnSubmitAsync,\n TOnServer,\n TSubmitMeta\n > = api as never\n extendedApi.Field = function APIField(props) {\n return <Field {...props} form={api} />\n }\n extendedApi.Subscribe = function Subscribe(props: any) {\n return (\n <LocalSubscribe\n form={api}\n selector={props.selector}\n children={props.children}\n />\n )\n }\n\n return extendedApi\n })\n\n useIsomorphicLayoutEffect(formApi.mount, [])\n\n useStore(formApi.store, (state) => state.isSubmitting)\n\n /**\n * formApi.update should not have any side effects. Think of it like a `useRef`\n * that we need to keep updated every render with the most up-to-date information.\n */\n useIsomorphicLayoutEffect(() => {\n formApi.update(opts)\n })\n\n return formApi\n}\n"],"names":[],"mappings":";;;;;;AA2HA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,GAGI;AACF,QAAM,OAAO,SAAS,KAAK,OAAO,QAAQ;AAEnC,SAAA,iBAAiB,UAAU,IAAI;AACxC;AAOO,SAAS,QAYd,MAYA;AACA,QAAM,CAAC,OAAO,IAAI,SAAS,MAAM;AACzB,UAAA,MAAM,IAAI,QAWd,IAAI;AAEN,UAAM,cAWF;AACQ,gBAAA,QAAQ,SAAS,SAAS,OAAO;AAC3C,aAAQ,oBAAA,OAAA,EAAO,GAAG,OAAO,MAAM,KAAK;AAAA,IACtC;AACY,gBAAA,YAAY,SAAS,UAAU,OAAY;AAEnD,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,UAAU,MAAM;AAAA,UAChB,UAAU,MAAM;AAAA,QAAA;AAAA,MAClB;AAAA,IAEJ;AAEO,WAAA;AAAA,EAAA,CACR;AAEyB,4BAAA,QAAQ,OAAO,EAAE;AAE3C,WAAS,QAAQ,OAAO,CAAC,UAAU,MAAM,YAAY;AAMrD,4BAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EAAA,CACpB;AAEM,SAAA;AACT;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/react-form",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.14.0",
|
|
4
4
|
"description": "Powerful, type-safe forms for React.",
|
|
5
5
|
"author": "tannerlinsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -67,10 +67,10 @@
|
|
|
67
67
|
"src"
|
|
68
68
|
],
|
|
69
69
|
"dependencies": {
|
|
70
|
-
"@tanstack/react-store": "^0.7.
|
|
70
|
+
"@tanstack/react-store": "^0.7.3",
|
|
71
71
|
"decode-formdata": "^0.9.0",
|
|
72
72
|
"devalue": "^5.1.1",
|
|
73
|
-
"@tanstack/form-core": "1.
|
|
73
|
+
"@tanstack/form-core": "1.14.0"
|
|
74
74
|
},
|
|
75
75
|
"devDependencies": {
|
|
76
76
|
"@tanstack/react-start": "^1.121.16",
|
package/src/createFormHook.tsx
CHANGED
|
@@ -270,15 +270,16 @@ export function createFormHook<
|
|
|
270
270
|
const form = useForm(props)
|
|
271
271
|
|
|
272
272
|
const AppForm = useMemo(() => {
|
|
273
|
-
|
|
273
|
+
const AppForm = (({ children }) => {
|
|
274
274
|
return (
|
|
275
275
|
<formContext.Provider value={form}>{children}</formContext.Provider>
|
|
276
276
|
)
|
|
277
277
|
}) as ComponentType<PropsWithChildren>
|
|
278
|
+
return AppForm
|
|
278
279
|
}, [form])
|
|
279
280
|
|
|
280
281
|
const AppField = useMemo(() => {
|
|
281
|
-
|
|
282
|
+
const AppField = (({ children, ...props }) => {
|
|
282
283
|
return (
|
|
283
284
|
<form.Field {...props}>
|
|
284
285
|
{(field) => (
|
|
@@ -302,6 +303,7 @@ export function createFormHook<
|
|
|
302
303
|
TSubmitMeta,
|
|
303
304
|
TComponents
|
|
304
305
|
>
|
|
306
|
+
return AppField
|
|
305
307
|
}, [form])
|
|
306
308
|
|
|
307
309
|
const extendedForm = useMemo(() => {
|
package/src/useForm.tsx
CHANGED
|
@@ -193,7 +193,7 @@ export function useForm<
|
|
|
193
193
|
extendedApi.Field = function APIField(props) {
|
|
194
194
|
return <Field {...props} form={api} />
|
|
195
195
|
}
|
|
196
|
-
extendedApi.Subscribe = (props: any)
|
|
196
|
+
extendedApi.Subscribe = function Subscribe(props: any) {
|
|
197
197
|
return (
|
|
198
198
|
<LocalSubscribe
|
|
199
199
|
form={api}
|