docview - Gestor de layouts de ventanas para TypeScript/React/Vue (pestañas, flotantes, pop-outs)

 (github.com/mathuo)
5 puntos por GN⁺ 2025-01-12 | 1 comentarios | Compartir por WhatsApp
  • dockview es un gestor de layouts sin dependencias que admite pestañas, grupos, grillas y split-view, y puede usarse con React, Vue, Angular y JavaScript
  • Ofrece gestión completa de layouts, incluida la serialización/deserialización de layouts, dockable views, acoplamiento de pestañas y grupos, arrastrar y soltar, grupos flotantes y ventanas pop-out
  • Proporciona temas y personalización, soporte para Shadow DOM, soporte táctil y móvil, API de extensión y un sitio de documentación con ejemplos en vivo
  • Los paquetes se dividen en dockview, dockview-react, dockview-vue y dockview-angular; React requiere react 16.8 o superior como peer dependency, Vue requiere vue 3.4 o superior y Angular requiere @angular/core 21 o superior
  • La estructura de desarrollo se basa en un monorepo NX y workspaces de Yarn v1, y se compila en el orden dockview-core → dockview → bindings de framework

Funciones de layout que ofrece dockview

  • dockview es un gestor de layouts que admite pestañas, grupos, grillas y split-view
  • El paquete base para JavaScript tiene zero dependencies y permite usar todas sus funciones de inmediato
  • Funciones compatibles:
    • Serialización/deserialización de layouts
    • split-view, grid-view, dockable view
    • Acoplamiento de pestañas y grupos
    • Arrastrar y soltar
    • Ventanas pop-out
    • Grupos flotantes
    • Soporte táctil y móvil
    • Soporte para Shadow DOM
    • Temas y personalización
    • API de extensión
    • Sitio de documentación con ejemplos en vivo

Paquetes y frameworks compatibles

  • dockview: paquete para JavaScript, sin dependencias y con todas las funciones
  • dockview-react: binding para React; requiere react 16.8 o superior como peer dependency
  • dockview-vue: binding para Vue 3; requiere vue 3.4 o superior como peer dependency
  • dockview-angular: binding para Angular; requiere @angular/core 21 o superior como peer dependency

Instalación y ejemplo de uso con React

  • El comando de instalación consiste en elegir el paquete correspondiente a cada framework
    • npm install dockview
    • npm install dockview-react
    • npm install dockview-vue
    • npm install dockview-angular
  • El ejemplo de React usa DockviewReact importándolo junto con dockview-react/dist/styles/dockview.css
  • En el callback onReady, se llama a event.api.addPanel para agregar un panel con id, component y params
  • Los ejemplos de Vue y Angular pueden consultarse en el sitio de documentación

Estructura de desarrollo y build

  • El proyecto es un monorepo NX y usa workspaces de Yarn v1
  • Comandos de desarrollo:
    • yarn install: instala dependencias
    • yarn build: compila todos los paquetes
    • yarn test: ejecuta las pruebas
    • yarn lint: ejecuta ESLint
    • yarn format: ejecuta Prettier
  • NX gestiona automáticamente el orden de compilación
    • dockview-core → dockview → dockview-react
    • dockview-core → dockview → dockview-vue
    • dockview-core → dockview → dockview-angular

Calidad, seguridad y licencia

  • El proyecto enfatiza una alta cobertura de pruebas, builds transparentes y análisis de código
  • Considera la seguridad, incluida la publicación y compilación verificadas mediante GitHub Actions
  • La verificación del build puede consultarse en la guía relacionada con provenance de npm
  • Se aceptan contribuciones mediante issues o pull requests
  • La licencia es MIT

Lecturas relacionadas

