@tanstack/react-form 1.0.1 → 1.0.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/dist/cjs/createFormHook.cjs.map +1 -1
- package/dist/cjs/createFormHook.d.cts +2 -1
- package/dist/cjs/useTransform.cjs.map +1 -1
- package/dist/cjs/useTransform.d.cts +2 -2
- package/dist/esm/createFormHook.d.ts +2 -1
- package/dist/esm/createFormHook.js.map +1 -1
- package/dist/esm/useTransform.d.ts +2 -2
- package/dist/esm/useTransform.js.map +1 -1
- package/package.json +2 -2
- package/src/createFormHook.tsx +15 -13
- package/src/useTransform.ts +4 -38
|
@@ -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\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 Record<string, unknown> = 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 Record<string, unknown> = {},\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 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 >['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":";;;;;AAeO,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\ntype UnwrapOrAny<T> = [T] extends [unknown] ? any : 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 Record<string, unknown> = 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 Record<string, unknown> = {},\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 UnwrapOrAny<TOnMount>,\n UnwrapOrAny<TOnChange>,\n UnwrapOrAny<TOnChangeAsync>,\n UnwrapOrAny<TOnBlur>,\n UnwrapOrAny<TOnBlurAsync>,\n UnwrapOrAny<TOnSubmit>,\n UnwrapOrAny<TOnSubmitAsync>,\n UnwrapOrAny<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":";;;;;AAiBO,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;;;"}
|
|
@@ -2,6 +2,7 @@ import { AnyFieldApi, AnyFormApi, FieldApi, FormAsyncValidateOrFn, FormOptions,
|
|
|
2
2
|
import { ComponentType, Context, JSX, PropsWithChildren } from 'react';
|
|
3
3
|
import { FieldComponent } from './useField.cjs';
|
|
4
4
|
import { ReactFormExtendedApi } from './useForm.cjs';
|
|
5
|
+
type UnwrapOrAny<T> = [T] extends [unknown] ? any : T;
|
|
5
6
|
export declare function createFormHookContexts(): {
|
|
6
7
|
fieldContext: Context<AnyFieldApi>;
|
|
7
8
|
useFieldContext: <TData>() => FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
|
|
@@ -26,6 +27,6 @@ export interface WithFormProps<TFormData, TOnMount extends undefined | FormValid
|
|
|
26
27
|
}
|
|
27
28
|
export declare function createFormHook<const TComponents extends Record<string, ComponentType<any>>, const TFormComponents extends Record<string, ComponentType<any>>>({ fieldComponents, fieldContext, formContext, formComponents, }: CreateFormHookProps<TComponents, TFormComponents>): {
|
|
28
29
|
useAppForm: <TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta>(props: FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta>) => AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents>;
|
|
29
|
-
withForm: <TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta, TRenderProps extends Record<string, unknown> = {}>({ render, props, }: WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents, TRenderProps>) => WithFormProps<TFormData
|
|
30
|
+
withForm: <TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta, TRenderProps extends Record<string, unknown> = {}>({ render, props, }: WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents, TRenderProps>) => WithFormProps<UnwrapOrAny<TFormData>, UnwrapOrAny<TOnMount>, UnwrapOrAny<TOnChange>, UnwrapOrAny<TOnChangeAsync>, UnwrapOrAny<TOnBlur>, UnwrapOrAny<TOnBlurAsync>, UnwrapOrAny<TOnSubmit>, UnwrapOrAny<TOnSubmitAsync>, UnwrapOrAny<TOnServer>, UnwrapOrAny<TSubmitMeta>, UnwrapOrAny<TComponents>, UnwrapOrAny<TFormComponents>, UnwrapOrAny<TRenderProps>>["render"];
|
|
30
31
|
};
|
|
31
32
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTransform.cjs","sources":["../../src/useTransform.ts"],"sourcesContent":["import type {\n FormApi,\n FormAsyncValidateOrFn,\n FormTransform,\n FormValidateOrFn,\n} from '@tanstack/form-core'\n\nexport function useTransform
|
|
1
|
+
{"version":3,"file":"useTransform.cjs","sources":["../../src/useTransform.ts"],"sourcesContent":["import type {\n AnyFormApi,\n FormApi,\n FormAsyncValidateOrFn,\n FormTransform,\n FormValidateOrFn,\n} from '@tanstack/form-core'\n\nexport function useTransform(\n fn: (formBase: AnyFormApi) => AnyFormApi,\n deps: unknown[],\n): FormTransform<any, any, any, any, any, any, any, any, any, any> {\n return {\n fn,\n deps,\n }\n}\n"],"names":[],"mappings":";;AAQgB,SAAA,aACd,IACA,MACiE;AAC1D,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare function useTransform
|
|
1
|
+
import { AnyFormApi, FormTransform } from '@tanstack/form-core';
|
|
2
|
+
export declare function useTransform(fn: (formBase: AnyFormApi) => AnyFormApi, deps: unknown[]): FormTransform<any, any, any, any, any, any, any, any, any, any>;
|
|
@@ -2,6 +2,7 @@ import { AnyFieldApi, AnyFormApi, FieldApi, FormAsyncValidateOrFn, FormOptions,
|
|
|
2
2
|
import { ComponentType, Context, JSX, PropsWithChildren } from 'react';
|
|
3
3
|
import { FieldComponent } from './useField.js';
|
|
4
4
|
import { ReactFormExtendedApi } from './useForm.js';
|
|
5
|
+
type UnwrapOrAny<T> = [T] extends [unknown] ? any : T;
|
|
5
6
|
export declare function createFormHookContexts(): {
|
|
6
7
|
fieldContext: Context<AnyFieldApi>;
|
|
7
8
|
useFieldContext: <TData>() => FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
|
|
@@ -26,6 +27,6 @@ export interface WithFormProps<TFormData, TOnMount extends undefined | FormValid
|
|
|
26
27
|
}
|
|
27
28
|
export declare function createFormHook<const TComponents extends Record<string, ComponentType<any>>, const TFormComponents extends Record<string, ComponentType<any>>>({ fieldComponents, fieldContext, formContext, formComponents, }: CreateFormHookProps<TComponents, TFormComponents>): {
|
|
28
29
|
useAppForm: <TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta>(props: FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta>) => AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents>;
|
|
29
|
-
withForm: <TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta, TRenderProps extends Record<string, unknown> = {}>({ render, props, }: WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents, TRenderProps>) => WithFormProps<TFormData
|
|
30
|
+
withForm: <TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta, TRenderProps extends Record<string, unknown> = {}>({ render, props, }: WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnServer, TSubmitMeta, TComponents, TFormComponents, TRenderProps>) => WithFormProps<UnwrapOrAny<TFormData>, UnwrapOrAny<TOnMount>, UnwrapOrAny<TOnChange>, UnwrapOrAny<TOnChangeAsync>, UnwrapOrAny<TOnBlur>, UnwrapOrAny<TOnBlurAsync>, UnwrapOrAny<TOnSubmit>, UnwrapOrAny<TOnSubmitAsync>, UnwrapOrAny<TOnServer>, UnwrapOrAny<TSubmitMeta>, UnwrapOrAny<TComponents>, UnwrapOrAny<TFormComponents>, UnwrapOrAny<TRenderProps>>["render"];
|
|
30
31
|
};
|
|
31
32
|
export {};
|
|
@@ -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\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 Record<string, unknown> = 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 Record<string, unknown> = {},\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 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 >['render'] {\n return (innerProps) => render({ ...props, ...innerProps })\n }\n\n return {\n useAppForm,\n withForm,\n }\n}\n"],"names":["props"],"mappings":";;;AAeO,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\ntype UnwrapOrAny<T> = [T] extends [unknown] ? any : 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 Record<string, unknown> = 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 Record<string, unknown> = {},\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 UnwrapOrAny<TOnMount>,\n UnwrapOrAny<TOnChange>,\n UnwrapOrAny<TOnChangeAsync>,\n UnwrapOrAny<TOnBlur>,\n UnwrapOrAny<TOnBlurAsync>,\n UnwrapOrAny<TOnSubmit>,\n UnwrapOrAny<TOnSubmitAsync>,\n UnwrapOrAny<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":";;;AAiBO,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,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare function useTransform
|
|
1
|
+
import { AnyFormApi, FormTransform } from '@tanstack/form-core';
|
|
2
|
+
export declare function useTransform(fn: (formBase: AnyFormApi) => AnyFormApi, deps: unknown[]): FormTransform<any, any, any, any, any, any, any, any, any, any>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTransform.js","sources":["../../src/useTransform.ts"],"sourcesContent":["import type {\n FormApi,\n FormAsyncValidateOrFn,\n FormTransform,\n FormValidateOrFn,\n} from '@tanstack/form-core'\n\nexport function useTransform
|
|
1
|
+
{"version":3,"file":"useTransform.js","sources":["../../src/useTransform.ts"],"sourcesContent":["import type {\n AnyFormApi,\n FormApi,\n FormAsyncValidateOrFn,\n FormTransform,\n FormValidateOrFn,\n} from '@tanstack/form-core'\n\nexport function useTransform(\n fn: (formBase: AnyFormApi) => AnyFormApi,\n deps: unknown[],\n): FormTransform<any, any, any, any, any, any, any, any, any, any> {\n return {\n fn,\n deps,\n }\n}\n"],"names":[],"mappings":"AAQgB,SAAA,aACd,IACA,MACiE;AAC1D,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/react-form",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Powerful, type-safe forms for React.",
|
|
5
5
|
"author": "tannerlinsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
"@remix-run/node": "^2.15.3",
|
|
71
71
|
"@tanstack/react-store": "^0.7.0",
|
|
72
72
|
"decode-formdata": "^0.8.0",
|
|
73
|
-
"@tanstack/form-core": "1.0.
|
|
73
|
+
"@tanstack/form-core": "1.0.2"
|
|
74
74
|
},
|
|
75
75
|
"devDependencies": {
|
|
76
76
|
"@tanstack/react-start": "^1.112.0",
|
package/src/createFormHook.tsx
CHANGED
|
@@ -13,6 +13,8 @@ import type { ComponentType, Context, JSX, PropsWithChildren } from 'react'
|
|
|
13
13
|
import type { FieldComponent } from './useField'
|
|
14
14
|
import type { ReactFormExtendedApi } from './useForm'
|
|
15
15
|
|
|
16
|
+
type UnwrapOrAny<T> = [T] extends [unknown] ? any : T
|
|
17
|
+
|
|
16
18
|
export function createFormHookContexts() {
|
|
17
19
|
// We should never hit the `null` case here
|
|
18
20
|
const fieldContext = createContext<AnyFieldApi>(null as never)
|
|
@@ -308,19 +310,19 @@ export function createFormHook<
|
|
|
308
310
|
TFormComponents,
|
|
309
311
|
TRenderProps
|
|
310
312
|
>): WithFormProps<
|
|
311
|
-
TFormData
|
|
312
|
-
TOnMount
|
|
313
|
-
TOnChange
|
|
314
|
-
TOnChangeAsync
|
|
315
|
-
TOnBlur
|
|
316
|
-
TOnBlurAsync
|
|
317
|
-
TOnSubmit
|
|
318
|
-
TOnSubmitAsync
|
|
319
|
-
TOnServer
|
|
320
|
-
TSubmitMeta
|
|
321
|
-
TComponents
|
|
322
|
-
TFormComponents
|
|
323
|
-
TRenderProps
|
|
313
|
+
UnwrapOrAny<TFormData>,
|
|
314
|
+
UnwrapOrAny<TOnMount>,
|
|
315
|
+
UnwrapOrAny<TOnChange>,
|
|
316
|
+
UnwrapOrAny<TOnChangeAsync>,
|
|
317
|
+
UnwrapOrAny<TOnBlur>,
|
|
318
|
+
UnwrapOrAny<TOnBlurAsync>,
|
|
319
|
+
UnwrapOrAny<TOnSubmit>,
|
|
320
|
+
UnwrapOrAny<TOnSubmitAsync>,
|
|
321
|
+
UnwrapOrAny<TOnServer>,
|
|
322
|
+
UnwrapOrAny<TSubmitMeta>,
|
|
323
|
+
UnwrapOrAny<TComponents>,
|
|
324
|
+
UnwrapOrAny<TFormComponents>,
|
|
325
|
+
UnwrapOrAny<TRenderProps>
|
|
324
326
|
>['render'] {
|
|
325
327
|
return (innerProps) => render({ ...props, ...innerProps })
|
|
326
328
|
}
|
package/src/useTransform.ts
CHANGED
|
@@ -1,49 +1,15 @@
|
|
|
1
1
|
import type {
|
|
2
|
+
AnyFormApi,
|
|
2
3
|
FormApi,
|
|
3
4
|
FormAsyncValidateOrFn,
|
|
4
5
|
FormTransform,
|
|
5
6
|
FormValidateOrFn,
|
|
6
7
|
} from '@tanstack/form-core'
|
|
7
8
|
|
|
8
|
-
export function useTransform
|
|
9
|
-
|
|
10
|
-
TOnMount extends undefined | FormValidateOrFn<TFormData>,
|
|
11
|
-
TOnChange extends undefined | FormValidateOrFn<TFormData>,
|
|
12
|
-
TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
|
|
13
|
-
TOnBlur extends undefined | FormValidateOrFn<TFormData>,
|
|
14
|
-
TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
|
|
15
|
-
TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
|
|
16
|
-
TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
|
|
17
|
-
TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
|
|
18
|
-
TSubmitMeta,
|
|
19
|
-
>(
|
|
20
|
-
fn: (
|
|
21
|
-
formBase: FormApi<any, any, any, any, any, any, any, any, any, any>,
|
|
22
|
-
) => FormApi<
|
|
23
|
-
TFormData,
|
|
24
|
-
TOnMount,
|
|
25
|
-
TOnChange,
|
|
26
|
-
TOnChangeAsync,
|
|
27
|
-
TOnBlur,
|
|
28
|
-
TOnBlurAsync,
|
|
29
|
-
TOnSubmit,
|
|
30
|
-
TOnSubmitAsync,
|
|
31
|
-
TOnServer,
|
|
32
|
-
TSubmitMeta
|
|
33
|
-
>,
|
|
9
|
+
export function useTransform(
|
|
10
|
+
fn: (formBase: AnyFormApi) => AnyFormApi,
|
|
34
11
|
deps: unknown[],
|
|
35
|
-
): FormTransform<
|
|
36
|
-
TFormData,
|
|
37
|
-
TOnMount,
|
|
38
|
-
TOnChange,
|
|
39
|
-
TOnChangeAsync,
|
|
40
|
-
TOnBlur,
|
|
41
|
-
TOnBlurAsync,
|
|
42
|
-
TOnSubmit,
|
|
43
|
-
TOnSubmitAsync,
|
|
44
|
-
TOnServer,
|
|
45
|
-
TSubmitMeta
|
|
46
|
-
> {
|
|
12
|
+
): FormTransform<any, any, any, any, any, any, any, any, any, any> {
|
|
47
13
|
return {
|
|
48
14
|
fn,
|
|
49
15
|
deps,
|