Adds colors for log output behind feature flag.

Author: azriel91

Cargo.toml

@@ -17,3 +17,11 @@ version = "0.4"
 [dependencies.web-sys]
 version = "0.3"
 features = ["console"]
+
+[dependencies.wasm-bindgen]
+version = "0.2"
+optional = true
+
+[features]
+default = []
+color = ["wasm-bindgen"]

src/lib.rs

@@ -87,6 +87,15 @@
 use log::{Level, Log, Metadata, Record, SetLoggerError};
 use web_sys::console;
 
+#[cfg(feature = "color")]
+use wasm_bindgen::JsValue;
+
+#[cfg(feature = "color")]
+const STYLE: style::Style<'static> = style::Style::default();
+
+#[cfg(feature = "color")]
+mod style;
+
 static LOGGER: WebConsoleLogger = WebConsoleLogger {};
 
 struct WebConsoleLogger {}
@@ -119,16 +128,60 @@ impl Log for WebConsoleLogger {
 ///     .apply()?;
 /// ```
 pub fn log(record: &Record) {
-    // pick the console.log() variant for the appropriate logging level
-    let console_log = match record.level() {
-        Level::Error => console::error_1,
-        Level::Warn => console::warn_1,
-        Level::Info => console::info_1,
-        Level::Debug => console::log_1,
-        Level::Trace => console::debug_1,
-    };
-
-    console_log(&format!("{}", record.args()).into());
+    #[cfg(not(feature = "color"))]
+    {
+        // pick the console.log() variant for the appropriate logging level
+        let console_log = match record.level() {
+            Level::Error => console::error_1,
+            Level::Warn => console::warn_1,
+            Level::Info => console::info_1,
+            Level::Debug => console::log_1,
+            Level::Trace => console::debug_1,
+        };
+
+        console_log(&format!("{}", record.args()).into());
+    }
+
+    #[cfg(feature = "color")]
+    {
+        // pick the console.log() variant for the appropriate logging level
+        let console_log = match record.level() {
+            Level::Error => console::error_4,
+            Level::Warn => console::warn_4,
+            Level::Info => console::info_4,
+            Level::Debug => console::log_4,
+            Level::Trace => console::debug_4,
+        };
+
+        let message = {
+            let message = format!(
+                "%c{level}%c {file}:{line} %c\n{text}",
+                level = record.level(),
+                file = record.file().unwrap_or_else(|| record.target()),
+                line = record
+                    .line()
+                    .map_or_else(|| "[Unknown]".to_string(), |line| line.to_string()),
+                text = record.args(),
+            );
+            JsValue::from(&message)
+        };
+
+        let level_style = {
+            let style_str = match record.level() {
+                Level::Trace => STYLE.trace,
+                Level::Debug => STYLE.debug,
+                Level::Info => STYLE.info,
+                Level::Warn => STYLE.warn,
+                Level::Error => STYLE.error,
+            };
+
+            JsValue::from(style_str)
+        };
+
+        let file_line_style = JsValue::from_str(STYLE.file_line);
+        let text_style = JsValue::from_str(STYLE.text);
+        console_log(&message, &level_style, &file_line_style, &text_style);
+    }
 }
 
 /// Initializes the global logger setting `max_log_level` to the given value.

src/style.rs

@@ -0,0 +1,33 @@
+/// Log message styling.
+///
+/// Adapted from <https://gitlab.com/limira-rs/wasm-logger/-/blob/0c16227/src/lib.rs#L72-85>
+pub struct Style<'s> {
+    pub trace: &'s str,
+    pub debug: &'s str,
+    pub info: &'s str,
+    pub warn: &'s str,
+    pub error: &'s str,
+    pub file_line: &'s str,
+    pub text: &'s str,
+}
+
+impl Style<'static> {
+    /// Returns default style values.
+    pub const fn default() -> Self {
+        macro_rules! bg_color {
+            ($color:expr) => {
+                concat!("color: white; padding: 0 3px; background: ", $color, ";");
+            };
+        };
+
+        Style {
+            trace: bg_color!("gray"),
+            debug: bg_color!("blue"),
+            info: bg_color!("green"),
+            warn: bg_color!("orange"),
+            error: bg_color!("darkred"),
+            file_line: "font-weight: bold; color: inherit",
+            text: "background: inherit; color: inherit",
+        }
+    }
+}