docview - TypeScript/React/Vue विंडो लेआउट मैनेजर (टैब, फ्लोटिंग, पॉपआउट)

• dockview टैब, समूह, ग्रिड और split-view को सपोर्ट करने वाला zero-dependency layout manager है, जिसे React, Vue, Angular और JavaScript में इस्तेमाल किया जा सकता है
• यह लेआउट serialization/deserialization, dockable view, टैब·समूह docking, drag and drop, floating group, और popout window सहित पूरा layout management फीचर सेट प्रदान करता है
• यह theme लागू करने और customization, Shadow DOM सपोर्ट, touch·mobile सपोर्ट, extension API, और live examples वाली documentation site प्रदान करता है
• पैकेज dockview, dockview-react, dockview-vue, dockview-angular में विभाजित हैं, और React के लिए react 16.8 या उससे ऊपर, Vue के लिए vue 3.4 या उससे ऊपर, Angular के लिए @angular/core 21 या उससे ऊपर peer dependency के रूप में आवश्यक है
• development structure NX monorepo और Yarn v1 workspaces पर आधारित है, और build क्रम dockview-core → dockview → framework binding है

---

dockview द्वारा प्रदान की जाने वाली लेआउट क्षमताएँ

• dockview टैब, समूह, ग्रिड और split-view को सपोर्ट करने वाला एक layout manager है
• JavaScript के लिए इसका बेस पैकेज zero dependencies के साथ आता है और पूरी functionality तुरंत इस्तेमाल की जा सकती है
• समर्थित फीचर:
  • लेआउट serialization/deserialization
  • split-view, grid-view, dockable view
  • टैब और समूह docking
  • drag and drop
  • popout window
  • floating group
  • touch और mobile सपोर्ट
  • Shadow DOM सपोर्ट
  • theme लागू करना और customization
  • extension API
  • live examples वाली documentation site

समर्थित पैकेज और framework

• dockview: JavaScript के लिए पैकेज, जो zero dependencies और पूरी functionality प्रदान करता है
• dockview-react: React binding, जिसके लिए peer dependency के रूप में react 16.8 या उससे ऊपर आवश्यक है
• dockview-vue: Vue 3 binding, जिसके लिए peer dependency के रूप में vue 3.4 या उससे ऊपर आवश्यक है
• dockview-angular: Angular binding, जिसके लिए peer dependency के रूप में @angular/core 21 या उससे ऊपर आवश्यक है

इंस्टॉलेशन और React उपयोग उदाहरण

• इंस्टॉलेशन कमांड framework के अनुसार पैकेज चुनने के तरीके पर आधारित हैं
  • npm install dockview
  • npm install dockview-react
  • npm install dockview-vue
  • npm install dockview-angular
• React उदाहरण में DockviewReact और dockview-react/dist/styles/dockview.css को import करके उपयोग किया जाता है
• onReady callback में event.api.addPanel कॉल करके id, component, params वाले panel जोड़े जाते हैं
• Vue और Angular के उदाहरण documentation site में देखे जा सकते हैं

development structure और build

• प्रोजेक्ट एक NX monorepo है और Yarn v1 workspaces का उपयोग करता है
• development commands:
  • yarn install: dependencies इंस्टॉल करना
  • yarn build: सभी पैकेज build करना
  • yarn test: test चलाना
  • yarn lint: ESLint चलाना
  • yarn format: Prettier चलाना
• NX build order को अपने आप मैनेज करता है
  • dockview-core → dockview → dockview-react
  • dockview-core → dockview → dockview-vue
  • dockview-core → dockview → dockview-angular

गुणवत्ता, सुरक्षा, लाइसेंस

• प्रोजेक्ट उच्च test coverage, transparent build, और code analysis पर जोर देता है
• GitHub Actions के जरिए verified publishing और build सहित security को ध्यान में रखता है
• build verification को npm के provenance संबंधित निर्देशों में देखा जा सकता है
• contribution issue या pull request के जरिए स्वीकार किए जाते हैं
• लाइसेंस MIT है

