docview - Pengelola tata letak jendela TypeScript/React/Vue (tab, floating, popout)

 (github.com/mathuo)
5 poin oleh GN⁺ 2025-01-12 | 1 komentar | Bagikan ke WhatsApp
  • dockview adalah pengelola tata letak tanpa dependensi yang mendukung tab, grup, grid, dan split-view, serta dapat digunakan di React, Vue, Angular, dan JavaScript
  • Menyediakan fitur pengelolaan tata letak lengkap termasuk serialisasi/deserialisasi tata letak, dockable view, docking tab dan grup, drag and drop, grup floating, dan jendela popout
  • Menyediakan penerapan tema dan kustomisasi, dukungan Shadow DOM, dukungan sentuh dan mobile, API ekstensi, serta situs dokumentasi dengan contoh langsung
  • Paket dibagi menjadi dockview, dockview-react, dockview-vue, dan dockview-angular; React memerlukan react 16.8 atau lebih baru, Vue memerlukan vue 3.4 atau lebih baru, dan Angular memerlukan @angular/core 21 atau lebih baru sebagai peer dependency
  • Struktur pengembangan berbasis monorepo NX dan Yarn v1 workspaces, dengan build dilakukan dalam urutan dockview-core → dockview → binding framework

Fitur tata letak yang disediakan dockview

  • dockview adalah pengelola tata letak yang mendukung tab, grup, grid, dan split-view
  • Paket dasar untuk JavaScript bersifat zero dependencies dan dapat langsung menggunakan seluruh fitur
  • Fitur yang didukung:
    • serialisasi/deserialisasi tata letak
    • split-view, grid-view, dockable view
    • docking tab dan grup
    • drag and drop
    • jendela popout
    • grup floating
    • dukungan sentuh dan mobile
    • dukungan Shadow DOM
    • penerapan tema dan kustomisasi
    • API ekstensi
    • situs dokumentasi dengan contoh langsung

Paket dan framework yang didukung

  • dockview: paket untuk JavaScript yang menyediakan tanpa dependensi dan fitur lengkap
  • dockview-react: binding React yang memerlukan react 16.8 atau lebih baru sebagai peer dependency
  • dockview-vue: binding Vue 3 yang memerlukan vue 3.4 atau lebih baru sebagai peer dependency
  • dockview-angular: binding Angular yang memerlukan @angular/core 21 atau lebih baru sebagai peer dependency

Instalasi dan contoh penggunaan React

  • Perintah instalasi menggunakan cara memilih paket sesuai framework
    • npm install dockview
    • npm install dockview-react
    • npm install dockview-vue
    • npm install dockview-angular
  • Contoh React menggunakan impor DockviewReact dan dockview-react/dist/styles/dockview.css
  • Pada callback onReady, panggil event.api.addPanel untuk menambahkan panel yang memiliki id, component, dan params
  • Contoh Vue dan Angular dapat dilihat di situs dokumentasi

Struktur pengembangan dan build

  • Proyek ini adalah monorepo NX dan menggunakan Yarn v1 workspaces
  • Perintah pengembangan:
    • yarn install: instal dependensi
    • yarn build: build semua paket
    • yarn test: jalankan pengujian
    • yarn lint: jalankan ESLint
    • yarn format: jalankan Prettier
  • NX mengelola urutan build secara otomatis
    • dockview-core → dockview → dockview-react
    • dockview-core → dockview → dockview-vue
    • dockview-core → dockview → dockview-angular

Kualitas, keamanan, lisensi

  • Proyek ini menekankan cakupan pengujian yang tinggi, build yang transparan, dan analisis kode
  • Mempertimbangkan aspek keamanan, termasuk publishing dan build yang tervalidasi melalui GitHub Actions
  • Verifikasi build dapat dilihat pada panduan terkait provenance di npm
  • Kontribusi dapat diajukan melalui issue atau pull request
  • Lisensinya adalah MIT

Bacaan terkait

