#Solid and nanostore don't work

3 messages · Page 1 of 1 (latest)

last marsh
#

Made a draft notification sidebar and the following code returns no warning/error in console but solid component don't re-render!

---
import { AlertList } from '../components/alert';
---
<ul class="bg-[black] bg-opacity-20 h-screen w-72 sm:w-96 absolute right-0 top-0 z-40 text-white">
    <AlertList client:only="solid-js" />
</ul>
<script>
    import { toggleNotification } from "./alert";
    await (new Promise(resolve => setTimeout(resolve, 1000)));
    toggleNotification();
    console.log("Notification toggled");
</script>
import { atom } from 'nanostores';
import { useStore } from '@nanostores/solid'

const NotificationToggle = atom<boolean>(true);

export function toggleNotification() {
    NotificationToggle.set(false);
}

export function AlertList() {

    const $notifications = useStore(NotificationToggle);
    console.log($notifications());

    return  $notifications() ? (<li class={"bg-[red]"}>A TEMPLATE ALERT</li>) : null
}

It should disappear 1 sec after loading but doesn't. I don't know what to do

red musk
#

I couldn't ever get it to work either. I saw a bug report somewhere let me see if I can find it

#

Maybe related to this? https://github.com/nanostores/solid/issues/17

There's a few more issues here https://github.com/nanostores/solid/issues

I gave up using nano stores with solidJS. Some people suggest moving code to solidJS onMount

GitHub

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 beha...

GitHub

Global state management in Solid using nanostores. - Issues · nanostores/solid