@tanstack/solid-form 0.13.7 → 0.16.0

package/dist/cjs/createField.cjs

@@ -3,7 +3,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const web = require("solid-js/web");
 const formCore = require("@tanstack/form-core");
 const solidJs = require("solid-js");
-const formContext = require("./formContext.cjs");
 function makeFieldReactive(fieldApi) {
   const [flag, setFlag] = solidJs.createSignal(false);
   const fieldApiMemo = solidJs.createMemo(() => [flag(), fieldApi]);
@@ -12,22 +11,10 @@ function makeFieldReactive(fieldApi) {
   return () => fieldApiMemo()[1];
 }
 function createField(opts) {
-  const {
-    formApi,
-    parentFieldName
-  } = formContext.useFormContext();
   const options = opts();
-  const name = (typeof options.index === "number" ? [parentFieldName, options.index, options.name] : [parentFieldName, options.name]).filter((d) => d !== void 0).join(".");
-  const fieldApi = new formCore.FieldApi({
-    ...options,
-    form: formApi,
-    name
-  });
+  const fieldApi = new formCore.FieldApi(options);
   fieldApi.Field = Field;
-  solidJs.createComputed(() => fieldApi.update({
-    ...opts(),
-    form: formApi
-  }));
+  solidJs.createComputed(() => fieldApi.update(opts()));
   solidJs.onMount(() => solidJs.onCleanup(fieldApi.mount()));
   return makeFieldReactive(fieldApi);
 }
@@ -39,17 +26,7 @@ function Field(props) {
     } = props;
     return fieldOptions;
   });
-  return web.createComponent(formContext.formContext.Provider, {
-    get value() {
-      return {
-        formApi: fieldApi().form,
-        parentFieldName: String(fieldApi().name)
-      };
-    },
-    get children() {
-      return solidJs.createComponent(() => props.children(fieldApi), {});
-    }
-  });
+  return web.memo(() => solidJs.createComponent(() => props.children(fieldApi), {}));
 }
 exports.Field = Field;
 exports.createField = createField;

