Counter

This example is a small but complete Ornata component that enhances existing HTML without taking ownership of the whole page.

Live Demo

Open this demo in a new tab

HTML

<section data-counter>
    <p>Total: <span data-count-value>0</span></p>
    <button type="button" data-count-button>Increment</button>
</section>

Component

JavaScript

import { defineComponent } from 'ornata';

export const Counter = defineComponent({
    name: 'Counter',
    state: {
        count: { default: 0 },
    },
    elements: {
        value: { query: '[data-count-value]' },
        button: { query: '[data-count-button]' },
    },
    methods: {
        increment() {
            this.state.count += 1;
        },
    },
    render: {
        value() {
            return {
                text: String(this.state.count),
            };
        },
        button() {
            return {
                events: {
                    click: () => this.methods.increment(),
                },
            };
        },
    },
});

TypeScript

import { defineComponent } from 'ornata';

interface CounterState {
    count: number;
}

interface CounterElements {
    value: Element | null;
    button: Element | null;
}

interface CounterMethods {
    increment(): void;
}

export const Counter = defineComponent<{
    state: CounterState;
    elements: CounterElements;
    methods: CounterMethods;
}>({
    name: 'Counter',
    state: {
        count: { default: 0 },
    },
    elements: {
        value: { query: '[data-count-value]' },
        button: { query: '[data-count-button]' },
    },
    methods: {
        increment() {
            this.state.count += 1;
        },
    },
    render: {
        value() {
            return {
                text: String(this.state.count),
            };
        },
        button() {
            return {
                events: {
                    click: () => this.methods.increment(),
                },
            };
        },
    },
});

Mount

JavaScript

Counter.mount('[data-counter]');

TypeScript

Counter.mount('[data-counter]');