From fd0218a324123ce0e3ab974490353ffbf596fa8b Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Mon, 25 Nov 2024 06:10:34 -0800 Subject: [PATCH 01/38] chore: WIP migration to derived state --- packages/form-core/package.json | 2 +- packages/form-core/src/FieldApi.ts | 94 +++++++++------------------- pnpm-lock.yaml | 98 ++++++++++++++++++++++-------- 3 files changed, 103 insertions(+), 91 deletions(-) diff --git a/packages/form-core/package.json b/packages/form-core/package.json index d898fc7ba1..9dc30ab80c 100644 --- a/packages/form-core/package.json +++ b/packages/form-core/package.json @@ -52,6 +52,6 @@ "src" ], "dependencies": { - "@tanstack/store": "^0.5.5" + "@tanstack/store": "https://pkg.pr.new/@tanstack/store@40" } } diff --git a/packages/form-core/src/FieldApi.ts b/packages/form-core/src/FieldApi.ts index 6ca7a4b653..3848a0b858 100644 --- a/packages/form-core/src/FieldApi.ts +++ b/packages/form-core/src/FieldApi.ts @@ -1,4 +1,4 @@ -import { Store } from '@tanstack/store' +import { Derived, Store } from '@tanstack/store' import { getAsyncValidatorArray, getBy, getSyncValidatorArray } from './utils' import type { FieldInfo, FieldsErrorMapFromValidator, FormApi } from './FormApi' import type { @@ -423,15 +423,13 @@ export class FieldApi< /** * The field state store. */ - store!: Store> + store!: Derived> /** * The current field state. */ - state!: FieldState - /** - * @private - */ - prevState!: FieldState + get state() { + return this.store.state + } timeoutIds: Record | null> /** @@ -455,11 +453,11 @@ export class FieldApi< }) } - this.store = new Store>( - { - value: this.getValue(), - - meta: this._getMeta() ?? { + this.store = new Derived({ + deps: [this.form.store], + fn: () => { + const value = this.form.getFieldValue(this.name) + const meta = this.form.getFieldMeta(this.name) ?? { isValidating: false, isTouched: false, isBlurred: false, @@ -468,26 +466,25 @@ export class FieldApi< errors: [], errorMap: {}, ...opts.defaultMeta, - }, - }, - { - onUpdate: () => { - const state = this.store.state + } - state.meta.errors = Object.values(state.meta.errorMap).filter( - (val: unknown) => val !== undefined, - ) + const metaErrors = Object.values(meta.errorMap).filter( + (val: unknown) => val !== undefined, + ) - state.meta.isPristine = !state.meta.isDirty + const isPristine = !meta.isDirty - this.prevState = state - this.state = state - }, + return { + value, + meta: { + ...meta, + errors: metaErrors, + isPristine, + }, + } as FieldState }, - ) + }) - this.state = this.store.state - this.prevState = this.state this.options = opts as never } @@ -531,20 +528,6 @@ export class FieldApi< mount = () => { const info = this.getInfo() info.instance = this as never - const unsubscribe = this.form.store.subscribe(() => { - this.store.batch(() => { - const nextValue = this.getValue() - const nextMeta = this.getMeta() - - if (nextValue !== this.state.value) { - this.store.setState((prev) => ({ ...prev, value: nextValue })) - } - - if (nextMeta !== this.state.meta) { - this.store.setState((prev) => ({ ...prev, meta: nextMeta })) - } - }) - }) this.update(this.options as never) const { onMount } = this.options.validators || {} @@ -569,7 +552,7 @@ export class FieldApi< } return () => { - unsubscribe() + this.store.cleanup() } } @@ -602,7 +585,7 @@ export class FieldApi< } // Default Meta - if (this._getMeta() === undefined) { + if (this.form.getFieldMeta(this.name) === undefined) { this.setMeta(this.state.meta) } @@ -625,26 +608,7 @@ export class FieldApi< this.validate('change') } - /** - * @private - */ - _getMeta = () => this.form.getFieldMeta(this.name) - - /** - * Gets the current field metadata. - */ - getMeta = () => - this._getMeta() ?? - ({ - isValidating: false, - isTouched: false, - isBlurred: false, - isDirty: false, - isPristine: true, - errors: [], - errorMap: {}, - ...this.options.defaultMeta, - } as FieldMeta) + getMeta = () => this.store.state.meta /** * Sets the field metadata. @@ -772,7 +736,7 @@ export class FieldApi< field.runValidator({ validate: validateObj.validate, value: { - value: field.getValue(), + value: field.store.state.value, validationSource: 'field', fieldApi: field, }, @@ -903,7 +867,7 @@ export class FieldApi< await this.runValidator({ validate: validateObj.validate, value: { - value: field.getValue(), + value: field.store.state.value, fieldApi: field, signal: controller.signal, validationSource: 'field', diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8e025db004..99205158a7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1073,8 +1073,8 @@ importers: packages/form-core: dependencies: '@tanstack/store': - specifier: ^0.5.5 - version: 0.5.5 + specifier: https://pkg.pr.new/@tanstack/store@40 + version: https://pkg.pr.new/@tanstack/store@40 packages/lit-form: dependencies: @@ -4202,6 +4202,10 @@ packages: '@tanstack/store@0.5.5': resolution: {integrity: sha512-EOSrgdDAJExbvRZEQ/Xhh9iZchXpMN+ga1Bnk8Nmygzs8TfiE6hbzThF+Pr2G19uHL6+DTDTHhJ8VQiOd7l4tA==} + '@tanstack/store@https://pkg.pr.new/@tanstack/store@40': + resolution: {tarball: https://pkg.pr.new/@tanstack/store@40} + version: 0.6.0 + '@tanstack/virtual-file-routes@1.64.0': resolution: {integrity: sha512-soW+gE9QTmMaqXM17r7y1p8NiQVIIECjdTaYla8BKL5Flj030m3KuxEQoiG1XgjtA0O7ayznFz2YvPcXIy3qDg==} engines: {node: '>=12'} @@ -10490,7 +10494,7 @@ snapshots: undici: 6.11.1 vite: 5.1.8(@types/node@20.17.5)(less@4.2.0)(sass@1.71.1)(sugarss@4.0.1(postcss@8.4.48))(terser@5.29.1) watchpack: 2.4.0 - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) webpack-dev-middleware: 6.1.2(webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)) webpack-dev-server: 4.15.1(webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)) webpack-merge: 5.10.0 @@ -10521,7 +10525,7 @@ snapshots: dependencies: '@angular-devkit/architect': 0.1703.11(chokidar@3.6.0) rxjs: 7.8.1 - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) webpack-dev-server: 4.15.1(webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)) transitivePeerDependencies: - chokidar @@ -12696,7 +12700,7 @@ snapshots: dependencies: '@angular/compiler-cli': 17.3.12(@angular/compiler@17.3.12(@angular/core@17.3.12(rxjs@7.8.1)(zone.js@0.15.0)))(typescript@5.4.5) typescript: 5.4.5 - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) '@nodelib/fs.scandir@2.1.5': dependencies: @@ -13517,8 +13521,8 @@ snapshots: '@tanstack/start-vite-plugin': 1.79.0 '@vinxi/react': 0.2.5 '@vinxi/react-server-dom': 0.0.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vite@5.4.10(@types/node@20.17.5)(less@4.2.0)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)) - '@vinxi/server-components': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3)) - '@vinxi/server-functions': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3)) + '@vinxi/server-components': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3)) + '@vinxi/server-functions': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3)) import-meta-resolve: 4.1.0 isbot: 5.1.17 jsesc: 3.0.2 @@ -13565,6 +13569,8 @@ snapshots: '@tanstack/store@0.5.5': {} + '@tanstack/store@https://pkg.pr.new/@tanstack/store@40': {} + '@tanstack/virtual-file-routes@1.64.0': {} '@tanstack/vue-store@0.5.6(vue@3.5.12(typescript@5.4.5))': @@ -14062,7 +14068,7 @@ snapshots: transitivePeerDependencies: - uWebSockets.js - '@vinxi/plugin-directives@0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3))': + '@vinxi/plugin-directives@0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3))': dependencies: '@babel/parser': 7.26.2 acorn: 8.14.0 @@ -14084,9 +14090,9 @@ snapshots: '@vinxi/react@0.2.5': {} - '@vinxi/server-components@0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3))': + '@vinxi/server-components@0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3))': dependencies: - '@vinxi/plugin-directives': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3)) + '@vinxi/plugin-directives': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3)) acorn: 8.14.0 acorn-loose: 8.4.0 acorn-typescript: 1.4.13(acorn@8.14.0) @@ -14095,9 +14101,9 @@ snapshots: recast: 0.23.9 vinxi: 0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3) - '@vinxi/server-functions@0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3))': + '@vinxi/server-functions@0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3))': dependencies: - '@vinxi/plugin-directives': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3)) + '@vinxi/plugin-directives': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3)) acorn: 8.14.0 acorn-loose: 8.4.0 acorn-typescript: 1.4.13(acorn@8.14.0) @@ -14648,7 +14654,7 @@ snapshots: '@babel/core': 7.24.0 find-cache-dir: 4.0.0 schema-utils: 4.2.0 - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) babel-plugin-add-module-exports@0.2.1: {} @@ -15117,7 +15123,7 @@ snapshots: normalize-path: 3.0.0 schema-utils: 4.2.0 serialize-javascript: 6.0.2 - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) core-js-compat@3.39.0: dependencies: @@ -15186,7 +15192,7 @@ snapshots: postcss-value-parser: 4.2.0 semver: 7.6.3 optionalDependencies: - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) css-select@5.1.0: dependencies: @@ -17166,7 +17172,7 @@ snapshots: dependencies: klona: 2.0.6 less: 4.2.0 - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) less@4.2.0: dependencies: @@ -17191,7 +17197,7 @@ snapshots: dependencies: webpack-sources: 3.2.3 optionalDependencies: - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) liftoff@5.0.0: dependencies: @@ -17795,7 +17801,7 @@ snapshots: dependencies: schema-utils: 4.2.0 tapable: 2.2.1 - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) minimalistic-assert@1.0.1: {} @@ -18651,7 +18657,7 @@ snapshots: postcss: 8.4.35 semver: 7.6.3 optionalDependencies: - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) transitivePeerDependencies: - typescript @@ -19213,7 +19219,7 @@ snapshots: neo-async: 2.6.2 optionalDependencies: sass: 1.71.1 - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) sass@1.71.1: dependencies: @@ -19525,7 +19531,7 @@ snapshots: dependencies: iconv-lite: 0.6.3 source-map-js: 1.2.1 - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) source-map-support@0.5.21: dependencies: @@ -19748,6 +19754,18 @@ snapshots: mkdirp: 1.0.4 yallist: 4.0.0 + terser-webpack-plugin@5.3.10(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)(webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)): + dependencies: + '@jridgewell/trace-mapping': 0.3.25 + jest-worker: 27.5.1 + schema-utils: 3.3.0 + serialize-javascript: 6.0.2 + terser: 5.36.0 + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) + optionalDependencies: + '@swc/core': 1.7.42(@swc/helpers@0.5.13) + esbuild: 0.20.1 + terser-webpack-plugin@5.3.10(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1)(webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)): dependencies: '@jridgewell/trace-mapping': 0.3.25 @@ -20583,7 +20601,7 @@ snapshots: mime-types: 2.1.35 range-parser: 1.2.1 schema-utils: 4.2.0 - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) webpack-dev-middleware@6.1.2(webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)): dependencies: @@ -20593,7 +20611,7 @@ snapshots: range-parser: 1.2.1 schema-utils: 4.2.0 optionalDependencies: - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) webpack-dev-server@4.15.1(webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)): dependencies: @@ -20628,7 +20646,7 @@ snapshots: webpack-dev-middleware: 5.3.4(webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)) ws: 8.18.0 optionalDependencies: - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) transitivePeerDependencies: - bufferutil - debug @@ -20646,10 +20664,40 @@ snapshots: webpack-subresource-integrity@5.1.0(webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)): dependencies: typed-assert: 1.0.9 - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) webpack-virtual-modules@0.6.2: {} + webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1): + dependencies: + '@types/estree': 1.0.6 + '@webassemblyjs/ast': 1.12.1 + '@webassemblyjs/wasm-edit': 1.12.1 + '@webassemblyjs/wasm-parser': 1.12.1 + acorn: 8.14.0 + acorn-import-attributes: 1.9.5(acorn@8.14.0) + browserslist: 4.24.2 + chrome-trace-event: 1.0.4 + enhanced-resolve: 5.17.1 + es-module-lexer: 1.5.4 + eslint-scope: 5.1.1 + events: 3.3.0 + glob-to-regexp: 0.4.1 + graceful-fs: 4.2.11 + json-parse-even-better-errors: 2.3.1 + loader-runner: 4.3.0 + mime-types: 2.1.35 + neo-async: 2.6.2 + schema-utils: 3.3.0 + tapable: 2.2.1 + terser-webpack-plugin: 5.3.10(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)(webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)) + watchpack: 2.4.2 + webpack-sources: 3.2.3 + transitivePeerDependencies: + - '@swc/core' + - esbuild + - uglify-js + webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1): dependencies: '@types/estree': 1.0.6 From efe7a003579e3c3496315dfa639e36c465dfd603 Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Mon, 25 Nov 2024 06:13:29 -0800 Subject: [PATCH 02/38] chore!: temporarily remove broken tests --- packages/form-core/tests/FormApi.spec.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/form-core/tests/FormApi.spec.ts b/packages/form-core/tests/FormApi.spec.ts index 65c0ae3383..d62d67b14a 100644 --- a/packages/form-core/tests/FormApi.spec.ts +++ b/packages/form-core/tests/FormApi.spec.ts @@ -1377,7 +1377,7 @@ describe('form api', () => { expect(form.state.errors).toStrictEqual([]) }) - it('should validate fields during submit', async () => { + it.skip('should validate fields during submit', async () => { const form = new FormApi({ defaultValues: { firstName: '', @@ -1417,7 +1417,7 @@ describe('form api', () => { ]) }) - it('should validate optional object fields during submit', async () => { + it.skip('should validate optional object fields during submit', async () => { const form = new FormApi({ defaultValues: { person: null, @@ -1456,7 +1456,7 @@ describe('form api', () => { ]) }) - it('should run all types of validation on fields during submit', async () => { + it.skip('should run all types of validation on fields during submit', async () => { const form = new FormApi({ defaultValues: { firstName: '', From ad24e579abea39f27237b8489664b50c6eca3805 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Mon, 25 Nov 2024 14:13:42 +0000 Subject: [PATCH 03/38] ci: apply automated fixes and generate docs --- .../react/reference/functions/field.md | 38 ------ .../react/reference/functions/usefield.md | 40 ------- .../react/reference/functions/useform.md | 32 ----- .../react/reference/functions/usetransform.md | 30 ----- docs/framework/react/reference/index.md | 23 ---- .../reference/interfaces/reactformapi.md | 110 ------------------ .../reference/type-aliases/fieldcomponent.md | 44 ------- .../type-aliases/reactformextendedapi.md | 22 ---- .../react/reference/type-aliases/usefield.md | 40 ------- .../vue/reference/functions/usefield.md | 46 -------- .../vue/reference/functions/useform.md | 28 ----- docs/framework/vue/reference/index.md | 25 ---- .../vue/reference/interfaces/vuefieldapi.md | 24 ---- .../vue/reference/interfaces/vueformapi.md | 88 -------------- .../reference/type-aliases/fieldcomponent.md | 38 ------ .../vue/reference/type-aliases/usefield.md | 48 -------- .../vue/reference/variables/field.md | 14 --- docs/reference/classes/fieldapi.md | 70 +++++------ 18 files changed, 37 insertions(+), 723 deletions(-) delete mode 100644 docs/framework/react/reference/functions/field.md delete mode 100644 docs/framework/react/reference/functions/usefield.md delete mode 100644 docs/framework/react/reference/functions/useform.md delete mode 100644 docs/framework/react/reference/functions/usetransform.md delete mode 100644 docs/framework/react/reference/index.md delete mode 100644 docs/framework/react/reference/interfaces/reactformapi.md delete mode 100644 docs/framework/react/reference/type-aliases/fieldcomponent.md delete mode 100644 docs/framework/react/reference/type-aliases/reactformextendedapi.md delete mode 100644 docs/framework/react/reference/type-aliases/usefield.md delete mode 100644 docs/framework/vue/reference/functions/usefield.md delete mode 100644 docs/framework/vue/reference/functions/useform.md delete mode 100644 docs/framework/vue/reference/index.md delete mode 100644 docs/framework/vue/reference/interfaces/vuefieldapi.md delete mode 100644 docs/framework/vue/reference/interfaces/vueformapi.md delete mode 100644 docs/framework/vue/reference/type-aliases/fieldcomponent.md delete mode 100644 docs/framework/vue/reference/type-aliases/usefield.md delete mode 100644 docs/framework/vue/reference/variables/field.md diff --git a/docs/framework/react/reference/functions/field.md b/docs/framework/react/reference/functions/field.md deleted file mode 100644 index fddb0a9692..0000000000 --- a/docs/framework/react/reference/functions/field.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: Field -title: Field ---- - -# Function: Field() - -```ts -function Field(__namedParameters): ReactNode -``` - -A function component that takes field options and a render function as children and returns a React component. - -The `Field` component uses the `useField` hook internally to manage the field instance. - -## Type Parameters - -• **TParentData** - -• **TName** *extends* `string` \| `number` - -• **TFieldValidator** *extends* `undefined` \| `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\> = `undefined` - -• **TFormValidator** *extends* `undefined` \| `Validator`\<`TParentData`, `unknown`\> = `undefined` - -• **TData** = `DeepValue`\<`TParentData`, `TName`\> - -## Parameters - -• **\_\_namedParameters**: `FieldComponentProps`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> - -## Returns - -`ReactNode` - -## Defined in - -[useField.tsx:164](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L164) diff --git a/docs/framework/react/reference/functions/usefield.md b/docs/framework/react/reference/functions/usefield.md deleted file mode 100644 index 0d341f855e..0000000000 --- a/docs/framework/react/reference/functions/usefield.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -id: useField -title: useField ---- - -# Function: useField() - -```ts -function useField(opts): FieldApi & ReactFieldApi -``` - -A hook for managing a field in a form. - -## Type Parameters - -• **TParentData** - -• **TName** *extends* `string` \| `number` - -• **TFieldValidator** *extends* `undefined` \| `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\> = `undefined` - -• **TFormValidator** *extends* `undefined` \| `Validator`\<`TParentData`, `unknown`\> = `undefined` - -• **TData** = `DeepValue`\<`TParentData`, `TName`\> - -## Parameters - -• **opts**: `UseFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> - -An object with field options. - -## Returns - -`FieldApi`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> & `ReactFieldApi`\<`TParentData`, `TFormValidator`\> - -The `FieldApi` instance for the specified field. - -## Defined in - -[useField.tsx:50](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L50) diff --git a/docs/framework/react/reference/functions/useform.md b/docs/framework/react/reference/functions/useform.md deleted file mode 100644 index 7b719ee018..0000000000 --- a/docs/framework/react/reference/functions/useform.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -id: useForm -title: useForm ---- - -# Function: useForm() - -```ts -function useForm(opts?): ReactFormExtendedApi -``` - -A custom React Hook that returns an extended instance of the `FormApi` class. - -This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields - -## Type Parameters - -• **TFormData** - -• **TFormValidator** *extends* `undefined` \| `Validator`\<`TFormData`, `unknown`\> = `undefined` - -## Parameters - -• **opts?**: `FormOptions`\<`TFormData`, `TFormValidator`\> - -## Returns - -[`ReactFormExtendedApi`](../type-aliases/reactformextendedapi.md)\<`TFormData`, `TFormValidator`\> - -## Defined in - -[useForm.tsx:65](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L65) diff --git a/docs/framework/react/reference/functions/usetransform.md b/docs/framework/react/reference/functions/usetransform.md deleted file mode 100644 index 647b76fac5..0000000000 --- a/docs/framework/react/reference/functions/usetransform.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -id: useTransform -title: useTransform ---- - -# Function: useTransform() - -```ts -function useTransform(fn, deps): FormTransform -``` - -## Type Parameters - -• **TFormData** - -• **TFormValidator** *extends* `undefined` \| `Validator`\<`TFormData`, `unknown`\> = `undefined` - -## Parameters - -• **fn** - -• **deps**: `unknown`[] - -## Returns - -`FormTransform`\<`TFormData`, `TFormValidator`\> - -## Defined in - -[useTransform.ts:3](https://github.com/TanStack/form/blob/main/packages/react-form/src/useTransform.ts#L3) diff --git a/docs/framework/react/reference/index.md b/docs/framework/react/reference/index.md deleted file mode 100644 index d79f85b057..0000000000 --- a/docs/framework/react/reference/index.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -id: "@tanstack/react-form" -title: "@tanstack/react-form" ---- - -# @tanstack/react-form - -## Interfaces - -- [ReactFormApi](interfaces/reactformapi.md) - -## Type Aliases - -- [FieldComponent](type-aliases/fieldcomponent.md) -- [ReactFormExtendedApi](type-aliases/reactformextendedapi.md) -- [UseField](type-aliases/usefield.md) - -## Functions - -- [Field](functions/field.md) -- [useField](functions/usefield.md) -- [useForm](functions/useform.md) -- [useTransform](functions/usetransform.md) diff --git a/docs/framework/react/reference/interfaces/reactformapi.md b/docs/framework/react/reference/interfaces/reactformapi.md deleted file mode 100644 index fd198be67e..0000000000 --- a/docs/framework/react/reference/interfaces/reactformapi.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -id: ReactFormApi -title: ReactFormApi ---- - -# Interface: ReactFormApi\ - -Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm` - -## Type Parameters - -• **TFormData** - -• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined` - -## Properties - -### Field - -```ts -Field: FieldComponent; -``` - -A React component to render form fields. With this, you can render and manage individual form fields. - -#### Defined in - -[useForm.tsx:21](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L21) - -*** - -### Subscribe() - -```ts -Subscribe: (props) => ReactNode; -``` - -A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates. - -#### Type Parameters - -• **TSelected** = `FormState`\<`TFormData`\> - -#### Parameters - -• **props** - -• **props.children**: `ReactNode` \| (`state`) => `ReactNode` - -• **props.selector?** - -TypeScript versions <=5.0.4 have a bug that prevents -the type of the `TSelected` generic from being inferred -from the return type of this method. - -In these versions, `TSelected` will fall back to the default -type (or `unknown` if that's not defined). - -**See** - - - [This discussion on GitHub for the details](https://github.com/TanStack/form/pull/606/files#r1506715714) - - [The bug report in `microsoft/TypeScript`](https://github.com/microsoft/TypeScript/issues/52786) - -#### Returns - -`ReactNode` - -#### Defined in - -[useForm.tsx:35](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L35) - -*** - -### useField - -```ts -useField: UseField; -``` - -A custom React hook that provides functionalities related to individual form fields. It gives you access to field values, errors, and allows you to set or update field values. - -#### Defined in - -[useForm.tsx:25](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L25) - -*** - -### useStore() - -```ts -useStore: (selector?) => TSelected; -``` - -A `useStore` hook that connects to the internal store of the form. It can be used to access the form's current state or any other related state information. You can optionally pass in a selector function to cherry-pick specific parts of the state - -#### Type Parameters - -• **TSelected** = `FormState`\<`TFormData`\> - -#### Parameters - -• **selector?** - -#### Returns - -`TSelected` - -#### Defined in - -[useForm.tsx:29](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L29) diff --git a/docs/framework/react/reference/type-aliases/fieldcomponent.md b/docs/framework/react/reference/type-aliases/fieldcomponent.md deleted file mode 100644 index 079e22883e..0000000000 --- a/docs/framework/react/reference/type-aliases/fieldcomponent.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -id: FieldComponent -title: FieldComponent ---- - -# Type Alias: FieldComponent()\ - -```ts -type FieldComponent: ({ - children, - ...fieldOptions -}) => NodeType; -``` - -A type alias representing a field component for a specific form data type. - -## Type Parameters - -• **TParentData** - -• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` - -## Type Parameters - -• **TName** *extends* `DeepKeys`\<`TParentData`\> - -• **TFieldValidator** *extends* `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\> \| `undefined` = `undefined` - -• **TData** *extends* `DeepValue`\<`TParentData`, `TName`\> = `DeepValue`\<`TParentData`, `TName`\> - -## Parameters - -• **\{ - children, - ...fieldOptions -\}**: `Omit`\<`FieldComponentProps`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>, `"form"`\> - -## Returns - -`NodeType` - -## Defined in - -[useField.tsx:134](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L134) diff --git a/docs/framework/react/reference/type-aliases/reactformextendedapi.md b/docs/framework/react/reference/type-aliases/reactformextendedapi.md deleted file mode 100644 index c0ba2e16bd..0000000000 --- a/docs/framework/react/reference/type-aliases/reactformextendedapi.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -id: ReactFormExtendedApi -title: ReactFormExtendedApi ---- - -# Type Alias: ReactFormExtendedApi\ - -```ts -type ReactFormExtendedApi: FormApi & ReactFormApi; -``` - -An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi` - -## Type Parameters - -• **TFormData** - -• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined` - -## Defined in - -[useForm.tsx:55](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L55) diff --git a/docs/framework/react/reference/type-aliases/usefield.md b/docs/framework/react/reference/type-aliases/usefield.md deleted file mode 100644 index 831214e476..0000000000 --- a/docs/framework/react/reference/type-aliases/usefield.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -id: UseField -title: UseField ---- - -# Type Alias: UseField()\ - -```ts -type UseField: (opts) => FieldApi; -``` - -A type representing a hook for using a field in a form with the given form data type. - -A function that takes an optional object with a `name` property and field options, and returns a `FieldApi` instance for the specified field. - -## Type Parameters - -• **TParentData** - -• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` - -## Type Parameters - -• **TName** *extends* `DeepKeys`\<`TParentData`\> - -• **TFieldValidator** *extends* `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\> \| `undefined` = `undefined` - -• **TData** *extends* `DeepValue`\<`TParentData`, `TName`\> = `DeepValue`\<`TParentData`, `TName`\> - -## Parameters - -• **opts**: `Omit`\<`UseFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>, `"form"`\> - -## Returns - -`FieldApi`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> - -## Defined in - -[useField.tsx:26](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L26) diff --git a/docs/framework/vue/reference/functions/usefield.md b/docs/framework/vue/reference/functions/usefield.md deleted file mode 100644 index 260b4c3135..0000000000 --- a/docs/framework/vue/reference/functions/usefield.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -id: useField -title: useField ---- - -# Function: useField() - -```ts -function useField(opts): object -``` - -## Type Parameters - -• **TParentData** - -• **TName** *extends* `string` \| `number` - -• **TFieldValidator** *extends* `undefined` \| `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\> = `undefined` - -• **TFormValidator** *extends* `undefined` \| `Validator`\<`TParentData`, `unknown`\> = `undefined` - -• **TData** = `DeepValue`\<`TParentData`, `TName`\> - -## Parameters - -• **opts**: `UseFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> - -## Returns - -`object` - -### api - -```ts -readonly api: FieldApi & VueFieldApi = fieldApi; -``` - -### state - -```ts -readonly state: Readonly, FieldState>> = fieldState; -``` - -## Defined in - -[useField.tsx:49](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L49) diff --git a/docs/framework/vue/reference/functions/useform.md b/docs/framework/vue/reference/functions/useform.md deleted file mode 100644 index a0cab4b999..0000000000 --- a/docs/framework/vue/reference/functions/useform.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -id: useForm -title: useForm ---- - -# Function: useForm() - -```ts -function useForm(opts?): FormApi & VueFormApi -``` - -## Type Parameters - -• **TFormData** - -• **TFormValidator** *extends* `undefined` \| `Validator`\<`TFormData`, `unknown`\> = `undefined` - -## Parameters - -• **opts?**: `FormOptions`\<`TFormData`, `TFormValidator`\> - -## Returns - -`FormApi`\<`TFormData`, `TFormValidator`\> & [`VueFormApi`](../interfaces/vueformapi.md)\<`TFormData`, `TFormValidator`\> - -## Defined in - -[useForm.tsx:30](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L30) diff --git a/docs/framework/vue/reference/index.md b/docs/framework/vue/reference/index.md deleted file mode 100644 index bc817c6c4d..0000000000 --- a/docs/framework/vue/reference/index.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -id: "@tanstack/vue-form" -title: "@tanstack/vue-form" ---- - -# @tanstack/vue-form - -## Interfaces - -- [VueFieldApi](interfaces/vuefieldapi.md) -- [VueFormApi](interfaces/vueformapi.md) - -## Type Aliases - -- [FieldComponent](type-aliases/fieldcomponent.md) -- [UseField](type-aliases/usefield.md) - -## Variables - -- [Field](variables/field.md) - -## Functions - -- [useField](functions/usefield.md) -- [useForm](functions/useform.md) diff --git a/docs/framework/vue/reference/interfaces/vuefieldapi.md b/docs/framework/vue/reference/interfaces/vuefieldapi.md deleted file mode 100644 index 375416afa4..0000000000 --- a/docs/framework/vue/reference/interfaces/vuefieldapi.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -id: VueFieldApi -title: VueFieldApi ---- - -# Interface: VueFieldApi\ - -## Type Parameters - -• **TParentData** - -• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` - -## Properties - -### Field - -```ts -Field: FieldComponent; -``` - -#### Defined in - -[useField.tsx:14](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L14) diff --git a/docs/framework/vue/reference/interfaces/vueformapi.md b/docs/framework/vue/reference/interfaces/vueformapi.md deleted file mode 100644 index 19262338f2..0000000000 --- a/docs/framework/vue/reference/interfaces/vueformapi.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -id: VueFormApi -title: VueFormApi ---- - -# Interface: VueFormApi\ - -## Type Parameters - -• **TFormData** - -• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined` - -## Properties - -### Field - -```ts -Field: FieldComponent; -``` - -#### Defined in - -[useForm.tsx:14](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L14) - -*** - -### Subscribe() - -```ts -Subscribe: (props, context) => any; -``` - -#### Type Parameters - -• **TSelected** = `FormState`\<`TFormData`\> - -#### Parameters - -• **props** - -• **props.selector?** - -• **context**: `SetupContext`\<`EmitsOptions`, `SlotsType`\<`object`\>\> - -#### Returns - -`any` - -#### Defined in - -[useForm.tsx:19](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L19) - -*** - -### useField - -```ts -useField: UseField; -``` - -#### Defined in - -[useForm.tsx:15](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L15) - -*** - -### useStore() - -```ts -useStore: (selector?) => Readonly>; -``` - -#### Type Parameters - -• **TSelected** = `FormState`\<`TFormData`\> - -#### Parameters - -• **selector?** - -#### Returns - -`Readonly`\<`Ref`\<`TSelected`, `TSelected`\>\> - -#### Defined in - -[useForm.tsx:16](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L16) diff --git a/docs/framework/vue/reference/type-aliases/fieldcomponent.md b/docs/framework/vue/reference/type-aliases/fieldcomponent.md deleted file mode 100644 index 92d2406f59..0000000000 --- a/docs/framework/vue/reference/type-aliases/fieldcomponent.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: FieldComponent -title: FieldComponent ---- - -# Type Alias: FieldComponent()\ - -```ts -type FieldComponent: (fieldOptions, context) => any; -``` - -## Type Parameters - -• **TParentData** - -• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` - -## Type Parameters - -• **TName** *extends* `DeepKeys`\<`TParentData`\> - -• **TFieldValidator** *extends* `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\> \| `undefined` = `undefined` - -• **TData** *extends* `DeepValue`\<`TParentData`, `TName`\> = `DeepValue`\<`TParentData`, `TName`\> - -## Parameters - -• **fieldOptions**: `Omit`\<`FieldComponentProps`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>, `"form"`\> - -• **context**: `SetupContext`\<`object`, `SlotsType`\<`object`\>\> - -## Returns - -`any` - -## Defined in - -[useField.tsx:117](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L117) diff --git a/docs/framework/vue/reference/type-aliases/usefield.md b/docs/framework/vue/reference/type-aliases/usefield.md deleted file mode 100644 index 8a645765f7..0000000000 --- a/docs/framework/vue/reference/type-aliases/usefield.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -id: UseField -title: UseField ---- - -# Type Alias: UseField()\ - -```ts -type UseField: (opts) => object; -``` - -## Type Parameters - -• **TParentData** - -• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` - -## Type Parameters - -• **TName** *extends* `DeepKeys`\<`TParentData`\> - -• **TFieldValidator** *extends* `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\> \| `undefined` = `undefined` - -• **TData** *extends* `DeepValue`\<`TParentData`, `TName`\> = `DeepValue`\<`TParentData`, `TName`\> - -## Parameters - -• **opts**: `Omit`\<`UseFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>, `"form"`\> - -## Returns - -`object` - -### api - -```ts -api: FieldApi & VueFieldApi; -``` - -### state - -```ts -state: Readonly["state"]>>; -``` - -## Defined in - -[useField.tsx:17](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L17) diff --git a/docs/framework/vue/reference/variables/field.md b/docs/framework/vue/reference/variables/field.md deleted file mode 100644 index 55c0cca275..0000000000 --- a/docs/framework/vue/reference/variables/field.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -id: Field -title: Field ---- - -# Variable: Field - -```ts -const Field: Function; -``` - -## Defined in - -[useField.tsx:162](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L162) diff --git a/docs/reference/classes/fieldapi.md b/docs/reference/classes/fieldapi.md index b462cda05c..fe2e31c505 100644 --- a/docs/reference/classes/fieldapi.md +++ b/docs/reference/classes/fieldapi.md @@ -45,7 +45,7 @@ Initializes a new `FieldApi` instance. #### Defined in -[packages/form-core/src/FieldApi.ts:440](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L440) +[packages/form-core/src/FieldApi.ts:438](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L438) ## Properties @@ -91,43 +91,49 @@ The field options. *** -### state +### store ```ts -state: FieldState; +store: Derived>; ``` -The current field state. +The field state store. #### Defined in -[packages/form-core/src/FieldApi.ts:430](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L430) +[packages/form-core/src/FieldApi.ts:426](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L426) *** -### store +### timeoutIds ```ts -store: Store, (cb) => FieldState>; +timeoutIds: Record; ``` -The field state store. - #### Defined in -[packages/form-core/src/FieldApi.ts:426](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L426) +[packages/form-core/src/FieldApi.ts:433](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L433) -*** +## Accessors -### timeoutIds +### state + +#### Get Signature ```ts -timeoutIds: Record; +get state(): FieldState ``` +The current field state. + +##### Returns + +[`FieldState`](../type-aliases/fieldstate.md)\<`TData`\> + #### Defined in -[packages/form-core/src/FieldApi.ts:435](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L435) +[packages/form-core/src/FieldApi.ts:430](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L430) ## Methods @@ -145,7 +151,7 @@ Gets the field information object. #### Defined in -[packages/form-core/src/FieldApi.ts:658](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L658) +[packages/form-core/src/FieldApi.ts:622](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L622) *** @@ -155,15 +161,13 @@ Gets the field information object. getMeta(): FieldMeta ``` -Gets the current field metadata. - #### Returns [`FieldMeta`](../type-aliases/fieldmeta.md) #### Defined in -[packages/form-core/src/FieldApi.ts:636](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L636) +[packages/form-core/src/FieldApi.ts:611](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L611) *** @@ -185,7 +189,7 @@ Use `field.state.value` instead. #### Defined in -[packages/form-core/src/FieldApi.ts:616](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L616) +[packages/form-core/src/FieldApi.ts:599](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L599) *** @@ -203,7 +207,7 @@ Handles the blur event. #### Defined in -[packages/form-core/src/FieldApi.ts:1010](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1010) +[packages/form-core/src/FieldApi.ts:974](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L974) *** @@ -225,7 +229,7 @@ Handles the change event. #### Defined in -[packages/form-core/src/FieldApi.ts:1003](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1003) +[packages/form-core/src/FieldApi.ts:967](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L967) *** @@ -254,7 +258,7 @@ Inserts a value at the specified index, shifting the subsequent values to the ri #### Defined in -[packages/form-core/src/FieldApi.ts:671](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L671) +[packages/form-core/src/FieldApi.ts:635](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L635) *** @@ -276,7 +280,7 @@ Mounts the field instance to the form. #### Defined in -[packages/form-core/src/FieldApi.ts:531](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L531) +[packages/form-core/src/FieldApi.ts:528](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L528) *** @@ -305,7 +309,7 @@ Moves the value at the first specified index to the second specified index. #### Defined in -[packages/form-core/src/FieldApi.ts:701](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L701) +[packages/form-core/src/FieldApi.ts:665](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L665) *** @@ -329,7 +333,7 @@ Pushes a new value to the field. #### Defined in -[packages/form-core/src/FieldApi.ts:663](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L663) +[packages/form-core/src/FieldApi.ts:627](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L627) *** @@ -353,7 +357,7 @@ Removes a value at the specified index. #### Defined in -[packages/form-core/src/FieldApi.ts:689](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L689) +[packages/form-core/src/FieldApi.ts:653](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L653) *** @@ -382,7 +386,7 @@ Replaces a value at the specified index. #### Defined in -[packages/form-core/src/FieldApi.ts:680](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L680) +[packages/form-core/src/FieldApi.ts:644](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L644) *** @@ -404,7 +408,7 @@ Updates the field's errorMap #### Defined in -[packages/form-core/src/FieldApi.ts:1025](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1025) +[packages/form-core/src/FieldApi.ts:989](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L989) *** @@ -426,7 +430,7 @@ Sets the field metadata. #### Defined in -[packages/form-core/src/FieldApi.ts:652](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L652) +[packages/form-core/src/FieldApi.ts:616](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L616) *** @@ -450,7 +454,7 @@ Sets the field value and run the `change` validator. #### Defined in -[packages/form-core/src/FieldApi.ts:623](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L623) +[packages/form-core/src/FieldApi.ts:606](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L606) *** @@ -479,7 +483,7 @@ Swaps the values at the specified indices. #### Defined in -[packages/form-core/src/FieldApi.ts:695](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L695) +[packages/form-core/src/FieldApi.ts:659](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L659) *** @@ -501,7 +505,7 @@ Updates the field instance with new options. #### Defined in -[packages/form-core/src/FieldApi.ts:579](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L579) +[packages/form-core/src/FieldApi.ts:562](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L562) *** @@ -523,4 +527,4 @@ Validates the field value. #### Defined in -[packages/form-core/src/FieldApi.ts:975](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L975) +[packages/form-core/src/FieldApi.ts:939](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L939) From 9dbd2c08f70230f31690400ac7a080a68ac37d5e Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Mon, 25 Nov 2024 06:50:42 -0800 Subject: [PATCH 04/38] chore: refactor derived state in FormApi to use Derived class --- packages/form-core/src/FieldApi.ts | 2 +- packages/form-core/src/FormApi.ts | 291 +++++++++++++---------------- 2 files changed, 132 insertions(+), 161 deletions(-) diff --git a/packages/form-core/src/FieldApi.ts b/packages/form-core/src/FieldApi.ts index 3848a0b858..8a98970aca 100644 --- a/packages/form-core/src/FieldApi.ts +++ b/packages/form-core/src/FieldApi.ts @@ -717,7 +717,7 @@ export class FieldApi< // Needs type cast as eslint errantly believes this is always falsy let hasErrored = false as boolean - this.form.store.batch(() => { + this.form.baseStore.batch(() => { const validateFieldFn = ( field: FieldApi, validateObj: SyncValidator, diff --git a/packages/form-core/src/FormApi.ts b/packages/form-core/src/FormApi.ts index 353139d9f9..3561596d8b 100644 --- a/packages/form-core/src/FormApi.ts +++ b/packages/form-core/src/FormApi.ts @@ -1,4 +1,4 @@ -import { Store } from '@tanstack/store' +import { Derived, Store } from '@tanstack/store' import { deleteBy, functionalUpdate, @@ -216,23 +216,11 @@ export type FieldInfo< /** * An object representing the current state of the form. */ -export type FormState = { +export type BaseFormState = { /** * The current values of the form fields. */ values: TFormData - /** - * A boolean indicating if the form is currently validating. - */ - isFormValidating: boolean - /** - * A boolean indicating if the form is valid. - */ - isFormValid: boolean - /** - * The error array for the form itself. - */ - errors: ValidationError[] /** * The error map for the form itself. */ @@ -245,14 +233,6 @@ export type FormState = { * A record of field metadata for each field in the form. */ fieldMeta: Record, FieldMeta> - /** - * A boolean indicating if any of the form fields are currently validating. - */ - isFieldsValidating: boolean - /** - * A boolean indicating if all the form fields are valid. - */ - isFieldsValid: boolean /** * A boolean indicating if the form is currently in the process of being submitted after `handleSubmit` is called. * @@ -266,6 +246,41 @@ export type FormState = { * */ isSubmitting: boolean + /** + * A boolean indicating if the form has been submitted. + */ + isSubmitted: boolean + /** + * A boolean indicating if the form or any of its fields are currently validating. + */ + isValidating: boolean + /** + * A counter for tracking the number of submission attempts. + */ + submissionAttempts: number +} + +export type DerivedFormState = { + /** + * A boolean indicating if the form is currently validating. + */ + isFormValidating: boolean + /** + * A boolean indicating if the form is valid. + */ + isFormValid: boolean + /** + * The error array for the form itself. + */ + errors: ValidationError[] + /** + * A boolean indicating if any of the form fields are currently validating. + */ + isFieldsValidating: boolean + /** + * A boolean indicating if all the form fields are valid. + */ + isFieldsValid: boolean /** * A boolean indicating if any of the form fields have been touched. */ @@ -282,14 +297,6 @@ export type FormState = { * A boolean indicating if none of the form's fields' values have been modified by the user. `True` if the user have not modified any of the fields. Opposite of `isDirty`. */ isPristine: boolean - /** - * A boolean indicating if the form has been submitted. - */ - isSubmitted: boolean - /** - * A boolean indicating if the form or any of its fields are currently validating. - */ - isValidating: boolean /** * A boolean indicating if the form and all its fields are valid. */ @@ -298,32 +305,19 @@ export type FormState = { * A boolean indicating if the form can be submitted based on its current state. */ canSubmit: boolean - /** - * A counter for tracking the number of submission attempts. - */ - submissionAttempts: number } +export type FormState = BaseFormState & DerivedFormState + function getDefaultFormState( defaultState: Partial>, -): FormState { +): BaseFormState { return { values: defaultState.values ?? ({} as never), - errors: defaultState.errors ?? [], errorMap: defaultState.errorMap ?? {}, fieldMeta: defaultState.fieldMeta ?? ({} as never), - canSubmit: defaultState.canSubmit ?? true, - isFieldsValid: defaultState.isFieldsValid ?? false, - isFieldsValidating: defaultState.isFieldsValidating ?? false, - isFormValid: defaultState.isFormValid ?? false, - isFormValidating: defaultState.isFormValidating ?? false, isSubmitted: defaultState.isSubmitted ?? false, isSubmitting: defaultState.isSubmitting ?? false, - isTouched: defaultState.isTouched ?? false, - isBlurred: defaultState.isBlurred ?? false, - isPristine: defaultState.isPristine ?? true, - isDirty: defaultState.isDirty ?? false, - isValid: defaultState.isValid ?? false, isValidating: defaultState.isValidating ?? false, submissionAttempts: defaultState.submissionAttempts ?? 0, validationMetaMap: defaultState.validationMetaMap ?? { @@ -357,24 +351,18 @@ export class FormApi< * The options for the form. */ options: FormOptions = {} - /** - * A [TanStack Store instance](https://tanstack.com/store/latest/docs/reference/Store) that keeps track of the form's state. - */ - store!: Store> - /** - * The current state of the form. - * - * **Note:** - * Do not use `state` directly, as it is not reactive. - * Please use form.useStore() utility to subscribe to state - */ - state!: FormState + baseStore!: Store> + store!: Derived> /** * A record of field information for each field in the form. */ fieldInfo: Record, FieldInfo> = {} as any + get state() { + return this.store.state + } + /** * @private */ @@ -384,103 +372,86 @@ export class FormApi< * Constructs a new `FormApi` instance with the given form options. */ constructor(opts?: FormOptions) { - this.store = new Store>( + this.baseStore = new Store( getDefaultFormState({ ...(opts?.defaultState as any), values: opts?.defaultValues ?? opts?.defaultState?.values, isFormValid: true, }), - { - onUpdate: () => { - let { state } = this.store - // Computed state - const fieldMetaValues = Object.values(state.fieldMeta) as ( - | FieldMeta - | undefined - )[] + ) - const isFieldsValidating = fieldMetaValues.some( - (field) => field?.isValidating, - ) + this.store = new Derived>({ + deps: [this.baseStore], + fn: () => { + const { state } = this.baseStore + // Computed state + const fieldMetaValues = Object.values(state.fieldMeta) as ( + | FieldMeta + | undefined + )[] + + const isFieldsValidating = fieldMetaValues.some( + (field) => field?.isValidating, + ) - const isFieldsValid = !fieldMetaValues.some( - (field) => - field?.errorMap && - isNonEmptyArray(Object.values(field.errorMap).filter(Boolean)), - ) + const isFieldsValid = !fieldMetaValues.some( + (field) => + field?.errorMap && + isNonEmptyArray(Object.values(field.errorMap).filter(Boolean)), + ) - const isTouched = fieldMetaValues.some((field) => field?.isTouched) - const isBlurred = fieldMetaValues.some((field) => field?.isBlurred) + const isTouched = fieldMetaValues.some((field) => field?.isTouched) + const isBlurred = fieldMetaValues.some((field) => field?.isBlurred) - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - if (isTouched && state?.errorMap?.onMount) { - state.errorMap.onMount = undefined - } + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + if (isTouched && state?.errorMap?.onMount) { + state.errorMap.onMount = undefined + } - const isDirty = fieldMetaValues.some((field) => field?.isDirty) - const isPristine = !isDirty + const isDirty = fieldMetaValues.some((field) => field?.isDirty) + const isPristine = !isDirty - const hasOnMountError = Boolean( + const hasOnMountError = Boolean( + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + state.errorMap?.onMount || // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - state.errorMap?.onMount || - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - fieldMetaValues.some((f) => f?.errorMap?.onMount), - ) + fieldMetaValues.some((f) => f?.errorMap?.onMount), + ) - const isValidating = isFieldsValidating || state.isFormValidating - state.errors = Object.values(state.errorMap).reduce((prev, curr) => { - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - if (curr === undefined) return prev - if (typeof curr === 'string') { - prev.push(curr) - return prev - } else if (curr && isFormValidationError(curr)) { - prev.push(curr.form) - return prev - } + const isValidating = !!isFieldsValidating + const errors = Object.values(state.errorMap).reduce((prev, curr) => { + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + if (curr === undefined) return prev + if (typeof curr === 'string') { + prev.push(curr) + return prev + } else if (curr && isFormValidationError(curr)) { + prev.push(curr.form) return prev - }, [] as ValidationError[]) - const isFormValid = state.errors.length === 0 - const isValid = isFieldsValid && isFormValid - const canSubmit = - (state.submissionAttempts === 0 && - !isTouched && - !hasOnMountError) || - (!isValidating && !state.isSubmitting && isValid) - - state = { - ...state, - isFieldsValidating, - isFieldsValid, - isFormValid, - isValid, - canSubmit, - isTouched, - isBlurred, - isPristine, - isDirty, } + return prev + }, [] as ValidationError[]) + const isFormValid = errors.length === 0 + const isValid = isFieldsValid && isFormValid + const canSubmit = + (state.submissionAttempts === 0 && !isTouched && !hasOnMountError) || + (!isValidating && !state.isSubmitting && isValid) - this.state = state - this.store.state = this.state - - // Only run transform if state has shallowly changed - IE how React.useEffect works - const transformArray = this.options.transform?.deps ?? [] - const shouldTransform = - transformArray.length !== this.prevTransformArray.length || - transformArray.some((val, i) => val !== this.prevTransformArray[i]) - - if (shouldTransform) { - // This mutates the state - this.options.transform?.fn(this) - this.store.state = this.state - this.prevTransformArray = transformArray - } - }, + return { + ...state, + errors, + isFieldsValidating, + isFieldsValid, + isFormValid, + isValid, + canSubmit, + isTouched, + isBlurred, + isPristine, + isDirty, + } as FormState }, - ) - - this.state = this.store.state + }) this.update(opts || {}) } @@ -523,7 +494,7 @@ export class FormApi< type: 'validate', }) if (error) { - this.store.setState((prev) => ({ + this.baseStore.setState((prev) => ({ ...prev, errorMap: { ...prev.errorMap, onMount: error }, })) @@ -541,7 +512,7 @@ export class FormApi< // Options need to be updated first so that when the store is updated, the state is correct for the derived state this.options = options - this.store.batch(() => { + this.baseStore.batch(() => { const shouldUpdateValues = options.defaultValues && options.defaultValues !== oldOptions.defaultValues && @@ -551,7 +522,7 @@ export class FormApi< options.defaultState !== oldOptions.defaultState && !this.state.isTouched - this.store.setState(() => + this.baseStore.setState(() => getDefaultFormState( Object.assign( {}, @@ -588,7 +559,7 @@ export class FormApi< } } - this.store.setState(() => + this.baseStore.setState(() => getDefaultFormState({ ...(this.options.defaultState as any), values: @@ -605,7 +576,7 @@ export class FormApi< */ validateAllFields = async (cause: ValidationCause) => { const fieldValidationPromises: Promise[] = [] as any - this.store.batch(() => { + this.baseStore.batch(() => { void ( Object.values(this.fieldInfo) as FieldInfo[] ).forEach((field) => { @@ -661,7 +632,7 @@ export class FormApi< // Validate the fields const fieldValidationPromises: Promise[] = [] as any - this.store.batch(() => { + this.baseStore.batch(() => { fieldsToValidate.forEach((nestedField) => { fieldValidationPromises.push( Promise.resolve().then(() => this.validateField(nestedField, cause)), @@ -714,7 +685,7 @@ export class FormApi< const fieldsErrorMap: FieldsErrorMapFromValidator = {} - this.store.batch(() => { + this.baseStore.batch(() => { for (const validateObj of validates) { if (!validateObj.validate) continue @@ -756,7 +727,7 @@ export class FormApi< } if (this.state.errorMap[errorMapKey] !== formError) { - this.store.setState((prev) => ({ + this.baseStore.setState((prev) => ({ ...prev, errorMap: { ...prev.errorMap, @@ -781,7 +752,7 @@ export class FormApi< cause !== 'submit' && !hasErrored ) { - this.store.setState((prev) => ({ + this.baseStore.setState((prev) => ({ ...prev, errorMap: { ...prev.errorMap, @@ -802,7 +773,7 @@ export class FormApi< const validates = getAsyncValidatorArray(cause, this.options) if (!this.state.isFormValidating) { - this.store.setState((prev) => ({ ...prev, isFormValidating: true })) + this.baseStore.setState((prev) => ({ ...prev, isFormValidating: true })) } /** @@ -882,7 +853,7 @@ export class FormApi< } } } - this.store.setState((prev) => ({ + this.baseStore.setState((prev) => ({ ...prev, errorMap: { ...prev.errorMap, @@ -919,7 +890,7 @@ export class FormApi< } } - this.store.setState((prev) => ({ + this.baseStore.setState((prev) => ({ ...prev, isFormValidating: false, })) @@ -950,7 +921,7 @@ export class FormApi< * Handles the form submission, performs validation, and calls the appropriate onSubmit or onInvalidSubmit callbacks. */ handleSubmit = async () => { - this.store.setState((old) => ({ + this.baseStore.setState((old) => ({ ...old, // Submission attempts mark the form as not submitted isSubmitted: false, @@ -961,10 +932,10 @@ export class FormApi< // Don't let invalid forms submit if (!this.state.canSubmit) return - this.store.setState((d) => ({ ...d, isSubmitting: true })) + this.baseStore.setState((d) => ({ ...d, isSubmitting: true })) const done = () => { - this.store.setState((prev) => ({ ...prev, isSubmitting: false })) + this.baseStore.setState((prev) => ({ ...prev, isSubmitting: false })) } // Validate form and all fields @@ -984,8 +955,8 @@ export class FormApi< // Run the submit code await this.options.onSubmit?.({ value: this.state.values, formApi: this }) - this.store.batch(() => { - this.store.setState((prev) => ({ ...prev, isSubmitted: true })) + this.baseStore.batch(() => { + this.baseStore.setState((prev) => ({ ...prev, isSubmitted: true })) done() }) } catch (err) { @@ -1036,7 +1007,7 @@ export class FormApi< field: TField, updater: Updater, ) => { - this.store.setState((prev) => { + this.baseStore.setState((prev) => { return { ...prev, fieldMeta: { @@ -1078,7 +1049,7 @@ export class FormApi< ) => { const dontUpdateMeta = opts?.dontUpdateMeta ?? false - this.store.batch(() => { + this.baseStore.batch(() => { if (!dontUpdateMeta) { this.setFieldMeta(field, (prev) => ({ ...prev, @@ -1093,7 +1064,7 @@ export class FormApi< })) } - this.store.setState((prev) => { + this.baseStore.setState((prev) => { return { ...prev, values: setBy(prev.values, field, updater), @@ -1103,7 +1074,7 @@ export class FormApi< } deleteField = >(field: TField) => { - this.store.setState((prev) => { + this.baseStore.setState((prev) => { const newState = { ...prev } newState.values = deleteBy(newState.values, field) delete newState.fieldMeta[field] @@ -1277,7 +1248,7 @@ export class FormApi< * Updates the form's errorMap */ setErrorMap(errorMap: ValidationErrorMap) { - this.store.setState((prev) => ({ + this.baseStore.setState((prev) => ({ ...prev, errorMap: { ...prev.errorMap, From b3fc11c67d49eb619cdaa739f7507bbff7dd0bd0 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Mon, 25 Nov 2024 14:53:48 +0000 Subject: [PATCH 05/38] ci: apply automated fixes and generate docs --- .../reference/classes/tanstackfield.md | 277 ------------------ .../angular/reference/functions/injectform.md | 28 -- .../reference/functions/injectstore.md | 32 -- docs/framework/angular/reference/index.md | 15 - .../solid/reference/functions/createfield.md | 38 --- .../solid/reference/functions/createform.md | 28 -- .../solid/reference/functions/field.md | 34 --- docs/framework/solid/reference/index.md | 21 -- .../reference/interfaces/solidformapi.md | 92 ------ .../reference/type-aliases/createfield.md | 40 --- .../reference/type-aliases/fieldcomponent.md | 42 --- docs/reference/classes/formapi.md | 86 +++--- docs/reference/index.md | 2 + docs/reference/type-aliases/baseformstate.md | 94 ++++++ .../type-aliases/derivedformstate.md | 104 +++++++ docs/reference/type-aliases/formstate.md | 168 +---------- 16 files changed, 250 insertions(+), 851 deletions(-) delete mode 100644 docs/framework/angular/reference/classes/tanstackfield.md delete mode 100644 docs/framework/angular/reference/functions/injectform.md delete mode 100644 docs/framework/angular/reference/functions/injectstore.md delete mode 100644 docs/framework/angular/reference/index.md delete mode 100644 docs/framework/solid/reference/functions/createfield.md delete mode 100644 docs/framework/solid/reference/functions/createform.md delete mode 100644 docs/framework/solid/reference/functions/field.md delete mode 100644 docs/framework/solid/reference/index.md delete mode 100644 docs/framework/solid/reference/interfaces/solidformapi.md delete mode 100644 docs/framework/solid/reference/type-aliases/createfield.md delete mode 100644 docs/framework/solid/reference/type-aliases/fieldcomponent.md create mode 100644 docs/reference/type-aliases/baseformstate.md create mode 100644 docs/reference/type-aliases/derivedformstate.md diff --git a/docs/framework/angular/reference/classes/tanstackfield.md b/docs/framework/angular/reference/classes/tanstackfield.md deleted file mode 100644 index fa74dc32a8..0000000000 --- a/docs/framework/angular/reference/classes/tanstackfield.md +++ /dev/null @@ -1,277 +0,0 @@ ---- -id: TanStackField -title: TanStackField ---- - -# Class: TanStackField\ - -## Type Parameters - -• **TParentData** - -• **TName** *extends* `DeepKeys`\<`TParentData`\> - -• **TFieldValidator** *extends* `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\> \| `undefined` = `undefined` - -• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` - -• **TData** *extends* `DeepValue`\<`TParentData`, `TName`\> = `DeepValue`\<`TParentData`, `TName`\> - -## Implements - -- `OnInit` -- `OnChanges` -- `OnDestroy` -- `FieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> - -## Constructors - -### new TanStackField() - -```ts -new TanStackField(): TanStackField -``` - -#### Returns - -[`TanStackField`](tanstackfield.md)\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> - -## Properties - -### api - -```ts -api: FieldApi; -``` - -#### Defined in - -[tanstack-field.directive.ts:58](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L58) - -*** - -### asyncAlways? - -```ts -optional asyncAlways: boolean; -``` - -If `true`, always run async validation, even if there are errors emitted during synchronous validation. - -#### Implementation of - -`FieldOptions.asyncAlways` - -#### Defined in - -[tanstack-field.directive.ts:47](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L47) - -*** - -### asyncDebounceMs? - -```ts -optional asyncDebounceMs: number; -``` - -The default time to debounce async validation if there is not a more specific debounce time passed. - -#### Implementation of - -`FieldOptions.asyncDebounceMs` - -#### Defined in - -[tanstack-field.directive.ts:46](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L46) - -*** - -### defaultMeta? - -```ts -optional defaultMeta: Partial; -``` - -An optional object with default metadata for the field. - -#### Implementation of - -`FieldOptions.defaultMeta` - -#### Defined in - -[tanstack-field.directive.ts:56](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L56) - -*** - -### defaultValue? - -```ts -optional defaultValue: NoInfer; -``` - -An optional default value for the field. - -#### Implementation of - -`FieldOptions.defaultValue` - -#### Defined in - -[tanstack-field.directive.ts:45](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L45) - -*** - -### name - -```ts -name: TName; -``` - -The field name. The type will be `DeepKeys` to ensure your name is a deep key of the parent dataset. - -#### Implementation of - -`FieldOptions.name` - -#### Defined in - -[tanstack-field.directive.ts:41](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L41) - -*** - -### tanstackField - -```ts -tanstackField: FormApi; -``` - -#### Defined in - -[tanstack-field.directive.ts:49](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L49) - -*** - -### unmount()? - -```ts -optional unmount: () => void; -``` - -#### Returns - -`void` - -#### Defined in - -[tanstack-field.directive.ts:73](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L73) - -*** - -### validatorAdapter? - -```ts -optional validatorAdapter: TFieldValidator; -``` - -A validator provided by an extension, like `yupValidator` from `@tanstack/yup-form-adapter` - -#### Implementation of - -`FieldOptions.validatorAdapter` - -#### Defined in - -[tanstack-field.directive.ts:48](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L48) - -*** - -### validators? - -```ts -optional validators: NoInfer>; -``` - -A list of validators to pass to the field - -#### Implementation of - -`FieldOptions.validators` - -#### Defined in - -[tanstack-field.directive.ts:53](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L53) - -## Methods - -### ngOnChanges() - -```ts -ngOnChanges(): void -``` - -A callback method that is invoked immediately after the -default change detector has checked data-bound properties -if at least one has changed, and before the view and content -children are checked. - -#### Returns - -`void` - -#### Implementation of - -`OnChanges.ngOnChanges` - -#### Defined in - -[tanstack-field.directive.ts:85](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L85) - -*** - -### ngOnDestroy() - -```ts -ngOnDestroy(): void -``` - -A callback method that performs custom clean-up, invoked immediately -before a directive, pipe, or service instance is destroyed. - -#### Returns - -`void` - -#### Implementation of - -`OnDestroy.ngOnDestroy` - -#### Defined in - -[tanstack-field.directive.ts:81](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L81) - -*** - -### ngOnInit() - -```ts -ngOnInit(): void -``` - -A callback method that is invoked immediately after the -default change detector has checked the directive's -data-bound properties for the first time, -and before any of the view or content children have been checked. -It is invoked only once when the directive is instantiated. - -#### Returns - -`void` - -#### Implementation of - -`OnInit.ngOnInit` - -#### Defined in - -[tanstack-field.directive.ts:75](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L75) diff --git a/docs/framework/angular/reference/functions/injectform.md b/docs/framework/angular/reference/functions/injectform.md deleted file mode 100644 index 3ead8f1ca0..0000000000 --- a/docs/framework/angular/reference/functions/injectform.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -id: injectForm -title: injectForm ---- - -# Function: injectForm() - -```ts -function injectForm(opts?): FormApi -``` - -## Type Parameters - -• **TFormData** - -• **TFormValidator** *extends* `undefined` \| `Validator`\<`TFormData`, `unknown`\> = `undefined` - -## Parameters - -• **opts?**: `FormOptions`\<`TFormData`, `TFormValidator`\> - -## Returns - -`FormApi`\<`TFormData`, `TFormValidator`\> - -## Defined in - -[inject-form.ts:5](https://github.com/TanStack/form/blob/main/packages/angular-form/src/inject-form.ts#L5) diff --git a/docs/framework/angular/reference/functions/injectstore.md b/docs/framework/angular/reference/functions/injectstore.md deleted file mode 100644 index 1fee88e762..0000000000 --- a/docs/framework/angular/reference/functions/injectstore.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -id: injectStore -title: injectStore ---- - -# Function: injectStore() - -```ts -function injectStore(form, selector?): Signal -``` - -## Type Parameters - -• **TFormData** - -• **TFormValidator** *extends* `undefined` \| `Validator`\<`TFormData`, `unknown`\> = `undefined` - -• **TSelected** = `NoInfer`\<`FormState`\<`TFormData`\>\> - -## Parameters - -• **form**: `FormApi`\<`TFormData`, `TFormValidator`\> - -• **selector?** - -## Returns - -`Signal`\<`TSelected`\> - -## Defined in - -[inject-store.ts:4](https://github.com/TanStack/form/blob/main/packages/angular-form/src/inject-store.ts#L4) diff --git a/docs/framework/angular/reference/index.md b/docs/framework/angular/reference/index.md deleted file mode 100644 index aab1d7b1d1..0000000000 --- a/docs/framework/angular/reference/index.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: "@tanstack/angular-form" -title: "@tanstack/angular-form" ---- - -# @tanstack/angular-form - -## Classes - -- [TanStackField](classes/tanstackfield.md) - -## Functions - -- [injectForm](functions/injectform.md) -- [injectStore](functions/injectstore.md) diff --git a/docs/framework/solid/reference/functions/createfield.md b/docs/framework/solid/reference/functions/createfield.md deleted file mode 100644 index d4cbbcf3b8..0000000000 --- a/docs/framework/solid/reference/functions/createfield.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: createField -title: createField ---- - -# Function: createField() - -```ts -function createField(opts): () => never -``` - -## Type Parameters - -• **TParentData** - -• **TName** *extends* `string` \| `number` - -• **TFieldValidator** *extends* `undefined` \| `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\> = `undefined` - -• **TFormValidator** *extends* `undefined` \| `Validator`\<`TParentData`, `unknown`\> = `undefined` - -• **TData** = `DeepValue`\<`TParentData`, `TName`\> - -## Parameters - -• **opts** - -## Returns - -`Function` - -### Returns - -`never` - -## Defined in - -[createField.tsx:87](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L87) diff --git a/docs/framework/solid/reference/functions/createform.md b/docs/framework/solid/reference/functions/createform.md deleted file mode 100644 index ee2fd0d57a..0000000000 --- a/docs/framework/solid/reference/functions/createform.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -id: createForm -title: createForm ---- - -# Function: createForm() - -```ts -function createForm(opts?): FormApi & SolidFormApi -``` - -## Type Parameters - -• **TParentData** - -• **TFormValidator** *extends* `undefined` \| `Validator`\<`TParentData`, `unknown`\> = `undefined` - -## Parameters - -• **opts?** - -## Returns - -`FormApi`\<`TParentData`, `TFormValidator`\> & [`SolidFormApi`](../interfaces/solidformapi.md)\<`TParentData`, `TFormValidator`\> - -## Defined in - -[createForm.tsx:26](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L26) diff --git a/docs/framework/solid/reference/functions/field.md b/docs/framework/solid/reference/functions/field.md deleted file mode 100644 index 0afbbd175f..0000000000 --- a/docs/framework/solid/reference/functions/field.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -id: Field -title: Field ---- - -# Function: Field() - -```ts -function Field(props): Element -``` - -## Type Parameters - -• **TParentData** - -• **TName** *extends* `string` \| `number` - -• **TFieldValidator** *extends* `undefined` \| `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\> = `undefined` - -• **TFormValidator** *extends* `undefined` \| `Validator`\<`TParentData`, `unknown`\> = `undefined` - -• **TData** = `DeepValue`\<`TParentData`, `TName`\> - -## Parameters - -• **props**: `object` & `FieldApiOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> & `object` - -## Returns - -`Element` - -## Defined in - -[createField.tsx:185](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L185) diff --git a/docs/framework/solid/reference/index.md b/docs/framework/solid/reference/index.md deleted file mode 100644 index eafeb80427..0000000000 --- a/docs/framework/solid/reference/index.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -id: "@tanstack/solid-form" -title: "@tanstack/solid-form" ---- - -# @tanstack/solid-form - -## Interfaces - -- [SolidFormApi](interfaces/solidformapi.md) - -## Type Aliases - -- [CreateField](type-aliases/createfield.md) -- [FieldComponent](type-aliases/fieldcomponent.md) - -## Functions - -- [createField](functions/createfield.md) -- [createForm](functions/createform.md) -- [Field](functions/field.md) diff --git a/docs/framework/solid/reference/interfaces/solidformapi.md b/docs/framework/solid/reference/interfaces/solidformapi.md deleted file mode 100644 index ab0a76bdd7..0000000000 --- a/docs/framework/solid/reference/interfaces/solidformapi.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -id: SolidFormApi -title: SolidFormApi ---- - -# Interface: SolidFormApi\ - -## Type Parameters - -• **TFormData** - -• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined` - -## Properties - -### createField - -```ts -createField: CreateField; -``` - -#### Defined in - -[createForm.tsx:16](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L16) - -*** - -### Field - -```ts -Field: FieldComponent; -``` - -#### Defined in - -[createForm.tsx:15](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L15) - -*** - -### Subscribe() - -```ts -Subscribe: (props) => Element; -``` - -#### Type Parameters - -• **TSelected** = `FormState`\<`TFormData`\> - -#### Parameters - -• **props** - -• **props.children**: `Element` \| (`state`) => `Element` - -• **props.selector?** - -#### Returns - -`Element` - -#### Defined in - -[createForm.tsx:20](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L20) - -*** - -### useStore() - -```ts -useStore: (selector?) => () => TSelected; -``` - -#### Type Parameters - -• **TSelected** = `FormState`\<`TFormData`\> - -#### Parameters - -• **selector?** - -#### Returns - -`Function` - -##### Returns - -`TSelected` - -#### Defined in - -[createForm.tsx:17](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L17) diff --git a/docs/framework/solid/reference/type-aliases/createfield.md b/docs/framework/solid/reference/type-aliases/createfield.md deleted file mode 100644 index 321be90936..0000000000 --- a/docs/framework/solid/reference/type-aliases/createfield.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -id: CreateField -title: CreateField ---- - -# Type Alias: CreateField()\ - -```ts -type CreateField: (opts) => () => FieldApi & SolidFieldApi; -``` - -## Type Parameters - -• **TParentData** - -• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` - -## Type Parameters - -• **TName** *extends* `DeepKeys`\<`TParentData`\> - -• **TFieldValidator** *extends* `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\> \| `undefined` = `undefined` - -• **TData** *extends* `DeepValue`\<`TParentData`, `TName`\> = `DeepValue`\<`TParentData`, `TName`\> - -## Parameters - -• **opts** - -## Returns - -`Function` - -### Returns - -`FieldApi`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> & `SolidFieldApi`\<`TParentData`, `TFormValidator`\> - -## Defined in - -[createField.tsx:29](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L29) diff --git a/docs/framework/solid/reference/type-aliases/fieldcomponent.md b/docs/framework/solid/reference/type-aliases/fieldcomponent.md deleted file mode 100644 index bfa206357e..0000000000 --- a/docs/framework/solid/reference/type-aliases/fieldcomponent.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -id: FieldComponent -title: FieldComponent ---- - -# Type Alias: FieldComponent()\ - -```ts -type FieldComponent: ({ - children, - ...fieldOptions -}) => JSXElement; -``` - -## Type Parameters - -• **TParentData** - -• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` - -## Type Parameters - -• **TName** *extends* `DeepKeys`\<`TParentData`\> - -• **TFieldValidator** *extends* `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\> \| `undefined` = `undefined` - -• **TData** *extends* `DeepValue`\<`TParentData`, `TName`\> = `DeepValue`\<`TParentData`, `TName`\> - -## Parameters - -• **\{ - children, - ...fieldOptions -\}**: `Omit`\<`FieldComponentProps`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>, `"form"`\> - -## Returns - -`JSXElement` - -## Defined in - -[createField.tsx:160](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L160) diff --git a/docs/reference/classes/formapi.md b/docs/reference/classes/formapi.md index e188f6067d..3ed6d415c3 100644 --- a/docs/reference/classes/formapi.md +++ b/docs/reference/classes/formapi.md @@ -37,10 +37,22 @@ Constructs a new `FormApi` instance with the given form options. #### Defined in -[packages/form-core/src/FormApi.ts:386](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L386) +[packages/form-core/src/FormApi.ts:374](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L374) ## Properties +### baseStore + +```ts +baseStore: Store, (cb) => BaseFormState>; +``` + +#### Defined in + +[packages/form-core/src/FormApi.ts:354](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L354) + +*** + ### fieldInfo ```ts @@ -51,7 +63,7 @@ A record of field information for each field in the form. #### Defined in -[packages/form-core/src/FormApi.ts:375](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L375) +[packages/form-core/src/FormApi.ts:359](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L359) *** @@ -65,39 +77,37 @@ The options for the form. #### Defined in -[packages/form-core/src/FormApi.ts:359](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L359) +[packages/form-core/src/FormApi.ts:353](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L353) *** -### state +### store ```ts -state: FormState; +store: Derived>; ``` -The current state of the form. - -**Note:** -Do not use `state` directly, as it is not reactive. -Please use form.useStore() utility to subscribe to state - #### Defined in -[packages/form-core/src/FormApi.ts:371](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L371) +[packages/form-core/src/FormApi.ts:355](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L355) -*** +## Accessors -### store +### state + +#### Get Signature ```ts -store: Store, (cb) => FormState>; +get state(): FormState ``` -A [TanStack Store instance](https://tanstack.com/store/latest/docs/reference/Store) that keeps track of the form's state. +##### Returns + +[`FormState`](../type-aliases/formstate.md)\<`TFormData`\> #### Defined in -[packages/form-core/src/FormApi.ts:363](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L363) +[packages/form-core/src/FormApi.ts:362](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L362) ## Methods @@ -121,7 +131,7 @@ deleteField(field): void #### Defined in -[packages/form-core/src/FormApi.ts:1105](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1105) +[packages/form-core/src/FormApi.ts:1076](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1076) *** @@ -147,7 +157,7 @@ Gets the field info of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1016](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1016) +[packages/form-core/src/FormApi.ts:987](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L987) *** @@ -173,7 +183,7 @@ Gets the metadata of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1007](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1007) +[packages/form-core/src/FormApi.ts:978](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L978) *** @@ -199,7 +209,7 @@ Gets the value of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1000](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1000) +[packages/form-core/src/FormApi.ts:971](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L971) *** @@ -217,7 +227,7 @@ Handles the form submission, performs validation, and calls the appropriate onSu #### Defined in -[packages/form-core/src/FormApi.ts:952](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L952) +[packages/form-core/src/FormApi.ts:923](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L923) *** @@ -253,7 +263,7 @@ Inserts a value into an array field at the specified index, shifting the subsequ #### Defined in -[packages/form-core/src/FormApi.ts:1137](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1137) +[packages/form-core/src/FormApi.ts:1108](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1108) *** @@ -269,7 +279,7 @@ mount(): void #### Defined in -[packages/form-core/src/FormApi.ts:513](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L513) +[packages/form-core/src/FormApi.ts:484](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L484) *** @@ -305,7 +315,7 @@ Moves the value at the first specified index to the second specified index withi #### Defined in -[packages/form-core/src/FormApi.ts:1255](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1255) +[packages/form-core/src/FormApi.ts:1226](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1226) *** @@ -338,7 +348,7 @@ Pushes a value into an array field. #### Defined in -[packages/form-core/src/FormApi.ts:1119](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1119) +[packages/form-core/src/FormApi.ts:1090](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1090) *** @@ -371,7 +381,7 @@ Removes a value from an array field at the specified index. #### Defined in -[packages/form-core/src/FormApi.ts:1190](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1190) +[packages/form-core/src/FormApi.ts:1161](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1161) *** @@ -407,7 +417,7 @@ Replaces a value into an array field at the specified index. #### Defined in -[packages/form-core/src/FormApi.ts:1164](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1164) +[packages/form-core/src/FormApi.ts:1135](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1135) *** @@ -438,7 +448,7 @@ Optional options to control the reset behavior. #### Defined in -[packages/form-core/src/FormApi.ts:580](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L580) +[packages/form-core/src/FormApi.ts:551](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L551) *** @@ -462,7 +472,7 @@ resetFieldMeta(fieldMeta): Record #### Defined in -[packages/form-core/src/FormApi.ts:1050](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1050) +[packages/form-core/src/FormApi.ts:1021](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1021) *** @@ -484,7 +494,7 @@ Updates the form's errorMap #### Defined in -[packages/form-core/src/FormApi.ts:1279](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1279) +[packages/form-core/src/FormApi.ts:1250](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1250) *** @@ -512,7 +522,7 @@ Updates the metadata of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1035](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1035) +[packages/form-core/src/FormApi.ts:1006](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1006) *** @@ -545,7 +555,7 @@ Sets the value of the specified field and optionally updates the touched state. #### Defined in -[packages/form-core/src/FormApi.ts:1074](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1074) +[packages/form-core/src/FormApi.ts:1045](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1045) *** @@ -581,7 +591,7 @@ Swaps the values at the specified indices within an array field. #### Defined in -[packages/form-core/src/FormApi.ts:1229](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1229) +[packages/form-core/src/FormApi.ts:1200](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1200) *** @@ -603,7 +613,7 @@ Updates the form options and form state. #### Defined in -[packages/form-core/src/FormApi.ts:536](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L536) +[packages/form-core/src/FormApi.ts:507](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L507) *** @@ -625,7 +635,7 @@ Validates form and all fields in using the correct handlers for a given validati #### Defined in -[packages/form-core/src/FormApi.ts:606](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L606) +[packages/form-core/src/FormApi.ts:577](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L577) *** @@ -658,7 +668,7 @@ Validates the children of a specified array in the form starting from a given in #### Defined in -[packages/form-core/src/FormApi.ts:640](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L640) +[packages/form-core/src/FormApi.ts:611](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L611) *** @@ -686,4 +696,4 @@ Validates a specified field in the form using the correct handlers for a given v #### Defined in -[packages/form-core/src/FormApi.ts:679](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L679) +[packages/form-core/src/FormApi.ts:650](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L650) diff --git a/docs/reference/index.md b/docs/reference/index.md index 1ff82aa4ae..fc070f045c 100644 --- a/docs/reference/index.md +++ b/docs/reference/index.md @@ -20,8 +20,10 @@ title: "@tanstack/form-core" ## Type Aliases +- [BaseFormState](type-aliases/baseformstate.md) - [DeepKeys](type-aliases/deepkeys.md) - [DeepValue](type-aliases/deepvalue.md) +- [DerivedFormState](type-aliases/derivedformstate.md) - [FieldInfo](type-aliases/fieldinfo.md) - [FieldMeta](type-aliases/fieldmeta.md) - [FieldsErrorMapFromValidator](type-aliases/fieldserrormapfromvalidator.md) diff --git a/docs/reference/type-aliases/baseformstate.md b/docs/reference/type-aliases/baseformstate.md new file mode 100644 index 0000000000..0122001bec --- /dev/null +++ b/docs/reference/type-aliases/baseformstate.md @@ -0,0 +1,94 @@ +--- +id: BaseFormState +title: BaseFormState +--- + +# Type Alias: BaseFormState\ + +```ts +type BaseFormState: object; +``` + +An object representing the current state of the form. + +## Type Parameters + +• **TFormData** + +## Type declaration + +### errorMap + +```ts +errorMap: FormValidationErrorMap; +``` + +The error map for the form itself. + +### fieldMeta + +```ts +fieldMeta: Record, FieldMeta>; +``` + +A record of field metadata for each field in the form. + +### isSubmitted + +```ts +isSubmitted: boolean; +``` + +A boolean indicating if the form has been submitted. + +### isSubmitting + +```ts +isSubmitting: boolean; +``` + +A boolean indicating if the form is currently in the process of being submitted after `handleSubmit` is called. + +Goes back to `false` when submission completes for one of the following reasons: +- the validation step returned errors. +- the `onSubmit` function has completed. + +Note: if you're running async operations in your `onSubmit` function make sure to await them to ensure `isSubmitting` is set to `false` only when the async operation completes. + +This is useful for displaying loading indicators or disabling form inputs during submission. + +### isValidating + +```ts +isValidating: boolean; +``` + +A boolean indicating if the form or any of its fields are currently validating. + +### submissionAttempts + +```ts +submissionAttempts: number; +``` + +A counter for tracking the number of submission attempts. + +### validationMetaMap + +```ts +validationMetaMap: Record; +``` + +An internal mechanism used for keeping track of validation logic in a form. + +### values + +```ts +values: TFormData; +``` + +The current values of the form fields. + +## Defined in + +[packages/form-core/src/FormApi.ts:219](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L219) diff --git a/docs/reference/type-aliases/derivedformstate.md b/docs/reference/type-aliases/derivedformstate.md new file mode 100644 index 0000000000..49bb4739d1 --- /dev/null +++ b/docs/reference/type-aliases/derivedformstate.md @@ -0,0 +1,104 @@ +--- +id: DerivedFormState +title: DerivedFormState +--- + +# Type Alias: DerivedFormState + +```ts +type DerivedFormState: object; +``` + +## Type declaration + +### canSubmit + +```ts +canSubmit: boolean; +``` + +A boolean indicating if the form can be submitted based on its current state. + +### errors + +```ts +errors: ValidationError[]; +``` + +The error array for the form itself. + +### isBlurred + +```ts +isBlurred: boolean; +``` + +A boolean indicating if any of the form fields have been blurred. + +### isDirty + +```ts +isDirty: boolean; +``` + +A boolean indicating if any of the form's fields' values have been modified by the user. `True` if the user have modified at least one of the fields. Opposite of `isPristine`. + +### isFieldsValid + +```ts +isFieldsValid: boolean; +``` + +A boolean indicating if all the form fields are valid. + +### isFieldsValidating + +```ts +isFieldsValidating: boolean; +``` + +A boolean indicating if any of the form fields are currently validating. + +### isFormValid + +```ts +isFormValid: boolean; +``` + +A boolean indicating if the form is valid. + +### isFormValidating + +```ts +isFormValidating: boolean; +``` + +A boolean indicating if the form is currently validating. + +### isPristine + +```ts +isPristine: boolean; +``` + +A boolean indicating if none of the form's fields' values have been modified by the user. `True` if the user have not modified any of the fields. Opposite of `isDirty`. + +### isTouched + +```ts +isTouched: boolean; +``` + +A boolean indicating if any of the form fields have been touched. + +### isValid + +```ts +isValid: boolean; +``` + +A boolean indicating if the form and all its fields are valid. + +## Defined in + +[packages/form-core/src/FormApi.ts:263](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L263) diff --git a/docs/reference/type-aliases/formstate.md b/docs/reference/type-aliases/formstate.md index c5c3f1ebbe..0b522c6f0e 100644 --- a/docs/reference/type-aliases/formstate.md +++ b/docs/reference/type-aliases/formstate.md @@ -6,177 +6,13 @@ title: FormState # Type Alias: FormState\ ```ts -type FormState: object; +type FormState: BaseFormState & DerivedFormState; ``` -An object representing the current state of the form. - ## Type Parameters • **TFormData** -## Type declaration - -### canSubmit - -```ts -canSubmit: boolean; -``` - -A boolean indicating if the form can be submitted based on its current state. - -### errorMap - -```ts -errorMap: FormValidationErrorMap; -``` - -The error map for the form itself. - -### errors - -```ts -errors: ValidationError[]; -``` - -The error array for the form itself. - -### fieldMeta - -```ts -fieldMeta: Record, FieldMeta>; -``` - -A record of field metadata for each field in the form. - -### isBlurred - -```ts -isBlurred: boolean; -``` - -A boolean indicating if any of the form fields have been blurred. - -### isDirty - -```ts -isDirty: boolean; -``` - -A boolean indicating if any of the form's fields' values have been modified by the user. `True` if the user have modified at least one of the fields. Opposite of `isPristine`. - -### isFieldsValid - -```ts -isFieldsValid: boolean; -``` - -A boolean indicating if all the form fields are valid. - -### isFieldsValidating - -```ts -isFieldsValidating: boolean; -``` - -A boolean indicating if any of the form fields are currently validating. - -### isFormValid - -```ts -isFormValid: boolean; -``` - -A boolean indicating if the form is valid. - -### isFormValidating - -```ts -isFormValidating: boolean; -``` - -A boolean indicating if the form is currently validating. - -### isPristine - -```ts -isPristine: boolean; -``` - -A boolean indicating if none of the form's fields' values have been modified by the user. `True` if the user have not modified any of the fields. Opposite of `isDirty`. - -### isSubmitted - -```ts -isSubmitted: boolean; -``` - -A boolean indicating if the form has been submitted. - -### isSubmitting - -```ts -isSubmitting: boolean; -``` - -A boolean indicating if the form is currently in the process of being submitted after `handleSubmit` is called. - -Goes back to `false` when submission completes for one of the following reasons: -- the validation step returned errors. -- the `onSubmit` function has completed. - -Note: if you're running async operations in your `onSubmit` function make sure to await them to ensure `isSubmitting` is set to `false` only when the async operation completes. - -This is useful for displaying loading indicators or disabling form inputs during submission. - -### isTouched - -```ts -isTouched: boolean; -``` - -A boolean indicating if any of the form fields have been touched. - -### isValid - -```ts -isValid: boolean; -``` - -A boolean indicating if the form and all its fields are valid. - -### isValidating - -```ts -isValidating: boolean; -``` - -A boolean indicating if the form or any of its fields are currently validating. - -### submissionAttempts - -```ts -submissionAttempts: number; -``` - -A counter for tracking the number of submission attempts. - -### validationMetaMap - -```ts -validationMetaMap: Record; -``` - -An internal mechanism used for keeping track of validation logic in a form. - -### values - -```ts -values: TFormData; -``` - -The current values of the form fields. - ## Defined in -[packages/form-core/src/FormApi.ts:219](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L219) +[packages/form-core/src/FormApi.ts:310](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L310) From 4087d87f873a65c35ee94d6823eefd442036729d Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Mon, 25 Nov 2024 07:57:14 -0800 Subject: [PATCH 06/38] chore: fix build --- packages/form-core/src/FormApi.ts | 34 ++++++++++++++++++++----------- 1 file changed, 22 insertions(+), 12 deletions(-) diff --git a/packages/form-core/src/FormApi.ts b/packages/form-core/src/FormApi.ts index 3561596d8b..756f5c54d2 100644 --- a/packages/form-core/src/FormApi.ts +++ b/packages/form-core/src/FormApi.ts @@ -380,6 +380,28 @@ export class FormApi< }), ) + this.errorsStore = new Derived({ + deps: [this.baseStore], + fn: () => { + const { state } = this.baseStore + + const errors = Object.values(state.errorMap).reduce((prev, curr) => { + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + if (curr === undefined) return prev + if (typeof curr === 'string') { + prev.push(curr) + return prev + } else if (curr && isFormValidationError(curr)) { + prev.push(curr.form) + return prev + } + return prev + }, [] as ValidationError[]) + + return errors + }, + }) + this.store = new Derived>({ deps: [this.baseStore], fn: () => { @@ -419,18 +441,6 @@ export class FormApi< ) const isValidating = !!isFieldsValidating - const errors = Object.values(state.errorMap).reduce((prev, curr) => { - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - if (curr === undefined) return prev - if (typeof curr === 'string') { - prev.push(curr) - return prev - } else if (curr && isFormValidationError(curr)) { - prev.push(curr.form) - return prev - } - return prev - }, [] as ValidationError[]) const isFormValid = errors.length === 0 const isValid = isFieldsValid && isFormValid const canSubmit = From 9ca8a8b4a15c5d2a2ef952bb379bf9836bceec10 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Mon, 25 Nov 2024 15:58:53 +0000 Subject: [PATCH 07/38] ci: apply automated fixes and generate docs --- .../classes/tanstackformcontroller.md | 153 ---- docs/framework/lit/reference/index.md | 10 - docs/reference/classes/fieldapi.md | 530 ------------- docs/reference/classes/formapi.md | 699 ------------------ docs/reference/functions/formoptions.md | 28 - docs/reference/functions/mergeform.md | 30 - docs/reference/index.md | 43 -- docs/reference/interfaces/fieldapioptions.md | 162 ---- docs/reference/interfaces/fieldoptions.md | 122 --- docs/reference/interfaces/fieldvalidators.md | 218 ------ docs/reference/interfaces/formoptions.md | 162 ---- docs/reference/interfaces/formvalidators.md | 134 ---- docs/reference/type-aliases/baseformstate.md | 94 --- docs/reference/type-aliases/deepkeys.md | 22 - docs/reference/type-aliases/deepvalue.md | 24 - .../type-aliases/derivedformstate.md | 104 --- docs/reference/type-aliases/fieldinfo.md | 40 - docs/reference/type-aliases/fieldmeta.md | 74 -- .../fieldserrormapfromvalidator.md | 18 - docs/reference/type-aliases/fieldstate.md | 38 - docs/reference/type-aliases/formstate.md | 18 - docs/reference/type-aliases/formvalidatefn.md | 32 - docs/reference/type-aliases/formvalidator.md | 52 -- docs/reference/type-aliases/updater.md | 20 - docs/reference/type-aliases/updaterfn.md | 28 - .../reference/type-aliases/validationerror.md | 14 - docs/reference/type-aliases/validationmeta.md | 26 - .../type-aliases/validationsource.md | 14 - 28 files changed, 2909 deletions(-) delete mode 100644 docs/framework/lit/reference/classes/tanstackformcontroller.md delete mode 100644 docs/framework/lit/reference/index.md delete mode 100644 docs/reference/classes/fieldapi.md delete mode 100644 docs/reference/classes/formapi.md delete mode 100644 docs/reference/functions/formoptions.md delete mode 100644 docs/reference/functions/mergeform.md delete mode 100644 docs/reference/index.md delete mode 100644 docs/reference/interfaces/fieldapioptions.md delete mode 100644 docs/reference/interfaces/fieldoptions.md delete mode 100644 docs/reference/interfaces/fieldvalidators.md delete mode 100644 docs/reference/interfaces/formoptions.md delete mode 100644 docs/reference/interfaces/formvalidators.md delete mode 100644 docs/reference/type-aliases/baseformstate.md delete mode 100644 docs/reference/type-aliases/deepkeys.md delete mode 100644 docs/reference/type-aliases/deepvalue.md delete mode 100644 docs/reference/type-aliases/derivedformstate.md delete mode 100644 docs/reference/type-aliases/fieldinfo.md delete mode 100644 docs/reference/type-aliases/fieldmeta.md delete mode 100644 docs/reference/type-aliases/fieldserrormapfromvalidator.md delete mode 100644 docs/reference/type-aliases/fieldstate.md delete mode 100644 docs/reference/type-aliases/formstate.md delete mode 100644 docs/reference/type-aliases/formvalidatefn.md delete mode 100644 docs/reference/type-aliases/formvalidator.md delete mode 100644 docs/reference/type-aliases/updater.md delete mode 100644 docs/reference/type-aliases/updaterfn.md delete mode 100644 docs/reference/type-aliases/validationerror.md delete mode 100644 docs/reference/type-aliases/validationmeta.md delete mode 100644 docs/reference/type-aliases/validationsource.md diff --git a/docs/framework/lit/reference/classes/tanstackformcontroller.md b/docs/framework/lit/reference/classes/tanstackformcontroller.md deleted file mode 100644 index 95e7e5ad1b..0000000000 --- a/docs/framework/lit/reference/classes/tanstackformcontroller.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -id: TanStackFormController -title: TanStackFormController ---- - -# Class: TanStackFormController\ - -## Type Parameters - -• **TParentData** - -• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` - -## Implements - -- `ReactiveController` - -## Constructors - -### new TanStackFormController() - -```ts -new TanStackFormController(host, config?): TanStackFormController -``` - -#### Parameters - -• **host**: `ReactiveControllerHost` - -• **config?**: `FormOptions`\<`TParentData`, `TFormValidator`\> - -#### Returns - -[`TanStackFormController`](tanstackformcontroller.md)\<`TParentData`, `TFormValidator`\> - -#### Defined in - -[tanstack-form-controller.ts:93](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L93) - -## Properties - -### api - -```ts -api: FormApi; -``` - -#### Defined in - -[tanstack-form-controller.ts:91](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L91) - -## Methods - -### field() - -```ts -field(fieldConfig, render): object -``` - -#### Type Parameters - -• **TName** *extends* `string` \| `number` - -• **TFieldValidator** *extends* `undefined` \| `Validator`\<`DeepValue`\<`TParentData`, `TName`, `IsNullable`\<`TParentData`\>\>, `unknown`\> = `undefined` - -• **TData** = `DeepValue`\<`TParentData`, `TName`, `IsNullable`\<`TParentData`\>\> - -#### Parameters - -• **fieldConfig**: `FieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> - -• **render**: `renderCallback`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> - -#### Returns - -`object` - -##### values - -```ts -values: object; -``` - -##### values.form - -```ts -form: FormApi; -``` - -##### values.options - -```ts -options: FieldOptions; -``` - -##### values.render - -```ts -render: renderCallback; -``` - -#### Defined in - -[tanstack-form-controller.ts:112](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L112) - -*** - -### hostConnected() - -```ts -hostConnected(): void -``` - -Called when the host is connected to the component tree. For custom -element hosts, this corresponds to the `connectedCallback()` lifecycle, -which is only called when the component is connected to the document. - -#### Returns - -`void` - -#### Implementation of - -`ReactiveController.hostConnected` - -#### Defined in - -[tanstack-form-controller.ts:102](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L102) - -*** - -### hostDisconnected() - -```ts -hostDisconnected(): void -``` - -Called when the host is disconnected from the component tree. For custom -element hosts, this corresponds to the `disconnectedCallback()` lifecycle, -which is called the host or an ancestor component is disconnected from the -document. - -#### Returns - -`void` - -#### Implementation of - -`ReactiveController.hostDisconnected` - -#### Defined in - -[tanstack-form-controller.ts:108](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L108) diff --git a/docs/framework/lit/reference/index.md b/docs/framework/lit/reference/index.md deleted file mode 100644 index 4215a31714..0000000000 --- a/docs/framework/lit/reference/index.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -id: "@tanstack/lit-form" -title: "@tanstack/lit-form" ---- - -# @tanstack/lit-form - -## Classes - -- [TanStackFormController](classes/tanstackformcontroller.md) diff --git a/docs/reference/classes/fieldapi.md b/docs/reference/classes/fieldapi.md deleted file mode 100644 index fe2e31c505..0000000000 --- a/docs/reference/classes/fieldapi.md +++ /dev/null @@ -1,530 +0,0 @@ ---- -id: FieldApi -title: FieldApi ---- - -# Class: FieldApi\ - -A class representing the API for managing a form field. - -Normally, you will not need to create a new `FieldApi` instance directly. -Instead, you will use a framework hook/function like `useField` or `createField` -to create a new instance for you that uses your framework's reactivity model. -However, if you need to create a new instance manually, you can do so by calling -the `new FieldApi` constructor. - -## Type Parameters - -• **TParentData** - -• **TName** *extends* [`DeepKeys`](../type-aliases/deepkeys.md)\<`TParentData`\> - -• **TFieldValidator** *extends* `Validator`\<[`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\>, `unknown`\> \| `undefined` = `undefined` - -• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` - -• **TData** *extends* [`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\> = [`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\> - -## Constructors - -### new FieldApi() - -```ts -new FieldApi(opts): FieldApi -``` - -Initializes a new `FieldApi` instance. - -#### Parameters - -• **opts**: [`FieldApiOptions`](../interfaces/fieldapioptions.md)\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> - -#### Returns - -[`FieldApi`](fieldapi.md)\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> - -#### Defined in - -[packages/form-core/src/FieldApi.ts:438](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L438) - -## Properties - -### form - -```ts -form: FormApi; -``` - -A reference to the form API instance. - -#### Defined in - -[packages/form-core/src/FieldApi.ts:402](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L402) - -*** - -### name - -```ts -name: unknown extends TParentData ? string : TParentData extends readonly any[] & IsTuple ? PrefixTupleAccessor, AllowedIndexes, never>, []> : TParentData extends any[] ? PrefixArrayAccessor, [any]> : TParentData extends Date ? never : TParentData extends object ? PrefixObjectAccessor, []> : TParentData extends string | number | bigint | boolean ? "" : never; -``` - -The field name. - -#### Defined in - -[packages/form-core/src/FieldApi.ts:412](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L412) - -*** - -### options - -```ts -options: FieldApiOptions; -``` - -The field options. - -#### Defined in - -[packages/form-core/src/FieldApi.ts:416](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L416) - -*** - -### store - -```ts -store: Derived>; -``` - -The field state store. - -#### Defined in - -[packages/form-core/src/FieldApi.ts:426](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L426) - -*** - -### timeoutIds - -```ts -timeoutIds: Record; -``` - -#### Defined in - -[packages/form-core/src/FieldApi.ts:433](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L433) - -## Accessors - -### state - -#### Get Signature - -```ts -get state(): FieldState -``` - -The current field state. - -##### Returns - -[`FieldState`](../type-aliases/fieldstate.md)\<`TData`\> - -#### Defined in - -[packages/form-core/src/FieldApi.ts:430](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L430) - -## Methods - -### getInfo() - -```ts -getInfo(): FieldInfo -``` - -Gets the field information object. - -#### Returns - -[`FieldInfo`](../type-aliases/fieldinfo.md)\<`TParentData`, `TFormValidator`\> - -#### Defined in - -[packages/form-core/src/FieldApi.ts:622](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L622) - -*** - -### getMeta() - -```ts -getMeta(): FieldMeta -``` - -#### Returns - -[`FieldMeta`](../type-aliases/fieldmeta.md) - -#### Defined in - -[packages/form-core/src/FieldApi.ts:611](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L611) - -*** - -### ~~getValue()~~ - -```ts -getValue(): TData -``` - -Gets the current field value. - -#### Returns - -`TData` - -#### Deprecated - -Use `field.state.value` instead. - -#### Defined in - -[packages/form-core/src/FieldApi.ts:599](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L599) - -*** - -### handleBlur() - -```ts -handleBlur(): void -``` - -Handles the blur event. - -#### Returns - -`void` - -#### Defined in - -[packages/form-core/src/FieldApi.ts:974](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L974) - -*** - -### handleChange() - -```ts -handleChange(updater): void -``` - -Handles the change event. - -#### Parameters - -• **updater**: [`Updater`](../type-aliases/updater.md)\<`TData`\> - -#### Returns - -`void` - -#### Defined in - -[packages/form-core/src/FieldApi.ts:967](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L967) - -*** - -### insertValue() - -```ts -insertValue( - index, - value, -opts?): Promise -``` - -Inserts a value at the specified index, shifting the subsequent values to the right. - -#### Parameters - -• **index**: `number` - -• **value**: `TData` *extends* `any`[] ? `TData`\<`TData`\>\[`number`\] : `never` - -• **opts?**: `UpdateMetaOptions` - -#### Returns - -`Promise`\<`void`\> - -#### Defined in - -[packages/form-core/src/FieldApi.ts:635](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L635) - -*** - -### mount() - -```ts -mount(): () => void -``` - -Mounts the field instance to the form. - -#### Returns - -`Function` - -##### Returns - -`void` - -#### Defined in - -[packages/form-core/src/FieldApi.ts:528](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L528) - -*** - -### moveValue() - -```ts -moveValue( - aIndex, - bIndex, - opts?): void -``` - -Moves the value at the first specified index to the second specified index. - -#### Parameters - -• **aIndex**: `number` - -• **bIndex**: `number` - -• **opts?**: `UpdateMetaOptions` - -#### Returns - -`void` - -#### Defined in - -[packages/form-core/src/FieldApi.ts:665](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L665) - -*** - -### pushValue() - -```ts -pushValue(value, opts?): void -``` - -Pushes a new value to the field. - -#### Parameters - -• **value**: `TData` *extends* `any`[] ? `TData`\<`TData`\>\[`number`\] : `never` - -• **opts?**: `UpdateMetaOptions` - -#### Returns - -`void` - -#### Defined in - -[packages/form-core/src/FieldApi.ts:627](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L627) - -*** - -### removeValue() - -```ts -removeValue(index, opts?): Promise -``` - -Removes a value at the specified index. - -#### Parameters - -• **index**: `number` - -• **opts?**: `UpdateMetaOptions` - -#### Returns - -`Promise`\<`void`\> - -#### Defined in - -[packages/form-core/src/FieldApi.ts:653](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L653) - -*** - -### replaceValue() - -```ts -replaceValue( - index, - value, -opts?): Promise -``` - -Replaces a value at the specified index. - -#### Parameters - -• **index**: `number` - -• **value**: `TData` *extends* `any`[] ? `TData`\<`TData`\>\[`number`\] : `never` - -• **opts?**: `UpdateMetaOptions` - -#### Returns - -`Promise`\<`void`\> - -#### Defined in - -[packages/form-core/src/FieldApi.ts:644](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L644) - -*** - -### setErrorMap() - -```ts -setErrorMap(errorMap): void -``` - -Updates the field's errorMap - -#### Parameters - -• **errorMap**: `ValidationErrorMap` - -#### Returns - -`void` - -#### Defined in - -[packages/form-core/src/FieldApi.ts:989](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L989) - -*** - -### setMeta() - -```ts -setMeta(updater): void -``` - -Sets the field metadata. - -#### Parameters - -• **updater**: [`Updater`](../type-aliases/updater.md)\<[`FieldMeta`](../type-aliases/fieldmeta.md)\> - -#### Returns - -`void` - -#### Defined in - -[packages/form-core/src/FieldApi.ts:616](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L616) - -*** - -### setValue() - -```ts -setValue(updater, options?): void -``` - -Sets the field value and run the `change` validator. - -#### Parameters - -• **updater**: [`Updater`](../type-aliases/updater.md)\<`TData`\> - -• **options?**: `UpdateMetaOptions` - -#### Returns - -`void` - -#### Defined in - -[packages/form-core/src/FieldApi.ts:606](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L606) - -*** - -### swapValues() - -```ts -swapValues( - aIndex, - bIndex, - opts?): void -``` - -Swaps the values at the specified indices. - -#### Parameters - -• **aIndex**: `number` - -• **bIndex**: `number` - -• **opts?**: `UpdateMetaOptions` - -#### Returns - -`void` - -#### Defined in - -[packages/form-core/src/FieldApi.ts:659](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L659) - -*** - -### update() - -```ts -update(opts): void -``` - -Updates the field instance with new options. - -#### Parameters - -• **opts**: [`FieldApiOptions`](../interfaces/fieldapioptions.md)\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> - -#### Returns - -`void` - -#### Defined in - -[packages/form-core/src/FieldApi.ts:562](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L562) - -*** - -### validate() - -```ts -validate(cause): ValidationError[] | Promise -``` - -Validates the field value. - -#### Parameters - -• **cause**: `ValidationCause` - -#### Returns - -[`ValidationError`](../type-aliases/validationerror.md)[] \| `Promise`\<[`ValidationError`](../type-aliases/validationerror.md)[]\> - -#### Defined in - -[packages/form-core/src/FieldApi.ts:939](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L939) diff --git a/docs/reference/classes/formapi.md b/docs/reference/classes/formapi.md deleted file mode 100644 index 3ed6d415c3..0000000000 --- a/docs/reference/classes/formapi.md +++ /dev/null @@ -1,699 +0,0 @@ ---- -id: FormApi -title: FormApi ---- - -# Class: FormApi\ - -A class representing the Form API. It handles the logic and interactions with the form state. - -Normally, you will not need to create a new `FormApi` instance directly. Instead, you will use a framework -hook/function like `useForm` or `createForm` to create a new instance for you that uses your framework's reactivity model. -However, if you need to create a new instance manually, you can do so by calling the `new FormApi` constructor. - -## Type Parameters - -• **TFormData** - -• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined` - -## Constructors - -### new FormApi() - -```ts -new FormApi(opts?): FormApi -``` - -Constructs a new `FormApi` instance with the given form options. - -#### Parameters - -• **opts?**: [`FormOptions`](../interfaces/formoptions.md)\<`TFormData`, `TFormValidator`\> - -#### Returns - -[`FormApi`](formapi.md)\<`TFormData`, `TFormValidator`\> - -#### Defined in - -[packages/form-core/src/FormApi.ts:374](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L374) - -## Properties - -### baseStore - -```ts -baseStore: Store, (cb) => BaseFormState>; -``` - -#### Defined in - -[packages/form-core/src/FormApi.ts:354](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L354) - -*** - -### fieldInfo - -```ts -fieldInfo: Record ? PrefixTupleAccessor, AllowedIndexes, never>, []> : TFormData extends any[] ? PrefixArrayAccessor, [any]> : TFormData extends Date ? never : TFormData extends object ? PrefixObjectAccessor, []> : TFormData extends string | number | bigint | boolean ? "" : never, FieldInfo>; -``` - -A record of field information for each field in the form. - -#### Defined in - -[packages/form-core/src/FormApi.ts:359](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L359) - -*** - -### options - -```ts -options: FormOptions = {}; -``` - -The options for the form. - -#### Defined in - -[packages/form-core/src/FormApi.ts:353](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L353) - -*** - -### store - -```ts -store: Derived>; -``` - -#### Defined in - -[packages/form-core/src/FormApi.ts:355](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L355) - -## Accessors - -### state - -#### Get Signature - -```ts -get state(): FormState -``` - -##### Returns - -[`FormState`](../type-aliases/formstate.md)\<`TFormData`\> - -#### Defined in - -[packages/form-core/src/FormApi.ts:362](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L362) - -## Methods - -### deleteField() - -```ts -deleteField(field): void -``` - -#### Type Parameters - -• **TField** *extends* `string` \| `number` - -#### Parameters - -• **field**: `TField` - -#### Returns - -`void` - -#### Defined in - -[packages/form-core/src/FormApi.ts:1076](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1076) - -*** - -### getFieldInfo() - -```ts -getFieldInfo(field): FieldInfo -``` - -Gets the field info of the specified field. - -#### Type Parameters - -• **TField** *extends* `string` \| `number` - -#### Parameters - -• **field**: `TField` - -#### Returns - -[`FieldInfo`](../type-aliases/fieldinfo.md)\<`TFormData`, `TFormValidator`\> - -#### Defined in - -[packages/form-core/src/FormApi.ts:987](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L987) - -*** - -### getFieldMeta() - -```ts -getFieldMeta(field): undefined | FieldMeta -``` - -Gets the metadata of the specified field. - -#### Type Parameters - -• **TField** *extends* `string` \| `number` - -#### Parameters - -• **field**: `TField` - -#### Returns - -`undefined` \| [`FieldMeta`](../type-aliases/fieldmeta.md) - -#### Defined in - -[packages/form-core/src/FormApi.ts:978](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L978) - -*** - -### getFieldValue() - -```ts -getFieldValue(field): DeepValue> -``` - -Gets the value of the specified field. - -#### Type Parameters - -• **TField** *extends* `string` \| `number` - -#### Parameters - -• **field**: `TField` - -#### Returns - -[`DeepValue`](../type-aliases/deepvalue.md)\<`TFormData`, `TField`, `IsNullable`\<`TFormData`\>\> - -#### Defined in - -[packages/form-core/src/FormApi.ts:971](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L971) - -*** - -### handleSubmit() - -```ts -handleSubmit(): Promise -``` - -Handles the form submission, performs validation, and calls the appropriate onSubmit or onInvalidSubmit callbacks. - -#### Returns - -`Promise`\<`void`\> - -#### Defined in - -[packages/form-core/src/FormApi.ts:923](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L923) - -*** - -### insertFieldValue() - -```ts -insertFieldValue( - field, - index, - value, -opts?): Promise -``` - -Inserts a value into an array field at the specified index, shifting the subsequent values to the right. - -#### Type Parameters - -• **TField** *extends* `string` \| `number` - -#### Parameters - -• **field**: `TField` - -• **index**: `number` - -• **value**: [`DeepValue`](../type-aliases/deepvalue.md)\<`TFormData`, `TField`, `IsNullable`\<`TFormData`\>\> *extends* `any`[] ? `any`[] & [`DeepValue`](../type-aliases/deepvalue.md)\<`TFormData`, `TField`, `IsNullable`\<`TFormData`\>\>\[`number`\] : `never` - -• **opts?**: `UpdateMetaOptions` - -#### Returns - -`Promise`\<`void`\> - -#### Defined in - -[packages/form-core/src/FormApi.ts:1108](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1108) - -*** - -### mount() - -```ts -mount(): void -``` - -#### Returns - -`void` - -#### Defined in - -[packages/form-core/src/FormApi.ts:484](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L484) - -*** - -### moveFieldValues() - -```ts -moveFieldValues( - field, - index1, - index2, - opts?): void -``` - -Moves the value at the first specified index to the second specified index within an array field. - -#### Type Parameters - -• **TField** *extends* `string` \| `number` - -#### Parameters - -• **field**: `TField` - -• **index1**: `number` - -• **index2**: `number` - -• **opts?**: `UpdateMetaOptions` - -#### Returns - -`void` - -#### Defined in - -[packages/form-core/src/FormApi.ts:1226](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1226) - -*** - -### pushFieldValue() - -```ts -pushFieldValue( - field, - value, - opts?): void -``` - -Pushes a value into an array field. - -#### Type Parameters - -• **TField** *extends* `string` \| `number` - -#### Parameters - -• **field**: `TField` - -• **value**: [`DeepValue`](../type-aliases/deepvalue.md)\<`TFormData`, `TField`, `IsNullable`\<`TFormData`\>\> *extends* `any`[] ? `any`[] & [`DeepValue`](../type-aliases/deepvalue.md)\<`TFormData`, `TField`, `IsNullable`\<`TFormData`\>\>\[`number`\] : `never` - -• **opts?**: `UpdateMetaOptions` - -#### Returns - -`void` - -#### Defined in - -[packages/form-core/src/FormApi.ts:1090](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1090) - -*** - -### removeFieldValue() - -```ts -removeFieldValue( - field, - index, -opts?): Promise -``` - -Removes a value from an array field at the specified index. - -#### Type Parameters - -• **TField** *extends* `string` \| `number` - -#### Parameters - -• **field**: `TField` - -• **index**: `number` - -• **opts?**: `UpdateMetaOptions` - -#### Returns - -`Promise`\<`void`\> - -#### Defined in - -[packages/form-core/src/FormApi.ts:1161](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1161) - -*** - -### replaceFieldValue() - -```ts -replaceFieldValue( - field, - index, - value, -opts?): Promise -``` - -Replaces a value into an array field at the specified index. - -#### Type Parameters - -• **TField** *extends* `string` \| `number` - -#### Parameters - -• **field**: `TField` - -• **index**: `number` - -• **value**: [`DeepValue`](../type-aliases/deepvalue.md)\<`TFormData`, `TField`, `IsNullable`\<`TFormData`\>\> *extends* `any`[] ? `any`[] & [`DeepValue`](../type-aliases/deepvalue.md)\<`TFormData`, `TField`, `IsNullable`\<`TFormData`\>\>\[`number`\] : `never` - -• **opts?**: `UpdateMetaOptions` - -#### Returns - -`Promise`\<`void`\> - -#### Defined in - -[packages/form-core/src/FormApi.ts:1135](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1135) - -*** - -### reset() - -```ts -reset(values?, opts?): void -``` - -Resets the form state to the default values. -If values are provided, the form will be reset to those values instead and the default values will be updated. - -#### Parameters - -• **values?**: `TFormData` - -Optional values to reset the form to. - -• **opts?** - -Optional options to control the reset behavior. - -• **opts.keepDefaultValues?**: `boolean` - -#### Returns - -`void` - -#### Defined in - -[packages/form-core/src/FormApi.ts:551](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L551) - -*** - -### resetFieldMeta() - -```ts -resetFieldMeta(fieldMeta): Record -``` - -#### Type Parameters - -• **TField** *extends* `string` \| `number` - -#### Parameters - -• **fieldMeta**: `Record`\<`TField`, [`FieldMeta`](../type-aliases/fieldmeta.md)\> - -#### Returns - -`Record`\<`TField`, [`FieldMeta`](../type-aliases/fieldmeta.md)\> - -#### Defined in - -[packages/form-core/src/FormApi.ts:1021](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1021) - -*** - -### setErrorMap() - -```ts -setErrorMap(errorMap): void -``` - -Updates the form's errorMap - -#### Parameters - -• **errorMap**: `ValidationErrorMap` - -#### Returns - -`void` - -#### Defined in - -[packages/form-core/src/FormApi.ts:1250](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1250) - -*** - -### setFieldMeta() - -```ts -setFieldMeta(field, updater): void -``` - -Updates the metadata of the specified field. - -#### Type Parameters - -• **TField** *extends* `string` \| `number` - -#### Parameters - -• **field**: `TField` - -• **updater**: [`Updater`](../type-aliases/updater.md)\<[`FieldMeta`](../type-aliases/fieldmeta.md)\> - -#### Returns - -`void` - -#### Defined in - -[packages/form-core/src/FormApi.ts:1006](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1006) - -*** - -### setFieldValue() - -```ts -setFieldValue( - field, - updater, - opts?): void -``` - -Sets the value of the specified field and optionally updates the touched state. - -#### Type Parameters - -• **TField** *extends* `string` \| `number` - -#### Parameters - -• **field**: `TField` - -• **updater**: [`Updater`](../type-aliases/updater.md)\<[`DeepValue`](../type-aliases/deepvalue.md)\<`TFormData`, `TField`, `IsNullable`\<`TFormData`\>\>\> - -• **opts?**: `UpdateMetaOptions` - -#### Returns - -`void` - -#### Defined in - -[packages/form-core/src/FormApi.ts:1045](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1045) - -*** - -### swapFieldValues() - -```ts -swapFieldValues( - field, - index1, - index2, - opts?): void -``` - -Swaps the values at the specified indices within an array field. - -#### Type Parameters - -• **TField** *extends* `string` \| `number` - -#### Parameters - -• **field**: `TField` - -• **index1**: `number` - -• **index2**: `number` - -• **opts?**: `UpdateMetaOptions` - -#### Returns - -`void` - -#### Defined in - -[packages/form-core/src/FormApi.ts:1200](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1200) - -*** - -### update() - -```ts -update(options?): void -``` - -Updates the form options and form state. - -#### Parameters - -• **options?**: [`FormOptions`](../interfaces/formoptions.md)\<`TFormData`, `TFormValidator`\> - -#### Returns - -`void` - -#### Defined in - -[packages/form-core/src/FormApi.ts:507](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L507) - -*** - -### validateAllFields() - -```ts -validateAllFields(cause): Promise -``` - -Validates form and all fields in using the correct handlers for a given validation cause. - -#### Parameters - -• **cause**: `ValidationCause` - -#### Returns - -`Promise`\<[`ValidationError`](../type-aliases/validationerror.md)[]\> - -#### Defined in - -[packages/form-core/src/FormApi.ts:577](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L577) - -*** - -### validateArrayFieldsStartingFrom() - -```ts -validateArrayFieldsStartingFrom( - field, - index, -cause): Promise -``` - -Validates the children of a specified array in the form starting from a given index until the end using the correct handlers for a given validation type. - -#### Type Parameters - -• **TField** *extends* `string` \| `number` - -#### Parameters - -• **field**: `TField` - -• **index**: `number` - -• **cause**: `ValidationCause` - -#### Returns - -`Promise`\<[`ValidationError`](../type-aliases/validationerror.md)[]\> - -#### Defined in - -[packages/form-core/src/FormApi.ts:611](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L611) - -*** - -### validateField() - -```ts -validateField(field, cause): ValidationError[] | Promise -``` - -Validates a specified field in the form using the correct handlers for a given validation type. - -#### Type Parameters - -• **TField** *extends* `string` \| `number` - -#### Parameters - -• **field**: `TField` - -• **cause**: `ValidationCause` - -#### Returns - -[`ValidationError`](../type-aliases/validationerror.md)[] \| `Promise`\<[`ValidationError`](../type-aliases/validationerror.md)[]\> - -#### Defined in - -[packages/form-core/src/FormApi.ts:650](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L650) diff --git a/docs/reference/functions/formoptions.md b/docs/reference/functions/formoptions.md deleted file mode 100644 index 66f6aa695b..0000000000 --- a/docs/reference/functions/formoptions.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -id: formOptions -title: formOptions ---- - -# Function: formOptions() - -```ts -function formOptions(defaultOpts?): undefined | FormOptions -``` - -## Type Parameters - -• **TFormData** - -• **TFormValidator** *extends* `undefined` \| `Validator`\<`TFormData`, `unknown`\> = `undefined` - -## Parameters - -• **defaultOpts?**: [`FormOptions`](../interfaces/formoptions.md)\<`TFormData`, `TFormValidator`\> - -## Returns - -`undefined` \| [`FormOptions`](../interfaces/formoptions.md)\<`TFormData`, `TFormValidator`\> - -## Defined in - -[packages/form-core/src/formOptions.ts:4](https://github.com/TanStack/form/blob/main/packages/form-core/src/formOptions.ts#L4) diff --git a/docs/reference/functions/mergeform.md b/docs/reference/functions/mergeform.md deleted file mode 100644 index 16c15c5f66..0000000000 --- a/docs/reference/functions/mergeform.md +++ /dev/null @@ -1,30 +0,0 @@ ---- -id: mergeForm -title: mergeForm ---- - -# Function: mergeForm() - -```ts -function mergeForm(baseForm, state): FormApi, NoInfer> -``` - -## Type Parameters - -• **TFormData** - -• **TFormValidator** *extends* `undefined` \| `Validator`\<`TFormData`, `unknown`\> = `undefined` - -## Parameters - -• **baseForm**: [`FormApi`](../classes/formapi.md)\<`NoInfer`\<`TFormData`\>, `NoInfer`\<`TFormValidator`\>\> - -• **state**: `Partial`\<[`FormState`](../type-aliases/formstate.md)\<`TFormData`\>\> - -## Returns - -[`FormApi`](../classes/formapi.md)\<`NoInfer`\<`TFormData`\>, `NoInfer`\<`TFormValidator`\>\> - -## Defined in - -[packages/form-core/src/mergeForm.ts:36](https://github.com/TanStack/form/blob/main/packages/form-core/src/mergeForm.ts#L36) diff --git a/docs/reference/index.md b/docs/reference/index.md deleted file mode 100644 index fc070f045c..0000000000 --- a/docs/reference/index.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: "@tanstack/form-core" -title: "@tanstack/form-core" ---- - -# @tanstack/form-core - -## Classes - -- [FieldApi](classes/fieldapi.md) -- [FormApi](classes/formapi.md) - -## Interfaces - -- [FieldApiOptions](interfaces/fieldapioptions.md) -- [FieldOptions](interfaces/fieldoptions.md) -- [FieldValidators](interfaces/fieldvalidators.md) -- [FormOptions](interfaces/formoptions.md) -- [FormValidators](interfaces/formvalidators.md) - -## Type Aliases - -- [BaseFormState](type-aliases/baseformstate.md) -- [DeepKeys](type-aliases/deepkeys.md) -- [DeepValue](type-aliases/deepvalue.md) -- [DerivedFormState](type-aliases/derivedformstate.md) -- [FieldInfo](type-aliases/fieldinfo.md) -- [FieldMeta](type-aliases/fieldmeta.md) -- [FieldsErrorMapFromValidator](type-aliases/fieldserrormapfromvalidator.md) -- [FieldState](type-aliases/fieldstate.md) -- [FormState](type-aliases/formstate.md) -- [FormValidateFn](type-aliases/formvalidatefn.md) -- [FormValidator](type-aliases/formvalidator.md) -- [Updater](type-aliases/updater.md) -- [UpdaterFn](type-aliases/updaterfn.md) -- [ValidationError](type-aliases/validationerror.md) -- [ValidationMeta](type-aliases/validationmeta.md) -- [ValidationSource](type-aliases/validationsource.md) - -## Functions - -- [formOptions](functions/formoptions.md) -- [mergeForm](functions/mergeform.md) diff --git a/docs/reference/interfaces/fieldapioptions.md b/docs/reference/interfaces/fieldapioptions.md deleted file mode 100644 index 8f583b4e0f..0000000000 --- a/docs/reference/interfaces/fieldapioptions.md +++ /dev/null @@ -1,162 +0,0 @@ ---- -id: FieldApiOptions -title: FieldApiOptions ---- - -# Interface: FieldApiOptions\ - -An object type representing the required options for the FieldApi class. - -## Extends - -- [`FieldOptions`](fieldoptions.md)\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> - -## Type Parameters - -• **TParentData** - -• **TName** *extends* [`DeepKeys`](../type-aliases/deepkeys.md)\<`TParentData`\> - -• **TFieldValidator** *extends* `Validator`\<[`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\>, `unknown`\> \| `undefined` = `undefined` - -• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` - -• **TData** *extends* [`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\> = [`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\> - -## Properties - -### asyncAlways? - -```ts -optional asyncAlways: boolean; -``` - -If `true`, always run async validation, even if there are errors emitted during synchronous validation. - -#### Inherited from - -[`FieldOptions`](fieldoptions.md).[`asyncAlways`](FieldOptions.md#asyncalways) - -#### Defined in - -[packages/form-core/src/FieldApi.ts:287](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L287) - -*** - -### asyncDebounceMs? - -```ts -optional asyncDebounceMs: number; -``` - -The default time to debounce async validation if there is not a more specific debounce time passed. - -#### Inherited from - -[`FieldOptions`](fieldoptions.md).[`asyncDebounceMs`](FieldOptions.md#asyncdebouncems) - -#### Defined in - -[packages/form-core/src/FieldApi.ts:283](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L283) - -*** - -### defaultMeta? - -```ts -optional defaultMeta: Partial; -``` - -An optional object with default metadata for the field. - -#### Inherited from - -[`FieldOptions`](fieldoptions.md).[`defaultMeta`](FieldOptions.md#defaultmeta) - -#### Defined in - -[packages/form-core/src/FieldApi.ts:305](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L305) - -*** - -### defaultValue? - -```ts -optional defaultValue: NoInfer; -``` - -An optional default value for the field. - -#### Inherited from - -[`FieldOptions`](fieldoptions.md).[`defaultValue`](FieldOptions.md#defaultvalue) - -#### Defined in - -[packages/form-core/src/FieldApi.ts:279](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L279) - -*** - -### form - -```ts -form: FormApi; -``` - -#### Defined in - -[packages/form-core/src/FieldApi.ts:328](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L328) - -*** - -### name - -```ts -name: TName; -``` - -The field name. The type will be `DeepKeys` to ensure your name is a deep key of the parent dataset. - -#### Inherited from - -[`FieldOptions`](fieldoptions.md).[`name`](FieldOptions.md#name) - -#### Defined in - -[packages/form-core/src/FieldApi.ts:275](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L275) - -*** - -### validatorAdapter? - -```ts -optional validatorAdapter: TFieldValidator; -``` - -A validator provided by an extension, like `yupValidator` from `@tanstack/yup-form-adapter` - -#### Inherited from - -[`FieldOptions`](fieldoptions.md).[`validatorAdapter`](FieldOptions.md#validatoradapter) - -#### Defined in - -[packages/form-core/src/FieldApi.ts:291](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L291) - -*** - -### validators? - -```ts -optional validators: FieldValidators; -``` - -A list of validators to pass to the field - -#### Inherited from - -[`FieldOptions`](fieldoptions.md).[`validators`](FieldOptions.md#validators) - -#### Defined in - -[packages/form-core/src/FieldApi.ts:295](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L295) diff --git a/docs/reference/interfaces/fieldoptions.md b/docs/reference/interfaces/fieldoptions.md deleted file mode 100644 index a4103fe259..0000000000 --- a/docs/reference/interfaces/fieldoptions.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -id: FieldOptions -title: FieldOptions ---- - -# Interface: FieldOptions\ - -An object type representing the options for a field in a form. - -## Extended by - -- [`FieldApiOptions`](fieldapioptions.md) - -## Type Parameters - -• **TParentData** - -• **TName** *extends* [`DeepKeys`](../type-aliases/deepkeys.md)\<`TParentData`\> - -• **TFieldValidator** *extends* `Validator`\<[`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\>, `unknown`\> \| `undefined` = `undefined` - -• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` - -• **TData** *extends* [`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\> = [`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\> - -## Properties - -### asyncAlways? - -```ts -optional asyncAlways: boolean; -``` - -If `true`, always run async validation, even if there are errors emitted during synchronous validation. - -#### Defined in - -[packages/form-core/src/FieldApi.ts:287](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L287) - -*** - -### asyncDebounceMs? - -```ts -optional asyncDebounceMs: number; -``` - -The default time to debounce async validation if there is not a more specific debounce time passed. - -#### Defined in - -[packages/form-core/src/FieldApi.ts:283](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L283) - -*** - -### defaultMeta? - -```ts -optional defaultMeta: Partial; -``` - -An optional object with default metadata for the field. - -#### Defined in - -[packages/form-core/src/FieldApi.ts:305](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L305) - -*** - -### defaultValue? - -```ts -optional defaultValue: NoInfer; -``` - -An optional default value for the field. - -#### Defined in - -[packages/form-core/src/FieldApi.ts:279](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L279) - -*** - -### name - -```ts -name: TName; -``` - -The field name. The type will be `DeepKeys` to ensure your name is a deep key of the parent dataset. - -#### Defined in - -[packages/form-core/src/FieldApi.ts:275](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L275) - -*** - -### validatorAdapter? - -```ts -optional validatorAdapter: TFieldValidator; -``` - -A validator provided by an extension, like `yupValidator` from `@tanstack/yup-form-adapter` - -#### Defined in - -[packages/form-core/src/FieldApi.ts:291](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L291) - -*** - -### validators? - -```ts -optional validators: FieldValidators; -``` - -A list of validators to pass to the field - -#### Defined in - -[packages/form-core/src/FieldApi.ts:295](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L295) diff --git a/docs/reference/interfaces/fieldvalidators.md b/docs/reference/interfaces/fieldvalidators.md deleted file mode 100644 index 57f9f54c26..0000000000 --- a/docs/reference/interfaces/fieldvalidators.md +++ /dev/null @@ -1,218 +0,0 @@ ---- -id: FieldValidators -title: FieldValidators ---- - -# Interface: FieldValidators\ - -## Type Parameters - -• **TParentData** - -• **TName** *extends* [`DeepKeys`](../type-aliases/deepkeys.md)\<`TParentData`\> - -• **TFieldValidator** *extends* `Validator`\<[`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\>, `unknown`\> \| `undefined` = `undefined` - -• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` - -• **TData** *extends* [`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\> = [`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\> - -## Properties - -### onBlur? - -```ts -optional onBlur: FieldValidateOrFn; -``` - -An optional function, that runs on the blur event of input. -If `validatorAdapter` is passed, this may also accept a property from the respective adapter - -#### Example - -```ts -z.string().min(1) // if `zodAdapter` is passed -``` - -#### Defined in - -[packages/form-core/src/FieldApi.ts:199](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L199) - -*** - -### onBlurAsync? - -```ts -optional onBlurAsync: FieldAsyncValidateOrFn; -``` - -An optional property similar to `onBlur` but async validation. If `validatorAdapter` -is passed, this may also accept a property from the respective adapter - -#### Example - -```ts -z.string().refine(async (val) => val.length > 3, { message: 'Testing 123' }) // if `zodAdapter` is passed -``` - -#### Defined in - -[packages/form-core/src/FieldApi.ts:212](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L212) - -*** - -### onBlurAsyncDebounceMs? - -```ts -optional onBlurAsyncDebounceMs: number; -``` - -An optional number to represent how long the `onBlurAsync` should wait before running - -If set to a number larger than 0, will debounce the async validation event by this length of time in milliseconds - -#### Defined in - -[packages/form-core/src/FieldApi.ts:225](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L225) - -*** - -### onBlurListenTo? - -```ts -optional onBlurListenTo: unknown extends TParentData ? string : TParentData extends readonly any[] & IsTuple ? PrefixTupleAccessor, AllowedIndexes, never>, []> : TParentData extends any[] ? PrefixArrayAccessor, [any]> : TParentData extends Date ? never : TParentData extends object ? PrefixObjectAccessor, []> : TParentData extends string | number | bigint | boolean ? "" : never[]; -``` - -An optional list of field names that should trigger this field's `onBlur` and `onBlurAsync` events when its value changes - -#### Defined in - -[packages/form-core/src/FieldApi.ts:229](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L229) - -*** - -### onChange? - -```ts -optional onChange: FieldValidateOrFn; -``` - -An optional property that takes a `ValidateFn` which is a generic of `TData` and `TParentData`. -If `validatorAdapter` is passed, this may also accept a property from the respective adapter - -#### Example - -```ts -z.string().min(1) // if `zodAdapter` is passed -``` - -#### Defined in - -[packages/form-core/src/FieldApi.ts:163](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L163) - -*** - -### onChangeAsync? - -```ts -optional onChangeAsync: FieldAsyncValidateOrFn; -``` - -An optional property similar to `onChange` but async validation. If `validatorAdapter` -is passed, this may also accept a property from the respective adapter - -#### Example - -```ts -z.string().refine(async (val) => val.length > 3, { message: 'Testing 123' }) // if `zodAdapter` is passed -``` - -#### Defined in - -[packages/form-core/src/FieldApi.ts:176](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L176) - -*** - -### onChangeAsyncDebounceMs? - -```ts -optional onChangeAsyncDebounceMs: number; -``` - -An optional number to represent how long the `onChangeAsync` should wait before running - -If set to a number larger than 0, will debounce the async validation event by this length of time in milliseconds - -#### Defined in - -[packages/form-core/src/FieldApi.ts:188](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L188) - -*** - -### onChangeListenTo? - -```ts -optional onChangeListenTo: unknown extends TParentData ? string : TParentData extends readonly any[] & IsTuple ? PrefixTupleAccessor, AllowedIndexes, never>, []> : TParentData extends any[] ? PrefixArrayAccessor, [any]> : TParentData extends Date ? never : TParentData extends object ? PrefixObjectAccessor, []> : TParentData extends string | number | bigint | boolean ? "" : never[]; -``` - -An optional list of field names that should trigger this field's `onChange` and `onChangeAsync` events when its value changes - -#### Defined in - -[packages/form-core/src/FieldApi.ts:192](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L192) - -*** - -### onMount? - -```ts -optional onMount: FieldValidateOrFn; -``` - -An optional function that takes a param of `formApi` which is a generic type of `TData` and `TParentData` - -#### Defined in - -[packages/form-core/src/FieldApi.ts:150](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L150) - -*** - -### onSubmit? - -```ts -optional onSubmit: FieldValidateOrFn; -``` - -An optional function, that runs on the submit event of form. -If `validatorAdapter` is passed, this may also accept a property from the respective adapter - -#### Example - -```ts -z.string().min(1) // if `zodAdapter` is passed -``` - -#### Defined in - -[packages/form-core/src/FieldApi.ts:236](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L236) - -*** - -### onSubmitAsync? - -```ts -optional onSubmitAsync: FieldAsyncValidateOrFn; -``` - -An optional property similar to `onSubmit` but async validation. If `validatorAdapter` -is passed, this may also accept a property from the respective adapter - -#### Example - -```ts -z.string().refine(async (val) => val.length > 3, { message: 'Testing 123' }) // if `zodAdapter` is passed -``` - -#### Defined in - -[packages/form-core/src/FieldApi.ts:249](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L249) diff --git a/docs/reference/interfaces/formoptions.md b/docs/reference/interfaces/formoptions.md deleted file mode 100644 index c3ba09c519..0000000000 --- a/docs/reference/interfaces/formoptions.md +++ /dev/null @@ -1,162 +0,0 @@ ---- -id: FormOptions -title: FormOptions ---- - -# Interface: FormOptions\ - -An object representing the options for a form. - -## Type Parameters - -• **TFormData** - -• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined` - -## Properties - -### asyncAlways? - -```ts -optional asyncAlways: boolean; -``` - -If true, always run async validation, even when sync validation has produced an error. Defaults to undefined. - -#### Defined in - -[packages/form-core/src/FormApi.ts:154](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L154) - -*** - -### asyncDebounceMs? - -```ts -optional asyncDebounceMs: number; -``` - -Optional time in milliseconds if you want to introduce a delay before firing off an async action. - -#### Defined in - -[packages/form-core/src/FormApi.ts:158](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L158) - -*** - -### defaultState? - -```ts -optional defaultState: Partial>; -``` - -The default state for the form. - -#### Defined in - -[packages/form-core/src/FormApi.ts:150](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L150) - -*** - -### defaultValues? - -```ts -optional defaultValues: TFormData; -``` - -Set initial values for your form. - -#### Defined in - -[packages/form-core/src/FormApi.ts:146](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L146) - -*** - -### onSubmit()? - -```ts -optional onSubmit: (props) => any; -``` - -A function to be called when the form is submitted, what should happen once the user submits a valid form returns `any` or a promise `Promise` - -#### Parameters - -• **props** - -• **props.formApi**: [`FormApi`](../classes/formapi.md)\<`TFormData`, `TFormValidator`\> - -• **props.value**: `TFormData` - -#### Returns - -`any` - -#### Defined in - -[packages/form-core/src/FormApi.ts:170](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L170) - -*** - -### onSubmitInvalid()? - -```ts -optional onSubmitInvalid: (props) => void; -``` - -Specify an action for scenarios where the user tries to submit an invalid form. - -#### Parameters - -• **props** - -• **props.formApi**: [`FormApi`](../classes/formapi.md)\<`TFormData`, `TFormValidator`\> - -• **props.value**: `TFormData` - -#### Returns - -`void` - -#### Defined in - -[packages/form-core/src/FormApi.ts:177](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L177) - -*** - -### transform? - -```ts -optional transform: FormTransform; -``` - -#### Defined in - -[packages/form-core/src/FormApi.ts:181](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L181) - -*** - -### validatorAdapter? - -```ts -optional validatorAdapter: TFormValidator; -``` - -A validator adapter to support usage of extra validation types (IE: Zod, Yup, or Valibot usage) - -#### Defined in - -[packages/form-core/src/FormApi.ts:162](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L162) - -*** - -### validators? - -```ts -optional validators: FormValidators; -``` - -A list of validators to pass to the form - -#### Defined in - -[packages/form-core/src/FormApi.ts:166](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L166) diff --git a/docs/reference/interfaces/formvalidators.md b/docs/reference/interfaces/formvalidators.md deleted file mode 100644 index 9f750dc52c..0000000000 --- a/docs/reference/interfaces/formvalidators.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -id: FormValidators -title: FormValidators ---- - -# Interface: FormValidators\ - -## Type Parameters - -• **TFormData** - -• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined` - -## Properties - -### onBlur? - -```ts -optional onBlur: FormValidateOrFn; -``` - -Optional function that validates the form data when a field loses focus, returns a `FormValidationError` - -#### Defined in - -[packages/form-core/src/FormApi.ts:110](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L110) - -*** - -### onBlurAsync? - -```ts -optional onBlurAsync: FormAsyncValidateOrFn; -``` - -Optional onBlur asynchronous validation method for when a field loses focus returns a ` FormValidationError` or a promise of `Promise` - -#### Defined in - -[packages/form-core/src/FormApi.ts:114](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L114) - -*** - -### onBlurAsyncDebounceMs? - -```ts -optional onBlurAsyncDebounceMs: number; -``` - -The default time in milliseconds that if set to a number larger than 0, will debounce the async validation event by this length of time in milliseconds. - -#### Defined in - -[packages/form-core/src/FormApi.ts:118](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L118) - -*** - -### onChange? - -```ts -optional onChange: FormValidateOrFn; -``` - -Optional function that checks the validity of your data whenever a value changes - -#### Defined in - -[packages/form-core/src/FormApi.ts:98](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L98) - -*** - -### onChangeAsync? - -```ts -optional onChangeAsync: FormAsyncValidateOrFn; -``` - -Optional onChange asynchronous counterpart to onChange. Useful for more complex validation logic that might involve server requests. - -#### Defined in - -[packages/form-core/src/FormApi.ts:102](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L102) - -*** - -### onChangeAsyncDebounceMs? - -```ts -optional onChangeAsyncDebounceMs: number; -``` - -The default time in milliseconds that if set to a number larger than 0, will debounce the async validation event by this length of time in milliseconds. - -#### Defined in - -[packages/form-core/src/FormApi.ts:106](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L106) - -*** - -### onMount? - -```ts -optional onMount: FormValidateOrFn; -``` - -Optional function that fires as soon as the component mounts. - -#### Defined in - -[packages/form-core/src/FormApi.ts:94](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L94) - -*** - -### onSubmit? - -```ts -optional onSubmit: FormValidateOrFn; -``` - -#### Defined in - -[packages/form-core/src/FormApi.ts:119](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L119) - -*** - -### onSubmitAsync? - -```ts -optional onSubmitAsync: FormAsyncValidateOrFn; -``` - -#### Defined in - -[packages/form-core/src/FormApi.ts:120](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L120) diff --git a/docs/reference/type-aliases/baseformstate.md b/docs/reference/type-aliases/baseformstate.md deleted file mode 100644 index 0122001bec..0000000000 --- a/docs/reference/type-aliases/baseformstate.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: BaseFormState -title: BaseFormState ---- - -# Type Alias: BaseFormState\ - -```ts -type BaseFormState: object; -``` - -An object representing the current state of the form. - -## Type Parameters - -• **TFormData** - -## Type declaration - -### errorMap - -```ts -errorMap: FormValidationErrorMap; -``` - -The error map for the form itself. - -### fieldMeta - -```ts -fieldMeta: Record, FieldMeta>; -``` - -A record of field metadata for each field in the form. - -### isSubmitted - -```ts -isSubmitted: boolean; -``` - -A boolean indicating if the form has been submitted. - -### isSubmitting - -```ts -isSubmitting: boolean; -``` - -A boolean indicating if the form is currently in the process of being submitted after `handleSubmit` is called. - -Goes back to `false` when submission completes for one of the following reasons: -- the validation step returned errors. -- the `onSubmit` function has completed. - -Note: if you're running async operations in your `onSubmit` function make sure to await them to ensure `isSubmitting` is set to `false` only when the async operation completes. - -This is useful for displaying loading indicators or disabling form inputs during submission. - -### isValidating - -```ts -isValidating: boolean; -``` - -A boolean indicating if the form or any of its fields are currently validating. - -### submissionAttempts - -```ts -submissionAttempts: number; -``` - -A counter for tracking the number of submission attempts. - -### validationMetaMap - -```ts -validationMetaMap: Record; -``` - -An internal mechanism used for keeping track of validation logic in a form. - -### values - -```ts -values: TFormData; -``` - -The current values of the form fields. - -## Defined in - -[packages/form-core/src/FormApi.ts:219](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L219) diff --git a/docs/reference/type-aliases/deepkeys.md b/docs/reference/type-aliases/deepkeys.md deleted file mode 100644 index a97dd26a04..0000000000 --- a/docs/reference/type-aliases/deepkeys.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -id: DeepKeys -title: DeepKeys ---- - -# Type Alias: DeepKeys\ - -```ts -type DeepKeys: TDepth["length"] extends 5 ? never : unknown extends T ? PrefixFromDepth : T extends readonly any[] & IsTuple ? PrefixTupleAccessor, TDepth> : T extends any[] ? PrefixArrayAccessor : T extends Date ? never : T extends object ? PrefixObjectAccessor : T extends string | number | boolean | bigint ? "" : never; -``` - -The keys of an object or array, deeply nested. - -## Type Parameters - -• **T** - -• **TDepth** *extends* `any`[] = [] - -## Defined in - -[packages/form-core/src/util-types.ts:85](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L85) diff --git a/docs/reference/type-aliases/deepvalue.md b/docs/reference/type-aliases/deepvalue.md deleted file mode 100644 index e2f765ee4f..0000000000 --- a/docs/reference/type-aliases/deepvalue.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -id: DeepValue -title: DeepValue ---- - -# Type Alias: DeepValue\ - -```ts -type DeepValue: unknown extends TValue ? TValue : TValue extends ReadonlyArray ? TAccessor extends `[${infer TBrackets}].${infer TAfter}` ? DeepValue, TAfter> : TAccessor extends `[${infer TBrackets}]` ? DeepValue : TAccessor extends keyof TValue ? TValue[TAccessor] : TValue[TAccessor & number] : TValue extends Record ? TAccessor extends `${infer TBefore}[${infer TEverythingElse}` ? DeepValue, `[${TEverythingElse}`> : TAccessor extends `[${infer TBrackets}]` ? DeepValue : TAccessor extends `${infer TBefore}.${infer TAfter}` ? DeepValue, TAfter> : TAccessor extends string ? TNullable extends true ? Nullable : TValue[TAccessor] : never : never; -``` - -Infer the type of a deeply nested property within an object or an array. - -## Type Parameters - -• **TValue** - -• **TAccessor** - -• **TNullable** *extends* `boolean` = `IsNullable`\<`TValue`\> - -## Defined in - -[packages/form-core/src/util-types.ts:109](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L109) diff --git a/docs/reference/type-aliases/derivedformstate.md b/docs/reference/type-aliases/derivedformstate.md deleted file mode 100644 index 49bb4739d1..0000000000 --- a/docs/reference/type-aliases/derivedformstate.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -id: DerivedFormState -title: DerivedFormState ---- - -# Type Alias: DerivedFormState - -```ts -type DerivedFormState: object; -``` - -## Type declaration - -### canSubmit - -```ts -canSubmit: boolean; -``` - -A boolean indicating if the form can be submitted based on its current state. - -### errors - -```ts -errors: ValidationError[]; -``` - -The error array for the form itself. - -### isBlurred - -```ts -isBlurred: boolean; -``` - -A boolean indicating if any of the form fields have been blurred. - -### isDirty - -```ts -isDirty: boolean; -``` - -A boolean indicating if any of the form's fields' values have been modified by the user. `True` if the user have modified at least one of the fields. Opposite of `isPristine`. - -### isFieldsValid - -```ts -isFieldsValid: boolean; -``` - -A boolean indicating if all the form fields are valid. - -### isFieldsValidating - -```ts -isFieldsValidating: boolean; -``` - -A boolean indicating if any of the form fields are currently validating. - -### isFormValid - -```ts -isFormValid: boolean; -``` - -A boolean indicating if the form is valid. - -### isFormValidating - -```ts -isFormValidating: boolean; -``` - -A boolean indicating if the form is currently validating. - -### isPristine - -```ts -isPristine: boolean; -``` - -A boolean indicating if none of the form's fields' values have been modified by the user. `True` if the user have not modified any of the fields. Opposite of `isDirty`. - -### isTouched - -```ts -isTouched: boolean; -``` - -A boolean indicating if any of the form fields have been touched. - -### isValid - -```ts -isValid: boolean; -``` - -A boolean indicating if the form and all its fields are valid. - -## Defined in - -[packages/form-core/src/FormApi.ts:263](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L263) diff --git a/docs/reference/type-aliases/fieldinfo.md b/docs/reference/type-aliases/fieldinfo.md deleted file mode 100644 index 1f11721c64..0000000000 --- a/docs/reference/type-aliases/fieldinfo.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -id: FieldInfo -title: FieldInfo ---- - -# Type Alias: FieldInfo\ - -```ts -type FieldInfo: object; -``` - -An object representing the field information for a specific field within the form. - -## Type Parameters - -• **TFormData** - -• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined` - -## Type declaration - -### instance - -```ts -instance: FieldApi | undefined, TFormValidator> | null; -``` - -An instance of the FieldAPI. - -### validationMetaMap - -```ts -validationMetaMap: Record; -``` - -A record of field validation internal handling. - -## Defined in - -[packages/form-core/src/FormApi.ts:197](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L197) diff --git a/docs/reference/type-aliases/fieldmeta.md b/docs/reference/type-aliases/fieldmeta.md deleted file mode 100644 index 82277a280a..0000000000 --- a/docs/reference/type-aliases/fieldmeta.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -id: FieldMeta -title: FieldMeta ---- - -# Type Alias: FieldMeta - -```ts -type FieldMeta: object; -``` - -An object type representing the metadata of a field in a form. - -## Type declaration - -### errorMap - -```ts -errorMap: ValidationErrorMap; -``` - -A map of errors related to the field value. - -### errors - -```ts -errors: ValidationError[]; -``` - -An array of errors related to the field value. - -### isBlurred - -```ts -isBlurred: boolean; -``` - -A flag indicating whether the field has been blurred. - -### isDirty - -```ts -isDirty: boolean; -``` - -A flag that is `true` if the field's value has been modified by the user. Opposite of `isPristine`. - -### isPristine - -```ts -isPristine: boolean; -``` - -A flag that is `true` if the field's value has not been modified by the user. Opposite of `isDirty`. - -### isTouched - -```ts -isTouched: boolean; -``` - -A flag indicating whether the field has been touched. - -### isValidating - -```ts -isValidating: boolean; -``` - -A flag indicating whether the field is currently being validated. - -## Defined in - -[packages/form-core/src/FieldApi.ts:334](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L334) diff --git a/docs/reference/type-aliases/fieldserrormapfromvalidator.md b/docs/reference/type-aliases/fieldserrormapfromvalidator.md deleted file mode 100644 index a9416909d6..0000000000 --- a/docs/reference/type-aliases/fieldserrormapfromvalidator.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -id: FieldsErrorMapFromValidator -title: FieldsErrorMapFromValidator ---- - -# Type Alias: FieldsErrorMapFromValidator\ - -```ts -type FieldsErrorMapFromValidator: Partial, ValidationErrorMap>>; -``` - -## Type Parameters - -• **TFormData** - -## Defined in - -[packages/form-core/src/FormApi.ts:26](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L26) diff --git a/docs/reference/type-aliases/fieldstate.md b/docs/reference/type-aliases/fieldstate.md deleted file mode 100644 index c54a8fb32a..0000000000 --- a/docs/reference/type-aliases/fieldstate.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -id: FieldState -title: FieldState ---- - -# Type Alias: FieldState\ - -```ts -type FieldState: object; -``` - -An object type representing the state of a field. - -## Type Parameters - -• **TData** - -## Type declaration - -### meta - -```ts -meta: FieldMeta; -``` - -The current metadata of the field. - -### value - -```ts -value: TData; -``` - -The current value of the field. - -## Defined in - -[packages/form-core/src/FieldApi.ts:368](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L368) diff --git a/docs/reference/type-aliases/formstate.md b/docs/reference/type-aliases/formstate.md deleted file mode 100644 index 0b522c6f0e..0000000000 --- a/docs/reference/type-aliases/formstate.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -id: FormState -title: FormState ---- - -# Type Alias: FormState\ - -```ts -type FormState: BaseFormState & DerivedFormState; -``` - -## Type Parameters - -• **TFormData** - -## Defined in - -[packages/form-core/src/FormApi.ts:310](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L310) diff --git a/docs/reference/type-aliases/formvalidatefn.md b/docs/reference/type-aliases/formvalidatefn.md deleted file mode 100644 index 03546e3268..0000000000 --- a/docs/reference/type-aliases/formvalidatefn.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -id: FormValidateFn -title: FormValidateFn ---- - -# Type Alias: FormValidateFn()\ - -```ts -type FormValidateFn: (props) => FormValidationError; -``` - -## Type Parameters - -• **TFormData** - -• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined` - -## Parameters - -• **props** - -• **props.formApi**: [`FormApi`](../classes/formapi.md)\<`TFormData`, `TFormValidator`\> - -• **props.value**: `TFormData` - -## Returns - -`FormValidationError`\<`TFormData`\> - -## Defined in - -[packages/form-core/src/FormApi.ts:30](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L30) diff --git a/docs/reference/type-aliases/formvalidator.md b/docs/reference/type-aliases/formvalidator.md deleted file mode 100644 index 814c27cda7..0000000000 --- a/docs/reference/type-aliases/formvalidator.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -id: FormValidator -title: FormValidator ---- - -# Type Alias: FormValidator\ - -```ts -type FormValidator: object; -``` - -## Type Parameters - -• **TFormData** - -• **TType** - -• **TFn** = `unknown` - -## Type declaration - -### validate() - -#### Parameters - -• **options** - -• **options.value**: `TType` - -• **fn**: `TFn` - -#### Returns - -[`ValidationError`](validationerror.md) - -### validateAsync() - -#### Parameters - -• **options** - -• **options.value**: `TType` - -• **fn**: `TFn` - -#### Returns - -`Promise`\<`FormValidationError`\<`TFormData`\>\> - -## Defined in - -[packages/form-core/src/FormApi.ts:61](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L61) diff --git a/docs/reference/type-aliases/updater.md b/docs/reference/type-aliases/updater.md deleted file mode 100644 index 01f7919da9..0000000000 --- a/docs/reference/type-aliases/updater.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -id: Updater -title: Updater ---- - -# Type Alias: Updater\ - -```ts -type Updater: TOutput | UpdaterFn; -``` - -## Type Parameters - -• **TInput** - -• **TOutput** = `TInput` - -## Defined in - -[packages/form-core/src/utils.ts:7](https://github.com/TanStack/form/blob/main/packages/form-core/src/utils.ts#L7) diff --git a/docs/reference/type-aliases/updaterfn.md b/docs/reference/type-aliases/updaterfn.md deleted file mode 100644 index b1b0c5a38b..0000000000 --- a/docs/reference/type-aliases/updaterfn.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -id: UpdaterFn -title: UpdaterFn ---- - -# Type Alias: UpdaterFn()\ - -```ts -type UpdaterFn: (input) => TOutput; -``` - -## Type Parameters - -• **TInput** - -• **TOutput** = `TInput` - -## Parameters - -• **input**: `TInput` - -## Returns - -`TOutput` - -## Defined in - -[packages/form-core/src/utils.ts:5](https://github.com/TanStack/form/blob/main/packages/form-core/src/utils.ts#L5) diff --git a/docs/reference/type-aliases/validationerror.md b/docs/reference/type-aliases/validationerror.md deleted file mode 100644 index a36d1d03f6..0000000000 --- a/docs/reference/type-aliases/validationerror.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -id: ValidationError -title: ValidationError ---- - -# Type Alias: ValidationError - -```ts -type ValidationError: undefined | false | null | string; -``` - -## Defined in - -[packages/form-core/src/types.ts:3](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L3) diff --git a/docs/reference/type-aliases/validationmeta.md b/docs/reference/type-aliases/validationmeta.md deleted file mode 100644 index d1195bde7c..0000000000 --- a/docs/reference/type-aliases/validationmeta.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -id: ValidationMeta -title: ValidationMeta ---- - -# Type Alias: ValidationMeta - -```ts -type ValidationMeta: object; -``` - -An object representing the validation metadata for a field. Not intended for public usage. - -## Type declaration - -### lastAbortController - -```ts -lastAbortController: AbortController; -``` - -An abort controller stored in memory to cancel previous async validation attempts. - -## Defined in - -[packages/form-core/src/FormApi.ts:187](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L187) diff --git a/docs/reference/type-aliases/validationsource.md b/docs/reference/type-aliases/validationsource.md deleted file mode 100644 index af0b0a62a4..0000000000 --- a/docs/reference/type-aliases/validationsource.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -id: ValidationSource -title: ValidationSource ---- - -# Type Alias: ValidationSource - -```ts -type ValidationSource: "form" | "field"; -``` - -## Defined in - -[packages/form-core/src/types.ts:5](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L5) From 052bf521b3225aeefa52b7d12872a1bc906ddfda Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Mon, 25 Nov 2024 08:06:08 -0800 Subject: [PATCH 08/38] Revert "chore: fix build" This reverts commit 4087d87f873a65c35ee94d6823eefd442036729d. --- packages/form-core/src/FormApi.ts | 34 +++++++++++-------------------- 1 file changed, 12 insertions(+), 22 deletions(-) diff --git a/packages/form-core/src/FormApi.ts b/packages/form-core/src/FormApi.ts index 756f5c54d2..3561596d8b 100644 --- a/packages/form-core/src/FormApi.ts +++ b/packages/form-core/src/FormApi.ts @@ -380,28 +380,6 @@ export class FormApi< }), ) - this.errorsStore = new Derived({ - deps: [this.baseStore], - fn: () => { - const { state } = this.baseStore - - const errors = Object.values(state.errorMap).reduce((prev, curr) => { - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - if (curr === undefined) return prev - if (typeof curr === 'string') { - prev.push(curr) - return prev - } else if (curr && isFormValidationError(curr)) { - prev.push(curr.form) - return prev - } - return prev - }, [] as ValidationError[]) - - return errors - }, - }) - this.store = new Derived>({ deps: [this.baseStore], fn: () => { @@ -441,6 +419,18 @@ export class FormApi< ) const isValidating = !!isFieldsValidating + const errors = Object.values(state.errorMap).reduce((prev, curr) => { + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + if (curr === undefined) return prev + if (typeof curr === 'string') { + prev.push(curr) + return prev + } else if (curr && isFormValidationError(curr)) { + prev.push(curr.form) + return prev + } + return prev + }, [] as ValidationError[]) const isFormValid = errors.length === 0 const isValid = isFieldsValid && isFormValid const canSubmit = From cd9a21ad04fb3a94a20fd4edc98c6c86c928ae2f Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Mon, 25 Nov 2024 16:07:24 +0000 Subject: [PATCH 09/38] ci: apply automated fixes and generate docs --- .../classes/tanstackformcontroller.md | 153 ++++ docs/framework/lit/reference/index.md | 10 + docs/reference/classes/fieldapi.md | 530 +++++++++++++ docs/reference/classes/formapi.md | 699 ++++++++++++++++++ docs/reference/functions/formoptions.md | 28 + docs/reference/functions/mergeform.md | 30 + docs/reference/index.md | 43 ++ docs/reference/interfaces/fieldapioptions.md | 162 ++++ docs/reference/interfaces/fieldoptions.md | 122 +++ docs/reference/interfaces/fieldvalidators.md | 218 ++++++ docs/reference/interfaces/formoptions.md | 162 ++++ docs/reference/interfaces/formvalidators.md | 134 ++++ docs/reference/type-aliases/baseformstate.md | 94 +++ docs/reference/type-aliases/deepkeys.md | 22 + docs/reference/type-aliases/deepvalue.md | 24 + .../type-aliases/derivedformstate.md | 104 +++ docs/reference/type-aliases/fieldinfo.md | 40 + docs/reference/type-aliases/fieldmeta.md | 74 ++ .../fieldserrormapfromvalidator.md | 18 + docs/reference/type-aliases/fieldstate.md | 38 + docs/reference/type-aliases/formstate.md | 18 + docs/reference/type-aliases/formvalidatefn.md | 32 + docs/reference/type-aliases/formvalidator.md | 52 ++ docs/reference/type-aliases/updater.md | 20 + docs/reference/type-aliases/updaterfn.md | 28 + .../reference/type-aliases/validationerror.md | 14 + docs/reference/type-aliases/validationmeta.md | 26 + .../type-aliases/validationsource.md | 14 + 28 files changed, 2909 insertions(+) create mode 100644 docs/framework/lit/reference/classes/tanstackformcontroller.md create mode 100644 docs/framework/lit/reference/index.md create mode 100644 docs/reference/classes/fieldapi.md create mode 100644 docs/reference/classes/formapi.md create mode 100644 docs/reference/functions/formoptions.md create mode 100644 docs/reference/functions/mergeform.md create mode 100644 docs/reference/index.md create mode 100644 docs/reference/interfaces/fieldapioptions.md create mode 100644 docs/reference/interfaces/fieldoptions.md create mode 100644 docs/reference/interfaces/fieldvalidators.md create mode 100644 docs/reference/interfaces/formoptions.md create mode 100644 docs/reference/interfaces/formvalidators.md create mode 100644 docs/reference/type-aliases/baseformstate.md create mode 100644 docs/reference/type-aliases/deepkeys.md create mode 100644 docs/reference/type-aliases/deepvalue.md create mode 100644 docs/reference/type-aliases/derivedformstate.md create mode 100644 docs/reference/type-aliases/fieldinfo.md create mode 100644 docs/reference/type-aliases/fieldmeta.md create mode 100644 docs/reference/type-aliases/fieldserrormapfromvalidator.md create mode 100644 docs/reference/type-aliases/fieldstate.md create mode 100644 docs/reference/type-aliases/formstate.md create mode 100644 docs/reference/type-aliases/formvalidatefn.md create mode 100644 docs/reference/type-aliases/formvalidator.md create mode 100644 docs/reference/type-aliases/updater.md create mode 100644 docs/reference/type-aliases/updaterfn.md create mode 100644 docs/reference/type-aliases/validationerror.md create mode 100644 docs/reference/type-aliases/validationmeta.md create mode 100644 docs/reference/type-aliases/validationsource.md diff --git a/docs/framework/lit/reference/classes/tanstackformcontroller.md b/docs/framework/lit/reference/classes/tanstackformcontroller.md new file mode 100644 index 0000000000..95e7e5ad1b --- /dev/null +++ b/docs/framework/lit/reference/classes/tanstackformcontroller.md @@ -0,0 +1,153 @@ +--- +id: TanStackFormController +title: TanStackFormController +--- + +# Class: TanStackFormController\ + +## Type Parameters + +• **TParentData** + +• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` + +## Implements + +- `ReactiveController` + +## Constructors + +### new TanStackFormController() + +```ts +new TanStackFormController(host, config?): TanStackFormController +``` + +#### Parameters + +• **host**: `ReactiveControllerHost` + +• **config?**: `FormOptions`\<`TParentData`, `TFormValidator`\> + +#### Returns + +[`TanStackFormController`](tanstackformcontroller.md)\<`TParentData`, `TFormValidator`\> + +#### Defined in + +[tanstack-form-controller.ts:93](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L93) + +## Properties + +### api + +```ts +api: FormApi; +``` + +#### Defined in + +[tanstack-form-controller.ts:91](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L91) + +## Methods + +### field() + +```ts +field(fieldConfig, render): object +``` + +#### Type Parameters + +• **TName** *extends* `string` \| `number` + +• **TFieldValidator** *extends* `undefined` \| `Validator`\<`DeepValue`\<`TParentData`, `TName`, `IsNullable`\<`TParentData`\>\>, `unknown`\> = `undefined` + +• **TData** = `DeepValue`\<`TParentData`, `TName`, `IsNullable`\<`TParentData`\>\> + +#### Parameters + +• **fieldConfig**: `FieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> + +• **render**: `renderCallback`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> + +#### Returns + +`object` + +##### values + +```ts +values: object; +``` + +##### values.form + +```ts +form: FormApi; +``` + +##### values.options + +```ts +options: FieldOptions; +``` + +##### values.render + +```ts +render: renderCallback; +``` + +#### Defined in + +[tanstack-form-controller.ts:112](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L112) + +*** + +### hostConnected() + +```ts +hostConnected(): void +``` + +Called when the host is connected to the component tree. For custom +element hosts, this corresponds to the `connectedCallback()` lifecycle, +which is only called when the component is connected to the document. + +#### Returns + +`void` + +#### Implementation of + +`ReactiveController.hostConnected` + +#### Defined in + +[tanstack-form-controller.ts:102](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L102) + +*** + +### hostDisconnected() + +```ts +hostDisconnected(): void +``` + +Called when the host is disconnected from the component tree. For custom +element hosts, this corresponds to the `disconnectedCallback()` lifecycle, +which is called the host or an ancestor component is disconnected from the +document. + +#### Returns + +`void` + +#### Implementation of + +`ReactiveController.hostDisconnected` + +#### Defined in + +[tanstack-form-controller.ts:108](https://github.com/TanStack/form/blob/main/packages/lit-form/src/tanstack-form-controller.ts#L108) diff --git a/docs/framework/lit/reference/index.md b/docs/framework/lit/reference/index.md new file mode 100644 index 0000000000..4215a31714 --- /dev/null +++ b/docs/framework/lit/reference/index.md @@ -0,0 +1,10 @@ +--- +id: "@tanstack/lit-form" +title: "@tanstack/lit-form" +--- + +# @tanstack/lit-form + +## Classes + +- [TanStackFormController](classes/tanstackformcontroller.md) diff --git a/docs/reference/classes/fieldapi.md b/docs/reference/classes/fieldapi.md new file mode 100644 index 0000000000..fe2e31c505 --- /dev/null +++ b/docs/reference/classes/fieldapi.md @@ -0,0 +1,530 @@ +--- +id: FieldApi +title: FieldApi +--- + +# Class: FieldApi\ + +A class representing the API for managing a form field. + +Normally, you will not need to create a new `FieldApi` instance directly. +Instead, you will use a framework hook/function like `useField` or `createField` +to create a new instance for you that uses your framework's reactivity model. +However, if you need to create a new instance manually, you can do so by calling +the `new FieldApi` constructor. + +## Type Parameters + +• **TParentData** + +• **TName** *extends* [`DeepKeys`](../type-aliases/deepkeys.md)\<`TParentData`\> + +• **TFieldValidator** *extends* `Validator`\<[`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\>, `unknown`\> \| `undefined` = `undefined` + +• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` + +• **TData** *extends* [`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\> = [`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\> + +## Constructors + +### new FieldApi() + +```ts +new FieldApi(opts): FieldApi +``` + +Initializes a new `FieldApi` instance. + +#### Parameters + +• **opts**: [`FieldApiOptions`](../interfaces/fieldapioptions.md)\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> + +#### Returns + +[`FieldApi`](fieldapi.md)\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> + +#### Defined in + +[packages/form-core/src/FieldApi.ts:438](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L438) + +## Properties + +### form + +```ts +form: FormApi; +``` + +A reference to the form API instance. + +#### Defined in + +[packages/form-core/src/FieldApi.ts:402](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L402) + +*** + +### name + +```ts +name: unknown extends TParentData ? string : TParentData extends readonly any[] & IsTuple ? PrefixTupleAccessor, AllowedIndexes, never>, []> : TParentData extends any[] ? PrefixArrayAccessor, [any]> : TParentData extends Date ? never : TParentData extends object ? PrefixObjectAccessor, []> : TParentData extends string | number | bigint | boolean ? "" : never; +``` + +The field name. + +#### Defined in + +[packages/form-core/src/FieldApi.ts:412](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L412) + +*** + +### options + +```ts +options: FieldApiOptions; +``` + +The field options. + +#### Defined in + +[packages/form-core/src/FieldApi.ts:416](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L416) + +*** + +### store + +```ts +store: Derived>; +``` + +The field state store. + +#### Defined in + +[packages/form-core/src/FieldApi.ts:426](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L426) + +*** + +### timeoutIds + +```ts +timeoutIds: Record; +``` + +#### Defined in + +[packages/form-core/src/FieldApi.ts:433](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L433) + +## Accessors + +### state + +#### Get Signature + +```ts +get state(): FieldState +``` + +The current field state. + +##### Returns + +[`FieldState`](../type-aliases/fieldstate.md)\<`TData`\> + +#### Defined in + +[packages/form-core/src/FieldApi.ts:430](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L430) + +## Methods + +### getInfo() + +```ts +getInfo(): FieldInfo +``` + +Gets the field information object. + +#### Returns + +[`FieldInfo`](../type-aliases/fieldinfo.md)\<`TParentData`, `TFormValidator`\> + +#### Defined in + +[packages/form-core/src/FieldApi.ts:622](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L622) + +*** + +### getMeta() + +```ts +getMeta(): FieldMeta +``` + +#### Returns + +[`FieldMeta`](../type-aliases/fieldmeta.md) + +#### Defined in + +[packages/form-core/src/FieldApi.ts:611](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L611) + +*** + +### ~~getValue()~~ + +```ts +getValue(): TData +``` + +Gets the current field value. + +#### Returns + +`TData` + +#### Deprecated + +Use `field.state.value` instead. + +#### Defined in + +[packages/form-core/src/FieldApi.ts:599](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L599) + +*** + +### handleBlur() + +```ts +handleBlur(): void +``` + +Handles the blur event. + +#### Returns + +`void` + +#### Defined in + +[packages/form-core/src/FieldApi.ts:974](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L974) + +*** + +### handleChange() + +```ts +handleChange(updater): void +``` + +Handles the change event. + +#### Parameters + +• **updater**: [`Updater`](../type-aliases/updater.md)\<`TData`\> + +#### Returns + +`void` + +#### Defined in + +[packages/form-core/src/FieldApi.ts:967](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L967) + +*** + +### insertValue() + +```ts +insertValue( + index, + value, +opts?): Promise +``` + +Inserts a value at the specified index, shifting the subsequent values to the right. + +#### Parameters + +• **index**: `number` + +• **value**: `TData` *extends* `any`[] ? `TData`\<`TData`\>\[`number`\] : `never` + +• **opts?**: `UpdateMetaOptions` + +#### Returns + +`Promise`\<`void`\> + +#### Defined in + +[packages/form-core/src/FieldApi.ts:635](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L635) + +*** + +### mount() + +```ts +mount(): () => void +``` + +Mounts the field instance to the form. + +#### Returns + +`Function` + +##### Returns + +`void` + +#### Defined in + +[packages/form-core/src/FieldApi.ts:528](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L528) + +*** + +### moveValue() + +```ts +moveValue( + aIndex, + bIndex, + opts?): void +``` + +Moves the value at the first specified index to the second specified index. + +#### Parameters + +• **aIndex**: `number` + +• **bIndex**: `number` + +• **opts?**: `UpdateMetaOptions` + +#### Returns + +`void` + +#### Defined in + +[packages/form-core/src/FieldApi.ts:665](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L665) + +*** + +### pushValue() + +```ts +pushValue(value, opts?): void +``` + +Pushes a new value to the field. + +#### Parameters + +• **value**: `TData` *extends* `any`[] ? `TData`\<`TData`\>\[`number`\] : `never` + +• **opts?**: `UpdateMetaOptions` + +#### Returns + +`void` + +#### Defined in + +[packages/form-core/src/FieldApi.ts:627](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L627) + +*** + +### removeValue() + +```ts +removeValue(index, opts?): Promise +``` + +Removes a value at the specified index. + +#### Parameters + +• **index**: `number` + +• **opts?**: `UpdateMetaOptions` + +#### Returns + +`Promise`\<`void`\> + +#### Defined in + +[packages/form-core/src/FieldApi.ts:653](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L653) + +*** + +### replaceValue() + +```ts +replaceValue( + index, + value, +opts?): Promise +``` + +Replaces a value at the specified index. + +#### Parameters + +• **index**: `number` + +• **value**: `TData` *extends* `any`[] ? `TData`\<`TData`\>\[`number`\] : `never` + +• **opts?**: `UpdateMetaOptions` + +#### Returns + +`Promise`\<`void`\> + +#### Defined in + +[packages/form-core/src/FieldApi.ts:644](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L644) + +*** + +### setErrorMap() + +```ts +setErrorMap(errorMap): void +``` + +Updates the field's errorMap + +#### Parameters + +• **errorMap**: `ValidationErrorMap` + +#### Returns + +`void` + +#### Defined in + +[packages/form-core/src/FieldApi.ts:989](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L989) + +*** + +### setMeta() + +```ts +setMeta(updater): void +``` + +Sets the field metadata. + +#### Parameters + +• **updater**: [`Updater`](../type-aliases/updater.md)\<[`FieldMeta`](../type-aliases/fieldmeta.md)\> + +#### Returns + +`void` + +#### Defined in + +[packages/form-core/src/FieldApi.ts:616](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L616) + +*** + +### setValue() + +```ts +setValue(updater, options?): void +``` + +Sets the field value and run the `change` validator. + +#### Parameters + +• **updater**: [`Updater`](../type-aliases/updater.md)\<`TData`\> + +• **options?**: `UpdateMetaOptions` + +#### Returns + +`void` + +#### Defined in + +[packages/form-core/src/FieldApi.ts:606](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L606) + +*** + +### swapValues() + +```ts +swapValues( + aIndex, + bIndex, + opts?): void +``` + +Swaps the values at the specified indices. + +#### Parameters + +• **aIndex**: `number` + +• **bIndex**: `number` + +• **opts?**: `UpdateMetaOptions` + +#### Returns + +`void` + +#### Defined in + +[packages/form-core/src/FieldApi.ts:659](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L659) + +*** + +### update() + +```ts +update(opts): void +``` + +Updates the field instance with new options. + +#### Parameters + +• **opts**: [`FieldApiOptions`](../interfaces/fieldapioptions.md)\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> + +#### Returns + +`void` + +#### Defined in + +[packages/form-core/src/FieldApi.ts:562](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L562) + +*** + +### validate() + +```ts +validate(cause): ValidationError[] | Promise +``` + +Validates the field value. + +#### Parameters + +• **cause**: `ValidationCause` + +#### Returns + +[`ValidationError`](../type-aliases/validationerror.md)[] \| `Promise`\<[`ValidationError`](../type-aliases/validationerror.md)[]\> + +#### Defined in + +[packages/form-core/src/FieldApi.ts:939](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L939) diff --git a/docs/reference/classes/formapi.md b/docs/reference/classes/formapi.md new file mode 100644 index 0000000000..3ed6d415c3 --- /dev/null +++ b/docs/reference/classes/formapi.md @@ -0,0 +1,699 @@ +--- +id: FormApi +title: FormApi +--- + +# Class: FormApi\ + +A class representing the Form API. It handles the logic and interactions with the form state. + +Normally, you will not need to create a new `FormApi` instance directly. Instead, you will use a framework +hook/function like `useForm` or `createForm` to create a new instance for you that uses your framework's reactivity model. +However, if you need to create a new instance manually, you can do so by calling the `new FormApi` constructor. + +## Type Parameters + +• **TFormData** + +• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined` + +## Constructors + +### new FormApi() + +```ts +new FormApi(opts?): FormApi +``` + +Constructs a new `FormApi` instance with the given form options. + +#### Parameters + +• **opts?**: [`FormOptions`](../interfaces/formoptions.md)\<`TFormData`, `TFormValidator`\> + +#### Returns + +[`FormApi`](formapi.md)\<`TFormData`, `TFormValidator`\> + +#### Defined in + +[packages/form-core/src/FormApi.ts:374](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L374) + +## Properties + +### baseStore + +```ts +baseStore: Store, (cb) => BaseFormState>; +``` + +#### Defined in + +[packages/form-core/src/FormApi.ts:354](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L354) + +*** + +### fieldInfo + +```ts +fieldInfo: Record ? PrefixTupleAccessor, AllowedIndexes, never>, []> : TFormData extends any[] ? PrefixArrayAccessor, [any]> : TFormData extends Date ? never : TFormData extends object ? PrefixObjectAccessor, []> : TFormData extends string | number | bigint | boolean ? "" : never, FieldInfo>; +``` + +A record of field information for each field in the form. + +#### Defined in + +[packages/form-core/src/FormApi.ts:359](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L359) + +*** + +### options + +```ts +options: FormOptions = {}; +``` + +The options for the form. + +#### Defined in + +[packages/form-core/src/FormApi.ts:353](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L353) + +*** + +### store + +```ts +store: Derived>; +``` + +#### Defined in + +[packages/form-core/src/FormApi.ts:355](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L355) + +## Accessors + +### state + +#### Get Signature + +```ts +get state(): FormState +``` + +##### Returns + +[`FormState`](../type-aliases/formstate.md)\<`TFormData`\> + +#### Defined in + +[packages/form-core/src/FormApi.ts:362](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L362) + +## Methods + +### deleteField() + +```ts +deleteField(field): void +``` + +#### Type Parameters + +• **TField** *extends* `string` \| `number` + +#### Parameters + +• **field**: `TField` + +#### Returns + +`void` + +#### Defined in + +[packages/form-core/src/FormApi.ts:1076](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1076) + +*** + +### getFieldInfo() + +```ts +getFieldInfo(field): FieldInfo +``` + +Gets the field info of the specified field. + +#### Type Parameters + +• **TField** *extends* `string` \| `number` + +#### Parameters + +• **field**: `TField` + +#### Returns + +[`FieldInfo`](../type-aliases/fieldinfo.md)\<`TFormData`, `TFormValidator`\> + +#### Defined in + +[packages/form-core/src/FormApi.ts:987](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L987) + +*** + +### getFieldMeta() + +```ts +getFieldMeta(field): undefined | FieldMeta +``` + +Gets the metadata of the specified field. + +#### Type Parameters + +• **TField** *extends* `string` \| `number` + +#### Parameters + +• **field**: `TField` + +#### Returns + +`undefined` \| [`FieldMeta`](../type-aliases/fieldmeta.md) + +#### Defined in + +[packages/form-core/src/FormApi.ts:978](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L978) + +*** + +### getFieldValue() + +```ts +getFieldValue(field): DeepValue> +``` + +Gets the value of the specified field. + +#### Type Parameters + +• **TField** *extends* `string` \| `number` + +#### Parameters + +• **field**: `TField` + +#### Returns + +[`DeepValue`](../type-aliases/deepvalue.md)\<`TFormData`, `TField`, `IsNullable`\<`TFormData`\>\> + +#### Defined in + +[packages/form-core/src/FormApi.ts:971](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L971) + +*** + +### handleSubmit() + +```ts +handleSubmit(): Promise +``` + +Handles the form submission, performs validation, and calls the appropriate onSubmit or onInvalidSubmit callbacks. + +#### Returns + +`Promise`\<`void`\> + +#### Defined in + +[packages/form-core/src/FormApi.ts:923](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L923) + +*** + +### insertFieldValue() + +```ts +insertFieldValue( + field, + index, + value, +opts?): Promise +``` + +Inserts a value into an array field at the specified index, shifting the subsequent values to the right. + +#### Type Parameters + +• **TField** *extends* `string` \| `number` + +#### Parameters + +• **field**: `TField` + +• **index**: `number` + +• **value**: [`DeepValue`](../type-aliases/deepvalue.md)\<`TFormData`, `TField`, `IsNullable`\<`TFormData`\>\> *extends* `any`[] ? `any`[] & [`DeepValue`](../type-aliases/deepvalue.md)\<`TFormData`, `TField`, `IsNullable`\<`TFormData`\>\>\[`number`\] : `never` + +• **opts?**: `UpdateMetaOptions` + +#### Returns + +`Promise`\<`void`\> + +#### Defined in + +[packages/form-core/src/FormApi.ts:1108](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1108) + +*** + +### mount() + +```ts +mount(): void +``` + +#### Returns + +`void` + +#### Defined in + +[packages/form-core/src/FormApi.ts:484](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L484) + +*** + +### moveFieldValues() + +```ts +moveFieldValues( + field, + index1, + index2, + opts?): void +``` + +Moves the value at the first specified index to the second specified index within an array field. + +#### Type Parameters + +• **TField** *extends* `string` \| `number` + +#### Parameters + +• **field**: `TField` + +• **index1**: `number` + +• **index2**: `number` + +• **opts?**: `UpdateMetaOptions` + +#### Returns + +`void` + +#### Defined in + +[packages/form-core/src/FormApi.ts:1226](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1226) + +*** + +### pushFieldValue() + +```ts +pushFieldValue( + field, + value, + opts?): void +``` + +Pushes a value into an array field. + +#### Type Parameters + +• **TField** *extends* `string` \| `number` + +#### Parameters + +• **field**: `TField` + +• **value**: [`DeepValue`](../type-aliases/deepvalue.md)\<`TFormData`, `TField`, `IsNullable`\<`TFormData`\>\> *extends* `any`[] ? `any`[] & [`DeepValue`](../type-aliases/deepvalue.md)\<`TFormData`, `TField`, `IsNullable`\<`TFormData`\>\>\[`number`\] : `never` + +• **opts?**: `UpdateMetaOptions` + +#### Returns + +`void` + +#### Defined in + +[packages/form-core/src/FormApi.ts:1090](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1090) + +*** + +### removeFieldValue() + +```ts +removeFieldValue( + field, + index, +opts?): Promise +``` + +Removes a value from an array field at the specified index. + +#### Type Parameters + +• **TField** *extends* `string` \| `number` + +#### Parameters + +• **field**: `TField` + +• **index**: `number` + +• **opts?**: `UpdateMetaOptions` + +#### Returns + +`Promise`\<`void`\> + +#### Defined in + +[packages/form-core/src/FormApi.ts:1161](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1161) + +*** + +### replaceFieldValue() + +```ts +replaceFieldValue( + field, + index, + value, +opts?): Promise +``` + +Replaces a value into an array field at the specified index. + +#### Type Parameters + +• **TField** *extends* `string` \| `number` + +#### Parameters + +• **field**: `TField` + +• **index**: `number` + +• **value**: [`DeepValue`](../type-aliases/deepvalue.md)\<`TFormData`, `TField`, `IsNullable`\<`TFormData`\>\> *extends* `any`[] ? `any`[] & [`DeepValue`](../type-aliases/deepvalue.md)\<`TFormData`, `TField`, `IsNullable`\<`TFormData`\>\>\[`number`\] : `never` + +• **opts?**: `UpdateMetaOptions` + +#### Returns + +`Promise`\<`void`\> + +#### Defined in + +[packages/form-core/src/FormApi.ts:1135](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1135) + +*** + +### reset() + +```ts +reset(values?, opts?): void +``` + +Resets the form state to the default values. +If values are provided, the form will be reset to those values instead and the default values will be updated. + +#### Parameters + +• **values?**: `TFormData` + +Optional values to reset the form to. + +• **opts?** + +Optional options to control the reset behavior. + +• **opts.keepDefaultValues?**: `boolean` + +#### Returns + +`void` + +#### Defined in + +[packages/form-core/src/FormApi.ts:551](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L551) + +*** + +### resetFieldMeta() + +```ts +resetFieldMeta(fieldMeta): Record +``` + +#### Type Parameters + +• **TField** *extends* `string` \| `number` + +#### Parameters + +• **fieldMeta**: `Record`\<`TField`, [`FieldMeta`](../type-aliases/fieldmeta.md)\> + +#### Returns + +`Record`\<`TField`, [`FieldMeta`](../type-aliases/fieldmeta.md)\> + +#### Defined in + +[packages/form-core/src/FormApi.ts:1021](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1021) + +*** + +### setErrorMap() + +```ts +setErrorMap(errorMap): void +``` + +Updates the form's errorMap + +#### Parameters + +• **errorMap**: `ValidationErrorMap` + +#### Returns + +`void` + +#### Defined in + +[packages/form-core/src/FormApi.ts:1250](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1250) + +*** + +### setFieldMeta() + +```ts +setFieldMeta(field, updater): void +``` + +Updates the metadata of the specified field. + +#### Type Parameters + +• **TField** *extends* `string` \| `number` + +#### Parameters + +• **field**: `TField` + +• **updater**: [`Updater`](../type-aliases/updater.md)\<[`FieldMeta`](../type-aliases/fieldmeta.md)\> + +#### Returns + +`void` + +#### Defined in + +[packages/form-core/src/FormApi.ts:1006](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1006) + +*** + +### setFieldValue() + +```ts +setFieldValue( + field, + updater, + opts?): void +``` + +Sets the value of the specified field and optionally updates the touched state. + +#### Type Parameters + +• **TField** *extends* `string` \| `number` + +#### Parameters + +• **field**: `TField` + +• **updater**: [`Updater`](../type-aliases/updater.md)\<[`DeepValue`](../type-aliases/deepvalue.md)\<`TFormData`, `TField`, `IsNullable`\<`TFormData`\>\>\> + +• **opts?**: `UpdateMetaOptions` + +#### Returns + +`void` + +#### Defined in + +[packages/form-core/src/FormApi.ts:1045](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1045) + +*** + +### swapFieldValues() + +```ts +swapFieldValues( + field, + index1, + index2, + opts?): void +``` + +Swaps the values at the specified indices within an array field. + +#### Type Parameters + +• **TField** *extends* `string` \| `number` + +#### Parameters + +• **field**: `TField` + +• **index1**: `number` + +• **index2**: `number` + +• **opts?**: `UpdateMetaOptions` + +#### Returns + +`void` + +#### Defined in + +[packages/form-core/src/FormApi.ts:1200](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1200) + +*** + +### update() + +```ts +update(options?): void +``` + +Updates the form options and form state. + +#### Parameters + +• **options?**: [`FormOptions`](../interfaces/formoptions.md)\<`TFormData`, `TFormValidator`\> + +#### Returns + +`void` + +#### Defined in + +[packages/form-core/src/FormApi.ts:507](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L507) + +*** + +### validateAllFields() + +```ts +validateAllFields(cause): Promise +``` + +Validates form and all fields in using the correct handlers for a given validation cause. + +#### Parameters + +• **cause**: `ValidationCause` + +#### Returns + +`Promise`\<[`ValidationError`](../type-aliases/validationerror.md)[]\> + +#### Defined in + +[packages/form-core/src/FormApi.ts:577](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L577) + +*** + +### validateArrayFieldsStartingFrom() + +```ts +validateArrayFieldsStartingFrom( + field, + index, +cause): Promise +``` + +Validates the children of a specified array in the form starting from a given index until the end using the correct handlers for a given validation type. + +#### Type Parameters + +• **TField** *extends* `string` \| `number` + +#### Parameters + +• **field**: `TField` + +• **index**: `number` + +• **cause**: `ValidationCause` + +#### Returns + +`Promise`\<[`ValidationError`](../type-aliases/validationerror.md)[]\> + +#### Defined in + +[packages/form-core/src/FormApi.ts:611](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L611) + +*** + +### validateField() + +```ts +validateField(field, cause): ValidationError[] | Promise +``` + +Validates a specified field in the form using the correct handlers for a given validation type. + +#### Type Parameters + +• **TField** *extends* `string` \| `number` + +#### Parameters + +• **field**: `TField` + +• **cause**: `ValidationCause` + +#### Returns + +[`ValidationError`](../type-aliases/validationerror.md)[] \| `Promise`\<[`ValidationError`](../type-aliases/validationerror.md)[]\> + +#### Defined in + +[packages/form-core/src/FormApi.ts:650](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L650) diff --git a/docs/reference/functions/formoptions.md b/docs/reference/functions/formoptions.md new file mode 100644 index 0000000000..66f6aa695b --- /dev/null +++ b/docs/reference/functions/formoptions.md @@ -0,0 +1,28 @@ +--- +id: formOptions +title: formOptions +--- + +# Function: formOptions() + +```ts +function formOptions(defaultOpts?): undefined | FormOptions +``` + +## Type Parameters + +• **TFormData** + +• **TFormValidator** *extends* `undefined` \| `Validator`\<`TFormData`, `unknown`\> = `undefined` + +## Parameters + +• **defaultOpts?**: [`FormOptions`](../interfaces/formoptions.md)\<`TFormData`, `TFormValidator`\> + +## Returns + +`undefined` \| [`FormOptions`](../interfaces/formoptions.md)\<`TFormData`, `TFormValidator`\> + +## Defined in + +[packages/form-core/src/formOptions.ts:4](https://github.com/TanStack/form/blob/main/packages/form-core/src/formOptions.ts#L4) diff --git a/docs/reference/functions/mergeform.md b/docs/reference/functions/mergeform.md new file mode 100644 index 0000000000..16c15c5f66 --- /dev/null +++ b/docs/reference/functions/mergeform.md @@ -0,0 +1,30 @@ +--- +id: mergeForm +title: mergeForm +--- + +# Function: mergeForm() + +```ts +function mergeForm(baseForm, state): FormApi, NoInfer> +``` + +## Type Parameters + +• **TFormData** + +• **TFormValidator** *extends* `undefined` \| `Validator`\<`TFormData`, `unknown`\> = `undefined` + +## Parameters + +• **baseForm**: [`FormApi`](../classes/formapi.md)\<`NoInfer`\<`TFormData`\>, `NoInfer`\<`TFormValidator`\>\> + +• **state**: `Partial`\<[`FormState`](../type-aliases/formstate.md)\<`TFormData`\>\> + +## Returns + +[`FormApi`](../classes/formapi.md)\<`NoInfer`\<`TFormData`\>, `NoInfer`\<`TFormValidator`\>\> + +## Defined in + +[packages/form-core/src/mergeForm.ts:36](https://github.com/TanStack/form/blob/main/packages/form-core/src/mergeForm.ts#L36) diff --git a/docs/reference/index.md b/docs/reference/index.md new file mode 100644 index 0000000000..fc070f045c --- /dev/null +++ b/docs/reference/index.md @@ -0,0 +1,43 @@ +--- +id: "@tanstack/form-core" +title: "@tanstack/form-core" +--- + +# @tanstack/form-core + +## Classes + +- [FieldApi](classes/fieldapi.md) +- [FormApi](classes/formapi.md) + +## Interfaces + +- [FieldApiOptions](interfaces/fieldapioptions.md) +- [FieldOptions](interfaces/fieldoptions.md) +- [FieldValidators](interfaces/fieldvalidators.md) +- [FormOptions](interfaces/formoptions.md) +- [FormValidators](interfaces/formvalidators.md) + +## Type Aliases + +- [BaseFormState](type-aliases/baseformstate.md) +- [DeepKeys](type-aliases/deepkeys.md) +- [DeepValue](type-aliases/deepvalue.md) +- [DerivedFormState](type-aliases/derivedformstate.md) +- [FieldInfo](type-aliases/fieldinfo.md) +- [FieldMeta](type-aliases/fieldmeta.md) +- [FieldsErrorMapFromValidator](type-aliases/fieldserrormapfromvalidator.md) +- [FieldState](type-aliases/fieldstate.md) +- [FormState](type-aliases/formstate.md) +- [FormValidateFn](type-aliases/formvalidatefn.md) +- [FormValidator](type-aliases/formvalidator.md) +- [Updater](type-aliases/updater.md) +- [UpdaterFn](type-aliases/updaterfn.md) +- [ValidationError](type-aliases/validationerror.md) +- [ValidationMeta](type-aliases/validationmeta.md) +- [ValidationSource](type-aliases/validationsource.md) + +## Functions + +- [formOptions](functions/formoptions.md) +- [mergeForm](functions/mergeform.md) diff --git a/docs/reference/interfaces/fieldapioptions.md b/docs/reference/interfaces/fieldapioptions.md new file mode 100644 index 0000000000..8f583b4e0f --- /dev/null +++ b/docs/reference/interfaces/fieldapioptions.md @@ -0,0 +1,162 @@ +--- +id: FieldApiOptions +title: FieldApiOptions +--- + +# Interface: FieldApiOptions\ + +An object type representing the required options for the FieldApi class. + +## Extends + +- [`FieldOptions`](fieldoptions.md)\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> + +## Type Parameters + +• **TParentData** + +• **TName** *extends* [`DeepKeys`](../type-aliases/deepkeys.md)\<`TParentData`\> + +• **TFieldValidator** *extends* `Validator`\<[`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\>, `unknown`\> \| `undefined` = `undefined` + +• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` + +• **TData** *extends* [`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\> = [`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\> + +## Properties + +### asyncAlways? + +```ts +optional asyncAlways: boolean; +``` + +If `true`, always run async validation, even if there are errors emitted during synchronous validation. + +#### Inherited from + +[`FieldOptions`](fieldoptions.md).[`asyncAlways`](FieldOptions.md#asyncalways) + +#### Defined in + +[packages/form-core/src/FieldApi.ts:287](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L287) + +*** + +### asyncDebounceMs? + +```ts +optional asyncDebounceMs: number; +``` + +The default time to debounce async validation if there is not a more specific debounce time passed. + +#### Inherited from + +[`FieldOptions`](fieldoptions.md).[`asyncDebounceMs`](FieldOptions.md#asyncdebouncems) + +#### Defined in + +[packages/form-core/src/FieldApi.ts:283](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L283) + +*** + +### defaultMeta? + +```ts +optional defaultMeta: Partial; +``` + +An optional object with default metadata for the field. + +#### Inherited from + +[`FieldOptions`](fieldoptions.md).[`defaultMeta`](FieldOptions.md#defaultmeta) + +#### Defined in + +[packages/form-core/src/FieldApi.ts:305](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L305) + +*** + +### defaultValue? + +```ts +optional defaultValue: NoInfer; +``` + +An optional default value for the field. + +#### Inherited from + +[`FieldOptions`](fieldoptions.md).[`defaultValue`](FieldOptions.md#defaultvalue) + +#### Defined in + +[packages/form-core/src/FieldApi.ts:279](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L279) + +*** + +### form + +```ts +form: FormApi; +``` + +#### Defined in + +[packages/form-core/src/FieldApi.ts:328](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L328) + +*** + +### name + +```ts +name: TName; +``` + +The field name. The type will be `DeepKeys` to ensure your name is a deep key of the parent dataset. + +#### Inherited from + +[`FieldOptions`](fieldoptions.md).[`name`](FieldOptions.md#name) + +#### Defined in + +[packages/form-core/src/FieldApi.ts:275](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L275) + +*** + +### validatorAdapter? + +```ts +optional validatorAdapter: TFieldValidator; +``` + +A validator provided by an extension, like `yupValidator` from `@tanstack/yup-form-adapter` + +#### Inherited from + +[`FieldOptions`](fieldoptions.md).[`validatorAdapter`](FieldOptions.md#validatoradapter) + +#### Defined in + +[packages/form-core/src/FieldApi.ts:291](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L291) + +*** + +### validators? + +```ts +optional validators: FieldValidators; +``` + +A list of validators to pass to the field + +#### Inherited from + +[`FieldOptions`](fieldoptions.md).[`validators`](FieldOptions.md#validators) + +#### Defined in + +[packages/form-core/src/FieldApi.ts:295](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L295) diff --git a/docs/reference/interfaces/fieldoptions.md b/docs/reference/interfaces/fieldoptions.md new file mode 100644 index 0000000000..a4103fe259 --- /dev/null +++ b/docs/reference/interfaces/fieldoptions.md @@ -0,0 +1,122 @@ +--- +id: FieldOptions +title: FieldOptions +--- + +# Interface: FieldOptions\ + +An object type representing the options for a field in a form. + +## Extended by + +- [`FieldApiOptions`](fieldapioptions.md) + +## Type Parameters + +• **TParentData** + +• **TName** *extends* [`DeepKeys`](../type-aliases/deepkeys.md)\<`TParentData`\> + +• **TFieldValidator** *extends* `Validator`\<[`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\>, `unknown`\> \| `undefined` = `undefined` + +• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` + +• **TData** *extends* [`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\> = [`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\> + +## Properties + +### asyncAlways? + +```ts +optional asyncAlways: boolean; +``` + +If `true`, always run async validation, even if there are errors emitted during synchronous validation. + +#### Defined in + +[packages/form-core/src/FieldApi.ts:287](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L287) + +*** + +### asyncDebounceMs? + +```ts +optional asyncDebounceMs: number; +``` + +The default time to debounce async validation if there is not a more specific debounce time passed. + +#### Defined in + +[packages/form-core/src/FieldApi.ts:283](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L283) + +*** + +### defaultMeta? + +```ts +optional defaultMeta: Partial; +``` + +An optional object with default metadata for the field. + +#### Defined in + +[packages/form-core/src/FieldApi.ts:305](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L305) + +*** + +### defaultValue? + +```ts +optional defaultValue: NoInfer; +``` + +An optional default value for the field. + +#### Defined in + +[packages/form-core/src/FieldApi.ts:279](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L279) + +*** + +### name + +```ts +name: TName; +``` + +The field name. The type will be `DeepKeys` to ensure your name is a deep key of the parent dataset. + +#### Defined in + +[packages/form-core/src/FieldApi.ts:275](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L275) + +*** + +### validatorAdapter? + +```ts +optional validatorAdapter: TFieldValidator; +``` + +A validator provided by an extension, like `yupValidator` from `@tanstack/yup-form-adapter` + +#### Defined in + +[packages/form-core/src/FieldApi.ts:291](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L291) + +*** + +### validators? + +```ts +optional validators: FieldValidators; +``` + +A list of validators to pass to the field + +#### Defined in + +[packages/form-core/src/FieldApi.ts:295](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L295) diff --git a/docs/reference/interfaces/fieldvalidators.md b/docs/reference/interfaces/fieldvalidators.md new file mode 100644 index 0000000000..57f9f54c26 --- /dev/null +++ b/docs/reference/interfaces/fieldvalidators.md @@ -0,0 +1,218 @@ +--- +id: FieldValidators +title: FieldValidators +--- + +# Interface: FieldValidators\ + +## Type Parameters + +• **TParentData** + +• **TName** *extends* [`DeepKeys`](../type-aliases/deepkeys.md)\<`TParentData`\> + +• **TFieldValidator** *extends* `Validator`\<[`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\>, `unknown`\> \| `undefined` = `undefined` + +• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` + +• **TData** *extends* [`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\> = [`DeepValue`](../type-aliases/deepvalue.md)\<`TParentData`, `TName`\> + +## Properties + +### onBlur? + +```ts +optional onBlur: FieldValidateOrFn; +``` + +An optional function, that runs on the blur event of input. +If `validatorAdapter` is passed, this may also accept a property from the respective adapter + +#### Example + +```ts +z.string().min(1) // if `zodAdapter` is passed +``` + +#### Defined in + +[packages/form-core/src/FieldApi.ts:199](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L199) + +*** + +### onBlurAsync? + +```ts +optional onBlurAsync: FieldAsyncValidateOrFn; +``` + +An optional property similar to `onBlur` but async validation. If `validatorAdapter` +is passed, this may also accept a property from the respective adapter + +#### Example + +```ts +z.string().refine(async (val) => val.length > 3, { message: 'Testing 123' }) // if `zodAdapter` is passed +``` + +#### Defined in + +[packages/form-core/src/FieldApi.ts:212](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L212) + +*** + +### onBlurAsyncDebounceMs? + +```ts +optional onBlurAsyncDebounceMs: number; +``` + +An optional number to represent how long the `onBlurAsync` should wait before running + +If set to a number larger than 0, will debounce the async validation event by this length of time in milliseconds + +#### Defined in + +[packages/form-core/src/FieldApi.ts:225](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L225) + +*** + +### onBlurListenTo? + +```ts +optional onBlurListenTo: unknown extends TParentData ? string : TParentData extends readonly any[] & IsTuple ? PrefixTupleAccessor, AllowedIndexes, never>, []> : TParentData extends any[] ? PrefixArrayAccessor, [any]> : TParentData extends Date ? never : TParentData extends object ? PrefixObjectAccessor, []> : TParentData extends string | number | bigint | boolean ? "" : never[]; +``` + +An optional list of field names that should trigger this field's `onBlur` and `onBlurAsync` events when its value changes + +#### Defined in + +[packages/form-core/src/FieldApi.ts:229](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L229) + +*** + +### onChange? + +```ts +optional onChange: FieldValidateOrFn; +``` + +An optional property that takes a `ValidateFn` which is a generic of `TData` and `TParentData`. +If `validatorAdapter` is passed, this may also accept a property from the respective adapter + +#### Example + +```ts +z.string().min(1) // if `zodAdapter` is passed +``` + +#### Defined in + +[packages/form-core/src/FieldApi.ts:163](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L163) + +*** + +### onChangeAsync? + +```ts +optional onChangeAsync: FieldAsyncValidateOrFn; +``` + +An optional property similar to `onChange` but async validation. If `validatorAdapter` +is passed, this may also accept a property from the respective adapter + +#### Example + +```ts +z.string().refine(async (val) => val.length > 3, { message: 'Testing 123' }) // if `zodAdapter` is passed +``` + +#### Defined in + +[packages/form-core/src/FieldApi.ts:176](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L176) + +*** + +### onChangeAsyncDebounceMs? + +```ts +optional onChangeAsyncDebounceMs: number; +``` + +An optional number to represent how long the `onChangeAsync` should wait before running + +If set to a number larger than 0, will debounce the async validation event by this length of time in milliseconds + +#### Defined in + +[packages/form-core/src/FieldApi.ts:188](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L188) + +*** + +### onChangeListenTo? + +```ts +optional onChangeListenTo: unknown extends TParentData ? string : TParentData extends readonly any[] & IsTuple ? PrefixTupleAccessor, AllowedIndexes, never>, []> : TParentData extends any[] ? PrefixArrayAccessor, [any]> : TParentData extends Date ? never : TParentData extends object ? PrefixObjectAccessor, []> : TParentData extends string | number | bigint | boolean ? "" : never[]; +``` + +An optional list of field names that should trigger this field's `onChange` and `onChangeAsync` events when its value changes + +#### Defined in + +[packages/form-core/src/FieldApi.ts:192](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L192) + +*** + +### onMount? + +```ts +optional onMount: FieldValidateOrFn; +``` + +An optional function that takes a param of `formApi` which is a generic type of `TData` and `TParentData` + +#### Defined in + +[packages/form-core/src/FieldApi.ts:150](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L150) + +*** + +### onSubmit? + +```ts +optional onSubmit: FieldValidateOrFn; +``` + +An optional function, that runs on the submit event of form. +If `validatorAdapter` is passed, this may also accept a property from the respective adapter + +#### Example + +```ts +z.string().min(1) // if `zodAdapter` is passed +``` + +#### Defined in + +[packages/form-core/src/FieldApi.ts:236](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L236) + +*** + +### onSubmitAsync? + +```ts +optional onSubmitAsync: FieldAsyncValidateOrFn; +``` + +An optional property similar to `onSubmit` but async validation. If `validatorAdapter` +is passed, this may also accept a property from the respective adapter + +#### Example + +```ts +z.string().refine(async (val) => val.length > 3, { message: 'Testing 123' }) // if `zodAdapter` is passed +``` + +#### Defined in + +[packages/form-core/src/FieldApi.ts:249](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L249) diff --git a/docs/reference/interfaces/formoptions.md b/docs/reference/interfaces/formoptions.md new file mode 100644 index 0000000000..c3ba09c519 --- /dev/null +++ b/docs/reference/interfaces/formoptions.md @@ -0,0 +1,162 @@ +--- +id: FormOptions +title: FormOptions +--- + +# Interface: FormOptions\ + +An object representing the options for a form. + +## Type Parameters + +• **TFormData** + +• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined` + +## Properties + +### asyncAlways? + +```ts +optional asyncAlways: boolean; +``` + +If true, always run async validation, even when sync validation has produced an error. Defaults to undefined. + +#### Defined in + +[packages/form-core/src/FormApi.ts:154](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L154) + +*** + +### asyncDebounceMs? + +```ts +optional asyncDebounceMs: number; +``` + +Optional time in milliseconds if you want to introduce a delay before firing off an async action. + +#### Defined in + +[packages/form-core/src/FormApi.ts:158](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L158) + +*** + +### defaultState? + +```ts +optional defaultState: Partial>; +``` + +The default state for the form. + +#### Defined in + +[packages/form-core/src/FormApi.ts:150](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L150) + +*** + +### defaultValues? + +```ts +optional defaultValues: TFormData; +``` + +Set initial values for your form. + +#### Defined in + +[packages/form-core/src/FormApi.ts:146](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L146) + +*** + +### onSubmit()? + +```ts +optional onSubmit: (props) => any; +``` + +A function to be called when the form is submitted, what should happen once the user submits a valid form returns `any` or a promise `Promise` + +#### Parameters + +• **props** + +• **props.formApi**: [`FormApi`](../classes/formapi.md)\<`TFormData`, `TFormValidator`\> + +• **props.value**: `TFormData` + +#### Returns + +`any` + +#### Defined in + +[packages/form-core/src/FormApi.ts:170](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L170) + +*** + +### onSubmitInvalid()? + +```ts +optional onSubmitInvalid: (props) => void; +``` + +Specify an action for scenarios where the user tries to submit an invalid form. + +#### Parameters + +• **props** + +• **props.formApi**: [`FormApi`](../classes/formapi.md)\<`TFormData`, `TFormValidator`\> + +• **props.value**: `TFormData` + +#### Returns + +`void` + +#### Defined in + +[packages/form-core/src/FormApi.ts:177](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L177) + +*** + +### transform? + +```ts +optional transform: FormTransform; +``` + +#### Defined in + +[packages/form-core/src/FormApi.ts:181](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L181) + +*** + +### validatorAdapter? + +```ts +optional validatorAdapter: TFormValidator; +``` + +A validator adapter to support usage of extra validation types (IE: Zod, Yup, or Valibot usage) + +#### Defined in + +[packages/form-core/src/FormApi.ts:162](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L162) + +*** + +### validators? + +```ts +optional validators: FormValidators; +``` + +A list of validators to pass to the form + +#### Defined in + +[packages/form-core/src/FormApi.ts:166](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L166) diff --git a/docs/reference/interfaces/formvalidators.md b/docs/reference/interfaces/formvalidators.md new file mode 100644 index 0000000000..9f750dc52c --- /dev/null +++ b/docs/reference/interfaces/formvalidators.md @@ -0,0 +1,134 @@ +--- +id: FormValidators +title: FormValidators +--- + +# Interface: FormValidators\ + +## Type Parameters + +• **TFormData** + +• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined` + +## Properties + +### onBlur? + +```ts +optional onBlur: FormValidateOrFn; +``` + +Optional function that validates the form data when a field loses focus, returns a `FormValidationError` + +#### Defined in + +[packages/form-core/src/FormApi.ts:110](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L110) + +*** + +### onBlurAsync? + +```ts +optional onBlurAsync: FormAsyncValidateOrFn; +``` + +Optional onBlur asynchronous validation method for when a field loses focus returns a ` FormValidationError` or a promise of `Promise` + +#### Defined in + +[packages/form-core/src/FormApi.ts:114](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L114) + +*** + +### onBlurAsyncDebounceMs? + +```ts +optional onBlurAsyncDebounceMs: number; +``` + +The default time in milliseconds that if set to a number larger than 0, will debounce the async validation event by this length of time in milliseconds. + +#### Defined in + +[packages/form-core/src/FormApi.ts:118](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L118) + +*** + +### onChange? + +```ts +optional onChange: FormValidateOrFn; +``` + +Optional function that checks the validity of your data whenever a value changes + +#### Defined in + +[packages/form-core/src/FormApi.ts:98](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L98) + +*** + +### onChangeAsync? + +```ts +optional onChangeAsync: FormAsyncValidateOrFn; +``` + +Optional onChange asynchronous counterpart to onChange. Useful for more complex validation logic that might involve server requests. + +#### Defined in + +[packages/form-core/src/FormApi.ts:102](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L102) + +*** + +### onChangeAsyncDebounceMs? + +```ts +optional onChangeAsyncDebounceMs: number; +``` + +The default time in milliseconds that if set to a number larger than 0, will debounce the async validation event by this length of time in milliseconds. + +#### Defined in + +[packages/form-core/src/FormApi.ts:106](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L106) + +*** + +### onMount? + +```ts +optional onMount: FormValidateOrFn; +``` + +Optional function that fires as soon as the component mounts. + +#### Defined in + +[packages/form-core/src/FormApi.ts:94](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L94) + +*** + +### onSubmit? + +```ts +optional onSubmit: FormValidateOrFn; +``` + +#### Defined in + +[packages/form-core/src/FormApi.ts:119](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L119) + +*** + +### onSubmitAsync? + +```ts +optional onSubmitAsync: FormAsyncValidateOrFn; +``` + +#### Defined in + +[packages/form-core/src/FormApi.ts:120](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L120) diff --git a/docs/reference/type-aliases/baseformstate.md b/docs/reference/type-aliases/baseformstate.md new file mode 100644 index 0000000000..0122001bec --- /dev/null +++ b/docs/reference/type-aliases/baseformstate.md @@ -0,0 +1,94 @@ +--- +id: BaseFormState +title: BaseFormState +--- + +# Type Alias: BaseFormState\ + +```ts +type BaseFormState: object; +``` + +An object representing the current state of the form. + +## Type Parameters + +• **TFormData** + +## Type declaration + +### errorMap + +```ts +errorMap: FormValidationErrorMap; +``` + +The error map for the form itself. + +### fieldMeta + +```ts +fieldMeta: Record, FieldMeta>; +``` + +A record of field metadata for each field in the form. + +### isSubmitted + +```ts +isSubmitted: boolean; +``` + +A boolean indicating if the form has been submitted. + +### isSubmitting + +```ts +isSubmitting: boolean; +``` + +A boolean indicating if the form is currently in the process of being submitted after `handleSubmit` is called. + +Goes back to `false` when submission completes for one of the following reasons: +- the validation step returned errors. +- the `onSubmit` function has completed. + +Note: if you're running async operations in your `onSubmit` function make sure to await them to ensure `isSubmitting` is set to `false` only when the async operation completes. + +This is useful for displaying loading indicators or disabling form inputs during submission. + +### isValidating + +```ts +isValidating: boolean; +``` + +A boolean indicating if the form or any of its fields are currently validating. + +### submissionAttempts + +```ts +submissionAttempts: number; +``` + +A counter for tracking the number of submission attempts. + +### validationMetaMap + +```ts +validationMetaMap: Record; +``` + +An internal mechanism used for keeping track of validation logic in a form. + +### values + +```ts +values: TFormData; +``` + +The current values of the form fields. + +## Defined in + +[packages/form-core/src/FormApi.ts:219](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L219) diff --git a/docs/reference/type-aliases/deepkeys.md b/docs/reference/type-aliases/deepkeys.md new file mode 100644 index 0000000000..a97dd26a04 --- /dev/null +++ b/docs/reference/type-aliases/deepkeys.md @@ -0,0 +1,22 @@ +--- +id: DeepKeys +title: DeepKeys +--- + +# Type Alias: DeepKeys\ + +```ts +type DeepKeys: TDepth["length"] extends 5 ? never : unknown extends T ? PrefixFromDepth : T extends readonly any[] & IsTuple ? PrefixTupleAccessor, TDepth> : T extends any[] ? PrefixArrayAccessor : T extends Date ? never : T extends object ? PrefixObjectAccessor : T extends string | number | boolean | bigint ? "" : never; +``` + +The keys of an object or array, deeply nested. + +## Type Parameters + +• **T** + +• **TDepth** *extends* `any`[] = [] + +## Defined in + +[packages/form-core/src/util-types.ts:85](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L85) diff --git a/docs/reference/type-aliases/deepvalue.md b/docs/reference/type-aliases/deepvalue.md new file mode 100644 index 0000000000..e2f765ee4f --- /dev/null +++ b/docs/reference/type-aliases/deepvalue.md @@ -0,0 +1,24 @@ +--- +id: DeepValue +title: DeepValue +--- + +# Type Alias: DeepValue\ + +```ts +type DeepValue: unknown extends TValue ? TValue : TValue extends ReadonlyArray ? TAccessor extends `[${infer TBrackets}].${infer TAfter}` ? DeepValue, TAfter> : TAccessor extends `[${infer TBrackets}]` ? DeepValue : TAccessor extends keyof TValue ? TValue[TAccessor] : TValue[TAccessor & number] : TValue extends Record ? TAccessor extends `${infer TBefore}[${infer TEverythingElse}` ? DeepValue, `[${TEverythingElse}`> : TAccessor extends `[${infer TBrackets}]` ? DeepValue : TAccessor extends `${infer TBefore}.${infer TAfter}` ? DeepValue, TAfter> : TAccessor extends string ? TNullable extends true ? Nullable : TValue[TAccessor] : never : never; +``` + +Infer the type of a deeply nested property within an object or an array. + +## Type Parameters + +• **TValue** + +• **TAccessor** + +• **TNullable** *extends* `boolean` = `IsNullable`\<`TValue`\> + +## Defined in + +[packages/form-core/src/util-types.ts:109](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L109) diff --git a/docs/reference/type-aliases/derivedformstate.md b/docs/reference/type-aliases/derivedformstate.md new file mode 100644 index 0000000000..49bb4739d1 --- /dev/null +++ b/docs/reference/type-aliases/derivedformstate.md @@ -0,0 +1,104 @@ +--- +id: DerivedFormState +title: DerivedFormState +--- + +# Type Alias: DerivedFormState + +```ts +type DerivedFormState: object; +``` + +## Type declaration + +### canSubmit + +```ts +canSubmit: boolean; +``` + +A boolean indicating if the form can be submitted based on its current state. + +### errors + +```ts +errors: ValidationError[]; +``` + +The error array for the form itself. + +### isBlurred + +```ts +isBlurred: boolean; +``` + +A boolean indicating if any of the form fields have been blurred. + +### isDirty + +```ts +isDirty: boolean; +``` + +A boolean indicating if any of the form's fields' values have been modified by the user. `True` if the user have modified at least one of the fields. Opposite of `isPristine`. + +### isFieldsValid + +```ts +isFieldsValid: boolean; +``` + +A boolean indicating if all the form fields are valid. + +### isFieldsValidating + +```ts +isFieldsValidating: boolean; +``` + +A boolean indicating if any of the form fields are currently validating. + +### isFormValid + +```ts +isFormValid: boolean; +``` + +A boolean indicating if the form is valid. + +### isFormValidating + +```ts +isFormValidating: boolean; +``` + +A boolean indicating if the form is currently validating. + +### isPristine + +```ts +isPristine: boolean; +``` + +A boolean indicating if none of the form's fields' values have been modified by the user. `True` if the user have not modified any of the fields. Opposite of `isDirty`. + +### isTouched + +```ts +isTouched: boolean; +``` + +A boolean indicating if any of the form fields have been touched. + +### isValid + +```ts +isValid: boolean; +``` + +A boolean indicating if the form and all its fields are valid. + +## Defined in + +[packages/form-core/src/FormApi.ts:263](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L263) diff --git a/docs/reference/type-aliases/fieldinfo.md b/docs/reference/type-aliases/fieldinfo.md new file mode 100644 index 0000000000..1f11721c64 --- /dev/null +++ b/docs/reference/type-aliases/fieldinfo.md @@ -0,0 +1,40 @@ +--- +id: FieldInfo +title: FieldInfo +--- + +# Type Alias: FieldInfo\ + +```ts +type FieldInfo: object; +``` + +An object representing the field information for a specific field within the form. + +## Type Parameters + +• **TFormData** + +• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined` + +## Type declaration + +### instance + +```ts +instance: FieldApi | undefined, TFormValidator> | null; +``` + +An instance of the FieldAPI. + +### validationMetaMap + +```ts +validationMetaMap: Record; +``` + +A record of field validation internal handling. + +## Defined in + +[packages/form-core/src/FormApi.ts:197](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L197) diff --git a/docs/reference/type-aliases/fieldmeta.md b/docs/reference/type-aliases/fieldmeta.md new file mode 100644 index 0000000000..82277a280a --- /dev/null +++ b/docs/reference/type-aliases/fieldmeta.md @@ -0,0 +1,74 @@ +--- +id: FieldMeta +title: FieldMeta +--- + +# Type Alias: FieldMeta + +```ts +type FieldMeta: object; +``` + +An object type representing the metadata of a field in a form. + +## Type declaration + +### errorMap + +```ts +errorMap: ValidationErrorMap; +``` + +A map of errors related to the field value. + +### errors + +```ts +errors: ValidationError[]; +``` + +An array of errors related to the field value. + +### isBlurred + +```ts +isBlurred: boolean; +``` + +A flag indicating whether the field has been blurred. + +### isDirty + +```ts +isDirty: boolean; +``` + +A flag that is `true` if the field's value has been modified by the user. Opposite of `isPristine`. + +### isPristine + +```ts +isPristine: boolean; +``` + +A flag that is `true` if the field's value has not been modified by the user. Opposite of `isDirty`. + +### isTouched + +```ts +isTouched: boolean; +``` + +A flag indicating whether the field has been touched. + +### isValidating + +```ts +isValidating: boolean; +``` + +A flag indicating whether the field is currently being validated. + +## Defined in + +[packages/form-core/src/FieldApi.ts:334](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L334) diff --git a/docs/reference/type-aliases/fieldserrormapfromvalidator.md b/docs/reference/type-aliases/fieldserrormapfromvalidator.md new file mode 100644 index 0000000000..a9416909d6 --- /dev/null +++ b/docs/reference/type-aliases/fieldserrormapfromvalidator.md @@ -0,0 +1,18 @@ +--- +id: FieldsErrorMapFromValidator +title: FieldsErrorMapFromValidator +--- + +# Type Alias: FieldsErrorMapFromValidator\ + +```ts +type FieldsErrorMapFromValidator: Partial, ValidationErrorMap>>; +``` + +## Type Parameters + +• **TFormData** + +## Defined in + +[packages/form-core/src/FormApi.ts:26](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L26) diff --git a/docs/reference/type-aliases/fieldstate.md b/docs/reference/type-aliases/fieldstate.md new file mode 100644 index 0000000000..c54a8fb32a --- /dev/null +++ b/docs/reference/type-aliases/fieldstate.md @@ -0,0 +1,38 @@ +--- +id: FieldState +title: FieldState +--- + +# Type Alias: FieldState\ + +```ts +type FieldState: object; +``` + +An object type representing the state of a field. + +## Type Parameters + +• **TData** + +## Type declaration + +### meta + +```ts +meta: FieldMeta; +``` + +The current metadata of the field. + +### value + +```ts +value: TData; +``` + +The current value of the field. + +## Defined in + +[packages/form-core/src/FieldApi.ts:368](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L368) diff --git a/docs/reference/type-aliases/formstate.md b/docs/reference/type-aliases/formstate.md new file mode 100644 index 0000000000..0b522c6f0e --- /dev/null +++ b/docs/reference/type-aliases/formstate.md @@ -0,0 +1,18 @@ +--- +id: FormState +title: FormState +--- + +# Type Alias: FormState\ + +```ts +type FormState: BaseFormState & DerivedFormState; +``` + +## Type Parameters + +• **TFormData** + +## Defined in + +[packages/form-core/src/FormApi.ts:310](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L310) diff --git a/docs/reference/type-aliases/formvalidatefn.md b/docs/reference/type-aliases/formvalidatefn.md new file mode 100644 index 0000000000..03546e3268 --- /dev/null +++ b/docs/reference/type-aliases/formvalidatefn.md @@ -0,0 +1,32 @@ +--- +id: FormValidateFn +title: FormValidateFn +--- + +# Type Alias: FormValidateFn()\ + +```ts +type FormValidateFn: (props) => FormValidationError; +``` + +## Type Parameters + +• **TFormData** + +• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined` + +## Parameters + +• **props** + +• **props.formApi**: [`FormApi`](../classes/formapi.md)\<`TFormData`, `TFormValidator`\> + +• **props.value**: `TFormData` + +## Returns + +`FormValidationError`\<`TFormData`\> + +## Defined in + +[packages/form-core/src/FormApi.ts:30](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L30) diff --git a/docs/reference/type-aliases/formvalidator.md b/docs/reference/type-aliases/formvalidator.md new file mode 100644 index 0000000000..814c27cda7 --- /dev/null +++ b/docs/reference/type-aliases/formvalidator.md @@ -0,0 +1,52 @@ +--- +id: FormValidator +title: FormValidator +--- + +# Type Alias: FormValidator\ + +```ts +type FormValidator: object; +``` + +## Type Parameters + +• **TFormData** + +• **TType** + +• **TFn** = `unknown` + +## Type declaration + +### validate() + +#### Parameters + +• **options** + +• **options.value**: `TType` + +• **fn**: `TFn` + +#### Returns + +[`ValidationError`](validationerror.md) + +### validateAsync() + +#### Parameters + +• **options** + +• **options.value**: `TType` + +• **fn**: `TFn` + +#### Returns + +`Promise`\<`FormValidationError`\<`TFormData`\>\> + +## Defined in + +[packages/form-core/src/FormApi.ts:61](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L61) diff --git a/docs/reference/type-aliases/updater.md b/docs/reference/type-aliases/updater.md new file mode 100644 index 0000000000..01f7919da9 --- /dev/null +++ b/docs/reference/type-aliases/updater.md @@ -0,0 +1,20 @@ +--- +id: Updater +title: Updater +--- + +# Type Alias: Updater\ + +```ts +type Updater: TOutput | UpdaterFn; +``` + +## Type Parameters + +• **TInput** + +• **TOutput** = `TInput` + +## Defined in + +[packages/form-core/src/utils.ts:7](https://github.com/TanStack/form/blob/main/packages/form-core/src/utils.ts#L7) diff --git a/docs/reference/type-aliases/updaterfn.md b/docs/reference/type-aliases/updaterfn.md new file mode 100644 index 0000000000..b1b0c5a38b --- /dev/null +++ b/docs/reference/type-aliases/updaterfn.md @@ -0,0 +1,28 @@ +--- +id: UpdaterFn +title: UpdaterFn +--- + +# Type Alias: UpdaterFn()\ + +```ts +type UpdaterFn: (input) => TOutput; +``` + +## Type Parameters + +• **TInput** + +• **TOutput** = `TInput` + +## Parameters + +• **input**: `TInput` + +## Returns + +`TOutput` + +## Defined in + +[packages/form-core/src/utils.ts:5](https://github.com/TanStack/form/blob/main/packages/form-core/src/utils.ts#L5) diff --git a/docs/reference/type-aliases/validationerror.md b/docs/reference/type-aliases/validationerror.md new file mode 100644 index 0000000000..a36d1d03f6 --- /dev/null +++ b/docs/reference/type-aliases/validationerror.md @@ -0,0 +1,14 @@ +--- +id: ValidationError +title: ValidationError +--- + +# Type Alias: ValidationError + +```ts +type ValidationError: undefined | false | null | string; +``` + +## Defined in + +[packages/form-core/src/types.ts:3](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L3) diff --git a/docs/reference/type-aliases/validationmeta.md b/docs/reference/type-aliases/validationmeta.md new file mode 100644 index 0000000000..d1195bde7c --- /dev/null +++ b/docs/reference/type-aliases/validationmeta.md @@ -0,0 +1,26 @@ +--- +id: ValidationMeta +title: ValidationMeta +--- + +# Type Alias: ValidationMeta + +```ts +type ValidationMeta: object; +``` + +An object representing the validation metadata for a field. Not intended for public usage. + +## Type declaration + +### lastAbortController + +```ts +lastAbortController: AbortController; +``` + +An abort controller stored in memory to cancel previous async validation attempts. + +## Defined in + +[packages/form-core/src/FormApi.ts:187](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L187) diff --git a/docs/reference/type-aliases/validationsource.md b/docs/reference/type-aliases/validationsource.md new file mode 100644 index 0000000000..af0b0a62a4 --- /dev/null +++ b/docs/reference/type-aliases/validationsource.md @@ -0,0 +1,14 @@ +--- +id: ValidationSource +title: ValidationSource +--- + +# Type Alias: ValidationSource + +```ts +type ValidationSource: "form" | "field"; +``` + +## Defined in + +[packages/form-core/src/types.ts:5](https://github.com/TanStack/form/blob/main/packages/form-core/src/types.ts#L5) From 677874d0bf590080db1a95bdea3ec6ff6b4f668a Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Mon, 25 Nov 2024 08:52:09 -0800 Subject: [PATCH 10/38] chore: migrate to form mount on every test --- packages/form-core/package.json | 2 +- packages/form-core/src/FieldApi.ts | 6 +- packages/form-core/src/FormApi.ts | 5 +- packages/form-core/tests/FieldApi.spec.ts | 100 ++++++++++++++++++++- packages/form-core/tests/FormApi.spec.ts | 55 +++++++----- pnpm-lock.yaml | 102 +++++++--------------- 6 files changed, 169 insertions(+), 101 deletions(-) diff --git a/packages/form-core/package.json b/packages/form-core/package.json index 9dc30ab80c..41997bc000 100644 --- a/packages/form-core/package.json +++ b/packages/form-core/package.json @@ -52,6 +52,6 @@ "src" ], "dependencies": { - "@tanstack/store": "https://pkg.pr.new/@tanstack/store@40" + "@tanstack/store": "https://pkg.pr.new/@tanstack/store@cc48436" } } diff --git a/packages/form-core/src/FieldApi.ts b/packages/form-core/src/FieldApi.ts index 8a98970aca..d74dac92b8 100644 --- a/packages/form-core/src/FieldApi.ts +++ b/packages/form-core/src/FieldApi.ts @@ -526,6 +526,8 @@ export class FieldApi< * Mounts the field instance to the form. */ mount = () => { + const cleanup = this.store.mount() + const info = this.getInfo() info.instance = this as never @@ -551,9 +553,7 @@ export class FieldApi< } } - return () => { - this.store.cleanup() - } + return cleanup } /** diff --git a/packages/form-core/src/FormApi.ts b/packages/form-core/src/FormApi.ts index 3561596d8b..0c3c295780 100644 --- a/packages/form-core/src/FormApi.ts +++ b/packages/form-core/src/FormApi.ts @@ -482,8 +482,9 @@ export class FormApi< } mount = () => { + const cleanup = this.store.mount() const { onMount } = this.options.validators || {} - if (!onMount) return + if (!onMount) return cleanup const error = this.runValidator({ validate: onMount, value: { @@ -499,6 +500,8 @@ export class FormApi< errorMap: { ...prev.errorMap, onMount: error }, })) } + + return cleanup } /** diff --git a/packages/form-core/tests/FieldApi.spec.ts b/packages/form-core/tests/FieldApi.spec.ts index 590724c83a..dc5dfe0c13 100644 --- a/packages/form-core/tests/FieldApi.spec.ts +++ b/packages/form-core/tests/FieldApi.spec.ts @@ -10,11 +10,15 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'name', }) + field.mount() + expect(field.getValue()).toBe('test') }) @@ -24,6 +28,7 @@ describe('field api', () => { name: 'test', }, }) + form.mount() const field = new FieldApi({ form, @@ -31,16 +36,23 @@ describe('field api', () => { name: 'name', }) + field.mount() + expect(field.getValue()).toBe('other') }) it('should get default meta', () => { const form = new FormApi() + + form.mount() + const field = new FieldApi({ form, name: 'name', }) + field.mount() + expect(field.getMeta()).toEqual({ isTouched: false, isBlurred: false, @@ -54,6 +66,9 @@ describe('field api', () => { it('should allow to set default meta', () => { const form = new FormApi() + + form.mount() + const field = new FieldApi({ form, name: 'name', @@ -65,6 +80,8 @@ describe('field api', () => { }, }) + field.mount() + expect(field.getMeta()).toEqual({ isTouched: true, isBlurred: true, @@ -83,11 +100,15 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'name', }) + field.mount() + field.setValue('other', { dontUpdateMeta: true, }) @@ -102,11 +123,15 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'names', }) + field.mount() + field.pushValue('other') expect(field.getValue()).toStrictEqual(['one', 'other']) @@ -118,6 +143,7 @@ describe('field api', () => { names: ['test'], }, }) + form.mount() const field = new FieldApi({ @@ -132,6 +158,7 @@ describe('field api', () => { }, }, }) + field.mount() field.pushValue('other') @@ -148,11 +175,15 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'names', }) + field.mount() + field.insertValue(1, 'other') expect(field.getValue()).toStrictEqual(['one', 'other', 'two']) @@ -165,11 +196,15 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'names', }) + field.mount() + field.replaceValue(1, 'other') expect(field.getValue()).toStrictEqual(['one', 'other', 'three']) @@ -182,11 +217,15 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'names', }) + field.mount() + field.replaceValue(10, 'other') expect(field.getValue()).toStrictEqual(['one', 'two', 'three']) @@ -231,11 +270,15 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'names', }) + field.mount() + field.removeValue(1) expect(field.getValue()).toStrictEqual(['one']) @@ -373,7 +416,9 @@ describe('field api', () => { validators: subFieldValidators, }) - ;[form, field, subField1].forEach((f) => f.mount()) + form.mount() + field.mount() + subField1.mount() await form.handleSubmit() @@ -394,11 +439,15 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'names', }) + field.mount() + field.swapValues(0, 1) expect(field.getValue()).toStrictEqual(['two', 'one']) @@ -443,11 +492,15 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'names', }) + field.mount() + field.moveValue(2, 0) expect(field.getValue()).toStrictEqual(['three', 'one', 'two', 'four']) @@ -492,6 +545,8 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'name', @@ -515,6 +570,8 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'name', @@ -547,6 +604,8 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'name', @@ -580,6 +639,8 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'name', @@ -619,6 +680,8 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'name', @@ -668,6 +731,8 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'name', @@ -718,6 +783,8 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'name', @@ -769,6 +836,8 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'name', @@ -799,6 +868,8 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'name', @@ -833,6 +904,8 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'name', @@ -871,6 +944,8 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'name', @@ -908,6 +983,8 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'name', @@ -939,6 +1016,8 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'name', @@ -975,6 +1054,8 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'name', @@ -1006,6 +1087,8 @@ describe('field api', () => { } const form = new FormApi
() + form.mount() + const field = new FieldApi({ form, name: 'name', @@ -1025,6 +1108,8 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'name', @@ -1043,6 +1128,8 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'firstName', @@ -1172,6 +1259,8 @@ describe('field api', () => { }, }) + form.mount() + let resolve!: () => void const promise = new Promise((r) => { resolve = r as never @@ -1211,6 +1300,8 @@ describe('field api', () => { }, }) + form.mount() + const passField = new FieldApi({ form, name: 'password', @@ -1253,6 +1344,8 @@ describe('field api', () => { }, }) + form.mount() + const passField = new FieldApi({ form, name: 'password', @@ -1310,6 +1403,8 @@ describe('field api', () => { }, }) + form.mount() + const passField = new FieldApi({ form, name: 'password', @@ -1363,6 +1458,7 @@ describe('field api', () => { name: string } const form = new FormApi() + form.mount() const nameField = new FieldApi({ form, name: 'name', @@ -1378,6 +1474,7 @@ describe('field api', () => { name: string } const form = new FormApi() + form.mount() const nameField = new FieldApi({ form, name: 'name', @@ -1400,6 +1497,7 @@ describe('field api', () => { name: string } const form = new FormApi() + form.mount() const nameField = new FieldApi({ form, name: 'name', diff --git a/packages/form-core/tests/FormApi.spec.ts b/packages/form-core/tests/FormApi.spec.ts index d62d67b14a..e68910fbf3 100644 --- a/packages/form-core/tests/FormApi.spec.ts +++ b/packages/form-core/tests/FormApi.spec.ts @@ -474,7 +474,8 @@ describe('form api', () => { }) form.mount() // Since validation runs through the field, a field must be mounted for that array - new FieldApi({ form, name: 'names' }).mount() + const field = new FieldApi({ form, name: 'names' }) + field.mount() form.pushFieldValue('names', 'other') @@ -831,6 +832,8 @@ describe('form api', () => { const form = new FormApi() + form.mount() + const field = new FieldApi({ form, name: 'employees', @@ -858,7 +861,7 @@ describe('form api', () => { } const form = new FormApi() - + form.mount() const field = new FieldApi({ form, name: 'employees', @@ -939,7 +942,7 @@ describe('form api', () => { age: 4, }, }) - + form.mount() form.deleteField('names') expect(form.getFieldValue('age')).toStrictEqual(4) @@ -1377,13 +1380,14 @@ describe('form api', () => { expect(form.state.errors).toStrictEqual([]) }) - it.skip('should validate fields during submit', async () => { + it('should validate fields during submit', async () => { const form = new FormApi({ defaultValues: { firstName: '', lastName: '', }, }) + form.mount() const field = new FieldApi({ form, @@ -1417,13 +1421,13 @@ describe('form api', () => { ]) }) - it.skip('should validate optional object fields during submit', async () => { + it('should validate optional object fields during submit', async () => { const form = new FormApi({ defaultValues: { person: null, } as { person: { firstName: string; lastName: string } | null }, }) - + form.mount() const field = new FieldApi({ form, name: 'person.firstName', @@ -1456,14 +1460,14 @@ describe('form api', () => { ]) }) - it.skip('should run all types of validation on fields during submit', async () => { + it('should run all types of validation on fields during submit', async () => { const form = new FormApi({ defaultValues: { firstName: '', lastName: '', }, }) - + form.mount() const field = new FieldApi({ form, name: 'firstName', @@ -1507,7 +1511,7 @@ describe('form api', () => { onSubmitAsync: formSubmit, }, }) - + form.mount() const field = new FieldApi({ form, name: 'firstName', @@ -1542,7 +1546,7 @@ describe('form api', () => { lastName: '', }, }) - + form.mount() const field = new FieldApi({ form, name: 'firstName', @@ -1579,7 +1583,7 @@ describe('form api', () => { firstName: '', }, }) - + form.mount() const field = new FieldApi({ form, name: 'firstName', @@ -1622,8 +1626,8 @@ describe('form api', () => { }, }) - field.mount() form.mount() + field.mount() await form.validateAllFields('change') expect(field.getMeta().errorMap.onChange).toEqual('first name is required') @@ -1651,8 +1655,8 @@ describe('form api', () => { }, }) - field.mount() form.mount() + field.mount() await form.validateField('firstName', 'change') expect(field.getMeta().errorMap.onChange).toEqual('first name is required') @@ -1692,7 +1696,7 @@ describe('form api', () => { value.firstName.length > 0 ? undefined : 'first name is required', }, }) - + form.mount() const field = new FieldApi({ form, name: 'firstName', @@ -1710,7 +1714,7 @@ describe('form api', () => { person: null, } as { person: { firstName: string } | null }, }) - + form.mount() const field = new FieldApi({ form, name: 'person.firstName', @@ -1730,7 +1734,7 @@ describe('form api', () => { person: null, } as { person: { nameInfo: { first: string } | null } | null }, }) - + form.mount() const field = new FieldApi({ form, name: 'person.nameInfo.first', @@ -1750,7 +1754,7 @@ describe('form api', () => { persons: null, } as { persons: Array<{ nameInfo: { first: string } }> | null }, }) - + form.mount() const field = new FieldApi({ form, name: 'persons', @@ -1769,6 +1773,7 @@ describe('form api', () => { name: string } const form = new FormApi() + form.mount() form.setErrorMap({ onChange: "name can't be Josh", }) @@ -1780,6 +1785,7 @@ describe('form api', () => { name: string } const form = new FormApi() + form.mount() form.setErrorMap({ onChange: "name can't be Josh", }) @@ -1796,6 +1802,7 @@ describe('form api', () => { name: string } const form = new FormApi() + form.mount() form.setErrorMap({ onChange: "name can't be Josh", }) @@ -1827,6 +1834,8 @@ describe('form api', () => { }, }) + form.mount() + const firstNameField = new FieldApi({ form, name: 'firstName', @@ -2004,7 +2013,7 @@ describe('form api', () => { }, }, }) - + form.mount() const firstNameField = new FieldApi({ form, name: 'firstName', @@ -2066,7 +2075,7 @@ describe('form api', () => { }, }, }) - + form.mount() const firstNameField = new FieldApi({ form, name: 'firstName', @@ -2135,7 +2144,7 @@ describe('form api', () => { }, }, }) - + form.mount() const field = new FieldApi({ form, name: 'names', @@ -2189,7 +2198,7 @@ describe('form api', () => { }, }, }) - + form.mount() const field = new FieldApi({ form, name: 'employees', @@ -2242,7 +2251,7 @@ describe('form api', () => { }, }, }) - + form.mount() const passField = new FieldApi({ form, name: 'password', @@ -2294,7 +2303,7 @@ describe('form api', () => { }, }, }) - + form.mount() const passField = new FieldApi({ form, name: 'password', diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 99205158a7..4bca8bcab3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1073,8 +1073,8 @@ importers: packages/form-core: dependencies: '@tanstack/store': - specifier: https://pkg.pr.new/@tanstack/store@40 - version: https://pkg.pr.new/@tanstack/store@40 + specifier: https://pkg.pr.new/@tanstack/store@cc48436 + version: https://pkg.pr.new/@tanstack/store@cc48436 packages/lit-form: dependencies: @@ -4202,8 +4202,8 @@ packages: '@tanstack/store@0.5.5': resolution: {integrity: sha512-EOSrgdDAJExbvRZEQ/Xhh9iZchXpMN+ga1Bnk8Nmygzs8TfiE6hbzThF+Pr2G19uHL6+DTDTHhJ8VQiOd7l4tA==} - '@tanstack/store@https://pkg.pr.new/@tanstack/store@40': - resolution: {tarball: https://pkg.pr.new/@tanstack/store@40} + '@tanstack/store@https://pkg.pr.new/@tanstack/store@cc48436': + resolution: {tarball: https://pkg.pr.new/@tanstack/store@cc48436} version: 0.6.0 '@tanstack/virtual-file-routes@1.64.0': @@ -10494,7 +10494,7 @@ snapshots: undici: 6.11.1 vite: 5.1.8(@types/node@20.17.5)(less@4.2.0)(sass@1.71.1)(sugarss@4.0.1(postcss@8.4.48))(terser@5.29.1) watchpack: 2.4.0 - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) webpack-dev-middleware: 6.1.2(webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)) webpack-dev-server: 4.15.1(webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)) webpack-merge: 5.10.0 @@ -10525,7 +10525,7 @@ snapshots: dependencies: '@angular-devkit/architect': 0.1703.11(chokidar@3.6.0) rxjs: 7.8.1 - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) webpack-dev-server: 4.15.1(webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)) transitivePeerDependencies: - chokidar @@ -12700,7 +12700,7 @@ snapshots: dependencies: '@angular/compiler-cli': 17.3.12(@angular/compiler@17.3.12(@angular/core@17.3.12(rxjs@7.8.1)(zone.js@0.15.0)))(typescript@5.4.5) typescript: 5.4.5 - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) '@nodelib/fs.scandir@2.1.5': dependencies: @@ -13521,8 +13521,8 @@ snapshots: '@tanstack/start-vite-plugin': 1.79.0 '@vinxi/react': 0.2.5 '@vinxi/react-server-dom': 0.0.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vite@5.4.10(@types/node@20.17.5)(less@4.2.0)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)) - '@vinxi/server-components': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3)) - '@vinxi/server-functions': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3)) + '@vinxi/server-components': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3)) + '@vinxi/server-functions': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3)) import-meta-resolve: 4.1.0 isbot: 5.1.17 jsesc: 3.0.2 @@ -13569,7 +13569,7 @@ snapshots: '@tanstack/store@0.5.5': {} - '@tanstack/store@https://pkg.pr.new/@tanstack/store@40': {} + '@tanstack/store@https://pkg.pr.new/@tanstack/store@cc48436': {} '@tanstack/virtual-file-routes@1.64.0': {} @@ -14068,7 +14068,7 @@ snapshots: transitivePeerDependencies: - uWebSockets.js - '@vinxi/plugin-directives@0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3))': + '@vinxi/plugin-directives@0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3))': dependencies: '@babel/parser': 7.26.2 acorn: 8.14.0 @@ -14090,9 +14090,9 @@ snapshots: '@vinxi/react@0.2.5': {} - '@vinxi/server-components@0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3))': + '@vinxi/server-components@0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3))': dependencies: - '@vinxi/plugin-directives': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3)) + '@vinxi/plugin-directives': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3)) acorn: 8.14.0 acorn-loose: 8.4.0 acorn-typescript: 1.4.13(acorn@8.14.0) @@ -14101,9 +14101,9 @@ snapshots: recast: 0.23.9 vinxi: 0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3) - '@vinxi/server-functions@0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3))': + '@vinxi/server-functions@0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3))': dependencies: - '@vinxi/plugin-directives': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3)) + '@vinxi/plugin-directives': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.5)(sugarss@4.0.1(postcss@8.4.48))(terser@5.36.0)(webpack-sources@3.2.3)) acorn: 8.14.0 acorn-loose: 8.4.0 acorn-typescript: 1.4.13(acorn@8.14.0) @@ -14654,7 +14654,7 @@ snapshots: '@babel/core': 7.24.0 find-cache-dir: 4.0.0 schema-utils: 4.2.0 - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) babel-plugin-add-module-exports@0.2.1: {} @@ -15123,7 +15123,7 @@ snapshots: normalize-path: 3.0.0 schema-utils: 4.2.0 serialize-javascript: 6.0.2 - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) core-js-compat@3.39.0: dependencies: @@ -15192,7 +15192,7 @@ snapshots: postcss-value-parser: 4.2.0 semver: 7.6.3 optionalDependencies: - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) css-select@5.1.0: dependencies: @@ -17172,7 +17172,7 @@ snapshots: dependencies: klona: 2.0.6 less: 4.2.0 - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) less@4.2.0: dependencies: @@ -17197,7 +17197,7 @@ snapshots: dependencies: webpack-sources: 3.2.3 optionalDependencies: - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) liftoff@5.0.0: dependencies: @@ -17801,7 +17801,7 @@ snapshots: dependencies: schema-utils: 4.2.0 tapable: 2.2.1 - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) minimalistic-assert@1.0.1: {} @@ -18657,7 +18657,7 @@ snapshots: postcss: 8.4.35 semver: 7.6.3 optionalDependencies: - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) transitivePeerDependencies: - typescript @@ -19219,7 +19219,7 @@ snapshots: neo-async: 2.6.2 optionalDependencies: sass: 1.71.1 - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) sass@1.71.1: dependencies: @@ -19531,7 +19531,7 @@ snapshots: dependencies: iconv-lite: 0.6.3 source-map-js: 1.2.1 - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) source-map-support@0.5.21: dependencies: @@ -19754,19 +19754,7 @@ snapshots: mkdirp: 1.0.4 yallist: 4.0.0 - terser-webpack-plugin@5.3.10(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)(webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)): - dependencies: - '@jridgewell/trace-mapping': 0.3.25 - jest-worker: 27.5.1 - schema-utils: 3.3.0 - serialize-javascript: 6.0.2 - terser: 5.36.0 - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) - optionalDependencies: - '@swc/core': 1.7.42(@swc/helpers@0.5.13) - esbuild: 0.20.1 - - terser-webpack-plugin@5.3.10(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1)(webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)): + terser-webpack-plugin@5.3.10(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1)(webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1)): dependencies: '@jridgewell/trace-mapping': 0.3.25 jest-worker: 27.5.1 @@ -20601,7 +20589,7 @@ snapshots: mime-types: 2.1.35 range-parser: 1.2.1 schema-utils: 4.2.0 - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) webpack-dev-middleware@6.1.2(webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)): dependencies: @@ -20611,7 +20599,7 @@ snapshots: range-parser: 1.2.1 schema-utils: 4.2.0 optionalDependencies: - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) webpack-dev-server@4.15.1(webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)): dependencies: @@ -20646,7 +20634,7 @@ snapshots: webpack-dev-middleware: 5.3.4(webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)) ws: 8.18.0 optionalDependencies: - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) transitivePeerDependencies: - bufferutil - debug @@ -20664,40 +20652,10 @@ snapshots: webpack-subresource-integrity@5.1.0(webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)): dependencies: typed-assert: 1.0.9 - webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1) + webpack: 5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1) webpack-virtual-modules@0.6.2: {} - webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1): - dependencies: - '@types/estree': 1.0.6 - '@webassemblyjs/ast': 1.12.1 - '@webassemblyjs/wasm-edit': 1.12.1 - '@webassemblyjs/wasm-parser': 1.12.1 - acorn: 8.14.0 - acorn-import-attributes: 1.9.5(acorn@8.14.0) - browserslist: 4.24.2 - chrome-trace-event: 1.0.4 - enhanced-resolve: 5.17.1 - es-module-lexer: 1.5.4 - eslint-scope: 5.1.1 - events: 3.3.0 - glob-to-regexp: 0.4.1 - graceful-fs: 4.2.11 - json-parse-even-better-errors: 2.3.1 - loader-runner: 4.3.0 - mime-types: 2.1.35 - neo-async: 2.6.2 - schema-utils: 3.3.0 - tapable: 2.2.1 - terser-webpack-plugin: 5.3.10(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)(webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)) - watchpack: 2.4.2 - webpack-sources: 3.2.3 - transitivePeerDependencies: - - '@swc/core' - - esbuild - - uglify-js - webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1): dependencies: '@types/estree': 1.0.6 @@ -20720,7 +20678,7 @@ snapshots: neo-async: 2.6.2 schema-utils: 3.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.10(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1)(webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.20.1)) + terser-webpack-plugin: 5.3.10(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1)(webpack@5.94.0(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.23.1)) watchpack: 2.4.2 webpack-sources: 3.2.3 transitivePeerDependencies: From bc64ef54802ae31e908addd5f9714c732aed8f5b Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Mon, 25 Nov 2024 09:00:51 -0800 Subject: [PATCH 11/38] chore: simplify complex tests --- packages/form-core/tests/FormApi.spec.ts | 239 +---------------------- 1 file changed, 5 insertions(+), 234 deletions(-) diff --git a/packages/form-core/tests/FormApi.spec.ts b/packages/form-core/tests/FormApi.spec.ts index e68910fbf3..777e33e317 100644 --- a/packages/form-core/tests/FormApi.spec.ts +++ b/packages/form-core/tests/FormApi.spec.ts @@ -3,37 +3,6 @@ import { FieldApi, FormApi } from '../src/index' import { sleep } from './utils' describe('form api', () => { - it('should get default form state', () => { - const form = new FormApi() - form.mount() - expect(form.state).toEqual({ - values: {}, - fieldMeta: {}, - canSubmit: true, - isFieldsValid: true, - isFieldsValidating: false, - isFormValid: true, - isFormValidating: false, - isSubmitted: false, - errors: [], - errorMap: {}, - isSubmitting: false, - isTouched: false, - isBlurred: false, - isPristine: true, - isDirty: false, - isValid: true, - isValidating: false, - submissionAttempts: 0, - validationMetaMap: { - onChange: undefined, - onBlur: undefined, - onSubmit: undefined, - onMount: undefined, - }, - }) - }) - it('should get default form state when default values are passed', () => { const form = new FormApi({ defaultValues: { @@ -41,33 +10,10 @@ describe('form api', () => { }, }) form.mount() - expect(form.state).toEqual({ + expect(form.state).toMatchObject({ values: { name: 'test', }, - fieldMeta: {}, - canSubmit: true, - isFieldsValid: true, - errors: [], - errorMap: {}, - isFieldsValidating: false, - isFormValid: true, - isFormValidating: false, - isSubmitted: false, - isSubmitting: false, - isTouched: false, - isBlurred: false, - isPristine: true, - isDirty: false, - isValid: true, - isValidating: false, - submissionAttempts: 0, - validationMetaMap: { - onChange: undefined, - onBlur: undefined, - onSubmit: undefined, - onMount: undefined, - }, }) }) @@ -78,31 +24,8 @@ describe('form api', () => { }, }) form.mount() - expect(form.state).toEqual({ - values: {}, - fieldMeta: {}, - errors: [], - errorMap: {}, - canSubmit: true, - isFieldsValid: true, - isFieldsValidating: false, - isFormValid: true, - isFormValidating: false, - isSubmitted: false, - isSubmitting: false, - isTouched: false, - isBlurred: false, - isPristine: true, - isDirty: false, - isValid: true, - isValidating: false, + expect(form.state).toMatchObject({ submissionAttempts: 30, - validationMetaMap: { - onChange: undefined, - onBlur: undefined, - onSubmit: undefined, - onMount: undefined, - }, }) }) @@ -122,34 +45,11 @@ describe('form api', () => { }, }) - expect(form.state).toEqual({ + expect(form.state).toMatchObject({ values: { name: 'other', }, - errors: [], - errorMap: {}, - fieldMeta: {}, - canSubmit: true, - isFieldsValid: true, - isFieldsValidating: false, - isFormValid: true, - isFormValidating: false, - isSubmitted: false, - isSubmitting: false, - isTouched: false, - isBlurred: false, - isPristine: true, - isDirty: false, - isValid: true, - isValidating: false, submissionAttempts: 300, - validationMetaMap: { - onChange: undefined, - onBlur: undefined, - onSubmit: undefined, - onMount: undefined, - onServer: undefined, - }, }) }) @@ -167,33 +67,12 @@ describe('form api', () => { form.reset() - expect(form.state).toEqual({ + expect(form.state).toMatchObject({ values: { name: 'test', }, - errors: [], - errorMap: {}, fieldMeta: {}, - canSubmit: true, - isFieldsValid: true, - isFieldsValidating: false, - isFormValid: true, - isFormValidating: false, - isSubmitted: false, - isSubmitting: false, - isTouched: false, - isBlurred: false, - isPristine: true, - isDirty: false, - isValid: true, - isValidating: false, submissionAttempts: 0, - validationMetaMap: { - onChange: undefined, - onBlur: undefined, - onSubmit: undefined, - onMount: undefined, - }, }) }) @@ -230,55 +109,12 @@ describe('form api', () => { } form.reset(resetValues) - expect(form.state).toEqual({ + expect(form.state).toMatchObject({ values: { name: 'reset name', age: 40, surname: 'reset surname', }, - errors: [], - errorMap: {}, - fieldMeta: { - name: { - isValidating: false, - isTouched: false, - isBlurred: false, - isDirty: false, - isPristine: true, - errors: [], - errorMap: {}, - }, - age: { - isValidating: false, - isTouched: false, - isBlurred: false, - isDirty: false, - isPristine: true, - errors: [], - errorMap: {}, - }, - }, - canSubmit: true, - isFieldsValid: true, - isFieldsValidating: false, - isFormValid: true, - isFormValidating: false, - isSubmitted: false, - isSubmitting: false, - isTouched: false, - isPristine: true, - isDirty: false, - isValid: true, - isBlurred: false, - isValidating: false, - submissionAttempts: 0, - validationMetaMap: { - onChange: undefined, - onBlur: undefined, - onSubmit: undefined, - onMount: undefined, - onServer: undefined, - }, }) }) @@ -312,71 +148,6 @@ describe('form api', () => { expect(form.state.values).toEqual({ name: 'initial' }) }) - it('should not wipe validators when resetting', () => { - const form = new FormApi({ - defaultValues: { - name: 'test', - }, - }) - - const field = new FieldApi({ - form, - name: 'name', - validators: { - onChange: ({ value }) => (value.length > 0 ? undefined : 'required'), - }, - }) - - form.mount() - - field.mount() - - field.handleChange('') - - expect(form.state.isFieldsValid).toEqual(false) - expect(form.state.canSubmit).toEqual(false) - - form.reset() - - expect(form.state).toEqual({ - values: { name: 'test' }, - errors: [], - errorMap: {}, - fieldMeta: { - name: { - isValidating: false, - isTouched: false, - isBlurred: false, - isDirty: false, - isPristine: true, - errors: [], - errorMap: {}, - }, - }, - canSubmit: true, - isFieldsValid: true, - isFieldsValidating: false, - isFormValid: true, - isFormValidating: false, - isSubmitted: false, - isSubmitting: false, - isTouched: false, - isBlurred: false, - isPristine: true, - isDirty: false, - isValid: true, - isValidating: false, - submissionAttempts: 0, - validationMetaMap: { - onChange: undefined, - onBlur: undefined, - onSubmit: undefined, - onMount: undefined, - onServer: undefined, - }, - }) - }) - it("should get a field's value", () => { const form = new FormApi({ defaultValues: { From 0f6b6d6d036b7300d5bcdec09bd64f43f903b3d0 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Mon, 25 Nov 2024 17:06:40 +0000 Subject: [PATCH 12/38] ci: apply automated fixes and generate docs --- docs/reference/classes/formapi.md | 46 +++++++++++++++++-------------- 1 file changed, 25 insertions(+), 21 deletions(-) diff --git a/docs/reference/classes/formapi.md b/docs/reference/classes/formapi.md index 3ed6d415c3..ce33172b71 100644 --- a/docs/reference/classes/formapi.md +++ b/docs/reference/classes/formapi.md @@ -131,7 +131,7 @@ deleteField(field): void #### Defined in -[packages/form-core/src/FormApi.ts:1076](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1076) +[packages/form-core/src/FormApi.ts:1079](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1079) *** @@ -157,7 +157,7 @@ Gets the field info of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:987](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L987) +[packages/form-core/src/FormApi.ts:990](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L990) *** @@ -183,7 +183,7 @@ Gets the metadata of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:978](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L978) +[packages/form-core/src/FormApi.ts:981](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L981) *** @@ -209,7 +209,7 @@ Gets the value of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:971](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L971) +[packages/form-core/src/FormApi.ts:974](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L974) *** @@ -227,7 +227,7 @@ Handles the form submission, performs validation, and calls the appropriate onSu #### Defined in -[packages/form-core/src/FormApi.ts:923](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L923) +[packages/form-core/src/FormApi.ts:926](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L926) *** @@ -263,18 +263,22 @@ Inserts a value into an array field at the specified index, shifting the subsequ #### Defined in -[packages/form-core/src/FormApi.ts:1108](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1108) +[packages/form-core/src/FormApi.ts:1111](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1111) *** ### mount() ```ts -mount(): void +mount(): () => void ``` #### Returns +`Function` + +##### Returns + `void` #### Defined in @@ -315,7 +319,7 @@ Moves the value at the first specified index to the second specified index withi #### Defined in -[packages/form-core/src/FormApi.ts:1226](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1226) +[packages/form-core/src/FormApi.ts:1229](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1229) *** @@ -348,7 +352,7 @@ Pushes a value into an array field. #### Defined in -[packages/form-core/src/FormApi.ts:1090](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1090) +[packages/form-core/src/FormApi.ts:1093](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1093) *** @@ -381,7 +385,7 @@ Removes a value from an array field at the specified index. #### Defined in -[packages/form-core/src/FormApi.ts:1161](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1161) +[packages/form-core/src/FormApi.ts:1164](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1164) *** @@ -417,7 +421,7 @@ Replaces a value into an array field at the specified index. #### Defined in -[packages/form-core/src/FormApi.ts:1135](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1135) +[packages/form-core/src/FormApi.ts:1138](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1138) *** @@ -448,7 +452,7 @@ Optional options to control the reset behavior. #### Defined in -[packages/form-core/src/FormApi.ts:551](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L551) +[packages/form-core/src/FormApi.ts:554](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L554) *** @@ -472,7 +476,7 @@ resetFieldMeta(fieldMeta): Record #### Defined in -[packages/form-core/src/FormApi.ts:1021](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1021) +[packages/form-core/src/FormApi.ts:1024](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1024) *** @@ -494,7 +498,7 @@ Updates the form's errorMap #### Defined in -[packages/form-core/src/FormApi.ts:1250](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1250) +[packages/form-core/src/FormApi.ts:1253](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1253) *** @@ -522,7 +526,7 @@ Updates the metadata of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1006](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1006) +[packages/form-core/src/FormApi.ts:1009](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1009) *** @@ -555,7 +559,7 @@ Sets the value of the specified field and optionally updates the touched state. #### Defined in -[packages/form-core/src/FormApi.ts:1045](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1045) +[packages/form-core/src/FormApi.ts:1048](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1048) *** @@ -591,7 +595,7 @@ Swaps the values at the specified indices within an array field. #### Defined in -[packages/form-core/src/FormApi.ts:1200](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1200) +[packages/form-core/src/FormApi.ts:1203](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1203) *** @@ -613,7 +617,7 @@ Updates the form options and form state. #### Defined in -[packages/form-core/src/FormApi.ts:507](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L507) +[packages/form-core/src/FormApi.ts:510](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L510) *** @@ -635,7 +639,7 @@ Validates form and all fields in using the correct handlers for a given validati #### Defined in -[packages/form-core/src/FormApi.ts:577](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L577) +[packages/form-core/src/FormApi.ts:580](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L580) *** @@ -668,7 +672,7 @@ Validates the children of a specified array in the form starting from a given in #### Defined in -[packages/form-core/src/FormApi.ts:611](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L611) +[packages/form-core/src/FormApi.ts:614](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L614) *** @@ -696,4 +700,4 @@ Validates a specified field in the form using the correct handlers for a given v #### Defined in -[packages/form-core/src/FormApi.ts:650](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L650) +[packages/form-core/src/FormApi.ts:653](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L653) From 31434d2b236a47bb5da171bfce0eeffd9881bf47 Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Mon, 25 Nov 2024 09:34:24 -0800 Subject: [PATCH 13/38] chore: refactor all derived state into `FormApi`, even field derived values --- packages/form-core/src/FieldApi.ts | 41 +++++++++---------- packages/form-core/src/FormApi.ts | 50 ++++++++++++++++++------ packages/form-core/tests/FormApi.spec.ts | 2 + 3 files changed, 59 insertions(+), 34 deletions(-) diff --git a/packages/form-core/src/FieldApi.ts b/packages/form-core/src/FieldApi.ts index d74dac92b8..741028c2bf 100644 --- a/packages/form-core/src/FieldApi.ts +++ b/packages/form-core/src/FieldApi.ts @@ -328,10 +328,7 @@ export interface FieldApiOptions< form: FormApi } -/** - * An object type representing the metadata of a field in a form. - */ -export type FieldMeta = { +export type FieldMetaBase = { /** * A flag indicating whether the field has been touched. */ @@ -340,18 +337,10 @@ export type FieldMeta = { * A flag indicating whether the field has been blurred. */ isBlurred: boolean - /** - * A flag that is `true` if the field's value has not been modified by the user. Opposite of `isDirty`. - */ - isPristine: boolean /** * A flag that is `true` if the field's value has been modified by the user. Opposite of `isPristine`. */ isDirty: boolean - /** - * An array of errors related to the field value. - */ - errors: ValidationError[] /** * A map of errors related to the field value. */ @@ -362,6 +351,22 @@ export type FieldMeta = { isValidating: boolean } +export type FieldMetaDerived = { + /** + * An array of errors related to the field value. + */ + errors: ValidationError[] + /** + * A flag that is `true` if the field's value has not been modified by the user. Opposite of `isDirty`. + */ + isPristine: boolean +} + +/** + * An object type representing the metadata of a field in a form. + */ +export type FieldMeta = FieldMetaBase & FieldMetaDerived + /** * An object type representing the state of a field. */ @@ -468,19 +473,9 @@ export class FieldApi< ...opts.defaultMeta, } - const metaErrors = Object.values(meta.errorMap).filter( - (val: unknown) => val !== undefined, - ) - - const isPristine = !meta.isDirty - return { value, - meta: { - ...meta, - errors: metaErrors, - isPristine, - }, + meta, } as FieldState }, }) diff --git a/packages/form-core/src/FormApi.ts b/packages/form-core/src/FormApi.ts index 0c3c295780..56d21d506d 100644 --- a/packages/form-core/src/FormApi.ts +++ b/packages/form-core/src/FormApi.ts @@ -10,7 +10,7 @@ import { } from './utils' import type { Updater } from './utils' import type { DeepKeys, DeepValue } from './util-types' -import type { FieldApi, FieldMeta } from './FieldApi' +import type { FieldApi, FieldMeta, FieldMetaBase } from './FieldApi' import type { FormValidationError, FormValidationErrorMap, @@ -230,9 +230,9 @@ export type BaseFormState = { */ validationMetaMap: Record /** - * A record of field metadata for each field in the form. + * A record of field metadata for each field in the form, not including the derived properties, like `errors` and such */ - fieldMeta: Record, FieldMeta> + fieldMetaBase: Record, FieldMetaBase> /** * A boolean indicating if the form is currently in the process of being submitted after `handleSubmit` is called. * @@ -260,7 +260,7 @@ export type BaseFormState = { submissionAttempts: number } -export type DerivedFormState = { +export type DerivedFormState = { /** * A boolean indicating if the form is currently validating. */ @@ -305,9 +305,14 @@ export type DerivedFormState = { * A boolean indicating if the form can be submitted based on its current state. */ canSubmit: boolean + /** + * A record of field metadata for each field in the form, not including the derived properties, like `errors` and such + */ + fieldMeta: Record, FieldMeta> } -export type FormState = BaseFormState & DerivedFormState +export type FormState = BaseFormState & + DerivedFormState function getDefaultFormState( defaultState: Partial>, @@ -315,7 +320,7 @@ function getDefaultFormState( return { values: defaultState.values ?? ({} as never), errorMap: defaultState.errorMap ?? {}, - fieldMeta: defaultState.fieldMeta ?? ({} as never), + fieldMetaBase: defaultState.fieldMetaBase ?? ({} as never), isSubmitted: defaultState.isSubmitted ?? false, isSubmitting: defaultState.isSubmitting ?? false, isValidating: defaultState.isValidating ?? false, @@ -385,11 +390,30 @@ export class FormApi< fn: () => { const { state } = this.baseStore // Computed state - const fieldMetaValues = Object.values(state.fieldMeta) as ( + const fieldMetaValues = Object.values(state.fieldMetaBase) as ( | FieldMeta | undefined )[] + const fieldMeta = {} as FormState['fieldMeta'] + for (const key of Object.keys(state.fieldMetaBase) as Array< + keyof typeof state.fieldMetaBase + >) { + const baseVal = state.fieldMetaBase[key as never] as FieldMetaBase + + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + const fieldErrors = Object.values(baseVal.errorMap ?? {}).filter( + (val: unknown) => val !== undefined, + ) + const isFieldPristine = !baseVal.isDirty + + fieldMeta[key] = { + ...baseVal, + errors: fieldErrors, + isPristine: isFieldPristine, + } as FieldMeta + } + const isFieldsValidating = fieldMetaValues.some( (field) => field?.isValidating, ) @@ -439,6 +463,7 @@ export class FormApi< return { ...state, + fieldMeta, errors, isFieldsValidating, isFieldsValid, @@ -1013,9 +1038,12 @@ export class FormApi< this.baseStore.setState((prev) => { return { ...prev, - fieldMeta: { - ...prev.fieldMeta, - [field]: functionalUpdate(updater, prev.fieldMeta[field]), + fieldMetaBase: { + ...prev.fieldMetaBase, + [field]: functionalUpdate( + updater, + prev.fieldMetaBase[field] as never, + ), }, } }) @@ -1080,7 +1108,7 @@ export class FormApi< this.baseStore.setState((prev) => { const newState = { ...prev } newState.values = deleteBy(newState.values, field) - delete newState.fieldMeta[field] + delete newState.fieldMetaBase[field] return newState }) diff --git a/packages/form-core/tests/FormApi.spec.ts b/packages/form-core/tests/FormApi.spec.ts index 777e33e317..b6ec092f0f 100644 --- a/packages/form-core/tests/FormApi.spec.ts +++ b/packages/form-core/tests/FormApi.spec.ts @@ -1446,6 +1446,8 @@ describe('form api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'firstName', From 4d72f936138107e0bf8238d941bb631797c59ad2 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Mon, 25 Nov 2024 17:35:53 +0000 Subject: [PATCH 14/38] ci: apply automated fixes and generate docs --- docs/reference/classes/fieldapi.md | 48 +++++++------- docs/reference/classes/formapi.md | 54 ++++++++-------- docs/reference/index.md | 2 + docs/reference/type-aliases/baseformstate.md | 6 +- .../type-aliases/derivedformstate.md | 16 ++++- docs/reference/type-aliases/fieldmeta.md | 62 +------------------ docs/reference/type-aliases/fieldmetabase.md | 56 +++++++++++++++++ .../type-aliases/fieldmetaderived.md | 32 ++++++++++ docs/reference/type-aliases/fieldstate.md | 2 +- docs/reference/type-aliases/formstate.md | 4 +- 10 files changed, 163 insertions(+), 119 deletions(-) create mode 100644 docs/reference/type-aliases/fieldmetabase.md create mode 100644 docs/reference/type-aliases/fieldmetaderived.md diff --git a/docs/reference/classes/fieldapi.md b/docs/reference/classes/fieldapi.md index fe2e31c505..720013005f 100644 --- a/docs/reference/classes/fieldapi.md +++ b/docs/reference/classes/fieldapi.md @@ -45,7 +45,7 @@ Initializes a new `FieldApi` instance. #### Defined in -[packages/form-core/src/FieldApi.ts:438](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L438) +[packages/form-core/src/FieldApi.ts:443](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L443) ## Properties @@ -59,7 +59,7 @@ A reference to the form API instance. #### Defined in -[packages/form-core/src/FieldApi.ts:402](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L402) +[packages/form-core/src/FieldApi.ts:407](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L407) *** @@ -73,7 +73,7 @@ The field name. #### Defined in -[packages/form-core/src/FieldApi.ts:412](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L412) +[packages/form-core/src/FieldApi.ts:417](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L417) *** @@ -87,7 +87,7 @@ The field options. #### Defined in -[packages/form-core/src/FieldApi.ts:416](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L416) +[packages/form-core/src/FieldApi.ts:421](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L421) *** @@ -101,7 +101,7 @@ The field state store. #### Defined in -[packages/form-core/src/FieldApi.ts:426](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L426) +[packages/form-core/src/FieldApi.ts:431](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L431) *** @@ -113,7 +113,7 @@ timeoutIds: Record; #### Defined in -[packages/form-core/src/FieldApi.ts:433](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L433) +[packages/form-core/src/FieldApi.ts:438](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L438) ## Accessors @@ -133,7 +133,7 @@ The current field state. #### Defined in -[packages/form-core/src/FieldApi.ts:430](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L430) +[packages/form-core/src/FieldApi.ts:435](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L435) ## Methods @@ -151,7 +151,7 @@ Gets the field information object. #### Defined in -[packages/form-core/src/FieldApi.ts:622](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L622) +[packages/form-core/src/FieldApi.ts:617](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L617) *** @@ -167,7 +167,7 @@ getMeta(): FieldMeta #### Defined in -[packages/form-core/src/FieldApi.ts:611](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L611) +[packages/form-core/src/FieldApi.ts:606](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L606) *** @@ -189,7 +189,7 @@ Use `field.state.value` instead. #### Defined in -[packages/form-core/src/FieldApi.ts:599](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L599) +[packages/form-core/src/FieldApi.ts:594](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L594) *** @@ -207,7 +207,7 @@ Handles the blur event. #### Defined in -[packages/form-core/src/FieldApi.ts:974](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L974) +[packages/form-core/src/FieldApi.ts:969](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L969) *** @@ -229,7 +229,7 @@ Handles the change event. #### Defined in -[packages/form-core/src/FieldApi.ts:967](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L967) +[packages/form-core/src/FieldApi.ts:962](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L962) *** @@ -258,7 +258,7 @@ Inserts a value at the specified index, shifting the subsequent values to the ri #### Defined in -[packages/form-core/src/FieldApi.ts:635](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L635) +[packages/form-core/src/FieldApi.ts:630](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L630) *** @@ -280,7 +280,7 @@ Mounts the field instance to the form. #### Defined in -[packages/form-core/src/FieldApi.ts:528](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L528) +[packages/form-core/src/FieldApi.ts:523](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L523) *** @@ -309,7 +309,7 @@ Moves the value at the first specified index to the second specified index. #### Defined in -[packages/form-core/src/FieldApi.ts:665](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L665) +[packages/form-core/src/FieldApi.ts:660](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L660) *** @@ -333,7 +333,7 @@ Pushes a new value to the field. #### Defined in -[packages/form-core/src/FieldApi.ts:627](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L627) +[packages/form-core/src/FieldApi.ts:622](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L622) *** @@ -357,7 +357,7 @@ Removes a value at the specified index. #### Defined in -[packages/form-core/src/FieldApi.ts:653](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L653) +[packages/form-core/src/FieldApi.ts:648](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L648) *** @@ -386,7 +386,7 @@ Replaces a value at the specified index. #### Defined in -[packages/form-core/src/FieldApi.ts:644](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L644) +[packages/form-core/src/FieldApi.ts:639](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L639) *** @@ -408,7 +408,7 @@ Updates the field's errorMap #### Defined in -[packages/form-core/src/FieldApi.ts:989](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L989) +[packages/form-core/src/FieldApi.ts:984](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L984) *** @@ -430,7 +430,7 @@ Sets the field metadata. #### Defined in -[packages/form-core/src/FieldApi.ts:616](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L616) +[packages/form-core/src/FieldApi.ts:611](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L611) *** @@ -454,7 +454,7 @@ Sets the field value and run the `change` validator. #### Defined in -[packages/form-core/src/FieldApi.ts:606](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L606) +[packages/form-core/src/FieldApi.ts:601](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L601) *** @@ -483,7 +483,7 @@ Swaps the values at the specified indices. #### Defined in -[packages/form-core/src/FieldApi.ts:659](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L659) +[packages/form-core/src/FieldApi.ts:654](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L654) *** @@ -505,7 +505,7 @@ Updates the field instance with new options. #### Defined in -[packages/form-core/src/FieldApi.ts:562](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L562) +[packages/form-core/src/FieldApi.ts:557](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L557) *** @@ -527,4 +527,4 @@ Validates the field value. #### Defined in -[packages/form-core/src/FieldApi.ts:939](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L939) +[packages/form-core/src/FieldApi.ts:934](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L934) diff --git a/docs/reference/classes/formapi.md b/docs/reference/classes/formapi.md index ce33172b71..f5a6738a3b 100644 --- a/docs/reference/classes/formapi.md +++ b/docs/reference/classes/formapi.md @@ -37,7 +37,7 @@ Constructs a new `FormApi` instance with the given form options. #### Defined in -[packages/form-core/src/FormApi.ts:374](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L374) +[packages/form-core/src/FormApi.ts:379](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L379) ## Properties @@ -49,7 +49,7 @@ baseStore: Store, (cb) => BaseFormState>; #### Defined in -[packages/form-core/src/FormApi.ts:354](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L354) +[packages/form-core/src/FormApi.ts:359](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L359) *** @@ -63,7 +63,7 @@ A record of field information for each field in the form. #### Defined in -[packages/form-core/src/FormApi.ts:359](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L359) +[packages/form-core/src/FormApi.ts:364](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L364) *** @@ -77,7 +77,7 @@ The options for the form. #### Defined in -[packages/form-core/src/FormApi.ts:353](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L353) +[packages/form-core/src/FormApi.ts:358](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L358) *** @@ -89,7 +89,7 @@ store: Derived>; #### Defined in -[packages/form-core/src/FormApi.ts:355](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L355) +[packages/form-core/src/FormApi.ts:360](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L360) ## Accessors @@ -107,7 +107,7 @@ get state(): FormState #### Defined in -[packages/form-core/src/FormApi.ts:362](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L362) +[packages/form-core/src/FormApi.ts:367](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L367) ## Methods @@ -131,7 +131,7 @@ deleteField(field): void #### Defined in -[packages/form-core/src/FormApi.ts:1079](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1079) +[packages/form-core/src/FormApi.ts:1107](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1107) *** @@ -157,7 +157,7 @@ Gets the field info of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:990](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L990) +[packages/form-core/src/FormApi.ts:1015](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1015) *** @@ -183,7 +183,7 @@ Gets the metadata of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:981](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L981) +[packages/form-core/src/FormApi.ts:1006](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1006) *** @@ -209,7 +209,7 @@ Gets the value of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:974](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L974) +[packages/form-core/src/FormApi.ts:999](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L999) *** @@ -227,7 +227,7 @@ Handles the form submission, performs validation, and calls the appropriate onSu #### Defined in -[packages/form-core/src/FormApi.ts:926](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L926) +[packages/form-core/src/FormApi.ts:951](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L951) *** @@ -263,7 +263,7 @@ Inserts a value into an array field at the specified index, shifting the subsequ #### Defined in -[packages/form-core/src/FormApi.ts:1111](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1111) +[packages/form-core/src/FormApi.ts:1139](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1139) *** @@ -283,7 +283,7 @@ mount(): () => void #### Defined in -[packages/form-core/src/FormApi.ts:484](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L484) +[packages/form-core/src/FormApi.ts:509](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L509) *** @@ -319,7 +319,7 @@ Moves the value at the first specified index to the second specified index withi #### Defined in -[packages/form-core/src/FormApi.ts:1229](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1229) +[packages/form-core/src/FormApi.ts:1257](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1257) *** @@ -352,7 +352,7 @@ Pushes a value into an array field. #### Defined in -[packages/form-core/src/FormApi.ts:1093](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1093) +[packages/form-core/src/FormApi.ts:1121](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1121) *** @@ -385,7 +385,7 @@ Removes a value from an array field at the specified index. #### Defined in -[packages/form-core/src/FormApi.ts:1164](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1164) +[packages/form-core/src/FormApi.ts:1192](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1192) *** @@ -421,7 +421,7 @@ Replaces a value into an array field at the specified index. #### Defined in -[packages/form-core/src/FormApi.ts:1138](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1138) +[packages/form-core/src/FormApi.ts:1166](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1166) *** @@ -452,7 +452,7 @@ Optional options to control the reset behavior. #### Defined in -[packages/form-core/src/FormApi.ts:554](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L554) +[packages/form-core/src/FormApi.ts:579](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L579) *** @@ -476,7 +476,7 @@ resetFieldMeta(fieldMeta): Record #### Defined in -[packages/form-core/src/FormApi.ts:1024](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1024) +[packages/form-core/src/FormApi.ts:1052](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1052) *** @@ -498,7 +498,7 @@ Updates the form's errorMap #### Defined in -[packages/form-core/src/FormApi.ts:1253](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1253) +[packages/form-core/src/FormApi.ts:1281](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1281) *** @@ -526,7 +526,7 @@ Updates the metadata of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1009](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1009) +[packages/form-core/src/FormApi.ts:1034](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1034) *** @@ -559,7 +559,7 @@ Sets the value of the specified field and optionally updates the touched state. #### Defined in -[packages/form-core/src/FormApi.ts:1048](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1048) +[packages/form-core/src/FormApi.ts:1076](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1076) *** @@ -595,7 +595,7 @@ Swaps the values at the specified indices within an array field. #### Defined in -[packages/form-core/src/FormApi.ts:1203](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1203) +[packages/form-core/src/FormApi.ts:1231](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1231) *** @@ -617,7 +617,7 @@ Updates the form options and form state. #### Defined in -[packages/form-core/src/FormApi.ts:510](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L510) +[packages/form-core/src/FormApi.ts:535](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L535) *** @@ -639,7 +639,7 @@ Validates form and all fields in using the correct handlers for a given validati #### Defined in -[packages/form-core/src/FormApi.ts:580](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L580) +[packages/form-core/src/FormApi.ts:605](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L605) *** @@ -672,7 +672,7 @@ Validates the children of a specified array in the form starting from a given in #### Defined in -[packages/form-core/src/FormApi.ts:614](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L614) +[packages/form-core/src/FormApi.ts:639](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L639) *** @@ -700,4 +700,4 @@ Validates a specified field in the form using the correct handlers for a given v #### Defined in -[packages/form-core/src/FormApi.ts:653](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L653) +[packages/form-core/src/FormApi.ts:678](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L678) diff --git a/docs/reference/index.md b/docs/reference/index.md index fc070f045c..fd14a9805c 100644 --- a/docs/reference/index.md +++ b/docs/reference/index.md @@ -26,6 +26,8 @@ title: "@tanstack/form-core" - [DerivedFormState](type-aliases/derivedformstate.md) - [FieldInfo](type-aliases/fieldinfo.md) - [FieldMeta](type-aliases/fieldmeta.md) +- [FieldMetaBase](type-aliases/fieldmetabase.md) +- [FieldMetaDerived](type-aliases/fieldmetaderived.md) - [FieldsErrorMapFromValidator](type-aliases/fieldserrormapfromvalidator.md) - [FieldState](type-aliases/fieldstate.md) - [FormState](type-aliases/formstate.md) diff --git a/docs/reference/type-aliases/baseformstate.md b/docs/reference/type-aliases/baseformstate.md index 0122001bec..7c25c8e47b 100644 --- a/docs/reference/type-aliases/baseformstate.md +++ b/docs/reference/type-aliases/baseformstate.md @@ -25,13 +25,13 @@ errorMap: FormValidationErrorMap; The error map for the form itself. -### fieldMeta +### fieldMetaBase ```ts -fieldMeta: Record, FieldMeta>; +fieldMetaBase: Record, FieldMetaBase>; ``` -A record of field metadata for each field in the form. +A record of field metadata for each field in the form, not including the derived properties, like `errors` and such ### isSubmitted diff --git a/docs/reference/type-aliases/derivedformstate.md b/docs/reference/type-aliases/derivedformstate.md index 49bb4739d1..694bba78c2 100644 --- a/docs/reference/type-aliases/derivedformstate.md +++ b/docs/reference/type-aliases/derivedformstate.md @@ -3,12 +3,16 @@ id: DerivedFormState title: DerivedFormState --- -# Type Alias: DerivedFormState +# Type Alias: DerivedFormState\ ```ts -type DerivedFormState: object; +type DerivedFormState: object; ``` +## Type Parameters + +• **TFormData** + ## Type declaration ### canSubmit @@ -27,6 +31,14 @@ errors: ValidationError[]; The error array for the form itself. +### fieldMeta + +```ts +fieldMeta: Record, FieldMeta>; +``` + +A record of field metadata for each field in the form, not including the derived properties, like `errors` and such + ### isBlurred ```ts diff --git a/docs/reference/type-aliases/fieldmeta.md b/docs/reference/type-aliases/fieldmeta.md index 82277a280a..c44400253d 100644 --- a/docs/reference/type-aliases/fieldmeta.md +++ b/docs/reference/type-aliases/fieldmeta.md @@ -6,69 +6,11 @@ title: FieldMeta # Type Alias: FieldMeta ```ts -type FieldMeta: object; +type FieldMeta: FieldMetaBase & FieldMetaDerived; ``` An object type representing the metadata of a field in a form. -## Type declaration - -### errorMap - -```ts -errorMap: ValidationErrorMap; -``` - -A map of errors related to the field value. - -### errors - -```ts -errors: ValidationError[]; -``` - -An array of errors related to the field value. - -### isBlurred - -```ts -isBlurred: boolean; -``` - -A flag indicating whether the field has been blurred. - -### isDirty - -```ts -isDirty: boolean; -``` - -A flag that is `true` if the field's value has been modified by the user. Opposite of `isPristine`. - -### isPristine - -```ts -isPristine: boolean; -``` - -A flag that is `true` if the field's value has not been modified by the user. Opposite of `isDirty`. - -### isTouched - -```ts -isTouched: boolean; -``` - -A flag indicating whether the field has been touched. - -### isValidating - -```ts -isValidating: boolean; -``` - -A flag indicating whether the field is currently being validated. - ## Defined in -[packages/form-core/src/FieldApi.ts:334](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L334) +[packages/form-core/src/FieldApi.ts:368](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L368) diff --git a/docs/reference/type-aliases/fieldmetabase.md b/docs/reference/type-aliases/fieldmetabase.md new file mode 100644 index 0000000000..735679e974 --- /dev/null +++ b/docs/reference/type-aliases/fieldmetabase.md @@ -0,0 +1,56 @@ +--- +id: FieldMetaBase +title: FieldMetaBase +--- + +# Type Alias: FieldMetaBase + +```ts +type FieldMetaBase: object; +``` + +## Type declaration + +### errorMap + +```ts +errorMap: ValidationErrorMap; +``` + +A map of errors related to the field value. + +### isBlurred + +```ts +isBlurred: boolean; +``` + +A flag indicating whether the field has been blurred. + +### isDirty + +```ts +isDirty: boolean; +``` + +A flag that is `true` if the field's value has been modified by the user. Opposite of `isPristine`. + +### isTouched + +```ts +isTouched: boolean; +``` + +A flag indicating whether the field has been touched. + +### isValidating + +```ts +isValidating: boolean; +``` + +A flag indicating whether the field is currently being validated. + +## Defined in + +[packages/form-core/src/FieldApi.ts:331](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L331) diff --git a/docs/reference/type-aliases/fieldmetaderived.md b/docs/reference/type-aliases/fieldmetaderived.md new file mode 100644 index 0000000000..186a329e8e --- /dev/null +++ b/docs/reference/type-aliases/fieldmetaderived.md @@ -0,0 +1,32 @@ +--- +id: FieldMetaDerived +title: FieldMetaDerived +--- + +# Type Alias: FieldMetaDerived + +```ts +type FieldMetaDerived: object; +``` + +## Type declaration + +### errors + +```ts +errors: ValidationError[]; +``` + +An array of errors related to the field value. + +### isPristine + +```ts +isPristine: boolean; +``` + +A flag that is `true` if the field's value has not been modified by the user. Opposite of `isDirty`. + +## Defined in + +[packages/form-core/src/FieldApi.ts:354](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L354) diff --git a/docs/reference/type-aliases/fieldstate.md b/docs/reference/type-aliases/fieldstate.md index c54a8fb32a..f1d72a75ff 100644 --- a/docs/reference/type-aliases/fieldstate.md +++ b/docs/reference/type-aliases/fieldstate.md @@ -35,4 +35,4 @@ The current value of the field. ## Defined in -[packages/form-core/src/FieldApi.ts:368](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L368) +[packages/form-core/src/FieldApi.ts:373](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L373) diff --git a/docs/reference/type-aliases/formstate.md b/docs/reference/type-aliases/formstate.md index 0b522c6f0e..ff6b3d9e6a 100644 --- a/docs/reference/type-aliases/formstate.md +++ b/docs/reference/type-aliases/formstate.md @@ -6,7 +6,7 @@ title: FormState # Type Alias: FormState\ ```ts -type FormState: BaseFormState & DerivedFormState; +type FormState: BaseFormState & DerivedFormState; ``` ## Type Parameters @@ -15,4 +15,4 @@ type FormState: BaseFormState & DerivedFormState; ## Defined in -[packages/form-core/src/FormApi.ts:310](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L310) +[packages/form-core/src/FormApi.ts:314](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L314) From e2eea236151ef1e804785107ca95d00a5dd3a3b4 Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Fri, 29 Nov 2024 06:31:19 -0800 Subject: [PATCH 15/38] chore: fix build --- packages/form-core/src/FormApi.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/form-core/src/FormApi.ts b/packages/form-core/src/FormApi.ts index b271f452cd..306d2c6312 100644 --- a/packages/form-core/src/FormApi.ts +++ b/packages/form-core/src/FormApi.ts @@ -979,7 +979,7 @@ export class FormApi< return } - this.store.batch(() => { + this.baseStore.batch(() => { void ( Object.values(this.fieldInfo) as FieldInfo[] ).forEach((field) => { From 4e74c86b5cfeaf67c29f85fa0a66187994abb478 Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Fri, 29 Nov 2024 07:10:14 -0800 Subject: [PATCH 16/38] fix: only regenerate field.errors when field.errorMap has changed --- packages/form-core/package.json | 2 +- packages/form-core/src/FormApi.ts | 67 ++++++++++++++++++++++--------- pnpm-lock.yaml | 10 ++++- 3 files changed, 58 insertions(+), 21 deletions(-) diff --git a/packages/form-core/package.json b/packages/form-core/package.json index d04cf2ba10..1b5cd3a9c4 100644 --- a/packages/form-core/package.json +++ b/packages/form-core/package.json @@ -52,6 +52,6 @@ "src" ], "dependencies": { - "@tanstack/store": "https://pkg.pr.new/@tanstack/store@cc48436" + "@tanstack/store": "https://pkg.pr.new/@tanstack/store@d751b2d" } } diff --git a/packages/form-core/src/FormApi.ts b/packages/form-core/src/FormApi.ts index 306d2c6312..405113c145 100644 --- a/packages/form-core/src/FormApi.ts +++ b/packages/form-core/src/FormApi.ts @@ -357,6 +357,7 @@ export class FormApi< */ options: FormOptions = {} baseStore!: Store> + fieldMetaDerived!: Derived, FieldMeta>> store!: Derived> /** * A record of field information for each field in the form. @@ -385,35 +386,60 @@ export class FormApi< }), ) - this.store = new Derived>({ + this.fieldMetaDerived = new Derived({ deps: [this.baseStore], - fn: () => { - const { state } = this.baseStore - // Computed state - const fieldMetaValues = Object.values(state.fieldMetaBase) as ( - | FieldMeta + fn: ({ prevDepVals, currDepVals, prevVal: _prevVal }) => { + const prevVal = _prevVal as + | Record, FieldMeta> | undefined - )[] + const prevBaseStore = prevDepVals?.[0] + const currBaseStore = currDepVals[0] const fieldMeta = {} as FormState['fieldMeta'] - for (const key of Object.keys(state.fieldMetaBase) as Array< - keyof typeof state.fieldMetaBase + for (const key of Object.keys(currBaseStore.fieldMetaBase) as Array< + keyof typeof currBaseStore.fieldMetaBase >) { - const baseVal = state.fieldMetaBase[key as never] as FieldMetaBase + const currBaseVal = currBaseStore.fieldMetaBase[ + key as never + ] as FieldMetaBase - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - const fieldErrors = Object.values(baseVal.errorMap ?? {}).filter( - (val: unknown) => val !== undefined, - ) - const isFieldPristine = !baseVal.isDirty + const prevBaseVal = prevBaseStore?.fieldMetaBase[key as never] as + | FieldMetaBase + | undefined + + let fieldErrors = + prevVal?.[key as never as keyof typeof prevVal]?.errors + if (!prevBaseVal || currBaseVal.errorMap !== prevBaseVal.errorMap) { + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + fieldErrors = Object.values(currBaseVal.errorMap ?? {}).filter( + (val: unknown) => val !== undefined, + ) + } + + // As a primitive, we don't need to aggressively persist the same referencial value for performance reasons + const isFieldPristine = !currBaseVal.isDirty fieldMeta[key] = { - ...baseVal, + ...currBaseVal, errors: fieldErrors, isPristine: isFieldPristine, } as FieldMeta } + return fieldMeta + }, + }) + + this.store = new Derived>({ + deps: [this.baseStore, this.fieldMetaDerived], + fn: () => { + const { state } = this.baseStore + // Computed state + const fieldMetaValues = Object.values(state.fieldMetaBase) as ( + | FieldMeta + | undefined + )[] + const isFieldsValidating = fieldMetaValues.some( (field) => field?.isValidating, ) @@ -463,7 +489,7 @@ export class FormApi< return { ...state, - fieldMeta, + fieldMeta: this.fieldMetaDerived.state, errors, isFieldsValidating, isFieldsValid, @@ -507,7 +533,12 @@ export class FormApi< } mount = () => { - const cleanup = this.store.mount() + const cleanupFieldMetaDerived = this.fieldMetaDerived.mount() + const cleanupStoreDerived = this.store.mount() + const cleanup = () => { + cleanupFieldMetaDerived() + cleanupStoreDerived() + } const { onMount } = this.options.validators || {} if (!onMount) return cleanup const error = this.runValidator({ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ec10f7c0d2..3160e4e792 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1113,8 +1113,8 @@ importers: packages/form-core: dependencies: '@tanstack/store': - specifier: ^0.5.5 - version: 0.5.5 + specifier: https://pkg.pr.new/@tanstack/store@d751b2d + version: https://pkg.pr.new/@tanstack/store@d751b2d packages/lit-form: dependencies: @@ -4468,6 +4468,10 @@ packages: '@tanstack/store@0.5.5': resolution: {integrity: sha512-EOSrgdDAJExbvRZEQ/Xhh9iZchXpMN+ga1Bnk8Nmygzs8TfiE6hbzThF+Pr2G19uHL6+DTDTHhJ8VQiOd7l4tA==} + '@tanstack/store@https://pkg.pr.new/@tanstack/store@d751b2d': + resolution: {tarball: https://pkg.pr.new/@tanstack/store@d751b2d} + version: 0.6.0 + '@tanstack/virtual-file-routes@1.64.0': resolution: {integrity: sha512-soW+gE9QTmMaqXM17r7y1p8NiQVIIECjdTaYla8BKL5Flj030m3KuxEQoiG1XgjtA0O7ayznFz2YvPcXIy3qDg==} engines: {node: '>=12'} @@ -14001,6 +14005,8 @@ snapshots: '@tanstack/store@0.5.5': {} + '@tanstack/store@https://pkg.pr.new/@tanstack/store@d751b2d': {} + '@tanstack/virtual-file-routes@1.64.0': {} '@tanstack/vue-store@0.5.6(vue@3.5.12(typescript@5.7.2))': From 643197a414123cbb9763ca6cfbdf5cce99a0e1ae Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Fri, 29 Nov 2024 07:18:24 -0800 Subject: [PATCH 17/38] chore: fix tests --- packages/form-core/src/FormApi.ts | 4 ++-- packages/form-core/tests/FieldApi.spec.ts | 8 ++++++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/form-core/src/FormApi.ts b/packages/form-core/src/FormApi.ts index 405113c145..337243bd64 100644 --- a/packages/form-core/src/FormApi.ts +++ b/packages/form-core/src/FormApi.ts @@ -609,7 +609,7 @@ export class FormApi< */ reset = (values?: TFormData, opts?: { keepDefaultValues?: boolean }) => { const { fieldMeta: currentFieldMeta } = this.state - const fieldMeta = this.resetFieldMeta(currentFieldMeta) + const fieldMetaBase = this.resetFieldMeta(currentFieldMeta) if (values && !opts?.keepDefaultValues) { this.options = { @@ -625,7 +625,7 @@ export class FormApi< values ?? this.options.defaultValues ?? this.options.defaultState?.values, - fieldMeta, + fieldMetaBase, }), ) } diff --git a/packages/form-core/tests/FieldApi.spec.ts b/packages/form-core/tests/FieldApi.spec.ts index 7711754f74..4ac5e0dcc1 100644 --- a/packages/form-core/tests/FieldApi.spec.ts +++ b/packages/form-core/tests/FieldApi.spec.ts @@ -545,6 +545,8 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'items.2.quantity', @@ -1039,6 +1041,8 @@ describe('field api', () => { }, }) + form.mount() + let triggered!: string const field = new FieldApi({ form, @@ -1087,6 +1091,8 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'name', @@ -1112,6 +1118,8 @@ describe('field api', () => { }, }) + form.mount() + const field = new FieldApi({ form, name: 'name', From ee4b98c92b49dab37dd3de6752f7030e3e7c7f7a Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 29 Nov 2024 15:19:38 +0000 Subject: [PATCH 18/38] ci: apply automated fixes and generate docs --- docs/reference/classes/fieldapi.md | 74 +++++++------ docs/reference/classes/formapi.md | 104 +++++++++++------- docs/reference/type-aliases/fieldmeta.md | 62 +---------- docs/reference/type-aliases/fieldmetabase.md | 2 +- .../type-aliases/fieldmetaderived.md | 2 +- docs/reference/type-aliases/fieldstate.md | 2 +- 6 files changed, 109 insertions(+), 137 deletions(-) diff --git a/docs/reference/classes/fieldapi.md b/docs/reference/classes/fieldapi.md index eb0c277092..359a9576cb 100644 --- a/docs/reference/classes/fieldapi.md +++ b/docs/reference/classes/fieldapi.md @@ -45,7 +45,7 @@ Initializes a new `FieldApi` instance. #### Defined in -[packages/form-core/src/FieldApi.ts:509](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L509) +[packages/form-core/src/FieldApi.ts:512](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L512) ## Properties @@ -59,7 +59,7 @@ A reference to the form API instance. #### Defined in -[packages/form-core/src/FieldApi.ts:471](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L471) +[packages/form-core/src/FieldApi.ts:476](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L476) *** @@ -73,7 +73,7 @@ The field name. #### Defined in -[packages/form-core/src/FieldApi.ts:481](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L481) +[packages/form-core/src/FieldApi.ts:486](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L486) *** @@ -87,44 +87,50 @@ The field options. #### Defined in -[packages/form-core/src/FieldApi.ts:485](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L485) +[packages/form-core/src/FieldApi.ts:490](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L490) *** -### state +### store ```ts -state: FieldState; +store: Derived, readonly any[]>; ``` -The current field state. +The field state store. #### Defined in -[packages/form-core/src/FieldApi.ts:499](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L499) +[packages/form-core/src/FieldApi.ts:500](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L500) *** -### store +### timeoutIds ```ts -store: Store, (cb) => FieldState>; +timeoutIds: Record; ``` -The field state store. - #### Defined in -[packages/form-core/src/FieldApi.ts:495](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L495) +[packages/form-core/src/FieldApi.ts:507](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L507) -*** +## Accessors -### timeoutIds +### state + +#### Get Signature ```ts -timeoutIds: Record; +get state(): FieldState ``` +The current field state. + +##### Returns + +[`FieldState`](../type-aliases/fieldstate.md)\<`TData`\> + #### Defined in [packages/form-core/src/FieldApi.ts:504](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L504) @@ -145,7 +151,7 @@ Gets the field information object. #### Defined in -[packages/form-core/src/FieldApi.ts:738](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L738) +[packages/form-core/src/FieldApi.ts:697](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L697) *** @@ -155,15 +161,13 @@ Gets the field information object. getMeta(): FieldMeta ``` -Gets the current field metadata. - #### Returns [`FieldMeta`](../type-aliases/fieldmeta.md) #### Defined in -[packages/form-core/src/FieldApi.ts:716](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L716) +[packages/form-core/src/FieldApi.ts:686](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L686) *** @@ -185,7 +189,7 @@ Use `field.state.value` instead. #### Defined in -[packages/form-core/src/FieldApi.ts:690](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L690) +[packages/form-core/src/FieldApi.ts:668](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L668) *** @@ -203,7 +207,7 @@ Handles the blur event. #### Defined in -[packages/form-core/src/FieldApi.ts:1090](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1090) +[packages/form-core/src/FieldApi.ts:1049](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1049) *** @@ -225,7 +229,7 @@ Handles the change event. #### Defined in -[packages/form-core/src/FieldApi.ts:1083](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1083) +[packages/form-core/src/FieldApi.ts:1042](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1042) *** @@ -254,7 +258,7 @@ Inserts a value at the specified index, shifting the subsequent values to the ri #### Defined in -[packages/form-core/src/FieldApi.ts:751](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L751) +[packages/form-core/src/FieldApi.ts:710](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L710) *** @@ -276,7 +280,7 @@ Mounts the field instance to the form. #### Defined in -[packages/form-core/src/FieldApi.ts:600](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L600) +[packages/form-core/src/FieldApi.ts:592](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L592) *** @@ -305,7 +309,7 @@ Moves the value at the first specified index to the second specified index. #### Defined in -[packages/form-core/src/FieldApi.ts:781](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L781) +[packages/form-core/src/FieldApi.ts:740](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L740) *** @@ -329,7 +333,7 @@ Pushes a new value to the field. #### Defined in -[packages/form-core/src/FieldApi.ts:743](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L743) +[packages/form-core/src/FieldApi.ts:702](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L702) *** @@ -353,7 +357,7 @@ Removes a value at the specified index. #### Defined in -[packages/form-core/src/FieldApi.ts:769](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L769) +[packages/form-core/src/FieldApi.ts:728](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L728) *** @@ -382,7 +386,7 @@ Replaces a value at the specified index. #### Defined in -[packages/form-core/src/FieldApi.ts:760](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L760) +[packages/form-core/src/FieldApi.ts:719](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L719) *** @@ -404,7 +408,7 @@ Updates the field's errorMap #### Defined in -[packages/form-core/src/FieldApi.ts:1110](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1110) +[packages/form-core/src/FieldApi.ts:1069](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1069) *** @@ -426,7 +430,7 @@ Sets the field metadata. #### Defined in -[packages/form-core/src/FieldApi.ts:732](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L732) +[packages/form-core/src/FieldApi.ts:691](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L691) *** @@ -450,7 +454,7 @@ Sets the field value and run the `change` validator. #### Defined in -[packages/form-core/src/FieldApi.ts:697](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L697) +[packages/form-core/src/FieldApi.ts:675](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L675) *** @@ -479,7 +483,7 @@ Swaps the values at the specified indices. #### Defined in -[packages/form-core/src/FieldApi.ts:775](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L775) +[packages/form-core/src/FieldApi.ts:734](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L734) *** @@ -501,7 +505,7 @@ Updates the field instance with new options. #### Defined in -[packages/form-core/src/FieldApi.ts:653](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L653) +[packages/form-core/src/FieldApi.ts:631](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L631) *** @@ -523,4 +527,4 @@ Validates the field value. #### Defined in -[packages/form-core/src/FieldApi.ts:1055](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1055) +[packages/form-core/src/FieldApi.ts:1014](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1014) diff --git a/docs/reference/classes/formapi.md b/docs/reference/classes/formapi.md index 859d86b114..b307c7510d 100644 --- a/docs/reference/classes/formapi.md +++ b/docs/reference/classes/formapi.md @@ -37,10 +37,22 @@ Constructs a new `FormApi` instance with the given form options. #### Defined in -[packages/form-core/src/FormApi.ts:386](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L386) +[packages/form-core/src/FormApi.ts:380](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L380) ## Properties +### baseStore + +```ts +baseStore: Store, (cb) => BaseFormState>; +``` + +#### Defined in + +[packages/form-core/src/FormApi.ts:359](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L359) + +*** + ### fieldInfo ```ts @@ -51,7 +63,19 @@ A record of field information for each field in the form. #### Defined in -[packages/form-core/src/FormApi.ts:375](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L375) +[packages/form-core/src/FormApi.ts:365](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L365) + +*** + +### fieldMetaDerived + +```ts +fieldMetaDerived: Derived ? PrefixTupleAccessor, AllowedIndexes, never>, []> : TFormData extends any[] ? PrefixArrayAccessor, [any]> : TFormData extends Date ? never : TFormData extends object ? PrefixObjectAccessor, []> : TFormData extends string | number | bigint | boolean ? "" : never, FieldMeta>, readonly any[]>; +``` + +#### Defined in + +[packages/form-core/src/FormApi.ts:360](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L360) *** @@ -65,39 +89,37 @@ The options for the form. #### Defined in -[packages/form-core/src/FormApi.ts:359](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L359) +[packages/form-core/src/FormApi.ts:358](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L358) *** -### state +### store ```ts -state: FormState; +store: Derived, readonly any[]>; ``` -The current state of the form. - -**Note:** -Do not use `state` directly, as it is not reactive. -Please use useStore(form.store) utility to subscribe to state - #### Defined in -[packages/form-core/src/FormApi.ts:371](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L371) +[packages/form-core/src/FormApi.ts:361](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L361) -*** +## Accessors -### store +### state + +#### Get Signature ```ts -store: Store, (cb) => FormState>; +get state(): FormState ``` -A [TanStack Store instance](https://tanstack.com/store/latest/docs/reference/Store) that keeps track of the form's state. +##### Returns + +[`FormState`](../type-aliases/formstate.md)\<`TFormData`\> #### Defined in -[packages/form-core/src/FormApi.ts:363](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L363) +[packages/form-core/src/FormApi.ts:368](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L368) ## Methods @@ -121,7 +143,7 @@ deleteField(field): void #### Defined in -[packages/form-core/src/FormApi.ts:1116](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1116) +[packages/form-core/src/FormApi.ts:1149](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1149) *** @@ -147,7 +169,7 @@ Gets the field info of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1027](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1027) +[packages/form-core/src/FormApi.ts:1057](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1057) *** @@ -173,7 +195,7 @@ Gets the metadata of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1018](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1018) +[packages/form-core/src/FormApi.ts:1048](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1048) *** @@ -199,7 +221,7 @@ Gets the value of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1011](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1011) +[packages/form-core/src/FormApi.ts:1041](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1041) *** @@ -217,7 +239,7 @@ Handles the form submission, performs validation, and calls the appropriate onSu #### Defined in -[packages/form-core/src/FormApi.ts:952](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L952) +[packages/form-core/src/FormApi.ts:982](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L982) *** @@ -253,23 +275,27 @@ Inserts a value into an array field at the specified index, shifting the subsequ #### Defined in -[packages/form-core/src/FormApi.ts:1148](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1148) +[packages/form-core/src/FormApi.ts:1181](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1181) *** ### mount() ```ts -mount(): void +mount(): () => void ``` #### Returns +`Function` + +##### Returns + `void` #### Defined in -[packages/form-core/src/FormApi.ts:513](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L513) +[packages/form-core/src/FormApi.ts:535](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L535) *** @@ -305,7 +331,7 @@ Moves the value at the first specified index to the second specified index withi #### Defined in -[packages/form-core/src/FormApi.ts:1266](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1266) +[packages/form-core/src/FormApi.ts:1299](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1299) *** @@ -338,7 +364,7 @@ Pushes a value into an array field. #### Defined in -[packages/form-core/src/FormApi.ts:1130](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1130) +[packages/form-core/src/FormApi.ts:1163](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1163) *** @@ -371,7 +397,7 @@ Removes a value from an array field at the specified index. #### Defined in -[packages/form-core/src/FormApi.ts:1201](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1201) +[packages/form-core/src/FormApi.ts:1234](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1234) *** @@ -407,7 +433,7 @@ Replaces a value into an array field at the specified index. #### Defined in -[packages/form-core/src/FormApi.ts:1175](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1175) +[packages/form-core/src/FormApi.ts:1208](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1208) *** @@ -438,7 +464,7 @@ Optional options to control the reset behavior. #### Defined in -[packages/form-core/src/FormApi.ts:580](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L580) +[packages/form-core/src/FormApi.ts:610](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L610) *** @@ -462,7 +488,7 @@ resetFieldMeta(fieldMeta): Record #### Defined in -[packages/form-core/src/FormApi.ts:1061](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1061) +[packages/form-core/src/FormApi.ts:1094](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1094) *** @@ -484,7 +510,7 @@ Updates the form's errorMap #### Defined in -[packages/form-core/src/FormApi.ts:1290](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1290) +[packages/form-core/src/FormApi.ts:1323](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1323) *** @@ -512,7 +538,7 @@ Updates the metadata of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1046](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1046) +[packages/form-core/src/FormApi.ts:1076](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1076) *** @@ -545,7 +571,7 @@ Sets the value of the specified field and optionally updates the touched state. #### Defined in -[packages/form-core/src/FormApi.ts:1085](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1085) +[packages/form-core/src/FormApi.ts:1118](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1118) *** @@ -581,7 +607,7 @@ Swaps the values at the specified indices within an array field. #### Defined in -[packages/form-core/src/FormApi.ts:1240](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1240) +[packages/form-core/src/FormApi.ts:1273](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1273) *** @@ -603,7 +629,7 @@ Updates the form options and form state. #### Defined in -[packages/form-core/src/FormApi.ts:536](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L536) +[packages/form-core/src/FormApi.ts:566](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L566) *** @@ -625,7 +651,7 @@ Validates form and all fields in using the correct handlers for a given validati #### Defined in -[packages/form-core/src/FormApi.ts:606](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L606) +[packages/form-core/src/FormApi.ts:636](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L636) *** @@ -658,7 +684,7 @@ Validates the children of a specified array in the form starting from a given in #### Defined in -[packages/form-core/src/FormApi.ts:640](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L640) +[packages/form-core/src/FormApi.ts:670](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L670) *** @@ -686,4 +712,4 @@ Validates a specified field in the form using the correct handlers for a given v #### Defined in -[packages/form-core/src/FormApi.ts:679](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L679) +[packages/form-core/src/FormApi.ts:709](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L709) diff --git a/docs/reference/type-aliases/fieldmeta.md b/docs/reference/type-aliases/fieldmeta.md index 8d18797528..fe0f778850 100644 --- a/docs/reference/type-aliases/fieldmeta.md +++ b/docs/reference/type-aliases/fieldmeta.md @@ -6,69 +6,11 @@ title: FieldMeta # Type Alias: FieldMeta ```ts -type FieldMeta: object; +type FieldMeta: FieldMetaBase & FieldMetaDerived; ``` An object type representing the metadata of a field in a form. -## Type declaration - -### errorMap - -```ts -errorMap: ValidationErrorMap; -``` - -A map of errors related to the field value. - -### errors - -```ts -errors: ValidationError[]; -``` - -An array of errors related to the field value. - -### isBlurred - -```ts -isBlurred: boolean; -``` - -A flag indicating whether the field has been blurred. - -### isDirty - -```ts -isDirty: boolean; -``` - -A flag that is `true` if the field's value has been modified by the user. Opposite of `isPristine`. - -### isPristine - -```ts -isPristine: boolean; -``` - -A flag that is `true` if the field's value has not been modified by the user. Opposite of `isDirty`. - -### isTouched - -```ts -isTouched: boolean; -``` - -A flag indicating whether the field has been touched. - -### isValidating - -```ts -isValidating: boolean; -``` - -A flag indicating whether the field is currently being validated. - ## Defined in -[packages/form-core/src/FieldApi.ts:403](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L403) +[packages/form-core/src/FieldApi.ts:437](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L437) diff --git a/docs/reference/type-aliases/fieldmetabase.md b/docs/reference/type-aliases/fieldmetabase.md index 735679e974..e22855937b 100644 --- a/docs/reference/type-aliases/fieldmetabase.md +++ b/docs/reference/type-aliases/fieldmetabase.md @@ -53,4 +53,4 @@ A flag indicating whether the field is currently being validated. ## Defined in -[packages/form-core/src/FieldApi.ts:331](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L331) +[packages/form-core/src/FieldApi.ts:400](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L400) diff --git a/docs/reference/type-aliases/fieldmetaderived.md b/docs/reference/type-aliases/fieldmetaderived.md index 186a329e8e..b6f51298c9 100644 --- a/docs/reference/type-aliases/fieldmetaderived.md +++ b/docs/reference/type-aliases/fieldmetaderived.md @@ -29,4 +29,4 @@ A flag that is `true` if the field's value has not been modified by the user. Op ## Defined in -[packages/form-core/src/FieldApi.ts:354](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L354) +[packages/form-core/src/FieldApi.ts:423](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L423) diff --git a/docs/reference/type-aliases/fieldstate.md b/docs/reference/type-aliases/fieldstate.md index eb141b621c..e0341f5493 100644 --- a/docs/reference/type-aliases/fieldstate.md +++ b/docs/reference/type-aliases/fieldstate.md @@ -35,4 +35,4 @@ The current value of the field. ## Defined in -[packages/form-core/src/FieldApi.ts:437](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L437) +[packages/form-core/src/FieldApi.ts:442](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L442) From 3f4f40f1bf0d5504b0f7220d21628dd81a2a78fa Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Fri, 29 Nov 2024 07:24:03 -0800 Subject: [PATCH 19/38] chore: add previously failing test --- packages/form-core/tests/FieldApi.spec.ts | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/packages/form-core/tests/FieldApi.spec.ts b/packages/form-core/tests/FieldApi.spec.ts index 4ac5e0dcc1..e85874561e 100644 --- a/packages/form-core/tests/FieldApi.spec.ts +++ b/packages/form-core/tests/FieldApi.spec.ts @@ -1692,4 +1692,26 @@ describe('field api', () => { 'other validation error', ) }) + + it('should have derived state on first render given defaultMeta', () => { + const form = new FormApi({ + defaultValues: { + name: '', + }, + }) + form.mount() + + const nameField = new FieldApi({ + form, + name: 'name', + defaultMeta: { + errorMap: { + onChange: 'THERE IS AN ERROR', + }, + }, + }) + + nameField.mount() + expect(nameField.getMeta().errors).toEqual(['THERE IS AN ERROR']) + }) }) From b79d34343fdc5550884b2b2eb99144c099443cdf Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Fri, 29 Nov 2024 09:03:09 -0800 Subject: [PATCH 20/38] chore: only recompute errors when prevDepVal is different --- packages/form-core/src/FormApi.ts | 61 ++++++++++++++++++++----------- 1 file changed, 39 insertions(+), 22 deletions(-) diff --git a/packages/form-core/src/FormApi.ts b/packages/form-core/src/FormApi.ts index 337243bd64..0234aacf61 100644 --- a/packages/form-core/src/FormApi.ts +++ b/packages/form-core/src/FormApi.ts @@ -430,12 +430,15 @@ export class FormApi< }, }) - this.store = new Derived>({ + this.store = new Derived({ deps: [this.baseStore, this.fieldMetaDerived], - fn: () => { - const { state } = this.baseStore + fn: ({ prevDepVals, currDepVals, prevVal: _prevVal }) => { + const prevVal = _prevVal as FormState | undefined + const prevBaseStore = prevDepVals?.[0] + const currBaseStore = currDepVals[0] + // Computed state - const fieldMetaValues = Object.values(state.fieldMetaBase) as ( + const fieldMetaValues = Object.values(currBaseStore.fieldMetaBase) as ( | FieldMeta | undefined )[] @@ -454,8 +457,8 @@ export class FormApi< const isBlurred = fieldMetaValues.some((field) => field?.isBlurred) // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - if (isTouched && state?.errorMap?.onMount) { - state.errorMap.onMount = undefined + if (isTouched && currBaseStore?.errorMap?.onMount) { + currBaseStore.errorMap.onMount = undefined } const isDirty = fieldMetaValues.some((field) => field?.isDirty) @@ -463,32 +466,46 @@ export class FormApi< const hasOnMountError = Boolean( // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - state.errorMap?.onMount || + currBaseStore.errorMap?.onMount || // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition fieldMetaValues.some((f) => f?.errorMap?.onMount), ) const isValidating = !!isFieldsValidating - const errors = Object.values(state.errorMap).reduce((prev, curr) => { - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - if (curr === undefined) return prev - if (typeof curr === 'string') { - prev.push(curr) - return prev - } else if (curr && isFormValidationError(curr)) { - prev.push(curr.form) - return prev - } - return prev - }, [] as ValidationError[]) + + // As `errors` is not a primitive, we need to aggressively persist the same referencial value for performance reasons + let errors = prevVal?.errors ?? [] + if ( + !prevBaseStore || + currBaseStore.errorMap !== prevBaseStore.errorMap + ) { + errors = Object.values(currBaseStore.errorMap).reduce( + (prev, curr) => { + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + if (curr === undefined) return prev + if (typeof curr === 'string') { + prev.push(curr) + return prev + } else if (curr && isFormValidationError(curr)) { + prev.push(curr.form) + return prev + } + return prev + }, + [] as ValidationError[], + ) + } + const isFormValid = errors.length === 0 const isValid = isFieldsValid && isFormValid const canSubmit = - (state.submissionAttempts === 0 && !isTouched && !hasOnMountError) || - (!isValidating && !state.isSubmitting && isValid) + (currBaseStore.submissionAttempts === 0 && + !isTouched && + !hasOnMountError) || + (!isValidating && !currBaseStore.isSubmitting && isValid) return { - ...state, + ...currBaseStore, fieldMeta: this.fieldMetaDerived.state, errors, isFieldsValidating, From 27f6acc16efdb7a15e15b27a76b50f849f9586ec Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 29 Nov 2024 17:04:39 +0000 Subject: [PATCH 21/38] ci: apply automated fixes and generate docs --- docs/reference/classes/formapi.md | 42 +++++++++++++++---------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/docs/reference/classes/formapi.md b/docs/reference/classes/formapi.md index b307c7510d..e44a60341c 100644 --- a/docs/reference/classes/formapi.md +++ b/docs/reference/classes/formapi.md @@ -143,7 +143,7 @@ deleteField(field): void #### Defined in -[packages/form-core/src/FormApi.ts:1149](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1149) +[packages/form-core/src/FormApi.ts:1166](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1166) *** @@ -169,7 +169,7 @@ Gets the field info of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1057](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1057) +[packages/form-core/src/FormApi.ts:1074](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1074) *** @@ -195,7 +195,7 @@ Gets the metadata of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1048](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1048) +[packages/form-core/src/FormApi.ts:1065](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1065) *** @@ -221,7 +221,7 @@ Gets the value of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1041](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1041) +[packages/form-core/src/FormApi.ts:1058](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1058) *** @@ -239,7 +239,7 @@ Handles the form submission, performs validation, and calls the appropriate onSu #### Defined in -[packages/form-core/src/FormApi.ts:982](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L982) +[packages/form-core/src/FormApi.ts:999](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L999) *** @@ -275,7 +275,7 @@ Inserts a value into an array field at the specified index, shifting the subsequ #### Defined in -[packages/form-core/src/FormApi.ts:1181](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1181) +[packages/form-core/src/FormApi.ts:1198](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1198) *** @@ -295,7 +295,7 @@ mount(): () => void #### Defined in -[packages/form-core/src/FormApi.ts:535](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L535) +[packages/form-core/src/FormApi.ts:552](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L552) *** @@ -331,7 +331,7 @@ Moves the value at the first specified index to the second specified index withi #### Defined in -[packages/form-core/src/FormApi.ts:1299](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1299) +[packages/form-core/src/FormApi.ts:1316](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1316) *** @@ -364,7 +364,7 @@ Pushes a value into an array field. #### Defined in -[packages/form-core/src/FormApi.ts:1163](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1163) +[packages/form-core/src/FormApi.ts:1180](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1180) *** @@ -397,7 +397,7 @@ Removes a value from an array field at the specified index. #### Defined in -[packages/form-core/src/FormApi.ts:1234](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1234) +[packages/form-core/src/FormApi.ts:1251](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1251) *** @@ -433,7 +433,7 @@ Replaces a value into an array field at the specified index. #### Defined in -[packages/form-core/src/FormApi.ts:1208](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1208) +[packages/form-core/src/FormApi.ts:1225](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1225) *** @@ -464,7 +464,7 @@ Optional options to control the reset behavior. #### Defined in -[packages/form-core/src/FormApi.ts:610](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L610) +[packages/form-core/src/FormApi.ts:627](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L627) *** @@ -488,7 +488,7 @@ resetFieldMeta(fieldMeta): Record #### Defined in -[packages/form-core/src/FormApi.ts:1094](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1094) +[packages/form-core/src/FormApi.ts:1111](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1111) *** @@ -510,7 +510,7 @@ Updates the form's errorMap #### Defined in -[packages/form-core/src/FormApi.ts:1323](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1323) +[packages/form-core/src/FormApi.ts:1340](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1340) *** @@ -538,7 +538,7 @@ Updates the metadata of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1076](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1076) +[packages/form-core/src/FormApi.ts:1093](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1093) *** @@ -571,7 +571,7 @@ Sets the value of the specified field and optionally updates the touched state. #### Defined in -[packages/form-core/src/FormApi.ts:1118](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1118) +[packages/form-core/src/FormApi.ts:1135](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1135) *** @@ -607,7 +607,7 @@ Swaps the values at the specified indices within an array field. #### Defined in -[packages/form-core/src/FormApi.ts:1273](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1273) +[packages/form-core/src/FormApi.ts:1290](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1290) *** @@ -629,7 +629,7 @@ Updates the form options and form state. #### Defined in -[packages/form-core/src/FormApi.ts:566](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L566) +[packages/form-core/src/FormApi.ts:583](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L583) *** @@ -651,7 +651,7 @@ Validates form and all fields in using the correct handlers for a given validati #### Defined in -[packages/form-core/src/FormApi.ts:636](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L636) +[packages/form-core/src/FormApi.ts:653](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L653) *** @@ -684,7 +684,7 @@ Validates the children of a specified array in the form starting from a given in #### Defined in -[packages/form-core/src/FormApi.ts:670](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L670) +[packages/form-core/src/FormApi.ts:687](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L687) *** @@ -712,4 +712,4 @@ Validates a specified field in the form using the correct handlers for a given v #### Defined in -[packages/form-core/src/FormApi.ts:709](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L709) +[packages/form-core/src/FormApi.ts:726](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L726) From 8f820e0dfe322c84da045c2cb17cea1d53a051c7 Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Fri, 29 Nov 2024 10:28:48 -0800 Subject: [PATCH 22/38] chore: WIP validate new Store API --- packages/form-core/package.json | 2 +- packages/form-core/src/FieldApi.ts | 4 ++-- packages/form-core/src/FormApi.ts | 16 ++++++++-------- pnpm-lock.yaml | 10 +++++----- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/form-core/package.json b/packages/form-core/package.json index 1b5cd3a9c4..f84b4f3f9b 100644 --- a/packages/form-core/package.json +++ b/packages/form-core/package.json @@ -52,6 +52,6 @@ "src" ], "dependencies": { - "@tanstack/store": "https://pkg.pr.new/@tanstack/store@d751b2d" + "@tanstack/store": "https://pkg.pr.new/@tanstack/store@144" } } diff --git a/packages/form-core/src/FieldApi.ts b/packages/form-core/src/FieldApi.ts index 8b49de2bd6..a3b99f0a67 100644 --- a/packages/form-core/src/FieldApi.ts +++ b/packages/form-core/src/FieldApi.ts @@ -1,4 +1,4 @@ -import { Derived, Store } from '@tanstack/store' +import { Derived, batch } from '@tanstack/store' import { getAsyncValidatorArray, getBy, getSyncValidatorArray } from './utils' import type { FieldInfo, FieldsErrorMapFromValidator, FormApi } from './FormApi' import type { @@ -792,7 +792,7 @@ export class FieldApi< // Needs type cast as eslint errantly believes this is always falsy let hasErrored = false as boolean - this.form.baseStore.batch(() => { + batch(() => { const validateFieldFn = ( field: FieldApi, validateObj: SyncValidator, diff --git a/packages/form-core/src/FormApi.ts b/packages/form-core/src/FormApi.ts index 0234aacf61..b5cdbb1a64 100644 --- a/packages/form-core/src/FormApi.ts +++ b/packages/form-core/src/FormApi.ts @@ -1,4 +1,4 @@ -import { Derived, Store } from '@tanstack/store' +import { Derived, Store, batch } from '@tanstack/store' import { deleteBy, functionalUpdate, @@ -588,7 +588,7 @@ export class FormApi< // Options need to be updated first so that when the store is updated, the state is correct for the derived state this.options = options - this.baseStore.batch(() => { + batch(() => { const shouldUpdateValues = options.defaultValues && options.defaultValues !== oldOptions.defaultValues && @@ -652,7 +652,7 @@ export class FormApi< */ validateAllFields = async (cause: ValidationCause) => { const fieldValidationPromises: Promise[] = [] as any - this.baseStore.batch(() => { + batch(() => { void ( Object.values(this.fieldInfo) as FieldInfo[] ).forEach((field) => { @@ -708,7 +708,7 @@ export class FormApi< // Validate the fields const fieldValidationPromises: Promise[] = [] as any - this.baseStore.batch(() => { + batch(() => { fieldsToValidate.forEach((nestedField) => { fieldValidationPromises.push( Promise.resolve().then(() => this.validateField(nestedField, cause)), @@ -761,7 +761,7 @@ export class FormApi< const fieldsErrorMap: FieldsErrorMapFromValidator = {} - this.baseStore.batch(() => { + batch(() => { for (const validateObj of validates) { if (!validateObj.validate) continue @@ -1027,7 +1027,7 @@ export class FormApi< return } - this.baseStore.batch(() => { + batch(() => { void ( Object.values(this.fieldInfo) as FieldInfo[] ).forEach((field) => { @@ -1042,7 +1042,7 @@ export class FormApi< // Run the submit code await this.options.onSubmit?.({ value: this.state.values, formApi: this }) - this.baseStore.batch(() => { + batch(() => { this.baseStore.setState((prev) => ({ ...prev, isSubmitted: true })) done() }) @@ -1139,7 +1139,7 @@ export class FormApi< ) => { const dontUpdateMeta = opts?.dontUpdateMeta ?? false - this.baseStore.batch(() => { + batch(() => { if (!dontUpdateMeta) { this.setFieldMeta(field, (prev) => ({ ...prev, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3160e4e792..46f5435551 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1113,8 +1113,8 @@ importers: packages/form-core: dependencies: '@tanstack/store': - specifier: https://pkg.pr.new/@tanstack/store@d751b2d - version: https://pkg.pr.new/@tanstack/store@d751b2d + specifier: https://pkg.pr.new/@tanstack/store@144 + version: https://pkg.pr.new/@tanstack/store@144 packages/lit-form: dependencies: @@ -4468,8 +4468,8 @@ packages: '@tanstack/store@0.5.5': resolution: {integrity: sha512-EOSrgdDAJExbvRZEQ/Xhh9iZchXpMN+ga1Bnk8Nmygzs8TfiE6hbzThF+Pr2G19uHL6+DTDTHhJ8VQiOd7l4tA==} - '@tanstack/store@https://pkg.pr.new/@tanstack/store@d751b2d': - resolution: {tarball: https://pkg.pr.new/@tanstack/store@d751b2d} + '@tanstack/store@https://pkg.pr.new/@tanstack/store@144': + resolution: {tarball: https://pkg.pr.new/@tanstack/store@144} version: 0.6.0 '@tanstack/virtual-file-routes@1.64.0': @@ -14005,7 +14005,7 @@ snapshots: '@tanstack/store@0.5.5': {} - '@tanstack/store@https://pkg.pr.new/@tanstack/store@d751b2d': {} + '@tanstack/store@https://pkg.pr.new/@tanstack/store@144': {} '@tanstack/virtual-file-routes@1.64.0': {} From a3eccf2829caf8669b519e15331e12e05869058a Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Fri, 29 Nov 2024 16:32:38 -0800 Subject: [PATCH 23/38] chore: fix issues with tests --- packages/form-core/package.json | 2 +- packages/form-core/src/FormApi.ts | 16 ++++++++++++---- pnpm-lock.yaml | 10 +++++----- 3 files changed, 18 insertions(+), 10 deletions(-) diff --git a/packages/form-core/package.json b/packages/form-core/package.json index f84b4f3f9b..9797e182b8 100644 --- a/packages/form-core/package.json +++ b/packages/form-core/package.json @@ -52,6 +52,6 @@ "src" ], "dependencies": { - "@tanstack/store": "https://pkg.pr.new/@tanstack/store@144" + "@tanstack/store": "https://pkg.pr.new/@tanstack/store@dcb3d35" } } diff --git a/packages/form-core/src/FormApi.ts b/packages/form-core/src/FormApi.ts index b5cdbb1a64..dfc9204781 100644 --- a/packages/form-core/src/FormApi.ts +++ b/packages/form-core/src/FormApi.ts @@ -456,10 +456,9 @@ export class FormApi< const isTouched = fieldMetaValues.some((field) => field?.isTouched) const isBlurred = fieldMetaValues.some((field) => field?.isBlurred) - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition - if (isTouched && currBaseStore?.errorMap?.onMount) { - currBaseStore.errorMap.onMount = undefined - } + const shouldInvalidateOnMount = + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + isTouched && currBaseStore?.errorMap?.onMount const isDirty = fieldMetaValues.some((field) => field?.isDirty) const isPristine = !isDirty @@ -504,8 +503,17 @@ export class FormApi< !hasOnMountError) || (!isValidating && !currBaseStore.isSubmitting && isValid) + let errorMap = currBaseStore.errorMap + if (shouldInvalidateOnMount) { + errors = errors.filter( + (err) => err !== currBaseStore.errorMap.onMount, + ) + errorMap = Object.assign(errorMap, { onMount: undefined }) + } + return { ...currBaseStore, + errorMap, fieldMeta: this.fieldMetaDerived.state, errors, isFieldsValidating, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 46f5435551..f37d9dfa79 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1113,8 +1113,8 @@ importers: packages/form-core: dependencies: '@tanstack/store': - specifier: https://pkg.pr.new/@tanstack/store@144 - version: https://pkg.pr.new/@tanstack/store@144 + specifier: https://pkg.pr.new/@tanstack/store@dcb3d35 + version: https://pkg.pr.new/@tanstack/store@dcb3d35 packages/lit-form: dependencies: @@ -4468,8 +4468,8 @@ packages: '@tanstack/store@0.5.5': resolution: {integrity: sha512-EOSrgdDAJExbvRZEQ/Xhh9iZchXpMN+ga1Bnk8Nmygzs8TfiE6hbzThF+Pr2G19uHL6+DTDTHhJ8VQiOd7l4tA==} - '@tanstack/store@https://pkg.pr.new/@tanstack/store@144': - resolution: {tarball: https://pkg.pr.new/@tanstack/store@144} + '@tanstack/store@https://pkg.pr.new/@tanstack/store@dcb3d35': + resolution: {tarball: https://pkg.pr.new/@tanstack/store@dcb3d35} version: 0.6.0 '@tanstack/virtual-file-routes@1.64.0': @@ -14005,7 +14005,7 @@ snapshots: '@tanstack/store@0.5.5': {} - '@tanstack/store@https://pkg.pr.new/@tanstack/store@144': {} + '@tanstack/store@https://pkg.pr.new/@tanstack/store@dcb3d35': {} '@tanstack/virtual-file-routes@1.64.0': {} From 06d0a65e749ae5436979fe768b3dadec606bba81 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sat, 30 Nov 2024 00:49:06 +0000 Subject: [PATCH 24/38] ci: apply automated fixes and generate docs --- docs/reference/classes/formapi.md | 42 +++++++++++++++---------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/docs/reference/classes/formapi.md b/docs/reference/classes/formapi.md index e44a60341c..e8da6e596b 100644 --- a/docs/reference/classes/formapi.md +++ b/docs/reference/classes/formapi.md @@ -143,7 +143,7 @@ deleteField(field): void #### Defined in -[packages/form-core/src/FormApi.ts:1166](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1166) +[packages/form-core/src/FormApi.ts:1174](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1174) *** @@ -169,7 +169,7 @@ Gets the field info of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1074](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1074) +[packages/form-core/src/FormApi.ts:1082](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1082) *** @@ -195,7 +195,7 @@ Gets the metadata of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1065](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1065) +[packages/form-core/src/FormApi.ts:1073](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1073) *** @@ -221,7 +221,7 @@ Gets the value of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1058](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1058) +[packages/form-core/src/FormApi.ts:1066](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1066) *** @@ -239,7 +239,7 @@ Handles the form submission, performs validation, and calls the appropriate onSu #### Defined in -[packages/form-core/src/FormApi.ts:999](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L999) +[packages/form-core/src/FormApi.ts:1007](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1007) *** @@ -275,7 +275,7 @@ Inserts a value into an array field at the specified index, shifting the subsequ #### Defined in -[packages/form-core/src/FormApi.ts:1198](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1198) +[packages/form-core/src/FormApi.ts:1206](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1206) *** @@ -295,7 +295,7 @@ mount(): () => void #### Defined in -[packages/form-core/src/FormApi.ts:552](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L552) +[packages/form-core/src/FormApi.ts:560](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L560) *** @@ -331,7 +331,7 @@ Moves the value at the first specified index to the second specified index withi #### Defined in -[packages/form-core/src/FormApi.ts:1316](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1316) +[packages/form-core/src/FormApi.ts:1324](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1324) *** @@ -364,7 +364,7 @@ Pushes a value into an array field. #### Defined in -[packages/form-core/src/FormApi.ts:1180](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1180) +[packages/form-core/src/FormApi.ts:1188](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1188) *** @@ -397,7 +397,7 @@ Removes a value from an array field at the specified index. #### Defined in -[packages/form-core/src/FormApi.ts:1251](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1251) +[packages/form-core/src/FormApi.ts:1259](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1259) *** @@ -433,7 +433,7 @@ Replaces a value into an array field at the specified index. #### Defined in -[packages/form-core/src/FormApi.ts:1225](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1225) +[packages/form-core/src/FormApi.ts:1233](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1233) *** @@ -464,7 +464,7 @@ Optional options to control the reset behavior. #### Defined in -[packages/form-core/src/FormApi.ts:627](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L627) +[packages/form-core/src/FormApi.ts:635](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L635) *** @@ -488,7 +488,7 @@ resetFieldMeta(fieldMeta): Record #### Defined in -[packages/form-core/src/FormApi.ts:1111](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1111) +[packages/form-core/src/FormApi.ts:1119](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1119) *** @@ -510,7 +510,7 @@ Updates the form's errorMap #### Defined in -[packages/form-core/src/FormApi.ts:1340](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1340) +[packages/form-core/src/FormApi.ts:1348](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1348) *** @@ -538,7 +538,7 @@ Updates the metadata of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1093](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1093) +[packages/form-core/src/FormApi.ts:1101](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1101) *** @@ -571,7 +571,7 @@ Sets the value of the specified field and optionally updates the touched state. #### Defined in -[packages/form-core/src/FormApi.ts:1135](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1135) +[packages/form-core/src/FormApi.ts:1143](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1143) *** @@ -607,7 +607,7 @@ Swaps the values at the specified indices within an array field. #### Defined in -[packages/form-core/src/FormApi.ts:1290](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1290) +[packages/form-core/src/FormApi.ts:1298](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1298) *** @@ -629,7 +629,7 @@ Updates the form options and form state. #### Defined in -[packages/form-core/src/FormApi.ts:583](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L583) +[packages/form-core/src/FormApi.ts:591](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L591) *** @@ -651,7 +651,7 @@ Validates form and all fields in using the correct handlers for a given validati #### Defined in -[packages/form-core/src/FormApi.ts:653](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L653) +[packages/form-core/src/FormApi.ts:661](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L661) *** @@ -684,7 +684,7 @@ Validates the children of a specified array in the form starting from a given in #### Defined in -[packages/form-core/src/FormApi.ts:687](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L687) +[packages/form-core/src/FormApi.ts:695](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L695) *** @@ -712,4 +712,4 @@ Validates a specified field in the form using the correct handlers for a given v #### Defined in -[packages/form-core/src/FormApi.ts:726](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L726) +[packages/form-core/src/FormApi.ts:734](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L734) From 1be22f30e78a44e08d0310217cc30e4d9fb8a064 Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Sat, 30 Nov 2024 02:40:56 -0800 Subject: [PATCH 25/38] chore: fix build --- .../react/next-server-actions/package.json | 2 +- examples/react/remix/package.json | 2 +- examples/react/tanstack-start/package.json | 2 +- packages/angular-form/package.json | 2 +- packages/form-core/package.json | 2 +- packages/react-form/package.json | 2 +- packages/solid-form/package.json | 2 +- packages/vue-form/package.json | 2 +- pnpm-lock.yaml | 93 ++++++++++++------- 9 files changed, 66 insertions(+), 43 deletions(-) diff --git a/examples/react/next-server-actions/package.json b/examples/react/next-server-actions/package.json index 50499b77db..5ba1a3880e 100644 --- a/examples/react/next-server-actions/package.json +++ b/examples/react/next-server-actions/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/react-form": "^0.39.0", - "@tanstack/react-store": "^0.5.6", + "@tanstack/react-store": "https://pkg.pr.new/@tanstack/react-store@f8c01f6", "next": "15.0.3", "react": "19.0.0-rc-5dcb0097-20240918", "react-dom": "19.0.0-rc-5dcb0097-20240918" diff --git a/examples/react/remix/package.json b/examples/react/remix/package.json index deb0870606..111530ae83 100644 --- a/examples/react/remix/package.json +++ b/examples/react/remix/package.json @@ -12,7 +12,7 @@ "@remix-run/react": "^2.14.0", "@remix-run/serve": "^2.14.0", "@tanstack/react-form": "^0.39.0", - "@tanstack/react-store": "^0.5.6", + "@tanstack/react-store": "https://pkg.pr.new/@tanstack/react-store@f8c01f6", "isbot": "^5.1.17", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/tanstack-start/package.json b/examples/react/tanstack-start/package.json index 768667302e..a9a3e6cb0d 100644 --- a/examples/react/tanstack-start/package.json +++ b/examples/react/tanstack-start/package.json @@ -12,7 +12,7 @@ "@tanstack/form-core": "^0.39.0", "@tanstack/react-form": "^0.39.0", "@tanstack/react-router": "^1.81.1", - "@tanstack/react-store": "^0.5.6", + "@tanstack/react-store": "https://pkg.pr.new/@tanstack/react-store@f8c01f6", "@tanstack/start": "^1.81.1", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/packages/angular-form/package.json b/packages/angular-form/package.json index 19e2d088ab..a7f947ba59 100644 --- a/packages/angular-form/package.json +++ b/packages/angular-form/package.json @@ -42,7 +42,7 @@ "src" ], "dependencies": { - "@tanstack/angular-store": "^0.5.6", + "@tanstack/angular-store": "https://pkg.pr.new/@tanstack/angular-store@f8c01f6", "@tanstack/form-core": "workspace:*", "tslib": "^2.8.1" }, diff --git a/packages/form-core/package.json b/packages/form-core/package.json index 9797e182b8..3f23c4ed5c 100644 --- a/packages/form-core/package.json +++ b/packages/form-core/package.json @@ -52,6 +52,6 @@ "src" ], "dependencies": { - "@tanstack/store": "https://pkg.pr.new/@tanstack/store@dcb3d35" + "@tanstack/store": "https://pkg.pr.new/@tanstack/store@f8c01f6" } } diff --git a/packages/react-form/package.json b/packages/react-form/package.json index 8289081742..c75f980aad 100644 --- a/packages/react-form/package.json +++ b/packages/react-form/package.json @@ -84,7 +84,7 @@ "dependencies": { "@remix-run/node": "^2.14.0", "@tanstack/form-core": "workspace:*", - "@tanstack/react-store": "^0.5.6", + "@tanstack/react-store": "https://pkg.pr.new/@tanstack/react-store@f8c01f6", "decode-formdata": "^0.8.0" }, "devDependencies": { diff --git a/packages/solid-form/package.json b/packages/solid-form/package.json index 86c7b5e7c4..08b0f022bd 100644 --- a/packages/solid-form/package.json +++ b/packages/solid-form/package.json @@ -57,7 +57,7 @@ ], "dependencies": { "@tanstack/form-core": "workspace:*", - "@tanstack/solid-store": "^0.5.6" + "@tanstack/solid-store": "https://pkg.pr.new/@tanstack/solid-store@f8c01f6" }, "devDependencies": { "solid-js": "^1.9.3", diff --git a/packages/vue-form/package.json b/packages/vue-form/package.json index 09aab431cb..53acfd5944 100644 --- a/packages/vue-form/package.json +++ b/packages/vue-form/package.json @@ -54,7 +54,7 @@ ], "dependencies": { "@tanstack/form-core": "workspace:*", - "@tanstack/vue-store": "^0.5.6" + "@tanstack/vue-store": "https://pkg.pr.new/@tanstack/vue-store@f8c01f6" }, "devDependencies": { "@vitejs/plugin-vue": "^5.1.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f37d9dfa79..c1625341c1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -499,8 +499,8 @@ importers: specifier: ^0.39.0 version: link:../../../packages/react-form '@tanstack/react-store': - specifier: ^0.5.6 - version: 0.5.6(react-dom@19.0.0-rc-5dcb0097-20240918(react@19.0.0-rc-5dcb0097-20240918))(react@19.0.0-rc-5dcb0097-20240918) + specifier: https://pkg.pr.new/@tanstack/react-store@f8c01f6 + version: https://pkg.pr.new/@tanstack/react-store@f8c01f6(react-dom@19.0.0-rc-5dcb0097-20240918(react@19.0.0-rc-5dcb0097-20240918))(react@19.0.0-rc-5dcb0097-20240918) next: specifier: 15.0.3 version: 15.0.3(react-dom@19.0.0-rc-5dcb0097-20240918(react@19.0.0-rc-5dcb0097-20240918))(react@19.0.0-rc-5dcb0097-20240918)(sass@1.80.7) @@ -567,8 +567,8 @@ importers: specifier: ^0.39.0 version: link:../../../packages/react-form '@tanstack/react-store': - specifier: ^0.5.6 - version: 0.5.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: https://pkg.pr.new/@tanstack/react-store@f8c01f6 + version: https://pkg.pr.new/@tanstack/react-store@f8c01f6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) isbot: specifier: ^5.1.17 version: 5.1.17 @@ -635,8 +635,8 @@ importers: specifier: ^1.81.1 version: 1.81.1(@tanstack/router-generator@1.79.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@tanstack/react-store': - specifier: ^0.5.6 - version: 0.5.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: https://pkg.pr.new/@tanstack/react-store@f8c01f6 + version: https://pkg.pr.new/@tanstack/react-store@f8c01f6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@tanstack/start': specifier: ^1.81.1 version: 1.81.1(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(vite@5.4.11(@types/node@20.17.5)(less@4.2.0)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0))(webpack-sources@3.2.3)(webpack@5.96.1(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.24.0)) @@ -1067,8 +1067,8 @@ importers: packages/angular-form: dependencies: '@tanstack/angular-store': - specifier: ^0.5.6 - version: 0.5.6(@angular/common@19.0.1(@angular/core@19.0.1(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.1(rxjs@7.8.1)(zone.js@0.15.0)) + specifier: https://pkg.pr.new/@tanstack/angular-store@f8c01f6 + version: https://pkg.pr.new/@tanstack/angular-store@f8c01f6(@angular/common@19.0.1(@angular/core@19.0.1(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.1(rxjs@7.8.1)(zone.js@0.15.0)) '@tanstack/form-core': specifier: workspace:* version: link:../form-core @@ -1113,8 +1113,8 @@ importers: packages/form-core: dependencies: '@tanstack/store': - specifier: https://pkg.pr.new/@tanstack/store@dcb3d35 - version: https://pkg.pr.new/@tanstack/store@dcb3d35 + specifier: https://pkg.pr.new/@tanstack/store@f8c01f6 + version: https://pkg.pr.new/@tanstack/store@f8c01f6 packages/lit-form: dependencies: @@ -1135,8 +1135,8 @@ importers: specifier: workspace:* version: link:../form-core '@tanstack/react-store': - specifier: ^0.5.6 - version: 0.5.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: https://pkg.pr.new/@tanstack/react-store@f8c01f6 + version: https://pkg.pr.new/@tanstack/react-store@f8c01f6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) decode-formdata: specifier: ^0.8.0 version: 0.8.0 @@ -1172,8 +1172,8 @@ importers: specifier: workspace:* version: link:../form-core '@tanstack/solid-store': - specifier: ^0.5.6 - version: 0.5.6(solid-js@1.9.3) + specifier: https://pkg.pr.new/@tanstack/solid-store@f8c01f6 + version: https://pkg.pr.new/@tanstack/solid-store@f8c01f6(solid-js@1.9.3) devDependencies: solid-js: specifier: ^1.9.3 @@ -1204,8 +1204,8 @@ importers: specifier: workspace:* version: link:../form-core '@tanstack/vue-store': - specifier: ^0.5.6 - version: 0.5.6(vue@3.5.12(typescript@5.7.2)) + specifier: https://pkg.pr.new/@tanstack/vue-store@f8c01f6 + version: https://pkg.pr.new/@tanstack/vue-store@f8c01f6(vue@3.5.12(typescript@5.7.2)) devDependencies: '@vitejs/plugin-vue': specifier: ^5.1.5 @@ -4384,11 +4384,12 @@ packages: '@swc/types@0.1.13': resolution: {integrity: sha512-JL7eeCk6zWCbiYQg2xQSdLXQJl8Qoc9rXmG2cEKvHe3CKwMHwHGpfOb8frzNLmbycOo6I51qxnLnn9ESf4I20Q==} - '@tanstack/angular-store@0.5.6': - resolution: {integrity: sha512-zn7IcIgB/Tg9e6bx5x7YDIBXa7Ki2UML+tpfZpz1nF0emuogqz/OE26pV4NOxGa7h8EFNlhdQ7tGLvcVk396PA==} + '@tanstack/angular-store@https://pkg.pr.new/@tanstack/angular-store@f8c01f6': + resolution: {tarball: https://pkg.pr.new/@tanstack/angular-store@f8c01f6} + version: 0.6.0 peerDependencies: - '@angular/common': '>=16 < 18' - '@angular/core': '>=16 < 18' + '@angular/common': '>=19.0.0' + '@angular/core': '>=19.0.0' '@tanstack/config@0.14.0': resolution: {integrity: sha512-l4c6eeowRzZ3kQ7j6o3VLpATFuvJYa9uRoq0A2J0iGYfEdF2uVRYnm53WXyGM1/XQKHHKZlr2WG3Z2675eAgeA==} @@ -4430,6 +4431,13 @@ packages: react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 + '@tanstack/react-store@https://pkg.pr.new/@tanstack/react-store@f8c01f6': + resolution: {tarball: https://pkg.pr.new/@tanstack/react-store@f8c01f6} + version: 0.6.1 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + '@tanstack/router-generator@1.79.0': resolution: {integrity: sha512-HJxmYs7GAA1AJQzyfy4Hiygmg93qCCDiAxQ//zCRMbzVntwpqtZ96o9UGOPjT3Lw0SxbyzbKgpo3zqCdwlv8Ew==} engines: {node: '>=12'} @@ -4449,8 +4457,9 @@ packages: webpack: optional: true - '@tanstack/solid-store@0.5.6': - resolution: {integrity: sha512-YvRT++wB4keAnI67mlxB7FNoT9kI5+2zylDZA0b33bauOwhxVugHVvNv+tUwXCly/8G8kY8EE0peN9Wcv5vhVA==} + '@tanstack/solid-store@https://pkg.pr.new/@tanstack/solid-store@f8c01f6': + resolution: {tarball: https://pkg.pr.new/@tanstack/solid-store@f8c01f6} + version: 0.6.0 peerDependencies: solid-js: ^1.6.0 @@ -4468,16 +4477,21 @@ packages: '@tanstack/store@0.5.5': resolution: {integrity: sha512-EOSrgdDAJExbvRZEQ/Xhh9iZchXpMN+ga1Bnk8Nmygzs8TfiE6hbzThF+Pr2G19uHL6+DTDTHhJ8VQiOd7l4tA==} - '@tanstack/store@https://pkg.pr.new/@tanstack/store@dcb3d35': - resolution: {tarball: https://pkg.pr.new/@tanstack/store@dcb3d35} + '@tanstack/store@https://pkg.pr.new/@tanstack/store@f8c01f6': + resolution: {tarball: https://pkg.pr.new/@tanstack/store@f8c01f6} + version: 0.6.0 + + '@tanstack/store@https://pkg.pr.new/TanStack/store/@tanstack/store@f8c01f6c3c4d803344121f5b863c1e5994d14151': + resolution: {tarball: https://pkg.pr.new/TanStack/store/@tanstack/store@f8c01f6c3c4d803344121f5b863c1e5994d14151} version: 0.6.0 '@tanstack/virtual-file-routes@1.64.0': resolution: {integrity: sha512-soW+gE9QTmMaqXM17r7y1p8NiQVIIECjdTaYla8BKL5Flj030m3KuxEQoiG1XgjtA0O7ayznFz2YvPcXIy3qDg==} engines: {node: '>=12'} - '@tanstack/vue-store@0.5.6': - resolution: {integrity: sha512-gMRicUGGWTN5QGlv9yBKWaAiHTmbH5DX0vozEblhRGYnBfFBwr51l3uzYndtilsFYfZvphEyngKTRdUb5KQ1OQ==} + '@tanstack/vue-store@https://pkg.pr.new/@tanstack/vue-store@f8c01f6': + resolution: {tarball: https://pkg.pr.new/@tanstack/vue-store@f8c01f6} + version: 0.6.0 peerDependencies: '@vue/composition-api': ^1.2.1 vue: ^2.5.0 || ^3.0.0 @@ -13810,11 +13824,11 @@ snapshots: dependencies: '@swc/counter': 0.1.3 - '@tanstack/angular-store@0.5.6(@angular/common@19.0.1(@angular/core@19.0.1(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.1(rxjs@7.8.1)(zone.js@0.15.0))': + '@tanstack/angular-store@https://pkg.pr.new/@tanstack/angular-store@f8c01f6(@angular/common@19.0.1(@angular/core@19.0.1(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.1(rxjs@7.8.1)(zone.js@0.15.0))': dependencies: '@angular/common': 19.0.1(@angular/core@19.0.1(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1) '@angular/core': 19.0.1(rxjs@7.8.1)(zone.js@0.15.0) - '@tanstack/store': 0.5.5 + '@tanstack/store': https://pkg.pr.new/TanStack/store/@tanstack/store@f8c01f6c3c4d803344121f5b863c1e5994d14151 tslib: 2.8.1 '@tanstack/config@0.14.0(@types/node@20.17.5)(esbuild@0.24.0)(eslint@9.14.0(jiti@2.4.0))(rollup@4.26.0)(typescript@5.6.3)(vite@5.4.11(@types/node@20.17.5)(less@4.2.0)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0))': @@ -13884,9 +13898,16 @@ snapshots: react-dom: 18.3.1(react@18.3.1) use-sync-external-store: 1.2.2(react@18.3.1) - '@tanstack/react-store@0.5.6(react-dom@19.0.0-rc-5dcb0097-20240918(react@19.0.0-rc-5dcb0097-20240918))(react@19.0.0-rc-5dcb0097-20240918)': + '@tanstack/react-store@https://pkg.pr.new/@tanstack/react-store@f8c01f6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@tanstack/store': 0.5.5 + '@tanstack/store': https://pkg.pr.new/TanStack/store/@tanstack/store@f8c01f6c3c4d803344121f5b863c1e5994d14151 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + use-sync-external-store: 1.2.2(react@18.3.1) + + '@tanstack/react-store@https://pkg.pr.new/@tanstack/react-store@f8c01f6(react-dom@19.0.0-rc-5dcb0097-20240918(react@19.0.0-rc-5dcb0097-20240918))(react@19.0.0-rc-5dcb0097-20240918)': + dependencies: + '@tanstack/store': https://pkg.pr.new/TanStack/store/@tanstack/store@f8c01f6c3c4d803344121f5b863c1e5994d14151 react: 19.0.0-rc-5dcb0097-20240918 react-dom: 19.0.0-rc-5dcb0097-20240918(react@19.0.0-rc-5dcb0097-20240918) use-sync-external-store: 1.2.2(react@19.0.0-rc-5dcb0097-20240918) @@ -13925,9 +13946,9 @@ snapshots: - supports-color - webpack-sources - '@tanstack/solid-store@0.5.6(solid-js@1.9.3)': + '@tanstack/solid-store@https://pkg.pr.new/@tanstack/solid-store@f8c01f6(solid-js@1.9.3)': dependencies: - '@tanstack/store': 0.5.5 + '@tanstack/store': https://pkg.pr.new/TanStack/store/@tanstack/store@f8c01f6c3c4d803344121f5b863c1e5994d14151 solid-js: 1.9.3 '@tanstack/start-vite-plugin@1.79.0': @@ -14005,13 +14026,15 @@ snapshots: '@tanstack/store@0.5.5': {} - '@tanstack/store@https://pkg.pr.new/@tanstack/store@dcb3d35': {} + '@tanstack/store@https://pkg.pr.new/@tanstack/store@f8c01f6': {} + + '@tanstack/store@https://pkg.pr.new/TanStack/store/@tanstack/store@f8c01f6c3c4d803344121f5b863c1e5994d14151': {} '@tanstack/virtual-file-routes@1.64.0': {} - '@tanstack/vue-store@0.5.6(vue@3.5.12(typescript@5.7.2))': + '@tanstack/vue-store@https://pkg.pr.new/@tanstack/vue-store@f8c01f6(vue@3.5.12(typescript@5.7.2))': dependencies: - '@tanstack/store': 0.5.5 + '@tanstack/store': https://pkg.pr.new/TanStack/store/@tanstack/store@f8c01f6c3c4d803344121f5b863c1e5994d14151 vue: 3.5.12(typescript@5.7.2) vue-demi: 0.14.10(vue@3.5.12(typescript@5.7.2)) From ebdc29e7685fe47e8bc48e48f2da2d0c48c6a441 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sat, 30 Nov 2024 10:42:23 +0000 Subject: [PATCH 26/38] ci: apply automated fixes and generate docs --- .../reference/classes/tanstackfield.md | 295 ++++++++++++++++++ .../angular/reference/functions/injectform.md | 28 ++ .../reference/functions/injectstore.md | 32 ++ docs/framework/angular/reference/index.md | 15 + .../react/reference/functions/field.md | 38 +++ .../react/reference/functions/usefield.md | 40 +++ .../react/reference/functions/useform.md | 32 ++ .../react/reference/functions/usetransform.md | 30 ++ docs/framework/react/reference/index.md | 23 ++ .../reference/interfaces/reactformapi.md | 98 ++++++ .../reference/type-aliases/fieldcomponent.md | 44 +++ .../type-aliases/reactformextendedapi.md | 22 ++ .../react/reference/type-aliases/usefield.md | 40 +++ .../solid/reference/functions/createfield.md | 38 +++ .../solid/reference/functions/createform.md | 28 ++ .../solid/reference/functions/field.md | 34 ++ docs/framework/solid/reference/index.md | 21 ++ .../reference/interfaces/solidformapi.md | 92 ++++++ .../reference/type-aliases/createfield.md | 40 +++ .../reference/type-aliases/fieldcomponent.md | 42 +++ .../vue/reference/functions/usefield.md | 46 +++ .../vue/reference/functions/useform.md | 28 ++ docs/framework/vue/reference/index.md | 25 ++ .../vue/reference/interfaces/vuefieldapi.md | 24 ++ .../vue/reference/interfaces/vueformapi.md | 88 ++++++ .../reference/type-aliases/fieldcomponent.md | 38 +++ .../vue/reference/type-aliases/usefield.md | 48 +++ .../vue/reference/variables/field.md | 22 ++ 28 files changed, 1351 insertions(+) create mode 100644 docs/framework/angular/reference/classes/tanstackfield.md create mode 100644 docs/framework/angular/reference/functions/injectform.md create mode 100644 docs/framework/angular/reference/functions/injectstore.md create mode 100644 docs/framework/angular/reference/index.md create mode 100644 docs/framework/react/reference/functions/field.md create mode 100644 docs/framework/react/reference/functions/usefield.md create mode 100644 docs/framework/react/reference/functions/useform.md create mode 100644 docs/framework/react/reference/functions/usetransform.md create mode 100644 docs/framework/react/reference/index.md create mode 100644 docs/framework/react/reference/interfaces/reactformapi.md create mode 100644 docs/framework/react/reference/type-aliases/fieldcomponent.md create mode 100644 docs/framework/react/reference/type-aliases/reactformextendedapi.md create mode 100644 docs/framework/react/reference/type-aliases/usefield.md create mode 100644 docs/framework/solid/reference/functions/createfield.md create mode 100644 docs/framework/solid/reference/functions/createform.md create mode 100644 docs/framework/solid/reference/functions/field.md create mode 100644 docs/framework/solid/reference/index.md create mode 100644 docs/framework/solid/reference/interfaces/solidformapi.md create mode 100644 docs/framework/solid/reference/type-aliases/createfield.md create mode 100644 docs/framework/solid/reference/type-aliases/fieldcomponent.md create mode 100644 docs/framework/vue/reference/functions/usefield.md create mode 100644 docs/framework/vue/reference/functions/useform.md create mode 100644 docs/framework/vue/reference/index.md create mode 100644 docs/framework/vue/reference/interfaces/vuefieldapi.md create mode 100644 docs/framework/vue/reference/interfaces/vueformapi.md create mode 100644 docs/framework/vue/reference/type-aliases/fieldcomponent.md create mode 100644 docs/framework/vue/reference/type-aliases/usefield.md create mode 100644 docs/framework/vue/reference/variables/field.md diff --git a/docs/framework/angular/reference/classes/tanstackfield.md b/docs/framework/angular/reference/classes/tanstackfield.md new file mode 100644 index 0000000000..3fe19007b6 --- /dev/null +++ b/docs/framework/angular/reference/classes/tanstackfield.md @@ -0,0 +1,295 @@ +--- +id: TanStackField +title: TanStackField +--- + +# Class: TanStackField\ + +## Type Parameters + +• **TParentData** + +• **TName** *extends* `DeepKeys`\<`TParentData`\> + +• **TFieldValidator** *extends* `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\> \| `undefined` = `undefined` + +• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` + +• **TData** *extends* `DeepValue`\<`TParentData`, `TName`\> = `DeepValue`\<`TParentData`, `TName`\> + +## Implements + +- `OnInit` +- `OnChanges` +- `OnDestroy` +- `FieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> + +## Constructors + +### new TanStackField() + +```ts +new TanStackField(): TanStackField +``` + +#### Returns + +[`TanStackField`](tanstackfield.md)\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> + +## Properties + +### api + +```ts +api: FieldApi; +``` + +#### Defined in + +[tanstack-field.directive.ts:62](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L62) + +*** + +### asyncAlways? + +```ts +optional asyncAlways: boolean; +``` + +If `true`, always run async validation, even if there are errors emitted during synchronous validation. + +#### Implementation of + +`FieldOptions.asyncAlways` + +#### Defined in + +[tanstack-field.directive.ts:48](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L48) + +*** + +### asyncDebounceMs? + +```ts +optional asyncDebounceMs: number; +``` + +The default time to debounce async validation if there is not a more specific debounce time passed. + +#### Implementation of + +`FieldOptions.asyncDebounceMs` + +#### Defined in + +[tanstack-field.directive.ts:47](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L47) + +*** + +### defaultMeta? + +```ts +optional defaultMeta: Partial; +``` + +An optional object with default metadata for the field. + +#### Implementation of + +`FieldOptions.defaultMeta` + +#### Defined in + +[tanstack-field.directive.ts:60](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L60) + +*** + +### defaultValue? + +```ts +optional defaultValue: NoInfer; +``` + +An optional default value for the field. + +#### Implementation of + +`FieldOptions.defaultValue` + +#### Defined in + +[tanstack-field.directive.ts:46](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L46) + +*** + +### listeners? + +```ts +optional listeners: NoInfer>; +``` + +A list of listeners which attach to the corresponding events + +#### Implementation of + +`FieldOptions.listeners` + +#### Defined in + +[tanstack-field.directive.ts:57](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L57) + +*** + +### name + +```ts +name: TName; +``` + +The field name. The type will be `DeepKeys` to ensure your name is a deep key of the parent dataset. + +#### Implementation of + +`FieldOptions.name` + +#### Defined in + +[tanstack-field.directive.ts:42](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L42) + +*** + +### tanstackField + +```ts +tanstackField: FormApi; +``` + +#### Defined in + +[tanstack-field.directive.ts:50](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L50) + +*** + +### unmount()? + +```ts +optional unmount: () => void; +``` + +#### Returns + +`void` + +#### Defined in + +[tanstack-field.directive.ts:78](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L78) + +*** + +### validatorAdapter? + +```ts +optional validatorAdapter: TFieldValidator; +``` + +A validator provided by an extension, like `yupValidator` from `@tanstack/yup-form-adapter` + +#### Implementation of + +`FieldOptions.validatorAdapter` + +#### Defined in + +[tanstack-field.directive.ts:49](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L49) + +*** + +### validators? + +```ts +optional validators: NoInfer>; +``` + +A list of validators to pass to the field + +#### Implementation of + +`FieldOptions.validators` + +#### Defined in + +[tanstack-field.directive.ts:54](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L54) + +## Methods + +### ngOnChanges() + +```ts +ngOnChanges(): void +``` + +A callback method that is invoked immediately after the +default change detector has checked data-bound properties +if at least one has changed, and before the view and content +children are checked. + +#### Returns + +`void` + +#### Implementation of + +`OnChanges.ngOnChanges` + +#### Defined in + +[tanstack-field.directive.ts:90](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L90) + +*** + +### ngOnDestroy() + +```ts +ngOnDestroy(): void +``` + +A callback method that performs custom clean-up, invoked immediately +before a directive, pipe, or service instance is destroyed. + +#### Returns + +`void` + +#### Implementation of + +`OnDestroy.ngOnDestroy` + +#### Defined in + +[tanstack-field.directive.ts:86](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L86) + +*** + +### ngOnInit() + +```ts +ngOnInit(): void +``` + +A callback method that is invoked immediately after the +default change detector has checked the directive's +data-bound properties for the first time, +and before any of the view or content children have been checked. +It is invoked only once when the directive is instantiated. + +#### Returns + +`void` + +#### Implementation of + +`OnInit.ngOnInit` + +#### Defined in + +[tanstack-field.directive.ts:80](https://github.com/TanStack/form/blob/main/packages/angular-form/src/tanstack-field.directive.ts#L80) diff --git a/docs/framework/angular/reference/functions/injectform.md b/docs/framework/angular/reference/functions/injectform.md new file mode 100644 index 0000000000..3ead8f1ca0 --- /dev/null +++ b/docs/framework/angular/reference/functions/injectform.md @@ -0,0 +1,28 @@ +--- +id: injectForm +title: injectForm +--- + +# Function: injectForm() + +```ts +function injectForm(opts?): FormApi +``` + +## Type Parameters + +• **TFormData** + +• **TFormValidator** *extends* `undefined` \| `Validator`\<`TFormData`, `unknown`\> = `undefined` + +## Parameters + +• **opts?**: `FormOptions`\<`TFormData`, `TFormValidator`\> + +## Returns + +`FormApi`\<`TFormData`, `TFormValidator`\> + +## Defined in + +[inject-form.ts:5](https://github.com/TanStack/form/blob/main/packages/angular-form/src/inject-form.ts#L5) diff --git a/docs/framework/angular/reference/functions/injectstore.md b/docs/framework/angular/reference/functions/injectstore.md new file mode 100644 index 0000000000..1fee88e762 --- /dev/null +++ b/docs/framework/angular/reference/functions/injectstore.md @@ -0,0 +1,32 @@ +--- +id: injectStore +title: injectStore +--- + +# Function: injectStore() + +```ts +function injectStore(form, selector?): Signal +``` + +## Type Parameters + +• **TFormData** + +• **TFormValidator** *extends* `undefined` \| `Validator`\<`TFormData`, `unknown`\> = `undefined` + +• **TSelected** = `NoInfer`\<`FormState`\<`TFormData`\>\> + +## Parameters + +• **form**: `FormApi`\<`TFormData`, `TFormValidator`\> + +• **selector?** + +## Returns + +`Signal`\<`TSelected`\> + +## Defined in + +[inject-store.ts:4](https://github.com/TanStack/form/blob/main/packages/angular-form/src/inject-store.ts#L4) diff --git a/docs/framework/angular/reference/index.md b/docs/framework/angular/reference/index.md new file mode 100644 index 0000000000..aab1d7b1d1 --- /dev/null +++ b/docs/framework/angular/reference/index.md @@ -0,0 +1,15 @@ +--- +id: "@tanstack/angular-form" +title: "@tanstack/angular-form" +--- + +# @tanstack/angular-form + +## Classes + +- [TanStackField](classes/tanstackfield.md) + +## Functions + +- [injectForm](functions/injectform.md) +- [injectStore](functions/injectstore.md) diff --git a/docs/framework/react/reference/functions/field.md b/docs/framework/react/reference/functions/field.md new file mode 100644 index 0000000000..fddb0a9692 --- /dev/null +++ b/docs/framework/react/reference/functions/field.md @@ -0,0 +1,38 @@ +--- +id: Field +title: Field +--- + +# Function: Field() + +```ts +function Field(__namedParameters): ReactNode +``` + +A function component that takes field options and a render function as children and returns a React component. + +The `Field` component uses the `useField` hook internally to manage the field instance. + +## Type Parameters + +• **TParentData** + +• **TName** *extends* `string` \| `number` + +• **TFieldValidator** *extends* `undefined` \| `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\> = `undefined` + +• **TFormValidator** *extends* `undefined` \| `Validator`\<`TParentData`, `unknown`\> = `undefined` + +• **TData** = `DeepValue`\<`TParentData`, `TName`\> + +## Parameters + +• **\_\_namedParameters**: `FieldComponentProps`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> + +## Returns + +`ReactNode` + +## Defined in + +[useField.tsx:164](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L164) diff --git a/docs/framework/react/reference/functions/usefield.md b/docs/framework/react/reference/functions/usefield.md new file mode 100644 index 0000000000..0d341f855e --- /dev/null +++ b/docs/framework/react/reference/functions/usefield.md @@ -0,0 +1,40 @@ +--- +id: useField +title: useField +--- + +# Function: useField() + +```ts +function useField(opts): FieldApi & ReactFieldApi +``` + +A hook for managing a field in a form. + +## Type Parameters + +• **TParentData** + +• **TName** *extends* `string` \| `number` + +• **TFieldValidator** *extends* `undefined` \| `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\> = `undefined` + +• **TFormValidator** *extends* `undefined` \| `Validator`\<`TParentData`, `unknown`\> = `undefined` + +• **TData** = `DeepValue`\<`TParentData`, `TName`\> + +## Parameters + +• **opts**: `UseFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> + +An object with field options. + +## Returns + +`FieldApi`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> & `ReactFieldApi`\<`TParentData`, `TFormValidator`\> + +The `FieldApi` instance for the specified field. + +## Defined in + +[useField.tsx:50](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L50) diff --git a/docs/framework/react/reference/functions/useform.md b/docs/framework/react/reference/functions/useform.md new file mode 100644 index 0000000000..dd5083e49b --- /dev/null +++ b/docs/framework/react/reference/functions/useform.md @@ -0,0 +1,32 @@ +--- +id: useForm +title: useForm +--- + +# Function: useForm() + +```ts +function useForm(opts?): ReactFormExtendedApi +``` + +A custom React Hook that returns an extended instance of the `FormApi` class. + +This API encapsulates all the necessary functionalities related to the form. It allows you to manage form state, handle submissions, and interact with form fields + +## Type Parameters + +• **TFormData** + +• **TFormValidator** *extends* `undefined` \| `Validator`\<`TFormData`, `unknown`\> = `undefined` + +## Parameters + +• **opts?**: `FormOptions`\<`TFormData`, `TFormValidator`\> + +## Returns + +[`ReactFormExtendedApi`](../type-aliases/reactformextendedapi.md)\<`TFormData`, `TFormValidator`\> + +## Defined in + +[useForm.tsx:67](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L67) diff --git a/docs/framework/react/reference/functions/usetransform.md b/docs/framework/react/reference/functions/usetransform.md new file mode 100644 index 0000000000..647b76fac5 --- /dev/null +++ b/docs/framework/react/reference/functions/usetransform.md @@ -0,0 +1,30 @@ +--- +id: useTransform +title: useTransform +--- + +# Function: useTransform() + +```ts +function useTransform(fn, deps): FormTransform +``` + +## Type Parameters + +• **TFormData** + +• **TFormValidator** *extends* `undefined` \| `Validator`\<`TFormData`, `unknown`\> = `undefined` + +## Parameters + +• **fn** + +• **deps**: `unknown`[] + +## Returns + +`FormTransform`\<`TFormData`, `TFormValidator`\> + +## Defined in + +[useTransform.ts:3](https://github.com/TanStack/form/blob/main/packages/react-form/src/useTransform.ts#L3) diff --git a/docs/framework/react/reference/index.md b/docs/framework/react/reference/index.md new file mode 100644 index 0000000000..d79f85b057 --- /dev/null +++ b/docs/framework/react/reference/index.md @@ -0,0 +1,23 @@ +--- +id: "@tanstack/react-form" +title: "@tanstack/react-form" +--- + +# @tanstack/react-form + +## Interfaces + +- [ReactFormApi](interfaces/reactformapi.md) + +## Type Aliases + +- [FieldComponent](type-aliases/fieldcomponent.md) +- [ReactFormExtendedApi](type-aliases/reactformextendedapi.md) +- [UseField](type-aliases/usefield.md) + +## Functions + +- [Field](functions/field.md) +- [useField](functions/usefield.md) +- [useForm](functions/useform.md) +- [useTransform](functions/usetransform.md) diff --git a/docs/framework/react/reference/interfaces/reactformapi.md b/docs/framework/react/reference/interfaces/reactformapi.md new file mode 100644 index 0000000000..5503553b9a --- /dev/null +++ b/docs/framework/react/reference/interfaces/reactformapi.md @@ -0,0 +1,98 @@ +--- +id: ReactFormApi +title: ReactFormApi +--- + +# Interface: ReactFormApi\ + +Fields that are added onto the `FormAPI` from `@tanstack/form-core` and returned from `useForm` + +## Type Parameters + +• **TFormData** + +• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined` + +## Properties + +### Field + +```ts +Field: FieldComponent; +``` + +A React component to render form fields. With this, you can render and manage individual form fields. + +#### Defined in + +[useForm.tsx:21](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L21) + +*** + +### Subscribe() + +```ts +Subscribe: (props) => ReactNode; +``` + +A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates. + +#### Type Parameters + +• **TSelected** = `FormState`\<`TFormData`\> + +#### Parameters + +• **props** + +• **props.children**: `ReactNode` \| (`state`) => `ReactNode` + +• **props.selector?** + +#### Returns + +`ReactNode` + +#### Defined in + +[useForm.tsx:35](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L35) + +*** + +### useField + +```ts +useField: UseField; +``` + +A custom React hook that provides functionalities related to individual form fields. It gives you access to field values, errors, and allows you to set or update field values. + +#### Defined in + +[useForm.tsx:25](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L25) + +*** + +### useStore() + +```ts +useStore: (selector?) => TSelected; +``` + +A `useStore` hook that connects to the internal store of the form. It can be used to access the form's current state or any other related state information. You can optionally pass in a selector function to cherry-pick specific parts of the state + +#### Type Parameters + +• **TSelected** = `FormState`\<`TFormData`\> + +#### Parameters + +• **selector?** + +#### Returns + +`TSelected` + +#### Defined in + +[useForm.tsx:29](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L29) diff --git a/docs/framework/react/reference/type-aliases/fieldcomponent.md b/docs/framework/react/reference/type-aliases/fieldcomponent.md new file mode 100644 index 0000000000..ee2876a2db --- /dev/null +++ b/docs/framework/react/reference/type-aliases/fieldcomponent.md @@ -0,0 +1,44 @@ +--- +id: FieldComponent +title: FieldComponent +--- + +# Type Alias: FieldComponent()\ + +```ts +type FieldComponent: ({ + children, + ...fieldOptions +}) => ReactNode; +``` + +A type alias representing a field component for a specific form data type. + +## Type Parameters + +• **TParentData** + +• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` + +## Type Parameters + +• **TName** *extends* `DeepKeys`\<`TParentData`\> + +• **TFieldValidator** *extends* `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\> \| `undefined` = `undefined` + +• **TData** *extends* `DeepValue`\<`TParentData`, `TName`\> = `DeepValue`\<`TParentData`, `TName`\> + +## Parameters + +• **\{ + children, + ...fieldOptions +\}**: `Omit`\<`FieldComponentProps`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>, `"form"`\> + +## Returns + +`ReactNode` + +## Defined in + +[useField.tsx:134](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L134) diff --git a/docs/framework/react/reference/type-aliases/reactformextendedapi.md b/docs/framework/react/reference/type-aliases/reactformextendedapi.md new file mode 100644 index 0000000000..597dd69b06 --- /dev/null +++ b/docs/framework/react/reference/type-aliases/reactformextendedapi.md @@ -0,0 +1,22 @@ +--- +id: ReactFormExtendedApi +title: ReactFormExtendedApi +--- + +# Type Alias: ReactFormExtendedApi\ + +```ts +type ReactFormExtendedApi: FormApi & ReactFormApi; +``` + +An extended version of the `FormApi` class that includes React-specific functionalities from `ReactFormApi` + +## Type Parameters + +• **TFormData** + +• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined` + +## Defined in + +[useForm.tsx:44](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L44) diff --git a/docs/framework/react/reference/type-aliases/usefield.md b/docs/framework/react/reference/type-aliases/usefield.md new file mode 100644 index 0000000000..831214e476 --- /dev/null +++ b/docs/framework/react/reference/type-aliases/usefield.md @@ -0,0 +1,40 @@ +--- +id: UseField +title: UseField +--- + +# Type Alias: UseField()\ + +```ts +type UseField: (opts) => FieldApi; +``` + +A type representing a hook for using a field in a form with the given form data type. + +A function that takes an optional object with a `name` property and field options, and returns a `FieldApi` instance for the specified field. + +## Type Parameters + +• **TParentData** + +• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` + +## Type Parameters + +• **TName** *extends* `DeepKeys`\<`TParentData`\> + +• **TFieldValidator** *extends* `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\> \| `undefined` = `undefined` + +• **TData** *extends* `DeepValue`\<`TParentData`, `TName`\> = `DeepValue`\<`TParentData`, `TName`\> + +## Parameters + +• **opts**: `Omit`\<`UseFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>, `"form"`\> + +## Returns + +`FieldApi`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> + +## Defined in + +[useField.tsx:26](https://github.com/TanStack/form/blob/main/packages/react-form/src/useField.tsx#L26) diff --git a/docs/framework/solid/reference/functions/createfield.md b/docs/framework/solid/reference/functions/createfield.md new file mode 100644 index 0000000000..d4cbbcf3b8 --- /dev/null +++ b/docs/framework/solid/reference/functions/createfield.md @@ -0,0 +1,38 @@ +--- +id: createField +title: createField +--- + +# Function: createField() + +```ts +function createField(opts): () => never +``` + +## Type Parameters + +• **TParentData** + +• **TName** *extends* `string` \| `number` + +• **TFieldValidator** *extends* `undefined` \| `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\> = `undefined` + +• **TFormValidator** *extends* `undefined` \| `Validator`\<`TParentData`, `unknown`\> = `undefined` + +• **TData** = `DeepValue`\<`TParentData`, `TName`\> + +## Parameters + +• **opts** + +## Returns + +`Function` + +### Returns + +`never` + +## Defined in + +[createField.tsx:87](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L87) diff --git a/docs/framework/solid/reference/functions/createform.md b/docs/framework/solid/reference/functions/createform.md new file mode 100644 index 0000000000..ee2fd0d57a --- /dev/null +++ b/docs/framework/solid/reference/functions/createform.md @@ -0,0 +1,28 @@ +--- +id: createForm +title: createForm +--- + +# Function: createForm() + +```ts +function createForm(opts?): FormApi & SolidFormApi +``` + +## Type Parameters + +• **TParentData** + +• **TFormValidator** *extends* `undefined` \| `Validator`\<`TParentData`, `unknown`\> = `undefined` + +## Parameters + +• **opts?** + +## Returns + +`FormApi`\<`TParentData`, `TFormValidator`\> & [`SolidFormApi`](../interfaces/solidformapi.md)\<`TParentData`, `TFormValidator`\> + +## Defined in + +[createForm.tsx:26](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L26) diff --git a/docs/framework/solid/reference/functions/field.md b/docs/framework/solid/reference/functions/field.md new file mode 100644 index 0000000000..0afbbd175f --- /dev/null +++ b/docs/framework/solid/reference/functions/field.md @@ -0,0 +1,34 @@ +--- +id: Field +title: Field +--- + +# Function: Field() + +```ts +function Field(props): Element +``` + +## Type Parameters + +• **TParentData** + +• **TName** *extends* `string` \| `number` + +• **TFieldValidator** *extends* `undefined` \| `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\> = `undefined` + +• **TFormValidator** *extends* `undefined` \| `Validator`\<`TParentData`, `unknown`\> = `undefined` + +• **TData** = `DeepValue`\<`TParentData`, `TName`\> + +## Parameters + +• **props**: `object` & `FieldApiOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> & `object` + +## Returns + +`Element` + +## Defined in + +[createField.tsx:185](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L185) diff --git a/docs/framework/solid/reference/index.md b/docs/framework/solid/reference/index.md new file mode 100644 index 0000000000..eafeb80427 --- /dev/null +++ b/docs/framework/solid/reference/index.md @@ -0,0 +1,21 @@ +--- +id: "@tanstack/solid-form" +title: "@tanstack/solid-form" +--- + +# @tanstack/solid-form + +## Interfaces + +- [SolidFormApi](interfaces/solidformapi.md) + +## Type Aliases + +- [CreateField](type-aliases/createfield.md) +- [FieldComponent](type-aliases/fieldcomponent.md) + +## Functions + +- [createField](functions/createfield.md) +- [createForm](functions/createform.md) +- [Field](functions/field.md) diff --git a/docs/framework/solid/reference/interfaces/solidformapi.md b/docs/framework/solid/reference/interfaces/solidformapi.md new file mode 100644 index 0000000000..ab0a76bdd7 --- /dev/null +++ b/docs/framework/solid/reference/interfaces/solidformapi.md @@ -0,0 +1,92 @@ +--- +id: SolidFormApi +title: SolidFormApi +--- + +# Interface: SolidFormApi\ + +## Type Parameters + +• **TFormData** + +• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined` + +## Properties + +### createField + +```ts +createField: CreateField; +``` + +#### Defined in + +[createForm.tsx:16](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L16) + +*** + +### Field + +```ts +Field: FieldComponent; +``` + +#### Defined in + +[createForm.tsx:15](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L15) + +*** + +### Subscribe() + +```ts +Subscribe: (props) => Element; +``` + +#### Type Parameters + +• **TSelected** = `FormState`\<`TFormData`\> + +#### Parameters + +• **props** + +• **props.children**: `Element` \| (`state`) => `Element` + +• **props.selector?** + +#### Returns + +`Element` + +#### Defined in + +[createForm.tsx:20](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L20) + +*** + +### useStore() + +```ts +useStore: (selector?) => () => TSelected; +``` + +#### Type Parameters + +• **TSelected** = `FormState`\<`TFormData`\> + +#### Parameters + +• **selector?** + +#### Returns + +`Function` + +##### Returns + +`TSelected` + +#### Defined in + +[createForm.tsx:17](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createForm.tsx#L17) diff --git a/docs/framework/solid/reference/type-aliases/createfield.md b/docs/framework/solid/reference/type-aliases/createfield.md new file mode 100644 index 0000000000..321be90936 --- /dev/null +++ b/docs/framework/solid/reference/type-aliases/createfield.md @@ -0,0 +1,40 @@ +--- +id: CreateField +title: CreateField +--- + +# Type Alias: CreateField()\ + +```ts +type CreateField: (opts) => () => FieldApi & SolidFieldApi; +``` + +## Type Parameters + +• **TParentData** + +• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` + +## Type Parameters + +• **TName** *extends* `DeepKeys`\<`TParentData`\> + +• **TFieldValidator** *extends* `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\> \| `undefined` = `undefined` + +• **TData** *extends* `DeepValue`\<`TParentData`, `TName`\> = `DeepValue`\<`TParentData`, `TName`\> + +## Parameters + +• **opts** + +## Returns + +`Function` + +### Returns + +`FieldApi`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> & `SolidFieldApi`\<`TParentData`, `TFormValidator`\> + +## Defined in + +[createField.tsx:29](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L29) diff --git a/docs/framework/solid/reference/type-aliases/fieldcomponent.md b/docs/framework/solid/reference/type-aliases/fieldcomponent.md new file mode 100644 index 0000000000..bfa206357e --- /dev/null +++ b/docs/framework/solid/reference/type-aliases/fieldcomponent.md @@ -0,0 +1,42 @@ +--- +id: FieldComponent +title: FieldComponent +--- + +# Type Alias: FieldComponent()\ + +```ts +type FieldComponent: ({ + children, + ...fieldOptions +}) => JSXElement; +``` + +## Type Parameters + +• **TParentData** + +• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` + +## Type Parameters + +• **TName** *extends* `DeepKeys`\<`TParentData`\> + +• **TFieldValidator** *extends* `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\> \| `undefined` = `undefined` + +• **TData** *extends* `DeepValue`\<`TParentData`, `TName`\> = `DeepValue`\<`TParentData`, `TName`\> + +## Parameters + +• **\{ + children, + ...fieldOptions +\}**: `Omit`\<`FieldComponentProps`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>, `"form"`\> + +## Returns + +`JSXElement` + +## Defined in + +[createField.tsx:160](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L160) diff --git a/docs/framework/vue/reference/functions/usefield.md b/docs/framework/vue/reference/functions/usefield.md new file mode 100644 index 0000000000..3a6d324e99 --- /dev/null +++ b/docs/framework/vue/reference/functions/usefield.md @@ -0,0 +1,46 @@ +--- +id: useField +title: useField +--- + +# Function: useField() + +```ts +function useField(opts): object +``` + +## Type Parameters + +• **TParentData** + +• **TName** *extends* `string` \| `number` + +• **TFieldValidator** *extends* `undefined` \| `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\> = `undefined` + +• **TFormValidator** *extends* `undefined` \| `Validator`\<`TParentData`, `unknown`\> = `undefined` + +• **TData** = `DeepValue`\<`TParentData`, `TName`\> + +## Parameters + +• **opts**: `UseFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> + +## Returns + +`object` + +### api + +```ts +readonly api: FieldApi & VueFieldApi = fieldApi; +``` + +### state + +```ts +readonly state: Readonly, FieldState>> = fieldState; +``` + +## Defined in + +[packages/vue-form/src/useField.tsx:49](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L49) diff --git a/docs/framework/vue/reference/functions/useform.md b/docs/framework/vue/reference/functions/useform.md new file mode 100644 index 0000000000..6607abab8b --- /dev/null +++ b/docs/framework/vue/reference/functions/useform.md @@ -0,0 +1,28 @@ +--- +id: useForm +title: useForm +--- + +# Function: useForm() + +```ts +function useForm(opts?): FormApi & VueFormApi +``` + +## Type Parameters + +• **TFormData** + +• **TFormValidator** *extends* `undefined` \| `Validator`\<`TFormData`, `unknown`\> = `undefined` + +## Parameters + +• **opts?**: `FormOptions`\<`TFormData`, `TFormValidator`\> + +## Returns + +`FormApi`\<`TFormData`, `TFormValidator`\> & [`VueFormApi`](../interfaces/vueformapi.md)\<`TFormData`, `TFormValidator`\> + +## Defined in + +[packages/vue-form/src/useForm.tsx:30](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L30) diff --git a/docs/framework/vue/reference/index.md b/docs/framework/vue/reference/index.md new file mode 100644 index 0000000000..bc817c6c4d --- /dev/null +++ b/docs/framework/vue/reference/index.md @@ -0,0 +1,25 @@ +--- +id: "@tanstack/vue-form" +title: "@tanstack/vue-form" +--- + +# @tanstack/vue-form + +## Interfaces + +- [VueFieldApi](interfaces/vuefieldapi.md) +- [VueFormApi](interfaces/vueformapi.md) + +## Type Aliases + +- [FieldComponent](type-aliases/fieldcomponent.md) +- [UseField](type-aliases/usefield.md) + +## Variables + +- [Field](variables/field.md) + +## Functions + +- [useField](functions/usefield.md) +- [useForm](functions/useform.md) diff --git a/docs/framework/vue/reference/interfaces/vuefieldapi.md b/docs/framework/vue/reference/interfaces/vuefieldapi.md new file mode 100644 index 0000000000..f0f0daf31e --- /dev/null +++ b/docs/framework/vue/reference/interfaces/vuefieldapi.md @@ -0,0 +1,24 @@ +--- +id: VueFieldApi +title: VueFieldApi +--- + +# Interface: VueFieldApi\ + +## Type Parameters + +• **TParentData** + +• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` + +## Properties + +### Field + +```ts +Field: FieldComponent; +``` + +#### Defined in + +[packages/vue-form/src/useField.tsx:14](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L14) diff --git a/docs/framework/vue/reference/interfaces/vueformapi.md b/docs/framework/vue/reference/interfaces/vueformapi.md new file mode 100644 index 0000000000..08f8bb462b --- /dev/null +++ b/docs/framework/vue/reference/interfaces/vueformapi.md @@ -0,0 +1,88 @@ +--- +id: VueFormApi +title: VueFormApi +--- + +# Interface: VueFormApi\ + +## Type Parameters + +• **TFormData** + +• **TFormValidator** *extends* `Validator`\<`TFormData`, `unknown`\> \| `undefined` = `undefined` + +## Properties + +### Field + +```ts +Field: FieldComponent; +``` + +#### Defined in + +[packages/vue-form/src/useForm.tsx:14](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L14) + +*** + +### Subscribe() + +```ts +Subscribe: (props, context) => any; +``` + +#### Type Parameters + +• **TSelected** = `FormState`\<`TFormData`\> + +#### Parameters + +• **props** + +• **props.selector?** + +• **context**: `SetupContext`\<`EmitsOptions`, `SlotsType`\<`object`\>\> + +#### Returns + +`any` + +#### Defined in + +[packages/vue-form/src/useForm.tsx:19](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L19) + +*** + +### useField + +```ts +useField: UseField; +``` + +#### Defined in + +[packages/vue-form/src/useForm.tsx:15](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L15) + +*** + +### useStore() + +```ts +useStore: (selector?) => Readonly>; +``` + +#### Type Parameters + +• **TSelected** = `FormState`\<`TFormData`\> + +#### Parameters + +• **selector?** + +#### Returns + +`Readonly`\<`Ref`\<`TSelected`, `TSelected`\>\> + +#### Defined in + +[packages/vue-form/src/useForm.tsx:16](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useForm.tsx#L16) diff --git a/docs/framework/vue/reference/type-aliases/fieldcomponent.md b/docs/framework/vue/reference/type-aliases/fieldcomponent.md new file mode 100644 index 0000000000..348616c974 --- /dev/null +++ b/docs/framework/vue/reference/type-aliases/fieldcomponent.md @@ -0,0 +1,38 @@ +--- +id: FieldComponent +title: FieldComponent +--- + +# Type Alias: FieldComponent()\ + +```ts +type FieldComponent: (fieldOptions, context) => any; +``` + +## Type Parameters + +• **TParentData** + +• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` + +## Type Parameters + +• **TName** *extends* `DeepKeys`\<`TParentData`\> + +• **TFieldValidator** *extends* `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\> \| `undefined` = `undefined` + +• **TData** *extends* `DeepValue`\<`TParentData`, `TName`\> = `DeepValue`\<`TParentData`, `TName`\> + +## Parameters + +• **fieldOptions**: `Omit`\<`FieldComponentProps`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>, `"form"`\> + +• **context**: `SetupContext`\<`object`, `SlotsType`\<`object`\>\> + +## Returns + +`any` + +## Defined in + +[packages/vue-form/src/useField.tsx:117](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L117) diff --git a/docs/framework/vue/reference/type-aliases/usefield.md b/docs/framework/vue/reference/type-aliases/usefield.md new file mode 100644 index 0000000000..a4d2ea8471 --- /dev/null +++ b/docs/framework/vue/reference/type-aliases/usefield.md @@ -0,0 +1,48 @@ +--- +id: UseField +title: UseField +--- + +# Type Alias: UseField()\ + +```ts +type UseField: (opts) => object; +``` + +## Type Parameters + +• **TParentData** + +• **TFormValidator** *extends* `Validator`\<`TParentData`, `unknown`\> \| `undefined` = `undefined` + +## Type Parameters + +• **TName** *extends* `DeepKeys`\<`TParentData`\> + +• **TFieldValidator** *extends* `Validator`\<`DeepValue`\<`TParentData`, `TName`\>, `unknown`\> \| `undefined` = `undefined` + +• **TData** *extends* `DeepValue`\<`TParentData`, `TName`\> = `DeepValue`\<`TParentData`, `TName`\> + +## Parameters + +• **opts**: `Omit`\<`UseFieldOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\>, `"form"`\> + +## Returns + +`object` + +### api + +```ts +api: FieldApi & VueFieldApi; +``` + +### state + +```ts +state: Readonly["state"]>>; +``` + +## Defined in + +[packages/vue-form/src/useField.tsx:17](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L17) diff --git a/docs/framework/vue/reference/variables/field.md b/docs/framework/vue/reference/variables/field.md new file mode 100644 index 0000000000..139e3c85ae --- /dev/null +++ b/docs/framework/vue/reference/variables/field.md @@ -0,0 +1,22 @@ +--- +id: Field +title: Field +--- + +# Variable: Field() + +```ts +const Field: (props) => CreateComponentPublicInstanceWithMixins & object & object | object, object, object, object, object, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, PublicProps, object, false, object, object, object, object, string, object, any, ComponentProvideOptions, OptionTypesType, object & FieldApiOptions & { mode?: "value" | ... 1 more ... | undefined; } & ({ ...; } | { ...; }), object, object, object, object, object>; +``` + +## Parameters + +• **props**: FieldApiOptions\ & \{ mode?: "value" \| ... 1 more ... \| undefined; \} & (\{ ...; \} \| \{ ...; \}) & `VNodeProps` & `AllowedComponentProps` & `ComponentCustomProps` + +## Returns + +`CreateComponentPublicInstanceWithMixins`\<`FieldApiOptions`\<`TParentData`, `TName`, `TFieldValidator`, `TFormValidator`, `TData`\> & `object` & `object` \| `object`, `object`, `object`, `object`, `object`, `ComponentOptionsMixin`, `ComponentOptionsMixin`, `EmitsOptions`, `PublicProps`, `object`, `false`, `object`, `object`, `object`, `object`, `string`, `object`, `any`, `ComponentProvideOptions`, `OptionTypesType`\<`object`, `object`, `object`, `object`, `object`, `object`\>, `object` & FieldApiOptions\ & \{ mode?: "value" \| ... 1 more ... \| undefined; \} & (\{ ...; \} \| \{ ...; \}), `object`, `object`, `object`, `object`, `object`\> + +## Defined in + +[packages/vue-form/src/useField.tsx:162](https://github.com/TanStack/form/blob/main/packages/vue-form/src/useField.tsx#L162) From 1f6f01ecedd7f578238259b1bea73045740eca02 Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Thu, 26 Dec 2024 10:39:43 -0800 Subject: [PATCH 27/38] fix: all tests now pass in Form Core and React Form --- packages/form-core/package.json | 2 +- packages/react-form/package.json | 2 +- pnpm-lock.yaml | 57 ++++++++++++++++++++++++-------- 3 files changed, 45 insertions(+), 16 deletions(-) diff --git a/packages/form-core/package.json b/packages/form-core/package.json index 3f23c4ed5c..a805b57772 100644 --- a/packages/form-core/package.json +++ b/packages/form-core/package.json @@ -52,6 +52,6 @@ "src" ], "dependencies": { - "@tanstack/store": "https://pkg.pr.new/@tanstack/store@f8c01f6" + "@tanstack/store": "https://pkg.pr.new/@tanstack/store@1aab40c" } } diff --git a/packages/react-form/package.json b/packages/react-form/package.json index c75f980aad..d32ee0173b 100644 --- a/packages/react-form/package.json +++ b/packages/react-form/package.json @@ -84,7 +84,7 @@ "dependencies": { "@remix-run/node": "^2.14.0", "@tanstack/form-core": "workspace:*", - "@tanstack/react-store": "https://pkg.pr.new/@tanstack/react-store@f8c01f6", + "@tanstack/react-store": "https://pkg.pr.new/@tanstack/react-store@1aab40c", "decode-formdata": "^0.8.0" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c1625341c1..4d97c659a6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1113,8 +1113,8 @@ importers: packages/form-core: dependencies: '@tanstack/store': - specifier: https://pkg.pr.new/@tanstack/store@f8c01f6 - version: https://pkg.pr.new/@tanstack/store@f8c01f6 + specifier: https://pkg.pr.new/@tanstack/store@1aab40c + version: https://pkg.pr.new/@tanstack/store@1aab40c packages/lit-form: dependencies: @@ -1135,8 +1135,8 @@ importers: specifier: workspace:* version: link:../form-core '@tanstack/react-store': - specifier: https://pkg.pr.new/@tanstack/react-store@f8c01f6 - version: https://pkg.pr.new/@tanstack/react-store@f8c01f6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: https://pkg.pr.new/@tanstack/react-store@1aab40c + version: https://pkg.pr.new/@tanstack/react-store@1aab40c(react-dom@18.3.1(react@18.3.1))(react@18.3.1) decode-formdata: specifier: ^0.8.0 version: 0.8.0 @@ -4431,6 +4431,13 @@ packages: react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 + '@tanstack/react-store@https://pkg.pr.new/@tanstack/react-store@1aab40c': + resolution: {tarball: https://pkg.pr.new/@tanstack/react-store@1aab40c} + version: 0.6.1 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + '@tanstack/react-store@https://pkg.pr.new/@tanstack/react-store@f8c01f6': resolution: {tarball: https://pkg.pr.new/@tanstack/react-store@f8c01f6} version: 0.6.1 @@ -4477,8 +4484,12 @@ packages: '@tanstack/store@0.5.5': resolution: {integrity: sha512-EOSrgdDAJExbvRZEQ/Xhh9iZchXpMN+ga1Bnk8Nmygzs8TfiE6hbzThF+Pr2G19uHL6+DTDTHhJ8VQiOd7l4tA==} - '@tanstack/store@https://pkg.pr.new/@tanstack/store@f8c01f6': - resolution: {tarball: https://pkg.pr.new/@tanstack/store@f8c01f6} + '@tanstack/store@https://pkg.pr.new/@tanstack/store@1aab40c': + resolution: {tarball: https://pkg.pr.new/@tanstack/store@1aab40c} + version: 0.6.0 + + '@tanstack/store@https://pkg.pr.new/TanStack/store/@tanstack/store@1aab40cd83b10ad8a7a5dec8e264aa552f256cf3': + resolution: {tarball: https://pkg.pr.new/TanStack/store/@tanstack/store@1aab40cd83b10ad8a7a5dec8e264aa552f256cf3} version: 0.6.0 '@tanstack/store@https://pkg.pr.new/TanStack/store/@tanstack/store@f8c01f6c3c4d803344121f5b863c1e5994d14151': @@ -10221,6 +10232,11 @@ packages: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 + use-sync-external-store@1.4.0: + resolution: {integrity: sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} @@ -13898,6 +13914,13 @@ snapshots: react-dom: 18.3.1(react@18.3.1) use-sync-external-store: 1.2.2(react@18.3.1) + '@tanstack/react-store@https://pkg.pr.new/@tanstack/react-store@1aab40c(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@tanstack/store': https://pkg.pr.new/TanStack/store/@tanstack/store@1aab40cd83b10ad8a7a5dec8e264aa552f256cf3 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + use-sync-external-store: 1.4.0(react@18.3.1) + '@tanstack/react-store@https://pkg.pr.new/@tanstack/react-store@f8c01f6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@tanstack/store': https://pkg.pr.new/TanStack/store/@tanstack/store@f8c01f6c3c4d803344121f5b863c1e5994d14151 @@ -13978,8 +14001,8 @@ snapshots: '@tanstack/start-vite-plugin': 1.79.0 '@vinxi/react': 0.2.5 '@vinxi/react-server-dom': 0.0.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vite@5.4.11(@types/node@20.17.5)(less@4.2.0)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)) - '@vinxi/server-components': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3)) - '@vinxi/server-functions': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3)) + '@vinxi/server-components': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3)) + '@vinxi/server-functions': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3)) import-meta-resolve: 4.1.0 isbot: 5.1.17 jsesc: 3.0.2 @@ -14026,7 +14049,9 @@ snapshots: '@tanstack/store@0.5.5': {} - '@tanstack/store@https://pkg.pr.new/@tanstack/store@f8c01f6': {} + '@tanstack/store@https://pkg.pr.new/@tanstack/store@1aab40c': {} + + '@tanstack/store@https://pkg.pr.new/TanStack/store/@tanstack/store@1aab40cd83b10ad8a7a5dec8e264aa552f256cf3': {} '@tanstack/store@https://pkg.pr.new/TanStack/store/@tanstack/store@f8c01f6c3c4d803344121f5b863c1e5994d14151': {} @@ -14537,7 +14562,7 @@ snapshots: transitivePeerDependencies: - uWebSockets.js - '@vinxi/plugin-directives@0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3))': + '@vinxi/plugin-directives@0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3))': dependencies: '@babel/parser': 7.26.2 acorn: 8.14.0 @@ -14559,9 +14584,9 @@ snapshots: '@vinxi/react@0.2.5': {} - '@vinxi/server-components@0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3))': + '@vinxi/server-components@0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3))': dependencies: - '@vinxi/plugin-directives': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3)) + '@vinxi/plugin-directives': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3)) acorn: 8.14.0 acorn-loose: 8.4.0 acorn-typescript: 1.4.13(acorn@8.14.0) @@ -14570,9 +14595,9 @@ snapshots: recast: 0.23.9 vinxi: 0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3) - '@vinxi/server-functions@0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3))': + '@vinxi/server-functions@0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3))': dependencies: - '@vinxi/plugin-directives': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3)) + '@vinxi/plugin-directives': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3)) acorn: 8.14.0 acorn-loose: 8.4.0 acorn-typescript: 1.4.13(acorn@8.14.0) @@ -20881,6 +20906,10 @@ snapshots: dependencies: react: 19.0.0-rc-5dcb0097-20240918 + use-sync-external-store@1.4.0(react@18.3.1): + dependencies: + react: 18.3.1 + util-deprecate@1.0.2: {} util@0.12.5: From 4ce1db732b7a8b08880a7969ff9d75b14e3059cc Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Thu, 26 Dec 2024 14:31:44 -0800 Subject: [PATCH 28/38] chore: bump Store to 0.7 --- .../react/next-server-actions/package.json | 2 +- examples/react/remix/package.json | 2 +- examples/react/tanstack-start/package.json | 2 +- packages/angular-form/package.json | 2 +- packages/form-core/package.json | 2 +- packages/react-form/package.json | 2 +- packages/solid-form/package.json | 2 +- packages/vue-form/package.json | 2 +- pnpm-lock.yaml | 129 +++++++----------- 9 files changed, 57 insertions(+), 88 deletions(-) diff --git a/examples/react/next-server-actions/package.json b/examples/react/next-server-actions/package.json index 5ba1a3880e..04d0f7c8a5 100644 --- a/examples/react/next-server-actions/package.json +++ b/examples/react/next-server-actions/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@tanstack/react-form": "^0.39.0", - "@tanstack/react-store": "https://pkg.pr.new/@tanstack/react-store@f8c01f6", + "@tanstack/react-store": "^0.7.0", "next": "15.0.3", "react": "19.0.0-rc-5dcb0097-20240918", "react-dom": "19.0.0-rc-5dcb0097-20240918" diff --git a/examples/react/remix/package.json b/examples/react/remix/package.json index 111530ae83..36e50db37a 100644 --- a/examples/react/remix/package.json +++ b/examples/react/remix/package.json @@ -12,7 +12,7 @@ "@remix-run/react": "^2.14.0", "@remix-run/serve": "^2.14.0", "@tanstack/react-form": "^0.39.0", - "@tanstack/react-store": "https://pkg.pr.new/@tanstack/react-store@f8c01f6", + "@tanstack/react-store": "^0.7.0", "isbot": "^5.1.17", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/examples/react/tanstack-start/package.json b/examples/react/tanstack-start/package.json index a9a3e6cb0d..27689893dc 100644 --- a/examples/react/tanstack-start/package.json +++ b/examples/react/tanstack-start/package.json @@ -12,7 +12,7 @@ "@tanstack/form-core": "^0.39.0", "@tanstack/react-form": "^0.39.0", "@tanstack/react-router": "^1.81.1", - "@tanstack/react-store": "https://pkg.pr.new/@tanstack/react-store@f8c01f6", + "@tanstack/react-store": "^0.7.0", "@tanstack/start": "^1.81.1", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/packages/angular-form/package.json b/packages/angular-form/package.json index a7f947ba59..fc6c082966 100644 --- a/packages/angular-form/package.json +++ b/packages/angular-form/package.json @@ -42,7 +42,7 @@ "src" ], "dependencies": { - "@tanstack/angular-store": "https://pkg.pr.new/@tanstack/angular-store@f8c01f6", + "@tanstack/angular-store": "^0.7.0", "@tanstack/form-core": "workspace:*", "tslib": "^2.8.1" }, diff --git a/packages/form-core/package.json b/packages/form-core/package.json index a805b57772..04d5497490 100644 --- a/packages/form-core/package.json +++ b/packages/form-core/package.json @@ -52,6 +52,6 @@ "src" ], "dependencies": { - "@tanstack/store": "https://pkg.pr.new/@tanstack/store@1aab40c" + "@tanstack/store": "^0.7.0" } } diff --git a/packages/react-form/package.json b/packages/react-form/package.json index d32ee0173b..e9e264fb23 100644 --- a/packages/react-form/package.json +++ b/packages/react-form/package.json @@ -84,7 +84,7 @@ "dependencies": { "@remix-run/node": "^2.14.0", "@tanstack/form-core": "workspace:*", - "@tanstack/react-store": "https://pkg.pr.new/@tanstack/react-store@1aab40c", + "@tanstack/react-store": "^0.7.0", "decode-formdata": "^0.8.0" }, "devDependencies": { diff --git a/packages/solid-form/package.json b/packages/solid-form/package.json index 08b0f022bd..b6782ee678 100644 --- a/packages/solid-form/package.json +++ b/packages/solid-form/package.json @@ -57,7 +57,7 @@ ], "dependencies": { "@tanstack/form-core": "workspace:*", - "@tanstack/solid-store": "https://pkg.pr.new/@tanstack/solid-store@f8c01f6" + "@tanstack/solid-store": "^0.7.0" }, "devDependencies": { "solid-js": "^1.9.3", diff --git a/packages/vue-form/package.json b/packages/vue-form/package.json index 53acfd5944..d5936b2147 100644 --- a/packages/vue-form/package.json +++ b/packages/vue-form/package.json @@ -54,7 +54,7 @@ ], "dependencies": { "@tanstack/form-core": "workspace:*", - "@tanstack/vue-store": "https://pkg.pr.new/@tanstack/vue-store@f8c01f6" + "@tanstack/vue-store": "^0.7.0" }, "devDependencies": { "@vitejs/plugin-vue": "^5.1.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4d97c659a6..6913d37727 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -499,8 +499,8 @@ importers: specifier: ^0.39.0 version: link:../../../packages/react-form '@tanstack/react-store': - specifier: https://pkg.pr.new/@tanstack/react-store@f8c01f6 - version: https://pkg.pr.new/@tanstack/react-store@f8c01f6(react-dom@19.0.0-rc-5dcb0097-20240918(react@19.0.0-rc-5dcb0097-20240918))(react@19.0.0-rc-5dcb0097-20240918) + specifier: ^0.7.0 + version: 0.7.0(react-dom@19.0.0-rc-5dcb0097-20240918(react@19.0.0-rc-5dcb0097-20240918))(react@19.0.0-rc-5dcb0097-20240918) next: specifier: 15.0.3 version: 15.0.3(react-dom@19.0.0-rc-5dcb0097-20240918(react@19.0.0-rc-5dcb0097-20240918))(react@19.0.0-rc-5dcb0097-20240918)(sass@1.80.7) @@ -567,8 +567,8 @@ importers: specifier: ^0.39.0 version: link:../../../packages/react-form '@tanstack/react-store': - specifier: https://pkg.pr.new/@tanstack/react-store@f8c01f6 - version: https://pkg.pr.new/@tanstack/react-store@f8c01f6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^0.7.0 + version: 0.7.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) isbot: specifier: ^5.1.17 version: 5.1.17 @@ -635,8 +635,8 @@ importers: specifier: ^1.81.1 version: 1.81.1(@tanstack/router-generator@1.79.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@tanstack/react-store': - specifier: https://pkg.pr.new/@tanstack/react-store@f8c01f6 - version: https://pkg.pr.new/@tanstack/react-store@f8c01f6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^0.7.0 + version: 0.7.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@tanstack/start': specifier: ^1.81.1 version: 1.81.1(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(vite@5.4.11(@types/node@20.17.5)(less@4.2.0)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0))(webpack-sources@3.2.3)(webpack@5.96.1(@swc/core@1.7.42(@swc/helpers@0.5.13))(esbuild@0.24.0)) @@ -1067,8 +1067,8 @@ importers: packages/angular-form: dependencies: '@tanstack/angular-store': - specifier: https://pkg.pr.new/@tanstack/angular-store@f8c01f6 - version: https://pkg.pr.new/@tanstack/angular-store@f8c01f6(@angular/common@19.0.1(@angular/core@19.0.1(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.1(rxjs@7.8.1)(zone.js@0.15.0)) + specifier: ^0.7.0 + version: 0.7.0(@angular/common@19.0.1(@angular/core@19.0.1(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.1(rxjs@7.8.1)(zone.js@0.15.0)) '@tanstack/form-core': specifier: workspace:* version: link:../form-core @@ -1113,8 +1113,8 @@ importers: packages/form-core: dependencies: '@tanstack/store': - specifier: https://pkg.pr.new/@tanstack/store@1aab40c - version: https://pkg.pr.new/@tanstack/store@1aab40c + specifier: ^0.7.0 + version: 0.7.0 packages/lit-form: dependencies: @@ -1135,8 +1135,8 @@ importers: specifier: workspace:* version: link:../form-core '@tanstack/react-store': - specifier: https://pkg.pr.new/@tanstack/react-store@1aab40c - version: https://pkg.pr.new/@tanstack/react-store@1aab40c(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^0.7.0 + version: 0.7.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) decode-formdata: specifier: ^0.8.0 version: 0.8.0 @@ -1172,8 +1172,8 @@ importers: specifier: workspace:* version: link:../form-core '@tanstack/solid-store': - specifier: https://pkg.pr.new/@tanstack/solid-store@f8c01f6 - version: https://pkg.pr.new/@tanstack/solid-store@f8c01f6(solid-js@1.9.3) + specifier: ^0.7.0 + version: 0.7.0(solid-js@1.9.3) devDependencies: solid-js: specifier: ^1.9.3 @@ -1204,8 +1204,8 @@ importers: specifier: workspace:* version: link:../form-core '@tanstack/vue-store': - specifier: https://pkg.pr.new/@tanstack/vue-store@f8c01f6 - version: https://pkg.pr.new/@tanstack/vue-store@f8c01f6(vue@3.5.12(typescript@5.7.2)) + specifier: ^0.7.0 + version: 0.7.0(vue@3.5.12(typescript@5.7.2)) devDependencies: '@vitejs/plugin-vue': specifier: ^5.1.5 @@ -4384,9 +4384,8 @@ packages: '@swc/types@0.1.13': resolution: {integrity: sha512-JL7eeCk6zWCbiYQg2xQSdLXQJl8Qoc9rXmG2cEKvHe3CKwMHwHGpfOb8frzNLmbycOo6I51qxnLnn9ESf4I20Q==} - '@tanstack/angular-store@https://pkg.pr.new/@tanstack/angular-store@f8c01f6': - resolution: {tarball: https://pkg.pr.new/@tanstack/angular-store@f8c01f6} - version: 0.6.0 + '@tanstack/angular-store@0.7.0': + resolution: {integrity: sha512-Ybl3fCZpfubPDQPbhhvpLGHFx2FRwQHv5bi5tluOtlkTZw3gVxuF+rMxVHfvm3CTI418W7VwiRfPz8//8Gxvkw==} peerDependencies: '@angular/common': '>=19.0.0' '@angular/core': '>=19.0.0' @@ -4431,16 +4430,8 @@ packages: react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 - '@tanstack/react-store@https://pkg.pr.new/@tanstack/react-store@1aab40c': - resolution: {tarball: https://pkg.pr.new/@tanstack/react-store@1aab40c} - version: 0.6.1 - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - - '@tanstack/react-store@https://pkg.pr.new/@tanstack/react-store@f8c01f6': - resolution: {tarball: https://pkg.pr.new/@tanstack/react-store@f8c01f6} - version: 0.6.1 + '@tanstack/react-store@0.7.0': + resolution: {integrity: sha512-S/Rq17HaGOk+tQHV/yrePMnG1xbsKZIl/VsNWnNXt4XW+tTY8dTlvpJH2ZQ3GRALsusG5K6Q3unAGJ2pd9W/Ng==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 @@ -4464,9 +4455,8 @@ packages: webpack: optional: true - '@tanstack/solid-store@https://pkg.pr.new/@tanstack/solid-store@f8c01f6': - resolution: {tarball: https://pkg.pr.new/@tanstack/solid-store@f8c01f6} - version: 0.6.0 + '@tanstack/solid-store@0.7.0': + resolution: {integrity: sha512-uDQYkUuH3MppitiduZLTEcItkTr8vEJ33jzp2rH2VvlNRMGbuU54GQcqf3dLIlTbZ1/Z2TtIBtBjjl+N/OhwRg==} peerDependencies: solid-js: ^1.6.0 @@ -4484,25 +4474,15 @@ packages: '@tanstack/store@0.5.5': resolution: {integrity: sha512-EOSrgdDAJExbvRZEQ/Xhh9iZchXpMN+ga1Bnk8Nmygzs8TfiE6hbzThF+Pr2G19uHL6+DTDTHhJ8VQiOd7l4tA==} - '@tanstack/store@https://pkg.pr.new/@tanstack/store@1aab40c': - resolution: {tarball: https://pkg.pr.new/@tanstack/store@1aab40c} - version: 0.6.0 - - '@tanstack/store@https://pkg.pr.new/TanStack/store/@tanstack/store@1aab40cd83b10ad8a7a5dec8e264aa552f256cf3': - resolution: {tarball: https://pkg.pr.new/TanStack/store/@tanstack/store@1aab40cd83b10ad8a7a5dec8e264aa552f256cf3} - version: 0.6.0 - - '@tanstack/store@https://pkg.pr.new/TanStack/store/@tanstack/store@f8c01f6c3c4d803344121f5b863c1e5994d14151': - resolution: {tarball: https://pkg.pr.new/TanStack/store/@tanstack/store@f8c01f6c3c4d803344121f5b863c1e5994d14151} - version: 0.6.0 + '@tanstack/store@0.7.0': + resolution: {integrity: sha512-CNIhdoUsmD2NolYuaIs8VfWM467RK6oIBAW4nPEKZhg1smZ+/CwtCdpURgp7nxSqOaV9oKkzdWD80+bC66F/Jg==} '@tanstack/virtual-file-routes@1.64.0': resolution: {integrity: sha512-soW+gE9QTmMaqXM17r7y1p8NiQVIIECjdTaYla8BKL5Flj030m3KuxEQoiG1XgjtA0O7ayznFz2YvPcXIy3qDg==} engines: {node: '>=12'} - '@tanstack/vue-store@https://pkg.pr.new/@tanstack/vue-store@f8c01f6': - resolution: {tarball: https://pkg.pr.new/@tanstack/vue-store@f8c01f6} - version: 0.6.0 + '@tanstack/vue-store@0.7.0': + resolution: {integrity: sha512-oLB/WuD26caR86rxLz39LvS5YdY0KIThJFEHIW/mXujC2+M/z3GxVZFJsZianAzr3tH56sZQ8kkq4NvwwsOBkQ==} peerDependencies: '@vue/composition-api': ^1.2.1 vue: ^2.5.0 || ^3.0.0 @@ -13840,11 +13820,11 @@ snapshots: dependencies: '@swc/counter': 0.1.3 - '@tanstack/angular-store@https://pkg.pr.new/@tanstack/angular-store@f8c01f6(@angular/common@19.0.1(@angular/core@19.0.1(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.1(rxjs@7.8.1)(zone.js@0.15.0))': + '@tanstack/angular-store@0.7.0(@angular/common@19.0.1(@angular/core@19.0.1(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.1(rxjs@7.8.1)(zone.js@0.15.0))': dependencies: '@angular/common': 19.0.1(@angular/core@19.0.1(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1) '@angular/core': 19.0.1(rxjs@7.8.1)(zone.js@0.15.0) - '@tanstack/store': https://pkg.pr.new/TanStack/store/@tanstack/store@f8c01f6c3c4d803344121f5b863c1e5994d14151 + '@tanstack/store': 0.7.0 tslib: 2.8.1 '@tanstack/config@0.14.0(@types/node@20.17.5)(esbuild@0.24.0)(eslint@9.14.0(jiti@2.4.0))(rollup@4.26.0)(typescript@5.6.3)(vite@5.4.11(@types/node@20.17.5)(less@4.2.0)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0))': @@ -13914,26 +13894,19 @@ snapshots: react-dom: 18.3.1(react@18.3.1) use-sync-external-store: 1.2.2(react@18.3.1) - '@tanstack/react-store@https://pkg.pr.new/@tanstack/react-store@1aab40c(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@tanstack/react-store@0.7.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@tanstack/store': https://pkg.pr.new/TanStack/store/@tanstack/store@1aab40cd83b10ad8a7a5dec8e264aa552f256cf3 + '@tanstack/store': 0.7.0 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) use-sync-external-store: 1.4.0(react@18.3.1) - '@tanstack/react-store@https://pkg.pr.new/@tanstack/react-store@f8c01f6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@tanstack/react-store@0.7.0(react-dom@19.0.0-rc-5dcb0097-20240918(react@19.0.0-rc-5dcb0097-20240918))(react@19.0.0-rc-5dcb0097-20240918)': dependencies: - '@tanstack/store': https://pkg.pr.new/TanStack/store/@tanstack/store@f8c01f6c3c4d803344121f5b863c1e5994d14151 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - use-sync-external-store: 1.2.2(react@18.3.1) - - '@tanstack/react-store@https://pkg.pr.new/@tanstack/react-store@f8c01f6(react-dom@19.0.0-rc-5dcb0097-20240918(react@19.0.0-rc-5dcb0097-20240918))(react@19.0.0-rc-5dcb0097-20240918)': - dependencies: - '@tanstack/store': https://pkg.pr.new/TanStack/store/@tanstack/store@f8c01f6c3c4d803344121f5b863c1e5994d14151 + '@tanstack/store': 0.7.0 react: 19.0.0-rc-5dcb0097-20240918 react-dom: 19.0.0-rc-5dcb0097-20240918(react@19.0.0-rc-5dcb0097-20240918) - use-sync-external-store: 1.2.2(react@19.0.0-rc-5dcb0097-20240918) + use-sync-external-store: 1.4.0(react@19.0.0-rc-5dcb0097-20240918) '@tanstack/router-generator@1.79.0': dependencies: @@ -13969,9 +13942,9 @@ snapshots: - supports-color - webpack-sources - '@tanstack/solid-store@https://pkg.pr.new/@tanstack/solid-store@f8c01f6(solid-js@1.9.3)': + '@tanstack/solid-store@0.7.0(solid-js@1.9.3)': dependencies: - '@tanstack/store': https://pkg.pr.new/TanStack/store/@tanstack/store@f8c01f6c3c4d803344121f5b863c1e5994d14151 + '@tanstack/store': 0.7.0 solid-js: 1.9.3 '@tanstack/start-vite-plugin@1.79.0': @@ -14001,8 +13974,8 @@ snapshots: '@tanstack/start-vite-plugin': 1.79.0 '@vinxi/react': 0.2.5 '@vinxi/react-server-dom': 0.0.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vite@5.4.11(@types/node@20.17.5)(less@4.2.0)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)) - '@vinxi/server-components': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3)) - '@vinxi/server-functions': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3)) + '@vinxi/server-components': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3)) + '@vinxi/server-functions': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3)) import-meta-resolve: 4.1.0 isbot: 5.1.17 jsesc: 3.0.2 @@ -14049,17 +14022,13 @@ snapshots: '@tanstack/store@0.5.5': {} - '@tanstack/store@https://pkg.pr.new/@tanstack/store@1aab40c': {} - - '@tanstack/store@https://pkg.pr.new/TanStack/store/@tanstack/store@1aab40cd83b10ad8a7a5dec8e264aa552f256cf3': {} - - '@tanstack/store@https://pkg.pr.new/TanStack/store/@tanstack/store@f8c01f6c3c4d803344121f5b863c1e5994d14151': {} + '@tanstack/store@0.7.0': {} '@tanstack/virtual-file-routes@1.64.0': {} - '@tanstack/vue-store@https://pkg.pr.new/@tanstack/vue-store@f8c01f6(vue@3.5.12(typescript@5.7.2))': + '@tanstack/vue-store@0.7.0(vue@3.5.12(typescript@5.7.2))': dependencies: - '@tanstack/store': https://pkg.pr.new/TanStack/store/@tanstack/store@f8c01f6c3c4d803344121f5b863c1e5994d14151 + '@tanstack/store': 0.7.0 vue: 3.5.12(typescript@5.7.2) vue-demi: 0.14.10(vue@3.5.12(typescript@5.7.2)) @@ -14562,7 +14531,7 @@ snapshots: transitivePeerDependencies: - uWebSockets.js - '@vinxi/plugin-directives@0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3))': + '@vinxi/plugin-directives@0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3))': dependencies: '@babel/parser': 7.26.2 acorn: 8.14.0 @@ -14584,9 +14553,9 @@ snapshots: '@vinxi/react@0.2.5': {} - '@vinxi/server-components@0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3))': + '@vinxi/server-components@0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3))': dependencies: - '@vinxi/plugin-directives': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3)) + '@vinxi/plugin-directives': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3)) acorn: 8.14.0 acorn-loose: 8.4.0 acorn-typescript: 1.4.13(acorn@8.14.0) @@ -14595,9 +14564,9 @@ snapshots: recast: 0.23.9 vinxi: 0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3) - '@vinxi/server-functions@0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3))': + '@vinxi/server-functions@0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3))': dependencies: - '@vinxi/plugin-directives': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(encoding@0.1.13)(ioredis@5.4.1)(less@4.2.0)(magicast@0.3.5)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3)) + '@vinxi/plugin-directives': 0.4.3(vinxi@0.4.3(@types/node@20.17.5)(less@4.2.0)(sass@1.80.7)(sugarss@4.0.1(postcss@8.4.49))(terser@5.36.0)(webpack-sources@3.2.3)) acorn: 8.14.0 acorn-loose: 8.4.0 acorn-typescript: 1.4.13(acorn@8.14.0) @@ -20902,14 +20871,14 @@ snapshots: dependencies: react: 18.3.1 - use-sync-external-store@1.2.2(react@19.0.0-rc-5dcb0097-20240918): - dependencies: - react: 19.0.0-rc-5dcb0097-20240918 - use-sync-external-store@1.4.0(react@18.3.1): dependencies: react: 18.3.1 + use-sync-external-store@1.4.0(react@19.0.0-rc-5dcb0097-20240918): + dependencies: + react: 19.0.0-rc-5dcb0097-20240918 + util-deprecate@1.0.2: {} util@0.12.5: From f9901bf172179ac8b670be8a8ed0724aaefbced1 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Thu, 26 Dec 2024 22:39:53 +0000 Subject: [PATCH 29/38] ci: apply automated fixes and generate docs --- .../react/reference/functions/usestore.md | 50 ++++-- .../solid/reference/functions/usestore.md | 50 ++++-- .../vue/reference/functions/usestore.md | 50 ++++-- docs/reference/classes/fieldapi.md | 74 ++++---- docs/reference/classes/formapi.md | 104 +++++++---- docs/reference/type-aliases/baseformstate.md | 2 +- .../type-aliases/derivedformstate.md | 2 +- docs/reference/type-aliases/fieldmeta.md | 62 +------ docs/reference/type-aliases/fieldmetabase.md | 2 +- .../type-aliases/fieldmetaderived.md | 2 +- docs/reference/type-aliases/fieldstate.md | 2 +- docs/reference/type-aliases/formstate.md | 168 +----------------- 12 files changed, 233 insertions(+), 335 deletions(-) diff --git a/docs/framework/react/reference/functions/usestore.md b/docs/framework/react/reference/functions/usestore.md index 966b0b77ac..45ed3f2143 100644 --- a/docs/framework/react/reference/functions/usestore.md +++ b/docs/framework/react/reference/functions/usestore.md @@ -5,32 +5,62 @@ title: useStore # Function: useStore() +## Call Signature + ```ts -function useStore(store, selector?): TSelected +function useStore(store, selector?): TSelected ``` -## Type Parameters +### Type Parameters • **TState** • **TSelected** = `NoInfer`\<`TState`\> -• **TUpdater** *extends* `AnyUpdater` = `AnyUpdater` +### Parameters + +#### store + +`Store`\<`TState`, `any`\> + +#### selector? + +(`state`) => `TSelected` + +### Returns + +`TSelected` + +### Defined in + +node\_modules/.pnpm/@tanstack+react-store@0.7.0\_react-dom@18.3.1\_react@18.3.1\_\_react@18.3.1/node\_modules/@tanstack/react-store/dist/esm/index.d.ts:7 + +## Call Signature + +```ts +function useStore(store, selector?): TSelected +``` + +### Type Parameters + +• **TState** + +• **TSelected** = `NoInfer`\<`TState`\> -## Parameters +### Parameters -### store +#### store -`Store`\<`TState`, `TUpdater`\> +`Derived`\<`TState`, `any`\> -### selector? +#### selector? (`state`) => `TSelected` -## Returns +### Returns `TSelected` -## Defined in +### Defined in -node\_modules/.pnpm/@tanstack+react-store@0.6.1\_react-dom@18.3.1\_react@18.3.1\_\_react@18.3.1/node\_modules/@tanstack/react-store/dist/esm/index.d.ts:7 +node\_modules/.pnpm/@tanstack+react-store@0.7.0\_react-dom@18.3.1\_react@18.3.1\_\_react@18.3.1/node\_modules/@tanstack/react-store/dist/esm/index.d.ts:8 diff --git a/docs/framework/solid/reference/functions/usestore.md b/docs/framework/solid/reference/functions/usestore.md index ccb30601b6..69e1e4e378 100644 --- a/docs/framework/solid/reference/functions/usestore.md +++ b/docs/framework/solid/reference/functions/usestore.md @@ -5,32 +5,62 @@ title: useStore # Function: useStore() +## Call Signature + ```ts -function useStore(store, selector?): Accessor +function useStore(store, selector?): Accessor ``` -## Type Parameters +### Type Parameters • **TState** • **TSelected** = `NoInfer`\<`TState`\> -• **TUpdater** *extends* `AnyUpdater` = `AnyUpdater` +### Parameters + +#### store + +`Store`\<`TState`, `any`\> + +#### selector? + +(`state`) => `TSelected` + +### Returns + +`Accessor`\<`TSelected`\> + +### Defined in + +node\_modules/.pnpm/@tanstack+solid-store@0.7.0\_solid-js@1.9.3/node\_modules/@tanstack/solid-store/dist/esm/index.d.ts:8 + +## Call Signature + +```ts +function useStore(store, selector?): Accessor +``` + +### Type Parameters + +• **TState** + +• **TSelected** = `NoInfer`\<`TState`\> -## Parameters +### Parameters -### store +#### store -`Store`\<`TState`, `TUpdater`\> +`Derived`\<`TState`, `any`\> -### selector? +#### selector? (`state`) => `TSelected` -## Returns +### Returns `Accessor`\<`TSelected`\> -## Defined in +### Defined in -node\_modules/.pnpm/@tanstack+solid-store@0.6.0\_solid-js@1.9.3/node\_modules/@tanstack/solid-store/dist/esm/index.d.ts:8 +node\_modules/.pnpm/@tanstack+solid-store@0.7.0\_solid-js@1.9.3/node\_modules/@tanstack/solid-store/dist/esm/index.d.ts:9 diff --git a/docs/framework/vue/reference/functions/usestore.md b/docs/framework/vue/reference/functions/usestore.md index 19982f5935..1d5ad022f4 100644 --- a/docs/framework/vue/reference/functions/usestore.md +++ b/docs/framework/vue/reference/functions/usestore.md @@ -5,32 +5,62 @@ title: useStore # Function: useStore() +## Call Signature + ```ts -function useStore(store, selector?): Readonly> +function useStore(store, selector?): Readonly> ``` -## Type Parameters +### Type Parameters • **TState** • **TSelected** = `NoInfer`\<`TState`\> -• **TUpdater** *extends* `AnyUpdater` = `AnyUpdater` +### Parameters + +#### store + +`Store`\<`TState`, `any`\> + +#### selector? + +(`state`) => `TSelected` + +### Returns + +`Readonly`\<`Ref`\<`TSelected`\>\> + +### Defined in + +node\_modules/.pnpm/@tanstack+vue-store@0.7.0\_vue@3.5.12\_typescript@5.7.2\_/node\_modules/@tanstack/vue-store/dist/esm/index.d.ts:8 + +## Call Signature + +```ts +function useStore(store, selector?): Readonly> +``` + +### Type Parameters + +• **TState** + +• **TSelected** = `NoInfer`\<`TState`\> -## Parameters +### Parameters -### store +#### store -`Store`\<`TState`, `TUpdater`\> +`Derived`\<`TState`, `any`\> -### selector? +#### selector? (`state`) => `TSelected` -## Returns +### Returns `Readonly`\<`Ref`\<`TSelected`\>\> -## Defined in +### Defined in -node\_modules/.pnpm/@tanstack+vue-store@0.6.0\_vue@3.5.12\_typescript@5.7.2\_/node\_modules/@tanstack/vue-store/dist/esm/index.d.ts:8 +node\_modules/.pnpm/@tanstack+vue-store@0.7.0\_vue@3.5.12\_typescript@5.7.2\_/node\_modules/@tanstack/vue-store/dist/esm/index.d.ts:9 diff --git a/docs/reference/classes/fieldapi.md b/docs/reference/classes/fieldapi.md index a43f532a9c..ee7290043d 100644 --- a/docs/reference/classes/fieldapi.md +++ b/docs/reference/classes/fieldapi.md @@ -47,7 +47,7 @@ Initializes a new `FieldApi` instance. #### Defined in -[packages/form-core/src/FieldApi.ts:474](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L474) +[packages/form-core/src/FieldApi.ts:477](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L477) ## Properties @@ -61,7 +61,7 @@ A reference to the form API instance. #### Defined in -[packages/form-core/src/FieldApi.ts:436](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L436) +[packages/form-core/src/FieldApi.ts:441](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L441) *** @@ -75,7 +75,7 @@ The field name. #### Defined in -[packages/form-core/src/FieldApi.ts:446](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L446) +[packages/form-core/src/FieldApi.ts:451](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L451) *** @@ -89,44 +89,50 @@ The field options. #### Defined in -[packages/form-core/src/FieldApi.ts:450](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L450) +[packages/form-core/src/FieldApi.ts:455](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L455) *** -### state +### store ```ts -state: FieldState; +store: Derived, readonly any[]>; ``` -The current field state. +The field state store. #### Defined in -[packages/form-core/src/FieldApi.ts:464](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L464) +[packages/form-core/src/FieldApi.ts:465](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L465) *** -### store +### timeoutIds ```ts -store: Store, (cb) => FieldState>; +timeoutIds: Record; ``` -The field state store. - #### Defined in -[packages/form-core/src/FieldApi.ts:460](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L460) +[packages/form-core/src/FieldApi.ts:472](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L472) -*** +## Accessors -### timeoutIds +### state + +#### Get Signature ```ts -timeoutIds: Record; +get state(): FieldState ``` +The current field state. + +##### Returns + +[`FieldState`](../type-aliases/fieldstate.md)\<`TData`\> + #### Defined in [packages/form-core/src/FieldApi.ts:469](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L469) @@ -147,7 +153,7 @@ Gets the field information object. #### Defined in -[packages/form-core/src/FieldApi.ts:713](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L713) +[packages/form-core/src/FieldApi.ts:672](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L672) *** @@ -157,15 +163,13 @@ Gets the field information object. getMeta(): FieldMeta ``` -Gets the current field metadata. - #### Returns [`FieldMeta`](../type-aliases/fieldmeta.md) #### Defined in -[packages/form-core/src/FieldApi.ts:691](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L691) +[packages/form-core/src/FieldApi.ts:661](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L661) *** @@ -187,7 +191,7 @@ Use `field.state.value` instead. #### Defined in -[packages/form-core/src/FieldApi.ts:665](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L665) +[packages/form-core/src/FieldApi.ts:643](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L643) *** @@ -205,7 +209,7 @@ Handles the blur event. #### Defined in -[packages/form-core/src/FieldApi.ts:1065](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1065) +[packages/form-core/src/FieldApi.ts:1024](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1024) *** @@ -229,7 +233,7 @@ Handles the change event. #### Defined in -[packages/form-core/src/FieldApi.ts:1058](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1058) +[packages/form-core/src/FieldApi.ts:1017](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1017) *** @@ -264,7 +268,7 @@ Inserts a value at the specified index, shifting the subsequent values to the ri #### Defined in -[packages/form-core/src/FieldApi.ts:726](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L726) +[packages/form-core/src/FieldApi.ts:685](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L685) *** @@ -286,7 +290,7 @@ Mounts the field instance to the form. #### Defined in -[packages/form-core/src/FieldApi.ts:575](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L575) +[packages/form-core/src/FieldApi.ts:567](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L567) *** @@ -321,7 +325,7 @@ Moves the value at the first specified index to the second specified index. #### Defined in -[packages/form-core/src/FieldApi.ts:756](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L756) +[packages/form-core/src/FieldApi.ts:715](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L715) *** @@ -349,7 +353,7 @@ Pushes a new value to the field. #### Defined in -[packages/form-core/src/FieldApi.ts:718](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L718) +[packages/form-core/src/FieldApi.ts:677](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L677) *** @@ -377,7 +381,7 @@ Removes a value at the specified index. #### Defined in -[packages/form-core/src/FieldApi.ts:744](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L744) +[packages/form-core/src/FieldApi.ts:703](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L703) *** @@ -412,7 +416,7 @@ Replaces a value at the specified index. #### Defined in -[packages/form-core/src/FieldApi.ts:735](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L735) +[packages/form-core/src/FieldApi.ts:694](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L694) *** @@ -436,7 +440,7 @@ Updates the field's errorMap #### Defined in -[packages/form-core/src/FieldApi.ts:1085](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1085) +[packages/form-core/src/FieldApi.ts:1044](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1044) *** @@ -460,7 +464,7 @@ Sets the field metadata. #### Defined in -[packages/form-core/src/FieldApi.ts:707](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L707) +[packages/form-core/src/FieldApi.ts:666](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L666) *** @@ -488,7 +492,7 @@ Sets the field value and run the `change` validator. #### Defined in -[packages/form-core/src/FieldApi.ts:672](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L672) +[packages/form-core/src/FieldApi.ts:650](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L650) *** @@ -523,7 +527,7 @@ Swaps the values at the specified indices. #### Defined in -[packages/form-core/src/FieldApi.ts:750](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L750) +[packages/form-core/src/FieldApi.ts:709](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L709) *** @@ -547,7 +551,7 @@ Updates the field instance with new options. #### Defined in -[packages/form-core/src/FieldApi.ts:628](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L628) +[packages/form-core/src/FieldApi.ts:606](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L606) *** @@ -571,4 +575,4 @@ Validates the field value. #### Defined in -[packages/form-core/src/FieldApi.ts:1030](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L1030) +[packages/form-core/src/FieldApi.ts:989](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L989) diff --git a/docs/reference/classes/formapi.md b/docs/reference/classes/formapi.md index b83a304bcf..379a027653 100644 --- a/docs/reference/classes/formapi.md +++ b/docs/reference/classes/formapi.md @@ -39,10 +39,22 @@ Constructs a new `FormApi` instance with the given form options. #### Defined in -[packages/form-core/src/FormApi.ts:395](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L395) +[packages/form-core/src/FormApi.ts:389](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L389) ## Properties +### baseStore + +```ts +baseStore: Store, (cb) => BaseFormState>; +``` + +#### Defined in + +[packages/form-core/src/FormApi.ts:368](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L368) + +*** + ### fieldInfo ```ts @@ -53,7 +65,19 @@ A record of field information for each field in the form. #### Defined in -[packages/form-core/src/FormApi.ts:384](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L384) +[packages/form-core/src/FormApi.ts:374](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L374) + +*** + +### fieldMetaDerived + +```ts +fieldMetaDerived: Derived ? PrefixTupleAccessor, AllowedIndexes, never>, []> : TFormData extends any[] ? PrefixArrayAccessor, [any]> : TFormData extends Date ? never : TFormData extends object ? PrefixObjectAccessor, []> : TFormData extends string | number | bigint | boolean ? "" : never, FieldMeta>, readonly any[]>; +``` + +#### Defined in + +[packages/form-core/src/FormApi.ts:369](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L369) *** @@ -67,39 +91,37 @@ The options for the form. #### Defined in -[packages/form-core/src/FormApi.ts:368](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L368) +[packages/form-core/src/FormApi.ts:367](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L367) *** -### state +### store ```ts -state: FormState; +store: Derived, readonly any[]>; ``` -The current state of the form. - -**Note:** -Do not use `state` directly, as it is not reactive. -Please use useStore(form.store) utility to subscribe to state - #### Defined in -[packages/form-core/src/FormApi.ts:380](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L380) +[packages/form-core/src/FormApi.ts:370](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L370) -*** +## Accessors -### store +### state + +#### Get Signature ```ts -store: Store, (cb) => FormState>; +get state(): FormState ``` -A [TanStack Store instance](https://tanstack.com/store/latest/docs/reference/Store) that keeps track of the form's state. +##### Returns + +[`FormState`](../type-aliases/formstate.md)\<`TFormData`\> #### Defined in -[packages/form-core/src/FormApi.ts:372](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L372) +[packages/form-core/src/FormApi.ts:377](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L377) ## Methods @@ -125,7 +147,7 @@ deleteField(field): void #### Defined in -[packages/form-core/src/FormApi.ts:1109](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1109) +[packages/form-core/src/FormApi.ts:1180](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1180) *** @@ -153,7 +175,7 @@ Gets the field info of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1021](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1021) +[packages/form-core/src/FormApi.ts:1089](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1089) *** @@ -181,7 +203,7 @@ Gets the metadata of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1012](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1012) +[packages/form-core/src/FormApi.ts:1080](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1080) *** @@ -209,7 +231,7 @@ Gets the value of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1005](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1005) +[packages/form-core/src/FormApi.ts:1073](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1073) *** @@ -227,7 +249,7 @@ Handles the form submission, performs validation, and calls the appropriate onSu #### Defined in -[packages/form-core/src/FormApi.ts:946](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L946) +[packages/form-core/src/FormApi.ts:1014](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1014) *** @@ -271,23 +293,27 @@ Inserts a value into an array field at the specified index, shifting the subsequ #### Defined in -[packages/form-core/src/FormApi.ts:1141](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1141) +[packages/form-core/src/FormApi.ts:1212](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1212) *** ### mount() ```ts -mount(): void +mount(): () => void ``` #### Returns +`Function` + +##### Returns + `void` #### Defined in -[packages/form-core/src/FormApi.ts:532](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L532) +[packages/form-core/src/FormApi.ts:579](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L579) *** @@ -331,7 +357,7 @@ Moves the value at the first specified index to the second specified index withi #### Defined in -[packages/form-core/src/FormApi.ts:1259](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1259) +[packages/form-core/src/FormApi.ts:1330](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1330) *** @@ -370,7 +396,7 @@ Pushes a value into an array field. #### Defined in -[packages/form-core/src/FormApi.ts:1123](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1123) +[packages/form-core/src/FormApi.ts:1194](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1194) *** @@ -409,7 +435,7 @@ Removes a value from an array field at the specified index. #### Defined in -[packages/form-core/src/FormApi.ts:1194](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1194) +[packages/form-core/src/FormApi.ts:1265](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1265) *** @@ -453,7 +479,7 @@ Replaces a value into an array field at the specified index. #### Defined in -[packages/form-core/src/FormApi.ts:1168](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1168) +[packages/form-core/src/FormApi.ts:1239](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1239) *** @@ -488,7 +514,7 @@ Optional options to control the reset behavior. #### Defined in -[packages/form-core/src/FormApi.ts:586](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L586) +[packages/form-core/src/FormApi.ts:654](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L654) *** @@ -514,7 +540,7 @@ resetFieldMeta(fieldMeta): Record #### Defined in -[packages/form-core/src/FormApi.ts:1055](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1055) +[packages/form-core/src/FormApi.ts:1126](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1126) *** @@ -538,7 +564,7 @@ Updates the form's errorMap #### Defined in -[packages/form-core/src/FormApi.ts:1283](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1283) +[packages/form-core/src/FormApi.ts:1354](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1354) *** @@ -570,7 +596,7 @@ Updates the metadata of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1040](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1040) +[packages/form-core/src/FormApi.ts:1108](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1108) *** @@ -609,7 +635,7 @@ Sets the value of the specified field and optionally updates the touched state. #### Defined in -[packages/form-core/src/FormApi.ts:1079](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1079) +[packages/form-core/src/FormApi.ts:1150](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1150) *** @@ -653,7 +679,7 @@ Swaps the values at the specified indices within an array field. #### Defined in -[packages/form-core/src/FormApi.ts:1233](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1233) +[packages/form-core/src/FormApi.ts:1304](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1304) *** @@ -677,7 +703,7 @@ Updates the form options and form state. #### Defined in -[packages/form-core/src/FormApi.ts:542](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L542) +[packages/form-core/src/FormApi.ts:610](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L610) *** @@ -701,7 +727,7 @@ Validates form and all fields in using the correct handlers for a given validati #### Defined in -[packages/form-core/src/FormApi.ts:612](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L612) +[packages/form-core/src/FormApi.ts:680](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L680) *** @@ -740,7 +766,7 @@ Validates the children of a specified array in the form starting from a given in #### Defined in -[packages/form-core/src/FormApi.ts:640](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L640) +[packages/form-core/src/FormApi.ts:708](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L708) *** @@ -772,4 +798,4 @@ Validates a specified field in the form using the correct handlers for a given v #### Defined in -[packages/form-core/src/FormApi.ts:679](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L679) +[packages/form-core/src/FormApi.ts:747](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L747) diff --git a/docs/reference/type-aliases/baseformstate.md b/docs/reference/type-aliases/baseformstate.md index 7c25c8e47b..277b5c0e7a 100644 --- a/docs/reference/type-aliases/baseformstate.md +++ b/docs/reference/type-aliases/baseformstate.md @@ -91,4 +91,4 @@ The current values of the form fields. ## Defined in -[packages/form-core/src/FormApi.ts:219](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L219) +[packages/form-core/src/FormApi.ts:228](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L228) diff --git a/docs/reference/type-aliases/derivedformstate.md b/docs/reference/type-aliases/derivedformstate.md index 694bba78c2..498b297fda 100644 --- a/docs/reference/type-aliases/derivedformstate.md +++ b/docs/reference/type-aliases/derivedformstate.md @@ -113,4 +113,4 @@ A boolean indicating if the form and all its fields are valid. ## Defined in -[packages/form-core/src/FormApi.ts:263](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L263) +[packages/form-core/src/FormApi.ts:272](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L272) diff --git a/docs/reference/type-aliases/fieldmeta.md b/docs/reference/type-aliases/fieldmeta.md index a86ff54dc0..2984539a8c 100644 --- a/docs/reference/type-aliases/fieldmeta.md +++ b/docs/reference/type-aliases/fieldmeta.md @@ -6,69 +6,11 @@ title: FieldMeta # Type Alias: FieldMeta ```ts -type FieldMeta: object; +type FieldMeta: FieldMetaBase & FieldMetaDerived; ``` An object type representing the metadata of a field in a form. -## Type declaration - -### errorMap - -```ts -errorMap: ValidationErrorMap; -``` - -A map of errors related to the field value. - -### errors - -```ts -errors: ValidationError[]; -``` - -An array of errors related to the field value. - -### isBlurred - -```ts -isBlurred: boolean; -``` - -A flag indicating whether the field has been blurred. - -### isDirty - -```ts -isDirty: boolean; -``` - -A flag that is `true` if the field's value has been modified by the user. Opposite of `isPristine`. - -### isPristine - -```ts -isPristine: boolean; -``` - -A flag that is `true` if the field's value has not been modified by the user. Opposite of `isDirty`. - -### isTouched - -```ts -isTouched: boolean; -``` - -A flag indicating whether the field has been touched. - -### isValidating - -```ts -isValidating: boolean; -``` - -A flag indicating whether the field is currently being validated. - ## Defined in -[packages/form-core/src/FieldApi.ts:368](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L368) +[packages/form-core/src/FieldApi.ts:402](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L402) diff --git a/docs/reference/type-aliases/fieldmetabase.md b/docs/reference/type-aliases/fieldmetabase.md index e22855937b..763e9fca88 100644 --- a/docs/reference/type-aliases/fieldmetabase.md +++ b/docs/reference/type-aliases/fieldmetabase.md @@ -53,4 +53,4 @@ A flag indicating whether the field is currently being validated. ## Defined in -[packages/form-core/src/FieldApi.ts:400](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L400) +[packages/form-core/src/FieldApi.ts:365](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L365) diff --git a/docs/reference/type-aliases/fieldmetaderived.md b/docs/reference/type-aliases/fieldmetaderived.md index b6f51298c9..54edb3bdb6 100644 --- a/docs/reference/type-aliases/fieldmetaderived.md +++ b/docs/reference/type-aliases/fieldmetaderived.md @@ -29,4 +29,4 @@ A flag that is `true` if the field's value has not been modified by the user. Op ## Defined in -[packages/form-core/src/FieldApi.ts:423](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L423) +[packages/form-core/src/FieldApi.ts:388](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L388) diff --git a/docs/reference/type-aliases/fieldstate.md b/docs/reference/type-aliases/fieldstate.md index ffdc2fb3ea..3054b5c63c 100644 --- a/docs/reference/type-aliases/fieldstate.md +++ b/docs/reference/type-aliases/fieldstate.md @@ -35,4 +35,4 @@ The current value of the field. ## Defined in -[packages/form-core/src/FieldApi.ts:402](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L402) +[packages/form-core/src/FieldApi.ts:407](https://github.com/TanStack/form/blob/main/packages/form-core/src/FieldApi.ts#L407) diff --git a/docs/reference/type-aliases/formstate.md b/docs/reference/type-aliases/formstate.md index d4c96f95f1..69f519257f 100644 --- a/docs/reference/type-aliases/formstate.md +++ b/docs/reference/type-aliases/formstate.md @@ -6,177 +6,13 @@ title: FormState # Type Alias: FormState\ ```ts -type FormState: object; +type FormState: BaseFormState & DerivedFormState; ``` -An object representing the current state of the form. - ## Type Parameters • **TFormData** -## Type declaration - -### canSubmit - -```ts -canSubmit: boolean; -``` - -A boolean indicating if the form can be submitted based on its current state. - -### errorMap - -```ts -errorMap: FormValidationErrorMap; -``` - -The error map for the form itself. - -### errors - -```ts -errors: ValidationError[]; -``` - -The error array for the form itself. - -### fieldMeta - -```ts -fieldMeta: Record, FieldMeta>; -``` - -A record of field metadata for each field in the form. - -### isBlurred - -```ts -isBlurred: boolean; -``` - -A boolean indicating if any of the form fields have been blurred. - -### isDirty - -```ts -isDirty: boolean; -``` - -A boolean indicating if any of the form's fields' values have been modified by the user. `True` if the user have modified at least one of the fields. Opposite of `isPristine`. - -### isFieldsValid - -```ts -isFieldsValid: boolean; -``` - -A boolean indicating if all the form fields are valid. - -### isFieldsValidating - -```ts -isFieldsValidating: boolean; -``` - -A boolean indicating if any of the form fields are currently validating. - -### isFormValid - -```ts -isFormValid: boolean; -``` - -A boolean indicating if the form is valid. - -### isFormValidating - -```ts -isFormValidating: boolean; -``` - -A boolean indicating if the form is currently validating. - -### isPristine - -```ts -isPristine: boolean; -``` - -A boolean indicating if none of the form's fields' values have been modified by the user. `True` if the user have not modified any of the fields. Opposite of `isDirty`. - -### isSubmitted - -```ts -isSubmitted: boolean; -``` - -A boolean indicating if the form has been submitted. - -### isSubmitting - -```ts -isSubmitting: boolean; -``` - -A boolean indicating if the form is currently in the process of being submitted after `handleSubmit` is called. - -Goes back to `false` when submission completes for one of the following reasons: -- the validation step returned errors. -- the `onSubmit` function has completed. - -Note: if you're running async operations in your `onSubmit` function make sure to await them to ensure `isSubmitting` is set to `false` only when the async operation completes. - -This is useful for displaying loading indicators or disabling form inputs during submission. - -### isTouched - -```ts -isTouched: boolean; -``` - -A boolean indicating if any of the form fields have been touched. - -### isValid - -```ts -isValid: boolean; -``` - -A boolean indicating if the form and all its fields are valid. - -### isValidating - -```ts -isValidating: boolean; -``` - -A boolean indicating if the form or any of its fields are currently validating. - -### submissionAttempts - -```ts -submissionAttempts: number; -``` - -A counter for tracking the number of submission attempts. - -### validationMetaMap - -```ts -validationMetaMap: Record; -``` - -An internal mechanism used for keeping track of validation logic in a form. - -### values - -```ts -values: TFormData; -``` - -The current values of the form fields. - ## Defined in -[packages/form-core/src/FormApi.ts:228](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L228) +[packages/form-core/src/FormApi.ts:323](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L323) From bf1bc79cb156cbe984114fcc853b83c2b6801793 Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Thu, 26 Dec 2024 16:35:43 -0800 Subject: [PATCH 30/38] chore: fix issues with Sherif, fix mount tests --- .../react/next-server-actions/package.json | 2 +- examples/react/remix/package.json | 2 +- packages/form-core/src/FormApi.ts | 34 ++++++++++--------- 3 files changed, 20 insertions(+), 18 deletions(-) diff --git a/examples/react/next-server-actions/package.json b/examples/react/next-server-actions/package.json index f0c74bac3c..3db935243c 100644 --- a/examples/react/next-server-actions/package.json +++ b/examples/react/next-server-actions/package.json @@ -8,8 +8,8 @@ "_test:types": "tsc" }, "dependencies": { - "@tanstack/react-store": "^0.7.0", "@tanstack/react-form": "^0.40.4", + "@tanstack/react-store": "^0.7.0", "next": "15.0.3", "react": "^19.0.0", "react-dom": "^19.0.0" diff --git a/examples/react/remix/package.json b/examples/react/remix/package.json index 35a6a68f08..5f0f03729a 100644 --- a/examples/react/remix/package.json +++ b/examples/react/remix/package.json @@ -10,8 +10,8 @@ "dependencies": { "@remix-run/node": "^2.15.0", "@remix-run/react": "^2.15.0", - "@tanstack/react-form": "^0.40.4", "@remix-run/serve": "^2.15.0", + "@tanstack/react-form": "^0.40.4", "@tanstack/react-store": "^0.7.0", "isbot": "^5.1.17", "react": "^18.2.0", diff --git a/packages/form-core/src/FormApi.ts b/packages/form-core/src/FormApi.ts index c74603ba7a..6c174fff0a 100644 --- a/packages/form-core/src/FormApi.ts +++ b/packages/form-core/src/FormApi.ts @@ -520,7 +520,7 @@ export class FormApi< errorMap = Object.assign(errorMap, { onMount: undefined }) } - return { + let state = { ...currBaseStore, errorMap, fieldMeta: this.fieldMetaDerived.state, @@ -535,6 +535,22 @@ export class FormApi< isPristine, isDirty, } as FormState + + // Only run transform if state has shallowly changed - IE how React.useEffect works + const transformArray = this.options.transform?.deps ?? [] + const shouldTransform = + transformArray.length !== this.prevTransformArray.length || + transformArray.some((val, i) => val !== this.prevTransformArray[i]) + + if (shouldTransform) { + const newObj = Object.assign({}, this, { state }) + // This mutates the state + this.options.transform?.fn(newObj) + state = newObj.state + this.prevTransformArray = transformArray + } + + return state }, }) @@ -585,21 +601,7 @@ export class FormApi< } const { onMount } = this.options.validators || {} if (!onMount) return cleanup - const error = this.runValidator({ - validate: onMount, - value: { - value: this.state.values, - formApi: this, - validationSource: 'form', - }, - type: 'validate', - }) - if (error) { - this.baseStore.setState((prev) => ({ - ...prev, - errorMap: { ...prev.errorMap, onMount: error }, - })) - } + this.validateSync('mount') return cleanup } From 695c7bab55f517878cee5e696bc1e77c45755b9f Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Fri, 27 Dec 2024 00:36:51 +0000 Subject: [PATCH 31/38] ci: apply automated fixes and generate docs --- docs/reference/classes/formapi.md | 42 +++++++++++++++---------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/docs/reference/classes/formapi.md b/docs/reference/classes/formapi.md index 379a027653..d9b8188040 100644 --- a/docs/reference/classes/formapi.md +++ b/docs/reference/classes/formapi.md @@ -147,7 +147,7 @@ deleteField(field): void #### Defined in -[packages/form-core/src/FormApi.ts:1180](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1180) +[packages/form-core/src/FormApi.ts:1182](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1182) *** @@ -175,7 +175,7 @@ Gets the field info of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1089](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1089) +[packages/form-core/src/FormApi.ts:1091](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1091) *** @@ -203,7 +203,7 @@ Gets the metadata of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1080](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1080) +[packages/form-core/src/FormApi.ts:1082](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1082) *** @@ -231,7 +231,7 @@ Gets the value of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1073](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1073) +[packages/form-core/src/FormApi.ts:1075](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1075) *** @@ -249,7 +249,7 @@ Handles the form submission, performs validation, and calls the appropriate onSu #### Defined in -[packages/form-core/src/FormApi.ts:1014](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1014) +[packages/form-core/src/FormApi.ts:1016](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1016) *** @@ -293,7 +293,7 @@ Inserts a value into an array field at the specified index, shifting the subsequ #### Defined in -[packages/form-core/src/FormApi.ts:1212](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1212) +[packages/form-core/src/FormApi.ts:1214](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1214) *** @@ -313,7 +313,7 @@ mount(): () => void #### Defined in -[packages/form-core/src/FormApi.ts:579](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L579) +[packages/form-core/src/FormApi.ts:595](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L595) *** @@ -357,7 +357,7 @@ Moves the value at the first specified index to the second specified index withi #### Defined in -[packages/form-core/src/FormApi.ts:1330](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1330) +[packages/form-core/src/FormApi.ts:1332](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1332) *** @@ -396,7 +396,7 @@ Pushes a value into an array field. #### Defined in -[packages/form-core/src/FormApi.ts:1194](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1194) +[packages/form-core/src/FormApi.ts:1196](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1196) *** @@ -435,7 +435,7 @@ Removes a value from an array field at the specified index. #### Defined in -[packages/form-core/src/FormApi.ts:1265](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1265) +[packages/form-core/src/FormApi.ts:1267](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1267) *** @@ -479,7 +479,7 @@ Replaces a value into an array field at the specified index. #### Defined in -[packages/form-core/src/FormApi.ts:1239](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1239) +[packages/form-core/src/FormApi.ts:1241](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1241) *** @@ -514,7 +514,7 @@ Optional options to control the reset behavior. #### Defined in -[packages/form-core/src/FormApi.ts:654](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L654) +[packages/form-core/src/FormApi.ts:656](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L656) *** @@ -540,7 +540,7 @@ resetFieldMeta(fieldMeta): Record #### Defined in -[packages/form-core/src/FormApi.ts:1126](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1126) +[packages/form-core/src/FormApi.ts:1128](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1128) *** @@ -564,7 +564,7 @@ Updates the form's errorMap #### Defined in -[packages/form-core/src/FormApi.ts:1354](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1354) +[packages/form-core/src/FormApi.ts:1356](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1356) *** @@ -596,7 +596,7 @@ Updates the metadata of the specified field. #### Defined in -[packages/form-core/src/FormApi.ts:1108](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1108) +[packages/form-core/src/FormApi.ts:1110](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1110) *** @@ -635,7 +635,7 @@ Sets the value of the specified field and optionally updates the touched state. #### Defined in -[packages/form-core/src/FormApi.ts:1150](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1150) +[packages/form-core/src/FormApi.ts:1152](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1152) *** @@ -679,7 +679,7 @@ Swaps the values at the specified indices within an array field. #### Defined in -[packages/form-core/src/FormApi.ts:1304](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1304) +[packages/form-core/src/FormApi.ts:1306](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L1306) *** @@ -703,7 +703,7 @@ Updates the form options and form state. #### Defined in -[packages/form-core/src/FormApi.ts:610](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L610) +[packages/form-core/src/FormApi.ts:612](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L612) *** @@ -727,7 +727,7 @@ Validates form and all fields in using the correct handlers for a given validati #### Defined in -[packages/form-core/src/FormApi.ts:680](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L680) +[packages/form-core/src/FormApi.ts:682](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L682) *** @@ -766,7 +766,7 @@ Validates the children of a specified array in the form starting from a given in #### Defined in -[packages/form-core/src/FormApi.ts:708](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L708) +[packages/form-core/src/FormApi.ts:710](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L710) *** @@ -798,4 +798,4 @@ Validates a specified field in the form using the correct handlers for a given v #### Defined in -[packages/form-core/src/FormApi.ts:747](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L747) +[packages/form-core/src/FormApi.ts:749](https://github.com/TanStack/form/blob/main/packages/form-core/src/FormApi.ts#L749) From fe64566dd322125904805dd84e3989640f542785 Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Fri, 27 Dec 2024 22:42:04 -0800 Subject: [PATCH 32/38] test: add previously failing useStore test --- packages/react-form/tests/useForm.test.tsx | 32 ++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/packages/react-form/tests/useForm.test.tsx b/packages/react-form/tests/useForm.test.tsx index 7dfb3c4562..a526bc7cd2 100644 --- a/packages/react-form/tests/useForm.test.tsx +++ b/packages/react-form/tests/useForm.test.tsx @@ -5,6 +5,7 @@ import { userEvent } from '@testing-library/user-event' import { useStore } from '@tanstack/react-store' import { useForm } from '../src/index' import { sleep } from './utils' +import { useEffect } from 'react' const user = userEvent.setup() @@ -732,4 +733,35 @@ describe('useForm', () => { expect(formError.textContent).toBe('Something went wrong'), ) }) + + it('should not cause infinite re-renders when listening to state.errors', () => { + const fn = vi.fn() + + function Comp() { + const form = useForm({ + defaultValues: { + firstName: '', + lastName: '', + }, + onSubmit: async ({ value }) => { + // Do something with form data + console.log(value) + }, + }) + + const { errors } = useStore(form.store, (state) => ({ + errors: state.errors, + })); + + useEffect(() => { + fn(errors) + }, [errors]) + + return null + } + + render() + + expect(fn).toHaveBeenCalledTimes(1) + }) }) From b4cbe58c10e81c215e26ccfcaf78100bf243fab0 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sat, 28 Dec 2024 06:43:17 +0000 Subject: [PATCH 33/38] ci: apply automated fixes and generate docs --- packages/react-form/tests/useForm.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-form/tests/useForm.test.tsx b/packages/react-form/tests/useForm.test.tsx index a526bc7cd2..9cfa76e12a 100644 --- a/packages/react-form/tests/useForm.test.tsx +++ b/packages/react-form/tests/useForm.test.tsx @@ -751,7 +751,7 @@ describe('useForm', () => { const { errors } = useStore(form.store, (state) => ({ errors: state.errors, - })); + })) useEffect(() => { fn(errors) From fd9ae4cdc4f8e98e53fd37dcf8c8d5c1d2153839 Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Sun, 29 Dec 2024 07:59:20 -0800 Subject: [PATCH 34/38] chore: fix timing with Solid Form --- packages/solid-form/src/createField.tsx | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/solid-form/src/createField.tsx b/packages/solid-form/src/createField.tsx index 25412e13a2..338d20c260 100644 --- a/packages/solid-form/src/createField.tsx +++ b/packages/solid-form/src/createField.tsx @@ -112,16 +112,27 @@ export function createField< extendedApi.Field = Field as never + let mounted = false + // Instantiates field meta and removes it when unrendered + onMount(() => { + const cleanupFn = api.mount() + mounted = true + onCleanup(() => { + cleanupFn() + mounted = false + }) + }) + /** * fieldApi.update should not have any side effects. Think of it like a `useRef` * that we need to keep updated every render with the most up-to-date information. * * createComputed to make sure this effect runs before render effects */ - createComputed(() => api.update(opts())) - - // Instantiates field meta and removes it when unrendered - onMount(() => onCleanup(api.mount())) + createComputed(() => { + if (!mounted) return + api.update(opts()) + }) return makeFieldReactive(extendedApi as never) } From 94d922fbdc75c0944930af408406f997df55e197 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sun, 29 Dec 2024 16:00:23 +0000 Subject: [PATCH 35/38] ci: apply automated fixes and generate docs --- docs/framework/solid/reference/functions/field.md | 2 +- docs/framework/solid/reference/type-aliases/fieldcomponent.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/framework/solid/reference/functions/field.md b/docs/framework/solid/reference/functions/field.md index 51ec0c8a9a..6613b3e901 100644 --- a/docs/framework/solid/reference/functions/field.md +++ b/docs/framework/solid/reference/functions/field.md @@ -33,4 +33,4 @@ function Field(props ## Defined in -[packages/solid-form/src/createField.tsx:185](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L185) +[packages/solid-form/src/createField.tsx:196](https://github.com/TanStack/form/blob/main/packages/solid-form/src/createField.tsx#L196) diff --git a/docs/framework/solid/reference/type-aliases/fieldcomponent.md b/docs/framework/solid/reference/type-aliases/fieldcomponent.md index ad43276caa..d953d3f8e4 100644 --- a/docs/framework/solid/reference/type-aliases/fieldcomponent.md +++ b/docs/framework/solid/reference/type-aliases/fieldcomponent.md @@ -41,4 +41,4 @@ type FieldComponent: Date: Sun, 29 Dec 2024 08:05:59 -0800 Subject: [PATCH 36/38] chore: key rename and fix comment --- packages/form-core/src/FormApi.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/form-core/src/FormApi.ts b/packages/form-core/src/FormApi.ts index 6c174fff0a..4bef016aec 100644 --- a/packages/form-core/src/FormApi.ts +++ b/packages/form-core/src/FormApi.ts @@ -315,7 +315,7 @@ export type DerivedFormState = { */ canSubmit: boolean /** - * A record of field metadata for each field in the form, not including the derived properties, like `errors` and such + * A record of field metadata for each field in the form. */ fieldMeta: Record, FieldMeta> } @@ -405,19 +405,19 @@ export class FormApi< const currBaseStore = currDepVals[0] const fieldMeta = {} as FormState['fieldMeta'] - for (const key of Object.keys(currBaseStore.fieldMetaBase) as Array< + for (const fieldName of Object.keys(currBaseStore.fieldMetaBase) as Array< keyof typeof currBaseStore.fieldMetaBase >) { const currBaseVal = currBaseStore.fieldMetaBase[ - key as never + fieldName as never ] as FieldMetaBase - const prevBaseVal = prevBaseStore?.fieldMetaBase[key as never] as + const prevBaseVal = prevBaseStore?.fieldMetaBase[fieldName as never] as | FieldMetaBase | undefined let fieldErrors = - prevVal?.[key as never as keyof typeof prevVal]?.errors + prevVal?.[fieldName as never as keyof typeof prevVal]?.errors if (!prevBaseVal || currBaseVal.errorMap !== prevBaseVal.errorMap) { // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition fieldErrors = Object.values(currBaseVal.errorMap ?? {}).filter( @@ -428,7 +428,7 @@ export class FormApi< // As a primitive, we don't need to aggressively persist the same referencial value for performance reasons const isFieldPristine = !currBaseVal.isDirty - fieldMeta[key] = { + fieldMeta[fieldName] = { ...currBaseVal, errors: fieldErrors, isPristine: isFieldPristine, From bc3aaca101be021c168dc6bb6d801b18478047ac Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sun, 29 Dec 2024 16:07:00 +0000 Subject: [PATCH 37/38] ci: apply automated fixes and generate docs --- docs/reference/type-aliases/derivedformstate.md | 2 +- packages/form-core/src/FormApi.ts | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/reference/type-aliases/derivedformstate.md b/docs/reference/type-aliases/derivedformstate.md index 498b297fda..59a7579b79 100644 --- a/docs/reference/type-aliases/derivedformstate.md +++ b/docs/reference/type-aliases/derivedformstate.md @@ -37,7 +37,7 @@ The error array for the form itself. fieldMeta: Record, FieldMeta>; ``` -A record of field metadata for each field in the form, not including the derived properties, like `errors` and such +A record of field metadata for each field in the form. ### isBlurred diff --git a/packages/form-core/src/FormApi.ts b/packages/form-core/src/FormApi.ts index 4bef016aec..93fec3a058 100644 --- a/packages/form-core/src/FormApi.ts +++ b/packages/form-core/src/FormApi.ts @@ -405,16 +405,16 @@ export class FormApi< const currBaseStore = currDepVals[0] const fieldMeta = {} as FormState['fieldMeta'] - for (const fieldName of Object.keys(currBaseStore.fieldMetaBase) as Array< - keyof typeof currBaseStore.fieldMetaBase - >) { + for (const fieldName of Object.keys( + currBaseStore.fieldMetaBase, + ) as Array) { const currBaseVal = currBaseStore.fieldMetaBase[ fieldName as never ] as FieldMetaBase - const prevBaseVal = prevBaseStore?.fieldMetaBase[fieldName as never] as - | FieldMetaBase - | undefined + const prevBaseVal = prevBaseStore?.fieldMetaBase[ + fieldName as never + ] as FieldMetaBase | undefined let fieldErrors = prevVal?.[fieldName as never as keyof typeof prevVal]?.errors From 1c360a64f84420b815464de943c73af7017fbecf Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Sun, 29 Dec 2024 08:07:28 -0800 Subject: [PATCH 38/38] chore: fix eslint --- packages/react-form/tests/useForm.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-form/tests/useForm.test.tsx b/packages/react-form/tests/useForm.test.tsx index 9cfa76e12a..f500f5c85f 100644 --- a/packages/react-form/tests/useForm.test.tsx +++ b/packages/react-form/tests/useForm.test.tsx @@ -3,9 +3,9 @@ import { describe, expect, it, vi } from 'vitest' import { render, waitFor } from '@testing-library/react' import { userEvent } from '@testing-library/user-event' import { useStore } from '@tanstack/react-store' +import { useEffect } from 'react' import { useForm } from '../src/index' import { sleep } from './utils' -import { useEffect } from 'react' const user = userEvent.setup()