dockview - ตัวจัดการเลย์เอาต์หน้าต่างสำหรับ TypeScript/React/Vue (แท็บ, แบบลอย, ป๊อปเอาต์)

 (github.com/mathuo)
5 คะแนน โดย GN⁺ 2025-01-12 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • dockview เป็น ตัวจัดการเลย์เอาต์แบบไม่มี dependency ที่รองรับแท็บ กลุ่ม กริด และ split-view ใช้งานได้กับ React, Vue, Angular และ JavaScript
  • มีฟังก์ชันจัดการเลย์เอาต์ครบถ้วน รวมถึงการ serialize/deserialize เลย์เอาต์, dockable view, การ dock แท็บและกลุ่ม, drag and drop, กลุ่มแบบลอย และหน้าต่างป๊อปเอาต์
  • มีการใช้ธีมและการปรับแต่ง, รองรับ Shadow DOM, รองรับทัชและมือถือ, API สำหรับขยายความสามารถ และเว็บไซต์เอกสารพร้อมตัวอย่างแบบสด
  • แพ็กเกจแบ่งเป็น dockview, dockview-react, dockview-vue, dockview-angular โดย React ต้องมี peer dependency เป็น react 16.8 ขึ้นไป, Vue ต้องมี vue 3.4 ขึ้นไป และ Angular ต้องมี @angular/core 21 ขึ้นไป
  • โครงสร้างการพัฒนาตั้งอยู่บน NX monorepo และ Yarn v1 workspaces โดย build ตามลำดับ dockview-core → dockview → framework bindings

ฟีเจอร์เลย์เอาต์ที่ dockview มีให้

  • dockview เป็นตัวจัดการเลย์เอาต์ที่รองรับแท็บ กลุ่ม กริด และ split-view
  • แพ็กเกจพื้นฐานสำหรับ JavaScript เป็นแบบ zero dependencies และใช้งานฟีเจอร์ทั้งหมดได้ทันที
  • ฟีเจอร์ที่รองรับ:
    • การ serialize/deserialize เลย์เอาต์
    • split-view, grid-view, dockable view
    • การ dock แท็บและกลุ่ม
    • drag and drop
    • หน้าต่างป๊อปเอาต์
    • กลุ่มแบบลอย
    • รองรับทัชและมือถือ
    • รองรับ Shadow DOM
    • การใช้ธีมและการปรับแต่ง
    • API สำหรับขยายความสามารถ
    • เว็บไซต์เอกสารพร้อมตัวอย่างแบบสด

แพ็กเกจและเฟรมเวิร์กที่รองรับ

  • dockview: แพ็กเกจสำหรับ JavaScript ที่ไม่มี dependency และมีฟีเจอร์ครบถ้วน
  • dockview-react: binding สำหรับ React โดยต้องมี react 16.8 ขึ้นไปเป็น peer dependency
  • dockview-vue: binding สำหรับ Vue 3 โดยต้องมี vue 3.4 ขึ้นไปเป็น peer dependency
  • dockview-angular: binding สำหรับ Angular โดยต้องมี @angular/core 21 ขึ้นไปเป็น peer dependency

การติดตั้งและตัวอย่างการใช้งานกับ React

  • คำสั่งติดตั้งเป็นการเลือกแพ็กเกจตามเฟรมเวิร์ก
    • npm install dockview
    • npm install dockview-react
    • npm install dockview-vue
    • npm install dockview-angular
  • ตัวอย่าง React ใช้โดย import DockviewReact และ dockview-react/dist/styles/dockview.css
  • ใน callback onReady เรียก event.api.addPanel เพื่อเพิ่ม panel ที่มี id, component, params
  • ตัวอย่าง Vue และ Angular ดูได้ที่ เว็บไซต์เอกสาร