1 comentarios

 
GN⁺ 2025-01-12
Opiniones de Hacker News

  • Guau, un trabajo realmente sobresaliente. Incluso a primera vista, TypeScript se siente bien escrito, y parece que también capta bien hacia dónde va la tendencia. Creo que para crear aplicaciones de IA en el futuro harán falta muchas más herramientas fundamentales como esta.
    En lo técnico, desde hace tiempo me daba curiosidad cómo se montan/desmontan los componentes cuando se arrastran paneles o cambia su estado de visibilidad. A veces display:none puede ser más barato que montar/desmontar.
    Además, como la estructura de paneles es prácticamente declarativa, también me pregunto si hay planes de exponer un plugin de Vite que exporte un layout TypeScript guardado y donde funciones, es decir imports de TypeScript, se mapeen al contenido de los paneles. Estoy pensando en un enfoque más puro de TypeScript fuera de JSX.

    • Puede que se me esté escapando algo, pero me pregunto cómo se relacionan aquí las aplicaciones de IA. ¿Esta aplicación fue escrita con IA o fue creada para aplicaciones de IA? No parece que la administración del layout en sí se haga con IA.
    • En cuanto a modos de renderizado, se admiten ambos enfoques.
      https://dockview.dev/docs/core/panels/rendering
      Hay una opción para mantener siempre el contenido del panel dentro del DOM, y también es posible un enfoque cercano a display: none, como mencionas. Por el contrario, también hay una opción para eliminar el contenido del DOM.
      Desde el punto de vista de TypeScript puro, la mayor parte de la librería está escrita en TypeScript puro, y solo hay pequeñas librerías wrapper para Vue y React.
      En teoría también se podrían escribir wrappers para otros frameworks como Angular, y es algo que me gustaría intentar este año.
      También se admite cargar y guardar estado.
      https://dockview.dev/docs/core/state/save
      Avísame si esta respuesta resuelve tu pregunta.

  • Realmente impresionante. En particular, hay varias cosas que quiero elogiar mucho: cero dependencias es excelente para un paquete JavaScript, la documentación está limpia y tiene ejemplos. Las builds transparentes también deberían ser el estándar.
    Ojalá más paquetes JavaScript fueran así.

    • ¿Puedes explicar qué significa aquí builds transparentes?
      Por lo que entendí tras buscar rápidamente, ya parece ser el estándar. Si un paquete requiere que después de instalarlo tenga que averiguar manualmente el proceso de build para hacerlo funcionar, simplemente no lo uso.

  • Dockview es excelente, y felicito a @mathuo por un proyecto fantástico. Recientemente probé bastante a fondo 6 o 7 librerías de esta categoría, y Dockview está claramente entre las mejores. Su GitHub también está muy activo y bien mantenido.
    La única razón por la que en un proyecto reciente terminé eligiendo FlexLayout(https://github.com/caplin/FlexLayout) fue que no tenía soporte para tamaños predefinidos/limitados, pero desde entonces eso se agregó de una forma muy buena. También me gustó cómo FL maneja las pestañas verticales y los paneles laterales con comportamiento predefinido.
    Tengo muchas ganas de usar Dockview en alguno de mis próximos proyectos.

    • Ambos se ven bien. La estética de la caja de arrastre de FlexLayout es realmente buena, y el manejo de pestañas verticales también es un gran detalle. Dicho eso, Dockview también parece un competidor fuerte, y si el efecto HN le aumenta las estrellas, quizá gane impulso para integrar esas ventajas relativamente pequeñas que tiene FlexLayout.

  • Literalmente estaba construyendo algo así como proyecto personal, así que me alegra muchísimo haber encontrado esto. Ahora puedo tirar mi código y pasar a la siguiente etapa del proyecto.

  • ¿Cómo se compara con GoldenLayout? ¿Se inspiró en ese proyecto?
    Antes me gustaba mucho ese proyecto, pero lamentablemente el soporte se detuvo por completo. Algunas personas lo retomaron, pero aunque lo actualizaron con entusiasmo, no parecía haber una ruta de actualización realista.
    Esto se ve bien y me gustaría probarlo.

    • GoldenLayout es el administrador de layouts JavaScript original, y lo usé durante varios años.
      Al principio, sí me inspiré en otros administradores de layouts, incluido GoldenLayout. El objetivo principal aquí era tener cero dependencias y escribirlo en TypeScript puro, pero ofreciendo librerías wrapper para frameworks como Vue y React.
      Cualquier feedback es bienvenido, y los demos del sitio web muestran la mayoría de las funciones actuales. En la lista de Issues también hay muchas cosas planeadas para el futuro.
    • Probé GoldenLayout hace unos días. El demo de soporte para React del sitio web está basado en v1, pero al instalarlo se instaló v2, y parece que v2 eliminó el soporte para React y no hay documentación ni ejemplos en el sitio. v1 tampoco admitía más que componentes basados en clases.
      En teoría uno podría mantener su propia lógica de adaptador para GoldenLayout, pero en la práctica parece estar muerto. Hay librerías más nuevas como esta, con una sensación de drag and drop también mejor.
      También recuerdo que hace unos 6 años intenté usar GoldenLayout en otro proyecto, pero por varios problemas perceptibles terminé implementándolo yo mismo en TypeScript puro. Aunque se usa bastante, en mi experiencia real no era tan excelente.

  • Buen proyecto. Estaría bien que el demo incluyera contenido común como videos, menús desplegables, grandes cantidades de texto y texto de gran tamaño, para mostrar cómo lo maneja.
    Y me pregunto si existe una versión que tenga solo paneles, sin el marco de ventana.

  • Mantengo un administrador de ventanas en mosaico escrito en Rust, y no puedo ni imaginar la paciencia necesaria para hacer este tipo de trabajo en JS/TS. Mis respetos para mathuo. Es una de las cosas más geniales que he visto últimamente en HN.

  • Muy bueno. Sería genial tener soporte para SolidJS también. Hoy en día no tengo una preferencia especial entre React y Solid, pero varios proyectos donde podría usar esto están hechos con SolidJS.

  • Ya era hora de rehacer Mosaic. https://github.com/mlajtos/mosaic

  • Excelente. ¿Alguien conoce alguna librería similar, pura y sin dependencias, para controles comunes de escritorio como menús, más allá de lo que ofrece HTML?