Progressively enhanced wizard and hydrating form fields from serverside state

[ryc76]

I've searched the Internet and watched many a tutorial on progressively enhanced forms and there doesn't seem to be an obvious answer for creating a wizard that allows navigation back and forth whilst maintaining the state.

The scenario is that each page has it's own URL with the step present eg /wizard/1 followed by /wizard/2 etc with back and forward buttons. Nothing out of the ordinary.

State is maintained serverside to accomodate progressive enhancement.

When a step is valid the user clicks to the next step to load the subsequent form.

If the user has already completed the step it is prepopulated by loading data from the serverside state. Perhaps they have clicked back previously to revisit a step.

The question is how best to hydrate the form fields for steps previously completed and allow out of the box SvelteKit validation to function.

I've tried various methods, some way too hacky for my liking so wonder if I'm missing the obvious here?

Currently when a page loads I return the state from the database via the SvelteKit data property and overwrite the form property pre-populating the form fields in the process.

Unfortunatley when I return the output of the SvelteKit fail() function due to a validation failure the form will still get overwritten with the state as opposed to the result of the fail() function.

To accomodate this I am checking for the HTTP return code and only overwriting the form with the state if it's a 200

$: if ($page.status === 200) {
	form = { ...data.state };  
}

Does this seem sensible or am I working against the framework. Wouldn't it be useful to be able to populate the form property via the page.server.js load function as well as the data object?

Thanks