@tanstack/react-form 0.0.7 → 0.0.9

package/build/cjs/createFormFactory.js

@@ -14,7 +14,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var useField = require('./useField.js');
 var useForm = require('./useForm.js');
-var Field = require('./Field.js');
 
 function createFormFactory(defaultOpts) {
   return {
@@ -23,8 +22,8 @@ function createFormFactory(defaultOpts) {
         ...opts
       });
     },
-    useField: useField.createUseField(),
-    Field: Field.createFieldComponent()
+    useField: useField.useField,
+    Field: useField.Field
   };
 }
 

package/build/cjs/createFormFactory.js.map

@@ -1 +1 @@
-{"version":3,"file":"createFormFactory.js","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi, FormOptions } from '@tanstack/form-core'\nimport { createUseField, type UseField } from './useField'\nimport { useForm } from './useForm'\nimport { createFieldComponent, type FieldComponent } from './Field'\n\nexport type FormFactory<TFormData> = {\n  useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>\n  useField: UseField<TFormData>\n  Field: FieldComponent<TFormData>\n}\n\nexport function createFormFactory<TFormData>(\n  defaultOpts?: FormOptions<TFormData>,\n): FormFactory<TFormData> {\n  return {\n    useForm: (opts) => {\n      return useForm<TFormData>({ ...defaultOpts, ...opts } as any) as any\n    },\n    useField: createUseField<TFormData>(),\n    Field: createFieldComponent<TFormData>(),\n  }\n}\n"],"names":["createFormFactory","defaultOpts","useForm","opts","useField","createUseField","Field","createFieldComponent"],"mappings":";;;;;;;;;;;;;;;;;;AAWO,SAASA,iBAAT,CACLC,WADK,EAEmB;EACxB,OAAO;IACLC,OAAO,EAAGC,IAAD,IAAU;AACjB,MAAA,OAAOD,eAAO,CAAY,EAAE,GAAGD,WAAL;QAAkB,GAAGE,IAAAA;AAArB,OAAZ,CAAd,CAAA;KAFG;IAILC,QAAQ,EAAEC,uBAAc,EAJnB;AAKLC,IAAAA,KAAK,EAAEC,0BAAoB,EAAA;GAL7B,CAAA;AAOD;;;;"}
+{"version":3,"file":"createFormFactory.js","sources":["../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi, FormOptions } from '@tanstack/form-core'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { useForm } from './useForm'\n\nexport type FormFactory<TFormData> = {\n  useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>\n  useField: UseField<TFormData>\n  Field: FieldComponent<TFormData, TFormData>\n}\n\nexport function createFormFactory<TFormData>(\n  defaultOpts?: FormOptions<TFormData>,\n): FormFactory<TFormData> {\n  return {\n    useForm: (opts) => {\n      return useForm<TFormData>({ ...defaultOpts, ...opts } as any) as any\n    },\n    useField: useField as any,\n    Field: Field as any,\n  }\n}\n"],"names":["createFormFactory","defaultOpts","useForm","opts","useField","Field"],"mappings":";;;;;;;;;;;;;;;;;AAUO,SAASA,iBAAT,CACLC,WADK,EAEmB;EACxB,OAAO;IACLC,OAAO,EAAGC,IAAD,IAAU;AACjB,MAAA,OAAOD,eAAO,CAAY,EAAE,GAAGD,WAAL;QAAkB,GAAGE,IAAAA;AAArB,OAAZ,CAAd,CAAA;KAFG;AAILC,IAAAA,QAAQ,EAAEA,iBAJL;AAKLC,IAAAA,KAAK,EAAEA,cAAAA;GALT,CAAA;AAOD;;;;"}

