Refactor: [v2] Refactor prototype by LeCarbonator · Pull Request #2367 · TanStack/form

LeCarbonator · 2026-09-02T05:48:29Z

Should help slightly with memory, but overall, it's less of a hassle than keeping track of components.

Field Components should no longer increase memory the more you have.

Summary by CodeRabbit

New Features
- Form and field components can be registered directly on form instances.
- Registered components are available during initial validation and when using app-level form contexts.
- Form instances expose registered components for convenient use.
Bug Fixes
- Improved component availability for fields created during mount-time validation.
Tests
- Added coverage for registered field components, form component access, and inherited app-form context rendering.

coderabbitai · 2026-09-02T05:48:45Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: 3e97882a-df0f-4412-8781-e7ac9503a889

📥 Commits

Reviewing files that changed from the base of the PR and between b62141c and b9d19d8.

📒 Files selected for processing (2)

docs/config.json
packages/react-form/src/AppForm/ReactAppFormApi.lib.ts

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.

📝 Walkthrough

Walkthrough

The PR replaces component attachment with concrete React form API classes. It adds overridable field API construction, moves component registration into constructors and prototypes, and adds tests for field components, form components, and inherited AppForm context.

Changes

React API construction

Layer / File(s)	Summary
Field API subclass resolution `packages/form-core/src/FieldApi/FieldApi.lib.ts`, `packages/form-core/src/FormApi/FormApi.lib.ts`	`InternalFormApi` exposes `_FieldApi`, and child fields use the constructor provided by the form instance.
React form API initialization `packages/react-form/src/ReactForm/ReactFormApi.lib.tsx`, `packages/react-form/src/ReactForm/Components.lib.tsx`, `packages/react-form/src/ReactForm/useField.lib.ts`	`InternalReactFormApi` becomes a concrete class. Its constructor initializes React components. Field component mappings no longer pass through `useField`.
App form API composition `packages/react-form/src/AppForm/ReactAppFieldApi.lib.ts`, `packages/react-form/src/AppForm/ReactAppFormApi.lib.ts`, `packages/react-form/src/AppForm/initializeAppForm.lib.ts`, `packages/react-form/src/AppForm/Components.lib.tsx`, `packages/react-form/tests/createFormHook.spec.tsx`, `docs/config.json`	App-form factories create field and form API classes with registered components. The initializer constructs the generated class. Tests cover registered and inherited components. Documentation navigation uses the shared `FieldGroupHelper` reference path.

Estimated code review effort: 4 (Complex) | ~45 minutes

Merge Risk: ⚪ Minimal · up to b9d19

This refactor changes internal React form construction without changing the supported package API or introducing a concrete production risk. No actionable merge-blocking risk remains after normal checks and review.

Sequence Diagram(s)

sequenceDiagram
  participant createAppFormInitializer
  participant createInternalReactAppFormApiClass
  participant createInternalReactAppFieldApiClass
  participant InternalReactAppFormApi
  createAppFormInitializer->>createInternalReactAppFormApiClass: provide formComponents and fieldComponents
  createInternalReactAppFormApiClass->>createInternalReactAppFieldApiClass: create field API class
  createInternalReactAppFormApiClass->>InternalReactAppFormApi: initialize components and AppForm
  InternalReactAppFormApi-->>createAppFormInitializer: return constructed API

Suggested reviewers: crutchcorn

🚥 Pre-merge checks | ✅ 2 | ❌ 3

