jac-cl-components

Define a `def:pub` function returning `JsxElement` in a `.jac` file with JSX or npm imports. Declare reactive state with `has` fields, mount effects with `async can with entry`, and event handlers as `def` methods typed with DOM events like `MouseEvent`.

Declare `has count: int = 0;` at component scope and assign directly with `count = count + 1;` to trigger re-renders. Never mutate in place with methods like `append` or item assignment, since React only re-renders on a new value assignment.

Jac compiles `can with entry` blocks to `useEffect` automatically, so manual import is rarely needed. For acquire-then-release pairs like intervals, import `useEffect` from react and return a cleanup lambda, since `entry` and `exit` compile to separate closures.

In-place mutation such as `todos.append(x)` or `todos[0] = y` does not re-render because React requires a new value. Rebind a fresh list instead, for example `todos = todos + [x];`, so the state assignment triggers an update.

Type the prop with `Callable[[str], None]` for a one-string callback and pass it as a JSX attribute like `onDelete={remove}`. Wrap the call in a local handler so parent-side data such as a row id is closed over when the event fires.

Calling `.map()` on a Jac list fails with E1030; use a statement slot like `{for x in items { <li>{x}</li> }}` instead. Also ensure `has` state is typed with the actual imported node types rather than `list[any]`, which loses element typing.