@tanstack/react-form 0.0.10 → 0.0.12

package/src/tests/createFormFactory.test.tsx

@@ -0,0 +1,39 @@
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import * as React from 'react'
+import { createFormFactory } from '..'
+
+describe('createFormFactory', () => {
+  it('should allow default values to be set', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    const formFactory = createFormFactory<Person>({
+      defaultValues: {
+        firstName: 'FirstName',
+        lastName: 'LastName',
+      },
+    })
+
+    function Comp() {
+      const form = formFactory.useForm({})
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            children={(field) => {
+              return <p>{field.getInputProps().value}</p>
+            }}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { findByText, queryByText } = render(<Comp />)
+    expect(await findByText('FirstName')).toBeInTheDocument()
+    expect(queryByText('LastName')).not.toBeInTheDocument()
+  })
+})

package/src/tests/useForm.test.tsx

@@ -0,0 +1,75 @@
+import { fireEvent, render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom'
+import * as React from 'react'
+import { createFormFactory } from '..'
+
+const user = userEvent.setup()
+
+describe('useForm', () => {
+  it('preserves field state', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    const formFactory = createFormFactory<Person>()
+
+    function Comp() {
+      const form = formFactory.useForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultValue={''}
+            children={(field) => {
+              return (
+                <input data-testid="fieldinput" {...field.getInputProps()} />
+              )
+            }}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, queryByText } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    expect(queryByText('FirstName')).not.toBeInTheDocument()
+    await user.type(input, 'FirstName')
+    expect(input).toHaveValue('FirstName')
+  })
+
+  it('should allow default values to be set', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    const formFactory = createFormFactory<Person>()
+
+    function Comp() {
+      const form = formFactory.useForm({
+        defaultValues: {
+          firstName: 'FirstName',
+          lastName: 'LastName',
+        },
+      })
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            children={(field) => {
+              return <p>{field.getInputProps().value}</p>
+            }}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { findByText, queryByText } = render(<Comp />)
+    expect(await findByText('FirstName')).toBeInTheDocument()
+    expect(queryByText('LastName')).not.toBeInTheDocument()
+  })
+})

package/src/useField.tsx

@@ -54,10 +54,10 @@ export function useField<TData, TFormData>(
   })
 
   // Keep options up to date as they are rendered
