@tanstack/vue-form 0.10.3 → 0.12.0

package/dist/mjs/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/formContext.ts","../../src/useField.tsx","../../src/useForm.tsx","../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi, Validator } from '@tanstack/form-core'\nimport { inject, provide } from 'vue'\n\nexport type FormContext<\n  TFormData = any,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = {\n  formApi: FormApi<TFormData, TFormValidator>\n  parentFieldName?: string\n} | null\n\nexport const formContext = Symbol('FormContext')\n\nexport function provideFormContext<\n  TFormData = any,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(val: FormContext<TFormData, TFormValidator>) {\n  provide(formContext, val)\n}\n\nexport function useFormContext() {\n  const formApi = inject(formContext) as FormContext\n\n  if (!formApi) {\n    throw new Error(`You are trying to use the form API outside of a form!`)\n  }\n\n  return formApi\n}\n","import { FieldApi, type Validator } from '@tanstack/form-core'\nimport type { DeepKeys, DeepValue, Narrow } from '@tanstack/form-core'\nimport { useStore } from '@tanstack/vue-store'\nimport { defineComponent, onMounted, onUnmounted, watch } from 'vue'\nimport type { SlotsType, SetupContext, Ref } from 'vue'\nimport { provideFormContext, useFormContext } from './formContext'\nimport type { UseFieldOptions } from './types'\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 = 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>(\n  opts?: { name: Narrow<TName> } & UseFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    DeepValue<TParentData, TName>\n  >,\n) => FieldApi<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  DeepValue<TParentData, TName>\n>\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): {\n  api: FieldApi<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n    // Omit<typeof opts, 'onMount'> & {\n    //   form: FormApi<TParentData>\n    // }\n  >\n  state: Readonly<\n    Ref<\n      FieldApi<\n        TParentData,\n        TName,\n        TFieldValidator,\n        TFormValidator,\n        TData\n      >['state']\n    >\n  >\n} {\n  // Get the form API either manually or from context\n  const { formApi, parentFieldName } = useFormContext()\n\n  const fieldApi = (() => {\n    const api = new FieldApi({\n      ...opts,\n      form: formApi,\n      name: opts.name,\n    } as never)\n\n    api.Field = Field as never\n\n    return api\n  })()\n\n  const fieldState = useStore(fieldApi.store, (state) => state)\n\n  let cleanup!: () => void\n  onMounted(() => {\n    cleanup = fieldApi.mount()\n  })\n\n  onUnmounted(() => {\n    cleanup()\n  })\n\n  watch(\n    () => opts,\n    () => {\n      // Keep options up to date as they are rendered\n      fieldApi.update({ ...opts, form: formApi } as never)\n    },\n  )\n\n  return { api: fieldApi, state: fieldState } as never\n}\n\nexport type FieldValue<TParentData, TName> = TParentData extends any[]\n  ? unknown extends TName\n    ? TParentData[number]\n    : DeepValue<TParentData[number], TName>\n  : DeepValue<TParentData, TName>\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> = (TParentData extends any[]\n  ? {\n      name?: TName\n      index: number\n    }\n  : {\n      name: TName\n      index?: never\n    }) &\n  Omit<\n    UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n    'name' | 'index'\n  >\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  fieldOptions: FieldComponentProps<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator\n  >,\n  context: SetupContext<\n    {},\n    SlotsType<{\n      default: {\n        field: FieldApi<\n          TParentData,\n          TName,\n          TFieldValidator,\n          TFormValidator,\n          TData\n        >\n        state: FieldApi<\n          TParentData,\n          TName,\n          TFieldValidator,\n          TFormValidator,\n          TData\n        >['state']\n      }\n    }>\n  >,\n) => any\n\nexport const Field = defineComponent(\n  <\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  >(\n    fieldOptions: UseFieldOptions<\n      TParentData,\n      TName,\n      TFieldValidator,\n      TFormValidator\n    >,\n    context: SetupContext,\n  ) => {\n    const fieldApi = useField({ ...fieldOptions, ...context.attrs } as any)\n\n    provideFormContext({\n      formApi: fieldApi.api.form,\n      parentFieldName: fieldApi.api.name,\n    } as never)\n\n    return () =>\n      context.slots.default!({\n        field: fieldApi.api,\n        state: fieldApi.state.value,\n      })\n  },\n  { name: 'Field', inheritAttrs: false },\n)\n","import {\n  FormApi,\n  type FormState,\n  type FormOptions,\n  type Validator,\n} from '@tanstack/form-core'\nimport { type NoInfer, useStore } from '@tanstack/vue-store'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { provideFormContext } from './formContext'\nimport {\n  type EmitsOptions,\n  type SlotsType,\n  type SetupContext,\n  type Ref,\n  defineComponent,\n  onMounted,\n} from 'vue'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData, TFormValidator> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData, TFormValidator>\n    useField: UseField<TFormData, TFormValidator>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => Readonly<Ref<TSelected>>\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(\n      props: {\n        selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      },\n      context: SetupContext<\n        EmitsOptions,\n        SlotsType<{ default: NoInfer<FormState<TFormData>> }>\n      >,\n    ) => any\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 = (() => {\n    const api = new FormApi<TFormData, TFormValidator>(opts)\n\n    api.Provider = defineComponent(\n      (_, context) => {\n        onMounted(api.mount)\n        provideFormContext({ formApi: formApi as never })\n        return () => context.slots.default!()\n      },\n      { name: 'Provider' },\n    )\n    api.provideFormContext = () => {\n      onMounted(api.mount)\n      provideFormContext({ formApi: formApi as never })\n    }\n    api.Field = Field as never\n    api.useField = useField as never\n    api.useStore = (selector) => {\n      return useStore(api.store as never, selector as never) as never\n    }\n    api.Subscribe = defineComponent(\n      (props, context) => {\n        const allProps = { ...props, ...context.attrs }\n        const selector = allProps.selector ?? ((state) => state)\n        const data = useStore(api.store as never, selector as never)\n        return () => context.slots.default!(data.value)\n      },\n      {\n        name: 'Subscribe',\n        inheritAttrs: false,\n      },\n    )\n\n    return api\n  })()\n\n  // formApi.useStore((state) => state.isSubmitting)\n  formApi.update(opts)\n\n  return formApi as never\n}\n","import type { FormApi, FormOptions, Validator } from '@tanstack/form-core'\n\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { useForm } from './useForm'\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: UseField<TFormData, TFormValidator>\n  Field: FieldComponent<TFormData, TFormValidator>\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 as any,\n    Field: Field as any,\n  }\n}\n"],"names":[],"mappings":";;;;AAWa,MAAA,cAAc,OAAO,aAAa;AAExC,SAAS,mBAGd,KAA6C;AAC7C,UAAQ,aAAa,GAAG;AAC1B;AAEO,SAAS,iBAAiB;AACzB,QAAA,UAAU,OAAO,WAAW;AAElC,MAAI,CAAC,SAAS;AACN,UAAA,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEO,SAAA;AACT;ACuBO,SAAS,SAWd,MA6BA;AAEA,QAAM,EAAE,SAAS,gBAAgB,IAAI,eAAe;AAEpD,QAAM,YAAY,MAAM;AAChB,UAAA,MAAM,IAAI,SAAS;AAAA,MACvB,GAAG;AAAA,MACH,MAAM;AAAA,MACN,MAAM,KAAK;AAAA,IAAA,CACH;AAEV,QAAI,QAAQ;AAEL,WAAA;AAAA,EAAA;AAGT,QAAM,aAAa,SAAS,SAAS,OAAO,CAAC,UAAU,KAAK;AAExD,MAAA;AACJ,YAAU,MAAM;AACd,cAAU,SAAS;EAAM,CAC1B;AAED,cAAY,MAAM;AACR;EAAA,CACT;AAED;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAEJ,eAAS,OAAO,EAAE,GAAG,MAAM,MAAM,SAAkB;AAAA,IACrD;AAAA,EAAA;AAGF,SAAO,EAAE,KAAK,UAAU,OAAO,WAAW;AAC5C;AAwEO,MAAM,QAAQ;AAAA,EACnB,CAUE,cAMA,YACG;AACG,UAAA,WAAW,SAAS,EAAE,GAAG,cAAc,GAAG,QAAQ,OAAc;AAEnD,uBAAA;AAAA,MACjB,SAAS,SAAS,IAAI;AAAA,MACtB,iBAAiB,SAAS,IAAI;AAAA,IAAA,CACtB;AAEH,WAAA,MACL,QAAQ,MAAM,QAAS;AAAA,MACrB,OAAO,SAAS;AAAA,MAChB,OAAO,SAAS,MAAM;AAAA,IAAA,CACvB;AAAA,EACL;AAAA,EACA,EAAE,MAAM,SAAS,cAAc,MAAM;AACvC;AChMO,SAAS,QAId,MACoC;AACpC,QAAM,WAAW,MAAM;AACf,UAAA,MAAM,IAAI,QAAmC,IAAI;AAEvD,QAAI,WAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,kBAAU,IAAI,KAAK;AACA,2BAAA,EAAE,SAA2B;AACzC,eAAA,MAAM,QAAQ,MAAM;MAC7B;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IAAA;AAErB,QAAI,qBAAqB,MAAM;AAC7B,gBAAU,IAAI,KAAK;AACA,yBAAA,EAAE,SAA2B;AAAA,IAAA;AAElD,QAAI,QAAQ;AACZ,QAAI,WAAW;AACX,QAAA,WAAW,CAAC,aAAa;AACpB,aAAA,SAAS,IAAI,OAAgB,QAAiB;AAAA,IAAA;AAEvD,QAAI,YAAY;AAAA,MACd,CAAC,OAAO,YAAY;AAClB,cAAM,WAAW,EAAE,GAAG,OAAO,GAAG,QAAQ,MAAM;AAC9C,cAAM,WAAW,SAAS,aAAa,CAAC,UAAU;AAClD,cAAM,OAAO,SAAS,IAAI,OAAgB,QAAiB;AAC3D,eAAO,MAAM,QAAQ,MAAM,QAAS,KAAK,KAAK;AAAA,MAChD;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc;AAAA,MAChB;AAAA,IAAA;AAGK,WAAA;AAAA,EAAA;AAIT,UAAQ,OAAO,IAAI;AAEZ,SAAA;AACT;ACtEO,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,EAAA;AAEJ;"}

package/dist/mjs/tests/useField.test.d.ts

@@ -0,0 +1 @@
+/// <reference lib="dom" />

package/dist/mjs/tests/useForm.test.d.ts

@@ -0,0 +1 @@
+/// <reference lib="dom" />

package/dist/mjs/tests/utils.d.ts

@@ -0,0 +1 @@
+export declare function sleep(timeout: number): Promise<void>;

package/dist/mjs/types.d.ts

@@ -0,0 +1,4 @@
+import type { FieldOptions, DeepKeys, DeepValue, Validator } from '@tanstack/form-core';
+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>> = FieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
+    mode?: 'value' | 'array';
+};

