@tanstack/solid-form 0.22.1 → 0.23.1

package/dist/index.d.ts

@@ -1,7 +1,4 @@
-export type { DeepKeys, DeepValue, FieldApiOptions, FieldInfo, FieldMeta, FieldOptions, FieldState, FormOptions, FormState, RequiredByKey, Updater, UpdaterFn, ValidationCause, ValidationError, ValidationMeta, } from '@tanstack/form-core';
-export { FormApi, FieldApi, functionalUpdate } from '@tanstack/form-core';
+export * from '@tanstack/form-core';
 export { createForm } from './createForm';
 export type { CreateField, FieldComponent } from './createField';
 export { createField, Field } from './createField';
-export type { FormFactory } from './createFormFactory';
-export { createFormFactory } from './createFormFactory';

package/dist/index.js

@@ -1,5 +1,4 @@
-export { FormApi, FieldApi, functionalUpdate } from '@tanstack/form-core';
+export * from '@tanstack/form-core';
 export { createForm } from './createForm';
 export { createField, Field } from './createField';
-export { createFormFactory } from './createFormFactory';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEzE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAGzC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAGlD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AAEnC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAGzC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-form",
-  "version": "0.22.1",
+  "version": "0.23.1",
   "description": "Powerful, type-safe forms for Solid.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -17,6 +17,7 @@
   ],
   "type": "module",
   "types": "dist/index.d.ts",
