docview - TypeScript/React/Vue pencere yerleşim yöneticisi (sekme, floating, pop-out)

 (github.com/mathuo)
5 puan yazan GN⁺ 2025-01-12 | 1 yorum | WhatsApp'ta paylaş
  • dockview; sekme, grup, grid ve split-view destekleyen bağımlılıksız bir yerleşim yöneticisi olup React, Vue, Angular ve JavaScript ile kullanılabilir
  • Yerleşim serileştirme/deserileştirme, dock edilebilir view'ler, sekme ve grup dock etme, sürükle-bırak, floating gruplar ve pop-out pencereler dahil kapsamlı yerleşim yönetimi özellikleri sunar
  • Tema uygulama ve özelleştirme, Shadow DOM desteği, dokunmatik ve mobil desteği, genişletme API'si ve canlı örnekler içeren bir dokümantasyon sitesi sağlar
  • Paketler dockview, dockview-react, dockview-vue, dockview-angular olarak ayrılır; React için peer dependency olarak react 16.8+, Vue için vue 3.4+, Angular için @angular/core 21+ gereklidir
  • Geliştirme yapısı NX monorepo ve Yarn v1 workspaces tabanlıdır; derleme sırası dockview-core → dockview → framework binding şeklindedir

dockview'in sunduğu yerleşim özellikleri

  • dockview, sekme, grup, grid ve split-view destekleyen bir yerleşim yöneticisidir
  • JavaScript için temel paket zero dependencies yapısındadır ve tüm özellikleri doğrudan kullanıma sunar
  • Desteklenen özellikler:
    • Yerleşim serileştirme/deserileştirme
    • split-view, grid-view, dock edilebilir view
    • Sekme ve grup dock etme
    • Sürükle-bırak
    • Pop-out pencereler
    • Floating gruplar
    • Dokunmatik ve mobil desteği
    • Shadow DOM desteği
    • Tema uygulama ve özelleştirme
    • Genişletme API'si
    • Canlı örnekler içeren dokümantasyon sitesi

Desteklenen paketler ve framework'ler

  • dockview: JavaScript paketi; bağımlılıksızdır ve tüm özellikleri sunar
  • dockview-react: React binding'i; peer dependency olarak react 16.8+ gerektirir
  • dockview-vue: Vue 3 binding'i; peer dependency olarak vue 3.4+ gerektirir
  • dockview-angular: Angular binding'i; peer dependency olarak @angular/core 21+ gerektirir

Kurulum ve React kullanım örneği

  • Kurulum komutları, framework'e göre paket seçilerek kullanılır
    • npm install dockview
    • npm install dockview-react
    • npm install dockview-vue
    • npm install dockview-angular
  • React örneğinde DockviewReact ve dockview-react/dist/styles/dockview.css içe aktarılıp kullanılır
  • onReady callback'inde event.api.addPanel çağrılarak id, component, params içeren bir panel eklenir
  • Vue ve Angular örnekleri dokümantasyon sitesinde görülebilir

Geliştirme yapısı ve derleme

  • Proje bir NX monorepo olup Yarn v1 workspaces kullanır
  • Geliştirme komutları:
    • yarn install: Bağımlılıkları kurar
    • yarn build: Tüm paketleri derler
    • yarn test: Testleri çalıştırır
    • yarn lint: ESLint'i çalıştırır
    • yarn format: Prettier'ı çalıştırır
  • NX derleme sırasını otomatik olarak yönetir
    • dockview-core → dockview → dockview-react
    • dockview-core → dockview → dockview-vue
    • dockview-core → dockview → dockview-angular

Kalite, güvenlik, lisans

  • Proje; yüksek test kapsamı, şeffaf derleme ve kod analizine vurgu yapar
  • GitHub Actions üzerinden doğrulanan publishing ve derlemeleri içerecek şekilde güvenlik gözetilir
  • Derleme doğrulaması npm'nin provenance ile ilgili rehberinde incelenebilir
  • Katkılar issue veya pull request ile kabul edilir
  • Lisans MIT'tir

