@tanstack/react-form 0.22.0 → 0.23.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.
Files changed (58) hide show
  1. package/dist/cjs/{validateFormData.cjs → createServerValidate.cjs} +10 -3
  2. package/dist/cjs/createServerValidate.cjs.map +1 -0
  3. package/dist/cjs/{validateFormData.d.cts → createServerValidate.d.cts} +8 -2
  4. package/dist/cjs/index.cjs +10 -18
  5. package/dist/cjs/index.cjs.map +1 -1
  6. package/dist/cjs/index.d.cts +2 -4
  7. package/dist/cjs/nextjs-index.cjs +14 -0
  8. package/dist/cjs/nextjs-index.cjs.map +1 -0
  9. package/dist/cjs/nextjs-index.d.cts +2 -0
  10. package/dist/cjs/types.d.cts +1 -1
  11. package/dist/cjs/useField.cjs +2 -2
  12. package/dist/cjs/useField.cjs.map +1 -1
  13. package/dist/cjs/useForm.cjs +2 -2
  14. package/dist/cjs/useForm.cjs.map +1 -1
  15. package/dist/cjs/useIsomorphicLayoutEffect.cjs +2 -2
  16. package/dist/cjs/useIsomorphicLayoutEffect.cjs.map +1 -1
  17. package/dist/cjs/useIsomorphicLayoutEffect.d.cts +1 -1
  18. package/dist/cjs/useTransform.cjs.map +1 -1
  19. package/dist/cjs/useTransform.d.cts +2 -2
  20. package/dist/esm/{validateFormData.d.ts → createServerValidate.d.ts} +8 -2
  21. package/dist/esm/{validateFormData.js → createServerValidate.js} +10 -3
  22. package/dist/esm/createServerValidate.js.map +1 -0
  23. package/dist/esm/index.d.ts +2 -4
  24. package/dist/esm/index.js +4 -7
  25. package/dist/esm/nextjs-index.d.ts +2 -0
  26. package/dist/esm/nextjs-index.js +7 -0
  27. package/dist/esm/nextjs-index.js.map +1 -0
  28. package/dist/esm/types.d.ts +1 -1
  29. package/dist/esm/useField.js +1 -1
  30. package/dist/esm/useField.js.map +1 -1
  31. package/dist/esm/useForm.js +1 -1
  32. package/dist/esm/useForm.js.map +1 -1
  33. package/dist/esm/useIsomorphicLayoutEffect.d.ts +1 -1
  34. package/dist/esm/useIsomorphicLayoutEffect.js +1 -1
  35. package/dist/esm/useIsomorphicLayoutEffect.js.map +1 -1
  36. package/dist/esm/useTransform.d.ts +2 -2
  37. package/dist/esm/useTransform.js.map +1 -1
  38. package/package.json +19 -10
  39. package/src/{validateFormData.ts → createServerValidate.ts} +9 -2
  40. package/src/index.ts +2 -26
  41. package/src/nextjs-index.ts +3 -0
  42. package/src/tests/useField.test.tsx +23 -41
  43. package/src/tests/useForm.test.tsx +16 -31
  44. package/src/types.ts +1 -1
  45. package/src/useField.tsx +1 -1
  46. package/src/useForm.tsx +1 -1
  47. package/src/useIsomorphicLayoutEffect.ts +1 -1
  48. package/src/useTransform.ts +1 -3
  49. package/dist/cjs/createFormFactory.cjs +0 -24
  50. package/dist/cjs/createFormFactory.cjs.map +0 -1
  51. package/dist/cjs/createFormFactory.d.cts +0 -12
  52. package/dist/cjs/validateFormData.cjs.map +0 -1
  53. package/dist/esm/createFormFactory.d.ts +0 -12
  54. package/dist/esm/createFormFactory.js +0 -24
  55. package/dist/esm/createFormFactory.js.map +0 -1
  56. package/dist/esm/validateFormData.js.map +0 -1
  57. package/src/createFormFactory.ts +0 -42
  58. package/src/tests/createFormFactory.test.tsx +0 -39
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const decodeFormdata = require("decode-formdata");
4
- const getValidateFormData = (defaultOpts) => async (formData, info) => {
4
+ const createServerValidate = (defaultOpts) => async (formData, info) => {
5
5
  const { validatorAdapter, onServerValidate } = defaultOpts || {};
6
6
  const runValidator = (propsValue) => {
7
7
  if (validatorAdapter && typeof onServerValidate !== "function") {
@@ -18,5 +18,12 @@ const getValidateFormData = (defaultOpts) => async (formData, info) => {
18
18
  errors: onServerError ? [onServerError] : []
19
19
  };
20
20
  };
21
- exports.getValidateFormData = getValidateFormData;
22
- //# sourceMappingURL=validateFormData.cjs.map
21
+ const initialFormState = {
22
+ errorMap: {
23
+ onServer: void 0
24
+ },
25
+ errors: []
26
+ };
27
+ exports.createServerValidate = createServerValidate;
28
+ exports.initialFormState = initialFormState;
29
+ //# sourceMappingURL=createServerValidate.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"createServerValidate.cjs","sources":["../../src/createServerValidate.ts"],"sourcesContent":["import { decode } from 'decode-formdata'\nimport type {\n FormApi,\n FormOptions,\n ValidationError,\n Validator,\n} from '@tanstack/form-core'\n\ntype OnServerValidateFn<TFormData> = (props: {\n value: TFormData\n}) => ValidationError\n\ntype OnServerValidateOrFn<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = TFormValidator extends Validator<TFormData, infer FFN>\n ? FFN | OnServerValidateFn<TFormData>\n : OnServerValidateFn<TFormData>\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FormOptions<\n TFormData,\n TFormValidator extends\n | Validator<TFormData, unknown>\n | undefined = undefined,\n > {\n onServerValidate?: OnServerValidateOrFn<TFormData, TFormValidator>\n }\n}\n\ntype ValidateFormData<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = (\n formData: FormData,\n info?: Parameters<typeof decode>[1],\n) => Promise<Partial<FormApi<TFormData, TFormValidator>['state']>>\n\nexport const createServerValidate = <\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n defaultOpts?: FormOptions<TFormData, TFormValidator>,\n) =>\n (async (\n formData: FormData,\n info?: Parameters<typeof decode>[1],\n ): Promise<Partial<FormApi<TFormData, TFormValidator>['state']>> => {\n const { validatorAdapter, onServerValidate } = defaultOpts || {}\n\n const runValidator = (propsValue: { value: TFormData }) => {\n if (validatorAdapter && typeof onServerValidate !== 'function') {\n return validatorAdapter().validate(propsValue, onServerValidate)\n }\n\n return (onServerValidate as OnServerValidateFn<TFormData>)(propsValue)\n }\n\n const data = decode(formData, info) as never as TFormData\n\n const onServerError = runValidator({ value: data })\n\n return {\n errorMap: {\n onServer: onServerError,\n },\n errors: onServerError ? [onServerError] : [],\n }\n }) as ValidateFormData<TFormData, TFormValidator>\n\nexport const initialFormState = {\n errorMap: {\n onServer: undefined,\n },\n errors: [],\n}\n"],"names":["decode"],"mappings":";;;AAuCO,MAAM,uBAAuB,CAIlC,gBAEC,OACC,UACA,SACkE;AAClE,QAAM,EAAE,kBAAkB,qBAAqB,eAAe,CAAA;AAExD,QAAA,eAAe,CAAC,eAAqC;AACrD,QAAA,oBAAoB,OAAO,qBAAqB,YAAY;AAC9D,aAAO,iBAAiB,EAAE,SAAS,YAAY,gBAAgB;AAAA,IACjE;AAEA,WAAQ,iBAAmD,UAAU;AAAA,EAAA;AAGjE,QAAA,OAAOA,eAAAA,OAAO,UAAU,IAAI;AAElC,QAAM,gBAAgB,aAAa,EAAE,OAAO,KAAM,CAAA;AAE3C,SAAA;AAAA,IACL,UAAU;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ,gBAAgB,CAAC,aAAa,IAAI,CAAC;AAAA,EAAA;AAE/C;AAEK,MAAM,mBAAmB;AAAA,EAC9B,UAAU;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,QAAQ,CAAC;AACX;;;"}
@@ -10,6 +10,12 @@ declare module '@tanstack/form-core' {
10
10
  onServerValidate?: OnServerValidateOrFn<TFormData, TFormValidator>;
11
11
  }
12
12
  }
13
- export type ValidateFormData<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> = (formData: FormData, info?: Parameters<typeof decode>[1]) => Promise<Partial<FormApi<TFormData, TFormValidator>['state']>>;
14
- export declare const getValidateFormData: <TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(defaultOpts?: FormOptions<TFormData, TFormValidator>) => ValidateFormData<TFormData, TFormValidator>;
13
+ type ValidateFormData<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> = (formData: FormData, info?: Parameters<typeof decode>[1]) => Promise<Partial<FormApi<TFormData, TFormValidator>['state']>>;
14
+ export declare const createServerValidate: <TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(defaultOpts?: FormOptions<TFormData, TFormValidator>) => ValidateFormData<TFormData, TFormValidator>;
15
+ export declare const initialFormState: {
16
+ errorMap: {
17
+ onServer: undefined;
18
+ };
19
+ errors: never[];
20
+ };
15
21
  export {};
@@ -3,27 +3,19 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const formCore = require("@tanstack/form-core");
4
4
  const useForm = require("./useForm.cjs");
5
5
  const useField = require("./useField.cjs");
6
- const createFormFactory = require("./createFormFactory.cjs");
6
+ const createServerValidate = require("./createServerValidate.cjs");
7
7
  const useTransform = require("./useTransform.cjs");
8
- Object.defineProperty(exports, "FieldApi", {
9
- enumerable: true,
10
- get: () => formCore.FieldApi
11
- });
12
- Object.defineProperty(exports, "FormApi", {
13
- enumerable: true,
14
- get: () => formCore.FormApi
15
- });
16
- Object.defineProperty(exports, "functionalUpdate", {
17
- enumerable: true,
18
- get: () => formCore.functionalUpdate
19
- });
20
- Object.defineProperty(exports, "mergeForm", {
21
- enumerable: true,
22
- get: () => formCore.mergeForm
23
- });
24
8
  exports.useForm = useForm.useForm;
25
9
  exports.Field = useField.Field;
26
10
  exports.useField = useField.useField;
27
- exports.createFormFactory = createFormFactory.createFormFactory;
11
+ exports.createServerValidate = createServerValidate.createServerValidate;
12
+ exports.initialFormState = createServerValidate.initialFormState;
28
13
  exports.useTransform = useTransform.useTransform;
14
+ Object.keys(formCore).forEach((k) => {
15
+ if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k))
16
+ Object.defineProperty(exports, k, {
17
+ enumerable: true,
18
+ get: () => formCore[k]
19
+ });
20
+ });
29
21
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
@@ -1,8 +1,6 @@
1
- export type { DeepKeys, DeepValue, FieldApiOptions, FieldInfo, FieldMeta, FieldOptions, FieldState, FormOptions, FormState, RequiredByKey, Updater, UpdaterFn, ValidationCause, ValidationError, ValidationMeta, } from '@tanstack/form-core';
2
- export { FormApi, FieldApi, functionalUpdate, mergeForm, } from '@tanstack/form-core';
1
+ export * from '@tanstack/form-core';
3
2
  export { useForm } from './useForm.cjs';
