@tanstack/react-form 0.0.5 → 0.0.6

package/build/cjs/Field.js

@@ -12,7 +12,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var formCore = require('@tanstack/form-core');
 var useField = require('./useField.js');
@@ -37,10 +36,8 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-function createFieldComponent(formApi) {
-  const ConnectedField = props => /*#__PURE__*/React__namespace.createElement(Field, _rollupPluginBabelHelpers["extends"]({}, props, {
-    form: formApi
-  }));
+function createFieldComponent() {
+  const ConnectedField = props => /*#__PURE__*/React__namespace.createElement(Field, props);
 
   return ConnectedField;
 }

package/build/cjs/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../src/Field.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n  functionalUpdate,\n  type DeepKeys,\n  type DeepValue,\n  type FieldApi,\n  type FieldOptions,\n  type FormApi,\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>(formApi: FormApi<TFormData>) {\n  const ConnectedField: FieldComponent<TFormData> = (props) => (\n    <Field {...(props as any)} form={formApi} />\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"],"names":["createFieldComponent","formApi","ConnectedField","props","React","Field","children","fieldOptions","fieldApi","useField","functionalUpdate"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBO,SAASA,oBAAT,CAAyCC,OAAzC,EAAsE;AAC3E,EAAA,MAAMC,cAAyC,GAAIC,KAAD,iBAChDC,gBAAC,CAAA,aAAA,CAAA,KAAD,2CAAYD,KAAZ,EAAA;AAA2B,IAAA,IAAI,EAAEF,OAAAA;GADnC,CAAA,CAAA,CAAA;;AAGA,EAAA,OAAOC,cAAP,CAAA;AACD,CAAA;AAEM,SAASG,KAAT,CAAiC;EACtCC,QADsC;EAEtC,GAAGC,YAAAA;AAFmC,CAAjC,EAK6B;AAClC,EAAA,MAAMC,QAAQ,GAAGC,iBAAQ,CAACF,YAAD,CAAzB,CAAA;AACA,EAAA,OAAOG,yBAAgB,CAACJ,QAAD,EAAWE,QAAX,CAAvB,CAAA;AACD;;;;;"}
+{"version":3,"file":"Field.js","sources":["../../src/Field.tsx"],"sourcesContent":["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"],"names":["createFieldComponent","ConnectedField","props","React","Field","children","fieldOptions","fieldApi","useField","functionalUpdate"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,SAASA,oBAAT,GAA2C;EAChD,MAAMC,cAAyC,GAAIC,KAAD,iBAChDC,+BAAC,KAAD,EAAYD,KAAZ,CADF,CAAA;;AAGA,EAAA,OAAOD,cAAP,CAAA;AACD,CAAA;AAEM,SAASG,KAAT,CAAiC;EACtCC,QADsC;EAEtC,GAAGC,YAAAA;AAFmC,CAAjC,EAK6B;AAClC,EAAA,MAAMC,QAAQ,GAAGC,iBAAQ,CAACF,YAAD,CAAzB,CAAA;AACA,EAAA,OAAOG,yBAAgB,CAACJ,QAAD,EAAWE,QAAX,CAAvB,CAAA;AACD;;;;;"}

package/build/cjs/createFormFactory.js

@@ -0,0 +1,32 @@
+/**
+ * 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');
+var Field = require('./Field.js');
+
+function createFormFactory(defaultOpts) {
+  return {
+    useForm: opts => {
+      return useForm.useForm({ ...defaultOpts,
+        ...opts
+      });
+    },
+    useField: useField.createUseField(),
+    Field: Field.createFieldComponent()
+  };
+}
+
+exports.createFormFactory = createFormFactory;
+//# sourceMappingURL=createFormFactory.js.map

package/build/cjs/createFormFactory.js.map

@@ -0,0 +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;;;;"}

package/build/cjs/formContext.js

@@ -35,13 +35,9 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 const formContext = /*#__PURE__*/React__namespace.createContext(null);
-function useFormContext(customFormApi) {
+function useFormContext() {
   const formApi = React__namespace.useContext(formContext);
 
-  if (customFormApi) {
-    return customFormApi;
-  }
-
   if (!formApi) {
     throw new Error("You are trying to use the form API outside of a form!");
   }

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(customFormApi?: FormApi<any>) {\n  const formApi = React.useContext(formContext)\n\n  if (customFormApi) {\n    return customFormApi\n  }\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","customFormApi","formApi","useContext","Error"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGO,MAAMA,WAAW,gBAAGC,gBAAK,CAACC,aAAN,CAAyC,IAAzC,EAApB;AAEA,SAASC,cAAT,CAAwBC,aAAxB,EAAsD;AAC3D,EAAA,MAAMC,OAAO,GAAGJ,gBAAK,CAACK,UAAN,CAAiBN,WAAjB,CAAhB,CAAA;;AAEA,EAAA,IAAII,aAAJ,EAAmB;AACjB,IAAA,OAAOA,aAAP,CAAA;AACD,GAAA;;EAED,IAAI,CAACC,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<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;;;;;"}

package/build/cjs/index.js

@@ -16,19 +16,24 @@ 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');
 
 
 
-exports.createFormComponent = useForm.createFormComponent;
+Object.defineProperty(exports, 'FieldApi', {
+  enumerable: true,
+  get: function () { return formCore.FieldApi; }
+});
+Object.defineProperty(exports, 'FormApi', {
+  enumerable: true,
+  get: function () { return formCore.FormApi; }
+});
+Object.defineProperty(exports, 'functionalUpdate', {
+  enumerable: true,
+  get: function () { return formCore.functionalUpdate; }
+});
 exports.useForm = useForm.useForm;
 exports.Field = Field.Field;
-exports.createFieldComponent = Field.createFieldComponent;
-exports.createUseField = useField.createUseField;
 exports.useField = useField.useField;
-Object.keys(formCore).forEach(function (k) {
-	if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
-		enumerable: true,
-		get: function () { return formCore[k]; }
-	});
-});
+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,22 +37,14 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-function createUseField(formApi) {
-  const useFormField = opts => {
-    return useField({ ...opts,
-      form: formApi
-    });
+function createUseField() {
+  return opts => {
+    return useField(opts);
   };
-
-  return useFormField;
 }
 function useField(opts) {
-  // invariant( // TODO:
-  //   opts.name,
-  //   `useField: A field is required to use this hook. eg, useField('myField', options)`
-  // )
   // Get the form API either manually or from context
-  const formApi = formContext.useFormContext(opts.form);
+  const formApi = formContext.useFormContext();
   const [fieldApi] = React__namespace.useState(() => new formCore.FieldApi({ ...opts,
     form: formApi
   })); // Keep options up to date as they are rendered

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 {\n  DeepKeys,\n  DeepValue,\n  FieldOptions,\n  FormApi,\n} from '@tanstack/form-core'\nimport { FieldApi } from '@tanstack/form-core'\nimport { useFormContext } from './formContext'\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>(formApi: FormApi<TFormData>) {\n  const useFormField: UseField<TFormData> = (opts) => {\n    return useField({ ...opts, form: formApi } as any)\n  }\n\n  return useFormField\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  // invariant( // TODO:\n  //   opts.name,\n  //   `useField: A field is required to use this hook. eg, useField('myField', options)`\n  // )\n\n  // Get the form API either manually or from context\n  const formApi = useFormContext(opts.form)\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","formApi","useFormField","opts","useField","form","useFormContext","fieldApi","React","useState","FieldApi","update","useStore","store","useEffect","mount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBO,SAASA,cAAT,CAAmCC,OAAnC,EAAgE;EACrE,MAAMC,YAAiC,GAAIC,IAAD,IAAU;AAClD,IAAA,OAAOC,QAAQ,CAAC,EAAE,GAAGD,IAAL;AAAWE,MAAAA,IAAI,EAAEJ,OAAAA;AAAjB,KAAD,CAAf,CAAA;GADF,CAAA;;AAIA,EAAA,OAAOC,YAAP,CAAA;AACD,CAAA;AAEM,SAASE,QAAT,CACLD,IADK,EAIuB;AAC5B;AACA;AACA;AACA;AAEA;AACA,EAAA,MAAMF,OAAO,GAAGK,0BAAc,CAACH,IAAI,CAACE,IAAN,CAA9B,CAAA;AAEA,EAAA,MAAM,CAACE,QAAD,CAAaC,GAAAA,gBAAK,CAACC,QAAN,CACjB,MAAM,IAAIC,iBAAJ,CAAa,EAAE,GAAGP,IAAL;AAAWE,IAAAA,IAAI,EAAEJ,OAAAA;GAA9B,CADW,CAAnB,CAT4B;;AAc5BM,EAAAA,QAAQ,CAACI,MAAT,CAAgB,EAAE,GAAGR,IAAL;AAAWE,IAAAA,IAAI,EAAEJ,OAAAA;GAAjC,CAAA,CAAA;AAEAW,EAAAA,mBAAQ,CAACL,QAAQ,CAACM,KAAV,CAAR,CAhB4B;;EAmB5BL,gBAAK,CAACM,SAAN,CAAgB,MAAMP,QAAQ,CAACQ,KAAT,EAAtB,EAAwC,CAACR,QAAD,CAAxC,CAAA,CAAA;AAEA,EAAA,OAAOA,QAAP,CAAA;AACD;;;;;"}
+{"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;;;;;"}

package/build/cjs/useForm.js

@@ -24,14 +24,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-//
 function useForm(opts) {
   const [formApi] = React__default["default"].useState(() => {
     // @ts-ignore
-    const api = new formCore.FormApi(opts || {});
+    const api = new formCore.FormApi(opts);
     api.Form = createFormComponent(api);
-    api.Field = Field.createFieldComponent(api);
-    api.useField = useField.createUseField(api);
+    api.Field = Field.createFieldComponent();
+    api.useField = useField.createUseField();
 
     api.useStore = ( // @ts-ignore
     selector) => {
@@ -46,10 +45,10 @@ function useForm(opts) {
     };
 
     return api;
-  }); // React.useEffect(() => formApi.mount(), [])
-
+  });
   return formApi;
 }
+
 function createFormComponent(formApi) {
   const Form = ({
     children,
@@ -62,35 +61,11 @@ function createFormComponent(formApi) {
     }, noFormElement ? children : /*#__PURE__*/React__default["default"].createElement("form", _rollupPluginBabelHelpers["extends"]({
       onSubmit: formApi.handleSubmit,
       disabled: isSubmitting
-    }, rest), formApi.options.debugForm ? /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        margin: '2rem 0'
-      }
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        fontWeight: 'bolder'
-      }
-    }, "Form State"), /*#__PURE__*/React__default["default"].createElement("pre", null, /*#__PURE__*/React__default["default"].createElement("code", null, JSON.stringify(formApi, safeStringifyReplace(), 2)))) : null, children));
+    }, rest), children));
   };
 
   return Form;
 }
 
