docview - Gerenciador de layout de janelas em TypeScript/React/Vue (abas, flutuante, pop-out)

 (github.com/mathuo)
5 pontos por GN⁺ 2025-01-12 | 1 comentários | Compartilhar no WhatsApp
  • dockview é um gerenciador de layout sem dependências que oferece suporte a abas, grupos, grids e split-view, podendo ser usado com React, Vue, Angular e JavaScript
  • Oferece recursos completos de gerenciamento de layout, incluindo serialização/desserialização de layouts, dockable view, encaixe de abas e grupos, drag and drop, grupos flutuantes e janelas pop-out
  • Oferece aplicação de temas e customização, suporte a Shadow DOM, suporte a toque e mobile, API de extensão e um site de documentação com exemplos ao vivo
  • Os pacotes são divididos em dockview, dockview-react, dockview-vue e dockview-angular; React exige react 16.8 ou superior como peer dependency, Vue exige vue 3.4 ou superior, e Angular exige @angular/core 21 ou superior
  • A estrutura de desenvolvimento é baseada em um monorepo NX e Yarn v1 workspaces, e o build ocorre na ordem dockview-core → dockview → bindings de framework

Recursos de layout oferecidos pelo dockview

  • dockview é um gerenciador de layout com suporte a abas, grupos, grids e split-view
  • O pacote básico para JavaScript tem zero dependencies e permite usar todos os recursos diretamente
  • Recursos suportados:
    • Serialização/desserialização de layouts
    • split-view, grid-view, dockable view
    • Encaixe de abas e grupos
    • Drag and drop
    • Janelas pop-out
    • Grupos flutuantes
    • Suporte a toque e mobile
    • Suporte a Shadow DOM
    • Aplicação de temas e customização
    • API de extensão
    • Site de documentação com exemplos ao vivo

Pacotes e frameworks compatíveis

  • dockview: pacote para JavaScript, sem dependências e com todos os recursos
  • dockview-react: binding para React, exige react 16.8 ou superior como peer dependency
  • dockview-vue: binding para Vue 3, exige vue 3.4 ou superior como peer dependency
  • dockview-angular: binding para Angular, exige @angular/core 21 ou superior como peer dependency

Instalação e exemplo de uso com React

  • O comando de instalação consiste em escolher o pacote específico para o framework
    • npm install dockview
    • npm install dockview-react
    • npm install dockview-vue
    • npm install dockview-angular
  • O exemplo em React importa e usa DockviewReact e dockview-react/dist/styles/dockview.css
  • No callback onReady, chama event.api.addPanel para adicionar um painel com id, component e params
  • Exemplos para Vue e Angular podem ser vistos no site de documentação

Estrutura de desenvolvimento e build

  • O projeto é um monorepo NX e usa workspaces do Yarn v1
  • Comandos de desenvolvimento:
    • yarn install: instala as dependências
    • yarn build: faz o build de todos os pacotes
    • yarn test: executa os testes
    • yarn lint: executa o ESLint
    • yarn format: executa o Prettier
  • O NX gerencia automaticamente a ordem de build
    • dockview-core → dockview → dockview-react
    • dockview-core → dockview → dockview-vue
    • dockview-core → dockview → dockview-angular

Qualidade, segurança e licença

  • O projeto enfatiza alta cobertura de testes, build transparente e análise de código
  • Considera segurança, incluindo publishing e builds verificados por meio do GitHub Actions
  • A verificação de build pode ser consultada nas orientações relacionadas a provenance do npm
  • Contribuições podem ser feitas via issue ou pull request
  • A licença é MIT

Leituras relacionadas

