Vidact – React を直接 DOM 操作に変換するコンパイラ

React を記述し、DOM を出荷します。 Vidact は、関数コンポーネントとフックを直接 DOM 操作にコンパイルします。仮想 DOM、再レンダリング、バンドル内の React は不要です。 始める 続きを読む ドキュメント 以下のすべての例は通常の React で、Vidact によってコンパイルされ、このページで実行されています。 カウンター フォーム キー付きリスト ブランチ Counter.tsx import { useState } from 'react' export function Counter() { const [count, setCount] = useState(0) return ( <div> <button onClick={() => setCount(count + 1)}> Increment </button> <output>Count: {count}</output> </div> ) } 結果 Increment Count: 0 コンポーネント呼び出し 1 DOM 操作 0 ツリー差分 0 このデモを監視している MutationObserver によってライブでカウントされています。 仕組み 1. コンパイル コンパイラは、すべての式が読み取る値にマッピングします。コンパイルできないコードは、その正確な行でビルドを停止します。 2. 一度マウント コンポーネントは一度実行され、DOM を構築します。レンダーループや差分を取るツリーはありません。 3. 外科的アップデート ステートの書き込みは、それを読み取るアップデーター（テキストノード、属性、リスト行）のみを実行します。 フルスタック、同じ方法で Vidact Start は、ファイルルート、サーバーローダー、SSR、ハイドレーション、クライアントナビゲーションを追加します。これらはすべて同じコンパイラによって生成されるため、サーバーとブラウザの出力は構築によって一致します。 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, }) Vidact はベータ版です。サポートされているものは文書化されており、サポートされていないものはビルド時に失敗します。 始める