edmundhung / conform

A type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix and Next.js.
https://conform.guide
MIT License
1.98k stars 107 forks source link

feat: auto field value update #729

Closed edmundhung closed 1 month ago

edmundhung commented 2 months ago

Fix #600

This is my 2nd attempt to remove the need of passing the key to each input manually by updating the fields value automatically. As mentioned in #728...

It means:

  1. No more warnings from React when spreading the result of getInputProps(), getSelectProps() or getTextareaProps() as it will no longer include a key.
  2. The name will become the only metadata required to be set on your inputs. The initalValue is required only if you care about progressive enhancement.

The main challenge of this change is that Conform will trigger a re-render only when the subscribed metadata is changed and so we don't have a single place that will always re-render and runs the side effect we need. This PR resolves it by running the side effect everywhere we made a subscription and update the relevant fields only if the initialValue is subscribed.

However, the previous solution made an wrong assumption that people will always subscribe to the initialValue when setting up a field which conflicts with (2). As there seems to be no way to associate a field with a subscription, we will either need to re-run the same side effect on every subscription, or, have the useForm() hook subscribed to all key changes so it will always re-render and run the side effect in one single place.

This PR uses the later approach.

changeset-bot[bot] commented 2 months ago

⚠️ No Changeset found

Latest commit: dbddf1377a89f7b0d87c6a750fa7136860cf1b99

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

cloudflare-workers-and-pages[bot] commented 2 months ago

Deploying conform with  Cloudflare Pages  Cloudflare Pages

Latest commit: dbddf13
Status: ✅  Deploy successful!
Preview URL: https://04b663ad.conform.pages.dev
Branch Preview URL: https://auto-field-update.conform.pages.dev

View logs

pkg-pr-new[bot] commented 2 months ago

Open in Stackblitz

More templates

- [@conform-example/chakra-ui](https://pkg.pr.new/template/02f1f50d-69d6-4b36-943b-f5114b346edd) - [@conform-example/headless-ui](https://pkg.pr.new/template/a364870b-3b3f-408f-badc-74b0a22f02cc) - [@conform-example/material-ui](https://pkg.pr.new/template/88af3784-14c0-4d41-8d1c-f5a8e97ea8ff) - [@conform-example/nextjs](https://pkg.pr.new/template/11b64917-c656-47dd-8c53-bb5d608ef653) - [@conform-example/react-router](https://pkg.pr.new/template/d91d7acb-7f87-4f16-9f47-6b228d317186) - [@conform-example/radix-ui](https://pkg.pr.new/template/fa18e2c8-c36a-4903-898a-3d5c1505ab6e) - [@conform-example/remix](https://pkg.pr.new/template/ffab3483-681b-43b0-9a49-c6a6e4e1a4d2) - [@conform-example/shadcn-ui](https://pkg.pr.new/template/b108844a-35d4-47d9-95e1-ead79a707b5d)

@conform-to/dom

``` pnpm add https://pkg.pr.new/@conform-to/dom@729 ```

@conform-to/react

``` pnpm add https://pkg.pr.new/@conform-to/react@729 ```

@conform-to/yup

``` pnpm add https://pkg.pr.new/@conform-to/yup@729 ```

@conform-to/zod

``` pnpm add https://pkg.pr.new/@conform-to/zod@729 ```

@conform-to/validitystate

``` pnpm add https://pkg.pr.new/@conform-to/validitystate@729 ```

commit: dbddf13