@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.
- package/dist/cjs/createFormFactory.d.ts +11 -0
- package/dist/cjs/formContext.d.ts +10 -0
- package/dist/cjs/index.cjs +181 -0
- package/dist/cjs/index.cjs.map +1 -0
- package/dist/cjs/index.d.cts +8 -0
- package/dist/cjs/index.d.ts +8 -0
- package/dist/cjs/index.js +181 -0
- package/dist/cjs/tests/createFormFactory.test.d.ts +1 -0
- package/dist/cjs/tests/useField.test-d.d.ts +1 -0
- package/dist/cjs/tests/useField.test.d.ts +1 -0
- package/dist/cjs/tests/useForm.test-d.d.ts +1 -0
- package/dist/cjs/tests/useForm.test.d.ts +1 -0
- package/dist/cjs/tests/utils.d.ts +1 -0
- package/dist/cjs/types.d.ts +4 -0
- package/dist/cjs/useField.d.ts +28 -0
- package/dist/cjs/useForm.d.ts +19 -0
- package/dist/cjs/useIsomorphicEffectOnce.d.ts +5 -0
- package/dist/cjs/useIsomorphicLayoutEffect.d.ts +3 -0
- package/dist/cjs/useTransform.d.ts +5 -0
- package/dist/cjs/validateFormData.d.ts +14 -0
- package/dist/mjs/createFormFactory.d.ts +11 -0
- package/dist/mjs/formContext.d.ts +10 -0
- package/dist/mjs/index.d.mts +8 -0
- package/dist/mjs/index.d.ts +8 -0
- package/dist/mjs/index.js +170 -0
- package/dist/mjs/index.mjs +170 -0
- package/dist/mjs/index.mjs.map +1 -0
- package/dist/mjs/tests/createFormFactory.test.d.ts +1 -0
- package/dist/mjs/tests/useField.test-d.d.ts +1 -0
- package/dist/mjs/tests/useField.test.d.ts +1 -0
- package/dist/mjs/tests/useForm.test-d.d.ts +1 -0
- package/dist/mjs/tests/useForm.test.d.ts +1 -0
- package/dist/mjs/tests/utils.d.ts +1 -0
- package/dist/mjs/types.d.ts +4 -0
- package/dist/mjs/useField.d.ts +28 -0
- package/dist/mjs/useForm.d.ts +19 -0
- package/dist/mjs/useIsomorphicEffectOnce.d.ts +5 -0
- package/dist/mjs/useIsomorphicLayoutEffect.d.ts +3 -0
- package/dist/mjs/useTransform.d.ts +5 -0
- package/dist/mjs/validateFormData.d.ts +14 -0
- package/package.json +21 -24
- package/src/createFormFactory.ts +25 -9
- package/src/formContext.ts +5 -5
- package/src/index.ts +7 -1
- package/src/tests/createFormFactory.test.tsx +1 -1
- package/src/tests/useField.test-d.tsx +12 -8
- package/src/tests/useField.test.tsx +45 -33
- package/src/tests/useForm.test-d.tsx +36 -0
- package/src/tests/useForm.test.tsx +59 -42
- package/src/types.ts +13 -4
- package/src/useField.tsx +82 -40
- package/src/useForm.tsx +20 -11
- package/src/useIsomorphicEffectOnce.ts +38 -0
- package/src/useIsomorphicLayoutEffect.ts +1 -1
- package/src/useTransform.ts +16 -0
- package/src/validateFormData.ts +70 -0
- package/build/legacy/createFormFactory.cjs +0 -42
- package/build/legacy/createFormFactory.cjs.map +0 -1
- package/build/legacy/createFormFactory.d.cts +0 -12
- package/build/legacy/createFormFactory.d.ts +0 -12
- package/build/legacy/createFormFactory.js +0 -17
- package/build/legacy/createFormFactory.js.map +0 -1
- package/build/legacy/formContext.cjs +0 -51
- package/build/legacy/formContext.cjs.map +0 -1
- package/build/legacy/formContext.d.cts +0 -13
- package/build/legacy/formContext.d.ts +0 -13
- package/build/legacy/formContext.js +0 -15
- package/build/legacy/formContext.js.map +0 -1
- package/build/legacy/index.cjs +0 -46
- package/build/legacy/index.cjs.map +0 -1
- package/build/legacy/index.d.cts +0 -7
- package/build/legacy/index.d.ts +0 -7
- package/build/legacy/index.js +0 -15
- package/build/legacy/index.js.map +0 -1
- package/build/legacy/types.cjs +0 -19
- package/build/legacy/types.cjs.map +0 -1
- package/build/legacy/types.d.cts +0 -7
- package/build/legacy/types.d.ts +0 -7
- package/build/legacy/types.js +0 -1
- package/build/legacy/types.js.map +0 -1
- package/build/legacy/useField.cjs +0 -88
- package/build/legacy/useField.cjs.map +0 -1
- package/build/legacy/useField.d.cts +0 -27
- package/build/legacy/useField.d.ts +0 -27
- package/build/legacy/useField.js +0 -52
- package/build/legacy/useField.js.map +0 -1
- package/build/legacy/useForm.cjs +0 -73
- package/build/legacy/useForm.cjs.map +0 -1
- package/build/legacy/useForm.d.cts +0 -23
- package/build/legacy/useForm.d.ts +0 -23
- package/build/legacy/useForm.js +0 -38
- package/build/legacy/useForm.js.map +0 -1
- package/build/legacy/useIsomorphicLayoutEffect.cjs +0 -35
- package/build/legacy/useIsomorphicLayoutEffect.cjs.map +0 -1
- package/build/legacy/useIsomorphicLayoutEffect.d.cts +0 -5
- package/build/legacy/useIsomorphicLayoutEffect.d.ts +0 -5
- package/build/legacy/useIsomorphicLayoutEffect.js +0 -10
- package/build/legacy/useIsomorphicLayoutEffect.js.map +0 -1
- package/build/modern/createFormFactory.cjs +0 -42
- package/build/modern/createFormFactory.cjs.map +0 -1
- package/build/modern/createFormFactory.d.cts +0 -12
- package/build/modern/createFormFactory.d.ts +0 -12
- package/build/modern/createFormFactory.js +0 -17
- package/build/modern/createFormFactory.js.map +0 -1
- package/build/modern/formContext.cjs +0 -51
- package/build/modern/formContext.cjs.map +0 -1
- package/build/modern/formContext.d.cts +0 -13
- package/build/modern/formContext.d.ts +0 -13
- package/build/modern/formContext.js +0 -15
- package/build/modern/formContext.js.map +0 -1
- package/build/modern/index.cjs +0 -46
- package/build/modern/index.cjs.map +0 -1
- package/build/modern/index.d.cts +0 -7
- package/build/modern/index.d.ts +0 -7
- package/build/modern/index.js +0 -15
- package/build/modern/index.js.map +0 -1
- package/build/modern/types.cjs +0 -19
- package/build/modern/types.cjs.map +0 -1
- package/build/modern/types.d.cts +0 -7
- package/build/modern/types.d.ts +0 -7
- package/build/modern/types.js +0 -1
- package/build/modern/types.js.map +0 -1
- package/build/modern/useField.cjs +0 -88
- package/build/modern/useField.cjs.map +0 -1
- package/build/modern/useField.d.cts +0 -27
- package/build/modern/useField.d.ts +0 -27
- package/build/modern/useField.js +0 -52
- package/build/modern/useField.js.map +0 -1
- package/build/modern/useForm.cjs +0 -73
- package/build/modern/useForm.cjs.map +0 -1
- package/build/modern/useForm.d.cts +0 -23
- package/build/modern/useForm.d.ts +0 -23
- package/build/modern/useForm.js +0 -38
- package/build/modern/useForm.js.map +0 -1
- package/build/modern/useIsomorphicLayoutEffect.cjs +0 -35
- package/build/modern/useIsomorphicLayoutEffect.cjs.map +0 -1
- package/build/modern/useIsomorphicLayoutEffect.d.cts +0 -5
- package/build/modern/useIsomorphicLayoutEffect.d.ts +0 -5
- package/build/modern/useIsomorphicLayoutEffect.js +0 -10
- package/build/modern/useIsomorphicLayoutEffect.js.map +0 -1
package/build/legacy/index.d.cts
DELETED
|
@@ -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';
|
package/build/legacy/index.d.ts
DELETED
|
@@ -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';
|
package/build/legacy/index.js
DELETED
|
@@ -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":[]}
|
package/build/legacy/types.cjs
DELETED
|
@@ -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":[]}
|
package/build/legacy/types.d.cts
DELETED
|
@@ -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 };
|
package/build/legacy/types.d.ts
DELETED
|
@@ -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 };
|
package/build/legacy/types.js
DELETED
|
@@ -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 };
|
package/build/legacy/useField.js
DELETED
|
@@ -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":[]}
|
package/build/legacy/useForm.cjs
DELETED
|
@@ -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 };
|
package/build/legacy/useForm.js
DELETED
|
@@ -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,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 };
|