quark-test-button.ts

import * as Quark from 'quark';

interface TestState {
    clicked: boolean;
}

const state = new Quark.Store<TestState>({
    clicked: false
});

@Quark.subscribe(state)
class TestButton extends Quark.Widget {

    private handleButtonClick(): void {
        state.set('clicked', true);
    }

    public design(): string {
        return `
            .HTMLButtonElement {
                background: blue;
                color: white;
            }

            .HTMLButtonElement.xyz {
                color: yellow;
            }
        `;
    }

    public render(): Quark.Node[] {
        const clicked = state.get('clicked');

        return [
            new Quark.Node(HTMLButtonElement, { className: 'xyz', onclick: (e) => this.handleButtonClick() }, [
                new Quark.Node(HTMLSlotElement),
                new Quark.Node(HTMLSpanElement, { textContent: `(clicked: ${ clicked })` })
            ])
        ];
    }
}

@Quark.subscribe(state)
class TestCanvas extends Quark.Widget {
    ...
}