search

47ng / nuqs

Type-safe search params state manager for React frameworks - Like useState, but stored in the URL query string.
https://nuqs.47ng.com
MIT License
4.86k stars 104 forks source link

Readme: Add Astro example #771

Open tordans opened 4 days ago

tordans commented 4 days ago

I am testing out nuqs with an Astro app and it looks like all works great (*).

This example for the Readme shows a possible way to use it.

The thing that is different for Astro is, that there is no "Root" to place the NuqsAdapter IMO, since each Astro island is independent. Which is why we need to do this semi-elegant wrapper component.

There might be better ways to do this, though.

(*) (!) However, I did not test (yet) how this behaves with multiple islands and NuqsAdapters. This could very well break the setup. Until now I used the recommended nanostore in those cases. See https://docs.astro.build/en/recipes/sharing-state-islands/ However, nanostore remove the nuqs like helper methods at some point. More on this is in https://github.com/nanostores/router/issues/30. My previous workaround was to use a copy of the removed helper, eg. https://github.com/osmberlin/www.osm-verkehrswende.org/commit/3d2e27b4fa7f427e3f72af41561d025857ec57c5#diff-acaaec4d6340f096b1c5dab9c107023b24ec701667fa9c9bb362fdf9e92ce846R55

I will mark this as a draft for now until the (!) is cleared up.

vercel[bot] commented 4 days ago

@tordans is attempting to deploy a commit to the 47ng Team on Vercel.

A member of the Team first needs to authorize it.

franky47 commented 4 days ago

Thanks! Eric Burel also pointed out nanostores for shared Astro state on Bluesky: https://bsky.app/profile/francoisbest.com/post/3lah564mkmd2w

Unlike the other adapters, I'm not actually sure the React adapter would work if two of them were added as siblings (eg: in different islands), as they don't yet have a way to re-render when the URL changes via external means (eg: an explicit call to the history API, or another island doing a setState on a useQueryState). If they were to be loaded in memory multiple times (code-split per island rather than made into a common chunk), the separate event emitters would also not be able to sync the internal states across islands.

vercel[bot] commented 4 days ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
nuqs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 18, 2024 10:01am