Adding net crate

Cargo.toml

@@ -3,7 +3,7 @@
 # members = ["packages/dom"]
 # members = ["packages/blitz", "packages/dom", "packages/dioxus-blitz"]
 # exclude = ["packages/blitz", "packages/dioxus-blitz"]
-members = ["packages/blitz", "packages/dom", "packages/dioxus-blitz"]
+members = ["packages/blitz", "packages/dom", "packages/dioxus-blitz", "packages/net", "packages/traits"]
 resolver = "2"
 
 [workspace.dependencies]
@@ -55,7 +55,9 @@ incremental = false
 # mozbuild = "0.1.0"
 blitz = { path = "./packages/blitz" }
 blitz-dom = { path = "./packages/dom" }
-comrak = { version = "0.21.0", default-features = false, features = ["syntect"] }
+blitz-net = { path = "./packages/net" }
+blitz-traits = { path = "./packages/traits" }
+comrak = { git = "https://github.com/nicoburns/comrak", branch = "tasklist-class", default-features = false, features = ["syntect"] }
 png = { version = "0.17" }
 dioxus-blitz = { path = "./packages/dioxus-blitz" }
 dioxus = { workspace = true }

examples/screenshot.rs

@@ -1,14 +1,19 @@
 //! Load first CLI argument as a url. Fallback to google.com if no CLI argument is provided.
 
 use blitz::render_to_buffer;
+use blitz_dom::util::Resource;
 use blitz_dom::{HtmlDocument, Viewport};
+use blitz_net::{MpscCallback, Provider};
+use blitz_traits::net::{SharedCallback, SharedProvider};
 use reqwest::Url;
+use std::sync::Arc;
 use std::{
     fs::File,
     io::Write,
     path::{Path, PathBuf},
     time::Instant,
 };
+use tokio::runtime::Handle;
 
 const USER_AGENT: &str = "Mozilla/5.0 (X11; Linux x86_64; rv:60.0) Gecko/20100101 Firefox/81.0";
 
@@ -46,13 +51,32 @@ async fn main() {
         .and_then(|arg| arg.parse().ok())
         .unwrap_or(1200);
 
+    let (mut recv, callback) = MpscCallback::new();
+    let net = Arc::new(Provider::new(
+        Handle::current(),
+        Arc::new(callback) as SharedCallback<Resource>,
+    ));
+
+    timer.time("Setup document prerequsits");
+
     // Create HtmlDocument
-    let mut document = HtmlDocument::from_html(&html, Some(url.clone()), Vec::new());
+    let mut document =
+        HtmlDocument::from_html(&html, Some(url.clone()), Vec::new(), Arc::clone(&net));
+
+    timer.time("Parsed document");
+
     document
         .as_mut()
         .set_viewport(Viewport::new(width * scale, height * scale, scale as f32));
 
-    timer.time("Created document (+ fetched assets)");
+    while let Some(res) = recv.recv().await {
+        document.as_mut().load_resource(res);
+        if net.is_empty() {
+            break;
+        }
+    }
+
+    timer.time("Fetched assets");
 
     // Compute style, layout, etc for HtmlDocument
     document.as_mut().resolve();

examples/text.rs

@@ -15,11 +15,73 @@ fn app() -> Element {
                 em { "Another block of text" }
                 "Should connect no space between"
             }
+            h1 { "ul" }
+            ul {
+                li { "Item 1" }
+                li { "Item 2" }
+                li {
+                    class: "square",
+                    "Square item"
+                }
+                li {
+                    class: "circle",
+                    "Circle item"
+                }
+                li {
+                    class: "disclosure-open",
+                    "Disclosure open item"
+                }
+                li {
+                    class: "disclosure-closed",
+                    "Disclosure closed item"
+                }
+            }
+            h1 { "ol - decimal" }
+            ol {
+                li { "Item 1" }
+                li { "Item 2" }
+                li {
+                    ul {
+                        li { "Nested Item 1" }
+                        li { "Nested Item 2" }
+                    }
+                }
+                li { "Item 3" }
+                li { "Item 4" }
+                ol {
+                    li { "Sub 1" }
+                    li { "Sub 2" }
+                }
+            }
+            h1 { "ol - alpha" }
+            ol { class: "alpha",
+                li { "Item 1" }
+                li { "Item 2" }
+                li { "Item 3" }
+            }
         }
     }
 }
 
 const CSS: &str = r#"
 #a {
 }
+h1 {
+    font-size: 20px;
+}
+ol.alpha {
+    list-style-type: lower-alpha;
+}
+li.square {
+    list-style-type: square;
+}
+li.circle {
+    list-style-type: circle;
+}
+li.disclosure-open {
+    list-style-type: disclosure-open;
+}
+li.disclosure-closed {
+    list-style-type: disclosure-closed;
+}
 "#;

packages/blitz/src/renderer/render.rs

@@ -6,7 +6,10 @@ use crate::{
     devtools::Devtools,
     util::{GradientSlice, StyloGradient, ToVelloColor},
 };
