@tanstack/solid-form 0.10.3 → 0.12.0

package/src/tests/createForm.test.tsx

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 import { render, screen, waitFor } from '@solidjs/testing-library'
 import '@testing-library/jest-dom'
 import userEvent from '@testing-library/user-event'
@@ -15,7 +16,7 @@ describe('createForm', () => {
       lastName: string
     }
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     function Comp() {
       const form = formFactory.createForm()
@@ -50,7 +51,7 @@ describe('createForm', () => {
       lastName: string
     }
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     function Comp() {
       const form = formFactory.createForm(() => ({
@@ -84,8 +85,8 @@ describe('createForm', () => {
         defaultValues: {
           firstName: 'FirstName',
         },
-        onSubmit: (data) => {
-          submittedData = data
+        onSubmit: ({ value }) => {
+          submittedData = value
         },
       }))
 
@@ -125,9 +126,11 @@ describe('createForm', () => {
         defaultValues: {
           firstName: 'FirstName',
         },
-        onMount: () => {
-          setFormMounted(true)
-          return undefined
+        validators: {
+          onMount: () => {
+            setFormMounted(true)
+            return undefined
+          },
         },
       }))
 
@@ -157,14 +160,18 @@ describe('createForm', () => {
     }
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     function Comp() {
       const form = formFactory.createForm(() => ({
-        onChange: (value) =>
-          value.firstName.includes('other') ? error : undefined,
+        validators: {
+          onChange: ({ value }) =>
+            value.firstName.includes('other') ? error : undefined,
+        },
       }))
 
+      const errors = form.useStore((s) => s.errors)
+
       return (
         <form.Provider>
           <form.Field
@@ -178,7 +185,7 @@ describe('createForm', () => {
                   onBlur={field().handleBlur}
                   onInput={(e) => field().setValue(e.currentTarget.value)}
                 />
-                <p>{form.useStore((s) => s.errors)}</p>
+                <p>{errors().join(',')}</p>
               </div>
             )}
           />
@@ -199,12 +206,14 @@ describe('createForm', () => {
     }
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     function Comp() {
       const form = formFactory.createForm(() => ({
-        onChange: (value) =>
-          value.firstName.includes('other') ? error : undefined,
+        validators: {
+          onChange: ({ value }) =>
+            value.firstName.includes('other') ? error : undefined,
+        },
       }))
 
       const [errors, setErrors] = createSignal<ValidationErrorMap>()
@@ -249,14 +258,16 @@ describe('createForm', () => {
     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(() => ({
-        onChange: (value) =>
-          value.firstName.includes('other') ? onChangeError : undefined,
-        onBlur: (value) =>
-          value.firstName.includes('other') ? onBlurError : undefined,
+        validators: {
+          onChange: ({ value }) =>
+            value.firstName.includes('other') ? onChangeError : undefined,
+          onBlur: ({ value }) =>
+            value.firstName.includes('other') ? onBlurError : undefined,
+        },
       }))
 
       const [errors, setErrors] = createSignal<ValidationErrorMap>()
@@ -291,7 +302,6 @@ describe('createForm', () => {
     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()
   })
@@ -303,13 +313,15 @@ describe('createForm', () => {
     }
     const error = 'Please enter a different value'
 
-    const formFactory = createFormFactory<Person, unknown>()
+    const formFactory = createFormFactory<Person>()
 
     function Comp() {
       const form = formFactory.createForm(() => ({
-        onChangeAsync: async () => {
-          await sleep(10)
-          return error
+        validators: {
+          onChangeAsync: async () => {
+            await sleep(10)
+            return error
+          },
         },
       }))
 
@@ -354,17 +366,19 @@ describe('createForm', () => {
     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(() => ({
-        async onChangeAsync() {
-          await sleep(10)
-          return onChangeError
-        },
-        async onBlurAsync() {
-          await sleep(10)
-          return onBlurError
+        validators: {
+          async onChangeAsync() {
+            await sleep(10)
+            return onChangeError
+          },
+          async onBlurAsync() {
+            await sleep(10)
+            return onBlurError
+          },
         },
       }))
 
@@ -402,7 +416,6 @@ describe('createForm', () => {
     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()
@@ -415,15 +428,17 @@ describe('createForm', () => {
     }
     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(() => ({
-        onChangeAsyncDebounceMs: 100,
-        onChangeAsync: async () => {
-          mockFn()
-          await sleep(10)
-          return error
+        validators: {
+          onChangeAsyncDebounceMs: 100,
+          onChangeAsync: async () => {
+            mockFn()
+            await sleep(10)
+            return error
+          },
         },
       }))
 

package/src/tests/createFormFactory.test.tsx

@@ -1,3 +1,4 @@
+/// <reference lib="dom" />
 import { render } from '@solidjs/testing-library'
 import '@testing-library/jest-dom'
 import { createFormFactory } from '..'
@@ -9,7 +10,7 @@ describe('createFormFactory', () => {
       lastName: string
     }
 
-    const formFactory = createFormFactory<Person, unknown>(() => ({
+    const formFactory = createFormFactory<Person>(() => ({
       defaultValues: {
         firstName: 'FirstName',
         lastName: 'LastName',

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 CreateFieldOptions<
   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'
 }

package/build/index.d.cts

@@ -1,56 +0,0 @@
-import { DeepKeys, DeepValue, FieldOptions, Narrow, FieldApi, FormState, FormOptions, FormApi } from '@tanstack/form-core';
-export { DeepKeys, DeepValue, FieldApi, FieldApiOptions, FieldInfo, FieldMeta, FieldOptions, FieldState, FormApi, FormOptions, FormState, RequiredByKey, Updater, UpdaterFn, ValidationCause, ValidationError, ValidationMeta, functionalUpdate } from '@tanstack/form-core';
-import { JSXElement } from 'solid-js';
-
-type CreateFieldOptions<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = FieldOptions<TParentData, TName, ValidatorType, FormValidator, TData> & {
-    mode?: 'value' | 'array';
-};
-
-declare module '@tanstack/form-core' {
-    interface FieldApi<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> {
-        Field: FieldComponent<TData, FormValidator>;
-    }
-}
-type CreateField<TParentData> = <TName extends DeepKeys<TParentData>, ValidatorType, FormValidator>(opts: () => {
-    name: Narrow<TName>;
-} & CreateFieldOptions<TParentData, TName, ValidatorType, FormValidator>) => () => FieldApi<TParentData, TName, ValidatorType, FormValidator, DeepValue<TParentData, TName>>;
-declare function createField<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator>(opts: () => CreateFieldOptions<TParentData, TName, ValidatorType, FormValidator>): () => FieldApi<TParentData, TName, ValidatorType, FormValidator>;
-type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = {
-    children: (fieldApi: () => FieldApi<TParentData, TName, ValidatorType, FormValidator, TData>) => JSXElement;
-} & (TParentData extends any[] ? {
-    name?: TName;
-    index: number;
-} : {
-    name: TName;
-    index?: never;
-}) & Omit<CreateFieldOptions<TParentData, TName, ValidatorType, FormValidator>, 'name' | 'index'>;
-type FieldComponent<TParentData, FormValidator> = <TName extends DeepKeys<TParentData>, ValidatorType, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>({ children, ...fieldOptions }: FieldComponentProps<TParentData, TName, ValidatorType, FormValidator, TData>) => JSXElement;
-declare function Field<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator>(props: {
-    children: (fieldApi: () => FieldApi<TParentData, TName, ValidatorType, FormValidator>) => JSXElement;
-} & CreateFieldOptions<TParentData, TName, ValidatorType, FormValidator>): any;
-
-type NoInfer<T> = [T][T extends any ? 0 : never];
-declare module '@tanstack/form-core' {
-    interface FormApi<TFormData, ValidatorType> {
-        Provider: (props: {
-            children: any;
-        }) => any;
-        Field: FieldComponent<TFormData, ValidatorType>;
-        createField: CreateField<TFormData>;
-        useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => () => TSelected;
-        Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
-            selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
-            children: ((state: () => NoInfer<TSelected>) => JSXElement) | JSXElement;
-        }) => any;
-    }
-}
-declare function createForm<TData, FormValidator>(opts?: () => FormOptions<TData, FormValidator>): FormApi<TData, FormValidator>;
-
-type FormFactory<TFormData, FormValidator> = {
-    createForm: (opts?: () => FormOptions<TFormData, FormValidator>) => FormApi<TFormData, FormValidator>;
-    createField: CreateField<TFormData>;
-    Field: FieldComponent<TFormData, FormValidator>;
-};
-declare function createFormFactory<TFormData, FormValidator>(defaultOpts?: () => FormOptions<TFormData, FormValidator>): FormFactory<TFormData, FormValidator>;
-
-export { CreateField, Field, FieldComponent, FormFactory, createField, createForm, createFormFactory };

package/build/index.d.ts

@@ -1,56 +0,0 @@
-import { DeepKeys, DeepValue, FieldOptions, Narrow, FieldApi, FormState, FormOptions, FormApi } from '@tanstack/form-core';
-export { DeepKeys, DeepValue, FieldApi, FieldApiOptions, FieldInfo, FieldMeta, FieldOptions, FieldState, FormApi, FormOptions, FormState, RequiredByKey, Updater, UpdaterFn, ValidationCause, ValidationError, ValidationMeta, functionalUpdate } from '@tanstack/form-core';
-import { JSXElement } from 'solid-js';
-
-type CreateFieldOptions<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = FieldOptions<TParentData, TName, ValidatorType, FormValidator, TData> & {
-    mode?: 'value' | 'array';
-};
-
-declare module '@tanstack/form-core' {
-    interface FieldApi<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> {
-        Field: FieldComponent<TData, FormValidator>;
-    }
-}
-type CreateField<TParentData> = <TName extends DeepKeys<TParentData>, ValidatorType, FormValidator>(opts: () => {
-    name: Narrow<TName>;
-} & CreateFieldOptions<TParentData, TName, ValidatorType, FormValidator>) => () => FieldApi<TParentData, TName, ValidatorType, FormValidator, DeepValue<TParentData, TName>>;
-declare function createField<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator>(opts: () => CreateFieldOptions<TParentData, TName, ValidatorType, FormValidator>): () => FieldApi<TParentData, TName, ValidatorType, FormValidator>;
-type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = {
-    children: (fieldApi: () => FieldApi<TParentData, TName, ValidatorType, FormValidator, TData>) => JSXElement;
-} & (TParentData extends any[] ? {
-    name?: TName;
-    index: number;
-} : {
-    name: TName;
-    index?: never;
-}) & Omit<CreateFieldOptions<TParentData, TName, ValidatorType, FormValidator>, 'name' | 'index'>;
-type FieldComponent<TParentData, FormValidator> = <TName extends DeepKeys<TParentData>, ValidatorType, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>({ children, ...fieldOptions }: FieldComponentProps<TParentData, TName, ValidatorType, FormValidator, TData>) => JSXElement;
-declare function Field<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator>(props: {
-    children: (fieldApi: () => FieldApi<TParentData, TName, ValidatorType, FormValidator>) => JSXElement;
-} & CreateFieldOptions<TParentData, TName, ValidatorType, FormValidator>): any;
-
-type NoInfer<T> = [T][T extends any ? 0 : never];
-declare module '@tanstack/form-core' {
-    interface FormApi<TFormData, ValidatorType> {
-        Provider: (props: {
-            children: any;
-        }) => any;
-        Field: FieldComponent<TFormData, ValidatorType>;
-        createField: CreateField<TFormData>;
-        useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => () => TSelected;
-        Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
-            selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
-            children: ((state: () => NoInfer<TSelected>) => JSXElement) | JSXElement;
-        }) => any;
-    }
-}
-declare function createForm<TData, FormValidator>(opts?: () => FormOptions<TData, FormValidator>): FormApi<TData, FormValidator>;
-
-type FormFactory<TFormData, FormValidator> = {
-    createForm: (opts?: () => FormOptions<TFormData, FormValidator>) => FormApi<TFormData, FormValidator>;
-    createField: CreateField<TFormData>;
-    Field: FieldComponent<TFormData, FormValidator>;
-};
-declare function createFormFactory<TFormData, FormValidator>(defaultOpts?: () => FormOptions<TFormData, FormValidator>): FormFactory<TFormData, FormValidator>;
-
-export { CreateField, Field, FieldComponent, FormFactory, createField, createForm, createFormFactory };