Move the document trait into a separate crate (#3035)

* add a default head method through eval
* remove the old document trait
* implement document for each platform
* pull out document into a dedicated crate to cut down on shared dependencies
---------

Co-authored-by: Jonathan Kelley <jkelleyrtp@gmail.com>

examples/all_events.rs

@@ -26,7 +26,7 @@ fn app() -> Element {
     };
 
     rsx! {
-        head::Link { rel: "stylesheet", href: STYLE }
+        document::Link { rel: "stylesheet", href: STYLE }
         div { id: "container",
             // focusing is necessary to catch keyboard events
             div { id: "receiver", tabindex: 0,

examples/calculator.rs

@@ -54,7 +54,7 @@ fn app() -> Element {
     };
 
     rsx! {
-        head::Link { rel: "stylesheet", href: STYLE }
+        document::Link { rel: "stylesheet", href: STYLE }
         div { id: "wrapper",
             div { class: "app",
                 div { class: "calculator", tabindex: "0", onkeydown: handle_key_down_event,

examples/calculator_mutable.rs

@@ -29,7 +29,7 @@ fn app() -> Element {
     let mut state = use_signal(Calculator::new);
 
     rsx! {
-        head::Link { rel: "stylesheet", href: asset!("./examples/assets/calculator.css") }
+        document::Link { rel: "stylesheet", href: asset!("./examples/assets/calculator.css") }
         div { id: "wrapper",
             div { class: "app",
                 div {

examples/clock.rs

@@ -36,7 +36,7 @@ fn app() -> Element {
     );
 
     rsx! {
-        head::Link { rel: "stylesheet", href: STYLE }
+        document::Link { rel: "stylesheet", href: STYLE }
         div { id: "app",
             div { id: "title", "Carpe diem 🎉" }
             div { id: "clock-display", "{time}" }

examples/control_focus.rs

@@ -40,7 +40,7 @@ fn app() -> Element {
     });
 
     rsx! {
-        head::Link { rel: "stylesheet", href: STYLE }
+        document::Link { rel: "stylesheet", href: STYLE }
         h1 { "Input Roulette" }
         button { onclick: move |_| running.toggle(), "Toggle roulette" }
         div { id: "roulette-grid",

examples/counters.rs

@@ -16,7 +16,7 @@ fn app() -> Element {
     let sum = use_memo(move || counters.read().iter().copied().sum::<i32>());
 
     rsx! {
-        head::Link { rel: "stylesheet", href: STYLE }
+        document::Link { rel: "stylesheet", href: STYLE }
 
         div { id: "controls",
             button { onclick: move |_| counters.write().push(0), "Add counter" }

examples/crm.rs

@@ -20,13 +20,13 @@ fn main() {
         }))
         .launch(|| {
             rsx! {
-                head::Link {
+                document::Link {
                     rel: "stylesheet",
                     href: asset!("https://unpkg.com/purecss@2.0.6/build/pure-min.css"), 
                     integrity: "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5",
                     crossorigin: "anonymous"
                 }
-                head::Link { rel: "stylesheet", href: asset!("./examples/assets/crm.css") }
+                document::Link { rel: "stylesheet", href: asset!("./examples/assets/crm.css") }
                 h1 { "Dioxus CRM Example" }
                 Router::<Route> {}
             }

examples/dynamic_asset.rs

@@ -24,7 +24,7 @@ fn app() -> Element {
     });
 
     rsx! {
-        head::Link { rel: "stylesheet", href: STYLE }
+        document::Link { rel: "stylesheet", href: STYLE }
         h1 { "Dynamic Assets" }
         img { src: "/logos/logo.png" }
     }

examples/eval.rs

@@ -19,7 +19,7 @@ fn app() -> Element {
         // The `eval` is available in the prelude - and simply takes a block of JS.
         // Dioxus' eval is interesting since it allows sending messages to and from the JS code using the `await dioxus.recv()`
         // builtin function. This allows you to create a two-way communication channel between Rust and JS.
-        let mut eval = eval(
+        let mut eval = document::eval(
             r#"
                 dioxus.send("Hi from JS!");
                 let msg = await dioxus.recv();
@@ -29,10 +29,10 @@ fn app() -> Element {
         );
 
         // Send a message to the JS code.
-        eval.send("Hi from Rust!".into()).unwrap();
+        eval.send("Hi from Rust!").unwrap();
 
         // Our line on the JS side will log the message and then return "hello world".
-        let res = eval.recv().await.unwrap();
+        let res: String = eval.recv().await.unwrap();
 
         // This will print "Hi from JS!" and "Hi from Rust!".
         println!("{:?}", eval.await);

examples/file_upload.rs

@@ -43,7 +43,7 @@ fn app() -> Element {
     };
 
     rsx! {
-        head::Link { rel: "stylesheet", href: STYLE }
+        document::Link { rel: "stylesheet", href: STYLE }
 
         h1 { "File Upload Example" }
         p { "Drop a .txt, .rs, or .js file here to read it" }

examples/flat_router.rs

@@ -14,7 +14,7 @@ const STYLE: &str = asset!("./examples/assets/flat_router.css");
 fn main() {
     dioxus::launch(|| {
         rsx! {
-            head::Link { rel: "stylesheet", href: STYLE }
+            document::Link { rel: "stylesheet", href: STYLE }
             Router::<Route> {}
         }
     })

examples/global.rs

@@ -18,7 +18,7 @@ fn main() {
 
 fn app() -> Element {
     rsx! {
-        head::Link { rel: "stylesheet", href: STYLE }
+        document::Link { rel: "stylesheet", href: STYLE }
         Increment {}
         Decrement {}
         Reset {}

examples/image_generator_openai.rs

@@ -36,7 +36,7 @@ fn app() -> Element {
     });
 
     rsx! {
-        head::Link { rel: "stylesheet", href: "https://unpkg.com/bulma@0.9.0/css/bulma.min.css" }
+        document::Link { rel: "stylesheet", href: "https://unpkg.com/bulma@0.9.0/css/bulma.min.css" }
         div { class: "container",
             div { class: "columns",
                 div { class: "column",

examples/link.rs

@@ -16,7 +16,7 @@ fn main() {
 
 fn app() -> Element {
     rsx! (
-        head::Link { rel: "stylesheet", href: STYLE }
+        document::Link { rel: "stylesheet", href: STYLE }
         Router::<Route> {}
     )
 }

examples/meta.rs

@@ -12,23 +12,23 @@ fn app() -> Element {
         // You can use the Meta component to render a meta tag into the head of the page
         // Meta tags are useful to provide information about the page to search engines and social media sites
         // This example sets up meta tags for the open graph protocol for social media previews
-        Meta {
+        document::Meta {
             property: "og:title",
             content: "My Site",
         }
-        Meta {
+        document::Meta {
             property: "og:type",
             content: "website",
         }
-        Meta {
+        document::Meta {
             property: "og:url",
             content: "https://www.example.com",
         }
-        Meta {
+        document::Meta {
             property: "og:image",
             content: "https://example.com/image.jpg",
         }
-        Meta {
+        document::Meta {
             name: "description",
             content: "My Site is a site",
         }

examples/overlay.rs

@@ -22,7 +22,7 @@ fn app() -> Element {
     _ = use_global_shortcut("cmd+g", move || show_overlay.toggle());
 
     rsx! {
-        head::Link {
+        document::Link {
             rel: "stylesheet",
             href: asset!("./examples/assets/overlay.css"),
         }

examples/read_size.rs

@@ -28,7 +28,7 @@ fn app() -> Element {
     };
 
     rsx!(
-        head::Link { rel: "stylesheet", href: asset!("./examples/assets/read_size.css") }
+        document::Link { rel: "stylesheet", href: asset!("./examples/assets/read_size.css") }
         div {
             width: "50%",
             height: "50%",

examples/reducer.rs

@@ -17,7 +17,7 @@ fn app() -> Element {
     let mut state = use_signal(|| PlayerState { is_playing: false });
 
     rsx!(
-        head::Link { rel: "stylesheet", href: STYLE }
+        document::Link { rel: "stylesheet", href: STYLE }
         h1 {"Select an option"}
 
         // Add some cute animations if the radio is playing!

examples/resize.rs

@@ -15,7 +15,7 @@ fn app() -> Element {
     let mut dimensions = use_signal(Size2D::zero);
 
     rsx!(
-        head::Link { rel: "stylesheet", href: asset!("./examples/assets/read_size.css") }
+        document::Link { rel: "stylesheet", href: asset!("./examples/assets/read_size.css") }
         div {
             width: "50%",
             height: "50%",

examples/router.rs

@@ -13,7 +13,7 @@ const STYLE: &str = asset!("./examples/assets/router.css");
 fn main() {
     dioxus::launch(|| {
         rsx! {
-            head::Link { rel: "stylesheet", href: STYLE }
+            document::Link { rel: "stylesheet", href: STYLE }
             Router::<Route> {}
         }
     });

examples/title.rs

@@ -14,7 +14,7 @@ fn app() -> Element {
         div {
             // You can set the title of the page with the Title component
             // In web applications, this sets the title in the head. On desktop, it sets the window title
-            Title { "My Application (Count {count})" }
+            document::Title { "My Application (Count {count})" }
             button { onclick: move |_| count += 1, "Up high!" }
             button { onclick: move |_| count -= 1, "Down low!" }
         }

examples/todomvc.rs

@@ -63,7 +63,7 @@ fn app() -> Element {
     };
 
     rsx! {
-        head::Link { rel: "stylesheet", href: STYLE }
+        document::Link { rel: "stylesheet", href: STYLE }
         section { class: "todoapp",
             TodoHeader { todos }
             section { class: "main",

examples/weather_app.rs

@@ -19,7 +19,7 @@ fn app() -> Element {
     let current_weather = use_resource(move || async move { get_weather(&country()).await });
 
     rsx! {
-        head::Link { rel: "stylesheet", href: "https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css" }
+        document::Link { rel: "stylesheet", href: "https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css" }
         div { class: "mx-auto p-4 bg-gray-100 h-screen flex justify-center",
             div { class: "flex items-center justify-center flex-row",
                 div { class: "flex items-start justify-center flex-row",

examples/window_event.rs

@@ -26,7 +26,7 @@ fn main() {
 
 fn app() -> Element {
     rsx!(
-        head::Link { href: "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css", rel: "stylesheet" }
+        document::Link { href: "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css", rel: "stylesheet" }
         Header {}
         div { class: "container mx-auto",
             div { class: "grid grid-cols-5",