Merge branch 'master' into jk/rework-desktop-crate

examples/compose.rs

@@ -26,7 +26,7 @@ fn app(cx: Scope) -> Element {
             button {
                 onclick: move |_| {
                     let dom = VirtualDom::new_with_props(compose, ComposeProps { app_tx: tx.clone() });
-                    window.new_window(dom, Default::default());
+                    dioxus_desktop::window().new_window(dom, Default::default());
                 },
                 "Click to compose a new email"
             }
@@ -61,11 +61,8 @@ fn compose(cx: Scope<ComposeProps>) -> Element {
                 },
                 "Click to send"
             }
-
-            input {
-                oninput: move |e| user_input.set(e.value.clone()),
-                value: "{user_input}"
-            }
+          
+            input { oninput: move |e| user_input.set(e.value()), value: "{user_input}" }
         }
     })
 }

examples/counter.rs

@@ -22,7 +22,7 @@ fn app(cx: Scope) -> Element {
                     input {
                         value: "{counter}",
                         oninput: move |e| {
-                            if let Ok(value) = e.value.parse::<usize>() {
+                            if let Ok(value) = e.value().parse::<usize>() {
                                 counters.make_mut()[i] = value;
                             }
                         }

examples/crm.rs

@@ -35,14 +35,16 @@ fn App(cx: Scope) -> Element {
             rel: "stylesheet",
             href: "https://unpkg.com/purecss@2.0.6/build/pure-min.css",
             integrity: "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5",
-            crossorigin: "anonymous",
+            crossorigin: "anonymous"
         }
 
-        style { "
+        style {
+            "
             .red {{
                 background-color: rgb(202, 60, 60) !important;
             }}
-        " }
+        "
+        }
 
         h1 { "Dioxus CRM Example" }
 
@@ -57,16 +59,8 @@ fn ClientList(cx: Scope) -> Element {
     cx.render(rsx! {
         h2 { "List of Clients" }
 
-        Link {
-            to: Route::ClientAdd {},
-            class: "pure-button pure-button-primary",
-            "Add Client"
-        }
-        Link {
-            to: Route::Settings {},
-            class: "pure-button",
-            "Settings"
-        }
+        Link { to: Route::ClientAdd {}, class: "pure-button pure-button-primary", "Add Client" }
+        Link { to: Route::Settings {}, class: "pure-button", "Settings" }
 
         clients.read().iter().map(|client| rsx! {
             div {
@@ -94,79 +88,55 @@ fn ClientAdd(cx: Scope) -> Element {
             class: "pure-form pure-form-aligned",
             onsubmit: move |_| {
                 let mut clients = clients.write();
-
-                clients.push(Client {
-                    first_name: first_name.to_string(),
-                    last_name: last_name.to_string(),
-                    description: description.to_string(),
-                });
-
+                clients
+                    .push(Client {
+                        first_name: first_name.to_string(),
+                        last_name: last_name.to_string(),
+                        description: description.to_string(),
+                    });
                 dioxus_router::router().push(Route::ClientList {});
             },
 
             fieldset {
-                div {
-                    class: "pure-control-group",
-                    label {
-                        "for": "first_name",
-                        "First Name"
-                    }
+                div { class: "pure-control-group",
+                    label { "for": "first_name", "First Name" }
                     input {
                         id: "first_name",
                         "type": "text",
                         placeholder: "First Name…",
                         required: "",
                         value: "{first_name}",
-                        oninput: move |e| first_name.set(e.value.clone())
+                        oninput: move |e| first_name.set(e.value())
                     }
                 }
 
-                div {
-                    class: "pure-control-group",
-                    label {
-                        "for": "last_name",
-                        "Last Name"
-                    }
+                div { class: "pure-control-group",
+                    label { "for": "last_name", "Last Name" }
                     input {
                         id: "last_name",
                         "type": "text",
                         placeholder: "Last Name…",
                         required: "",
                         value: "{last_name}",
-                        oninput: move |e| last_name.set(e.value.clone())
+                        oninput: move |e| last_name.set(e.value())
                     }
                 }
 
-                div {
-                    class: "pure-control-group",
-                    label {
-                        "for": "description",
-                        "Description"
-                    }
+                div { class: "pure-control-group",
+                    label { "for": "description", "Description" }
                     textarea {
                         id: "description",
                         placeholder: "Description…",
                         value: "{description}",
-                        oninput: move |e| description.set(e.value.clone())
+                        oninput: move |e| description.set(e.value())
                     }
                 }
 
-                div {
-                    class: "pure-controls",
-                    button {
-                        "type": "submit",
-                        class: "pure-button pure-button-primary",
-                        "Save"
-                    }
-                    Link {
-                        to: Route::ClientList {},
-                        class: "pure-button pure-button-primary red",
-                        "Cancel"
-                    }
+                div { class: "pure-controls",
+                    button { "type": "submit", class: "pure-button pure-button-primary", "Save" }
+                    Link { to: Route::ClientList {}, class: "pure-button pure-button-primary red", "Cancel" }
                 }
             }
-
-
         }
     })
 }
@@ -187,10 +157,6 @@ fn Settings(cx: Scope) -> Element {
             "Remove all Clients"
         }
 
-        Link {
-            to: Route::ClientList {},
-            class: "pure-button",
-            "Go back"
-        }
+        Link { to: Route::ClientList {}, class: "pure-button", "Go back" }
     })
 }

examples/custom_assets.rs

@@ -10,7 +10,7 @@ fn app(cx: Scope) -> Element {
             p {
                 "This should show an image:"
             }
-            img { src: "examples/assets/logo.png" }
+            img { src: mg!(image("examples/assets/logo.png").format(ImageType::Avif)).to_string() }
         }
     })
 }

examples/file_explorer.rs

@@ -18,13 +18,14 @@ fn main() {
     );
 }
 
+const _STYLE: &str = mg!(file("./examples/assets/fileexplorer.css"));
+
 fn app(cx: Scope) -> Element {
     let files = use_ref(cx, Files::new);
 
     cx.render(rsx! {
         div {
             link { href:"https://fonts.googleapis.com/icon?family=Material+Icons", rel:"stylesheet", }
-            style { include_str!("./assets/fileexplorer.css") }
             header {
                 i { class: "material-icons icon-menu", "menu" }
                 h1 { "Files: ", files.read().current() }

examples/file_upload.rs

@@ -16,7 +16,7 @@ fn App(cx: Scope) -> Element {
                 r#type: "checkbox",
                 checked: "{enable_directory_upload}",
                 oninput: move |evt| {
-                    enable_directory_upload.set(evt.value.parse().unwrap());
+                    enable_directory_upload.set(evt.value().parse().unwrap());
                 },
             },
             "Enable directory upload"
@@ -30,7 +30,7 @@ fn App(cx: Scope) -> Element {
             onchange: |evt| {
                 to_owned![files_uploaded];
                 async move {
-                    if let Some(file_engine) = &evt.files {
+                    if let Some(file_engine) = &evt.files() {
                         let files = file_engine.files();
                         for file_name in files {
                             sleep(std::time::Duration::from_secs(1)).await;

examples/form.rs

@@ -14,8 +14,8 @@ fn app(cx: Scope) -> Element {
         div {
             h1 { "Form" }
             form {
-                onsubmit: move |ev| println!("Submitted {:?}", ev.values),
-                oninput: move |ev| println!("Input {:?}", ev.values),
+                onsubmit: move |ev| println!("Submitted {:?}", ev.values()),
+                oninput: move |ev| println!("Input {:?}", ev.values()),
                 input { r#type: "text", name: "username" }
                 input { r#type: "text", name: "full-name" }
                 input { r#type: "password", name: "password" }

examples/login_form.rs

@@ -12,8 +12,8 @@ fn app(cx: Scope) -> Element {
         let resp = reqwest::Client::new()
             .post("http://localhost:8080/login")
             .form(&[
-                ("username", &evt.values["username"]),
-                ("password", &evt.values["password"]),
+                ("username", &evt.values()["username"]),
+                ("password", &evt.values()["password"]),
             ])
             .send()
             .await;
@@ -31,8 +31,7 @@ fn app(cx: Scope) -> Element {
 
     cx.render(rsx! {
         h1 { "Login" }
-        form {
-            onsubmit: onsubmit,
+        form { onsubmit: onsubmit,
             input { r#type: "text", id: "username", name: "username" }
             label { "Username" }
             br {}

examples/query_segments_demo/src/main.rs

@@ -14,29 +14,35 @@ use dioxus_router::prelude::*;
 #[derive(Routable, Clone)]
 #[rustfmt::skip]
 enum Route {
-    // segments that start with ?: are query segments
-    #[route("/blog?:query_params")]
+    // segments that start with ?:.. are query segments that capture the entire query
+    #[route("/blog?:..query_params")]
     BlogPost {
         // You must include query segments in child variants
-        query_params: BlogQuerySegments,
+        query_params: ManualBlogQuerySegments,
+    },
+    // segments that follow the ?:field&:other_field syntax are query segments that follow the standard url query syntax
+    #[route("/autoblog?:name&:surname")]
+    AutomaticBlogPost {
+        name: String,
+        surname: String,
     },
 }
 
 #[derive(Debug, Clone, PartialEq)]
-struct BlogQuerySegments {
+struct ManualBlogQuerySegments {
     name: String,
     surname: String,
 }
 
 /// The display impl needs to display the query in a way that can be parsed:
-impl Display for BlogQuerySegments {
+impl Display for ManualBlogQuerySegments {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         write!(f, "name={}&surname={}", self.name, self.surname)
     }
 }
 
 /// The query segment is anything that implements <https://docs.rs/dioxus-router/latest/dioxus_router/routable/trait.FromQuery.html>. You can implement that trait for a struct if you want to parse multiple query parameters.
-impl FromQuery for BlogQuerySegments {
+impl FromQuery for ManualBlogQuerySegments {
     fn from_query(query: &str) -> Self {
         let mut name = None;
         let mut surname = None;
@@ -57,13 +63,21 @@ impl FromQuery for BlogQuerySegments {
 }
 
 #[component]
-fn BlogPost(cx: Scope, query_params: BlogQuerySegments) -> Element {
+fn BlogPost(cx: Scope, query_params: ManualBlogQuerySegments) -> Element {
     render! {
         div{"This is your blogpost with a query segment:"}
         div{format!("{:?}", query_params)}
     }
 }
 
+#[component]
+fn AutomaticBlogPost(cx: Scope, name: String, surname: String) -> Element {
+    render! {
+        div{"This is your blogpost with a query segment:"}
+        div{format!("name={}&surname={}", name, surname)}
+    }
+}
+
 #[component]
 fn App(cx: Scope) -> Element {
     render! { Router::<Route>{} }

examples/shared_state.rs

@@ -64,7 +64,7 @@ fn DataEditor(cx: Scope, id: usize) -> Element {
 fn DataView(cx: Scope, id: usize) -> Element {
     let cool_data = use_shared_state::<CoolData>(cx).unwrap();
 
-    let oninput = |e: FormEvent| cool_data.write().set(*id, e.value.clone());
+    let oninput = |e: FormEvent| cool_data.write().set(*id, e.value());
 
     let cool_data = cool_data.read();
     let my_data = &cool_data.view(id).unwrap();

examples/tailwind/Dioxus.toml

@@ -30,7 +30,7 @@ watch_path = ["src", "public"]
 [web.resource]
 
 # CSS style file
-style = ["/tailwind.css"]
+style = []
 
 # Javascript code file
 script = []

examples/tailwind/dist/tailwind3531548035813279582.css

@@ -0,0 +1 @@
+*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:""}html{-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{color:inherit;border-top-width:1px;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (width>=640px){.container{max-width:640px}}@media (width>=768px){.container{max-width:768px}}@media (width>=1024px){.container{max-width:1024px}}@media (width>=1280px){.container{max-width:1280px}}@media (width>=1536px){.container{max-width:1536px}}.mx-auto{margin-left:auto;margin-right:auto}.mb-16{margin-bottom:4rem}.mb-4{margin-bottom:1rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.mr-5{margin-right:1.25rem}.mt-4{margin-top:1rem}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-10{height:2.5rem}.h-4{height:1rem}.w-10{width:2.5rem}.w-4{width:1rem}.w-5\/6{width:83.3333%}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.border-0{border-width:0}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity))}.object-cover{-o-object-fit:cover;object-fit:cover}.object-center{-o-object-position:center;object-position:center}.p-2{padding:.5rem}.p-5{padding:1.25rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.text-center{text-align:center}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-medium{font-weight:500}.leading-relaxed{line-heiLine truncated

examples/tailwind/src/main.rs

@@ -2,13 +2,11 @@
 
 use dioxus::prelude::*;
 
+const _STYLE: &str = mg!(file("./public/tailwind.css"));
+
 fn main() {
     #[cfg(not(target_arch = "wasm32"))]
-    dioxus_desktop::launch_cfg(
-        app,
-        dioxus_desktop::Config::new()
-            .with_custom_head(r#"<link rel="stylesheet" href="public/tailwind.css">"#.to_string()),
-    );
+    dioxus_desktop::launch(app);
     #[cfg(target_arch = "wasm32")]
     dioxus_web::launch(app);
 }

examples/textarea.rs

@@ -17,7 +17,7 @@ fn app(cx: Scope) -> Element {
             rows: "10",
             cols: "80",
             value: "{model}",
-            oninput: move |e| model.set(e.value.clone()),
+            oninput: move |e| model.set(e.value().clone()),
         }
     })
 }

examples/todomvc.rs

@@ -7,6 +7,8 @@ fn main() {
     dioxus_desktop::launch(app);
 }
 
+const _STYLE: &str = mg!(file("./examples/assets/todomvc.css"));
+
 #[derive(PartialEq, Eq, Clone, Copy)]
 pub enum FilterState {
     All,
@@ -47,7 +49,6 @@ pub fn app(cx: Scope<()>) -> Element {
 
     cx.render(rsx! {
         section { class: "todoapp",
-            style { include_str!("./assets/todomvc.css") }
             TodoHeader { todos: todos }
             section { class: "main",
                 if !todos.is_empty() {
@@ -107,7 +108,7 @@ pub fn TodoHeader<'a>(cx: Scope<'a, TodoHeaderProps<'a>>) -> Element {
                 value: "{draft}",
                 autofocus: "true",
                 oninput: move |evt| {
-                    draft.set(evt.value.clone());
+                    draft.set(evt.value().clone());
                 },
                 onkeydown: move |evt| {
                     if evt.key() == Key::Enter && !draft.is_empty() {
@@ -154,7 +155,7 @@ pub fn TodoEntry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
                     id: "cbg-{todo.id}",
                     checked: "{todo.checked}",
                     oninput: move |evt| {
-                        cx.props.todos.make_mut()[&cx.props.id].checked = evt.value.parse().unwrap();
+                        cx.props.todos.make_mut()[&cx.props.id].checked = evt.value().parse().unwrap();
                     }
                 }
                 label {
@@ -175,7 +176,7 @@ pub fn TodoEntry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
                 input {
                     class: "edit",
                     value: "{todo.contents}",
-                    oninput: move |evt| cx.props.todos.make_mut()[&cx.props.id].contents = evt.value.clone(),
+                    oninput: move |evt| cx.props.todos.make_mut()[&cx.props.id].contents = evt.value(),
                     autofocus: "true",
                     onfocusout: move |_| is_editing.set(false),
                     onkeydown: move |evt| {

examples/window_zoom.rs

@@ -12,7 +12,7 @@ fn app(cx: Scope) -> Element {
             r#type: "number",
             value: "{level}",
             oninput: |e| {
-                if let Ok(new_zoom) = e.value.parse::<f64>() {
+                if let Ok(new_zoom) = e.value().parse::<f64>() {
                     level.set(new_zoom);
                     dioxus_desktop::window().webview.zoom(new_zoom);
                 }

examples/xss_safety.rs

@@ -20,7 +20,7 @@ fn app(cx: Scope) -> Element {
             input {
                 value: "{contents}",
                 r#type: "text",
-                oninput: move |e| contents.set(e.value.clone()),
+                oninput: move |e| contents.set(e.value()),
             }
         }
     })