Radiant Counter

This is a simple counter component that increments and decrements a number.

The features of this counter are:

• Increment and decrement a number
• Uses the @reactiveProp decorator to define a property
• Uses the @querySelector decorator to query for an element
• Uses the @onEvent decorator to listen for events
• Uses the @onUpdated decorator to update the text content of the element

JSX Markup

If you want to use the RadiantCounter component, the only thing you need to do is to provide the elements that will be used to increment and decrement the value and the element that will show the value.

This can be done by using the data-decrement, data-increment, and data-text attributes.

<radiant-counter count={count}>
    <button type="button" data-ref="decrement" aria-label="Decrement">
      -
    </button>
    <span data-ref="count">{count}</span>
    <button type="button" data-ref="increment" aria-label="Increment">
      +
    </button>
</radiant-counter>

Typescript

The RadiantCounter component is defined as a class that extends the RadiantElement class. The RadiantCounterProps type is used to define the properties that the component will receive.

Please note that the props in there are used mainly to provide type checking and intellisense in the editor while using typescript with JSX.

The component is also dispatching a change event when the value is updated, this can be used to listen for changes in the value of the component.

export type RadiantCounterProps = {
    value?: number;
};

@customElement('radiant-counter')
export class RadiantCounter extends RadiantElement {
    @reactiveProp({ type: Number, reflect: true }) declare value: number;
    @query({ ref: 'count' }) countText!: HTMLElement;

    @onEvent({ ref: 'decrement', type: 'click' })
    decrement() {
      if (this.value > 0) this.value--;
    }

    @onEvent({ ref: 'increment', type: 'click' })
    increment() {
      this.value++;
    }

    @onUpdated('value')
    updateCount() {
      this.countText.textContent = this.value.toString();
      this.dispatchEvent(new Event('change'));
    }
}

declare global {
    namespace JSX {
      interface IntrinsicElements {
        'radiant-counter': HtmlTag & RadiantCounterProps;
      }
    }
}