@tanstack/solid-form 0.10.3 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-form",
-  "version": "0.10.3",
+  "version": "0.12.0",
   "description": "Powerful, type-safe forms for Solid.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -12,61 +12,48 @@
   },
   "sideEffects": false,
   "files": [
-    "build",
+    "dist",
     "src"
   ],
   "type": "module",
-  "main": "./build/index.cjs",
-  "module": "./build/index.js",
-  "types": "./build/index.d.ts",
+  "types": "dist/mjs/index.d.mts",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/mjs/index.mjs",
   "exports": {
-    "development": {
+    ".": {
       "import": {
-        "types": "./build/index.d.ts",
-        "default": "./build/dev.js"
+        "types": "./dist/mjs/index.d.mts",
+        "default": "./dist/mjs/index.mjs"
       },
       "require": {
-        "types": "./build/index.d.cts",
-        "default": "./build/dev.cjs"
+        "types": "./dist/cjs/index.d.cts",
+        "default": "./dist/cjs/index.cjs"
       }
     },
-    "import": {
-      "types": "./build/index.d.ts",
-      "default": "./build/index.js"
-    },
-    "require": {
-      "types": "./build/index.d.cts",
-      "default": "./build/index.cjs"
-    }
-  },
-  "nx": {
-    "targets": {
-      "test:build": {
-        "dependsOn": [
-          "build"
-        ]
-      }
-    }
+    "./package.json": "./package.json"
   },
   "devDependencies": {
     "solid-js": "^1.7.8",
-    "tsup-preset-solid": "^2.1.0",
     "vite-plugin-solid": "^2.7.0"
   },
   "dependencies": {
     "@tanstack/solid-store": "^0.2.1",
-    "@tanstack/form-core": "0.10.3"
+    "@tanstack/form-core": "0.12.0"
   },
   "peerDependencies": {
     "solid-js": "^1.6.0"
   },
   "scripts": {
-    "clean": "rimraf ./build && rimraf ./coverage",
+    "clean": "rimraf ./dist && rimraf ./coverage",
     "test:eslint": "eslint --ext .ts,.tsx ./src",
-    "test:types": "tsc --noEmit",
+    "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.*/\"",
     "test:lib": "vitest run --coverage",
     "test:lib:dev": "pnpm run test:lib --watch",
     "test:build": "publint --strict",
-    "build": "tsup"
+    "build": "vite build"
   }
 }

package/src/createField.tsx