-function safeStringifyReplace() {
-  const set = new Set();
-  return (_key, value) => {
-    if (typeof value === 'object' || Array.isArray(value)) {
-      if (set.has(value)) {
-        return '(circular value)';
-      }
-
-      set.add(value);
-    }
-
-    return typeof value === 'function' ? undefined : value;
-  };
-}
-
-exports.createFormComponent = createFormComponent;
 exports.useForm = useForm;
 //# sourceMappingURL=useForm.js.map

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  // 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//\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(api)\n    api.useField = createUseField(api)\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\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),\n      ) as any\n    }\n\n    return api\n  })\n\n  // React.useEffect(() => formApi.mount(), [])\n\n  return formApi\n}\n\nexport type FormProps = React.HTMLProps<HTMLFormElement> & {\n  children: React.ReactNode\n  noFormElement?: boolean\n}\n\nexport type FormComponent = (props: FormProps) => any\n\nexport function 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            {formApi.options.debugForm ? (\n              <div\n                style={{\n                  margin: '2rem 0',\n                }}\n              >\n                <div\n                  style={{\n                    fontWeight: 'bolder',\n                  }}\n                >\n                  Form State\n                </div>\n                <pre>\n                  <code>\n                    {JSON.stringify(formApi, safeStringifyReplace(), 2)}\n                  </code>\n                </pre>\n              </div>\n            ) : null}\n            {children}\n          </form>\n        )}\n      </formContext.Provider>\n    )\n  }\n\n  return Form\n}\n\nfunction safeStringifyReplace() {\n  const set = new Set()\n  return (_key: string, value: any) => {\n    if (typeof value === 'object' || Array.isArray(value)) {\n      if (set.has(value)) {\n        return '(circular value)'\n      }\n      set.add(value)\n    }\n    return typeof value === 'function' ? undefined : value\n  }\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","options","debugForm","margin","fontWeight","JSON","stringify","safeStringifyReplace","set","Set","_key","value","Array","isArray","has","add","undefined"],"mappings":"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"}
+{"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;;;;"}