-use blitz_dom::node::{NodeData, TextBrush, TextInputData, TextNodeData};
+use blitz_dom::node::{
+    ListItemLayout, ListItemLayoutPosition, Marker, NodeData, TextBrush, TextInputData,
+    TextNodeData,
+};
 use blitz_dom::{local_name, Document, Node};
 
 use style::{
@@ -273,7 +276,7 @@ impl<'dom> VelloSceneGenerator<'dom> {
         //  - background, border, font, margin, outline, padding,
         //
         // Not Implemented:
-        //  - list, position, table, text, ui,
+        //  - position, table, text, ui,
         //  - custom_properties, writing_mode, rules, visited_style, flags,  box_, column, counters, effects,
         //  - inherited_box, inherited_table, inherited_text, inherited_ui,
         let element = &self.dom.as_ref().tree()[node_id];
@@ -404,12 +407,47 @@ impl<'dom> VelloSceneGenerator<'dom> {
                     &line,
                 );
             }
-        } else if element.is_inline_root {
+        } else if let Some(ListItemLayout {
+            marker,
+            position: ListItemLayoutPosition::Outside(layout),
+        }) = cx.list_item
+        {
+            //Right align and pad the bullet when rendering outside
+            let x_padding = match marker {
+                Marker::Char(_) => 8.0,
+                Marker::String(_) => 0.0,
+            };
+            let x_offset = -(layout.full_width() / layout.scale() + x_padding);
+            //Align the marker with the baseline of the first line of text in the list item
+            let y_offset = if let Some(text_layout) = &element
+                .raw_dom_data
+                .downcast_element()
+                .and_then(|el| el.inline_layout_data.as_ref())
+            {
+                if let Some(first_text_line) = text_layout.layout.lines().next() {
+                    (first_text_line.metrics().baseline
+                        - layout.lines().next().unwrap().metrics().baseline)
+                        / layout.scale()
+                } else {
+                    0.0
+                }
+            } else {
+                0.0
+            };
+            let pos = Point {
+                x: pos.x + x_offset as f64,
+                y: pos.y + y_offset as f64,
+            };
+            cx.stroke_text(scene, layout, pos);
+        }
+
+        if element.is_inline_root {
             let text_layout = &element
                 .raw_dom_data
                 .downcast_element()
                 .unwrap()
-                .inline_layout_data()
+                .inline_layout_data
+                .as_ref()
                 .unwrap_or_else(|| {
                     panic!("Tried to render node marked as inline root that does not have an inline layout: {:?}", element);
                 });
@@ -499,6 +537,7 @@ impl<'dom> VelloSceneGenerator<'dom> {
                 .map(|data| &*data.image),
             svg: element.element_data().unwrap().svg_data(),
             text_input: element.element_data().unwrap().text_input_data(),
+            list_item: element.element_data().unwrap().list_item_data.as_deref(),
             devtools: &self.devtools,
         }
     }
@@ -515,6 +554,7 @@ struct ElementCx<'a> {
     image: Option<&'a DynamicImage>,
     svg: Option<&'a usvg::Tree>,
     text_input: Option<&'a TextInputData>,
+    list_item: Option<&'a ListItemLayout>,
     devtools: &'a Devtools,
 }
 

packages/dioxus-blitz/Cargo.toml

@@ -26,6 +26,9 @@ style = { workspace = true }
 tracing = { workspace = true, optional = true }
 blitz = { path = "../blitz" }
 blitz-dom = { path = "../dom" }
+blitz-net = { path = "../net" }
+blitz-traits = { path = "../traits" }
+html-escape = "0.2.13"
 url = { version = "2.5.0", features = ["serde"] }
 ureq = "2.9"
 rustc-hash = "1.1.0"

packages/dioxus-blitz/src/documents/dioxus_document.rs

@@ -23,6 +23,7 @@ use rustc_hash::FxHashMap;
 use style::{
     data::{ElementData, ElementStyles},
     properties::{style_structs::Font, ComputedValues},
+    stylesheets::Origin,
 };
 
 use super::event_handler::{NativeClickData, NativeConverter, NativeFormData};
@@ -269,7 +270,7 @@ impl DioxusDocument {
         root_node.children.push(html_element_id);
 
         // Include default and user-specified stylesheets
-        doc.add_stylesheet(DEFAULT_CSS);
+        doc.add_user_agent_stylesheet(DEFAULT_CSS);
 
         let state = DioxusState::create(&mut doc);
         let mut doc = Self {
@@ -492,7 +493,8 @@ impl WriteMutations for MutationWriter<'_> {
             let parent = self.doc.get_node(parent).unwrap();
             if let NodeData::Element(ref element) = parent.raw_dom_data {
                 if element.name.local.as_ref() == "style" {
-                    self.doc.add_stylesheet(value);
+                    let sheet = self.doc.make_stylesheet(value, Origin::Author);
+                    self.doc.add_stylesheet_for_node(sheet, parent.id);
                 }
             }
         }
@@ -617,16 +619,15 @@ impl WriteMutations for MutationWriter<'_> {
         // todo: this is very inefficient for inline styles - lots of string cloning going on
         let changed = text.content != value;
         text.content = value.to_string();
-        let contents = text.content.clone();
 
         if let Some(parent) = node.parent {
             // if the text is the child of a style element, we want to put the style into the stylesheet cache
             let parent = self.doc.get_node(parent).unwrap();
             if let NodeData::Element(ref element) = parent.raw_dom_data {
                 // Only set stylsheets if the text content has *changed* - we need to unload
                 if changed && element.name.local.as_ref() == "style" {
-                    self.doc.add_stylesheet(value);
-                    self.doc.remove_stylehsheet(&contents);
+                    let sheet = self.doc.make_stylesheet(value, Origin::Author);
+                    self.doc.add_stylesheet_for_node(sheet, parent.id);
                 }
             }
         }