Vidact – React を直接 DOM 操作に変換するコンパイラ
Vidact – a compiler that turns React into direct DOM operations (vidact.dev)
要約
Vidact は、React の関数コンポーネントとフックを直接 DOM 操作にコンパイルする新しいコンパイラです。これにより、仮想 DOM、再レンダリング、バンドルに React を含める必要がなくなり、パフォーマンスが向上します。Vidact Start は、ファイルルート、サーバーローダー、SSR、ハイドレーション、クライアントナビゲーションなども同じコンパイラで生成します。
全文翻訳
Reactを書く。直接DOMをシップする。
ステートは直接DOMへ
コンパイラは、各値に依存する式を特定し、それらのためのアップデーターを記述します。ステートの変更は、コンポーネントを再度実行する代わりに、そのアップデーターを実行します。
ブラウザはVidactの小さなランタイムを実行します。React、Virtual DOM、リコンサイラー、ランタイム依存関係の追跡は、バンドルから除外されます。
Reactランタイム
- ステート変更
- コンポーネント実行
- 要素ツリー作成
- リコンサイル
- DOM更新
Vidact
- ステート変更
- 選択されたアップデーター実行
- DOM更新
コンパイラが記述するもの
コンポーネントを、そのDOM操作の読みやすい展開と比較するか、正確なコンパイラ出力に切り替えます。
より多くのコンパイル済み動作
フォーム、キー付きリスト、条件分岐は同じ更新モデルを使用します。
なぜ今なのか
6年前の実験に戻った
Vidactを2020年に開始し、その後棚上げしました。grep.codemod.comの構築が、それを再開する理由を与えてくれ、そのアプリは現在、本番環境でVidact上で実行されています。
Vidactが再利用するもの
コンパイラはRustで書かれており、AST、スコープ、HIR、CFG、SSA、および依存関係情報のためにReact Compilerの分析インフラストラクチャを使用しています。Vidactは独自のIR、DOMコードジェネレーター、およびランタイムを持っています。
フルスタックアプリを構築する
Vidact Startは、同じコンパイラモデルをSSRとハイドレーションに適用し、ファイルルート、ローダー、クライアントナビゲーションを追加します。このドキュメントサイトはVidactでコンパイルされ、Vidact Startで実行されます。
src/routes/products/$productId.tsx
import { defineFileRoute } from '@vidact/start'
const loader = async ({ params }) => ({
product: await findProduct(params.productId),
})
export function ProductRoute({ loaderData }) {
return <h1>{loaderData.product.name}</h1>
}
export const Route = defineFileRoute({
loader,
component: ProductRoute,
})
サポートされていないReactはコンパイルエラーのまま
サポートされていないコードはビルド時に失敗します。VidactはReactや遅いレンダラーをシップするためにフォールバックすることはないため、今日では意図的に選ばれたReactのサブセットをサポートしています。
コンパイルされるべきReactパターンを見つけましたか？イシューを開く。