feat: upgrade syntax

This commit is contained in:
Jonathan Kelley committed 2021-11-10 17:09:52 -05:00
1 parent 574d7fdb9e
commit fd93ee89c1
64 files changed
+522 -437

No files matched your search

+8 -8
View File
@@ -32,7 +32,7 @@ use dioxus::prelude::*;
struct NoKeysProps {
data: std::collections::HashMap<u32, String>,
}
static AntipatternNoKeys: FC<NoKeysProps> = |(cx, props)| {
static AntipatternNoKeys: FC<NoKeysProps> = |cx, props| {
// WRONG: Make sure to add keys!
rsx!(cx, ul {
{props.data.iter().map(|(k, v)| rsx!(li { "List item: {v}" }))}
@@ -54,7 +54,7 @@ static AntipatternNoKeys: FC<NoKeysProps> = |(cx, props)| {
///
/// Only Component and Fragment nodes are susceptible to this issue. Dioxus mitigates this with components by providing
/// an API for registering shared state without the ContextProvider pattern.
static AntipatternNestedFragments: FC<()> = |(cx, props)| {
static AntipatternNestedFragments: FC<()> = |cx, props| {
// Try to avoid heavily nesting fragments
rsx!(cx,
Fragment {
@@ -82,7 +82,7 @@ static AntipatternNestedFragments: FC<()> = |(cx, props)| {
/// However, calling set_state will *not* update the current version of state in the component. This should be easy to
/// recognize from the function signature, but Dioxus will not update the "live" version of state. Calling `set_state`
/// merely places a new value in the queue and schedules the component for a future update.
static AntipatternRelyingOnSetState: FC<()> = |(cx, props)| {
static AntipatternRelyingOnSetState: FC<()> = |cx, props| {
let (state, set_state) = use_state(cx, || "Hello world").classic();
set_state("New state");
// This will return false! `state` will *still* be "Hello world"
@@ -99,7 +99,7 @@ static AntipatternRelyingOnSetState: FC<()> = |(cx, props)| {
/// - All components must start with an uppercase character
///
/// i.e.: the following component will be rejected when attempted to be used in the rsx! macro
static antipattern_component: FC<()> = |(cx, props)| todo!();
static antipattern_component: FC<()> = |cx, props| todo!();
/// Antipattern: Misusing hooks
/// ---------------------------
@@ -120,7 +120,7 @@ static antipattern_component: FC<()> = |(cx, props)| todo!();
struct MisuedHooksProps {
should_render_state: bool,
}
static AntipatternMisusedHooks: FC<MisuedHooksProps> = |(cx, props)| {
static AntipatternMisusedHooks: FC<MisuedHooksProps> = |cx, props| {
if props.should_render_state {
// do not place a hook in the conditional!
// prefer to move it out of the conditional
@@ -153,7 +153,7 @@ static AntipatternMisusedHooks: FC<MisuedHooksProps> = |(cx, props)| {
/// }
/// }
/// })
static _example: FC<()> = |(cx, props)| todo!();
static _example: FC<()> = |cx, props| todo!();
/// Antipattern: publishing components and hooks with all features enabled
/// ----------------------------------------------------------------------
@@ -171,9 +171,9 @@ static _example: FC<()> = |(cx, props)| todo!();
///
/// This will only include the `core` dioxus crate which is relatively slim and fast to compile and avoids target-specific
/// libraries.
static __example: FC<()> = |(cx, props)| todo!();
static __example: FC<()> = |cx, props| todo!();
pub static Example: FC<()> = |(cx, props)| {
pub static Example: FC<()> = |cx, props| {
cx.render(rsx! {
AntipatternNoKeys { data: std::collections::HashMap::new() }
AntipatternNestedFragments {}
+2 -2
View File
@@ -9,7 +9,7 @@
use dioxus::prelude::*;
pub static Example: FC<()> = |(cx, props)| {
pub static Example: FC<()> = |cx, props| {
cx.render(rsx! {
div {
Greeting {
@@ -25,7 +25,7 @@ struct GreetingProps {
name: &'static str,
}
static Greeting: FC<GreetingProps> = |(cx, props)| {
static Greeting: FC<GreetingProps> = |cx, props| {
cx.render(rsx! {
div {
h1 { "Hello, {props.name}!" }
+2 -2
View File
@@ -18,7 +18,7 @@
use dioxus::prelude::*;
pub static Example: FC<()> = |(cx, props)| {
pub static Example: FC<()> = |cx, props| {
cx.render(rsx! {
div {
Banner {
@@ -31,7 +31,7 @@ pub static Example: FC<()> = |(cx, props)| {
})
};
pub static Banner: FC<()> = |(cx, props)| {
pub static Banner: FC<()> = |cx, props| {
cx.render(rsx! {
div {
h1 { "This is a great banner!" }
@@ -16,7 +16,7 @@ use dioxus::prelude::*;
pub struct MyProps {
should_show: bool,
}
pub static Example0: FC<MyProps> = |(cx, props)| {
pub static Example0: FC<MyProps> = |cx, props| {
cx.render(rsx! {
div {
{props.should_show.then(|| rsx!{
@@ -39,7 +39,7 @@ pub static Example0: FC<MyProps> = |(cx, props)| {
pub struct MyProps1 {
should_show: bool,
}
pub static Example1: FC<MyProps1> = |(cx, props)| {
pub static Example1: FC<MyProps1> = |cx, props| {
cx.render(rsx! {
div {
// With matching
@@ -77,7 +77,7 @@ pub enum Color {
pub struct MyProps2 {
color: Color,
}
pub static Example2: FC<MyProps2> = |(cx, props)| {
pub static Example2: FC<MyProps2> = |cx, props| {
cx.render(rsx! {
div {
{match props.color {
@@ -89,7 +89,7 @@ pub static Example2: FC<MyProps2> = |(cx, props)| {
})
};
pub static Example: FC<()> = |(cx, props)| {
pub static Example: FC<()> = |cx, props| {
let should_show = use_state(cx, || false);
let mut color_index = use_state(cx, || 0);
let color = match *color_index % 2 {
+3 -3
View File
@@ -1,7 +1,7 @@
use dioxus::prelude::*;
fn main() {}
pub static Example: FC<()> = |(cx, props)| {
pub static Example: FC<()> = |cx, props| {
cx.render(rsx! {
div {
@@ -10,7 +10,7 @@ pub static Example: FC<()> = |(cx, props)| {
};
// A controlled component:
static ControlledSelect: FC<()> = |(cx, props)| {
static ControlledSelect: FC<()> = |cx, props| {
let value = use_state(cx, || String::from("Grapefruit"));
cx.render(rsx! {
select { value: "{value}", onchange: move |evt| value.set(evt.value()),
@@ -23,7 +23,7 @@ static ControlledSelect: FC<()> = |(cx, props)| {
};
// TODO - how do uncontrolled things work?
static UncontrolledSelect: FC<()> = |(cx, props)| {
static UncontrolledSelect: FC<()> = |cx, props| {
let value = use_state(cx, || String::new());
cx.render(rsx! {
+1 -1
View File
@@ -11,7 +11,7 @@
use dioxus::prelude::*;
pub static Example: FC<()> = |(cx, props)| {
pub static Example: FC<()> = |cx, props| {
cx.render(rsx! {
div {
custom_element {
+1 -1
View File
@@ -5,4 +5,4 @@
use dioxus::prelude::*;
pub static Example: FC<()> = |(cx, props)| cx.render(rsx! { Fragment {} });
pub static Example: FC<()> = |cx, props| cx.render(rsx! { Fragment {} });
+6 -6
View File
@@ -23,14 +23,14 @@ fn main() {}
/// This is one way to go about error handling (just toss things away with unwrap).
/// However, if you get it wrong, the whole app will crash.
/// This is pretty flimsy.
static App: FC<()> = |(cx, props)| {
static App: FC<()> = |cx, props| {
let data = get_data().unwrap();
cx.render(rsx!( div { "{data}" } ))
};
/// This is a pretty verbose way of error handling
/// However, it's still pretty good since we don't panic, just fail to render anything
static App1: FC<()> = |(cx, props)| {
static App1: FC<()> = |cx, props| {
let data = match get_data() {
Some(data) => data,
None => return None,
@@ -46,7 +46,7 @@ static App1: FC<()> = |(cx, props)| {
/// a user is logged in.
///
/// Dioxus will throw an error in the console if the None-path is ever taken.
static App2: FC<()> = |(cx, props)| {
static App2: FC<()> = |cx, props| {
let data = get_data()?;
cx.render(rsx!( div { "{data}" } ))
};
@@ -54,14 +54,14 @@ static App2: FC<()> = |(cx, props)| {
/// This is top-tier error handling since it displays a failure state.
///
/// However, the error is lacking in context.
static App3: FC<()> = |(cx, props)| match get_data() {
static App3: FC<()> = |cx, props| match get_data() {
Some(data) => cx.render(rsx!( div { "{data}" } )),
None => cx.render(rsx!( div { "Failed to load data :(" } )),
};
/// For errors that return results, it's possible to short-circuit the match-based error handling with `.ok()` which converts
/// a Result<T, V> into an Option<T> and lets you abort rendering by early-returning `None`
static App4: FC<()> = |(cx, props)| {
static App4: FC<()> = |cx, props| {
let data = get_data_err().ok()?;
cx.render(rsx!( div { "{data}" } ))
};
@@ -69,7 +69,7 @@ static App4: FC<()> = |(cx, props)| {
/// This is great error handling since it displays a failure state... with context!
///
/// Hopefully you'll never need to display a screen like this. It's rather bad taste
static App5: FC<()> = |(cx, props)| match get_data_err() {
static App5: FC<()> = |cx, props| match get_data_err() {
Ok(data) => cx.render(rsx!( div { "{data}" } )),
Err(c) => cx.render(rsx!( div { "Failed to load data: {c}" } )),
};
+4 -4
View File
@@ -11,7 +11,7 @@
use dioxus::prelude::*;
// Returning multiple elements with rsx! or html!
static App1: FC<()> = |(cx, props)| {
static App1: FC<()> = |cx, props| {
cx.render(rsx! {
h1 { }
h2 { }
@@ -20,7 +20,7 @@ static App1: FC<()> = |(cx, props)| {
};
// Using the Fragment component
static App2: FC<()> = |(cx, props)| {
static App2: FC<()> = |cx, props| {
cx.render(rsx! {
Fragment {
div {}
@@ -31,7 +31,7 @@ static App2: FC<()> = |(cx, props)| {
};
// Using the `fragment` method on the NodeFactory
static App3: FC<()> = |(cx, props)| {
static App3: FC<()> = |cx, props| {
cx.render(LazyNodes::new(move |fac| {
fac.fragment_from_iter([
fac.text(format_args!("A")),
@@ -42,7 +42,7 @@ static App3: FC<()> = |(cx, props)| {
}))
};
pub static Example: FC<()> = |(cx, props)| {
pub static Example: FC<()> = |cx, props| {
cx.render(rsx! {
App1 {}
App2 {}
+1 -1
View File
@@ -19,7 +19,7 @@ h1 {color: blue;}
p {color: red;}
"#;
pub static Example: FC<()> = |(cx, props)| {
pub static Example: FC<()> = |cx, props| {
cx.render(rsx! {
head { style { "{STYLE}" } }
body {
+2 -2
View File
@@ -10,7 +10,7 @@
use dioxus::prelude::*;
pub static Example: FC<()> = |(cx, props)| {
pub static Example: FC<()> = |cx, props| {
cx.render(rsx! {
head {
style: { background_color: "powderblue" }
@@ -29,7 +29,7 @@ pub static Example: FC<()> = |(cx, props)| {
// .... technically the rsx! macro is slightly broken at the moment and allows styles not wrapped in style {}
// I haven't noticed any name collisions yet, and am tentatively leaving this behavior in..
// Don't rely on it.
static Example2: FC<()> = |(cx, props)| {
static Example2: FC<()> = |cx, props| {
cx.render(rsx! {
div { color: "red"
"hello world!"
+1 -1
View File
@@ -12,7 +12,7 @@
use dioxus::prelude::*;
pub static Example: FC<()> = |(cx, props)| {
pub static Example: FC<()> = |cx, props| {
let example_data = use_state(cx, || 0);
let v = (0..10).map(|f| {
+4 -4
View File
@@ -7,7 +7,7 @@
use dioxus::prelude::*;
pub static Example: FC<()> = |(cx, props)| {
pub static Example: FC<()> = |cx, props| {
cx.render(rsx! {
ButtonList {}
NonUpdatingEvents {}
@@ -16,7 +16,7 @@ pub static Example: FC<()> = |(cx, props)| {
};
/// We can use `set_name` in multiple closures; the closures automatically *copy* the reference to set_name.
static ButtonList: FC<()> = |(cx, props)| {
static ButtonList: FC<()> = |cx, props| {
let name = use_state(cx, || "...?");
let names = ["jack", "jill", "john", "jane"]
@@ -33,7 +33,7 @@ static ButtonList: FC<()> = |(cx, props)| {
/// This shows how listeners may be without a visible change in the display.
/// Check the console.
static NonUpdatingEvents: FC<()> = |(cx, props)| {
static NonUpdatingEvents: FC<()> = |cx, props| {
rsx!(cx, div {
button {
onclick: move |_| log::info!("Did not cause any updates!")
@@ -42,7 +42,7 @@ static NonUpdatingEvents: FC<()> = |(cx, props)| {
})
};
static DisablePropagation: FC<()> = |(cx, props)| {
static DisablePropagation: FC<()> = |cx, props| {
rsx!(cx,
div {
onclick: move |_| log::info!("event propagated to the div!")
+3 -3
View File
@@ -21,7 +21,7 @@ use dioxus::prelude::*;
// By default, components with no props are always memoized.
// A props of () is considered empty.
pub static Example: FC<()> = |(cx, props)| {
pub static Example: FC<()> = |cx, props| {
cx.render(rsx! {
div { "100% memoized!" }
})
@@ -35,7 +35,7 @@ pub struct MyProps1 {
name: String,
}
pub static Example1: FC<MyProps1> = |(cx, props)| {
pub static Example1: FC<MyProps1> = |cx, props| {
cx.render(rsx! {
div { "100% memoized! {props.name}" }
})
@@ -49,7 +49,7 @@ pub struct MyProps2 {
name: std::rc::Rc<str>,
}
pub static Example2: FC<MyProps2> = |(cx, props)| {
pub static Example2: FC<MyProps2> = |cx, props| {
cx.render(rsx! {
div { "100% memoized! {props.name}" }
})
+1 -1
View File
@@ -1,7 +1,7 @@
use dioxus::prelude::*;
fn main() {}
pub static Example: FC<()> = |(cx, props)| {
pub static Example: FC<()> = |cx, props| {
let p = 10;
cx.render(rsx! {
+1 -1
View File
@@ -1,7 +1,7 @@
use dioxus::prelude::*;
fn main() {}
pub static Example: FC<()> = |(cx, props)| {
pub static Example: FC<()> = |cx, props| {
cx.render(rsx! {
div {
+1 -1
View File
@@ -9,7 +9,7 @@
use dioxus::prelude::*;
pub static Example: FC<()> = |(cx, props)| {
pub static Example: FC<()> = |cx, props| {
let props = MyProps {
count: 0,
live: true,
+1 -1
View File
@@ -1,7 +1,7 @@
use dioxus::prelude::*;
fn main() {}
pub static Example: FC<()> = |(cx, props)| {
pub static Example: FC<()> = |cx, props| {
cx.render(rsx! {
div {
+1 -1
View File
@@ -14,7 +14,7 @@ struct DogApi {
}
const ENDPOINT: &str = "https://dog.ceo/api/breeds/image/random";
pub static Example: FC<()> = |(cx, props)| {
pub static Example: FC<()> = |cx, props| {
let doggo = use_suspense(
cx,
|| surf::get(ENDPOINT).recv_json::<DogApi>(),
+1 -1
View File
@@ -24,7 +24,7 @@
use dioxus::prelude::*;
pub static Example: FC<()> = |(cx, props)| {
pub static Example: FC<()> = |cx, props| {
let count = use_state(cx, || 0);
let mut direction = use_state(cx, || 1);
+1 -1
View File
@@ -1,6 +1,6 @@
use dioxus::prelude::*;
pub static Example: FC<()> = |(cx, props)| {
pub static Example: FC<()> = |cx, props| {
cx.render(rsx! {
div {
+2 -2
View File
@@ -1,7 +1,7 @@
use dioxus::prelude::*;
use dioxus::ssr;
pub static Example: FC<()> = |(cx, props)| {
pub static Example: FC<()> = |cx, props| {
let as_string = use_state(cx, || {
// Currently, SSR is only supported for whole VirtualDOMs
// This is an easy/low hanging fruit to improve upon
@@ -15,7 +15,7 @@ pub static Example: FC<()> = |(cx, props)| {
})
};
static SomeApp: FC<()> = |(cx, props)| {
static SomeApp: FC<()> = |cx, props| {
cx.render(rsx! {
div { style: {background_color: "blue"}
h1 {"Some amazing app or component"}