package/dist/mjs/useField.d.ts

@@ -0,0 +1,38 @@
+import { FieldApi, type Validator } from '@tanstack/form-core';
+import type { DeepKeys, DeepValue, Narrow } from '@tanstack/form-core';
+import type { SlotsType, SetupContext, Ref } from 'vue';
+import type { UseFieldOptions } from './types';
+declare module '@tanstack/form-core' {
+    interface FieldApi<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData = DeepValue<TParentData, TName>> {
+        Field: FieldComponent<TParentData, TFormValidator>;
+    }
+}
+export type UseField<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined>(opts?: {
+    name: Narrow<TName>;
+} & UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, DeepValue<TParentData, TName>>) => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, DeepValue<TParentData, TName>>;
+export declare function useField<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>>(opts: UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>): {
+    api: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
+    state: Readonly<Ref<FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>['state']>>;
+};
+export type FieldValue<TParentData, TName> = TParentData extends any[] ? unknown extends TName ? TParentData[number] : DeepValue<TParentData[number], TName> : DeepValue<TParentData, TName>;
+type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = (TParentData extends any[] ? {
+    name?: TName;
+    index: number;
+} : {
+    name: TName;
+    index?: never;
+}) & Omit<UseFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>, 'name' | 'index'>;
+export type FieldComponent<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(fieldOptions: FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator>, context: SetupContext<{}, SlotsType<{
+    default: {
+        field: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
+        state: FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>['state'];
+    };
+}>>) => any;
+export declare const Field: <TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined>(props: import("@tanstack/form-core").FieldOptions<TParentData, TName, TFieldValidator, TFormValidator, DeepValue<TParentData, TName>> & {
+    mode?: "value" | "array" | undefined;
+} & ({
+    [x: `on${Capitalize<string>}`]: ((...args: never) => any) | undefined;
+} | {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+})) => any;
+export {};

