docview - Trình quản lý bố cục cửa sổ cho TypeScript/React/Vue (tab, floating, popout)

 (github.com/mathuo)
5 điểm bởi GN⁺ 2025-01-12 | 1 bình luận | Chia sẻ qua WhatsApp
  • dockview là trình quản lý bố cục không phụ thuộc hỗ trợ tab, group, grid và split-view, có thể dùng trong React, Vue, Angular và JavaScript
  • Cung cấp đầy đủ tính năng quản lý bố cục, bao gồm serialize/deserialize bố cục, dockable view, docking tab và group, kéo thả, floating group và cửa sổ popout
  • Cung cấp áp dụng theme và tùy biến, hỗ trợ Shadow DOM, hỗ trợ touch và mobile, API mở rộng, cùng trang tài liệu có ví dụ chạy trực tiếp
  • Các package được chia thành dockview, dockview-react, dockview-vue, dockview-angular; React yêu cầu peer dependency react 16.8 trở lên, Vue yêu cầu vue 3.4 trở lên, Angular yêu cầu @angular/core 21 trở lên
  • Cấu trúc phát triển dựa trên NX monorepo và Yarn v1 workspaces, được build theo thứ tự dockview-core → dockview → framework bindings

Các tính năng bố cục mà dockview cung cấp

  • dockview là trình quản lý bố cục hỗ trợ tab, group, grid và split-view
  • Package nền tảng cho JavaScript là zero dependencies, có thể dùng ngay toàn bộ tính năng
  • Các tính năng được hỗ trợ:
    • serialize/deserialize bố cục
    • split-view, grid-view, dockable view
    • docking tab và group
    • kéo thả
    • cửa sổ popout
    • floating group
    • hỗ trợ touch và mobile
    • hỗ trợ Shadow DOM
    • áp dụng theme và tùy biến
    • API mở rộng
    • trang tài liệu có ví dụ chạy trực tiếp

Các package và framework được hỗ trợ

  • dockview: package cho JavaScript, cung cấp zero dependencies và đầy đủ tính năng
  • dockview-react: binding cho React, yêu cầu peer dependency react 16.8 trở lên
  • dockview-vue: binding cho Vue 3, yêu cầu peer dependency vue 3.4 trở lên
  • dockview-angular: binding cho Angular, yêu cầu peer dependency @angular/core 21 trở lên

Cài đặt và ví dụ sử dụng với React

  • Lệnh cài đặt theo cách chọn package tương ứng với từng framework
    • npm install dockview
    • npm install dockview-react
    • npm install dockview-vue
    • npm install dockview-angular
  • Ví dụ React sử dụng bằng cách import DockviewReact và dockview-react/dist/styles/dockview.css
  • Trong callback onReady, gọi event.api.addPanel để thêm panel có id, component, params
  • Có thể xem ví dụ Vue và Angular tại trang tài liệu

Cấu trúc phát triển và build

  • Dự án là NX monorepo và sử dụng Yarn v1 workspaces
  • Các lệnh phát triển:
    • yarn install: cài đặt dependency
    • yarn build: build tất cả package
    • yarn test: chạy test
    • yarn lint: chạy ESLint
    • yarn format: chạy Prettier
  • NX tự động quản lý thứ tự build
    • dockview-core → dockview → dockview-react
    • dockview-core → dockview → dockview-vue
    • dockview-core → dockview → dockview-angular

Chất lượng, bảo mật, giấy phép

  • Dự án nhấn mạnh độ bao phủ test cao, quy trình build minh bạch và phân tích mã nguồn
  • Có cân nhắc bảo mật, bao gồm publishing và build được xác thực thông qua GitHub Actions
  • Có thể xem xác minh build trong hướng dẫn liên quan đến provenance của npm
  • Có thể đóng góp qua issue hoặc pull request
  • Giấy phép là MIT

Bài viết liên quan

