@tanstack/vue-form 0.10.1 → 0.10.3

package/build/modern/useForm.d.cts

@@ -1,7 +1,7 @@
 import { FormState, FormOptions, FormApi } from '@tanstack/form-core';
 import { NoInfer } from '@tanstack/vue-store';
 import { FieldComponent, UseField } from './useField.cjs';
-import { SetupContext, EmitsOptions, SlotsType } from 'vue-demi';
+import { Ref, SetupContext, EmitsOptions, SlotsType } from 'vue';
 import './types.cjs';
 
 declare module '@tanstack/form-core' {
@@ -10,7 +10,7 @@ declare module '@tanstack/form-core' {
         provideFormContext: () => void;
         Field: FieldComponent<TFormData, ValidatorType>;
         useField: UseField<TFormData, ValidatorType>;
-        useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
+        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<{

package/build/modern/useForm.d.ts

@@ -1,7 +1,7 @@
 import { FormState, FormOptions, FormApi } from '@tanstack/form-core';
 import { NoInfer } from '@tanstack/vue-store';
 import { FieldComponent, UseField } from './useField.js';
-import { SetupContext, EmitsOptions, SlotsType } from 'vue-demi';
+import { Ref, SetupContext, EmitsOptions, SlotsType } from 'vue';
 import './types.js';
 
 declare module '@tanstack/form-core' {
@@ -10,7 +10,7 @@ declare module '@tanstack/form-core' {
         provideFormContext: () => void;
         Field: FieldComponent<TFormData, ValidatorType>;
         useField: UseField<TFormData, ValidatorType>;
-        useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
+        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<{

package/build/modern/useForm.js

@@ -6,7 +6,7 @@ import { provideFormContext } from "./formContext.js";
 import {
   defineComponent,
   onMounted
-} from "vue-demi";
+} from "vue";
 function useForm(opts) {
   const formApi = (() => {
     const api = new FormApi(opts);

package/build/modern/useForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, type FormState, type FormOptions } 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  defineComponent,\n  onMounted,\n} from 'vue-demi'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData, ValidatorType> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData, ValidatorType>\n    useField: UseField<TFormData, ValidatorType>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => 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<TData, FormValidator>(\n  opts?: FormOptions<TData, FormValidator>,\n): FormApi<TData, FormValidator> {\n  const formApi = (() => {\n    const api = new FormApi<TData, FormValidator>(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"],"mappings":";AAAA,SAAS,eAAiD;AAC1D,SAAuB,gBAAgB;AACvC,SAA6C,OAAO,gBAAgB;AACpE,SAAS,0BAA0B;AACnC;AAAA,EAIE;AAAA,EACA;AAAA,OACK;AAwBA,SAAS,QACd,MAC+B;AAC/B,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,QAA8B,IAAI;AAElD,QAAI,WAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,kBAAU,IAAI,KAAK;AACnB,2BAAmB,EAAE,QAA0B,CAAC;AAChD,eAAO,MAAM,QAAQ,MAAM,QAAS;AAAA,MACtC;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IACrB;AACA,QAAI,qBAAqB,MAAM;AAC7B,gBAAU,IAAI,KAAK;AACnB,yBAAmB,EAAE,QAA0B,CAAC;AAAA,IAClD;AACA,QAAI,QAAQ;AACZ,QAAI,WAAW;AACf,QAAI,WAAW,CAAC,aAAa;AAC3B,aAAO,SAAS,IAAI,OAAgB,QAAiB;AAAA,IACvD;AACA,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,IACF;AAEA,WAAO;AAAA,EACT,GAAG;AAGH,UAAQ,OAAO,IAAI;AAEnB,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/useForm.tsx"],"sourcesContent":["import { FormApi, type FormState, type FormOptions } 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, ValidatorType> {\n    Provider: (props: Record<string, any> & {}) => any\n    provideFormContext: () => void\n    Field: FieldComponent<TFormData, ValidatorType>\n    useField: UseField<TFormData, ValidatorType>\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<TData, FormValidator>(\n  opts?: FormOptions<TData, FormValidator>,\n): FormApi<TData, FormValidator> {\n  const formApi = (() => {\n    const api = new FormApi<TData, FormValidator>(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"],"mappings":";AAAA,SAAS,eAAiD;AAC1D,SAAuB,gBAAgB;AACvC,SAA6C,OAAO,gBAAgB;AACpE,SAAS,0BAA0B;AACnC;AAAA,EAKE;AAAA,EACA;AAAA,OACK;AAwBA,SAAS,QACd,MAC+B;AAC/B,QAAM,WAAW,MAAM;AACrB,UAAM,MAAM,IAAI,QAA8B,IAAI;AAElD,QAAI,WAAW;AAAA,MACb,CAAC,GAAG,YAAY;AACd,kBAAU,IAAI,KAAK;AACnB,2BAAmB,EAAE,QAA0B,CAAC;AAChD,eAAO,MAAM,QAAQ,MAAM,QAAS;AAAA,MACtC;AAAA,MACA,EAAE,MAAM,WAAW;AAAA,IACrB;AACA,QAAI,qBAAqB,MAAM;AAC7B,gBAAU,IAAI,KAAK;AACnB,yBAAmB,EAAE,QAA0B,CAAC;AAAA,IAClD;AACA,QAAI,QAAQ;AACZ,QAAI,WAAW;AACf,QAAI,WAAW,CAAC,aAAa;AAC3B,aAAO,SAAS,IAAI,OAAgB,QAAiB;AAAA,IACvD;AACA,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,IACF;AAEA,WAAO;AAAA,EACT,GAAG;AAGH,UAAQ,OAAO,IAAI;AAEnB,SAAO;AACT;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-form",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "description": "Powerful, type-safe forms for Vue.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -44,33 +44,20 @@
   "dependencies": {
     "@tanstack/store": "0.1.3",
     "@tanstack/vue-store": "0.1.3",
-    "vue-demi": "^0.14.6",
-    "@tanstack/form-core": "0.10.1"
+    "@tanstack/form-core": "0.10.3"
   },
   "devDependencies": {
-    "@vue/composition-api": "1.7.2",
-    "vue": "^3.3.4",
-    "vue2": "npm:vue@2.6",
-    "vue2.7": "npm:vue@2.7"
+    "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@vue/composition-api": "^1.1.2",
-    "vue": "^2.5.0 || ^3.0.0"
-  },
-  "peerDependenciesMeta": {
-    "@vue/composition-api": {
-      "optional": true
-    }
+    "vue": "^3.3.0"
   },
   "scripts": {
     "clean": "rimraf ./build && rimraf ./coverage",
     "test:eslint": "eslint --ext .ts,.tsx ./src",
     "test:types": "tsc",
     "fixme:test:lib": "pnpm run test:2 && pnpm run test:2.7 && pnpm run test:3",
-    "test:lib": "pnpm run test:3",
-    "test:2": "vue-demi-switch 2 vue2 && vitest",
-    "test:2.7": "vue-demi-switch 2.7 vue2.7 && vitest",
-    "test:3": "vue-demi-switch 3 && vitest",
+    "test:lib": "vitest",
     "test:lib:dev": "pnpm run test:lib --watch",
     "test:build": "publint --strict",
     "build": "tsup"

package/src/formContext.ts

@@ -1,5 +1,5 @@
 import type { FormApi } from '@tanstack/form-core'
-import { inject, provide } from 'vue-demi'
+import { inject, provide } from 'vue'
 
 export type FormContext = {
   formApi: FormApi<any, unknown>

package/src/tests/useField.test.tsx

@@ -1,15 +1,9 @@
 /// <reference lib="dom" />
-import { h, defineComponent } from 'vue-demi'
+import { h, defineComponent } from 'vue'
 import { render, waitFor } from '@testing-library/vue'
 import '@testing-library/jest-dom'
-import {
-  createFormFactory,
-  type FieldApi,
-  provideFormContext,
-  useForm,
-} from '../index'
+import { createFormFactory, type FieldApi, provideFormContext } from '../index'
 import userEvent from '@testing-library/user-event'
-import * as React from 'react'
 import { sleep } from './utils'
 
 const user = userEvent.setup()

package/src/tests/useForm.test.tsx

@@ -1,25 +1,27 @@
 /// <reference lib="dom" />
-import { h, defineComponent, ref } from 'vue-demi'
-import { render, waitFor } from '@testing-library/vue'
 import '@testing-library/jest-dom'
+import userEvent from '@testing-library/user-event'
+import { render, waitFor } from '@testing-library/vue'
+import { h, defineComponent, ref } from 'vue'
 import {
+  ValidationError,
   createFormFactory,
-  type FieldApi,
   provideFormContext,
   useForm,
-} from '../index'
-import userEvent from '@testing-library/user-event'
-import * as React from 'react'
+} from '..'
+import { sleep } from './utils'
+
+import type { FieldApi, ValidationErrorMap } from '..'
 
 const user = userEvent.setup()
 
+type Person = {
+  firstName: string
+  lastName: string
+}
+
 describe('useForm', () => {
   it('preserved field state', async () => {
-    type Person = {
-      firstName: string
-      lastName: string
-    }
-
     const formFactory = createFormFactory<Person, unknown>()
 
     const Comp = defineComponent(() => {
@@ -47,7 +49,7 @@ describe('useForm', () => {
       )
     })
 
-    const { getByTestId, queryByText } = render(Comp)
+    const { getByTestId, queryByText } = render(<Comp />)
     const input = getByTestId('fieldinput')
     expect(queryByText('FirstName')).not.toBeInTheDocument()
     await user.type(input, 'FirstName')
@@ -55,11 +57,6 @@ describe('useForm', () => {
   })
 
   it('should allow default values to be set', async () => {
-    type Person = {
-      firstName: string
-      lastName: string
-    }
-
     const formFactory = createFormFactory<Person, unknown>()
 
     const Comp = defineComponent(() => {
@@ -82,7 +79,7 @@ describe('useForm', () => {
       )
     })
 
-    const { findByText, queryByText } = render(Comp)
+    const { findByText, queryByText } = render(<Comp />)
     expect(await findByText('FirstName')).toBeInTheDocument()
     expect(queryByText('LastName')).not.toBeInTheDocument()
   })
@@ -102,18 +99,18 @@ describe('useForm', () => {
       form.provideFormContext()
 
       return () => (
-        <form.Provider>
+        <div>
           <form.Field name="firstName">
             {({
               field,
             }: {
-              field: FieldApi<{ firstName: string }, 'firstName', never, never>
+              field: FieldApi<Person, 'firstName', never, never>
             }) => {
               return (
                 <input
                   value={field.state.value}
                   onBlur={field.handleBlur}
-                  onChange={(e) =>
+                  onInput={(e) =>
                     field.handleChange((e.target as HTMLInputElement).value)
                   }
                   placeholder={'First name'}
@@ -125,11 +122,11 @@ describe('useForm', () => {
           {submittedData.value && (
             <p>Submitted data: {submittedData.value.firstName}</p>
           )}
-        </form.Provider>
+        </div>
       )
     })
 
-    const { findByPlaceholderText, getByText } = render(Comp)
+    const { findByPlaceholderText, getByText } = render(<Comp />)
     const input = await findByPlaceholderText('First name')
     await user.clear(input)
     await user.type(input, 'OtherName')
@@ -153,20 +150,385 @@ describe('useForm', () => {
           return undefined
         },
       })
+
       form.provideFormContext()
 
       return () =>
         mountForm.value ? (
-          <form.Provider>
+          <div>
             <h1>{formMounted.value ? 'Form mounted' : 'Not mounted'}</h1>
-          </form.Provider>
+          </div>
         ) : (
           <button onClick={() => (mountForm.value = true)}>Mount form</button>
         )
     })
 
-    const { getByText, findByText } = render(Comp)
+    const { getByText, findByText } = render(<Comp />)
     await user.click(getByText('Mount form'))
     expect(await findByText('Form mounted')).toBeInTheDocument()
   })
+
+  it('should validate async on change for the form', async () => {
+    const error = 'Please enter a different value'
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    const Comp = defineComponent(() => {
+      const form = formFactory.useForm({
+        onChange() {
+          return error
+        },
+      })
+
+      form.provideFormContext()
+
+      return () => (
+        <div>
+          <form.Field name="firstName">
+            {({
+              field,
+            }: {
+              field: FieldApi<Person, 'firstName', never, never>
+            }) => (
+              <input
+                data-testid="fieldinput"
+                name={field.name}
+                value={field.state.value}
+                onBlur={field.handleBlur}
+                onInput={(e) =>
+                  field.handleChange((e.target as HTMLInputElement).value)
+                }
+              />
+            )}
+          </form.Field>
+          <form.Subscribe selector={(state) => state.errorMap}>
+            {(errorMap: ValidationErrorMap) => <p>{errorMap.onChange}</p>}
+          </form.Subscribe>
+        </div>
+      )
+    })
+
+    const { getByTestId, getByText, queryByText } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    expect(queryByText(error)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    await waitFor(() => getByText(error))
+    expect(getByText(error)).toBeInTheDocument()
+  })
+  it('should not validate on change if isTouched is false', async () => {
+    const error = 'Please enter a different value'
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    const Comp = defineComponent(() => {
+      const form = formFactory.useForm({
+        onChange: (value) => (value.firstName === 'other' ? error : undefined),
+      })
+
+      const errors = form.useStore((s) => s.errors)
+
+      form.provideFormContext()
+
+      return () => (
+        <div>
+          <form.Field name="firstName">
+            {({
+              field,
+            }: {
+              field: FieldApi<Person, 'firstName', never, never>
+            }) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field.name}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onInput={(e) =>
+                    field.setValue((e.target as HTMLInputElement).value)
+                  }
+                />
+              </div>
+            )}
+          </form.Field>
+          <p>{errors}</p>
+        </div>
+      )
+    })
+
+    const { getByTestId, queryByText } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    await user.type(input, 'other')
+    expect(queryByText(error)).not.toBeInTheDocument()
+  })
+
+  it('should validate on change if isTouched is true', async () => {
+    const error = 'Please enter a different value'
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    const Comp = defineComponent(() => {
+      const form = formFactory.useForm({
+        onChange: (value) => (value.firstName === 'other' ? error : undefined),
+      })
+
+      const errors = form.useStore((s) => s.errorMap)
+
+      form.provideFormContext()
+
+      return () => (
+        <div>
+          <form.Field name="firstName" defaultMeta={{ isTouched: true }}>
+            {({
+              field,
+            }: {
+              field: FieldApi<Person, 'firstName', never, never>
+            }) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field.name}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onInput={(e) =>
+                    field.handleChange((e.target as HTMLInputElement).value)
+                  }
+                />
+                <p>{errors.value.onChange}</p>
+              </div>
+            )}
+          </form.Field>
+        </div>
+      )
+    })
+
+    const { getByTestId, getByText, queryByText } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    expect(queryByText(error)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    expect(getByText(error)).toBeInTheDocument()
+  })
+
+  it('should validate on change and on blur', async () => {
+    const onChangeError = 'Please enter a different value (onChangeError)'
+    const onBlurError = 'Please enter a different value (onBlurError)'
+
+    const Comp = defineComponent(() => {
+      const form = useForm({
+        defaultValues: {
+          firstName: '',
+        },
+        onChange: (vals) => {
+          if (vals.firstName === 'other') return onChangeError
+          return undefined
+        },
+        onBlur: (vals) => {
+          if (vals.firstName === 'other') return onBlurError
+          return undefined
+        },
+      })
+
+      const errors = form.useStore((s) => s.errorMap)
+
+      form.provideFormContext()
+
+      return () => (
+        <div>
+          <form.Field name="firstName" defaultMeta={{ isTouched: true }}>
+            {({
+              field,
+            }: {
+              field: FieldApi<Person, 'firstName', never, never>
+            }) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field.name}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onInput={(e) =>
+                    field.handleChange((e.target as HTMLInputElement).value)
+                  }
+                />
+                <p>{errors.value.onChange}</p>
+                <p>{errors.value.onBlur}</p>
+              </div>
+            )}
+          </form.Field>
+        </div>
+      )
+    })
+    const { getByTestId, getByText, queryByText } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    expect(queryByText(onChangeError)).not.toBeInTheDocument()
+    expect(queryByText(onBlurError)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    expect(getByText(onChangeError)).toBeInTheDocument()
+    await user.click(document.body)
+    expect(queryByText(onBlurError)).toBeInTheDocument()
+  })
+
+  it('should validate async on change', async () => {
+    const error = 'Please enter a different value'
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    const Comp = defineComponent(() => {
+      const form = formFactory.useForm({
+        onChangeAsync: async () => {
+          await sleep(10)
+          return error
+        },
+      })
+
+      const errors = form.useStore((s) => s.errorMap)
+
+      form.provideFormContext()
+
+      return () => (
+        <div>
+          <form.Field name="firstName" defaultMeta={{ isTouched: true }}>
+            {({
+              field,
+            }: {
+              field: FieldApi<Person, 'firstName', never, never>
+            }) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field.name}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onInput={(e) =>
+                    field.handleChange((e.target as HTMLInputElement).value)
+                  }
+                />
+                <p>{errors.value.onChange}</p>
+              </div>
+            )}
+          </form.Field>
+        </div>
+      )
+    })
+
+    const { getByTestId, getByText, queryByText } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    expect(queryByText(error)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    await waitFor(() => getByText(error))
+    expect(getByText(error)).toBeInTheDocument()
+  })
+
+  it('should validate async on change and async on blur', async () => {
+    const onChangeError = 'Please enter a different value (onChangeError)'
+    const onBlurError = 'Please enter a different value (onBlurError)'
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    const Comp = defineComponent(() => {
+      const form = formFactory.useForm({
+        onChangeAsync: async () => {
+          await sleep(10)
+          return onChangeError
+        },
+        onBlurAsync: async () => {
+          await sleep(10)
+          return onBlurError
+        },
+      })
+      const errors = form.useStore((s) => s.errorMap)
+
+      form.provideFormContext()
+
+      return () => (
+        <div>
+          <form.Field name="firstName" defaultMeta={{ isTouched: true }}>
+            {({
+              field,
+            }: {
+              field: FieldApi<Person, 'firstName', never, never>
+            }) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field.name}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onInput={(e) =>
+                    field.handleChange((e.target as HTMLInputElement).value)
+                  }
+                />
+                <p>{errors.value.onChange}</p>
+                <p>{errors.value.onBlur}</p>
+              </div>
+            )}
+          </form.Field>
+        </div>
+      )
+    })
+
+    const { getByTestId, getByText, queryByText } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+
+    expect(queryByText(onChangeError)).not.toBeInTheDocument()
+    expect(queryByText(onBlurError)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    await waitFor(() => getByText(onChangeError))
+    expect(getByText(onChangeError)).toBeInTheDocument()
+    await user.click(document.body)
+    await waitFor(() => getByText(onBlurError))
+    expect(getByText(onBlurError)).toBeInTheDocument()
+  })
+
+  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 Comp = defineComponent(() => {
+      const form = formFactory.useForm({
+        onChangeAsyncDebounceMs: 100,
+        onChangeAsync: async () => {
+          mockFn()
+          await sleep(10)
+          return error
+        },
+      })
+      const errors = form.useStore((s) => s.errors)
+
+      form.provideFormContext()
+
+      return () => (
+        <div>
+          <form.Field name="firstName" defaultMeta={{ isTouched: true }}>
+            {({
+              field,
+            }: {
+              field: FieldApi<Person, 'firstName', never, never>
+            }) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field.name}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onInput={(e) =>
+                    field.handleChange((e.target as HTMLInputElement).value)
+                  }
+                />
+                <p>{errors.value.join(',')}</p>
+              </div>
+            )}
+          </form.Field>
+        </div>
+      )
+    })
+
+    const { getByTestId, getByText } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    await user.type(input, 'other')
+    // mockFn will have been called 5 times without onChangeAsyncDebounceMs
+    expect(mockFn).toHaveBeenCalledTimes(0)
+    await waitFor(() => getByText(error))
+    expect(getByText(error)).toBeInTheDocument()
+  })
 })

package/src/useField.tsx

@@ -1,8 +1,8 @@
 import { FieldApi } from '@tanstack/form-core'
 import type { DeepKeys, DeepValue, Narrow } from '@tanstack/form-core'
 import { useStore } from '@tanstack/vue-store'
-import { defineComponent, onMounted, onUnmounted, watch } from 'vue-demi'
-import type { SlotsType, SetupContext, Ref } from 'vue-demi'
+import { defineComponent, onMounted, onUnmounted, watch } from 'vue'
+import type { SlotsType, SetupContext, Ref } from 'vue'
 import { provideFormContext, useFormContext } from './formContext'
 import type { UseFieldOptions } from './types'
 

package/src/useForm.tsx

@@ -6,9 +6,10 @@ import {
   type EmitsOptions,
   type SlotsType,
   type SetupContext,
+  type Ref,
   defineComponent,
   onMounted,
-} from 'vue-demi'
+} from 'vue'
 
 declare module '@tanstack/form-core' {
   // eslint-disable-next-line no-shadow
@@ -19,7 +20,7 @@ declare module '@tanstack/form-core' {
     useField: UseField<TFormData, ValidatorType>
     useStore: <TSelected = NoInfer<FormState<TFormData>>>(
       selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,
-    ) => TSelected
+    ) => Readonly<Ref<TSelected>>
     Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(
       props: {
         selector?: (state: NoInfer<FormState<TFormData>>) => TSelected