Merge branch 'main' into fix/array-insert-value

# Conflicts: # packages/form-core/src/FieldApi.ts # packages/form-core/src/tests/FormApi.spec.ts
TanStack · Jun 3, 2024 · 9a4107b · 9a4107b
2 parents af4d5e8 + 8076d16
commit 9a4107b
Show file tree

Hide file tree

Showing 52 changed files with 10,633 additions and 7,690 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -27,9 +27,7 @@ jobs:
         with:
           fetch-depth: '0'
       - name: Setup pnpm
-        uses: pnpm/action-setup@v2
-        with:
-          version: 8
+        uses: pnpm/action-setup@v4
       - name: Setup Node
         uses: actions/setup-node@v4
         with:

diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -24,9 +24,7 @@ jobs:
         with:
           fetch-depth: 0
       - name: Setup pnpm
-        uses: pnpm/action-setup@v2
-        with:
-          version: 8
+        uses: pnpm/action-setup@v4
       - name: Setup Node
         uses: actions/setup-node@v4
         with:

diff --git a/.npmrc b/.npmrc
@@ -1 +1,2 @@
+link-workspace-packages=true
 prefer-workspace-packages=true
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/arrays.md b/docs/framework/react/guides/arrays.md
@@ -79,7 +79,7 @@ function App() {
           form.handleSubmit()
         }}
       >
-        <form.Field name="people">
+        <form.Field name="people" mode="array">
           {(field) => {
             return (
               <div>

diff --git a/docs/framework/react/guides/basic-concepts.md b/docs/framework/react/guides/basic-concepts.md
@@ -175,11 +175,13 @@ import { z } from 'zod'
 
 ## Reactivity
 
-`@tanstack/react-form` offers various ways to subscribe to form and field state changes, such as the `form.useStore` hook, the `form.Subscribe` component, and the `form.useField` hook. These methods allow you to optimize your form's rendering performance by only updating components when necessary.
+`@tanstack/react-form` offers various ways to subscribe to form and field state changes, most notably the `form.useStore` hook and the `form.Subscribe` component. These methods allow you to optimize your form's rendering performance by only updating components when necessary.
 
 Example:
 
 ```tsx
+const firstName = form.useStore((state) => state.values.firstName)
+//...
 <form.Subscribe
   selector={(state) => [state.canSubmit, state.isSubmitting]}
   children={([canSubmit, isSubmitting]) => (
@@ -190,6 +192,8 @@ Example:
 />
 ```
 
+Note: The usage of the `form.useField` hook to achieve reactivity is discouraged since it is designed to be used thoughtfully within the `form.Field` component. You might want to use `form.useStore` instead.
+
 ## Array Fields
 
 Array fields allow you to manage a list of values within a form, such as a list of hobbies. You can create an array field using the `form.Field` component with the `mode="array"` prop.

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
 
@@ -25,7 +25,7 @@ _Remix Support Coming soon_
 
 
 
-# App Router intergration
+# App Router integration
 
 - To use TanStack Form, the component containing the form should be a client component. This requires adding the `"use client"` directive. Wrap this client component within a server component like so:
 

diff --git a/docs/reference/fieldApi.md b/docs/reference/fieldApi.md
@@ -273,7 +273,7 @@ A class representing the API for managing a form field.
   - Replaces a value at the specified index.
 
 - ```tsx
-  removeValue(index: number): void
+  removeValue(index: number): Promise<void>
   ```
 
   - Removes a value at the specified index.

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()

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.19.4",
+    "@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.19.4",
+    "@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.19.4",
-    "@tanstack/valibot-form-adapter": "^0.19.4",
+    "@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.19.4",
-    "@tanstack/yup-form-adapter": "^0.19.4",
+    "@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.19.4",
-    "@tanstack/zod-form-adapter": "^0.19.4",
+    "@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.19.4",
+    "@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.19.4",
+    "@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.19.4",
+    "@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.19.4"
+    "@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.19.4",
+    "@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.19.4",
+    "@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.19.4",
+    "@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.19.4",
-    "@tanstack/valibot-form-adapter": "^0.19.4",
+    "@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.19.4",
-    "@tanstack/yup-form-adapter": "^0.19.4",
+    "@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.19.4",
-    "@tanstack/zod-form-adapter": "^0.19.4",
+    "@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.19.4",
+    "@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.19.4",
+    "@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.19.4",
-    "@tanstack/valibot-form-adapter": "^0.19.4",
+    "@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.19.4",
-    "@tanstack/yup-form-adapter": "^0.19.4",
+    "@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.19.4",
-    "@tanstack/zod-form-adapter": "^0.19.4",
+    "@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.19.4",
+    "@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.19.4",
+    "@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.19.4",
-    "@tanstack/valibot-form-adapter": "^0.19.4",
+    "@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.19.4",
-    "@tanstack/yup-form-adapter": "^0.19.4",
+    "@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.19.4",
-    "@tanstack/zod-form-adapter": "^0.19.4",
+    "@tanstack/vue-form": "^0.20.3",
+    "@tanstack/zod-form-adapter": "^0.20.3",
     "vue": "^3.3.4",
     "zod": "^3.22.4"
   },

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "form",
   "private": true,
   "repository": "https://github.com/tanstack/form.git",
-  "packageManager": "pnpm@8.12.1",
+  "packageManager": "pnpm@9.0.6",
   "type": "module",
   "scripts": {
     "clean": "pnpm --filter \"./packages/**\" run clean",
@@ -37,7 +37,7 @@
   "namespace": "@tanstack",
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.6",
-    "@tanstack/config": "^0.6.0",
+    "@tanstack/config": "^0.7.4",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",