package/dist/cjs/createField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"createField.cjs","sources":["../../src/createField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport {\n  createComponent,\n  createComputed,\n  createMemo,\n  createSignal,\n  onCleanup,\n  onMount,\n} from 'solid-js'\nimport { formContext, useFormContext } from './formContext'\n\nimport type {\n  DeepKeys,\n  DeepValue,\n  Narrow,\n  Validator,\n} from '@tanstack/form-core'\nimport type { JSXElement } from 'solid-js'\nimport type { CreateFieldOptions } from './types'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<\n    TParentData,\n    TName extends DeepKeys<TParentData>,\n    TFieldValidator extends\n      | Validator<DeepValue<TParentData, TName>, unknown>\n      | undefined = undefined,\n    TFormValidator extends\n      | Validator<TParentData, unknown>\n      | undefined = undefined,\n    TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n  > {\n    Field: FieldComponent<TParentData, TFormValidator>\n  }\n}\n\nexport type CreateField<TParentData> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>(\n  opts: () => { name: Narrow<TName> } & CreateFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator\n  >,\n) => () => FieldApi<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  DeepValue<TParentData, TName>\n>\n\n// ugly way to trick solid into triggering updates for changes on the fieldApi\nfunction makeFieldReactive<FieldApiT extends FieldApi<any, any, any, any>>(\n  fieldApi: FieldApiT,\n): () => FieldApiT {\n  const [flag, setFlag] = createSignal(false)\n  const fieldApiMemo = createMemo(() => [flag(), fieldApi] as const)\n  const unsubscribeStore = fieldApi.store.subscribe(() => setFlag((f) => !f))\n  onCleanup(unsubscribeStore)\n  return () => fieldApiMemo()[1]\n}\n\nexport function createField<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>(\n  opts: () => CreateFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator\n  >,\n): () => FieldApi<TParentData, TName, TFieldValidator, TFormValidator> {\n  // Get the form API either manually or from context\n  const { formApi, parentFieldName } = useFormContext()\n\n  const options = opts()\n  const name = (\n    typeof options.index === 'number'\n      ? [parentFieldName, options.index, options.name]\n      : [parentFieldName, options.name]\n  )\n    .filter((d) => d !== undefined)\n    .join('.')\n\n  const fieldApi = new FieldApi({\n    ...options,\n    form: formApi,\n    name: name as typeof options.name as never,\n  })\n  fieldApi.Field = Field as never\n\n  /**\n   * fieldApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   *\n   * createComputed to make sure this effect runs before render effects\n   */\n  createComputed(() => fieldApi.update({ ...opts(), form: formApi } as never))\n\n  // Instantiates field meta and removes it when unrendered\n  onMount(() => onCleanup(fieldApi.mount()))\n\n  return makeFieldReactive(fieldApi) as never\n}\n\ntype FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = {\n  children: (\n    fieldApi: () => FieldApi<\n      TParentData,\n      TName,\n      TFieldValidator,\n      TFormValidator,\n      TData\n    >,\n  ) => JSXElement\n} & (TParentData extends any[]\n  ? {\n      name?: TName\n      index: number\n    }\n  : {\n      name: TName\n      index?: never\n    }) &\n  Omit<\n    CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n    'name' | 'index'\n  >\n\nexport type FieldComponent<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentProps<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  TData\n>) => JSXElement\n\nexport function Field<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>(\n  props: {\n    children: (\n      fieldApi: () => FieldApi<\n        TParentData,\n        TName,\n        TFieldValidator,\n        TFormValidator\n      >,\n    ) => JSXElement\n  } & CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n) {\n  const fieldApi = createField<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator\n  >(() => {\n    const { children, ...fieldOptions } = props\n    return fieldOptions\n  })\n\n  return (\n    <formContext.Provider\n      value={{\n        formApi: fieldApi().form as never,\n        parentFieldName: String(fieldApi().name),\n      }}\n    >\n      {/* createComponent to make sure the signals in the children component are not tracked */}\n      {createComponent(() => props.children(fieldApi), {})}\n    </formContext.Provider>\n  )\n}\n"],"names":["makeFieldReactive","fieldApi","flag","setFlag","createSignal","fieldApiMemo","createMemo","unsubscribeStore","store","subscribe","f","onCleanup","createField","opts","formApi","parentFieldName","useFormContext","options","name","index","filter","d","undefined","join","FieldApi","form","Field","createComputed","update","onMount","mount","props","children","fieldOptions","_$createComponent","formContext","Provider","value","String","createComponent"],"mappings":";;;;;;AA6DA,SAASA,kBACPC,UACiB;AACjB,QAAM,CAACC,MAAMC,OAAO,IAAIC,QAAY,aAAC,KAAK;AAC1C,QAAMC,eAAeC,QAAAA,WAAW,MAAM,CAACJ,KAAM,GAAED,QAAQ,CAAU;AACjE,QAAMM,mBAAmBN,SAASO,MAAMC,UAAU,MAAMN,QAASO,OAAM,CAACA,CAAC,CAAC;AAC1EC,UAAS,UAACJ,gBAAgB;AAC1B,SAAO,MAAMF,eAAe,CAAC;AAC/B;AAEO,SAASO,YAUdC,MAMqE;AAErE,QAAM;AAAA,IAAEC;AAAAA,IAASC;AAAAA,EAAiB,IAAGC,YAAc,eAAA;AAEnD,QAAMC,UAAUJ;AAChB,QAAMK,QACJ,OAAOD,QAAQE,UAAU,WACrB,CAACJ,iBAAiBE,QAAQE,OAAOF,QAAQC,IAAI,IAC7C,CAACH,iBAAiBE,QAAQC,IAAI,GAEjCE,OAAQC,OAAMA,MAAMC,MAAS,EAC7BC,KAAK,GAAG;AAEX,QAAMtB,WAAW,IAAIuB,kBAAS;AAAA,IAC5B,GAAGP;AAAAA,IACHQ,MAAMX;AAAAA,IACNI;AAAAA,EACF,CAAC;AACDjB,WAASyB,QAAQA;AAQjBC,yBAAe,MAAM1B,SAAS2B,OAAO;AAAA,IAAE,GAAGf,KAAM;AAAA,IAAEY,MAAMX;AAAAA,EAAkB,CAAA,CAAC;AAG3Ee,UAAAA,QAAQ,MAAMlB,QAAS,UAACV,SAAS6B,MAAK,CAAE,CAAC;AAEzC,SAAO9B,kBAAkBC,QAAQ;AACnC;AA0DO,SAASyB,MAUdK,OAUA;AACA,QAAM9B,WAAWW,YAKf,MAAM;AACN,UAAM;AAAA,MAAEoB;AAAAA,MAAU,GAAGC;AAAAA,IAAc,IAAGF;AACtC,WAAOE;AAAAA,EACT,CAAC;AAED,SAAAC,IAAA,gBACGC,YAAW,YAACC,UAAQ;AAAA,IAAA,IACnBC,QAAK;AAAA,aAAE;AAAA,QACLvB,SAASb,SAAQ,EAAGwB;AAAAA,QACpBV,iBAAiBuB,OAAOrC,SAAU,EAACiB,IAAI;AAAA;IACxC;AAAA,IAAA,IAAAc,WAAA;AAAA,aAGAO,QAAAA,gBAAgB,MAAMR,MAAMC,SAAS/B,QAAQ,GAAG,CAAA,CAAE;AAAA,IAAC;AAAA,EAAA,CAAA;AAG1D;;;"}
+{"version":3,"file":"createField.cjs","sources":["../../src/createField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport {\n  createComponent,\n  createComputed,\n  createMemo,\n  createSignal,\n  onCleanup,\n  onMount,\n} from 'solid-js'\n\nimport type {\n  DeepKeys,\n  DeepValue,\n  Narrow,\n  Validator,\n} from '@tanstack/form-core'\nimport type { JSXElement } from 'solid-js'\nimport type { CreateFieldOptions } from './types'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<\n    TParentData,\n    TName extends DeepKeys<TParentData>,\n    TFieldValidator extends\n      | Validator<DeepValue<TParentData, TName>, unknown>\n      | undefined = undefined,\n    TFormValidator extends\n      | Validator<TParentData, unknown>\n      | undefined = undefined,\n    TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n  > {\n    Field: FieldComponent<TParentData, TFormValidator>\n  }\n}\n\nexport type CreateField<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n>(\n  opts: () => { name: Narrow<TName> } & Omit<\n    CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n    'form'\n  >,\n) => () => FieldApi<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  DeepValue<TParentData, TName>\n>\n\n// ugly way to trick solid into triggering updates for changes on the fieldApi\nfunction makeFieldReactive<FieldApiT extends FieldApi<any, any, any, any>>(\n  fieldApi: FieldApiT,\n): () => FieldApiT {\n  const [flag, setFlag] = createSignal(false)\n  const fieldApiMemo = createMemo(() => [flag(), fieldApi] as const)\n  const unsubscribeStore = fieldApi.store.subscribe(() => setFlag((f) => !f))\n  onCleanup(unsubscribeStore)\n  return () => fieldApiMemo()[1]\n}\n\nexport function createField<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>(\n  opts: () => CreateFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator\n  >,\n): () => FieldApi<TParentData, TName, TFieldValidator, TFormValidator> {\n  const options = opts()\n\n  const fieldApi = new FieldApi(options)\n  fieldApi.Field = Field as never\n\n  /**\n   * fieldApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   *\n   * createComputed to make sure this effect runs before render effects\n   */\n  createComputed(() => fieldApi.update(opts()))\n\n  // Instantiates field meta and removes it when unrendered\n  onMount(() => onCleanup(fieldApi.mount()))\n\n  return makeFieldReactive(fieldApi) as never\n}\n\ntype FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = {\n  children: (\n    fieldApi: () => FieldApi<\n      TParentData,\n      TName,\n      TFieldValidator,\n      TFormValidator,\n      TData\n    >,\n  ) => JSXElement\n} & Omit<\n  CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n  'form'\n>\n\nexport type FieldComponent<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n  children,\n  ...fieldOptions\n}: Omit<\n  FieldComponentProps<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n  'form'\n>) => JSXElement\n\nexport function Field<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>(\n  props: {\n    children: (\n      fieldApi: () => FieldApi<\n        TParentData,\n        TName,\n        TFieldValidator,\n        TFormValidator\n      >,\n    ) => JSXElement\n  } & CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n) {\n  const fieldApi = createField<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator\n  >(() => {\n    const { children, ...fieldOptions } = props\n    return fieldOptions\n  })\n\n  return <>{createComponent(() => props.children(fieldApi), {})}</>\n}\n"],"names":["makeFieldReactive","fieldApi","flag","setFlag","createSignal","fieldApiMemo","createMemo","unsubscribeStore","store","subscribe","f","onCleanup","createField","opts","options","FieldApi","Field","createComputed","update","onMount","mount","props","children","fieldOptions","_$memo","createComponent"],"mappings":";;;;;AA4DA,SAASA,kBACPC,UACiB;AACjB,QAAM,CAACC,MAAMC,OAAO,IAAIC,qBAAa,KAAK;AAC1C,QAAMC,eAAeC,QAAAA,WAAW,MAAM,CAACJ,KAAK,GAAGD,QAAQ,CAAW;AAC5DM,QAAAA,mBAAmBN,SAASO,MAAMC,UAAU,MAAMN,QAASO,CAAAA,MAAM,CAACA,CAAC,CAAC;AAC1EC,UAAAA,UAAUJ,gBAAgB;AACnB,SAAA,MAAMF,eAAe,CAAC;AAC/B;AAEO,SAASO,YAUdC,MAMqE;AACrE,QAAMC,UAAUD;AAEVZ,QAAAA,WAAW,IAAIc,kBAASD,OAAO;AACrCb,WAASe,QAAQA;AAQjBC,UAAAA,eAAe,MAAMhB,SAASiB,OAAOL,KAAAA,CAAM,CAAC;AAG5CM,UAAAA,QAAQ,MAAMR,QAAAA,UAAUV,SAASmB,MAAAA,CAAO,CAAC;AAEzC,SAAOpB,kBAAkBC,QAAQ;AACnC;AAoDO,SAASe,MAUdK,OAUA;AACMpB,QAAAA,WAAWW,YAKf,MAAM;AACA,UAAA;AAAA,MAAEU;AAAAA,MAAU,GAAGC;AAAAA,IAAiBF,IAAAA;AAC/BE,WAAAA;AAAAA,EAAAA,CACR;AAEDC,SAAAA,IAAAA,KAAA,MAAUC,QAAAA,gBAAgB,MAAMJ,MAAMC,SAASrB,QAAQ,GAAG,CAAE,CAAA,CAAC;AAC/D;;;"}

package/dist/cjs/createField.d.cts

@@ -7,20 +7,14 @@ declare module '@tanstack/form-core' {
         Field: FieldComponent<TParentData, TFormValidator>;
     }
 }
