コア概念

Virtual DOM は Zylix の UI レンダリングエンジンの核心です。実際の DOM/ネイティブ UI の軽量な仮想表現を構築し、効率的な差分検出により最小限の更新を実現します。 用語 # VNode: 仮想 UI ツリーのノード。 Diff: 2つのツリー間の差分。 Patch: 実際の UI に適用する更新操作。 概念 # ┌─────────────────────────────────────────────────────────────────┐ │ Virtual DOM ワークフロー │ │ │ │ 状態変更 ──▶ 新 VTree 構築 ──▶ 差分検出 ──▶ パッチ適用 │ │ │ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │ │ State │ │ VTree │ │ Diff │ │ Native │ │ │ │ v1 → v2 │ ──▶ │ Build │ ──▶ │ Compare │ ──▶ │ UI │ │ │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ │ │ └─────────────────────────────────────────────────────────────────┘ 実装 # VNode 構造体 # VNode は仮想 DOM の基本単位です。

Zylix は集中型のバージョン追跡付き状態管理を採用しています。すべてのアプリケーション状態は Zig で管理され、プラットフォームシェルには読み取り専用で公開されます。 用語 # State: Zig が保持するアプリ全体の状態。 Version: 変更ごとに増える単調増加カウンタ。 Diff: 変更点を示す差分マスク。 Store: 現在/過去の状態を保持するジェネリックコンテナ。 概念 # 設計原則 # 単一の信頼源: グローバルストアがすべてのアプリケーションデータを所有 不変更新: 状態遷移は新しいバージョンを作成 バージョン追跡: すべての変更にバージョン番号を割り当て 差分検出: 変更を追跡して効率的なレンダリングを実現 実装 # アプリケーション状態 # pub const AppState = struct { /// カウンター値 counter: i64 = 0, /// フォーム入力 input_text: [256]u8 = [_]u8{0} ** 256, input_len: usize = 0, /// Todo アイテム todos: [MAX_TODOS]Todo = undefined, todo_count: usize = 0, /// 現在のフィルター filter: Filter = .all, /// ビューデータポインタを取得（ABI 用） pub fn getViewData(self: *const AppState) ?*const anyopaque { return @ptrCast(self); } /// ビューデータサイズを取得（ABI 用） pub fn getViewDataSize(_: *const AppState) usize { return @sizeOf(AppState); } }; pub const Todo = struct { id: u32, text: [128]u8, text_len: usize, completed: bool, }; pub const Filter = enum(u8) { all = 0, active = 1, completed = 2, }; UI 状態 # pub const UIState = struct { /// 現在の画面 screen: Screen = .home, /// ローディング状態 loading: bool = false, pub const Screen = enum(u32) { home = 0, detail = 1, settings = 2, }; }; 統合状態 # pub const State = struct { /// 状態バージョン（単調増加） version: u64 = 0, /// アプリケーション固有の状態 app: AppState = .{}, /// UI 状態ヒント ui: UIState = .{}, /// 最後のエラーメッセージ last_error: ?[]const u8 = null, /// 状態変更後にバージョンを増加 pub fn bumpVersion(self: *State) void { self.version +%= 1; } }; ジェネリックストア # Store は型安全な状態管理を提供します。

コンポーネントは Zylix の再利用可能な UI 構成要素です。構造、スタイル、動作をカプセル化し、任意のプラットフォームにレンダリングできる合成可能なユニットです。 用語 # Component: ボタンやテキストなどの UI 要素。 Props: コンポーネントを設定するデータ。 State: hover や checked などの状態フラグ。 概念 # コンポーネントはデータとして表現され、各プラットフォームのレンダラがネイティブ UI に変換します。 実装 # コンポーネントタイプ # Zylix は一般的な UI 要素用の組み込みコンポーネントタイプを提供します。

Zylix は型安全なイベントシステムを使用してユーザーインタラクションを処理します。イベントはプラットフォームシェルからコアを通じて流れ、状態変更と UI 更新をトリガーします。 用語 # Event: UI から Zig コアに送る型付きアクション。 Dispatch: イベントをハンドラへルーティングする ABI 呼び出し。 Payload: イベントに付随するデータ。 概念 # イベントアーキテクチャ # sequenceDiagram participant User as ユーザー participant Shell as プラットフォームシェル participant Core as Zylix Core (Zig) participant Handler as イベントハンドラ participant State as 状態更新 User->>Shell: ボタンタップ Note over Shell: Zylix イベントに変換 Shell->>Core: zylix_dispatch(EVENT_TODO_ADD, "買い物", 6) Note over Core: イベントタイプを検証 Note over Core: ペイロードを解析 Note over Core: ハンドラにルーティング Core->>Handler: イベントをディスパッチ Note over Handler: switch (event) {<br/> .todo_add => addTodo(text),<br/> .todo_toggle => toggleTodo(id),<br/>} Handler->>State: 状態を更新 Note over State: state.todos[id].completed = true<br/>state.version += 1<br/>scheduleRender() State-->>Core: 結果コード Core-->>Shell: 結果を返す 実装 # イベントタイプ # 組み込みイベント # Zylix は UI インタラクション用の一般的なイベントタイプを提供します。