React & Astro

store.ts

import { createStore } from 'stan-js'

export const { useStore, getState, actions, effect } = createStore({
    counter: 0,
})

AstroCounter.astro

---
import { getState } from '../store'
---

<section class="astro">
    <img
        src="/astro.svg"
        alt="Astro"
    />
    <h1>
        Astro Counter
    </h1>
    <p id="counter">
        {getState().counter}
    </p>
    <div>
        <button id='decrement'>
            -
        </button>
        <button id='increment'>
            +
        </button>
    </div>
</section>

<script>
    import { actions, effect } from '../store'

    const p = document.querySelector('#counter')
    document.querySelector('#decrement')?.addEventListener('click', () => actions.setCounter(prev => prev - 1))
    document.querySelector('#increment')?.addEventListener('click', () => actions.setCounter(prev => prev + 1))
    effect(({ counter }) => {
        if (p) {
            p.textContent = counter.toString()
        }
    })
</script>

ReactCounter.tsx

import { useStore } from '../store'

export const ReactCounter = () => {
    const { counter, setCounter } = useStore()

    return (
        <section className="react">
            <img
                src="/react.svg"
                alt="React"
            />
            <h1>
                React Counter
            </h1>
            <p>
                {counter}
            </p>
            <div>
                <button onClick={() => setCounter(prev => prev - 1)}>
                    -
                </button>
                <button onClick={() => setCounter(prev => prev + 1)}>
                    +
                </button>
            </div>
        </section>
    )
}