概要

slot-jsx-pragmaは、JSXのレンダリング時にスロット（slot）パターンを成立させるためのカスタムJSXランタイム（pragma）を提供するライブラリです。特にRadix UIのasChildパターンのように、ラッパーコンポーネント内で子要素を「そのまま差し替えられる」仕組みを宣言的に扱えるよう設計されています。TypeScriptで型安全に動作し、React.cloneElementに頼らない再構築アプローチを採用している点が特徴です。ネストしたスロッタブルコンポーネントや非同期コンポーネントとの組み合わせにも配慮されており、他のJSXプラグマとも合成可能です。

リポジトリの統計情報

スター数: 18
フォーク数: 0
ウォッチャー数: 18
コミット数: 2
ファイル数: 7
メインの言語: TypeScript

主な特徴

カスタムJSXランタイムでJSXをランタイム変換しスロットを実現
asChildパターンに基づくネスト可能なスロッタブルコンポーネントをサポート
TypeScriptの型安全性を維持しつつ、React.cloneElementを使わない実装
他のJSXプラグマと合成（Composable）可能で非同期コンポーネントにも対応

技術的なポイント

slot-jsx-pragmaの中心は「JSXの出力をフックして、スロット情報を保持・解決する」ランタイム処理です。従来のアプローチではReact.cloneElementで子要素にpropsを注入したり、Reactの要素を直接操作して差し替えを行うことが多いですが、本プロジェクトは要素の再構築（element reconstruction）という手法を採っています。これにより、参照関係やイベントハンドラを壊さずに子要素を安全に差し替えられる設計になっています。

TypeScript側ではasChildパターンに対応する型定義を整備し、スロットを受け取るコンポーネントとそれを提供する子コンポーネント間で型が崩れないよう配慮されています。ランタイムはJSXの標準的な出力（jsx/jsxs/jsxDEV）に介入する形で動作し、必要なメタデータ（スロット識別子や差し替え指定）を付与します。最終的なレンダリング時にスロット解決器がツリーを探索して、スロッタブルな箇所を発見し、宣言に従って入れ替えまたは合成を行います。

さらに「ネストしたスロット」を意識して設計されているため、深く入れ子になったコンポーネント群でも期待通りにスロット解決が行われます。非同期でロードされるコンポーネント（Async Components）との相性も考慮されており、遅延レンダリングや動的インポートが行われるケースでも安定して動作するよう設計されています。加えて、他のJSXプラグマ（例えば別のカスタムランタイム）と合成可能な点は、既存のエコシステムと競合せず導入しやすい利点です。

実装上の注意点としては、JSXランタイムフックを利用するためビルド設定やトランスパイラ（TypeScript/ Babel）の設定を正しく行う必要がある点、また独自のランタイム挙動があるためテストやデバッグ時に挙動理解が求められる点が挙げられます。とはいえ、APIはasChildパターンに親和的なので既存のパターンから自然に移行できます。

プロジェクトの構成

主要なファイルとディレクトリ：

.gitignore: file
README.md: file
app: dir — サンプルアプリやデモ用コード（動作例が入っている想定）
package.json: file — 依存関係とスクリプト
packages: dir — 実際のpragma本体や関連パッケージ群が格納
tsconfig.json: file — TypeScript設定
LICENSE: file

…他 2 ファイル

各ファイルの簡単な説明：

README.md: ライブラリの目的、使い方、特徴の概要が記載されています。導入手順やサンプルコードがあると想定されます。
appディレクトリ: 実際にpragmaを使ったサンプルやプレイブックを含み、動作確認やデモに役立つ構成です。
packagesディレクトリ: 複数パッケージのモノレポ形式（もしくは分割パッケージ）で、ランタイム／型定義／ユーティリティなどを分離している可能性があります。
package.json / tsconfig.json: ビルド、テスト、ランタイム設定がここで管理されています。JSXランタイムの指定やコンパイラオプションが重要です。

まとめ

TypeScriptで型安全かつReact.cloneElement非依存の、宣言的なスロット対応JSXランタイムを提供する小型ライブラリです。導入で柔軟なスロット設計が可能になります。

リポジトリ情報：

名前: slot-jsx-pragma
説明: 説明なし
スター数: 18
言語: TypeScript
URL: https://github.com/jjenzz/slot-jsx-pragma
オーナー: jjenzz
アバター: https://avatars.githubusercontent.com/u/175330?v=4

READMEの抜粋：

🎰 slot-jsx-pragma

A custom JSX pragma that enables declarative nested slottable components using the asChild pattern, inspired by Radix UI.

Features

✅ Custom JSX Runtime: Transforms JSX at runtime to support slotting
✅ Composable: Can be composed with other JSX pragmas
✅ Nested Slottables: Supports deeply nested slottable components
✅ Type-Safe: Full TypeScript support
✅ No React.cloneElement: Uses a safe element reconstruction approach
✅ **Async Comp…

slot-jsx-pragma — スロット対応JSXプラグマ