TanStack Store Internals Refactor #1038

crutchcorn · 2024-11-25T14:12:05Z

This PR should be merged with the message
fix: useStore should cause fewer (if any) update depth issues in React

TODOs

Move new Derived side effects to dedicated mount method
Add back transformArray
Add back broken tests
Add tests to validate fix for Accessing form error array using form.useStore and destructuring can cause react update depth issue #902
- Make sure that errors doesn't change unless errorMap has changed
Make derived state more modular to avoid problems with over-generating related code

nx-cloud · 2024-11-25T14:12:35Z

View your CI Pipeline Execution ↗ for commit 1c360a6.

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

☁️ Nx Cloud last updated this comment at 2024-12-29 16:10:48 UTC

…form into derived-state-refactor

This reverts commit 4087d87.

…values

…form into derived-state-refactor

# Conflicts: # docs/framework/angular/reference/classes/tanstackfield.md # docs/framework/react/reference/functions/useform.md # docs/framework/react/reference/interfaces/reactformapi.md # docs/framework/react/reference/type-aliases/fieldcomponent.md # docs/framework/react/reference/type-aliases/reactformextendedapi.md # docs/framework/vue/reference/functions/usefield.md # docs/framework/vue/reference/functions/useform.md # docs/framework/vue/reference/interfaces/vuefieldapi.md # docs/framework/vue/reference/interfaces/vueformapi.md # docs/framework/vue/reference/type-aliases/fieldcomponent.md # docs/framework/vue/reference/type-aliases/usefield.md # docs/framework/vue/reference/variables/field.md # docs/reference/classes/fieldapi.md # docs/reference/classes/formapi.md # docs/reference/type-aliases/fieldmeta.md # docs/reference/type-aliases/fieldstate.md # packages/form-core/src/FieldApi.ts # packages/form-core/src/FormApi.ts # pnpm-lock.yaml

pkg-pr-new · 2024-11-30T10:43:58Z

Open in Stackblitz

More templates

@tanstack/angular-form

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

@tanstack/form-core

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

@tanstack/react-form

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

@tanstack/lit-form

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

@tanstack/solid-form

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

@tanstack/valibot-form-adapter

npm i https://pkg.pr.new/@tanstack/valibot-form-adapter@1038

@tanstack/vue-form

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

@tanstack/yup-form-adapter

npm i https://pkg.pr.new/@tanstack/yup-form-adapter@1038

@tanstack/zod-form-adapter

npm i https://pkg.pr.new/@tanstack/zod-form-adapter@1038

commit: 1c360a6

crutchcorn · 2024-12-26T18:03:34Z

OK, I figured out what the problem was:

batch sends out prevDepVals in one single update. Meaning that when we end up receiving the new value, it will inevitably be === consistent. By removing all instances in form for batch by doing:

function batch(fn: () => void) {
  return fn()
}

It works as-intended and all tests pass.

This isn't ideal tho, so I'll try to patch it in store instead if possible

# Conflicts: # docs/reference/classes/fieldapi.md # docs/reference/classes/formapi.md # docs/reference/type-aliases/fieldmeta.md # docs/reference/type-aliases/fieldstate.md # docs/reference/type-aliases/formstate.md # examples/react/next-server-actions/package.json # examples/react/remix/package.json # examples/react/tanstack-start/package.json # packages/angular-form/package.json # packages/form-core/package.json # packages/form-core/src/FieldApi.ts # packages/form-core/src/FormApi.ts # packages/react-form/package.json # packages/solid-form/package.json # packages/vue-form/package.json # pnpm-lock.yaml

Balastrong

I see there are also some failing tests on Solid which seem to be related to the initial form state, I couldn't see if it's something on the solid-form adapter or even from solid-store

packages/form-core/src/FormApi.ts

Balastrong · 2024-12-29T11:05:21Z

packages/form-core/src/FormApi.ts

