dockview - Gestionnaire de disposition de fenêtres TypeScript/React/Vue (onglets, flottants, pop-out)

 (github.com/mathuo)
5 points par GN⁺ 2025-01-12 | 1 commentaires | Partager sur WhatsApp
  • dockview est un gestionnaire de disposition sans dépendances prenant en charge les onglets, groupes, grilles et split-view, utilisable avec React, Vue, Angular et JavaScript
  • Il fournit des fonctionnalités complètes de gestion de disposition, notamment la sérialisation/désérialisation de layout, les vues dockables, le docking d’onglets et de groupes, le glisser-déposer, les groupes flottants et les fenêtres pop-out
  • Il propose l’application de thèmes et la personnalisation, la prise en charge du Shadow DOM, le support tactile et mobile, une API d’extension, ainsi qu’un site de documentation avec des exemples en direct
  • Les packages sont répartis entre dockview, dockview-react, dockview-vue et dockview-angular ; React requiert react 16.8 ou plus, Vue requiert vue 3.4 ou plus, et Angular requiert @angular/core 21 ou plus comme peer dependency
  • La structure de développement repose sur un monorepo NX et les workspaces Yarn v1, avec une construction dans l’ordre dockview-core → dockview → bindings de framework

Fonctionnalités de disposition proposées par dockview

  • dockview est un gestionnaire de disposition prenant en charge les onglets, groupes, grilles et split-view
  • Le package de base pour JavaScript est zero dependencies et permet d’utiliser immédiatement l’ensemble des fonctionnalités
  • Fonctionnalités prises en charge :
    • sérialisation/désérialisation de layout
    • split-view, grid-view, vue dockable
    • docking des onglets et des groupes
    • glisser-déposer
    • fenêtres pop-out
    • groupes flottants
    • support tactile et mobile
    • prise en charge du Shadow DOM
    • application de thèmes et personnalisation
    • API d’extension
    • site de documentation avec exemples en direct

Packages pris en charge et frameworks

  • dockview : package pour JavaScript, offrant l’absence de dépendances et l’ensemble des fonctionnalités
  • dockview-react : binding React, nécessitant react 16.8 ou plus comme peer dependency
  • dockview-vue : binding Vue 3, nécessitant vue 3.4 ou plus comme peer dependency
  • dockview-angular : binding Angular, nécessitant @angular/core 21 ou plus comme peer dependency

Installation et exemple d’utilisation avec React

  • La commande d’installation consiste à choisir le package selon le framework
    • npm install dockview
    • npm install dockview-react
    • npm install dockview-vue
    • npm install dockview-angular
  • L’exemple React importe DockviewReact et dockview-react/dist/styles/dockview.css pour les utiliser
  • Dans le callback onReady, on appelle event.api.addPanel pour ajouter un panneau avec id, component et params
  • Les exemples Vue et Angular sont disponibles sur le site de documentation

Structure de développement et build

  • Le projet est un monorepo NX et utilise les workspaces Yarn v1
  • Commandes de développement :
    • yarn install : installation des dépendances
    • yarn build : build de tous les packages
    • yarn test : exécution des tests
    • yarn lint : exécution d’ESLint
    • yarn format : exécution de Prettier
  • NX gère automatiquement l’ordre de build
    • dockview-core → dockview → dockview-react
    • dockview-core → dockview → dockview-vue
    • dockview-core → dockview → dockview-angular

Qualité, sécurité, licence

  • Le projet met l’accent sur une forte couverture de tests, des builds transparents et l’analyse de code
  • Il prend en compte la sécurité, notamment via une publication et des builds vérifiés par GitHub Actions
  • La vérification des builds peut être consultée dans les informations de npm relatives à la provenance
  • Les contributions peuvent être proposées via une issue ou une pull request
  • La licence est MIT

À lire aussi

