Blitz : un moteur de rendu web léger, modulaire et extensible

Blitz : un moteur de rendu web léger, modulaire et extensible

Blitz est un moteur de rendu HTML/CSS « natif » développé pour prendre en charge le projet « Dioxus Native ». Au lieu d’un moteur JavaScript, il utilise une API Rust native, ce qui lui permet d’interfacer directement avec les bibliothèques Rust de réactivité et de gestion d’état.

Deux frontends actuellement pris en charge

• Frontend HTML/Markdown : permet de rendre des chaînes HTML. Utile pour prévisualiser des fichiers HTML et Markdown, mais avec peu d’interactivité.
• Frontend Dioxus : permet de rendre le VirtualDom de Dioxus. Prend en charge une interactivité complète grâce à la gestion des événements de Dioxus.

Technologies sur lesquelles repose Blitz

• Stylo : moteur CSS parallèle de niveau navigateur de Firefox
• Vello + WGPU : rendu
• Taffy : mise en page au niveau des boîtes
• Parley : mise en page du texte et des éléments inline
• AccessKit : accessibilité
• Winit : gestion des fenêtres et des entrées

Remarque : ce dépôt inclut une nouvelle version de Blitz utilisant Stylo. Le code source de la version précédente reste disponible dans la branche legacy, mais n’est plus activement développé.

Captures d’écran

• Moteur de rendu Dioxus
• Moteur de rendu HTML (rendu de google.com)

Essayer

1. Cloner ce dépôt
2. Exécuter les exemples :
   • cargo run --example google
   • cargo run --example url https://myurl.com
   • D’autres exemples sont également disponibles
   • Ajouter --release pour de meilleures performances à l’exécution
3. Modifier l’échelle avec Ctrl/Cmd + + / Ctrl/Cmd + -, appuyer sur F1 pour afficher les rectangles de layout

Objectifs

Blitz est conçu pour rendre du HTML et du CSS. Il ne prend pas en charge toutes les fonctionnalités d’un navigateur, et ces fonctionnalités « supplémentaires » seront proposées de manière optionnelle. Le projet considère qu’un navigateur est excessivement complexe pour le rendu HTML/CSS de base.

Fonctionnalités prévues :

• Layout HTML moderne (flexbox, grid, table, block, inline, absolute/fixed, etc.)
• CSS avancé (sélecteurs complexes, media queries, variables CSS)
• Contrôles de formulaire HTML
• Accessibilité via AccessKit
• Extensibilité via des widgets personnalisés

Fonctionnalités non prises en charge :

• webrtc, websockets, bluetooth, localstorage, etc.

Il n’existe pas encore de bindings Blitz pour d’autres langages (JavaScript, Python, etc.), mais les contributions sont les bienvenues.

Architecture

Blitz est divisé en plusieurs parties :

• blitz-dom : abstraction DOM centrale incluant l’interprétation des styles et le layout, mais pas le dessin/la peinture
• blitz : ajoute à blitz-dom un moteur de rendu basé sur Vello/WGPU
• dioxus-blitz : couche d’intégration Dioxus qui utilise Blitz pour rendre des applications Dioxus. Actuellement, dioxus-blitz inclut aussi le moteur de rendu HTML, mais celui-ci pourrait être séparé dans un package distinct à l’avenir.

État

Blitz est actuellement expérimental. Le projet est activement développé pour devenir utilisable, mais il n’est pas encore recommandé de construire des applications avec.

TODO

• Abstraction centrale de l’arbre DOM
• Parsing des styles avec html5ever
• Calcul des styles pour les documents html5ever
• Calcul de layout avec Taffy
• Rendu avec WGPU

Rendu

• Rendu dans une fenêtre
• Rendu dans une image
• Dégradés
• Bordures/contours
• Images raster (png, jpeg, etc.)
• Zoom
• SVG
  • SVG externes (prise en charge de base)
  • SVG inline
• Ombres
• Animations/transitions
• Contrôles de formulaire standard (cases à cocher/listes déroulantes/sliders, etc.)
• Widgets personnalisés
• Éléments shadow

Layout

• Inline (prise en charge partielle — implémentation immature)
• Bloc
• Flexbox
• Grid
  • Lignes de grille nommées
  • Sous-grille
• Table
• Z-index
• Fonctionnalités CSS supplémentaires
  • box-sizing: content-box
  • calc()
  • position: static
  • direction: rtl
  • transform

Texte

• Chargement des polices
  • Chargement des polices système
  • Chargement des polices web
• Texte
  • Shaping / Bidi
  • Layout / retour à la ligne
  • Taille de police / hauteur de ligne
  • Couleur du texte
  • Gras / italique
  • Soulignement / texte barré
• Sélection de texte

Entrée

• Défilement
  • Vue racine
  • Éléments overflow: scroll
• Détection du survol
• Gestion des clics
• Saisie de texte

Performances

• Hot reloading
• Défilement sans réinterprétation des styles ni du layout
• Cache des styles
• Cache du layout

Divers

• Fenêtres multiples
• Arbre d’accessibilité
• Focus
• Outils de développement
• Hooks pour les menus contextuels
• use_wgpu_context() pour récupérer des éléments vers une surface de rendu arbitraire

Licence

Ce projet est distribué sous double licence Apache 2.0 et MIT. Sauf indication contraire explicite, toute contribution soumise intentionnellement par un utilisateur pour être incluse dans stylo-dioxus est licenciée sous MIT sans conditions supplémentaires.

Le résumé de GN⁺

• Blitz est un moteur de rendu HTML/CSS léger basé sur Rust, développé pour prendre en charge le projet Dioxus.
• Il écarte les fonctionnalités complexes des navigateurs pour se concentrer sur le rendu HTML/CSS de base.
• Il est au stade expérimental et n’est pas encore recommandé pour la création d’applications.
• Des projets aux fonctionnalités similaires incluent notamment Servo et WebRender.