Merge branch 'main' into fix/array-field-options

# Conflicts: # packages/form-core/src/FieldApi.ts # packages/form-core/src/FormApi.ts
TanStack · Jun 3, 2024 · c505773 · c505773
2 parents acca2f6 + ecae7bb
commit c505773
Show file tree

Hide file tree

Showing 43 changed files with 777 additions and 98 deletions.
diff --git a/docs/comparison.md b/docs/comparison.md
@@ -15,15 +15,15 @@ Feature/Capability Key:
 | Feature                                           | TanStack Form                                | Formik                         | Redux Form                             | React Hook Form                                  | Final Form                             |
 | ------------------------------------------------- |----------------------------------------------| ------------------------------ | -------------------------------------- | ------------------------------------------------ | -------------------------------------- |
 | Github Repo / Stars                               | [![][stars-tanstack-form]][gh-tanstack-form] | [![][stars-formik]][gh-formik] | [![][stars-redux-form]][gh-redux-form] | [![][stars-react-hook-form]][gh-react-hook-form] | [![][stars-final-form]][gh-final-form] |
-| Supported Frameworks                              | React, Vue, Angular, Solid, Lit              | React                          | React                                  | React                                            | React                                  |
+| Supported Frameworks                              | React, Vue, Angular, Solid, Lit              | React                          | React                                  | React                                            | React, Vue, Angular, Solid, Vanilla JS                                  |
 | Bundle Size                                       | [![][bp-tanstack-form]][bpl-tanstack-form]   | [![][bp-formik]][bpl-formik]   | [![][bp-redux-form]][bpl-redux-form]   | [![][bp-react-hook-form]][bpl-react-hook-form]   | [![][bp-final-form]][bpl-final-form]                                       |
-| First-class TypeScript support                    | ✅                                            | ❓                             | ❓                                     | ✅                                               | ❓                                     |
-| Fully Inferred TypeScript (Including Deep Fields) | ✅                                            | ❓                             | ❓                                     | ✅                                               | ❓                                     |
+| First-class TypeScript support                    | ✅                                            | ❓                             | ❓                                     | ✅                                               | ✅                                     |
+| Fully Inferred TypeScript (Including Deep Fields) | ✅                                            | ❓                             | ❓                                     | ✅                                               | 🛑                                     |
 | Headless UI components                            | ✅                                            | ❓                             | ❓                                     | ✅                                               | ❓                                     |
-| Framework agnostic                                | ✅                                            | ❓                             | ❓                                     | 🛑                                               | ❓                                     |
-| Granular reactivity                               | ✅                                            | ❓                             | ❓                                     | ❓                                               | ❓                                     |
-| Nested object/array fields                        | ✅                                            | ✅                             | ❓                                     | ✅*(1)                                           | ❓                                     |
-| Async validation                                  | ✅                                            | ✅                             | ❓                                     | ✅                                               | ❓                                     |
+| Framework agnostic                                | ✅                                            | ❓                             | ❓                                     | 🛑                                               | ✅                                     |
+| Granular reactivity                               | ✅                                            | ❓                             | ❓                                     | ❓                                               | ✅                                     |
+| Nested object/array fields                        | ✅                                            | ✅                             | ❓                                     | ✅*(1)                                           | ✅                                     |
+| Async validation                                  | ✅                                            | ✅                             | ❓                                     | ✅                                               | ✅                                     |
 | Built-in async validation debounce                | ✅                                            | ❓                             | ❓                                     | ❓                                               | ❓                                     |
 | Schema-based Validation                           | ✅                                            | ✅                             | ❓                                     | ✅                                               | ❓                                     |
 

diff --git a/docs/framework/react/guides/ssr.md b/docs/framework/react/guides/ssr.md
@@ -3,9 +3,9 @@ id: ssr
 title: Next.js Usage
 ---
 
