Mirrors/dioxus
2
0
Fork 0
mirror of https://github.com/DioxusLabs/dioxus synced 2024-11-10 06:34:20 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix more examples

Browse source
This commit is contained in:
Evan Almloff 2024-01-16 12:28:21 -06:00
parent db35a9b48c
commit 407a82588a
59 changed files with 166 additions and 195 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
Cargo.lock generated
View file

@ -2806,8 +2806,6 @@ name = "dioxus-playwright-web-test"
version = "0.0.1"
dependencies = [
"dioxus",
"dioxus-html",
"dioxus-web",
"serde_json",
]
@ -2919,8 +2917,6 @@ name = "dioxus-tailwind"
version = "0.0.0"
dependencies = [
"dioxus",
"dioxus-desktop",
"dioxus-web",
"manganis",
]

11
examples/PWA-example/src/main.rs
View file

@ -9,12 +9,13 @@ fn main() {
}
fn app() -> Element {
rsx! (
div {
style: "text-align: center;",
render! (
div { style: "text-align: center;",
h1 { "🌗 Dioxus 🚀" }
h3 { "Frontend that scales." }
p { "Dioxus is a portable, performant, and ergonomic framework for building cross-platform user interfaces in Rust." }
p {
"Dioxus is a portable, performant, and ergonomic framework for building cross-platform user interfaces in Rust."
}
))
}
)
}

2
examples/all_css.rs
View file

