State and Inertia.js integration

[thin ibex]

I want to be able to store and then restore the full form state, with inertia. Is that possible, and if so, how do I get the full form state and how can I restore full form state?

[lofty goblet]

You mean something like persistence?

See these threads for more info: https://discordapp.com/channels/719702312431386674/1406583847059066952
https://discordapp.com/channels/719702312431386674/1404490027538452511

we're planning on adding a persister to help with tackling this. If you could elaborate on how inertia saves and restores data, it could help for drafting the API for it

[thin ibex]

Yes, I'm aware of that. In the future, I would prefer TanStack's persistent management, which will be much better, more integrated (less boilerplate code) and more flexible. For now, as a workaround, I can try to use Inertia https://inertiajs.com/remembering-state#manually-saving-state) for persistence. I just need a simple way to retrieve and write the entire form state.

[lofty goblet]

to receive form state, try an attached event listener in listeners.
to set form state, pass defaultState to the hook

[thin ibex]

You mean setting the defaultValues to the state and listening and storing state like this?

listeners: {
            onChange: ({ formApi }) => {
                const currentValues = {
                    username: formApi.getFieldValue('username') as string,
                    notifications_enabled: formApi.getFieldValue('notifications_enabled') as boolean,
                };
                router.remember(currentValues, FORM_STATE_KEY);
            },

Is there not a more efficient way to retrieve the entire state and restore it without having to go over each field and use defaultValues?

[lofty goblet]

formApi.state.values is not reactive, but it's up to date. So no need to create a new currentValues object

listeners: {
  onChange: ({ formApi }) => {
    router.remember(formApi.state.values, FORM_STATE_KEY)
  }
}

[thin ibex]

Thanks. Can I then restore it to formApi.state.values somehow or is my only option to use defaultValues?

[lofty goblet]

defaultState does exist, but I'm not confident enough to write code snippets in discord for that. Do you have a small svelte intertiajs example where I can implement this behaviour and tinker with it?

stackblitz, codesandbox, something of that type?

[thin ibex]

I have pushed it to the PR https://github.com/coollabsio/coolify/pull/6389/files#diff-0ed6c613ea283ce308682a69ea7512178f1fed18783b804bf87f3b52e260ec4c I left // comments where state stuff is. Also left a few comments on your review about the other things.

[lofty goblet]

that's a start, but I meant where I can insert that component to have the type errors that you're experiencing as well

this is just one file of the full stack, no?

[thin ibex]

Yes but it only works if you have the full laravel backend as well

[thin ibex]

No the file Way1TanStackWithState.svelte and the few lines of TS for state is everything that is needed (rest is php) not important.

[thin ibex]

If you want you could clone the coolify repo and run the laravel app?

[lofty goblet]

sure, I'll give it a try later this evening

[thin ibex]

I will write you a quick guide and adjust some stuff so it is almost one click.

This comment is no longer on the file https://github.com/coollabsio/coolify/pull/6389#discussion_r2285563804. I agree this would be very nice to have.

[lofty goblet]

we'll keep it in mind! Also thanks in advance for the guide

[thin ibex]

Alright done:

• Guide: https://github.com/coollabsio/coolify/blob/v5.x/CONTRIBUTING.md
• To see the forms use the routes from routes/web.php there you can also adjust stuff like default values (hardcoded instead of from DB) and backend validation.

If anything is unclear just let me know. Also thank you so much for all the help!

[lofty goblet]

I‘ll try to start it up this evening or tomorrow. The guide looks to be straightforward!

[thin ibex]

I found a second bug in the TanStack Form Svelte docs: https://github.com/coollabsio/coolify/pull/6389#discussion_r2286082754. I think I also found a bug in Inertia.js that causes only one error to be passed to the front end. F**ck my life, man 😂. I searched so long on why only 1 error was displayed.

[lofty goblet]

good catch with the docs! I'll answer the question on the PR for clarity, but I'll reiterate here:

Yes, isValid is just a shorthand check for errors.length > 0. There is no runtime difference

[thin ibex]

Thank you so much!

I hate to be this guy, but the Svelte docs are lacking a bit. Many pages are missing, for example Listeners page, Custom Errors and more. It would be great if they could be updated to match the React docs at least for all core features. If I find the time, I will maybe open a PR to improve the docs as it took me quite a while of reading React docs to get my Svelte code working.

[lofty goblet]

absolutely. Svelte and lit are quite behind, and vue / solid / angular are also missing some docs.

Frankly, there‘s still documentation to be made for React too … it‘s quite a lot.

Our PRs are open though, so even if it‘s just to fix that erroneous condition in the svelte example, feel free to open one!

I‘ll see how much time I have the coming month, but I plan to test out frameworks apart from just React so I can expand the docs myself

[thin ibex]

It would be nice and very helpful. As the docs is pretty much the only source of truth and also needed for AI as it is a newer library. I'll see what I can do in terms of PRs. My to-do list is also quite endless but I am sure I can make some time.

[lofty goblet]

Well, I didn't get around to it yet! Hopefully I'll have proper time this evening.

[thin ibex]

Sounds good. Let me know if you have any issues.

[lofty goblet]

hmm, it looks like it almost works. However, none of the subroutes exist, they all return 404

in the root route, this is what I see.

Running the upstream v5.x-form-test branch and following the step-by-step

doesn't seem like it reports any errors to the terminal. The routes in web.php don't lead to anywhere though

AAAH, wrong port I went to 5173 instead of 8000. Nevermind, continuing the test!

[thin ibex]

Was just about to write that.

[lofty goblet]

so how do you type what the router remembers and restores? It seems to default to string keys and unknown data

[thin ibex]

Mmm I have no idea, would need to look more into that. Probably simmilar to props.

[lofty goblet]

it looks like the main issue with using the form state instead of only values is that it can't be cloned

which I'm not sure why. First time I encounter that error

this error in particular

there's some SO questions addressing it, but they're all about vue and not svelte

[thin ibex]

I'm not sure. I guess it kind of works but it would be much better if I could restore the state without having to hijack the default values for it. Can we make that possible (until we have state management built in), maybe the state can be reactive so it can be updated easier?

Also what about these 2 issues https://github.com/coollabsio/coolify/pull/6389#discussion_r2285547693? and setting the success state https://github.com/coollabsio/coolify/pull/6389#discussion_r2285550435 ?

[thin ibex]

I think we can type it const restoredState: FormState = router.restore(FORM_STATE_KEY) if inertia changes type from unknown to any. So maybe the type issue can be fixed like this.