Skip to content

[WIP] Add Octane adapter for TanStack Form v1 #2396

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
crutchcorn wants to merge 19 commits into
base: main
Choose a base branch
from
Draft

[WIP] Add Octane adapter for TanStack Form v1 #2396

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
116c154
chore: initial commit
crutchcorn Sep 20, 2026
08f2ee4
chore: fix test usage
crutchcorn Sep 20, 2026
9eb082f
chore: more tests
crutchcorn Sep 20, 2026
a9fe1fe
chore: flatten our tests
crutchcorn Sep 20, 2026
ebf4f09
chore: add some TSC tooling
crutchcorn Sep 20, 2026
6b74d74
chore: prettier format
crutchcorn Sep 20, 2026
14708df
chore: tsrx eslint
crutchcorn Sep 20, 2026
98a7e2a
chore: revert Prettier plugin addin
crutchcorn Sep 20, 2026
6a62efa
Revert "chore: prettier format"
crutchcorn Sep 20, 2026
e772dae
chore: fix types in TSRX files
crutchcorn Sep 20, 2026
583cd91
chore: v1 of patching
crutchcorn Sep 22, 2026
12accbd
chore: replace prepare ts with cross-env fix
crutchcorn Sep 22, 2026
9f22c4e
chore: add back Prettier
crutchcorn Sep 22, 2026
e59d6fe
chore: format with prettier
crutchcorn Sep 22, 2026
670c6a3
chore: fix CI test
crutchcorn Sep 22, 2026
1c001cd
chore: fix types of Vitest/Vite
crutchcorn Sep 22, 2026
289b78b
chore: fix test:lib
crutchcorn Sep 22, 2026
fdca4c4
chore: fix test
crutchcorn Sep 22, 2026
9c132f4
ci: apply automated fixes and generate docs
autofix-ci[bot] Sep 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,9 @@
</div>

<div align="center">

### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)

</div>

