codify "platform" into resolution logic, server-fn/fullstack overhaul (#4596)

overhaul dioxus fullstack using a new implementation of server_fn

This PR is a complete rewrite of dioxus fullstack designed to improve compatibility with axum and to fix a number of compilation errors based on feature flag unification plumbing through macros.

examples/01-app-demos/file-explorer/.gitignore

@@ -0,0 +1,13 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
+/dist/
+/static/
+/.dioxus/
+
+# Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
+# More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
+Cargo.lock
+
+# These are backup files generated by rustfmt
+**/*.rs.bk

examples/01-app-demos/file-explorer/Cargo.toml

@@ -0,0 +1,11 @@
+[package]
+name = "file-explorer"
+edition = "2021"
+version = "0.1.0"
+publish = false
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+dioxus = { workspace = true, features = ["desktop"] }
+open = { workspace = true }

examples/01-app-demos/file-explorer/Dioxus.toml

@@ -0,0 +1,43 @@
+[application]
+
+# App (Project) Name
+name = "file-explorer"
+
+# Dioxus App Default Platform
+# desktop, web
+default_platform = "desktop"
+
+# `build` & `serve` dist path
+out_dir = "dist"
+
+# assets file folder
+asset_dir = "assets"
+
+[web.app]
+
+# HTML title tag content
+title = "file-explorer"
+
+[web.watcher]
+
+# when watcher trigger, regenerate the `index.html`
+reload_html = true
+
+# which files or dirs will be watcher monitoring
+watch_path = ["src", "assets"]
+
+# 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/01-app-demos/file-explorer/README.md

@@ -0,0 +1,13 @@
+# File-explorer with Rust and Dioxus
+
+This example shows how a Dioxus App can directly leverage system calls and libraries to bridge native functionality with the WebView renderer.
+
+![example](./assets/image.png)
+
+
+## To run this example:
+
+```
+dx serve
+```
+

examples/01-app-demos/file-explorer/assets/fileexplorer.css

@@ -0,0 +1,180 @@
+* {
+    margin: 0;
+    padding: 0;
+    font-family: 'Roboto', sans-serif;
+    user-select: none;
+    transition: .2s all;
+}
+
+body {
+    padding-top: 77px;
+}
+
+
+/* header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  padding: 20px;
+  background-color: #2196F3;
+  color: white;
+}
+header h1 {
+  float: left;
+  font-size: 20px;
+  font-weight: 400;
+}
+header .material-icons {
+  float: right;
+  cursor: pointer;
+}
+header .icon-menu {
+  float: left;
+  margin-right: 20px;
+} */
+
+main {
+    padding: 20px 50px;
+}
+
+.folder * {
+    width: 100px;
+}
+
+.folder {
+    float: left;
+    width: 100px;
+    height: 152px;
+    /* //padding: 20px; */
+    margin-right: 50px;
+    margin-bottom: 70px;
+    border-radius: 2px;
+    /* //overflow: hidden; */
+    cursor: pointer;
+}
+
+.folder:hover h1 {
+    display: none;
+}
+
+.folder:hover p.cooltip {
+    opacity: 1;
+    top: 0;
+}
+
+.folder * {
+    text-align: center;
+}
+
+.folder i {
+    margin: 0;
+    font-size: 100px;
+    color: #607D8B;
+}
+
+.folder h1 {
+    position: relative;
+    display: block;
+    top: -37px;
+    font-size: 20px;
+    font-weight: 400;
+}
+
+.folder p.cooltip {
+    position: relative;
+    top: 5px;
+    left: -50%;
+    margin-left: 35px;
+    background: #212121;
+    font-size: 15px;
+    color: white;
+    border-radius: 4px;
+    padding: 10px 20px;
+    padding-right: 30px;
+    width: 100px;
+    opacity: 0;
+}
+
+.folder p.cooltip:before {
+    content: '';
+    position: absolute;
+    display: block;
+    top: -4px;
+    left: 50%;
+    margin-left: -5px;
+    height: 10px;
+    width: 10px;
+    border-radius: 2px;
+    background-color: #212121;
+    transform: rotate(45deg);
+}
+
+div.properties {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+    width: 300px;
+    background-color: white;
+}
+
+div.properties:before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 300px;
+    bottom: 0;
+    background-color: #212121;
+    opacity: .5;
+    overflow: hidden;
+}
+
+div.properties img {
+    position: relative;
+    top: -1px;
+    left: -1px;
+    width: 110%;
+    height: 200px;
+    filter: blur(2px);
+}
+
+div.properties h1 {
+    position: relative;
+    width: 100%;
+    text-align: left;
+    margin-left: 20px;
+    color: white;
+}
+
+header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: 20px;
+    background-color: #2196F3;
+    color: white;
+    display: flex;
+    align-items: center;
+}
+
+header h1 {
+    font-weight: 400;
+}
+
+header span {
+    flex: 1;
+}
+
+header i {
+    margin: 0 10px;
+    cursor: pointer;
+}
+
+header i:nth-child(1) {
+    margin: 0 20px;
+}

