Events

Events are a convenient way to communicate between different components on the page.

Dispatching events

To define an event, create a method on your component that returns your event payload and decorate it with Event like so:

import { WebComponent, Event } from '@webcomp/core';
class ThemeSelectButton extends WebComponent {
@Event('THEME_CHANGED')
changeTheme() {
// ...Optionally do stuff
return this.state.theme;
}
render() {
return <button class="theme-btn" onClick={this.changeTheme}>Like</button>
}
}

Alternatively, instead of the decorator, you can use trigger method, available on every component:

import { WebComponent } from '@webcomp/core';
class ThemeSelectButton extends WebComponent {
changeTheme = () => {
// ...Optionally do stuff
this.trigger('THEME_CHANGE', this.state.theme);
}
render() {
return <button class="theme-btn" onClick={this.changeTheme}>Like</button>
}
}

Listening to events

Every component has a .on method for subscribing to events. To listen to an event, you can do the following:

import { WebComponent } from '@webcomp/core';
class ThemedElement extends WebComponent {
componentDidMount() {
this.on('THEME_CHANGED', this.handleEvent); // Handlers are autobound
}
handleEvent(payload) {
this.setState({
selectedTheme: payload
});
}
render() {
return <div class={this.state.selectedTheme}>...</div>
}
}

Unwrapping promises

When dispatching events, you can pass a promise as event payload. WebComp will wait for the promise to resolve and dispatch the event with the result of that promise as a payload. This works with both @Event decorator and this.trigger. I.e:

import { WebComponent } from '@webcomp/core';
class MyElement extends WebComponent {
componentDidMount() {
this.on('GET_DATA', this.handleEvent);
}
handleData = ({ data }) => {
this.setState({ data });
}
getData = async () => {
const res = await fetch('/api/user/profile')
this.trigger(res.json());
}
render() {
return (
<div>
<button onClick={this.getData}>Get Data</button>
</div>
)
}
}