@@ -1,4 +1,4 @@
-import { FieldApi } from '@tanstack/form-core'
+import { FieldApi, type Validator } from '@tanstack/form-core'
 import {
   createComponent,
   createComputed,
@@ -18,30 +18,38 @@ declare module '@tanstack/form-core' {
   interface FieldApi<
     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>,
   > {
-    Field: FieldComponent<TData, FormValidator>
+    Field: FieldComponent<TParentData, TFormValidator>
   }
 }
 
 export type CreateField<TParentData> = <
   TName extends DeepKeys<TParentData>,
-  ValidatorType,
-  FormValidator,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
 >(
   opts: () => { name: Narrow<TName> } & CreateFieldOptions<
     TParentData,
     TName,
-    ValidatorType,
-    FormValidator
+    TFieldValidator,
+    TFormValidator
   >,
 ) => () => FieldApi<
   TParentData,
   TName,
-  ValidatorType,
-  FormValidator,
+  TFieldValidator,
+  TFormValidator,
   DeepValue<TParentData, TName>
 >
 
@@ -59,24 +67,20 @@ function makeFieldReactive<FieldApiT extends FieldApi<any, any, any, any>>(
 export function createField<
   TParentData,
   TName extends DeepKeys<TParentData>,
-  ValidatorType,
-  FormValidator,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
 >(
   opts: () => CreateFieldOptions<
     TParentData,
     TName,
-    ValidatorType,
-    FormValidator
+    TFieldValidator,
+    TFormValidator
   >,
-): () => FieldApi<
-  TParentData,
-  TName,
-  ValidatorType,
-  FormValidator
-  // Omit<typeof opts, 'onMount'> & {
-  //   form: FormApi<TParentData>
-  // }
-> {
+): () => FieldApi<TParentData, TName, TFieldValidator, TFormValidator> {
   // Get the form API either manually or from context
   const { formApi, parentFieldName } = useFormContext()
 
@@ -92,7 +96,7 @@ export function createField<
   const fieldApi = new FieldApi({
     ...options,
     form: formApi,
-    name: name as typeof options.name,
+    name: name as typeof options.name as never,
   })
   fieldApi.Field = Field as never
 
@@ -102,27 +106,31 @@ export function createField<
    *
    * createComputed to make sure this effect runs before render effects
    */
-  createComputed(() => fieldApi.update({ ...opts(), form: formApi }))
+  createComputed(() => fieldApi.update({ ...opts(), form: formApi } as never))
 
   // Instantiates field meta and removes it when unrendered
   onMount(() => onCleanup(fieldApi.mount()))
 
-  return makeFieldReactive(fieldApi)
+  return makeFieldReactive(fieldApi) as never
 }
 
 type FieldComponentProps<
   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>,
 > = {
   children: (
     fieldApi: () => FieldApi<
       TParentData,
       TName,
-      ValidatorType,
-      FormValidator,
+      TFieldValidator,
+      TFormValidator,
       TData
     >,
   ) => JSXElement
@@ -136,13 +144,20 @@ type FieldComponentProps<
       index?: never
     }) &
   Omit<
-    CreateFieldOptions<TParentData, TName, ValidatorType, FormValidator>,
+    CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,
     'name' | 'index'
   >
 
-export type FieldComponent<TParentData, FormValidator> = <
+export type FieldComponent<
+  TParentData,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
+> = <
   TName extends DeepKeys<TParentData>,
-  ValidatorType,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
 >({
   children,
@@ -150,33 +165,37 @@ export type FieldComponent<TParentData, FormValidator> = <
 }: FieldComponentProps<
   TParentData,
   TName,
-  ValidatorType,
-  FormValidator,
+  TFieldValidator,
+  TFormValidator,
   TData
 >) => JSXElement
 
 export function Field<
   TParentData,
   TName extends DeepKeys<TParentData>,
-  ValidatorType,
-  FormValidator,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
 >(
   props: {
     children: (
       fieldApi: () => FieldApi<
         TParentData,
         TName,
-        ValidatorType,
-        FormValidator
+        TFieldValidator,
+        TFormValidator
       >,
     ) => JSXElement
-  } & CreateFieldOptions<TParentData, TName, ValidatorType, FormValidator>,
+  } & CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,
 ) {
   const fieldApi = createField<
     TParentData,
     TName,
-    ValidatorType,
-    FormValidator
+    TFieldValidator,
+    TFormValidator
   >(() => {
     const { children, ...fieldOptions } = props
     return fieldOptions
@@ -185,7 +204,7 @@ export function Field<
   return (
     <formContext.Provider
       value={{
-        formApi: fieldApi().form,
+        formApi: fieldApi().form as never,
         parentFieldName: String(fieldApi().name),
       }}
     >

package/src/createForm.tsx

@@ -1,4 +1,4 @@
-import type { FormOptions, FormState } from '@tanstack/form-core'
+import type { FormOptions, FormState, Validator } from '@tanstack/form-core'
 import { FormApi, functionalUpdate } from '@tanstack/form-core'
 import { createComputed, onMount, type JSXElement } from 'solid-js'
 import { useStore } from '@tanstack/solid-store'
@@ -14,9 +14,9 @@ type NoInfer<T> = [T][T extends any ? 0 : never]
 
 declare module '@tanstack/form-core' {
   // eslint-disable-next-line no-shadow
-  interface FormApi<TFormData, ValidatorType> {
-    Provider: (props: { children: any }) => any
-    Field: FieldComponent<TFormData, ValidatorType>
+  interface FormApi<TFormData, TFormValidator> {
+    Provider: (props: { children: any }) => JSXElement
+    Field: FieldComponent<TFormData, TFormValidator>
     createField: CreateField<TFormData>
     useStore: <TSelected = NoInfer<FormState<TFormData>>>(
       selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,
@@ -24,22 +24,29 @@ declare module '@tanstack/form-core' {
     Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
       selector?: (state: NoInfer<FormState<TFormData>>) => TSelected
       children: ((state: () => NoInfer<TSelected>) => JSXElement) | JSXElement
-    }) => any
+    }) => JSXElement
   }
 }
 
-export function createForm<TData, FormValidator>(
-  opts?: () => FormOptions<TData, FormValidator>,
-): FormApi<TData, FormValidator> {
+export function createForm<
+  TParentData,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
+>(
+  opts?: () => FormOptions<TParentData, TFormValidator>,
+): FormApi<TParentData, TFormValidator> {
   const options = opts?.()
-  const formApi = new FormApi<TData, FormValidator>(options)
+  const formApi = new FormApi<TParentData, TFormValidator>(options)
 
   formApi.Provider = function Provider(props) {
     onMount(formApi.mount)
-    return <formContext.Provider {...props} value={{ formApi: formApi }} />
+    return (
+      <formContext.Provider {...props} value={{ formApi: formApi as never }} />
+    )
   }
   formApi.Field = Field as any
-  formApi.createField = createField as CreateField<TData>
+  formApi.createField = createField as CreateField<TParentData>
   formApi.useStore = (selector) => useStore(formApi.store, selector)
   formApi.Subscribe = (props) =>
     functionalUpdate(props.children, useStore(formApi.store, props.selector))

package/src/createFormFactory.ts

@@ -1,4 +1,4 @@
-import type { FormApi, FormOptions } from '@tanstack/form-core'
+import type { FormApi, FormOptions, Validator } from '@tanstack/form-core'
 
 import {
   type CreateField,
@@ -9,20 +9,26 @@ import {
 import { createForm } from './createForm'
 import { mergeProps } from 'solid-js'
 
-export type FormFactory<TFormData, FormValidator> = {
+export type FormFactory<
+  TFormData,
+  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
+> = {
   createForm: (
-    opts?: () => FormOptions<TFormData, FormValidator>,
-  ) => FormApi<TFormData, FormValidator>
+    opts?: () => FormOptions<TFormData, TFormValidator>,
+  ) => FormApi<TFormData, TFormValidator>
   createField: CreateField<TFormData>
-  Field: FieldComponent<TFormData, FormValidator>
+  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 {
     createForm: (opts) =>
-      createForm<TFormData, FormValidator>(() =>
+      createForm<TFormData, TFormValidator>(() =>
         mergeProps(defaultOpts?.() ?? {}, opts?.() ?? {}),
       ),
     createField,

package/src/formContext.ts

@@ -1,10 +1,10 @@
 import { createContext, useContext } from 'solid-js'
-import type { FormApi } from '@tanstack/form-core'
+import type { FormApi, Validator } from '@tanstack/form-core'
 
 type FormContextType =
   | undefined
   | {
-      formApi: FormApi<any, any>
+      formApi: FormApi<any, Validator<any, unknown> | undefined>
       parentFieldName?: string
     }
 

package/src/tests/createField.test-d.tsx

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 import { assertType } from 'vitest'
 import { createForm } from '../createForm'
 
@@ -19,12 +20,14 @@ it('should type state.value properly', () => {
           name="firstName"
           children={(field) => {
             assertType<'test'>(field().state.value)
+            return null
           }}
         />
         <form.Field
           name="age"
           children={(field) => {
             assertType<84>(field().state.value)
+            return null
           }}
         />
       </form.Provider>
@@ -48,19 +51,23 @@ it('should type onChange properly', () => {
       <form.Provider>
         <form.Field
           name="firstName"
-          onChange={(val) => {
-            assertType<'test'>(val)
-            return null
+          validators={{
+            onChange: ({ value }) => {
+              assertType<'test'>(value)
+              return null
+            },
           }}
-          children={(field) => null}
+          children={() => null}
         />
         <form.Field
           name="age"
-          onChange={(val) => {
-            assertType<84>(val)
-            return null
+          validators={{
+            onChange: ({ value }) => {
+              assertType<84>(value)
+              return null
+            },
           }}
-          children={(field) => null}
+          children={() => null}
         />
       </form.Provider>
     )

package/src/tests/createField.test.tsx

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 import { render, waitFor } from '@solidjs/testing-library'
 import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom'
@@ -13,7 +14,7 @@ describe('createField', () => {
       lastName: string
     }
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     function Comp() {
       const form = formFactory.createForm()
@@ -49,7 +50,7 @@ describe('createField', () => {
       lastName: string
     }
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     function Comp() {
       const form = formFactory.createForm(() => ({
@@ -79,7 +80,7 @@ describe('createField', () => {
       )
     }
 
-    const { getByTestId } = render(<Comp />)
+    const { getByTestId } = render(() => <Comp />)
     const input = getByTestId('fieldinput')
     expect(input).toHaveValue('otherName')
   })
@@ -91,7 +92,7 @@ describe('createField', () => {
     }
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     function Comp() {
       const form = formFactory.createForm()
@@ -100,7 +101,10 @@ describe('createField', () => {
         <form.Provider>
           <form.Field
             name="firstName"
-            onChange={(value) => (value.includes('other') ? error : undefined)}
+            validators={{
+              onChange: ({ value }) =>
+                value.includes('other') ? error : undefined,
+            }}
             children={(field) => (
               <div>
                 <input
@@ -131,7 +135,7 @@ describe('createField', () => {
     }
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     function Comp() {
       const form = formFactory.createForm()
@@ -141,7 +145,10 @@ describe('createField', () => {
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
-            onChange={(value) => (value.includes('other') ? error : undefined)}
+            validators={{
+              onChange: ({ value }) =>
+                value.includes('other') ? error : undefined,
+            }}
             children={(field) => {
               return (
                 <div>
@@ -176,7 +183,7 @@ describe('createField', () => {
     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>()
 
     function Comp() {
       const form = formFactory.createForm()
@@ -186,12 +193,12 @@ describe('createField', () => {
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
-            onChange={(value) =>
-              value.includes('other') ? onChangeError : undefined
-            }
-            onBlur={(value) =>
-              value.includes('other') ? onBlurError : undefined
-            }
+            validators={{
+              onChange: ({ value }) =>
+                value.includes('other') ? onChangeError : undefined,
+              onBlur: ({ value }) =>
+                value.includes('other') ? onBlurError : undefined,
+            }}
             children={(field) => (
               <div>
                 <input
@@ -216,7 +223,6 @@ describe('createField', () => {
     expect(queryByText(onBlurError)).not.toBeInTheDocument()
     await user.type(input, 'other')
     expect(getByText(onChangeError)).toBeInTheDocument()
-    // @ts-expect-error unsure why the 'vitest/globals' in tsconfig doesnt work here
     await user.click(document.body)
     expect(queryByText(onBlurError)).toBeInTheDocument()
   })
@@ -228,7 +234,7 @@ describe('createField', () => {
     }
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     function Comp() {
       const form = formFactory.createForm()
@@ -238,9 +244,11 @@ describe('createField', () => {
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
-            onChangeAsync={async () => {
-              await sleep(10)
-              return error
+            validators={{
+              onChangeAsync: async () => {
+                await sleep(10)
+                return error
+              },
             }}
             children={(field) => (
               <div>
@@ -275,7 +283,7 @@ describe('createField', () => {
     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>()
 
     function Comp() {
       const form = formFactory.createForm()
@@ -285,13 +293,15 @@ describe('createField', () => {
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
-            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
+              },
             }}
             children={(field) => (
               <div>
@@ -319,7 +329,6 @@ describe('createField', () => {
     await user.type(input, 'other')
     await waitFor(() => getByText(onChangeError))
     expect(getByText(onChangeError)).toBeInTheDocument()
-    // @ts-expect-error unsure why the 'vitest/globals' in tsconfig doesnt work here
     await user.click(document.body)
     await waitFor(() => getByText(onBlurError))
     expect(getByText(onBlurError)).toBeInTheDocument()
@@ -332,7 +341,7 @@ describe('createField', () => {
     }
     const mockFn = vi.fn()
     const error = 'Please enter a different value'
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     function Comp() {
       const form = formFactory.createForm()
@@ -342,11 +351,13 @@ describe('createField', () => {
           <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
+              },
             }}
             children={(field) => (
               <div>