โครงสร้างการพัฒนาและการ build

  • โปรเจกต์เป็น NX monorepo และใช้ Yarn v1 workspaces
  • คำสั่งสำหรับการพัฒนา:
    • yarn install: ติดตั้ง dependencies
    • yarn build: build แพ็กเกจทั้งหมด
    • yarn test: รันการทดสอบ
    • yarn lint: รัน ESLint
    • yarn format: รัน Prettier
  • NX จัดการลำดับการ build โดยอัตโนมัติ
    • dockview-core → dockview → dockview-react
    • dockview-core → dockview → dockview-vue
    • dockview-core → dockview → dockview-angular

คุณภาพ ความปลอดภัย และไลเซนส์

  • โปรเจกต์เน้น test coverage สูง, build ที่โปร่งใส และการวิเคราะห์โค้ด
  • คำนึงถึง ความปลอดภัย รวมถึง publishing และ build ที่ตรวจสอบแล้วผ่าน GitHub Actions
  • การตรวจสอบ build ดูได้จากคำแนะนำที่เกี่ยวกับ provenance ของ npm
  • การมีส่วนร่วมสามารถทำได้ผ่าน issue หรือ pull request
  • ไลเซนส์คือ MIT

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-01-12
ความคิดเห็นบน Hacker News

  • ว้าว งานยอดเยี่ยมจริง ๆ เห็นครั้งแรกก็รู้สึกว่า TypeScript เขียนมาได้ถูกทาง และก็ดูเหมือนจะจับกระแสยุคนี้ได้ดีด้วย ต่อไปถ้าจะสร้างแอปพลิเคชัน AI คงต้องมี เครื่องมือพื้นฐาน แบบนี้มากขึ้นอีกมาก
    ในเชิงเทคนิค ผมสงสัยมานานแล้วว่าตอนลากพาเนลหรือเปลี่ยนสถานะการแสดงผล มีการ mount/unmount คอมโพเนนต์อย่างไร บางครั้ง display:none อาจถูกกว่าการ mount/unmount
    อีกอย่าง โครงสร้างพาเนลก็แทบจะเป็นแบบ declarative อยู่แล้ว เลยสงสัยว่ามีแผนจะเปิดเผย ปลั๊กอิน Vite ที่ export เลย์เอาต์ TypeScript ที่บันทึกไว้ แล้วให้ฟังก์ชันหรือก็คือ TypeScript import ถูกแมปกับเนื้อหาพาเนลหรือไม่ กำลังคิดในแนวทาง TypeScript ที่บริสุทธิ์กว่า นอก JSX

    • ผมอาจพลาดอะไรไป แต่สงสัยว่า แอปพลิเคชัน AI เกี่ยวข้องตรงนี้อย่างไร แอปนี้เขียนด้วย AI หรือสร้างมาเพื่อแอปพลิเคชัน AI หรือเปล่า? ดูไม่เหมือนว่าการจัดการเลย์เอาต์จริง ๆ จะใช้ AI
    • ในแง่โหมดการเรนเดอร์ รองรับทั้งสองแนวทาง
      https://dockview.dev/docs/core/panels/rendering
      มีตัวเลือกให้คงเนื้อหาพาเนลไว้ใน DOM ตลอดเวลา และอย่างที่พูด ก็ทำแนวทางใกล้เคียงกับ display: none ได้ ในทางกลับกันก็มีตัวเลือกให้ลบเนื้อหาออกจาก DOM ได้เช่นกัน
      จากมุมมอง TypeScript ล้วน ๆ ไลบรารีส่วนใหญ่เขียนด้วย TypeScript ล้วน และมีเพียงไลบรารี wrapper เล็ก ๆ สำหรับ Vue กับ React
      ในทางทฤษฎีสามารถเขียน wrapper สำหรับเฟรมเวิร์กอื่นอย่าง Angular ได้ด้วย และเป็นงานที่อยากลองทำภายในปีนี้
      รองรับการโหลดและบันทึกสถานะด้วย
      https://dockview.dev/docs/core/state/save
      ถ้าคำตอบนี้ตอบคำถามได้หรือไม่ ช่วยบอกด้วยก็ดี

  • น่าประทับใจจริง ๆ โดยเฉพาะมีอยู่หลายจุดที่อยากชมมาก: ไม่มี dependency เลย ถือว่ายอดเยี่ยมมากสำหรับแพ็กเกจ JavaScript เอกสารก็สะอาดและมีตัวอย่าง transparent build ก็ควรกลายเป็นมาตรฐานด้วย
    อยากให้แพ็กเกจ JavaScript มากกว่านี้เป็นแบบนี้

    • ช่วยอธิบายได้ไหมว่า transparent build ในที่นี้หมายถึงอะไร?
      จากที่ลองค้นดูคร่าว ๆ ความเข้าใจคือมันดูเหมือนเป็นมาตรฐานอยู่แล้ว ถ้าแพ็กเกจไหนต้องให้ไปหาวิธี build เองแบบ manual หลังติดตั้งเพื่อให้มันทำงาน ผมก็ไม่ใช้ตั้งแต่แรกแล้ว

  • Dockview ยอดเยี่ยม และขอแสดงความยินดีกับโปรเจกต์สุดเจ๋งของ @mathuo ช่วงหลังผมทดสอบไลบรารีในหมวดนี้ 6–7 ตัวอย่างค่อนข้างละเอียด และ Dockview อยู่ในกลุ่มบนสุดแน่นอน GitHub ก็ active มากและดูแลดีมาก
    เหตุผลเดียวที่โปรเจกต์ล่าสุดสุดท้ายเลือก FlexLayout(https://github.com/caplin/FlexLayout) คือ Dockview ยังไม่มีการรองรับขนาดที่กำหนดไว้ล่วงหน้า/ถูกจำกัด แต่หลังจากนั้นก็เพิ่มเข้ามาแล้วในแบบที่ดีมาก อีกอย่างผมชอบวิธีที่ FL จัดการแท็บแนวตั้งและ side panel ด้วยพฤติกรรมที่กำหนดไว้ล่วงหน้า
    ผมตั้งตารอมากว่าจะได้ใช้ Dockview ในโปรเจกต์ถัด ๆ ไปสักโปรเจกต์

    • ทั้งคู่ดูดี กล่องตอนลากของ FlexLayout สวยถูกใจมาก และการจัดการแท็บแนวตั้งก็เป็นรายละเอียดที่ยอดเยี่ยม อย่างไรก็ดี Dockview ก็ดูเป็นคู่แข่งที่แข็งแกร่ง และถ้าได้ดาวเพิ่มจากกระแส HN ก็อาจมีแรงผลักดันให้รวมข้อได้เปรียบเล็ก ๆ ที่ FlexLayout มีอยู่เข้ามาได้

  • ผมกำลังทำของแบบนี้เป๊ะ ๆ เป็นโปรเจกต์ยามว่างอยู่พอดี ดีใจมากที่เจอสิ่งนี้ ตอนนี้ทิ้งโค้ดของตัวเองแล้วเดินหน้าสู่ขั้นถัดไปของโปรเจกต์ได้แล้ว

  • เมื่อเทียบกับ GoldenLayout เป็นอย่างไรบ้าง? ได้แรงบันดาลใจจากที่นั่นหรือเปล่า?
    เมื่อก่อนผมชอบโปรเจกต์นั้นมาก แต่เสียดายที่การสนับสนุนหยุดไปโดยสิ้นเชิง แม้จะมีบางคนรับช่วงต่อ และอัปเดตอย่างกระตือรือร้น แต่ก็ยังไม่ค่อยเห็นเส้นทางอัปเกรดที่ใช้งานได้จริง
    ตัวนี้ดูดี และอยากลองใช้ดู

    • GoldenLayout เป็นตัวจัดการเลย์เอาต์ JavaScript รุ่นบุกเบิก และเคยใช้มาหลายปี
      ตอนแรกก็ได้รับแรงบันดาลใจจากตัวจัดการเลย์เอาต์อื่น ๆ รวมถึง GoldenLayout จริง ๆ เป้าหมายหลักตรงนี้คือ ไม่มี dependency เลย และเขียนด้วย TypeScript ล้วน พร้อมมีไลบรารี wrapper สำหรับเฟรมเวิร์กอย่าง Vue และ React
      ยินดีรับฟีดแบ็กทุกอย่าง และเดโมบนเว็บไซต์แสดงฟีเจอร์ส่วนใหญ่ในปัจจุบันแล้ว ในรายการ Issues ก็มีสิ่งที่วางแผนไว้ข้างหน้าอีกมาก
    • ผมลองใช้ GoldenLayout เมื่อไม่กี่วันก่อน เดโมการรองรับ React บนเว็บไซต์อิง v1 แต่พอติดตั้งแล้วได้ v2 และดูเหมือน v2 จะเอาการรองรับ React ออกไป ทั้งยังไม่มีเอกสารหรือตัวอย่างบนเว็บไซต์ v1 ก็รองรับแค่คอมโพเนนต์แบบ class-based
      ในทางทฤษฎีอาจดูแลลอจิก adapter สำหรับ GoldenLayout เองได้ แต่ในทางปฏิบัติมันดูเหมือนตายไปแล้ว มีไลบรารีที่ใหม่กว่าและให้ความรู้สึก drag-and-drop ดีกว่าอย่างไลบรารีนี้อยู่
      ผมยังจำได้ว่าเมื่อประมาณ 6 ปีก่อน เคยพยายามใช้ GoldenLayout ในอีกโปรเจกต์หนึ่ง แต่เพราะปัญหาที่รู้สึกได้หลายอย่าง สุดท้ายเลยเขียนเองด้วย TypeScript ล้วน แม้จะใช้กันแพร่หลาย แต่จากประสบการณ์จริงก็ไม่ได้ยอดเยี่ยมขนาดนั้น

  • โปรเจกต์ดี อยากให้ใส่ คอนเทนต์ทั่วไป อย่างวิดีโอ ดรอปดาวน์ ข้อความจำนวนมาก ข้อความขนาดใหญ่ลงในเดโมด้วย จะได้เห็นว่าจัดการอย่างไร
    แล้วก็สงสัยว่ามีเวอร์ชันที่มีแต่พาเนลโดยไม่มีกรอบหน้าต่างหรือไม่

  • ผมดูแล tiling window manager ที่เขียนด้วย Rust อยู่ และนึกไม่ออกเลยว่าจะมีความอดทนทำงานประเภทนี้ด้วย JS/TS ได้อย่างไร ขอคารวะ mathuo นี่เป็นหนึ่งในสิ่งที่เจ๋งที่สุดที่เห็นใน HN ช่วงหลัง ๆ

  • ดีมาก อยากให้มีการรองรับ SolidJS ด้วย ช่วงนี้ไม่ได้มีความชอบพิเศษระหว่าง React กับ Solid แต่มีโปรเจกต์อยู่สองสามตัวที่น่าจะใช้สิ่งนี้ได้และเขียนด้วย SolidJS

  • ถึงเวลาทำ Mosaic ใหม่แล้ว https://github.com/mlajtos/mosaic

  • ยอดเยี่ยม มีใครรู้จักไลบรารีแบบบริสุทธิ์ ไม่มี dependency คล้าย ๆ กัน สำหรับ คอนโทรลเดสก์ท็อปทั่วไป อย่างเมนู ที่เกินกว่าสิ่งที่ HTML มีให้ไหม?

    • ผมใช้ DaisyUI สำหรับคอนโทรลหลายแบบ เป็น CSS-only
      0: https://daisyui.com
    • มีอีกตัวหนึ่ง: https://bulma.io