diff --git a/docs/guide/src/en/getting_started/mobile.md b/docs/guide/src/en/getting_started/mobile.md index ad49817ec..56fb891e1 100644 --- a/docs/guide/src/en/getting_started/mobile.md +++ b/docs/guide/src/en/getting_started/mobile.md @@ -5,12 +5,13 @@ Build a mobile app with Dioxus! Example: [Todo App](https://github.com/DioxusLabs/example-projects/blob/master/ios_demo) ## Support -Mobile is currently the least-supported renderer target for Dioxus. Mobile apps are rendered with the platform's WebView, meaning that animations, transparency, and native widgets are not currently achievable. +Mobile is currently the least-supported renderer target for Dioxus. Mobile apps are rendered with either the platform's WebView or experimentally through WGPU. WebView doesn't support animations, transparency, and native widgets. -In addition, iOS is the only supported Mobile Platform. It is possible to get Dioxus running on Android and rendered with WebView, but the Rust windowing library that Dioxus uses – tao – does not currently support Android. Mobile support is currently best suited for CRUD-style apps, ideally for internal teams who need to develop quickly but don't care much about animations or native widgets. +This guide is primarily targetted for iOS apps, however, you can follow it while using the `android` guide in `cargo-mobile`. + ## Getting Set up Getting set up with mobile can be quite challenging. The tooling here isn't great (yet) and might take some hacking around to get things working. macOS M1 is broadly unexplored and might not work for you. diff --git a/examples/README.md b/examples/README.md index 732b19ba8..2533722ed 100644 --- a/examples/README.md +++ b/examples/README.md @@ -134,31 +134,33 @@ cargo run --example hello_world ## Terminal UI -[tui_border](./tui_border.rs) +[tui_all_events](../packages/tui/examples/tui_all_events.rs) - All of the terminal events -[tui_buttons](./tui_buttons.rs) +[tui_border](../packages/tui/examples/tui_border.rs) - Different styles of borders and corners -[tui_color_test](./tui_color_test.rs) +[tui_buttons](../packages/tui/examples/tui_buttons.rs) - A grid of buttons that work demonstrate the focus system -[tui_components](./tui_components.rs) +[tui_color_test](../packages/tui/examples/tui_color_test.rs) - Grid of colors to demonstrate compatablility with different terminal color rendering modes -[tui_frame](./tui_frame.rs) +[tui_colorpicker](../packages/tui/examples/tui_colorpicker.rs) - A colorpicker -[tui_hover](./tui_hover.rs) +[tui_components](../packages/tui/examples/tui_components.rs) - Simple component example -[tui_keys](./tui_keys.rs) +[tui_flex](../packages/tui/examples/tui_flex.rs) - Flexbox support -[tui_list](./tui_list.rs) +[tui_hover](../packages/tui/examples/tui_hover.rs) - Detect hover and mouse events -[tui_margin](./tui_margin.rs) +[tui_list](../packages/tui/examples/tui_list.rs) - Renders a list of items -[tui_quadrants](./tui_quadrants.rs) +[tui_margin](../packages/tui/examples/tui_margin.rs) - Margins around flexboxes -[tui_readme](./tui_readme.rs) +[tui_quadrants](../packages/tui/examples/tui_quadrants.rs) - Four quadrants -[tui_task](./tui_task.rs) +[tui_readme](../packages/tui/examples/tui_readme.rs) - The readme example -[tui_text](./tui_text.rs) +[tui_task](../packages/tui/examples/tui_task.rs) - Background tasks + +[tui_text](../packages/tui/examples/tui_text.rs) - Simple text example # TODO Missing Features diff --git a/examples/simple_list.rs b/examples/simple_list.rs index f0d2827d0..aa25622a9 100644 --- a/examples/simple_list.rs +++ b/examples/simple_list.rs @@ -19,6 +19,16 @@ fn app(cx: Scope) -> Element { // Use optionals Some(rsx! { "Some" }), + + div { + for name in 0..10 { + rsx! { "{name}" } + } + + if true { + rsx!{ "hello world!" } + } + } } )) } diff --git a/packages/desktop/Cargo.toml b/packages/desktop/Cargo.toml index fe13a6f8c..134fc7ade 100644 --- a/packages/desktop/Cargo.toml +++ b/packages/desktop/Cargo.toml @@ -28,7 +28,7 @@ tokio = { version = "1.16.1", features = [ "rt", "time", ], optional = true, default-features = false } -webbrowser = "0.7.1" +webbrowser = "0.8.0" infer = "0.9.0" dunce = "1.0.2" diff --git a/packages/desktop/src/desktop_context.rs b/packages/desktop/src/desktop_context.rs index 43f2b5f15..a09f4d91f 100644 --- a/packages/desktop/src/desktop_context.rs +++ b/packages/desktop/src/desktop_context.rs @@ -182,7 +182,13 @@ pub(super) fn handler( ) { // currently dioxus-desktop supports a single window only, // so we can grab the only webview from the map; - let webview = desktop.webviews.values().next().unwrap(); + // on wayland it is possible that a user event is emitted + // before the webview is initialized. ignore the event. + let webview = if let Some(webview) = desktop.webviews.values().next() { + webview + } else { + return; + }; let window = webview.window(); println!("user_event: {:?}", user_event); diff --git a/packages/desktop/src/protocol.rs b/packages/desktop/src/protocol.rs index 06dfbfc54..cc084b403 100644 --- a/packages/desktop/src/protocol.rs +++ b/packages/desktop/src/protocol.rs @@ -18,8 +18,6 @@ pub(super) fn desktop_handler( custom_head: Option, custom_index: Option, ) -> Result>> { - println!("loading request: {:?}", request.uri()); - // Any content that uses the `dioxus://` scheme will be shuttled through this handler as a "special case". // For now, we only serve two pieces of content which get included as bytes into the final binary. let path = request.uri().to_string().replace("dioxus://", ""); diff --git a/packages/rsx/src/node.rs b/packages/rsx/src/node.rs index 7b4bd232b..735f7819d 100644 --- a/packages/rsx/src/node.rs +++ b/packages/rsx/src/node.rs @@ -88,7 +88,6 @@ impl Parse for BodyNode { // crate::Input:: {} if body_stream.peek(token::Brace) { Component::validate_component_path(&path)?; - return Ok(BodyNode::Component(stream.parse()?)); } } diff --git a/packages/tui/examples/tui_frame.rs b/packages/tui/examples/tui_flex.rs similarity index 100% rename from packages/tui/examples/tui_frame.rs rename to packages/tui/examples/tui_flex.rs diff --git a/packages/tui/examples/tui_keys.rs b/packages/tui/examples/tui_keys.rs deleted file mode 100644 index 3c3d04cf2..000000000 --- a/packages/tui/examples/tui_keys.rs +++ /dev/null @@ -1,66 +0,0 @@ -use dioxus::events::WheelEvent; -use dioxus::prelude::*; -use dioxus_html::geometry::ScreenPoint; -use dioxus_html::input_data::keyboard_types::Code; -use dioxus_html::input_data::MouseButtonSet; -use dioxus_html::on::{KeyboardEvent, MouseEvent}; - -fn main() { - dioxus_tui::launch(app); -} - -fn app(cx: Scope) -> Element { - let key = use_state(&cx, || "".to_string()); - let mouse = use_state(&cx, ScreenPoint::zero); - let count = use_state(&cx, || 0); - let buttons = use_state(&cx, MouseButtonSet::empty); - let mouse_clicked = use_state(&cx, || false); - - let key_down_handler = move |evt: KeyboardEvent| { - match evt.data.code() { - Code::ArrowLeft => count.set(count + 1), - Code::ArrowRight => count.set(count - 1), - Code::ArrowUp => count.set(count + 10), - Code::ArrowDown => count.set(count - 10), - _ => {} - } - key.set(format!( - "{:?} repeating: {:?}", - evt.key(), - evt.is_auto_repeating() - )); - }; - - cx.render(rsx! { - div { - width: "100%", - height: "10px", - background_color: "red", - justify_content: "center", - align_items: "center", - flex_direction: "column", - onkeydown: key_down_handler, - onwheel: move |evt: WheelEvent| { - count.set(count + evt.data.delta().strip_units().y as i64); - }, - ondrag: move |evt: MouseEvent| { - mouse.set(evt.data.screen_coordinates()); - }, - onmousedown: move |evt: MouseEvent| { - mouse.set(evt.data.screen_coordinates()); - buttons.set(evt.data.held_buttons()); - mouse_clicked.set(true); - }, - onmouseup: move |evt: MouseEvent| { - buttons.set(evt.data.held_buttons()); - mouse_clicked.set(false); - }, - - "count: {count:?}", - "key: {key}", - "mouse buttons: {buttons:?}", - "mouse pos: {mouse:?}", - "mouse button pressed: {mouse_clicked}" - } - }) -}