dockview - TypeScript/React/Vue のウィンドウレイアウトマネージャー（タブ、フローティング、ポップアウト）

 (github.com/mathuo)
5 ポイント 投稿者 GN⁺ 2025-01-12 | 1件のコメント | WhatsAppで共有
  • dockview は、タブ、グループ、グリッド、split-view をサポートする依存関係なしのレイアウトマネージャーで、React、Vue、Angular、JavaScript で利用可能
  • レイアウトのシリアライズ/デシリアライズ、dockable view、タブ・グループのドッキング、ドラッグ＆ドロップ、フローティンググループ、ポップアウトウィンドウを含む包括的なレイアウト管理機能を提供
  • テーマ適用とカスタマイズ、Shadow DOM 対応、タッチ・モバイル対応、拡張 API、ライブサンプル付きのドキュメントサイトを提供
  • パッケージは dockview、dockview-react、dockview-vue、dockview-angular に分かれており、React は react 16.8 以上、Vue は vue 3.4 以上、Angular は @angular/core 21 以上を peer dependency として要求
  • 開発構成は NX モノレポと Yarn v1 workspaces ベースで、dockview-core → dockview → フレームワークバインディング の順にビルドされる

dockview が提供するレイアウト機能

  • dockview は、タブ、グループ、グリッド、split-view をサポートするレイアウトマネージャー
  • JavaScript 向けの基本パッケージは zero dependencies で、全機能をすぐに利用可能
  • 対応機能:
    • レイアウトのシリアライズ/デシリアライズ
    • split-view、grid-view、dockable view
    • タブとグループのドッキング
    • ドラッグ＆ドロップ
    • ポップアウトウィンドウ
    • フローティンググループ
    • タッチとモバイル対応
    • Shadow DOM 対応
    • テーマ適用とカスタマイズ
    • 拡張 API
    • ライブサンプル付きのドキュメントサイト

対応パッケージとフレームワーク

  • dockview: JavaScript 向けパッケージで、依存関係なしで全機能を提供
  • dockview-react: React バインディングで、peer dependency として react 16.8 以上を要求
  • dockview-vue: Vue 3 バインディングで、peer dependency として vue 3.4 以上を要求
  • dockview-angular: Angular バインディングで、peer dependency として @angular/core 21 以上を要求

インストールと React の使用例

  • インストールコマンドは、フレームワーク別のパッケージを選ぶ方式
    • npm install dockview
    • npm install dockview-react
    • npm install dockview-vue
    • npm install dockview-angular
  • React の例では、DockviewReact と dockview-react/dist/styles/dockview.css をインポートして使用
  • onReady コールバックで event.api.addPanel を呼び出し、id、component、params を持つパネルを追加
  • Vue と Angular の例はドキュメントサイトで確認可能

開発構成とビルド

  • プロジェクトは NX モノレポで、Yarn v1 workspaces を使用
  • 開発コマンド:
    • yarn install: 依存関係のインストール
    • yarn build: すべてのパッケージをビルド
    • yarn test: テストを実行
    • yarn lint: ESLint を実行
    • yarn format: Prettier を実行
  • NX がビルド順序を自動管理
    • dockview-core → dockview → dockview-react
    • dockview-core → dockview → dockview-vue
    • dockview-core → dockview → dockview-angular

品質、セキュリティ、ライセンス

  • プロジェクトは高いテストカバレッジ、透明性のあるビルド、コード分析を重視
  • GitHub Actions による検証済みの publishing とビルドを含め、セキュリティに配慮
  • ビルド検証は npm の provenance 関連の案内で確認可能
  • コントリビューションは issue または pull request で受け付け
  • ライセンスは MIT

関連記事