package/build/cjs/formContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"formContext.js","sources":["../../src/formContext.ts"],"sourcesContent":["import type { FormApi } from '@tanstack/form-core'\nimport * as React from 'react'\n\nexport const formContext = React.createContext<FormApi<any> | null>(null)\n\nexport function useFormContext() {\n  const formApi = React.useContext(formContext)\n\n  if (!formApi) {\n    throw new Error(`You are trying to use the form API outside of a form!`)\n  }\n\n  return formApi\n}\n"],"names":["formContext","React","createContext","useFormContext","formApi","useContext","Error"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGO,MAAMA,WAAW,gBAAGC,gBAAK,CAACC,aAAN,CAAyC,IAAzC,EAApB;AAEA,SAASC,cAAT,GAA0B;AAC/B,EAAA,MAAMC,OAAO,GAAGH,gBAAK,CAACI,UAAN,CAAiBL,WAAjB,CAAhB,CAAA;;EAEA,IAAI,CAACI,OAAL,EAAc;IACZ,MAAM,IAAIE,KAAJ,CAAN,uDAAA,CAAA,CAAA;AACD,GAAA;;AAED,EAAA,OAAOF,OAAP,CAAA;AACD;;;;;"}
+{"version":3,"file":"formContext.js","sources":["../../src/formContext.ts"],"sourcesContent":["import type { FormApi } from '@tanstack/form-core'\nimport * as React from 'react'\n\nexport const formContext = React.createContext<{\n  formApi: FormApi<any>\n  parentFieldName?: string\n} | null>(null!)\n\nexport function useFormContext() {\n  const formApi = React.useContext(formContext)\n\n  if (!formApi) {\n    throw new Error(`You are trying to use the form API outside of a form!`)\n  }\n\n  return formApi\n}\n"],"names":["formContext","React","createContext","useFormContext","formApi","useContext","Error"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGO,MAAMA,WAAW,gBAAGC,gBAAK,CAACC,aAAN,CAGjB,IAHiB,EAApB;AAKA,SAASC,cAAT,GAA0B;AAC/B,EAAA,MAAMC,OAAO,GAAGH,gBAAK,CAACI,UAAN,CAAiBL,WAAjB,CAAhB,CAAA;;EAEA,IAAI,CAACI,OAAL,EAAc;IACZ,MAAM,IAAIE,KAAJ,CAAN,uDAAA,CAAA,CAAA;AACD,GAAA;;AAED,EAAA,OAAOF,OAAP,CAAA;AACD;;;;;"}

package/build/cjs/index.js

@@ -14,7 +14,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var formCore = require('@tanstack/form-core');
 var useForm = require('./useForm.js');
-var Field = require('./Field.js');
 var useField = require('./useField.js');
 var createFormFactory = require('./createFormFactory.js');
 
@@ -33,7 +32,7 @@ Object.defineProperty(exports, 'functionalUpdate', {
   get: function () { return formCore.functionalUpdate; }
 });
 exports.useForm = useForm.useForm;
-exports.Field = Field.Field;
+exports.Field = useField.Field;
 exports.useField = useField.useField;
 exports.createFormFactory = createFormFactory.createFormFactory;
 //# sourceMappingURL=index.js.map

package/build/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/useField.js

@@ -37,27 +37,62 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-function createUseField() {
-  return opts => {
-    return useField(opts);
-  };
-}
 function useField(opts) {
   // Get the form API either manually or from context
-  const formApi = formContext.useFormContext();
-  const [fieldApi] = React__namespace.useState(() => new formCore.FieldApi({ ...opts,
-    form: formApi
-  })); // Keep options up to date as they are rendered
+  const {
+    formApi,
+    parentFieldName
+  } = formContext.useFormContext();
+  const [fieldApi] = React__namespace.useState(() => {
+    const name = (typeof opts.index === 'number' ? [parentFieldName, opts.index, opts.name] : [parentFieldName, opts.name]).filter(d => d !== undefined).join('.');
+    const api = new formCore.FieldApi({ ...opts,
+      form: formApi,
+      name: name
+    });
+    api.Field = Field;
+    return api;
+  }); // Keep options up to date as they are rendered
 
   fieldApi.update({ ...opts,
     form: formApi
   });
-  reactStore.useStore(fieldApi.store); // Instantiates field meta and removes it when unrendered
+  reactStore.useStore(fieldApi.store, opts.mode === 'array' ? state => {
+    return [state.meta, Object.keys(state.value || []).length];
+  } : undefined); // Instantiates field meta and removes it when unrendered
 
   React__namespace.useEffect(() => fieldApi.mount(), [fieldApi]);
   return fieldApi;
+} // export type FieldValue<TFormData, TField> = TFormData extends any[]
+//   ? TField extends `[${infer TIndex extends number | 'i'}].${infer TRest}`
+//     ? DeepValue<TFormData[TIndex extends 'i' ? number : TIndex], TRest>
+//     : TField extends `[${infer TIndex extends number | 'i'}]`
+//     ? TFormData[TIndex extends 'i' ? number : TIndex]
+//     : never
+//   : TField extends `${infer TPrefix}[${infer TIndex extends
+//       | number
+//       | 'i'}].${infer TRest}`
+//   ? DeepValue<
+//       DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex],
+//       TRest
+//     >
+//   : TField extends `${infer TPrefix}[${infer TIndex extends number | 'i'}]`
+//   ? DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex]
+//   : DeepValue<TFormData, TField>
+
+function Field({
+  children,
+  ...fieldOptions
+}) {
+  const fieldApi = useField(fieldOptions);
+  return /*#__PURE__*/React__namespace.createElement(formContext.formContext.Provider, {
+    value: {
+      formApi: fieldApi.form,
+      parentFieldName: fieldApi.name
+    },
+    children: formCore.functionalUpdate(children, fieldApi)
+  });
 }
 
-exports.createUseField = createUseField;
+exports.Field = Field;
 exports.useField = useField;
 //# sourceMappingURL=useField.js.map

package/build/cjs/useField.js.map

@@ -1 +1 @@
-{"version":3,"file":"useField.js","sources":["../../src/useField.ts"],"sourcesContent":["import * as React from 'react'\n//\nimport { useStore } from '@tanstack/react-store'\nimport type { DeepKeys, DeepValue, FieldOptions } from '@tanstack/form-core'\nimport { FieldApi } from '@tanstack/form-core'\nimport { useFormContext } from './formContext'\nimport type { FormFactory } from './createFormFactory'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldOptions<TData, TFormData> {\n    formFactory?: FormFactory<TFormData>\n  }\n}\n\nexport type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(\n  opts?: { name: TField } & FieldOptions<\n    DeepValue<TFormData, TField>,\n    TFormData\n  >,\n) => FieldApi<DeepValue<TFormData, TField>, TFormData>\n\nexport function createUseField<TFormData>(): UseField<TFormData> {\n  return (opts) => {\n    return useField(opts as any)\n  }\n}\n\nexport function useField<TData, TFormData>(\n  opts: FieldOptions<TData, TFormData> & {\n    // selector: (state: FieldApi<TData, TFormData>) => TSelected\n  },\n): FieldApi<TData, TFormData> {\n  // Get the form API either manually or from context\n  const formApi = useFormContext()\n\n  const [fieldApi] = React.useState<FieldApi<TData, TFormData>>(\n    () => new FieldApi({ ...opts, form: formApi }),\n  )\n\n  // Keep options up to date as they are rendered\n  fieldApi.update({ ...opts, form: formApi })\n\n  useStore(fieldApi.store)\n\n  // Instantiates field meta and removes it when unrendered\n  React.useEffect(() => fieldApi.mount(), [fieldApi])\n\n  return fieldApi\n}\n"],"names":["createUseField","opts","useField","formApi","useFormContext","fieldApi","React","useState","FieldApi","form","update","useStore","store","useEffect","mount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBO,SAASA,cAAT,GAA0D;AAC/D,EAAA,OAAQC,IAAD,IAAU;IACf,OAAOC,QAAQ,CAACD,IAAD,CAAf,CAAA;GADF,CAAA;AAGD,CAAA;AAEM,SAASC,QAAT,CACLD,IADK,EAIuB;AAC5B;EACA,MAAME,OAAO,GAAGC,0BAAc,EAA9B,CAAA;AAEA,EAAA,MAAM,CAACC,QAAD,CAAaC,GAAAA,gBAAK,CAACC,QAAN,CACjB,MAAM,IAAIC,iBAAJ,CAAa,EAAE,GAAGP,IAAL;AAAWQ,IAAAA,IAAI,EAAEN,OAAAA;GAA9B,CADW,CAAnB,CAJ4B;;AAS5BE,EAAAA,QAAQ,CAACK,MAAT,CAAgB,EAAE,GAAGT,IAAL;AAAWQ,IAAAA,IAAI,EAAEN,OAAAA;GAAjC,CAAA,CAAA;AAEAQ,EAAAA,mBAAQ,CAACN,QAAQ,CAACO,KAAV,CAAR,CAX4B;;EAc5BN,gBAAK,CAACO,SAAN,CAAgB,MAAMR,QAAQ,CAACS,KAAT,EAAtB,EAAwC,CAACT,QAAD,CAAxC,CAAA,CAAA;AAEA,EAAA,OAAOA,QAAP,CAAA;AACD;;;;;"}
+{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import * as React from 'react'\n//\nimport { useStore } from '@tanstack/react-store'\nimport type {\n  DeepKeys,\n  DeepValue,\n  FieldOptions,\n  Narrow,\n} from '@tanstack/form-core'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useFormContext, formContext } from './formContext'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<TData, TFormData> {\n    Field: FieldComponent<TData, TFormData>\n  }\n}\n\nexport type UseFieldOptions<TData, TFormData> = FieldOptions<\n  TData,\n  TFormData\n> & {\n  mode?: 'value' | 'array'\n}\n\nexport type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(\n  opts?: { name: Narrow<TField> } & UseFieldOptions<\n    DeepValue<TFormData, TField>,\n    TFormData\n  >,\n) => FieldApi<DeepValue<TFormData, TField>, TFormData>\n\nexport function useField<TData, TFormData>(\n  opts: UseFieldOptions<TData, TFormData>,\n): FieldApi<TData, TFormData> {\n  // Get the form API either manually or from context\n  const { formApi, parentFieldName } = useFormContext()\n\n  const [fieldApi] = React.useState<FieldApi<TData, TFormData>>(() => {\n    const name = (\n      typeof opts.index === 'number'\n        ? [parentFieldName, opts.index, opts.name]\n        : [parentFieldName, opts.name]\n    )\n      .filter((d) => d !== undefined)\n      .join('.')\n\n    const api = new FieldApi({ ...opts, form: formApi, name: name as any })\n\n    api.Field = Field as any\n\n    return api\n  })\n\n  // Keep options up to date as they are rendered\n  fieldApi.update({ ...opts, form: formApi })\n\n  useStore(\n    fieldApi.store,\n    opts.mode === 'array'\n      ? (state: any) => {\n          return [state.meta, Object.keys(state.value || []).length]\n        }\n      : undefined,\n  )\n\n  // Instantiates field meta and removes it when unrendered\n  React.useEffect(() => fieldApi.mount(), [fieldApi])\n\n  return fieldApi\n}\n\n// export type FieldValue<TFormData, TField> = TFormData extends any[]\n//   ? TField extends `[${infer TIndex extends number | 'i'}].${infer TRest}`\n//     ? DeepValue<TFormData[TIndex extends 'i' ? number : TIndex], TRest>\n//     : TField extends `[${infer TIndex extends number | 'i'}]`\n//     ? TFormData[TIndex extends 'i' ? number : TIndex]\n//     : never\n//   : TField extends `${infer TPrefix}[${infer TIndex extends\n//       | number\n//       | 'i'}].${infer TRest}`\n//   ? DeepValue<\n//       DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex],\n//       TRest\n//     >\n//   : TField extends `${infer TPrefix}[${infer TIndex extends number | 'i'}]`\n//   ? DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex]\n//   : DeepValue<TFormData, TField>\n\nexport type FieldValue<TFormData, TField> = TFormData extends any[]\n  ? unknown extends TField\n    ? TFormData[number]\n    : DeepValue<TFormData[number], TField>\n  : DeepValue<TFormData, TField>\n\n// type Test1 = FieldValue<{ foo: { bar: string }[] }, 'foo'>\n// //   ^?\n// type Test2 = FieldValue<{ foo: { bar: string }[] }, 'foo[i]'>\n// //   ^?\n// type Test3 = FieldValue<{ foo: { bar: string }[] }, 'foo[2].bar'>\n// //   ^?\n\nexport type FieldComponent<TParentData, TFormData> = <TField>({\n  children,\n  ...fieldOptions\n}: {\n  children: (\n    fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>,\n  ) => any\n} & Omit<\n  UseFieldOptions<FieldValue<TParentData, TField>, TFormData>,\n  'name' | 'index'\n> &\n  (TParentData extends any[]\n    ? {\n        name?: TField extends undefined ? TField : DeepKeys<TParentData>\n        index: number\n      }\n    : {\n        name: TField extends undefined ? TField : DeepKeys<TParentData>\n        index?: never\n      })) => any\n\nexport function Field<TData, TFormData>({\n  children,\n  ...fieldOptions\n}: {\n  children: (fieldApi: FieldApi<TData, TFormData>) => any\n} & UseFieldOptions<TData, TFormData>) {\n  const fieldApi = useField(fieldOptions as any)\n  return (\n    <formContext.Provider\n      value={{ formApi: fieldApi.form, parentFieldName: fieldApi.name }}\n      children={functionalUpdate(children, fieldApi as any)}\n    />\n  )\n}\n"],"names":["useField","opts","formApi","parentFieldName","useFormContext","fieldApi","React","useState","name","index","filter","d","undefined","join","api","FieldApi","form","Field","update","useStore","store","mode","state","meta","Object","keys","value","length","useEffect","mount","children","fieldOptions","formContext","functionalUpdate"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCO,SAASA,QAAT,CACLC,IADK,EAEuB;AAC5B;EACA,MAAM;IAAEC,OAAF;AAAWC,IAAAA,eAAAA;AAAX,GAAA,GAA+BC,0BAAc,EAAnD,CAAA;AAEA,EAAA,MAAM,CAACC,QAAD,CAAA,GAAaC,gBAAK,CAACC,QAAN,CAA2C,MAAM;AAClE,IAAA,MAAMC,IAAI,GAAG,CACX,OAAOP,IAAI,CAACQ,KAAZ,KAAsB,QAAtB,GACI,CAACN,eAAD,EAAkBF,IAAI,CAACQ,KAAvB,EAA8BR,IAAI,CAACO,IAAnC,CADJ,GAEI,CAACL,eAAD,EAAkBF,IAAI,CAACO,IAAvB,CAHO,EAKVE,MALU,CAKFC,CAAD,IAAOA,CAAC,KAAKC,SALV,EAMVC,IANU,CAML,GANK,CAAb,CAAA;AAQA,IAAA,MAAMC,GAAG,GAAG,IAAIC,iBAAJ,CAAa,EAAE,GAAGd,IAAL;AAAWe,MAAAA,IAAI,EAAEd,OAAjB;AAA0BM,MAAAA,IAAI,EAAEA,IAAAA;AAAhC,KAAb,CAAZ,CAAA;IAEAM,GAAG,CAACG,KAAJ,GAAYA,KAAZ,CAAA;AAEA,IAAA,OAAOH,GAAP,CAAA;GAbiB,CAAnB,CAJ4B;;AAqB5BT,EAAAA,QAAQ,CAACa,MAAT,CAAgB,EAAE,GAAGjB,IAAL;AAAWe,IAAAA,IAAI,EAAEd,OAAAA;GAAjC,CAAA,CAAA;AAEAiB,EAAAA,mBAAQ,CACNd,QAAQ,CAACe,KADH,EAENnB,IAAI,CAACoB,IAAL,KAAc,OAAd,GACKC,KAAD,IAAgB;AACd,IAAA,OAAO,CAACA,KAAK,CAACC,IAAP,EAAaC,MAAM,CAACC,IAAP,CAAYH,KAAK,CAACI,KAAN,IAAe,EAA3B,CAAA,CAA+BC,MAA5C,CAAP,CAAA;AACD,GAHL,GAIIf,SANE,CAAR,CAvB4B;;EAiC5BN,gBAAK,CAACsB,SAAN,CAAgB,MAAMvB,QAAQ,CAACwB,KAAT,EAAtB,EAAwC,CAACxB,QAAD,CAAxC,CAAA,CAAA;AAEA,EAAA,OAAOA,QAAP,CAAA;AACD;AAGD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAoCO,SAASY,KAAT,CAAiC;EACtCa,QADsC;EAEtC,GAAGC,YAAAA;AAFmC,CAAjC,EAKgC;AACrC,EAAA,MAAM1B,QAAQ,GAAGL,QAAQ,CAAC+B,YAAD,CAAzB,CAAA;EACA,oBACEzB,gBAAA,CAAA,aAAA,CAAC0B,uBAAD,CAAa,QAAb,EAAA;AACE,IAAA,KAAK,EAAE;MAAE9B,OAAO,EAAEG,QAAQ,CAACW,IAApB;MAA0Bb,eAAe,EAAEE,QAAQ,CAACG,IAAAA;KAD7D;AAEE,IAAA,QAAQ,EAAEyB,yBAAgB,CAACH,QAAD,EAAWzB,QAAX,CAAA;GAH9B,CAAA,CAAA;AAMD;;;;;"}

package/build/cjs/useForm.js

@@ -16,7 +16,6 @@ var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js
 var formCore = require('@tanstack/form-core');
 var reactStore = require('@tanstack/react-store');
 var React = require('react');
-var Field = require('./Field.js');
 var useField = require('./useField.js');
 var formContext = require('./formContext.js');
 
@@ -29,8 +28,8 @@ function useForm(opts) {
     // @ts-ignore
     const api = new formCore.FormApi(opts);
     api.Form = createFormComponent(api);
-    api.Field = Field.createFieldComponent();
-    api.useField = useField.createUseField();
+    api.Field = useField.Field;
+    api.useField = useField.useField;
 
     api.useStore = ( // @ts-ignore
     selector) => {
@@ -46,6 +45,7 @@ function useForm(opts) {
 
     return api;
   });
+  formApi.update(opts);
   return formApi;
 }
 
@@ -57,7 +57,9 @@ function createFormComponent(formApi) {
   }) => {
     const isSubmitting = formApi.useStore(state => state.isSubmitting);
     return /*#__PURE__*/React__default["default"].createElement(formContext.formContext.Provider, {
-      value: formApi
+      value: {
+        formApi
+      }
     }, noFormElement ? children : /*#__PURE__*/React__default["default"].createElement("form", _rollupPluginBabelHelpers["extends"]({
       onSubmit: formApi.handleSubmit,
       disabled: isSubmitting

package/build/cjs/useForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import type { FormState, FormOptions } from '@tanstack/form-core'\nimport { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/react-store'\nimport { useStore } from '@tanstack/react-store'\nimport React from 'react'\nimport { createFieldComponent, type FieldComponent } from './Field'\nimport { createUseField, type UseField } from './useField'\nimport { formContext } from './formContext'\n\ndeclare module '@tanstack/form-core' {\n  interface Register {\n    FormSubmitEvent: React.FormEvent<HTMLFormElement>\n  }\n\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Form: FormComponent\n    Field: FieldComponent<TFormData>\n    useField: UseField<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:\n        | ((state: NoInfer<TSelected>) => React.ReactNode)\n        | React.ReactNode\n    }) => any\n  }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const [formApi] = React.useState(() => {\n    // @ts-ignore\n    const api = new FormApi<TData>(opts)\n\n    api.Form = createFormComponent(api)\n    api.Field = createFieldComponent<TData>()\n    api.useField = createUseField<TData>()\n    api.useStore = (\n      // @ts-ignore\n      selector,\n    ) => {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      return useStore(api.store, selector as any) as any\n    }\n    api.Subscribe = (\n      // @ts-ignore\n      props,\n    ) => {\n      return functionalUpdate(\n        props.children,\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        useStore(api.store, props.selector as any),\n      ) as any\n    }\n\n    return api\n  })\n\n  return formApi as any\n}\n\nexport type FormProps = React.HTMLProps<HTMLFormElement> & {\n  children: React.ReactNode\n  noFormElement?: boolean\n}\n\nexport type FormComponent = (props: FormProps) => any\n\nfunction createFormComponent(formApi: FormApi<any>) {\n  const Form: FormComponent = ({ children, noFormElement, ...rest }) => {\n    const isSubmitting = formApi.useStore((state) => state.isSubmitting)\n\n    return (\n      <formContext.Provider value={formApi}>\n        {noFormElement ? (\n          children\n        ) : (\n          <form\n            onSubmit={formApi.handleSubmit}\n            disabled={isSubmitting}\n            {...rest}\n          >\n            {children}\n          </form>\n        )}\n      </formContext.Provider>\n    )\n  }\n\n  return Form\n}\n"],"names":["useForm","opts","formApi","React","useState","api","FormApi","Form","createFormComponent","Field","createFieldComponent","useField","createUseField","useStore","selector","store","Subscribe","props","functionalUpdate","children","noFormElement","rest","isSubmitting","state","formContext","_extends","handleSubmit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA+BO,SAASA,OAAT,CAAwBC,IAAxB,EAAmE;AACxE,EAAA,MAAM,CAACC,OAAD,CAAA,GAAYC,yBAAK,CAACC,QAAN,CAAe,MAAM;AACrC;AACA,IAAA,MAAMC,GAAG,GAAG,IAAIC,gBAAJ,CAAmBL,IAAnB,CAAZ,CAAA;AAEAI,IAAAA,GAAG,CAACE,IAAJ,GAAWC,mBAAmB,CAACH,GAAD,CAA9B,CAAA;AACAA,IAAAA,GAAG,CAACI,KAAJ,GAAYC,0BAAoB,EAAhC,CAAA;AACAL,IAAAA,GAAG,CAACM,QAAJ,GAAeC,uBAAc,EAA7B,CAAA;;IACAP,GAAG,CAACQ,QAAJ,GAAe;AAEbC,IAAAA,QAFa,KAGV;AACH;AACA,MAAA,OAAOD,mBAAQ,CAACR,GAAG,CAACU,KAAL,EAAYD,QAAZ,CAAf,CAAA;KALF,CAAA;;IAOAT,GAAG,CAACW,SAAJ,GAAgB;AAEdC,IAAAA,KAFc,KAGX;AACH,MAAA,OAAOC,yBAAgB,CACrBD,KAAK,CAACE,QADe;MAGrBN,mBAAQ,CAACR,GAAG,CAACU,KAAL,EAAYE,KAAK,CAACH,QAAlB,CAHa,CAAvB,CAAA;KAJF,CAAA;;AAWA,IAAA,OAAOT,GAAP,CAAA;AACD,GA1BiB,CAAlB,CAAA;AA4BA,EAAA,OAAOH,OAAP,CAAA;AACD,CAAA;;AASD,SAASM,mBAAT,CAA6BN,OAA7B,EAAoD;EAClD,MAAMK,IAAmB,GAAG,CAAC;IAAEY,QAAF;IAAYC,aAAZ;IAA2B,GAAGC,IAAAA;AAA9B,GAAD,KAA0C;IACpE,MAAMC,YAAY,GAAGpB,OAAO,CAACW,QAAR,CAAkBU,KAAD,IAAWA,KAAK,CAACD,YAAlC,CAArB,CAAA;IAEA,oBACEnB,yBAAA,CAAA,aAAA,CAACqB,uBAAD,CAAa,QAAb,EAAA;AAAsB,MAAA,KAAK,EAAEtB,OAAAA;KAC1BkB,EAAAA,aAAa,GACZD,QADY,gBAGZhB,yBAAA,CAAA,aAAA,CAAA,MAAA,EAAAsB,oCAAA,CAAA;MACE,QAAQ,EAAEvB,OAAO,CAACwB,YADpB;AAEE,MAAA,QAAQ,EAAEJ,YAAAA;AAFZ,KAAA,EAGMD,IAHN,CAAA,EAKGF,QALH,CAJJ,CADF,CAAA;GAHF,CAAA;;AAoBA,EAAA,OAAOZ,IAAP,CAAA;AACD;;;;"}
+{"version":3,"file":"useForm.js","sources":["../../src/useForm.tsx"],"sourcesContent":["import type { FormState, FormOptions } from '@tanstack/form-core'\nimport { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/react-store'\nimport { useStore } from '@tanstack/react-store'\nimport React from 'react'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\n\ndeclare module '@tanstack/form-core' {\n  interface Register {\n    FormSubmitEvent: React.FormEvent<HTMLFormElement>\n  }\n\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Form: FormComponent\n    Field: FieldComponent<TFormData, TFormData>\n    useField: UseField<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:\n        | ((state: NoInfer<TSelected>) => React.ReactNode)\n        | React.ReactNode\n    }) => any\n  }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const [formApi] = React.useState(() => {\n    // @ts-ignore\n    const api = new FormApi<TData>(opts)\n\n    api.Form = createFormComponent(api)\n    api.Field = Field as any\n    api.useField = useField as any\n    api.useStore = (\n      // @ts-ignore\n      selector,\n    ) => {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      return useStore(api.store, selector as any) as any\n    }\n    api.Subscribe = (\n      // @ts-ignore\n      props,\n    ) => {\n      return functionalUpdate(\n        props.children,\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        useStore(api.store, props.selector as any),\n      ) as any\n    }\n\n    return api\n  })\n\n  formApi.update(opts)\n\n  return formApi as any\n}\n\nexport type FormProps = React.HTMLProps<HTMLFormElement> & {\n  children: React.ReactNode\n  noFormElement?: boolean\n}\n\nexport type FormComponent = (props: FormProps) => any\n\nfunction createFormComponent(formApi: FormApi<any>) {\n  const Form: FormComponent = ({ children, noFormElement, ...rest }) => {\n    const isSubmitting = formApi.useStore((state) => state.isSubmitting)\n\n    return (\n      <formContext.Provider value={{ formApi }}>\n        {noFormElement ? (\n          children\n        ) : (\n          <form\n            onSubmit={formApi.handleSubmit}\n            disabled={isSubmitting}\n            {...rest}\n          >\n            {children}\n          </form>\n        )}\n      </formContext.Provider>\n    )\n  }\n\n  return Form\n}\n"],"names":["useForm","opts","formApi","React","useState","api","FormApi","Form","createFormComponent","Field","useField","useStore","selector","store","Subscribe","props","functionalUpdate","children","update","noFormElement","rest","isSubmitting","state","formContext","_extends","handleSubmit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA8BO,SAASA,OAAT,CAAwBC,IAAxB,EAAmE;AACxE,EAAA,MAAM,CAACC,OAAD,CAAA,GAAYC,yBAAK,CAACC,QAAN,CAAe,MAAM;AACrC;AACA,IAAA,MAAMC,GAAG,GAAG,IAAIC,gBAAJ,CAAmBL,IAAnB,CAAZ,CAAA;AAEAI,IAAAA,GAAG,CAACE,IAAJ,GAAWC,mBAAmB,CAACH,GAAD,CAA9B,CAAA;IACAA,GAAG,CAACI,KAAJ,GAAYA,cAAZ,CAAA;IACAJ,GAAG,CAACK,QAAJ,GAAeA,iBAAf,CAAA;;IACAL,GAAG,CAACM,QAAJ,GAAe;AAEbC,IAAAA,QAFa,KAGV;AACH;AACA,MAAA,OAAOD,mBAAQ,CAACN,GAAG,CAACQ,KAAL,EAAYD,QAAZ,CAAf,CAAA;KALF,CAAA;;IAOAP,GAAG,CAACS,SAAJ,GAAgB;AAEdC,IAAAA,KAFc,KAGX;AACH,MAAA,OAAOC,yBAAgB,CACrBD,KAAK,CAACE,QADe;MAGrBN,mBAAQ,CAACN,GAAG,CAACQ,KAAL,EAAYE,KAAK,CAACH,QAAlB,CAHa,CAAvB,CAAA;KAJF,CAAA;;AAWA,IAAA,OAAOP,GAAP,CAAA;AACD,GA1BiB,CAAlB,CAAA;EA4BAH,OAAO,CAACgB,MAAR,CAAejB,IAAf,CAAA,CAAA;AAEA,EAAA,OAAOC,OAAP,CAAA;AACD,CAAA;;AASD,SAASM,mBAAT,CAA6BN,OAA7B,EAAoD;EAClD,MAAMK,IAAmB,GAAG,CAAC;IAAEU,QAAF;IAAYE,aAAZ;IAA2B,GAAGC,IAAAA;AAA9B,GAAD,KAA0C;IACpE,MAAMC,YAAY,GAAGnB,OAAO,CAACS,QAAR,CAAkBW,KAAD,IAAWA,KAAK,CAACD,YAAlC,CAArB,CAAA;IAEA,oBACElB,yBAAA,CAAA,aAAA,CAACoB,uBAAD,CAAa,QAAb,EAAA;AAAsB,MAAA,KAAK,EAAE;AAAErB,QAAAA,OAAAA;AAAF,OAAA;KAC1BiB,EAAAA,aAAa,GACZF,QADY,gBAGZd,yBAAA,CAAA,aAAA,CAAA,MAAA,EAAAqB,oCAAA,CAAA;MACE,QAAQ,EAAEtB,OAAO,CAACuB,YADpB;AAEE,MAAA,QAAQ,EAAEJ,YAAAA;AAFZ,KAAA,EAGMD,IAHN,CAAA,EAKGH,QALH,CAJJ,CADF,CAAA;GAHF,CAAA;;AAoBA,EAAA,OAAOV,IAAP,CAAA;AACD;;;;"}

package/build/esm/index.js

@@ -42,38 +42,60 @@ function useFormContext() {
   return formApi;
 }
 
-function createUseField() {
-  return opts => {
-    return useField(opts);
-  };
-}
 function useField(opts) {
   // Get the form API either manually or from context
-  const formApi = useFormContext();
-  const [fieldApi] = React.useState(() => new FieldApi({ ...opts,
-    form: formApi
-  })); // Keep options up to date as they are rendered
+  const {
+    formApi,
+    parentFieldName
+  } = useFormContext();
+  const [fieldApi] = React.useState(() => {
+    const name = (typeof opts.index === 'number' ? [parentFieldName, opts.index, opts.name] : [parentFieldName, opts.name]).filter(d => d !== undefined).join('.');
+    const api = new FieldApi({ ...opts,
+      form: formApi,
+      name: name
+    });
+    api.Field = Field;
+    return api;
+  }); // Keep options up to date as they are rendered
 
   fieldApi.update({ ...opts,
     form: formApi
   });
-  useStore(fieldApi.store); // Instantiates field meta and removes it when unrendered
+  useStore(fieldApi.store, opts.mode === 'array' ? state => {
+    return [state.meta, Object.keys(state.value || []).length];
+  } : undefined); // Instantiates field meta and removes it when unrendered
 
   React.useEffect(() => fieldApi.mount(), [fieldApi]);
   return fieldApi;
-}
+} // export type FieldValue<TFormData, TField> = TFormData extends any[]
+//   ? TField extends `[${infer TIndex extends number | 'i'}].${infer TRest}`
+//     ? DeepValue<TFormData[TIndex extends 'i' ? number : TIndex], TRest>
+//     : TField extends `[${infer TIndex extends number | 'i'}]`
+//     ? TFormData[TIndex extends 'i' ? number : TIndex]
+//     : never
+//   : TField extends `${infer TPrefix}[${infer TIndex extends
+//       | number
+//       | 'i'}].${infer TRest}`
+//   ? DeepValue<
+//       DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex],
+//       TRest
+//     >
+//   : TField extends `${infer TPrefix}[${infer TIndex extends number | 'i'}]`
+//   ? DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex]
+//   : DeepValue<TFormData, TField>
 
-function createFieldComponent() {
-  const ConnectedField = props => /*#__PURE__*/React.createElement(Field, props);
-
-  return ConnectedField;
-}
 function Field({
   children,
   ...fieldOptions
 }) {
   const fieldApi = useField(fieldOptions);
-  return functionalUpdate(children, fieldApi);
+  return /*#__PURE__*/React.createElement(formContext.Provider, {
+    value: {
+      formApi: fieldApi.form,
+      parentFieldName: fieldApi.name
+    },
+    children: functionalUpdate(children, fieldApi)
+  });
 }
 
 function useForm(opts) {
@@ -81,8 +103,8 @@ function useForm(opts) {
     // @ts-ignore
     const api = new FormApi(opts);
     api.Form = createFormComponent(api);
-    api.Field = createFieldComponent();
-    api.useField = createUseField();
+    api.Field = Field;
+    api.useField = useField;
 
     api.useStore = ( // @ts-ignore
     selector) => {
@@ -98,6 +120,7 @@ function useForm(opts) {
 
     return api;
   });
+  formApi.update(opts);
   return formApi;
 }
 
@@ -109,7 +132,9 @@ function createFormComponent(formApi) {
   }) => {
     const isSubmitting = formApi.useStore(state => state.isSubmitting);
     return /*#__PURE__*/React__default.createElement(formContext.Provider, {
-      value: formApi
+      value: {
+        formApi
+      }
     }, noFormElement ? children : /*#__PURE__*/React__default.createElement("form", _extends({
       onSubmit: formApi.handleSubmit,
       disabled: isSubmitting
@@ -126,8 +151,8 @@ function createFormFactory(defaultOpts) {
         ...opts
       });
     },
-    useField: createUseField(),
-    Field: createFieldComponent()
+    useField: useField,
+    Field: Field
   };
 }
 

package/build/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/formContext.ts","../../src/useField.ts","../../src/Field.tsx","../../src/useForm.tsx","../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi } from '@tanstack/form-core'\nimport * as React from 'react'\n\nexport const formContext = React.createContext<FormApi<any> | null>(null)\n\nexport function useFormContext() {\n  const formApi = React.useContext(formContext)\n\n  if (!formApi) {\n    throw new Error(`You are trying to use the form API outside of a form!`)\n  }\n\n  return formApi\n}\n","import * as React from 'react'\n//\nimport { useStore } from '@tanstack/react-store'\nimport type { DeepKeys, DeepValue, FieldOptions } from '@tanstack/form-core'\nimport { FieldApi } from '@tanstack/form-core'\nimport { useFormContext } from './formContext'\nimport type { FormFactory } from './createFormFactory'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldOptions<TData, TFormData> {\n    formFactory?: FormFactory<TFormData>\n  }\n}\n\nexport type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(\n  opts?: { name: TField } & FieldOptions<\n    DeepValue<TFormData, TField>,\n    TFormData\n  >,\n) => FieldApi<DeepValue<TFormData, TField>, TFormData>\n\nexport function createUseField<TFormData>(): UseField<TFormData> {\n  return (opts) => {\n    return useField(opts as any)\n  }\n}\n\nexport function useField<TData, TFormData>(\n  opts: FieldOptions<TData, TFormData> & {\n    // selector: (state: FieldApi<TData, TFormData>) => TSelected\n  },\n): FieldApi<TData, TFormData> {\n  // Get the form API either manually or from context\n  const formApi = useFormContext()\n\n  const [fieldApi] = React.useState<FieldApi<TData, TFormData>>(\n    () => new FieldApi({ ...opts, form: formApi }),\n  )\n\n  // Keep options up to date as they are rendered\n  fieldApi.update({ ...opts, form: formApi })\n\n  useStore(fieldApi.store)\n\n  // Instantiates field meta and removes it when unrendered\n  React.useEffect(() => fieldApi.mount(), [fieldApi])\n\n  return fieldApi\n}\n","import * as React from 'react'\nimport {\n  functionalUpdate,\n  type DeepKeys,\n  type DeepValue,\n  type FieldApi,\n  type FieldOptions,\n} from '@tanstack/form-core'\nimport { useField } from './useField'\n\n//\n\nexport type FieldComponent<TFormData> = <TField extends DeepKeys<TFormData>>({\n  children,\n  ...fieldOptions\n}: {\n  children: (fieldApi: FieldApi<DeepValue<TFormData, TField>, TFormData>) => any\n  name: TField\n} & Omit<FieldOptions<DeepValue<TFormData, TField>, TFormData>, 'name'>) => any\n\nexport function createFieldComponent<TFormData>() {\n  const ConnectedField: FieldComponent<TFormData> = (props) => (\n    <Field {...(props as any)} />\n  )\n  return ConnectedField\n}\n\nexport function Field<TData, TFormData>({\n  children,\n  ...fieldOptions\n}: {\n  children: (fieldApi: FieldApi<TData, TFormData>) => any\n} & FieldOptions<TData, TFormData>) {\n  const fieldApi = useField(fieldOptions as any)\n  return functionalUpdate(children, fieldApi as any)\n}\n","import type { FormState, FormOptions } from '@tanstack/form-core'\nimport { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/react-store'\nimport { useStore } from '@tanstack/react-store'\nimport React from 'react'\nimport { createFieldComponent, type FieldComponent } from './Field'\nimport { createUseField, type UseField } from './useField'\nimport { formContext } from './formContext'\n\ndeclare module '@tanstack/form-core' {\n  interface Register {\n    FormSubmitEvent: React.FormEvent<HTMLFormElement>\n  }\n\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Form: FormComponent\n    Field: FieldComponent<TFormData>\n    useField: UseField<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:\n        | ((state: NoInfer<TSelected>) => React.ReactNode)\n        | React.ReactNode\n    }) => any\n  }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const [formApi] = React.useState(() => {\n    // @ts-ignore\n    const api = new FormApi<TData>(opts)\n\n    api.Form = createFormComponent(api)\n    api.Field = createFieldComponent<TData>()\n    api.useField = createUseField<TData>()\n    api.useStore = (\n      // @ts-ignore\n      selector,\n    ) => {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      return useStore(api.store, selector as any) as any\n    }\n    api.Subscribe = (\n      // @ts-ignore\n      props,\n    ) => {\n      return functionalUpdate(\n        props.children,\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        useStore(api.store, props.selector as any),\n      ) as any\n    }\n\n    return api\n  })\n\n  return formApi as any\n}\n\nexport type FormProps = React.HTMLProps<HTMLFormElement> & {\n  children: React.ReactNode\n  noFormElement?: boolean\n}\n\nexport type FormComponent = (props: FormProps) => any\n\nfunction createFormComponent(formApi: FormApi<any>) {\n  const Form: FormComponent = ({ children, noFormElement, ...rest }) => {\n    const isSubmitting = formApi.useStore((state) => state.isSubmitting)\n\n    return (\n      <formContext.Provider value={formApi}>\n        {noFormElement ? (\n          children\n        ) : (\n          <form\n            onSubmit={formApi.handleSubmit}\n            disabled={isSubmitting}\n            {...rest}\n          >\n            {children}\n          </form>\n        )}\n      </formContext.Provider>\n    )\n  }\n\n  return Form\n}\n","import type { FormApi, FormOptions } from '@tanstack/form-core'\nimport { createUseField, type UseField } from './useField'\nimport { useForm } from './useForm'\nimport { createFieldComponent, type FieldComponent } from './Field'\n\nexport type FormFactory<TFormData> = {\n  useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>\n  useField: UseField<TFormData>\n  Field: FieldComponent<TFormData>\n}\n\nexport function createFormFactory<TFormData>(\n  defaultOpts?: FormOptions<TFormData>,\n): FormFactory<TFormData> {\n  return {\n    useForm: (opts) => {\n      return useForm<TFormData>({ ...defaultOpts, ...opts } as any) as any\n    },\n    useField: createUseField<TFormData>(),\n    Field: createFieldComponent<TFormData>(),\n  }\n}\n"],"names":["formContext","React","createContext","useFormContext","formApi","useContext","Error","createUseField","opts","useField","fieldApi","useState","FieldApi","form","update","useStore","store","useEffect","mount","createFieldComponent","ConnectedField","props","Field","children","fieldOptions","functionalUpdate","useForm","api","FormApi","Form","createFormComponent","selector","Subscribe","noFormElement","rest","isSubmitting","state","handleSubmit","createFormFactory","defaultOpts"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/formContext.ts","../../src/useField.tsx","../../src/useForm.tsx","../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi } from '@tanstack/form-core'\nimport * as React from 'react'\n\nexport const formContext = React.createContext<{\n  formApi: FormApi<any>\n  parentFieldName?: string\n} | null>(null!)\n\nexport function useFormContext() {\n  const formApi = React.useContext(formContext)\n\n  if (!formApi) {\n    throw new Error(`You are trying to use the form API outside of a form!`)\n  }\n\n  return formApi\n}\n","import * as React from 'react'\n//\nimport { useStore } from '@tanstack/react-store'\nimport type {\n  DeepKeys,\n  DeepValue,\n  FieldOptions,\n  Narrow,\n} from '@tanstack/form-core'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useFormContext, formContext } from './formContext'\n\ndeclare module '@tanstack/form-core' {\n  // eslint-disable-next-line no-shadow\n  interface FieldApi<TData, TFormData> {\n    Field: FieldComponent<TData, TFormData>\n  }\n}\n\nexport type UseFieldOptions<TData, TFormData> = FieldOptions<\n  TData,\n  TFormData\n> & {\n  mode?: 'value' | 'array'\n}\n\nexport type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(\n  opts?: { name: Narrow<TField> } & UseFieldOptions<\n    DeepValue<TFormData, TField>,\n    TFormData\n  >,\n) => FieldApi<DeepValue<TFormData, TField>, TFormData>\n\nexport function useField<TData, TFormData>(\n  opts: UseFieldOptions<TData, TFormData>,\n): FieldApi<TData, TFormData> {\n  // Get the form API either manually or from context\n  const { formApi, parentFieldName } = useFormContext()\n\n  const [fieldApi] = React.useState<FieldApi<TData, TFormData>>(() => {\n    const name = (\n      typeof opts.index === 'number'\n        ? [parentFieldName, opts.index, opts.name]\n        : [parentFieldName, opts.name]\n    )\n      .filter((d) => d !== undefined)\n      .join('.')\n\n    const api = new FieldApi({ ...opts, form: formApi, name: name as any })\n\n    api.Field = Field as any\n\n    return api\n  })\n\n  // Keep options up to date as they are rendered\n  fieldApi.update({ ...opts, form: formApi })\n\n  useStore(\n    fieldApi.store,\n    opts.mode === 'array'\n      ? (state: any) => {\n          return [state.meta, Object.keys(state.value || []).length]\n        }\n      : undefined,\n  )\n\n  // Instantiates field meta and removes it when unrendered\n  React.useEffect(() => fieldApi.mount(), [fieldApi])\n\n  return fieldApi\n}\n\n// export type FieldValue<TFormData, TField> = TFormData extends any[]\n//   ? TField extends `[${infer TIndex extends number | 'i'}].${infer TRest}`\n//     ? DeepValue<TFormData[TIndex extends 'i' ? number : TIndex], TRest>\n//     : TField extends `[${infer TIndex extends number | 'i'}]`\n//     ? TFormData[TIndex extends 'i' ? number : TIndex]\n//     : never\n//   : TField extends `${infer TPrefix}[${infer TIndex extends\n//       | number\n//       | 'i'}].${infer TRest}`\n//   ? DeepValue<\n//       DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex],\n//       TRest\n//     >\n//   : TField extends `${infer TPrefix}[${infer TIndex extends number | 'i'}]`\n//   ? DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex]\n//   : DeepValue<TFormData, TField>\n\nexport type FieldValue<TFormData, TField> = TFormData extends any[]\n  ? unknown extends TField\n    ? TFormData[number]\n    : DeepValue<TFormData[number], TField>\n  : DeepValue<TFormData, TField>\n\n// type Test1 = FieldValue<{ foo: { bar: string }[] }, 'foo'>\n// //   ^?\n// type Test2 = FieldValue<{ foo: { bar: string }[] }, 'foo[i]'>\n// //   ^?\n// type Test3 = FieldValue<{ foo: { bar: string }[] }, 'foo[2].bar'>\n// //   ^?\n\nexport type FieldComponent<TParentData, TFormData> = <TField>({\n  children,\n  ...fieldOptions\n}: {\n  children: (\n    fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>,\n  ) => any\n} & Omit<\n  UseFieldOptions<FieldValue<TParentData, TField>, TFormData>,\n  'name' | 'index'\n> &\n  (TParentData extends any[]\n    ? {\n        name?: TField extends undefined ? TField : DeepKeys<TParentData>\n        index: number\n      }\n    : {\n        name: TField extends undefined ? TField : DeepKeys<TParentData>\n        index?: never\n      })) => any\n\nexport function Field<TData, TFormData>({\n  children,\n  ...fieldOptions\n}: {\n  children: (fieldApi: FieldApi<TData, TFormData>) => any\n} & UseFieldOptions<TData, TFormData>) {\n  const fieldApi = useField(fieldOptions as any)\n  return (\n    <formContext.Provider\n      value={{ formApi: fieldApi.form, parentFieldName: fieldApi.name }}\n      children={functionalUpdate(children, fieldApi as any)}\n    />\n  )\n}\n","import type { FormState, FormOptions } from '@tanstack/form-core'\nimport { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/react-store'\nimport { useStore } from '@tanstack/react-store'\nimport React from 'react'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\n\ndeclare module '@tanstack/form-core' {\n  interface Register {\n    FormSubmitEvent: React.FormEvent<HTMLFormElement>\n  }\n\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Form: FormComponent\n    Field: FieldComponent<TFormData, TFormData>\n    useField: UseField<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:\n        | ((state: NoInfer<TSelected>) => React.ReactNode)\n        | React.ReactNode\n    }) => any\n  }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n  const [formApi] = React.useState(() => {\n    // @ts-ignore\n    const api = new FormApi<TData>(opts)\n\n    api.Form = createFormComponent(api)\n    api.Field = Field as any\n    api.useField = useField as any\n    api.useStore = (\n      // @ts-ignore\n      selector,\n    ) => {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      return useStore(api.store, selector as any) as any\n    }\n    api.Subscribe = (\n      // @ts-ignore\n      props,\n    ) => {\n      return functionalUpdate(\n        props.children,\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        useStore(api.store, props.selector as any),\n      ) as any\n    }\n\n    return api\n  })\n\n  formApi.update(opts)\n\n  return formApi as any\n}\n\nexport type FormProps = React.HTMLProps<HTMLFormElement> & {\n  children: React.ReactNode\n  noFormElement?: boolean\n}\n\nexport type FormComponent = (props: FormProps) => any\n\nfunction createFormComponent(formApi: FormApi<any>) {\n  const Form: FormComponent = ({ children, noFormElement, ...rest }) => {\n    const isSubmitting = formApi.useStore((state) => state.isSubmitting)\n\n    return (\n      <formContext.Provider value={{ formApi }}>\n        {noFormElement ? (\n          children\n        ) : (\n          <form\n            onSubmit={formApi.handleSubmit}\n            disabled={isSubmitting}\n            {...rest}\n          >\n            {children}\n          </form>\n        )}\n      </formContext.Provider>\n    )\n  }\n\n  return Form\n}\n","import type { FormApi, FormOptions } from '@tanstack/form-core'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { useForm } from './useForm'\n\nexport type FormFactory<TFormData> = {\n  useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>\n  useField: UseField<TFormData>\n  Field: FieldComponent<TFormData, TFormData>\n}\n\nexport function createFormFactory<TFormData>(\n  defaultOpts?: FormOptions<TFormData>,\n): FormFactory<TFormData> {\n  return {\n    useForm: (opts) => {\n      return useForm<TFormData>({ ...defaultOpts, ...opts } as any) as any\n    },\n    useField: useField as any,\n    Field: Field as any,\n  }\n}\n"],"names":["formContext","React","createContext","useFormContext","formApi","useContext","Error","useField","opts","parentFieldName","fieldApi","useState","name","index","filter","d","undefined","join","api","FieldApi","form","Field","update","useStore","store","mode","state","meta","Object","keys","value","length","useEffect","mount","children","fieldOptions","functionalUpdate","useForm","FormApi","Form","createFormComponent","selector","Subscribe","props","noFormElement","rest","isSubmitting","handleSubmit","createFormFactory","defaultOpts"],"mappings":"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"}

package/build/stats-html.html

@@ -2669,7 +2669,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.production.js","children":[{"name":"node_modules/.pnpm","children":[{"name":"@tanstack+store@0.0.1-beta.84/node_modules/@tanstack/store/build/esm/index.js","uid":"b353-25"},{"name":"@tanstack+react-store@0.0.1-beta.84_react-dom@18.2.0_react@18.2.0/node_modules/@tanstack/react-store/build/esm/index.js","uid":"b353-31"}]},{"name":"packages","children":[{"name":"form-core/build/esm/index.js","uid":"b353-27"},{"name":"react-form/src","children":[{"uid":"b353-33","name":"formContext.ts"},{"uid":"b353-35","name":"useField.ts"},{"uid":"b353-37","name":"Field.tsx"},{"uid":"b353-39","name":"useForm.tsx"},{"uid":"b353-41","name":"createFormFactory.ts"},{"uid":"b353-43","name":"index.ts"}]}]},{"uid":"b353-29","name":"\u0000rollupPluginBabelHelpers.js"}]}],"isRoot":true},"nodeParts":{"b353-25":{"renderedLength":1288,"gzipLength":497,"brotliLength":0,"mainUid":"b353-24"},"b353-27":{"renderedLength":23458,"gzipLength":5139,"brotliLength":0,"mainUid":"b353-26"},"b353-29":{"renderedLength":431,"gzipLength":240,"brotliLength":0,"mainUid":"b353-28"},"b353-31":{"renderedLength":978,"gzipLength":456,"brotliLength":0,"mainUid":"b353-30"},"b353-33":{"renderedLength":296,"gzipLength":200,"brotliLength":0,"mainUid":"b353-32"},"b353-35":{"renderedLength":610,"gzipLength":324,"brotliLength":0,"mainUid":"b353-34"},"b353-37":{"renderedLength":320,"gzipLength":203,"brotliLength":0,"mainUid":"b353-36"},"b353-39":{"renderedLength":1264,"gzipLength":486,"brotliLength":0,"mainUid":"b353-38"},"b353-41":{"renderedLength":242,"gzipLength":153,"brotliLength":0,"mainUid":"b353-40"},"b353-43":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"mainUid":"b353-42"}},"nodeMetas":{"b353-24":{"id":"/node_modules/.pnpm/@tanstack+store@0.0.1-beta.84/node_modules/@tanstack/store/build/esm/index.js","moduleParts":{"index.production.js":"b353-25"},"imported":[],"importedBy":[{"uid":"b353-26"},{"uid":"b353-30"}]},"b353-26":{"id":"/packages/form-core/build/esm/index.js","moduleParts":{"index.production.js":"b353-27"},"imported":[{"uid":"b353-24"}],"importedBy":[{"uid":"b353-42"},{"uid":"b353-38"},{"uid":"b353-36"},{"uid":"b353-34"}]},"b353-28":{"id":"\u0000rollupPluginBabelHelpers.js","moduleParts":{"index.production.js":"b353-29"},"imported":[],"importedBy":[{"uid":"b353-38"}]},"b353-30":{"id":"/node_modules/.pnpm/@tanstack+react-store@0.0.1-beta.84_react-dom@18.2.0_react@18.2.0/node_modules/@tanstack/react-store/build/esm/index.js","moduleParts":{"index.production.js":"b353-31"},"imported":[{"uid":"b353-45"},{"uid":"b353-24"}],"importedBy":[{"uid":"b353-38"},{"uid":"b353-34"}]},"b353-32":{"id":"/packages/react-form/src/formContext.ts","moduleParts":{"index.production.js":"b353-33"},"imported":[{"uid":"b353-44"}],"importedBy":[{"uid":"b353-38"},{"uid":"b353-34"}]},"b353-34":{"id":"/packages/react-form/src/useField.ts","moduleParts":{"index.production.js":"b353-35"},"imported":[{"uid":"b353-44"},{"uid":"b353-30"},{"uid":"b353-26"},{"uid":"b353-32"}],"importedBy":[{"uid":"b353-42"},{"uid":"b353-38"},{"uid":"b353-36"},{"uid":"b353-40"}]},"b353-36":{"id":"/packages/react-form/src/Field.tsx","moduleParts":{"index.production.js":"b353-37"},"imported":[{"uid":"b353-44"},{"uid":"b353-26"},{"uid":"b353-34"}],"importedBy":[{"uid":"b353-42"},{"uid":"b353-38"},{"uid":"b353-40"}]},"b353-38":{"id":"/packages/react-form/src/useForm.tsx","moduleParts":{"index.production.js":"b353-39"},"imported":[{"uid":"b353-28"},{"uid":"b353-26"},{"uid":"b353-30"},{"uid":"b353-44"},{"uid":"b353-36"},{"uid":"b353-34"},{"uid":"b353-32"}],"importedBy":[{"uid":"b353-42"},{"uid":"b353-40"}]},"b353-40":{"id":"/packages/react-form/src/createFormFactory.ts","moduleParts":{"index.production.js":"b353-41"},"imported":[{"uid":"b353-34"},{"uid":"b353-38"},{"uid":"b353-36"}],"importedBy":[{"uid":"b353-42"}]},"b353-42":{"id":"/packages/react-form/src/index.ts","moduleParts":{"index.production.js":"b353-43"},"imported":[{"uid":"b353-26"},{"uid":"b353-38"},{"uid":"b353-36"},{"uid":"b353-34"},{"uid":"b353-40"}],"importedBy":[],"isEntry":true},"b353-44":{"id":"react","moduleParts":{},"imported":[],"importedBy":[{"uid":"b353-38"},{"uid":"b353-36"},{"uid":"b353-34"},{"uid":"b353-32"}],"isExternal":true},"b353-45":{"id":"use-sync-external-store/shim/with-selector","moduleParts":{},"imported":[],"importedBy":[{"uid":"b353-30"}],"isExternal":true}},"env":{"rollup":"2.78.1"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.production.js","children":[{"name":"node_modules/.pnpm","children":[{"name":"@tanstack+store@0.0.1-beta.84/node_modules/@tanstack/store/build/esm/index.js","uid":"766a-25"},{"name":"@tanstack+react-store@0.0.1-beta.84_react-dom@18.2.0_react@18.2.0/node_modules/@tanstack/react-store/build/esm/index.js","uid":"766a-31"}]},{"name":"packages","children":[{"name":"form-core/build/esm/index.js","uid":"766a-27"},{"name":"react-form/src","children":[{"uid":"766a-33","name":"formContext.ts"},{"uid":"766a-35","name":"useField.tsx"},{"uid":"766a-37","name":"useForm.tsx"},{"uid":"766a-39","name":"createFormFactory.ts"},{"uid":"766a-41","name":"index.ts"}]}]},{"uid":"766a-29","name":"\u0000rollupPluginBabelHelpers.js"}]}],"isRoot":true},"nodeParts":{"766a-25":{"renderedLength":1288,"gzipLength":497,"brotliLength":0,"mainUid":"766a-24"},"766a-27":{"renderedLength":23508,"gzipLength":5149,"brotliLength":0,"mainUid":"766a-26"},"766a-29":{"renderedLength":431,"gzipLength":240,"brotliLength":0,"mainUid":"766a-28"},"766a-31":{"renderedLength":978,"gzipLength":456,"brotliLength":0,"mainUid":"766a-30"},"766a-33":{"renderedLength":296,"gzipLength":200,"brotliLength":0,"mainUid":"766a-32"},"766a-35":{"renderedLength":2096,"gzipLength":779,"brotliLength":0,"mainUid":"766a-34"},"766a-37":{"renderedLength":1287,"gzipLength":495,"brotliLength":0,"mainUid":"766a-36"},"766a-39":{"renderedLength":217,"gzipLength":138,"brotliLength":0,"mainUid":"766a-38"},"766a-41":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"mainUid":"766a-40"}},"nodeMetas":{"766a-24":{"id":"/node_modules/.pnpm/@tanstack+store@0.0.1-beta.84/node_modules/@tanstack/store/build/esm/index.js","moduleParts":{"index.production.js":"766a-25"},"imported":[],"importedBy":[{"uid":"766a-26"},{"uid":"766a-30"}]},"766a-26":{"id":"/packages/form-core/build/esm/index.js","moduleParts":{"index.production.js":"766a-27"},"imported":[{"uid":"766a-24"}],"importedBy":[{"uid":"766a-40"},{"uid":"766a-36"},{"uid":"766a-34"}]},"766a-28":{"id":"\u0000rollupPluginBabelHelpers.js","moduleParts":{"index.production.js":"766a-29"},"imported":[],"importedBy":[{"uid":"766a-36"}]},"766a-30":{"id":"/node_modules/.pnpm/@tanstack+react-store@0.0.1-beta.84_react-dom@18.2.0_react@18.2.0/node_modules/@tanstack/react-store/build/esm/index.js","moduleParts":{"index.production.js":"766a-31"},"imported":[{"uid":"766a-43"},{"uid":"766a-24"}],"importedBy":[{"uid":"766a-36"},{"uid":"766a-34"}]},"766a-32":{"id":"/packages/react-form/src/formContext.ts","moduleParts":{"index.production.js":"766a-33"},"imported":[{"uid":"766a-42"}],"importedBy":[{"uid":"766a-36"},{"uid":"766a-34"}]},"766a-34":{"id":"/packages/react-form/src/useField.tsx","moduleParts":{"index.production.js":"766a-35"},"imported":[{"uid":"766a-42"},{"uid":"766a-30"},{"uid":"766a-26"},{"uid":"766a-32"}],"importedBy":[{"uid":"766a-40"},{"uid":"766a-36"},{"uid":"766a-38"}]},"766a-36":{"id":"/packages/react-form/src/useForm.tsx","moduleParts":{"index.production.js":"766a-37"},"imported":[{"uid":"766a-28"},{"uid":"766a-26"},{"uid":"766a-30"},{"uid":"766a-42"},{"uid":"766a-34"},{"uid":"766a-32"}],"importedBy":[{"uid":"766a-40"},{"uid":"766a-38"}]},"766a-38":{"id":"/packages/react-form/src/createFormFactory.ts","moduleParts":{"index.production.js":"766a-39"},"imported":[{"uid":"766a-34"},{"uid":"766a-36"}],"importedBy":[{"uid":"766a-40"}]},"766a-40":{"id":"/packages/react-form/src/index.ts","moduleParts":{"index.production.js":"766a-41"},"imported":[{"uid":"766a-26"},{"uid":"766a-36"},{"uid":"766a-34"},{"uid":"766a-38"}],"importedBy":[],"isEntry":true},"766a-42":{"id":"react","moduleParts":{},"imported":[],"importedBy":[{"uid":"766a-36"},{"uid":"766a-34"},{"uid":"766a-32"}],"isExternal":true},"766a-43":{"id":"use-sync-external-store/shim/with-selector","moduleParts":{},"imported":[],"importedBy":[{"uid":"766a-30"}],"isExternal":true}},"env":{"rollup":"2.78.1"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;