Merge branch 'main' into remove-subfield

TanStack · Mar 4, 2024 · 8f70742 · 8f70742
2 parents b167a4c + a651846
commit 8f70742
Show file tree

Hide file tree

Showing 37 changed files with 323 additions and 188 deletions.
diff --git a/docs/config.json b/docs/config.json
@@ -85,7 +85,10 @@
             {
               "label": "SSR/Next.js",
               "to": "framework/react/guides/ssr"
-
+            },
+            {
+              "label": "Debugging",
+              "to": "framework/react/guides/debugging"
             }
           ]
         },

diff --git a/docs/framework/react/guides/debugging.md b/docs/framework/react/guides/debugging.md
@@ -0,0 +1,17 @@
+---
+id: debugging
+title: Debugging React Usage
+---
+
+Here's a list of common errors you might see in the console and how to fix them.
+
+# Changing an uncontrolled input to be controlled
+
+If you see this error in the console:
+
+```
+Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components
+```
+
+It's likely you forgot the `defaultValues` in your `useForm` Hook or `form.Field` component usage. This is occurring
+because the input is being rendered before the form value is initialized and is therefore changing from `undefined` to `""` when a text input is made.
diff --git a/docs/framework/react/guides/ssr.md b/docs/framework/react/guides/ssr.md
@@ -76,7 +76,7 @@ export default async function someAction(prev: unknown, formData: FormData) {
   return await formFactory.validateFormData(formData);
 }
 ```
-- The action we've discussed is straightforward yet essential. It activates exclusively on the server side when we submit our form. In the example given, the action employs `formFactory.validateFormData(formData)`. This function takes care of validating the data received from the client during form submission. It's ab efficient way to ensure data compliance with our predefined server rules.
+- The action we've discussed is straightforward yet essential. It activates exclusively on the server side when we submit our form. In the example given, the action employs `formFactory.validateFormData(formData)`. This function takes care of validating the data received from the client during form submission. It's an efficient way to ensure data compliance with our predefined server rules.
 
 - Now, let's shift our focus to the client component:
   - For those who might be exploring this for the first time, `useFormState` is a relatively new hook in React. You can find more details in React's documentation on [useFormState](https://react.dev/reference/react-dom/hooks/useFormState). This hook represents a significant advancement as it allows us to dynamically update the state based on the outcomes of a form action. It's an effective way to manage form states, especially in response to server-side interactions.

diff --git a/docs/framework/react/reference/formApi.md b/docs/framework/react/reference/formApi.md
@@ -32,3 +32,4 @@ When using `@tanstack/react-form`, the [core form API](../../reference/formApi)
   }) => JSX.Element
   ```
   - 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.
