install.shbash
npm install chatoratsconfig.jsonjson
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "chatora"
}
}
MiniElement.tsxtsx
import { functionalCustomElement, signal, type CC } from "chatora";
import { Host } from "chatora/jsx-runtime";
import { toString } from "chatora/util";
type Props = {
name?: string;
};
export type Emits = {
"on-click": Event;
};
const Comp: CC<Props, Emits> = ({ defineProps, defineEmits }) => {
const props = defineProps({
name: v => toString(v),
});
const emits = defineEmits({
"on-click": () => {},
});
const count = signal(0);
const handleClick = () => {
count.set((c) => c + 1);
emits("on-click", new Event("click"));
};
return () => (
<Host shadowRoot shadowRootMode="open" style={["width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;"]}>
<h1>Hi {props().name}</h1>
<p>Count: {count.value}</p>
<button onClick={handleClick}>Increment</button>
<button onClick={() => count.set((c) => c - 1)}>Decrement</button>
</Host>
);
}
export const MiniElement = functionalCustomElement(Comp);