fix(vue-form): losing reactivity

[teleskop150750]

close #1503
close #1515
close #1276

Fix of loss of reactivity
Refactor Field: improve granular updates and lazy slot props

[teleskop150750]

It might be necessary to put the entire api into signal

Link

[j0rgedev]

Would it be possible to watch default values key so it can update when it changes? This could be useful when fetching data, instead of creating a lot of computed properties like the example

[teleskop150750]

Would it be possible to watch default values key so it can update when it changes? This could be useful when fetching data, instead of creating a lot of computed properties like the example

Config changes should be tracked

https://github.com/TanStack/form/pull/1371/files#diff-0a5a2e9d19c33d06bab093ed6ec5baeccdb1d5eb94def19bffd0555c82658597R246-R250

[j0rgedev]

Hey @teleskop150750. Do you have any workaround until this is merged? I think it hasn't been reviewed yet since the main issue was closed

[j0rgedev]

Created the issue #1503 to track this PR 👍🏻

[LeCarbonator]

It's great to have the explanation listed in the linked issue, but even with a perfect PR, this is a breaking change. It would be delayed until a v2 release.

This also appears to be a (major) improvement on Vue's current reactivity system rather than 'fixing' a loss of reactivity. Please correct me if I'm wrong.

[teleskop150750]

It's great to have the explanation listed in the linked issue, but even with a perfect PR, this is a breaking change. It would be delayed until a v2 release.

This also appears to be a (major) improvement on Vue's current reactivity system rather than 'fixing' a loss of reactivity. Please correct me if I'm wrong.

The implementation is synchronized with the solidjs version. In signal-based frameworks, it is necessary to pass reactive data in callbacks. There are other workarounds, such as a getter object field or proxy. But they are more complex and inconvenient.

For some reason, SolidJs makes such mistakes less often and passes parameters correctly. In Vue, this causes difficulties every time because Ref is confusing

vuejs/rfcs#747

[teleskop150750]

The current implementation of Vue lacks wathEffect for parameters. So updating parameters does not update the state.

UPD:

[teleskop150750]

You can try to rewrite the PR to keep the API. I wanted to bring it closer to SolidJs in advance because it is more flexible and less likely to be subject to changes in the future.

[LeCarbonator]

The current implementation of Vue lacks withEffect for parameters. So updating parameters does not update the state.

Can you elaborate on this? Can that be fixed with the current API until v2 (maybe) migrates to this signal-based one?

[teleskop150750]

Solif js Update FormApi

VueJS No dependency tracking

example fix

https://vuejs.org/api/reactivity-utilities.html#tovalue

function useForm(opts?: MaybeRefOrGetter<Options>) {
  const api = new FormApi(opts?.()) 
  let isMouned = false

  watchEffect(() => {
     const optsVal = toValue(opts)
     if (isMouned) {
       api.update(optsVal)
     }
  })
  
  onMounted(() => {
    isMouned = true
    formApi.mount()
  })
}

[teleskop150750]

I made additional edits to FormField. I don't remember the exact reason. I think it was to reduce the number of updates.