feat: Minor changes and added use_preferred_color_scheme example (#2)

* Updated dioxus, clean up code and added use_preferred_color_scheme example

* add readmes

.gitignore

@@ -1,3 +1,4 @@
-/target
+target
+dist
 /Cargo.lock
 /.cargo

Cargo.toml

@@ -9,14 +9,25 @@ repository = "https://github.com/DioxusLabs/dioxus-std/"
 homepage = "https://dioxuslabs.com"
 keywords = ["dom", "gui", "dioxus", "standard", "hooks"]
 
+[workspace]
+members = ["./examples/color_scheme"]
+
 [features]
+# Features
 clipboard = ["dep:clipboard"]
 notifications = ["dep:notify-rust"]
 camera = ["dep:nokhwa"]
 hooks-use_preferred_color_scheme = ["dep:dioxus", "dep:web-sys", "dep:wasm-bindgen"]
 
+# Platform-specific features
+web = ["hooks-use_preferred_color_scheme"]
+desktop = ["camera", "notifications", "clipboard"]
+
+# Default features
+default = ["web"]
+
 [dependencies]
-dioxus = { version = "0.2", optional = true }
+dioxus = { version = "0.3", optional = true }
 web-sys = { version = "0.3.60", features = ["Window", "MediaQueryList"], optional = true }
 wasm-bindgen = { version = "0.2.83", optional = true }
 

examples/README.md

@@ -0,0 +1,4 @@
+# Examples
+
+### [`color_scheme`](./color_scheme/)
+Learn how to use `use_preferred_color_scheme`.

examples/color_scheme/Cargo.toml

@@ -0,0 +1,15 @@
+[package]
+name = "color_scheme"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+dioxus-std = { path="../../" }
+dioxus = "0.3"
+dioxus-web = "0.3"
+
+log = "0.4.6"
+
+# WebAssembly Debug
+wasm-logger = "0.2.0"
+console_error_panic_hook = "0.1.7"

examples/color_scheme/Dioxus.toml

@@ -0,0 +1,42 @@
+[application]
+
+# App (Project) Name
+name = "color_scheme"
+
+# Dioxus App Default Platform
+# desktop, web, mobile, ssr
+default_platform = "web"
+
+# `build` & `serve` dist path
+out_dir = "dist"
+
+# resource (public) file folder
+asset_dir = "public"
+
+[web.app]
+
+# HTML title tag content
+title = "dioxus | ⛺"
+
+[web.watcher]
+
+# when watcher trigger, regenerate the `index.html`
+reload_html = true
+
+# which files or dirs will be watcher monitoring
+watch_path = ["src", "public"]
+
+# include `assets` in web platform
+[web.resource]
+
+# CSS style file
+style = []
+
+# Javascript code file
+script = []
+
+[web.resource.dev]
+
+# Javascript code file
+# serve: [dev-server] only
+script = []

examples/color_scheme/README.md

@@ -0,0 +1,7 @@
+# color_scheme
+
+Learn how to use `use_preferred_color_scheme`.
+
+Run:
+
+```dioxus serve```

examples/color_scheme/src/main.rs

@@ -0,0 +1,30 @@
+use dioxus::prelude::*;
+use dioxus_std::hooks::use_preferred_color_scheme;
+
+fn main() {
+    // init debug tool for WebAssembly
+    wasm_logger::init(wasm_logger::Config::default());
+    console_error_panic_hook::set_once();
+
+    dioxus_web::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    let color_scheme = use_preferred_color_scheme(cx);
+
+    render!(
+        div {
+            style: "text-align: center;",
+            h1 { "🌗 Dioxus 🚀" }
+            if let Ok(color_scheme) = color_scheme {
+                rsx!(
+                    h3 { "You preferred color scheme is {color_scheme:?}." }
+                )
+            } else {
+                rsx!(
+                    h3 { "There was an error when reading your preferred color scheme."}
+                )
+            }
+        }
+    )
+}

src/hooks/use_preferred_color_scheme.rs

@@ -6,36 +6,29 @@ use wasm_bindgen::{prelude::Closure, JsCast};
 pub enum PreferredColorScheme {
     Light,
     Dark,
-    Err(String),
 }
 
 static INIT: Once = Once::new();
 
 /// Retrieves (as well as listens for changes) to the user's preferred color scheme (dark or light) so your application can adapt accordingly.
-pub fn use_preferred_color_scheme(cx: &ScopeState) -> PreferredColorScheme {
+pub fn use_preferred_color_scheme(cx: &ScopeState) -> Result<PreferredColorScheme, String> {
     // This code is kinda messy..
     let window = match web_sys::window() {
         Some(w) => w,
         None => {
-            return PreferredColorScheme::Err(
-                "not running in wasm context: window doesn't exist".to_string(),
-            )
+            return Err("Not running in wasm context: window doesn't exist".to_string())
         }
     };
 
     let media_query_list = match window.match_media("(prefers-color-scheme: dark)") {
         Ok(opt) => match opt {
             Some(m) => m,
             None => {
-                return PreferredColorScheme::Err(
-                    "failed to determine preferred scheme".to_string(),
-                )
+                return Err("Failed to determine preferred scheme".to_string())
             }
         },
         Err(e) => {
-            return PreferredColorScheme::Err(e.as_string().unwrap_or(
-                "failed to determine preferred scheme and couldn't retrieve error".to_string(),
-            ))
+            return Err(e.as_string().unwrap_or("Failed to determine preferred scheme and couldn't retrieve error".to_string()))
         }
     };
 
@@ -57,7 +50,7 @@ pub fn use_preferred_color_scheme(cx: &ScopeState) -> PreferredColorScheme {
         media_query_list.set_onchange(Some(cb.unchecked_ref()));
     });
 
-    determine_scheme(media_query_list.matches())
+    Ok(determine_scheme(media_query_list.matches()))
 }
 
 fn determine_scheme(value: bool) -> PreferredColorScheme {