@tanstack/react-form 0.10.3 → 0.12.0

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.
Files changed (140) hide show
  1. package/dist/cjs/createFormFactory.d.ts +11 -0
  2. package/dist/cjs/formContext.d.ts +10 -0
  3. package/dist/cjs/index.cjs +181 -0
  4. package/dist/cjs/index.cjs.map +1 -0
  5. package/dist/cjs/index.d.cts +8 -0
  6. package/dist/cjs/index.d.ts +8 -0
  7. package/dist/cjs/index.js +181 -0
  8. package/dist/cjs/tests/createFormFactory.test.d.ts +1 -0
  9. package/dist/cjs/tests/useField.test-d.d.ts +1 -0
  10. package/dist/cjs/tests/useField.test.d.ts +1 -0
  11. package/dist/cjs/tests/useForm.test-d.d.ts +1 -0
  12. package/dist/cjs/tests/useForm.test.d.ts +1 -0
  13. package/dist/cjs/tests/utils.d.ts +1 -0
  14. package/dist/cjs/types.d.ts +4 -0
  15. package/dist/cjs/useField.d.ts +28 -0
  16. package/dist/cjs/useForm.d.ts +19 -0
  17. package/dist/cjs/useIsomorphicEffectOnce.d.ts +5 -0
  18. package/dist/cjs/useIsomorphicLayoutEffect.d.ts +3 -0
  19. package/dist/cjs/useTransform.d.ts +5 -0
  20. package/dist/cjs/validateFormData.d.ts +14 -0
  21. package/dist/mjs/createFormFactory.d.ts +11 -0
  22. package/dist/mjs/formContext.d.ts +10 -0
  23. package/dist/mjs/index.d.mts +8 -0
  24. package/dist/mjs/index.d.ts +8 -0
  25. package/dist/mjs/index.js +170 -0
  26. package/dist/mjs/index.mjs +170 -0
  27. package/dist/mjs/index.mjs.map +1 -0
  28. package/dist/mjs/tests/createFormFactory.test.d.ts +1 -0
  29. package/dist/mjs/tests/useField.test-d.d.ts +1 -0
  30. package/dist/mjs/tests/useField.test.d.ts +1 -0
  31. package/dist/mjs/tests/useForm.test-d.d.ts +1 -0
  32. package/dist/mjs/tests/useForm.test.d.ts +1 -0
  33. package/dist/mjs/tests/utils.d.ts +1 -0
  34. package/dist/mjs/types.d.ts +4 -0
  35. package/dist/mjs/useField.d.ts +28 -0
  36. package/dist/mjs/useForm.d.ts +19 -0
  37. package/dist/mjs/useIsomorphicEffectOnce.d.ts +5 -0
  38. package/dist/mjs/useIsomorphicLayoutEffect.d.ts +3 -0
  39. package/dist/mjs/useTransform.d.ts +5 -0
  40. package/dist/mjs/validateFormData.d.ts +14 -0
  41. package/package.json +21 -24
  42. package/src/createFormFactory.ts +25 -9
  43. package/src/formContext.ts +5 -5
  44. package/src/index.ts +7 -1
  45. package/src/tests/createFormFactory.test.tsx +1 -1
  46. package/src/tests/useField.test-d.tsx +12 -8
  47. package/src/tests/useField.test.tsx +45 -33
  48. package/src/tests/useForm.test-d.tsx +36 -0
  49. package/src/tests/useForm.test.tsx +59 -42
  50. package/src/types.ts +13 -4
  51. package/src/useField.tsx +82 -40
  52. package/src/useForm.tsx +20 -11
  53. package/src/useIsomorphicEffectOnce.ts +38 -0
  54. package/src/useIsomorphicLayoutEffect.ts +1 -1
  55. package/src/useTransform.ts +16 -0
  56. package/src/validateFormData.ts +70 -0
  57. package/build/legacy/createFormFactory.cjs +0 -42
  58. package/build/legacy/createFormFactory.cjs.map +0 -1
  59. package/build/legacy/createFormFactory.d.cts +0 -12
  60. package/build/legacy/createFormFactory.d.ts +0 -12
  61. package/build/legacy/createFormFactory.js +0 -17
  62. package/build/legacy/createFormFactory.js.map +0 -1
  63. package/build/legacy/formContext.cjs +0 -51
  64. package/build/legacy/formContext.cjs.map +0 -1
  65. package/build/legacy/formContext.d.cts +0 -13
  66. package/build/legacy/formContext.d.ts +0 -13
  67. package/build/legacy/formContext.js +0 -15
  68. package/build/legacy/formContext.js.map +0 -1
  69. package/build/legacy/index.cjs +0 -46
  70. package/build/legacy/index.cjs.map +0 -1
  71. package/build/legacy/index.d.cts +0 -7
  72. package/build/legacy/index.d.ts +0 -7
  73. package/build/legacy/index.js +0 -15
  74. package/build/legacy/index.js.map +0 -1
  75. package/build/legacy/types.cjs +0 -19
  76. package/build/legacy/types.cjs.map +0 -1
  77. package/build/legacy/types.d.cts +0 -7
  78. package/build/legacy/types.d.ts +0 -7
  79. package/build/legacy/types.js +0 -1
  80. package/build/legacy/types.js.map +0 -1
  81. package/build/legacy/useField.cjs +0 -88
  82. package/build/legacy/useField.cjs.map +0 -1
  83. package/build/legacy/useField.d.cts +0 -27
  84. package/build/legacy/useField.d.ts +0 -27
  85. package/build/legacy/useField.js +0 -52
  86. package/build/legacy/useField.js.map +0 -1
  87. package/build/legacy/useForm.cjs +0 -73
  88. package/build/legacy/useForm.cjs.map +0 -1
  89. package/build/legacy/useForm.d.cts +0 -23
  90. package/build/legacy/useForm.d.ts +0 -23
  91. package/build/legacy/useForm.js +0 -38
  92. package/build/legacy/useForm.js.map +0 -1
  93. package/build/legacy/useIsomorphicLayoutEffect.cjs +0 -35
  94. package/build/legacy/useIsomorphicLayoutEffect.cjs.map +0 -1
  95. package/build/legacy/useIsomorphicLayoutEffect.d.cts +0 -5
  96. package/build/legacy/useIsomorphicLayoutEffect.d.ts +0 -5
  97. package/build/legacy/useIsomorphicLayoutEffect.js +0 -10
  98. package/build/legacy/useIsomorphicLayoutEffect.js.map +0 -1
  99. package/build/modern/createFormFactory.cjs +0 -42
  100. package/build/modern/createFormFactory.cjs.map +0 -1
  101. package/build/modern/createFormFactory.d.cts +0 -12
  102. package/build/modern/createFormFactory.d.ts +0 -12
  103. package/build/modern/createFormFactory.js +0 -17
  104. package/build/modern/createFormFactory.js.map +0 -1
  105. package/build/modern/formContext.cjs +0 -51
  106. package/build/modern/formContext.cjs.map +0 -1
  107. package/build/modern/formContext.d.cts +0 -13
  108. package/build/modern/formContext.d.ts +0 -13
  109. package/build/modern/formContext.js +0 -15
  110. package/build/modern/formContext.js.map +0 -1
  111. package/build/modern/index.cjs +0 -46
  112. package/build/modern/index.cjs.map +0 -1
  113. package/build/modern/index.d.cts +0 -7
  114. package/build/modern/index.d.ts +0 -7
  115. package/build/modern/index.js +0 -15
  116. package/build/modern/index.js.map +0 -1
  117. package/build/modern/types.cjs +0 -19
  118. package/build/modern/types.cjs.map +0 -1
  119. package/build/modern/types.d.cts +0 -7
  120. package/build/modern/types.d.ts +0 -7
  121. package/build/modern/types.js +0 -1
  122. package/build/modern/types.js.map +0 -1
  123. package/build/modern/useField.cjs +0 -88
  124. package/build/modern/useField.cjs.map +0 -1
  125. package/build/modern/useField.d.cts +0 -27
  126. package/build/modern/useField.d.ts +0 -27
  127. package/build/modern/useField.js +0 -52
  128. package/build/modern/useField.js.map +0 -1
  129. package/build/modern/useForm.cjs +0 -73
  130. package/build/modern/useForm.cjs.map +0 -1
  131. package/build/modern/useForm.d.cts +0 -23
  132. package/build/modern/useForm.d.ts +0 -23
  133. package/build/modern/useForm.js +0 -38
  134. package/build/modern/useForm.js.map +0 -1
  135. package/build/modern/useIsomorphicLayoutEffect.cjs +0 -35
  136. package/build/modern/useIsomorphicLayoutEffect.cjs.map +0 -1
  137. package/build/modern/useIsomorphicLayoutEffect.d.cts +0 -5
  138. package/build/modern/useIsomorphicLayoutEffect.d.ts +0 -5
  139. package/build/modern/useIsomorphicLayoutEffect.js +0 -10
  140. package/build/modern/useIsomorphicLayoutEffect.js.map +0 -1
