fix: readme and examples syntax

This commit is contained in:
Jonathan Kelley committed 2021-12-28 23:48:25 -05:00
1 parent f24aae8787
commit 3dc0e59876
102 files changed
+213 -1222

No files matched your search

+12 -12
View File
@@ -64,18 +64,18 @@ Here's what a few common tasks look like in Dioxus:
Nested components with children and internal state:
```rust
fn App(cx: Context, props: &()) -> Element {
fn App(cx: Scope<()>) -> Element {
cx.render(rsx!( Toggle { "Toggle me" } ))
}
#[derive(PartialEq, Props)]
struct ToggleProps { children: Element }
fn Toggle(cx: Context, props: &ToggleProps) -> Element {
fn Toggle(cx: Scope<ToggleProps>) -> Element {
let mut toggled = use_state(&cx, || false);
cx.render(rsx!{
div {
{&props.children}
{&cx.props.children}
button { onclick: move |_| toggled.set(true),
{toggled.and_then(|| "On").or_else(|| "Off")}
}
@@ -86,7 +86,7 @@ fn Toggle(cx: Context, props: &ToggleProps) -> Element {
Controlled inputs:
```rust
fn App(cx: Context, props: &()) -> Element {
fn App(cx: Scope<()>) -> Element {
let value = use_state(&cx, String::new);
cx.render(rsx!(
input {
@@ -100,7 +100,7 @@ fn App(cx: Context, props: &()) -> Element {
Lists and Conditional rendering:
```rust
fn App(cx: Context, props: &()) -> Element {
fn App(cx: Scope<()>) -> Element {
let list = (0..10).map(|i| {
rsx!(li { key: "{i}", "Value: {i}" })
});
@@ -123,12 +123,12 @@ fn App(cx: Context, props: &()) -> Element {
Tiny components:
```rust
static App: Component<()> = |cx, _| rsx!(cx, div {"hello world!"});
static App: Component = |cx, _| rsx!(cx, div {"hello world!"});
```
Borrowed prop contents:
```rust
fn App(cx: Context, props: &()) -> Element {
fn App(cx: Scope<()>) -> Element {
let name = use_state(&cx, || String::from("example"));
rsx!(cx, Child { title: name.as_str() })
}
@@ -136,7 +136,7 @@ fn App(cx: Context, props: &()) -> Element {
#[derive(Props)]
struct ChildProps<'a> { title: &'a str }
fn Child(cx: Context, props: &ChildProps) -> Element {
fn Child(cx: Scope<ChildProps>) -> Element {
rsx!(cx, "Hello {cx.props.title}")
}
```
@@ -145,12 +145,12 @@ Global State
```rust
struct GlobalState { name: String }
fn App(cx: Context, props: &()) -> Element {
fn App(cx: Scope<()>) -> Element {
use_provide_shared_state(cx, || GlobalState { name: String::from("Toby") })
rsx!(cx, Leaf {})
}
fn Leaf(cx: Context, props: &()) -> Element {
fn Leaf(cx: Scope<()>) -> Element {
let state = use_consume_shared_state::<GlobalState>(cx)?;
rsx!(cx, "Hello {state.name}")
}
@@ -166,7 +166,7 @@ enum Route {
Post(id)
}
fn App(cx: Context, props: &()) -> Element {
fn App(cx: Scope<()>) -> Element {
let route = use_router(cx, Route::parse);
cx.render(rsx!(div {
{match route {
@@ -179,7 +179,7 @@ fn App(cx: Context, props: &()) -> Element {
Suspense
```rust
fn App(cx: Context, props: &()) -> Element {
fn App(cx: Scope<()>) -> Element {
let doggo = use_suspense(cx,
|| async { reqwest::get("https://dog.ceo/api/breeds/image/random").await.unwrap().json::<Response>().await.unwrap() },
|response| cx.render(rsx!( img { src: "{response.message}" }))
+1 -1
View File
@@ -11,7 +11,7 @@ async fn main() {
dioxus::desktop::launch(App);
}
pub static App: Component<()> = |cx| {
pub static App: Component = |cx| {
let count = use_state(&cx, || 0);
let mut direction = use_state(&cx, || 1);
+1 -1
View File
@@ -13,7 +13,7 @@ fn main() {
dioxus::desktop::launch(APP);
}
static APP: Component<()> = |cx| {
static APP: Component = |cx| {
let cur_val = use_state(&cx, || 0.0_f64);
let operator = use_state(&cx, || None as Option<&'static str>);
let display_value = use_state(&cx, || String::from(""));
+1 -2
View File
@@ -9,13 +9,12 @@ fn main() {
println!("{}", dom);
}
pub static EXAMPLE: Component<()> = |cx| {
pub static EXAMPLE: Component = |cx| {
let list = (0..10).map(|_f| {
rsx! {
"{_f}"
}
});
// let list = (0..10).map(|_f| Some(Box::new(move |_f| todo!())));
cx.render(Some(LazyNodes::new(move |cx| {
cx.raw_element(
-15
View File
@@ -1,15 +0,0 @@
use dioxus_core::prelude::*;
fn main() {
let mut dom = VirtualDom::new(App);
dom.rebuild();
}
const App: Component<()> = |cx| {
let id = cx.scope_id();
// cx.submit_task(Box::pin(async move { id }));
// let (handle, contents) = use_task(cx, || async { "hello world".to_string() });
todo!()
};
-78
View File
@@ -1,78 +0,0 @@
//! Demonstrate that borrowed data is possible as a property type
//! Borrowing (rather than cloning) is very important for speed and ergonomics.
//!
//! It's slightly more advanced than just cloning, but well worth the investment.
//!
//! If you use the FC macro, we handle the lifetimes automatically, making it easy to write efficient & performant components.
fn main() {}
use dioxus_core::prelude::*;
use std::rc::Rc;
struct AppProps {
items: Vec<Rc<ListItem>>,
}
#[derive(PartialEq)]
struct ListItem {
name: String,
age: u32,
}
fn app<'a>(cx: Context<'a>, props: &AppProps) -> Element<'a> {
// let (val, set_val) = use_state_classic(cx, || 0);
todo!()
// cx.render(LazyNodes::new(move |_nodecx| {
// todo!()
// // builder::ElementBuilder::new(_nodecx, "div")
// // .iter_child({
// // cx.items.iter().map(|child| {
// // builder::virtual_child(
// // _nodecx,
// // ChildItem,
// // ChildProps {
// // item: child.clone(),
// // item_handler: set_val.clone(),
// // },
// // None,
// // &[],
// // )
// // })
// // })
// // .iter_child([builder::ElementBuilder::new(_nodecx, "div")
// // .iter_child([builder::text3(_nodecx.bump(), format_args!("{}", val))])
// // .finish()])
// // .finish()
// }))
}
// props should derive a partialeq implementation automatically, but implement ptr compare for & fields
struct ChildProps {
// Pass down complex structs
item: Rc<ListItem>,
// Even pass down handlers!
item_handler: Rc<dyn Fn(i32)>,
}
fn ChildItem<'a>(cx: Context<'a>, props: &'a ChildProps) -> Element<'a> {
todo!()
}
impl PartialEq for ChildProps {
fn eq(&self, _other: &Self) -> bool {
false
}
}
impl Properties for ChildProps {
type Builder = ();
const IS_STATIC: bool = true;
fn builder() -> Self::Builder {
()
}
unsafe fn memoize(&self, other: &Self) -> bool {
self == other
}
}
-36
View File
@@ -1,36 +0,0 @@
use dioxus_core::prelude::*;
fn main() {}
struct SomeContext {
items: Vec<String>,
}
#[allow(unused)]
static Example: Component<()> = |cx| {
todo!()
// let value = cx.use_context(|c: &SomeContext| c.items.last().unwrap());
// cx.render(LazyNodes::new(move |bump| {
// builder::ElementBuilder::new(bump, "button")
// .on("click", move |_| {
// println!("Value is {}", cx.name);
// println!("Value is {}", value.as_str());
// println!("Value is {}", *value);
// })
// .on("click", move |_| {
// println!("Value is {}", cx.name);
// })
// .finish()
// }))
// cx.render(html! {
// <div>
// <button onclick={move |_| println!("Value is {}", value)} />
// <button onclick={move |_| println!("Value is {}", value)} />
// <button onclick={move |_| println!("Value is {}", value)} />
// <div>
// <p> "Value is: {val}" </p>
// </div>
// </div>
// })
};
-1
View File
@@ -1 +0,0 @@
fn main( ) {}
-46
View File
@@ -1,46 +0,0 @@
use dioxus_core::prelude::*;
fn main() {}
fn app<'a>(cx: Context<'a>, props: &()) -> Element<'a> {
// let vak = use_suspense(
// cx,
// || async {},
// |c, _res| c.render(LazyNodes::new(move |f| f.text(format_args!("")))),
// );
// let d1 = cx.render(to_lazy_nodes(move |f| {
// f.raw_element(
// "div",
// None,
// [],
// [],
// [
// // f.fragment_from_iter(vak),
// f.text(format_args!("")),
// f.text(format_args!("")),
// f.text(format_args!("")),
// f.text(format_args!("")),
// ],
// None,
// )
// }));
todo!()
// cx.render(LazyNodes::new(move |f| {
// f.raw_element(
// "div",
// None,
// [],
// [],
// [
// f.text(format_args!("")),
// f.text(format_args!("")),
// f.text(format_args!("")),
// f.text(format_args!("")),
// d1.unwrap(),
// ],
// None,
// )
// }))
}
-148
View File
@@ -1,148 +0,0 @@
use std::marker::PhantomData;
use dioxus::component::Scope;
use dioxus::events::on::MouseEvent;
use dioxus::nodes::IntoVNode;
use dioxus_core as dioxus;
use dioxus_core::prelude::*;
use dioxus_core_macro::*;
use dioxus_html as dioxus_elements;
fn main() {}
fn html_usage() {
let mo = move |_| {};
let r = rsx! {
div {
onclick: move |_| {}
onmouseover: {mo}
"type": "bar",
"hello world"
}
};
let items = ["bob", "bill", "jack"];
let f = items
.iter()
.filter(|f| f.starts_with('b'))
.map(|f| rsx!("hello {f}"));
// let p = rsx!(div { {f} });
}
static App2: Component<()> = |cx, _| cx.render(rsx!("hello world!"));
static App: Component<()> = |cx| {
let name = cx.use_state(|| 0);
cx.render(rsx!(div {
h1 {}
h2 {}
}))
};
pub trait UseState<'a, T: 'static> {
fn use_state(self, f: impl FnOnce() -> T) -> &'a T;
}
impl<'a, T: 'static> UseState<'a, T> for Context<'a> {
fn use_state(self, f: impl FnOnce() -> T) -> &'a T {
todo!()
}
}
fn App3((cx, props): Scope<()>) -> Element {
let p = rsx! {
Child {
bame: 10,
}
};
todo!()
// cx.render(rsx!(Child {
// bame: 102,
// ..ChildProps { bame: 10 }
// }))
}
#[derive(Props, PartialEq, Debug)]
struct ChildProps {
bame: i32, // children: Children<'a>,
}
fn Child<'a>((cx, props): Scope<'a, ChildProps>) -> Element<'a> {
cx.render(rsx!(div {
// {cx.props.children}
}))
}
// Some(LazyNodes::new(|f| {
// //
// // let r = f.fragment_from_iter(&props.children);
// r
// // todo!()
// }))
// todo!()
// rsx!({ Some(p) })
// todo!()
pub struct Children<'a> {
children: VNode<'static>,
_p: PhantomData<&'a ()>,
}
impl<'a> Children<'a> {
pub fn new(children: VNode<'a>) -> Self {
Self {
children: unsafe { std::mem::transmute(children) },
_p: PhantomData,
}
}
}
static Bapp: Component<()> = |cx| {
let name = cx.use_state(|| 0);
cx.render(rsx!(
div {
div {
}
div {
}
}
))
};
static Match: Component<()> = |cx| {
//
let b: Box<dyn Fn(NodeFactory) -> VNode> = Box::new(|f| todo!());
let b = match "ag" {
"a" => {
let __b: Box<dyn FnOnce(NodeFactory) -> VNode> = Box::new(|f: NodeFactory| todo!());
__b
}
_ => {
let __b: Box<dyn FnOnce(NodeFactory) -> VNode> = Box::new(|f: NodeFactory| todo!());
__b
}
};
// let b: Box<dyn Fn(NodeFactory) -> VNode> = match "alph" {
// "beta" => Box::new(|f: NodeFactory| {
// //
// todo!()
// }),
// _ => Box::new(|f: NodeFactory| {
// //
// todo!()
// }),
// };
cx.render(rsx! {
div {
}
})
};
-259
View File
@@ -1,259 +0,0 @@
use std::borrow::BorrowMut;
use std::cell::{Cell, RefCell};
use std::marker::PhantomData;
use dioxus::component::Scope;
use dioxus::events::on::MouseEvent;
use dioxus::nodes::{IntoVNode, VComponent, VFragment, VText};
use dioxus_core as dioxus;
use dioxus_core::prelude::*;
use dioxus_core_macro::*;
use dioxus_html as dioxus_elements;
fn main() {}
fn t() {
let g = rsx! {
div {
div {
}
}
};
let g = {
let ___p: Box<dyn FnOnce(NodeFactory) -> VNode> = Box::new(|__cx: NodeFactory| {
use dioxus_elements::{GlobalAttributes, SvgAttributes};
__cx.element(dioxus_elements::div, [], [], [], None)
});
// let __z = ___p as ;
// __z
};
}
// #[derive(PartialEq, Props)]
// struct OurProps {
// foo: String,
// }
// fn App<'a>((cx, props): Scope<'a, OurProps>) -> Element<'a> {
// let a = rsx! {
// div {
// "asd"
// "{cx.props.foo}"
// }
// };
// let p = (0..10).map(|f| {
// rsx! {
// div {
// }
// }
// });
// let g = match "text" {
// "a" => {
// rsx!("asd")
// }
// _ => {
// rsx!("asd")
// }
// };
// let items = ["bob", "bill", "jack"];
// let f = items
// .iter()
// .filter(|f| f.starts_with('b'))
// .map(|f| rsx!("hello {f}"));
// // use dioxus_hooks;
// // let g = use_state(|| "hello".to_string());
// let s: &'a mut String = cx.use_hook(|_| String::new(), |f| f, |_| {});
// /*
// the final closure is allowed to borrow anything provided it
// */
// // cx.render({
// // let p: Option<Box<dyn FnOnce(_) -> _>> = Some(Box::new(move |__cx: NodeFactory| {
// // use dioxus_elements::{GlobalAttributes, SvgAttributes};
// // let props = Child2Props { foo: s };
// // let ch: VNode = __cx.component(Child2, props, None, []);
// // __cx.element(
// // dioxus_elements::div,
// // [],
// // [],
// // [ch],
// // // [__cx.component(Child2, fc_to_builder(Child2).foo(s).build(), None, [])],
// // None,
// // )
// // }));
// // p
// // // let ___p: Box<dyn FnOnce(NodeFactory) -> VNode> = Box::new(move |__cx| {
// // // use dioxus_elements::{GlobalAttributes, SvgAttributes};
// // // let props = Child2Props { foo: s };
// // // let ch: VNode = __cx.component(Child2, props, None, []);
// // // __cx.element(
// // // dioxus_elements::div,
// // // [],
// // // [],
// // // [ch],
// // // // [__cx.component(Child2, fc_to_builder(Child2).foo(s).build(), None, [])],
// // // None,
// // // )
// // // });
// // // Some(___p)
// // })
// let a = annotate_lazy(move |f| {
// //
// todo!()
// });
// let b = annotate_lazy(move |f| {
// //
// f.text(format_args!("{}", props.foo))
// });
// let c = annotate_lazy(move |f| {
// //
// f.component(
// Child,
// OurProps {
// //
// foo: "hello".to_string(),
// },
// None,
// [],
// )
// });
// let st: &'a String = cx.use_hook(|_| "hello".to_string(), |f| f, |_| {});
// let d = annotate_lazy(move |f| {
// //
// f.component(
// Child2,
// Child2Props {
// //
// foo: st,
// },
// None,
// [],
// )
// });
// let e = match "asd" {
// b => {
// //
// annotate_lazy(move |f| {
// //
// f.text(format_args!("{}", props.foo))
// })
// }
// a => {
// //
// annotate_lazy(move |f| {
// //
// f.text(format_args!("{}", props.foo))
// })
// }
// };
// cx.render(annotate_lazy(move |f| {
// //
// f.raw_element(
// "div",
// None,
// [],
// [],
// [
// //
// f.fragment_from_iter(a),
// f.fragment_from_iter(b),
// f.fragment_from_iter(c),
// f.fragment_from_iter(e),
// ],
// None,
// )
// // todo!()
// }))
// // cx.render(rsx! {
// // div {
// // div {
// // {a}
// // // {p}
// // // {g}
// // // {f}
// // }
// // // div {
// // // "asd"
// // // div {
// // // "asd"
// // // }
// // // }
// // // Child {
// // // foo: "asd".to_string(),
// // // }
// // Child2 {
// // foo: s,
// // }
// // }
// // })
// }
// fn Child((cx, props): Scope<OurProps>) -> Element {
// cx.render(rsx! {
// div {
// div {}
// }
// })
// }
#[derive(Props)]
struct Child2Props<'a> {
foo: &'a String,
}
fn Child2<'a>((cx, props): Scope<'a, Child2Props>) -> Element<'a> {
let node = cx
.render(rsx! {
div {
}
})
.unwrap();
cx.render(rsx! {
div {
ChildrenComp {
div {}
}
}
})
}
#[derive(Props)]
struct ChildrenTest<'a> {
children: ScopeChildren<'a>,
}
fn ChildrenComp<'a>((cx, props): Scope<'a, ChildrenTest<'a>>) -> Element<'a> {
cx.render(rsx! {
div {
div {
{&props.children}
}
}
})
}
fn ChildrenMemo((cx, props): Scope<()>) -> Element {
todo!()
}
-1
View File
@@ -1 +0,0 @@
fn main() {}
-17
View File
@@ -1,17 +0,0 @@
use std::time::Duration;
use dioxus_core::{lazynodes::LazyNodes, prelude::*};
// #[async_std::main]
fn main() {
static App: Component<()> =
|cx, props| cx.render(Some(LazyNodes::new(move |f| f.text(format_args!("hello")))));
let mut dom = VirtualDom::new(App);
dom.rebuild();
// let deadline = async_std::task::sleep(Duration::from_millis(50));
// let _fut = dom.run_with_deadline(|| deadline.);
}
+6 -6
View File
@@ -54,7 +54,7 @@ static AntipatternNoKeys: Component<NoKeysProps> = |cx| {
///
/// 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: Component<()> = |cx| {
static AntipatternNestedFragments: Component = |cx| {
// Try to avoid heavily nesting fragments
rsx!(cx,
Fragment {
@@ -82,7 +82,7 @@ static AntipatternNestedFragments: Component<()> = |cx| {
/// 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: Component<()> = |cx| {
static AntipatternRelyingOnSetState: Component = |cx| {
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: Component<()> = |cx| {
/// - 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: Component<()> = |cx, props| todo!();
static antipattern_component: Component = |cx| todo!();
/// Antipattern: Misusing hooks
/// ---------------------------
@@ -153,7 +153,7 @@ static AntipatternMisusedHooks: Component<MisuedHooksProps> = |cx| {
/// }
/// }
/// })
static _example: Component<()> = |cx, props| todo!();
static _example: Component = |cx| todo!();
/// Antipattern: publishing components and hooks with all features enabled
/// ----------------------------------------------------------------------
@@ -171,9 +171,9 @@ static _example: Component<()> = |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: Component<()> = |cx, props| todo!();
static __example: Component = |cx| todo!();
pub static Example: Component<()> = |cx| {
pub static Example: Component = |cx| {
cx.render(rsx! {
AntipatternNoKeys { data: std::collections::HashMap::new() }
AntipatternNestedFragments {}
+1 -1
View File
@@ -9,7 +9,7 @@
use dioxus::prelude::*;
pub static Example: Component<()> = |cx| {
pub static Example: Component = |cx| {
cx.render(rsx! {
div {
Greeting {
+2 -2
View File
@@ -18,7 +18,7 @@
use dioxus::prelude::*;
pub static Example: Component<()> = |cx| {
pub static Example: Component = |cx| {
cx.render(rsx! {
div {
Banner {
@@ -31,7 +31,7 @@ pub static Example: Component<()> = |cx| {
})
};
pub static Banner: Component<()> = |cx| {
pub static Banner: Component = |cx| {
cx.render(rsx! {
div {
h1 { "This is a great banner!" }
@@ -89,7 +89,7 @@ pub static Example2: Component<MyProps2> = |cx| {
})
};
pub static Example: Component<()> = |cx| {
pub static Example: Component = |cx| {
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: Component<()> = |cx| {
pub static Example: Component = |cx| {
cx.render(rsx! {
div {
@@ -10,7 +10,7 @@ pub static Example: Component<()> = |cx| {
};
// A controlled component:
static ControlledSelect: Component<()> = |cx| {
static ControlledSelect: Component = |cx| {
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: Component<()> = |cx| {
};
// TODO - how do uncontrolled things work?
static UncontrolledSelect: Component<()> = |cx| {
static UncontrolledSelect: Component = |cx| {
let value = use_state(&cx, || String::new());
cx.render(rsx! {
+1 -1
View File
@@ -11,7 +11,7 @@
use dioxus::prelude::*;
pub static Example: Component<()> = |cx| {
pub static Example: Component = |cx| {
cx.render(rsx! {
div {
custom_element {
+1 -1
View File
@@ -5,4 +5,4 @@
use dioxus::prelude::*;
pub static Example: Component<()> = |cx, props| cx.render(rsx! { Fragment {} });
pub static Example: Component = |cx| 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: Component<()> = |cx| {
static App: Component = |cx| {
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: Component<()> = |cx| {
static App1: Component = |cx| {
let data = match get_data() {
Some(data) => data,
None => return None,
@@ -46,7 +46,7 @@ static App1: Component<()> = |cx| {
/// a user is logged in.
///
/// Dioxus will throw an error in the console if the None-path is ever taken.
static App2: Component<()> = |cx| {
static App2: Component = |cx| {
let data = get_data()?;
cx.render(rsx!( div { "{data}" } ))
};
@@ -54,14 +54,14 @@ static App2: Component<()> = |cx| {
/// This is top-tier error handling since it displays a failure state.
///
/// However, the error is lacking in context.
static App3: Component<()> = |cx, props| match get_data() {
static App3: Component = |cx| 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: Component<()> = |cx| {
static App4: Component = |cx| {
let data = get_data_err().ok()?;
cx.render(rsx!( div { "{data}" } ))
};
@@ -69,7 +69,7 @@ static App4: Component<()> = |cx| {
/// 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: Component<()> = |cx, props| match get_data_err() {
static App5: Component = |cx| 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: Component<()> = |cx| {
static App1: Component = |cx| {
cx.render(rsx! {
h1 { }
h2 { }
@@ -20,7 +20,7 @@ static App1: Component<()> = |cx| {
};
// Using the Fragment component
static App2: Component<()> = |cx| {
static App2: Component = |cx| {
cx.render(rsx! {
Fragment {
div {}
@@ -31,7 +31,7 @@ static App2: Component<()> = |cx| {
};
// Using the `fragment` method on the NodeFactory
static App3: Component<()> = |cx| {
static App3: Component = |cx| {
cx.render(LazyNodes::new(move |fac| {
fac.fragment_from_iter([
fac.text(format_args!("A")),
@@ -42,7 +42,7 @@ static App3: Component<()> = |cx| {
}))
};
pub static Example: Component<()> = |cx| {
pub static Example: Component = |cx| {
cx.render(rsx! {
App1 {}
App2 {}
+1 -1
View File
@@ -19,7 +19,7 @@ h1 {color: blue;}
p {color: red;}
"#;
pub static Example: Component<()> = |cx| {
pub static Example: Component = |cx| {
cx.render(rsx! {
head { style { "{STYLE}" } }
body {
+2 -2
View File
@@ -10,7 +10,7 @@
use dioxus::prelude::*;
pub static Example: Component<()> = |cx| {
pub static Example: Component = |cx| {
cx.render(rsx! {
head {
style: { background_color: "powderblue" }
@@ -29,7 +29,7 @@ pub static Example: Component<()> = |cx| {
// .... 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: Component<()> = |cx| {
static Example2: Component = |cx| {
cx.render(rsx! {
div { color: "red"
"hello world!"
+1 -1
View File
@@ -12,7 +12,7 @@
use dioxus::prelude::*;
pub static Example: Component<()> = |cx| {
pub static Example: Component = |cx| {
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: Component<()> = |cx| {
pub static Example: Component = |cx| {
cx.render(rsx! {
ButtonList {}
NonUpdatingEvents {}
@@ -16,7 +16,7 @@ pub static Example: Component<()> = |cx| {
};
/// We can use `set_name` in multiple closures; the closures automatically *copy* the reference to set_name.
static ButtonList: Component<()> = |cx| {
static ButtonList: Component = |cx| {
let name = use_state(&cx, || "...?");
let names = ["jack", "jill", "john", "jane"]
@@ -33,7 +33,7 @@ static ButtonList: Component<()> = |cx| {
/// This shows how listeners may be without a visible change in the display.
/// Check the console.
static NonUpdatingEvents: Component<()> = |cx| {
static NonUpdatingEvents: Component = |cx| {
rsx!(cx, div {
button {
onclick: move |_| log::info!("Did not cause any updates!")
@@ -42,7 +42,7 @@ static NonUpdatingEvents: Component<()> = |cx| {
})
};
static DisablePropagation: Component<()> = |cx| {
static DisablePropagation: Component = |cx| {
rsx!(cx,
div {
onclick: move |_| log::info!("event propagated to the div!")
+4 -4
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: Component<()> = |cx| {
pub static Example: Component = |cx| {
cx.render(rsx! {
div { "100% memoized!" }
})
@@ -61,9 +61,9 @@ pub struct MyProps3<'a> {
name: &'a str,
}
// We need to manually specify a lifetime that ensures props and scope (the component's state) share the same lifetime.
// Using the `pub static Example: Component<()>` pattern _will_ specify a lifetime, but that lifetime will be static which might
// Using the `pub static Example: Component` pattern _will_ specify a lifetime, but that lifetime will be static which might
// not exactly be what you want
fn Example3<'a>(cx: Context<'a>, props: &'a MyProps3) -> DomTree<'a> {
fn Example3(cx: Scope<'a, MyProps3<'a>>) -> DomTree {
cx.render(rsx! {
div { "Not memoized! {cx.props.name}" }
})
@@ -77,7 +77,7 @@ pub struct MyProps4<'a> {
}
// We need to manually specify a lifetime that ensures props and scope (the component's state) share the same lifetime.
fn Example4<'a>(cx: Context<'a>, props: &'a MyProps4) -> DomTree<'a> {
fn Example4<'a>(cx: Scope<'a, MyProps4<'a>>) -> DomTree {
cx.render(rsx! {
div { "Not memoized!", onclick: move |_| (props.onhandle)() }
})
+1 -1
View File
@@ -1,7 +1,7 @@
use dioxus::prelude::*;
fn main() {}
pub static Example: Component<()> = |cx| {
pub static Example: Component = |cx| {
let p = 10;
cx.render(rsx! {
+1 -1
View File
@@ -1,7 +1,7 @@
use dioxus::prelude::*;
fn main() {}
pub static Example: Component<()> = |cx| {
pub static Example: Component = |cx| {
cx.render(rsx! {
div {
+1 -1
View File
@@ -9,7 +9,7 @@
use dioxus::prelude::*;
pub static Example: Component<()> = |cx| {
pub static Example: Component = |cx| {
let props = MyProps {
count: 0,
live: true,
+1 -1
View File
@@ -1,7 +1,7 @@
use dioxus::prelude::*;
fn main() {}
pub static Example: Component<()> = |cx| {
pub static Example: Component = |cx| {
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: Component<()> = |cx| {
pub static Example: Component = |cx| {
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: Component<()> = |cx| {
pub static Example: Component = |cx| {
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: Component<()> = |cx| {
pub static Example: Component = |cx| {
cx.render(rsx! {
div {
+2 -2
View File
@@ -1,7 +1,7 @@
use dioxus::prelude::*;
use dioxus::ssr;
pub static Example: Component<()> = |cx| {
pub static Example: Component = |cx| {
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: Component<()> = |cx| {
})
};
static SomeApp: Component<()> = |cx| {
static SomeApp: Component = |cx| {
cx.render(rsx! {
div { style: {background_color: "blue"}
h1 {"Some amazing app or component"}
+1 -1
View File
@@ -27,7 +27,7 @@ fn main() {
use dioxus::prelude::*;
static App: Component<()> = |cx| {
static App: Component = |cx| {
let p1 = use_state(&cx, || 0);
let p2 = use_state(&cx, || 0);
+1 -1
View File
@@ -19,7 +19,7 @@ pub struct Client {
pub description: String,
}
static App: Component<()> = |cx| {
static App: Component = |cx| {
let mut clients = use_ref(&cx, || vec![] as Vec<Client>);
let mut scene = use_state(&cx, || Scene::ClientsList);
+1 -1
View File
@@ -21,7 +21,7 @@ pub struct Client {
pub description: String,
}
static App: Component<()> = |cx| {
static App: Component = |cx| {
let mut scene = use_state(&cx, || Scene::ClientsList);
let clients = use_ref(&cx, || vec![] as Vec<Client>);
+1 -1
View File
@@ -8,7 +8,7 @@ fn main() {
dioxus_desktop::launch(App);
}
static App: Component<()> = |cx| {
static App: Component = |cx| {
cx.render(rsx!(
div {
"hello world!"
+4 -4
View File
@@ -32,7 +32,7 @@ pub struct TodoItem {
}
pub type Todos = HashMap<u32, TodoItem>;
pub static App: Component<()> = |cx| {
pub static App: Component = |cx| {
// Share our TodoList to the todos themselves
use_provide_state(cx, Todos::new);
@@ -140,7 +140,7 @@ pub fn TodoEntry((cx, props): Scope<TodoEntryProps>) -> Element {
let todos = use_shared_state::<Todos>(cx)?;
let _todos = todos.read();
let todo = _todos.get(&props.id)?;
let todo = _todos.get(&cx.props.id)?;
let is_editing = use_state(&cx, || false);
let completed = if todo.checked { "completed" } else { "" };
@@ -150,7 +150,7 @@ pub fn TodoEntry((cx, props): Scope<TodoEntryProps>) -> Element {
div { class: "view"
input { class: "toggle" r#type: "checkbox" id: "cbg-{todo.id}" checked: "{todo.checked}"
onchange: move |evt| {
if let Some(todo) = todos.write().get_mut(&props.id) {
if let Some(todo) = todos.write().get_mut(&cx.props.id) {
todo.checked = evt.value.parse().unwrap()
}
}
@@ -163,7 +163,7 @@ pub fn TodoEntry((cx, props): Scope<TodoEntryProps>) -> Element {
{is_editing.then(|| rsx!{
input { value: "{todo.contents}"
oninput: move |evt| {
if let Some(todo) = todos.write().get_mut(&props.id) {
if let Some(todo) = todos.write().get_mut(&cx.props.id) {
todo.contents = evt.value
}
},
+1 -1
View File
@@ -18,7 +18,7 @@ fn main() {
});
}
static App: Component<()> = |cx| {
static App: Component = |cx| {
let file_manager = use_ref(&cx, Files::new);
let files = file_manager.read();
+1 -22
View File
@@ -30,7 +30,7 @@ impl Label {
}
}
static App: Component<()> = |cx| {
static App: Component = |cx| {
let mut items = use_ref(&cx, || vec![]);
let mut selected = use_state(&cx, || None);
@@ -140,24 +140,3 @@ static NOUNS: &[&str] = &[
"table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger",
"pizza", "mouse", "keyboard",
];
// #[derive(PartialEq, Props)]
// struct RowProps<'a> {
// row_id: usize,
// label: &'a Label,
// }
// fn Row(cx: Context, props: &RowProps) -> Element {
// rsx!(cx, tr {
// td { class:"col-md-1", "{cx.props.row_id}" }
// td { class:"col-md-1", onclick: move |_| { /* run onselect */ }
// a { class: "lbl", {cx.props.label.labels} }
// }
// td { class: "col-md-1"
// a { class: "remove", onclick: move |_| {/* remove */}
// span { class: "glyphicon glyphicon-remove remove" aria_hidden: "true" }
// }
// }
// td { class: "col-md-6" }
// })
// }
+1 -1
View File
@@ -19,7 +19,7 @@ fn main() {
dioxus::desktop::launch_cfg(App, |c| c.with_prerendered(content));
}
static App: Component<()> = |cx| {
static App: Component = |cx| {
let mut val = use_state(&cx, || 0);
cx.render(rsx! {
+1 -1
View File
@@ -33,7 +33,7 @@ fn main() {
AppendChildren { many: 1 },
];
let app: Component<()> = |cx| rsx!(cx, div { "some app" });
let app: Component = |cx| rsx!(cx, div { "some app" });
dioxus_desktop::run(app, (), |c| c.with_edits(edits));
}
+1 -1
View File
@@ -33,7 +33,7 @@ fn main() {
});
}
static App: Component<()> = |cx| {
static App: Component = |cx| {
let state = use_ref(&cx, || Calculator::new());
let clear_display = state.read().display_value.eq("0");
+1 -1
View File
@@ -11,7 +11,7 @@ fn main() {
dioxus::desktop::launch(App);
}
pub static App: Component<()> = |cx| {
pub static App: Component = |cx| {
let state = use_state(&cx, PlayerState::new);
let is_playing = state.is_playing();
+1 -1
View File
@@ -7,7 +7,7 @@ fn main() {
dioxus::desktop::launch(App);
}
static App: Component<()> = |cx| {
static App: Component = |cx| {
let mut count = use_state(&cx, || 0);
cx.render(rsx! {
+1 -1
View File
@@ -23,7 +23,7 @@ pub enum Route {
NotFound,
}
static App: Component<()> = |cx| {
static App: Component = |cx| {
let route = use_router(&cx, Route::parse);
cx.render(rsx! {
+1 -1
View File
@@ -49,7 +49,7 @@ const NONE_ELEMENT: Option<()> = None;
use baller::Baller;
use dioxus::prelude::*;
pub static EXAMPLE: Component<()> = |cx| {
pub static EXAMPLE: Component = |cx| {
let formatting = "formatting!";
let formatting_tuple = ("a", "b");
let lazy_fmt = format_args!("lazily formatted text");
+1 -1
View File
@@ -7,7 +7,7 @@ fn main() {
println!("{}", ssr::render_vdom(&vdom));
}
static APP: Component<()> = |cx| {
static APP: Component = |cx| {
cx.render(rsx!(
div {
h1 { "Title" }
+1 -1
View File
@@ -12,7 +12,7 @@ fn main() {
)
}
pub static App: Component<()> = |cx| {
pub static App: Component = |cx| {
cx.render(rsx!(
div {
class: "overflow-hidden"
+6 -6
View File
@@ -24,7 +24,7 @@ fn main() {
.unwrap();
}
pub static App: Component<()> = |cx| {
pub static App: Component = |cx| {
cx.render(rsx!(
div { class: "overflow-hidden"
link { href:"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel:"stylesheet" }
@@ -39,7 +39,7 @@ pub static App: Component<()> = |cx| {
))
};
pub static Header: Component<()> = |cx| {
pub static Header: Component = |cx| {
cx.render(rsx! {
div {
header { class: "text-gray-400 bg-gray-900 body-font"
@@ -65,7 +65,7 @@ pub static Header: Component<()> = |cx| {
})
};
pub static Hero: Component<()> = |cx| {
pub static Hero: Component = |cx| {
//
cx.render(rsx! {
section{ class: "text-gray-400 bg-gray-900 body-font"
@@ -103,7 +103,7 @@ pub static Hero: Component<()> = |cx| {
}
})
};
pub static Entry: Component<()> = |cx| {
pub static Entry: Component = |cx| {
//
cx.render(rsx! {
section{ class: "text-gray-400 bg-gray-900 body-font"
@@ -116,7 +116,7 @@ pub static Entry: Component<()> = |cx| {
})
};
pub static StacksIcon: Component<()> = |cx| {
pub static StacksIcon: Component = |cx| {
cx.render(rsx!(
svg {
xmlns: "http://www.w3.org/2000/svg"
@@ -131,7 +131,7 @@ pub static StacksIcon: Component<()> = |cx| {
}
))
};
pub static RightArrowIcon: Component<()> = |cx| {
pub static RightArrowIcon: Component = |cx| {
cx.render(rsx!(
svg {
fill: "none"
+6 -6
View File
@@ -14,7 +14,7 @@ fn main() {
const STYLE: &str = "body {overflow:hidden;}";
pub static App: Component<()> = |cx| {
pub static App: Component = |cx| {
cx.render(rsx!(
div { class: "overflow-hidden"
style { "{STYLE}" }
@@ -30,7 +30,7 @@ pub static App: Component<()> = |cx| {
))
};
pub static Header: Component<()> = |cx| {
pub static Header: Component = |cx| {
cx.render(rsx! {
div {
header { class: "text-gray-400 bg-gray-900 body-font"
@@ -56,7 +56,7 @@ pub static Header: Component<()> = |cx| {
})
};
pub static Hero: Component<()> = |cx| {
pub static Hero: Component = |cx| {
//
cx.render(rsx! {
section{ class: "text-gray-400 bg-gray-900 body-font"
@@ -94,7 +94,7 @@ pub static Hero: Component<()> = |cx| {
}
})
};
pub static Entry: Component<()> = |cx| {
pub static Entry: Component = |cx| {
//
cx.render(rsx! {
section{ class: "text-gray-400 bg-gray-900 body-font"
@@ -107,7 +107,7 @@ pub static Entry: Component<()> = |cx| {
})
};
pub static StacksIcon: Component<()> = |cx| {
pub static StacksIcon: Component = |cx| {
cx.render(rsx!(
svg {
// xmlns: "http://www.w3.org/2000/svg"
@@ -122,7 +122,7 @@ pub static StacksIcon: Component<()> = |cx| {
}
))
};
pub static RightArrowIcon: Component<()> = |cx| {
pub static RightArrowIcon: Component = |cx| {
cx.render(rsx!(
svg {
fill: "none"
+1 -1
View File
@@ -22,7 +22,7 @@ pub struct TodoItem {
}
const STYLE: &str = include_str!("./assets/todomvc.css");
const App: Component<()> = |cx| {
const App: Component = |cx| {
let draft = use_state(&cx, || "".to_string());
let todos = use_state(&cx, || HashMap::<u32, Rc<TodoItem>>::new());
let filter = use_state(&cx, || FilterState::All);
+1 -1
View File
@@ -12,7 +12,7 @@ fn main() {
const ENDPOINT: &str = "https://api.openweathermap.org/data/2.5/weather";
static App: Component<()> = |cx| {
static App: Component = |cx| {
//
let body = use_suspense(
cx,
+1 -1
View File
@@ -16,7 +16,7 @@ struct DogApi {
message: String,
}
static APP: Component<()> = |(cx, _props)| {
static APP: Component = |(cx, _props)| {
let state = use_state(&cx, || 0);
const ENDPOINT: &str = "https://dog.ceo/api/breeds/image/random/";
+4 -4
View File
@@ -14,7 +14,7 @@ fn main() {
dioxus_web::launch(APP)
}
static APP: Component<()> = |cx| {
static APP: Component = |cx| {
let mut count = use_state(&cx, || 3);
let content = use_state(&cx, || String::from("h1"));
let text_content = use_state(&cx, || String::from("Hello, world!"));
@@ -68,13 +68,13 @@ static APP: Component<()> = |cx| {
})
};
fn render_bullets(cx: Context) -> Element {
fn render_bullets(cx: Scope) -> Element {
rsx!(cx, div {
"bite me"
})
}
fn render_list(cx: Context, count: usize) -> Element {
fn render_list(cx: Scope, count: usize) -> Element {
let items = (0..count).map(|f| {
rsx! {
li { "a - {f}" }
@@ -86,4 +86,4 @@ fn render_list(cx: Context, count: usize) -> Element {
rsx!(cx, ul { {items} })
}
static CHILD: Component<()> = |cx, _| rsx!(cx, div {"hello child"});
static CHILD: Component = |cx, _| rsx!(cx, div {"hello child"});
+1 -1
View File
@@ -24,7 +24,7 @@ fn main() {
dioxus_web::launch(App)
}
static App: Component<()> = |cx| {
static App: Component = |cx| {
let mut state = use_state(&cx, || 0);
cx.render(rsx! {
div {
+2 -2
View File
@@ -23,7 +23,7 @@ fn main() {
// dioxus::web::launch(App);
}
static App: Component<()> = |cx| {
static App: Component = |cx| {
dbg!("rednering parent");
cx.render(rsx! {
div {
@@ -40,7 +40,7 @@ static App: Component<()> = |cx| {
})
};
static But: Component<()> = |cx| {
static But: Component = |cx| {
let mut count = use_state(&cx, || 0);
// let d = Dropper { name: "asd" };
+1 -1
View File
@@ -28,7 +28,7 @@ pub struct Client {
pub description: String,
}
static App: Component<()> = |cx| {
static App: Component = |cx| {
let scene = use_state(&cx, || Scene::ClientsList);
let clients = use_ref(&cx, || vec![] as Vec<Client>);
+6 -6
View File
@@ -24,7 +24,7 @@ fn main() {
dioxus_web::launch(App)
}
pub static App: Component<()> = |cx| {
pub static App: Component = |cx| {
cx.render(rsx!(
div { class: "overflow-hidden"
link { href:"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel:"stylesheet" }
@@ -39,7 +39,7 @@ pub static App: Component<()> = |cx| {
))
};
pub static Header: Component<()> = |cx| {
pub static Header: Component = |cx| {
cx.render(rsx! {
div {
header { class: "text-gray-400 bg-gray-900 body-font"
@@ -65,7 +65,7 @@ pub static Header: Component<()> = |cx| {
})
};
pub static Hero: Component<()> = |cx| {
pub static Hero: Component = |cx| {
//
cx.render(rsx! {
section{ class: "text-gray-400 bg-gray-900 body-font"
@@ -103,7 +103,7 @@ pub static Hero: Component<()> = |cx| {
}
})
};
pub static Entry: Component<()> = |cx| {
pub static Entry: Component = |cx| {
//
cx.render(rsx! {
section{ class: "text-gray-400 bg-gray-900 body-font"
@@ -116,7 +116,7 @@ pub static Entry: Component<()> = |cx| {
})
};
pub static StacksIcon: Component<()> = |cx| {
pub static StacksIcon: Component = |cx| {
cx.render(rsx!(
svg {
// xmlns: "http://www.w3.org/2000/svg"
@@ -131,7 +131,7 @@ pub static StacksIcon: Component<()> = |cx| {
}
))
};
pub static RightArrowIcon: Component<()> = |cx| {
pub static RightArrowIcon: Component = |cx| {
cx.render(rsx!(
svg {
fill: "none"
+1 -1
View File
@@ -19,7 +19,7 @@ fn main() {
dioxus::web::launch(App);
}
static App: Component<()> = |cx| {
static App: Component = |cx| {
let mut rng = SmallRng::from_entropy();
let rows = (0..1_000).map(|f| {
let label = Label::new(&mut rng);
+1 -1
View File
@@ -16,7 +16,7 @@ fn main() {
dioxus::web::launch(App);
}
static App: Component<()> = |cx| {
static App: Component = |cx| {
let mut count = use_state(&cx, || 0);
cx.render(rsx! {