Class ClassClock

preview/Clock.tsx:43–77

})
@observer
export class ClassClock extends HTMLElement implements WebCell {
    @attribute
    @observable
    accessor time = new Date();

    private timer: number;

    connectedCallback() {
        this.timer = window.setInterval(() => (this.time = new Date()), Second);
    }

    disconnectedCallback() {
        clearInterval(this.timer);
    }

    @reaction(({ time }) => time)
    handleReaction(newValue: Date, oldValue: Date, reaction: IReactionPublic) {
        console.info(newValue, oldValue, reaction);
    }

    @on('click', 'time')
    handleClick(event: MouseEvent, currentTarget: HTMLTimeElement) {
        console.info(event, currentTarget);
    }

    render() {
        const { time } = this;

        return (
            <time dateTime={time.toJSON()}>
                Class Clock: {time.toLocaleString()}
            </time>
        );
    }
}