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>

example-projects/ecommerce-site/src/components/loading.rs

@@ -3,7 +3,7 @@ use dioxus::prelude::*;
 #[component]
 pub(crate) fn ChildrenOrLoading(children: Element) -> Element {
     rsx! {
-        head::Link {
+        document::Link {
             rel: "stylesheet",
             href: asset!("./public/loading.css")
         }

example-projects/ecommerce-site/src/main.rs

@@ -17,7 +17,7 @@ mod api;
 fn main() {
     dioxus::launch(|| {
         rsx! {
-            head::Link {
+            document::Link {
                 rel: "stylesheet",
                 href: asset!("./public/tailwind.css")
             }

example-projects/file-explorer/src/main.rs

@@ -21,12 +21,12 @@ fn app() -> Element {
     let mut files = use_signal(Files::new);
 
     rsx! {
-        head::Link {
+        document::Link {
             rel: "stylesheet",
             href: asset!("./assets/fileexplorer.css")
         }
         div {
-            head::Link { href: "https://fonts.googleapis.com/icon?family=Material+Icons", rel: "stylesheet" }
+            document::Link { href: "https://fonts.googleapis.com/icon?family=Material+Icons", rel: "stylesheet" }
             header {
                 i { class: "material-icons icon-menu", "menu" }
                 h1 { "Files: " {files.read().current()} }

example-projects/fullstack-hackernews/src/main.rs

@@ -36,7 +36,7 @@ pub fn App() -> Element {
 #[component]
 fn Homepage(story: ReadOnlySignal<PreviewState>) -> Element {
     rsx! {
-        head::Link { rel: "stylesheet", href: asset!("./assets/hackernews.css") }
+        document::Link { rel: "stylesheet", href: asset!("./assets/hackernews.css") }
         div { display: "flex", flex_direction: "row", width: "100%",
             div {
                 width: "50%",