Blitz: trình kết xuất web nhẹ, mô-đun và có thể mở rộng

Blitz: trình kết xuất web nhẹ, mô-đun và có thể mở rộng

Blitz là một trình kết xuất HTML/CSS "native" được phát triển để hỗ trợ dự án "Dioxus Native". Thay vì dùng engine JavaScript, nó sử dụng API Rust native để có thể giao tiếp trực tiếp với các thư viện reactive/quản lý trạng thái của Rust.

Hiện hỗ trợ hai frontend

• Frontend HTML/Markdown: có thể render chuỗi HTML. Hữu ích cho việc xem trước tệp HTML và Markdown, nhưng thiếu tính tương tác.
• Frontend Dioxus: có thể render Dioxus VirtualDom. Hỗ trợ đầy đủ tính tương tác thông qua cơ chế xử lý sự kiện của Dioxus.

Công nghệ nền tảng của Blitz

• Stylo: engine CSS song song cấp độ trình duyệt của Firefox
• Vello + WGPU: kết xuất
• Taffy: bố cục cấp độ hộp
• Parley: bố cục cấp độ văn bản/inline
• AccessKit: khả năng truy cập
• Winit: xử lý cửa sổ và đầu vào

Lưu ý: kho lưu trữ này chứa phiên bản Blitz mới sử dụng Stylo. Mã nguồn của phiên bản trước vẫn có trong nhánh legacy, nhưng không còn được phát triển tích cực.

Ảnh chụp màn hình

• Trình kết xuất Dioxus
• Trình kết xuất HTML (render google.com)

Dùng thử

1. Clone kho lưu trữ này
2. Chạy ví dụ:
   • cargo run --example google
   • cargo run --example url https://myurl.com
   • Có thể dùng các ví dụ khác
   • Thêm --release để có hiệu năng chạy tốt hơn
3. Dùng Ctrl/Cmd + + / Ctrl/Cmd + - để thay đổi tỷ lệ, nhấn F1 để hiển thị các hình chữ nhật bố cục

Mục tiêu

Blitz được thiết kế để render HTML và CSS. Nó không hỗ trợ mọi tính năng của trình duyệt, và các tính năng "bổ sung" này sẽ được cung cấp dưới dạng tùy chọn. Dự án cho rằng trình duyệt hiện quá phức tạp đối với nhu cầu render HTML/CSS cơ bản.

Các tính năng dự kiến hỗ trợ:

• Bố cục HTML hiện đại (flexbox, grid, table, block, inline, absolute/fixed, v.v.)
• CSS nâng cao (selector phức tạp, media query, biến CSS)
• Điều khiển biểu mẫu HTML
• Khả năng truy cập thông qua AccessKit
• Khả năng mở rộng thông qua widget tùy biến

Các tính năng không hỗ trợ:

• webrtc, websockets, bluetooth, localstorage, v.v.

Hiện chưa có binding Blitz cho các ngôn ngữ khác (JavaScript, Python, v.v.), nhưng rất hoan nghênh đóng góp.

Kiến trúc

Blitz được chia thành nhiều phần:

• blitz-dom: lớp trừu tượng DOM cốt lõi bao gồm diễn giải style và bố cục, nhưng không bao gồm vẽ/painting
• blitz: thêm trình kết xuất dựa trên Vello/WGPU vào blitz-dom
• dioxus-blitz: lớp tích hợp Dioxus dùng Blitz để render ứng dụng Dioxus. Hiện tại dioxus-blitz cũng bao gồm trình kết xuất HTML, nhưng tương lai có thể được tách thành một gói riêng.

Trạng thái

Blitz hiện đang ở giai đoạn thử nghiệm. Dự án đang được phát triển tích cực để trở nên khả dụng, nhưng hiện chưa khuyến nghị dùng để xây dựng ứng dụng.

TODO

• Lớp trừu tượng cây DOM cốt lõi
• Phân tích style bằng html5ever
• Tính toán style cho tài liệu html5ever
• Tính toán bố cục bằng Taffy
• Kết xuất bằng WGPU

Kết xuất

• Kết xuất vào cửa sổ
• Kết xuất vào ảnh
• Gradient
• Viền/outline
• Ảnh raster (png, jpeg, v.v.)
• Thu phóng
• SVG
  • SVG bên ngoài (hỗ trợ cơ bản)
  • SVG inline
• Bóng đổ
• Hoạt ảnh/chuyển tiếp
• Điều khiển biểu mẫu tiêu chuẩn (checkbox/dropdown/slider, v.v.)
• Widget tùy biến
• Phần tử bóng đổ

Bố cục

• Inline (hỗ trợ một phần - triển khai còn chưa hoàn thiện)
• Block
• Flexbox
• Grid
  • Đường lưới được đặt tên
  • Subgrid
• Bảng
• Z-index
• Các tính năng CSS bổ sung
  • box-sizing: content-box
  • calc()
  • position: static
  • direction: rtl
  • transform

Văn bản

• Tải phông chữ
  • Tải phông chữ hệ thống
  • Tải web font
• Văn bản
  • Shaping / Bidi
  • Bố cục / xuống dòng
  • Cỡ chữ / chiều cao dòng
  • Màu văn bản
  • Đậm / nghiêng
  • Gạch chân / gạch ngang
• Chọn văn bản

Đầu vào

• Cuộn
  • Chế độ xem gốc
  • Phần tử overflow: scroll
• Phát hiện hover
• Xử lý click
• Nhập văn bản

Hiệu năng

• Hot reloading
• Cuộn mà không cần diễn giải lại style và bố cục
• Bộ nhớ đệm style
• Bộ nhớ đệm bố cục

Khác

• Nhiều cửa sổ
• Cây khả năng truy cập
• Focus
• Công cụ phát triển
• Hook cho menu ngữ cảnh
• use_wgpu_context() để lấy phần tử vào một bề mặt kết xuất tùy ý

Giấy phép

Dự án này được cấp phép kép theo Apache 2.0 và MIT. Trừ khi có ghi chú khác, mọi đóng góp mà người dùng cố ý gửi để đưa vào stylo-dioxus sẽ được cấp phép theo MIT mà không có điều kiện bổ sung.

Tóm tắt của GN⁺

• Blitz là một trình kết xuất HTML/CSS nhẹ dựa trên Rust, được phát triển để hỗ trợ dự án Dioxus.
• Nó loại bỏ các tính năng phức tạp của trình duyệt và tập trung vào việc render HTML/CSS cơ bản.
• Dự án đang ở giai đoạn thử nghiệm và hiện chưa được khuyến nghị để xây dựng ứng dụng.
• Một số dự án có chức năng tương tự gồm Servo, WebRender, v.v.