İlgili okumalar

1 yorum

 
GN⁺ 2025-01-12
Hacker News yorumları

  • Vay canına, gerçekten müthiş bir iş. İlk bakışta bile TypeScript’in düzgün yazıldığı hissini veriyor ve zamanın ruhunu da yakalamış gibi. İleriye dönük olarak yapay zeka uygulamaları geliştirmek için bu tür temel araçlara çok daha fazla ihtiyaç duyulacak gibi görünüyor
    Teknik tarafta ise, paneller sürüklenirken veya görünürlük durumu değişirken bileşenleri mount/unmount etme yaklaşımını uzun zamandır merak ediyordum. Bazen display:none, mount/unmount’tan daha düşük maliyetli olabilir
    Ayrıca panel yapısı özünde deklaratif olduğundan, kaydedilmiş TypeScript yerleşimlerini dışa aktarıp işlevlerin, yani TypeScript import’larının panel içeriğine eşlendiği bir Vite eklentisi sunmayı düşünüp düşünmediğinizi de merak ediyorum. JSX dışında daha saf bir TypeScript yaklaşımı üzerine düşünüyorum

    • Bir şeyi kaçırmış olabilirim ama burada yapay zeka uygulamalarının nasıl ilgili olduğunu merak ettim. Bu uygulama yapay zeka ile mi yazıldı ya da yapay zeka uygulamaları için mi üretildi? Gerçek yerleşim yönetiminin yapay zeka ile yapıldığı pek görünmüyor
    • Render modu açısından her iki yaklaşım da destekleniyor
      https://dockview.dev/docs/core/panels/rendering
      Panel içeriğini her zaman DOM içinde tutma seçeneği var; dediğiniz gibi display: none’a yakın bir yaklaşım da mümkün. Tersine, içeriği DOM’dan kaldıran bir seçenek de mevcut
      Saf TypeScript açısından bakarsak, kütüphanenin büyük kısmı saf TypeScript ile yazıldı ve yalnızca Vue ile React için küçük wrapper kütüphaneleri var
      Teorik olarak Angular gibi başka framework’ler için de wrapper yazılabilir; bunu bu yıl içinde denemek istediğim işler arasında
      Durum yükleme ve kaydetme de destekleniyor
      https://dockview.dev/docs/core/state/save
      Umarım bu yanıt soruyu açıklığa kavuşturur; işe yarayıp yaramadığını söylerseniz sevinirim

  • Gerçekten etkileyici. Özellikle birkaç noktayı çok övmek istiyorum: sıfır bağımlılık, bir JavaScript paketi için harika; dokümantasyon temiz ve örnekler içeriyor. Şeffaf build de standart hâline gelmeli
    Keşke daha fazla JavaScript paketi böyle olsa

    • Burada şeffaf build ile tam olarak ne kastedildiğini açıklayabilir misiniz?
      Kısaca aratınca edindiğim izlenime göre bu zaten standart gibi görünüyor. Kurduktan sonra çalıştırmak için manuel build sürecini benim çözmem gereken bir paketse zaten kullanmam

  • Dockview harika ve @mathuo’nun müthiş projesini tebrik ederim. Son dönemde bu kategorideki 6-7 kütüphaneyi oldukça kapsamlı test ettim; Dockview kesinlikle üst sıralarda. GitHub deposu da çok aktif ve iyi yönetiliyor
    Son projemizde sonunda FlexLayout(https://github.com/caplin/FlexLayout) seçmemizin tek nedeni, önceden tanımlı/kısıtlı boyut desteğinin olmamasıydı; ama bu özellik daha sonra oldukça iyi bir şekilde eklendi. Ayrıca FL’nin dikey sekmeleri ve yan panelleri önceden tanımlı davranışlarla ele alma biçimini de beğendim
    Bir sonraki projelerimden birinde Dockview kullanmayı gerçekten dört gözle bekliyorum

    • İkisi de iyi görünüyor. FlexLayout’un sürükleme kutusu estetiği gerçekten çok hoş ve dikey sekme kullanımı da harika bir ayrıntı. Yine de Dockview güçlü bir rakip gibi duruyor ve HN etkisiyle yıldızları artarsa, FlexLayout’un sahip olduğu nispeten küçük avantajları bünyesine katmak için ivme kazanabilir

  • Boş zaman projesi olarak kelimenin tam anlamıyla böyle bir şey yapıyordum; bunu bulduğuma gerçekten sevindim. Artık kendi kodumu çöpe atıp projenin bir sonraki aşamasına geçebilirim

  • GoldenLayout ile karşılaştırınca nasıl? Ondan ilham alındı mı?
    Eskiden o projeyi gerçekten çok severdim ama ne yazık ki desteği tamamen durdu. Bazıları devam ettirmeye çalıştı ama hevesli güncellemelere rağmen gerçekçi bir upgrade yolu pek görünmüyordu
    Bu iyi görünüyor, denemek isterim

    • GoldenLayout, orijinal JavaScript yerleşim yöneticisidir ve ben de onu yıllarca kullandım
      Başlangıçta GoldenLayout dâhil diğer yerleşim yöneticilerinden ilham alındığı doğru. Buradaki ana hedef sıfır bağımlılık, saf TypeScript ile yazılmış olmak ve Vue ile React gibi framework’ler için wrapper kütüphaneleri sunmaktı
      Her türlü geri bildirime açığım ve web sitesindeki demo şu anki özelliklerin çoğunu gösteriyor. Issues listesinde de ilerisi için planlanan pek çok şey var
    • Birkaç gün önce GoldenLayout denedim. Web sitesindeki React desteği demosu v1’e göreydi; kurunca v2 yüklendi ve v2 sanki React desteğini kaldırmış gibiydi, ayrıca web sitesinde buna dair dokümantasyon veya örnek yoktu. v1 de yalnızca class tabanlı bileşenleri destekliyordu
      Teorik olarak GoldenLayout için adaptör mantığını kendiniz sürdürebilirsiniz ama pratikte ölü durumda gibi görünüyor. Bunun gibi daha yeni ve drag-and-drop hissi daha iyi olan kütüphaneler var
      Yaklaşık 6 yıl önce başka bir projede GoldenLayout kullanmaya çalıştığımı, ama hissedilen bazı sorunlar yüzünden sonunda saf TypeScript ile kendim yazdığımı da hatırlıyorum. Yaygın kullanılıyor olabilir ama gerçek deneyim açısından o kadar da harika değildi

  • Güzel proje. Demoda video, açılır menü, büyük miktarda metin, büyük boyutlu yazı gibi genel içeriklerin de yer alması, bunları nasıl ele aldığını göstermek açısından iyi olurdu
    Bir de pencere chrome’u olmadan sadece panellerin olduğu bir sürüm var mı diye merak ediyorum

  • Rust ile yazılmış bir tiling pencere yöneticisi sürdürüyorum; bu tür bir şeyi JS/TS ile yapacak sabrı gösterebilmek gerçekten hayal gücümün ötesinde. mathuo’ya saygılar. Son zamanlarda HN’de gördüğüm en havalı şeylerden biri

  • Gerçekten çok iyi. SolidJS desteği de olsa harika olurdu. Bu aralar React ile Solid arasında özel bir tercihim yok ama bunu kullanabileceğim birkaç proje SolidJS ile yazılmış durumda

  • Mosaic’i yeniden yapmanın zamanı gelmişti. https://github.com/mlajtos/mosaic

  • Harika. HTML’in sunduklarının ötesinde, menüler gibi genel masaüstü kontrolleri için benzer, bağımlılıksız saf bir kütüphane bilen var mı?