Fix bundling/path errors, sidecar support, iOS/Android simulator support, asset hotreload fixes, serverfn hotrelad, native tailwind support (#2779)

* wip: fix manganis import path
* upgrade tauri bundler, convert todo!() to unimplemented!()
* feat: mobile hotreloading + ios asset configuration
* remove oid demo and its associated env vars
* nuke all the things that cause cache thrashing
* swap to Asset type
* add some more logs
* display impl for attrvalue
* dont panic on collect failure
* cut down web deps to 150
* clean up deps in a lot of places, simplify build scripts
* clean up asset resolution and cli-dev profile
* wire up absolute paths for manganis asset in a particular mode
* move document related things around to shorten compile times
* move most things to `document::Item` and then decompose the cli-config
* switch link to stylesheet for clarity in examples
* move manganis workspace example to examples folder
* decompose manganis-cli-support
* dont need mobile demo anymore
* remove gloo dialogs
* html doesnt need document
* rename hotreload to devtools
* really clean up the html crate
* fix weird rsx spacing
* clean up desktop to use callback
* clean up document a bit
* re-wire up devsocket
* fix utf css
* yeeeet that js out of here
* synthetic web system works
* web crate almost done being cleaned up
* desktop mostly cleaned up too
* clean up cli a bit
* more cli cleanup
* cli builds again
* clean up cli, inline structs, cut down number of unique types where possible
* hotreload works again for desktop and this time, mobile too
* cfg out tungstenite
* devserver err
* more refactor to cli builder
* switch to unbounded_send
* new structure is much cleaner
* add http serve subcommand
* bundled hotreload
* kick stylsheets
* clean up a bit more, split up eventloop
* amazingly serve seems done
* change from pub to pub(crate) in cli
* remove tools
* bit more polish to cli
* fix issue with join
* gracefully handle fullstack without a server
* fullstack mobile demo
* fix launch function, move projects into example-projects folder
* hoist examples
* add "run" command
* clean up launch
* remove old manual websocket receiver
* doctor command
* allow desktop to scroll
* cut apart router crate
* dont put launch in prelude
* use dioxus::launch where possible
* rename rsx, cut out hotreload tests
* remove liveview project
* bump native
* fix compile for renderers
* move sync event response out of interpreter
* move render in serve
* rollback settings change
* cli compiles, huzzah!
* change uris for asset
* fix asset
* new tui screen
* new cargo-like tui works
* very very verty close
* it works! very small bug with incorrect grapheme calc
* Clean up devserver a bit
* status sytem
* tidy up debug filters
* clean up logging situation
* Fix a number of bugs with log printing
* new printing system is more reliable
* wire up more stuff
* things working but fullstack is having issues
* fullstack works again!
* hotreloading bundled assets works again
* bundled hotreload and beginnings of macos bundling
* Hotreload desktop
* combined server builds
* add build handle
* fix fullstack assets
* make open async, add some hooks for ios
* migrate filemap to runner
* wip global crate system
* fixup bundles + organize asset
* fix asset location bug
* all the bundled reloading!
* open ios simulator!
* full hotreload support for mobile + serverfn
* basic cleanups
* clean up dx
* Move filemap
* fix cutting of newlines
* assets workibg, some android
* hoist wry/tao
* use sync locks and headers to fix issues with android
* desktop -> mac/win/linux with alias
* better logging
* feat: workspace (entire computer!) hotreload
* should rebuild toggle, ios simulator bootup
* proper mobile support in launch
* more robust handling of assets
* fix cargo
* bring back some of tauri bundle
* make warnings go away, clippy happy on cli
* some final clippy cleanups
* fmt
* move manganis to its own folder
* upgrade bundle to stable
* drastically slim down manganis, prepping for merge
* typos, failing test, docsrs config
* remove static gen test
* nix static gen test
* we use --platform web instead of --platform fullstack now
* only bind dev urls in desktop/mobile
* install gtk
* nix static gen
* split build dir by app name

examples/all_events.rs

@@ -6,7 +6,7 @@
 use dioxus::prelude::*;
 use std::{collections::VecDeque, fmt::Debug, rc::Rc};
 
-const STYLE: &str = asset!("./examples/assets/events.css");
+const STYLE: Asset = asset!("/examples/assets/events.css");
 
 fn main() {
     dioxus::launch(app);

examples/calculator.rs

@@ -12,7 +12,7 @@ use dioxus::events::*;
 use dioxus::html::input_data::keyboard_types::Key;
 use dioxus::prelude::*;
 
-const STYLE: &str = asset!("./examples/assets/calculator.css");
+const STYLE: Asset = asset!("/examples/assets/calculator.css");
 
 fn main() {
     dioxus::LaunchBuilder::desktop()

examples/calculator_mutable.rs

@@ -29,7 +29,10 @@ fn app() -> Element {
     let mut state = use_signal(Calculator::new);
 
     rsx! {
-        document::Link { rel: "stylesheet", href: asset!("./examples/assets/calculator.css") }
+        document::Link {
+            rel: "stylesheet",
+            href: asset!("./examples/assets/calculator.css"),
+        }
         div { id: "wrapper",
             div { class: "app",
                 div {
@@ -39,15 +42,37 @@ fn app() -> Element {
                     div { class: "calculator-keypad",
                         div { class: "input-keys",
                             div { class: "function-keys",
-                                CalculatorKey { name: "key-clear", onclick: move |_| state.write().clear_display(),
-                                    if state.read().display_value == "0" { "C" } else { "AC" }
+                                CalculatorKey {
+                                    name: "key-clear",
+                                    onclick: move |_| state.write().clear_display(),
+                                    if state.read().display_value == "0" {
+                                        "C"
+                                    } else {
+                                        "AC"
+                                    }
+                                }
+                                CalculatorKey {
+                                    name: "key-sign",
+                                    onclick: move |_| state.write().toggle_sign(),
+                                    "±"
+                                }
+                                CalculatorKey {
+                                    name: "key-percent",
+                                    onclick: move |_| state.write().toggle_percent(),
+                                    "%"
                                 }
-                                CalculatorKey { name: "key-sign", onclick: move |_| state.write().toggle_sign(), "±" }
-                                CalculatorKey { name: "key-percent", onclick: move |_| state.write().toggle_percent(), "%" }
                             }
                             div { class: "digit-keys",
-                                CalculatorKey { name: "key-0", onclick: move |_| state.write().input_digit(0), "0" }
-                                CalculatorKey { name: "key-dot", onclick: move |_| state.write().input_dot(), "●" }
+                                CalculatorKey {
+                                    name: "key-0",
+                                    onclick: move |_| state.write().input_digit(0),
+                                    "0"
+                                }
+                                CalculatorKey {
+                                    name: "key-dot",
+                                    onclick: move |_| state.write().input_dot(),
+                                    "●"
+                                }
                                 for k in 1..10 {
                                     CalculatorKey {
                                         key: "{k}",
@@ -74,8 +99,16 @@ fn app() -> Element {
                                 onclick: move |_| state.write().set_operator(Operator::Sub),
                                 "−"
                             }
-                            CalculatorKey { name: "key-add", onclick: move |_| state.write().set_operator(Operator::Add), "+" }
-                            CalculatorKey { name: "key-equals", onclick: move |_| state.write().perform_operation(), "=" }
+                            CalculatorKey {
+                                name: "key-add",
+                                onclick: move |_| state.write().set_operator(Operator::Add),
+                                "+"
+                            }
+                            CalculatorKey {
+                                name: "key-equals",
+                                onclick: move |_| state.write().perform_operation(),
+                                "="
+                            }
                         }
                     }
                 }

examples/clock.rs

@@ -5,7 +5,7 @@ use async_std::task::sleep;
 use dioxus::prelude::*;
 use web_time::Instant;
 
-const STYLE: &str = asset!("./examples/assets/clock.css");
+const STYLE: Asset = asset!("/examples/assets/clock.css");
 
 fn main() {
     dioxus::launch(app);

examples/control_focus.rs

@@ -8,7 +8,7 @@ use std::rc::Rc;
 use async_std::task::sleep;
 use dioxus::prelude::*;
 
-const STYLE: &str = asset!("./examples/assets/roulette.css");
+const STYLE: Asset = asset!("/examples/assets/roulette.css");
 
 fn main() {
     dioxus::launch(app);

examples/counters.rs

@@ -2,7 +2,7 @@
 
 use dioxus::prelude::*;
 
-const STYLE: &str = asset!("./examples/assets/counter.css");
+const STYLE: Asset = asset!("/examples/assets/counter.css");
 
 fn main() {
     dioxus::launch(app);

examples/crm.rs

@@ -22,11 +22,18 @@ fn main() {
             rsx! {
                 document::Link {
                     rel: "stylesheet",
-                    href: asset!("https://unpkg.com/purecss@2.0.6/build/pure-min.css"), 
+                    href: "https://unpkg.com/purecss@2.0.6/build/pure-min.css",
                     integrity: "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5",
-                    crossorigin: "anonymous"
+                    crossorigin: "anonymous",
+                }
+                document::Link {
+                    rel: "stylesheet",
+                    href: asset!("/examples/assets/crm.css"),
+                }
+                document::Link {
+                    rel: "stylesheet",
+                    href: asset!("./examples/assets/crm.css"),
                 }
-                document::Link { rel: "stylesheet", href: asset!("./examples/assets/crm.css") }
                 h1 { "Dioxus CRM Example" }
                 Router::<Route> {}
             }
@@ -117,7 +124,7 @@ fn New() -> Element {
                         placeholder: "Last Name…",
                         required: true,
                         value: "{last_name}",
-                        oninput: move |e| last_name.set(e.value())
+                        oninput: move |e| last_name.set(e.value()),
                     }
                 }
 
@@ -127,13 +134,21 @@ fn New() -> Element {
                         id: "description",
                         placeholder: "Description…",
                         value: "{description}",
-                        oninput: move |e| description.set(e.value())
+                        oninput: move |e| description.set(e.value()),
                     }
                 }
 
                 div { class: "pure-controls",
-                    button { r#type: "submit", class: "pure-button pure-button-primary", "Save" }
-                    Link { to: Route::List, class: "pure-button pure-button-primary red", "Cancel" }
+                    button {
+                        r#type: "submit",
+                        class: "pure-button pure-button-primary",
+                        "Save"
+                    }
+                    Link {
+                        to: Route::List,
+                        class: "pure-button pure-button-primary red",
+                        "Cancel"
+                    }
                 }
             }
         }

examples/custom_assets.rs

@@ -1,17 +1,12 @@
 //! A simple example on how to use assets loading from the filesystem.
 //!
-//! If the feature "collect-assets" is enabled, the assets will be collected via the dioxus CLI and embedded into the
-//! final bundle. This lets you do various useful things like minify, compress, and optimize your assets.
-//!
-//! We can still use assets without the CLI middleware, but generally larger apps will benefit from it.
+//! Dioxus provides the asset!() macro which is a convenient way to load assets from the filesystem.
+//! This ensures the asset makes it into the bundle through dependencies and is accessible in environments
+//! like web and android where assets are lazily loaded using platform-specific APIs.
 
 use dioxus::prelude::*;
 
-#[cfg(not(feature = "collect-assets"))]
-static ASSET_PATH: &str = "examples/assets/logo.png";
-
-#[cfg(feature = "collect-assets")]
-static ASSET_PATH: &str = asset!("examples/assets/logo.png".format(ImageType::Avif));
+static ASSET_PATH: Asset = asset!("/examples/assets/logo.png");
 
 fn main() {
     dioxus::launch(app);
@@ -21,7 +16,7 @@ fn app() -> Element {
     rsx! {
         div {
             h1 { "This should show an image:" }
-            img { src: ASSET_PATH.to_string() }
+            img { src: ASSET_PATH }
         }
     }
 }

examples/dynamic_asset.rs

@@ -7,7 +7,7 @@
 use dioxus::desktop::{use_asset_handler, wry::http::Response};
 use dioxus::prelude::*;
 
-const STYLE: &str = asset!("./examples/assets/custom_assets.css");
+const STYLE: Asset = asset!("/examples/assets/custom_assets.css");
 
 fn main() {
     dioxus::LaunchBuilder::desktop().launch(app);

examples/file_upload.rs

@@ -8,7 +8,7 @@ use std::sync::Arc;
 use dioxus::prelude::*;
 use dioxus::{html::HasFileData, prelude::dioxus_elements::FileEngine};
 
-const STYLE: &str = asset!("./examples/assets/file_upload.css");
+const STYLE: Asset = asset!("/examples/assets/file_upload.css");
 
 fn main() {
     dioxus::launch(app);

examples/flat_router.rs

@@ -9,7 +9,7 @@
 
 use dioxus::prelude::*;
 
-const STYLE: &str = asset!("./examples/assets/flat_router.css");
+const STYLE: Asset = asset!("/examples/assets/flat_router.css");
 
 fn main() {
     dioxus::launch(|| {

examples/fullstack-auth/Cargo.toml

@@ -4,6 +4,7 @@ version = "0.1.0"
 edition = "2021"
 publish = false
 
+
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]

examples/fullstack-hello-world/Cargo.toml

@@ -17,5 +17,5 @@ reqwest = { workspace = true }
 
 [features]
 default = []
-server = ["dioxus/axum"]
+server = ["dioxus/server"]
 web = ["dioxus/web"]

examples/fullstack-hello-world/assets/hello.css

@@ -0,0 +1,3 @@
+body {
+    background-color: rgb(108, 104, 104);
+}

examples/fullstack-hello-world/src/main.rs

@@ -1,7 +1,7 @@
 //! Run with:
 //!
 //! ```sh
-//! dx serve --platform fullstack
+//! dx serve --platform web
 //! ```
 
 #![allow(non_snake_case, unused)]
@@ -14,6 +14,7 @@ fn app() -> Element {
     let server_future = use_server_future(get_server_data)?;
 
     rsx! {
+        document::Link { href: asset!("/assets/hello.css"), rel: "stylesheet" }
         h1 { "High-Five counter: {count}" }
         button { onclick: move |_| count += 1, "Up high!" }
         button { onclick: move |_| count -= 1, "Down low!" }

examples/fullstack-router/src/main.rs

@@ -1,7 +1,7 @@
 //! Run with:
 //!
 //! ```sh
-//! dx serve --platform fullstack
+//! dx serve --platform web
 //! ```
 
 use dioxus::prelude::*;

examples/global.rs

@@ -7,7 +7,7 @@
 
 use dioxus::prelude::*;
 
-const STYLE: &str = asset!("./examples/assets/counter.css");
+const STYLE: Asset = asset!("/examples/assets/counter.css");
 
 static COUNT: GlobalSignal<i32> = Signal::global(|| 0);
 static DOUBLED_COUNT: GlobalMemo<i32> = Memo::global(|| COUNT() * 2);

examples/link.rs

@@ -8,7 +8,7 @@
 
 use dioxus::prelude::*;
 
-const STYLE: &str = asset!("./examples/assets/links.css");
+const STYLE: Asset = asset!("/examples/assets/links.css");
 
 fn main() {
     dioxus::launch(app);

examples/meta.rs

@@ -3,7 +3,6 @@
 use dioxus::prelude::*;
 
 fn main() {
-    tracing_subscriber::fmt::init();
     dioxus::launch(app);
 }
 
@@ -12,25 +11,10 @@ fn app() -> Element {
         // You can use the Meta component to render a meta tag into the head of the page
         // Meta tags are useful to provide information about the page to search engines and social media sites
         // This example sets up meta tags for the open graph protocol for social media previews
-        document::Meta {
-            property: "og:title",
-            content: "My Site",
-        }
-        document::Meta {
-            property: "og:type",
-            content: "website",
-        }
-        document::Meta {
-            property: "og:url",
-            content: "https://www.example.com",
-        }
-        document::Meta {
-            property: "og:image",
-            content: "https://example.com/image.jpg",
-        }
-        document::Meta {
-            name: "description",
-            content: "My Site is a site",
-        }
+        document::Meta { property: "og:title", content: "My Site" }
+        document::Meta { property: "og:type", content: "website" }
+        document::Meta { property: "og:url", content: "https://www.example.com" }
+        document::Meta { property: "og:image", content: "https://example.com/image.jpg" }
+        document::Meta { name: "description", content: "My Site is a site" }
     }
 }

examples/overlay.rs

@@ -24,7 +24,7 @@ fn app() -> Element {
     rsx! {
         document::Link {
             rel: "stylesheet",
-            href: asset!("./examples/assets/overlay.css"),
+            href: asset!("/examples/assets/overlay.css"),
         }
         if show_overlay() {
             div {

examples/read_size.rs

@@ -27,8 +27,11 @@ fn app() -> Element {
         }
     };
 
-    rsx!(
-        document::Link { rel: "stylesheet", href: asset!("./examples/assets/read_size.css") }
+    rsx! {
+        document::Link {
+            rel: "stylesheet",
+            href: asset!("./examples/assets/read_size.css"),
+        }
         div {
             width: "50%",
             height: "50%",
@@ -38,5 +41,5 @@ fn app() -> Element {
         }
 
         button { onclick: read_dims, "Read dimensions" }
-    )
+    }
 }

examples/reducer.rs

@@ -7,7 +7,7 @@
 
 use dioxus::prelude::*;
 
-const STYLE: &str = asset!("./examples/assets/radio.css");
+const STYLE: Asset = asset!("/examples/assets/radio.css");
 
 fn main() {
     dioxus::launch(app);

examples/resize.rs

@@ -15,7 +15,10 @@ fn app() -> Element {
     let mut dimensions = use_signal(Size2D::zero);
 
     rsx!(
-        document::Link { rel: "stylesheet", href: asset!("./examples/assets/read_size.css") }
+        document::Link {
+            rel: "stylesheet",
+            href: asset!("./examples/assets/read_size.css"),
+        }
         div {
             width: "50%",
             height: "50%",

examples/router.rs

@@ -8,7 +8,7 @@
 
 use dioxus::prelude::*;
 
-const STYLE: &str = asset!("./examples/assets/router.css");
+const STYLE: Asset = asset!("/examples/assets/router.css");
 
 fn main() {
     dioxus::launch(|| {

examples/tailwind/src/main.rs

@@ -2,22 +2,19 @@
 
 use dioxus::prelude::*;
 
-const _STYLE: &str = asset!("public/tailwind.css");
-
 fn main() {
     dioxus::launch(app);
 }
 
 pub fn app() -> Element {
     let grey_background = true;
-    rsx!(
+    rsx! (
+        document::Link { rel: "stylesheet", href: asset!("/public/tailwind.css") }
         div {
             header {
                 class: "text-gray-400 body-font",
                 // you can use optional attributes to optionally apply a tailwind class
-                class: if grey_background {
-                    "bg-gray-900"
-                },
+                class: if grey_background { "bg-gray-900" },
                 div { class: "container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center",
                     a { class: "flex title-font font-medium items-center text-white mb-4 md:mb-0",
                         StacksIcon {}
@@ -63,7 +60,7 @@ pub fn app() -> Element {
                             class: "object-cover object-center rounded",
                             src: "https://i.imgur.com/oK6BLtw.png",
                             referrerpolicy: "no-referrer",
-                            alt: "hero"
+                            alt: "hero",
                         }
                     }
                 }

examples/title.rs

@@ -3,7 +3,6 @@
 use dioxus::prelude::*;
 
 fn main() {
-    tracing_subscriber::fmt::init();
     dioxus::launch(app);
 }
 

examples/todomvc.rs

@@ -3,7 +3,7 @@
 use dioxus::prelude::*;
 use std::collections::HashMap;
 
-const STYLE: &str = asset!("./examples/assets/todomvc.css");
+const STYLE: Asset = asset!("/examples/assets/todomvc.css");
 
 fn main() {
     dioxus::launch(app);