1 bình luận

 
GN⁺ 2025-01-12
Ý kiến trên Hacker News

  • Wow, đúng là một công trình xuất sắc. Nhìn lần đầu cũng có cảm giác TypeScript được viết rất chuẩn, và có vẻ cũng bắt đúng xu hướng thời đại. Mình nghĩ để xây dựng các ứng dụng AI trong tương lai sẽ cần nhiều công cụ nền tảng như thế này hơn nữa
    Về mặt kỹ thuật, mình đã thắc mắc từ lâu về cách mount/unmount component khi kéo panel hoặc khi trạng thái hiển thị thay đổi. Đôi khi display:none có thể rẻ hơn mount/unmount
    Ngoài ra, vì cấu trúc panel về cơ bản là khai báo, mình cũng tò mò liệu có kế hoạch cung cấp một plugin Vite để xuất layout TypeScript đã lưu và ánh xạ các hàm, tức TypeScript import, vào nội dung panel hay không. Mình đang nghĩ theo hướng TypeScript thuần túy hơn bên ngoài JSX

    • Có thể mình đã bỏ lỡ điều gì đó, nhưng mình thắc mắc ứng dụng AI liên quan thế nào ở đây. Ứng dụng này được viết bằng AI, hay được tạo ra cho ứng dụng AI? Mình không thấy việc quản lý layout thực sự được làm bằng AI
    • Về chế độ render thì cả hai cách tiếp cận đều được hỗ trợ
      https://dockview.dev/docs/core/panels/rendering
      Có tùy chọn luôn giữ nội dung panel trong DOM, và như bạn nói, cũng có thể dùng cách gần với display: none. Ngược lại cũng có tùy chọn loại bỏ nội dung khỏi DOM
      Từ góc nhìn TypeScript thuần túy, phần lớn thư viện được viết bằng TypeScript thuần, chỉ có các thư viện wrapper nhỏ cho Vue và React
      Về lý thuyết cũng có thể viết wrapper cho các framework khác như Angular, và đó là việc mình muốn thử làm trong năm nay
      Việc load và lưu trạng thái cũng được hỗ trợ
      https://dockview.dev/docs/core/state/save
      Hãy cho mình biết câu trả lời này có giải đáp được câu hỏi của bạn không

  • Thật sự ấn tượng. Đặc biệt có vài điểm mình rất muốn khen: không có dependency nào là điều rất tuyệt đối với một package JavaScript, tài liệu cũng gọn gàng và có ví dụ. Build minh bạch cũng nên trở thành tiêu chuẩn
    Ước gì có nhiều package JavaScript hơn được như vậy

    • Bạn có thể giải thích build minh bạch ở đây nghĩa là gì không?
      Theo mình hiểu sau khi tìm nhanh thì chuyện đó đã giống tiêu chuẩn rồi. Nếu một package sau khi cài mà mình còn phải tự mò quy trình build thủ công để làm cho nó chạy, thì mình đơn giản là không dùng

  • Dockview rất tuyệt, xin chúc mừng @mathuo vì dự án ấn tượng này. Gần đây mình đã kiểm thử khá kỹ 6–7 thư viện trong nhóm này, và Dockview chắc chắn thuộc nhóm đầu. GitHub cũng rất sôi động và được bảo trì tốt
    Lý do duy nhất trong một dự án gần đây mình cuối cùng chọn FlexLayout(https://github.com/caplin/FlexLayout) là vì lúc đó chưa có hỗ trợ kích thước định sẵn/bị giới hạn, nhưng sau đó tính năng này đã được thêm vào theo cách rất tốt. Mình cũng thích cách FL xử lý tab dọc và panel bên bằng các hành vi định sẵn
    Mình rất mong sẽ dùng Dockview trong một trong các dự án tiếp theo

    • Cả hai đều trông ổn. Thẩm mỹ của khung kéo thả trong FlexLayout thật sự tốt, và cách xử lý tab dọc cũng là một chi tiết tuyệt vời. Tuy vậy Dockview cũng có vẻ là đối thủ mạnh, và nếu hiệu ứng HN làm tăng sao thì có thể có thêm động lực để tích hợp những lợi thế tương đối nhỏ mà FlexLayout đang có

  • Mình đang làm đúng thứ này theo nghĩa đen như một dự án lúc rảnh, nên rất vui khi tìm thấy nó. Giờ mình có thể bỏ code của mình và chuyển sang giai đoạn tiếp theo của dự án

  • So với GoldenLayout thì thế nào? Có lấy cảm hứng từ đó không?
    Trước đây mình rất thích dự án đó, nhưng đáng tiếc là việc hỗ trợ đã dừng hẳn. Một số người đã tiếp quản, nhưng dù cập nhật rất nhiệt tình, mình vẫn không thấy có lộ trình nâng cấp thực tế
    Cái này trông ổn, mình muốn thử dùng

    • GoldenLayout là trình quản lý layout JavaScript nguyên bản, và trước đây mình đã dùng nhiều năm
      Ban đầu đúng là mình lấy cảm hứng từ các trình quản lý layout khác, bao gồm GoldenLayout. Mục tiêu chính ở đây là không có dependency nào, viết bằng TypeScript thuần, đồng thời cung cấp thư viện wrapper cho các framework như Vue và React
      Mình rất cảm ơn mọi phản hồi, và demo trên website hiện đang thể hiện phần lớn chức năng hiện có. Trong danh sách Issues cũng có nhiều thứ đã được lên kế hoạch cho tương lai
    • Vài ngày trước mình đã thử dùng GoldenLayout. Demo hỗ trợ React trên website là theo v1, nhưng khi cài thì v2 được cài, và có vẻ v2 đã loại bỏ hỗ trợ React, trong khi trên website không có tài liệu hay ví dụ. v1 cũng chỉ hỗ trợ component dạng class
      Về lý thuyết thì có thể tự duy trì logic adapter cho GoldenLayout, nhưng thực tế trông nó như đã chết. Có những thư viện mới hơn như thư viện này, và cảm giác drag-and-drop cũng tốt hơn
      Mình cũng nhớ khoảng 6 năm trước từng định dùng GoldenLayout trong một dự án khác, nhưng vì vài vấn đề cảm nhận khi sử dụng nên cuối cùng đã tự triển khai bằng TypeScript thuần. Nó được dùng rộng rãi, nhưng theo trải nghiệm thực tế thì không tuyệt đến vậy

  • Dự án hay. Sẽ tốt nếu demo đưa vào nội dung phổ biến như video, dropdown, lượng lớn văn bản, văn bản cỡ lớn để cho thấy nó xử lý ra sao
    Và mình cũng tò mò có phiên bản chỉ có panel, không có phần chrome của cửa sổ hay không

  • Mình đang bảo trì một trình quản lý cửa sổ dạng tiling viết bằng Rust, và thật sự không thể tưởng tượng nổi cần bao nhiêu kiên nhẫn để làm loại việc này bằng JS/TS. Xin bày tỏ sự kính trọng với mathuo. Đây là một trong những thứ ngầu nhất mình thấy gần đây trên HN

  • Rất tuyệt. Giá mà có hỗ trợ SolidJS nữa. Dạo này mình không có thiên vị đặc biệt giữa React và Solid, nhưng có vài dự án có thể dùng cái này lại đang viết bằng SolidJS

  • Đã đến lúc làm lại Mosaic. https://github.com/mlajtos/mosaic

  • Tuyệt vời. Có ai biết thư viện thuần, không dependency tương tự cho các control desktop phổ biến như menu, vượt ngoài những gì HTML cung cấp không?