-export type CreateField<TParentData> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined>(opts: () => {
+export type CreateField<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined>(opts: () => {
     name: Narrow<TName>;
-} & CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>) => () => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, DeepValue<TParentData, TName>>;
+} & Omit<CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>, 'form'>) => () => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, DeepValue<TParentData, TName>>;
 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>(opts: () => CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>): () => FieldApi<TParentData, TName, TFieldValidator, TFormValidator>;
 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;
-} & (TParentData extends any[] ? {
-    name?: TName;
-    index: number;
-} : {
-    name: TName;
-    index?: never;
-}) & Omit<CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>, 'name' | 'index'>;
-export type FieldComponent<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>>({ children, ...fieldOptions }: FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) => JSXElement;
+} & Omit<CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>, 'form'>;
+export type FieldComponent<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>>({ children, ...fieldOptions }: Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'form'>) => JSXElement;
 export declare function Field<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined>(props: {
     children: (fieldApi: () => FieldApi<TParentData, TName, TFieldValidator, TFormValidator>) => JSXElement;
 } & CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>): import("solid-js").JSX.Element;

package/dist/cjs/createForm.cjs

@@ -5,22 +5,21 @@ const formCore = require("@tanstack/form-core");
 const solidJs = require("solid-js");
 const solidStore = require("@tanstack/solid-store");
 const createField = require("./createField.cjs");
-const formContext = require("./formContext.cjs");
 function createForm(opts) {
   const options = opts == null ? void 0 : opts();
   const formApi = new formCore.FormApi(options);
-  formApi.Provider = function Provider(props) {
-    solidJs.onMount(formApi.mount);
-    return web.createComponent(formContext.formContext.Provider, web.mergeProps(props, {
-      value: {
-        formApi
-      }
-    }));
-  };
-  formApi.Field = createField.Field;
-  formApi.createField = createField.createField;
+  formApi.Field = (props) => web.createComponent(createField.Field, web.mergeProps(props, {
+    form: formApi
+  }));
+  formApi.createField = (props) => createField.createField(() => {
+    return {
+      ...props(),
+      form: formApi
+    };
+  });
   formApi.useStore = (selector) => solidStore.useStore(formApi.store, selector);
   formApi.Subscribe = (props) => formCore.functionalUpdate(props.children, solidStore.useStore(formApi.store, props.selector));
+  solidJs.onMount(formApi.mount);
   solidJs.createComputed(() => formApi.update(opts == null ? void 0 : opts()));
   return formApi;
 }

package/dist/cjs/createForm.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"createForm.cjs","sources":["../../src/createForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { createComputed, onMount } from 'solid-js'\nimport { useStore } from '@tanstack/solid-store'\nimport {\n  type CreateField,\n  Field,\n  type FieldComponent,\n  createField,\n} from './createField'\nimport { formContext } from './formContext'\nimport type { JSXElement } from 'solid-js'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\n\ntype NoInfer<T> = [T][T extends any ? 0 : never]\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData, TFormValidator> {\n    Provider: (props: { children: any }) => JSXElement\n    Field: FieldComponent<TFormData, TFormValidator>\n    createField: CreateField<TFormData>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => () => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      children: ((state: () => NoInfer<TSelected>) => JSXElement) | JSXElement\n    }) => JSXElement\n  }\n}\n\nexport function createForm<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>(\n  opts?: () => FormOptions<TParentData, TFormValidator>,\n): FormApi<TParentData, TFormValidator> {\n  const options = opts?.()\n  const formApi = new FormApi<TParentData, TFormValidator>(options)\n\n  formApi.Provider = function Provider(props) {\n    onMount(formApi.mount)\n    return (\n      <formContext.Provider {...props} value={{ formApi: formApi as never }} />\n    )\n  }\n  formApi.Field = Field as any\n  formApi.createField = createField as CreateField<TParentData>\n  formApi.useStore = (selector) => useStore(formApi.store, selector)\n  formApi.Subscribe = (props) =>\n    functionalUpdate(props.children, useStore(formApi.store, props.selector))\n\n  /**\n   * formApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  createComputed(() => formApi.update(opts?.()))\n\n  return formApi\n}\n"],"names":["createForm","opts","options","formApi","FormApi","Provider","props","onMount","mount","_$createComponent","formContext","_$mergeProps","value","Field","createField","useStore","selector","store","Subscribe","functionalUpdate","children","createComputed","update"],"mappings":";;;;;;;;AA+BO,SAASA,WAMdC,MACsC;AACtC,QAAMC,UAAUD;AAChB,QAAME,UAAU,IAAIC,iBAAqCF,OAAO;AAEhEC,UAAQE,WAAW,SAASA,SAASC,OAAO;AAC1CC,oBAAQJ,QAAQK,KAAK;AACrB,WAAAC,IAAA,gBACGC,YAAW,YAACL,UAAQM,IAAAA,WAAKL,OAAK;AAAA,MAAEM,OAAO;AAAA,QAAET;AAAAA,MAA0B;AAAA,IAAC,CAAA,CAAA;AAAA;AAGzEA,UAAQU,QAAQA;AAChBV,UAAQW,cAAcA;AACtBX,UAAQY,WAAYC,cAAaD,WAAAA,SAASZ,QAAQc,OAAOD,QAAQ;AACjEb,UAAQe,YAAaZ,WACnBa,SAAAA,iBAAiBb,MAAMc,UAAUL,WAAQ,SAACZ,QAAQc,OAAOX,MAAMU,QAAQ,CAAC;AAM1EK,UAAAA,eAAe,MAAMlB,QAAQmB,OAAOrB,8BAAQ,CAAC;AAE7C,SAAOE;AACT;;"}
+{"version":3,"file":"createForm.cjs","sources":["../../src/createForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { type JSXElement, createComputed, onMount } from 'solid-js'\nimport { useStore } from '@tanstack/solid-store'\nimport {\n  type CreateField,\n  Field,\n  type FieldComponent,\n  createField,\n} from './createField'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\n\ntype NoInfer<T> = [T][T extends any ? 0 : never]\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData, TFormValidator> {\n    Field: FieldComponent<TFormData, TFormValidator>\n    createField: CreateField<TFormData, TFormValidator>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => () => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      children: ((state: () => NoInfer<TSelected>) => JSXElement) | JSXElement\n    }) => JSXElement\n  }\n}\n\nexport function createForm<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>(\n  opts?: () => FormOptions<TParentData, TFormValidator>,\n): FormApi<TParentData, TFormValidator> {\n  const options = opts?.()\n  const formApi = new FormApi<TParentData, TFormValidator>(options)\n\n  formApi.Field = (props) => <Field {...props} form={formApi} />\n  formApi.createField = (props) =>\n    createField(() => {\n      return { ...props(), form: formApi }\n    })\n  formApi.useStore = (selector) => useStore(formApi.store, selector)\n  formApi.Subscribe = (props) =>\n    functionalUpdate(props.children, useStore(formApi.store, props.selector))\n\n  onMount(formApi.mount)\n\n  /**\n   * formApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  createComputed(() => formApi.update(opts?.()))\n\n  return formApi\n}\n"],"names":["createForm","opts","options","formApi","FormApi","Field","props","_$createComponent","_$mergeProps","form","createField","useStore","selector","store","Subscribe","functionalUpdate","children","onMount","mount","createComputed","update"],"mappings":";;;;;;;AA4BO,SAASA,WAMdC,MACsC;AACtC,QAAMC,UAAUD;AACVE,QAAAA,UAAU,IAAIC,iBAAqCF,OAAO;AAEhEC,UAAQE,QAASC,CAAAA,UAAKC,IAAMF,gBAAAA,YAAAA,OAAKG,eAAKF,OAAK;AAAA,IAAEG,MAAMN;AAAAA,EAAW,CAAA,CAAA;AACtDO,UAAAA,cAAeJ,CACrBI,UAAAA,YAAAA,YAAY,MAAM;AACT,WAAA;AAAA,MAAE,GAAGJ,MAAM;AAAA,MAAGG,MAAMN;AAAAA,IAAAA;AAAAA,EAAQ,CACpC;AACHA,UAAQQ,WAAYC,CAAAA,aAAaD,WAASR,SAAAA,QAAQU,OAAOD,QAAQ;AACzDE,UAAAA,YAAaR,CACnBS,UAAAA,SAAAA,iBAAiBT,MAAMU,UAAUL,oBAASR,QAAQU,OAAOP,MAAMM,QAAQ,CAAC;AAE1EK,kBAAQd,QAAQe,KAAK;AAMrBC,UAAAA,eAAe,MAAMhB,QAAQiB,OAAOnB,8BAAQ,CAAC;AAEtCE,SAAAA;AACT;;"}