4
3
  export type { UseField, FieldComponent } from './useField.cjs';
5
4
  export { useField, Field } from './useField.cjs';
6
- export type { FormFactory } from './createFormFactory.cjs';
7
- export { createFormFactory } from './createFormFactory.cjs';
5
+ export { createServerValidate, initialFormState } from './createServerValidate.cjs';
8
6
  export { useTransform } from './useTransform.cjs';
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const formCore = require("@tanstack/form-core");
4
+ const createServerValidate = require("./createServerValidate.cjs");
5
+ exports.createServerValidate = createServerValidate.createServerValidate;
6
+ exports.initialFormState = createServerValidate.initialFormState;
7
+ Object.keys(formCore).forEach((k) => {
8
+ if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k))
9
+ Object.defineProperty(exports, k, {
10
+ enumerable: true,
11
+ get: () => formCore[k]
12
+ });
13
+ });
14
+ //# sourceMappingURL=nextjs-index.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"nextjs-index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
@@ -0,0 +1,2 @@
1
+ export * from '@tanstack/form-core';
2
+ export { createServerValidate, initialFormState } from './createServerValidate.cjs';
@@ -1,5 +1,5 @@
1
1
  import { DeepKeys, DeepValue, FieldApiOptions, Validator } from '@tanstack/form-core';
2
- import { FunctionComponent } from 'rehackt';
2
+ import { FunctionComponent } from 'react';
3
3
 
4
4
  export type UseFieldOptions<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = FieldApiOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
5
5
  mode?: 'value' | 'array';
@@ -1,12 +1,12 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const jsxRuntime = require("react/jsx-runtime");
4
- const rehackt = require("rehackt");
4
+ const react = require("react");
5
5
  const reactStore = require("@tanstack/react-store");
6
6
  const formCore = require("@tanstack/form-core");
7
7
  const useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect.cjs");