-Before reading this guide, it's suggested you understand how React Server Components and React Server Actions work. [Check out this blog series for more information](https://unicorn-utterances.com/collections/react-beyond-the-render)
-
+> ⚠ This feature is highly experimental and is subject to change. Currently, this example [leaks backend code the frontend through `onServerValidate`](https://github.com/TanStack/form/issues/710). We are working on changes to the API, and will update this guide and provide migration steps when a solution is available. ⚠
 
+Before reading this guide, it's suggested you understand how React Server Components and React Server Actions work. [Check out this blog series for more information](https://unicorn-utterances.com/collections/react-beyond-the-render)
 
 # Using TanStack Form in a Next.js App Router
 

diff --git a/docs/reference/fieldApi.md b/docs/reference/fieldApi.md
@@ -265,7 +265,12 @@ A class representing the API for managing a form field.
   insertValue(index: number, value: TData, opts?: { touch?: boolean }): void
   ```
 
-  - Inserts a value at the specified index.
+  - Inserts a value at the specified index, shifting the subsequent values to the right.
+
+- ```tsx
+  replaceValue(index: number, value: TData): void
+  ```
+  - Replaces a value at the specified index.
 
 - ```tsx
   removeValue(index: number, opts?: { touch?: boolean }): Promise<void>

diff --git a/docs/reference/formApi.md b/docs/reference/formApi.md
@@ -137,6 +137,14 @@ A class representing the Form API. It handles the logic and interactions with th
   validateAllFields(cause: ValidationCause): Promise<ValidationError[]>
   ```
   - Validates all fields in the form using the correct handlers for a given validation type.
+- ```tsx
+  validateArrayFieldsStartingFrom<TField extends DeepKeys<TFormData>>(field: TField, index: number, cause: ValidationCause): ValidationError[] | Promise<ValidationError[]>
+  ```
+  - 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.
+- ```tsx
+  validateField<TField extends DeepKeys<TFormData>>(field: TField, cause: ValidationCause): ValidationError[] | Promise<ValidationError[]>
+  ```
+  - Validates a specified field in the form using the correct handlers for a given validation type.
 
 - ```tsx
     handleSubmit()
@@ -169,7 +177,11 @@ A class representing the Form API. It handles the logic and interactions with th
 - ```tsx
     insertFieldValue<TField extends DeepKeys<TFormData>>(field: TField, index: number, value: DeepValue<TFormData, TField>, opts?: { touch?: boolean })
   ```
-  - Inserts a value into an array field at the specified index.
+  - Inserts a value into an array field at the specified index, shifting the subsequent values to the right.
+- ```tsx
+    replaceFieldValue<TField extends DeepKeys<TFormData>>(field: TField, index: number, value: DeepValue<TFormData, TField>, opts?: { touch?: boolean })
+  ```
+  - Replaces a value into an array field at the specified index.
 - ```tsx
     removeFieldValue<TField extends DeepKeys<TFormData>>(field: TField, index: number, opts?: { touch?: boolean })
   ```

diff --git a/examples/angular/array/package.json b/examples/angular/array/package.json
@@ -10,7 +10,7 @@
   },
   "private": true,
   "dependencies": {
-    "@tanstack/angular-form": "^0.20.2",
+    "@tanstack/angular-form": "^0.20.3",
     "@angular/animations": "^17.3.0",
     "@angular/common": "^17.3.0",
     "@angular/compiler": "^17.3.0",

diff --git a/examples/angular/simple/package.json b/examples/angular/simple/package.json
@@ -10,7 +10,7 @@
   },
   "private": true,
   "dependencies": {
-    "@tanstack/angular-form": "^0.20.2",
+    "@tanstack/angular-form": "^0.20.3",
     "@angular/animations": "^17.3.0",
     "@angular/common": "^17.3.0",
     "@angular/compiler": "^17.3.0",

diff --git a/examples/angular/valibot/package.json b/examples/angular/valibot/package.json
@@ -10,8 +10,8 @@
   },
   "private": true,
   "dependencies": {
-    "@tanstack/angular-form": "^0.20.2",
-    "@tanstack/valibot-form-adapter": "^0.20.2",
+    "@tanstack/angular-form": "^0.20.3",
+    "@tanstack/valibot-form-adapter": "^0.20.3",
     "@angular/animations": "^17.3.0",
     "@angular/common": "^17.3.0",
     "@angular/compiler": "^17.3.0",

diff --git a/examples/angular/yup/package.json b/examples/angular/yup/package.json
@@ -10,8 +10,8 @@
   },
   "private": true,
   "dependencies": {
-    "@tanstack/angular-form": "^0.20.2",
-    "@tanstack/yup-form-adapter": "^0.20.2",
+    "@tanstack/angular-form": "^0.20.3",
+    "@tanstack/yup-form-adapter": "^0.20.3",
     "@angular/animations": "^17.3.0",
     "@angular/common": "^17.3.0",
     "@angular/compiler": "^17.3.0",

diff --git a/examples/angular/zod/package.json b/examples/angular/zod/package.json
@@ -10,8 +10,8 @@
   },
   "private": true,
   "dependencies": {
-    "@tanstack/angular-form": "^0.20.2",
-    "@tanstack/zod-form-adapter": "^0.20.2",
+    "@tanstack/angular-form": "^0.20.3",
+    "@tanstack/zod-form-adapter": "^0.20.3",
     "@angular/animations": "^17.3.0",
     "@angular/common": "^17.3.0",
     "@angular/compiler": "^17.3.0",

diff --git a/examples/lit/simple/package.json b/examples/lit/simple/package.json
@@ -9,7 +9,7 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/lit-form": "^0.20.2",
+    "@tanstack/lit-form": "^0.20.3",
     "lit": "^3.1.1"
   },
   "devDependencies": {

diff --git a/examples/lit/ui-libraries/package.json b/examples/lit/ui-libraries/package.json
@@ -9,7 +9,7 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/lit-form": "^0.20.2",
+    "@tanstack/lit-form": "^0.20.3",
     "lit": "^3.1.1",
     "@material/web": "^1.0.0"
   },