package/dist/cjs/createForm.d.cts

@@ -1,15 +1,12 @@
 import { FormApi } from '@tanstack/form-core';
+import { type JSXElement } from 'solid-js';
 import { type CreateField, type FieldComponent } from './createField.cjs';
-import type { JSXElement } from 'solid-js';
 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> {
-        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;
         Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
             selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;

package/dist/cjs/createFormFactory.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"createFormFactory.cjs","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import { mergeProps } from 'solid-js'\nimport {\n  type CreateField,\n  Field,\n  type FieldComponent,\n  createField,\n} from './createField'\nimport { createForm } from './createForm'\nimport type { FormApi, FormOptions, Validator } from '@tanstack/form-core'\n\nexport type FormFactory<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = {\n  createForm: (\n    opts?: () => FormOptions<TFormData, TFormValidator>,\n  ) => FormApi<TFormData, TFormValidator>\n  createField: CreateField<TFormData>\n  Field: FieldComponent<TFormData, TFormValidator>\n}\n\nexport function createFormFactory<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  defaultOpts?: () => FormOptions<TFormData, TFormValidator>,\n): FormFactory<TFormData, TFormValidator> {\n  return {\n    createForm: (opts) =>\n      createForm<TFormData, TFormValidator>(() =>\n        mergeProps(defaultOpts?.() ?? {}, opts?.() ?? {}),\n      ),\n    createField,\n    Field: Field as never,\n  }\n}\n"],"names":["createForm","mergeProps","createField","Field"],"mappings":";;;;;AAqBO,SAAS,kBAId,aACwC;AACjC,SAAA;AAAA,IACL,YAAY,CAAC,SACXA,WAAA;AAAA,MAAsC,MACpCC,QAAAA,YAAW,iDAAmB,CAAI,IAAA,mCAAY,CAAA,CAAE;AAAA,IAClD;AAAA,IAAA,aACFC,YAAA;AAAA,IAAA,OACAC,YAAA;AAAA,EAAA;AAEJ;;"}
+{"version":3,"file":"createFormFactory.cjs","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import { mergeProps } from 'solid-js'\nimport {\n  type CreateField,\n  Field,\n  type FieldComponent,\n  createField,\n} from './createField'\nimport { createForm } from './createForm'\nimport type { FormApi, FormOptions, Validator } from '@tanstack/form-core'\n\nexport type FormFactory<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = {\n  createForm: (\n    opts?: () => FormOptions<TFormData, TFormValidator>,\n  ) => FormApi<TFormData, TFormValidator>\n  createField: typeof createField\n  Field: typeof Field\n}\n\nexport function createFormFactory<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  defaultOpts?: () => FormOptions<TFormData, TFormValidator>,\n): FormFactory<TFormData, TFormValidator> {\n  return {\n    createForm: (opts) =>\n      createForm<TFormData, TFormValidator>(() =>\n        mergeProps(defaultOpts?.() ?? {}, opts?.() ?? {}),\n      ),\n    createField,\n    Field: Field,\n  }\n}\n"],"names":["createForm","mergeProps","createField","Field"],"mappings":";;;;;AAqBO,SAAS,kBAId,aACwC;AACjC,SAAA;AAAA,IACL,YAAY,CAAC,SACXA,WAAA;AAAA,MAAsC,MACpCC,QAAAA,YAAW,iDAAmB,CAAI,IAAA,mCAAY,CAAA,CAAE;AAAA,IAClD;AAAA,IAAA,aACFC,YAAA;AAAA,IAAA,OACAC,YAAA;AAAA,EAAA;AAEJ;;"}

package/dist/cjs/createFormFactory.d.cts

@@ -1,8 +1,8 @@
-import { type CreateField, type FieldComponent } from './createField.cjs';
+import { Field, createField } from './createField.cjs';
 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: CreateField<TFormData>;
-    Field: FieldComponent<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/cjs/types.d.cts

@@ -1,4 +1,4 @@
-import type { DeepKeys, DeepValue, FieldOptions, Validator } from '@tanstack/form-core';
-export type CreateFieldOptions<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>> = FieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
+import type { DeepKeys, DeepValue, FieldApiOptions, Validator } from '@tanstack/form-core';
+export type CreateFieldOptions<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>> = FieldApiOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
     mode?: 'value' | 'array';
 };

package/dist/esm/createField.d.ts

@@ -7,20 +7,14 @@ declare module '@tanstack/form-core' {
         Field: FieldComponent<TParentData, TFormValidator>;
     }
 }
-export type CreateField<TParentData> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined>(opts: () => {
+export type CreateField<TParentData, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined> = <TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined>(opts: () => {
     name: Narrow<TName>;
-} & CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>) => () => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, DeepValue<TParentData, TName>>;
+} & Omit<CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>, 'form'>) => () => FieldApi<TParentData, TName, TFieldValidator, TFormValidator, DeepValue<TParentData, TName>>;
 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>(opts: () => CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>): () => FieldApi<TParentData, TName, TFieldValidator, TFormValidator>;
 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;
-} & (TParentData extends any[] ? {
-    name?: TName;
-    index: number;
-} : {
-    name: TName;
-    index?: never;
-}) & Omit<CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>, 'name' | 'index'>;
-export type FieldComponent<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>>({ children, ...fieldOptions }: FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) => JSXElement;
+} & Omit<CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>, 'form'>;
+export type FieldComponent<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>>({ children, ...fieldOptions }: Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, 'form'>) => JSXElement;
 export declare function Field<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined>(props: {
     children: (fieldApi: () => FieldApi<TParentData, TName, TFieldValidator, TFormValidator>) => JSXElement;
 } & CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>): import("solid-js").JSX.Element;

package/dist/esm/createField.js

@@ -1,7 +1,6 @@
-import { createComponent } from "solid-js/web";
+import { memo } from "solid-js/web";
 import { FieldApi } from "@tanstack/form-core";