package/dist/mjs/useForm.d.ts

@@ -0,0 +1,19 @@
+import { FormApi, type FormState, type FormOptions, type Validator } from '@tanstack/form-core';
+import { type NoInfer } from '@tanstack/vue-store';
+import { type UseField, type FieldComponent } from './useField';
+import { type EmitsOptions, type SlotsType, type SetupContext, type Ref } from 'vue';
+declare module '@tanstack/form-core' {
+    interface FormApi<TFormData, TFormValidator> {
+        Provider: (props: Record<string, any> & {}) => any;
+        provideFormContext: () => void;
+        Field: FieldComponent<TFormData, TFormValidator>;
+        useField: UseField<TFormData, TFormValidator>;
+        useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => Readonly<Ref<TSelected>>;
+        Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
+            selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
+        }, context: SetupContext<EmitsOptions, SlotsType<{
+            default: NoInfer<FormState<TFormData>>;
+        }>>) => any;
+    }
+}
+export declare function useForm<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(opts?: FormOptions<TFormData, TFormValidator>): FormApi<TFormData, TFormValidator>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-form",
-  "version": "0.10.3",
+  "version": "0.12.0",
   "description": "Powerful, type-safe forms for Vue.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -11,40 +11,31 @@
     "url": "https://github.com/sponsors/tannerlinsley"
   },
   "type": "module",
