Skip to content

Commit 26b3ddd

Browse files
BalastrongBalastrong
authored
docs: enable prettier (#1217)
* docs: enable prettier on all manually written docs - keep autogenerated ignored * docs: format all
1 parent 8a95048 commit 26b3ddd

36 files changed

+745
-727
lines changed

‎.prettierignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44
**/build
55
**/coverage
66
**/dist
7-
**/docs
7+
**/docs/**/reference/**
88
**/codemods/**/__testfixtures__
99
pnpm-lock.yaml

‎docs/comparison.md

+14-19
Original file line numberDiff line numberDiff line change
@@ -13,43 +13,38 @@ Feature/Capability Key:
1313
- 🛑 Not officially supported or documented.
1414

1515
| Feature | TanStack Form | Formik | Redux Form | React Hook Form | Final Form |
16-
| ------------------------------------------------- |----------------------------------------------| ------------------------------ | -------------------------------------- | ------------------------------------------------ | -------------------------------------- |
16+
| ------------------------------------------------- | -------------------------------------------- | ------------------------------ | -------------------------------------- | ------------------------------------------------ | -------------------------------------- |
1717
| 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] |
18-
| Supported Frameworks | React, Vue, Angular, Solid, Lit | React | React | React | React, Vue, Angular, Solid, Vanilla JS |
19-
| 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] |
20-
| First-class TypeScript support | ✅ | ❓ | ❓ | ✅ | ✅ |
21-
| Fully Inferred TypeScript (Including Deep Fields) | ✅ | ❓ | ❓ | ✅ | 🛑 |
22-
| Headless UI components | ✅ | ❓ | ❓ | ✅ | ❓ |
23-
| Framework agnostic | ✅ | ❓ | ❓ | 🛑 | ✅ |
24-
| Granular reactivity | ✅ | ❓ | ❓ | ❓ | ✅ |
25-
| Nested object/array fields | ✅ | ✅ | ❓ | ✅*(1) | ✅ |
26-
| Async validation | ✅ | ✅ | ❓ | ✅ | ✅ |
27-
| Built-in async validation debounce | ✅ | ❓ | ❓ | ❓ | ❓ |
28-
| Schema-based Validation | ✅ | ✅ | ❓ | ✅ | ❓ |
29-
30-
*(1) For nested arrays, react-hook-form requires you [to cast the field array by its name](https://react-hook-form.com/docs/usefieldarray) if you're using TypeScript
18+
| Supported Frameworks | React, Vue, Angular, Solid, Lit | React | React | React | React, Vue, Angular, Solid, Vanilla JS |
19+
| 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] |
20+
| First-class TypeScript support | ✅ | ❓ | ❓ | ✅ | ✅ |
21+
| Fully Inferred TypeScript (Including Deep Fields) | ✅ | ❓ | ❓ | ✅ | 🛑 |
22+
| Headless UI components | ✅ | ❓ | ❓ | ✅ | ❓ |
23+
| Framework agnostic | ✅ | ❓ | ❓ | 🛑 | ✅ |
24+
| Granular reactivity | ✅ | ❓ | ❓ | ❓ | ✅ |
25+
| Nested object/array fields | ✅ | ✅ | ❓ | ✅\*(1) | ✅ |
26+
| Async validation | ✅ | ✅ | ❓ | ✅ | ✅ |
27+
| Built-in async validation debounce | ✅ | ❓ | ❓ | ❓ | ❓ |
28+
| Schema-based Validation | ✅ | ✅ | ❓ | ✅ | ❓ |
29+
30+
\*(1) For nested arrays, react-hook-form requires you [to cast the field array by its name](https://react-hook-form.com/docs/usefieldarray) if you're using TypeScript
3131

3232
[bpl-tanstack-form]: https://bundlephobia.com/result?p=@tanstack/react-form
3333
[bp-tanstack-form]: https://badgen.net/bundlephobia/minzip/@tanstack/react-form?label=💾
3434
[gh-tanstack-form]: https://github.com/TanStack/form
3535
[stars-tanstack-form]: https://img.shields.io/github/stars/TanStack/form?label=%F0%9F%8C%9F
36-
3736
[bpl-formik]: https://bundlephobia.com/result?p=formik
3837
[bp-formik]: https://badgen.net/bundlephobia/minzip/formik?label=💾
3938
[gh-formik]: https://github.com/jaredpalmer/formik
4039
[stars-formik]: https://img.shields.io/github/stars/jaredpalmer/formik?label=%F0%9F%8C%9F
41-
42-
4340
[bpl-redux-form]: https://bundlephobia.com/result?p=redux-form
4441
[bp-redux-form]: https://badgen.net/bundlephobia/minzip/redux-form?label=💾
4542
[gh-redux-form]: https://github.com/redux-form/redux-form
4643
[stars-redux-form]: https://img.shields.io/github/stars/redux-form/redux-form?label=%F0%9F%8C%9F
47-
4844
[bpl-react-hook-form]: https://bundlephobia.com/result?p=react-hook-form
4945
[bp-react-hook-form]: https://badgen.net/bundlephobia/minzip/react-hook-form?label=💾
5046
[gh-react-hook-form]: https://github.com/react-hook-form/react-hook-form
5147
[stars-react-hook-form]: https://img.shields.io/github/stars/react-hook-form/react-hook-form?label=%F0%9F%8C%9F
52-
5348
[bpl-final-form]: https://bundlephobia.com/result?p=final-form
5449
[bp-final-form]: https://badgen.net/bundlephobia/minzip/final-form?label=💾
5550
[gh-final-form]: https://github.com/final-form/final-form

‎docs/framework/angular/guides/arrays.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ Where `getPeopleName` is a method on the class like so
7070

7171
```typescript
7272
export class AppComponent {
73-
getPeopleName = (idx: number) => `people[${idx}].name` as const;
73+
getPeopleName = (idx: number) => `people[${idx}].name` as const
7474

7575
// ...
7676
}
@@ -79,6 +79,7 @@ export class AppComponent {
7979
> While it's unfortunate that you need to use a function to get the field name, it's a requirement for how our strict TypeScript types work.
8080
>
8181
> See, if we did the following:
82+
>
8283
> ```angular-html
8384
> <ng-container [tanstackField]="form" [name]="'people[' + $index + '].name'"></ng-container>
8485
> ```

‎docs/framework/angular/guides/basic-concepts.md

+5-2
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,10 @@ Each field has its own state, which includes its current value, validation statu
4141
Example:
4242

4343
```tsx
44-
const { value, meta: { errors, isValidating } } = field.state
44+
const {
45+
value,
46+
meta: { errors, isValidating },
47+
} = field.state
4548
```
4649

4750
There are three field states can be very useful to see how the user interacts with a field. A field is _"touched"_ when the user clicks/tabs into it, _"pristine"_ until the user changes value in it, and _"dirty"_ after the value has been changed. You can check these states via the `isTouched`, `isPristine` and `isDirty` flags, as seen below.
@@ -186,7 +189,7 @@ import { injectForm, injectStore } from '@tanstack/angular-form'
186189

187190
@Component(/*...*/)
188191
class AppComponent {
189-
form = injectForm(/*...*/);
192+
form = injectForm(/*...*/)
190193
canSubmit = injectStore(this.form, (state) => state.canSubmit)
191194
isSubmitting = injectStore(this.form, (state) => state.isSubmitting)
192195
}

‎docs/framework/angular/guides/validation.md

+2-5
Original file line numberDiff line numberDiff line change
@@ -237,9 +237,6 @@ export class AppComponent {
237237
}
238238
```
239239

240-
241-
242-
243240
## Validation at field level vs at form level
244241

245242
As shown above, each `[tanstackField]` accepts its own validation rules via the `onChange`, `onBlur` etc... callbacks. It is also possible to define validation rules at the form level (as opposed to field by field) by passing similar callbacks to the `injectForm()` function.
@@ -425,11 +422,12 @@ While functions provide more flexibility and customization over your validation,
425422
### Standard Schema Libraries
426423

427424
TanStack Form natively supports all libraries following the [Standard Schema specification](https://github.com/standard-schema/standard-schema), most notably:
425+
428426
- [Zod](https://zod.dev/)
429427
- [Valibot](https://valibot.dev/)
430428
- [ArkType](https://arktype.io/)
431429

432-
*Note:* make sure to use the latest version of the schema libraries as older versions might not support Standard Schema yet.
430+
_Note:_ make sure to use the latest version of the schema libraries as older versions might not support Standard Schema yet.
433431

434432
To use schemas from these libraries you can pass them to the `validators` props as you would do with a custom function:
435433

@@ -466,7 +464,6 @@ export class AppComponent {
466464

467465
Async validations on form and field level are supported as well:
468466

469-
470467
```angular-ts
471468
@Component({
472469
selector: 'app-root',

‎docs/framework/lit/guides/arrays.md

+14-21
Original file line numberDiff line numberDiff line change
@@ -47,16 +47,11 @@ export class TestForm extends LitElement {
4747

4848
This will generate the mapped HTML every time you run pushValue on the field:
4949

50-
5150
```html
5251
<div class="container">
53-
<button
54-
type="button"
55-
@click=${() => {
56-
peopleField.pushValue({name: "",age: ""})
57-
}}>
58-
Add Person
59-
</button>
52+
<button type="button" @click="${()" ="">
53+
{ peopleField.pushValue({name: "",age: ""}) }}> Add Person
54+
</button>
6055
</div>
6156
```
6257

@@ -70,25 +65,23 @@ return html`
7065
},
7166
(field) => {
7267
return html`
73-
<input
74-
type="text"
75-
placeholder="Name"
76-
.value="${field.state.value}"
77-
@input="${(e: Event) => {
78-
const target = e.target as HTMLInputElement;
79-
field.handleChange(target.value);
80-
}}"
81-
/>
82-
`;
68+
<input
69+
type="text"
70+
placeholder="Name"
71+
.value="${field.state.value}"
72+
@input="${(e: Event) => {
73+
const target = e.target as HTMLInputElement
74+
field.handleChange(target.value)
75+
}}"
76+
/>
77+
`
8378
},
8479
)}
85-
`
80+
`
8681
```
8782

88-
8983
## Full Example
9084

91-
9285
```typescript
9386
export class TestForm extends LitElement {
9487
#form = new TanStackFormController(this, {

‎docs/framework/lit/guides/basic-concepts.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,10 @@ For Example:
8787
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 its `field.state` property.
8888

8989
```tsx
90-
const { value, meta: { errors, isValidating } } = field.state
90+
const {
91+
value,
92+
meta: { errors, isValidating },
93+
} = field.state
9194
```
9295

9396
There are three field states can be very useful to see how the user interacts with a field. A field is _"touched"_ when the user clicks/tabs into it, _"pristine"_ until the user changes value in it, and _"dirty"_ after the value has been changed. You can check these states via the `isTouched`, `isPristine` and `isDirty` flags, as seen below.

‎docs/framework/react/community/balastrong-tutorial.md

+1-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ TanStack Form maintainer [Balastrong](https://bsky.app/profile/leonardomontini.d
77

88
[Watch the full playlist](https://www.youtube.com/playlist?list=PLOQjd5dsGSxInTKUWTxyqSKwZCjDIUs0Y)
99

10-
1110
## 1. [Setup and validation](https://youtu.be/Pf1qn35bgjs)
1211

1312
The first steps into TanStack Form learning all the basics, from setting up the library to creating a simple form with text fields and validation (sync, debounced and async). [Watch video (8:16)](https://youtu.be/Pf1qn35bgjs)
@@ -30,4 +29,4 @@ Use schema libraries like zod, yup or valibot to define your schema with validat
3029

3130
## 6. [Side effects and listeners](https://youtu.be/A-w2IG7DAso)
3231

33-
Similarly to field validators, you can attach events to field listeners and react to them, for example to reset a field when another one it depends on has changed. [Watch video (5:50)](https://youtu.be/A-w2IG7DAso)
32+
Similarly to field validators, you can attach events to field listeners and react to them, for example to reset a field when another one it depends on has changed. [Watch video (5:50)](https://youtu.be/A-w2IG7DAso)

‎docs/framework/react/guides/arrays.md

+3-8
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,7 @@ function App() {
3434
This will generate the mapped JSX every time you run `pushValue` on `field`:
3535

3636
```jsx
37-
<button
38-
onClick={() => field.pushValue({ name: '', age: 0 })}
39-
type="button"
40-
>
37+
<button onClick={() => field.pushValue({ name: '', age: 0 })} type="button">
4138
Add person
4239
</button>
4340
```
@@ -49,9 +46,7 @@ Finally, you can use a subfield like so:
4946
{(subField) => (
5047
<input
5148
value={subField.state.value}
52-
onChange={(e) =>
53-
subField.handleChange(e.target.value)
54-
}
49+
onChange={(e) => subField.handleChange(e.target.value)}
5550
/>
5651
)}
5752
</form.Field>
@@ -67,7 +62,7 @@ function App() {
6762
},
6863
onSubmit({ value }) {
6964
alert(JSON.stringify(value))
70-
}
65+
},
7166
})
7267

7368
return (

‎docs/framework/react/guides/basic-concepts.md

+6-4
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,10 @@ Each field has its own state, which includes its current value, validation statu
8080
Example:
8181

8282
```tsx
83-
const { value, meta: { errors, isValidating } } = field.state
83+
const {
84+
value,
85+
meta: { errors, isValidating },
86+
} = field.state
8487
```
8588

8689
There are three field states can be very useful to see how the user interacts with a field. A field is _"touched"_ when the user clicks/tabs into it, _"pristine"_ until the user changes value in it, and _"dirty"_ after the value has been changed. You can check these states via the `isTouched`, `isPristine` and `isDirty` flags, as seen below.
@@ -95,7 +98,6 @@ const { isTouched, isPristine, isDirty } = field.state.meta
9598
> In RHF, `isDirty = true`, when the form's values are different from the original values. If the user changes the values in a form, and then changes them again to end up with values that match the form's default values, `isDirty` will be `false` in RHF, but `true` in `TanStack/form`.
9699
> The default values are exposed both on the form's and the field's level in `TanStack/form` (`form.options.defaultValues`, `field.options.defaultValue`), so you can write your own `isDefaultValue()` helper if you need to emulate RHF's behavior.`
97100
98-
99101
## Field API
100102

101103
The Field API is an object passed to the render prop function when creating a field. It provides methods for working with the field's state.
@@ -209,7 +211,7 @@ It is important to remember that while the `useStore` hook's `selector` prop is
209211
```tsx
210212
// Correct use
211213
const firstName = useStore(form.store, (state) => state.values.firstName)
212-
const errors = useStore(form.store, (state) => state.errorMap)
214+
const errors = useStore(form.store, (state) => state.errorMap)
213215
// Incorrect use
214216
const store = useStore(form.store)
215217
```
@@ -229,7 +231,7 @@ Example:
229231
onChange: ({ value }) => {
230232
console.log(`Country changed to: ${value}, resetting province`)
231233
form.setFieldValue('province', '')
232-
}
234+
},
233235
}}
234236
/>
235237
```

‎docs/framework/react/guides/debugging.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ This typically is a sign that you should break down your form into smaller forms
2525
A workaround to this problem is to cast `field.state.value` using TypeScript's `as` keyword:
2626

2727
```tsx
28-
const value = field.state.value as string;
28+
const value = field.state.value as string
2929
```
3030

3131
# `Type instantiation is excessively deep and possibly infinite`

0 commit comments

Comments
 (0)