Event declaration
Atomico supports through the use of the Host type, the declaration of events and methods, this is useful for associating meta-types to the customElement instance when using JSX or TSX.
Host will be useful for you to declare your event using JSX or TSX regardless of its origin, example:
import { Host, c, useEvent } from "atomico";
function myComponent(): Host<{
onMyCustomEvent: Event
}> {
const dispatch = useEvent("MyCustomEvent");
return <host>
<button onclick={dispatch}>click</button>
</host>;
}
export const MyComponent = c(myComponent);
The use of Host allows that when using JSX or TSX your event is validated through Typescript, this also applies when using @atomico/react, example:
import { MyComponent } from "my-componnet";
<MyComponent
onMyCustomEvent={(event) => {
event.currentTarget; // < MyComponent
}}
></MyComponent>;
Note event.currentTarget accesses the CustomElement, example properties and more.
That has another benefit, capturing the event as a type to be used in an external handler, example:
function handlerMyCustomEvent(
event: DOMEvent<"MyCustomEvent", typeof MyComponent>
) {
event.currentTarget; // < MyComponent
}
Last modified 10mo ago