ビュー

JSX が組み立てるのはネイティブ UI であり、HTML ではありません。子が状態の変化に合わせて現れたり消えたり並び替わったりするときは、Show と For を使います。

#ビューの仕組み

コンポーネント関数は一度だけ実行されます。Solid は、変化する値を読むプロパティと子スロットを更新します。各ウィンドウは独自のルートを持ち、ウィンドウが閉じると破棄されます。

#条件付きコンテンツ

<Show when={expanded()} fallback={<Text>Collapsed</Text>}>
  <Text>Expanded content</Text>
</Show>

枝を取り除くと、その副作用は破棄されます。兄弟のコンテンツはそのままです。

#リスト

<For each={items()}>{item => <Text>{item.name}</Text>}</For>

状態を持つ行には安定した識別子を付け、並び替えても状態が保たれるようにします。長いコレクションには Table または Tree を使います。

#ウィンドウのライフサイクル

各 Window は独立したルートを持ちます。1 つのウィンドウを閉じても、他のウィンドウは閉じません。表示中のウィンドウがないとき（hasVisibleWindows が false）は、Dock アイコンから新しいウィンドウを開きます。

#現在のウィンドウ

function Content() {
  const window = Window.getCurrentWindow();
  return <Button onClick={() => window.close()}>Close</Button>;
}

セットアップ中にウィンドウを保持するか、非同期処理に渡します。後から無関係なコールバックで取得し直してはいけません。

#テスト

quickgui check
quickgui test

examples/components-typescript は UI ギャラリーです。examples/quick-git-typescript は、メニュー、ダイアログ、複数ウィンドウを持つより大きなアプリです。