solid icon indicating copy to clipboard operation
solid copied to clipboard

`useStore()` Value Incorrectly Rendered in Astro SPA Mode

Open AustinFoss opened this issue 1 year ago • 1 comments

I'm using SolidJS for the first time; to get familiar with it I'm recreating a simple template project I originally did using Svelte components in Astro. In doing so I noticed some odd behavioral differences between mirrored Svelte and Solid components using the same Nanostores store.

My template project can be found here for reference: https://github.com/AustinFoss/astro-nanostores-example/tree/main

It's an Astro project using their SPA mode: https://docs.astro.build/en/guides/view-transitions/#full-site-view-transitions-spa-mode

At first the useStore function correctly updates the Solid component's DOM, and the Svelt counterpart's simultaneously. But when navigating away to the "About" page then back "Home" only the Svelte component initially displays the number where the counter left off while the Solid counter shows 0. However, when resuming to increment/decrement the counter Solid jumps directly back to where it left off.

I'm not exactly sure how to prompt the Solid component to remember it's old value before the page transition, nor am I exactly sure this is a problem with @nanostores/solid or astro:transitions. This is most likely a problem with my understanding of how Solid does it's rendering but if anyone can help shed some light on this and offer some insight that would be much appreciated.

output

AustinFoss avatar Jan 28 '24 21:01 AustinFoss