@zeix/ui-element/docs-src/components/basic-counter/basic-counter.ts

UIElement - a HTML-first library for reactive Web Components

import {
	type Component,
	asInteger,
	component,
	fromEvents,
	setText,
} from '../../..'

export type BasicCounterProps = {
	count: number
}

export default component(
	'basic-counter',
	{
		count: fromEvents(
			el => asInteger()(el, el.querySelector('span')?.textContent),
			'button',
			{
				click: ({ value }) => ++value,
			},
		),
	},
	(_, { first }) => [first('span', setText('count'))],
)

declare global {
	interface HTMLElementTagNameMap {
		'basic-counter': Component<BasicCounterProps>
	}
}