Add doc testing to the CI to validate that all doc examples are correct.

Add top-level module documentation for the library. We should describe what Dioxus SDK is, explain what it offers, and give some small examples of what you can do with it.

Dioxus SDK is a little tricky to develop because it supports many platforms and features. We should add a guide that details switching platforms and features with Rust Analyzer, project structure, and other important details to make it easier to start contributing.

on docs.rs the "repository" link points at https://github.com/DioxusLabs/dioxus-sdk/ which 404s; it should be https://github.com/DioxusLabs/sdk/

Maybe we can just disable the clipboard module for now

if several components use the use_window_size() hook, they no panic or don't update when the window is resized.

paste the below into the 'dx new' default project to test.

// none of the values update on resize
dioxus-sdk = { git = "https://github.com/DioxusLabs/sdk", features = ["window_size"] }

#[component]
fn App() -> Element {

    rsx! {
        WindowSizeRenderer {}
        WindowSizeRenderer {}
        WindowSizeRenderer {}
        WindowSizeRenderer {}
    }
}

#[component]
fn WindowSizeRenderer() -> Element {
    let window = use_window_size();
    let width = window().width;
    rsx! {
        div {
            style: "width: 100px; height: 30px; text-align: center;",
            "{width}"
        }
    }
}

See #17 (comment) for the original issue wherein I reported that #17's use of postcard fails to deserialize certain types from disk onto Signals.

Here's a simple type that will trigger postcard's WontImplement error:

#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
#[serde(untagged)]
enum Foo {
    ANone,
}

Here's the code to reproduce:

        let sample =
            new_storage::<LocalStorage, BTreeMap<String, Foo>>(cx, "sample".to_string(), || {
                tracing::warn!("📦 No sample found");
                BTreeMap::new()
            });
        tracing::info!("📦 Sample: {:?}", sample.read());
        sample.with_mut(|s| {
            s.insert("foo".to_string(), Foo::ANone);
        });

Run the app, then quit and run it again, the console should print:

2023-11-08T15:18:54.198633Z ERROR dioxus_std::storage: Error deserializing value from storage: WontImplement
2023-11-08T15:18:54.198645Z  WARN nix_browser::app::state: 📦 No sample found
2023-11-08T15:18:54.199122Z  INFO nix_browser::app::state: 📦 Sample: {}

If we remove the #[serde(untagged)], the code works as expected. Turns out we are not the first to notice this issue with postcard:

What surprised me at first was that, even though postcard uses serde's derives, it doesn't support everything serde does for other formats. I get that there's no guarantees that a format would implement all serde features, but there are some surprises (e.g. #[serde(untagged)] will only error when deserializing, not when serializing).

jamesmunns/postcard#92

Also disable default features and just enable default = ["macro", "signals", "hooks"]

With the following code:

#[component]
pub fn NotificationArea(cx: Scope, rx: UseChannel<Notification>) -> Element {
    let notifications = use_ref(cx, || VecDeque::<Notification>::new());
    use_listen_channel(cx, &rx, |n| {
        to_owned![notifications];
        async move {
            match n {
                Ok(n) => notifications.with_mut(|deque| deque.push_front(n)),
                Err(e) => tracing::error!("Notification error: {e}"),
            }
        }
    });
    cx.render(rsx! {
        div { class: "box",
        }
    })
}

I get a lifetime error:

 error[E0521]: borrowed data escapes outside of function
   --> src/components/notification.rs:57:5
    |
 54 |   #[component]
    |   ------------ lifetime `'a` defined here
 55 |   pub fn NotificationArea(cx: Scope, rx: UseChannel<Notification>) -> Element {
    |                           -- `cx` is a reference that is only valid in the function body
 56 |       let notifications = use_ref(cx, || VecDeque::<Notification>::new());
 57 | /     use_listen_channel(cx, &rx, |n| {
 58 | |         to_owned![notifications];
 59 | |         async move {
 60 | |             match n {
 ...  |
 64 | |         }
 65 | |     });
    | |      ^
    | |      |
    | |______`cx` escapes the function body here
    |        argument requires that `'a` must outlive `'static`

/cc @marc2332

Specific Demand

use_color_scheme is only available on the web platform. It would be great to add support for desktop platforms. This would fix an issue where the entire workspace can't be checked because of wasm dependencies.

Add an mdbook for SDK for use in the docsite similar to how the current Dioxus mdbook is set up. This will probably be moved to the docsite repo once it's ready.

The book should have an introduction section with details of the project structure and layout. There should be another section called something like "Modules" that has pages on every SDK module and basic usage.

This book could include the contributor guide mentioned in #26

1. dioxus_desktop::launch(app) -> this refers to a module, not a callable function, can be fixed by replacing with LaunchBuilder::desktop().launch(app)
2. e.data.value.clone() -> value is a method and apparently should be e.data.value().clone()
3. use_clipboard() -> this requires an argument of type &dioxus_core::scopes::ScopeState

I don't know how to fix third issue. I'm not familiar with React-like designs (haven't had an HTML, CSS, JavaScript class since high school) and just wanted to try re-creating a simple app I have in Egui over to Dioxus after hearing about the latest update.

Some of the docs for the storage feature of SDK look to be incorrect. For example, the use_persistent hook has the doc:

A persistent storage hook that can be used to store data across application reloads.

I don't believe the latter bolded/italic part of this doc is correct, at least on the Web platform. We should look for all discrepancies and correct them.

I'm running a desktop app using dx serve on a MacOS. When I conditionally render a form that contains a field with name equals to "value", after clicking "Send" the application panics.

Here is a minimal setup:

use dioxus::prelude::*;
use dioxus_desktop::Config;

fn main() {
    dioxus_desktop::launch_cfg(App, Config::new());
}

#[component]
fn App(cx: Scope) -> Element {
    let show_form = use_state(cx, || false);

    cx.render(
        rsx! {
            if !show_form.get() {
                rsx! {
                  button {
                      onclick: move |_| {
                          show_form.set(true);
                      },
                      "Show Form"
                  }
              }
            } else {
                rsx! {
                    form {
                        prevent_default: true,
                        onsubmit: move |_| {
                            show_form.set(false); 
                        },
                        div {
                            input { name: "value" }
                        }
                        div {
                            button {
                                r#type: "submit",
                                "Send"
                            }
                        }
                    }
              }
            }
        }
    )
}

I noticed another bug in forms. If I have a button with no type attribute, after clicking "Send" the application removes every component. Looks like it does a form submission. Here is the snippet:

use dioxus::prelude::*;
use dioxus_desktop::Config;

fn main() {
    dioxus_desktop::launch_cfg(App, Config::new());
}

#[component]
fn App(cx: Scope) -> Element {
    let show_form = use_state(cx, || false);

    cx.render(
        rsx! {
            if !show_form.get() {
                rsx! {
                  button {
                      onclick: move |_| {
                          show_form.set(true);
                      },
                      "Show Form"
                  }
              }
            } else {
                rsx! {
                    form {
                        prevent_default: true,
                        div {
                            input { name: "value" }
                        }
                        div {
                            button {
                                onclick: move |_| {
                                    show_form.set(false); 
                                },
                                "Send"
                            }
                        }
                    }
              }
            }
        }
    )
}

I'm using the git version of dioxus crate.