Fix rsx_usage example
This commit is contained in:
1 file changed
+222
-219
+222
-219
@@ -39,263 +39,266 @@
|
|||||||
//! - Allow top-level fragments
|
//! - Allow top-level fragments
|
||||||
|
|
||||||
fn main() {
|
fn main() {
|
||||||
todo!()
|
launch(app)
|
||||||
//launch_desktop(App);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// use core::{fmt, str::FromStr};
|
use core::{fmt, str::FromStr};
|
||||||
// use std::fmt::Display;
|
use std::fmt::Display;
|
||||||
|
|
||||||
// use baller::Baller;
|
use baller::Baller;
|
||||||
// use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
|
|
||||||
// #[component]
|
fn app() -> Element {
|
||||||
// fn App() -> Element {
|
let formatting = "formatting!";
|
||||||
// let formatting = "formatting!";
|
let formatting_tuple = ("a", "b");
|
||||||
// let formatting_tuple = ("a", "b");
|
let lazy_fmt = format_args!("lazily formatted text");
|
||||||
// let lazy_fmt = format_args!("lazily formatted text");
|
let asd = 123;
|
||||||
// let asd = 123;
|
|
||||||
// rsx! {
|
|
||||||
// div {
|
|
||||||
// // Elements
|
|
||||||
// div {}
|
|
||||||
// h1 {"Some text"}
|
|
||||||
// h1 {"Some text with {formatting}"}
|
|
||||||
// h1 {"Formatting basic expressions {formatting_tuple.0} and {formatting_tuple.1}"}
|
|
||||||
// h1 {"Formatting without interpolation " {formatting_tuple.0} "and" {formatting_tuple.1} }
|
|
||||||
// h2 {
|
|
||||||
// "Multiple"
|
|
||||||
// "Text"
|
|
||||||
// "Blocks"
|
|
||||||
// "Use comments as separators in html"
|
|
||||||
// }
|
|
||||||
// div {
|
|
||||||
// h1 {"multiple"}
|
|
||||||
// h2 {"nested"}
|
|
||||||
// h3 {"elements"}
|
|
||||||
// }
|
|
||||||
// div {
|
|
||||||
// class: "my special div",
|
|
||||||
// h1 {"Headers and attributes!"}
|
|
||||||
// }
|
|
||||||
// div {
|
|
||||||
// // pass simple rust expressions in
|
|
||||||
// class: lazy_fmt,
|
|
||||||
// id: format_args!("attributes can be passed lazily with std::fmt::Arguments"),
|
|
||||||
// class: "asd",
|
|
||||||
// class: "{asd}",
|
|
||||||
// // if statements can be used to conditionally render attributes
|
|
||||||
// class: if formatting.contains("form") { "{asd}" },
|
|
||||||
// div {
|
|
||||||
// class: {
|
|
||||||
// const WORD: &str = "expressions";
|
|
||||||
// format_args!("Arguments can be passed in through curly braces for complex {WORD}")
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // Expressions can be used in element position too:
|
rsx! {
|
||||||
// {rsx!(p { "More templating!" })},
|
div {
|
||||||
|
// Elements
|
||||||
|
div {}
|
||||||
|
h1 {"Some text"}
|
||||||
|
h1 {"Some text with {formatting}"}
|
||||||
|
h1 {"Formatting basic expressions {formatting_tuple.0} and {formatting_tuple.1}"}
|
||||||
|
h1 {"Formatting without interpolation " {formatting_tuple.0} "and" {formatting_tuple.1} }
|
||||||
|
h2 {
|
||||||
|
"Multiple"
|
||||||
|
"Text"
|
||||||
|
"Blocks"
|
||||||
|
"Use comments as separators in html"
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
h1 {"multiple"}
|
||||||
|
h2 {"nested"}
|
||||||
|
h3 {"elements"}
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
class: "my special div",
|
||||||
|
h1 {"Headers and attributes!"}
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
// pass simple rust expressions in
|
||||||
|
class: lazy_fmt,
|
||||||
|
id: format_args!("attributes can be passed lazily with std::fmt::Arguments"),
|
||||||
|
class: "asd",
|
||||||
|
class: "{asd}",
|
||||||
|
// if statements can be used to conditionally render attributes
|
||||||
|
class: if formatting.contains("form") { "{asd}" },
|
||||||
|
div {
|
||||||
|
class: {
|
||||||
|
const WORD: &str = "expressions";
|
||||||
|
format_args!("Arguments can be passed in through curly braces for complex {WORD}")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// // Iterators
|
// Expressions can be used in element position too:
|
||||||
// {(0..10).map(|i| rsx!(li { "{i}" }))},
|
{rsx!(p { "More templating!" })},
|
||||||
|
|
||||||
// // Iterators within expressions
|
// Iterators
|
||||||
// {
|
{(0..10).map(|i| rsx!(li { "{i}" }))},
|
||||||
// let data = std::collections::HashMap::<&'static str, &'static str>::new();
|
|
||||||
// // 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}" }))
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // Matching
|
// Iterators within expressions
|
||||||
// match true {
|
{
|
||||||
// true => rsx!( h1 {"Top text"}),
|
let data = std::collections::HashMap::<&'static str, &'static str>::new();
|
||||||
// false => rsx!( h1 {"Bottom text"})
|
// 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}" }))
|
||||||
|
}
|
||||||
|
|
||||||
// // Conditional rendering
|
// Matching
|
||||||
// // Dioxus conditional rendering is based around None/Some. We have no special syntax for conditionals.
|
match true {
|
||||||
// // You can convert a bool condition to rsx! with .then and .or
|
true => rsx!( h1 {"Top text"}),
|
||||||
// {true.then(|| rsx!(div {}))},
|
false => rsx!( h1 {"Bottom text"})
|
||||||
|
}
|
||||||
|
|
||||||
// // Alternatively, you can use the "if" syntax - but both branches must be resolve to Element
|
// Conditional rendering
|
||||||
// if false {
|
// Dioxus conditional rendering is based around None/Some. We have no special syntax for conditionals.
|
||||||
// h1 {"Top text"}
|
// You can convert a bool condition to rsx! with .then and .or
|
||||||
// } else {
|
{true.then(|| rsx!(div {}))},
|
||||||
// h1 {"Bottom text"}
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // Using optionals for diverging branches
|
// Alternatively, you can use the "if" syntax - but both branches must be resolve to Element
|
||||||
// // Note that since this is wrapped in curlies, it's interpreted as an expression
|
if false {
|
||||||
// {if true {
|
h1 {"Top text"}
|
||||||
// Some(rsx!(h1 {"Top text"}))
|
} else {
|
||||||
// } else {
|
h1 {"Bottom text"}
|
||||||
// None
|
}
|
||||||
// }}
|
|
||||||
|
|
||||||
// // returning "None" without a diverging branch is a bit noisy... but rare in practice
|
// Using optionals for diverging branches
|
||||||
// {None as Option<()>},
|
// Note that since this is wrapped in curlies, it's interpreted as an expression
|
||||||
|
{if true {
|
||||||
|
Some(rsx!(h1 {"Top text"}))
|
||||||
|
} else {
|
||||||
|
None
|
||||||
|
}}
|
||||||
|
|
||||||
// // can also just use empty fragments
|
// returning "None" without a diverging branch is a bit noisy... but rare in practice
|
||||||
// Fragment {}
|
{None as Option<()>},
|
||||||
|
|
||||||
// // Fragments let you insert groups of nodes without a parent.
|
// can also just use empty fragments
|
||||||
// // This lets you make components that insert elements as siblings without a container.
|
Fragment {}
|
||||||
// div {"A"}
|
|
||||||
// Fragment {
|
|
||||||
// div {"B"}
|
|
||||||
// div {"C"}
|
|
||||||
// Fragment {
|
|
||||||
// "D"
|
|
||||||
// Fragment {
|
|
||||||
// "E"
|
|
||||||
// "F"
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // Components
|
// Fragments let you insert groups of nodes without a parent.
|
||||||
// // Can accept any paths
|
// This lets you make components that insert elements as siblings without a container.
|
||||||
// // Notice how you still get syntax highlighting and IDE support :)
|
div {"A"}
|
||||||
// Baller {}
|
Fragment {
|
||||||
// baller::Baller {}
|
div {"B"}
|
||||||
// crate::baller::Baller {}
|
div {"C"}
|
||||||
|
Fragment {
|
||||||
|
"D"
|
||||||
|
Fragment {
|
||||||
|
"E"
|
||||||
|
"F"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// // Can take properties
|
// Components
|
||||||
// Taller { a: "asd" }
|
// Can accept any paths
|
||||||
|
// Notice how you still get syntax highlighting and IDE support :)
|
||||||
|
Baller {}
|
||||||
|
baller::Baller {}
|
||||||
|
crate::baller::Baller {}
|
||||||
|
|
||||||
// // Can take optional properties
|
// Can take properties
|
||||||
// Taller { a: "asd" }
|
Taller { a: "asd" }
|
||||||
|
|
||||||
// // Can pass in props directly as an expression
|
// Can take optional properties
|
||||||
// {
|
Taller { a: "asd" }
|
||||||
// let props = TallerProps {a: "hello", children: None };
|
|
||||||
// rsx!(Taller { ..props })
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // Spreading can also be overridden manually
|
// Can pass in props directly as an expression
|
||||||
// Taller {
|
{
|
||||||
// ..TallerProps { a: "ballin!", children: None },
|
let props = TallerProps {a: "hello", children: None };
|
||||||
// a: "not ballin!"
|
rsx!(Taller { ..props })
|
||||||
// }
|
}
|
||||||
|
|
||||||
// // Can take children too!
|
// Spreading can also be overridden manually
|
||||||
// Taller { a: "asd", div {"hello world!"} }
|
Taller {
|
||||||
|
..TallerProps { a: "ballin!", children: None },
|
||||||
|
a: "not ballin!"
|
||||||
|
}
|
||||||
|
|
||||||
// // This component's props are defined *inline* with the `inline_props` macro
|
// Can take children too!
|
||||||
// WithInline { text: "using functionc all syntax" }
|
Taller { a: "asd", div {"hello world!"} }
|
||||||
|
|
||||||
// // Components can be generic too
|
// This component's props are defined *inline* with the `inline_props` macro
|
||||||
// // This component takes i32 type to give you typed input
|
WithInline { text: "using functionc all syntax" }
|
||||||
// TypedInput::<i32> {}
|
|
||||||
|
|
||||||
// // Type inference can be used too
|
// Components can be generic too
|
||||||
// TypedInput { initial: 10.0 }
|
// This component takes i32 type to give you typed input
|
||||||
|
TypedInput::<i32> {}
|
||||||
|
|
||||||
// // geneircs with the `inline_props` macro
|
// Type inference can be used too
|
||||||
// Label { text: "hello geneirc world!" }
|
TypedInput { initial: 10.0 }
|
||||||
// Label { text: 99.9 }
|
|
||||||
|
|
||||||
// // Lowercase components work too, as long as they are access using a path
|
// geneircs with the `inline_props` macro
|
||||||
// baller::lowercase_component {}
|
Label { text: "hello geneirc world!" }
|
||||||
|
Label { text: 99.9 }
|
||||||
|
|
||||||
// // For in-scope lowercase components, use the `self` keyword
|
// Lowercase components work too, as long as they are access using a path
|
||||||
// self::lowercase_helper {}
|
baller::lowercase_component {}
|
||||||
|
|
||||||
// // helper functions
|
// For in-scope lowercase components, use the `self` keyword
|
||||||
// // Anything that implements IntoVnode can be dropped directly into Rsx
|
self::lowercase_helper {}
|
||||||
// {helper("hello world!")}
|
|
||||||
|
|
||||||
// // Strings can be supplied directly
|
// helper functions
|
||||||
// {String::from("Hello world!")}
|
// Anything that implements IntoVnode can be dropped directly into Rsx
|
||||||
|
{helper("hello world!")}
|
||||||
|
|
||||||
// // So can format_args
|
// Strings can be supplied directly
|
||||||
// {format_args!("Hello {}!", "world")}
|
{String::from("Hello world!")}
|
||||||
|
|
||||||
// // Or we can shell out to a helper function
|
// So can format_args
|
||||||
// {format_dollars(10, 50)}
|
{format_args!("Hello {}!", "world")}
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// fn format_dollars(dollars: u32, cents: u32) -> String {
|
// Or we can shell out to a helper function
|
||||||
// format!("${dollars}.{cents:02}")
|
{format_dollars(10, 50)}
|
||||||
// }
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// fn helper<'a>(cx: &'a ScopeState, text: &'a str) -> Element {
|
fn format_dollars(dollars: u32, cents: u32) -> String {
|
||||||
// rsx! {
|
format!("${dollars}.{cents:02}")
|
||||||
// p { "{text}" }
|
}
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // no_case_check disables PascalCase checking if you *really* want a snake_case component.
|
fn helper(text: &str) -> Element {
|
||||||
// // This will likely be deprecated/removed in a future update that will introduce a more polished linting system,
|
rsx! {
|
||||||
// // something like Clippy.
|
p { "{text}" }
|
||||||
// #[component(no_case_check)]
|
}
|
||||||
// fn lowercase_helper() -> Element {
|
}
|
||||||
// rsx! {
|
|
||||||
// "asd"
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// mod baller {
|
// no_case_check disables PascalCase checking if you *really* want a snake_case component.
|
||||||
// use super::*;
|
// This will likely be deprecated/removed in a future update that will introduce a more polished linting system,
|
||||||
|
// something like Clippy.
|
||||||
|
#[component(no_case_check)]
|
||||||
|
fn lowercase_helper() -> Element {
|
||||||
|
rsx! {
|
||||||
|
"asd"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// #[component]
|
mod baller {
|
||||||
// /// This component totally balls
|
use super::*;
|
||||||
// pub fn Baller() -> Element {
|
|
||||||
// todo!()
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // no_case_check disables PascalCase checking if you *really* want a snake_case component.
|
#[component]
|
||||||
// // This will likely be deprecated/removed in a future update that will introduce a more polished linting system,
|
/// This component totally balls
|
||||||
// // something like Clippy.
|
pub fn Baller() -> Element {
|
||||||
// #[component(no_case_check)]
|
rsx! { "ballin'" }
|
||||||
// pub fn lowercase_component() -> Element {
|
}
|
||||||
// rsx! { "look ma, no uppercase" }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// /// Documention for this component is visible within the rsx macro
|
// no_case_check disables PascalCase checking if you *really* want a snake_case component.
|
||||||
// #[component]
|
// This will likely be deprecated/removed in a future update that will introduce a more polished linting system,
|
||||||
// pub fn Taller(
|
// something like Clippy.
|
||||||
// /// Fields are documented and accessible in rsx!
|
#[component(no_case_check)]
|
||||||
// a: &'static str,
|
pub fn lowercase_component() -> Element {
|
||||||
// children: Element,
|
rsx! { "look ma, no uppercase" }
|
||||||
// ) -> Element {
|
}
|
||||||
// rsx! { {&children} }
|
}
|
||||||
// }
|
|
||||||
|
|
||||||
// #[derive(Props, PartialEq, Eq)]
|
/// Documention for this component is visible within the rsx macro
|
||||||
// pub struct TypedInputProps<T> {
|
#[component]
|
||||||
// #[props(optional, default)]
|
pub fn Taller(
|
||||||
// initial: Option<T>,
|
/// Fields are documented and accessible in rsx!
|
||||||
// }
|
a: &'static str,
|
||||||
|
children: Element,
|
||||||
|
) -> Element {
|
||||||
|
rsx! { {&children} }
|
||||||
|
}
|
||||||
|
|
||||||
// #[allow(non_snake_case)]
|
#[derive(Props, Clone, PartialEq, Eq)]
|
||||||
// pub fn TypedInput<T>(_: Scope<TypedInputProps<T>>) -> Element
|
pub struct TypedInputProps<T: 'static + Clone + PartialEq> {
|
||||||
// where
|
#[props(optional, default)]
|
||||||
// T: FromStr + fmt::Display,
|
initial: Option<T>,
|
||||||
// <T as FromStr>::Err: std::fmt::Display,
|
}
|
||||||
// {
|
|
||||||
// todo!()
|
|
||||||
// }
|
|
||||||
|
|
||||||
// #[component]
|
#[allow(non_snake_case)]
|
||||||
// fn WithInline(cx: Scope<'a>, text: &'a str) -> Element {
|
pub fn TypedInput<T>(props: TypedInputProps<T>) -> Element
|
||||||
// rsx! {
|
where
|
||||||
// p { "{text}" }
|
T: FromStr + fmt::Display + PartialEq + Clone + 'static,
|
||||||
// }
|
<T as FromStr>::Err: std::fmt::Display,
|
||||||
// }
|
{
|
||||||
|
if let Some(props) = props.initial {
|
||||||
|
return rsx! { "{props}" };
|
||||||
|
}
|
||||||
|
|
||||||
// #[component]
|
None
|
||||||
// fn Label<T: Clone + PartialEq>(text: T) -> Element
|
}
|
||||||
// where
|
|
||||||
// T: Display,
|
#[component]
|
||||||
// {
|
fn WithInline(text: String) -> Element {
|
||||||
// rsx! {
|
rsx! {
|
||||||
// p { "{text}" }
|
p { "{text}" }
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
fn Label<T: Clone + PartialEq + 'static>(text: T) -> Element
|
||||||
|
where
|
||||||
|
T: Display,
|
||||||
|
{
|
||||||
|
rsx! {
|
||||||
|
p { "{text}" }
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in new issue
Block a user