Although the props today offer strict rules, Type allows them to be complemented with a direct definition of the types to accept, example:

The above is equivalent to using value as a function, example:

This is also valid for the null type that in Atomic translates as Any, example:

Meta-types allow you to define properties not covered by Atomico's Automatic support, such as:

1. Type declaration

2. Event declaration

3. Method declaration

Atomico allows the definition of methods from the host tag, this in order to share the scope with the methods (Functions) of the component, but this escapes the definition of types, to patch this we must use the Host type, this will allow us to validate the method from the JSX, TSX and the component instance.

Host to method declaration

import {Host} from "atomico";

type MyMethod = (value: number)=>void;

function component():Host<{myMethod: MyMethod }>{
    const myMethod: MyMethod = ()=>{}
    return <host myMethod={myMethod }/>
}

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 to declare events

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
}