package/build/esm/index.js

@@ -9,7 +9,7 @@
  * @license MIT
  */
 import { FieldApi, functionalUpdate, FormApi } from '@tanstack/form-core';
-export * 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';
@@ -32,13 +32,9 @@ function _extends() {
 }
 
 const formContext = /*#__PURE__*/React.createContext(null);
-function useFormContext(customFormApi) {
+function useFormContext() {
   const formApi = React.useContext(formContext);
 
-  if (customFormApi) {
-    return customFormApi;
-  }
-
   if (!formApi) {
     throw new Error("You are trying to use the form API outside of a form!");
   }
@@ -46,22 +42,14 @@ function useFormContext(customFormApi) {
   return formApi;
 }
 
-function createUseField(formApi) {
-  const useFormField = opts => {
-    return useField({ ...opts,
-      form: formApi
-    });
+function createUseField() {
+  return opts => {
+    return useField(opts);
   };
-
-  return useFormField;
 }
 function useField(opts) {
-  // invariant( // TODO:
-  //   opts.name,
-  //   `useField: A field is required to use this hook. eg, useField('myField', options)`
-  // )
   // Get the form API either manually or from context
-  const formApi = useFormContext(opts.form);
+  const formApi = useFormContext();
   const [fieldApi] = React.useState(() => new FieldApi({ ...opts,
     form: formApi
   })); // Keep options up to date as they are rendered
@@ -75,10 +63,8 @@ function useField(opts) {
   return fieldApi;
 }
 
-function createFieldComponent(formApi) {
-  const ConnectedField = props => /*#__PURE__*/React.createElement(Field, _extends({}, props, {
-    form: formApi
-  }));
+function createFieldComponent() {
+  const ConnectedField = props => /*#__PURE__*/React.createElement(Field, props);
 
   return ConnectedField;
 }
@@ -90,14 +76,13 @@ function Field({
   return functionalUpdate(children, fieldApi);
 }
 
-//
 function useForm(opts) {
   const [formApi] = React__default.useState(() => {
     // @ts-ignore
-    const api = new FormApi(opts || {});
+    const api = new FormApi(opts);
     api.Form = createFormComponent(api);
-    api.Field = createFieldComponent(api);
-    api.useField = createUseField(api);
+    api.Field = createFieldComponent();
+    api.useField = createUseField();
 
     api.useStore = ( // @ts-ignore
     selector) => {
@@ -112,10 +97,10 @@ function useForm(opts) {
     };
 
     return api;
-  }); // React.useEffect(() => formApi.mount(), [])
-
+  });
   return formApi;
 }
+
 function createFormComponent(formApi) {
   const Form = ({
     children,
@@ -128,34 +113,23 @@ function createFormComponent(formApi) {
     }, noFormElement ? children : /*#__PURE__*/React__default.createElement("form", _extends({
       onSubmit: formApi.handleSubmit,
       disabled: isSubmitting
-    }, rest), formApi.options.debugForm ? /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        margin: '2rem 0'
-      }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        fontWeight: 'bolder'
-      }
-    }, "Form State"), /*#__PURE__*/React__default.createElement("pre", null, /*#__PURE__*/React__default.createElement("code", null, JSON.stringify(formApi, safeStringifyReplace(), 2)))) : null, children));
+    }, rest), children));
   };
 
   return Form;
 }
 