-import { createComputed, onMount, onCleanup, createComponent as createComponent$1, createSignal, createMemo } from "solid-js";
-import { useFormContext, formContext } from "./formContext.js";
+import { createComputed, onMount, onCleanup, createComponent, createSignal, createMemo } from "solid-js";
 function makeFieldReactive(fieldApi) {
   const [flag, setFlag] = createSignal(false);
   const fieldApiMemo = createMemo(() => [flag(), fieldApi]);
@@ -10,22 +9,10 @@ function makeFieldReactive(fieldApi) {
   return () => fieldApiMemo()[1];
 }
 function createField(opts) {
-  const {
-    formApi,
-    parentFieldName
-  } = useFormContext();
   const options = opts();
-  const name = (typeof options.index === "number" ? [parentFieldName, options.index, options.name] : [parentFieldName, options.name]).filter((d) => d !== void 0).join(".");
-  const fieldApi = new FieldApi({
-    ...options,
-    form: formApi,
-    name
-  });
+  const fieldApi = new FieldApi(options);
   fieldApi.Field = Field;
-  createComputed(() => fieldApi.update({
-    ...opts(),
-    form: formApi
-  }));
+  createComputed(() => fieldApi.update(opts()));
   onMount(() => onCleanup(fieldApi.mount()));
   return makeFieldReactive(fieldApi);
 }
@@ -37,17 +24,7 @@ function Field(props) {
     } = props;
     return fieldOptions;
   });
