Ancestors

Toot

Written by Matthias Andrasch on 2025-01-05 at 12:58

🧑‍🔧 Updated https://austrian-web-dev-companies.pages.dev/ a bit more, learned how bind:group works with #Svelte v5 $state.

🚉 Next stop: Adding pagination & URL params.

=> More informations about this toot | More toots from mandrasch@social.tchncs.de

Descendants

Written by Matthias Andrasch on 2025-01-06 at 21:45

After getting help on Svelte Discord, I integrated a rather interesting $effect pattern to load my $state from URL parameters (thx to l3t!) + added pagination ✅ Guess I have to get used to $effect in #Svelte v5. https://github.com/mandrasch/austrian-web-dev-companies/blob/68a4caa8435df0b8e5502501baa6fc153170171f/src/routes/%2Bpage.svelte#L51

🚉 Next stop: Scroll to results div after pagination click.

=> More informations about this toot | More toots from mandrasch@social.tchncs.de

Written by Matthias Andrasch on 2025-01-07 at 07:27

Got critical feedback on bsky about this: https://bsky.app/profile/paolo.ricciuti.me/post/3lf464y4erc2h

Now I'm a bit undecided if I should $derive from '$page/state' as suggested:

import {page} from '$page/state';

// ...

const selectedTags = $derived(page.url.searchParams.get("tags"));

• or if I should keep the current approach with $effect and bind:group for simplicity. 🤷🤔

[#]Svelte #SvelteKit #JavaScript

=> More informations about this toot | More toots from mandrasch@social.tchncs.de

Written by matthiou on 2025-01-06 at 21:56

@mandrasch Next step could be

href="/list/?page=3#results"

Possibly with the scroll-margin-top CSS property set

=> More informations about this toot | More toots from matthiou@mastodon.social

Written by Matthias Andrasch on 2025-01-06 at 21:59

@matthiou thx for reply! I gave it a try with afterNavigate / beforeNavigate already and element.scrollIntoView() - but I had a conflicht with $effect https://github.com/mandrasch/austrian-web-dev-companies/blob/68a4caa8435df0b8e5502501baa6fc153170171f/src/routes/%2Bpage.svelte#L26 Currently not sure if I even should use afterNavigate / beforeNavigate in Svelte v5 or if this should all be handled by $effect.

=> More informations about this toot | More toots from mandrasch@social.tchncs.de

Written by matthiou on 2025-01-07 at 08:18

@mandrasch definitely derive state from URL. Process would thus be

Toggle checkbox > edit URL > derive state from URL

( $effect could toggle checkboxes when a manual edit of the URL is detected to stay nicely synced )

If some parameters are not stored in the URL but in another $state, final state is derived from URL and that other $state

=> More informations about this toot | More toots from matthiou@mastodon.social