@tanstack/react-form 0.0.9 → 0.0.10
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/cjs/useField.js.map +1 -1
- package/build/cjs/useForm.js +15 -21
- package/build/cjs/useForm.js.map +1 -1
- package/build/esm/index.js +15 -21
- package/build/esm/index.js.map +1 -1
- package/build/stats-html.html +1 -1
- package/build/stats-react.json +89 -89
- package/build/types/index.d.ts +11 -8
- package/build/types/react-form/src/index.d.ts +1 -1
- package/build/types/react-form/src/useForm.d.ts +10 -7
- package/build/umd/index.development.js +15 -21
- package/build/umd/index.development.js.map +1 -1
- package/build/umd/index.production.js +1 -1
- package/build/umd/index.production.js.map +1 -1
- package/package.json +1 -1
- package/src/index.ts +1 -1
- package/src/useField.tsx +1 -0
- package/src/useForm.tsx +20 -34
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import * as React from 'react'\n//\nimport { useStore } from '@tanstack/react-store'\nimport type {\n DeepKeys,\n DeepValue,\n FieldOptions,\n Narrow,\n} from '@tanstack/form-core'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useFormContext, formContext } from './formContext'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FieldApi<TData, TFormData> {\n Field: FieldComponent<TData, TFormData>\n }\n}\n\nexport type UseFieldOptions<TData, TFormData> = FieldOptions<\n TData,\n TFormData\n> & {\n mode?: 'value' | 'array'\n}\n\nexport type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(\n opts?: { name: Narrow<TField> } & UseFieldOptions<\n DeepValue<TFormData, TField>,\n TFormData\n >,\n) => FieldApi<DeepValue<TFormData, TField>, TFormData>\n\nexport function useField<TData, TFormData>(\n opts: UseFieldOptions<TData, TFormData>,\n): FieldApi<TData, TFormData> {\n // Get the form API either manually or from context\n const { formApi, parentFieldName } = useFormContext()\n\n const [fieldApi] = React.useState<FieldApi<TData, TFormData>>(() => {\n const name = (\n typeof opts.index === 'number'\n ? [parentFieldName, opts.index, opts.name]\n : [parentFieldName, opts.name]\n )\n .filter((d) => d !== undefined)\n .join('.')\n\n const api = new FieldApi({ ...opts, form: formApi, name: name as any })\n\n api.Field = Field as any\n\n return api\n })\n\n // Keep options up to date as they are rendered\n fieldApi.update({ ...opts, form: formApi })\n\n useStore(\n fieldApi.store,\n opts.mode === 'array'\n ? (state: any) => {\n return [state.meta, Object.keys(state.value || []).length]\n }\n : undefined,\n )\n\n // Instantiates field meta and removes it when unrendered\n React.useEffect(() => fieldApi.mount(), [fieldApi])\n\n return fieldApi\n}\n\n// export type FieldValue<TFormData, TField> = TFormData extends any[]\n// ? TField extends `[${infer TIndex extends number | 'i'}].${infer TRest}`\n// ? DeepValue<TFormData[TIndex extends 'i' ? number : TIndex], TRest>\n// : TField extends `[${infer TIndex extends number | 'i'}]`\n// ? TFormData[TIndex extends 'i' ? number : TIndex]\n// : never\n// : TField extends `${infer TPrefix}[${infer TIndex extends\n// | number\n// | 'i'}].${infer TRest}`\n// ? DeepValue<\n// DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex],\n// TRest\n// >\n// : TField extends `${infer TPrefix}[${infer TIndex extends number | 'i'}]`\n// ? DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex]\n// : DeepValue<TFormData, TField>\n\nexport type FieldValue<TFormData, TField> = TFormData extends any[]\n ? unknown extends TField\n ? TFormData[number]\n : DeepValue<TFormData[number], TField>\n : DeepValue<TFormData, TField>\n\n// type Test1 = FieldValue<{ foo: { bar: string }[] }, 'foo'>\n// // ^?\n// type Test2 = FieldValue<{ foo: { bar: string }[] }, 'foo[i]'>\n// // ^?\n// type Test3 = FieldValue<{ foo: { bar: string }[] }, 'foo[2].bar'>\n// // ^?\n\nexport type FieldComponent<TParentData, TFormData> = <TField>({\n children,\n ...fieldOptions\n}: {\n children: (\n fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>,\n ) => any\n} & Omit<\n UseFieldOptions<FieldValue<TParentData, TField>, TFormData>,\n 'name' | 'index'\n> &\n (TParentData extends any[]\n ? {\n name?: TField extends undefined ? TField : DeepKeys<TParentData>\n index: number\n }\n : {\n name: TField extends undefined ? TField : DeepKeys<TParentData>\n index?: never\n })) => any\n\nexport function Field<TData, TFormData>({\n children,\n ...fieldOptions\n}: {\n children: (fieldApi: FieldApi<TData, TFormData>) => any\n} & UseFieldOptions<TData, TFormData>) {\n const fieldApi = useField(fieldOptions as any)\n return (\n <formContext.Provider\n value={{ formApi: fieldApi.form, parentFieldName: fieldApi.name }}\n children={functionalUpdate(children, fieldApi as any)}\n />\n )\n}\n"],"names":["useField","opts","formApi","parentFieldName","useFormContext","fieldApi","React","useState","name","index","filter","d","undefined","join","api","FieldApi","form","Field","update","useStore","store","mode","state","meta","Object","keys","value","length","useEffect","mount","children","fieldOptions","formContext","functionalUpdate"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCO,SAASA,QAAT,CACLC,IADK,EAEuB;AAC5B;EACA,MAAM;IAAEC,OAAF;AAAWC,IAAAA,eAAAA;AAAX,GAAA,GAA+BC,0BAAc,EAAnD,CAAA;AAEA,EAAA,MAAM,CAACC,QAAD,CAAA,GAAaC,gBAAK,CAACC,QAAN,CAA2C,MAAM;AAClE,IAAA,MAAMC,IAAI,GAAG,CACX,OAAOP,IAAI,CAACQ,KAAZ,KAAsB,QAAtB,GACI,CAACN,eAAD,EAAkBF,IAAI,CAACQ,KAAvB,EAA8BR,IAAI,CAACO,IAAnC,CADJ,GAEI,CAACL,eAAD,EAAkBF,IAAI,CAACO,IAAvB,CAHO,EAKVE,MALU,CAKFC,CAAD,IAAOA,CAAC,KAAKC,SALV,EAMVC,IANU,CAML,GANK,CAAb,CAAA;AAQA,IAAA,MAAMC,GAAG,GAAG,IAAIC,iBAAJ,CAAa,EAAE,GAAGd,IAAL;AAAWe,MAAAA,IAAI,EAAEd,OAAjB;AAA0BM,MAAAA,IAAI,EAAEA,IAAAA;AAAhC,KAAb,CAAZ,CAAA;IAEAM,GAAG,CAACG,KAAJ,GAAYA,KAAZ,CAAA;AAEA,IAAA,OAAOH,GAAP,CAAA;GAbiB,CAAnB,CAJ4B;;AAqB5BT,EAAAA,QAAQ,CAACa,MAAT,CAAgB,EAAE,GAAGjB,IAAL;AAAWe,IAAAA,IAAI,EAAEd,OAAAA;GAAjC,CAAA,CAAA;AAEAiB,EAAAA,mBAAQ,CACNd,QAAQ,CAACe,KADH,EAENnB,IAAI,CAACoB,IAAL,KAAc,OAAd,GACKC,KAAD,IAAgB;AACd,IAAA,OAAO,CAACA,KAAK,CAACC,IAAP,EAAaC,MAAM,CAACC,IAAP,CAAYH,KAAK,CAACI,KAAN,IAAe,EAA3B,CAAA,CAA+BC,MAA5C,CAAP,CAAA;AACD,GAHL,GAIIf,SANE,CAAR,CAvB4B;;EAiC5BN,gBAAK,CAACsB,SAAN,CAAgB,MAAMvB,QAAQ,CAACwB,KAAT,EAAtB,EAAwC,CAACxB,QAAD,CAAxC,CAAA,CAAA;AAEA,EAAA,OAAOA,QAAP,CAAA;AACD;AAGD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAoCO,SAASY,KAAT,CAAiC;EACtCa,QADsC;EAEtC,GAAGC,YAAAA;AAFmC,CAAjC,EAKgC;AACrC,EAAA,MAAM1B,QAAQ,GAAGL,QAAQ,CAAC+B,YAAD,CAAzB,CAAA;
|
|
1
|
+
{"version":3,"file":"useField.js","sources":["../../src/useField.tsx"],"sourcesContent":["import * as React from 'react'\n//\nimport { useStore } from '@tanstack/react-store'\nimport type {\n DeepKeys,\n DeepValue,\n FieldOptions,\n Narrow,\n} from '@tanstack/form-core'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useFormContext, formContext } from './formContext'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FieldApi<TData, TFormData> {\n Field: FieldComponent<TData, TFormData>\n }\n}\n\nexport type UseFieldOptions<TData, TFormData> = FieldOptions<\n TData,\n TFormData\n> & {\n mode?: 'value' | 'array'\n}\n\nexport type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(\n opts?: { name: Narrow<TField> } & UseFieldOptions<\n DeepValue<TFormData, TField>,\n TFormData\n >,\n) => FieldApi<DeepValue<TFormData, TField>, TFormData>\n\nexport function useField<TData, TFormData>(\n opts: UseFieldOptions<TData, TFormData>,\n): FieldApi<TData, TFormData> {\n // Get the form API either manually or from context\n const { formApi, parentFieldName } = useFormContext()\n\n const [fieldApi] = React.useState<FieldApi<TData, TFormData>>(() => {\n const name = (\n typeof opts.index === 'number'\n ? [parentFieldName, opts.index, opts.name]\n : [parentFieldName, opts.name]\n )\n .filter((d) => d !== undefined)\n .join('.')\n\n const api = new FieldApi({ ...opts, form: formApi, name: name as any })\n\n api.Field = Field as any\n\n return api\n })\n\n // Keep options up to date as they are rendered\n fieldApi.update({ ...opts, form: formApi })\n\n useStore(\n fieldApi.store,\n opts.mode === 'array'\n ? (state: any) => {\n return [state.meta, Object.keys(state.value || []).length]\n }\n : undefined,\n )\n\n // Instantiates field meta and removes it when unrendered\n React.useEffect(() => fieldApi.mount(), [fieldApi])\n\n return fieldApi\n}\n\n// export type FieldValue<TFormData, TField> = TFormData extends any[]\n// ? TField extends `[${infer TIndex extends number | 'i'}].${infer TRest}`\n// ? DeepValue<TFormData[TIndex extends 'i' ? number : TIndex], TRest>\n// : TField extends `[${infer TIndex extends number | 'i'}]`\n// ? TFormData[TIndex extends 'i' ? number : TIndex]\n// : never\n// : TField extends `${infer TPrefix}[${infer TIndex extends\n// | number\n// | 'i'}].${infer TRest}`\n// ? DeepValue<\n// DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex],\n// TRest\n// >\n// : TField extends `${infer TPrefix}[${infer TIndex extends number | 'i'}]`\n// ? DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex]\n// : DeepValue<TFormData, TField>\n\nexport type FieldValue<TFormData, TField> = TFormData extends any[]\n ? unknown extends TField\n ? TFormData[number]\n : DeepValue<TFormData[number], TField>\n : DeepValue<TFormData, TField>\n\n// type Test1 = FieldValue<{ foo: { bar: string }[] }, 'foo'>\n// // ^?\n// type Test2 = FieldValue<{ foo: { bar: string }[] }, 'foo[i]'>\n// // ^?\n// type Test3 = FieldValue<{ foo: { bar: string }[] }, 'foo[2].bar'>\n// // ^?\n\nexport type FieldComponent<TParentData, TFormData> = <TField>({\n children,\n ...fieldOptions\n}: {\n children: (\n fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>,\n ) => any\n} & Omit<\n UseFieldOptions<FieldValue<TParentData, TField>, TFormData>,\n 'name' | 'index'\n> &\n (TParentData extends any[]\n ? {\n name?: TField extends undefined ? TField : DeepKeys<TParentData>\n index: number\n }\n : {\n name: TField extends undefined ? TField : DeepKeys<TParentData>\n index?: never\n })) => any\n\nexport function Field<TData, TFormData>({\n children,\n ...fieldOptions\n}: {\n children: (fieldApi: FieldApi<TData, TFormData>) => any\n} & UseFieldOptions<TData, TFormData>) {\n const fieldApi = useField(fieldOptions as any)\n\n return (\n <formContext.Provider\n value={{ formApi: fieldApi.form, parentFieldName: fieldApi.name }}\n children={functionalUpdate(children, fieldApi as any)}\n />\n )\n}\n"],"names":["useField","opts","formApi","parentFieldName","useFormContext","fieldApi","React","useState","name","index","filter","d","undefined","join","api","FieldApi","form","Field","update","useStore","store","mode","state","meta","Object","keys","value","length","useEffect","mount","children","fieldOptions","formContext","functionalUpdate"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCO,SAASA,QAAT,CACLC,IADK,EAEuB;AAC5B;EACA,MAAM;IAAEC,OAAF;AAAWC,IAAAA,eAAAA;AAAX,GAAA,GAA+BC,0BAAc,EAAnD,CAAA;AAEA,EAAA,MAAM,CAACC,QAAD,CAAA,GAAaC,gBAAK,CAACC,QAAN,CAA2C,MAAM;AAClE,IAAA,MAAMC,IAAI,GAAG,CACX,OAAOP,IAAI,CAACQ,KAAZ,KAAsB,QAAtB,GACI,CAACN,eAAD,EAAkBF,IAAI,CAACQ,KAAvB,EAA8BR,IAAI,CAACO,IAAnC,CADJ,GAEI,CAACL,eAAD,EAAkBF,IAAI,CAACO,IAAvB,CAHO,EAKVE,MALU,CAKFC,CAAD,IAAOA,CAAC,KAAKC,SALV,EAMVC,IANU,CAML,GANK,CAAb,CAAA;AAQA,IAAA,MAAMC,GAAG,GAAG,IAAIC,iBAAJ,CAAa,EAAE,GAAGd,IAAL;AAAWe,MAAAA,IAAI,EAAEd,OAAjB;AAA0BM,MAAAA,IAAI,EAAEA,IAAAA;AAAhC,KAAb,CAAZ,CAAA;IAEAM,GAAG,CAACG,KAAJ,GAAYA,KAAZ,CAAA;AAEA,IAAA,OAAOH,GAAP,CAAA;GAbiB,CAAnB,CAJ4B;;AAqB5BT,EAAAA,QAAQ,CAACa,MAAT,CAAgB,EAAE,GAAGjB,IAAL;AAAWe,IAAAA,IAAI,EAAEd,OAAAA;GAAjC,CAAA,CAAA;AAEAiB,EAAAA,mBAAQ,CACNd,QAAQ,CAACe,KADH,EAENnB,IAAI,CAACoB,IAAL,KAAc,OAAd,GACKC,KAAD,IAAgB;AACd,IAAA,OAAO,CAACA,KAAK,CAACC,IAAP,EAAaC,MAAM,CAACC,IAAP,CAAYH,KAAK,CAACI,KAAN,IAAe,EAA3B,CAAA,CAA+BC,MAA5C,CAAP,CAAA;AACD,GAHL,GAIIf,SANE,CAAR,CAvB4B;;EAiC5BN,gBAAK,CAACsB,SAAN,CAAgB,MAAMvB,QAAQ,CAACwB,KAAT,EAAtB,EAAwC,CAACxB,QAAD,CAAxC,CAAA,CAAA;AAEA,EAAA,OAAOA,QAAP,CAAA;AACD;AAGD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAoCO,SAASY,KAAT,CAAiC;EACtCa,QADsC;EAEtC,GAAGC,YAAAA;AAFmC,CAAjC,EAKgC;AACrC,EAAA,MAAM1B,QAAQ,GAAGL,QAAQ,CAAC+B,YAAD,CAAzB,CAAA;EAEA,oBACEzB,gBAAA,CAAA,aAAA,CAAC0B,uBAAD,CAAa,QAAb,EAAA;AACE,IAAA,KAAK,EAAE;MAAE9B,OAAO,EAAEG,QAAQ,CAACW,IAApB;MAA0Bb,eAAe,EAAEE,QAAQ,CAACG,IAAAA;KAD7D;AAEE,IAAA,QAAQ,EAAEyB,yBAAgB,CAACH,QAAD,EAAWzB,QAAX,CAAA;GAH9B,CAAA,CAAA;AAMD;;;;;"}
|
package/build/cjs/useForm.js
CHANGED
|
@@ -27,7 +27,20 @@ function useForm(opts) {
|
|
|
27
27
|
const [formApi] = React__default["default"].useState(() => {
|
|
28
28
|
// @ts-ignore
|
|
29
29
|
const api = new formCore.FormApi(opts);
|
|
30
|
-
|
|
30
|
+
|
|
31
|
+
api.Provider = props => /*#__PURE__*/React__default["default"].createElement(formContext.formContext.Provider, _rollupPluginBabelHelpers["extends"]({}, props, {
|
|
32
|
+
value: {
|
|
33
|
+
formApi: api
|
|
34
|
+
}
|
|
35
|
+
}));
|
|
36
|
+
|
|
37
|
+
api.getFormProps = () => {
|
|
38
|
+
return {
|
|
39
|
+
onSubmit: formApi.handleSubmit,
|
|
40
|
+
disabled: api.state.isSubmitting
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
|
|
31
44
|
api.Field = useField.Field;
|
|
32
45
|
api.useField = useField.useField;
|
|
33
46
|
|
|
@@ -45,29 +58,10 @@ function useForm(opts) {
|
|
|
45
58
|
|
|
46
59
|
return api;
|
|
47
60
|
});
|
|
61
|
+
formApi.useStore(state => state.isSubmitting);
|
|
48
62
|
formApi.update(opts);
|
|
49
63
|
return formApi;
|
|
50
64
|
}
|
|
51
65
|
|
|
52
|
-
function createFormComponent(formApi) {
|
|
53
|
-
const Form = ({
|
|
54
|
-
children,
|
|
55
|
-
noFormElement,
|
|
56
|
-
...rest
|
|
57
|
-
}) => {
|
|
58
|
-
const isSubmitting = formApi.useStore(state => state.isSubmitting);
|
|
59
|
-
return /*#__PURE__*/React__default["default"].createElement(formContext.formContext.Provider, {
|
|
60
|
-
value: {
|
|
61
|
-
formApi
|
|
62
|
-
}
|
|
63
|
-
}, noFormElement ? children : /*#__PURE__*/React__default["default"].createElement("form", _rollupPluginBabelHelpers["extends"]({
|
|
64
|
-
onSubmit: formApi.handleSubmit,
|
|
65
|
-
disabled: isSubmitting
|
|
66
|
-
}, rest), children));
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
return Form;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
66
|
exports.useForm = useForm;
|
|
73
67
|
//# sourceMappingURL=useForm.js.map
|
package/build/cjs/useForm.js.map
CHANGED
|
@@ -1 +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 { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\n\ndeclare module '@tanstack/form-core' {\n interface Register {\n FormSubmitEvent:
|
|
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 { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\n\nexport type FormSubmitEvent = React.FormEvent<HTMLFormElement>\n\ndeclare module '@tanstack/form-core' {\n interface Register {\n FormSubmitEvent: FormSubmitEvent\n }\n\n // eslint-disable-next-line no-shadow\n interface FormApi<TFormData> {\n Provider: (props: { children: any }) => any\n getFormProps: () => FormProps\n Field: FieldComponent<TFormData, TFormData>\n useField: UseField<TFormData>\n useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n ) => TSelected\n Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n children:\n | ((state: NoInfer<TSelected>) => React.ReactNode)\n | React.ReactNode\n }) => any\n }\n}\n\nexport type FormProps = {\n onSubmit: (e: FormSubmitEvent) => void\n disabled: boolean\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n const [formApi] = React.useState(() => {\n // @ts-ignore\n const api = new FormApi<TData>(opts)\n\n api.Provider = (props) => (\n <formContext.Provider {...props} value={{ formApi: api }} />\n )\n api.getFormProps = () => {\n return {\n onSubmit: formApi.handleSubmit,\n disabled: api.state.isSubmitting,\n }\n }\n api.Field = Field as any\n api.useField = useField as any\n api.useStore = (\n // @ts-ignore\n selector,\n ) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useStore(api.store, selector as any) as any\n }\n api.Subscribe = (\n // @ts-ignore\n props,\n ) => {\n return functionalUpdate(\n props.children,\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useStore(api.store, props.selector as any),\n ) as any\n }\n\n return api\n })\n\n formApi.useStore((state) => state.isSubmitting)\n formApi.update(opts)\n\n return formApi as any\n}\n"],"names":["useForm","opts","formApi","React","useState","api","FormApi","Provider","props","formContext","_extends","getFormProps","onSubmit","handleSubmit","disabled","state","isSubmitting","Field","useField","useStore","selector","store","Subscribe","functionalUpdate","children","update"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAsCO,SAASA,OAAT,CAAwBC,IAAxB,EAAmE;AACxE,EAAA,MAAM,CAACC,OAAD,CAAA,GAAYC,yBAAK,CAACC,QAAN,CAAe,MAAM;AACrC;AACA,IAAA,MAAMC,GAAG,GAAG,IAAIC,gBAAJ,CAAmBL,IAAnB,CAAZ,CAAA;;IAEAI,GAAG,CAACE,QAAJ,GAAgBC,KAAD,iBACbL,wCAACM,uBAAD,CAAa,QAAb,EAAAC,oCAAA,CAAA,EAAA,EAA0BF,KAA1B,EAAA;AAAiC,MAAA,KAAK,EAAE;AAAEN,QAAAA,OAAO,EAAEG,GAAAA;AAAX,OAAA;KAD1C,CAAA,CAAA,CAAA;;IAGAA,GAAG,CAACM,YAAJ,GAAmB,MAAM;MACvB,OAAO;QACLC,QAAQ,EAAEV,OAAO,CAACW,YADb;AAELC,QAAAA,QAAQ,EAAET,GAAG,CAACU,KAAJ,CAAUC,YAAAA;OAFtB,CAAA;KADF,CAAA;;IAMAX,GAAG,CAACY,KAAJ,GAAYA,cAAZ,CAAA;IACAZ,GAAG,CAACa,QAAJ,GAAeA,iBAAf,CAAA;;IACAb,GAAG,CAACc,QAAJ,GAAe;AAEbC,IAAAA,QAFa,KAGV;AACH;AACA,MAAA,OAAOD,mBAAQ,CAACd,GAAG,CAACgB,KAAL,EAAYD,QAAZ,CAAf,CAAA;KALF,CAAA;;IAOAf,GAAG,CAACiB,SAAJ,GAAgB;AAEdd,IAAAA,KAFc,KAGX;AACH,MAAA,OAAOe,yBAAgB,CACrBf,KAAK,CAACgB,QADe;MAGrBL,mBAAQ,CAACd,GAAG,CAACgB,KAAL,EAAYb,KAAK,CAACY,QAAlB,CAHa,CAAvB,CAAA;KAJF,CAAA;;AAWA,IAAA,OAAOf,GAAP,CAAA;AACD,GAlCiB,CAAlB,CAAA;AAoCAH,EAAAA,OAAO,CAACiB,QAAR,CAAkBJ,KAAD,IAAWA,KAAK,CAACC,YAAlC,CAAA,CAAA;EACAd,OAAO,CAACuB,MAAR,CAAexB,IAAf,CAAA,CAAA;AAEA,EAAA,OAAOC,OAAP,CAAA;AACD;;;;"}
|
package/build/esm/index.js
CHANGED
|
@@ -102,7 +102,20 @@ function useForm(opts) {
|
|
|
102
102
|
const [formApi] = React__default.useState(() => {
|
|
103
103
|
// @ts-ignore
|
|
104
104
|
const api = new FormApi(opts);
|
|
105
|
-
|
|
105
|
+
|
|
106
|
+
api.Provider = props => /*#__PURE__*/React__default.createElement(formContext.Provider, _extends({}, props, {
|
|
107
|
+
value: {
|
|
108
|
+
formApi: api
|
|
109
|
+
}
|
|
110
|
+
}));
|
|
111
|
+
|
|
112
|
+
api.getFormProps = () => {
|
|
113
|
+
return {
|
|
114
|
+
onSubmit: formApi.handleSubmit,
|
|
115
|
+
disabled: api.state.isSubmitting
|
|
116
|
+
};
|
|
117
|
+
};
|
|
118
|
+
|
|
106
119
|
api.Field = Field;
|
|
107
120
|
api.useField = useField;
|
|
108
121
|
|
|
@@ -120,30 +133,11 @@ function useForm(opts) {
|
|
|
120
133
|
|
|
121
134
|
return api;
|
|
122
135
|
});
|
|
136
|
+
formApi.useStore(state => state.isSubmitting);
|
|
123
137
|
formApi.update(opts);
|
|
124
138
|
return formApi;
|
|
125
139
|
}
|
|
126
140
|
|
|
127
|
-
function createFormComponent(formApi) {
|
|
128
|
-
const Form = ({
|
|
129
|
-
children,
|
|
130
|
-
noFormElement,
|
|
131
|
-
...rest
|
|
132
|
-
}) => {
|
|
133
|
-
const isSubmitting = formApi.useStore(state => state.isSubmitting);
|
|
134
|
-
return /*#__PURE__*/React__default.createElement(formContext.Provider, {
|
|
135
|
-
value: {
|
|
136
|
-
formApi
|
|
137
|
-
}
|
|
138
|
-
}, noFormElement ? children : /*#__PURE__*/React__default.createElement("form", _extends({
|
|
139
|
-
onSubmit: formApi.handleSubmit,
|
|
140
|
-
disabled: isSubmitting
|
|
141
|
-
}, rest), children));
|
|
142
|
-
};
|
|
143
|
-
|
|
144
|
-
return Form;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
141
|
function createFormFactory(defaultOpts) {
|
|
148
142
|
return {
|
|
149
143
|
useForm: opts => {
|
package/build/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/formContext.ts","../../src/useField.tsx","../../src/useForm.tsx","../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi } from '@tanstack/form-core'\nimport * as React from 'react'\n\nexport const formContext = React.createContext<{\n formApi: FormApi<any>\n parentFieldName?: string\n} | null>(null!)\n\nexport function useFormContext() {\n const formApi = React.useContext(formContext)\n\n if (!formApi) {\n throw new Error(`You are trying to use the form API outside of a form!`)\n }\n\n return formApi\n}\n","import * as React from 'react'\n//\nimport { useStore } from '@tanstack/react-store'\nimport type {\n DeepKeys,\n DeepValue,\n FieldOptions,\n Narrow,\n} from '@tanstack/form-core'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useFormContext, formContext } from './formContext'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FieldApi<TData, TFormData> {\n Field: FieldComponent<TData, TFormData>\n }\n}\n\nexport type UseFieldOptions<TData, TFormData> = FieldOptions<\n TData,\n TFormData\n> & {\n mode?: 'value' | 'array'\n}\n\nexport type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(\n opts?: { name: Narrow<TField> } & UseFieldOptions<\n DeepValue<TFormData, TField>,\n TFormData\n >,\n) => FieldApi<DeepValue<TFormData, TField>, TFormData>\n\nexport function useField<TData, TFormData>(\n opts: UseFieldOptions<TData, TFormData>,\n): FieldApi<TData, TFormData> {\n // Get the form API either manually or from context\n const { formApi, parentFieldName } = useFormContext()\n\n const [fieldApi] = React.useState<FieldApi<TData, TFormData>>(() => {\n const name = (\n typeof opts.index === 'number'\n ? [parentFieldName, opts.index, opts.name]\n : [parentFieldName, opts.name]\n )\n .filter((d) => d !== undefined)\n .join('.')\n\n const api = new FieldApi({ ...opts, form: formApi, name: name as any })\n\n api.Field = Field as any\n\n return api\n })\n\n // Keep options up to date as they are rendered\n fieldApi.update({ ...opts, form: formApi })\n\n useStore(\n fieldApi.store,\n opts.mode === 'array'\n ? (state: any) => {\n return [state.meta, Object.keys(state.value || []).length]\n }\n : undefined,\n )\n\n // Instantiates field meta and removes it when unrendered\n React.useEffect(() => fieldApi.mount(), [fieldApi])\n\n return fieldApi\n}\n\n// export type FieldValue<TFormData, TField> = TFormData extends any[]\n// ? TField extends `[${infer TIndex extends number | 'i'}].${infer TRest}`\n// ? DeepValue<TFormData[TIndex extends 'i' ? number : TIndex], TRest>\n// : TField extends `[${infer TIndex extends number | 'i'}]`\n// ? TFormData[TIndex extends 'i' ? number : TIndex]\n// : never\n// : TField extends `${infer TPrefix}[${infer TIndex extends\n// | number\n// | 'i'}].${infer TRest}`\n// ? DeepValue<\n// DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex],\n// TRest\n// >\n// : TField extends `${infer TPrefix}[${infer TIndex extends number | 'i'}]`\n// ? DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex]\n// : DeepValue<TFormData, TField>\n\nexport type FieldValue<TFormData, TField> = TFormData extends any[]\n ? unknown extends TField\n ? TFormData[number]\n : DeepValue<TFormData[number], TField>\n : DeepValue<TFormData, TField>\n\n// type Test1 = FieldValue<{ foo: { bar: string }[] }, 'foo'>\n// // ^?\n// type Test2 = FieldValue<{ foo: { bar: string }[] }, 'foo[i]'>\n// // ^?\n// type Test3 = FieldValue<{ foo: { bar: string }[] }, 'foo[2].bar'>\n// // ^?\n\nexport type FieldComponent<TParentData, TFormData> = <TField>({\n children,\n ...fieldOptions\n}: {\n children: (\n fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>,\n ) => any\n} & Omit<\n UseFieldOptions<FieldValue<TParentData, TField>, TFormData>,\n 'name' | 'index'\n> &\n (TParentData extends any[]\n ? {\n name?: TField extends undefined ? TField : DeepKeys<TParentData>\n index: number\n }\n : {\n name: TField extends undefined ? TField : DeepKeys<TParentData>\n index?: never\n })) => any\n\nexport function Field<TData, TFormData>({\n children,\n ...fieldOptions\n}: {\n children: (fieldApi: FieldApi<TData, TFormData>) => any\n} & UseFieldOptions<TData, TFormData>) {\n const fieldApi = useField(fieldOptions as any)\n return (\n <formContext.Provider\n value={{ formApi: fieldApi.form, parentFieldName: fieldApi.name }}\n children={functionalUpdate(children, fieldApi as any)}\n />\n )\n}\n","import type { FormState, FormOptions } from '@tanstack/form-core'\nimport { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/react-store'\nimport { useStore } from '@tanstack/react-store'\nimport React from 'react'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\n\ndeclare module '@tanstack/form-core' {\n interface Register {\n FormSubmitEvent: React.FormEvent<HTMLFormElement>\n }\n\n // eslint-disable-next-line no-shadow\n interface FormApi<TFormData> {\n Form: FormComponent\n Field: FieldComponent<TFormData, TFormData>\n useField: UseField<TFormData>\n useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n ) => TSelected\n Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n children:\n | ((state: NoInfer<TSelected>) => React.ReactNode)\n | React.ReactNode\n }) => any\n }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n const [formApi] = React.useState(() => {\n // @ts-ignore\n const api = new FormApi<TData>(opts)\n\n api.Form = createFormComponent(api)\n api.Field = Field as any\n api.useField = useField as any\n api.useStore = (\n // @ts-ignore\n selector,\n ) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useStore(api.store, selector as any) as any\n }\n api.Subscribe = (\n // @ts-ignore\n props,\n ) => {\n return functionalUpdate(\n props.children,\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useStore(api.store, props.selector as any),\n ) as any\n }\n\n return api\n })\n\n formApi.update(opts)\n\n return formApi as any\n}\n\nexport type FormProps = React.HTMLProps<HTMLFormElement> & {\n children: React.ReactNode\n noFormElement?: boolean\n}\n\nexport type FormComponent = (props: FormProps) => any\n\nfunction createFormComponent(formApi: FormApi<any>) {\n const Form: FormComponent = ({ children, noFormElement, ...rest }) => {\n const isSubmitting = formApi.useStore((state) => state.isSubmitting)\n\n return (\n <formContext.Provider value={{ formApi }}>\n {noFormElement ? (\n children\n ) : (\n <form\n onSubmit={formApi.handleSubmit}\n disabled={isSubmitting}\n {...rest}\n >\n {children}\n </form>\n )}\n </formContext.Provider>\n )\n }\n\n return Form\n}\n","import type { FormApi, FormOptions } from '@tanstack/form-core'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { useForm } from './useForm'\n\nexport type FormFactory<TFormData> = {\n useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>\n useField: UseField<TFormData>\n Field: FieldComponent<TFormData, TFormData>\n}\n\nexport function createFormFactory<TFormData>(\n defaultOpts?: FormOptions<TFormData>,\n): FormFactory<TFormData> {\n return {\n useForm: (opts) => {\n return useForm<TFormData>({ ...defaultOpts, ...opts } as any) as any\n },\n useField: useField as any,\n Field: Field as any,\n }\n}\n"],"names":["formContext","React","createContext","useFormContext","formApi","useContext","Error","useField","opts","parentFieldName","fieldApi","useState","name","index","filter","d","undefined","join","api","FieldApi","form","Field","update","useStore","store","mode","state","meta","Object","keys","value","length","useEffect","mount","children","fieldOptions","functionalUpdate","useForm","FormApi","Form","createFormComponent","selector","Subscribe","props","noFormElement","rest","isSubmitting","handleSubmit","createFormFactory","defaultOpts"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/formContext.ts","../../src/useField.tsx","../../src/useForm.tsx","../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi } from '@tanstack/form-core'\nimport * as React from 'react'\n\nexport const formContext = React.createContext<{\n formApi: FormApi<any>\n parentFieldName?: string\n} | null>(null!)\n\nexport function useFormContext() {\n const formApi = React.useContext(formContext)\n\n if (!formApi) {\n throw new Error(`You are trying to use the form API outside of a form!`)\n }\n\n return formApi\n}\n","import * as React from 'react'\n//\nimport { useStore } from '@tanstack/react-store'\nimport type {\n DeepKeys,\n DeepValue,\n FieldOptions,\n Narrow,\n} from '@tanstack/form-core'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useFormContext, formContext } from './formContext'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FieldApi<TData, TFormData> {\n Field: FieldComponent<TData, TFormData>\n }\n}\n\nexport type UseFieldOptions<TData, TFormData> = FieldOptions<\n TData,\n TFormData\n> & {\n mode?: 'value' | 'array'\n}\n\nexport type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(\n opts?: { name: Narrow<TField> } & UseFieldOptions<\n DeepValue<TFormData, TField>,\n TFormData\n >,\n) => FieldApi<DeepValue<TFormData, TField>, TFormData>\n\nexport function useField<TData, TFormData>(\n opts: UseFieldOptions<TData, TFormData>,\n): FieldApi<TData, TFormData> {\n // Get the form API either manually or from context\n const { formApi, parentFieldName } = useFormContext()\n\n const [fieldApi] = React.useState<FieldApi<TData, TFormData>>(() => {\n const name = (\n typeof opts.index === 'number'\n ? [parentFieldName, opts.index, opts.name]\n : [parentFieldName, opts.name]\n )\n .filter((d) => d !== undefined)\n .join('.')\n\n const api = new FieldApi({ ...opts, form: formApi, name: name as any })\n\n api.Field = Field as any\n\n return api\n })\n\n // Keep options up to date as they are rendered\n fieldApi.update({ ...opts, form: formApi })\n\n useStore(\n fieldApi.store,\n opts.mode === 'array'\n ? (state: any) => {\n return [state.meta, Object.keys(state.value || []).length]\n }\n : undefined,\n )\n\n // Instantiates field meta and removes it when unrendered\n React.useEffect(() => fieldApi.mount(), [fieldApi])\n\n return fieldApi\n}\n\n// export type FieldValue<TFormData, TField> = TFormData extends any[]\n// ? TField extends `[${infer TIndex extends number | 'i'}].${infer TRest}`\n// ? DeepValue<TFormData[TIndex extends 'i' ? number : TIndex], TRest>\n// : TField extends `[${infer TIndex extends number | 'i'}]`\n// ? TFormData[TIndex extends 'i' ? number : TIndex]\n// : never\n// : TField extends `${infer TPrefix}[${infer TIndex extends\n// | number\n// | 'i'}].${infer TRest}`\n// ? DeepValue<\n// DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex],\n// TRest\n// >\n// : TField extends `${infer TPrefix}[${infer TIndex extends number | 'i'}]`\n// ? DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex]\n// : DeepValue<TFormData, TField>\n\nexport type FieldValue<TFormData, TField> = TFormData extends any[]\n ? unknown extends TField\n ? TFormData[number]\n : DeepValue<TFormData[number], TField>\n : DeepValue<TFormData, TField>\n\n// type Test1 = FieldValue<{ foo: { bar: string }[] }, 'foo'>\n// // ^?\n// type Test2 = FieldValue<{ foo: { bar: string }[] }, 'foo[i]'>\n// // ^?\n// type Test3 = FieldValue<{ foo: { bar: string }[] }, 'foo[2].bar'>\n// // ^?\n\nexport type FieldComponent<TParentData, TFormData> = <TField>({\n children,\n ...fieldOptions\n}: {\n children: (\n fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>,\n ) => any\n} & Omit<\n UseFieldOptions<FieldValue<TParentData, TField>, TFormData>,\n 'name' | 'index'\n> &\n (TParentData extends any[]\n ? {\n name?: TField extends undefined ? TField : DeepKeys<TParentData>\n index: number\n }\n : {\n name: TField extends undefined ? TField : DeepKeys<TParentData>\n index?: never\n })) => any\n\nexport function Field<TData, TFormData>({\n children,\n ...fieldOptions\n}: {\n children: (fieldApi: FieldApi<TData, TFormData>) => any\n} & UseFieldOptions<TData, TFormData>) {\n const fieldApi = useField(fieldOptions as any)\n\n return (\n <formContext.Provider\n value={{ formApi: fieldApi.form, parentFieldName: fieldApi.name }}\n children={functionalUpdate(children, fieldApi as any)}\n />\n )\n}\n","import type { FormState, FormOptions } from '@tanstack/form-core'\nimport { FormApi, functionalUpdate } from '@tanstack/form-core'\nimport type { NoInfer } from '@tanstack/react-store'\nimport { useStore } from '@tanstack/react-store'\nimport React from 'react'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { formContext } from './formContext'\n\nexport type FormSubmitEvent = React.FormEvent<HTMLFormElement>\n\ndeclare module '@tanstack/form-core' {\n interface Register {\n FormSubmitEvent: FormSubmitEvent\n }\n\n // eslint-disable-next-line no-shadow\n interface FormApi<TFormData> {\n Provider: (props: { children: any }) => any\n getFormProps: () => FormProps\n Field: FieldComponent<TFormData, TFormData>\n useField: UseField<TFormData>\n useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n ) => TSelected\n Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n children:\n | ((state: NoInfer<TSelected>) => React.ReactNode)\n | React.ReactNode\n }) => any\n }\n}\n\nexport type FormProps = {\n onSubmit: (e: FormSubmitEvent) => void\n disabled: boolean\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n const [formApi] = React.useState(() => {\n // @ts-ignore\n const api = new FormApi<TData>(opts)\n\n api.Provider = (props) => (\n <formContext.Provider {...props} value={{ formApi: api }} />\n )\n api.getFormProps = () => {\n return {\n onSubmit: formApi.handleSubmit,\n disabled: api.state.isSubmitting,\n }\n }\n api.Field = Field as any\n api.useField = useField as any\n api.useStore = (\n // @ts-ignore\n selector,\n ) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useStore(api.store, selector as any) as any\n }\n api.Subscribe = (\n // @ts-ignore\n props,\n ) => {\n return functionalUpdate(\n props.children,\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useStore(api.store, props.selector as any),\n ) as any\n }\n\n return api\n })\n\n formApi.useStore((state) => state.isSubmitting)\n formApi.update(opts)\n\n return formApi as any\n}\n","import type { FormApi, FormOptions } from '@tanstack/form-core'\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { useForm } from './useForm'\n\nexport type FormFactory<TFormData> = {\n useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>\n useField: UseField<TFormData>\n Field: FieldComponent<TFormData, TFormData>\n}\n\nexport function createFormFactory<TFormData>(\n defaultOpts?: FormOptions<TFormData>,\n): FormFactory<TFormData> {\n return {\n useForm: (opts) => {\n return useForm<TFormData>({ ...defaultOpts, ...opts } as any) as any\n },\n useField: useField as any,\n Field: Field as any,\n }\n}\n"],"names":["formContext","React","createContext","useFormContext","formApi","useContext","Error","useField","opts","parentFieldName","fieldApi","useState","name","index","filter","d","undefined","join","api","FieldApi","form","Field","update","useStore","store","mode","state","meta","Object","keys","value","length","useEffect","mount","children","fieldOptions","functionalUpdate","useForm","FormApi","Provider","props","getFormProps","onSubmit","handleSubmit","disabled","isSubmitting","selector","Subscribe","createFormFactory","defaultOpts"],"mappings":"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"}
|
package/build/stats-html.html
CHANGED
|
@@ -2669,7 +2669,7 @@ var drawChart = (function (exports) {
|
|
|
2669
2669
|
</script>
|
|
2670
2670
|
<script>
|
|
2671
2671
|
/*<!--*/
|
|
2672
|
-
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":"
|
|
2672
|
+
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":"5ac5-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":"5ac5-31"}]},{"name":"packages","children":[{"name":"form-core/build/esm/index.js","uid":"5ac5-27"},{"name":"react-form/src","children":[{"uid":"5ac5-33","name":"formContext.ts"},{"uid":"5ac5-35","name":"useField.tsx"},{"uid":"5ac5-37","name":"useForm.tsx"},{"uid":"5ac5-39","name":"createFormFactory.ts"},{"uid":"5ac5-41","name":"index.ts"}]}]},{"uid":"5ac5-29","name":"\u0000rollupPluginBabelHelpers.js"}]}],"isRoot":true},"nodeParts":{"5ac5-25":{"renderedLength":1288,"gzipLength":497,"brotliLength":0,"mainUid":"5ac5-24"},"5ac5-27":{"renderedLength":23508,"gzipLength":5149,"brotliLength":0,"mainUid":"5ac5-26"},"5ac5-29":{"renderedLength":431,"gzipLength":240,"brotliLength":0,"mainUid":"5ac5-28"},"5ac5-31":{"renderedLength":978,"gzipLength":456,"brotliLength":0,"mainUid":"5ac5-30"},"5ac5-33":{"renderedLength":296,"gzipLength":200,"brotliLength":0,"mainUid":"5ac5-32"},"5ac5-35":{"renderedLength":2096,"gzipLength":779,"brotliLength":0,"mainUid":"5ac5-34"},"5ac5-37":{"renderedLength":1070,"gzipLength":437,"brotliLength":0,"mainUid":"5ac5-36"},"5ac5-39":{"renderedLength":217,"gzipLength":138,"brotliLength":0,"mainUid":"5ac5-38"},"5ac5-41":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"mainUid":"5ac5-40"}},"nodeMetas":{"5ac5-24":{"id":"/node_modules/.pnpm/@tanstack+store@0.0.1-beta.84/node_modules/@tanstack/store/build/esm/index.js","moduleParts":{"index.production.js":"5ac5-25"},"imported":[],"importedBy":[{"uid":"5ac5-26"},{"uid":"5ac5-30"}]},"5ac5-26":{"id":"/packages/form-core/build/esm/index.js","moduleParts":{"index.production.js":"5ac5-27"},"imported":[{"uid":"5ac5-24"}],"importedBy":[{"uid":"5ac5-40"},{"uid":"5ac5-36"},{"uid":"5ac5-34"}]},"5ac5-28":{"id":"\u0000rollupPluginBabelHelpers.js","moduleParts":{"index.production.js":"5ac5-29"},"imported":[],"importedBy":[{"uid":"5ac5-36"}]},"5ac5-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":"5ac5-31"},"imported":[{"uid":"5ac5-43"},{"uid":"5ac5-24"}],"importedBy":[{"uid":"5ac5-36"},{"uid":"5ac5-34"}]},"5ac5-32":{"id":"/packages/react-form/src/formContext.ts","moduleParts":{"index.production.js":"5ac5-33"},"imported":[{"uid":"5ac5-42"}],"importedBy":[{"uid":"5ac5-36"},{"uid":"5ac5-34"}]},"5ac5-34":{"id":"/packages/react-form/src/useField.tsx","moduleParts":{"index.production.js":"5ac5-35"},"imported":[{"uid":"5ac5-42"},{"uid":"5ac5-30"},{"uid":"5ac5-26"},{"uid":"5ac5-32"}],"importedBy":[{"uid":"5ac5-40"},{"uid":"5ac5-36"},{"uid":"5ac5-38"}]},"5ac5-36":{"id":"/packages/react-form/src/useForm.tsx","moduleParts":{"index.production.js":"5ac5-37"},"imported":[{"uid":"5ac5-28"},{"uid":"5ac5-26"},{"uid":"5ac5-30"},{"uid":"5ac5-42"},{"uid":"5ac5-34"},{"uid":"5ac5-32"}],"importedBy":[{"uid":"5ac5-40"},{"uid":"5ac5-38"}]},"5ac5-38":{"id":"/packages/react-form/src/createFormFactory.ts","moduleParts":{"index.production.js":"5ac5-39"},"imported":[{"uid":"5ac5-34"},{"uid":"5ac5-36"}],"importedBy":[{"uid":"5ac5-40"}]},"5ac5-40":{"id":"/packages/react-form/src/index.ts","moduleParts":{"index.production.js":"5ac5-41"},"imported":[{"uid":"5ac5-26"},{"uid":"5ac5-36"},{"uid":"5ac5-34"},{"uid":"5ac5-38"}],"importedBy":[],"isEntry":true},"5ac5-42":{"id":"react","moduleParts":{},"imported":[],"importedBy":[{"uid":"5ac5-36"},{"uid":"5ac5-34"},{"uid":"5ac5-32"}],"isExternal":true},"5ac5-43":{"id":"use-sync-external-store/shim/with-selector","moduleParts":{},"imported":[],"importedBy":[{"uid":"5ac5-30"}],"isExternal":true}},"env":{"rollup":"2.78.1"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
|
|
2673
2673
|
|
|
2674
2674
|
const run = () => {
|
|
2675
2675
|
const width = window.innerWidth;
|