Atomico makes it easy to declare events at the type level using the Host type.
import { Host, c, useEvent } from "atomico";
type CustomDetail = { timestamp: number };
const MyComponent = c(
(): Host<{ onMyCustomEvent: CustomEvent<CustomDetail> }> => {
const dispatch = useEvent<CustomDetail>("MyCustomEvent");
return (
<host>
<button
onclick={() => {
dispatch({ timestamp: Date.now() });
}}
>Click</button>
</host>
);
}
);
In the previous code, we have declared the onMyCustomEvent
event at the type level. According to the template logic, this event will be dispatched every time the button is clicked, and the detail attached to this event will be of type CustomDetail
.