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>
)import { useLoaderData } from 'react-router-dom'
type LoaderProps = {
themes: {
all: string[],
selectedId: string
}
} | null
export const Component = () => {
const data = useLoaderData() as LoaderProps
return data?.themes ? (
<>
Selected theme Id: { data.themes.selectedId }
All themes: { JSON.stringify(data.themes.all) }
</>
) : (
<>No themes</>
)
}
///
export const routes = [
{
path: '/',
element: <Component/>,
loader: () => ({
themes: {
all: [
'light',
'dark'
],
selectedId: 'light'
}
})
}
/* ... */
]