@tanstack/react-form 0.2.0 → 0.3.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/package.json +3 -2
- package/src/tests/useField.test.tsx +111 -4
- package/src/useField.tsx +1 -1
- package/src/useForm.tsx +1 -1
- 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 -80
- 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 -44
- package/build/legacy/useField.js.map +0 -1
- package/build/legacy/useForm.cjs +0 -70
- 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 -35
- package/build/legacy/useForm.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 -80
- 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 -44
- package/build/modern/useField.js.map +0 -1
- package/build/modern/useForm.cjs +0 -70
- 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 -35
- package/build/modern/useForm.js.map +0 -1
- package/src/utils/isBrowser.ts +0 -3
- package/src/utils/useIsomorphicLayoutEffect.ts +0 -6
|
@@ -1,80 +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("./utils/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({ ...opts, form: formApi, name });
|
|
47
|
-
api.Field = Field;
|
|
48
|
-
return api;
|
|
49
|
-
});
|
|
50
|
-
(0, import_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
|
|
51
|
-
fieldApi.update({ ...opts, form: formApi });
|
|
52
|
-
});
|
|
53
|
-
(0, import_react_store.useStore)(
|
|
54
|
-
fieldApi.store,
|
|
55
|
-
opts.mode === "array" ? (state) => {
|
|
56
|
-
return [state.meta, Object.keys(state.value || []).length];
|
|
57
|
-
} : void 0
|
|
58
|
-
);
|
|
59
|
-
(0, import_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => fieldApi.mount(), [fieldApi]);
|
|
60
|
-
return fieldApi;
|
|
61
|
-
}
|
|
62
|
-
function Field({
|
|
63
|
-
children,
|
|
64
|
-
...fieldOptions
|
|
65
|
-
}) {
|
|
66
|
-
const fieldApi = useField(fieldOptions);
|
|
67
|
-
return /* @__PURE__ */ import_react.default.createElement(
|
|
68
|
-
import_formContext.formContext.Provider,
|
|
69
|
-
{
|
|
70
|
-
value: { formApi: fieldApi.form, parentFieldName: fieldApi.name },
|
|
71
|
-
children: (0, import_form_core.functionalUpdate)(children, fieldApi)
|
|
72
|
-
}
|
|
73
|
-
);
|
|
74
|
-
}
|
|
75
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
76
|
-
0 && (module.exports = {
|
|
77
|
-
Field,
|
|
78
|
-
useField
|
|
79
|
-
});
|
|
80
|
-
//# 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 {\n DeepKeys,\n DeepValue,\n FieldOptions,\n Narrow,\n} from '@tanstack/form-core'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useFormContext, formContext } from './formContext'\nimport { useIsomorphicLayoutEffect } from './utils/useIsomorphicLayoutEffect'\nimport type { UseFieldOptions } from './types'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FieldApi<TData, TFormData> {\n Field: FieldComponent<TData, TFormData>\n }\n}\n\nexport type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(\n opts?: { name: Narrow<TField> } & UseFieldOptions<\n DeepValue<TFormData, TField>,\n TFormData\n >,\n) => FieldApi<DeepValue<TFormData, TField>, TFormData>\n\nexport function useField<TData, TFormData>(\n opts: UseFieldOptions<TData, TFormData>,\n): FieldApi<TData, TFormData> {\n // Get the form API either manually or from context\n const { formApi, parentFieldName } = useFormContext()\n\n const [fieldApi] = useState<FieldApi<TData, TFormData>>(() => {\n const name = (\n typeof opts.index === 'number'\n ? [parentFieldName, opts.index, opts.name]\n : [parentFieldName, opts.name]\n )\n .filter((d) => d !== undefined)\n .join('.')\n\n const api = new FieldApi({ ...opts, form: formApi, name: name as any })\n\n api.Field = Field as any\n\n return api\n })\n\n /**\n * fieldApi.update should not have any side effects. Think of it like a `useRef`\n * that we need to keep updated every render with the most up-to-date information.\n */\n useIsomorphicLayoutEffect(() => {\n fieldApi.update({ ...opts, form: formApi } as never)\n })\n\n useStore(\n fieldApi.store as any,\n opts.mode === 'array'\n ? (state: any) => {\n return [state.meta, Object.keys(state.value || []).length]\n }\n : undefined,\n )\n\n // Instantiates field meta and removes it when unrendered\n useIsomorphicLayoutEffect(() => fieldApi.mount(), [fieldApi])\n\n return fieldApi\n}\n\n// export type FieldValue<TFormData, TField> = TFormData extends any[]\n// ? TField extends `[${infer TIndex extends number | 'i'}].${infer TRest}`\n// ? DeepValue<TFormData[TIndex extends 'i' ? number : TIndex], TRest>\n// : TField extends `[${infer TIndex extends number | 'i'}]`\n// ? TFormData[TIndex extends 'i' ? number : TIndex]\n// : never\n// : TField extends `${infer TPrefix}[${infer TIndex extends\n// | number\n// | 'i'}].${infer TRest}`\n// ? DeepValue<\n// DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex],\n// TRest\n// >\n// : TField extends `${infer TPrefix}[${infer TIndex extends number | 'i'}]`\n// ? DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex]\n// : DeepValue<TFormData, TField>\n\nexport type FieldValue<TFormData, TField> = TFormData extends any[]\n ? unknown extends TField\n ? TFormData[number]\n : DeepValue<TFormData[number], TField>\n : DeepValue<TFormData, TField>\n\n// type Test1 = FieldValue<{ foo: { bar: string }[] }, 'foo'>\n// // ^?\n// type Test2 = FieldValue<{ foo: { bar: string }[] }, 'foo[i]'>\n// // ^?\n// type Test3 = FieldValue<{ foo: { bar: string }[] }, 'foo[2].bar'>\n// // ^?\n\nexport type FieldComponent<TParentData, TFormData> = <TField>({\n children,\n ...fieldOptions\n}: {\n children: (\n fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>,\n ) => any\n} & Omit<\n UseFieldOptions<FieldValue<TParentData, TField>, TFormData>,\n 'name' | 'index'\n> &\n (TParentData extends any[]\n ? {\n name?: TField extends undefined ? TField : DeepKeys<TParentData>\n index: number\n }\n : {\n name: TField extends undefined ? TField : DeepKeys<TParentData>\n index?: never\n })) => any\n\nexport function Field<TData, TFormData>({\n children,\n ...fieldOptions\n}: {\n children: (fieldApi: FieldApi<TData, TFormData>) => any\n} & UseFieldOptions<TData, TFormData>) {\n const fieldApi = useField(fieldOptions as any)\n\n return (\n <formContext.Provider\n value={{ formApi: fieldApi.form, parentFieldName: fieldApi.name }}\n children={functionalUpdate(children, fieldApi as any)}\n />\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,yBAAyB;AAOzB,uBAA2C;AAC3C,yBAA4C;AAC5C,uCAA0C;AAiBnC,SAAS,SACd,MAC4B;AAE5B,QAAM,EAAE,SAAS,gBAAgB,QAAI,mCAAe;AAEpD,QAAM,CAAC,QAAQ,QAAI,uBAAqC,MAAM;AAC5D,UAAM,QACJ,OAAO,KAAK,UAAU,WAClB,CAAC,iBAAiB,KAAK,OAAO,KAAK,IAAI,IACvC,CAAC,iBAAiB,KAAK,IAAI,GAE9B,OAAO,CAAC,MAAM,MAAM,MAAS,EAC7B,KAAK,GAAG;AAEX,UAAM,MAAM,IAAI,0BAAS,EAAE,GAAG,MAAM,MAAM,SAAS,KAAkB,CAAC;AAEtE,QAAI,QAAQ;AAEZ,WAAO;AAAA,EACT,CAAC;AAMD,kEAA0B,MAAM;AAC9B,aAAS,OAAO,EAAE,GAAG,MAAM,MAAM,QAAQ,CAAU;AAAA,EACrD,CAAC;AAED;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAe;AACd,aAAO,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,SAAS,CAAC,CAAC,EAAE,MAAM;AAAA,IAC3D,IACA;AAAA,EACN;AAGA,kEAA0B,MAAM,SAAS,MAAM,GAAG,CAAC,QAAQ,CAAC;AAE5D,SAAO;AACT;AAqDO,SAAS,MAAwB;AAAA,EACtC;AAAA,EACA,GAAG;AACL,GAEuC;AACrC,QAAM,WAAW,SAAS,YAAmB;AAE7C,SACE,6BAAAA,QAAA;AAAA,IAAC,+BAAY;AAAA,IAAZ;AAAA,MACC,OAAO,EAAE,SAAS,SAAS,MAAM,iBAAiB,SAAS,KAAK;AAAA,MAChE,cAAU,mCAAiB,UAAU,QAAe;AAAA;AAAA,EACtD;AAEJ;","names":["React"]}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { FieldApi, DeepKeys, Narrow, DeepValue } from '@tanstack/form-core';
|
|
2
|
-
import { UseFieldOptions } from './types.cjs';
|
|
3
|
-
|
|
4
|
-
declare module '@tanstack/form-core' {
|
|
5
|
-
interface FieldApi<TData, TFormData> {
|
|
6
|
-
Field: FieldComponent<TData, TFormData>;
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(opts?: {
|
|
10
|
-
name: Narrow<TField>;
|
|
11
|
-
} & UseFieldOptions<DeepValue<TFormData, TField>, TFormData>) => FieldApi<DeepValue<TFormData, TField>, TFormData>;
|
|
12
|
-
declare function useField<TData, TFormData>(opts: UseFieldOptions<TData, TFormData>): FieldApi<TData, TFormData>;
|
|
13
|
-
type FieldValue<TFormData, TField> = TFormData extends any[] ? unknown extends TField ? TFormData[number] : DeepValue<TFormData[number], TField> : DeepValue<TFormData, TField>;
|
|
14
|
-
type FieldComponent<TParentData, TFormData> = <TField>({ children, ...fieldOptions }: {
|
|
15
|
-
children: (fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>) => any;
|
|
16
|
-
} & Omit<UseFieldOptions<FieldValue<TParentData, TField>, TFormData>, 'name' | 'index'> & (TParentData extends any[] ? {
|
|
17
|
-
name?: TField extends undefined ? TField : DeepKeys<TParentData>;
|
|
18
|
-
index: number;
|
|
19
|
-
} : {
|
|
20
|
-
name: TField extends undefined ? TField : DeepKeys<TParentData>;
|
|
21
|
-
index?: never;
|
|
22
|
-
})) => any;
|
|
23
|
-
declare function Field<TData, TFormData>({ children, ...fieldOptions }: {
|
|
24
|
-
children: (fieldApi: FieldApi<TData, TFormData>) => any;
|
|
25
|
-
} & UseFieldOptions<TData, TFormData>): JSX.Element;
|
|
26
|
-
|
|
27
|
-
export { Field, FieldComponent, FieldValue, UseField, useField };
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { FieldApi, DeepKeys, Narrow, DeepValue } from '@tanstack/form-core';
|
|
2
|
-
import { UseFieldOptions } from './types.js';
|
|
3
|
-
|
|
4
|
-
declare module '@tanstack/form-core' {
|
|
5
|
-
interface FieldApi<TData, TFormData> {
|
|
6
|
-
Field: FieldComponent<TData, TFormData>;
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(opts?: {
|
|
10
|
-
name: Narrow<TField>;
|
|
11
|
-
} & UseFieldOptions<DeepValue<TFormData, TField>, TFormData>) => FieldApi<DeepValue<TFormData, TField>, TFormData>;
|
|
12
|
-
declare function useField<TData, TFormData>(opts: UseFieldOptions<TData, TFormData>): FieldApi<TData, TFormData>;
|
|
13
|
-
type FieldValue<TFormData, TField> = TFormData extends any[] ? unknown extends TField ? TFormData[number] : DeepValue<TFormData[number], TField> : DeepValue<TFormData, TField>;
|
|
14
|
-
type FieldComponent<TParentData, TFormData> = <TField>({ children, ...fieldOptions }: {
|
|
15
|
-
children: (fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>) => any;
|
|
16
|
-
} & Omit<UseFieldOptions<FieldValue<TParentData, TField>, TFormData>, 'name' | 'index'> & (TParentData extends any[] ? {
|
|
17
|
-
name?: TField extends undefined ? TField : DeepKeys<TParentData>;
|
|
18
|
-
index: number;
|
|
19
|
-
} : {
|
|
20
|
-
name: TField extends undefined ? TField : DeepKeys<TParentData>;
|
|
21
|
-
index?: never;
|
|
22
|
-
})) => any;
|
|
23
|
-
declare function Field<TData, TFormData>({ children, ...fieldOptions }: {
|
|
24
|
-
children: (fieldApi: FieldApi<TData, TFormData>) => any;
|
|
25
|
-
} & UseFieldOptions<TData, TFormData>): JSX.Element;
|
|
26
|
-
|
|
27
|
-
export { Field, FieldComponent, FieldValue, UseField, useField };
|
package/build/modern/useField.js
DELETED
|
@@ -1,44 +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 "./utils/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({ ...opts, form: formApi, name });
|
|
12
|
-
api.Field = Field;
|
|
13
|
-
return api;
|
|
14
|
-
});
|
|
15
|
-
useIsomorphicLayoutEffect(() => {
|
|
16
|
-
fieldApi.update({ ...opts, form: formApi });
|
|
17
|
-
});
|
|
18
|
-
useStore(
|
|
19
|
-
fieldApi.store,
|
|
20
|
-
opts.mode === "array" ? (state) => {
|
|
21
|
-
return [state.meta, Object.keys(state.value || []).length];
|
|
22
|
-
} : void 0
|
|
23
|
-
);
|
|
24
|
-
useIsomorphicLayoutEffect(() => fieldApi.mount(), [fieldApi]);
|
|
25
|
-
return fieldApi;
|
|
26
|
-
}
|
|
27
|
-
function Field({
|
|
28
|
-
children,
|
|
29
|
-
...fieldOptions
|
|
30
|
-
}) {
|
|
31
|
-
const fieldApi = useField(fieldOptions);
|
|
32
|
-
return /* @__PURE__ */ React.createElement(
|
|
33
|
-
formContext.Provider,
|
|
34
|
-
{
|
|
35
|
-
value: { formApi: fieldApi.form, parentFieldName: fieldApi.name },
|
|
36
|
-
children: functionalUpdate(children, fieldApi)
|
|
37
|
-
}
|
|
38
|
-
);
|
|
39
|
-
}
|
|
40
|
-
export {
|
|
41
|
-
Field,
|
|
42
|
-
useField
|
|
43
|
-
};
|
|
44
|
-
//# 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 {\n DeepKeys,\n DeepValue,\n FieldOptions,\n Narrow,\n} from '@tanstack/form-core'\nimport { FieldApi, functionalUpdate } from '@tanstack/form-core'\nimport { useFormContext, formContext } from './formContext'\nimport { useIsomorphicLayoutEffect } from './utils/useIsomorphicLayoutEffect'\nimport type { UseFieldOptions } from './types'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FieldApi<TData, TFormData> {\n Field: FieldComponent<TData, TFormData>\n }\n}\n\nexport type UseField<TFormData> = <TField extends DeepKeys<TFormData>>(\n opts?: { name: Narrow<TField> } & UseFieldOptions<\n DeepValue<TFormData, TField>,\n TFormData\n >,\n) => FieldApi<DeepValue<TFormData, TField>, TFormData>\n\nexport function useField<TData, TFormData>(\n opts: UseFieldOptions<TData, TFormData>,\n): FieldApi<TData, TFormData> {\n // Get the form API either manually or from context\n const { formApi, parentFieldName } = useFormContext()\n\n const [fieldApi] = useState<FieldApi<TData, TFormData>>(() => {\n const name = (\n typeof opts.index === 'number'\n ? [parentFieldName, opts.index, opts.name]\n : [parentFieldName, opts.name]\n )\n .filter((d) => d !== undefined)\n .join('.')\n\n const api = new FieldApi({ ...opts, form: formApi, name: name as any })\n\n api.Field = Field as any\n\n return api\n })\n\n /**\n * fieldApi.update should not have any side effects. Think of it like a `useRef`\n * that we need to keep updated every render with the most up-to-date information.\n */\n useIsomorphicLayoutEffect(() => {\n fieldApi.update({ ...opts, form: formApi } as never)\n })\n\n useStore(\n fieldApi.store as any,\n opts.mode === 'array'\n ? (state: any) => {\n return [state.meta, Object.keys(state.value || []).length]\n }\n : undefined,\n )\n\n // Instantiates field meta and removes it when unrendered\n useIsomorphicLayoutEffect(() => fieldApi.mount(), [fieldApi])\n\n return fieldApi\n}\n\n// export type FieldValue<TFormData, TField> = TFormData extends any[]\n// ? TField extends `[${infer TIndex extends number | 'i'}].${infer TRest}`\n// ? DeepValue<TFormData[TIndex extends 'i' ? number : TIndex], TRest>\n// : TField extends `[${infer TIndex extends number | 'i'}]`\n// ? TFormData[TIndex extends 'i' ? number : TIndex]\n// : never\n// : TField extends `${infer TPrefix}[${infer TIndex extends\n// | number\n// | 'i'}].${infer TRest}`\n// ? DeepValue<\n// DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex],\n// TRest\n// >\n// : TField extends `${infer TPrefix}[${infer TIndex extends number | 'i'}]`\n// ? DeepValue<TFormData, TPrefix>[TIndex extends 'i' ? number : TIndex]\n// : DeepValue<TFormData, TField>\n\nexport type FieldValue<TFormData, TField> = TFormData extends any[]\n ? unknown extends TField\n ? TFormData[number]\n : DeepValue<TFormData[number], TField>\n : DeepValue<TFormData, TField>\n\n// type Test1 = FieldValue<{ foo: { bar: string }[] }, 'foo'>\n// // ^?\n// type Test2 = FieldValue<{ foo: { bar: string }[] }, 'foo[i]'>\n// // ^?\n// type Test3 = FieldValue<{ foo: { bar: string }[] }, 'foo[2].bar'>\n// // ^?\n\nexport type FieldComponent<TParentData, TFormData> = <TField>({\n children,\n ...fieldOptions\n}: {\n children: (\n fieldApi: FieldApi<FieldValue<TParentData, TField>, TFormData>,\n ) => any\n} & Omit<\n UseFieldOptions<FieldValue<TParentData, TField>, TFormData>,\n 'name' | 'index'\n> &\n (TParentData extends any[]\n ? {\n name?: TField extends undefined ? TField : DeepKeys<TParentData>\n index: number\n }\n : {\n name: TField extends undefined ? TField : DeepKeys<TParentData>\n index?: never\n })) => any\n\nexport function Field<TData, TFormData>({\n children,\n ...fieldOptions\n}: {\n children: (fieldApi: FieldApi<TData, TFormData>) => any\n} & UseFieldOptions<TData, TFormData>) {\n const fieldApi = useField(fieldOptions as any)\n\n return (\n <formContext.Provider\n value={{ formApi: fieldApi.form, parentFieldName: fieldApi.name }}\n children={functionalUpdate(children, fieldApi as any)}\n />\n )\n}\n"],"mappings":";AAAA,OAAO,SAAS,gBAAgB;AAChC,SAAS,gBAAgB;AAOzB,SAAS,UAAU,wBAAwB;AAC3C,SAAS,gBAAgB,mBAAmB;AAC5C,SAAS,iCAAiC;AAiBnC,SAAS,SACd,MAC4B;AAE5B,QAAM,EAAE,SAAS,gBAAgB,IAAI,eAAe;AAEpD,QAAM,CAAC,QAAQ,IAAI,SAAqC,MAAM;AAC5D,UAAM,QACJ,OAAO,KAAK,UAAU,WAClB,CAAC,iBAAiB,KAAK,OAAO,KAAK,IAAI,IACvC,CAAC,iBAAiB,KAAK,IAAI,GAE9B,OAAO,CAAC,MAAM,MAAM,MAAS,EAC7B,KAAK,GAAG;AAEX,UAAM,MAAM,IAAI,SAAS,EAAE,GAAG,MAAM,MAAM,SAAS,KAAkB,CAAC;AAEtE,QAAI,QAAQ;AAEZ,WAAO;AAAA,EACT,CAAC;AAMD,4BAA0B,MAAM;AAC9B,aAAS,OAAO,EAAE,GAAG,MAAM,MAAM,QAAQ,CAAU;AAAA,EACrD,CAAC;AAED;AAAA,IACE,SAAS;AAAA,IACT,KAAK,SAAS,UACV,CAAC,UAAe;AACd,aAAO,CAAC,MAAM,MAAM,OAAO,KAAK,MAAM,SAAS,CAAC,CAAC,EAAE,MAAM;AAAA,IAC3D,IACA;AAAA,EACN;AAGA,4BAA0B,MAAM,SAAS,MAAM,GAAG,CAAC,QAAQ,CAAC;AAE5D,SAAO;AACT;AAqDO,SAAS,MAAwB;AAAA,EACtC;AAAA,EACA,GAAG;AACL,GAEuC;AACrC,QAAM,WAAW,SAAS,YAAmB;AAE7C,SACE;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACC,OAAO,EAAE,SAAS,SAAS,MAAM,iBAAiB,SAAS,KAAK;AAAA,MAChE,UAAU,iBAAiB,UAAU,QAAe;AAAA;AAAA,EACtD;AAEJ;","names":[]}
|
package/build/modern/useForm.cjs
DELETED
|
@@ -1,70 +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("./utils/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 = (props) => /* @__PURE__ */ import_react.default.createElement(import_formContext.formContext.Provider, { ...props, value: { formApi: api } });
|
|
46
|
-
api.Field = import_useField.Field;
|
|
47
|
-
api.useField = import_useField.useField;
|
|
48
|
-
api.useStore = (selector) => {
|
|
49
|
-
return (0, import_react_store.useStore)(api.store, selector);
|
|
50
|
-
};
|
|
51
|
-
api.Subscribe = (props) => {
|
|
52
|
-
return (0, import_form_core.functionalUpdate)(
|
|
53
|
-
props.children,
|
|
54
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
55
|
-
(0, import_react_store.useStore)(api.store, props.selector)
|
|
56
|
-
);
|
|
57
|
-
};
|
|
58
|
-
return api;
|
|
59
|
-
});
|
|
60
|
-
formApi.useStore((state) => state.isSubmitting);
|
|
61
|
-
(0, import_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
|
|
62
|
-
formApi.update(opts);
|
|
63
|
-
});
|
|
64
|
-
return formApi;
|
|
65
|
-
}
|
|
66
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
67
|
-
0 && (module.exports = {
|
|
68
|
-
useForm
|
|
69
|
-
});
|
|
70
|
-
//# 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 './utils/useIsomorphicLayoutEffect'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FormApi<TFormData> {\n Provider: (props: { children: any }) => any\n Field: FieldComponent<TFormData, TFormData>\n useField: UseField<TFormData>\n useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n ) => TSelected\n Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n }) => any\n }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n const [formApi] = useState(() => {\n // @ts-ignore\n const api = new FormApi<TData>(opts)\n\n // eslint-disable-next-line react/display-name\n api.Provider = (props) => (\n <formContext.Provider {...props} value={{ formApi: api }} />\n )\n api.Field = Field as any\n api.useField = useField as any\n api.useStore = (\n // @ts-ignore\n selector,\n ) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useStore(api.store as any, selector as any) as any\n }\n api.Subscribe = (\n // @ts-ignore\n props,\n ) => {\n return functionalUpdate(\n props.children,\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useStore(api.store as any, props.selector as any),\n ) as any\n }\n\n return api\n })\n\n formApi.useStore((state) => state.isSubmitting)\n\n /**\n * formApi.update should not have any side effects. Think of it like a `useRef`\n * that we need to keep updated every render with the most up-to-date information.\n */\n useIsomorphicLayoutEffect(() => {\n formApi.update(opts)\n })\n\n return formApi as any\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAA0C;AAE1C,yBAAyB;AACzB,mBAAgD;AAChD,sBAAoE;AACpE,yBAA4B;AAC5B,uCAA0C;AAkBnC,SAAS,QAAe,MAA2C;AACxE,QAAM,CAAC,OAAO,QAAI,uBAAS,MAAM;AAE/B,UAAM,MAAM,IAAI,yBAAe,IAAI;AAGnC,QAAI,WAAW,CAAC,UACd,6BAAAA,QAAA,cAAC,+BAAY,UAAZ,EAAsB,GAAG,OAAO,OAAO,EAAE,SAAS,IAAI,GAAG;AAE5D,QAAI,QAAQ;AACZ,QAAI,WAAW;AACf,QAAI,WAAW,CAEb,aACG;AAEH,iBAAO,6BAAS,IAAI,OAAc,QAAe;AAAA,IACnD;AACA,QAAI,YAAY,CAEd,UACG;AACH,iBAAO;AAAA,QACL,MAAM;AAAA;AAAA,YAEN,6BAAS,IAAI,OAAc,MAAM,QAAe;AAAA,MAClD;AAAA,IACF;AAEA,WAAO;AAAA,EACT,CAAC;AAED,UAAQ,SAAS,CAAC,UAAU,MAAM,YAAY;AAM9C,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> {
|
|
9
|
-
Provider: (props: {
|
|
10
|
-
children: any;
|
|
11
|
-
}) => any;
|
|
12
|
-
Field: FieldComponent<TFormData, TFormData>;
|
|
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>(opts?: FormOptions<TData>): FormApi<TData>;
|
|
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> {
|
|
9
|
-
Provider: (props: {
|
|
10
|
-
children: any;
|
|
11
|
-
}) => any;
|
|
12
|
-
Field: FieldComponent<TFormData, TFormData>;
|
|
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>(opts?: FormOptions<TData>): FormApi<TData>;
|
|
22
|
-
|
|
23
|
-
export { useForm };
|
package/build/modern/useForm.js
DELETED
|
@@ -1,35 +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 "./utils/useIsomorphicLayoutEffect.js";
|
|
8
|
-
function useForm(opts) {
|
|
9
|
-
const [formApi] = useState(() => {
|
|
10
|
-
const api = new FormApi(opts);
|
|
11
|
-
api.Provider = (props) => /* @__PURE__ */ React.createElement(formContext.Provider, { ...props, value: { formApi: api } });
|
|
12
|
-
api.Field = Field;
|
|
13
|
-
api.useField = useField;
|
|
14
|
-
api.useStore = (selector) => {
|
|
15
|
-
return useStore(api.store, selector);
|
|
16
|
-
};
|
|
17
|
-
api.Subscribe = (props) => {
|
|
18
|
-
return functionalUpdate(
|
|
19
|
-
props.children,
|
|
20
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
21
|
-
useStore(api.store, props.selector)
|
|
22
|
-
);
|
|
23
|
-
};
|
|
24
|
-
return api;
|
|
25
|
-
});
|
|
26
|
-
formApi.useStore((state) => state.isSubmitting);
|
|
27
|
-
useIsomorphicLayoutEffect(() => {
|
|
28
|
-
formApi.update(opts);
|
|
29
|
-
});
|
|
30
|
-
return formApi;
|
|
31
|
-
}
|
|
32
|
-
export {
|
|
33
|
-
useForm
|
|
34
|
-
};
|
|
35
|
-
//# 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 './utils/useIsomorphicLayoutEffect'\n\ndeclare module '@tanstack/form-core' {\n // eslint-disable-next-line no-shadow\n interface FormApi<TFormData> {\n Provider: (props: { children: any }) => any\n Field: FieldComponent<TFormData, TFormData>\n useField: UseField<TFormData>\n useStore: <TSelected = NoInfer<FormState<TFormData>>>(\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,\n ) => TSelected\n Subscribe: <TSelected = NoInfer<FormState<TFormData>>>(props: {\n selector?: (state: NoInfer<FormState<TFormData>>) => TSelected\n children: ((state: NoInfer<TSelected>) => ReactNode) | ReactNode\n }) => any\n }\n}\n\nexport function useForm<TData>(opts?: FormOptions<TData>): FormApi<TData> {\n const [formApi] = useState(() => {\n // @ts-ignore\n const api = new FormApi<TData>(opts)\n\n // eslint-disable-next-line react/display-name\n api.Provider = (props) => (\n <formContext.Provider {...props} value={{ formApi: api }} />\n )\n api.Field = Field as any\n api.useField = useField as any\n api.useStore = (\n // @ts-ignore\n selector,\n ) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useStore(api.store as any, selector as any) as any\n }\n api.Subscribe = (\n // @ts-ignore\n props,\n ) => {\n return functionalUpdate(\n props.children,\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useStore(api.store as any, props.selector as any),\n ) as any\n }\n\n return api\n })\n\n formApi.useStore((state) => state.isSubmitting)\n\n /**\n * formApi.update should not have any side effects. Think of it like a `useRef`\n * that we need to keep updated every render with the most up-to-date information.\n */\n useIsomorphicLayoutEffect(() => {\n formApi.update(opts)\n })\n\n return formApi as any\n}\n"],"mappings":";AACA,SAAS,SAAS,wBAAwB;AAE1C,SAAS,gBAAgB;AACzB,OAAO,SAAyB,gBAAgB;AAChD,SAA6C,OAAO,gBAAgB;AACpE,SAAS,mBAAmB;AAC5B,SAAS,iCAAiC;AAkBnC,SAAS,QAAe,MAA2C;AACxE,QAAM,CAAC,OAAO,IAAI,SAAS,MAAM;AAE/B,UAAM,MAAM,IAAI,QAAe,IAAI;AAGnC,QAAI,WAAW,CAAC,UACd,oCAAC,YAAY,UAAZ,EAAsB,GAAG,OAAO,OAAO,EAAE,SAAS,IAAI,GAAG;AAE5D,QAAI,QAAQ;AACZ,QAAI,WAAW;AACf,QAAI,WAAW,CAEb,aACG;AAEH,aAAO,SAAS,IAAI,OAAc,QAAe;AAAA,IACnD;AACA,QAAI,YAAY,CAEd,UACG;AACH,aAAO;AAAA,QACL,MAAM;AAAA;AAAA,QAEN,SAAS,IAAI,OAAc,MAAM,QAAe;AAAA,MAClD;AAAA,IACF;AAEA,WAAO;AAAA,EACT,CAAC;AAED,UAAQ,SAAS,CAAC,UAAU,MAAM,YAAY;AAM9C,4BAA0B,MAAM;AAC9B,YAAQ,OAAO,IAAI;AAAA,EACrB,CAAC;AAED,SAAO;AACT;","names":[]}
|
package/src/utils/isBrowser.ts
DELETED