license import { Actor , lookup } from "actor-helpers/src/actor/Actor.js" ; import { State , MessageType as StateMessageType } from "./state.js" ; declare global { interface ActorMessageType { ui : Message ; } } export interface StateMessage { state : State ; } export type Message = StateMessage ; export default class UiActor extends Actor < Message > { private state = lookup ( "state" ) ; private counterEl = document . getElementById ( "counter" ) as HTMLSpanElement ; async init ( ) { const incrButton = document . getElementById ( "increment" ) as HTMLButtonElement ; incrButton . onclick = ( ) => this . state . send ( { type : StateMessageType . INCREMENT } ) ; const decrButton = document . getElementById ( "decrement" ) as HTMLButtonElement ; decrButton . onclick = ( ) => this . state . send ( { type : StateMessageType . DECREMENT } ) ; } async onMessage ( msg ) { this . counterEl . textContent = `${ msg . state . count }` ; } }