import { useState , useEffect } from "react" ; export function createSubscribable < MessageType > ( ) { const subscribers = new Set ( ) ; return { subscribe ( cb ) { subscribers . add ( cb ) ; return ( ) => { subscribers . delete ( cb ) ; } ; } , publish ( msg ) { subscribers . forEach ( ( cb ) => cb ( msg ) ) ; } , } ; } type ObservableMessage < T > = { target : T ; prop : string ; } ; type Observable < T > = T & { subscribe : ( callback : ( data : ObservableMessage < T > ) => void ) => ( ) => void ; } ; export function createObservable < DataType > ( data ) { const subscribers = createSubscribable < ObservableMessage < DataType > > ( ) ; return new Proxy ( { ... data , subscribe : subscribers . subscribe , } , { set : function ( target , prop , value ) { Reflect . set ( target , prop , value ) ; subscribers . publish ( { target , prop , } as unknown as ObservableMessage < DataType > ) ; return true ; } , } ) as Observable < DataType > ; } export function useObservable < DataType > ( observable ) { const [ , setVersion ] = useState ( 0 ) ; useEffect ( ( ) => observable . subscribe ( ( ) => setVersion ( ( v ) => v + 1 ) ) , [ observable ] ) ; return observable as DataType ; }