-  return createComponent(formContext.Provider, {
-    get value() {
-      return {
-        formApi: fieldApi().form,
-        parentFieldName: String(fieldApi().name)
-      };
-    },
-    get children() {
-      return createComponent$1(() => props.children(fieldApi), {});
-    }
-  });
+  return memo(() => createComponent(() => props.children(fieldApi), {}));
 }
 export {
   Field,

package/dist/esm/createField.js.map

@@ -1 +1 @@
-{"version":3,"file":"createField.js","sources":["../../src/createField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport {\n  createComponent,\n  createComputed,\n  createMemo,\n  createSignal,\n  onCleanup,\n  onMount,\n} from 'solid-js'\nimport { formContext, useFormContext } from './formContext'\n\nimport type {\n  DeepKeys,\n  DeepValue,\n  Narrow,\n  Validator,\n} from '@tanstack/form-core'\nimport type { JSXElement } from 'solid-js'\nimport type { CreateFieldOptions } from './types'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<\n    TParentData,\n    TName extends DeepKeys<TParentData>,\n    TFieldValidator extends\n      | Validator<DeepValue<TParentData, TName>, unknown>\n      | undefined = undefined,\n    TFormValidator extends\n      | Validator<TParentData, unknown>\n      | undefined = undefined,\n    TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n  > {\n    Field: FieldComponent<TParentData, TFormValidator>\n  }\n}\n\nexport type CreateField<TParentData> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>(\n  opts: () => { name: Narrow<TName> } & CreateFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator\n  >,\n) => () => FieldApi<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  DeepValue<TParentData, TName>\n>\n\n// ugly way to trick solid into triggering updates for changes on the fieldApi\nfunction makeFieldReactive<FieldApiT extends FieldApi<any, any, any, any>>(\n  fieldApi: FieldApiT,\n): () => FieldApiT {\n  const [flag, setFlag] = createSignal(false)\n  const fieldApiMemo = createMemo(() => [flag(), fieldApi] as const)\n  const unsubscribeStore = fieldApi.store.subscribe(() => setFlag((f) => !f))\n  onCleanup(unsubscribeStore)\n  return () => fieldApiMemo()[1]\n}\n\nexport function createField<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>(\n  opts: () => CreateFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator\n  >,\n): () => FieldApi<TParentData, TName, TFieldValidator, TFormValidator> {\n  // Get the form API either manually or from context\n  const { formApi, parentFieldName } = useFormContext()\n\n  const options = opts()\n  const name = (\n    typeof options.index === 'number'\n      ? [parentFieldName, options.index, options.name]\n      : [parentFieldName, options.name]\n  )\n    .filter((d) => d !== undefined)\n    .join('.')\n\n  const fieldApi = new FieldApi({\n    ...options,\n    form: formApi,\n    name: name as typeof options.name as never,\n  })\n  fieldApi.Field = Field as never\n\n  /**\n   * fieldApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   *\n   * createComputed to make sure this effect runs before render effects\n   */\n  createComputed(() => fieldApi.update({ ...opts(), form: formApi } as never))\n\n  // Instantiates field meta and removes it when unrendered\n  onMount(() => onCleanup(fieldApi.mount()))\n\n  return makeFieldReactive(fieldApi) as never\n}\n\ntype FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = {\n  children: (\n    fieldApi: () => FieldApi<\n      TParentData,\n      TName,\n      TFieldValidator,\n      TFormValidator,\n      TData\n    >,\n  ) => JSXElement\n} & (TParentData extends any[]\n  ? {\n      name?: TName\n      index: number\n    }\n  : {\n      name: TName\n      index?: never\n    }) &\n  Omit<\n    CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n    'name' | 'index'\n  >\n\nexport type FieldComponent<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n  children,\n  ...fieldOptions\n}: FieldComponentProps<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  TData\n>) => JSXElement\n\nexport function Field<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>(\n  props: {\n    children: (\n      fieldApi: () => FieldApi<\n        TParentData,\n        TName,\n        TFieldValidator,\n        TFormValidator\n      >,\n    ) => JSXElement\n  } & CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n) {\n  const fieldApi = createField<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator\n  >(() => {\n    const { children, ...fieldOptions } = props\n    return fieldOptions\n  })\n\n  return (\n    <formContext.Provider\n      value={{\n        formApi: fieldApi().form as never,\n        parentFieldName: String(fieldApi().name),\n      }}\n    >\n      {/* createComponent to make sure the signals in the children component are not tracked */}\n      {createComponent(() => props.children(fieldApi), {})}\n    </formContext.Provider>\n  )\n}\n"],"names":["makeFieldReactive","fieldApi","flag","setFlag","createSignal","fieldApiMemo","createMemo","unsubscribeStore","store","subscribe","f","onCleanup","createField","opts","formApi","parentFieldName","useFormContext","options","name","index","filter","d","undefined","join","FieldApi","form","Field","createComputed","update","onMount","mount","props","children","fieldOptions","_$createComponent","formContext","Provider","value","String","createComponent"],"mappings":";;;;AA6DA,SAASA,kBACPC,UACiB;AACjB,QAAM,CAACC,MAAMC,OAAO,IAAIC,aAAa,KAAK;AAC1C,QAAMC,eAAeC,WAAW,MAAM,CAACJ,KAAM,GAAED,QAAQ,CAAU;AACjE,QAAMM,mBAAmBN,SAASO,MAAMC,UAAU,MAAMN,QAASO,OAAM,CAACA,CAAC,CAAC;AAC1EC,YAAUJ,gBAAgB;AAC1B,SAAO,MAAMF,eAAe,CAAC;AAC/B;AAEO,SAASO,YAUdC,MAMqE;AAErE,QAAM;AAAA,IAAEC;AAAAA,IAASC;AAAAA,EAAiB,IAAGC,eAAc;AAEnD,QAAMC,UAAUJ;AAChB,QAAMK,QACJ,OAAOD,QAAQE,UAAU,WACrB,CAACJ,iBAAiBE,QAAQE,OAAOF,QAAQC,IAAI,IAC7C,CAACH,iBAAiBE,QAAQC,IAAI,GAEjCE,OAAQC,OAAMA,MAAMC,MAAS,EAC7BC,KAAK,GAAG;AAEX,QAAMtB,WAAW,IAAIuB,SAAS;AAAA,IAC5B,GAAGP;AAAAA,IACHQ,MAAMX;AAAAA,IACNI;AAAAA,EACF,CAAC;AACDjB,WAASyB,QAAQA;AAQjBC,iBAAe,MAAM1B,SAAS2B,OAAO;AAAA,IAAE,GAAGf,KAAM;AAAA,IAAEY,MAAMX;AAAAA,EAAkB,CAAA,CAAC;AAG3Ee,UAAQ,MAAMlB,UAAUV,SAAS6B,MAAK,CAAE,CAAC;AAEzC,SAAO9B,kBAAkBC,QAAQ;AACnC;AA0DO,SAASyB,MAUdK,OAUA;AACA,QAAM9B,WAAWW,YAKf,MAAM;AACN,UAAM;AAAA,MAAEoB;AAAAA,MAAU,GAAGC;AAAAA,IAAc,IAAGF;AACtC,WAAOE;AAAAA,EACT,CAAC;AAED,SAAAC,gBACGC,YAAYC,UAAQ;AAAA,IAAA,IACnBC,QAAK;AAAA,aAAE;AAAA,QACLvB,SAASb,SAAQ,EAAGwB;AAAAA,QACpBV,iBAAiBuB,OAAOrC,SAAU,EAACiB,IAAI;AAAA;IACxC;AAAA,IAAA,IAAAc,WAAA;AAAA,aAGAO,kBAAgB,MAAMR,MAAMC,SAAS/B,QAAQ,GAAG,CAAA,CAAE;AAAA,IAAC;AAAA,EAAA,CAAA;AAG1D;"}
+{"version":3,"file":"createField.js","sources":["../../src/createField.tsx"],"sourcesContent":["import { FieldApi } from '@tanstack/form-core'\nimport {\n  createComponent,\n  createComputed,\n  createMemo,\n  createSignal,\n  onCleanup,\n  onMount,\n} from 'solid-js'\n\nimport type {\n  DeepKeys,\n  DeepValue,\n  Narrow,\n  Validator,\n} from '@tanstack/form-core'\nimport type { JSXElement } from 'solid-js'\nimport type { CreateFieldOptions } from './types'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<\n    TParentData,\n    TName extends DeepKeys<TParentData>,\n    TFieldValidator extends\n      | Validator<DeepValue<TParentData, TName>, unknown>\n      | undefined = undefined,\n    TFormValidator extends\n      | Validator<TParentData, unknown>\n      | undefined = undefined,\n    TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n  > {\n    Field: FieldComponent<TParentData, TFormValidator>\n  }\n}\n\nexport type CreateField<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n>(\n  opts: () => { name: Narrow<TName> } & Omit<\n    CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n    'form'\n  >,\n) => () => FieldApi<\n  TParentData,\n  TName,\n  TFieldValidator,\n  TFormValidator,\n  DeepValue<TParentData, TName>\n>\n\n// ugly way to trick solid into triggering updates for changes on the fieldApi\nfunction makeFieldReactive<FieldApiT extends FieldApi<any, any, any, any>>(\n  fieldApi: FieldApiT,\n): () => FieldApiT {\n  const [flag, setFlag] = createSignal(false)\n  const fieldApiMemo = createMemo(() => [flag(), fieldApi] as const)\n  const unsubscribeStore = fieldApi.store.subscribe(() => setFlag((f) => !f))\n  onCleanup(unsubscribeStore)\n  return () => fieldApiMemo()[1]\n}\n\nexport function createField<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>(\n  opts: () => CreateFieldOptions<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator\n  >,\n): () => FieldApi<TParentData, TName, TFieldValidator, TFormValidator> {\n  const options = opts()\n\n  const fieldApi = new FieldApi(options)\n  fieldApi.Field = Field as never\n\n  /**\n   * fieldApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   *\n   * createComputed to make sure this effect runs before render effects\n   */\n  createComputed(() => fieldApi.update(opts()))\n\n  // Instantiates field meta and removes it when unrendered\n  onMount(() => onCleanup(fieldApi.mount()))\n\n  return makeFieldReactive(fieldApi) as never\n}\n\ntype FieldComponentProps<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = {\n  children: (\n    fieldApi: () => FieldApi<\n      TParentData,\n      TName,\n      TFieldValidator,\n      TFormValidator,\n      TData\n    >,\n  ) => JSXElement\n} & Omit<\n  CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n  'form'\n>\n\nexport type FieldComponent<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n> = <\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n  children,\n  ...fieldOptions\n}: Omit<\n  FieldComponentProps<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator,\n    TData\n  >,\n  'form'\n>) => JSXElement\n\nexport function Field<\n  TParentData,\n  TName extends DeepKeys<TParentData>,\n  TFieldValidator extends\n    | Validator<DeepValue<TParentData, TName>, unknown>\n    | undefined = undefined,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>(\n  props: {\n    children: (\n      fieldApi: () => FieldApi<\n        TParentData,\n        TName,\n        TFieldValidator,\n        TFormValidator\n      >,\n    ) => JSXElement\n  } & CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,\n) {\n  const fieldApi = createField<\n    TParentData,\n    TName,\n    TFieldValidator,\n    TFormValidator\n  >(() => {\n    const { children, ...fieldOptions } = props\n    return fieldOptions\n  })\n\n  return <>{createComponent(() => props.children(fieldApi), {})}</>\n}\n"],"names":["makeFieldReactive","fieldApi","flag","setFlag","createSignal","fieldApiMemo","createMemo","unsubscribeStore","store","subscribe","f","onCleanup","createField","opts","options","FieldApi","Field","createComputed","update","onMount","mount","props","children","fieldOptions","_$memo","createComponent"],"mappings":";;;AA4DA,SAASA,kBACPC,UACiB;AACjB,QAAM,CAACC,MAAMC,OAAO,IAAIC,aAAa,KAAK;AAC1C,QAAMC,eAAeC,WAAW,MAAM,CAACJ,KAAK,GAAGD,QAAQ,CAAW;AAC5DM,QAAAA,mBAAmBN,SAASO,MAAMC,UAAU,MAAMN,QAASO,CAAAA,MAAM,CAACA,CAAC,CAAC;AAC1EC,YAAUJ,gBAAgB;AACnB,SAAA,MAAMF,eAAe,CAAC;AAC/B;AAEO,SAASO,YAUdC,MAMqE;AACrE,QAAMC,UAAUD;AAEVZ,QAAAA,WAAW,IAAIc,SAASD,OAAO;AACrCb,WAASe,QAAQA;AAQjBC,iBAAe,MAAMhB,SAASiB,OAAOL,KAAAA,CAAM,CAAC;AAG5CM,UAAQ,MAAMR,UAAUV,SAASmB,MAAAA,CAAO,CAAC;AAEzC,SAAOpB,kBAAkBC,QAAQ;AACnC;AAoDO,SAASe,MAUdK,OAUA;AACMpB,QAAAA,WAAWW,YAKf,MAAM;AACA,UAAA;AAAA,MAAEU;AAAAA,MAAU,GAAGC;AAAAA,IAAiBF,IAAAA;AAC/BE,WAAAA;AAAAA,EAAAA,CACR;AAEDC,SAAAA,KAAA,MAAUC,gBAAgB,MAAMJ,MAAMC,SAASrB,QAAQ,GAAG,CAAE,CAAA,CAAC;AAC/D;"}

package/dist/esm/createForm.d.ts

@@ -1,15 +1,12 @@
 import { FormApi } from '@tanstack/form-core';
+import { type JSXElement } from 'solid-js';
 import { type CreateField, type FieldComponent } from './createField.js';
-import type { JSXElement } from 'solid-js';
 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> {
-        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;
         Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
             selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;

package/dist/esm/createForm.js

@@ -3,22 +3,21 @@ import { FormApi, functionalUpdate } from "@tanstack/form-core";
 import { onMount, createComputed } from "solid-js";
 import { useStore } from "@tanstack/solid-store";
 import { Field, createField } from "./createField.js";
-import { formContext } from "./formContext.js";
 function createForm(opts) {
   const options = opts == null ? void 0 : opts();
   const formApi = new FormApi(options);
-  formApi.Provider = function Provider(props) {
-    onMount(formApi.mount);
-    return createComponent(formContext.Provider, mergeProps(props, {
-      value: {
-        formApi
-      }
-    }));
-  };
-  formApi.Field = Field;
-  formApi.createField = createField;
+  formApi.Field = (props) => createComponent(Field, mergeProps(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);
   createComputed(() => formApi.update(opts == null ? void 0 : opts()));
   return formApi;
 }

package/dist/esm/createForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"createForm.js","sources":["../../src/createForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { createComputed, onMount } from 'solid-js'\nimport { useStore } from '@tanstack/solid-store'\nimport {\n  type CreateField,\n  Field,\n  type FieldComponent,\n  createField,\n} from './createField'\nimport { formContext } from './formContext'\nimport type { JSXElement } from 'solid-js'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\n\ntype NoInfer<T> = [T][T extends any ? 0 : never]\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData, TFormValidator> {\n    Provider: (props: { children: any }) => JSXElement\n    Field: FieldComponent<TFormData, TFormValidator>\n    createField: CreateField<TFormData>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => () => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      children: ((state: () => NoInfer<TSelected>) => JSXElement) | JSXElement\n    }) => JSXElement\n  }\n}\n\nexport function createForm<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>(\n  opts?: () => FormOptions<TParentData, TFormValidator>,\n): FormApi<TParentData, TFormValidator> {\n  const options = opts?.()\n  const formApi = new FormApi<TParentData, TFormValidator>(options)\n\n  formApi.Provider = function Provider(props) {\n    onMount(formApi.mount)\n    return (\n      <formContext.Provider {...props} value={{ formApi: formApi as never }} />\n    )\n  }\n  formApi.Field = Field as any\n  formApi.createField = createField as CreateField<TParentData>\n  formApi.useStore = (selector) => useStore(formApi.store, selector)\n  formApi.Subscribe = (props) =>\n    functionalUpdate(props.children, useStore(formApi.store, props.selector))\n\n  /**\n   * formApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  createComputed(() => formApi.update(opts?.()))\n\n  return formApi\n}\n"],"names":["createForm","opts","options","formApi","FormApi","Provider","props","onMount","mount","_$createComponent","formContext","_$mergeProps","value","Field","createField","useStore","selector","store","Subscribe","functionalUpdate","children","createComputed","update"],"mappings":";;;;;;AA+BO,SAASA,WAMdC,MACsC;AACtC,QAAMC,UAAUD;AAChB,QAAME,UAAU,IAAIC,QAAqCF,OAAO;AAEhEC,UAAQE,WAAW,SAASA,SAASC,OAAO;AAC1CC,YAAQJ,QAAQK,KAAK;AACrB,WAAAC,gBACGC,YAAYL,UAAQM,WAAKL,OAAK;AAAA,MAAEM,OAAO;AAAA,QAAET;AAAAA,MAA0B;AAAA,IAAC,CAAA,CAAA;AAAA;AAGzEA,UAAQU,QAAQA;AAChBV,UAAQW,cAAcA;AACtBX,UAAQY,WAAYC,cAAaD,SAASZ,QAAQc,OAAOD,QAAQ;AACjEb,UAAQe,YAAaZ,WACnBa,iBAAiBb,MAAMc,UAAUL,SAASZ,QAAQc,OAAOX,MAAMU,QAAQ,CAAC;AAM1EK,iBAAe,MAAMlB,QAAQmB,OAAOrB,8BAAQ,CAAC;AAE7C,SAAOE;AACT;"}
+{"version":3,"file":"createForm.js","sources":["../../src/createForm.tsx"],"sourcesContent":["import { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport { type JSXElement, createComputed, onMount } from 'solid-js'\nimport { useStore } from '@tanstack/solid-store'\nimport {\n  type CreateField,\n  Field,\n  type FieldComponent,\n  createField,\n} from './createField'\nimport type { FormOptions, FormState, Validator } from '@tanstack/form-core'\n\ntype NoInfer<T> = [T][T extends any ? 0 : never]\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData, TFormValidator> {\n    Field: FieldComponent<TFormData, TFormValidator>\n    createField: CreateField<TFormData, TFormValidator>\n    useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n    ) => () => TSelected\n    Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n      selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n      children: ((state: () => NoInfer<TSelected>) => JSXElement) | JSXElement\n    }) => JSXElement\n  }\n}\n\nexport function createForm<\n  TParentData,\n  TFormValidator extends\n    | Validator<TParentData, unknown>\n    | undefined = undefined,\n>(\n  opts?: () => FormOptions<TParentData, TFormValidator>,\n): FormApi<TParentData, TFormValidator> {\n  const options = opts?.()\n  const formApi = new FormApi<TParentData, TFormValidator>(options)\n\n  formApi.Field = (props) => <Field {...props} form={formApi} />\n  formApi.createField = (props) =>\n    createField(() => {\n      return { ...props(), form: formApi }\n    })\n  formApi.useStore = (selector) => useStore(formApi.store, selector)\n  formApi.Subscribe = (props) =>\n    functionalUpdate(props.children, useStore(formApi.store, props.selector))\n\n  onMount(formApi.mount)\n\n  /**\n   * formApi.update should not have any side effects. Think of it like a `useRef`\n   * that we need to keep updated every render with the most up-to-date information.\n   */\n  createComputed(() => formApi.update(opts?.()))\n\n  return formApi\n}\n"],"names":["createForm","opts","options","formApi","FormApi","Field","props","_$createComponent","_$mergeProps","form","createField","useStore","selector","store","Subscribe","functionalUpdate","children","onMount","mount","createComputed","update"],"mappings":";;;;;AA4BO,SAASA,WAMdC,MACsC;AACtC,QAAMC,UAAUD;AACVE,QAAAA,UAAU,IAAIC,QAAqCF,OAAO;AAEhEC,UAAQE,QAASC,CAAAA,UAAKC,gBAAMF,OAAKG,WAAKF,OAAK;AAAA,IAAEG,MAAMN;AAAAA,EAAW,CAAA,CAAA;AACtDO,UAAAA,cAAeJ,CACrBI,UAAAA,YAAY,MAAM;AACT,WAAA;AAAA,MAAE,GAAGJ,MAAM;AAAA,MAAGG,MAAMN;AAAAA,IAAAA;AAAAA,EAAQ,CACpC;AACHA,UAAQQ,WAAYC,CAAAA,aAAaD,SAASR,QAAQU,OAAOD,QAAQ;AACzDE,UAAAA,YAAaR,CACnBS,UAAAA,iBAAiBT,MAAMU,UAAUL,SAASR,QAAQU,OAAOP,MAAMM,QAAQ,CAAC;AAE1EK,UAAQd,QAAQe,KAAK;AAMrBC,iBAAe,MAAMhB,QAAQiB,OAAOnB,8BAAQ,CAAC;AAEtCE,SAAAA;AACT;"}

package/dist/esm/createFormFactory.d.ts

@@ -1,8 +1,8 @@
-import { type CreateField, type FieldComponent } from './createField.js';
+import { Field, createField } from './createField.js';
 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: CreateField<TFormData>;
-    Field: FieldComponent<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/esm/createFormFactory.js.map

@@ -1 +1 @@
-{"version":3,"file":"createFormFactory.js","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import { mergeProps } from 'solid-js'\nimport {\n  type CreateField,\n  Field,\n  type FieldComponent,\n  createField,\n} from './createField'\nimport { createForm } from './createForm'\nimport type { FormApi, FormOptions, Validator } from '@tanstack/form-core'\n\nexport type FormFactory<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = {\n  createForm: (\n    opts?: () => FormOptions<TFormData, TFormValidator>,\n  ) => FormApi<TFormData, TFormValidator>\n  createField: CreateField<TFormData>\n  Field: FieldComponent<TFormData, TFormValidator>\n}\n\nexport function createFormFactory<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  defaultOpts?: () => FormOptions<TFormData, TFormValidator>,\n): FormFactory<TFormData, TFormValidator> {\n  return {\n    createForm: (opts) =>\n      createForm<TFormData, TFormValidator>(() =>\n        mergeProps(defaultOpts?.() ?? {}, opts?.() ?? {}),\n      ),\n    createField,\n    Field: Field as never,\n  }\n}\n"],"names":[],"mappings":";;;AAqBO,SAAS,kBAId,aACwC;AACjC,SAAA;AAAA,IACL,YAAY,CAAC,SACX;AAAA,MAAsC,MACpC,YAAW,iDAAmB,CAAI,IAAA,mCAAY,CAAA,CAAE;AAAA,IAClD;AAAA,IACF;AAAA,IACA;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"createFormFactory.js","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import { mergeProps } from 'solid-js'\nimport {\n  type CreateField,\n  Field,\n  type FieldComponent,\n  createField,\n} from './createField'\nimport { createForm } from './createForm'\nimport type { FormApi, FormOptions, Validator } from '@tanstack/form-core'\n\nexport type FormFactory<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n> = {\n  createForm: (\n    opts?: () => FormOptions<TFormData, TFormValidator>,\n  ) => FormApi<TFormData, TFormValidator>\n  createField: typeof createField\n  Field: typeof Field\n}\n\nexport function createFormFactory<\n  TFormData,\n  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,\n>(\n  defaultOpts?: () => FormOptions<TFormData, TFormValidator>,\n): FormFactory<TFormData, TFormValidator> {\n  return {\n    createForm: (opts) =>\n      createForm<TFormData, TFormValidator>(() =>\n        mergeProps(defaultOpts?.() ?? {}, opts?.() ?? {}),\n      ),\n    createField,\n    Field: Field,\n  }\n}\n"],"names":[],"mappings":";;;AAqBO,SAAS,kBAId,aACwC;AACjC,SAAA;AAAA,IACL,YAAY,CAAC,SACX;AAAA,MAAsC,MACpC,YAAW,iDAAmB,CAAI,IAAA,mCAAY,CAAA,CAAE;AAAA,IAClD;AAAA,IACF;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/esm/types.d.ts

@@ -1,4 +1,4 @@
-import type { DeepKeys, DeepValue, FieldOptions, Validator } from '@tanstack/form-core';
-export type CreateFieldOptions<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>> = FieldOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
+import type { DeepKeys, DeepValue, FieldApiOptions, Validator } from '@tanstack/form-core';
+export type CreateFieldOptions<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>> = FieldApiOptions<TParentData, TName, TFieldValidator, TFormValidator, TData> & {
     mode?: 'value' | 'array';
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-form",
-  "version": "0.13.7",
+  "version": "0.16.0",
   "description": "Powerful, type-safe forms for Solid.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -34,11 +34,11 @@
   },
   "devDependencies": {
     "solid-js": "^1.7.8",
-    "vite-plugin-solid": "^2.8.0"
+    "vite-plugin-solid": "^2.10.1"
   },
   "dependencies": {
     "@tanstack/solid-store": "^0.3.1",
-    "@tanstack/form-core": "0.13.7"
+    "@tanstack/form-core": "0.16.0"
   },
   "peerDependencies": {
     "solid-js": "^1.6.0"

package/src/createField.tsx

@@ -7,7 +7,6 @@ import {
   onCleanup,
   onMount,
 } from 'solid-js'
-import { formContext, useFormContext } from './formContext'
 
 import type {
   DeepKeys,
@@ -35,20 +34,20 @@ declare module '@tanstack/form-core' {
   }
 }
 
-export type CreateField<TParentData> = <
+export type CreateField<
+  TParentData,
+  TFormValidator extends
+    | Validator<TParentData, unknown>
+    | undefined = undefined,
+> = <
   TName extends DeepKeys<TParentData>,
   TFieldValidator extends
     | Validator<DeepValue<TParentData, TName>, unknown>
     | undefined = undefined,
-  TFormValidator extends
-    | Validator<TParentData, unknown>
-    | undefined = undefined,
 >(
-  opts: () => { name: Narrow<TName> } & CreateFieldOptions<
-    TParentData,
-    TName,
-    TFieldValidator,
-    TFormValidator
+  opts: () => { name: Narrow<TName> } & Omit<
+    CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,
+    'form'
   >,
 ) => () => FieldApi<
   TParentData,
@@ -86,23 +85,9 @@ export function createField<
     TFormValidator
   >,
 ): () => FieldApi<TParentData, TName, TFieldValidator, TFormValidator> {
-  // Get the form API either manually or from context
-  const { formApi, parentFieldName } = useFormContext()
-
   const options = opts()
-  const name = (
-    typeof options.index === 'number'
-      ? [parentFieldName, options.index, options.name]
-      : [parentFieldName, options.name]
-  )
-    .filter((d) => d !== undefined)
-    .join('.')
 
-  const fieldApi = new FieldApi({
-    ...options,
-    form: formApi,
-    name: name as typeof options.name as never,
-  })
+  const fieldApi = new FieldApi(options)
   fieldApi.Field = Field as never
 
   /**
@@ -111,7 +96,7 @@ export function createField<
    *
    * createComputed to make sure this effect runs before render effects
    */
-  createComputed(() => fieldApi.update({ ...opts(), form: formApi } as never))
+  createComputed(() => fieldApi.update(opts()))
 
   // Instantiates field meta and removes it when unrendered
   onMount(() => onCleanup(fieldApi.mount()))
@@ -139,19 +124,10 @@ type FieldComponentProps<
       TData
     >,
   ) => JSXElement
-} & (TParentData extends any[]
-  ? {
-      name?: TName
-      index: number
-    }
-  : {
-      name: TName
-      index?: never
-    }) &
-  Omit<
-    CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,
-    'name' | 'index'
-  >
+} & Omit<
+  CreateFieldOptions<TParentData, TName, TFieldValidator, TFormValidator>,
+  'form'
+>
 
 export type FieldComponent<
   TParentData,
@@ -167,12 +143,15 @@ export type FieldComponent<
 >({
   children,
   ...fieldOptions
-}: FieldComponentProps<
-  TParentData,
-  TName,
-  TFieldValidator,
-  TFormValidator,
-  TData
+}: Omit<
+  FieldComponentProps<
+    TParentData,
+    TName,
+    TFieldValidator,
+    TFormValidator,
+    TData
+  >,
+  'form'
 >) => JSXElement
 
 export function Field<
@@ -206,15 +185,5 @@ export function Field<
     return fieldOptions
   })
 
-  return (
-    <formContext.Provider
-      value={{
-        formApi: fieldApi().form as never,
-        parentFieldName: String(fieldApi().name),
-      }}
-    >
-      {/* createComponent to make sure the signals in the children component are not tracked */}
-      {createComponent(() => props.children(fieldApi), {})}
-    </formContext.Provider>
-  )
+  return <>{createComponent(() => props.children(fieldApi), {})}</>
 }