-  "types": "build/legacy/index.d.ts",
-  "main": "build/legacy/index.cjs",
-  "module": "build/legacy/index.js",
+  "types": "dist/mjs/index.d.mts",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/mjs/index.mjs",
   "exports": {
     ".": {
       "import": {
-        "types": "./build/modern/index.d.ts",
-        "default": "./build/modern/index.js"
+        "types": "./dist/mjs/index.d.mts",
+        "default": "./dist/mjs/index.mjs"
       },
       "require": {
-        "types": "./build/modern/index.d.cts",
-        "default": "./build/modern/index.cjs"
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
       }
     },
     "./package.json": "./package.json"
   },
   "sideEffects": false,
-  "nx": {
-    "targets": {
-      "test:build": {
-        "dependsOn": [
-          "build"
-        ]
-      }
-    }
-  },
   "files": [
-    "build",
+    "dist",
     "src"
   ],
   "dependencies": {
     "@tanstack/store": "0.1.3",
     "@tanstack/vue-store": "0.1.3",
-    "@tanstack/form-core": "0.10.3"
+    "@tanstack/form-core": "0.12.0"
   },
   "devDependencies": {
     "vue": "^3.3.4"
@@ -53,13 +44,17 @@
     "vue": "^3.3.0"
   },
   "scripts": {
-    "clean": "rimraf ./build && rimraf ./coverage",
+    "clean": "rimraf ./dist && rimraf ./coverage",
     "test:eslint": "eslint --ext .ts,.tsx ./src",
-    "test:types": "tsc",
+    "test:types:versions49": "../../node_modules/typescript49/bin/tsc --noEmit",
+    "test:types:versions50": "../../node_modules/typescript50/bin/tsc --noEmit",
+    "test:types:versions51": "../../node_modules/typescript51/bin/tsc --noEmit",
+    "test:types:versions52": "tsc --noEmit",
+    "test:types": "pnpm run \"/^test:types:versions.*/\"",
     "fixme:test:lib": "pnpm run test:2 && pnpm run test:2.7 && pnpm run test:3",
     "test:lib": "vitest",
     "test:lib:dev": "pnpm run test:lib --watch",
     "test:build": "publint --strict",
-    "build": "tsup"
+    "build": "vite build"
   }
 }

package/src/createFormFactory.ts

@@ -1,23 +1,29 @@
-import type { FormApi, FormOptions } from '@tanstack/form-core'
+import type { FormApi, FormOptions, Validator } from '@tanstack/form-core'
 
 import { type UseField, type FieldComponent, Field, useField } from './useField'
 import { useForm } from './useForm'
 
