Untitled

 avatar
unknown
typescript
3 years ago
988 B
4
Indexable
import {
    LiveComponent,
    RegisterComponent,
} from "../../server/component/component";

@RegisterComponent("counter")
export class CounterComponent extends LiveComponent {
    async mount() {
        this.assign({
            count: 0,
            isConnected: this.isConnected(),
        });

        this.on("inc", () => this.onIncrement());
        this.on("dec", () => this.onDecrement());
    }

    onIncrement(): void {
        this.assign({
            count: this.state<number>("count") + 1
        });
    }

    onDecrement(): void {
        this.assign({
            count: this.state<number>("count") - 1
        });
    }

    unmount(): void {
        super.unmount();
    }

    render(): string {
        return this.renderEJS(`
        <h1>Counter <%=count%></h1>
        <p>isConnected: <%=isConnected%></p>
        <button live-click="inc">+</button>
        <button live-click="dec">-</button>        
    `);
    }
}
Editor is loading...