[GN⁺]

Hacker News की राय

• वाह, सच में शानदार काम। पहली नज़र में ही लगता है कि TypeScript ठीक से लिखा गया है, और समय की दिशा को भी सही पकड़ा गया है। आगे AI applications बनाने के लिए ऐसे बुनियादी टूल्स की बहुत ज़्यादा ज़रूरत पड़ेगी।
  तकनीकी तौर पर मैं लंबे समय से यह जानना चाहता था कि panel को drag करने या उसकी visibility बदलने पर components को mount/unmount कैसे किया जाता है। कभी-कभी mount/unmount की तुलना में display:none सस्ता पड़ सकता है।
  साथ ही, panel structure असल में declarative है, इसलिए यह भी जानना चाहूँगा कि क्या saved TypeScript layout को export करने और functions, यानी TypeScript imports को panel content से map करने जैसा कोई Vite plugin expose करने की योजना है। मैं JSX के बाहर, ज़्यादा pure TypeScript तरीके से सोच रहा हूँ।

  • हो सकता है मैं कुछ miss कर रहा हूँ, लेकिन यहाँ AI applications कैसे संबंधित हैं, यह जानना चाहूँगा। क्या यह application AI से लिखा गया है, या AI applications के लिए बनाया गया है? ऐसा नहीं लगता कि actual layout management AI से हो रहा है।
  • rendering modes के लिहाज़ से, दोनों approaches support हैं।
    https://dockview.dev/docs/core/panels/rendering
    panel content को हमेशा DOM के अंदर बनाए रखने का option है, और जैसा आपने कहा, display: none के क़रीब approach भी संभव है। इसके उलट DOM से content हटाने का option भी है।
    pure TypeScript के नज़रिए से, library का ज़्यादातर हिस्सा pure TypeScript में लिखा गया है, और Vue व React के लिए सिर्फ छोटे wrapper libraries हैं।
    theoretically Angular जैसे दूसरे frameworks के लिए wrapper भी लिखा जा सकता है, और यह काम मैं इस साल के अंदर करके देखना चाहूँगा।
    state load और save भी support हैं।
    https://dockview.dev/docs/core/state/save
    बताइएगा कि क्या इस जवाब से आपका सवाल हल होता है।

• सच में impressive है। ख़ासकर कुछ चीज़ों की बहुत तारीफ़ करना चाहूँगा: zero dependencies JavaScript package के तौर पर बहुत अच्छी बात है, documentation साफ़ है और examples भी हैं। transparent build भी standard होना चाहिए।
  काश और JavaScript packages भी ऐसे होते।

  • क्या आप समझा सकते हैं कि यहाँ transparent build से क्या मतलब है?
    थोड़ी खोजबीन के बाद मेरी समझ में तो यह पहले से standard जैसा ही लगता है। अगर कोई package install करने के बाद उसे चलाने के लिए manual build process खुद समझना पड़े, तो मैं उसे इस्तेमाल ही नहीं करूँगा।