-function safeStringifyReplace() {
-  const set = new Set();
-  return (_key, value) => {
-    if (typeof value === 'object' || Array.isArray(value)) {
-      if (set.has(value)) {
-        return '(circular value)';
-      }
-
-      set.add(value);
-    }
-
-    return typeof value === 'function' ? undefined : value;
+function createFormFactory(defaultOpts) {
+  return {
+    useForm: opts => {
+      return useForm({ ...defaultOpts,
+        ...opts
+      });
+    },
+    useField: createUseField(),
+    Field: createFieldComponent()
   };
 }
 
-export { Field, createFieldComponent, createFormComponent, createUseField, useField, useForm };
+export { Field, createFormFactory, useField, useForm };
 //# sourceMappingURL=index.js.map

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"],"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(customFormApi?: FormApi<any>) {\n  const formApi = React.useContext(formContext)\n\n  if (customFormApi) {\n    return customFormApi\n  }\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  FormApi,\n} from '@tanstack/form-core'\nimport { FieldApi } from '@tanstack/form-core'\nimport { useFormContext } from './formContext'\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>(formApi: FormApi<TFormData>) {\n  const useFormField: UseField<TFormData> = (opts) => {\n    return useField({ ...opts, form: formApi } as any)\n  }\n\n  return useFormField\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  // invariant( // TODO:\n  //   opts.name,\n  //   `useField: A field is required to use this hook. eg, useField('myField', options)`\n  // )\n\n  // Get the form API either manually or from context\n  const formApi = useFormContext(opts.form)\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  type FormApi,\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>(formApi: FormApi<TFormData>) {\n  const ConnectedField: FieldComponent<TFormData> = (props) => (\n    <Field {...(props as any)} form={formApi} />\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  // 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//\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(api)\n    api.useField = createUseField(api)\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\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),\n      ) as any\n    }\n\n    return api\n  })\n\n  // React.useEffect(() => formApi.mount(), [])\n\n  return formApi\n}\n\nexport type FormProps = React.HTMLProps<HTMLFormElement> & {\n  children: React.ReactNode\n  noFormElement?: boolean\n}\n\nexport type FormComponent = (props: FormProps) => any\n\nexport function 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            {formApi.options.debugForm ? (\n              <div\n                style={{\n                  margin: '2rem 0',\n                }}\n              >\n                <div\n                  style={{\n                    fontWeight: 'bolder',\n                  }}\n                >\n                  Form State\n                </div>\n                <pre>\n                  <code>\n                    {JSON.stringify(formApi, safeStringifyReplace(), 2)}\n                  </code>\n                </pre>\n              </div>\n            ) : null}\n            {children}\n          </form>\n        )}\n      </formContext.Provider>\n    )\n  }\n\n  return Form\n}\n\nfunction safeStringifyReplace() {\n  const set = new Set()\n  return (_key: string, value: any) => {\n    if (typeof value === 'object' || Array.isArray(value)) {\n      if (set.has(value)) {\n        return '(circular value)'\n      }\n      set.add(value)\n    }\n    return typeof value === 'function' ? undefined : value\n  }\n}\n"],"names":["formContext","React","createContext","useFormContext","customFormApi","formApi","useContext","Error","createUseField","useFormField","opts","useField","form","fieldApi","useState","FieldApi","update","useStore","store","useEffect","mount","createFieldComponent","ConnectedField","props","Field","children","fieldOptions","functionalUpdate","useForm","api","FormApi","Form","createFormComponent","selector","Subscribe","noFormElement","rest","isSubmitting","state","handleSubmit","options","debugForm","margin","fontWeight","JSON","stringify","safeStringifyReplace","set","Set","_key","value","Array","isArray","has","add","undefined"],"mappings":"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"}
+{"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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"}

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":"3676-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":"3676-31"}]},{"name":"packages","children":[{"name":"form-core/build/esm/index.js","uid":"3676-27"},{"name":"react-form/src","children":[{"uid":"3676-33","name":"formContext.ts"},{"uid":"3676-35","name":"useField.ts"},{"uid":"3676-37","name":"Field.tsx"},{"uid":"3676-39","name":"useForm.tsx"},{"uid":"3676-41","name":"index.ts"}]}]},{"uid":"3676-29","name":"\u0000rollupPluginBabelHelpers.js"}]}],"isRoot":true},"nodeParts":{"3676-25":{"renderedLength":1288,"gzipLength":497,"brotliLength":0,"mainUid":"3676-24"},"3676-27":{"renderedLength":23393,"gzipLength":5130,"brotliLength":0,"mainUid":"3676-26"},"3676-29":{"renderedLength":431,"gzipLength":240,"brotliLength":0,"mainUid":"3676-28"},"3676-31":{"renderedLength":978,"gzipLength":456,"brotliLength":0,"mainUid":"3676-30"},"3676-33":{"renderedLength":369,"gzipLength":218,"brotliLength":0,"mainUid":"3676-32"},"3676-35":{"renderedLength":850,"gzipLength":417,"brotliLength":0,"mainUid":"3676-34"},"3676-37":{"renderedLength":370,"gzipLength":227,"brotliLength":0,"mainUid":"3676-36"},"3676-39":{"renderedLength":2160,"gzipLength":767,"brotliLength":0,"mainUid":"3676-38"},"3676-41":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"mainUid":"3676-40"}},"nodeMetas":{"3676-24":{"id":"/node_modules/.pnpm/@tanstack+store@0.0.1-beta.84/node_modules/@tanstack/store/build/esm/index.js","moduleParts":{"index.production.js":"3676-25"},"imported":[],"importedBy":[{"uid":"3676-26"},{"uid":"3676-30"}]},"3676-26":{"id":"/packages/form-core/build/esm/index.js","moduleParts":{"index.production.js":"3676-27"},"imported":[{"uid":"3676-24"}],"importedBy":[{"uid":"3676-40"},{"uid":"3676-38"},{"uid":"3676-36"},{"uid":"3676-34"}]},"3676-28":{"id":"\u0000rollupPluginBabelHelpers.js","moduleParts":{"index.production.js":"3676-29"},"imported":[],"importedBy":[{"uid":"3676-38"},{"uid":"3676-36"}]},"3676-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":"3676-31"},"imported":[{"uid":"3676-43"},{"uid":"3676-24"}],"importedBy":[{"uid":"3676-38"},{"uid":"3676-34"}]},"3676-32":{"id":"/packages/react-form/src/formContext.ts","moduleParts":{"index.production.js":"3676-33"},"imported":[{"uid":"3676-42"}],"importedBy":[{"uid":"3676-38"},{"uid":"3676-34"}]},"3676-34":{"id":"/packages/react-form/src/useField.ts","moduleParts":{"index.production.js":"3676-35"},"imported":[{"uid":"3676-42"},{"uid":"3676-30"},{"uid":"3676-26"},{"uid":"3676-32"}],"importedBy":[{"uid":"3676-40"},{"uid":"3676-38"},{"uid":"3676-36"}]},"3676-36":{"id":"/packages/react-form/src/Field.tsx","moduleParts":{"index.production.js":"3676-37"},"imported":[{"uid":"3676-28"},{"uid":"3676-42"},{"uid":"3676-26"},{"uid":"3676-34"}],"importedBy":[{"uid":"3676-40"},{"uid":"3676-38"}]},"3676-38":{"id":"/packages/react-form/src/useForm.tsx","moduleParts":{"index.production.js":"3676-39"},"imported":[{"uid":"3676-28"},{"uid":"3676-26"},{"uid":"3676-30"},{"uid":"3676-42"},{"uid":"3676-36"},{"uid":"3676-34"},{"uid":"3676-32"}],"importedBy":[{"uid":"3676-40"}]},"3676-40":{"id":"/packages/react-form/src/index.ts","moduleParts":{"index.production.js":"3676-41"},"imported":[{"uid":"3676-26"},{"uid":"3676-38"},{"uid":"3676-36"},{"uid":"3676-34"}],"importedBy":[],"isEntry":true},"3676-42":{"id":"react","moduleParts":{},"imported":[],"importedBy":[{"uid":"3676-38"},{"uid":"3676-36"},{"uid":"3676-34"},{"uid":"3676-32"}],"isExternal":true},"3676-43":{"id":"use-sync-external-store/shim/with-selector","moduleParts":{},"imported":[],"importedBy":[{"uid":"3676-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":"dff6-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":"dff6-31"}]},{"name":"packages","children":[{"name":"form-core/build/esm/index.js","uid":"dff6-27"},{"name":"react-form/src","children":[{"uid":"dff6-33","name":"formContext.ts"},{"uid":"dff6-35","name":"useField.ts"},{"uid":"dff6-37","name":"Field.tsx"},{"uid":"dff6-39","name":"useForm.tsx"},{"uid":"dff6-41","name":"createFormFactory.ts"},{"uid":"dff6-43","name":"index.ts"}]}]},{"uid":"dff6-29","name":"\u0000rollupPluginBabelHelpers.js"}]}],"isRoot":true},"nodeParts":{"dff6-25":{"renderedLength":1288,"gzipLength":497,"brotliLength":0,"mainUid":"dff6-24"},"dff6-27":{"renderedLength":23394,"gzipLength":5131,"brotliLength":0,"mainUid":"dff6-26"},"dff6-29":{"renderedLength":431,"gzipLength":240,"brotliLength":0,"mainUid":"dff6-28"},"dff6-31":{"renderedLength":978,"gzipLength":456,"brotliLength":0,"mainUid":"dff6-30"},"dff6-33":{"renderedLength":296,"gzipLength":200,"brotliLength":0,"mainUid":"dff6-32"},"dff6-35":{"renderedLength":610,"gzipLength":324,"brotliLength":0,"mainUid":"dff6-34"},"dff6-37":{"renderedLength":320,"gzipLength":203,"brotliLength":0,"mainUid":"dff6-36"},"dff6-39":{"renderedLength":1264,"gzipLength":486,"brotliLength":0,"mainUid":"dff6-38"},"dff6-41":{"renderedLength":242,"gzipLength":153,"brotliLength":0,"mainUid":"dff6-40"},"dff6-43":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"mainUid":"dff6-42"}},"nodeMetas":{"dff6-24":{"id":"/node_modules/.pnpm/@tanstack+store@0.0.1-beta.84/node_modules/@tanstack/store/build/esm/index.js","moduleParts":{"index.production.js":"dff6-25"},"imported":[],"importedBy":[{"uid":"dff6-26"},{"uid":"dff6-30"}]},"dff6-26":{"id":"/packages/form-core/build/esm/index.js","moduleParts":{"index.production.js":"dff6-27"},"imported":[{"uid":"dff6-24"}],"importedBy":[{"uid":"dff6-42"},{"uid":"dff6-38"},{"uid":"dff6-36"},{"uid":"dff6-34"}]},"dff6-28":{"id":"\u0000rollupPluginBabelHelpers.js","moduleParts":{"index.production.js":"dff6-29"},"imported":[],"importedBy":[{"uid":"dff6-38"}]},"dff6-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":"dff6-31"},"imported":[{"uid":"dff6-45"},{"uid":"dff6-24"}],"importedBy":[{"uid":"dff6-38"},{"uid":"dff6-34"}]},"dff6-32":{"id":"/packages/react-form/src/formContext.ts","moduleParts":{"index.production.js":"dff6-33"},"imported":[{"uid":"dff6-44"}],"importedBy":[{"uid":"dff6-38"},{"uid":"dff6-34"}]},"dff6-34":{"id":"/packages/react-form/src/useField.ts","moduleParts":{"index.production.js":"dff6-35"},"imported":[{"uid":"dff6-44"},{"uid":"dff6-30"},{"uid":"dff6-26"},{"uid":"dff6-32"}],"importedBy":[{"uid":"dff6-42"},{"uid":"dff6-38"},{"uid":"dff6-36"},{"uid":"dff6-40"}]},"dff6-36":{"id":"/packages/react-form/src/Field.tsx","moduleParts":{"index.production.js":"dff6-37"},"imported":[{"uid":"dff6-44"},{"uid":"dff6-26"},{"uid":"dff6-34"}],"importedBy":[{"uid":"dff6-42"},{"uid":"dff6-38"},{"uid":"dff6-40"}]},"dff6-38":{"id":"/packages/react-form/src/useForm.tsx","moduleParts":{"index.production.js":"dff6-39"},"imported":[{"uid":"dff6-28"},{"uid":"dff6-26"},{"uid":"dff6-30"},{"uid":"dff6-44"},{"uid":"dff6-36"},{"uid":"dff6-34"},{"uid":"dff6-32"}],"importedBy":[{"uid":"dff6-42"},{"uid":"dff6-40"}]},"dff6-40":{"id":"/packages/react-form/src/createFormFactory.ts","moduleParts":{"index.production.js":"dff6-41"},"imported":[{"uid":"dff6-34"},{"uid":"dff6-38"},{"uid":"dff6-36"}],"importedBy":[{"uid":"dff6-42"}]},"dff6-42":{"id":"/packages/react-form/src/index.ts","moduleParts":{"index.production.js":"dff6-43"},"imported":[{"uid":"dff6-26"},{"uid":"dff6-38"},{"uid":"dff6-36"},{"uid":"dff6-34"},{"uid":"dff6-40"}],"importedBy":[],"isEntry":true},"dff6-44":{"id":"react","moduleParts":{},"imported":[],"importedBy":[{"uid":"dff6-38"},{"uid":"dff6-36"},{"uid":"dff6-34"},{"uid":"dff6-32"}],"isExternal":true},"dff6-45":{"id":"use-sync-external-store/shim/with-selector","moduleParts":{},"imported":[],"importedBy":[{"uid":"dff6-30"}],"isExternal":true}},"env":{"rollup":"2.78.1"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;