+      > Note that TypeScript `5.0.4` and older versions will incorrectly complain if the `selector` method doesn't return the form's full state (`state`). This is caused by a [bug in TypeScript](https://github.com/TanStack/form/pull/606#discussion_r1506715714), and you can safely ignore it with `//@ts-expect-error` directive.
diff --git a/docs/reference/fieldApi.md b/docs/reference/fieldApi.md
@@ -164,10 +164,6 @@ A class representing the API for managing a form field.
 
 #### Properties
 
-- ```tsx
-  uid: number
-  ```
-  - A unique identifier for the field instance.
 - ```tsx
   form: FormApi<TParentData, TData>
   ```

diff --git a/docs/reference/formApi.md b/docs/reference/formApi.md
@@ -29,7 +29,7 @@ An object representing the options for a form.
   defaultValues?: TData
   ```
   - Set initial values for your form.
-  
+
 - ```tsx
   defaultState?: Partial<FormState<TData>>
   ```
@@ -61,7 +61,7 @@ An object representing the options for a form.
   onMount?: (values: TData, formApi: FormApi<TData>) => ValidationError
   ```
   -  Optional function that fires as soon as the component mounts.
-  
+
 - ```tsx
      onChange?: (values: TData, formApi: FormApi<TData>) => ValidationError
   ```
@@ -102,17 +102,17 @@ A class representing the Form API. It handles the logic and interactions with th
   options: FormOptions<TFormData> = {}
   ```
   - The options for the form.
-  
+
 - ```tsx
   store: Store<FormState<TFormData>>
   ```
   - A [TanStack Store instance](https://tanstack.com/store/latest/docs/reference/Store) that keeps track of the form's state.
-  
+
 - ```tsx
   state: FormState<TFormData>
   ```
   - The current state of the form.
-  
+
 - ```tsx
   fieldInfo: Record<DeepKeys<TFormData>, FieldInfo<TFormData, TFormValidator>> =
       {} as any
@@ -197,62 +197,62 @@ An object representing the current state of the form.
   errorMap: ValidationErrorMap
   ```
   - The error map for the form itself.
-  
+
 - ```tsx
   isFormValidating: boolean
   ```
   - A boolean indicating if the form is currently validating.
-  
+
 - ```tsx
   isFormValid: boolean
   ```
   - A boolean indicating if the form is valid.
-  
+
 - ```tsx
   fieldMeta: Record<DeepKeys<TData>, FieldMeta>
   ```
   - A record of field metadata for each field in the form.
-  
+
 - ```tsx
   isFieldsValidating: boolean
   ```
   - A boolean indicating if any of the form fields are currently validating.
-  
+
 - ```tsx
   isFieldsValid: boolean
   ```
   - A boolean indicating if all the form fields are valid.
-  
+
 - ```tsx
   isSubmitting: boolean
   ```
   - A boolean indicating if the form is currently submitting.
-  
+
 - ```tsx
   isTouched: boolean
   ```
   - A boolean indicating if any of the form fields have been touched.
-  
+
 - ```tsx
   isSubmitted: boolean
   ```
   - A boolean indicating if the form has been submitted.
-  
+
 - ```tsx
   isValidating: boolean
   ```
   - A boolean indicating if the form or any of its fields are currently validating.
-  
+
 - ```tsx
   isValid: boolean
   ```
   - A boolean indicating if the form and all its fields are valid.
-  
+
 - ```tsx
   canSubmit: boolean
   ```
   - A boolean indicating if the form can be submitted based on its current state.
-  
+
 - ```tsx
   submissionAttempts: number
   ```
@@ -268,17 +268,14 @@ An object representing the current state of the form.
 An object representing the field information for a specific field within the form.
 
 - ```tsx
-  instances: Record<
-    string,
-    FieldApi<
+  instance: FieldApi<
       TFormData,
       any,
       Validator<unknown, unknown> | undefined,
       TFormValidator
-    >
-  >
+    > | null
   ```
-  - A record of field instances with unique identifiers as keys.
+  - An instance of the `FieldAPI`.
 
 - ```tsx
   validationMetaMap: Record<ValidationErrorMapKeys, ValidationMeta | undefined>

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.13.6"
+    "@tanstack/react-form": "^0.13.7"
   },
   "devDependencies": {
     "typescript": "5.2.2",

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.13.6",
+    "@tanstack/react-form": "^0.13.7",
     "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.13.6",
+    "@tanstack/react-form": "^0.13.7",
     "@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.13.6",
-    "@tanstack/valibot-form-adapter": "^0.13.6",
+    "@tanstack/react-form": "^0.13.7",
+    "@tanstack/valibot-form-adapter": "^0.13.7",
     "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.13.6",
-    "@tanstack/yup-form-adapter": "^0.13.6",
+    "@tanstack/react-form": "^0.13.7",
+    "@tanstack/yup-form-adapter": "^0.13.7",
     "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.13.6",
-    "@tanstack/zod-form-adapter": "^0.13.6",
+    "@tanstack/react-form": "^0.13.7",
+    "@tanstack/zod-form-adapter": "^0.13.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "zod": "^3.22.4"

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.13.6",
+    "@tanstack/solid-form": "^0.13.7",
     "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.13.6",
-    "@tanstack/valibot-form-adapter": "^0.13.6",
+    "@tanstack/solid-form": "^0.13.7",
+    "@tanstack/valibot-form-adapter": "^0.13.7",
     "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.13.6",
-    "@tanstack/yup-form-adapter": "^0.13.6",
+    "@tanstack/solid-form": "^0.13.7",
+    "@tanstack/yup-form-adapter": "^0.13.7",
     "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.13.6",
-    "@tanstack/zod-form-adapter": "^0.13.6",
+    "@tanstack/solid-form": "^0.13.7",
+    "@tanstack/zod-form-adapter": "^0.13.7",
     "solid-js": "^1.7.8",
     "zod": "^3.22.4"
   },

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

diff --git a/packages/form-core/package.json b/packages/form-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/form-core",
-  "version": "0.13.6",
+  "version": "0.13.7",
   "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
@@ -237,8 +237,6 @@ export type FieldMeta = {
   isValidating: boolean
 }
 
-let uid = 0
-
 export type FieldState<TData> = {
   value: TData
   meta: FieldMeta
@@ -259,7 +257,6 @@ export class FieldApi<
     | undefined = undefined,
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
 > {
-  uid: number
   form: FieldApiOptions<
     TParentData,
     TName,
@@ -289,13 +286,6 @@ export class FieldApi<
     >,
   ) {
     this.form = opts.form as never
-    this.uid = uid++
-    // Support field prefixing from FieldScope
-    // let fieldPrefix = ''
-    // if (this.form.fieldName) {
-    //   fieldPrefix = `${this.form.fieldName}.`
-    // }
-
     this.name = opts.name as never
 
     if (opts.defaultValue !== undefined) {
@@ -362,7 +352,7 @@ export class FieldApi<
 
   mount = () => {
     const info = this.getInfo()
-    info.instances[this.uid] = this as never
+    info.instance = this as never
     const unsubscribe = this.form.store.subscribe(() => {
       this.store.batch(() => {
         const nextValue = this.getValue()
@@ -403,13 +393,8 @@ export class FieldApi<
       const preserveValue = this.options.preserveValue
       unsubscribe()
       if (!preserveValue) {
-        delete info.instances[this.uid]
         this.form.deleteField(this.name)
       }
-
-      if (!Object.keys(info.instances).length && !preserveValue) {
-        delete this.form.fieldInfo[this.name]
-      }
     }
   }