@ -5,7 +5,7 @@ fn main() {
}
fn app() -> Element {
rsx! {
render! {
div {
align_content: "a",
align_items: "a",

2
examples/all_events.rs
View file

@ -52,7 +52,7 @@ fn app() -> Element {
events.push_back(event);
};
rsx! {
render! {
div { style: "{CONTAINER_STYLE}",
div {
style: "{RECT_STYLE}",

2
examples/calculator.rs
View file

@ -57,7 +57,7 @@ fn app() -> Element {
_ => {}
};
rsx! {
render! {
style { {include_str!("./assets/calculator.css")} }
div { id: "wrapper",
div { class: "app",

2
examples/clock.rs
View file

@ -16,7 +16,7 @@ fn app() -> Element {
}
});
rsx! {
render! {
div { "High-Five counter: {count}" }
}
}

4
examples/compose.rs
View file

@ -27,7 +27,7 @@ fn app() -> Element {
);
};
rsx! {
render! {
h1 { "This is your email" }
button { onclick: open_compose_window, "Click to compose a new email" }
ul {
@ -44,7 +44,7 @@ fn app() -> Element {
fn compose(send: Rc<dyn Fn(String)>) -> Element {
let mut user_input = use_signal(String::new);
rsx! {
render! {
div {
h1 { "Compose a new email" }

2
examples/control_focus.rs
View file

@ -25,7 +25,7 @@ fn app() -> Element {
}
});
rsx! {
render! {
div {
h1 { "Input Roulette" }
for i in 0..100 {

6
examples/crm.rs
View file

@ -60,7 +60,7 @@ pub struct Client {
fn ClientList() -> Element {
let mut clients = use_context::<Clients>();
rsx! {
render! {
h2 { "List of Clients" }
Link { to: Route::ClientAdd {}, class: "pure-button pure-button-primary", "Add Client" }
Link { to: Route::Settings {}, class: "pure-button", "Settings" }
@ -88,7 +88,7 @@ fn ClientAdd() -> Element {
dioxus_router::router().push(Route::ClientList {});
};
rsx! {
render! {
h2 { "Add new Client" }
form { class: "pure-form pure-form-aligned", onsubmit: submit_client,
@ -138,7 +138,7 @@ fn ClientAdd() -> Element {
#[component]
fn Settings() -> Element {
rsx! {
render! {
h2 { "Settings" }
button {

2
examples/custom_assets.rs
View file

@ -5,7 +5,7 @@ fn main() {
}
fn app() -> Element {
rsx! {
render! {
div {
p {
"This should show an image:"

2
examples/custom_html.rs
View file

@ -30,7 +30,7 @@ fn main() {
}
fn app() -> Element {
rsx! {
render! {
div { h1 { "hello world!" } }
}
}

2
examples/disabled.rs
View file

@ -7,7 +7,7 @@ fn main() {
fn app() -> Element {
let mut disabled = use_signal(|| false);
rsx! {
render! {
div {
button { onclick: move |_| disabled.toggle(),
"click to "

12
examples/dog_app.rs
View file

@ -15,10 +15,10 @@ fn app() -> Element {
.await;
let Ok(breeds) = list else {
return rsx! { "error fetching breeds" };
return render! { "error fetching breeds" };
};
rsx! {
render! {
for cur_breed in breeds.message.keys().take(10).cloned() {
li { key: "{cur_breed}",
button { onclick: move |_| breed.set(cur_breed.clone()),
@ -30,10 +30,10 @@ fn app() -> Element {
});
let Some(breed_list) = breed_list.value().cloned() else {
return rsx! { "loading breeds..." };
return render! { "loading breeds..." };
};
rsx! {
render! {
h1 { "Select a dog breed!" }
div { height: "500px", display: "flex",
ul { flex: "50%", {breed_list} }
@ -53,13 +53,13 @@ fn BreedPic(breed: Signal<String>) -> Element {
});
match fut.value().read().as_ref() {
Some(Ok(resp)) => rsx! {
Some(Ok(resp)) => render! {
div {
button { onclick: move |_| fut.restart(), "Click to fetch another doggo" }
img { max_width: "500px", max_height: "500px", src: "{resp.message}" }
}
},
_ => rsx! { "loading image..." },
_ => render! { "loading image..." },
}
}

4
examples/error_handle.rs
View file

@ -5,9 +5,9 @@ fn main() {
}
fn app() -> Element {
rsx! {
render! {
ErrorBoundary {
handle_error: |error: CapturedError| rsx! {"Found error {error}"},
handle_error: |error: CapturedError| render! {"Found error {error}"},
DemoC { x: 1 }
}
}

4
examples/eval.rs
View file

@ -23,7 +23,7 @@ fn app() -> Element {
});
match future.value().read().as_ref() {
Some(v) => rsx!( p { "{v}" } ),
_ => rsx!( p { "waiting.." } ),
Some(v) => render!( p { "{v}" } ),
_ => render!( p { "waiting.." } ),
}
}

4
examples/file_explorer.rs
View file

@ -22,7 +22,7 @@ const _STYLE: &str = manganis::mg!(file("./examples/assets/fileexplorer.css"));
fn app() -> Element {
let mut files = use_signal(Files::new);
rsx! {
render! {
div {
link { href:"https://fonts.googleapis.com/icon?family=Material+Icons", rel:"stylesheet" }
header {
@ -34,7 +34,7 @@ fn app() -> Element {
main {
{files.read().path_names.iter().enumerate().map(|(dir_id, path)| {
let path_end = path.split('/').last().unwrap_or(path.as_str());
rsx! (
render! (
div {
class: "folder",
key: "{path}",

2
examples/file_upload.rs
View file

@ -30,7 +30,7 @@ fn App() -> Element {
}
};
rsx! {
render! {
label {
input {
r#type: "checkbox",

2
examples/filedragdrop.rs
View file

@ -11,7 +11,7 @@ fn main() {
}
fn app() -> Element {
rsx!(
render!(
div { h1 { "drag a file here and check your console" } }
)
}

2
examples/form.rs
View file

@ -10,7 +10,7 @@ fn main() {
}
fn app() -> Element {
rsx! {
render! {
div {
h1 { "Form" }
form {

2
examples/hydration.rs
View file

@ -27,7 +27,7 @@ fn main() {
fn app() -> Element {
let mut val = use_signal(|| 0);
rsx! {
render! {
div {
h1 { "hello world. Count: {val}" }
button { onclick: move |_| val += 1, "click to increment" }

4
examples/inputs.rs
View file

@ -35,7 +35,7 @@ const FIELDS: &[(&str, &str)] = &[
];
fn app() -> Element {
rsx! {
render! {
div { margin_left: "30px",
{select_example()},
div {
@ -137,7 +137,7 @@ fn app() -> Element {
}
fn select_example() -> Element {
rsx! {
render! {
div {
select {
id: "selection",

2
examples/link.rs
View file

@ -7,7 +7,7 @@ fn main() {
#[component]
fn App() -> Element {
rsx! (
render! (
div {
p { a { href: "http://dioxuslabs.com/", "Default link - links outside of your app" } }
p {

2
examples/login_form.rs
View file

@ -29,7 +29,7 @@ fn app() -> Element {
}
};
rsx! {
render! {
h1 { "Login" }
form { onsubmit,
input { r#type: "text", id: "username", name: "username" }

4
examples/multiwindow.rs
View file

@ -5,7 +5,7 @@ fn main() {
}
fn app() -> Element {
rsx! {
render! {
div {
button {
onclick: move |_| {
@ -19,7 +19,7 @@ fn app() -> Element {
}
fn popup() -> Element {
rsx! {
render! {
div { "This is a popup!" }
}
}

2
examples/nested_listeners.rs
View file

@ -11,7 +11,7 @@ fn main() {
}
fn app() -> Element {
rsx! {
render! {
div {
onclick: move |_| println!("clicked! top"),
"- div"

40
examples/openid_connect_demo/src/views/header.rs
View file

@ -24,7 +24,7 @@ pub fn LogOut(cx: Scope<ClientProps>) -> Element {
Some(log_out_url_result) => match log_out_url_result {
Some(uri) => match uri {
Ok(uri) => {
rsx! {
render! {
Link {
onclick: move |_| {
{
@ -40,13 +40,11 @@ pub fn LogOut(cx: Scope<ClientProps>) -> Element {
}
}
Err(error) => {
rsx! {
div { "Failed to load disconnection url: {error:?}" }
}
render! { div { "Failed to load disconnection url: {error:?}" } }
}
},
None => {
rsx! { div { "Loading... Please wait" } }
render! { div { "Loading... Please wait" } }
}
},
None => {
@ -61,15 +59,15 @@ pub fn LogOut(cx: Scope<ClientProps>) -> Element {
})
};
logout_url_task();
rsx! { div{"Loading log out url... Please wait"}}
render! { div { "Loading log out url... Please wait" } }
}
},
None => {
rsx! {{}}
render! {{}}
}
},
None => {
rsx! {{}}
render! {{}}
}
})
}
@ -115,14 +113,14 @@ pub fn RefreshToken(cx: Scope<ClientProps>) -> Element {
})
};
exchange_refresh_token_spawn();
rsx! { div { "Refreshing session, please wait" } }
render! { div { "Refreshing session, please wait" } }
}
None => {
rsx! { div { "Id token expired and no refresh token found" } }
render! { div { "Id token expired and no refresh token found" } }
}
},
None => {
rsx! {{}}
render! {{}}
}
})
}
@ -137,21 +135,21 @@ pub fn LoadClient() -> Element {
*fermi_client.write() = ClientState {
oidc_client: Some(ClientProps::new(client_id.clone(), client.clone())),
};
rsx! {
render! {
div { "Client successfully loaded" }
Outlet::<Route> {}
}
}
Err(error) => {
log::info! {"Failed to load client: {:?}", error};
rsx! {
render! {
div { "Failed to load client: {error:?}" }
Outlet::<Route> {}
}
}
},
None => {
rsx! {
render! {
div {
div { "Loading client, please wait" }
Outlet::<Route> {}
@ -182,7 +180,7 @@ pub fn AuthHeader() -> Element {
auth_request.nonce.clone(),
) {
Ok(email) => {
rsx! {
render! {
div {
div { {email} }
LogOut { client_id: client_props.client_id, client: client_props.client }
@ -195,7 +193,7 @@ pub fn AuthHeader() -> Element {
// Id token failed to be decoded because it expired, we refresh it
openidconnect::ClaimsVerificationError::Expired(_message) => {
log::info!("Token expired");
rsx! {
render! {
div {
RefreshToken { client_id: client_props.client_id, client: client_props.client }
Outlet::<Route> {}
@ -205,7 +203,7 @@ pub fn AuthHeader() -> Element {
// Other issue with token decoding
_ => {
log::info!("Other issue with token");
rsx! {
render! {
div {
div { "{error}" }
Outlet::<Route> {}
@ -217,7 +215,7 @@ pub fn AuthHeader() -> Element {
}
// User is not logged in
None => {
rsx! {
render! {
div {
Link { to: auth_request.authorize_url.clone(), "Log in" }
Outlet::<Route> {}
@ -234,17 +232,17 @@ pub fn AuthHeader() -> Element {
auth_request: Some(auth_request),
}),
);
rsx! { div { "Loading nonce" } }
render! { div { "Loading nonce" } }
}
}
}
// Client is not initialized yet, we need it for everything
(None, _, _) => {
rsx! { LoadClient {} }
render! { LoadClient {} }
}
// We need everything loaded before doing anything
(_client, _auth_request, _auth_token) => {
rsx! {{}}
render! {{}}
}
})
}

10
examples/openid_connect_demo/src/views/login.rs
View file

@ -21,14 +21,14 @@ pub fn Login(query_string: String) -> Element {
(Some(client_props), Some(auth_token_read)) => {
match (auth_token_read.id_token, auth_token_read.refresh_token) {
(Some(_id_token), Some(_refresh_token)) => {
rsx! {
render! {
div { "Sign in successful" }
Link { to: home_url, "Go back home" }
}
}
// If the refresh token is set but not the id_token, there was an error, we just go back home and reset their value
(None, Some(_)) | (Some(_), None) => {
rsx! {
render! {
div { "Error while attempting to log in" }
Link {
to: home_url,
@ -70,17 +70,17 @@ pub fn Login(query_string: String) -> Element {
})
};
token_response_spawn();
rsx!{ div {} }
render!{ div {} }
}
None => {
rsx! { div { "No code provided" } }
render! { div { "No code provided" } }
}
}
}
}
}
(_, _) => {
rsx! {{}}
render! {{}}
}
})
}

4
examples/optional_props.rs
View file

@ -11,7 +11,7 @@ fn main() {
}
fn app() -> Element {
rsx! {
render! {
Button {
a: "asd".to_string(),
c: "asd".to_string(),
@ -52,7 +52,7 @@ struct ButtonProps {
}
fn Button(props: ButtonProps) -> Element {
rsx! {
render! {
button {
"{props.a} | "
"{props.b:?} | "

2
examples/overlay.rs
View file

@ -6,7 +6,7 @@ fn main() {
}
fn app() -> Element {
rsx! {
render! {
div {
width: "100%",
height: "100%",

4
examples/pattern_model.rs
View file

@ -40,7 +40,7 @@ const STYLE: &str = include_str!("./assets/calculator.css");
fn app() -> Element {
let mut state = use_signal(Calculator::new);
rsx! {
render! {
style { {STYLE} }
div { id: "wrapper",
div { class: "app",
@ -126,7 +126,7 @@ fn CalculatorKey(
onclick: EventHandler<MouseEvent>,
children: Element,
) -> Element {
rsx! {
render! {
button {
class: "calculator-key {name}",
onclick: move |e| onclick.call(e),

2
examples/pattern_reducer.rs
View file

@ -14,7 +14,7 @@ fn main() {
fn app() -> Element {
let mut state = use_signal(|| PlayerState { is_playing: false });
rsx!(
render!(
div {
h1 {"Select an option"}
h3 { "The radio is... ", {state.read().is_playing()}, "!" }

2
examples/read_size.rs
View file

@ -38,7 +38,7 @@ fn app() -> Element {
}
};
rsx!(
render!(
div {
width: "50%",
height: "50%",

2
examples/readme.rs
View file

@ -11,7 +11,7 @@ fn main() {
fn app() -> Element {
let mut count = use_signal(|| 0);
rsx! {
render! {
h1 { "High-Five counter: {count}" }
button { onclick: move |_| count += 1, "Up high!" }
button { onclick: move |_| count -= 1, "Down low!" }

38
examples/rsx_usage.rs
View file

@ -1,7 +1,7 @@
//! A tour of the rsx! macro
//! A tour of the render! macro
//! ------------------------
//!
//! This example serves as an informal quick reference of all the things that the rsx! macro can do.
//! This example serves as an informal quick reference of all the things that the render! macro can do.
//!
//! A full in-depth reference guide is available at: https://www.notion.so/rsx-macro-basics-ef6e367dec124f4784e736d91b0d0b19
//!
@ -55,7 +55,7 @@ fn main() {
// let formatting_tuple = ("a", "b");
// let lazy_fmt = format_args!("lazily formatted text");
// let asd = 123;
// rsx! {
// render! {
// div {
// // Elements
// div {}
@ -95,10 +95,10 @@ fn main() {
// }
// // Expressions can be used in element position too:
// {rsx!(p { "More templating!" })},
// {render!(p { "More templating!" })},
// // Iterators
// {(0..10).map(|i| rsx!(li { "{i}" }))},
// {(0..10).map(|i| render!(li { "{i}" }))},
// // Iterators within expressions
// {
@ -106,19 +106,19 @@ fn main() {
// // Iterators *should* have keys when you can provide them.
// // Keys make your app run faster. Make sure your keys are stable, unique, and predictable.
// // Using an "ID" associated with your data is a good idea.
// data.into_iter().map(|(k, v)| rsx!(li { key: "{k}", "{v}" }))
// data.into_iter().map(|(k, v)| render!(li { key: "{k}", "{v}" }))
// }
// // Matching
// match true {
// true => rsx!( h1 {"Top text"}),
// false => rsx!( h1 {"Bottom text"})
// true => render!( h1 {"Top text"}),
// false => render!( h1 {"Bottom text"})
// }
// // Conditional rendering
// // Dioxus conditional rendering is based around None/Some. We have no special syntax for conditionals.
// // You can convert a bool condition to rsx! with .then and .or
// {true.then(|| rsx!(div {}))},
// // You can convert a bool condition to render! with .then and .or
// {true.then(|| render!(div {}))},
// // Alternatively, you can use the "if" syntax - but both branches must be resolve to Element
// if false {
@ -130,7 +130,7 @@ fn main() {
// // Using optionals for diverging branches
// // Note that since this is wrapped in curlies, it's interpreted as an expression
// {if true {
// Some(rsx!(h1 {"Top text"}))
// Some(render!(h1 {"Top text"}))
// } else {
// None
// }}
@ -172,7 +172,7 @@ fn main() {
// // Can pass in props directly as an expression
// {
// let props = TallerProps {a: "hello", children: None };
// rsx!(Taller { ..props })
// render!(Taller { ..props })
// }
// // Spreading can also be overridden manually
@ -225,7 +225,7 @@ fn main() {
// }
// fn helper<'a>(cx: &'a ScopeState, text: &'a str) -> Element {
// rsx! {
// render! {
// p { "{text}" }
// }
// }
@ -235,7 +235,7 @@ fn main() {
// // something like Clippy.
// #[component(no_case_check)]
// fn lowercase_helper() -> Element {
// rsx! {
// render! {
// "asd"
// }
// }
@ -254,18 +254,18 @@ fn main() {
// // something like Clippy.
// #[component(no_case_check)]
// pub fn lowercase_component() -> Element {
// rsx! { "look ma, no uppercase" }
// render! { "look ma, no uppercase" }
// }
// }
// /// Documention for this component is visible within the rsx macro
// #[component]
// pub fn Taller(
// /// Fields are documented and accessible in rsx!
// /// Fields are documented and accessible in render!
// a: &'static str,
// children: Element,
// ) -> Element {
// rsx! { {&children} }
// render! { {&children} }
// }
// #[derive(Props, PartialEq, Eq)]
@ -285,7 +285,7 @@ fn main() {
// #[component]
// fn WithInline(cx: Scope<'a>, text: &'a str) -> Element {
// rsx! {
// render! {
// p { "{text}" }
// }
// }
@ -295,7 +295,7 @@ fn main() {
// where
// T: Display,
// {
// rsx! {
// render! {
// p { "{text}" }
// }
// }

2
examples/scroll_to_top.rs
View file

@ -7,7 +7,7 @@ fn main() {
fn app() -> Element {
let mut header_element = use_signal(|| None);
rsx! {
render! {
div {
h1 {
onmounted: move |cx| header_element.set(Some(cx.inner().clone())),

2
examples/shortcut.rs
View file

@ -10,5 +10,5 @@ fn app() -> Element {
_ = use_global_shortcut("ctrl+s", move || toggled.toggle());
rsx!("toggle: {toggled}")
render!("toggle: {toggled}")
}

2
examples/signals.rs
View file

@ -26,7 +26,7 @@ fn app() -> Element {
}
});
rsx! {
render! {
h1 { "High-Five counter: {count}" }
button { onclick: move |_| count += 1, "Up high!" }
button { onclick: move |_| count -= 1, "Down low!" }

8
examples/simple_list.rs
View file

@ -5,20 +5,20 @@ fn main() {
}
fn app() -> Element {
rsx!(
render!(
div {
// Use Map directly to lazily pull elements
{(0..10).map(|f| rsx! { "{f}" })},
{(0..10).map(|f| render! { "{f}" })},
// Collect into an intermediate collection if necessary, and call into_iter
{["a", "b", "c", "d", "e", "f"]
.into_iter()
.map(|f| rsx! { "{f}" })
.map(|f| render! { "{f}" })
.collect::<Vec<_>>()
.into_iter()},
// Use optionals
{Some(rsx! { "Some" })},
{Some(render! { "Some" })},
// use a for loop where the body itself is RSX
for name in 0..10 {

6
examples/ssr.rs
View file

@ -9,10 +9,10 @@ fn main() {
let mut vdom = VirtualDom::prebuilt(app);
println!("{}", dioxus_ssr::render(&vdom));
// Or we can render rsx! calls themselves
// Or we can render render! calls themselves
println!(
"{}",
dioxus_ssr::render_element(rsx! {
dioxus_ssr::render_element(render! {
div {
h1 { "Hello, world!" }
}
@ -30,7 +30,7 @@ fn main() {
}
fn app() -> Element {
rsx!(
render!(
div {
h1 { "Title" }
p { "Body" }

2
examples/streams.rs
View file

@ -18,7 +18,7 @@ fn app() -> Element {
}
});
rsx! {
render! {
h1 { "High-Five counter: {count}" }
}
}

10
examples/suspense.rs
View file

@ -2,7 +2,7 @@
//! Suspense in Dioxus
//!
//! Currently, `rsx!` does not accept futures as values. To achieve the functionality
//! Currently, `render!` does not accept futures as values. To achieve the functionality
//! of suspense, we need to make a new component that performs its own suspense
//! handling.
//!
@ -29,7 +29,7 @@ fn main() {
}
fn app() -> Element {
rsx! {
render! {
div {
h1 { "Dogs are very important" }
p {
@ -64,11 +64,11 @@ fn Doggo() -> Element {
});
match fut.value().read().as_ref() {
Some(Ok(resp)) => rsx! {
Some(Ok(resp)) => render! {
button { onclick: move |_| fut.restart(), "Click to fetch another doggo" }
div { img { max_width: "500px", max_height: "500px", src: "{resp.message}" } }
},
Some(Err(_)) => rsx! { div { "loading dogs failed" } },
None => rsx! { div { "loading dogs..." } },
Some(Err(_)) => render! { div { "loading dogs failed" } },
None => render! { div { "loading dogs..." } },
}
}

4
examples/svg.rs
View file

@ -8,7 +8,7 @@ fn main() {
}
fn app() -> Element {
rsx! {
render! {
div { user_select: "none", webkit_user_select: "none", margin_left: "10%", margin_right: "10%",
h1 { "Click die to generate a new value" }
div { cursor: "pointer", height: "100%", width: "100%", Dice {} }
@ -33,7 +33,7 @@ fn Dice() -> Element {
let mut value = use_signal(|| 5);
let active_dots = use_selector(move || &DOTS_FOR_VALUE[(value() - 1) as usize]);
rsx! {
render! {
svg {
view_box: "-1000 -1000 2000 2000",
prevent_default: "onclick",

2
examples/svg_basic.rs
View file

@ -1,7 +1,7 @@
use dioxus::prelude::*;
fn app() -> Element {
rsx! {
render! {
svg {
width: "200",
height: "250",

5
examples/tailwind/Cargo.toml
View file

@ -12,11 +12,10 @@ rust-version = "1.60.0"
publish = false
[dependencies]
dioxus = { path = "../../packages/dioxus" }
manganis = { workspace = true }
[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
dioxus-desktop = { path = "../../packages/desktop" }
dioxus = { path = "../../packages/dioxus", features = ["desktop"] }
[target.'cfg(target_arch = "wasm32")'.dependencies]
dioxus-web = { path = "../../packages/web" }
dioxus = { path = "../../packages/dioxus", features = ["web"] }

36
examples/tailwind/src/main.rs
View file

@ -5,20 +5,19 @@ use dioxus::prelude::*;
const _STYLE: &str = manganis::mg!(file("./public/tailwind.css"));
fn main() {
#[cfg(not(target_arch = "wasm32"))]
launch_desktop(app);
#[cfg(target_arch = "wasm32")]
dioxus_web::launch(app);
launch(app);
}
pub fn app() -> Element {
let grey_background = true;
rsx!(
render!(
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 {}
@ -30,8 +29,7 @@ pub fn app() -> Element {
a { class: "mr-5 hover:text-white", "Third Link" }
a { class: "mr-5 hover:text-white", "Fourth Link" }
}
button {
class: "inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0",
button { class: "inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0",
"Button"
RightArrowIcon {}
}
@ -45,21 +43,17 @@ pub fn app() -> Element {
br { class: "hidden lg:inline-block" }
"Dioxus Sneak Peek"
}
p {
class: "mb-8 leading-relaxed",
p { class: "mb-8 leading-relaxed",
"Dioxus is a new UI framework that makes it easy and simple to write cross-platform apps using web
technologies! It is functional, fast, and portable. Dioxus can run on the web, on the desktop, and
on mobile and embedded platforms."
}
div { class: "flex justify-center",
button {
class: "inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg",
button { class: "inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg",
"Learn more"
}
button {
class: "ml-4 inline-flex text-gray-400 bg-gray-800 border-0 py-2 px-6 focus:outline-none hover:bg-gray-700 hover:text-white rounded text-lg",
button { class: "ml-4 inline-flex text-gray-400 bg-gray-800 border-0 py-2 px-6 focus:outline-none hover:bg-gray-700 hover:text-white rounded text-lg",
"Build an app"
}
}
@ -69,17 +63,17 @@ pub fn app() -> Element {
class: "object-cover object-center rounded",
src: "https://i.imgur.com/oK6BLtw.png",
referrerpolicy: "no-referrer",
alt: "hero",
alt: "hero"
}
}
}
}
}
))
)
}
pub fn StacksIcon() -> Element {
rsx!(
render!(
svg {
fill: "none",
stroke: "currentColor",
@ -90,11 +84,11 @@ pub fn StacksIcon() -> Element {
view_box: "0 0 24 24",
path { d: "M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" }
}
))
)
}
pub fn RightArrowIcon() -> Element {
rsx!(
render!(
svg {
fill: "none",
stroke: "currentColor",
@ -105,5 +99,5 @@ pub fn RightArrowIcon() -> Element {
view_box: "0 0 24 24",
path { d: "M5 12h14M12 5l7 7-7 7" }
}
))
)
}

2
examples/tasks.rs
View file

@ -19,7 +19,7 @@ fn app() -> Element {
}
});
rsx! {
render! {
div {
h1 { "Current count: {count}" }
button {

2
examples/textarea.rs
View file

@ -9,7 +9,7 @@ fn main() {
fn app() -> Element {
let mut model = use_signal(|| String::from("asd"));
rsx! {
render! {
textarea {
class: "border",
rows: "10",

10
examples/todomvc.rs
View file

@ -45,7 +45,7 @@ pub fn app() -> Element {
filtered_todos
});
rsx! {
render! {
section { class: "todoapp",
style { {include_str!("./assets/todomvc.css")} }
TodoHeader { todos }
@ -98,7 +98,7 @@ pub fn TodoHeader(mut todos: Signal<HashMap<u32, TodoItem>>) -> Element {
}
};
rsx! {
render! {
header { class: "header",
h1 { "todos" }
input {
@ -119,7 +119,7 @@ pub fn TodoEntry(mut todos: Signal<HashMap<u32, TodoItem>>, id: u32) -> Element
let checked = use_selector(move || todos.read().get(&id).unwrap().checked);
let contents = use_selector(move || todos.read().get(&id).unwrap().contents.clone());
rsx! {
render! {
li { class: if checked() { "completed" }, class: if is_editing() { "editing"},
div { class: "view",
input {
@ -168,7 +168,7 @@ pub fn ListFooter(
) -> Element {
let show_clear_completed = use_selector(move || todos.read().values().any(|todo| todo.checked));
rsx! {
render! {
footer { class: "footer",
span { class: "todo-count",
strong { "{active_todo_count} " }
@ -209,7 +209,7 @@ pub fn ListFooter(
}
pub fn PageFooter() -> Element {
rsx! {
render! {
footer { class: "info",
p { "Double-click to edit a todo" }
p {

2
examples/web_component.rs
View file

@ -5,7 +5,7 @@ fn main() {
}
fn app() -> Element {
rsx! {
render! {
web-component {
"my-prop": "5%",
}

2
examples/window_event.rs
View file

@ -18,7 +18,7 @@ fn app() -> Element {
let mut always_on_top = use_signal(|| false);
let mut decorations = use_signal(|| false);
rsx!(
render!(
link {
href: "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css",
rel: "stylesheet"

2
examples/window_focus.rs
View file

@ -21,7 +21,7 @@ fn app() -> Element {
_ => {}
});
rsx! {
render! {
div { width: "100%", height: "100%", display: "flex", flex_direction: "column", align_items: "center",
if focused() {
"This window is focused!"

2
examples/window_zoom.rs
View file

@ -7,7 +7,7 @@ fn main() {
fn app() -> Element {
let mut level = use_signal(|| 1.0);
rsx! {
render! {
input {
r#type: "number",
value: "{level}",

2
examples/xss_safety.rs
View file

@ -11,7 +11,7 @@ fn main() {
fn app() -> Element {
let mut contents = use_signal(|| String::from("<script>alert(\"hello world\")</script>"));
rsx! {
render! {
div {
h1 {"Dioxus is XSS-Safe"}
h3 { "{contents}" }

2
packages/liveview/examples/rocket.rs
View file

@ -57,7 +57,7 @@ fn ws(ws: WebSocket, pool: &State<LiveViewPool>) -> Channel<'static> {
.await;
Ok(())
})
}
})
}
#[tokio::main]

20
packages/web/tests/hydrate.rs
View file

@ -10,18 +10,14 @@ fn makes_tree() {
fn app() -> Element {
rsx! {
div {
div {
h1 {}
}
div {
h2 {}
div { h1 {} }
div { h2 {} }
}
}
})
}
let mut dom = VirtualDom::new(app);
let muts = dom.rebuild();
let muts = dom.rebuild_to_vec();
dbg!(muts.edits);
}
@ -31,12 +27,8 @@ fn rehydrates() {
fn app() -> Element {
rsx! {
div {
div {
h1 { "h1" }
}
div {
h2 { "h2" }
}
div { h1 { "h1" } }
div { h2 { "h2" } }
button {
onclick: move |_| {
println!("clicked");
@ -45,7 +37,7 @@ fn rehydrates() {
}
{false.then(|| rsx!{ "hello" })}
}
})
}
}
let mut dom = VirtualDom::new(app);

8
playwright-tests/fullstack/src/main.rs
View file

@ -60,11 +60,7 @@ fn app(cx: Scope<AppProps>) -> Element {
rsx! {
h1 { "hello axum! {count}" }
button {
class: "increment-button",
onclick: move |_| count += 1,
"Increment"
}
button { class: "increment-button", onclick: move |_| count += 1, "Increment" }
button {
class: "server-button",
onclick: move |_| {
@ -80,7 +76,7 @@ fn app(cx: Scope<AppProps>) -> Element {
"Run a server function!"
}
"Server said: {text}"
})
}
}
#[server(PostServerData)]

2
playwright-tests/liveview/src/main.rs
View file

@ -20,7 +20,7 @@ fn app() -> Element {
}
input { value: "hello input" }
div { class: "style-div", color: "red", "colored text" }
})
}
}
#[tokio::main]

4
playwright-tests/web/Cargo.toml
View file

@ -7,7 +7,5 @@ license = "MIT OR Apache-2.0"
publish = false
[dependencies]
dioxus = { path = "../../packages/dioxus" }
dioxus-web = { path = "../../packages/web" }
dioxus-html = { path = "../../packages/html" }
dioxus = { path = "../../packages/dioxus", features = ["web"]}
serde_json = "1.0.96"

11
playwright-tests/web/src/main.rs
View file

@ -6,8 +6,6 @@ fn app() -> Element {
let mut num = use_signal(|| 0);
let eval_result = use_signal(String::new);
let eval_provider = dioxus_html::prelude::use_eval(cx);
rsx! {
div {
"hello axum! {num}"
@ -25,27 +23,26 @@ fn app() -> Element {
button {
class: "eval-button",
onclick: move |_| {
let eval = eval_provider(
let eval = eval(
r#"
window.document.title = 'Hello from Dioxus Eval!';
dioxus.send("returned eval value");
"#,
)
.unwrap();
let setter = eval_result.setter();
async move {
let result = eval.recv().await;
if let Ok(serde_json::Value::String(string)) = result {
setter(string);
eval_result.set(string);
}
}
},
"Eval"
}
div { class: "eval-result", "{eval_result}" }
})
}
}
fn main() {
dioxus_web::launch(app);
launch_web(app);
}