feat: integrate dioxus-logger inline (#3302)

* feat: integrate dioxus-logger inline

* remove log/simple logger references

* fix: add dioxus-data-id-0 to root elements to not emit errors internally

* drop config.toml and use cargo.toml profiles instead

* make clippy happy with the unit value lint

* feat: better presentation for logging

examples/fullstack-auth/Cargo.toml

@@ -14,7 +14,6 @@ dioxus-fullstack = { workspace = true }
 axum = { workspace = true, optional = true }
 tokio = { workspace = true, features = ["full"], optional = true }
 tower-http = { workspace = true, features = ["auth"], optional = true }
-simple_logger = { version = "4.2.0", optional = true }
 async-trait = { version = "0.1.71", optional = true }
 sqlx = { version = "0.7.0", features = [
     "macros",
@@ -44,5 +43,5 @@ optional = true
 
 [features]
 default = []
-server = ["axum", "tokio", "dioxus-fullstack/axum", "tower-http", "simple_logger", "async-trait", "sqlx", "axum_session", "axum_session_auth", "http", "tower"]
+server = ["axum", "tokio", "dioxus-fullstack/axum", "tower-http", "async-trait", "sqlx", "axum_session", "axum_session_auth", "http", "tower"]
 web = ["dioxus-web"]

examples/fullstack-auth/src/main.rs

@@ -15,6 +15,9 @@ use dioxus_fullstack::prelude::*;
 use serde::{Deserialize, Serialize};
 
 fn main() {
+    // Set the logger ahead of time since we don't use `dioxus::launch` on the server
+    dioxus::logger::initialize_default();
+
     #[cfg(feature = "web")]
     // Hydrate the application on the client
     dioxus_web::launch::launch_cfg(app, dioxus_web::Config::new().hydrate(true));
@@ -27,7 +30,6 @@ fn main() {
         use axum_session::SessionStore;
         use axum_session_auth::AuthConfig;
         use axum_session_auth::SessionSqlitePool;
-        simple_logger::SimpleLogger::new().init().unwrap();
         tokio::runtime::Runtime::new()
             .unwrap()
             .block_on(async move {

examples/fullstack-hello-world/Cargo.toml

@@ -9,10 +9,6 @@ publish = false
 [dependencies]
 dioxus = { workspace = true, features = ["fullstack"]}
 serde = "1.0.159"
-simple_logger = "4.2.0"
-tracing-wasm = "0.2.1"
-tracing = { workspace = true }
-tracing-subscriber = "0.3.17"
 reqwest = { workspace = true }
 
 [features]

examples/fullstack-hello-world/src/main.rs

@@ -45,11 +45,5 @@ async fn get_server_data() -> Result<String, ServerFnError> {
 }
 
 fn main() {
-    #[cfg(feature = "web")]
-    tracing_wasm::set_as_global_default();
-
-    #[cfg(feature = "server")]
-    tracing_subscriber::fmt::init();
-
     dioxus::launch(app);
 }

examples/fullstack-streaming/Cargo.toml

@@ -8,15 +8,11 @@ publish = false
 
 [dependencies]
 dioxus = { workspace = true, features = ["fullstack"] }
-serde = "1.0.159"
-simple_logger = "4.2.0"
-tracing-wasm = "0.2.1"
-tracing.workspace = true
-tracing-subscriber = "0.3.17"
-futures = "0.3.30"
+serde = { workspace = true }
+futures = { workspace = true }
 tokio = { workspace = true, optional = true }
 futures-util.workspace = true
-once_cell = "1.19.0"
+once_cell = { workspace = true }
 
 [features]
 default = []

examples/fullstack-streaming/src/main.rs

@@ -29,6 +29,7 @@ pub async fn test_stream() -> Result<TextStream, ServerFnError> {
     tokio::spawn(async move {
         loop {
             tokio::time::sleep(tokio::time::Duration::from_millis(500)).await;
+            dioxus::logger::tracing::info!("Sending new chunk!");
             let _ = tx.unbounded_send(Ok("Hello, world!".to_string()));
         }
     });

examples/logging.rs

@@ -0,0 +1,43 @@
+//! Dioxus ships out-of-the-box with tracing hooks that integrate with the Dioxus-CLI.
+//!
+//! The built-in tracing-subscriber automatically sets up a wasm panic hook and wires up output
+//! to be consumed in a machine-readable format when running under `dx`.
+//!
+//! You can disable the built-in tracing-subscriber or customize the log level yourself.
+//!
+//! By default:
+//! - in `dev` mode, the default log output is `debug`
+//! - in `release` mode, the default log output is `info`
+//!
+//! To use the dioxus logger in your app, simply call any of the tracing functions (info!(), warn!(), error!())
+
+use dioxus::logger::tracing::{debug, error, info, warn};
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::launch(app);
+}
+
+fn app() -> Element {
+    rsx! {
+        div {
+            h1 { "Logger demo" }
+            button {
+                onclick: move |_| warn!("Here's a warning!"),
+                "Warn!"
+            }
+            button {
+                onclick: move |_| error!("Here's an error!"),
+                "Error!"
+            }
+            button {
+                onclick: move |_| debug!("Here's a debug"),
+                "Debug!"
+            }
+            button {
+                onclick: move |_| info!("Here's an info!"),
+                "Info!"
+            }
+        }
+    }
+}

examples/pwa/Cargo.toml

@@ -9,9 +9,3 @@ publish = false
 
 [dependencies]
 dioxus = { workspace = true, features = ["web"] }
-
-log = "0.4.6"
-
-# WebAssembly Debug
-wasm-logger = "0.2.0"
-console_error_panic_hook = "0.1.7"

examples/pwa/src/main.rs

@@ -1,10 +1,6 @@
 use dioxus::prelude::*;
 
 fn main() {
-    // init debug tool for WebAssembly
-    wasm_logger::init(wasm_logger::Config::default());
-    console_error_panic_hook::set_once();
-
     dioxus::launch(app);
 }
 
@@ -13,9 +9,7 @@ fn app() -> Element {
         div { style: "text-align: center;",
             h1 { "🌗 Dioxus 🚀" }
             h3 { "Frontend that scales." }
-            p {
-                "Dioxus is a portable, performant, and ergonomic framework for building cross-platform user interfaces in Rust."
-            }
+            p { "Build web, desktop, and mobile apps with Dioxus" }
         }
     )
 }

examples/tailwind/Cargo.toml

@@ -12,9 +12,9 @@ publish = false
 
 [dependencies]
 manganis = { workspace = true }
+dioxus = { workspace = true }
 
-[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
-dioxus = { path = "../../packages/dioxus", features = ["desktop"] }
-
-[target.'cfg(target_arch = "wasm32")'.dependencies]
-dioxus = { path = "../../packages/dioxus", features = ["web"] }
+[features]
+default = ["desktop"]
+web = ["dioxus/web"]
+desktop = ["dioxus/desktop"]

examples/tailwind/src/main.rs

@@ -1,14 +1,13 @@
-#![allow(non_snake_case)]
-
 use dioxus::prelude::*;
 
 fn main() {
     dioxus::launch(app);
 }
 
-pub fn app() -> Element {
+fn app() -> Element {
     let grey_background = true;
-    rsx! (
+
+    rsx! {
         document::Link { rel: "stylesheet", href: asset!("/public/tailwind.css") }
         div {
             header {
@@ -66,11 +65,12 @@ pub fn app() -> Element {
                 }
             }
         }
-    )
+    }
 }
 
+#[component]
 pub fn StacksIcon() -> Element {
-    rsx!(
+    rsx! {
         svg {
             fill: "none",
             stroke: "currentColor",
@@ -81,11 +81,12 @@ pub fn StacksIcon() -> Element {
             view_box: "0 0 24 24",
             path { d: "M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" }
         }
-    )
+    }
 }
 
+#[component]
 pub fn RightArrowIcon() -> Element {
-    rsx!(
+    rsx! {
         svg {
             fill: "none",
             stroke: "currentColor",
@@ -96,5 +97,5 @@ pub fn RightArrowIcon() -> Element {
             view_box: "0 0 24 24",
             path { d: "M5 12h14M12 5l7 7-7 7" }
         }
-    )
+    }
 }