@tanstack/vue-form 0.2.0

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@tanstack/vue-form",
+  "version": "0.2.0",
+  "description": "Powerful, type-safe forms for Vue.",
+  "author": "tannerlinsley",
+  "license": "MIT",
+  "repository": "tanstack/form",
+  "homepage": "https://tanstack.com/form",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "type": "module",
+  "types": "build/legacy/index.d.ts",
+  "main": "build/legacy/index.cjs",
+  "module": "build/legacy/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./build/modern/index.d.ts",
+        "default": "./build/modern/index.js"
+      },
+      "require": {
+        "types": "./build/modern/index.d.cts",
+        "default": "./build/modern/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "nx": {
+    "targets": {
+      "test:build": {
+        "dependsOn": [
+          "build"
+        ]
+      }
+    }
+  },
+  "files": [
+    "build",
+    "src"
+  ],
+  "dependencies": {
+    "@tanstack/store": "0.1.3",
+    "@tanstack/vue-store": "0.1.3",
+    "vue-demi": "^0.14.6",
+    "@tanstack/form-core": "0.2.0"
+  },
+  "devDependencies": {
+    "@vue/composition-api": "1.7.2",
+    "vue": "^3.3.4",
+    "vue2": "npm:vue@2.6",
+    "vue2.7": "npm:vue@2.7"
+  },
+  "peerDependencies": {
+    "@vue/composition-api": "^1.1.2",
+    "vue": "^2.5.0 || ^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
+  },
+  "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:dev": "pnpm run test:lib --watch",
+    "test:build": "publint --strict",
+    "build": "tsup"
+  }
+}

package/src/createFormFactory.ts

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

package/src/formContext.ts

