Skip to content

Comments

Add preact integration for tanstack form#2043

Open
JoviDeCroock wants to merge 8 commits intoTanStack:mainfrom
JoviDeCroock:preact-integration
Open

Add preact integration for tanstack form#2043
JoviDeCroock wants to merge 8 commits intoTanStack:mainfrom
JoviDeCroock:preact-integration

Conversation

@JoviDeCroock
Copy link

🎯 Changes

  • Add new @tanstack/preact-form package to the monorepo.
  • Use @tanstack/preact-store instead of @tanstack/react-store.
  • Use useId from preact/hooks for form ID generation.
  • Set preact peer dependency to >10.11.0 for useId support.

@changeset-bot
Copy link

changeset-bot bot commented Feb 15, 2026

⚠️ No Changeset found

Latest commit: 946e68a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@nx-cloud
Copy link

nx-cloud bot commented Feb 15, 2026

View your CI Pipeline Execution ↗ for commit 946e68a

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

☁️ Nx Cloud last updated this comment at 2026-02-24 15:05:21 UTC

Copy link
Contributor

@theVedanta theVedanta left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

compat and use-client are the only things I wanna flag, since they're in multiple files. Apart from that, looks okay. The onInput prop isn't important as such, but would be a nice-to-have.

Field: FieldComponent<
TFormData,
TOnMount,
TOnChange,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like fields should have an onInput prop instead of onChange for it to be consistent with Preact. If we can do that, it'd be awesome

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think anyone would benefit from that, the end-user is still free to use onInput in exchange for onChange at their disposal

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, gotcha. But how would users use onInput in parts of the API that are not the children?

          <form.Field
            name="firstName"
            validators={{
              onInput: ({ value }) =>
                !value
                  ? 'A first name is required'
                  : value.length < 3
                    ? 'First name must be at least 3 characters'
                    : undefined,
            }}
            ...

I can understand if you feel like they don't, I was only thinking about it because of consistency with Preact's naming.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah I see what you mean now, sorry I didn't derive the validator enforcement from the comment

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Validators should use onChange even on adapters that use onInput. That comes from core. No need to change :)

Copy link
Contributor

@theVedanta theVedanta left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Once we can finalize this, let's get the docs in place and merge! Super excited to use preact-form 🔥

Field: FieldComponent<
TFormData,
TOnMount,
TOnChange,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, gotcha. But how would users use onInput in parts of the API that are not the children?

          <form.Field
            name="firstName"
            validators={{
              onInput: ({ value }) =>
                !value
                  ? 'A first name is required'
                  : value.length < 3
                    ? 'First name must be at least 3 characters'
                    : undefined,
            }}
            ...

I can understand if you feel like they don't, I was only thinking about it because of consistency with Preact's naming.

@sentry
Copy link

sentry bot commented Feb 24, 2026

Codecov Report

❌ Patch coverage is 95.77465% with 6 lines in your changes missing coverage. Please review.
✅ Project coverage is 90.31%. Comparing base (6892ed0) to head (946e68a).
⚠️ Report is 141 commits behind head on main.

Files with missing lines Patch % Lines
packages/preact-form/src/useForm.tsx 86.48% 4 Missing and 1 partial ⚠️
packages/preact-form/src/createFormHook.tsx 97.50% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #2043      +/-   ##
==========================================
- Coverage   90.35%   90.31%   -0.04%     
==========================================
  Files          38       55      +17     
  Lines        1752     2148     +396     
  Branches      444      522      +78     
==========================================
+ Hits         1583     1940     +357     
- Misses        149      186      +37     
- Partials       20       22       +2     

☔ View full report in Codecov by Sentry.
📢 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants