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]");