diff --git a/examples/react/array/package.json b/examples/react/array/package.json
@@ -9,7 +9,7 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-form": "^0.20.2",
+    "@tanstack/react-form": "^0.20.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/examples/react/next-server-actions/package.json b/examples/react/next-server-actions/package.json
@@ -12,7 +12,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "next": "14.0.4",
-    "@tanstack/react-form": "^0.20.2"
+    "@tanstack/react-form": "^0.20.3"
   },
   "devDependencies": {
     "typescript": "5.4.2",

diff --git a/examples/react/query-integration/package.json b/examples/react/query-integration/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.32.0",
-    "@tanstack/react-form": "^0.20.2",
+    "@tanstack/react-form": "^0.20.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/examples/react/simple/package.json b/examples/react/simple/package.json
@@ -9,7 +9,7 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-form": "^0.20.2",
+    "@tanstack/react-form": "^0.20.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/examples/react/ui-libraries/package.json b/examples/react/ui-libraries/package.json
@@ -14,7 +14,7 @@
     "@mantine/core": "7.3.2",
     "@mantine/hooks": "7.3.2",
     "@mui/material": "5.15.2",
-    "@tanstack/react-form": "^0.20.2",
+    "@tanstack/react-form": "^0.20.3",
     "@yme/lay-postcss": "0.1.0",
     "postcss": "8.4.32",
     "postcss-preset-mantine": "1.12.2",

diff --git a/examples/react/valibot/package.json b/examples/react/valibot/package.json
@@ -9,8 +9,8 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-form": "^0.20.2",
-    "@tanstack/valibot-form-adapter": "^0.20.2",
+    "@tanstack/react-form": "^0.20.3",
+    "@tanstack/valibot-form-adapter": "^0.20.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "valibot": "^0.20.1"

diff --git a/examples/react/yup/package.json b/examples/react/yup/package.json
@@ -9,8 +9,8 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-form": "^0.20.2",
-    "@tanstack/yup-form-adapter": "^0.20.2",
+    "@tanstack/react-form": "^0.20.3",
+    "@tanstack/yup-form-adapter": "^0.20.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "yup": "^1.3.2"

diff --git a/examples/react/zod/package.json b/examples/react/zod/package.json
@@ -9,8 +9,8 @@
     "test:types": "tsc"
   },
   "dependencies": {
-    "@tanstack/react-form": "^0.20.2",
-    "@tanstack/zod-form-adapter": "^0.20.2",
+    "@tanstack/react-form": "^0.20.3",
+    "@tanstack/zod-form-adapter": "^0.20.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "zod": "^3.22.4"

diff --git a/examples/solid/array/package.json b/examples/solid/array/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tanstack/solid-form": "^0.20.2",
+    "@tanstack/solid-form": "^0.20.3",
     "solid-js": "^1.7.8"
   },
   "devDependencies": {

diff --git a/examples/solid/simple/package.json b/examples/solid/simple/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tanstack/solid-form": "^0.20.2",
+    "@tanstack/solid-form": "^0.20.3",
     "solid-js": "^1.7.8"
   },
   "devDependencies": {

diff --git a/examples/solid/valibot/package.json b/examples/solid/valibot/package.json
@@ -9,8 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tanstack/solid-form": "^0.20.2",
-    "@tanstack/valibot-form-adapter": "^0.20.2",
+    "@tanstack/solid-form": "^0.20.3",
+    "@tanstack/valibot-form-adapter": "^0.20.3",
     "solid-js": "^1.7.8",
     "valibot": "^0.20.1"
   },