❌ Failed checks (2 warnings, 1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description states the motivation and expected memory benefit, but it omits the required Changes, Checklist, and Release Impact sections.	Add the template sections. Describe the implementation changes, complete the contributing-guide and test checklist items, and select the applicable release-impact option. Add a changeset if the published code requires one.
Docstring Coverage	⚠️ Warning	Docstring coverage is 10.53% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 19 functions across 10 files. (1 skipped:…	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title identifies a prototype refactor, which matches the pull request, but it does not state the specific component-management or memory-usage change.	Use a more specific title, such as "Refactor component handling to reduce field-component memory usage".

✅ Passed checks (2 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 10.53% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 19 functions across 10 files. (1 skipped: 1 unsupported.)

Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch refactor-prototype

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

nx-cloud · 2026-09-02T05:49:00Z

View your CI Pipeline Execution ↗ for commit b9d19d8

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	3m 49s	View ↗
`nx run-many --target=build --exclude=examples/**`	✅ Succeeded	4s	View ↗

☁️ Nx Cloud last updated this comment at 2026-09-02 14:32:01 UTC

github-actions · 2026-09-02T05:49:34Z

🚀 Changeset Version Preview

7 package(s) bumped directly, 6 bumped as dependents.

🟨 Minor bumps

Package	Version	Reason
`@tanstack/form-core`	2.0.0-alpha.2 → 2.0.0-alpha.3	Changeset
`@tanstack/lit-form`	2.0.0-alpha.2 → 2.0.0-alpha.3	Changeset
`@tanstack/preact-form`	2.0.0-alpha.2 → 2.0.0-alpha.3	Changeset
`@tanstack/react-form`	2.0.0-alpha.2 → 2.0.0-alpha.3	Changeset
`@tanstack/solid-form`	2.0.0-alpha.2 → 2.0.0-alpha.3	Changeset
`@tanstack/svelte-form`	2.0.0-alpha.2 → 2.0.0-alpha.3	Changeset
`@tanstack/vue-form`	2.0.0-alpha.2 → 2.0.0-alpha.3	Changeset
`@tanstack/angular-form`	2.0.0-alpha.2 → 2.0.0-alpha.3	Dependent
`@tanstack/react-form-nextjs`	2.0.0-alpha.2 → 2.0.0-alpha.3	Dependent
`@tanstack/react-form-start`	2.0.0-alpha.2 → 2.0.0-alpha.3	Dependent

🟩 Patch bumps

Package	Version	Reason
`@tanstack/form-devtools`	1.0.0-alpha.2 → 1.0.0-alpha.3	Dependent
`@tanstack/react-form-devtools`	1.0.0-alpha.2 → 1.0.0-alpha.3	Dependent
`@tanstack/solid-form-devtools`	1.0.0-alpha.2 → 1.0.0-alpha.3	Dependent

pkg-pr-new · 2026-09-02T05:50:30Z

More templates

@tanstack/angular-form

npm i https://pkg.pr.new/@tanstack/angular-form@2367

@tanstack/form-core

npm i https://pkg.pr.new/@tanstack/form-core@2367

@tanstack/form-devtools

npm i https://pkg.pr.new/@tanstack/form-devtools@2367

@tanstack/lit-form

npm i https://pkg.pr.new/@tanstack/lit-form@2367

@tanstack/preact-form

npm i https://pkg.pr.new/@tanstack/preact-form@2367

@tanstack/react-form

npm i https://pkg.pr.new/@tanstack/react-form@2367

@tanstack/react-form-devtools

npm i https://pkg.pr.new/@tanstack/react-form-devtools@2367

@tanstack/react-form-nextjs

npm i https://pkg.pr.new/@tanstack/react-form-nextjs@2367

@tanstack/react-form-start

npm i https://pkg.pr.new/@tanstack/react-form-start@2367

@tanstack/solid-form

npm i https://pkg.pr.new/@tanstack/solid-form@2367

@tanstack/solid-form-devtools

npm i https://pkg.pr.new/@tanstack/solid-form-devtools@2367

@tanstack/svelte-form

npm i https://pkg.pr.new/@tanstack/svelte-form@2367

@tanstack/vue-form

npm i https://pkg.pr.new/@tanstack/vue-form@2367

commit: b9d19d8

codecov-commenter · 2026-09-02T14:32:58Z

⚠️ Please install the to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (alpha@2cde818). Learn more about missing BASE report.
❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@           Coverage Diff            @@
##             alpha    #2367   +/-   ##
========================================
  Coverage         ?   95.20%           
========================================
  Files            ?      113           
  Lines            ?     4378           
  Branches         ?      985           
========================================
  Hits             ?     4168           
  Misses           ?      200           
  Partials         ?       10

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

LeCarbonator added 4 commits September 1, 2026 15:24

refactor(react): make react components a subclass

1294648

refactor: move react app form to class impl

ff179f4

refactor: move field API call to form prop

158e06f

move field components to prototype

b62141c

chore: fix docs ref and knip

b9d19d8

LeCarbonator merged commit 5dd8f88 into alpha Sep 2, 2026
9 checks passed

LeCarbonator deleted the refactor-prototype branch September 2, 2026 14:46

Navigation Menu

Uh oh!

Uh oh!

Refactor: [v2] Refactor prototype - #2367

Refactor: [v2] Refactor prototype#2367
LeCarbonator merged 5 commits into
alphafrom
refactor-prototype

LeCarbonator commented Sep 2, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Sep 2, 2026 •

edited

Loading

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (2 warnings, 1 inconclusive)

Uh oh!

nx-cloud Bot commented Sep 2, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 2, 2026

Uh oh!

pkg-pr-new Bot commented Sep 2, 2026 •

edited

Loading

Uh oh!

codecov-commenter commented Sep 2, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

LeCarbonator commented Sep 2, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Sep 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (2 warnings, 1 inconclusive)

Uh oh!

nx-cloud Bot commented Sep 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Sep 2, 2026

🚀 Changeset Version Preview

🟨 Minor bumps

🟩 Patch bumps

Uh oh!

pkg-pr-new Bot commented Sep 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov-commenter commented Sep 2, 2026

Codecov Report

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

LeCarbonator commented Sep 2, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Sep 2, 2026 •

edited

Loading

nx-cloud Bot commented Sep 2, 2026 •

edited

Loading

pkg-pr-new Bot commented Sep 2, 2026 •

edited

Loading