@tanstack/solid-form 0.13.6 → 0.14.0

package/src/createForm.tsx

@@ -1,5 +1,5 @@
 import { FormApi, functionalUpdate } from '@tanstack/form-core'
-import { createComputed, onMount } from 'solid-js'
+import { type JSXElement, createComputed, onMount } from 'solid-js'
 import { useStore } from '@tanstack/solid-store'
 import {
   type CreateField,
@@ -7,8 +7,6 @@ import {
   type FieldComponent,
   createField,
 } from './createField'
-import { formContext } from './formContext'
-import type { JSXElement } from 'solid-js'
 import type { FormOptions, FormState, Validator } from '@tanstack/form-core'
 
 type NoInfer<T> = [T][T extends any ? 0 : never]
@@ -16,9 +14,8 @@ type NoInfer<T> = [T][T extends any ? 0 : never]
 declare module '@tanstack/form-core' {
   // eslint-disable-next-line no-shadow
   interface FormApi<TFormData, TFormValidator> {
-    Provider: (props: { children: any }) => JSXElement
     Field: FieldComponent<TFormData, TFormValidator>
-    createField: CreateField<TFormData>
+    createField: CreateField<TFormData, TFormValidator>
     useStore: <TSelected = NoInfer<FormState<TFormData>>>(
       selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,
     ) => () => TSelected
@@ -40,18 +37,17 @@ export function createForm<
   const options = opts?.()
   const formApi = new FormApi<TParentData, TFormValidator>(options)
 
-  formApi.Provider = function Provider(props) {
-    onMount(formApi.mount)
-    return (
-      <formContext.Provider {...props} value={{ formApi: formApi as never }} />
-    )
-  }
-  formApi.Field = Field as any
-  formApi.createField = createField as CreateField<TParentData>
+  formApi.Field = (props) => <Field {...props} form={formApi} />
+  formApi.createField = (props) =>
+    createField(() => {
+      return { ...props(), form: formApi }
+    })
   formApi.useStore = (selector) => useStore(formApi.store, selector)
   formApi.Subscribe = (props) =>
     functionalUpdate(props.children, useStore(formApi.store, props.selector))
 
+  onMount(formApi.mount)
+
   /**
    * formApi.update should not have any side effects. Think of it like a `useRef`
    * that we need to keep updated every render with the most up-to-date information.

package/src/createFormFactory.ts

@@ -15,8 +15,8 @@ export type FormFactory<
   createForm: (
     opts?: () => FormOptions<TFormData, TFormValidator>,
   ) => FormApi<TFormData, TFormValidator>
-  createField: CreateField<TFormData>
-  Field: FieldComponent<TFormData, TFormValidator>
+  createField: typeof createField
+  Field: typeof Field
 }
 
 export function createFormFactory<
@@ -31,6 +31,6 @@ export function createFormFactory<
         mergeProps(defaultOpts?.() ?? {}, opts?.() ?? {}),
       ),
     createField,
-    Field: Field as never,
+    Field: Field,
   }
 }

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

@@ -1,5 +1,4 @@
-/// <reference lib="dom" />
-import { assertType } from 'vitest'
+import { assertType, it } from 'vitest'
 import { createForm } from '../createForm'
 
 it('should type state.value properly', () => {
@@ -15,7 +14,7 @@ it('should type state.value properly', () => {
     )
 
     return (
-      <form.Provider>
+      <>
         <form.Field
           name="firstName"
           children={(field) => {
@@ -30,7 +29,7 @@ it('should type state.value properly', () => {
             return null
           }}
         />
-      </form.Provider>
+      </>
     )
   }
 })
@@ -48,7 +47,7 @@ it('should type onChange properly', () => {
     )
 
     return (
-      <form.Provider>
+      <>
         <form.Field
           name="firstName"
           validators={{
@@ -69,7 +68,7 @@ it('should type onChange properly', () => {
           }}
           children={() => null}
         />
-      </form.Provider>
+      </>
     )
   }
 })

package/src/tests/createField.test.tsx

@@ -1,8 +1,9 @@
-/// <reference lib="dom" />
+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'
-import { createFormFactory } from '../index'
+import '@testing-library/jest-dom/vitest'
+import { Index, Show } from 'solid-js'
+import { createForm, createFormFactory } from '../index'
 import { sleep } from './utils'
 
 const user = userEvent.setup()
@@ -20,7 +21,7 @@ describe('createField', () => {
       const form = formFactory.createForm()
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultValue="FirstName"
@@ -35,7 +36,7 @@ describe('createField', () => {
               )
             }}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -61,7 +62,7 @@ describe('createField', () => {
       }))
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultValue="otherName"
@@ -76,7 +77,7 @@ describe('createField', () => {
               )
             }}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -98,7 +99,7 @@ describe('createField', () => {
       const form = formFactory.createForm()
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             validators={{
@@ -118,7 +119,7 @@ describe('createField', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -141,7 +142,7 @@ describe('createField', () => {
       const form = formFactory.createForm()
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -164,7 +165,7 @@ describe('createField', () => {
               )
             }}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -189,7 +190,7 @@ describe('createField', () => {
       const form = formFactory.createForm()
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -213,7 +214,7 @@ describe('createField', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -240,7 +241,7 @@ describe('createField', () => {
       const form = formFactory.createForm()
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -263,7 +264,7 @@ describe('createField', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -289,7 +290,7 @@ describe('createField', () => {
       const form = formFactory.createForm()
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -317,7 +318,7 @@ describe('createField', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -347,7 +348,7 @@ describe('createField', () => {
       const form = formFactory.createForm()
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -372,7 +373,7 @@ describe('createField', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -384,4 +385,84 @@ describe('createField', () => {
     await waitFor(() => getByText(error))
     expect(getByText(error)).toBeInTheDocument()
   })
+
+  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()
+              void 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>
+                              </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()
+    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(await findByText('Submit'))
+    expect(fn).toHaveBeenCalledWith({
+      people: [{ name: 'John', age: 0 }],
+    })
+  })
 })

package/src/tests/createForm.test.tsx

@@ -1,6 +1,5 @@
-/// <reference lib="dom" />
+import { describe, expect, it, vi } from 'vitest'
 import { render, screen, waitFor } from '@solidjs/testing-library'
-import '@testing-library/jest-dom'
 import userEvent from '@testing-library/user-event'
 import { Show, createSignal, onCleanup } from 'solid-js'
 import { createForm, createFormFactory } from '../index'
@@ -21,7 +20,7 @@ describe('createForm', () => {
     function Comp() {
       const form = formFactory.createForm()
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultValue={''}
@@ -34,7 +33,7 @@ describe('createForm', () => {
               />
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -62,14 +61,14 @@ describe('createForm', () => {
       }))
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             children={(field) => {
               return <p>{field().state.value}</p>
             }}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -91,7 +90,7 @@ describe('createForm', () => {
       }))
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             children={(field) => {
@@ -106,7 +105,7 @@ describe('createForm', () => {
             }}
           />
           <button onClick={form.handleSubmit}>Submit</button>
-        </form.Provider>
+        </>
       )
     }
 
@@ -141,9 +140,9 @@ describe('createForm', () => {
             <button onClick={() => setMountForm(true)}>Mount form</button>
           }
         >
-          <form.Provider>
+          <>
             <h1>Form mounted</h1>
-          </form.Provider>
+          </>
         </Show>
       )
     }
@@ -173,7 +172,7 @@ describe('createForm', () => {
       const errors = form.useStore((s) => s.errors)
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             children={(field) => (
@@ -189,7 +188,7 @@ describe('createForm', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -220,7 +219,7 @@ describe('createForm', () => {
       onCleanup(form.store.subscribe(() => setErrors(form.state.errorMap)))
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -239,7 +238,7 @@ describe('createForm', () => {
               )
             }}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -274,7 +273,7 @@ describe('createForm', () => {
       onCleanup(form.store.subscribe(() => setErrors(form.state.errorMap)))
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -292,7 +291,7 @@ describe('createForm', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -329,7 +328,7 @@ describe('createForm', () => {
       onCleanup(form.store.subscribe(() => setErrors(form.state.errorMap)))
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -346,7 +345,7 @@ describe('createForm', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -386,7 +385,7 @@ describe('createForm', () => {
       onCleanup(form.store.subscribe(() => setErrors(form.state.errorMap)))
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -404,7 +403,7 @@ describe('createForm', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -450,7 +449,7 @@ describe('createForm', () => {
       )
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -467,7 +466,7 @@ describe('createForm', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 

package/src/tests/createFormFactory.test.tsx

@@ -1,6 +1,5 @@
-/// <reference lib="dom" />
+import { describe, expect, it } from 'vitest'
 import { render } from '@solidjs/testing-library'
-import '@testing-library/jest-dom'
 import { createFormFactory } from '../index'
 
 describe('createFormFactory', () => {
@@ -21,14 +20,14 @@ describe('createFormFactory', () => {
       const form = formFactory.createForm()
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             children={(field) => {
               return <p>{field().state.value}</p>
             }}
           />
-        </form.Provider>
+        </>
       )
     }
 

package/src/types.ts

@@ -1,7 +1,7 @@
 import type {
   DeepKeys,
   DeepValue,
-  FieldOptions,
+  FieldApiOptions,
   Validator,
 } from '@tanstack/form-core'
 
@@ -15,6 +15,12 @@ export type CreateFieldOptions<
     | Validator<TParentData, unknown>
     | undefined = undefined,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
-> = FieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
+> = FieldApiOptions<
+  TParentData,
+  TName,
+  TFieldValidator,
+  TFormValidator,
+  TData
+> & {
   mode?: 'value' | 'array'
 }

package/dist/cjs/formContext.cjs

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const solidJs = require("solid-js");
-const formContext = solidJs.createContext(void 0);
-function useFormContext() {
-  const formApi = solidJs.useContext(formContext);
-  if (!formApi)
-    throw new Error(`You are trying to use the form API outside of a form!`);
-  return formApi;
-}
-exports.formContext = formContext;
-exports.useFormContext = useFormContext;
-//# sourceMappingURL=formContext.cjs.map

package/dist/cjs/formContext.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"formContext.cjs","sources":["../../src/formContext.ts"],"sourcesContent":["import { createContext, useContext } from 'solid-js'\nimport type { FormApi, Validator } from '@tanstack/form-core'\n\ntype FormContextType =\n  | undefined\n  | {\n      formApi: FormApi<any, Validator<any, unknown> | undefined>\n      parentFieldName?: string\n    }\n\nexport const formContext = createContext<FormContextType>(undefined)\n\nexport function useFormContext() {\n  const formApi: FormContextType = useContext(formContext)\n\n  if (!formApi)\n    throw new Error(`You are trying to use the form API outside of a form!`)\n\n  return formApi\n}\n"],"names":["createContext","useContext"],"mappings":";;;AAUa,MAAA,cAAcA,QAAAA,cAA+B,MAAS;AAE5D,SAAS,iBAAiB;AACzB,QAAA,UAA2BC,mBAAW,WAAW;AAEvD,MAAI,CAAC;AACG,UAAA,IAAI,MAAM,uDAAuD;AAElE,SAAA;AACT;;;"}

package/dist/cjs/formContext.d.cts

@@ -1,11 +0,0 @@
-import type { FormApi, Validator } from '@tanstack/form-core';
-type FormContextType = undefined | {
-    formApi: FormApi<any, Validator<any, unknown> | undefined>;
-    parentFieldName?: string;
-};
-export declare const formContext: import("solid-js").Context<FormContextType>;
-export declare function useFormContext(): {
-    formApi: FormApi<any, Validator<any, unknown> | undefined>;
-    parentFieldName?: string | undefined;
-};
-export {};

package/dist/esm/formContext.d.ts

@@ -1,11 +0,0 @@
-import type { FormApi, Validator } from '@tanstack/form-core';
-type FormContextType = undefined | {
-    formApi: FormApi<any, Validator<any, unknown> | undefined>;
-    parentFieldName?: string;
-};
-export declare const formContext: import("solid-js").Context<FormContextType>;
-export declare function useFormContext(): {
-    formApi: FormApi<any, Validator<any, unknown> | undefined>;
-    parentFieldName?: string | undefined;
-};
-export {};

package/dist/esm/formContext.js

@@ -1,13 +0,0 @@
-import { createContext, useContext } from "solid-js";
-const formContext = createContext(void 0);
-function useFormContext() {
-  const formApi = useContext(formContext);
-  if (!formApi)
-    throw new Error(`You are trying to use the form API outside of a form!`);
-  return formApi;
-}
-export {
-  formContext,
-  useFormContext
-};
-//# sourceMappingURL=formContext.js.map

package/dist/esm/formContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"formContext.js","sources":["../../src/formContext.ts"],"sourcesContent":["import { createContext, useContext } from 'solid-js'\nimport type { FormApi, Validator } from '@tanstack/form-core'\n\ntype FormContextType =\n  | undefined\n  | {\n      formApi: FormApi<any, Validator<any, unknown> | undefined>\n      parentFieldName?: string\n    }\n\nexport const formContext = createContext<FormContextType>(undefined)\n\nexport function useFormContext() {\n  const formApi: FormContextType = useContext(formContext)\n\n  if (!formApi)\n    throw new Error(`You are trying to use the form API outside of a form!`)\n\n  return formApi\n}\n"],"names":[],"mappings":";AAUa,MAAA,cAAc,cAA+B,MAAS;AAE5D,SAAS,iBAAiB;AACzB,QAAA,UAA2B,WAAW,WAAW;AAEvD,MAAI,CAAC;AACG,UAAA,IAAI,MAAM,uDAAuD;AAElE,SAAA;AACT;"}

package/src/formContext.ts

@@ -1,20 +0,0 @@
-import { createContext, useContext } from 'solid-js'
-import type { FormApi, Validator } from '@tanstack/form-core'
-
-type FormContextType =
-  | undefined
-  | {
-      formApi: FormApi<any, Validator<any, unknown> | undefined>
-      parentFieldName?: string
-    }
-
-export const formContext = createContext<FormContextType>(undefined)
-
-export function useFormContext() {
-  const formApi: FormContextType = useContext(formContext)
-
-  if (!formApi)
-    throw new Error(`You are trying to use the form API outside of a form!`)
-
-  return formApi
-}