diff --git a/examples/solid/yup/package.json b/examples/solid/yup/package.json
@@ -9,8 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tanstack/solid-form": "^0.20.2",
-    "@tanstack/yup-form-adapter": "^0.20.2",
+    "@tanstack/solid-form": "^0.20.3",
+    "@tanstack/yup-form-adapter": "^0.20.3",
     "solid-js": "^1.7.8",
     "yup": "^1.3.2"
   },

diff --git a/examples/solid/zod/package.json b/examples/solid/zod/package.json
@@ -9,8 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tanstack/solid-form": "^0.20.2",
-    "@tanstack/zod-form-adapter": "^0.20.2",
+    "@tanstack/solid-form": "^0.20.3",
+    "@tanstack/zod-form-adapter": "^0.20.3",
     "solid-js": "^1.7.8",
     "zod": "^3.22.4"
   },

diff --git a/examples/vue/array/package.json b/examples/vue/array/package.json
@@ -9,7 +9,7 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@tanstack/vue-form": "^0.20.2",
+    "@tanstack/vue-form": "^0.20.3",
     "vue": "^3.3.4"
   },
   "devDependencies": {

diff --git a/examples/vue/simple/package.json b/examples/vue/simple/package.json
@@ -9,7 +9,7 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@tanstack/vue-form": "^0.20.2",
+    "@tanstack/vue-form": "^0.20.3",
     "vue": "^3.3.4"
   },
   "devDependencies": {

diff --git a/examples/vue/valibot/package.json b/examples/vue/valibot/package.json
@@ -9,8 +9,8 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@tanstack/vue-form": "^0.20.2",
-    "@tanstack/valibot-form-adapter": "^0.20.2",
+    "@tanstack/vue-form": "^0.20.3",
+    "@tanstack/valibot-form-adapter": "^0.20.3",
     "vue": "^3.3.4",
     "valibot": "^0.20.1"
   },

diff --git a/examples/vue/yup/package.json b/examples/vue/yup/package.json
@@ -9,8 +9,8 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@tanstack/vue-form": "^0.20.2",
-    "@tanstack/yup-form-adapter": "^0.20.2",
+    "@tanstack/vue-form": "^0.20.3",
+    "@tanstack/yup-form-adapter": "^0.20.3",
     "vue": "^3.3.4",
     "yup": "^1.3.2"
   },

diff --git a/examples/vue/zod/package.json b/examples/vue/zod/package.json
@@ -9,8 +9,8 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@tanstack/vue-form": "^0.20.2",
-    "@tanstack/zod-form-adapter": "^0.20.2",
+    "@tanstack/vue-form": "^0.20.3",
+    "@tanstack/zod-form-adapter": "^0.20.3",
     "vue": "^3.3.4",
     "zod": "^3.22.4"
   },

diff --git a/packages/angular-form/package.json b/packages/angular-form/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/angular-form",
-  "version": "0.20.2",
+  "version": "0.20.3",
   "description": "Powerful, type-safe forms for Angular.",
   "author": "tannerlinsley",
   "license": "MIT",

diff --git a/packages/form-core/package.json b/packages/form-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/form-core",
-  "version": "0.20.2",
+  "version": "0.20.3",
   "description": "Powerful, type-safe, framework agnostic forms.",
   "author": "tannerlinsley",
   "license": "MIT",

diff --git a/packages/form-core/src/FieldApi.ts b/packages/form-core/src/FieldApi.ts
@@ -480,6 +480,12 @@ export class FieldApi<
     opts?: { touch?: boolean },
   ) => this.form.insertFieldValue(this.name, index, value as any, opts)
 
+  replaceValue = (
+    index: number,
+    value: TData extends any[] ? TData[number] : never,
+    opts?: { touch?: boolean },
+  ) => this.form.replaceFieldValue(this.name, index, value as any, opts)
+
   removeValue = (index: number, opts?: { touch: boolean }) =>
     this.form.removeFieldValue(this.name, index, opts)