reatom-jsx

Reatom JSX

Use this skill when implementing or explaining @reatom/jsx. Treat REFERENCE.md as the canonical reference bundled with this skill.

How to use

1. Read the relevant sections of REFERENCE.md — do not assume React/Vue JSX semantics (no virtual DOM, no diffing, no component re-renders).
2. For Reatom core (atoms, wrap, async, routing), use the reatom skill.
3. For pull requests and skeptic validation, use reatom-review plus this skill for JSX-specific patterns.

Section map

Use this map to open only the relevant parts of REFERENCE.md:

Topic	Section
Install, tsconfig, Vite	Installation, Framework compatibility
Bootstrapping the app	Example, Hot module replacement
Props, children, bindings	Reference → Props, Children, Models
Inline and css-prop styles	Reference → style props, style:*, CSS-in-JS
Class names	Reference → class or className, reatomClassName
Conditional / theme styles	Reference → Conditional Styles with Attributes, cssVar
Components and lists	Reference → Components
Bulk prop binding	Reference → $spread
SVG and raw markup	Reference → SVG
Mount side effects	Reference → ref props
Errors, boundaries, jsxError	Error handling
Utilities	Utilities → reatomClassName, css, cssVar, <Bind>
TypeScript	TypeScript
SSR and keyed lists	Limitations

Implementation defaults

• Components are plain functions evaluated once at mount; use atoms and reactive props for updates.
• Reads: zero-arg atom call. Writes: .set(...).
• on:* handlers that touch Reatom state are wrapped automatically; do not wrap manually in JSX.
• Never reuse a JSX element instance in multiple places — call the component function or factory each time.
• Plain writable atoms: model:value / model:checked for search, toggles, linked-list row atoms.
• Real forms: reatomForm from @reatom/core with <form model={form}> and model:field={form.fields.x} — never model:value on field atoms (bypasses field.change).
• Form submit loader: style [data-submitting] on the form (set automatically by model={form}); CSS-only spinner on [type='submit']::after.
• For SPA navigation use reatomRoute: links via href={route.path(params)}, programmatic moves via route.go(params) — see the reatom skill Routing section.
• Use prop:* for DOM properties, attr:* for attributes when semantics matter.
• Mount with mount(root, <App />); call unmount() on teardown (including Vite HMR). Prefer @reatom/vite (reatom() plugin) so mount/route HMR dispose is automatic.
• For dynamic lists, store elements in atoms or map inside reactive children — no keyed reconciliation.
• Isolate UI failures with <ErrorBoundary fallback={...}> and lazy children {() => <Child />}; track globally via jsxError / addCallHook(jsxError, ...).
• Never write [data-x] & (or :where(...) &) in a css prop. State on the same element: bind data-x={state} and select &[data-x='v']. State from an ancestor: provide it with cssVar(...).provide(state) and query ${token.container('v')} { … }. Prefer custom properties for value differences and reactive children for content differences; reserve selectors and style queries for structural differences.

When REFERENCE.md and local examples disagree, prefer the reference and fix the example if it is wrong.