element-vir/dist/readme-examples/my-with-events.element.js

Heroic. Reactive. Declarative. Type safe. Web components without compromise.

import { randomInteger } from '@augment-vir/common';
import { defineElement } from 'element-vir';
import { defineElementEvent, html, listen } from '../index.js';
export const MyWithEvents = defineElement()({
    tagName: 'my-with-events',
    events: {
        logoutClick: defineElementEvent(),
        randomNumber: defineElementEvent(),
    },
    render({ dispatch, events }) {
        return html `
            <button ${listen('click', () => dispatch(new events.logoutClick()))}>log out</button>
            <button
                ${listen('click', () => dispatch(new events.randomNumber(randomInteger({ min: 0, max: 1_000_000 }))))}
            >
                generate random number
            </button>
        `;
    },
});