DioxusLabs · jkelleyrtp · Oct 14, 2024 · Aug 3, 2024 · Aug 3, 2024 · Aug 3, 2024
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -1,39 +1,40 @@
 [workspace]
 resolver = "2"
 members = [
-    "packages/dioxus",
-    "packages/dioxus-lib",
-    "packages/core",
-    "packages/core-types",
-    "packages/cli",
+    "packages/autofmt",
+    "packages/check",
     "packages/cli-config",
-    "packages/core-macro",
+    "packages/cli",
     "packages/config-macro",
-    "packages/router-macro",
+    "packages/core-macro",
+    "packages/core-types",
+    "packages/core",
+    "packages/desktop",
+    "packages/devtools-types",
+    "packages/devtools",
+    "packages/dioxus-lib",
+    "packages/dioxus",
+    "packages/document",
     "packages/extension",
-    "packages/router",
-    "packages/html",
-    "packages/html-internal-macro",
+    "packages/fullstack",
+    "packages/generational-box",
     "packages/hooks",
-    "packages/web",
-    "packages/ssr",
-    "packages/desktop",
-    "packages/mobile",
+    "packages/html-internal-macro",
+    "packages/html",
     "packages/interpreter",
+    "packages/lazy-js-bundle",
     "packages/liveview",
-    "packages/autofmt",
-    "packages/check",
-    "packages/rsx",
+    "packages/mobile",
+    "packages/router-macro",
+    "packages/router",
     "packages/rsx-hotreload",
     "packages/rsx-rosetta",
-    "packages/generational-box",
-    "packages/signals",
-    "packages/devtools",
-    "packages/devtools-types",
-    "packages/fullstack",
+    "packages/rsx",
     "packages/server-macro",
+    "packages/signals",
+    "packages/ssr",
     "packages/static-generation",
-    "packages/lazy-js-bundle",
+    "packages/web",
 
     # Full project examples
     "example-projects/fullstack-hackernews",
@@ -76,6 +77,7 @@ dioxus-core-macro = { path = "packages/core-macro", version = "0.6.0-alpha.0" }
 dioxus-config-macro = { path = "packages/config-macro", version = "0.6.0-alpha.0" }
 dioxus-router = { path = "packages/router", version = "0.6.0-alpha.0" }
 dioxus-router-macro = { path = "packages/router-macro", version = "0.6.0-alpha.0" }
+dioxus-document = { path = "packages/document", version = "0.6.0-alpha.0", default-features = false }
 dioxus-html = { path = "packages/html", version = "0.6.0-alpha.0", default-features = false }
 dioxus-html-internal-macro = { path = "packages/html-internal-macro", version = "0.6.0-alpha.0" }
 dioxus-hooks = { path = "packages/hooks", version = "0.6.0-alpha.0" }

diff --git a/example-projects/ecommerce-site/src/components/loading.rs b/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")
         }

diff --git a/example-projects/ecommerce-site/src/main.rs b/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")
             }

diff --git a/example-projects/file-explorer/src/main.rs b/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()} }

diff --git a/example-projects/fullstack-hackernews/src/main.rs b/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%",

diff --git a/examples/all_events.rs b/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,

diff --git a/examples/calculator.rs b/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,

diff --git a/examples/calculator_mutable.rs b/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 {

diff --git a/examples/clock.rs b/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}" }

diff --git a/examples/control_focus.rs b/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",

diff --git a/examples/counters.rs b/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" }

diff --git a/examples/crm.rs b/examples/crm.rs
@@ -20,13 +20,13 @@ fn main() {
         }))
         .launch(|| {
             rsx! {
-                head::Link {
+                document::Link {
                     rel: "stylesheet",
                     href: asset!("https://unpkg.com/[email protected]/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> {}
             }

diff --git a/examples/dynamic_asset.rs b/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" }
     }

diff --git a/examples/eval.rs b/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);

diff --git a/examples/file_upload.rs b/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" }

diff --git a/examples/flat_router.rs b/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> {}
         }
     })

diff --git a/examples/global.rs b/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 {}

diff --git a/examples/image_generator_openai.rs b/examples/image_generator_openai.rs
@@ -36,7 +36,7 @@ fn app() -> Element {
     });
 
     rsx! {
-        head::Link { rel: "stylesheet", href: "https://unpkg.com/[email protected]/css/bulma.min.css" }
+        document::Link { rel: "stylesheet", href: "https://unpkg.com/[email protected]/css/bulma.min.css" }
         div { class: "container",
             div { class: "columns",
                 div { class: "column",

diff --git a/examples/link.rs b/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> {}
     )
 }

diff --git a/examples/meta.rs b/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",
         }

diff --git a/examples/overlay.rs b/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"),
         }

diff --git a/examples/read_size.rs b/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%",

diff --git a/examples/reducer.rs b/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!

diff --git a/examples/resize.rs b/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%",

diff --git a/examples/router.rs b/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> {}
         }
     });