@@ -0,0 +1,23 @@
+import type { FormApi } from '@tanstack/form-core'
+import { inject, provide } from 'vue-demi'
+
+export type FormContext = {
+  formApi: FormApi<any>
+  parentFieldName?: string
+} | null
+
+export const formContext = Symbol('FormContext')
+
+export function provideFormContext(val: FormContext) {
+  provide(formContext, val)
+}
+
+export function useFormContext() {
+  const formApi = inject(formContext) as FormContext
+
+  if (!formApi) {
+    throw new Error(`You are trying to use the form API outside of a form!`)
+  }
+
+  return formApi
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from '@tanstack/form-core'
+export * from './createFormFactory'
+export * from './formContext'
+export * from './useField'
+export * from './useForm'

package/src/tests/useField.test.tsx

@@ -0,0 +1,240 @@
+/// <reference lib="dom" />
+import { h, defineComponent } from 'vue-demi'
+import { render, waitFor } from '@testing-library/vue'
+import '@testing-library/jest-dom'
+import {
+  createFormFactory,
+  type FieldApi,
+  provideFormContext,
+  useForm,
+} from '../index'
+import userEvent from '@testing-library/user-event'
+import * as React from 'react'
+import { sleep } from './utils'
+
+const user = userEvent.setup()
+
+describe('useField', () => {
+  it('should allow to set default value', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    const formFactory = createFormFactory<Person>()
+
+    const Comp = defineComponent(() => {
+      const form = formFactory.useForm()
+
+      provideFormContext({ formApi: form })
+
+      return () => (
+        <form.Field name="firstName" defaultValue="FirstName">
+          {(field: FieldApi<string, Person>) => (
+            <input
+              data-testid={'fieldinput'}
+              value={field.state.value}
+              onBlur={field.handleBlur}
+              onInput={(e) =>
+                field.handleChange((e.target as HTMLInputElement).value)
+              }
+            />
+          )}
+        </form.Field>
+      )
+    })
+
+    const { getByTestId } = render(Comp)
+    const input = getByTestId('fieldinput')
+    await waitFor(() => expect(input).toHaveValue('FirstName'))
+  })
+
+  it('should not validate on change if isTouched is false', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const error = 'Please enter a different value'
+
+    const formFactory = createFormFactory<Person>()
+
+    const Comp = defineComponent(() => {
+      const form = formFactory.useForm()
+
+      provideFormContext({ formApi: form })
+
+      return () => (
+        <form.Field
+          name="firstName"
+          onChange={(value) => (value === 'other' ? error : undefined)}
+        >
+          {(field: FieldApi<string, Person>) => (
+            <div>
+              <input
+                data-testid="fieldinput"
+                name={field.name}
+                value={field.state.value}
+                onBlur={field.handleBlur}
+                onInput={(e) =>
+                  field.setValue((e.target as HTMLInputElement).value)
+                }
+              />
+              <p>{field.getMeta().error}</p>
+            </div>
+          )}
+        </form.Field>
+      )
+    })
+
+    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 () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const error = 'Please enter a different value'
+
+    const formFactory = createFormFactory<Person>()
+
+    const Comp = defineComponent(() => {
+      const form = formFactory.useForm()
+
+      provideFormContext({ formApi: form })
+
+      return () => (
+        <form.Field
+          name="firstName"
+          onChange={(value) => (value === 'other' ? error : undefined)}
+        >
+          {(field: FieldApi<string, Person>) => (
+            <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>{field.getMeta().error}</p>
+            </div>
+          )}
+        </form.Field>
+      )
+    })
+
+    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 async on change', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const error = 'Please enter a different value'
+
+    const formFactory = createFormFactory<Person>()
+
+    const Comp = defineComponent(() => {
+      const form = formFactory.useForm()
+
+      provideFormContext({ formApi: form })
+
+      return () => (
+        <form.Field
+          name="firstName"
+          defaultMeta={{ isTouched: true }}
+          onChangeAsync={async () => {
+            await sleep(10)
+            return error
+          }}
+        >
+          {(field: FieldApi<string, Person>) => (
+            <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>{field.getMeta().error}</p>
+            </div>
+          )}
+        </form.Field>
+      )
+    })
+
+    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 with debounce', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    const mockFn = vi.fn()
+    const error = 'Please enter a different value'
+    const formFactory = createFormFactory<Person>()
+
+    const Comp = defineComponent(() => {
+      const form = formFactory.useForm()
+
+      provideFormContext({ formApi: form })
+
+      return () => (
+        <form.Field
+          name="firstName"
+          defaultMeta={{ isTouched: true }}
+          onChangeAsyncDebounceMs={100}
+          onChangeAsync={async () => {
+            mockFn()
+            await sleep(10)
+            return error
+          }}
+        >
+          {(field: FieldApi<string, Person>) => (
+            <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>{field.getMeta().error}</p>
+            </div>
+          )}
+        </form.Field>
+      )
+    })
+
+    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/tests/useForm.test.tsx

@@ -0,0 +1,129 @@
+/// <reference lib="dom" />
+import { h, defineComponent, ref } from 'vue-demi'
+import { render, waitFor } from '@testing-library/vue'
+import '@testing-library/jest-dom'
+import {
+  createFormFactory,
+  type FieldApi,
+  provideFormContext,
+  useForm,
+} from '../index'
+import userEvent from '@testing-library/user-event'
+import * as React from 'react'
+
+const user = userEvent.setup()
+
+describe('useForm', () => {
+  it('preserved field state', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    const formFactory = createFormFactory<Person>()
+
+    const Comp = defineComponent(() => {
+      const form = formFactory.useForm()
+
+      provideFormContext({ formApi: form })
+
+      return () => (
+        <form.Field name="firstName" defaultValue="">
+          {(field: FieldApi<string, Person>) => (
+            <input
+              data-testid={'fieldinput'}
+              value={field.state.value}
+              onBlur={field.handleBlur}
+              onInput={(e) =>
+                field.handleChange((e.target as HTMLInputElement).value)
+              }
+            />
+          )}
+        </form.Field>
+      )
+    })
+
+    const { getByTestId, queryByText } = render(Comp)
+    const input = getByTestId('fieldinput')
+    expect(queryByText('FirstName')).not.toBeInTheDocument()
+    await user.type(input, 'FirstName')
+    expect(input).toHaveValue('FirstName')
+  })
+
+  it('should allow default values to be set', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    const formFactory = createFormFactory<Person>()
+
+    const Comp = defineComponent(() => {
+      const form = formFactory.useForm({
+        defaultValues: {
+          firstName: 'FirstName',
+          lastName: 'LastName',
+        },
+      })
+      form.provideFormContext()
+
+      return () => (
+        <form.Field name="firstName" defaultValue="">
+          {(field: FieldApi<string, Person>) => <p>{field.state.value}</p>}
+        </form.Field>
+      )
+    })
+
+    const { findByText, queryByText } = render(Comp)
+    expect(await findByText('FirstName')).toBeInTheDocument()
+    expect(queryByText('LastName')).not.toBeInTheDocument()
+  })
+
+  it('should handle submitting properly', async () => {
+    const Comp = defineComponent(() => {
+      const submittedData = ref<{ firstName: string }>()
+
+      const form = useForm({
+        defaultValues: {
+          firstName: 'FirstName',
+        },
+        onSubmit: (data) => {
+          submittedData.value = data
+        },
+      })
+      form.provideFormContext()
+
+      return () => (
+        <form.Provider>
+          <form.Field name="firstName">
+            {(field: FieldApi<string, { firstName: string }>) => {
+              return (
+                <input
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) =>
+                    field.handleChange((e.target as HTMLInputElement).value)
+                  }
+                  placeholder={'First name'}
+                />
+              )
+            }}
+          </form.Field>
+          <button onClick={form.handleSubmit}>Submit</button>
+          {submittedData.value && (
+            <p>Submitted data: {submittedData.value.firstName}</p>
+          )}
+        </form.Provider>
+      )
+    })
+
+    const { findByPlaceholderText, getByText } = render(Comp)
+    const input = await findByPlaceholderText('First name')
+    await user.clear(input)
+    await user.type(input, 'OtherName')
+    await user.click(getByText('Submit'))
+    await waitFor(() =>
+      expect(getByText('Submitted data: OtherName')).toBeInTheDocument(),
+    )
+  })
+})

