MyCounter

obsolete: not updated to new architecture

This minimal example displays a counter.

It uses a standard component and component SCSS. (For an example that uses a component template, see GreetUser.)

Usage

In any liquid file:

html
<my-counter
    class="MyCounter"
    count="12">
    <button 
        data-ref="decrement-button"
        class="MyCounter__DecrementButton">
        -
    </button>
    <span
        data-ref="count-span"
        class="MyCount__CountSpan">
        12
    </span>
    <button 
        data-ref="increment-button"
        class="MyCounter__IncrementButton">
        +
    </button>
</my-counter>

html
<my-counter
    class="MyCounter"
    count="12">
    <button 
        data-ref="decrement-button"
        class="MyCounter__DecrementButton">
        -
    </button>
    <span
        data-ref="count-span"
        class="MyCount__CountSpan">
        12
    </span>
    <button 
        data-ref="increment-button"
        class="MyCounter__IncrementButton">
        +
    </button>
</my-counter>

Implementation

typescript
// src/components/MyCounter.ts
import {BaseComponent, Component, Prop, Ref} from 'salvo-ts';
@Component()
export class MyCounter extends BaseComponent {
    @Prop({
        default: 0
    })
    private _count!: number;
    get count() {
        return this._count;
    }
    set count(value: number) {
        this._count = value;
        // Every time the count changes, render the span
        this.render();
    }
    @Ref()
    private incrementButton!: HTMLElement;
    @Ref()
    private decrementButton!: HTMLElement;
    @Ref()
    private countSpan!: HTMLElement;
    ready() {
        // Register listeners
        this.incrementButton.addEventListner('change', this.handleIncrement);
        this.decrementButton.addEventListner('change', this.handleDecrement);
        // Render initial count value - note this should _also_ be done in Liquid
        this.render();
    }
    beforeDestroy() {
        // Make sure listeners are cleaned up after the component is destroyed
        this.incrementButton.removeEventListener('change', this.handleIncrement);
        this.decrementButton.removeEventListener('change', this.handleDecrement);
    }
    private render() {
        this.countSpan.textContent = this.count;
    }
    private handleIncrement(e: MouseEvent) {
        this.count++;
    }
    private handleDecrement(e: MouseEvent) {
        this.count--;
    }
}

typescript
// src/components/MyCounter.ts
import {BaseComponent, Component, Prop, Ref} from 'salvo-ts';
@Component()
export class MyCounter extends BaseComponent {
    @Prop({
        default: 0
    })
    private _count!: number;
    get count() {
        return this._count;
    }
    set count(value: number) {
        this._count = value;
        // Every time the count changes, render the span
        this.render();
    }
    @Ref()
    private incrementButton!: HTMLElement;
    @Ref()
    private decrementButton!: HTMLElement;
    @Ref()
    private countSpan!: HTMLElement;
    ready() {
        // Register listeners
        this.incrementButton.addEventListner('change', this.handleIncrement);
        this.decrementButton.addEventListner('change', this.handleDecrement);
        // Render initial count value - note this should _also_ be done in Liquid
        this.render();
    }
    beforeDestroy() {
        // Make sure listeners are cleaned up after the component is destroyed
        this.incrementButton.removeEventListener('change', this.handleIncrement);
        this.decrementButton.removeEventListener('change', this.handleDecrement);
    }
    private render() {
        this.countSpan.textContent = this.count;
    }
    private handleIncrement(e: MouseEvent) {
        this.count++;
    }
    private handleDecrement(e: MouseEvent) {
        this.count--;
    }
}

scss
// src/components/MyCounter.scss
.MyCounter {
    display: flex;
    padding: 10px;
    &__DecrementButton,
    &__IncrementButton {
        background: #999;
    }
    &__CountSpan {
        margin: 0 10px;
        background: #ccc;
    }
}

scss
// src/components/MyCounter.scss
.MyCounter {
    display: flex;
    padding: 10px;
    &__DecrementButton,
    &__IncrementButton {
        background: #999;
    }
    &__CountSpan {
        margin: 0 10px;
        background: #ccc;
    }
}