-  fieldApi.update({ ...opts, form: formApi })
+  fieldApi.update({ ...opts, form: formApi } as never)
 
   useStore(
-    fieldApi.store,
+    fieldApi.store as any,
     opts.mode === 'array'
       ? (state: any) => {
           return [state.meta, Object.keys(state.value || []).length]

package/src/useForm.tsx

@@ -41,6 +41,7 @@ export function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {
     // @ts-ignore
     const api = new FormApi<TData>(opts)
 
+    // eslint-disable-next-line react/display-name
     api.Provider = (props) => (
       <formContext.Provider {...props} value={{ formApi: api }} />
     )
@@ -57,7 +58,7 @@ export function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {
       selector,
     ) => {
       // eslint-disable-next-line react-hooks/rules-of-hooks
-      return useStore(api.store, selector as any) as any
+      return useStore(api.store as any, selector as any) as any
     }
     api.Subscribe = (
       // @ts-ignore
@@ -66,7 +67,7 @@ export function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {
       return functionalUpdate(
         props.children,
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        useStore(api.store, props.selector as any),
+        useStore(api.store as any, props.selector as any),
       ) as any
     }
 

package/build/cjs/_virtual/_rollupPluginBabelHelpers.js.map

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

package/build/cjs/createFormFactory.js

@@ -1,31 +0,0 @@
-/**
- * react-form
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var useField = require('./useField.js');
-var useForm = require('./useForm.js');
-
-function createFormFactory(defaultOpts) {
-  return {
-    useForm: opts => {
-      return useForm.useForm({ ...defaultOpts,
-        ...opts
-      });
-    },
-    useField: useField.useField,
-    Field: useField.Field
-  };
-}
-
-exports.createFormFactory = createFormFactory;
-//# sourceMappingURL=createFormFactory.js.map

package/build/cjs/useField.js.map

@@ -1 +0,0 @@
-{"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\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;EAEA,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

@@ -1,67 +0,0 @@
-/**
- * react-form
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
-var formCore = require('@tanstack/form-core');
-var reactStore = require('@tanstack/react-store');
-var React = require('react');
-var useField = require('./useField.js');
-var formContext = require('./formContext.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-function useForm(opts) {
-  const [formApi] = React__default["default"].useState(() => {
-    // @ts-ignore
-    const api = new formCore.FormApi(opts);
-
-    api.Provider = props => /*#__PURE__*/React__default["default"].createElement(formContext.formContext.Provider, _rollupPluginBabelHelpers["extends"]({}, props, {
-      value: {
-        formApi: api
-      }
-    }));
-
-    api.getFormProps = () => {
-      return {
-        onSubmit: formApi.handleSubmit,
-        disabled: api.state.isSubmitting
-      };
-    };
-
-    api.Field = useField.Field;
-    api.useField = useField.useField;
-
-    api.useStore = ( // @ts-ignore
-    selector) => {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      return reactStore.useStore(api.store, selector);
-    };
-
-    api.Subscribe = ( // @ts-ignore
-    props) => {
-      return formCore.functionalUpdate(props.children, // eslint-disable-next-line react-hooks/rules-of-hooks
-      reactStore.useStore(api.store, props.selector));
-    };
-
-    return api;
-  });
-  formApi.useStore(state => state.isSubmitting);
-  formApi.update(opts);
-  return formApi;
-}
-
-exports.useForm = useForm;
-//# sourceMappingURL=useForm.js.map

package/build/cjs/useForm.js.map

@@ -1 +0,0 @@
-{"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\nexport type FormSubmitEvent = React.FormEvent<HTMLFormElement>\n\ndeclare module '@tanstack/form-core' {\n  interface Register {\n    FormSubmitEvent: FormSubmitEvent\n  }\n\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: { children: any }) => any\n    getFormProps: () => FormProps\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 type FormProps = {\n  onSubmit: (e: FormSubmitEvent) => void\n  disabled: boolean\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.Provider = (props) => (\n      <formContext.Provider {...props} value={{ formApi: api }} />\n    )\n    api.getFormProps = () => {\n      return {\n        onSubmit: formApi.handleSubmit,\n        disabled: api.state.isSubmitting,\n      }\n    }\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.useStore((state) => state.isSubmitting)\n  formApi.update(opts)\n\n  return formApi as any\n}\n"],"names":["useForm","opts","formApi","React","useState","api","FormApi","Provider","props","formContext","_extends","getFormProps","onSubmit","handleSubmit","disabled","state","isSubmitting","Field","useField","useStore","selector","store","Subscribe","functionalUpdate","children","update"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAsCO,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;;IAEAI,GAAG,CAACE,QAAJ,GAAgBC,KAAD,iBACbL,wCAACM,uBAAD,CAAa,QAAb,EAAAC,oCAAA,CAAA,EAAA,EAA0BF,KAA1B,EAAA;AAAiC,MAAA,KAAK,EAAE;AAAEN,QAAAA,OAAO,EAAEG,GAAAA;AAAX,OAAA;KAD1C,CAAA,CAAA,CAAA;;IAGAA,GAAG,CAACM,YAAJ,GAAmB,MAAM;MACvB,OAAO;QACLC,QAAQ,EAAEV,OAAO,CAACW,YADb;AAELC,QAAAA,QAAQ,EAAET,GAAG,CAACU,KAAJ,CAAUC,YAAAA;OAFtB,CAAA;KADF,CAAA;;IAMAX,GAAG,CAACY,KAAJ,GAAYA,cAAZ,CAAA;IACAZ,GAAG,CAACa,QAAJ,GAAeA,iBAAf,CAAA;;IACAb,GAAG,CAACc,QAAJ,GAAe;AAEbC,IAAAA,QAFa,KAGV;AACH;AACA,MAAA,OAAOD,mBAAQ,CAACd,GAAG,CAACgB,KAAL,EAAYD,QAAZ,CAAf,CAAA;KALF,CAAA;;IAOAf,GAAG,CAACiB,SAAJ,GAAgB;AAEdd,IAAAA,KAFc,KAGX;AACH,MAAA,OAAOe,yBAAgB,CACrBf,KAAK,CAACgB,QADe;MAGrBL,mBAAQ,CAACd,GAAG,CAACgB,KAAL,EAAYb,KAAK,CAACY,QAAlB,CAHa,CAAvB,CAAA;KAJF,CAAA;;AAWA,IAAA,OAAOf,GAAP,CAAA;AACD,GAlCiB,CAAlB,CAAA;AAoCAH,EAAAA,OAAO,CAACiB,QAAR,CAAkBJ,KAAD,IAAWA,KAAK,CAACC,YAAlC,CAAA,CAAA;EACAd,OAAO,CAACuB,MAAR,CAAexB,IAAf,CAAA,CAAA;AAEA,EAAA,OAAOC,OAAP,CAAA;AACD;;;;"}

package/build/esm/index.js

@@ -1,154 +0,0 @@
-/**
- * react-form
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-import { FieldApi, functionalUpdate, FormApi } from '@tanstack/form-core';
-export { FieldApi, FormApi, functionalUpdate } from '@tanstack/form-core';
-import { useStore } from '@tanstack/react-store';
-import * as React from 'react';
-import React__default from 'react';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-const formContext = /*#__PURE__*/React.createContext(null);
-function useFormContext() {
-  const formApi = React.useContext(formContext);
-
-  if (!formApi) {
-    throw new Error("You are trying to use the form API outside of a form!");
-  }
-
-  return formApi;
-}
-
-function useField(opts) {
-  // Get the form API either manually or from context
-  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, 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 Field({
-  children,
-  ...fieldOptions
-}) {
-  const fieldApi = useField(fieldOptions);
-  return /*#__PURE__*/React.createElement(formContext.Provider, {
-    value: {
-      formApi: fieldApi.form,
-      parentFieldName: fieldApi.name
-    },
-    children: functionalUpdate(children, fieldApi)
-  });
-}
-
-function useForm(opts) {
-  const [formApi] = React__default.useState(() => {
-    // @ts-ignore
-    const api = new FormApi(opts);
-
-    api.Provider = props => /*#__PURE__*/React__default.createElement(formContext.Provider, _extends({}, props, {
-      value: {
-        formApi: api
-      }
-    }));
-
-    api.getFormProps = () => {
-      return {
-        onSubmit: formApi.handleSubmit,
-        disabled: api.state.isSubmitting
-      };
-    };
-
-    api.Field = Field;
-    api.useField = useField;
-
-    api.useStore = ( // @ts-ignore
-    selector) => {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      return useStore(api.store, selector);
-    };
-
-    api.Subscribe = ( // @ts-ignore
-    props) => {
-      return functionalUpdate(props.children, // eslint-disable-next-line react-hooks/rules-of-hooks
-      useStore(api.store, props.selector));
-    };
-
-    return api;
-  });
-  formApi.useStore(state => state.isSubmitting);
-  formApi.update(opts);
-  return formApi;
-}
-
-function createFormFactory(defaultOpts) {
-  return {
-    useForm: opts => {
-      return useForm({ ...defaultOpts,
-        ...opts
-      });
-    },
-    useField: useField,
-    Field: Field
-  };
-}
-
-export { Field, createFormFactory, useField, useForm };
-//# sourceMappingURL=index.js.map

package/build/esm/index.js.map

@@ -1 +0,0 @@
-{"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\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\nexport type FormSubmitEvent = React.FormEvent<HTMLFormElement>\n\ndeclare module '@tanstack/form-core' {\n  interface Register {\n    FormSubmitEvent: FormSubmitEvent\n  }\n\n  // eslint-disable-next-line no-shadow\n  interface FormApi<TFormData> {\n    Provider: (props: { children: any }) => any\n    getFormProps: () => FormProps\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 type FormProps = {\n  onSubmit: (e: FormSubmitEvent) => void\n  disabled: boolean\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.Provider = (props) => (\n      <formContext.Provider {...props} value={{ formApi: api }} />\n    )\n    api.getFormProps = () => {\n      return {\n        onSubmit: formApi.handleSubmit,\n        disabled: api.state.isSubmitting,\n      }\n    }\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.useStore((state) => state.isSubmitting)\n  formApi.update(opts)\n\n  return formApi as any\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","Provider","props","getFormProps","onSubmit","handleSubmit","disabled","isSubmitting","selector","Subscribe","createFormFactory","defaultOpts"],"mappings":"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"}