+          !prevBaseStore ||
+          currBaseStore.errorMap !== prevBaseStore.errorMap
+        ) {
+          errors = Object.values(currBaseStore.errorMap).reduce(


Can we check earlier if onMount errors have to be removed? So that we avoid pushing them now and then filtering them out on lines 515-521

Something like moving up this block

let errorMap = currBaseStore.errorMap if (shouldInvalidateOnMount) { errorMap = Object.assign(errorMap, { onMount: undefined }) }

and then using the local errorMap on Object.values

Let's make a follow-up PR on this, seeing that it works today and I'm struggling to think of an easy way to move this around ATM

…form into derived-state-refactor

codecov · 2024-12-29T16:11:00Z

Codecov Report

Attention: Patch coverage is 92.18750% with 10 lines in your changes missing coverage. Please review.

Project coverage is 86.60%. Comparing base (91eb9ab) to head (1c360a6).
Report is 5 commits behind head on main.

Files with missing lines	Patch %	Lines
packages/form-core/src/FormApi.ts	91.50%	8 Missing and 1 partial ⚠️
packages/solid-form/src/createField.tsx	90.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1038      +/-   ##
==========================================
- Coverage   86.61%   86.60%   -0.02%     
==========================================
  Files          29       29              
  Lines        1158     1172      +14     
  Branches      301      290      -11     
==========================================
+ Hits         1003     1015      +12     
- Misses        142      144       +2     
  Partials       13       13

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

chore: WIP migration to derived state

fd0218a

crutchcorn and others added 4 commits November 25, 2024 06:13

chore!: temporarily remove broken tests

efe7a00

ci: apply automated fixes and generate docs

ad24e57

chore: refactor derived state in FormApi to use Derived class

9dbd2c0

Merge branch 'derived-state-refactor' of https://github.com/TanStack/…

310ece4

…form into derived-state-refactor

crutchcorn mentioned this pull request Nov 25, 2024

canSubmit is not set in state when provided to defaultState prop at form initialization #944

Closed

ci: apply automated fixes and generate docs

b3fc11c

crutchcorn mentioned this pull request Nov 25, 2024

Accessing form error array using form.useStore and destructuring can cause react update depth issue #902

Closed

crutchcorn and others added 10 commits November 25, 2024 07:57

chore: fix build

4087d87

ci: apply automated fixes and generate docs

9ca8a8b

Revert "chore: fix build"

052bf52

This reverts commit 4087d87.

ci: apply automated fixes and generate docs

cd9a21a

chore: migrate to form mount on every test

677874d

chore: simplify complex tests

bc64ef5

ci: apply automated fixes and generate docs

0f6b6d6

chore: refactor all derived state into FormApi, even field derived …

31434d2

…values

Merge branch 'derived-state-refactor' of https://github.com/TanStack/…

b53251d

…form into derived-state-refactor

ci: apply automated fixes and generate docs

4d72f93

crutchcorn mentioned this pull request Nov 29, 2024

[Tracking] The Road to 1.x #813

Open

11 tasks

crutchcorn and others added 10 commits November 29, 2024 01:12

chore: fix build

e2eea23

fix: only regenerate field.errors when field.errorMap has changed

4e74c86

chore: fix tests

643197a

ci: apply automated fixes and generate docs

ee4b98c

chore: add previously failing test

3f4f40f

chore: only recompute errors when prevDepVal is different

b79d343

ci: apply automated fixes and generate docs

27f6acc

chore: WIP validate new Store API

8f820e0

chore: fix issues with tests

a3eccf2

autofix-ci bot and others added 3 commits November 30, 2024 00:49

ci: apply automated fixes and generate docs

06d0a65

chore: fix build

1be22f3

ci: apply automated fixes and generate docs

ebdc29e

crutchcorn and others added 7 commits December 26, 2024 10:39

fix: all tests now pass in Form Core and React Form

1f6f01e

chore: bump Store to 0.7

4ce1db7

ci: apply automated fixes and generate docs

f9901bf

chore: fix issues with Sherif, fix mount tests

bf1bc79

ci: apply automated fixes and generate docs

695c7ba

test: add previously failing useStore test

fe64566

crutchcorn changed the title ~~chore: WIP migration to derived state~~ fix: useStore should cause fewer (if any) update depth issues in React Dec 28, 2024

crutchcorn changed the title ~~fix: useStore should cause fewer (if any) update depth issues in React~~ TanStack Store Internals Refactor Dec 28, 2024

ci: apply automated fixes and generate docs

b4cbe58

Balastrong reviewed Dec 29, 2024

View reviewed changes

crutchcorn and others added 2 commits December 29, 2024 07:59

chore: fix timing with Solid Form

fd9ae4c

ci: apply automated fixes and generate docs

94d922f

Balastrong mentioned this pull request Dec 29, 2024

feat: return an array of errors from a single validator (custom & schema library) #1090

Open

crutchcorn and others added 4 commits December 29, 2024 08:05

chore: key rename and fix comment

c01b8a4

Merge branch 'derived-state-refactor' of https://github.com/TanStack/…

937951b

…form into derived-state-refactor

ci: apply automated fixes and generate docs

bc3aaca

chore: fix eslint

1c360a6

Balastrong approved these changes Dec 29, 2024

View reviewed changes

crutchcorn merged commit be7f9bf into main Dec 29, 2024
7 checks passed

crutchcorn deleted the derived-state-refactor branch December 29, 2024 16:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TanStack Store Internals Refactor #1038

TanStack Store Internals Refactor #1038

crutchcorn commented Nov 25, 2024 •

edited

Loading

nx-cloud bot commented Nov 25, 2024 •

edited

Loading

pkg-pr-new bot commented Nov 30, 2024 •

edited

Loading

crutchcorn commented Dec 26, 2024

Balastrong left a comment

Balastrong Dec 29, 2024

crutchcorn Dec 29, 2024

Balastrong Dec 29, 2024

codecov bot commented Dec 29, 2024 •

edited

Loading

TanStack Store Internals Refactor #1038

TanStack Store Internals Refactor #1038

Conversation

crutchcorn commented Nov 25, 2024 • edited Loading

TODOs

nx-cloud bot commented Nov 25, 2024 • edited Loading

pkg-pr-new bot commented Nov 30, 2024 • edited Loading

crutchcorn commented Dec 26, 2024

Balastrong left a comment

Choose a reason for hiding this comment

Balastrong Dec 29, 2024

Choose a reason for hiding this comment

crutchcorn Dec 29, 2024

Choose a reason for hiding this comment

Balastrong Dec 29, 2024

Choose a reason for hiding this comment

codecov bot commented Dec 29, 2024 • edited Loading

Codecov Report

crutchcorn commented Nov 25, 2024 •

edited

Loading

nx-cloud bot commented Nov 25, 2024 •

edited

Loading

pkg-pr-new bot commented Nov 30, 2024 •

edited

Loading

codecov bot commented Dec 29, 2024 •

edited

Loading