+  "main": "dist/index.js",
   "module": "dist/index.js",
   "exports": {
     ".": {
@@ -38,7 +39,7 @@
   },
   "dependencies": {
     "@tanstack/solid-store": "^0.4.1",
-    "@tanstack/form-core": "0.22.0"
+    "@tanstack/form-core": "0.23.1"
   },
   "peerDependencies": {
     "solid-js": "^1.6.0"

package/src/index.ts

@@ -1,27 +1,6 @@
-export type {
-  DeepKeys,
-  DeepValue,
-  FieldApiOptions,
-  FieldInfo,
-  FieldMeta,
-  FieldOptions,
-  FieldState,
-  FormOptions,
-  FormState,
-  RequiredByKey,
-  Updater,
-  UpdaterFn,
-  ValidationCause,
-  ValidationError,
-  ValidationMeta,
-} from '@tanstack/form-core'
-
-export { FormApi, FieldApi, functionalUpdate } from '@tanstack/form-core'
+export * from '@tanstack/form-core'
 
 export { createForm } from './createForm'
 
 export type { CreateField, FieldComponent } from './createField'
 export { createField, Field } from './createField'
-
-export type { FormFactory } from './createFormFactory'
-export { createFormFactory } from './createFormFactory'

package/dist/createFormFactory.d.ts

@@ -1,8 +0,0 @@
-import { Field, createField } from './createField';
-import type { FormApi, FormOptions, Validator } from '@tanstack/form-core';
-export type FormFactory<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> = {
-    createForm: (opts?: () => FormOptions<TFormData, TFormValidator>) => FormApi<TFormData, TFormValidator>;
-    createField: typeof createField;
-    Field: typeof Field;
-};
-export declare function createFormFactory<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined>(defaultOpts?: () => FormOptions<TFormData, TFormValidator>): FormFactory<TFormData, TFormValidator>;

package/dist/createFormFactory.js

@@ -1,11 +0,0 @@
-import { mergeProps } from 'solid-js';
-import { Field, createField, } from './createField';
-import { createForm } from './createForm';
-export function createFormFactory(defaultOpts) {
-    return {
-        createForm: (opts) => createForm(() => mergeProps(defaultOpts?.() ?? {}, opts?.() ?? {})),
-        createField,
-        Field: Field,
-    };
-}
-//# sourceMappingURL=createFormFactory.js.map

package/dist/createFormFactory.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"createFormFactory.js","sourceRoot":"","sources":["../src/createFormFactory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,EAEL,KAAK,EAEL,WAAW,GACZ,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAczC,MAAM,UAAU,iBAAiB,CAI/B,WAA0D;IAE1D,OAAO;QACL,UAAU,EAAE,CAAC,IAAI,EAAE,EAAE,CACnB,UAAU,CAA4B,GAAG,EAAE,CACzC,UAAU,CAAC,WAAW,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,CAClD;QACH,WAAW;QACX,KAAK,EAAE,KAAK;KACb,CAAA;AACH,CAAC"}

package/src/createFormFactory.ts

@@ -1,36 +0,0 @@
-import { mergeProps } from 'solid-js'
-import {
-  type CreateField,
-  Field,
-  type FieldComponent,
-  createField,
-} from './createField'
-import { createForm } from './createForm'
-import type { FormApi, FormOptions, Validator } from '@tanstack/form-core'
-
-export type FormFactory<
-  TFormData,
-  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
-> = {
-  createForm: (
-    opts?: () => FormOptions<TFormData, TFormValidator>,
-  ) => FormApi<TFormData, TFormValidator>
-  createField: typeof createField
-  Field: typeof Field
-}
-
-export function createFormFactory<
-  TFormData,
-  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
->(
-  defaultOpts?: () => FormOptions<TFormData, TFormValidator>,
-): FormFactory<TFormData, TFormValidator> {
-  return {
-    createForm: (opts) =>
-      createForm<TFormData, TFormValidator>(() =>
-        mergeProps(defaultOpts?.() ?? {}, opts?.() ?? {}),
-      ),
-    createField,
-    Field: Field,
-  }
-}

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

@@ -1,74 +0,0 @@
-import { assertType, it } from 'vitest'
-import { createForm } from '../createForm'
-
-it('should type state.value properly', () => {
-  function Comp() {
-    const form = createForm(
-      () =>
-        ({
-          defaultValues: {
-            firstName: 'test',
-            age: 84,
-          },
-        }) as const,
-    )
-
-    return (
-      <>
-        <form.Field
-          name="firstName"
-          children={(field) => {
-            assertType<'test'>(field().state.value)
-            return null
-          }}
-        />
-        <form.Field
-          name="age"
-          children={(field) => {
-            assertType<84>(field().state.value)
-            return null
-          }}
-        />
-      </>
-    )
-  }
-})
-
-it('should type onChange properly', () => {
-  function Comp() {
-    const form = createForm(
-      () =>
-        ({
-          defaultValues: {
-            firstName: 'test',
-            age: 84,
-          },
-        }) as const,
-    )
-
-    return (
-      <>
-        <form.Field
-          name="firstName"
-          validators={{
-            onChange: ({ value }) => {
-              assertType<'test'>(value)
-              return null
-            },
-          }}
-          children={() => null}
-        />
-        <form.Field
-          name="age"
-          validators={{
-            onChange: ({ value }) => {
-              assertType<84>(value)
-              return null
-            },
-          }}
-          children={() => null}
-        />
-      </>
-    )
-  }
-})

package/src/tests/createField.test.tsx

@@ -1,578 +0,0 @@
-import { describe, expect, it, vi } from 'vitest'
-import { render, waitFor } from '@solidjs/testing-library'
-import userEvent from '@testing-library/user-event'
-import '@testing-library/jest-dom/vitest'
-import { Index, Show, createEffect } from 'solid-js'
-import { createForm, createFormFactory } from '../index'
-import { sleep } from './utils'
-
-const user = userEvent.setup()
-
-describe('createField', () => {
-  it('should allow to set default value', () => {
-    type Person = {
-      firstName: string
-      lastName: string
-    }
-
-    const formFactory = createFormFactory<Person>()
-
-    function Comp() {
-      const form = formFactory.createForm()
-
-      return (
-        <>
-          <form.Field
-            name="firstName"
-            defaultValue="FirstName"
-            children={(field) => {
-              return (
-                <input
-                  data-testid="fieldinput"
-                  value={field().state.value}
-                  onBlur={field().handleBlur}
-                  onInput={(e) => field().handleChange(e.currentTarget.value)}
-                />
-              )
-            }}
-          />
-        </>
-      )
-    }
-
-    const { getByTestId } = render(() => <Comp />)
-    const input = getByTestId('fieldinput')
-    expect(input).toHaveValue('FirstName')
-  })
-
-  it('should use field default value first', async () => {
-    type Person = {
-      firstName: string
-      lastName: string
-    }
-
-    const formFactory = createFormFactory<Person>()
-
-    function Comp() {
-      const form = formFactory.createForm(() => ({
-        defaultValues: {
-          firstName: 'FirstName',
-          lastName: 'LastName',
-        },
-      }))
-
-      return (
-        <>
-          <form.Field
-            name="firstName"
-            defaultValue="otherName"
-            children={(field) => {
-              return (
-                <input
-                  data-testid="fieldinput"
-                  value={field().state.value}
-                  onBlur={field().handleBlur}
-                  onChange={(e) => field().handleChange(e.target.value)}
-                />
-              )
-            }}
-          />
-        </>
-      )
-    }
-
-    const { getByTestId } = render(() => <Comp />)
-    const input = getByTestId('fieldinput')
-    expect(input).toHaveValue('otherName')
-  })
-
-  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>()
-
-    function Comp() {
-      const form = formFactory.createForm()
-
-      return (
-        <>
-          <form.Field
-            name="firstName"
-            validators={{
-              onChange: ({ value }) =>
-                value.includes('other') ? error : undefined,
-            }}
-            children={(field) => (
-              <div>
-                <input
-                  data-testid="fieldinput"
-                  name={field().name}
-                  value={field().state.value}
-                  onBlur={field().handleBlur}
-                  onInput={(e) => field().setValue(e.currentTarget.value)}
-                />
-                <p>{field().getMeta().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 () => {
-    type Person = {
-      firstName: string
-      lastName: string
-    }
-    const error = 'Please enter a different value'
-
-    const formFactory = createFormFactory<Person>()
-
-    function Comp() {
-      const form = formFactory.createForm()
-
-      return (
-        <>
-          <form.Field
-            name="firstName"
-            defaultMeta={{ isTouched: true }}
-            validators={{
-              onChange: ({ value }) =>
-                value.includes('other') ? error : undefined,
-            }}
-            children={(field) => {
-              return (
-                <div>
-                  <input
-                    data-testid="fieldinput"
-                    name={field().name}
-                    value={field().state.value}
-                    onBlur={field().handleBlur}
-                    onInput={(e) => field().setValue(e.currentTarget.value)}
-                  />
-                  <p>{field().getMeta().errorMap.onChange}</p>
-                </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 () => {
-    type Person = {
-      firstName: string
-      lastName: string
-    }
-    const onChangeError = 'Please enter a different value (onChangeError)'
-    const onBlurError = 'Please enter a different value (onBlurError)'
-
-    const formFactory = createFormFactory<Person>()
-
-    function Comp() {
-      const form = formFactory.createForm()
-
-      return (
-        <>
-          <form.Field
-            name="firstName"
-            defaultMeta={{ isTouched: true }}
-            validators={{
-              onChange: ({ value }) =>
-                value.includes('other') ? onChangeError : undefined,
-              onBlur: ({ value }) =>
-                value.includes('other') ? onBlurError : undefined,
-            }}
-            children={(field) => (
-              <div>
-                <input
-                  data-testid="fieldinput"
-                  name={field().name}
-                  value={field().state.value}
-                  onBlur={field().handleBlur}
-                  onInput={(e) => field().handleChange(e.currentTarget.value)}
-                />
-                <p>{field().getMeta().errorMap.onChange}</p>
-                <p>{field().getMeta().errorMap.onBlur}</p>
-              </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 () => {
-    type Person = {
-      firstName: string
-      lastName: string
-    }
-    const error = 'Please enter a different value'
-
-    const formFactory = createFormFactory<Person>()
-
-    function Comp() {
-      const form = formFactory.createForm()
-
-      return (
-        <>
-          <form.Field
-            name="firstName"
-            defaultMeta={{ isTouched: true }}
-            validators={{
-              onChangeAsync: async () => {
-                await sleep(10)
-                return error
-              },
-            }}
-            children={(field) => (
-              <div>
-                <input
-                  data-testid="fieldinput"
-                  name={field().name}
-                  value={field().state.value}
-                  onBlur={field().handleBlur}
-                  onInput={(e) => field().handleChange(e.currentTarget.value)}
-                />
-                <p>{field().getMeta().errorMap.onChange}</p>
-              </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 () => {
-    type Person = {
-      firstName: string
-      lastName: string
-    }
-    const onChangeError = 'Please enter a different value (onChangeError)'
-    const onBlurError = 'Please enter a different value (onBlurError)'
-
-    const formFactory = createFormFactory<Person>()
-
-    function Comp() {
-      const form = formFactory.createForm()
-
-      return (
-        <>
-          <form.Field
-            name="firstName"
-            defaultMeta={{ isTouched: true }}
-            validators={{
-              onChangeAsync: async () => {
-                await sleep(10)
-                return onChangeError
-              },
-              onBlurAsync: async () => {
-                await sleep(10)
-                return onBlurError
-              },
-            }}
-            children={(field) => (
-              <div>
-                <input
-                  data-testid="fieldinput"
-                  name={field().name}
-                  value={field().state.value}
-                  onBlur={field().handleBlur}
-                  onInput={(e) => field().handleChange(e.currentTarget.value)}
-                />
-                <p>{field().getMeta().errorMap?.onChange}</p>
-                <p>{field().getMeta().errorMap?.onBlur}</p>
-              </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 () => {
-    type Person = {
-      firstName: string
-      lastName: string
-    }
-    const mockFn = vi.fn()
-    const error = 'Please enter a different value'
-    const formFactory = createFormFactory<Person>()
-
-    function Comp() {
-      const form = formFactory.createForm()
-
-      return (
-        <>
-          <form.Field
-            name="firstName"
-            defaultMeta={{ isTouched: true }}
-            validators={{
-              onChangeAsyncDebounceMs: 100,
-              onChangeAsync: async () => {
-                mockFn()
-                await sleep(10)
-                return error
-              },
-            }}
-            children={(field) => (
-              <div>
-                <input
-                  data-testid="fieldinput"
-                  name={field().name}
-                  value={field().state.value}
-                  onBlur={field().handleBlur}
-                  onInput={(e) => field().handleChange(e.currentTarget.value)}
-                />
-                <p>{field().getMeta().errors}</p>
-              </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()
-  })
-
-  it('should handle arrays with primitive values', async () => {
-    const fn = vi.fn()
-
-    function Comp() {
-      const form = createForm(() => ({
-        defaultValues: {
-          people: [] as Array<string>,
-        },
-        onSubmit: ({ value }) => fn(value),
-      }))
-      return (
-        <div>
-          <form
-            onSubmit={(e) => {
-              e.preventDefault()
-              e.stopPropagation()
-              form.handleSubmit()
-            }}
-          >
-            <form.Field name="people">
-              {(field) => (
-                <div>
-                  <Show when={field().state.value.length > 0}>
-                    {/* Do not change this to For or the test will fail */}
-                    <Index each={field().state.value}>
-                      {(_, i) => {
-                        return (
-                          <form.Field name={`people[${i}]`}>
-                            {(subField) => (
-                              <div>
-                                <label>
-                                  <div>Name for person {i}</div>
-                                  <input
-                                    value={subField().state.value}
-                                    onInput={(e) => {
-                                      subField().handleChange(
-                                        e.currentTarget.value,
-                                      )
-                                    }}
-                                  />
-                                </label>
-                                <button
-                                  onClick={() => field().removeValue(i)}
-                                  type="button"
-                                >
-                                  Remove person {i}
-                                </button>
-                              </div>
-                            )}
-                          </form.Field>
-                        )
-                      }}
-                    </Index>
-                  </Show>
-
-                  <button onClick={() => field().pushValue('')} type="button">
-                    Add person
-                  </button>
-                </div>
-              )}
-            </form.Field>
-            <button type="submit">Submit</button>
-          </form>
-        </div>
-      )
-    }
-
-    const { getByText, findByLabelText, queryByText, findByText } = render(
-      () => <Comp />,
-    )
-
-    expect(queryByText('Name for person 0')).not.toBeInTheDocument()
-    expect(queryByText('Name for person 1')).not.toBeInTheDocument()
-    await user.click(getByText('Add person'))
-    const input = await findByLabelText('Name for person 0')
-    expect(input).toBeInTheDocument()
-    await user.type(input, 'John')
-
-    await user.click(getByText('Add person'))
-    const input2 = await findByLabelText('Name for person 1')
-    expect(input).toBeInTheDocument()
-    await user.type(input2, 'Jack')
-
-    expect(queryByText('Name for person 0')).toBeInTheDocument()
-    expect(queryByText('Name for person 1')).toBeInTheDocument()
-    await user.click(getByText('Remove person 1'))
-    expect(queryByText('Name for person 0')).toBeInTheDocument()
-    expect(queryByText('Name for person 1')).not.toBeInTheDocument()
-
-    await user.click(await findByText('Submit'))
-    expect(fn).toHaveBeenCalledWith({ people: ['John'] })
-  })
-
-  it('should handle arrays with subvalues', async () => {
-    const fn = vi.fn()
-
-    function Comp() {
-      const form = createForm(() => ({
-        defaultValues: {
-          people: [] as Array<{ age: number; name: string }>,
-        },
-        onSubmit: ({ value }) => fn(value),
-      }))
-
-      return (
-        <div>
-          <form
-            onSubmit={(e) => {
-              e.preventDefault()
-              e.stopPropagation()
-              form.handleSubmit()
-            }}
-          >
-            <form.Field name="people">
-              {(field) => (
-                <div>
-                  <Show when={field().state.value.length > 0}>
-                    {/* Do not change this to For or the test will fail */}
-                    <Index each={field().state.value}>
-                      {(_, i) => {
-                        return (
-                          <form.Field name={`people[${i}].name`}>
-                            {(subField) => (
-                              <div>
-                                <label>
-                                  <div>Name for person {i}</div>
-                                  <input
-                                    value={subField().state.value}
-                                    onInput={(e) => {
-                                      subField().handleChange(
-                                        e.currentTarget.value,
-                                      )
-                                    }}
-                                  />
-                                </label>
-                                <button
-                                  onClick={() => field().removeValue(i)}
-                                  type="button"
-                                >
-                                  Remove person {i}
-                                </button>
-                              </div>
-                            )}
-                          </form.Field>
-                        )
-                      }}
-                    </Index>
-                  </Show>
-
-                  <button
-                    onClick={() => field().pushValue({ name: '', age: 0 })}
-                    type="button"
-                  >
-                    Add person
-                  </button>
-                </div>
-              )}
-            </form.Field>
-            <button type="submit">Submit</button>
-          </form>
-        </div>
-      )
-    }
-
-    const { getByText, findByLabelText, queryByText, findByText } = render(
-      () => <Comp />,
-    )
-
-    expect(queryByText('Name for person 0')).not.toBeInTheDocument()
-    expect(queryByText('Name for person 1')).not.toBeInTheDocument()
-    await user.click(getByText('Add person'))
-    const input = await findByLabelText('Name for person 0')
-    expect(input).toBeInTheDocument()
-    await user.type(input, 'John')
-
-    await user.click(getByText('Add person'))
-    const input2 = await findByLabelText('Name for person 1')
-    expect(input).toBeInTheDocument()
-    await user.type(input2, 'Jack')
-
-    expect(queryByText('Name for person 0')).toBeInTheDocument()
-    expect(queryByText('Name for person 1')).toBeInTheDocument()
-    await user.click(getByText('Remove person 1'))
-    expect(queryByText('Name for person 0')).toBeInTheDocument()
-    expect(queryByText('Name for person 1')).not.toBeInTheDocument()
-
-    await user.click(await findByText('Submit'))
-    expect(fn).toHaveBeenCalledWith({ people: [{ name: 'John', age: 0 }] })
-  })
-})

package/src/tests/createForm.test.tsx

@@ -1,481 +0,0 @@
-import { describe, expect, it, vi } from 'vitest'
-import { render, screen, waitFor } from '@solidjs/testing-library'
-import userEvent from '@testing-library/user-event'
-import { Show, createSignal, onCleanup } from 'solid-js'
-import { createForm, createFormFactory } from '../index'
-import { sleep } from './utils'
-import type { ValidationErrorMap } from '@tanstack/form-core'
-
-const user = userEvent.setup()
-
-describe('createForm', () => {
-  it('preserves field state', async () => {
-    type Person = {
-      firstName: string
-      lastName: string
-    }
-
-    const formFactory = createFormFactory<Person>()
-
-    function Comp() {
-      const form = formFactory.createForm()
-      return (
-        <>
-          <form.Field
-            name="firstName"
-            defaultValue={''}
-            children={(field) => (
-              <input
-                data-testid="fieldinput"
-                value={field().state.value}
-                onBlur={field().handleBlur}
-                onChange={(e) => field().handleChange(e.currentTarget.value)}
-              />
-            )}
-          />
-        </>
-      )
-    }
-
-    render(() => <Comp />)
-    const input = screen.getByTestId('fieldinput')
-    expect(screen.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>()
-
-    function Comp() {
-      const form = formFactory.createForm(() => ({
-        defaultValues: {
-          firstName: 'FirstName',
-          lastName: 'LastName',
-        },
-      }))
-
-      return (
-        <>
-          <form.Field
-            name="firstName"
-            children={(field) => {
-              return <p>{field().state.value}</p>
-            }}
-          />
-        </>
-      )
-    }
-
-    const { findByText, queryByText } = render(() => <Comp />)
-    expect(await findByText('FirstName')).toBeInTheDocument()
-    expect(queryByText('LastName')).not.toBeInTheDocument()
-  })
-
-  it('should handle submitting properly', async () => {
-    let submittedData = null as { firstName: string } | null
-    function Comp() {
-      const form = createForm(() => ({
-        defaultValues: {
-          firstName: 'FirstName',
-        },
-        onSubmit: ({ value }) => {
-          submittedData = value
-        },
-      }))
-
-      return (
-        <>
-          <form.Field
-            name="firstName"
-            children={(field) => {
-              return (
-                <input
-                  value={field().state.value}
-                  onBlur={field().handleBlur}
-                  onChange={(e) => field().handleChange(e.target.value)}
-                  placeholder={'First name'}
-                />
-              )
-            }}
-          />
-          <button onClick={form.handleSubmit}>Submit</button>
-        </>
-      )
-    }
-
-    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'))
-    expect(submittedData?.firstName).toEqual('OtherName')
-  })
-
-  it('should run on form mount', async () => {
-    const [formMounted, setFormMounted] = createSignal(false)
-    const [mountForm, setMountForm] = createSignal(false)
-    function Comp() {
-      const form = createForm(() => ({
-        defaultValues: {
-          firstName: 'FirstName',
-        },
-        validators: {
-          onMount: () => {
-            setFormMounted(true)
-            return undefined
-          },
-        },
-      }))
-
-      return (
-        <Show
-          when={mountForm()}
-          fallback={
-            <button onClick={() => setMountForm(true)}>Mount form</button>
-          }
-        >
-          <>
-            <h1>Form mounted</h1>
-          </>
-        </Show>
-      )
-    }
-
-    const { getByText } = render(() => <Comp />)
-    await user.click(getByText('Mount form'))
-    expect(formMounted()).toBe(true)
-  })
-
-  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>()
-
-    function Comp() {
-      const form = formFactory.createForm(() => ({
-        validators: {
-          onChange: ({ value }) =>
-            value.firstName.includes('other') ? error : undefined,
-        },
-      }))
-
-      const errors = form.useStore((s) => s.errors)
-
-      return (
-        <>
-          <form.Field
-            name="firstName"
-            children={(field) => (
-              <div>
-                <input
-                  data-testid="fieldinput"
-                  name={field().name}
-                  value={field().state.value}
-                  onBlur={field().handleBlur}
-                  onInput={(e) => field().setValue(e.currentTarget.value)}
-                />
-                <p>{errors().join(',')}</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 () => {
-    type Person = {
-      firstName: string
-      lastName: string
-    }
-    const error = 'Please enter a different value'
-
-    const formFactory = createFormFactory<Person>()
-
-    function Comp() {
-      const form = formFactory.createForm(() => ({
-        validators: {
-          onChange: ({ value }) =>
-            value.firstName.includes('other') ? error : undefined,
-        },
-      }))
-
-      const [errors, setErrors] = createSignal<ValidationErrorMap>()
-      onCleanup(form.store.subscribe(() => setErrors(form.state.errorMap)))
-
-      return (
-        <>
-          <form.Field
-            name="firstName"
-            defaultMeta={{ isTouched: true }}
-            children={(field) => {
-              return (
-                <div>
-                  <input
-                    data-testid="fieldinput"
-                    name={field().name}
-                    value={field().state.value}
-                    onBlur={field().handleBlur}
-                    onInput={(e) => field().setValue(e.currentTarget.value)}
-                  />
-                  <p>{errors()?.onChange}</p>
-                </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 () => {
-    type Person = {
-      firstName: string
-      lastName: string
-    }
-    const onChangeError = 'Please enter a different value (onChangeError)'
-    const onBlurError = 'Please enter a different value (onBlurError)'
-
-    const formFactory = createFormFactory<Person>()
-
-    function Comp() {
-      const form = formFactory.createForm(() => ({
-        validators: {
-          onChange: ({ value }) =>
-            value.firstName.includes('other') ? onChangeError : undefined,
-          onBlur: ({ value }) =>
-            value.firstName.includes('other') ? onBlurError : undefined,
-        },
-      }))
-
-      const [errors, setErrors] = createSignal<ValidationErrorMap>()
-      onCleanup(form.store.subscribe(() => setErrors(form.state.errorMap)))
-
-      return (
-        <>
-          <form.Field
-            name="firstName"
-            defaultMeta={{ isTouched: true }}
-            children={(field) => (
-              <div>
-                <input
-                  data-testid="fieldinput"
-                  name={field().name}
-                  value={field().state.value}
-                  onBlur={field().handleBlur}
-                  onInput={(e) => field().handleChange(e.currentTarget.value)}
-                />
-                <p>{errors()?.onChange}</p>
-                <p>{errors()?.onBlur}</p>
-              </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 () => {
-    type Person = {
-      firstName: string
-      lastName: string
-    }
-    const error = 'Please enter a different value'
-
-    const formFactory = createFormFactory<Person>()
-
-    function Comp() {
-      const form = formFactory.createForm(() => ({
-        validators: {
-          onChangeAsync: async () => {
-            await sleep(10)
-            return error
-          },
-        },
-      }))
-
-      const [errors, setErrors] = createSignal<ValidationErrorMap>()
-      onCleanup(form.store.subscribe(() => setErrors(form.state.errorMap)))
-
-      return (
-        <>
-          <form.Field
-            name="firstName"
-            defaultMeta={{ isTouched: true }}
-            children={(field) => (
-              <div>
-                <input
-                  data-testid="fieldinput"
-                  name={field().name}
-                  value={field().state.value}
-                  onBlur={field().handleBlur}
-                  onInput={(e) => field().handleChange(e.currentTarget.value)}
-                />
-                <p>{errors()?.onChange}</p>
-              </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 () => {
-    type Person = {
-      firstName: string
-      lastName: string
-    }
-    const onChangeError = 'Please enter a different value (onChangeError)'
-    const onBlurError = 'Please enter a different value (onBlurError)'
-
-    const formFactory = createFormFactory<Person>()
-
-    function Comp() {
-      const form = formFactory.createForm(() => ({
-        validators: {
-          async onChangeAsync() {
-            await sleep(10)
-            return onChangeError
-          },
-          async onBlurAsync() {
-            await sleep(10)
-            return onBlurError
-          },
-        },
-      }))
-
-      const [errors, setErrors] = createSignal<ValidationErrorMap>()
-      onCleanup(form.store.subscribe(() => setErrors(form.state.errorMap)))
-
-      return (
-        <>
-          <form.Field
-            name="firstName"
-            defaultMeta={{ isTouched: true }}
-            children={(field) => (
-              <div>
-                <input
-                  data-testid="fieldinput"
-                  name={field().name}
-                  value={field().state.value}
-                  onBlur={field().handleBlur}
-                  onInput={(e) => field().handleChange(e.currentTarget.value)}
-                />
-                <p>{errors()?.onChange}</p>
-                <p>{errors()?.onBlur}</p>
-              </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 () => {
-    type Person = {
-      firstName: string
-      lastName: string
-    }
-    const mockFn = vi.fn()
-    const error = 'Please enter a different value'
-    const formFactory = createFormFactory<Person>()
-
-    function Comp() {
-      const form = formFactory.createForm(() => ({
-        validators: {
-          onChangeAsyncDebounceMs: 100,
-          onChangeAsync: async () => {
-            mockFn()
-            await sleep(10)
-            return error
-          },
-        },
-      }))
-
-      const [errors, setErrors] = createSignal<string>()
-      onCleanup(
-        form.store.subscribe(() =>
-          setErrors(form.state.errorMap.onChange || ''),
-        ),
-      )
-
-      return (
-        <>
-          <form.Field
-            name="firstName"
-            defaultMeta={{ isTouched: true }}
-            children={(field) => (
-              <div>
-                <input
-                  data-testid="fieldinput"
-                  name={field().name}
-                  value={field().state.value}
-                  onBlur={field().handleBlur}
-                  onInput={(e) => field().handleChange(e.currentTarget.value)}
-                />
-                <p>{errors()}</p>
-              </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/tests/createFormFactory.test.tsx

@@ -1,38 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { render } from '@solidjs/testing-library'
-import { createFormFactory } from '../index'
-
-describe('createFormFactory', () => {
-  it('should allow default values to be set', async () => {
-    type Person = {
-      firstName: string
-      lastName: string
-    }
-
-    const formFactory = createFormFactory<Person>(() => ({
-      defaultValues: {
-        firstName: 'FirstName',
-        lastName: 'LastName',
-      },
-    }))
-
-    function Comp() {
-      const form = formFactory.createForm()
-
-      return (
-        <>
-          <form.Field
-            name="firstName"
-            children={(field) => {
-              return <p>{field().state.value}</p>
-            }}
-          />
-        </>
-      )
-    }
-
-    const { findByText, queryByText } = render(() => <Comp />)
-    expect(await findByText('FirstName')).toBeInTheDocument()
-    expect(queryByText('LastName')).not.toBeInTheDocument()
-  })
-})

package/src/tests/utils.ts

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