defineComponent()
Define and register a Dathra-backed custom element.
ts
declare function defineComponent<const S extends PropsSchema = EmptyPropsSchema>(
tagName: string,
component: FunctionComponent<S>,
options?: ComponentOptions<S>,
): DefinedComponent<S>;
interface DefinedComponent<S extends PropsSchema = EmptyPropsSchema> extends ComponentMetadata<S> {
(props: JSXComponentProps<S> | null): Node;
readonly webComponent: ComponentConstructor<S>;
readonly jsx: JSXComponent<S>;
}Returns:A DefinedComponent<S> callable JSX helper with .webComponent and .jsx helpers.
Example
ts
import { css, defineComponent } from "@dathra/core";
const Counter = defineComponent(
"my-counter",
({ props }) => <button>{props.count.value}</button>,
{
props: { count: { type: Number, default: 0 } },
styles: [css`:host { display: block; }`],
},
);