dockview – TypeScript/React/Vue-Fenster-Layout-Manager (Tabs, Floating, Pop-outs)

 (github.com/mathuo)
5 Punkte von GN⁺ 2025-01-12 | 1 Kommentare | Auf WhatsApp teilen
  • dockview ist ein abhängigkeitsfreier Layout-Manager, der Tabs, Gruppen, Grids und Split-Views unterstützt und in React, Vue, Angular und JavaScript genutzt werden kann
  • Bietet umfassende Layout-Management-Funktionen, darunter Serialisierung/Deserialisierung von Layouts, dockable Views, Docking von Tabs und Gruppen, Drag-and-drop, Floating Groups und Pop-out-Fenster
  • Bietet Themes und Customizing, Shadow-DOM-Unterstützung, Touch- und Mobile-Support, eine Erweiterungs-API sowie eine Dokumentationsseite mit Live-Beispielen
  • Die Pakete sind in dockview, dockview-react, dockview-vue und dockview-angular aufgeteilt; React erfordert react 16.8 oder höher, Vue vue 3.4 oder höher und Angular @angular/core 21 oder höher als Peer Dependency
  • Die Entwicklungsstruktur basiert auf einem NX-Monorepo und Yarn-v1-Workspaces; gebaut wird in der Reihenfolge dockview-core → dockview → Framework-Bindings

Von dockview bereitgestellte Layout-Funktionen

  • dockview ist ein Layout-Manager mit Unterstützung für Tabs, Gruppen, Grids und Split-Views
  • Das Basispaket für JavaScript hat zero dependencies und stellt den vollen Funktionsumfang direkt bereit
  • Unterstützte Funktionen:
    • Serialisierung/Deserialisierung von Layouts
    • Split-View, Grid-View, dockable View
    • Docking von Tabs und Gruppen
    • Drag-and-drop
    • Pop-out-Fenster
    • Floating Groups
    • Touch- und Mobile-Support
    • Shadow-DOM-Unterstützung
    • Themes und Customizing
    • Erweiterungs-API
    • Dokumentationsseite mit Live-Beispielen

Unterstützte Pakete und Frameworks

  • dockview: Paket für JavaScript, bietet Abhängigkeitsfreiheit und den vollen Funktionsumfang
  • dockview-react: React-Binding, erfordert react 16.8 oder höher als Peer Dependency
  • dockview-vue: Vue-3-Binding, erfordert vue 3.4 oder höher als Peer Dependency
  • dockview-angular: Angular-Binding, erfordert @angular/core 21 oder höher als Peer Dependency

Installation und React-Nutzungsbeispiel

  • Bei den Installationsbefehlen wird das jeweilige Framework-Paket ausgewählt
    • npm install dockview
    • npm install dockview-react
    • npm install dockview-vue
    • npm install dockview-angular
  • Das React-Beispiel importiert und nutzt DockviewReact sowie dockview-react/dist/styles/dockview.css
  • Im onReady-Callback wird event.api.addPanel aufgerufen, um ein Panel mit id, component und params hinzuzufügen
  • Vue- und Angular-Beispiele sind auf der Dokumentationsseite zu finden

Entwicklungsstruktur und Build

  • Das Projekt ist ein NX-Monorepo und verwendet Yarn v1-Workspaces
  • Entwicklungsbefehle:
    • yarn install: Abhängigkeiten installieren
    • yarn build: alle Pakete bauen
    • yarn test: Tests ausführen
    • yarn lint: ESLint ausführen
    • yarn format: Prettier ausführen
  • NX verwaltet die Build-Reihenfolge automatisch
    • dockview-core → dockview → dockview-react
    • dockview-core → dockview → dockview-vue
    • dockview-core → dockview → dockview-angular

Qualität, Sicherheit und Lizenz

  • Das Projekt betont hohe Testabdeckung, transparente Builds und Code-Analyse
  • Berücksichtigt Sicherheit, einschließlich verifiziertem Publishing und Builds über GitHub Actions
  • Die Build-Verifizierung ist in den npm-Hinweisen zu provenance zu finden
  • Beiträge können über Issues oder Pull Requests eingereicht werden
  • Die Lizenz ist MIT

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2025-01-12
Hacker-News-Kommentare

  • Wow, wirklich hervorragende Arbeit. Schon auf den ersten Blick wirkt es so, als wäre TypeScript richtig sauber geschrieben, und es scheint auch den Zeitgeist gut zu treffen. Wenn man künftig AI-Anwendungen bauen will, wird man wohl viel mehr von solchen grundlegenden Werkzeugen brauchen
    Technisch habe ich mich schon lange gefragt, wie Komponenten gemountet bzw. unmountet werden, wenn Panels gezogen werden oder ihren Sichtbarkeitsstatus ändern. Manchmal kann display:none günstiger sein als Mount/Unmount
    Da die Panel-Struktur außerdem im Grunde deklarativ ist, frage ich mich, ob geplant ist, gespeicherte TypeScript-Layouts exportieren zu können und eine Art Vite-Plugin bereitzustellen, bei dem Funktionen, also TypeScript-Imports, den Panel-Inhalten zugeordnet werden. Ich denke gerade darüber nach, das außerhalb von JSX als reineren TypeScript-Ansatz zu betrachten

    • Vielleicht habe ich etwas übersehen, aber ich frage mich, wie AI-Anwendungen hier ins Spiel kommen. Wurde diese Anwendung mit AI geschrieben oder für AI-Anwendungen gebaut? Es sieht nicht so aus, als würde das eigentliche Layout-Management mit AI gemacht
    • Was die Rendering-Modi angeht, werden beide Ansätze unterstützt
      https://dockview.dev/docs/core/panels/rendering
      Es gibt eine Option, den Panel-Inhalt immer im DOM zu halten, was wie erwähnt einem Ansatz nahe an display: none entspricht. Umgekehrt gibt es auch eine Option, den Inhalt aus dem DOM zu entfernen
      Aus Sicht von reinem TypeScript ist der Großteil der Bibliothek bereits in reinem TypeScript geschrieben, dazu kommen nur kleine Wrapper-Bibliotheken für Vue und React
      Theoretisch könnte man auch Wrapper für andere Frameworks wie Angular schreiben, und das ist etwas, das ich dieses Jahr noch gern ausprobieren würde
      Laden und Speichern des Zustands wird ebenfalls unterstützt
      https://dockview.dev/docs/core/state/save
      Sag gern Bescheid, ob das deine Frage beantwortet

  • Wirklich beeindruckend. Vor allem ein paar Dinge möchte ich besonders loben: 0 Abhängigkeiten ist für ein JavaScript-Paket großartig, die Dokumentation ist sauber und enthält Beispiele. Auch transparente Builds sollten Standard sein
    Ich wünschte, mehr JavaScript-Pakete wären so

    • Kannst du erklären, was transparente Builds hier bedeutet?
      Nach meinem kurzen Suchen scheint das bereits Standard zu sein. Wenn ein Paket verlangt, dass ich erst selbst einen manuellen Build-Prozess herausfinden muss, nur damit es nach der Installation läuft, benutze ich es einfach nicht

  • Dockview ist hervorragend, und Glückwunsch an @mathuo zu diesem tollen Projekt. Ich habe vor Kurzem 6 oder 7 Bibliotheken aus dieser Kategorie ziemlich gründlich getestet, und Dockview gehört ganz klar zur Spitzengruppe. Auch das GitHub-Repo ist sehr aktiv und gut gepflegt
    Der einzige Grund, warum wir uns in einem aktuellen Projekt am Ende für FlexLayout(https://github.com/caplin/FlexLayout) entschieden haben, war das Fehlen von Unterstützung für vordefinierte/eingeschränkte Größen, aber das wurde inzwischen auf sehr gute Weise ergänzt. Außerdem gefiel mir, wie FL mit vertikalen Tabs und Side-Panels mit vordefiniertem Verhalten umgeht
    Ich freue mich sehr darauf, Dockview in einem der nächsten Projekte einzusetzen

    • Beide sehen gut aus. Die Drag-Box-Ästhetik von FlexLayout ist wirklich schön, und auch die vertikalen Tabs sind ein hervorragendes Detail. Dockview wirkt allerdings ebenfalls wie ein starker Konkurrent, und wenn der HN-Effekt für mehr Sterne sorgt, könnte das den Antrieb geben, einige der vergleichsweise kleinen Vorteile von FlexLayout zu übernehmen

  • Ich habe in einem Freizeitprojekt buchstäblich genau so etwas gebaut, deshalb freue ich mich riesig, das hier zu entdecken. Jetzt kann ich meinen eigenen Code wegwerfen und zum nächsten Schritt des Projekts übergehen

  • Wie ist der Vergleich zu GoldenLayout? War das eine Inspirationsquelle?
    Früher mochte ich dieses Projekt wirklich sehr, aber leider ist der Support komplett eingeschlafen. Ein paar Leute haben es zwar weitergeführt und mit viel Einsatz aktualisiert, aber ein realistischer Upgrade-Pfad war nicht wirklich zu erkennen
    Das hier sieht gut aus, ich würde es gern ausprobieren

    • GoldenLayout ist der ursprüngliche JavaScript-Layout-Manager, und ich habe ihn früher mehrere Jahre verwendet
      Anfangs war es tatsächlich von GoldenLayout und anderen Layout-Managern inspiriert. Das Hauptziel hier war 0 Abhängigkeiten und eine Implementierung in reinem TypeScript, mit Wrapper-Bibliotheken für Frameworks wie Vue und React
      Ich freue mich über jedes Feedback, und die Demo auf der Website zeigt die meisten aktuellen Funktionen. In der Issues-Liste steht auch vieles, was noch geplant ist
    • Ich habe vor ein paar Tagen GoldenLayout ausprobiert. Die React-Support-Demo auf der Website bezieht sich auf v1, aber bei der Installation bekam ich v2, und in v2 scheint React-Support entfernt worden zu sein, ohne Dokumentation oder Beispiele auf der Website. Schon v1 unterstützte nur klassenbasierte Komponenten
      Theoretisch könnte man die Adapter-Logik für GoldenLayout selbst weiterpflegen, aber praktisch wirkt es wie tot. Es gibt Bibliotheken wie diese hier, die neuer sind und sich beim Drag-and-Drop auch besser anfühlen
      Ich erinnere mich außerdem daran, dass ich GoldenLayout vor etwa 6 Jahren in einem anderen Projekt verwenden wollte, es dann aber wegen einiger gefühlter Probleme letztlich selbst in reinem TypeScript umgesetzt habe. Es ist zwar weit verbreitet, aber in der Praxis war meine Erfahrung damit nicht besonders gut

  • Gutes Projekt. Es wäre schön, wenn die Demo gewöhnliche Inhalte wie Videos, Dropdowns, große Textmengen oder Text in großer Schrift enthalten würde, um zu zeigen, wie damit umgegangen wird
    Und ich frage mich, ob es auch eine Version nur mit Panels ohne Window-Chrome gibt

  • Ich pflege einen in Rust geschriebenen Tiling Window Manager, und ich kann mir wirklich nicht vorstellen, die Geduld für solche Arbeit in JS/TS aufzubringen. Großen Respekt an mathuo. Das ist eines der coolsten Dinge, die ich in letzter Zeit auf HN gesehen habe

  • Wirklich schön. SolidJS-Unterstützung wäre auch toll. Ich habe derzeit keine starke Präferenz zwischen React und Solid, aber ein paar Projekte, in denen ich das einsetzen könnte, sind in SolidJS geschrieben

  • Es ist Zeit, Mosaic neu zu bauen. https://github.com/mlajtos/mosaic

  • Hervorragend. Kennt jemand eine ähnliche reine Library ohne Abhängigkeiten für allgemeine Desktop-Steuerelemente wie Menüs, also über das hinaus, was HTML von sich aus bietet?