reatom-jsx

Reatom JSX

@reatom/jsx を実装または説明するときは、このスキルを使用してください。このスキルに同梱されている正規のリファレンスとして、REFERENCE.md を参照してください。

使用方法

1. REFERENCE.md の関連セクションを読んでください。React/Vue の JSX のセマンティクスを前提にしないでください（仮想 DOM、差分計算、コンポーネントの再レンダリングはありません）。
2. Reatom のコア（atoms、wrap、async、routing）については、reatom スキルを使用してください。
3. プルリクエストと懐疑的な視点での検証には、JSX 固有のパターンにこのスキルを加えて reatom-review を使用してください。

セクション一覧

REFERENCE.md の関連箇所だけを開くには、この一覧を使用してください。

トピック	セクション
インストール、tsconfig、Vite	Installation, Framework compatibility
アプリの起動	Example, Hot module replacement
Props、children、bindings	Reference → Props, Children, Models
インラインおよび css-prop のスタイル	Reference → style props, style:*, CSS-in-JS
クラス名	Reference → class or className, reatomClassName
条件付きスタイル／テーマスタイル	Reference → Conditional Styles with Attributes, cssVar
コンポーネントとリスト	Reference → Components
Props の一括バインディング	Reference → $spread
SVG と生のマークアップ	Reference → SVG
マウント時の副作用	Reference → ref props
エラー、境界、jsxError	Error handling
ユーティリティ	Utilities → reatomClassName, css, cssVar, <Bind>
TypeScript	TypeScript
SSR とキー付きリスト	Limitations

実装のデフォルト

• コンポーネントはマウント時に一度だけ評価される通常の関数です。更新にはアトムとリアクティブなプロパティを使用してください。
• 読み取り：引数なしでアトムを呼び出します。書き込み：.set(...) を使用します。
• Reatom の状態を扱う on:* ハンドラーは自動的にラップされるため、JSX 内で手動でラップしないでください。
• JSX 要素のインスタンスを複数の場所で再利用しないでください。使用するたびにコンポーネント関数またはファクトリーを呼び出してください。
• 通常の書き込み可能なアトム：検索、トグル、連結リストの行アトムには model:value／model:checked を使用します。
• 実際のフォーム：@reatom/core の reatomForm を使用し、<form model={form}> と model:field={form.fields.x} を指定します。フィールドアトムに model:value を使用しないでください（field.change を迂回します）。
• フォーム送信ローダー：フォームの [data-submitting] にスタイルを適用します（model={form} により自動設定されます）。[type='submit']::after には CSS のみでスピナーを設定します。
• SPA ナビゲーションには reatomRoute を使用します。リンクには href={route.path(params})、プログラムからの遷移には route.go(params) を使用してください。reatom スキルの Routing セクションを参照してください。
• セマンティクスが重要な場合は、DOM プロパティに prop:*、属性に attr:* を使用します。
• mount(root, <App />) でマウントし、破棄時（Vite HMR を含む）に unmount() を呼び出します。マウントとルートの HMR 破棄が自動で行われるよう、@reatom/vite（reatom() プラグイン）を推奨します。
• 動的リストでは、要素をアトムに格納するか、リアクティブな子の中でマップします。キーによる差分調整はありません。
• <ErrorBoundary fallback={...}> と遅延評価される子 {() => <Child />} で UI のエラーを分離します。jsxError／addCallHook(jsxError, ...) でグローバルに追跡します。
• css プロパティ内に [data-x] &（または :where(...) &）を書かないでください。同じ要素の状態には、data-x={state} をバインドし、&[data-x='v'] で選択します。祖先要素の状態には、cssVar(...).provide(state) で値を渡し、${token.container('v')} { … } でクエリします。値の違いにはカスタムプロパティを、コンテンツの違いにはリアクティブな子を優先し、セレクターとスタイルクエリは構造上の違いにのみ使用します。

REFERENCE.md とローカルの例が異なる場合は、リファレンスを優先し、例が誤っていれば修正してください。