1 commentaires

 
GN⁺ 2025-01-12
Avis sur Hacker News

  • Waouh, c’est vraiment un travail remarquable. Même au premier coup d’œil, le TypeScript semble bien écrit, et le projet paraît aussi être dans l’air du temps. Je pense qu’il faudra beaucoup plus d’outils de base de ce genre pour créer des applications d’IA à l’avenir
    Techniquement, je me suis longtemps demandé comment les composants étaient montés/démontés quand on fait glisser des panneaux ou que leur état d’affichage change. Parfois, display:none peut être moins coûteux que le montage/démontage
    Et comme la structure des panneaux est en fait déclarative, je me demande aussi s’il est prévu d’exposer un plugin Vite qui exporterait une mise en page TypeScript enregistrée, avec des fonctions — autrement dit des imports TypeScript — mappées au contenu des panneaux. J’essaie de raisonner de façon plus purement TypeScript, en dehors de JSX

    • J’ai peut-être raté quelque chose, mais je me demande quel est le lien avec les applications d’IA ici. Cette application a-t-elle été écrite par une IA, ou conçue pour des applications d’IA ? On ne dirait pas que la gestion de la mise en page elle-même soit réellement faite par IA
    • Côté modes de rendu, les deux approches sont prises en charge
      https://dockview.dev/docs/core/panels/rendering
      Il existe une option pour garder en permanence le contenu des panneaux dans le DOM, et comme tu le dis, une approche proche de display: none est possible. À l’inverse, il existe aussi une option pour retirer le contenu du DOM
      Du point de vue TypeScript pur, la majeure partie de la bibliothèque est écrite en TypeScript pur, avec seulement de petits wrappers pour Vue et React
      En théorie, il serait possible d’écrire des wrappers pour d’autres frameworks comme Angular, et c’est quelque chose que j’aimerais essayer de faire cette année
      Le chargement et l’enregistrement de l’état sont également pris en charge
      https://dockview.dev/docs/core/state/save
      Dis-moi si cette réponse répond à ta question

  • Vraiment impressionnant. Je tiens surtout à saluer quelques points : zéro dépendance, c’est excellent pour un package JavaScript, la documentation est propre et il y a des exemples. Les builds transparents devraient aussi devenir la norme
    J’aimerais que davantage de packages JavaScript soient comme ça

    • Peux-tu expliquer ce que tu entends ici par builds transparents ?
      D’après ce que j’ai compris en cherchant rapidement, ça ressemble déjà à un standard. Si un package m’oblige à comprendre moi-même un processus de build manuel après l’installation pour le faire fonctionner, je ne l’utilise tout simplement pas

  • Dockview est excellent, félicitations à @mathuo pour ce super projet. J’ai récemment testé assez en profondeur 6 ou 7 bibliothèques de cette catégorie, et Dockview est clairement dans le haut du panier. Le dépôt GitHub est aussi très actif et bien maintenu
    La seule raison pour laquelle j’ai finalement choisi FlexLayout(https://github.com/caplin/FlexLayout) dans un projet récent, c’est l’absence de prise en charge des tailles prédéfinies/contraintes, mais cela a depuis été ajouté de très bonne manière. J’aimais aussi la façon dont FL gère les onglets verticaux et les panneaux latéraux avec des comportements prédéfinis
    J’ai vraiment hâte de pouvoir utiliser Dockview dans l’un de mes prochains projets

    • Les deux ont l’air bien. L’esthétique de la zone de glisser-déposer de FlexLayout est vraiment réussie, et la gestion des onglets verticaux est un excellent détail. Cela dit, Dockview semble aussi être un concurrent sérieux, et si l’effet HN lui apporte plus d’étoiles, cela pourrait lui donner l’élan nécessaire pour intégrer les petits avantages relatifs de FlexLayout

  • Je construisais littéralement quelque chose comme ça pour un projet perso, et je suis vraiment content de l’avoir découvert. Je peux maintenant jeter mon code et passer à l’étape suivante du projet

  • Comment cela se compare-t-il à GoldenLayout ? Est-ce que ce projet s’en est inspiré ?
    J’aimais beaucoup ce projet à l’époque, mais malheureusement son support s’est complètement arrêté. Quelques personnes ont bien repris le flambeau, mais malgré des mises à jour enthousiastes, je ne voyais pas vraiment de chemin de mise à niveau réaliste
    Celui-ci a l’air bien, et j’ai envie de l’essayer

    • GoldenLayout est le gestionnaire de mise en page JavaScript d’origine, et je l’ai utilisé pendant plusieurs années
      Au départ, je me suis effectivement inspiré de GoldenLayout et d’autres gestionnaires de mise en page. L’objectif principal ici était d’avoir zéro dépendance, d’écrire le tout en TypeScript pur, tout en fournissant des wrappers pour des frameworks comme Vue et React
      Tout retour est bienvenu, et la démo du site web montre la plupart des fonctionnalités actuelles. La liste des issues contient aussi beaucoup de choses prévues pour la suite
    • J’ai essayé GoldenLayout il y a quelques jours. La démo de support React sur le site web est basée sur la v1, mais à l’installation j’ai obtenu la v2, qui semble avoir supprimé le support React, sans documentation ni exemple sur le site. Même la v1 ne prenait en charge que les composants à base de classes
      En théorie, on pourrait maintenir soi-même la logique d’adaptateur pour GoldenLayout, mais en pratique le projet semble mort. Il existe des bibliothèques plus récentes comme celle-ci, avec une meilleure sensation de drag-and-drop
      Je me souviens aussi qu’il y a environ 6 ans, sur un autre projet, j’avais essayé d’utiliser GoldenLayout, puis fini par implémenter moi-même quelque chose en TypeScript pur à cause de plusieurs problèmes ressentis à l’usage. C’est largement utilisé, mais dans mon expérience réelle ce n’était pas si formidable

  • Beau projet. Ce serait bien de mettre du contenu courant dans la démo — vidéo, menus déroulants, beaucoup de texte, texte de grande taille — pour montrer comment c’est géré
    Et je me demande aussi s’il existe une version avec seulement les panneaux, sans chrome de fenêtre

  • Je maintiens un gestionnaire de fenêtres en mosaïque écrit en Rust, et je n’arrive absolument pas à imaginer avoir la patience de faire ce genre de travail en JS/TS. Respect à mathuo. C’est l’une des choses les plus cool que j’aie vues récemment sur HN

  • Vraiment très bien. Ce serait chouette d’avoir aussi le support de SolidJS. Ces temps-ci, je n’ai pas de préférence particulière entre React et Solid, mais j’ai quelques projets qui pourraient utiliser ça et qui sont en SolidJS

  • Il est temps de refaire Mosaic. https://github.com/mlajtos/mosaic

  • Excellent. Est-ce que quelqu’un connaît des bibliothèques pures similaires, sans dépendances, pour des contrôles de bureau courants comme les menus, au-delà de ce que HTML fournit ?