-export type FormFactory<TFormData, FormValidator> = {
+export type FormFactory<
+  TFormData,
+  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
+> = {
   useForm: (
-    opts?: FormOptions<TFormData, FormValidator>,
-  ) => FormApi<TFormData, FormValidator>
-  useField: UseField<TFormData, FormValidator>
-  Field: FieldComponent<TFormData, FormValidator>
+    opts?: FormOptions<TFormData, TFormValidator>,
+  ) => FormApi<TFormData, TFormValidator>
+  useField: UseField<TFormData, TFormValidator>
+  Field: FieldComponent<TFormData, TFormValidator>
 }
 
-export function createFormFactory<TFormData, FormValidator>(
-  defaultOpts?: FormOptions<TFormData, FormValidator>,
-): FormFactory<TFormData, FormValidator> {
+export function createFormFactory<
+  TFormData,
+  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
+>(
+  defaultOpts?: FormOptions<TFormData, TFormValidator>,
+): FormFactory<TFormData, TFormValidator> {
   return {
     useForm: (opts) => {
       const formOptions = Object.assign({}, defaultOpts, opts)
-      return useForm<TFormData, FormValidator>(formOptions)
+      return useForm<TFormData, TFormValidator>(formOptions)
     },
     useField: useField as any,
     Field: Field as any,

package/src/formContext.ts

@@ -1,14 +1,20 @@
-import type { FormApi } from '@tanstack/form-core'
+import type { FormApi, Validator } from '@tanstack/form-core'
 import { inject, provide } from 'vue'
 
-export type FormContext = {
-  formApi: FormApi<any, unknown>
+export type FormContext<
+  TFormData = any,
+  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
+> = {
+  formApi: FormApi<TFormData, TFormValidator>
   parentFieldName?: string
 } | null
 
 export const formContext = Symbol('FormContext')
 
-export function provideFormContext(val: FormContext) {
+export function provideFormContext<
+  TFormData = any,
+  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
+>(val: FormContext<TFormData, TFormValidator>) {
   provide(formContext, val)
 }
 

package/src/tests/useField.test.tsx

@@ -15,7 +15,7 @@ describe('useField', () => {
       lastName: string
     }
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm()
@@ -54,7 +54,7 @@ describe('useField', () => {
     }
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm()
@@ -64,7 +64,9 @@ describe('useField', () => {
       return () => (
         <form.Field
           name="firstName"
-          onChange={(value) => (value === 'other' ? error : undefined)}
+          validators={{
+            onChange: ({ value }) => (value === 'other' ? error : undefined),
+          }}
         >
           {({
             field,
@@ -101,7 +103,7 @@ describe('useField', () => {
     }
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm()
@@ -111,7 +113,9 @@ describe('useField', () => {
       return () => (
         <form.Field
           name="firstName"
-          onChange={(value) => (value === 'other' ? error : undefined)}
+          validators={{
+            onChange: ({ value }) => (value === 'other' ? error : undefined),
+          }}
         >
           {({
             field,
@@ -149,7 +153,7 @@ describe('useField', () => {
     }
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm()
@@ -160,9 +164,11 @@ describe('useField', () => {
         <form.Field
           name="firstName"
           defaultMeta={{ isTouched: true }}
-          onChangeAsync={async () => {
-            await sleep(10)
-            return error
+          validators={{
+            onChangeAsync: async () => {
+              await sleep(10)
+              return error
+            },
           }}
         >
           {({
@@ -203,7 +209,7 @@ describe('useField', () => {
 
     const mockFn = vi.fn()
     const error = 'Please enter a different value'
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm()
@@ -214,11 +220,13 @@ describe('useField', () => {
         <form.Field
           name="firstName"
           defaultMeta={{ isTouched: true }}
-          onChangeAsyncDebounceMs={100}
-          onChangeAsync={async () => {
-            mockFn()
-            await sleep(10)
-            return error
+          validators={{
+            onChangeAsyncDebounceMs: 100,
+            onChangeAsync: async () => {
+              mockFn()
+              await sleep(10)
+              return error
+            },
           }}
         >
           {({

package/src/tests/useForm.test.tsx

@@ -22,7 +22,7 @@ type Person = {
 
 describe('useForm', () => {
   it('preserved field state', async () => {
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm()
@@ -57,7 +57,7 @@ describe('useForm', () => {
   })
 
   it('should allow default values to be set', async () => {
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm({
@@ -92,8 +92,8 @@ describe('useForm', () => {
         defaultValues: {
           firstName: 'FirstName',
         },
-        onSubmit: (data) => {
-          submittedData.value = data
+        onSubmit: ({ value }) => {
+          submittedData.value = value
         },
       })
       form.provideFormContext()
@@ -145,9 +145,11 @@ describe('useForm', () => {
         defaultValues: {
           firstName: 'FirstName',
         },
-        onMount: () => {
-          formMounted.value = true
-          return undefined
+        validators: {
+          onMount: () => {
+            formMounted.value = true
+            return undefined
+          },
         },
       })
 
@@ -171,12 +173,14 @@ describe('useForm', () => {
   it('should validate async on change for the form', async () => {
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm({
-        onChange() {
-          return error
+        validators: {
+          onChange() {
+            return error
+          },
         },
       })
 
@@ -218,11 +222,14 @@ describe('useForm', () => {
   it('should not validate on change if isTouched is false', async () => {
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm({
-        onChange: (value) => (value.firstName === 'other' ? error : undefined),
+        validators: {
+          onChange: ({ value }) =>
+            value.firstName === 'other' ? error : undefined,
+        },
       })
 
       const errors = form.useStore((s) => s.errors)
@@ -264,11 +271,14 @@ describe('useForm', () => {
   it('should validate on change if isTouched is true', async () => {
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm({
-        onChange: (value) => (value.firstName === 'other' ? error : undefined),
+        validators: {
+          onChange: ({ value }) =>
+            value.firstName === 'other' ? error : undefined,
+        },
       })
 
       const errors = form.useStore((s) => s.errorMap)
@@ -317,13 +327,15 @@ describe('useForm', () => {
         defaultValues: {
           firstName: '',
         },
-        onChange: (vals) => {
-          if (vals.firstName === 'other') return onChangeError
-          return undefined
-        },
-        onBlur: (vals) => {
-          if (vals.firstName === 'other') return onBlurError
-          return undefined
+        validators: {
+          onChange: ({ value }) => {
+            if (value.firstName === 'other') return onChangeError
+            return undefined
+          },
+          onBlur: ({ value }) => {
+            if (value.firstName === 'other') return onBlurError
+            return undefined
+          },
         },
       })
 
@@ -370,13 +382,15 @@ describe('useForm', () => {
   it('should validate async on change', async () => {
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm({
-        onChangeAsync: async () => {
-          await sleep(10)
-          return error
+        validators: {
+          onChangeAsync: async () => {
+            await sleep(10)
+            return error
+          },
         },
       })
 
@@ -422,17 +436,19 @@ describe('useForm', () => {
     const onChangeError = 'Please enter a different value (onChangeError)'
     const onBlurError = 'Please enter a different value (onBlurError)'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm({
-        onChangeAsync: async () => {
-          await sleep(10)
-          return onChangeError
-        },
-        onBlurAsync: async () => {
-          await sleep(10)
-          return onBlurError
+        validators: {
+          onChangeAsync: async () => {
+            await sleep(10)
+            return onChangeError
+          },
+          onBlurAsync: async () => {
+            await sleep(10)
+            return onBlurError
+          },
         },
       })
       const errors = form.useStore((s) => s.errorMap)
@@ -482,15 +498,17 @@ describe('useForm', () => {
   it('should validate async on change with debounce', async () => {
     const mockFn = vi.fn()
     const error = 'Please enter a different value'
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     const Comp = defineComponent(() => {
       const form = formFactory.useForm({
-        onChangeAsyncDebounceMs: 100,
-        onChangeAsync: async () => {
-          mockFn()
-          await sleep(10)
-          return error
+        validators: {
+          onChangeAsyncDebounceMs: 100,
+          onChangeAsync: async () => {
+            mockFn()
+            await sleep(10)
+            return error
+          },
         },
       })
       const errors = form.useStore((s) => s.errors)

package/src/types.ts

@@ -1,11 +1,20 @@
-import type { FieldOptions, DeepKeys, DeepValue } from '@tanstack/form-core'
+import type {
+  FieldOptions,
+  DeepKeys,
+  DeepValue,
+  Validator,
+} from '@tanstack/form-core'
 
 export type UseFieldOptions<
   TParentData,
   TName extends DeepKeys<TParentData>,
-  ValidatorType,
-  FormValidator,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
-> = FieldOptions<TParentData, TName, ValidatorType, FormValidator, TData> & {
+> = FieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
   mode?: 'value' | 'array'
 }