Using nanostores in astro components about docs HOT 4 CLOSED

I think that would benefit from some rewording, but they are not exactly contradicting.

Explaining:

Can I use Nano Stores in .astro files or other server-side components?

Nano Stores can be imported, written to, and read from in server-side components, but we don’t recommend it! This is due to a few restrictions:

• Writing to a store from a .astro file or non-hydrated component will not affect the value received by client-side components.
• You cannot pass a Nano Store as a “prop” to client-side components.
• You cannot subscribe to store changes from a .astro file, since Astro components do not re-render.

That is referring to server-side components, on Astro components that means the frontmatter:

---
// This runs on the server, not recommended
import {flag} from './stores.js';

const flagValue = flag.get();
---

A <script> block in an Astro component is a plain client-side script generated by the Astro component, it is never executed on the server-side even when pre-rendering. Using nanostores there is not a problem.

---
---
<script>
// This runs on the client, perfectly fine
import {flag} from './stores.js';

const flagValue = flag.get();
</script>

from docs.

Good point! I should have clarified a bit more in my issue regarding the differences between using nanostores in frontmatter and script blocks and not have been in a rush.

from docs.

Thanks for the conversation here! I wonder if something like this would address the issue?

Existing:

Nano Stores can be imported, written to, and read from in server-side components, but we don’t recommend it! This is due to a few restrictions:

Change to something like...

Nano Stores can be used in <script> tags to share state between .astro components. However, Using Nano Stores in the frontmatter of server-side components is not recommended because of the following restrictions:

Would something like that help? If so, would someone like to make a PR to update with clearer guidance?

from docs.

I think that is a great improvement!

from docs.