1件のコメント

 
GN⁺ 2025-01-12
Hacker News のコメント

  • うわ、本当に素晴らしい仕事だ。初見でも TypeScript がきちんと書かれている感じがするし、時代の流れを捉えているのもその通りだと思う。これから AI アプリケーションを作るには、こうした基礎ツールがもっとずっと必要になっていく気がする。
    技術的には、パネルをドラッグしたり表示状態が変わったりするときに、コンポーネントをマウント／アンマウントする仕組みが以前から気になっていた。場合によっては、マウント／アンマウントより display:none のほうが安く済むこともある。
    それから、パネル構造は実質的に宣言的なので、保存済みの TypeScript レイアウトを書き出し、関数、つまり TypeScript import がパネル内容にマッピングされるような形の Vite プラグインを公開する予定があるのかも気になる。JSX の外側で、より純粋な TypeScript 的なやり方として考えている。

    • 何か見落としているのかもしれないが、ここで AI アプリケーションがどう関係するのか気になる。このアプリケーションが AI で書かれた、あるいは AI アプリケーション向けに作られたということなのか？ 実際のレイアウト管理を AI で行うようには見えない。
    • レンダリングモードの面では、両方のアプローチをサポートしている。
      https://dockview.dev/docs/core/panels/rendering
      パネル内容を常に DOM 内に保持するオプションがあり、あなたの言うように display: none に近いアプローチも可能。逆に、内容を DOM から削除するオプションもある。
      純粋な TypeScript という観点では、ライブラリの大部分は純粋な TypeScriptで書かれていて、Vue と React 向けの小さなラッパーライブラリだけがある。
      理論上は Angular のような別のフレームワーク向けラッパーも書けるし、今年中にやってみたい作業だ。
      状態の読み込みと保存にも対応している。
      https://dockview.dev/docs/core/state/save
      この回答で質問が解決するか教えてほしい。

  • 本当に印象的だ。特にいくつか大きく称賛したい点がある。依存関係 0 個は JavaScript パッケージとして非常に良いし、ドキュメントもきれいで例もある。透明なビルドも標準になるべきだ。
    もっと多くの JavaScript パッケージがこうであってほしい。

    • ここでいう透明なビルドがどういう意味なのか説明してもらえる？
      ちょっと検索して理解した限りでは、すでに標準のように見える。インストールしたあと動かすために手動のビルド手順を自分で調べないといけないパッケージなら、そもそも使わない。

  • Dockview は素晴らしく、@mathuo の見事なプロジェクトに祝意を送りたい。最近このカテゴリのライブラリを 6〜7 個かなり徹底的にテストしたが、Dockview は間違いなく上位に入る。GitHub も非常に活発で、よくメンテナンスされている。
    最近のプロジェクトで最終的に FlexLayout(https://github.com/caplin/FlexLayout) を選んだ唯一の理由は、事前定義／制限付きサイズのサポートがなかったことだが、その後とても良い形で追加された。また、FL が縦タブと事前定義された動作でサイドパネルを扱うやり方も気に入っていた。
    次のプロジェクトのどれかで Dockview を使えることをかなり楽しみにしている。

    • どちらも良さそうだ。FlexLayout のドラッグボックスの見た目は本当に良く、縦タブの扱いも素晴らしいディテールだ。ただ Dockview も強力な競合に見えるし、HN 効果でスターが増えれば、FlexLayout が持つ比較的小さな利点を取り込む推進力を得られるかもしれない。

  • 趣味プロジェクトで文字どおりこういうものを作っていたところだったので、これを見つけられて本当にうれしい。これで自分のコードを捨てて、プロジェクトの次の段階に進める。

  • GoldenLayout と比べるとどうなのか？ そこから着想を得たのか？
    以前そのプロジェクトが本当に好きだったが、残念ながらサポートは完全に止まってしまった。何人かが引き継ぎはしたものの、熱心に更新していたにもかかわらず、現実的なアップグレードパスはあまり見えなかった。
    これは良さそうで、試してみたい。

    • GoldenLayout は元祖 JavaScript レイアウトマネージャーで、以前に何年も使っていた。
      最初は GoldenLayout を含む他のレイアウトマネージャーから着想を得たのは確かだ。ここでの主な目標は依存関係 0 個で、純粋な TypeScript で書きつつ、Vue や React のようなフレームワーク向けのラッパーライブラリを提供することだった。
      どんなフィードバックでもありがたいし、ウェブサイトのデモは現在の機能の大半を示している。Issues 一覧には今後予定していることも多い。
    • 数日前に GoldenLayout を使ってみた。ウェブサイトの React 対応デモは v1 基準だが、インストールしてみると v2 が入り、v2 では React 対応が削除されたようで、ウェブサイトにドキュメントや例がない。v1 もクラスベースコンポーネントしかサポートしていなかった。
      理論上は GoldenLayout 用のアダプターロジックを自分で保守できるかもしれないが、事実上死んだ状態に見える。このライブラリのように、より新しく、ドラッグ＆ドロップの感触もより良いライブラリがある。
      6 年ほど前、別のプロジェクトで GoldenLayout を使おうとして、体感上の問題がいくつかあったため、結局純粋な TypeScript で自前実装した記憶もある。広く使われてはいるが、実体験としてはそれほど素晴らしくはなかった。

  • 良いプロジェクトだ。デモに動画、ドロップダウン、大量のテキスト、大きなサイズのテキストのような一般的なコンテンツを入れて、どう処理されるのか見せてくれるとよさそうだ。
    それと、ウィンドウクロームなしでパネルだけのバージョンもあるのか気になる。

  • Rust で書いたタイル型ウィンドウマネージャーをメンテしているが、この種の作業を JS/TS でやり遂げる忍耐力は到底想像できない。mathuo に敬意を表する。最近 HN で見たものの中でも最もクールなものの一つだ。

  • 本当に良い。SolidJS 対応もあるといい。最近 React と Solid の間に特別な好みはないが、これを使えそうなプロジェクトがいくつか SolidJS で作られている。

  • Mosaic を作り直す時が来た。 https://github.com/mlajtos/mosaic

  • 素晴らしい。HTML が提供するもの以上に、メニューのような一般的なデスクトップコントロール向けの、同じような依存関係なしの純粋なライブラリを知っている人はいる？