# TanStack Form
Expand Down
12 changes: 7 additions & 5 deletions docs/framework/lit/guides/form-composition.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,13 @@ export class TextField extends LitElement {
this.field.handleChange((e.target as HTMLInputElement).value)}
/>
</label>
${this.field.state.meta.isTouched && this.field.state.meta.errors.length
? html`<div style="color: red">
${this.field.state.meta.errors.join(', ')}
</div>`
: ''}
${
this.field.state.meta.isTouched && this.field.state.meta.errors.length
? html`<div style="color: red">
${this.field.state.meta.errors.join(', ')}
</div>`
: ''
}
`
}
}
Expand Down
110 changes: 57 additions & 53 deletions docs/framework/lit/guides/form-groups.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,61 +70,65 @@ export class MyForm extends LitElement {

render() {
return html`
${this.step === 0
? this.#form.group(
{
name: 'step1',
onGroupSubmit: () => {
// We can move the step forward when validation passes
this.step++
${
this.step === 0
? this.#form.group(
{
name: 'step1',
onGroupSubmit: () => {
// We can move the step forward when validation passes
this.step++
},
onGroupSubmitInvalid: () => {
// Or handle invalid submissions, just like a top-level form
},
onSubmitMeta: {} as SomeType,
},
onGroupSubmitInvalid: () => {
// Or handle invalid submissions, just like a top-level form
(group) => html`
<form
@submit=${(e: Event) => {
e.preventDefault()
e.stopPropagation()
// Use `group.handleSubmit()` to submit the sub-form, but not the parent form
group.handleSubmit()
}}
>
${this.#form.field(
{ name: 'step1.name' },
(field) => html`<!-- ... -->`,
)}
</form>
`,
)
: nothing
}
${
this.step === 1
? this.#form.group(
{
name: 'step2',
onGroupSubmit: () => {
// Then, use `this.#form.api.handleSubmit()` to submit the entire form
this.#form.api.handleSubmit()
},
},
onSubmitMeta: {} as SomeType,
},
(group) => html`
<form
@submit=${(e: Event) => {
e.preventDefault()
e.stopPropagation()
// Use `group.handleSubmit()` to submit the sub-form, but not the parent form
group.handleSubmit()
}}
>
${this.#form.field(
{ name: 'step1.name' },
(field) => html`<!-- ... -->`,
)}
</form>
`,
)
: nothing}
${this.step === 1
? this.#form.group(
{
name: 'step2',
onGroupSubmit: () => {
// Then, use `this.#form.api.handleSubmit()` to submit the entire form
this.#form.api.handleSubmit()
},
},
(group) => html`
<form
@submit=${(e: Event) => {
e.preventDefault()
e.stopPropagation()
group.handleSubmit()
}}
>
${this.#form.field(
{ name: 'step2.age' },
(field) => html`<!-- ... -->`,
)}
</form>
`,
)
: nothing}
(group) => html`
<form
@submit=${(e: Event) => {
e.preventDefault()
e.stopPropagation()
group.handleSubmit()
}}
>
${this.#form.field(
{ name: 'step2.age' },
(field) => html`<!-- ... -->`,
)}
</form>
`,
)
: nothing
}
`
}
}
Expand Down
116 changes: 67 additions & 49 deletions docs/framework/lit/guides/validation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,11 @@ import { html, nothing } from 'lit'
field.handleChange(target.valueAsNumber)
}}"
/>
${!field.state.meta.isValid
? html`<em role="alert">${field.state.meta.errors.join(', ')}</em>`
: nothing}
${
!field.state.meta.isValid
? html`<em role="alert">${field.state.meta.errors.join(', ')}</em>`
: nothing
}
`
},
)}`
Expand Down Expand Up @@ -72,9 +74,11 @@ import { html, nothing } from 'lit'
field.handleChange(target.valueAsNumber)
}}"
/>
${!field.state.meta.isValid
? html`<em role="alert">${field.state.meta.errors.join(', ')}</em>`
: nothing}
${
!field.state.meta.isValid
? html`<em role="alert">${field.state.meta.errors.join(', ')}</em>`
: nothing
}
`
},
)}`
Expand Down Expand Up @@ -107,9 +111,11 @@ import { html, nothing } from 'lit'
field.handleChange(target.valueAsNumber)
}}"
/>
${!field.state.meta.isValid
? html`<em role="alert">${field.state.meta.errors.join(', ')}</em>`
: nothing}
${
!field.state.meta.isValid
? html`<em role="alert">${field.state.meta.errors.join(', ')}</em>`
: nothing
}
`
},
)}`
Expand All @@ -134,9 +140,11 @@ import { html, nothing } from 'lit'
(field) => {
return html`
<!-- ... -->
${!field.state.meta.isValid
? html`<em>${field.state.meta.errors.join(',')}</em>`
: nothing}
${
!field.state.meta.isValid
? html`<em>${field.state.meta.errors.join(',')}</em>`
: nothing
}
`
},
)}`
Expand All @@ -157,9 +165,11 @@ import { html, nothing } from 'lit'
(field) => {
return html`
<!-- ... -->
${field.state.meta.errorMap['onChange']
? html`<em>${field.state.meta.errorMap['onChange']}</em>`
: nothing}
${
field.state.meta.errorMap['onChange']
? html`<em>${field.state.meta.errorMap['onChange']}</em>`
: nothing
}
`
},
)}`
Expand Down Expand Up @@ -225,16 +235,18 @@ export class MyForm extends LitElement {
return html`
<div>
<!-- ... -->
${this.#form.api.state.errorMap.onChange
? html`
<div>
<em
>There was an error on the form:
${this.#form.api.state.errorMap.onChange}</em
>
</div>
`
: nothing}
${
this.#form.api.state.errorMap.onChange
? html`
<div>
<em
>There was an error on the form:
${this.#form.api.state.errorMap.onChange}</em
>
</div>
`
: nothing
}
<!-- ... -->
</div>
`
Expand Down Expand Up @@ -306,23 +318,27 @@ export class MyForm extends LitElement {
field.handleChange(target.valueAsNumber)
}}"
/>
${!field.state.meta.isValid
? html`<em role="alert"
>${field.state.meta.errors.join(', ')}</em
>`
: nothing}
${
!field.state.meta.isValid
? html`<em role="alert"
>${field.state.meta.errors.join(', ')}</em
>`
: nothing
}
`,
)}
${this.#form.api.state.errorMap.onSubmit
? html`
<div>
<em
>There was an error on the form:
${this.#form.api.state.errorMap.onSubmit}</em
>
</div>
`
: nothing}
${
this.#form.api.state.errorMap.onSubmit
? html`
<div>
<em
>There was an error on the form:
${this.#form.api.state.errorMap.onSubmit}</em
>
</div>
`
: nothing
}
<!--...-->
</form>
</div>
Expand Down Expand Up @@ -400,9 +416,11 @@ import { html, nothing } from 'lit'
field.handleChange(target.valueAsNumber)
}}"
/>
${!field.state.meta.isValid
? html`<em role="alert">${field.state.meta.errors.join(', ')}</em>`
: nothing}
${
!field.state.meta.isValid
? html`<em role="alert">${field.state.meta.errors.join(', ')}</em>`
: nothing
}
`
},
)}`
Expand Down Expand Up @@ -438,9 +456,11 @@ import { html, nothing } from 'lit'
field.handleChange(target.valueAsNumber)
}}"
/>
${!field.state.meta.isValid
? html`<em role="alert">${field.state.meta.errors.join(', ')}</em>`
: nothing}
${
!field.state.meta.isValid
? html`<em role="alert">${field.state.meta.errors.join(', ')}</em>`
: nothing
}
`
},
)}`
Expand Down Expand Up @@ -613,9 +633,7 @@ You can access this flag via `this.#form.api.state` and use the value in order t

```ts
class MyForm extends LitElement {
#form = new TanStackFormController(this, {
/* ... */
})
#form = new TanStackFormController(this, {/* ... */})

render() {
return html`
Expand Down
4 changes: 1 addition & 3 deletions docs/framework/preact/guides/form-composition.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,9 +282,7 @@ Usage:

```tsx
// sharedOpts.ts
const formOpts = formOptions({
/* ... */
})
const formOpts = formOptions({/* ... */})

function ParentComponent() {
const form = useAppForm({ ...formOptions /* ... */ })
Expand Down
4 changes: 1 addition & 3 deletions docs/framework/react/guides/form-composition.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -355,9 +355,7 @@ Usage:

```tsx
// sharedOpts.ts
const formOpts = formOptions({
/* ... */
})
const formOpts = formOptions({/* ... */})

function ParentComponent() {
const form = useAppForm({ ...formOptions /* ... */ })
Expand Down
4 changes: 1 addition & 3 deletions docs/framework/solid/guides/validation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -543,9 +543,7 @@ The form state object has a `canSubmit` flag that is false when any field is inv
You can subscribe to it via `form.Subscribe` and use the value in order to, for example, disable the submit button when the form is invalid (in practice, disabled buttons are not accessible, use `aria-disabled` instead).

```tsx
const form = createForm(() => ({
/* ... */
}))
const form = createForm(() => ({/* ... */}))

return (
/* ... */
Expand Down
Loading
Loading