chore: missed vue and svelte

Author: harry-whorlow

docs/framework/svelte/guides/basic-concepts.md

@@ -72,33 +72,54 @@ Example:
 
 ## Field State
 
-Each field has its own state, which includes its current value, validation status, error messages, and other metadata. You can access a field's state using the `field.state` property.
+Each field has its own state, which includes its current value, validation status, error messages, and other metadata. You can access a field's state using the `field().state` property.
 
 Example:
 
-```ts
+```tsx
 const {
   value,
   meta: { errors, isValidating },
-} = field.state
+} = field().state
 ```
 
 There are four states in the metadata that can be useful to see how the user interacts with a field:
 
 - _"isTouched"_, after the user changes the field or blurs the field
-- _"isDirty"_, after the field's value has been changed, even if it's been reverted to the default. Opposite of _"isPristine"_
-- _"isBlurred"_, after the field has been blurred (exited)
-- _"isDefaultValue"_, whether the field's current value is the default value
+- _"isDirty"_, after the field's value has been changed, even if it's been reverted to the default. Opposite of `isPristine`
+- _"isPristine"_, until the user changes the field value. Opposite of `isDirty`
+- _"isBlurred"_, after the field has been blurred
+
+```tsx
+const { isTouched, isDirty, isPristine, isBlurred } = field.state.meta
+```
 
-There is also one additional derived state:
+![Field states](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/field-states.png)
 
-- _"isPristine"_, until the user changes the field value. Opposite of _"isDirty"_
+## Understanding 'isDirty' in Different Libraries
 
-```ts
-const { isTouched, isDirty, isBlurred, isDefaultValue, isPristine } = field.state.meta
+Non-Persistent `dirty` state
+
+- **Libraries**: React Hook Form (RHF), Formik, Final Form.
+- **Behavior**: A field is 'dirty' if its value differs from the default. Reverting to the default value makes it 'clean' again.
+
+Persistent `dirty` state
+
+- **Libraries**: Angular Form, Vue FormKit.
+- **Behavior**: A field remains 'dirty' once changed, even if reverted to the default value.
+
+We have chosen the persistent 'dirty' state model. To also support a non-persistent 'dirty' state, we introduce an additional flag:
+
+- _"isDefaultValue"_, whether the field's current value is the default value
+
+```tsx
+const { isDefaultValue, isTouched } = field.state.meta
+
+// The following line will re-create the non-Persistent `dirty` functionality.
+const nonPersistentIsDirty = !isDefaultValue
 ```
 
-![Field states](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/field-states.png)
+![Field states extended](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/field-states-extended.png)
 
 ## Field API
 

docs/framework/vue/guides/basic-concepts.md

@@ -76,33 +76,54 @@ Example:
 
 ## Field State
 
-Each field has its own state, which includes its current value, validation status, error messages, and other metadata. You can access a field's state using the `field.state` property.
+Each field has its own state, which includes its current value, validation status, error messages, and other metadata. You can access a field's state using the `field().state` property.
 
 Example:
 
-```js
+```tsx
 const {
   value,
   meta: { errors, isValidating },
-} = field.state
+} = field().state
 ```
 
 There are four states in the metadata that can be useful to see how the user interacts with a field:
 
 - _"isTouched"_, after the user changes the field or blurs the field
-- _"isDirty"_, after the field's value has been changed, even if it's been reverted to the default. Opposite of _"isPristine"_
-- _"isBlurred"_, after the field has been blurred (exited)
-- _"isDefaultValue"_, whether the field's current value is the default value
+- _"isDirty"_, after the field's value has been changed, even if it's been reverted to the default. Opposite of `isPristine`
+- _"isPristine"_, until the user changes the field value. Opposite of `isDirty`
+- _"isBlurred"_, after the field has been blurred
+
+```tsx
+const { isTouched, isDirty, isPristine, isBlurred } = field.state.meta
+```
 
-There is also one additional derived state:
+![Field states](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/field-states.png)
 
-- _"isPristine"_, until the user changes the field value. Opposite of _"isDirty"_
+## Understanding 'isDirty' in Different Libraries
 
-```js
-const { isTouched, isDirty, isBlurred, isDefaultValue, isPristine } = field.state.meta
+Non-Persistent `dirty` state
+
+- **Libraries**: React Hook Form (RHF), Formik, Final Form.
+- **Behavior**: A field is 'dirty' if its value differs from the default. Reverting to the default value makes it 'clean' again.
+
+Persistent `dirty` state
+
+- **Libraries**: Angular Form, Vue FormKit.
+- **Behavior**: A field remains 'dirty' once changed, even if reverted to the default value.
+
+We have chosen the persistent 'dirty' state model. To also support a non-persistent 'dirty' state, we introduce an additional flag:
+
+- _"isDefaultValue"_, whether the field's current value is the default value
+
+```tsx
+const { isDefaultValue, isTouched } = field.state.meta
+
+// The following line will re-create the non-Persistent `dirty` functionality.
+const nonPersistentIsDirty = !isDefaultValue
 ```
 
-![Field states](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/field-states.png)
+![Field states extended](https://raw.githubusercontent.com/TanStack/form/main/docs/assets/field-states-extended.png)
 
 ## Field API