• Dockview शानदार है, और @mathuo को इस बेहतरीन project के लिए बधाई। हाल ही में मैंने इस category की 6–7 libraries को काफ़ी thorough तरीके से test किया, और Dockview निश्चित रूप से top tier में है। GitHub भी बहुत active और अच्छी तरह maintained है।
  हाल के project में मैंने अंततः FlexLayout(https://github.com/caplin/FlexLayout) सिर्फ इसलिए चुना क्योंकि predefined/limited size support नहीं था, लेकिन बाद में यह बहुत अच्छे तरीके से add हो गया। साथ ही FL जिस तरह vertical tabs और predefined behavior के साथ side panels handle करता है, वह मुझे पसंद आया।
  अपनी अगली projects में से किसी एक में Dockview इस्तेमाल करने की मुझे बहुत उम्मीद है।

  • दोनों अच्छे दिखते हैं। FlexLayout का drag box aesthetic सच में अच्छा है, और vertical tabs handling भी बढ़िया detail है। फिर भी Dockview भी मज़बूत competitor लगता है, और HN effect से stars बढ़ें तो शायद FlexLayout के अपेक्षाकृत छोटे advantages को integrate करने की momentum मिल सकती है।

• मैं अपने leisure project के तौर पर literally ऐसी ही चीज़ बना रहा था, और इसे पाकर सच में खुशी हुई। अब मैं अपना code फेंककर project के अगले phase पर जा सकता हूँ।

• GoldenLayout से तुलना करें तो यह कैसा है? क्या उससे inspiration ली गई है?
  पहले मुझे वह project सच में बहुत पसंद था, लेकिन दुर्भाग्य से support पूरी तरह बंद हो गया। कुछ लोगों ने उसे आगे बढ़ाया जरूर, लेकिन उत्साह से updates करने के बावजूद कोई practical upgrade path ज़्यादा नज़र नहीं आया।
  यह अच्छा लग रहा है, और मैं इसे try करना चाहूँगा।

  • GoldenLayout original JavaScript layout manager है, और मैंने इसे पहले कई सालों तक इस्तेमाल किया है।
    शुरुआत में GoldenLayout सहित दूसरे layout managers से inspiration ली गई थी। यहाँ मुख्य लक्ष्य zero dependencies रखना और pure TypeScript में लिखना था, साथ ही Vue और React जैसे frameworks के लिए wrapper libraries देना था।
    कोई भी feedback welcome है, और website demo अभी की ज्यादातर functionality दिखाता है। Issues list में आगे planned चीज़ें भी बहुत हैं।
  • कुछ दिन पहले मैंने GoldenLayout try किया। website पर React support demo v1 के लिए है, लेकिन install करने पर v2 install हुआ, और लगता है v2 ने React support हटा दिया है; website पर docs या examples भी नहीं हैं। v1 भी सिर्फ class-based components support करता था।
    theoretically GoldenLayout के लिए adapter logic खुद maintain किया जा सकता है, लेकिन वह लगभग dead लगता है। इस library जैसी नई libraries हैं जिनका drag-and-drop feel भी बेहतर है।
    करीब 6 साल पहले एक दूसरे project में GoldenLayout इस्तेमाल करने की कोशिश की थी, लेकिन कुछ महसूस होने वाली समस्याओं के कारण आखिरकार pure TypeScript में खुद implement किया था। यह widely used तो है, लेकिन actual experience में इतना शानदार नहीं था।

• अच्छा project है। demo में video, dropdown, बहुत सारा text, बड़े size का text जैसे common content डाल दें तो यह कैसे handle करता है, यह दिखाने में अच्छा रहेगा।
  और यह भी जानना चाहूँगा कि क्या window chrome के बिना सिर्फ panels वाला version भी है।

  • content की जगह webview/iframe डाल सकते हैं – https://github.com/mlajtos/mosaic

• मैं Rust में लिखा एक tiling window manager maintain करता हूँ, और इस तरह का काम JS/TS में करने का धैर्य मेरे लिए कल्पना से बाहर है। mathuo को सम्मान। हाल में HN पर देखी सबसे cool चीज़ों में से एक है।

• सच में अच्छा है। SolidJS support भी हो तो अच्छा होगा। आजकल React और Solid के बीच मेरी कोई खास preference नहीं है, लेकिन कुछ projects जिनमें इसका इस्तेमाल हो सकता है, SolidJS में हैं।

  • पहले से है: https://github.com/lyonbot/solid-dockview

• Mosaic को फिर से बनाने का समय आ गया है। https://github.com/mlajtos/mosaic

  • क्या आपने https://de.wikipedia.org/wiki/NCSA_Mosaic कभी नहीं देखा? :)

• बेहतरीन। HTML जो देता है उससे आगे, menu जैसे common desktop controls के लिए क्या कोई ऐसी ही dependency-free pure library किसी को पता है?

  • अलग-अलग controls के लिए मैं DaisyUI इस्तेमाल कर रहा हूँ। यह CSS-only है।
    0: https://daisyui.com
  • एक और है: https://bulma.io