1 komentar

 
GN⁺ 2025-01-12
Komentar Hacker News

  • Wah, ini benar-benar pekerjaan yang luar biasa. Bahkan saat pertama melihatnya, TypeScript-nya terasa ditulis dengan benar, dan sepertinya juga tepat menangkap arah zaman. Untuk membangun aplikasi AI ke depan, rasanya kita akan membutuhkan jauh lebih banyak alat dasar seperti ini
    Secara teknis, saya sudah lama penasaran bagaimana komponen di-mount/unmount ketika panel diseret atau status tampilannya berubah. Kadang display:none bisa lebih murah daripada mount/unmount
    Selain itu, karena struktur panel pada dasarnya deklaratif, saya juga penasaran apakah ada rencana mengekspos plugin Vite yang mengekspor layout TypeScript tersimpan dan memetakan fungsi—yakni import TypeScript—ke isi panel. Saya sedang mencoba memikirkannya dengan cara TypeScript yang lebih murni, di luar JSX

    • Mungkin saya melewatkan sesuatu, tapi saya penasaran bagaimana aplikasi AI relevan di sini. Apakah aplikasi ini ditulis dengan AI, atau dibuat untuk aplikasi AI? Saya tidak melihat pengelolaan layout-nya benar-benar dilakukan oleh AI
    • Dari sisi mode rendering, kedua pendekatan didukung
      https://dockview.dev/docs/core/panels/rendering
      Ada opsi untuk selalu mempertahankan isi panel di dalam DOM, dan seperti yang disebutkan, pendekatan yang mirip display: none juga bisa dilakukan. Sebaliknya, ada juga opsi untuk menghapus konten dari DOM
      Dari sudut pandang TypeScript murni, sebagian besar library ditulis dalam TypeScript murni, dengan hanya library wrapper kecil untuk Vue dan React
      Secara teori, wrapper untuk framework lain seperti Angular juga bisa ditulis, dan itu sesuatu yang ingin saya coba tahun ini
      Memuat dan menyimpan state juga didukung
      https://dockview.dev/docs/core/state/save
      Beri tahu saya kalau jawaban ini menjawab pertanyaanmu

  • Benar-benar mengesankan. Ada beberapa hal yang terutama ingin saya puji: 0 dependensi itu sangat bagus untuk paket JavaScript, dokumentasinya juga rapi dan ada contoh. Build transparan juga semestinya menjadi standar
    Saya berharap lebih banyak paket JavaScript seperti ini

    • Bisa jelaskan apa maksud build transparan di sini?
      Dari pemahaman saya setelah sekilas mencari, itu sudah terlihat seperti standar. Kalau ada paket yang setelah dipasang masih mengharuskan saya mencari sendiri proses build manual agar bisa berjalan, saya tidak akan menggunakannya

  • Dockview luar biasa, dan selamat untuk proyek keren dari @mathuo. Baru-baru ini saya menguji 6–7 library dalam kategori ini dengan cukup menyeluruh, dan Dockview jelas berada di jajaran atas. GitHub-nya juga sangat aktif dan dikelola dengan baik
    Satu-satunya alasan saya akhirnya memilih FlexLayout(https://github.com/caplin/FlexLayout) untuk proyek terbaru adalah karena saat itu belum ada dukungan ukuran yang sudah ditentukan/dibatasi, tetapi sejak itu fitur tersebut sudah ditambahkan dengan cara yang sangat baik. Saya juga menyukai cara FL menangani panel samping dengan tab vertikal dan perilaku yang sudah ditentukan
    Saya sangat berharap bisa memakai Dockview di salah satu proyek berikutnya

    • Keduanya terlihat bagus. Estetika kotak drag FlexLayout benar-benar bagus, dan penanganan tab vertikalnya juga detail yang hebat. Namun Dockview juga terlihat sebagai pesaing kuat, dan jika efek HN membuat jumlah bintangnya naik, mungkin itu bisa memberi dorongan untuk mengintegrasikan keunggulan-keunggulan kecil yang dimiliki FlexLayout

  • Saya secara harfiah sedang membuat hal seperti ini sebagai proyek sampingan, jadi senang sekali menemukannya. Sekarang saya bisa membuang kode saya dan lanjut ke tahap proyek berikutnya

  • Bagaimana dibandingkan dengan GoldenLayout? Apakah terinspirasi dari sana?
    Dulu saya sangat menyukai proyek itu, tetapi sayangnya dukungannya benar-benar berhenti. Beberapa orang memang mengambil alih, tetapi meski mereka memperbaruinya dengan antusias, saya tidak melihat jalur upgrade yang realistis
    Ini terlihat bagus, dan saya ingin mencobanya

    • GoldenLayout adalah pengelola layout JavaScript orisinal, dan saya pernah menggunakannya selama beberapa tahun
      Pada awalnya memang terinspirasi dari GoldenLayout dan pengelola layout lain. Tujuan utama di sini adalah 0 dependensi, ditulis dalam TypeScript murni, sambil menyediakan library wrapper untuk framework seperti Vue dan React
      Masukan apa pun sangat saya hargai, dan demo di situs web saat ini memperlihatkan sebagian besar fitur. Daftar Issues juga berisi banyak hal yang direncanakan ke depan
    • Beberapa hari lalu saya mencoba GoldenLayout. Demo dukungan React di situs webnya berbasis v1, tetapi saat dipasang yang terpasang adalah v2, dan v2 tampaknya menghapus dukungan React serta tidak memiliki dokumentasi atau contoh di situs web. v1 pun hanya mendukung komponen berbasis class
      Secara teori, kita bisa memelihara sendiri logika adapter untuk GoldenLayout, tetapi pada dasarnya terlihat seperti sudah mati. Ada library yang lebih baru seperti ini, dengan rasa drag-and-drop yang juga lebih baik
      Saya juga ingat sekitar 6 tahun lalu pernah mencoba memakai GoldenLayout di proyek lain, tetapi karena beberapa masalah yang terasa mengganggu, akhirnya saya mengimplementasikannya sendiri dalam TypeScript murni. Memang banyak dipakai, tetapi dari pengalaman nyata tidak sebagus itu

  • Proyek yang bagus. Akan bagus kalau demo memasukkan konten umum seperti video, dropdown, teks dalam jumlah banyak, dan teks berukuran besar agar bisa menunjukkan bagaimana semuanya ditangani
    Saya juga penasaran apakah ada versi yang hanya berisi panel tanpa chrome jendela

  • Saya memelihara tiling window manager yang ditulis dengan Rust, dan saya benar-benar tidak bisa membayangkan punya kesabaran untuk mengerjakan hal semacam ini dengan JS/TS. Hormat untuk mathuo. Ini salah satu hal paling keren yang saya lihat di HN belakangan ini

  • Benar-benar bagus. Akan menyenangkan kalau ada dukungan SolidJS juga. Belakangan saya tidak punya preferensi khusus antara React dan Solid, tetapi beberapa proyek yang bisa memakai ini dibuat dengan SolidJS

  • Sudah waktunya membuat ulang Mosaic. https://github.com/mlajtos/mosaic

  • Hebat. Selain yang disediakan HTML, apakah ada yang tahu library murni tanpa dependensi serupa untuk kontrol desktop umum seperti menu?