How to declare events for your component at the type level for TSX?

Atomico makes it easy to declare events at the type level using the Host type.

Example

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.