Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Usability problem of an array of superforms #396

Open
1 task done
unlocomqx opened this issue Apr 5, 2024 · 7 comments · May be fixed by #401
Open
1 task done

Usability problem of an array of superforms #396

unlocomqx opened this issue Apr 5, 2024 · 7 comments · May be fixed by #401
Labels
bug Something isn't working later May be worked on in the future. svelte-5 Related to Svelte 5

Comments

@unlocomqx
Copy link
Sponsor

  • Before posting an issue, read the FAQ and search the previous issues.

Description
I tried retuning multiple superforms in an array, but I could not use it in the frontend.
The only convenient way was to destructure each superform in the each tag but svelte doesn't support "declaring" stores out of the top-level of the component

If applicable, a MRE
https://www.sveltelab.dev/9tdm9ul193m3tz5

@unlocomqx unlocomqx added the bug Something isn't working label Apr 5, 2024
@unlocomqx
Copy link
Sponsor Author

unlocomqx commented Apr 5, 2024

It didn't occur to me to extract the form into a separate component 🤦
So this would work

{#each superforms as superform}
	<Comp {superform} />
{/each}

Closing.

@unlocomqx
Copy link
Sponsor Author

I'm reopening this issue because I encountered a problem

When I write this code

<script>
const superforms = data.my_forms.map((form) =>
	superForm(form, {
		dataType: 'json'
	})
);
</script>
{#each superforms as superform (superform.formId)}
	<ConditionItem {superform} />
{/each}

It works well but when a new form is added, then that's where I run into a problem

If I try to use $derived

const superforms = $derived(
	data.condition_forms.map((form) =>
		superForm(form, {
			dataType: 'json'
		})
	)
);

I get this error

Uncaught Error: onDestroy can only be used during component initialisation.

Repro https://www.sveltelab.dev/9tdm9ul193m3tz5

  • Click the Add button to add a new item (thus a new form)

@unlocomqx unlocomqx reopened this Apr 6, 2024
@unlocomqx
Copy link
Sponsor Author

I found a way to fix it, I pushed my code here

If you'd like, I can make a PR for this

Cheers

@ciscoheat
Copy link
Owner

A PR for this would be very nice!

@unlocomqx
Copy link
Sponsor Author

Okay, I will send a PR for this

@unlocomqx unlocomqx linked a pull request Apr 7, 2024 that will close this issue
@ciscoheat ciscoheat added later May be worked on in the future. svelte-5 Related to Svelte 5 labels Apr 23, 2024
@ciscoheat
Copy link
Owner

The problem is bigger than I anticipated, it'll require an overhaul of the onDestroy/cleanup handling. It'll have to wait until later. For now, using calls to superForm within $derived cannot be used.

@unlocomqx
Copy link
Sponsor Author

Okay, it will be good to have dynamic forms in the future. I will try to find a workaround for now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working later May be worked on in the future. svelte-5 Related to Svelte 5
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants