Blitz: Leichter, modularer und erweiterbarer Web-Renderer

Blitz: Leichter, modularer und erweiterbarer Web-Renderer

Blitz ist ein „nativer“ HTML/CSS-Renderer, der zur Unterstützung des Projekts „Dioxus Native“ entwickelt wurde. Anstelle einer JavaScript-Engine verwendet er native Rust-APIs und kann dadurch direkt mit Rust-Bibliotheken für Reaktivität und State-Management interagieren.

Aktuell werden zwei Frontends unterstützt

• HTML/Markdown-Frontend: Kann HTML-Strings rendern. Nützlich für die Vorschau von HTML- und Markdown-Dateien, aber mit eingeschränkter Interaktivität.
• Dioxus-Frontend: Kann das Dioxus VirtualDom rendern. Unterstützt vollständige Interaktivität über die Event-Verarbeitung von Dioxus.

Technische Grundlage von Blitz

• Stylo: Parallele CSS-Engine auf Browser-Niveau aus Firefox
• Vello + WGPU: Rendering
• Taffy: Layout auf Box-Ebene
• Parley: Text-/Inline-Layout
• AccessKit: Barrierefreiheit
• Winit: Fenster- und Eingabeverarbeitung

Hinweis: Dieses Repository enthält eine neue Version von Blitz, die Stylo verwendet. Der Quellcode der vorherigen Version ist weiterhin im Legacy-Branch verfügbar, wird aber nicht mehr aktiv weiterentwickelt.

Screenshots

• Dioxus-Renderer
• HTML-Renderer (Rendering von google.com)

Ausprobieren

1. Dieses Repository klonen
2. Beispiele ausführen:
   • cargo run --example google
   • cargo run --example url https://myurl.com
   • Es können auch andere Beispiele verwendet werden
   • Für bessere Laufzeit-Performance --release hinzufügen
3. Mit Ctrl/Cmd + + / Ctrl/Cmd + - den Maßstab ändern, mit F1 die Layout-Rechtecke anzeigen

Ziele

Blitz ist für das Rendern von HTML und CSS konzipiert. Es unterstützt nicht alle Funktionen eines Browsers; solche „zusätzlichen“ Funktionen sollen optional bereitgestellt werden. Browser sind aus Sicht des Projekts für grundlegendes HTML/CSS-Rendering übermäßig komplex.

Geplante Unterstützung:

• Modernes HTML-Layout (flexbox, grid, table, block, inline, absolute/fixed usw.)
• Fortgeschrittenes CSS (komplexe Selektoren, Media Queries, CSS-Variablen)
• HTML-Formular-Steuerelemente
• Barrierefreiheit über AccessKit
• Erweiterbarkeit durch benutzerdefinierte Widgets

Nicht unterstützte Funktionen:

• webrtc, websockets, bluetooth, localstorage usw.

Es gibt noch keine Blitz-Bindings für andere Sprachen (JavaScript, Python usw.), Beiträge sind aber willkommen.

Architektur

Blitz ist in mehrere Teile gegliedert:

• blitz-dom: Kern-DOM-Abstraktion mit Style-Auflösung und Layout, aber ohne Zeichnen/Malen
• blitz: Fügt blitz-dom einen Renderer auf Basis von Vello/WGPU hinzu
• dioxus-blitz: Dioxus-Integrationsschicht, die Dioxus-Apps mit Blitz rendert. Aktuell enthält dioxus-blitz auch den HTML-Renderer, dies könnte künftig jedoch in ein separates Paket ausgelagert werden.

Status

Blitz ist derzeit experimentell. Es wird aktiv daran gearbeitet, es in einen benutzbaren Zustand zu bringen, aber zum Bau von Apps wird es derzeit noch nicht empfohlen.

TODO

• Kernabstraktion für den DOM-Baum
• Style-Parsing mit html5ever
• Style-Berechnung für html5ever-Dokumente
• Layout-Berechnung mit Taffy
• Rendering mit WGPU

Rendering

• Rendering in ein Fenster
• Rendering in ein Bild
• Farbverläufe
• Rahmen/Umrandungen
• Rasterbilder (png, jpeg usw.)
• Zoom
• SVG
  • Externe SVGs (grundsätzlich unterstützt)
  • Inline-SVG
• Schatten
• Animationen/Übergänge
• Standard-Formular-Steuerelemente (Checkboxen/Dropdowns/Slider usw.)
• Benutzerdefinierte Widgets
• Shadow-Elemente

Layout

• Inline (teilweise unterstützt – Implementierung noch unausgereift)
• Block
• Flexbox
• Grid
  • Benannte Grid-Linien
  • Subgrid
• Tabellen
• Z-Index
• Zusätzliche CSS-Funktionen
  • box-sizing: content-box
  • calc()
  • position: static
  • direction: rtl
  • transform

Text

• Laden von Schriftarten
  • Laden von Systemschriftarten
  • Laden von Webfonts
• Text
  • Shaping / Bidi
  • Layout / Zeilenumbruch
  • Schriftgröße / Zeilenhöhe
  • Textfarbe
  • Fett / Kursiv
  • Unterstreichung / Durchstreichung
• Textauswahl

Eingabe

• Scrollen
  • Root-View
  • Elemente mit overflow: scroll
• Hover-Erkennung
• Klick-Verarbeitung
• Texteingabe

Performance

• Hot Reloading
• Scrollen ohne erneute Style- und Layout-Auflösung
• Style-Caching
• Layout-Caching

Sonstiges

• Mehrere Fenster
• Accessibility-Tree
• Fokus
• Entwicklertools
• Hooks für Kontextmenüs
• use_wgpu_context(), um Elemente auf beliebige Rendering-Oberflächen zu holen

Lizenz

Dieses Projekt ist dual lizenziert unter Apache 2.0 und MIT. Sofern nicht anders angegeben, wird jeder Beitrag, den ein Nutzer absichtlich zur Aufnahme in stylo-dioxus einreicht, ohne zusätzliche Bedingungen unter der MIT-Lizenz lizenziert.

Zusammenfassung von GN⁺

• Blitz ist ein leichter HTML/CSS-Renderer auf Rust-Basis, der zur Unterstützung des Dioxus-Projekts entwickelt wurde.
• Komplexe Browser-Funktionen werden bewusst ausgeklammert, stattdessen liegt der Fokus auf grundlegendem HTML/CSS-Rendering.
• Das Projekt befindet sich in einer experimentellen Phase und wird derzeit noch nicht für den Bau von Apps empfohlen.
• Ähnliche Projekte mit vergleichbarer Ausrichtung sind Servo, WebRender usw.