@tanstack/react-form 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/legacy/useField.cjs +3 -3
- package/build/legacy/useField.cjs.map +1 -1
- package/build/legacy/useField.js +1 -1
- package/build/legacy/useField.js.map +1 -1
- package/build/legacy/useForm.cjs +2 -2
- package/build/legacy/useForm.cjs.map +1 -1
- package/build/legacy/useForm.js +1 -1
- package/build/legacy/useForm.js.map +1 -1
- package/build/modern/useField.cjs +3 -3
- package/build/modern/useField.cjs.map +1 -1
- package/build/modern/useField.js +1 -1
- package/build/modern/useField.js.map +1 -1
- package/build/modern/useForm.cjs +2 -2
- package/build/modern/useForm.cjs.map +1 -1
- package/build/modern/useForm.js +1 -1
- package/build/modern/useForm.js.map +1 -1
- package/package.json +2 -1
- package/src/useField.tsx +1 -1
- package/src/useForm.tsx +1 -1
- package/src/utils/isBrowser.ts +0 -3
- package/src/utils/useIsomorphicLayoutEffect.ts +0 -6
|
@@ -38,7 +38,7 @@ var import_react = __toESM(require("react"), 1);
|
|
|
38
38
|
var import_react_store = require("@tanstack/react-store");
|
|
39
39
|
var import_form_core = require("@tanstack/form-core");
|
|
40
40
|
var import_formContext = require("./formContext.cjs");
|
|
41
|
-
var
|
|
41
|
+
var import_use_isomorphic_layout_effect = __toESM(require("use-isomorphic-layout-effect"), 1);
|
|
42
42
|
function useField(opts) {
|
|
43
43
|
const { formApi, parentFieldName } = (0, import_formContext.useFormContext)();
|
|
44
44
|
const [fieldApi] = (0, import_react.useState)(() => {
|
|
@@ -47,7 +47,7 @@ function useField(opts) {
|
|
|
47
47
|
api.Field = Field;
|
|
48
48
|
return api;
|
|
49
49
|
});
|
|
50
|
-
(0,
|
|
50
|
+
(0, import_use_isomorphic_layout_effect.default)(() => {
|
|
51
51
|
fieldApi.update({ ...opts, form: formApi });
|
|
52
52
|
});
|
|
53
53
|
(0, import_react_store.useStore)(
|
|
@@ -56,7 +56,7 @@ function useField(opts) {
|
|
|
56
56
|
return [state.meta, Object.keys(state.value || []).length];
|
|
57
57
|
} : void 0
|
|
58
58
|
);
|
|
59
|
-
(0,
|
|
59
|
+
(0, import_use_isomorphic_layout_effect.default)(() => fieldApi.mount(), [fieldApi]);
|
|
60
60
|
return fieldApi;
|
|
61
61
|
}
|
|
62
62
|
function Field({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useState } from 'react'\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'\nimport
|
|
1
|
+
{"version":3,"sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useState } from 'react'\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'\nimport useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect'\nimport type { UseFieldOptions } from './types'\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 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] = 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 /**\n * fieldApi.update should not have any side effects. Think of it like a `useRef`\n * that we need to keep updated every render with the most up-to-date information.\n */\n useIsomorphicLayoutEffect(() => {\n fieldApi.update({ ...opts, form: formApi } as never)\n })\n\n useStore(\n fieldApi.store as any,\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 useIsomorphicLayoutEffect(() => 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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,yBAAyB;AAOzB,uBAA2C;AAC3C,yBAA4C;AAC5C,0CAAsC;AAiB/B,SAAS,SACd,MAC4B;AAE5B,QAAM,EAAE,SAAS,gBAAgB,QAAI,mCAAe;AAEpD,QAAM,CAAC,QAAQ,QAAI,uBAAqC,MAAM;AAC5D,UAAM,QACJ,OAAO,KAAK,UAAU,WAClB,CAAC,iBAAiB,KAAK,OAAO,KAAK,IAAI,IACvC,CAAC,iBAAiB,KAAK,IAAI,GAE9B,OAAO,CAAC,MAAM,MAAM,MAAS,EAC7B,KAAK,GAAG;AAEX,UAAM,MAAM,IAAI,0BAAS,EAAE,GAAG,MAAM,MAAM,SAAS,KAAkB,CAAC;AAEtE,QAAI,QAAQ;AAEZ,WAAO;AAAA,EACT,CAAC;AAMD,0CAAAA,SAA0B,MAAM;AAC9B,aAAS,OAAO,EAAE,GAAG,MAAM,MAAM,QAAQ,CAAU;AAAA,EACrD,CAAC;AAED;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAe;AACd,aAAO,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,SAAS,CAAC,CAAC,EAAE,MAAM;AAAA,IAC3D,IACA;AAAA,EACN;AAGA,0CAAAA,SAA0B,MAAM,SAAS,MAAM,GAAG,CAAC,QAAQ,CAAC;AAE5D,SAAO;AACT;AAqDO,SAAS,MAAwB;AAAA,EACtC;AAAA,EACA,GAAG;AACL,GAEuC;AACrC,QAAM,WAAW,SAAS,YAAmB;AAE7C,SACE,6BAAAC,QAAA;AAAA,IAAC,+BAAY;AAAA,IAAZ;AAAA,MACC,OAAO,EAAE,SAAS,SAAS,MAAM,iBAAiB,SAAS,KAAK;AAAA,MAChE,cAAU,mCAAiB,UAAU,QAAe;AAAA;AAAA,EACtD;AAEJ;","names":["useIsomorphicLayoutEffect","React"]}
|
package/build/legacy/useField.js
CHANGED
|
@@ -3,7 +3,7 @@ import React, { useState } from "react";
|
|
|
3
3
|
import { useStore } from "@tanstack/react-store";
|
|
4
4
|
import { FieldApi, functionalUpdate } from "@tanstack/form-core";
|
|
5
5
|
import { useFormContext, formContext } from "./formContext.js";
|
|
6
|
-
import
|
|
6
|
+
import useIsomorphicLayoutEffect from "use-isomorphic-layout-effect";
|
|
7
7
|
function useField(opts) {
|
|
8
8
|
const { formApi, parentFieldName } = useFormContext();
|
|
9
9
|
const [fieldApi] = useState(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useState } from 'react'\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'\nimport
|
|
1
|
+
{"version":3,"sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useState } from 'react'\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'\nimport useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect'\nimport type { UseFieldOptions } from './types'\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 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] = 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 /**\n * fieldApi.update should not have any side effects. Think of it like a `useRef`\n * that we need to keep updated every render with the most up-to-date information.\n */\n useIsomorphicLayoutEffect(() => {\n fieldApi.update({ ...opts, form: formApi } as never)\n })\n\n useStore(\n fieldApi.store as any,\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 useIsomorphicLayoutEffect(() => 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"],"mappings":";AAAA,OAAO,SAAS,gBAAgB;AAChC,SAAS,gBAAgB;AAOzB,SAAS,UAAU,wBAAwB;AAC3C,SAAS,gBAAgB,mBAAmB;AAC5C,OAAO,+BAA+B;AAiB/B,SAAS,SACd,MAC4B;AAE5B,QAAM,EAAE,SAAS,gBAAgB,IAAI,eAAe;AAEpD,QAAM,CAAC,QAAQ,IAAI,SAAqC,MAAM;AAC5D,UAAM,QACJ,OAAO,KAAK,UAAU,WAClB,CAAC,iBAAiB,KAAK,OAAO,KAAK,IAAI,IACvC,CAAC,iBAAiB,KAAK,IAAI,GAE9B,OAAO,CAAC,MAAM,MAAM,MAAS,EAC7B,KAAK,GAAG;AAEX,UAAM,MAAM,IAAI,SAAS,EAAE,GAAG,MAAM,MAAM,SAAS,KAAkB,CAAC;AAEtE,QAAI,QAAQ;AAEZ,WAAO;AAAA,EACT,CAAC;AAMD,4BAA0B,MAAM;AAC9B,aAAS,OAAO,EAAE,GAAG,MAAM,MAAM,QAAQ,CAAU;AAAA,EACrD,CAAC;AAED;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAe;AACd,aAAO,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,SAAS,CAAC,CAAC,EAAE,MAAM;AAAA,IAC3D,IACA;AAAA,EACN;AAGA,4BAA0B,MAAM,SAAS,MAAM,GAAG,CAAC,QAAQ,CAAC;AAE5D,SAAO;AACT;AAqDO,SAAS,MAAwB;AAAA,EACtC;AAAA,EACA,GAAG;AACL,GAEuC;AACrC,QAAM,WAAW,SAAS,YAAmB;AAE7C,SACE;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACC,OAAO,EAAE,SAAS,SAAS,MAAM,iBAAiB,SAAS,KAAK;AAAA,MAChE,UAAU,iBAAiB,UAAU,QAAe;AAAA;AAAA,EACtD;AAEJ;","names":[]}
|
package/build/legacy/useForm.cjs
CHANGED
|
@@ -38,7 +38,7 @@ var import_react_store = require("@tanstack/react-store");
|
|
|
38
38
|
var import_react = __toESM(require("react"), 1);
|
|
39
39
|
var import_useField = require("./useField.cjs");
|
|
40
40
|
var import_formContext = require("./formContext.cjs");
|
|
41
|
-
var
|
|
41
|
+
var import_use_isomorphic_layout_effect = __toESM(require("use-isomorphic-layout-effect"), 1);
|
|
42
42
|
function useForm(opts) {
|
|
43
43
|
const [formApi] = (0, import_react.useState)(() => {
|
|
44
44
|
const api = new import_form_core.FormApi(opts);
|
|
@@ -58,7 +58,7 @@ function useForm(opts) {
|
|
|
58
58
|
return api;
|
|
59
59
|
});
|
|
60
60
|
formApi.useStore((state) => state.isSubmitting);
|
|
61
|
-
(0,
|
|
61
|
+
(0, import_use_isomorphic_layout_effect.default)(() => {
|
|
62
62
|
formApi.update(opts);
|
|
63
63
|
});
|
|
64
64
|
return formApi;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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, { type ReactNode, useState } from 'react'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\nimport
|
|
1
|
+
{"version":3,"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, { type ReactNode, useState } from 'react'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\nimport useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FormApi<TFormData> {\n Provider: (props: { children: any }) => any\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: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n }) => any\n }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n const [formApi] = useState(() => {\n // @ts-ignore\n const api = new FormApi<TData>(opts)\n\n // eslint-disable-next-line react/display-name\n api.Provider = (props) => (\n <formContext.Provider {...props} value={{ formApi: api }} />\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 as any, 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 as any, props.selector as any),\n ) as any\n }\n\n return api\n })\n\n formApi.useStore((state) => state.isSubmitting)\n\n /**\n * formApi.update should not have any side effects. Think of it like a `useRef`\n * that we need to keep updated every render with the most up-to-date information.\n */\n useIsomorphicLayoutEffect(() => {\n formApi.update(opts)\n })\n\n return formApi as any\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAA0C;AAE1C,yBAAyB;AACzB,mBAAgD;AAChD,sBAAoE;AACpE,yBAA4B;AAC5B,0CAAsC;AAkB/B,SAAS,QAAe,MAA2C;AACxE,QAAM,CAAC,OAAO,QAAI,uBAAS,MAAM;AAE/B,UAAM,MAAM,IAAI,yBAAe,IAAI;AAGnC,QAAI,WAAW,CAAC,UACd,6BAAAA,QAAA,cAAC,+BAAY,UAAZ,EAAsB,GAAG,OAAO,OAAO,EAAE,SAAS,IAAI,GAAG;AAE5D,QAAI,QAAQ;AACZ,QAAI,WAAW;AACf,QAAI,WAAW,CAEb,aACG;AAEH,iBAAO,6BAAS,IAAI,OAAc,QAAe;AAAA,IACnD;AACA,QAAI,YAAY,CAEd,UACG;AACH,iBAAO;AAAA,QACL,MAAM;AAAA;AAAA,YAEN,6BAAS,IAAI,OAAc,MAAM,QAAe;AAAA,MAClD;AAAA,IACF;AAEA,WAAO;AAAA,EACT,CAAC;AAED,UAAQ,SAAS,CAAC,UAAU,MAAM,YAAY;AAM9C,0CAAAC,SAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EACrB,CAAC;AAED,SAAO;AACT;","names":["React","useIsomorphicLayoutEffect"]}
|
package/build/legacy/useForm.js
CHANGED
|
@@ -4,7 +4,7 @@ import { useStore } from "@tanstack/react-store";
|
|
|
4
4
|
import React, { useState } from "react";
|
|
5
5
|
import { Field, useField } from "./useField.js";
|
|
6
6
|
import { formContext } from "./formContext.js";
|
|
7
|
-
import
|
|
7
|
+
import useIsomorphicLayoutEffect from "use-isomorphic-layout-effect";
|
|
8
8
|
function useForm(opts) {
|
|
9
9
|
const [formApi] = useState(() => {
|
|
10
10
|
const api = new FormApi(opts);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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, { type ReactNode, useState } from 'react'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\nimport
|
|
1
|
+
{"version":3,"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, { type ReactNode, useState } from 'react'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\nimport useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FormApi<TFormData> {\n Provider: (props: { children: any }) => any\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: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n }) => any\n }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n const [formApi] = useState(() => {\n // @ts-ignore\n const api = new FormApi<TData>(opts)\n\n // eslint-disable-next-line react/display-name\n api.Provider = (props) => (\n <formContext.Provider {...props} value={{ formApi: api }} />\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 as any, 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 as any, props.selector as any),\n ) as any\n }\n\n return api\n })\n\n formApi.useStore((state) => state.isSubmitting)\n\n /**\n * formApi.update should not have any side effects. Think of it like a `useRef`\n * that we need to keep updated every render with the most up-to-date information.\n */\n useIsomorphicLayoutEffect(() => {\n formApi.update(opts)\n })\n\n return formApi as any\n}\n"],"mappings":";AACA,SAAS,SAAS,wBAAwB;AAE1C,SAAS,gBAAgB;AACzB,OAAO,SAAyB,gBAAgB;AAChD,SAA6C,OAAO,gBAAgB;AACpE,SAAS,mBAAmB;AAC5B,OAAO,+BAA+B;AAkB/B,SAAS,QAAe,MAA2C;AACxE,QAAM,CAAC,OAAO,IAAI,SAAS,MAAM;AAE/B,UAAM,MAAM,IAAI,QAAe,IAAI;AAGnC,QAAI,WAAW,CAAC,UACd,oCAAC,YAAY,UAAZ,EAAsB,GAAG,OAAO,OAAO,EAAE,SAAS,IAAI,GAAG;AAE5D,QAAI,QAAQ;AACZ,QAAI,WAAW;AACf,QAAI,WAAW,CAEb,aACG;AAEH,aAAO,SAAS,IAAI,OAAc,QAAe;AAAA,IACnD;AACA,QAAI,YAAY,CAEd,UACG;AACH,aAAO;AAAA,QACL,MAAM;AAAA;AAAA,QAEN,SAAS,IAAI,OAAc,MAAM,QAAe;AAAA,MAClD;AAAA,IACF;AAEA,WAAO;AAAA,EACT,CAAC;AAED,UAAQ,SAAS,CAAC,UAAU,MAAM,YAAY;AAM9C,4BAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EACrB,CAAC;AAED,SAAO;AACT;","names":[]}
|
|
@@ -38,7 +38,7 @@ var import_react = __toESM(require("react"), 1);
|
|
|
38
38
|
var import_react_store = require("@tanstack/react-store");
|
|
39
39
|
var import_form_core = require("@tanstack/form-core");
|
|
40
40
|
var import_formContext = require("./formContext.cjs");
|
|
41
|
-
var
|
|
41
|
+
var import_use_isomorphic_layout_effect = __toESM(require("use-isomorphic-layout-effect"), 1);
|
|
42
42
|
function useField(opts) {
|
|
43
43
|
const { formApi, parentFieldName } = (0, import_formContext.useFormContext)();
|
|
44
44
|
const [fieldApi] = (0, import_react.useState)(() => {
|
|
@@ -47,7 +47,7 @@ function useField(opts) {
|
|
|
47
47
|
api.Field = Field;
|
|
48
48
|
return api;
|
|
49
49
|
});
|
|
50
|
-
(0,
|
|
50
|
+
(0, import_use_isomorphic_layout_effect.default)(() => {
|
|
51
51
|
fieldApi.update({ ...opts, form: formApi });
|
|
52
52
|
});
|
|
53
53
|
(0, import_react_store.useStore)(
|
|
@@ -56,7 +56,7 @@ function useField(opts) {
|
|
|
56
56
|
return [state.meta, Object.keys(state.value || []).length];
|
|
57
57
|
} : void 0
|
|
58
58
|
);
|
|
59
|
-
(0,
|
|
59
|
+
(0, import_use_isomorphic_layout_effect.default)(() => fieldApi.mount(), [fieldApi]);
|
|
60
60
|
return fieldApi;
|
|
61
61
|
}
|
|
62
62
|
function Field({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useState } from 'react'\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'\nimport
|
|
1
|
+
{"version":3,"sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useState } from 'react'\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'\nimport useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect'\nimport type { UseFieldOptions } from './types'\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 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] = 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 /**\n * fieldApi.update should not have any side effects. Think of it like a `useRef`\n * that we need to keep updated every render with the most up-to-date information.\n */\n useIsomorphicLayoutEffect(() => {\n fieldApi.update({ ...opts, form: formApi } as never)\n })\n\n useStore(\n fieldApi.store as any,\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 useIsomorphicLayoutEffect(() => 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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,yBAAyB;AAOzB,uBAA2C;AAC3C,yBAA4C;AAC5C,0CAAsC;AAiB/B,SAAS,SACd,MAC4B;AAE5B,QAAM,EAAE,SAAS,gBAAgB,QAAI,mCAAe;AAEpD,QAAM,CAAC,QAAQ,QAAI,uBAAqC,MAAM;AAC5D,UAAM,QACJ,OAAO,KAAK,UAAU,WAClB,CAAC,iBAAiB,KAAK,OAAO,KAAK,IAAI,IACvC,CAAC,iBAAiB,KAAK,IAAI,GAE9B,OAAO,CAAC,MAAM,MAAM,MAAS,EAC7B,KAAK,GAAG;AAEX,UAAM,MAAM,IAAI,0BAAS,EAAE,GAAG,MAAM,MAAM,SAAS,KAAkB,CAAC;AAEtE,QAAI,QAAQ;AAEZ,WAAO;AAAA,EACT,CAAC;AAMD,0CAAAA,SAA0B,MAAM;AAC9B,aAAS,OAAO,EAAE,GAAG,MAAM,MAAM,QAAQ,CAAU;AAAA,EACrD,CAAC;AAED;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAe;AACd,aAAO,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,SAAS,CAAC,CAAC,EAAE,MAAM;AAAA,IAC3D,IACA;AAAA,EACN;AAGA,0CAAAA,SAA0B,MAAM,SAAS,MAAM,GAAG,CAAC,QAAQ,CAAC;AAE5D,SAAO;AACT;AAqDO,SAAS,MAAwB;AAAA,EACtC;AAAA,EACA,GAAG;AACL,GAEuC;AACrC,QAAM,WAAW,SAAS,YAAmB;AAE7C,SACE,6BAAAC,QAAA;AAAA,IAAC,+BAAY;AAAA,IAAZ;AAAA,MACC,OAAO,EAAE,SAAS,SAAS,MAAM,iBAAiB,SAAS,KAAK;AAAA,MAChE,cAAU,mCAAiB,UAAU,QAAe;AAAA;AAAA,EACtD;AAEJ;","names":["useIsomorphicLayoutEffect","React"]}
|
package/build/modern/useField.js
CHANGED
|
@@ -3,7 +3,7 @@ import React, { useState } from "react";
|
|
|
3
3
|
import { useStore } from "@tanstack/react-store";
|
|
4
4
|
import { FieldApi, functionalUpdate } from "@tanstack/form-core";
|
|
5
5
|
import { useFormContext, formContext } from "./formContext.js";
|
|
6
|
-
import
|
|
6
|
+
import useIsomorphicLayoutEffect from "use-isomorphic-layout-effect";
|
|
7
7
|
function useField(opts) {
|
|
8
8
|
const { formApi, parentFieldName } = useFormContext();
|
|
9
9
|
const [fieldApi] = useState(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useState } from 'react'\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'\nimport
|
|
1
|
+
{"version":3,"sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useState } from 'react'\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'\nimport useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect'\nimport type { UseFieldOptions } from './types'\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 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] = 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 /**\n * fieldApi.update should not have any side effects. Think of it like a `useRef`\n * that we need to keep updated every render with the most up-to-date information.\n */\n useIsomorphicLayoutEffect(() => {\n fieldApi.update({ ...opts, form: formApi } as never)\n })\n\n useStore(\n fieldApi.store as any,\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 useIsomorphicLayoutEffect(() => 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"],"mappings":";AAAA,OAAO,SAAS,gBAAgB;AAChC,SAAS,gBAAgB;AAOzB,SAAS,UAAU,wBAAwB;AAC3C,SAAS,gBAAgB,mBAAmB;AAC5C,OAAO,+BAA+B;AAiB/B,SAAS,SACd,MAC4B;AAE5B,QAAM,EAAE,SAAS,gBAAgB,IAAI,eAAe;AAEpD,QAAM,CAAC,QAAQ,IAAI,SAAqC,MAAM;AAC5D,UAAM,QACJ,OAAO,KAAK,UAAU,WAClB,CAAC,iBAAiB,KAAK,OAAO,KAAK,IAAI,IACvC,CAAC,iBAAiB,KAAK,IAAI,GAE9B,OAAO,CAAC,MAAM,MAAM,MAAS,EAC7B,KAAK,GAAG;AAEX,UAAM,MAAM,IAAI,SAAS,EAAE,GAAG,MAAM,MAAM,SAAS,KAAkB,CAAC;AAEtE,QAAI,QAAQ;AAEZ,WAAO;AAAA,EACT,CAAC;AAMD,4BAA0B,MAAM;AAC9B,aAAS,OAAO,EAAE,GAAG,MAAM,MAAM,QAAQ,CAAU;AAAA,EACrD,CAAC;AAED;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAe;AACd,aAAO,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,SAAS,CAAC,CAAC,EAAE,MAAM;AAAA,IAC3D,IACA;AAAA,EACN;AAGA,4BAA0B,MAAM,SAAS,MAAM,GAAG,CAAC,QAAQ,CAAC;AAE5D,SAAO;AACT;AAqDO,SAAS,MAAwB;AAAA,EACtC;AAAA,EACA,GAAG;AACL,GAEuC;AACrC,QAAM,WAAW,SAAS,YAAmB;AAE7C,SACE;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACC,OAAO,EAAE,SAAS,SAAS,MAAM,iBAAiB,SAAS,KAAK;AAAA,MAChE,UAAU,iBAAiB,UAAU,QAAe;AAAA;AAAA,EACtD;AAEJ;","names":[]}
|
package/build/modern/useForm.cjs
CHANGED
|
@@ -38,7 +38,7 @@ var import_react_store = require("@tanstack/react-store");
|
|
|
38
38
|
var import_react = __toESM(require("react"), 1);
|
|
39
39
|
var import_useField = require("./useField.cjs");
|
|
40
40
|
var import_formContext = require("./formContext.cjs");
|
|
41
|
-
var
|
|
41
|
+
var import_use_isomorphic_layout_effect = __toESM(require("use-isomorphic-layout-effect"), 1);
|
|
42
42
|
function useForm(opts) {
|
|
43
43
|
const [formApi] = (0, import_react.useState)(() => {
|
|
44
44
|
const api = new import_form_core.FormApi(opts);
|
|
@@ -58,7 +58,7 @@ function useForm(opts) {
|
|
|
58
58
|
return api;
|
|
59
59
|
});
|
|
60
60
|
formApi.useStore((state) => state.isSubmitting);
|
|
61
|
-
(0,
|
|
61
|
+
(0, import_use_isomorphic_layout_effect.default)(() => {
|
|
62
62
|
formApi.update(opts);
|
|
63
63
|
});
|
|
64
64
|
return formApi;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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, { type ReactNode, useState } from 'react'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\nimport
|
|
1
|
+
{"version":3,"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, { type ReactNode, useState } from 'react'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\nimport useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FormApi<TFormData> {\n Provider: (props: { children: any }) => any\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: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n }) => any\n }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n const [formApi] = useState(() => {\n // @ts-ignore\n const api = new FormApi<TData>(opts)\n\n // eslint-disable-next-line react/display-name\n api.Provider = (props) => (\n <formContext.Provider {...props} value={{ formApi: api }} />\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 as any, 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 as any, props.selector as any),\n ) as any\n }\n\n return api\n })\n\n formApi.useStore((state) => state.isSubmitting)\n\n /**\n * formApi.update should not have any side effects. Think of it like a `useRef`\n * that we need to keep updated every render with the most up-to-date information.\n */\n useIsomorphicLayoutEffect(() => {\n formApi.update(opts)\n })\n\n return formApi as any\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAA0C;AAE1C,yBAAyB;AACzB,mBAAgD;AAChD,sBAAoE;AACpE,yBAA4B;AAC5B,0CAAsC;AAkB/B,SAAS,QAAe,MAA2C;AACxE,QAAM,CAAC,OAAO,QAAI,uBAAS,MAAM;AAE/B,UAAM,MAAM,IAAI,yBAAe,IAAI;AAGnC,QAAI,WAAW,CAAC,UACd,6BAAAA,QAAA,cAAC,+BAAY,UAAZ,EAAsB,GAAG,OAAO,OAAO,EAAE,SAAS,IAAI,GAAG;AAE5D,QAAI,QAAQ;AACZ,QAAI,WAAW;AACf,QAAI,WAAW,CAEb,aACG;AAEH,iBAAO,6BAAS,IAAI,OAAc,QAAe;AAAA,IACnD;AACA,QAAI,YAAY,CAEd,UACG;AACH,iBAAO;AAAA,QACL,MAAM;AAAA;AAAA,YAEN,6BAAS,IAAI,OAAc,MAAM,QAAe;AAAA,MAClD;AAAA,IACF;AAEA,WAAO;AAAA,EACT,CAAC;AAED,UAAQ,SAAS,CAAC,UAAU,MAAM,YAAY;AAM9C,0CAAAC,SAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EACrB,CAAC;AAED,SAAO;AACT;","names":["React","useIsomorphicLayoutEffect"]}
|
package/build/modern/useForm.js
CHANGED
|
@@ -4,7 +4,7 @@ import { useStore } from "@tanstack/react-store";
|
|
|
4
4
|
import React, { useState } from "react";
|
|
5
5
|
import { Field, useField } from "./useField.js";
|
|
6
6
|
import { formContext } from "./formContext.js";
|
|
7
|
-
import
|
|
7
|
+
import useIsomorphicLayoutEffect from "use-isomorphic-layout-effect";
|
|
8
8
|
function useForm(opts) {
|
|
9
9
|
const [formApi] = useState(() => {
|
|
10
10
|
const api = new FormApi(opts);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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, { type ReactNode, useState } from 'react'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\nimport
|
|
1
|
+
{"version":3,"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, { type ReactNode, useState } from 'react'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\nimport useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FormApi<TFormData> {\n Provider: (props: { children: any }) => any\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: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n }) => any\n }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n const [formApi] = useState(() => {\n // @ts-ignore\n const api = new FormApi<TData>(opts)\n\n // eslint-disable-next-line react/display-name\n api.Provider = (props) => (\n <formContext.Provider {...props} value={{ formApi: api }} />\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 as any, 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 as any, props.selector as any),\n ) as any\n }\n\n return api\n })\n\n formApi.useStore((state) => state.isSubmitting)\n\n /**\n * formApi.update should not have any side effects. Think of it like a `useRef`\n * that we need to keep updated every render with the most up-to-date information.\n */\n useIsomorphicLayoutEffect(() => {\n formApi.update(opts)\n })\n\n return formApi as any\n}\n"],"mappings":";AACA,SAAS,SAAS,wBAAwB;AAE1C,SAAS,gBAAgB;AACzB,OAAO,SAAyB,gBAAgB;AAChD,SAA6C,OAAO,gBAAgB;AACpE,SAAS,mBAAmB;AAC5B,OAAO,+BAA+B;AAkB/B,SAAS,QAAe,MAA2C;AACxE,QAAM,CAAC,OAAO,IAAI,SAAS,MAAM;AAE/B,UAAM,MAAM,IAAI,QAAe,IAAI;AAGnC,QAAI,WAAW,CAAC,UACd,oCAAC,YAAY,UAAZ,EAAsB,GAAG,OAAO,OAAO,EAAE,SAAS,IAAI,GAAG;AAE5D,QAAI,QAAQ;AACZ,QAAI,WAAW;AACf,QAAI,WAAW,CAEb,aACG;AAEH,aAAO,SAAS,IAAI,OAAc,QAAe;AAAA,IACnD;AACA,QAAI,YAAY,CAEd,UACG;AACH,aAAO;AAAA,QACL,MAAM;AAAA;AAAA,QAEN,SAAS,IAAI,OAAc,MAAM,QAAe;AAAA,MAClD;AAAA,IACF;AAEA,WAAO;AAAA,EACT,CAAC;AAED,UAAQ,SAAS,CAAC,UAAU,MAAM,YAAY;AAM9C,4BAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EACrB,CAAC;AAED,SAAO;AACT;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/react-form",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Powerful, type-safe forms for React.",
|
|
5
5
|
"author": "tannerlinsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -53,6 +53,7 @@
|
|
|
53
53
|
"dependencies": {
|
|
54
54
|
"@tanstack/react-store": "0.1.3",
|
|
55
55
|
"@tanstack/store": "0.1.3",
|
|
56
|
+
"use-isomorphic-layout-effect": "^1.1.2",
|
|
56
57
|
"@tanstack/form-core": "0.2.0"
|
|
57
58
|
},
|
|
58
59
|
"peerDependencies": {
|
package/src/useField.tsx
CHANGED
|
@@ -8,7 +8,7 @@ import type {
|
|
|
8
8
|
} from '@tanstack/form-core'
|
|
9
9
|
import { FieldApi, functionalUpdate } from '@tanstack/form-core'
|
|
10
10
|
import { useFormContext, formContext } from './formContext'
|
|
11
|
-
import
|
|
11
|
+
import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect'
|
|
12
12
|
import type { UseFieldOptions } from './types'
|
|
13
13
|
|
|
14
14
|
declare module '@tanstack/form-core' {
|
package/src/useForm.tsx
CHANGED
|
@@ -5,7 +5,7 @@ import { useStore } from '@tanstack/react-store'
|
|
|
5
5
|
import React, { type ReactNode, useState } from 'react'
|
|
6
6
|
import { type UseField, type FieldComponent, Field, useField } from './useField'
|
|
7
7
|
import { formContext } from './formContext'
|
|
8
|
-
import
|
|
8
|
+
import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect'
|
|
9
9
|
|
|
10
10
|
declare module '@tanstack/form-core' {
|
|
11
11
|
// eslint-disable-next-line no-shadow
|
package/src/utils/isBrowser.ts
DELETED