leego_quickstart_counter_component_with_state_management.ts

1import { Leego, Component, State } from 'leego';
2
3// Define a simple state for the application
4interface AppState extends State {
5  count: number;
6}
7
8// Create a component that utilizes the state
9class CounterComponent extends Component<AppState> {
10  render() {
11    return `
12      <div>
13        <h1>Count: ${this.state.count}</h1>
14        <button id="increment">Increment</button>
15      </div>
16    `;
17  }
18
19  // Define actions to update the state
20  bindEvents() {
21    const button = document.getElementById('increment');
22    if (button) {
23      button.onclick = () => {
24        this.setState({ count: this.state.count + 1 });
25      };
26    }
27  }
28}
29
30// Initialize the Leego application
31const app = new Leego<AppState>({
32  el: '#app',
33  initialState: { count: 0 },
34  components: [CounterComponent]
35});
36
37// Start the application
38app.start();