1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33export default class Component {
$target;
$props;
$state;
constructor($target, $props) {
this.$target = $target;
this.$props = $props;
this.setup();
this.setEvent();
this.render();
}
setup() {}
mounted() {}
template() {
return "";
}
render() {
this.$target.innerHTML = this.template();
this.mounted();
}
setEvent() {}
setState(newState) {
this.$state = { ...this.$state, ...newState };
this.render();
}
addEvent(eventType, selector, callback) {
this.$target.addEventListener(eventType, (event) => {
if (!event.target.closest(selector)) return false;
callback(event);
});
}
}