1 comentários

 
GN⁺ 2025-01-12
Opiniões no Hacker News

  • Uau, um trabalho realmente excelente. Mesmo à primeira vista, o TypeScript parece bem escrito, e acho que também captou bem o momento atual. Para criar aplicações de IA daqui para frente, acho que vamos precisar de muito mais dessas ferramentas fundamentais
    Tecnicamente, sempre tive curiosidade sobre a forma de montar/desmontar componentes quando um painel é arrastado ou quando seu estado de exibição muda. Às vezes, display:none pode ser mais barato do que montar/desmontar
    Além disso, como a estrutura dos painéis é praticamente declarativa, também fico curioso se há planos de expor um plugin do Vite que exporte um layout TypeScript salvo e em que funções, isto é, imports TypeScript, sejam mapeadas para o conteúdo dos painéis. Estou pensando em uma abordagem mais puramente TypeScript, fora do JSX

    • Posso ter deixado passar algo, mas fiquei curioso sobre como aplicações de IA se relacionam com isso aqui. Esta aplicação foi escrita com IA ou foi feita para aplicações de IA? Não parece que o gerenciamento de layout em si seja feito por IA
    • Em termos de modos de renderização, os dois enfoques são compatíveis
      https://dockview.dev/docs/core/panels/rendering
      Há uma opção para manter o conteúdo dos painéis sempre no DOM, e, como você mencionou, também é possível uma abordagem próxima de display: none. Por outro lado, também há uma opção para remover o conteúdo do DOM
      Do ponto de vista de TypeScript puro, a maior parte da biblioteca foi escrita em TypeScript puro, com apenas pequenas bibliotecas wrapper para Vue e React
      Em teoria, também seria possível escrever wrappers para outros frameworks, como Angular, e é algo que eu gostaria de tentar ainda este ano
      Também há suporte a carregar e salvar estado
      https://dockview.dev/docs/core/state/save
      Seria bom saber se esta resposta resolve a sua dúvida

  • Realmente impressionante. Em especial, quero elogiar bastante algumas coisas: zero dependências é ótimo para um pacote JavaScript, a documentação é clara e tem exemplos. Build transparente também deveria ser o padrão
    Gostaria que mais pacotes JavaScript fossem assim

    • Você poderia explicar o que significa build transparente aqui?
      Pelo que entendi em uma busca rápida, isso já parece ser o padrão. Se um pacote exige que eu descubra manualmente um processo de build para fazê-lo funcionar depois de instalar, eu simplesmente não uso

  • Dockview é excelente, e parabéns ao @mathuo pelo ótimo projeto. Recentemente testei de forma bastante minuciosa umas 6 ou 7 bibliotecas dessa categoria, e Dockview está claramente entre as melhores. O GitHub também é muito ativo e bem mantido
    No projeto recente, o único motivo para eu acabar escolhendo FlexLayout(https://github.com/caplin/FlexLayout) foi a falta de suporte a tamanhos predefinidos/limitados, mas isso foi adicionado depois de uma forma muito boa. Também gostei da forma como o FL lida com abas verticais e painéis laterais com comportamentos predefinidos
    Estou muito ansioso para usar o Dockview em um dos meus próximos projetos

    • Ambos parecem bons. A estética da caixa de arrastar do FlexLayout é muito boa, e o tratamento de abas verticais também é um ótimo detalhe. Ainda assim, o Dockview parece ser um concorrente forte e, se ganhar estrelas com o efeito HN, talvez ganhe impulso para incorporar as vantagens relativamente pequenas que o FlexLayout tem

  • Eu estava literalmente criando algo assim como projeto paralelo, então fiquei muito feliz ao encontrar isto. Agora posso jogar fora meu código e passar para a próxima etapa do projeto

  • Como ele se compara ao GoldenLayout? Foi inspirado nele?
    Eu gostava muito daquele projeto no passado, mas infelizmente o suporte parou completamente. Algumas pessoas assumiram, mas, apesar de atualizações entusiasmadas, não parecia haver um caminho realista de upgrade
    Este parece bom, e quero testá-lo

    • GoldenLayout é o gerenciador de layout JavaScript original, e eu o usei por vários anos no passado
      No início, é verdade que ele foi inspirado por outros gerenciadores de layout, incluindo o GoldenLayout. O principal objetivo aqui era ter zero dependências, ser escrito em TypeScript puro e oferecer bibliotecas wrapper para frameworks como Vue e React
      Qualquer feedback é bem-vindo, e a demonstração no site mostra a maior parte dos recursos atuais. A lista de Issues também tem muitas coisas planejadas para o futuro
    • Usei GoldenLayout alguns dias atrás. A demonstração de suporte a React no site é baseada na v1, mas, ao instalar, veio a v2, e a v2 parece ter removido o suporte a React, sem documentação ou exemplos no site. A v1 também só oferecia suporte a componentes baseados em classes
      Em teoria, daria para manter por conta própria uma lógica de adaptador para o GoldenLayout, mas, na prática, ele parece estar morto. Existem bibliotecas mais novas, como esta, e com uma sensação melhor de drag and drop
      Também me lembro de tentar usar o GoldenLayout em outro projeto há cerca de 6 anos, mas, por causa de alguns problemas perceptíveis, acabei implementando eu mesmo em TypeScript puro. Ele é bastante usado, mas, pela minha experiência real, não era tão excelente assim

  • Bom projeto. Seria legal colocar conteúdos comuns na demonstração, como vídeo, dropdowns, grandes volumes de texto e texto em tamanho grande, para mostrar como isso é tratado
    Também fico curioso se existe uma versão só com os painéis, sem a moldura da janela

  • Mantenho um gerenciador de janelas em mosaico escrito em Rust, e não consigo nem imaginar ter paciência para fazer esse tipo de trabalho em JS/TS. Respeito ao mathuo. É uma das coisas mais legais que vi recentemente no HN

  • Muito bom. Seria ótimo ter suporte a SolidJS também. Hoje em dia não tenho uma preferência especial entre React e Solid, mas alguns projetos em que eu poderia usar isto são feitos em SolidJS

  • Está na hora de recriar o Mosaic. https://github.com/mlajtos/mosaic

  • Excelente. Alguém conhece uma biblioteca pura, sem dependências, semelhante para controles comuns de desktop, como menus, além do que o HTML oferece?