コンポーネントファースト戦略
zudo-docがカスタムCSSクラス名ではなく、ユーティリティクラスを持つコンポーネントを使用する理由。
ルール
UIの抽象はコンポーネントです。zudo-reactの.tsxコンポーネントを、対応するzudo-windユーティリティとセマンティックトークンで構成します。バリアントはpropsで表します。コンパイラーが対応しない機能にはzd-名の狭いスコープのCSSを記述し、authored classのカバレッジを登録します。独自のユーティリティ名がCSSを生成すると仮定しないでください。
zudo-docでの使用
サーバーコンポーネントはChild/Descriptionを返し、クライアントJavaScriptなしでHTMLを生成します。クライアントコンポーネントは"use client"を追加し、スコープが所有するシグナルを使用します。どちらもclassとJSX source @takazudo/を使用し、React/Preactのノード型は使用しません。
サーバーレンダリングのコンポーネント
/** @jsxRuntime automatic */
/** @jsxImportSource @takazudo/zfb/zudo-react */
import type { Child } from "@takazudo/zfb/zudo-react";
export function MyBadge({ children }: { children?: Child }) {
return (
<span class="rounded-full bg-surface px-hsp-sm py-vsp-2xs text-caption text-fg">
{children}
</span>
);
}クライアントでハイドレートするアイランド
固定ターゲットのサーバー境界とシリアライズ可能なpropsを使用します。スキャナー到達性と寿命はCustom Componentsを参照してください。
/** @jsxRuntime automatic */
/** @jsxImportSource @takazudo/zfb/zudo-react */
"use client";
import { computed, getScope, signal } from "@takazudo/zfb/zudo-react";
export default function Counter() {
const scope = getScope();
const count = signal(0);
const label = computed(() => `Count: ${count.value}`);
scope.onActivate(() => {
// Browser-only setup belongs here. Return cleanup when needed.
});
return (
<button
type="button"
class="rounded-full bg-surface px-hsp-sm py-vsp-2xs text-caption text-fg"
on:click={() => { count.value += 1; }}
>
{label}
</button>
);
}Propsによるコンポーネントバリアント
バリアントに型を付けます。表示専用なら静的なクラスのlookupで十分です。シグナルに依存するバリアントはcomputedでセットアップ後の変更を反映します。
コンポーネントの合成
小さいコンポーネントを合成します。変化するリストにはキー付きForを使い、固定されたサーバーコンテンツなら通常の配列mapを使えます。保持されたShow(true)の子は、ほかの値が変わってもローカル状態をリセットしません。構造境界は制約されたtable親の外に置きます。
zudo-docのデザイントークンを使う
text-fg、bg-surface、p-hsp-md、text-smallを使用します。CSSカスタムプロパティは既存トークンの値を変更します。新しいユーティリティ名にはwind.tokensの設定も必要です。Design SystemとColorを参照してください。
カスタムCSSを使う場合
.zd-contentのタイポグラフィ、リセット補正、コンポーネントシームはパッケージが所有します。プロジェクトはコピーせず公開CSSをインポートします。カスタムプロパティはインポート後の:rootで上書きします。未対応のユーティリティや明示的なコンポーネントの細部にはスコープを限定したCSSを使い、カスケードを確認します。生成ユーティリティはレイヤー化されず手書きCSSの後に配置されるため、レイヤーだけでは上書きの順序を制御できません。グローバルな!importantよりコンポーネントに限定したセレクターを優先します。
ルール一覧
コンポーネントを合成し、型付きpropsでバリアントを表す。
対応するユーティリティとセマンティックトークンを使う。
コンパイラーの契約に応じてスコープ付きCSSを記述する。
状態とブラウザーのcleanupを所有スコープに所属させる。
カスタマイズ後は生成CSSと実際の操作を確認する。