Blitz: renderizador web ligero, modular y escalable

Blitz: renderizador web ligero, modular y escalable

Blitz es un renderizador HTML/CSS "nativo" desarrollado para dar soporte al proyecto "Dioxus Native". En lugar de usar un motor de JavaScript, utiliza APIs nativas de Rust para poder interactuar directamente con bibliotecas de reactividad y manejo de estado de Rust.

Actualmente admite dos frontends

• Frontend de HTML/Markdown: puede renderizar cadenas HTML. Es útil para previsualizar archivos HTML y Markdown, pero carece de interactividad.
• Frontend de Dioxus: puede renderizar el VirtualDom de Dioxus. Admite interactividad completa mediante el manejo de eventos de Dioxus.

Tecnologías base de Blitz

• Stylo: el motor CSS paralelo de nivel navegador de Firefox
• Vello + WGPU: renderizado
• Taffy: layout a nivel de cajas
• Parley: layout de texto/a nivel inline
• AccessKit: accesibilidad
• Winit: ventanas y manejo de entrada

Nota: este repositorio incluye una nueva versión de Blitz que usa Stylo. El código fuente de la versión anterior sigue disponible en la rama legacy, pero ya no está en desarrollo activo.

Capturas de pantalla

• Renderizador de Dioxus
• Renderizador HTML (renderizando google.com)

Probarlo

1. Clona este repositorio
2. Ejecuta ejemplos:
   • cargo run --example google
   • cargo run --example url https://myurl.com
   • También puedes usar otros ejemplos
   • Agrega --release para un mejor rendimiento en ejecución
3. Cambia la escala con Ctrl/Cmd + + / Ctrl/Cmd + - y presiona F1 para mostrar los rectángulos de layout

Objetivos

Blitz está diseñado para renderizar HTML y CSS. No soporta todas las capacidades de un navegador, y planea ofrecer esas funciones "adicionales" de forma opcional. Considera que los navegadores son excesivamente complejos para el renderizado básico de HTML/CSS.

Funciones planeadas:

• Layout HTML moderno (flexbox, grid, table, block, inline, absolute/fixed, etc.)
• CSS avanzado (selectores complejos, media queries, variables CSS)
• Controles de formulario HTML
• Accesibilidad mediante AccessKit
• Extensibilidad mediante widgets personalizados

Funciones no soportadas:

• webrtc, websockets, bluetooth, localstorage, etc.

Aún no existen bindings de Blitz para otros lenguajes (JavaScript, Python, etc.), pero las contribuciones son bienvenidas.

Arquitectura

Blitz se divide en varias partes:

• blitz-dom: abstracción central del DOM que incluye resolución de estilos y layout, pero no dibujo/pintado
• blitz: agrega a blitz-dom un renderizador basado en Vello/WGPU
• dioxus-blitz: capa de integración de Dioxus que renderiza apps de Dioxus usando Blitz. Actualmente dioxus-blitz también incluye un renderizador HTML, pero es posible que en el futuro se separe en un paquete distinto.

Estado

Blitz es actualmente experimental. Se está trabajando activamente para hacerlo utilizable, pero todavía no se recomienda usarlo para construir aplicaciones.

TODO

• Abstracción central del árbol DOM
• Parsing de estilos con html5ever
• Cálculo de estilos para documentos html5ever
• Cálculo de layout con Taffy
• Renderizado con WGPU

Renderizado

• Renderizar en ventana
• Renderizar a imagen
• Gradientes
• Bordes/contornos
• Imágenes rasterizadas (png, jpeg, etc.)
• Zoom
• SVG
  • SVG externo (soporte básico)
  • SVG inline
• Sombras
• Animaciones/transiciones
• Controles de formulario estándar (checkbox/dropdown/slider, etc.)
• Widgets personalizados
• Elementos shadow

Layout

• Inline (soporte parcial - implementación inmadura)
• Block
• Flexbox
• Grid
  • Líneas de grid con nombre
  • Subgrid
• Table
• Z-index
• Funciones CSS adicionales
  • box-sizing: content-box
  • calc()
  • position: static
  • direction: rtl
  • transform

Texto

• Carga de fuentes
  • Carga de fuentes del sistema
  • Carga de fuentes web
• Texto
  • Shaping / Bidi
  • Layout / salto de línea
  • Tamaño de fuente / altura de línea
  • Color del texto
  • Negrita / cursiva
  • Subrayado / tachado
• Selección de texto

Entrada

• Scroll
  • Vista raíz
  • Elementos con overflow: scroll
• Detección de hover
• Manejo de clics
• Entrada de texto

Rendimiento

• Hot reloading
• Scroll sin reinterpretar estilos ni layout
• Caché de estilos
• Caché de layout

Otros

• Múltiples ventanas
• Árbol de accesibilidad
• Foco
• Herramientas de desarrollo
• Hooks para menús contextuales
• use_wgpu_context() para llevar elementos a una superficie de renderizado arbitraria

Licencia

Este proyecto tiene doble licencia Apache 2.0 y MIT. A menos que se indique lo contrario de forma explícita, toda contribución enviada intencionalmente por un usuario para incluirse en stylo-dioxus será licenciada bajo MIT sin condiciones adicionales.

Resumen de GN⁺

• Blitz es un renderizador HTML/CSS ligero basado en Rust, desarrollado para dar soporte al proyecto Dioxus.
• Deja fuera las funciones complejas de un navegador y se enfoca en el renderizado básico de HTML/CSS.
• Está en fase experimental y todavía no se recomienda para construir aplicaciones.
• Proyectos con funcionalidades similares incluyen Servo y WebRender.