概要
zfb の JSX ランタイム、パッケージのサブパス、コンポーネントを一度だけセットアップするモデルを紹介します。
zudo-react が提供するもの
zudo-react は @takazudo/zfb に同梱される JSX ランタイムです。コンポーネントのモデルは明示的でシンプルです。コンポーネント関数はレンダリングされるインスタンスごとに一度実行され、signal が変化する値を保持します。レンダラーはコンポーネントを再実行せずに、バインドされた DOM を更新します。
このランタイムは React や Preact の互換レイヤーではありません。hooks、context、portal、クラスコンポーネント、汎用的なツリーの差分更新はありません。JSX は zudo-react に渡す記述を作りますが、ランタイムが React と同じように動作するわけではありません。
JSX を設定する
zudo-react を含むバージョンの zfb パッケージをインストールします。zfb build と zfb dev は、プロジェクトに tsconfig.json がなくても、ページ、コンポーネント、アイランドの JSX を自動変換と固定の import source @takazudo/ でコンパイルします。プロジェクトの tsconfig.json にある jsx と jsxImportSource はこの変換に影響しません。ファイル単位の @jsxImportSource pragma はそのファイルの build 変換を上書きできますが、React や Preact の pragma を指定しても、それらのレンダラーがサポートされるわけではありません。zfb check、エディター、TypeScript によるテストファイルの型検査で同じランタイムの JSX 型を使うには、次の設定を tsconfig.json に追加します。テストランナーの変換設定は、ランナー自身の設定ファイルに指定してください。
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "@takazudo/zfb/zudo-react"
}
}コンパイラーは本番用ヘルパーを @takazudo/zfb/zudo-react/jsx-runtime から解決します。開発用の変換には @takazudo/zfb/zudo-react/jsx-dev-runtime を使います。どちらもパッケージのサブパスであり、zudo-react は独立したパッケージではありません。
zfb check の TypeScript 検査にはプロジェクトの tsconfig.json が必要です。zfb check --skip-tsc はその検査を省略し、ほかのチェックを実行します。zfb check を参照してください。
ランタイムの値はコアエントリからインポートします。
import { computed, signal } from "@takazudo/zfb/zudo-react";コンポーネントは一度だけ実行される
セットアップ中に signal を作り、その signal 自体を JSX に渡します。イベントで値を変更すると、次にスケジュールされた flush でテキストのバインディングが更新されます。
import { signal } from "@takazudo/zfb/zudo-react";
function Counter() {
const count = signal(0);
return (
<button on:click={() => { count.value += 1; }}>
Clicked {count} times
</button>
);
}コンポーネント関数は、このインスタンスをレンダリングするときに一度呼ばれます。その後 count が変わるとテキストの領域が更新されますが、Counter は再実行されません。マウントされた各インスタンスには、それぞれのセットアップとスコープがあります。
signal を渡すと更新されるバインディングができます。JSX を作るときに値を読むと、その時点のスナップショットになります。
<p>{count}</p>
<p>{count.value}</p>この例では、最初の子はリアクティブです。二番目の子はセットアップ中に読み取った数値のままです。この規則は、コンポーネントの props を通して値を渡す場合にも適用されます。
次に読むページ
以降のページでは、JSX の記述、リアクティブな更新、スコープ、サーバーレンダリング、ハイドレーション、フォーム、構造を持つ領域を説明します。島のスケジュールと永続化に関する zfb 側の仕組みは、島のガイドを参照してください。