@tanstack/solid-form 0.24.0 → 0.24.3

package/dist/createField.d.ts

@@ -2,15 +2,13 @@ import { FieldApi } from '@tanstack/form-core';
 import type { DeepKeys, DeepValue, Narrow, Validator } from '@tanstack/form-core';
 import type { JSXElement } from 'solid-js';
 import type { CreateFieldOptions } from './types';
-declare module '@tanstack/form-core' {
-    interface FieldApi<TParentData, TName extends DeepKeys<TParentData>, 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<TParentData, TFormValidator>;
-    }
+interface SolidFieldApi<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> {
+    Field: FieldComponent<TParentData, TFormValidator>;
 }
 export type CreateField<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(opts: () => {
     name: Narrow<TName>;
-} & Omit<CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'form'>) => () => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
-export declare function createField<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(opts: () => CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>): () => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>;
+} & Omit<CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'form'>) => () => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> & SolidFieldApi<TParentData, TFormValidator>;
+export declare function createField<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(opts: () => CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>): () => never;
 type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, 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, TFieldValidator, TFormValidator, TData>) => JSXElement;
 } & Omit<CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'form'>;

package/dist/createField.jsx

@@ -10,18 +10,19 @@ function makeFieldReactive(fieldApi) {
 }
 export function createField(opts) {
     const options = opts();
-    const fieldApi = new FieldApi(options);
-    fieldApi.Field = Field;
+    const api = new FieldApi(options);
+    const extendedApi = api;
+    extendedApi.Field = Field;
     /**
      * fieldApi.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.
      *
      * createComputed to make sure this effect runs before render effects
      */
-    createComputed(() => fieldApi.update(opts()));
+    createComputed(() => api.update(opts()));
     // Instantiates field meta and removes it when unrendered
-    onMount(() => onCleanup(fieldApi.mount()));
-    return makeFieldReactive(fieldApi);
+    onMount(() => onCleanup(api.mount()));
+    return makeFieldReactive(extendedApi);
 }
 export function Field(props) {
     const fieldApi = createField(() => {

package/dist/createField.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"createField.jsx","sourceRoot":"","sources":["../src/createField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EACL,eAAe,EACf,cAAc,EACd,UAAU,EACV,YAAY,EACZ,SAAS,EACT,OAAO,GACR,MAAM,UAAU,CAAA;AAoDjB,8EAA8E;AAC9E,SAAS,iBAAiB,CACxB,QAAmB;IAEnB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC,CAAA;IAC3C,MAAM,YAAY,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,EAAE,QAAQ,CAAU,CAAC,CAAA;IAClE,MAAM,gBAAgB,GAAG,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAC3E,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAC3B,OAAO,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAA;AAChC,CAAC;AAED,MAAM,UAAU,WAAW,CAWzB,IAMC;IAED,MAAM,OAAO,GAAG,IAAI,EAAE,CAAA;IAEtB,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,OAAO,CAAC,CAAA;IACtC,QAAQ,CAAC,KAAK,GAAG,KAAc,CAAA;IAE/B;;;;;OAKG;IACH,cAAc,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;IAE7C,yDAAyD;IACzD,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;IAE1C,OAAO,iBAAiB,CAAC,QAAQ,CAAU,CAAA;AAC7C,CAAC;AA0DD,MAAM,UAAU,KAAK,CAWnB,KAgBC;IAED,MAAM,QAAQ,GAAG,WAAW,CAM1B,GAAG,EAAE;QACL,MAAM,EAAE,QAAQ,EAAE,GAAG,YAAY,EAAE,GAAG,KAAK,CAAA;QAC3C,OAAO,YAAY,CAAA;IACrB,CAAC,CAAC,CAAA;IAEF,OAAO,EAAE,CAAC,eAAe,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAA;AACnE,CAAC"}
+{"version":3,"file":"createField.jsx","sourceRoot":"","sources":["../src/createField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAC9C,OAAO,EACL,eAAe,EACf,cAAc,EACd,UAAU,EACV,YAAY,EACZ,SAAS,EACT,OAAO,GACR,MAAM,UAAU,CAAA;AAmDjB,8EAA8E;AAC9E,SAAS,iBAAiB,CAkBxB,QAAmB;IACnB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC,CAAA;IAC3C,MAAM,YAAY,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,EAAE,QAAQ,CAAU,CAAC,CAAA;IAClE,MAAM,gBAAgB,GAAG,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAC3E,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAC3B,OAAO,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAA;AAChC,CAAC;AAED,MAAM,UAAU,WAAW,CAWzB,IAMC;IAED,MAAM,OAAO,GAAG,IAAI,EAAE,CAAA;IAEtB,MAAM,GAAG,GAAG,IAAI,QAAQ,CAAC,OAAO,CAAC,CAAA;IAEjC,MAAM,WAAW,GACf,GAAY,CAAA;IAEd,WAAW,CAAC,KAAK,GAAG,KAAc,CAAA;IAElC;;;;;OAKG;IACH,cAAc,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;IAExC,yDAAyD;IACzD,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;IAErC,OAAO,iBAAiB,CAAC,WAAoB,CAAC,CAAA;AAChD,CAAC;AA0DD,MAAM,UAAU,KAAK,CAWnB,KAgBC;IAED,MAAM,QAAQ,GAAG,WAAW,CAM1B,GAAG,EAAE;QACL,MAAM,EAAE,QAAQ,EAAE,GAAG,YAAY,EAAE,GAAG,KAAK,CAAA;QAC3C,OAAO,YAAY,CAAA;IACrB,CAAC,CAAC,CAAA;IAEF,OAAO,EAAE,CAAC,eAAe,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAA;AACnE,CAAC"}

package/dist/createForm.d.ts

@@ -3,16 +3,14 @@ import { type JSXElement } from 'solid-js';
 import { type CreateField, type FieldComponent } from './createField';
 import type { FormOptions, FormState, Validator } from '@tanstack/form-core';
 type NoInfer<T> = [T][T extends any ? 0 : never];
-declare module '@tanstack/form-core' {
-    interface FormApi<TFormData, TFormValidator> {
-        Field: FieldComponent<TFormData, TFormValidator>;
-        createField: CreateField<TFormData, TFormValidator>;
-        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;
-        }) => JSXElement;
-    }
+interface SolidFormApi<TFormData, TFormValidator extends Validator<TFormData, unknown> | undefined = undefined> {
+    Field: FieldComponent<TFormData, TFormValidator>;
+    createField: CreateField<TFormData, TFormValidator>;
+    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;
+    }) => JSXElement;
 }
-export declare function createForm<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined>(opts?: () => FormOptions<TParentData, TFormValidator>): FormApi<TParentData, TFormValidator>;
+export declare function createForm<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined>(opts?: () => FormOptions<TParentData, TFormValidator>): FormApi<TParentData, TFormValidator> & SolidFormApi<TParentData, TFormValidator>;
 export {};

package/dist/createForm.jsx

@@ -4,19 +4,20 @@ import { useStore } from '@tanstack/solid-store';
 import { Field, createField, } from './createField';
 export function createForm(opts) {
     const options = opts?.();
-    const formApi = new FormApi(options);
-    formApi.Field = (props) => <Field {...props} form={formApi}/>;
-    formApi.createField = (props) => createField(() => {
-        return { ...props(), form: formApi };
+    const api = new FormApi(options);
+    const extendedApi = api;
+    extendedApi.Field = (props) => <Field {...props} form={api}/>;
+    extendedApi.createField = (props) => createField(() => {
+        return { ...props(), form: api };
     });
-    formApi.useStore = (selector) => useStore(formApi.store, selector);
-    formApi.Subscribe = (props) => functionalUpdate(props.children, useStore(formApi.store, props.selector));
-    onMount(formApi.mount);
+    extendedApi.useStore = (selector) => useStore(api.store, selector);
+    extendedApi.Subscribe = (props) => functionalUpdate(props.children, useStore(api.store, props.selector));
+    onMount(api.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.
      */
-    createComputed(() => formApi.update(opts?.()));
-    return formApi;
+    createComputed(() => api.update(opts?.()));
+    return extendedApi;
 }
 //# sourceMappingURL=createForm.jsx.map

package/dist/createForm.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"createForm.jsx","sourceRoot":"","sources":["../src/createForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAC/D,OAAO,EAAmB,cAAc,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAEL,KAAK,EAEL,WAAW,GACZ,MAAM,eAAe,CAAA;AAoBtB,MAAM,UAAU,UAAU,CAMxB,IAAqD;IAErD,MAAM,OAAO,GAAG,IAAI,EAAE,EAAE,CAAA;IACxB,MAAM,OAAO,GAAG,IAAI,OAAO,CAA8B,OAAO,CAAC,CAAA;IAEjE,OAAO,CAAC,KAAK,GAAG,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,EAAG,CAAA;IAC9D,OAAO,CAAC,WAAW,GAAG,CAAC,KAAK,EAAE,EAAE,CAC9B,WAAW,CAAC,GAAG,EAAE;QACf,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAA;IACtC,CAAC,CAAC,CAAA;IACJ,OAAO,CAAC,QAAQ,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;IAClE,OAAO,CAAC,SAAS,GAAG,CAAC,KAAK,EAAE,EAAE,CAC5B,gBAAgB,CAAC,KAAK,CAAC,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;IAE3E,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;IAEtB;;;OAGG;IACH,cAAc,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAA;IAE9C,OAAO,OAAO,CAAA;AAChB,CAAC"}
+{"version":3,"file":"createForm.jsx","sourceRoot":"","sources":["../src/createForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAC/D,OAAO,EAAmB,cAAc,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAEL,KAAK,EAEL,WAAW,GACZ,MAAM,eAAe,CAAA;AAoBtB,MAAM,UAAU,UAAU,CAKxB,IAAqD;IACrD,MAAM,OAAO,GAAG,IAAI,EAAE,EAAE,CAAA;IACxB,MAAM,GAAG,GAAG,IAAI,OAAO,CAA8B,OAAO,CAAC,CAAA;IAC7D,MAAM,WAAW,GACf,GAAY,CAAA;IAEd,WAAW,CAAC,KAAK,GAAG,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,EAAG,CAAA;IAC9D,WAAW,CAAC,WAAW,GAAG,CAAC,KAAK,EAAE,EAAE,CAClC,WAAW,CAAC,GAAG,EAAE;QACf,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,CAAA;IAClC,CAAC,CAAC,CAAA;IACJ,WAAW,CAAC,QAAQ,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;IAClE,WAAW,CAAC,SAAS,GAAG,CAAC,KAAK,EAAE,EAAE,CAChC,gBAAgB,CAAC,KAAK,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEvE,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;IAElB;;;OAGG;IACH,cAAc,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAA;IAE1C,OAAO,WAAW,CAAA;AACpB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-form",
-  "version": "0.24.0",
+  "version": "0.24.3",
   "description": "Powerful, type-safe forms for Solid.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@tanstack/solid-store": "^0.5.0",
-    "@tanstack/form-core": "0.24.0"
+    "@tanstack/form-core": "0.24.3"
   },
   "peerDependencies": {
     "solid-js": "^1.6.0"

package/src/createField.tsx

@@ -17,21 +17,13 @@ import type {
 import type { JSXElement } from 'solid-js'
 import type { CreateFieldOptions } from './types'
 
-declare module '@tanstack/form-core' {
-  // eslint-disable-next-line no-shadow
-  interface FieldApi<
-    TParentData,
-    TName extends DeepKeys<TParentData>,
-    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<TParentData, TFormValidator>
-  }
+interface SolidFieldApi<
+  TParentData,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
+> {
+  Field: FieldComponent<TParentData, TFormValidator>
 }
 
 export type CreateField<
@@ -56,12 +48,35 @@ export type CreateField<
     >,
     'form'
   >,
-) => () => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData>
+) => () => FieldApi<
+  TParentData,
+  TName,
+  TFieldValidator,
+  TFormValidator,
+  TData
+> &
+  SolidFieldApi<TParentData, TFormValidator>
 
 // ugly way to trick solid into triggering updates for changes on the fieldApi
-function makeFieldReactive<FieldApiT extends FieldApi<any, any, any, any>>(
-  fieldApi: FieldApiT,
-): () => FieldApiT {
+function makeFieldReactive<
+  TParentData,
+  TName extends DeepKeys<TParentData>,
+  TFieldValidator extends
+    | Validator<DeepValue<TParentData, TName>, unknown>
+    | undefined = undefined,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
+  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
+  FieldApiT extends FieldApi<
+    TParentData,
+    TName,
+    TFieldValidator,
+    TFormValidator,
+    TData
+  > = FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> &
+    SolidFieldApi<TParentData, TFormValidator>,
+>(fieldApi: FieldApiT): () => FieldApiT {
   const [flag, setFlag] = createSignal(false)
   const fieldApiMemo = createMemo(() => [flag(), fieldApi] as const)
   const unsubscribeStore = fieldApi.store.subscribe(() => setFlag((f) => !f))
@@ -87,11 +102,15 @@ export function createField<
     TFormValidator,
     TData
   >,
-): () => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, TData> {
+) {
   const options = opts()
 
-  const fieldApi = new FieldApi(options)
-  fieldApi.Field = Field as never
+  const api = new FieldApi(options)
+
+  const extendedApi: typeof api & SolidFieldApi<TParentData, TFormValidator> =
+    api as never
+
+  extendedApi.Field = Field as never
 
   /**
    * fieldApi.update should not have any side effects. Think of it like a `useRef`
@@ -99,12 +118,12 @@ export function createField<
    *
    * createComputed to make sure this effect runs before render effects
    */
-  createComputed(() => fieldApi.update(opts()))
+  createComputed(() => api.update(opts()))
 
   // Instantiates field meta and removes it when unrendered
-  onMount(() => onCleanup(fieldApi.mount()))
+  onMount(() => onCleanup(api.mount()))
 
-  return makeFieldReactive(fieldApi) as never
+  return makeFieldReactive(extendedApi as never)
 }
 
 type FieldComponentProps<

package/src/createForm.tsx

@@ -11,19 +11,19 @@ import type { FormOptions, FormState, Validator } from '@tanstack/form-core'
 
 type NoInfer<T> = [T][T extends any ? 0 : never]
 
-declare module '@tanstack/form-core' {
-  // eslint-disable-next-line no-shadow
-  interface FormApi<TFormData, TFormValidator> {
-    Field: FieldComponent<TFormData, TFormValidator>
-    createField: CreateField<TFormData, TFormValidator>
-    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
-    }) => JSXElement
-  }
+interface SolidFormApi<
+  TFormData,
+  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
+> {
+  Field: FieldComponent<TFormData, TFormValidator>
+  createField: CreateField<TFormData, TFormValidator>
+  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
+  }) => JSXElement
 }
 
 export function createForm<
@@ -31,28 +31,28 @@ export function createForm<
   TFormValidator extends
     | Validator<TParentData, unknown>
     | undefined = undefined,
->(
-  opts?: () => FormOptions<TParentData, TFormValidator>,
-): FormApi<TParentData, TFormValidator> {
+>(opts?: () => FormOptions<TParentData, TFormValidator>) {
   const options = opts?.()
-  const formApi = new FormApi<TParentData, TFormValidator>(options)
+  const api = new FormApi<TParentData, TFormValidator>(options)
+  const extendedApi: typeof api & SolidFormApi<TParentData, TFormValidator> =
+    api as never
 
-  formApi.Field = (props) => <Field {...props} form={formApi} />
-  formApi.createField = (props) =>
+  extendedApi.Field = (props) => <Field {...props} form={api} />
+  extendedApi.createField = (props) =>
     createField(() => {
-      return { ...props(), form: formApi }
+      return { ...props(), form: api }
     })
-  formApi.useStore = (selector) => useStore(formApi.store, selector)
-  formApi.Subscribe = (props) =>
-    functionalUpdate(props.children, useStore(formApi.store, props.selector))
+  extendedApi.useStore = (selector) => useStore(api.store, selector)
+  extendedApi.Subscribe = (props) =>
+    functionalUpdate(props.children, useStore(api.store, props.selector))
 
-  onMount(formApi.mount)
+  onMount(api.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.
    */
-  createComputed(() => formApi.update(opts?.()))
+  createComputed(() => api.update(opts?.()))
 
-  return formApi
+  return extendedApi
 }