examples/01-app-demos/file-explorer/src/main.rs

@@ -0,0 +1,129 @@
+//! Example: File Explorer
+//!
+//! This is a fun little desktop application that lets you explore the file system.
+//!
+//! This example is interesting because it's mixing filesystem operations and GUI, which is typically hard for UI to do.
+//! We store the state entirely in a single signal, making the explorer logic fairly easy to reason about.
+
+use std::env::current_dir;
+use std::path::PathBuf;
+
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::launch(app);
+}
+
+fn app() -> Element {
+    let mut files = use_signal(Files::new);
+
+    rsx! {
+        Stylesheet { href: asset!("/assets/fileexplorer.css") }
+        Stylesheet { href: "https://fonts.googleapis.com/icon?family=Material+Icons" }
+        div {
+            header {
+                i { class: "material-icons icon-menu", "menu" }
+                h1 { "Files: " {files.read().current()} }
+                span { }
+                i { class: "material-icons", onclick: move |_| files.write().go_up(), "logout" }
+            }
+            main {
+                for (dir_id, path) in files.read().path_names.iter().enumerate() {
+                    {
+                        let path_end = path.components().next_back().map(|p|p.as_os_str()).unwrap_or(path.as_os_str()).to_string_lossy();
+                        let path = path.display();
+                        rsx! {
+                            div { class: "folder", key: "{path}",
+                                i { class: "material-icons",
+                                    onclick: move |_| files.write().enter_dir(dir_id),
+                                    if path_end.contains('.') {
+                                        "description"
+                                    } else {
+                                        "folder"
+                                    }
+                                    p { class: "cooltip", "0 folders / 0 files" }
+                                }
+                                h1 { "{path_end}" }
+                            }
+                        }
+                    }
+                }
+                if let Some(err) = files.read().err.as_ref() {
+                    div {
+                        code { "{err}" }
+                        button { onclick: move |_| files.write().clear_err(), "x" }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/// A simple little struct to hold the file explorer state
+///
+/// We don't use any fancy signals or memoization here - Dioxus is so fast that even a file explorer can be done with a
+/// single signal.
+struct Files {
+    current_path: PathBuf,
+    path_names: Vec<PathBuf>,
+    err: Option<String>,
+}
+
+impl Files {
+    fn new() -> Self {
+        let mut files = Self {
+            current_path: std::path::absolute(current_dir().unwrap()).unwrap(),
+            path_names: vec![],
+            err: None,
+        };
+
+        files.reload_path_list();
+
+        files
+    }
+
+    fn reload_path_list(&mut self) {
+        let paths = match std::fs::read_dir(&self.current_path) {
+            Ok(e) => e,
+            Err(err) => {
+                let err = format!("An error occurred: {err:?}");
+                self.err = Some(err);
+                return;
+            }
+        };
+        let collected = paths.collect::<Vec<_>>();
+
+        // clear the current state
+        self.clear_err();
+        self.path_names.clear();
+
+        for path in collected {
+            self.path_names.push(path.unwrap().path().to_path_buf());
+        }
+    }
+
+    fn go_up(&mut self) {
+        self.current_path = match self.current_path.parent() {
+            Some(path) => path.to_path_buf(),
+            None => {
+                self.err = Some("Cannot go up from the root directory".to_string());
+                return;
+            }
+        };
+        self.reload_path_list();
+    }
+
+    fn enter_dir(&mut self, dir_id: usize) {
+        let path = &self.path_names[dir_id];
+        self.current_path.clone_from(path);
+        self.reload_path_list();
+    }
+
+    fn current(&self) -> String {
+        self.current_path.display().to_string()
+    }
+
+    fn clear_err(&mut self) {
+        self.err = None;
+    }
+}