zudo-react ランタイム
zfb が単一のランタイムで文書全体をレンダリングし、島の部分ツリーを引き受ける仕組み。
zfb が使うレンダリングランタイムは、@takazudo/zfb のサブパスとして提供される zudo-react だけです。JSX は記述の構文であり、その記述から HTML を作る方法や、ブラウザーで島が既存の HTML を引き受ける方法はランタイムが定めます。フレームワークの選択やアダプターレイヤーはありません。
サーバーとクライアントで共通のランタイム
エンジンは zudo-react の連携した 3 つの機能を使います。
文書全体を同期的にレンダリングするサーバーエントリ。 完成したページの記述を受け取り、HTML 文字列を返します。zfb はレンダリング前にページ関数を
awaitできますが、得られたツリーのレンダリングは同期的です。島の部分ツリーを引き受けるクライアントエントリ。 コンポーネントの記述、ラッパー要素、期待するコンポーネントとビルドの識別子を受け取ります。
hydrateはサーバー DOM を検査して引き受け、mountは引き受けるべきサーバー描画済みの子 DOM がない場合に新しい部分ツリーを作ります。zfb の境界メタデータを渡す島の接着コード。
<Island>ラッパーはdivとして文書に残ります。data-zfb-island*属性はコンポーネントとラッパーを識別し、transport、protocol、build、JSON props の属性によってクライアントは対応する出力を引き受けることを検証できます。ランタイムのコメント領域は子の部分ツリー内に限られ、ページの残りを囲みません。
公開エントリはこれらの役割を明示します。
import { signal } from "@takazudo/zfb/zudo-react";
import { renderToString } from "@takazudo/zfb/zudo-react/server";
import { hydrate, mount } from "@takazudo/zfb/zudo-react/client";コンポーネントはセットアップ中に一度実行されます。signal は変化する値を提供し、スコープに属する effect とクリーンアップが、そのコンポーネントインスタンスのブラウザー上の処理を管理します。コンポーネントモデルとランタイム API は zudo-react の概要を参照してください。
島のライフサイクル
生成されたクライアントマニフェストは、登録済みコンポーネントごとに mount 関数を公開します。確定したコントラクトは mount(props, element, mode: "hydrate" | "render") => RootHandle | null です。hydrate はラッパー内にある子 DOM を引き受け、render は新しい子の部分ツリーを作ります。事前検査またはマウントが失敗した場合は null を返し、サーバーマークアップを非活性のまま残します。モードを暗黙に切り替えません。
返されるハンドルは、リソースの解放と DOM の除去を分けます。dispose() は effect、購読、リスナーを停止しますが、子 DOM は残します。そのため zfb はコンテンツを勝手に削除せずページ本文を置き換えられます。unmount() はルートを破棄し、ハンドルが所有する子ノードを除去します。zfb のラッパーは残ります。永続化された島のコンポーネントまたは props が変わると、zfb は古いルートを破棄し、render で置き換えます。変わらない永続ルートは DOM と状態を保持します。
単一の JSX 方言
利用側は jsxImportSource を @takazudo/ に設定します。ランタイムは class や for のような HTML/SVG 属性名、on:click のような関数リスナー、呼び出し側がすでに信頼しているコンテンツのための明示的な rawHtml prop を使います。signal がレンダリング時の状態 hooks に代わります。コンポーネントは状態を一度作り、レンダラーはそれを使うバインディングを更新します。既存のフレームワーク用コンポーネントは、この API に書き換える必要があります。
スケジュール、永続化されたラッパー、サーバーからクライアントへの props の受け渡しについては島を参照してください。記述、prop、ハイドレーションの正確な規則はIsland APIを参照してください。