Blitz: perender web ringan, modular, dan dapat diperluas

Blitz: perender web ringan, modular, dan dapat diperluas

Blitz adalah perender HTML/CSS "native" yang dikembangkan untuk mendukung proyek "Dioxus Native". Alih-alih menggunakan mesin JavaScript, Blitz memakai API Rust native sehingga dapat berinteraksi langsung dengan library reaktivitas/manajemen status Rust.

Saat ini mendukung dua frontend

• Frontend HTML/Markdown: dapat merender string HTML. Berguna untuk pratinjau file HTML dan Markdown, tetapi kurang interaktif.
• Frontend Dioxus: dapat merender Dioxus VirtualDom. Mendukung interaktivitas penuh melalui penanganan event Dioxus.

Teknologi yang menjadi fondasi Blitz

• Stylo: mesin CSS paralel setingkat browser milik Firefox
• Vello + WGPU: rendering
• Taffy: layout tingkat box
• Parley: layout tingkat teks/inline
• AccessKit: aksesibilitas
• Winit: pemrosesan jendela dan input

Catatan: repositori ini menyertakan Blitz versi baru yang menggunakan Stylo. Kode sumber versi sebelumnya masih tersedia di branch legacy, tetapi tidak lagi dikembangkan secara aktif.

Tangkapan layar

• Perender Dioxus
• Perender HTML (merender google.com)

Mencoba menggunakannya

1. Clone repositori ini
2. Jalankan contoh:
   • cargo run --example google
   • cargo run --example url https://myurl.com
   • Contoh lain juga tersedia
   • Tambahkan --release untuk performa runtime yang lebih baik
3. Ubah skala dengan Ctrl/Cmd + + / Ctrl/Cmd + -, tekan F1 untuk menampilkan kotak layout

Tujuan

Blitz dirancang untuk merender HTML dan CSS. Blitz tidak mendukung semua fitur browser, dan fitur-fitur "tambahan" tersebut direncanakan akan tersedia secara opsional. Browser dianggap terlalu kompleks untuk kebutuhan rendering HTML/CSS dasar.

Fitur yang direncanakan didukung:

• Layout HTML modern (flexbox, grid, table, block, inline, absolute/fixed, dll.)
• CSS tingkat lanjut (selector kompleks, media query, variabel CSS)
• Kontrol form HTML
• Aksesibilitas melalui AccessKit
• Ekstensibilitas melalui widget kustom

Fitur yang tidak didukung:

• webrtc, websockets, bluetooth, localstorage, dll.

Binding Blitz untuk bahasa lain (JavaScript, Python, dll.) belum tersedia, tetapi kontribusi sangat diterima.

Arsitektur

Blitz dibagi menjadi beberapa bagian:

• blitz-dom: abstraksi DOM inti yang mencakup interpretasi style dan layout, tetapi tidak mencakup drawing/painting
• blitz: menambahkan perender berbasis Vello/WGPU ke blitz-dom
• dioxus-blitz: lapisan integrasi Dioxus yang merender aplikasi Dioxus menggunakan Blitz. Saat ini dioxus-blitz juga mencakup perender HTML, tetapi kemungkinan akan dipisahkan menjadi paket tersendiri di masa depan.

Status

Blitz saat ini masih eksperimental. Pengembangan aktif sedang dilakukan agar bisa digunakan dengan layak, tetapi saat ini masih belum disarankan untuk membangun aplikasi dengannya.

TODO

• Abstraksi pohon DOM inti
• Parsing style menggunakan html5ever
• Perhitungan style untuk dokumen html5ever
• Perhitungan layout menggunakan Taffy
• Rendering menggunakan WGPU

Rendering

• Merender ke jendela
• Merender ke gambar
• Gradasi
• Border/outline
• Gambar raster (png, jpeg, dll.)
• Zoom
• SVG
  • SVG eksternal (dukungan dasar)
  • SVG inline
• Bayangan
• Animasi/transisi
• Kontrol form standar (checkbox/dropdown/slider, dll.)
• Widget kustom
• Shadow element

Layout

• Inline (dukungan sebagian - implementasi belum matang)
• Block
• Flexbox
• Grid
  • Named grid line
  • Subgrid
• Table
• Z-index
• Fitur CSS tambahan
  • box-sizing: content-box
  • calc()
  • position: static
  • direction: rtl
  • transform

Teks

• Pemuatan font
  • Pemuatan font sistem
  • Pemuatan web font
• Teks
  • Shaping / Bidi
  • Layout / pemenggalan baris
  • Ukuran font / tinggi baris
  • Warna teks
  • Tebal / miring
  • Garis bawah / coret
• Pemilihan teks

Input

• Scroll
  • Root view
  • Elemen overflow: scroll
• Deteksi hover
• Penanganan klik
• Input teks

Performa

• Hot reloading
• Scroll tanpa reinterpretasi style dan layout
• Caching style
• Caching layout

Lainnya

• Multi-jendela
• Pohon aksesibilitas
• Fokus
• Alat pengembang
• Hook untuk menu konteks
• use_wgpu_context() untuk membawa elemen ke permukaan rendering arbitrer

Lisensi

Proyek ini dilisensikan ganda di bawah Apache 2.0 dan MIT. Kecuali dinyatakan lain, setiap kontribusi yang dengan sengaja dikirimkan pengguna untuk disertakan ke dalam stylo-dioxus akan dilisensikan di bawah MIT tanpa syarat tambahan.

Ringkasan GN⁺

• Blitz adalah perender HTML/CSS ringan berbasis Rust yang dikembangkan untuk mendukung proyek Dioxus.
• Mengesampingkan fitur-fitur browser yang kompleks dan berfokus pada rendering HTML/CSS dasar.
• Masih berada pada tahap eksperimental dan belum direkomendasikan untuk membangun aplikasi.
• Proyek dengan fungsi serupa mencakup Servo, WebRender, dan lainnya.