@@ -1,7 +0,0 @@
1
- export { DeepKeys, DeepValue, FieldApi, FieldApiOptions, FieldInfo, FieldMeta, FieldOptions, FieldState, FormApi, FormOptions, FormState, RequiredByKey, Updater, UpdaterFn, ValidationCause, ValidationError, ValidationMeta, functionalUpdate } from '@tanstack/form-core';
2
- export { useForm } from './useForm.cjs';
3
- export { Field, FieldComponent, UseField, useField } from './useField.cjs';
4
- export { FormFactory, createFormFactory } from './createFormFactory.cjs';
5
- import '@tanstack/react-store';
6
- import 'react';
7
- import './types.cjs';
@@ -1,7 +0,0 @@
1
- export { DeepKeys, DeepValue, FieldApi, FieldApiOptions, FieldInfo, FieldMeta, FieldOptions, FieldState, FormApi, FormOptions, FormState, RequiredByKey, Updater, UpdaterFn, ValidationCause, ValidationError, ValidationMeta, functionalUpdate } from '@tanstack/form-core';
2
- export { useForm } from './useForm.js';
3
- export { Field, FieldComponent, UseField, useField } from './useField.js';
4
- export { FormFactory, createFormFactory } from './createFormFactory.js';
5
- import '@tanstack/react-store';
6
- import 'react';
7
- import './types.js';
@@ -1,15 +0,0 @@
1
- // src/index.ts
2
- import { FormApi, FieldApi, functionalUpdate } from "@tanstack/form-core";
3
- import { useForm } from "./useForm.js";
4
- import { useField, Field } from "./useField.js";
5
- import { createFormFactory } from "./createFormFactory.js";
6
- export {
7
- Field,
8
- FieldApi,
9
- FormApi,
10
- createFormFactory,
11
- functionalUpdate,
12
- useField,
13
- useForm
14
- };
15
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export type {\n DeepKeys,\n DeepValue,\n FieldApiOptions,\n FieldInfo,\n FieldMeta,\n FieldOptions,\n FieldState,\n FormOptions,\n FormState,\n RequiredByKey,\n Updater,\n UpdaterFn,\n ValidationCause,\n ValidationError,\n ValidationMeta,\n} from '@tanstack/form-core'\n\nexport { FormApi, FieldApi, functionalUpdate } from '@tanstack/form-core'\n\nexport { useForm } from './useForm'\n\nexport type { UseField, FieldComponent } from './useField'\nexport { useField, Field } from './useField'\n\nexport type { FormFactory } from './createFormFactory'\nexport { createFormFactory } from './createFormFactory'\n"],"mappings":";AAkBA,SAAS,SAAS,UAAU,wBAAwB;AAEpD,SAAS,eAAe;AAGxB,SAAS,UAAU,aAAa;AAGhC,SAAS,yBAAyB;","names":[]}
@@ -1,19 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __copyProps = (to, from, except, desc) => {
7
- if (from && typeof from === "object" || typeof from === "function") {
8
- for (let key of __getOwnPropNames(from))
9
- if (!__hasOwnProp.call(to, key) && key !== except)
10
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
11
- }
12
- return to;
13
- };
14
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
15
-
16
- // src/types.ts
17
- var types_exports = {};
18
- module.exports = __toCommonJS(types_exports);
19
- //# sourceMappingURL=types.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/types.ts"],"sourcesContent":["import type { FieldOptions, DeepKeys, DeepValue } from '@tanstack/form-core'\n\nexport type UseFieldOptions<\n TParentData,\n TName extends DeepKeys<TParentData>,\n ValidatorType,\n FormValidator,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = FieldOptions<TParentData, TName, ValidatorType, FormValidator, TData> & {\n mode?: 'value' | 'array'\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
@@ -1,7 +0,0 @@
1
- import { DeepKeys, DeepValue, FieldOptions } from '@tanstack/form-core';
2
-
3
- type UseFieldOptions<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = FieldOptions<TParentData, TName, ValidatorType, FormValidator, TData> & {
4
- mode?: 'value' | 'array';
5
- };
6
-
7
- export { UseFieldOptions };
@@ -1,7 +0,0 @@
1
- import { DeepKeys, DeepValue, FieldOptions } from '@tanstack/form-core';
2
-
3
- type UseFieldOptions<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = FieldOptions<TParentData, TName, ValidatorType, FormValidator, TData> & {
4
- mode?: 'value' | 'array';
5
- };
6
-
7
- export { UseFieldOptions };
@@ -1 +0,0 @@
1
- //# sourceMappingURL=types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
@@ -1,88 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
-
30
- // src/useField.tsx
31
- var useField_exports = {};
32
- __export(useField_exports, {
33
- Field: () => Field,
34
- useField: () => useField
35
- });
36
- module.exports = __toCommonJS(useField_exports);
37
- var import_react = __toESM(require("react"), 1);
38
- var import_react_store = require("@tanstack/react-store");
39
- var import_form_core = require("@tanstack/form-core");
40
- var import_formContext = require("./formContext.cjs");
41
- var import_useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect.cjs");
42
- function useField(opts) {
43
- const { formApi, parentFieldName } = (0, import_formContext.useFormContext)();
44
- const [fieldApi] = (0, import_react.useState)(() => {
45
- const name = (typeof opts.index === "number" ? [parentFieldName, opts.index, opts.name] : [parentFieldName, opts.name]).filter((d) => d !== void 0).join(".");
46
- const api = new import_form_core.FieldApi({
47
- ...opts,
48
- form: formApi,
49
- // TODO: Fix typings to include `index` and `parentFieldName`, if present
50
- name
51
- });
52
- api.Field = Field;
53
- return api;
54
- });
55
- (0, import_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
56
- fieldApi.update({ ...opts, form: formApi });
57
- });
58
- (0, import_react_store.useStore)(
59
- fieldApi.store,
60
- opts.mode === "array" ? (state) => {
61
- return [state.meta, Object.keys(state.value).length];
62
- } : void 0
63
- );
64
- (0, import_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => fieldApi.mount(), [fieldApi]);
65
- return fieldApi;
66
- }
67
- function Field({
68
- children,
69
- ...fieldOptions
70
- }) {
71
- const fieldApi = useField(fieldOptions);
72
- return /* @__PURE__ */ import_react.default.createElement(
73
- import_formContext.formContext.Provider,
74
- {
75
- value: {
76
- formApi: fieldApi.form,
77
- parentFieldName: fieldApi.name
78
- },
79
- children: (0, import_form_core.functionalUpdate)(children, fieldApi)
80
- }
81
- );
82
- }
83
- // Annotate the CommonJS export names for ESM import in node:
84
- 0 && (module.exports = {
85
- Field,
86
- useField
87
- });
88
- //# sourceMappingURL=useField.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport type { DeepKeys, DeepValue, Narrow } from '@tanstack/form-core'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useFormContext, formContext } from './formContext'\nimport type { UseFieldOptions } from './types'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FieldApi<\n TParentData,\n TName extends DeepKeys<TParentData>,\n ValidatorType,\n FormValidator,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n > {\n Field: FieldComponent<TData, FormValidator>\n }\n}\n\nexport type UseField<TParentData> = <\n TName extends DeepKeys<TParentData>,\n ValidatorType,\n FormValidator,\n>(\n opts?: { name: Narrow<TName> } & UseFieldOptions<\n TParentData,\n TName,\n ValidatorType,\n FormValidator\n >,\n) => FieldApi<\n TParentData,\n TName,\n ValidatorType,\n FormValidator,\n DeepValue<TParentData, TName>\n>\n\nexport function useField<\n TParentData,\n TName extends DeepKeys<TParentData>,\n ValidatorType,\n FormValidator,\n>(\n opts: UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>,\n): FieldApi<\n TParentData,\n TName,\n ValidatorType,\n FormValidator\n // Omit<typeof opts, 'onMount'> & {\n // form: FormApi<TParentData>\n // }\n> {\n // Get the form API either manually or from context\n const { formApi, parentFieldName } = useFormContext()\n\n const [fieldApi] = useState(() => {\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({\n ...opts,\n form: formApi,\n // TODO: Fix typings to include `index` and `parentFieldName`, if present\n name: name as typeof opts.name,\n })\n\n api.Field = Field as never\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,\n opts.mode === 'array'\n ? (state) => {\n return [state.meta, Object.keys(state.value).length]\n }\n : undefined,\n )\n // Instantiates field meta and removes it when unrendered\n useIsomorphicLayoutEffect(() => fieldApi.mount(), [fieldApi])\n\n return fieldApi\n}\n\ntype FieldComponentProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n ValidatorType,\n FormValidator,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = {\n children: (\n fieldApi: FieldApi<TParentData, TName, ValidatorType, FormValidator, TData>,\n ) => any\n} & (TParentData extends any[]\n ? {\n name?: TName\n index: number\n }\n : {\n name: TName\n index?: never\n }) &\n Omit<\n UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>,\n 'name' | 'index'\n >\n\nexport type FieldComponent<TParentData, FormValidator> = <\n TName extends DeepKeys<TParentData>,\n ValidatorType,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n children,\n ...fieldOptions\n}: FieldComponentProps<\n TParentData,\n TName,\n ValidatorType,\n FormValidator,\n TData\n>) => any\n\nexport function Field<\n TParentData,\n TName extends DeepKeys<TParentData>,\n ValidatorType,\n FormValidator,\n>({\n children,\n ...fieldOptions\n}: {\n children: (\n fieldApi: FieldApi<TParentData, TName, ValidatorType, FormValidator>,\n ) => any\n} & UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>) {\n const fieldApi = useField(fieldOptions as any)\n\n return (\n <formContext.Provider\n value={{\n formApi: fieldApi.form as never,\n parentFieldName: fieldApi.name,\n }}\n children={functionalUpdate(children, fieldApi as any)}\n />\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,yBAAyB;AAEzB,uBAA2C;AAC3C,yBAA4C;AAE5C,uCAA0C;AAkCnC,SAAS,SAMd,MASA;AAEA,QAAM,EAAE,SAAS,gBAAgB,QAAI,mCAAe;AAEpD,QAAM,CAAC,QAAQ,QAAI,uBAAS,MAAM;AAChC,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;AAAA,MACvB,GAAG;AAAA,MACH,MAAM;AAAA;AAAA,MAEN;AAAA,IACF,CAAC;AAED,QAAI,QAAQ;AAEZ,WAAO;AAAA,EACT,CAAC;AAMD,kEAA0B,MAAM;AAC9B,aAAS,OAAO,EAAE,GAAG,MAAM,MAAM,QAAQ,CAAU;AAAA,EACrD,CAAC;AAED;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAU;AACT,aAAO,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,KAAK,EAAE,MAAM;AAAA,IACrD,IACA;AAAA,EACN;AAEA,kEAA0B,MAAM,SAAS,MAAM,GAAG,CAAC,QAAQ,CAAC;AAE5D,SAAO;AACT;AAyCO,SAAS,MAKd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAIuE;AACrE,QAAM,WAAW,SAAS,YAAmB;AAE7C,SACE,6BAAAA,QAAA;AAAA,IAAC,+BAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,SAAS,SAAS;AAAA,QAClB,iBAAiB,SAAS;AAAA,MAC5B;AAAA,MACA,cAAU,mCAAiB,UAAU,QAAe;AAAA;AAAA,EACtD;AAEJ;","names":["React"]}
@@ -1,27 +0,0 @@
1
- import { DeepKeys, DeepValue, Narrow, FieldApi } from '@tanstack/form-core';
2
- import { UseFieldOptions } from './types.cjs';
3
-
4
- declare module '@tanstack/form-core' {
5
- interface FieldApi<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> {
6
- Field: FieldComponent<TData, FormValidator>;
7
- }
8
- }
9
- type UseField<TParentData> = <TName extends DeepKeys<TParentData>, ValidatorType, FormValidator>(opts?: {
10
- name: Narrow<TName>;
11
- } & UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>) => FieldApi<TParentData, TName, ValidatorType, FormValidator, DeepValue<TParentData, TName>>;
12
- declare function useField<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator>(opts: UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>): FieldApi<TParentData, TName, ValidatorType, FormValidator>;
13
- type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = {
14
- children: (fieldApi: FieldApi<TParentData, TName, ValidatorType, FormValidator, TData>) => any;
15
- } & (TParentData extends any[] ? {
16
- name?: TName;
17
- index: number;
18
- } : {
19
- name: TName;
20
- index?: never;
21
- }) & Omit<UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>, 'name' | 'index'>;
22
- type FieldComponent<TParentData, FormValidator> = <TName extends DeepKeys<TParentData>, ValidatorType, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>({ children, ...fieldOptions }: FieldComponentProps<TParentData, TName, ValidatorType, FormValidator, TData>) => any;
23
- declare function Field<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator>({ children, ...fieldOptions }: {
24
- children: (fieldApi: FieldApi<TParentData, TName, ValidatorType, FormValidator>) => any;
25
- } & UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>): JSX.Element;
26
-
27
- export { Field, FieldComponent, UseField, useField };
@@ -1,27 +0,0 @@
1
- import { DeepKeys, DeepValue, Narrow, FieldApi } from '@tanstack/form-core';
2
- import { UseFieldOptions } from './types.js';
3
-
4
- declare module '@tanstack/form-core' {
5
- interface FieldApi<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> {
6
- Field: FieldComponent<TData, FormValidator>;
7
- }
8
- }
9
- type UseField<TParentData> = <TName extends DeepKeys<TParentData>, ValidatorType, FormValidator>(opts?: {
10
- name: Narrow<TName>;
11
- } & UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>) => FieldApi<TParentData, TName, ValidatorType, FormValidator, DeepValue<TParentData, TName>>;
12
- declare function useField<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator>(opts: UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>): FieldApi<TParentData, TName, ValidatorType, FormValidator>;
13
- type FieldComponentProps<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = {
14
- children: (fieldApi: FieldApi<TParentData, TName, ValidatorType, FormValidator, TData>) => any;
15
- } & (TParentData extends any[] ? {
16
- name?: TName;
17
- index: number;
18
- } : {
19
- name: TName;
20
- index?: never;
21
- }) & Omit<UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>, 'name' | 'index'>;
22
- type FieldComponent<TParentData, FormValidator> = <TName extends DeepKeys<TParentData>, ValidatorType, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>({ children, ...fieldOptions }: FieldComponentProps<TParentData, TName, ValidatorType, FormValidator, TData>) => any;
23
- declare function Field<TParentData, TName extends DeepKeys<TParentData>, ValidatorType, FormValidator>({ children, ...fieldOptions }: {
24
- children: (fieldApi: FieldApi<TParentData, TName, ValidatorType, FormValidator>) => any;
25
- } & UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>): JSX.Element;
26
-
27
- export { Field, FieldComponent, UseField, useField };
@@ -1,52 +0,0 @@
1
- // src/useField.tsx
2
- import React, { useState } from "react";
3
- import { useStore } from "@tanstack/react-store";
4
- import { FieldApi, functionalUpdate } from "@tanstack/form-core";
5
- import { useFormContext, formContext } from "./formContext.js";
6
- import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
7
- function useField(opts) {
8
- const { formApi, parentFieldName } = useFormContext();
9
- const [fieldApi] = useState(() => {
10
- const name = (typeof opts.index === "number" ? [parentFieldName, opts.index, opts.name] : [parentFieldName, opts.name]).filter((d) => d !== void 0).join(".");
11
- const api = new FieldApi({
12
- ...opts,
13
- form: formApi,
14
- // TODO: Fix typings to include `index` and `parentFieldName`, if present
15
- name
16
- });
17
- api.Field = Field;
18
- return api;
19
- });
20
- useIsomorphicLayoutEffect(() => {
21
- fieldApi.update({ ...opts, form: formApi });
22
- });
23
- useStore(
24
- fieldApi.store,
25
- opts.mode === "array" ? (state) => {
26
- return [state.meta, Object.keys(state.value).length];
27
- } : void 0
28
- );
29
- useIsomorphicLayoutEffect(() => fieldApi.mount(), [fieldApi]);
30
- return fieldApi;
31
- }
32
- function Field({
33
- children,
34
- ...fieldOptions
35
- }) {
36
- const fieldApi = useField(fieldOptions);
37
- return /* @__PURE__ */ React.createElement(
38
- formContext.Provider,
39
- {
40
- value: {
41
- formApi: fieldApi.form,
42
- parentFieldName: fieldApi.name
43
- },
44
- children: functionalUpdate(children, fieldApi)
45
- }
46
- );
47
- }
48
- export {
49
- Field,
50
- useField
51
- };
52
- //# sourceMappingURL=useField.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/useField.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { useStore } from '@tanstack/react-store'\nimport type { DeepKeys, DeepValue, Narrow } from '@tanstack/form-core'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useFormContext, formContext } from './formContext'\nimport type { UseFieldOptions } from './types'\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FieldApi<\n TParentData,\n TName extends DeepKeys<TParentData>,\n ValidatorType,\n FormValidator,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n > {\n Field: FieldComponent<TData, FormValidator>\n }\n}\n\nexport type UseField<TParentData> = <\n TName extends DeepKeys<TParentData>,\n ValidatorType,\n FormValidator,\n>(\n opts?: { name: Narrow<TName> } & UseFieldOptions<\n TParentData,\n TName,\n ValidatorType,\n FormValidator\n >,\n) => FieldApi<\n TParentData,\n TName,\n ValidatorType,\n FormValidator,\n DeepValue<TParentData, TName>\n>\n\nexport function useField<\n TParentData,\n TName extends DeepKeys<TParentData>,\n ValidatorType,\n FormValidator,\n>(\n opts: UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>,\n): FieldApi<\n TParentData,\n TName,\n ValidatorType,\n FormValidator\n // Omit<typeof opts, 'onMount'> & {\n // form: FormApi<TParentData>\n // }\n> {\n // Get the form API either manually or from context\n const { formApi, parentFieldName } = useFormContext()\n\n const [fieldApi] = useState(() => {\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({\n ...opts,\n form: formApi,\n // TODO: Fix typings to include `index` and `parentFieldName`, if present\n name: name as typeof opts.name,\n })\n\n api.Field = Field as never\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,\n opts.mode === 'array'\n ? (state) => {\n return [state.meta, Object.keys(state.value).length]\n }\n : undefined,\n )\n // Instantiates field meta and removes it when unrendered\n useIsomorphicLayoutEffect(() => fieldApi.mount(), [fieldApi])\n\n return fieldApi\n}\n\ntype FieldComponentProps<\n TParentData,\n TName extends DeepKeys<TParentData>,\n ValidatorType,\n FormValidator,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n> = {\n children: (\n fieldApi: FieldApi<TParentData, TName, ValidatorType, FormValidator, TData>,\n ) => any\n} & (TParentData extends any[]\n ? {\n name?: TName\n index: number\n }\n : {\n name: TName\n index?: never\n }) &\n Omit<\n UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>,\n 'name' | 'index'\n >\n\nexport type FieldComponent<TParentData, FormValidator> = <\n TName extends DeepKeys<TParentData>,\n ValidatorType,\n TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,\n>({\n children,\n ...fieldOptions\n}: FieldComponentProps<\n TParentData,\n TName,\n ValidatorType,\n FormValidator,\n TData\n>) => any\n\nexport function Field<\n TParentData,\n TName extends DeepKeys<TParentData>,\n ValidatorType,\n FormValidator,\n>({\n children,\n ...fieldOptions\n}: {\n children: (\n fieldApi: FieldApi<TParentData, TName, ValidatorType, FormValidator>,\n ) => any\n} & UseFieldOptions<TParentData, TName, ValidatorType, FormValidator>) {\n const fieldApi = useField(fieldOptions as any)\n\n return (\n <formContext.Provider\n value={{\n formApi: fieldApi.form as never,\n parentFieldName: fieldApi.name,\n }}\n children={functionalUpdate(children, fieldApi as any)}\n />\n )\n}\n"],"mappings":";AAAA,OAAO,SAAS,gBAAgB;AAChC,SAAS,gBAAgB;AAEzB,SAAS,UAAU,wBAAwB;AAC3C,SAAS,gBAAgB,mBAAmB;AAE5C,SAAS,iCAAiC;AAkCnC,SAAS,SAMd,MASA;AAEA,QAAM,EAAE,SAAS,gBAAgB,IAAI,eAAe;AAEpD,QAAM,CAAC,QAAQ,IAAI,SAAS,MAAM;AAChC,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;AAAA,MACvB,GAAG;AAAA,MACH,MAAM;AAAA;AAAA,MAEN;AAAA,IACF,CAAC;AAED,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,UAAU;AACT,aAAO,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,KAAK,EAAE,MAAM;AAAA,IACrD,IACA;AAAA,EACN;AAEA,4BAA0B,MAAM,SAAS,MAAM,GAAG,CAAC,QAAQ,CAAC;AAE5D,SAAO;AACT;AAyCO,SAAS,MAKd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAIuE;AACrE,QAAM,WAAW,SAAS,YAAmB;AAE7C,SACE;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,SAAS,SAAS;AAAA,QAClB,iBAAiB,SAAS;AAAA,MAC5B;AAAA,MACA,UAAU,iBAAiB,UAAU,QAAe;AAAA;AAAA,EACtD;AAEJ;","names":[]}
@@ -1,73 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
-
30
- // src/useForm.tsx
31
- var useForm_exports = {};
32
- __export(useForm_exports, {
33
- useForm: () => useForm
34
- });
35
- module.exports = __toCommonJS(useForm_exports);
36
- var import_form_core = require("@tanstack/form-core");
37
- var import_react_store = require("@tanstack/react-store");
38
- var import_react = __toESM(require("react"), 1);
39
- var import_useField = require("./useField.cjs");
40
- var import_formContext = require("./formContext.cjs");
41
- var import_useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect.cjs");
42
- function useForm(opts) {
43
- const [formApi] = (0, import_react.useState)(() => {
44
- const api = new import_form_core.FormApi(opts);
45
- api.Provider = function Provider(props) {
46
- (0, import_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(api.mount, []);
47
- return /* @__PURE__ */ import_react.default.createElement(import_formContext.formContext.Provider, { ...props, value: { formApi: api } });
48
- };
49
- api.Field = import_useField.Field;
50
- api.useField = import_useField.useField;
51
- api.useStore = (selector) => {
52
- return (0, import_react_store.useStore)(api.store, selector);
53
- };
54
- api.Subscribe = (props) => {
55
- return (0, import_form_core.functionalUpdate)(
56
- props.children,
57
- // eslint-disable-next-line react-hooks/rules-of-hooks
58
- (0, import_react_store.useStore)(api.store, props.selector)
59
- );
60
- };
61
- return api;
62
- });
63
- formApi.useStore((state) => state.isSubmitting);
64
- (0, import_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
65
- formApi.update(opts);
66
- });
67
- return formApi;
68
- }
69
- // Annotate the CommonJS export names for ESM import in node:
70
- 0 && (module.exports = {
71
- useForm
72
- });
73
- //# sourceMappingURL=useForm.cjs.map
@@ -1 +0,0 @@
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 './useIsomorphicLayoutEffect'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FormApi<TFormData, ValidatorType> {\n Provider: (props: { children: any }) => any\n Field: FieldComponent<TFormData, ValidatorType>\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, FormValidator>(\n opts?: FormOptions<TData, FormValidator>,\n): FormApi<TData, FormValidator> {\n const [formApi] = useState(() => {\n // @ts-ignore\n const api = new FormApi<TData>(opts)\n\n api.Provider = function Provider(props) {\n useIsomorphicLayoutEffect(api.mount, [])\n return <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,uCAA0C;AAkBnC,SAAS,QACd,MAC+B;AAC/B,QAAM,CAAC,OAAO,QAAI,uBAAS,MAAM;AAE/B,UAAM,MAAM,IAAI,yBAAe,IAAI;AAEnC,QAAI,WAAW,SAAS,SAAS,OAAO;AACtC,sEAA0B,IAAI,OAAO,CAAC,CAAC;AACvC,aAAO,6BAAAA,QAAA,cAAC,+BAAY,UAAZ,EAAsB,GAAG,OAAO,OAAO,EAAE,SAAS,IAAI,GAAG;AAAA,IACnE;AACA,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,kEAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EACrB,CAAC;AAED,SAAO;AACT;","names":["React"]}
@@ -1,23 +0,0 @@
1
- import { FormState, FormOptions, FormApi } from '@tanstack/form-core';
2
- import { NoInfer } from '@tanstack/react-store';
3
- import { ReactNode } from 'react';
4
- import { FieldComponent, UseField } from './useField.cjs';
5
- import './types.cjs';
6
-
7
- declare module '@tanstack/form-core' {
8
- interface FormApi<TFormData, ValidatorType> {
9
- Provider: (props: {
10
- children: any;
11
- }) => any;
12
- Field: FieldComponent<TFormData, ValidatorType>;
13
- useField: UseField<TFormData>;
14
- useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
15
- Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
16
- selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
17
- children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode;
18
- }) => any;
19
- }
20
- }
21
- declare function useForm<TData, FormValidator>(opts?: FormOptions<TData, FormValidator>): FormApi<TData, FormValidator>;
22
-
23
- export { useForm };
@@ -1,23 +0,0 @@
1
- import { FormState, FormOptions, FormApi } from '@tanstack/form-core';
2
- import { NoInfer } from '@tanstack/react-store';
3
- import { ReactNode } from 'react';
4
- import { FieldComponent, UseField } from './useField.js';
5
- import './types.js';
6
-
7
- declare module '@tanstack/form-core' {
8
- interface FormApi<TFormData, ValidatorType> {
9
- Provider: (props: {
10
- children: any;
11
- }) => any;
12
- Field: FieldComponent<TFormData, ValidatorType>;
13
- useField: UseField<TFormData>;
14
- useStore: <TSelected = NoInfer<FormState<TFormData>>>(selector?: (state: NoInfer<FormState<TFormData>>) => TSelected) => TSelected;
15
- Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {
16
- selector?: (state: NoInfer<FormState<TFormData>>) => TSelected;
17
- children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode;
18
- }) => any;
19
- }
20
- }
21
- declare function useForm<TData, FormValidator>(opts?: FormOptions<TData, FormValidator>): FormApi<TData, FormValidator>;
22
-
23
- export { useForm };
@@ -1,38 +0,0 @@
1
- // src/useForm.tsx
2
- import { FormApi, functionalUpdate } from "@tanstack/form-core";
3
- import { useStore } from "@tanstack/react-store";
4
- import React, { useState } from "react";
5
- import { Field, useField } from "./useField.js";
6
- import { formContext } from "./formContext.js";
7
- import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
8
- function useForm(opts) {
9
- const [formApi] = useState(() => {
10
- const api = new FormApi(opts);
11
- api.Provider = function Provider(props) {
12
- useIsomorphicLayoutEffect(api.mount, []);
13
- return /* @__PURE__ */ React.createElement(formContext.Provider, { ...props, value: { formApi: api } });
14
- };
15
- api.Field = Field;
16
- api.useField = useField;
17
- api.useStore = (selector) => {
18
- return useStore(api.store, selector);
19
- };
20
- api.Subscribe = (props) => {
21
- return functionalUpdate(
22
- props.children,
23
- // eslint-disable-next-line react-hooks/rules-of-hooks
24
- useStore(api.store, props.selector)
25
- );
26
- };
27
- return api;
28
- });
29
- formApi.useStore((state) => state.isSubmitting);
30
- useIsomorphicLayoutEffect(() => {
31
- formApi.update(opts);
32
- });
33
- return formApi;
34
- }
35
- export {
36
- useForm
37
- };
38
- //# sourceMappingURL=useForm.js.map
@@ -1 +0,0 @@
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 './useIsomorphicLayoutEffect'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FormApi<TFormData, ValidatorType> {\n Provider: (props: { children: any }) => any\n Field: FieldComponent<TFormData, ValidatorType>\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, FormValidator>(\n opts?: FormOptions<TData, FormValidator>,\n): FormApi<TData, FormValidator> {\n const [formApi] = useState(() => {\n // @ts-ignore\n const api = new FormApi<TData>(opts)\n\n api.Provider = function Provider(props) {\n useIsomorphicLayoutEffect(api.mount, [])\n return <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,SAAS,iCAAiC;AAkBnC,SAAS,QACd,MAC+B;AAC/B,QAAM,CAAC,OAAO,IAAI,SAAS,MAAM;AAE/B,UAAM,MAAM,IAAI,QAAe,IAAI;AAEnC,QAAI,WAAW,SAAS,SAAS,OAAO;AACtC,gCAA0B,IAAI,OAAO,CAAC,CAAC;AACvC,aAAO,oCAAC,YAAY,UAAZ,EAAsB,GAAG,OAAO,OAAO,EAAE,SAAS,IAAI,GAAG;AAAA,IACnE;AACA,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":[]}
@@ -1,35 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
-
20
- // src/useIsomorphicLayoutEffect.ts
21
- var useIsomorphicLayoutEffect_exports = {};
22
- __export(useIsomorphicLayoutEffect_exports, {
23
- useIsomorphicLayoutEffect: () => useIsomorphicLayoutEffect
24
- });
25
- module.exports = __toCommonJS(useIsomorphicLayoutEffect_exports);
26
- var import_react = require("react");
27
- var useIsomorphicLayoutEffect = (
28
- // @ts-ignore
29
- typeof window !== "undefined" ? import_react.useLayoutEffect : import_react.useEffect
30
- );
31
- // Annotate the CommonJS export names for ESM import in node:
32
- 0 && (module.exports = {
33
- useIsomorphicLayoutEffect
34
- });
35
- //# sourceMappingURL=useIsomorphicLayoutEffect.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/useIsomorphicLayoutEffect.ts"],"sourcesContent":["import { useEffect, useLayoutEffect } from 'react'\n\nexport const useIsomorphicLayoutEffect =\n // @ts-ignore\n typeof window !== 'undefined' ? useLayoutEffect : useEffect\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2C;AAEpC,IAAM;AAAA;AAAA,EAEX,OAAO,WAAW,cAAc,+BAAkB;AAAA;","names":[]}
@@ -1,5 +0,0 @@
1
- import { useLayoutEffect } from 'react';
2
-
3
- declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
4
-
5
- export { useIsomorphicLayoutEffect };
@@ -1,5 +0,0 @@
1
- import { useLayoutEffect } from 'react';
2
-
3
- declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
4
-
5
- export { useIsomorphicLayoutEffect };
@@ -1,10 +0,0 @@
1
- // src/useIsomorphicLayoutEffect.ts
2
- import { useEffect, useLayoutEffect } from "react";
3
- var useIsomorphicLayoutEffect = (
4
- // @ts-ignore
5
- typeof window !== "undefined" ? useLayoutEffect : useEffect
6
- );
7
- export {
8
- useIsomorphicLayoutEffect
9
- };
10
- //# sourceMappingURL=useIsomorphicLayoutEffect.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/useIsomorphicLayoutEffect.ts"],"sourcesContent":["import { useEffect, useLayoutEffect } from 'react'\n\nexport const useIsomorphicLayoutEffect =\n // @ts-ignore\n typeof window !== 'undefined' ? useLayoutEffect : useEffect\n"],"mappings":";AAAA,SAAS,WAAW,uBAAuB;AAEpC,IAAM;AAAA;AAAA,EAEX,OAAO,WAAW,cAAc,kBAAkB;AAAA;","names":[]}
@@ -1,42 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
-
20
- // src/createFormFactory.ts
21
- var createFormFactory_exports = {};
22
- __export(createFormFactory_exports, {
23
- createFormFactory: () => createFormFactory
24
- });
25
- module.exports = __toCommonJS(createFormFactory_exports);
26
- var import_useField = require("./useField.cjs");
27
- var import_useForm = require("./useForm.cjs");
28
- function createFormFactory(defaultOpts) {
29
- return {
30
- useForm: (opts) => {
31
- const formOptions = Object.assign({}, defaultOpts, opts);
32
- return (0, import_useForm.useForm)(formOptions);
33
- },
34
- useField: import_useField.useField,
35
- Field: import_useField.Field
36
- };
37
- }
38
- // Annotate the CommonJS export names for ESM import in node:
39
- 0 && (module.exports = {
40
- createFormFactory
41
- });
42
- //# sourceMappingURL=createFormFactory.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/createFormFactory.ts"],"sourcesContent":["import type { FormApi, FormOptions } from '@tanstack/form-core'\n\nimport { type UseField, type FieldComponent, Field, useField } from './useField'\nimport { useForm } from './useForm'\n\nexport type FormFactory<TFormData, FormValidator> = {\n useForm: (\n opts?: FormOptions<TFormData, FormValidator>,\n ) => FormApi<TFormData, FormValidator>\n useField: UseField<TFormData>\n Field: FieldComponent<TFormData, FormValidator>\n}\n\nexport function createFormFactory<TFormData, FormValidator>(\n defaultOpts?: FormOptions<TFormData, FormValidator>,\n): FormFactory<TFormData, FormValidator> {\n return {\n useForm: (opts) => {\n const formOptions = Object.assign({}, defaultOpts, opts)\n return useForm<TFormData, FormValidator>(formOptions)\n },\n useField: useField as any,\n Field: Field as any,\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAAoE;AACpE,qBAAwB;AAUjB,SAAS,kBACd,aACuC;AACvC,SAAO;AAAA,IACL,SAAS,CAAC,SAAS;AACjB,YAAM,cAAc,OAAO,OAAO,CAAC,GAAG,aAAa,IAAI;AACvD,iBAAO,wBAAkC,WAAW;AAAA,IACtD;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF;","names":[]}
@@ -1,12 +0,0 @@
1
- import { FormOptions, FormApi } from '@tanstack/form-core';
2
- import { UseField, FieldComponent } from './useField.cjs';
3
- import './types.cjs';
4
-
5
- type FormFactory<TFormData, FormValidator> = {
6
- useForm: (opts?: FormOptions<TFormData, FormValidator>) => FormApi<TFormData, FormValidator>;
7
- useField: UseField<TFormData>;
8
- Field: FieldComponent<TFormData, FormValidator>;
9
- };
10
- declare function createFormFactory<TFormData, FormValidator>(defaultOpts?: FormOptions<TFormData, FormValidator>): FormFactory<TFormData, FormValidator>;
11
-
12
- export { FormFactory, createFormFactory };