@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
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { FormOptions, FormApi } from '@tanstack/form-core';
|
|
2
|
-
import { UseField, FieldComponent } from './useField.js';
|
|
3
|
-
import './types.js';
|
|
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 };
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
// src/createFormFactory.ts
|
|
2
|
-
import { Field, useField } from "./useField.js";
|
|
3
|
-
import { useForm } from "./useForm.js";
|
|
4
|
-
function createFormFactory(defaultOpts) {
|
|
5
|
-
return {
|
|
6
|
-
useForm: (opts) => {
|
|
7
|
-
const formOptions = Object.assign({}, defaultOpts, opts);
|
|
8
|
-
return useForm(formOptions);
|
|
9
|
-
},
|
|
10
|
-
useField,
|
|
11
|
-
Field
|
|
12
|
-
};
|
|
13
|
-
}
|
|
14
|
-
export {
|
|
15
|
-
createFormFactory
|
|
16
|
-
};
|
|
17
|
-
//# sourceMappingURL=createFormFactory.js.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":";AAEA,SAA6C,OAAO,gBAAgB;AACpE,SAAS,eAAe;AAUjB,SAAS,kBACd,aACuC;AACvC,SAAO;AAAA,IACL,SAAS,CAAC,SAAS;AACjB,YAAM,cAAc,OAAO,OAAO,CAAC,GAAG,aAAa,IAAI;AACvD,aAAO,QAAkC,WAAW;AAAA,IACtD;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
|
|
@@ -1,51 +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/formContext.ts
|
|
31
|
-
var formContext_exports = {};
|
|
32
|
-
__export(formContext_exports, {
|
|
33
|
-
formContext: () => formContext,
|
|
34
|
-
useFormContext: () => useFormContext
|
|
35
|
-
});
|
|
36
|
-
module.exports = __toCommonJS(formContext_exports);
|
|
37
|
-
var React = __toESM(require("react"), 1);
|
|
38
|
-
var formContext = React.createContext(null);
|
|
39
|
-
function useFormContext() {
|
|
40
|
-
const formApi = React.useContext(formContext);
|
|
41
|
-
if (!formApi) {
|
|
42
|
-
throw new Error(`You are trying to use the form API outside of a form!`);
|
|
43
|
-
}
|
|
44
|
-
return formApi;
|
|
45
|
-
}
|
|
46
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
47
|
-
0 && (module.exports = {
|
|
48
|
-
formContext,
|
|
49
|
-
useFormContext
|
|
50
|
-
});
|
|
51
|
-
//# sourceMappingURL=formContext.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/formContext.ts"],"sourcesContent":["import type { FormApi } from '@tanstack/form-core'\nimport * as React from 'react'\n\nexport const formContext = React.createContext<{\n formApi: FormApi<any, unknown>\n parentFieldName?: string\n} | null>(null!)\n\nexport function useFormContext() {\n const formApi = React.useContext(formContext)\n\n if (!formApi) {\n throw new Error(`You are trying to use the form API outside of a form!`)\n }\n\n return formApi\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AAEhB,IAAM,cAAoB,oBAGvB,IAAK;AAER,SAAS,iBAAiB;AAC/B,QAAM,UAAgB,iBAAW,WAAW;AAE5C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEA,SAAO;AACT;","names":[]}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { FormApi } from '@tanstack/form-core';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
|
|
4
|
-
declare const formContext: React.Context<{
|
|
5
|
-
formApi: FormApi<any, unknown>;
|
|
6
|
-
parentFieldName?: string | undefined;
|
|
7
|
-
} | null>;
|
|
8
|
-
declare function useFormContext(): {
|
|
9
|
-
formApi: FormApi<any, unknown>;
|
|
10
|
-
parentFieldName?: string | undefined;
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
export { formContext, useFormContext };
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { FormApi } from '@tanstack/form-core';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
|
|
4
|
-
declare const formContext: React.Context<{
|
|
5
|
-
formApi: FormApi<any, unknown>;
|
|
6
|
-
parentFieldName?: string | undefined;
|
|
7
|
-
} | null>;
|
|
8
|
-
declare function useFormContext(): {
|
|
9
|
-
formApi: FormApi<any, unknown>;
|
|
10
|
-
parentFieldName?: string | undefined;
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
export { formContext, useFormContext };
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
// src/formContext.ts
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
var formContext = React.createContext(null);
|
|
4
|
-
function useFormContext() {
|
|
5
|
-
const formApi = React.useContext(formContext);
|
|
6
|
-
if (!formApi) {
|
|
7
|
-
throw new Error(`You are trying to use the form API outside of a form!`);
|
|
8
|
-
}
|
|
9
|
-
return formApi;
|
|
10
|
-
}
|
|
11
|
-
export {
|
|
12
|
-
formContext,
|
|
13
|
-
useFormContext
|
|
14
|
-
};
|
|
15
|
-
//# sourceMappingURL=formContext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/formContext.ts"],"sourcesContent":["import type { FormApi } from '@tanstack/form-core'\nimport * as React from 'react'\n\nexport const formContext = React.createContext<{\n formApi: FormApi<any, unknown>\n parentFieldName?: string\n} | null>(null!)\n\nexport function useFormContext() {\n const formApi = React.useContext(formContext)\n\n if (!formApi) {\n throw new Error(`You are trying to use the form API outside of a form!`)\n }\n\n return formApi\n}\n"],"mappings":";AACA,YAAY,WAAW;AAEhB,IAAM,cAAoB,oBAGvB,IAAK;AAER,SAAS,iBAAiB;AAC/B,QAAM,UAAgB,iBAAW,WAAW;AAE5C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAEA,SAAO;AACT;","names":[]}
|
package/build/modern/index.cjs
DELETED
|
@@ -1,46 +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/index.ts
|
|
21
|
-
var src_exports = {};
|
|
22
|
-
__export(src_exports, {
|
|
23
|
-
Field: () => import_useField.Field,
|
|
24
|
-
FieldApi: () => import_form_core.FieldApi,
|
|
25
|
-
FormApi: () => import_form_core.FormApi,
|
|
26
|
-
createFormFactory: () => import_createFormFactory.createFormFactory,
|
|
27
|
-
functionalUpdate: () => import_form_core.functionalUpdate,
|
|
28
|
-
useField: () => import_useField.useField,
|
|
29
|
-
useForm: () => import_useForm.useForm
|
|
30
|
-
});
|
|
31
|
-
module.exports = __toCommonJS(src_exports);
|
|
32
|
-
var import_form_core = require("@tanstack/form-core");
|
|
33
|
-
var import_useForm = require("./useForm.cjs");
|
|
34
|
-
var import_useField = require("./useField.cjs");
|
|
35
|
-
var import_createFormFactory = require("./createFormFactory.cjs");
|
|
36
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
37
|
-
0 && (module.exports = {
|
|
38
|
-
Field,
|
|
39
|
-
FieldApi,
|
|
40
|
-
FormApi,
|
|
41
|
-
createFormFactory,
|
|
42
|
-
functionalUpdate,
|
|
43
|
-
useField,
|
|
44
|
-
useForm
|
|
45
|
-
});
|
|
46
|
-
//# sourceMappingURL=index.cjs.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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBA,uBAAoD;AAEpD,qBAAwB;AAGxB,sBAAgC;AAGhC,+BAAkC;","names":[]}
|
package/build/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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 };
|