import { useState } from 'react'

class Signal<T> {
    #value: T
    #dispatchers: Set<React.Dispatch<React.SetStateAction<T>>> = new Set()
    constructor(value: T){
        this.#value = value
    }
    get current(): T {
        return this.#value
    }
    set current(value: T){
        if(this.#value !== value){
            this.#value = value
            for(const dispatcher of this.#dispatchers){
                dispatcher(this.#value)
            }
        }
    }
    subscribe(dispatcher: React.Dispatch<React.SetStateAction<T>>): void {
        if(!(this.#dispatchers.has(dispatcher))){
            this.#dispatchers.add(dispatcher)
        }
    }
}

const createSignal = <T>(value: T): Signal<T> => new Signal(value)

const useSignal = <T>(signal: Signal<T>): Signal<T> => {
    const [, dispatcher] = useState(signal.current)
    signal.subscribe(dispatcher)
    return signal
}

export { createSignal, useSignal }

import { createSignal } from '../lib/signals.ts'

export const counter = createSignal(0)

import { useSignal } from '../lib/signals.ts'
import { counter } from './shared_signals.ts'

export const Button = () => {
    const _counter = useSignal(counter)
    return (
        <button onClick={ () => ++_counter.current }>
            Count is { _counter.current }
        </button>
    )
}

import { hydrateRoot } from 'react-dom/client'

import { Layout } from './Layout.tsx'
import { Button } from './Button.tsx'

hydrateRoot(
    document,
    <Layout>
        <Button/>
        <Button/>
        <Button/>
        <Button/>
        <Button/>
        <Button/>
        <Button/>
        <Button/>
        <Button/>
        <Button/>
    </Layout>
)