8
8
  function useField(opts) {
9
- const [fieldApi] = rehackt.useState(() => {
9
+ const [fieldApi] = react.useState(() => {
10
10
  const api = new formCore.FieldApi({
11
11
  ...opts,
12
12
  form: opts.form,
@@ -1 +1 @@
1
- {"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { type FunctionComponent, useState } from 'rehackt'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NodeType, UseFieldOptions } from './types'\nimport type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FieldApi<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n > {\n Field: FieldComponent<TParentData, TFormValidator>\n }\n}\n\nexport type UseField<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> = <\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n opts: Omit<\n UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>,\n 'form'\n >,\n) => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>\n\nexport function useField<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n opts: UseFieldOptions<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n): FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> {\n const [fieldApi] = useState(() => {\n const api = new FieldApi({\n ...opts,\n form: opts.form,\n name: opts.name,\n })\n\n api.Field = Field as never\n\n return api\n })\n\n useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])\n\n /**\n * fieldApi.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 fieldApi.update(opts)\n })\n\n useStore(\n fieldApi.store,\n opts.mode === 'array'\n ? (state) => {\n return [state.meta, Object.keys(state.value as never).length]\n }\n : undefined,\n )\n\n return fieldApi as never\n}\n\ntype FieldComponentProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = {\n children: (\n fieldApi: FieldApi<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n ) => NodeType\n} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>\n\nexport type FieldComponent<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> = <\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n children,\n ...fieldOptions\n}: Omit<\n FieldComponentProps<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n 'form'\n>) => NodeType\n\nexport const Field = (<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n children,\n ...fieldOptions\n}: FieldComponentProps<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n>): NodeType => {\n const fieldApi = useField(fieldOptions as any)\n\n return (<>{functionalUpdate(children, fieldApi as any)}</>) as never\n}) satisfies FunctionComponent<FieldComponentProps<any, any, any, any, any>>\n"],"names":["useState","FieldApi","useIsomorphicLayoutEffect","useStore","jsx","Fragment","functionalUpdate"],"mappings":";;;;;;;AA0CO,SAAS,SAWd,MAOsE;AACtE,QAAM,CAAC,QAAQ,IAAIA,QAAAA,SAAS,MAAM;AAC1B,UAAA,MAAM,IAAIC,kBAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,QAAI,QAAQ;AAEL,WAAA;AAAA,EAAA,CACR;AAEDC,4BAAAA,0BAA0B,SAAS,OAAO,CAAC,QAAQ,CAAC;AAMpDA,4BAAAA,0BAA0B,MAAM;AAC9B,aAAS,OAAO,IAAI;AAAA,EAAA,CACrB;AAEDC,aAAA;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACF,aAAA,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,KAAc,EAAE,MAAM;AAAA,IAE9D,IAAA;AAAA,EAAA;AAGC,SAAA;AACT;AAiDO,MAAM,QAAS,CAUpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAMgB;AACR,QAAA,WAAW,SAAS,YAAmB;AAE7C,SAAWC,2BAAA,IAAAC,WAAA,UAAA,EAAA,UAAAC,SAAA,iBAAiB,UAAU,QAAe,EAAE,CAAA;AACzD;;;"}
1
+ {"version":3,"file":"useField.cjs","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { type FunctionComponent, useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NodeType, UseFieldOptions } from './types'\nimport type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FieldApi<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n > {\n Field: FieldComponent<TParentData, TFormValidator>\n }\n}\n\nexport type UseField<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> = <\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n opts: Omit<\n UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>,\n 'form'\n >,\n) => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>\n\nexport function useField<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n opts: UseFieldOptions<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n): FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> {\n const [fieldApi] = useState(() => {\n const api = new FieldApi({\n ...opts,\n form: opts.form,\n name: opts.name,\n })\n\n api.Field = Field as never\n\n return api\n })\n\n useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])\n\n /**\n * fieldApi.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 fieldApi.update(opts)\n })\n\n useStore(\n fieldApi.store,\n opts.mode === 'array'\n ? (state) => {\n return [state.meta, Object.keys(state.value as never).length]\n }\n : undefined,\n )\n\n return fieldApi as never\n}\n\ntype FieldComponentProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = {\n children: (\n fieldApi: FieldApi<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n ) => NodeType\n} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>\n\nexport type FieldComponent<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> = <\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n children,\n ...fieldOptions\n}: Omit<\n FieldComponentProps<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n 'form'\n>) => NodeType\n\nexport const Field = (<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n children,\n ...fieldOptions\n}: FieldComponentProps<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n>): NodeType => {\n const fieldApi = useField(fieldOptions as any)\n\n return (<>{functionalUpdate(children, fieldApi as any)}</>) as never\n}) satisfies FunctionComponent<FieldComponentProps<any, any, any, any, any>>\n"],"names":["useState","FieldApi","useIsomorphicLayoutEffect","useStore","jsx","Fragment","functionalUpdate"],"mappings":";;;;;;;AA0CO,SAAS,SAWd,MAOsE;AACtE,QAAM,CAAC,QAAQ,IAAIA,MAAAA,SAAS,MAAM;AAC1B,UAAA,MAAM,IAAIC,kBAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,QAAI,QAAQ;AAEL,WAAA;AAAA,EAAA,CACR;AAEDC,4BAAAA,0BAA0B,SAAS,OAAO,CAAC,QAAQ,CAAC;AAMpDA,4BAAAA,0BAA0B,MAAM;AAC9B,aAAS,OAAO,IAAI;AAAA,EAAA,CACrB;AAEDC,aAAA;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACF,aAAA,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,KAAc,EAAE,MAAM;AAAA,IAE9D,IAAA;AAAA,EAAA;AAGC,SAAA;AACT;AAiDO,MAAM,QAAS,CAUpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAMgB;AACR,QAAA,WAAW,SAAS,YAAmB;AAE7C,SAAWC,2BAAA,IAAAC,WAAA,UAAA,EAAA,UAAAC,SAAA,iBAAiB,UAAU,QAAe,EAAE,CAAA;AACzD;;;"}
@@ -3,11 +3,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const jsxRuntime = require("react/jsx-runtime");
4
4
  const formCore = require("@tanstack/form-core");
5
5
  const reactStore = require("@tanstack/react-store");
6
- const rehackt = require("rehackt");
6
+ const react = require("react");
7
7
  const useField = require("./useField.cjs");
8
8
  const useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect.cjs");
9
9
  function useForm(opts) {
10
- const [formApi] = rehackt.useState(() => {
10
+ const [formApi] = react.useState(() => {
11
11
  const api = new formCore.FormApi(opts);
12
12
  api.Field = function APIField(props) {
13
13
  return /* @__PURE__ */ jsxRuntime.jsx(useField.Field, { ...props, form: api });
@@ -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 'rehackt'\nimport { Field, type FieldComponent, type UseField, useField } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NodeType } from './types'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FormApi<TFormData, TFormValidator> {\n Field: FieldComponent<TFormData, TFormValidator>\n useField: UseField<TFormData, TFormValidator>\n useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n ) => TSelected\n Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n /**\n TypeScript versions <=5.0.4 have a bug that prevents\n the type of the `TSelected` generic from being inferred\n from the return type of this method.\n\n In these versions, `TSelected` will fall back to the default\n type (or `unknown` if that's not defined).\n\n @see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}\n @see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}\n */\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n children: ((state: NoInfer<TSelected>) => NodeType) | NodeType\n }) => NodeType\n }\n}\n\nexport function useForm<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n opts?: FormOptions<TFormData, TFormValidator>,\n): FormApi<TFormData, TFormValidator> {\n const [formApi] = useState(() => {\n const api = new FormApi<TFormData, TFormValidator>(opts)\n api.Field = function APIField(props) {\n return (<Field {...props} form={api} />) as never\n }\n // eslint-disable-next-line react-hooks/rules-of-hooks\n api.useField = (props) => useField({ ...props, form: api })\n api.useStore = (\n // @ts-ignore\n selector,\n ) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useStore(api.store as any, selector as any) as any\n }\n api.Subscribe = (\n // @ts-ignore\n props,\n ) => {\n return functionalUpdate(\n props.children,\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useStore(api.store as any, props.selector as any),\n ) as any\n }\n\n return api\n })\n\n useIsomorphicLayoutEffect(formApi.mount, [])\n\n formApi.useStore((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 as any\n}\n"],"names":["useState","FormApi","jsx","Field","useField","useStore","functionalUpdate","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;AAmCO,SAAS,QAId,MACoC;AACpC,QAAM,CAAC,OAAO,IAAIA,QAAAA,SAAS,MAAM;AACzB,UAAA,MAAM,IAAIC,iBAAmC,IAAI;AACnD,QAAA,QAAQ,SAAS,SAAS,OAAO;AACnC,aAASC,2BAAAA,IAAAC,SAAAA,OAAA,EAAO,GAAG,OAAO,MAAM,IAAK,CAAA;AAAA,IAAA;AAGnC,QAAA,WAAW,CAAC,UAAUC,SAAA,SAAS,EAAE,GAAG,OAAO,MAAM,IAAA,CAAK;AACtD,QAAA,WAAW,CAEb,aACG;AAEI,aAAAC,oBAAS,IAAI,OAAc,QAAe;AAAA,IAAA;AAE/C,QAAA,YAAY,CAEd,UACG;AACI,aAAAC,SAAA;AAAA,QACL,MAAM;AAAA;AAAA,QAEND,WAAAA,SAAS,IAAI,OAAc,MAAM,QAAe;AAAA,MAAA;AAAA,IAClD;AAGK,WAAA;AAAA,EAAA,CACR;AAEyBE,4BAAAA,0BAAA,QAAQ,OAAO,CAAA,CAAE;AAE3C,UAAQ,SAAS,CAAC,UAAU,MAAM,YAAY;AAM9CA,4BAAAA,0BAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EAAA,CACpB;AAEM,SAAA;AACT;;"}
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, type FieldComponent, type UseField, useField } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NodeType } from './types'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FormApi<TFormData, TFormValidator> {\n Field: FieldComponent<TFormData, TFormValidator>\n useField: UseField<TFormData, TFormValidator>\n useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n ) => TSelected\n Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n /**\n TypeScript versions <=5.0.4 have a bug that prevents\n the type of the `TSelected` generic from being inferred\n from the return type of this method.\n\n In these versions, `TSelected` will fall back to the default\n type (or `unknown` if that's not defined).\n\n @see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}\n @see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}\n */\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n children: ((state: NoInfer<TSelected>) => NodeType) | NodeType\n }) => NodeType\n }\n}\n\nexport function useForm<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n opts?: FormOptions<TFormData, TFormValidator>,\n): FormApi<TFormData, TFormValidator> {\n const [formApi] = useState(() => {\n const api = new FormApi<TFormData, TFormValidator>(opts)\n api.Field = function APIField(props) {\n return (<Field {...props} form={api} />) as never\n }\n // eslint-disable-next-line react-hooks/rules-of-hooks\n api.useField = (props) => useField({ ...props, form: api })\n api.useStore = (\n // @ts-ignore\n selector,\n ) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useStore(api.store as any, selector as any) as any\n }\n api.Subscribe = (\n // @ts-ignore\n props,\n ) => {\n return functionalUpdate(\n props.children,\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useStore(api.store as any, props.selector as any),\n ) as any\n }\n\n return api\n })\n\n useIsomorphicLayoutEffect(formApi.mount, [])\n\n formApi.useStore((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 as any\n}\n"],"names":["useState","FormApi","jsx","Field","useField","useStore","functionalUpdate","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;AAmCO,SAAS,QAId,MACoC;AACpC,QAAM,CAAC,OAAO,IAAIA,MAAAA,SAAS,MAAM;AACzB,UAAA,MAAM,IAAIC,iBAAmC,IAAI;AACnD,QAAA,QAAQ,SAAS,SAAS,OAAO;AACnC,aAASC,2BAAAA,IAAAC,SAAAA,OAAA,EAAO,GAAG,OAAO,MAAM,IAAK,CAAA;AAAA,IAAA;AAGnC,QAAA,WAAW,CAAC,UAAUC,SAAA,SAAS,EAAE,GAAG,OAAO,MAAM,IAAA,CAAK;AACtD,QAAA,WAAW,CAEb,aACG;AAEI,aAAAC,oBAAS,IAAI,OAAc,QAAe;AAAA,IAAA;AAE/C,QAAA,YAAY,CAEd,UACG;AACI,aAAAC,SAAA;AAAA,QACL,MAAM;AAAA;AAAA,QAEND,WAAAA,SAAS,IAAI,OAAc,MAAM,QAAe;AAAA,MAAA;AAAA,IAClD;AAGK,WAAA;AAAA,EAAA,CACR;AAEyBE,4BAAAA,0BAAA,QAAQ,OAAO,CAAA,CAAE;AAE3C,UAAQ,SAAS,CAAC,UAAU,MAAM,YAAY;AAM9CA,4BAAAA,0BAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EAAA,CACpB;AAEM,SAAA;AACT;;"}
@@ -1,9 +1,9 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const rehackt = require("rehackt");
3
+ const react = require("react");
4
4
  const useIsomorphicLayoutEffect = (
5
5
  // @ts-ignore
6
- typeof window !== "undefined" ? rehackt.useLayoutEffect : rehackt.useEffect
6
+ typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect
7
7
  );
8
8
  exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
9
9
  //# sourceMappingURL=useIsomorphicLayoutEffect.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"useIsomorphicLayoutEffect.cjs","sources":["../../src/useIsomorphicLayoutEffect.ts"],"sourcesContent":["import { useEffect, useLayoutEffect } from 'rehackt'\n\nexport const useIsomorphicLayoutEffect =\n // @ts-ignore\n typeof window !== 'undefined' ? useLayoutEffect : useEffect\n"],"names":["useLayoutEffect","useEffect"],"mappings":";;;AAEa,MAAA;AAAA;AAAA,EAEX,OAAO,WAAW,cAAcA,QAAAA,kBAAkBC,QAAA;AAAA;;"}
1
+ {"version":3,"file":"useIsomorphicLayoutEffect.cjs","sources":["../../src/useIsomorphicLayoutEffect.ts"],"sourcesContent":["import { useEffect, useLayoutEffect } from 'react'\n\nexport const useIsomorphicLayoutEffect =\n // @ts-ignore\n typeof window !== 'undefined' ? useLayoutEffect : useEffect\n"],"names":["useLayoutEffect","useEffect"],"mappings":";;;AAEa,MAAA;AAAA;AAAA,EAEX,OAAO,WAAW,cAAcA,MAAAA,kBAAkBC,MAAA;AAAA;;"}
@@ -1,3 +1,3 @@
1
- import { useLayoutEffect } from 'rehackt';
1
+ import { useLayoutEffect } from 'react';
2
2
 
3
3
  export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
@@ -1 +1 @@
1
- {"version":3,"file":"useTransform.cjs","sources":["../../src/useTransform.ts"],"sourcesContent":["import type { FormApi, Validator } from '@tanstack/form-core'\n\nexport function useTransform<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n fn: (\n formBase: FormApi<TFormData, TFormValidator>,\n ) => FormApi<TFormData, TFormValidator>,\n deps: unknown[],\n) {\n return {\n fn,\n deps,\n }\n}\n"],"names":[],"mappings":";;AAEgB,SAAA,aAId,IAGA,MACA;AACO,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EAAA;AAEJ;;"}
1
+ {"version":3,"file":"useTransform.cjs","sources":["../../src/useTransform.ts"],"sourcesContent":["import type { FormApi, Validator } from '@tanstack/form-core'\n\nexport function useTransform<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n fn: (formBase: FormApi<any, any>) => FormApi<TFormData, TFormValidator>,\n deps: unknown[],\n) {\n return {\n fn,\n deps,\n }\n}\n"],"names":[],"mappings":";;AAEgB,SAAA,aAId,IACA,MACA;AACO,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EAAA;AAEJ;;"}
@@ -1,6 +1,6 @@
1
1
  import { FormApi, Validator } from '@tanstack/form-core';
2
2
 
3
- export declare function useTransform<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(fn: (formBase: FormApi<TFormData, TFormValidator>) => FormApi<TFormData, TFormValidator>, deps: unknown[]): {
4
- fn: (formBase: FormApi<TFormData, TFormValidator>) => FormApi<TFormData, TFormValidator>;
3
+ export declare function useTransform<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(fn: (formBase: FormApi<any, any>) => FormApi<TFormData, TFormValidator>, deps: unknown[]): {
4
+ fn: (formBase: FormApi<any, any>) => FormApi<TFormData, TFormValidator>;
5
5
  deps: unknown[];
6
6
  };
@@ -10,6 +10,12 @@ declare module '@tanstack/form-core' {
10
10
  onServerValidate?: OnServerValidateOrFn<TFormData, TFormValidator>;
11
11
  }
12
12
  }
13
- export type ValidateFormData<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> = (formData: FormData, info?: Parameters<typeof decode>[1]) => Promise<Partial<FormApi<TFormData, TFormValidator>['state']>>;
14
- export declare const getValidateFormData: <TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(defaultOpts?: FormOptions<TFormData, TFormValidator>) => ValidateFormData<TFormData, TFormValidator>;
13
+ type ValidateFormData<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> = (formData: FormData, info?: Parameters<typeof decode>[1]) => Promise<Partial<FormApi<TFormData, TFormValidator>['state']>>;
14
+ export declare const createServerValidate: <TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(defaultOpts?: FormOptions<TFormData, TFormValidator>) => ValidateFormData<TFormData, TFormValidator>;
15
+ export declare const initialFormState: {
16
+ errorMap: {
17
+ onServer: undefined;
18
+ };
19
+ errors: never[];
20
+ };
15
21
  export {};
@@ -1,5 +1,5 @@
1
1
  import { decode } from "decode-formdata";
2
- const getValidateFormData = (defaultOpts) => async (formData, info) => {
2
+ const createServerValidate = (defaultOpts) => async (formData, info) => {
3
3
  const { validatorAdapter, onServerValidate } = defaultOpts || {};
4
4
  const runValidator = (propsValue) => {
5
5
  if (validatorAdapter && typeof onServerValidate !== "function") {
@@ -16,7 +16,14 @@ const getValidateFormData = (defaultOpts) => async (formData, info) => {
16
16
  errors: onServerError ? [onServerError] : []
17
17
  };
18
18
  };
19
+ const initialFormState = {
20
+ errorMap: {
21
+ onServer: void 0
22
+ },
23
+ errors: []
24
+ };
19
25
  export {
20
- getValidateFormData
26
+ createServerValidate,
27
+ initialFormState
21
28
  };
22
- //# sourceMappingURL=validateFormData.js.map
29
+ //# sourceMappingURL=createServerValidate.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"createServerValidate.js","sources":["../../src/createServerValidate.ts"],"sourcesContent":["import { decode } from 'decode-formdata'\nimport type {\n FormApi,\n FormOptions,\n ValidationError,\n Validator,\n} from '@tanstack/form-core'\n\ntype OnServerValidateFn<TFormData> = (props: {\n value: TFormData\n}) => ValidationError\n\ntype OnServerValidateOrFn<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = TFormValidator extends Validator<TFormData, infer FFN>\n ? FFN | OnServerValidateFn<TFormData>\n : OnServerValidateFn<TFormData>\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FormOptions<\n TFormData,\n TFormValidator extends\n | Validator<TFormData, unknown>\n | undefined = undefined,\n > {\n onServerValidate?: OnServerValidateOrFn<TFormData, TFormValidator>\n }\n}\n\ntype ValidateFormData<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = (\n formData: FormData,\n info?: Parameters<typeof decode>[1],\n) => Promise<Partial<FormApi<TFormData, TFormValidator>['state']>>\n\nexport const createServerValidate = <\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n defaultOpts?: FormOptions<TFormData, TFormValidator>,\n) =>\n (async (\n formData: FormData,\n info?: Parameters<typeof decode>[1],\n ): Promise<Partial<FormApi<TFormData, TFormValidator>['state']>> => {\n const { validatorAdapter, onServerValidate } = defaultOpts || {}\n\n const runValidator = (propsValue: { value: TFormData }) => {\n if (validatorAdapter && typeof onServerValidate !== 'function') {\n return validatorAdapter().validate(propsValue, onServerValidate)\n }\n\n return (onServerValidate as OnServerValidateFn<TFormData>)(propsValue)\n }\n\n const data = decode(formData, info) as never as TFormData\n\n const onServerError = runValidator({ value: data })\n\n return {\n errorMap: {\n onServer: onServerError,\n },\n errors: onServerError ? [onServerError] : [],\n }\n }) as ValidateFormData<TFormData, TFormValidator>\n\nexport const initialFormState = {\n errorMap: {\n onServer: undefined,\n },\n errors: [],\n}\n"],"names":[],"mappings":";AAuCO,MAAM,uBAAuB,CAIlC,gBAEC,OACC,UACA,SACkE;AAClE,QAAM,EAAE,kBAAkB,qBAAqB,eAAe,CAAA;AAExD,QAAA,eAAe,CAAC,eAAqC;AACrD,QAAA,oBAAoB,OAAO,qBAAqB,YAAY;AAC9D,aAAO,iBAAiB,EAAE,SAAS,YAAY,gBAAgB;AAAA,IACjE;AAEA,WAAQ,iBAAmD,UAAU;AAAA,EAAA;AAGjE,QAAA,OAAO,OAAO,UAAU,IAAI;AAElC,QAAM,gBAAgB,aAAa,EAAE,OAAO,KAAM,CAAA;AAE3C,SAAA;AAAA,IACL,UAAU;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ,gBAAgB,CAAC,aAAa,IAAI,CAAC;AAAA,EAAA;AAE/C;AAEK,MAAM,mBAAmB;AAAA,EAC9B,UAAU;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,QAAQ,CAAC;AACX;"}
@@ -1,8 +1,6 @@
1
- export type { DeepKeys, DeepValue, FieldApiOptions, FieldInfo, FieldMeta, FieldOptions, FieldState, FormOptions, FormState, RequiredByKey, Updater, UpdaterFn, ValidationCause, ValidationError, ValidationMeta, } from '@tanstack/form-core';
2
- export { FormApi, FieldApi, functionalUpdate, mergeForm, } from '@tanstack/form-core';
1
+ export * from '@tanstack/form-core';
3
2
  export { useForm } from './useForm.js';
4
3
  export type { UseField, FieldComponent } from './useField.js';
5
4
  export { useField, Field } from './useField.js';
6
- export type { FormFactory } from './createFormFactory.js';
7
- export { createFormFactory } from './createFormFactory.js';
5
+ export { createServerValidate, initialFormState } from './createServerValidate.js';
8
6
  export { useTransform } from './useTransform.js';
package/dist/esm/index.js CHANGED
@@ -1,15 +1,12 @@
1
- import { FieldApi, FormApi, functionalUpdate, mergeForm } from "@tanstack/form-core";
1
+ export * from "@tanstack/form-core";
2
2
  import { useForm } from "./useForm.js";
3
3
  import { Field, useField } from "./useField.js";
4
- import { createFormFactory } from "./createFormFactory.js";
4
+ import { createServerValidate, initialFormState } from "./createServerValidate.js";
5
5
  import { useTransform } from "./useTransform.js";
6
6
  export {
7
7
  Field,
8
- FieldApi,
9
- FormApi,
10
- createFormFactory,
11
- functionalUpdate,
12
- mergeForm,
8
+ createServerValidate,
9
+ initialFormState,
13
10
  useField,
14
11
  useForm,
15
12
  useTransform
@@ -0,0 +1,2 @@
1
+ export * from '@tanstack/form-core';
2
+ export { createServerValidate, initialFormState } from './createServerValidate.js';
@@ -0,0 +1,7 @@
1
+ export * from "@tanstack/form-core";
2
+ import { createServerValidate, initialFormState } from "./createServerValidate.js";
3
+ export {
4
+ createServerValidate,
5
+ initialFormState
6
+ };
7
+ //# sourceMappingURL=nextjs-index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"nextjs-index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
@@ -1,5 +1,5 @@
1
1
  import { DeepKeys, DeepValue, FieldApiOptions, Validator } from '@tanstack/form-core';
2
- import { FunctionComponent } from 'rehackt';
2
+ import { FunctionComponent } from 'react';
3
3
 
4
4
  export type UseFieldOptions<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = FieldApiOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
5
5
  mode?: 'value' | 'array';
@@ -1,5 +1,5 @@
1
1
  import { jsx, Fragment } from "react/jsx-runtime";
2
- import { useState } from "rehackt";
2
+ import { useState } from "react";
3
3
  import { useStore } from "@tanstack/react-store";
4
4
  import { FieldApi, functionalUpdate } from "@tanstack/form-core";
5
5
  import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
@@ -1 +1 @@
1
- {"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { type FunctionComponent, useState } from 'rehackt'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NodeType, UseFieldOptions } from './types'\nimport type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FieldApi<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n > {\n Field: FieldComponent<TParentData, TFormValidator>\n }\n}\n\nexport type UseField<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> = <\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n opts: Omit<\n UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>,\n 'form'\n >,\n) => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>\n\nexport function useField<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n opts: UseFieldOptions<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n): FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> {\n const [fieldApi] = useState(() => {\n const api = new FieldApi({\n ...opts,\n form: opts.form,\n name: opts.name,\n })\n\n api.Field = Field as never\n\n return api\n })\n\n useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])\n\n /**\n * fieldApi.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 fieldApi.update(opts)\n })\n\n useStore(\n fieldApi.store,\n opts.mode === 'array'\n ? (state) => {\n return [state.meta, Object.keys(state.value as never).length]\n }\n : undefined,\n )\n\n return fieldApi as never\n}\n\ntype FieldComponentProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = {\n children: (\n fieldApi: FieldApi<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n ) => NodeType\n} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>\n\nexport type FieldComponent<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> = <\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n children,\n ...fieldOptions\n}: Omit<\n FieldComponentProps<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n 'form'\n>) => NodeType\n\nexport const Field = (<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n children,\n ...fieldOptions\n}: FieldComponentProps<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n>): NodeType => {\n const fieldApi = useField(fieldOptions as any)\n\n return (<>{functionalUpdate(children, fieldApi as any)}</>) as never\n}) satisfies FunctionComponent<FieldComponentProps<any, any, any, any, any>>\n"],"names":[],"mappings":";;;;;AA0CO,SAAS,SAWd,MAOsE;AACtE,QAAM,CAAC,QAAQ,IAAI,SAAS,MAAM;AAC1B,UAAA,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,QAAI,QAAQ;AAEL,WAAA;AAAA,EAAA,CACR;AAED,4BAA0B,SAAS,OAAO,CAAC,QAAQ,CAAC;AAMpD,4BAA0B,MAAM;AAC9B,aAAS,OAAO,IAAI;AAAA,EAAA,CACrB;AAED;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACF,aAAA,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,KAAc,EAAE,MAAM;AAAA,IAE9D,IAAA;AAAA,EAAA;AAGC,SAAA;AACT;AAiDO,MAAM,QAAS,CAUpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAMgB;AACR,QAAA,WAAW,SAAS,YAAmB;AAE7C,SAAW,oBAAA,UAAA,EAAA,UAAA,iBAAiB,UAAU,QAAe,EAAE,CAAA;AACzD;"}
1
+ {"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import React, { type FunctionComponent, useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NodeType, UseFieldOptions } from './types'\nimport type { DeepKeys, DeepValue, Validator } from '@tanstack/form-core'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FieldApi<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n > {\n Field: FieldComponent<TParentData, TFormValidator>\n }\n}\n\nexport type UseField<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> = <\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n opts: Omit<\n UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>,\n 'form'\n >,\n) => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>\n\nexport function useField<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>(\n opts: UseFieldOptions<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n): FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> {\n const [fieldApi] = useState(() => {\n const api = new FieldApi({\n ...opts,\n form: opts.form,\n name: opts.name,\n })\n\n api.Field = Field as never\n\n return api\n })\n\n useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])\n\n /**\n * fieldApi.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 fieldApi.update(opts)\n })\n\n useStore(\n fieldApi.store,\n opts.mode === 'array'\n ? (state) => {\n return [state.meta, Object.keys(state.value as never).length]\n }\n : undefined,\n )\n\n return fieldApi as never\n}\n\ntype FieldComponentProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = {\n children: (\n fieldApi: FieldApi<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n ) => NodeType\n} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>\n\nexport type FieldComponent<\n TParentData,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n> = <\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n children,\n ...fieldOptions\n}: Omit<\n FieldComponentProps<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n >,\n 'form'\n>) => NodeType\n\nexport const Field = (<\n TParentData,\n TName extends DeepKeys<TParentData>,\n TFieldValidator extends\n | Validator<DeepValue<TParentData, TName>, unknown>\n | undefined = undefined,\n TFormValidator extends\n | Validator<TParentData, unknown>\n | undefined = undefined,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n children,\n ...fieldOptions\n}: FieldComponentProps<\n TParentData,\n TName,\n TFieldValidator,\n TFormValidator,\n TData\n>): NodeType => {\n const fieldApi = useField(fieldOptions as any)\n\n return (<>{functionalUpdate(children, fieldApi as any)}</>) as never\n}) satisfies FunctionComponent<FieldComponentProps<any, any, any, any, any>>\n"],"names":[],"mappings":";;;;;AA0CO,SAAS,SAWd,MAOsE;AACtE,QAAM,CAAC,QAAQ,IAAI,SAAS,MAAM;AAC1B,UAAA,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAED,QAAI,QAAQ;AAEL,WAAA;AAAA,EAAA,CACR;AAED,4BAA0B,SAAS,OAAO,CAAC,QAAQ,CAAC;AAMpD,4BAA0B,MAAM;AAC9B,aAAS,OAAO,IAAI;AAAA,EAAA,CACrB;AAED;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACF,aAAA,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,KAAc,EAAE,MAAM;AAAA,IAE9D,IAAA;AAAA,EAAA;AAGC,SAAA;AACT;AAiDO,MAAM,QAAS,CAUpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAMgB;AACR,QAAA,WAAW,SAAS,YAAmB;AAE7C,SAAW,oBAAA,UAAA,EAAA,UAAA,iBAAiB,UAAU,QAAe,EAAE,CAAA;AACzD;"}
@@ -1,7 +1,7 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { FormApi, functionalUpdate } from "@tanstack/form-core";
3
3
  import { useStore } from "@tanstack/react-store";
4
- import { useState } from "rehackt";
4
+ import { useState } from "react";
5
5
  import { Field, useField } from "./useField.js";
6
6
  import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
7
7
  function useForm(opts) {
@@ -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 'rehackt'\nimport { Field, type FieldComponent, type UseField, useField } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NodeType } from './types'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FormApi<TFormData, TFormValidator> {\n Field: FieldComponent<TFormData, TFormValidator>\n useField: UseField<TFormData, TFormValidator>\n useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n ) => TSelected\n Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n /**\n TypeScript versions <=5.0.4 have a bug that prevents\n the type of the `TSelected` generic from being inferred\n from the return type of this method.\n\n In these versions, `TSelected` will fall back to the default\n type (or `unknown` if that's not defined).\n\n @see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}\n @see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}\n */\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n children: ((state: NoInfer<TSelected>) => NodeType) | NodeType\n }) => NodeType\n }\n}\n\nexport function useForm<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n opts?: FormOptions<TFormData, TFormValidator>,\n): FormApi<TFormData, TFormValidator> {\n const [formApi] = useState(() => {\n const api = new FormApi<TFormData, TFormValidator>(opts)\n api.Field = function APIField(props) {\n return (<Field {...props} form={api} />) as never\n }\n // eslint-disable-next-line react-hooks/rules-of-hooks\n api.useField = (props) => useField({ ...props, form: api })\n api.useStore = (\n // @ts-ignore\n selector,\n ) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useStore(api.store as any, selector as any) as any\n }\n api.Subscribe = (\n // @ts-ignore\n props,\n ) => {\n return functionalUpdate(\n props.children,\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useStore(api.store as any, props.selector as any),\n ) as any\n }\n\n return api\n })\n\n useIsomorphicLayoutEffect(formApi.mount, [])\n\n formApi.useStore((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 as any\n}\n"],"names":[],"mappings":";;;;;;AAmCO,SAAS,QAId,MACoC;AACpC,QAAM,CAAC,OAAO,IAAI,SAAS,MAAM;AACzB,UAAA,MAAM,IAAI,QAAmC,IAAI;AACnD,QAAA,QAAQ,SAAS,SAAS,OAAO;AACnC,aAAS,oBAAA,OAAA,EAAO,GAAG,OAAO,MAAM,IAAK,CAAA;AAAA,IAAA;AAGnC,QAAA,WAAW,CAAC,UAAU,SAAS,EAAE,GAAG,OAAO,MAAM,IAAA,CAAK;AACtD,QAAA,WAAW,CAEb,aACG;AAEI,aAAA,SAAS,IAAI,OAAc,QAAe;AAAA,IAAA;AAE/C,QAAA,YAAY,CAEd,UACG;AACI,aAAA;AAAA,QACL,MAAM;AAAA;AAAA,QAEN,SAAS,IAAI,OAAc,MAAM,QAAe;AAAA,MAAA;AAAA,IAClD;AAGK,WAAA;AAAA,EAAA,CACR;AAEyB,4BAAA,QAAQ,OAAO,CAAA,CAAE;AAE3C,UAAQ,SAAS,CAAC,UAAU,MAAM,YAAY;AAM9C,4BAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EAAA,CACpB;AAEM,SAAA;AACT;"}
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, type FieldComponent, type UseField, useField } from './useField'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\nimport type { NoInfer } from '@tanstack/react-store'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\nimport type { NodeType } from './types'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FormApi<TFormData, TFormValidator> {\n Field: FieldComponent<TFormData, TFormValidator>\n useField: UseField<TFormData, TFormValidator>\n useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n ) => TSelected\n Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n /**\n TypeScript versions <=5.0.4 have a bug that prevents\n the type of the `TSelected` generic from being inferred\n from the return type of this method.\n\n In these versions, `TSelected` will fall back to the default\n type (or `unknown` if that's not defined).\n\n @see {@link https://github.com/TanStack/form/pull/606/files#r1506715714 | This discussion on GitHub for the details}\n @see {@link https://github.com/microsoft/TypeScript/issues/52786 | The bug report in `microsoft/TypeScript`}\n */\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n children: ((state: NoInfer<TSelected>) => NodeType) | NodeType\n }) => NodeType\n }\n}\n\nexport function useForm<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n opts?: FormOptions<TFormData, TFormValidator>,\n): FormApi<TFormData, TFormValidator> {\n const [formApi] = useState(() => {\n const api = new FormApi<TFormData, TFormValidator>(opts)\n api.Field = function APIField(props) {\n return (<Field {...props} form={api} />) as never\n }\n // eslint-disable-next-line react-hooks/rules-of-hooks\n api.useField = (props) => useField({ ...props, form: api })\n api.useStore = (\n // @ts-ignore\n selector,\n ) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useStore(api.store as any, selector as any) as any\n }\n api.Subscribe = (\n // @ts-ignore\n props,\n ) => {\n return functionalUpdate(\n props.children,\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useStore(api.store as any, props.selector as any),\n ) as any\n }\n\n return api\n })\n\n useIsomorphicLayoutEffect(formApi.mount, [])\n\n formApi.useStore((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 as any\n}\n"],"names":[],"mappings":";;;;;;AAmCO,SAAS,QAId,MACoC;AACpC,QAAM,CAAC,OAAO,IAAI,SAAS,MAAM;AACzB,UAAA,MAAM,IAAI,QAAmC,IAAI;AACnD,QAAA,QAAQ,SAAS,SAAS,OAAO;AACnC,aAAS,oBAAA,OAAA,EAAO,GAAG,OAAO,MAAM,IAAK,CAAA;AAAA,IAAA;AAGnC,QAAA,WAAW,CAAC,UAAU,SAAS,EAAE,GAAG,OAAO,MAAM,IAAA,CAAK;AACtD,QAAA,WAAW,CAEb,aACG;AAEI,aAAA,SAAS,IAAI,OAAc,QAAe;AAAA,IAAA;AAE/C,QAAA,YAAY,CAEd,UACG;AACI,aAAA;AAAA,QACL,MAAM;AAAA;AAAA,QAEN,SAAS,IAAI,OAAc,MAAM,QAAe;AAAA,MAAA;AAAA,IAClD;AAGK,WAAA;AAAA,EAAA,CACR;AAEyB,4BAAA,QAAQ,OAAO,CAAA,CAAE;AAE3C,UAAQ,SAAS,CAAC,UAAU,MAAM,YAAY;AAM9C,4BAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EAAA,CACpB;AAEM,SAAA;AACT;"}
@@ -1,3 +1,3 @@
1
- import { useLayoutEffect } from 'rehackt';
1
+ import { useLayoutEffect } from 'react';
2
2
 
3
3
  export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
@@ -1,4 +1,4 @@
1
- import { useLayoutEffect, useEffect } from "rehackt";
1
+ import { useLayoutEffect, useEffect } from "react";
2
2
  const useIsomorphicLayoutEffect = (
3
3
  // @ts-ignore
4
4
  typeof window !== "undefined" ? useLayoutEffect : useEffect
@@ -1 +1 @@
1
- {"version":3,"file":"useIsomorphicLayoutEffect.js","sources":["../../src/useIsomorphicLayoutEffect.ts"],"sourcesContent":["import { useEffect, useLayoutEffect } from 'rehackt'\n\nexport const useIsomorphicLayoutEffect =\n // @ts-ignore\n typeof window !== 'undefined' ? useLayoutEffect : useEffect\n"],"names":[],"mappings":";AAEa,MAAA;AAAA;AAAA,EAEX,OAAO,WAAW,cAAc,kBAAkB;AAAA;"}
1
+ {"version":3,"file":"useIsomorphicLayoutEffect.js","sources":["../../src/useIsomorphicLayoutEffect.ts"],"sourcesContent":["import { useEffect, useLayoutEffect } from 'react'\n\nexport const useIsomorphicLayoutEffect =\n // @ts-ignore\n typeof window !== 'undefined' ? useLayoutEffect : useEffect\n"],"names":[],"mappings":";AAEa,MAAA;AAAA;AAAA,EAEX,OAAO,WAAW,cAAc,kBAAkB;AAAA;"}
@@ -1,6 +1,6 @@
1
1
  import { FormApi, Validator } from '@tanstack/form-core';
2
2
 
3
- export declare function useTransform<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(fn: (formBase: FormApi<TFormData, TFormValidator>) => FormApi<TFormData, TFormValidator>, deps: unknown[]): {
4
- fn: (formBase: FormApi<TFormData, TFormValidator>) => FormApi<TFormData, TFormValidator>;
3
+ export declare function useTransform<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(fn: (formBase: FormApi<any, any>) => FormApi<TFormData, TFormValidator>, deps: unknown[]): {
4
+ fn: (formBase: FormApi<any, any>) => FormApi<TFormData, TFormValidator>;
5
5
  deps: unknown[];
6
6
  };
@@ -1 +1 @@
1
- {"version":3,"file":"useTransform.js","sources":["../../src/useTransform.ts"],"sourcesContent":["import type { FormApi, Validator } from '@tanstack/form-core'\n\nexport function useTransform<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n fn: (\n formBase: FormApi<TFormData, TFormValidator>,\n ) => FormApi<TFormData, TFormValidator>,\n deps: unknown[],\n) {\n return {\n fn,\n deps,\n }\n}\n"],"names":[],"mappings":"AAEgB,SAAA,aAId,IAGA,MACA;AACO,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EAAA;AAEJ;"}
1
+ {"version":3,"file":"useTransform.js","sources":["../../src/useTransform.ts"],"sourcesContent":["import type { FormApi, Validator } from '@tanstack/form-core'\n\nexport function useTransform<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n fn: (formBase: FormApi<any, any>) => FormApi<TFormData, TFormValidator>,\n deps: unknown[],\n) {\n return {\n fn,\n deps,\n }\n}\n"],"names":[],"mappings":"AAEgB,SAAA,aAId,IACA,MACA;AACO,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EAAA;AAEJ;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/react-form",
3
- "version": "0.22.0",
3
+ "version": "0.23.0",
4
4
  "description": "Powerful, type-safe forms for React.",
5
5
  "author": "tannerlinsley",
6
6
  "license": "MIT",
@@ -30,21 +30,30 @@
30
30
  "default": "./dist/cjs/index.cjs"
31
31
  }
32
32
  },
33
+ "./nextjs": {
34
+ "import": {
35
+ "types": "./dist/esm/nextjs-index.d.ts",
36
+ "default": "./dist/esm/nextjs-index.js"
37
+ },
38
+ "require": {
39
+ "types": "./dist/cjs/nextjs-index.d.cts",
40
+ "default": "./dist/cjs/nextjs-index.cjs"
41
+ }
42
+ },
33
43
  "./package.json": "./package.json"
34
44
  },
35
45
  "devDependencies": {
36
- "@types/react": "^18.2.45",
37
- "@types/react-dom": "^18.2.19",
38
- "@vitejs/plugin-react": "^4.2.1",
39
- "react": "^18.2.0",
40
- "react-dom": "^18.2.0",
46
+ "@types/react": "^18.3.3",
47
+ "@types/react-dom": "^18.3.0",
48
+ "@vitejs/plugin-react": "^4.3.0",
49
+ "react": "^18.3.1",
50
+ "react-dom": "^18.3.1",
41
51
  "vite": "^5.0.10"
42
52
  },
43
53
  "dependencies": {
44
- "@tanstack/react-store": "^0.4.1",
45
- "decode-formdata": "^0.4.0",
46
- "rehackt": "^0.0.3",
47
- "@tanstack/form-core": "0.22.0"
54
+ "@tanstack/react-store": "^0.3.1",
55
+ "decode-formdata": "^0.7.5",
56
+ "@tanstack/form-core": "0.23.0"
48
57
  },
49
58
  "peerDependencies": {
50
59
  "react": "^17.0.0 || ^18.0.0"
@@ -29,7 +29,7 @@ declare module '@tanstack/form-core' {
29
29
  }
30
30
  }
31
31
 
32
- export type ValidateFormData<
32
+ type ValidateFormData<
33
33
  TFormData,
34
34
  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
35
35
  > = (
@@ -37,7 +37,7 @@ export type ValidateFormData<
37
37
  info?: Parameters<typeof decode>[1],
38
38
  ) => Promise<Partial<FormApi<TFormData, TFormValidator>['state']>>
39
39
 
40
- export const getValidateFormData = <
40
+ export const createServerValidate = <
41
41
  TFormData,
42
42
  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
43
43
  >(
@@ -68,3 +68,10 @@ export const getValidateFormData = <
68
68
  errors: onServerError ? [onServerError] : [],
69
69
  }
70
70
  }) as ValidateFormData<TFormData, TFormValidator>
71
+
72
+ export const initialFormState = {
73
+ errorMap: {
74
+ onServer: undefined,
75
+ },
76
+ errors: [],
77
+ }
package/src/index.ts CHANGED
@@ -1,33 +1,9 @@
1
- export type {
2
- DeepKeys,
3
- DeepValue,
4
- FieldApiOptions,
5
- FieldInfo,
6
- FieldMeta,
7
- FieldOptions,
8
- FieldState,
9
- FormOptions,
10
- FormState,
11
- RequiredByKey,
12
- Updater,
13
- UpdaterFn,
14
- ValidationCause,
15
- ValidationError,
16
- ValidationMeta,
17
- } from '@tanstack/form-core'
18
-
19
- export {
20
- FormApi,
21
- FieldApi,
22
- functionalUpdate,
23
- mergeForm,
24
- } from '@tanstack/form-core'
1
+ export * from '@tanstack/form-core'
25
2
 
26
3
  export { useForm } from './useForm'
27
4
 
28
5
  export type { UseField, FieldComponent } from './useField'
29
6
  export { useField, Field } from './useField'
30
7
 
31
- export type { FormFactory } from './createFormFactory'
32
- export { createFormFactory } from './createFormFactory'
8
+ export { createServerValidate, initialFormState } from './createServerValidate'
33
9
  export { useTransform } from './useTransform'
@@ -0,0 +1,3 @@
1
+ export * from '@tanstack/form-core'
2
+
3
+ export { createServerValidate, initialFormState } from './createServerValidate'
@@ -2,7 +2,7 @@ import * as React from 'react'
2
2
  import { describe, expect, it, vi } from 'vitest'
3
3
  import { render, waitFor } from '@testing-library/react'
4
4
  import userEvent from '@testing-library/user-event'
5
- import { createFormFactory, useForm } from '../index'
5
+ import { useForm } from '../index'
6
6
  import { sleep } from './utils'
7
7
  import type { FieldApi, FormApi } from '../index'
8
8
 
@@ -15,14 +15,12 @@ describe('useField', () => {
15
15
  lastName: string
16
16
  }
17
17
 
18
- const formFactory = createFormFactory<Person>()
19
-
20
18
  function Comp() {
21
- const form = formFactory.useForm({
19
+ const form = useForm({
22
20
  defaultValues: {
23
21
  firstName: 'FirstName',
24
22
  lastName: 'LastName',
25
- },
23
+ } as Person,
26
24
  })
27
25
 
28
26
  return (
@@ -55,14 +53,12 @@ describe('useField', () => {
55
53
  lastName: string
56
54
  }
57
55
 
58
- const formFactory = createFormFactory<Person>()
59
-
60
56
  function Comp() {
61
- const form = formFactory.useForm({
57
+ const form = useForm({
62
58
  defaultValues: {
63
59
  firstName: 'FirstName',
64
60
  lastName: 'LastName',
65
- },
61
+ } as Person,
66
62
  })
67
63
 
68
64
  return (
@@ -97,14 +93,12 @@ describe('useField', () => {
97
93
  }
98
94
  const error = 'Please enter a different value'
99
95
 
100
- const formFactory = createFormFactory<Person>()
101
-
102
96
  function Comp() {
103
- const form = formFactory.useForm({
97
+ const form = useForm({
104
98
  defaultValues: {
105
99
  firstName: '',
106
100
  lastName: '',
107
- },
101
+ } as Person,
108
102
  })
109
103
 
110
104
  return (
@@ -144,14 +138,12 @@ describe('useField', () => {
144
138
  }
145
139
  const error = 'Please enter a different value'
146
140
 
147
- const formFactory = createFormFactory<Person>()
148
-
149
141
  function Comp() {
150
- const form = formFactory.useForm({
142
+ const form = useForm({
151
143
  defaultValues: {
152
144
  firstName: '',
153
145
  lastName: '',
154
- },
146
+ } as Person,
155
147
  })
156
148
 
157
149
  return (
@@ -194,14 +186,12 @@ describe('useField', () => {
194
186
  const onChangeError = 'Please enter a different value (onChangeError)'
195
187
  const onBlurError = 'Please enter a different value (onBlurError)'
196
188
 
197
- const formFactory = createFormFactory<Person>()
198
-
199
189
  function Comp() {
200
- const form = formFactory.useForm({
190
+ const form = useForm({
201
191
  defaultValues: {
202
192
  firstName: '',
203
193
  lastName: '',
204
- },
194
+ } as Person,
205
195
  })
206
196
 
207
197
  return (
@@ -250,14 +240,12 @@ describe('useField', () => {
250
240
  }
251
241
  const error = 'Please enter a different value'
252
242
 
253
- const formFactory = createFormFactory<Person>()
254
-
255
243
  function Comp() {
256
- const form = formFactory.useForm({
244
+ const form = useForm({
257
245
  defaultValues: {
258
246
  firstName: '',
259
247
  lastName: '',
260
- },
248
+ } as Person,
261
249
  })
262
250
 
263
251
  return (
@@ -304,14 +292,12 @@ describe('useField', () => {
304
292
  const onChangeError = 'Please enter a different value (onChangeError)'
305
293
  const onBlurError = 'Please enter a different value (onBlurError)'
306
294
 
307
- const formFactory = createFormFactory<Person>()
308
-
309
295
  function Comp() {
310
- const form = formFactory.useForm({
296
+ const form = useForm({
311
297
  defaultValues: {
312
298
  firstName: '',
313
299
  lastName: '',
314
- },
300
+ } as Person,
315
301
  })
316
302
 
317
303
  return (
@@ -367,14 +353,13 @@ describe('useField', () => {
367
353
  }
368
354
  const mockFn = vi.fn()
369
355
  const error = 'Please enter a different value'
370
- const formFactory = createFormFactory<Person>()
371
356
 
372
357
  function Comp() {
373
- const form = formFactory.useForm({
358
+ const form = useForm({
374
359
  defaultValues: {
375
360
  firstName: '',
376
361
  lastName: '',
377
- },
362
+ } as Person,
378
363
  })
379
364
 
380
365
  return (
@@ -421,14 +406,13 @@ describe('useField', () => {
421
406
  firstName: string
422
407
  lastName: string
423
408
  }
424
- const formFactory = createFormFactory<Person>()
425
409
  let form: FormApi<Person> | null = null
426
410
  function Comp() {
427
- form = formFactory.useForm({
411
+ form = useForm({
428
412
  defaultValues: {
429
413
  firstName: '',
430
414
  lastName: '',
431
- },
415
+ } as Person,
432
416
  })
433
417
  return (
434
418
  <>
@@ -464,14 +448,13 @@ describe('useField', () => {
464
448
  firstName: string
465
449
  lastName: string
466
450
  }
467
- const formFactory = createFormFactory<Person>()
468
451
  let form: FormApi<Person> | null = null
469
452
  function Comp() {
470
- form = formFactory.useForm({
453
+ form = useForm({
471
454
  defaultValues: {
472
455
  firstName: '',
473
456
  lastName: '',
474
- },
457
+ } as Person,
475
458
  })
476
459
  return (
477
460
  <>
@@ -908,14 +891,13 @@ describe('useField', () => {
908
891
  }
909
892
  const mockFn = vi.fn()
910
893
  const error = 'Please enter a different value'
911
- const formFactory = createFormFactory<Person>()
912
894
 
913
895
  function Comp() {
914
- const form = formFactory.useForm({
896
+ const form = useForm({
915
897
  defaultValues: {
916
898
  firstName: '',
917
899
  lastName: '',
918
- },
900
+ } as Person,
919
901
  validators: {
920
902
  onChangeAsyncDebounceMs: 1000000,
921
903
  onChangeAsync: async () => {
@@ -2,7 +2,7 @@ import * as React from 'react'
2
2
  import { describe, expect, it, vi } from 'vitest'
3
3
  import { render, waitFor } from '@testing-library/react'
4
4
  import userEvent from '@testing-library/user-event'
5
- import { createFormFactory, useForm } from '../index'
5
+ import { useForm } from '../index'
6
6
  import { sleep } from './utils'
7
7
 
8
8
  const user = userEvent.setup()
@@ -14,10 +14,8 @@ describe('useForm', () => {
14
14
  lastName: string
15
15
  }
16
16
 
17
- const formFactory = createFormFactory<Person>()
18
-
19
17
  function Comp() {
20
- const form = formFactory.useForm()
18
+ const form = useForm<Person>()
21
19
 
22
20
  return (
23
21
  <>
@@ -52,14 +50,12 @@ describe('useForm', () => {
52
50
  lastName: string
53
51
  }
54
52
 
55
- const formFactory = createFormFactory<Person>()
56
-
57
53
  function Comp() {
58
- const form = formFactory.useForm({
54
+ const form = useForm({
59
55
  defaultValues: {
60
56
  firstName: 'FirstName',
61
57
  lastName: 'LastName',
62
- },
58
+ } as Person,
63
59
  })
64
60
 
65
61
  return (
@@ -167,14 +163,12 @@ describe('useForm', () => {
167
163
  }
168
164
  const error = 'Please enter a different value'
169
165
 
170
- const formFactory = createFormFactory<Person>()
171
-
172
166
  function Comp() {
173
- const form = formFactory.useForm({
167
+ const form = useForm({
174
168
  defaultValues: {
175
169
  firstName: '',
176
170
  lastName: '',
177
- },
171
+ } as Person,
178
172
  validators: {
179
173
  onChange() {
180
174
  return error
@@ -216,14 +210,12 @@ describe('useForm', () => {
216
210
  }
217
211
  const error = 'Please enter a different value'
218
212
 
219
- const formFactory = createFormFactory<Person>()
220
-
221
213
  function Comp() {
222
- const form = formFactory.useForm({
214
+ const form = useForm({
223
215
  defaultValues: {
224
216
  firstName: '',
225
217
  lastName: '',
226
- },
218
+ } as Person,
227
219
  validators: {
228
220
  onChange: ({ value }) =>
229
221
  value.firstName === 'other' ? error : undefined,
@@ -265,14 +257,12 @@ describe('useForm', () => {
265
257
  }
266
258
  const error = 'Please enter a different value'
267
259
 
268
- const formFactory = createFormFactory<Person>()
269
-
270
260
  function Comp() {
271
- const form = formFactory.useForm({
261
+ const form = useForm({
272
262
  defaultValues: {
273
263
  firstName: '',
274
264
  lastName: '',
275
- },
265
+ } as Person,
276
266
  validators: {
277
267
  onChange: ({ value }) =>
278
268
  value.firstName === 'other' ? error : undefined,
@@ -369,14 +359,12 @@ describe('useForm', () => {
369
359
  }
370
360
  const error = 'Please enter a different value'
371
361
 
372
- const formFactory = createFormFactory<Person>()
373
-
374
362
  function Comp() {
375
- const form = formFactory.useForm({
363
+ const form = useForm({
376
364
  defaultValues: {
377
365
  firstName: '',
378
366
  lastName: '',
379
- },
367
+ } as Person,
380
368
  validators: {
381
369
  onChangeAsync: async () => {
382
370
  await sleep(10)
@@ -423,14 +411,12 @@ describe('useForm', () => {
423
411
  const onChangeError = 'Please enter a different value (onChangeError)'
424
412
  const onBlurError = 'Please enter a different value (onBlurError)'
425
413
 
426
- const formFactory = createFormFactory<Person>()
427
-
428
414
  function Comp() {
429
- const form = formFactory.useForm({
415
+ const form = useForm({
430
416
  defaultValues: {
431
417
  firstName: '',
432
418
  lastName: '',
433
- },
419
+ } as Person,
434
420
  validators: {
435
421
  onChangeAsync: async () => {
436
422
  await sleep(10)
@@ -487,14 +473,13 @@ describe('useForm', () => {
487
473
  }
488
474
  const mockFn = vi.fn()
489
475
  const error = 'Please enter a different value'
490
- const formFactory = createFormFactory<Person>()
491
476
 
492
477
  function Comp() {
493
- const form = formFactory.useForm({
478
+ const form = useForm({
494
479
  defaultValues: {
495
480
  firstName: '',
496
481
  lastName: '',
497
- },
482
+ } as Person,
498
483
  validators: {
499
484
  onChangeAsyncDebounceMs: 100,
500
485
  onChangeAsync: async () => {
package/src/types.ts CHANGED
@@ -4,7 +4,7 @@ import type {
4
4
  FieldApiOptions,
5
5
  Validator,
6
6
  } from '@tanstack/form-core'
7
- import type { FunctionComponent } from 'rehackt'
7
+ import type { FunctionComponent } from 'react'
8
8
 
9
9
  export type UseFieldOptions<
10
10
  TParentData,
package/src/useField.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { type FunctionComponent, useState } from 'rehackt'
1
+ import React, { type FunctionComponent, useState } from 'react'
2
2
  import { useStore } from '@tanstack/react-store'
3
3
  import { FieldApi, functionalUpdate } from '@tanstack/form-core'
4
4
  import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
package/src/useForm.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { FormApi, functionalUpdate } from '@tanstack/form-core'
2
2
  import { useStore } from '@tanstack/react-store'
3
- import React, { useState } from 'rehackt'
3
+ import React, { useState } from 'react'
4
4
  import { Field, type FieldComponent, type UseField, useField } from './useField'
5
5
  import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
6
6
  import type { NoInfer } from '@tanstack/react-store'
@@ -1,4 +1,4 @@
1
- import { useEffect, useLayoutEffect } from 'rehackt'
1
+ import { useEffect, useLayoutEffect } from 'react'
2
2
 
3
3
  export const useIsomorphicLayoutEffect =
4
4
  // @ts-ignore
@@ -4,9 +4,7 @@ export function useTransform<
4
4
  TFormData,
5
5
  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
6
6
  >(
7
- fn: (
8
- formBase: FormApi<TFormData, TFormValidator>,
9
- ) => FormApi<TFormData, TFormValidator>,
7
+ fn: (formBase: FormApi<any, any>) => FormApi<TFormData, TFormValidator>,
10
8
  deps: unknown[],
11
9
  ) {
12
10
  return {
@@ -1,24 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const useField = require("./useField.cjs");
4
- const useForm = require("./useForm.cjs");
5
- const validateFormData = require("./validateFormData.cjs");
6
- function createFormFactory(defaultOpts) {
7
- return {
8
- useForm: (opts) => {
9
- const formOptions = Object.assign({}, defaultOpts, opts);
10
- return useForm.useForm(formOptions);
11
- },
12
- useField: useField.useField,
13
- Field: useField.Field,
14
- validateFormData: validateFormData.getValidateFormData(defaultOpts),
15
- initialFormState: {
16
- errorMap: {
17
- onServer: void 0
18
- },
19
- errors: []
20
- }
21
- };
22
- }
23
- exports.createFormFactory = createFormFactory;
24
- //# sourceMappingURL=createFormFactory.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"createFormFactory.cjs","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import { Field, useField } from './useField'\nimport { useForm } from './useForm'\nimport { getValidateFormData } from './validateFormData'\nimport type { ValidateFormData } from './validateFormData'\nimport type { FieldComponent, UseField } from './useField'\nimport type { FormApi, FormOptions, Validator } from '@tanstack/form-core'\n\nexport type FormFactory<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = {\n useForm: (\n opts?: FormOptions<TFormData, TFormValidator>,\n ) => FormApi<TFormData, TFormValidator>\n useField: typeof useField\n Field: typeof Field\n validateFormData: ValidateFormData<TFormData, TFormValidator>\n initialFormState: Partial<FormApi<TFormData, TFormValidator>['state']>\n}\n\nexport function createFormFactory<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n defaultOpts?: FormOptions<TFormData, TFormValidator>,\n): FormFactory<TFormData, TFormValidator> {\n return {\n useForm: (opts) => {\n const formOptions = Object.assign({}, defaultOpts, opts)\n return useForm<TFormData, TFormValidator>(formOptions)\n },\n useField: useField,\n Field: Field,\n validateFormData: getValidateFormData(defaultOpts) as never,\n initialFormState: {\n errorMap: {\n onServer: undefined,\n },\n errors: [],\n },\n }\n}\n"],"names":["useForm","useField","Field","getValidateFormData"],"mappings":";;;;;AAoBO,SAAS,kBAId,aACwC;AACjC,SAAA;AAAA,IACL,SAAS,CAAC,SAAS;AACjB,YAAM,cAAc,OAAO,OAAO,CAAA,GAAI,aAAa,IAAI;AACvD,aAAOA,QAAAA,QAAmC,WAAW;AAAA,IACvD;AAAA,IAAA,UACAC,SAAA;AAAA,IAAA,OACAC,SAAA;AAAA,IACA,kBAAkBC,qCAAoB,WAAW;AAAA,IACjD,kBAAkB;AAAA,MAChB,UAAU;AAAA,QACR,UAAU;AAAA,MACZ;AAAA,MACA,QAAQ,CAAC;AAAA,IACX;AAAA,EAAA;AAEJ;;"}
@@ -1,12 +0,0 @@
1
- import { Field, useField } from './useField.cjs';
2
- import { ValidateFormData } from './validateFormData.cjs';
3
- import { FormApi, FormOptions, Validator } from '@tanstack/form-core';
4
-
5
- export type FormFactory<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> = {
6
- useForm: (opts?: FormOptions<TFormData, TFormValidator>) => FormApi<TFormData, TFormValidator>;
7
- useField: typeof useField;
8
- Field: typeof Field;
9
- validateFormData: ValidateFormData<TFormData, TFormValidator>;
10
- initialFormState: Partial<FormApi<TFormData, TFormValidator>['state']>;
11
- };
12
- export declare function createFormFactory<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(defaultOpts?: FormOptions<TFormData, TFormValidator>): FormFactory<TFormData, TFormValidator>;
@@ -1 +0,0 @@
1
- {"version":3,"file":"validateFormData.cjs","sources":["../../src/validateFormData.ts"],"sourcesContent":["import { decode } from 'decode-formdata'\nimport type {\n FormApi,\n FormOptions,\n ValidationError,\n Validator,\n} from '@tanstack/form-core'\n\ntype OnServerValidateFn<TFormData> = (props: {\n value: TFormData\n}) => ValidationError\n\ntype OnServerValidateOrFn<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = TFormValidator extends Validator<TFormData, infer FFN>\n ? FFN | OnServerValidateFn<TFormData>\n : OnServerValidateFn<TFormData>\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FormOptions<\n TFormData,\n TFormValidator extends\n | Validator<TFormData, unknown>\n | undefined = undefined,\n > {\n onServerValidate?: OnServerValidateOrFn<TFormData, TFormValidator>\n }\n}\n\nexport type ValidateFormData<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = (\n formData: FormData,\n info?: Parameters<typeof decode>[1],\n) => Promise<Partial<FormApi<TFormData, TFormValidator>['state']>>\n\nexport const getValidateFormData = <\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n defaultOpts?: FormOptions<TFormData, TFormValidator>,\n) =>\n (async (\n formData: FormData,\n info?: Parameters<typeof decode>[1],\n ): Promise<Partial<FormApi<TFormData, TFormValidator>['state']>> => {\n const { validatorAdapter, onServerValidate } = defaultOpts || {}\n\n const runValidator = (propsValue: { value: TFormData }) => {\n if (validatorAdapter && typeof onServerValidate !== 'function') {\n return validatorAdapter().validate(propsValue, onServerValidate)\n }\n\n return (onServerValidate as OnServerValidateFn<TFormData>)(propsValue)\n }\n\n const data = decode(formData, info) as never as TFormData\n\n const onServerError = runValidator({ value: data })\n\n return {\n errorMap: {\n onServer: onServerError,\n },\n errors: onServerError ? [onServerError] : [],\n }\n }) as ValidateFormData<TFormData, TFormValidator>\n"],"names":["decode"],"mappings":";;;AAuCO,MAAM,sBAAsB,CAIjC,gBAEC,OACC,UACA,SACkE;AAClE,QAAM,EAAE,kBAAkB,qBAAqB,eAAe,CAAA;AAExD,QAAA,eAAe,CAAC,eAAqC;AACrD,QAAA,oBAAoB,OAAO,qBAAqB,YAAY;AAC9D,aAAO,iBAAiB,EAAE,SAAS,YAAY,gBAAgB;AAAA,IACjE;AAEA,WAAQ,iBAAmD,UAAU;AAAA,EAAA;AAGjE,QAAA,OAAOA,eAAAA,OAAO,UAAU,IAAI;AAElC,QAAM,gBAAgB,aAAa,EAAE,OAAO,KAAM,CAAA;AAE3C,SAAA;AAAA,IACL,UAAU;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ,gBAAgB,CAAC,aAAa,IAAI,CAAC;AAAA,EAAA;AAE/C;;"}
@@ -1,12 +0,0 @@
1
- import { Field, useField } from './useField.js';
2
- import { ValidateFormData } from './validateFormData.js';
3
- import { FormApi, FormOptions, Validator } from '@tanstack/form-core';
4
-
5
- export type FormFactory<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> = {
6
- useForm: (opts?: FormOptions<TFormData, TFormValidator>) => FormApi<TFormData, TFormValidator>;
7
- useField: typeof useField;
8
- Field: typeof Field;
9
- validateFormData: ValidateFormData<TFormData, TFormValidator>;
10
- initialFormState: Partial<FormApi<TFormData, TFormValidator>['state']>;
11
- };
12
- export declare function createFormFactory<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(defaultOpts?: FormOptions<TFormData, TFormValidator>): FormFactory<TFormData, TFormValidator>;
@@ -1,24 +0,0 @@
1
- import { useField, Field } from "./useField.js";
2
- import { useForm } from "./useForm.js";
3
- import { getValidateFormData } from "./validateFormData.js";
4
- function createFormFactory(defaultOpts) {
5
- return {
6
- useForm: (opts) => {
7
- const formOptions = Object.assign({}, defaultOpts, opts);
8
- return useForm(formOptions);
9
- },
10
- useField,
11
- Field,
12
- validateFormData: getValidateFormData(defaultOpts),
13
- initialFormState: {
14
- errorMap: {
15
- onServer: void 0
16
- },
17
- errors: []
18
- }
19
- };
20
- }
21
- export {
22
- createFormFactory
23
- };
24
- //# sourceMappingURL=createFormFactory.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"createFormFactory.js","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import { Field, useField } from './useField'\nimport { useForm } from './useForm'\nimport { getValidateFormData } from './validateFormData'\nimport type { ValidateFormData } from './validateFormData'\nimport type { FieldComponent, UseField } from './useField'\nimport type { FormApi, FormOptions, Validator } from '@tanstack/form-core'\n\nexport type FormFactory<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = {\n useForm: (\n opts?: FormOptions<TFormData, TFormValidator>,\n ) => FormApi<TFormData, TFormValidator>\n useField: typeof useField\n Field: typeof Field\n validateFormData: ValidateFormData<TFormData, TFormValidator>\n initialFormState: Partial<FormApi<TFormData, TFormValidator>['state']>\n}\n\nexport function createFormFactory<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n defaultOpts?: FormOptions<TFormData, TFormValidator>,\n): FormFactory<TFormData, TFormValidator> {\n return {\n useForm: (opts) => {\n const formOptions = Object.assign({}, defaultOpts, opts)\n return useForm<TFormData, TFormValidator>(formOptions)\n },\n useField: useField,\n Field: Field,\n validateFormData: getValidateFormData(defaultOpts) as never,\n initialFormState: {\n errorMap: {\n onServer: undefined,\n },\n errors: [],\n },\n }\n}\n"],"names":[],"mappings":";;;AAoBO,SAAS,kBAId,aACwC;AACjC,SAAA;AAAA,IACL,SAAS,CAAC,SAAS;AACjB,YAAM,cAAc,OAAO,OAAO,CAAA,GAAI,aAAa,IAAI;AACvD,aAAO,QAAmC,WAAW;AAAA,IACvD;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB,oBAAoB,WAAW;AAAA,IACjD,kBAAkB;AAAA,MAChB,UAAU;AAAA,QACR,UAAU;AAAA,MACZ;AAAA,MACA,QAAQ,CAAC;AAAA,IACX;AAAA,EAAA;AAEJ;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"validateFormData.js","sources":["../../src/validateFormData.ts"],"sourcesContent":["import { decode } from 'decode-formdata'\nimport type {\n FormApi,\n FormOptions,\n ValidationError,\n Validator,\n} from '@tanstack/form-core'\n\ntype OnServerValidateFn<TFormData> = (props: {\n value: TFormData\n}) => ValidationError\n\ntype OnServerValidateOrFn<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = TFormValidator extends Validator<TFormData, infer FFN>\n ? FFN | OnServerValidateFn<TFormData>\n : OnServerValidateFn<TFormData>\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FormOptions<\n TFormData,\n TFormValidator extends\n | Validator<TFormData, unknown>\n | undefined = undefined,\n > {\n onServerValidate?: OnServerValidateOrFn<TFormData, TFormValidator>\n }\n}\n\nexport type ValidateFormData<\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = (\n formData: FormData,\n info?: Parameters<typeof decode>[1],\n) => Promise<Partial<FormApi<TFormData, TFormValidator>['state']>>\n\nexport const getValidateFormData = <\n TFormData,\n TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n defaultOpts?: FormOptions<TFormData, TFormValidator>,\n) =>\n (async (\n formData: FormData,\n info?: Parameters<typeof decode>[1],\n ): Promise<Partial<FormApi<TFormData, TFormValidator>['state']>> => {\n const { validatorAdapter, onServerValidate } = defaultOpts || {}\n\n const runValidator = (propsValue: { value: TFormData }) => {\n if (validatorAdapter && typeof onServerValidate !== 'function') {\n return validatorAdapter().validate(propsValue, onServerValidate)\n }\n\n return (onServerValidate as OnServerValidateFn<TFormData>)(propsValue)\n }\n\n const data = decode(formData, info) as never as TFormData\n\n const onServerError = runValidator({ value: data })\n\n return {\n errorMap: {\n onServer: onServerError,\n },\n errors: onServerError ? [onServerError] : [],\n }\n }) as ValidateFormData<TFormData, TFormValidator>\n"],"names":[],"mappings":";AAuCO,MAAM,sBAAsB,CAIjC,gBAEC,OACC,UACA,SACkE;AAClE,QAAM,EAAE,kBAAkB,qBAAqB,eAAe,CAAA;AAExD,QAAA,eAAe,CAAC,eAAqC;AACrD,QAAA,oBAAoB,OAAO,qBAAqB,YAAY;AAC9D,aAAO,iBAAiB,EAAE,SAAS,YAAY,gBAAgB;AAAA,IACjE;AAEA,WAAQ,iBAAmD,UAAU;AAAA,EAAA;AAGjE,QAAA,OAAO,OAAO,UAAU,IAAI;AAElC,QAAM,gBAAgB,aAAa,EAAE,OAAO,KAAM,CAAA;AAE3C,SAAA;AAAA,IACL,UAAU;AAAA,MACR,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ,gBAAgB,CAAC,aAAa,IAAI,CAAC;AAAA,EAAA;AAE/C;"}
@@ -1,42 +0,0 @@
1
- import { Field, useField } from './useField'
2
- import { useForm } from './useForm'
3
- import { getValidateFormData } from './validateFormData'
4
- import type { ValidateFormData } from './validateFormData'
5
- import type { FieldComponent, UseField } from './useField'
6
- import type { FormApi, FormOptions, Validator } from '@tanstack/form-core'
7
-
8
- export type FormFactory<
9
- TFormData,
10
- TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
11
- > = {
12
- useForm: (
13
- opts?: FormOptions<TFormData, TFormValidator>,
14
- ) => FormApi<TFormData, TFormValidator>
15
- useField: typeof useField
16
- Field: typeof Field
17
- validateFormData: ValidateFormData<TFormData, TFormValidator>
18
- initialFormState: Partial<FormApi<TFormData, TFormValidator>['state']>
19
- }
20
-
21
- export function createFormFactory<
22
- TFormData,
23
- TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
24
- >(
25
- defaultOpts?: FormOptions<TFormData, TFormValidator>,
26
- ): FormFactory<TFormData, TFormValidator> {
27
- return {
28
- useForm: (opts) => {
29
- const formOptions = Object.assign({}, defaultOpts, opts)
30
- return useForm<TFormData, TFormValidator>(formOptions)
31
- },
32
- useField: useField,
33
- Field: Field,
34
- validateFormData: getValidateFormData(defaultOpts) as never,
35
- initialFormState: {
36
- errorMap: {
37
- onServer: undefined,
38
- },
39
- errors: [],
40
- },
41
- }
42
- }
@@ -1,39 +0,0 @@
1
- import * as React from 'react'
2
- import { describe, expect, it } from 'vitest'
3
- import { render } from '@testing-library/react'
4
- import { createFormFactory } from '../index'
5
-
6
- describe('createFormFactory', () => {
7
- it('should allow default values to be set', async () => {
8
- type Person = {
9
- firstName: string
10
- lastName: string
11
- }
12
-
13
- const formFactory = createFormFactory<Person>({
14
- defaultValues: {
15
- firstName: 'FirstName',
16
- lastName: 'LastName',
17
- },
18
- })
19
-
20
- function Comp() {
21
- const form = formFactory.useForm({})
22
-
23
- return (
24
- <>
25
- <form.Field
26
- name="firstName"
27
- children={(field) => {
28
- return <p>{field.state.value}</p>
29
- }}
30
- />
31
- </>
32
- )
33
- }
34
-
35
- const { findByText, queryByText } = render(<Comp />)
36
- expect(await findByText('FirstName')).toBeInTheDocument()
37
- expect(queryByText('LastName')).not.toBeInTheDocument()
38
- })
39
- })