package/src/tests/utils.ts

@@ -0,0 +1,5 @@
+export function sleep(timeout: number): Promise<void> {
+  return new Promise((resolve, _reject) => {
+    setTimeout(resolve, timeout)
+  })
+}

package/src/types.ts

@@ -0,0 +1 @@
+export type NoInfer<T> = [T][T extends any ? 0 : never]

package/src/useField.tsx

@@ -0,0 +1,151 @@
+import {
+  type DeepKeys,
+  type DeepValue,
+  FieldApi,
+  type FieldOptions,
+  type Narrow,
+} from '@tanstack/form-core'
+import { useStore } from '@tanstack/vue-store'
+import {
+  type SetupContext,
+  defineComponent,
+  type Ref,
+  onMounted,
+  onUnmounted,
+  watch,
+} from 'vue-demi'
+import { provideFormContext, useFormContext } from './formContext'
+
+declare module '@tanstack/form-core' {
+  // eslint-disable-next-line no-shadow
+  interface FieldApi<TData, TFormData> {
+    Field: FieldComponent<TData, TFormData>
+  }
+}
+
+export interface UseFieldOptions<TData, TFormData>
+  extends FieldOptions<TData, TFormData> {
+  mode?: 'value' | 'array'
+}
+
+export type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(
+  opts?: { name: Narrow<TField> } & UseFieldOptions<
+    DeepValue<TFormData, TField>,
+    TFormData
+  >,
+) => FieldApi<DeepValue<TFormData, TField>, TFormData>
+
+export function useField<TData, TFormData>(
+  opts: UseFieldOptions<TData, TFormData>,
+): {
+  api: FieldApi<TData, TFormData>
+  state: Readonly<Ref<FieldApi<TData, TFormData>['state']>>
+} {
+  // Get the form API either manually or from context
+  const { formApi, parentFieldName } = useFormContext()
+
+  const fieldApi = (() => {
+    const name = (
+      typeof opts.index === 'number'
+        ? [parentFieldName, opts.index, opts.name]
+        : [parentFieldName, opts.name]
+    )
+      .filter((d) => d !== undefined)
+      .join('.')
+
+    const api = new FieldApi({ ...opts, form: formApi, name: name as never })
+
+    api.Field = Field as never
+
+    return api
+  })()
+
+  const fieldState = useStore(fieldApi.store, (state) => state)
+
+  let cleanup!: () => void
+  onMounted(() => {
+    cleanup = fieldApi.mount()
+  })
+
+  onUnmounted(() => {
+    cleanup()
+  })
+
+  watch(
+    () => opts,
+    () => {
+      // Keep options up to date as they are rendered
+      fieldApi.update({ ...opts, form: formApi } as never)
+    },
+  )
+
+  return { api: fieldApi, state: fieldState } as never
+}
+
+// export type FieldValue<TFormData, TField> = TFormData extends any[]
+//   ? TField extends `[${infer TIndex extends number | 'i'}].${infer TRest}`
+//     ? DeepValue<TFormData[TIndex extends 'i' ? number : TIndex], TRest>
+//     : TField extends `[${infer TIndex extends number | 'i'}]`
+//     ? TFormData[TIndex extends 'i' ? number : TIndex]
+//     : never
+//   : TField extends `${infer TPrefix}[${infer TIndex extends
+//       | number
+//       | 'i'}].${infer TRest}`
+//   ? DeepValue<
+//       DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex],
+//       TRest
+//     >
+//   : TField extends `${infer TPrefix}[${infer TIndex extends number | 'i'}]`
+//   ? DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex]
+//   : DeepValue<TFormData, TField>
+
+export type FieldValue<TFormData, TField> = TFormData extends any[]
+  ? unknown extends TField
+    ? TFormData[number]
+    : DeepValue<TFormData[number], TField>
+  : DeepValue<TFormData, TField>
+
+// type Test1 = FieldValue<{ foo: { bar: string }[] }, 'foo'>
+// //   ^?
+// type Test2 = FieldValue<{ foo: { bar: string }[] }, 'foo[i]'>
+// //   ^?
+// type Test3 = FieldValue<{ foo: { bar: string }[] }, 'foo[2].bar'>
+// //   ^?
+
+export type FieldComponent<TParentData, TFormData> = <TField>(
+  fieldOptions: {
+    children?: (
+      fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>,
+    ) => any
+  } & Omit<
+    UseFieldOptions<FieldValue<TParentData, TField>, TFormData>,
+    'name' | 'index'
+  > &
+    (TParentData extends any[]
+      ? {
+          name?: TField extends undefined ? TField : DeepKeys<TParentData>
+          index: number
+        }
+      : {
+          name: TField extends undefined ? TField : DeepKeys<TParentData>
+          index?: never
+        }),
+  context: SetupContext,
+) => any
+
+export const Field = defineComponent(
+  <TData, TFormData>(
+    fieldOptions: UseFieldOptions<TData, TFormData>,
+    context: SetupContext,
+  ) => {
+    const fieldApi = useField({ ...fieldOptions, ...context.attrs })
+
+    provideFormContext({
+      formApi: fieldApi.api.form,
+      parentFieldName: fieldApi.api.name,
+    } as never)
+
+    return () => context.slots.default!(fieldApi.api, fieldApi.state.value)
+  },
+  { name: 'Field', inheritAttrs: false },
+)