A sample component for a few features

[acroyear]

I have a tv app music player, and I wanted to have a clock in the corner. Turned out to be a pretty clean example for showing the interactions between attributes, nonObservedAttributes, methods, and the lifecycle methods. You're welcome to adapt and include it in the documentation if you like.

import { createCustomElement } from '@michijs/michijs';

const timeOptions: Intl.DateTimeFormatOptions = {
    hour12: true,
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit'
  };

export const RunningClock = createCustomElement('running-clock', {
    shadow: false,
    nonObservedAttributes: () => {
        return {
            interval: null as ReturnType<typeof setInterval>
        }
    },
    lifecycle: {
        didMount() {
            this.interval = setInterval(this.updateTimeString, 1000);
            this.updateTimeString();
        },
        didUnmount() {
            clearInterval(this.interval);
            this.interval = null;
        },
    },
    methods: {
        updateTimeString() {
            const d = new Date();
            this.timeString = d.toLocaleTimeString('en-us', timeOptions);
        }
    },
    attributes: {
        timeString: '' as string
    },
    render() {
        return <span>{ this.timeString }</span>
    }
});