Blitz: renderizador web leve, modular e escalável

Blitz: renderizador web leve, modular e escalável

Blitz é um renderizador HTML/CSS "nativo" desenvolvido para dar suporte ao projeto "Dioxus Native". Em vez de um motor JavaScript, ele usa APIs nativas em Rust, permitindo interface direta com bibliotecas de reatividade/gerenciamento de estado em Rust.

Atualmente oferece suporte a dois frontends

• Frontend HTML/Markdown: pode renderizar strings HTML. É útil para pré-visualização de arquivos HTML e Markdown, mas tem pouca interatividade.
• Frontend Dioxus: pode renderizar o VirtualDom do Dioxus. Oferece interatividade completa por meio do tratamento de eventos do Dioxus.

Tecnologias que fundamentam o Blitz

• Stylo: motor de CSS paralelo de nível de navegador do Firefox
• Vello + WGPU: renderização
• Taffy: layout em nível de caixa
• Parley: layout de texto/em linha
• AccessKit: acessibilidade
• Winit: janelas e tratamento de entrada

Observação: este repositório inclui uma nova versão do Blitz que usa Stylo. O código-fonte da versão anterior ainda está disponível no branch legacy, mas não está em desenvolvimento ativo.

Capturas de tela

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

Como testar

1. Clone este repositório
2. Execute os exemplos:
   • cargo run --example google
   • cargo run --example url https://myurl.com
   • Outros exemplos também estão disponíveis
   • Adicione --release para melhor desempenho em tempo de execução
3. Altere a escala com Ctrl/Cmd + + / Ctrl/Cmd + - e pressione F1 para mostrar os retângulos de layout

Objetivos

O Blitz foi projetado para renderizar HTML e CSS. Ele não oferece suporte a todos os recursos de um navegador, e esses recursos "extras" estão planejados como opcionais. A ideia é que navegadores são excessivamente complexos para renderização básica de HTML/CSS.

Recursos planejados:

• Layout HTML moderno (flexbox, grid, table, block, inline, absolute/fixed etc.)
• CSS avançado (seletores complexos, media queries, variáveis CSS)
• Controles de formulário HTML
• Acessibilidade por meio do AccessKit
• Extensibilidade por meio de widgets personalizados

Recursos não suportados:

• webrtc, websockets, bluetooth, localstorage etc.

Ainda não há bindings do Blitz para outras linguagens (JavaScript, Python etc.), mas contribuições são bem-vindas.

Arquitetura

O Blitz é dividido em várias partes:

• blitz-dom: abstração central de DOM que inclui interpretação de estilo e layout, mas não inclui desenho/pintura
• blitz: adiciona ao blitz-dom um renderizador baseado em Vello/WGPU
• dioxus-blitz: camada de integração com Dioxus que renderiza apps Dioxus usando Blitz. Atualmente, dioxus-blitz também inclui o renderizador HTML, mas isso pode ser separado em um pacote distinto no futuro.

Status

O Blitz está atualmente em estado experimental. O trabalho para torná-lo utilizável está avançando ativamente, mas ainda não é recomendado construir apps com ele.

TODO

• Abstração central da árvore DOM
• Parsing de estilo com html5ever
• Cálculo de estilo para documentos html5ever
• Cálculo de layout com Taffy
• Renderização com WGPU

Renderização

• Renderização em janela
• Renderização em imagem
• Gradientes
• Bordas/contornos
• Imagens raster (png, jpeg etc.)
• Zoom
• SVG
  • SVG externo (suporte básico)
  • SVG inline
• Sombras
• Animações/transições
• Controles de formulário padrão (checkbox/dropdown/slider etc.)
• Widgets personalizados
• Shadow elements

Layout

• Inline (suporte parcial - implementação ainda imatura)
• Bloco
• Flexbox
• Grid
  • Linhas de grid nomeadas
  • Subgrid
• Tabela
• Z-index
• Recursos adicionais de CSS
  • box-sizing: content-box
  • calc()
  • position: static
  • direction: rtl
  • transform

Texto

• Carregamento de fontes
  • Carregamento de fontes do sistema
  • Carregamento de web fonts
• Texto
  • Shaping / Bidi
  • Layout / quebra de linha
  • Tamanho da fonte / altura da linha
  • Cor do texto
  • Negrito / itálico
  • Sublinhado / tachado
• Seleção de texto

Entrada

• Rolagem
  • View raiz
  • Elementos overflow: scroll
• Detecção de hover
• Tratamento de clique
• Entrada de texto

Desempenho

• Hot reloading
• Rolagem sem reinterpretar estilo e layout
• Cache de estilos
• Cache de layout

Outros

• Múltiplas janelas
• Árvore de acessibilidade
• Foco
• Ferramentas de desenvolvimento
• Hooks para menu de contexto
• use_wgpu_context() para obter elementos em uma superfície de renderização arbitrária

Licença

Este projeto é duplamente licenciado sob Apache 2.0 e MIT. Salvo indicação em contrário, toda contribuição submetida intencionalmente pelo usuário para inclusão em stylo-dioxus será licenciada sob MIT, sem termos ou condições adicionais.

Resumo do GN⁺

• Blitz é um renderizador HTML/CSS leve baseado em Rust, desenvolvido para dar suporte ao projeto Dioxus.
• Ele exclui recursos complexos de navegador e se concentra na renderização básica de HTML/CSS.
• Está em fase experimental e ainda não é recomendado para construir apps.
• Projetos com funcionalidades semelhantes incluem Servo, WebRender etc.