import { defAtom } from "@thi.ng/atom/atom" ; import { start } from "@thi.ng/hdom/start" ; import { dispatchNow , EventBus , FX_STATE , valueUpdater , } from "@thi.ng/interceptors" ; import { choices } from "@thi.ng/transducers/choices" ; const colors = choices ( [ "cyan" , "yellow" , "magenta" , "chartreuse" ] ) ; const db = defAtom ( { } ) ; const bus = new EventBus ( db , { init : ( ) => ( { [ FX_STATE ] : { clicks : 0 , color : "grey" } , } ) , "inc-counter" : [ valueUpdater ( "clicks" , ( x ) => x + 1 ) , dispatchNow ( [ "randomize-color" ] ) , ] , "randomize-color" : valueUpdater ( "color" , ( ) => colors . next ( ) . value ) , } ) ; start ( ( ctx ) => ctx . bus . processQueue ( ) ? [ "button" , { style : { padding : "1rem" , background : ctx . db . value . color , } , onclick : ( ) => ctx . bus . dispatch ( [ "inc-counter" ] ) , } , `clicks: ${ ctx . db . value . clicks }` , ] : null , { ctx : { db , bus } } ) ; bus . dispatch ( [ "init" ] ) ;