fix: readme and examples syntax
This commit is contained in:
1 parent
f24aae8787
commit
3dc0e59876
102 files changed
+213
-1222
No files matched your search
+12
-12
@@ -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
@@ -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);
|
||||
|
||||
|
||||
@@ -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(""));
|
||||
|
||||
@@ -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(
|
||||
|
||||
@@ -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!()
|
||||
};
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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 +0,0 @@
|
||||
fn main( ) {}
|
||||
@@ -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,
|
||||
// )
|
||||
// }))
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
}
|
||||
})
|
||||
};
|
||||
@@ -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 +0,0 @@
|
||||
fn main() {}
|
||||
@@ -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.);
|
||||
}
|
||||
@@ -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 {}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
use dioxus::prelude::*;
|
||||
|
||||
pub static Example: Component<()> = |cx| {
|
||||
pub static Example: Component = |cx| {
|
||||
cx.render(rsx! {
|
||||
div {
|
||||
Greeting {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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! {
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
use dioxus::prelude::*;
|
||||
|
||||
pub static Example: Component<()> = |cx| {
|
||||
pub static Example: Component = |cx| {
|
||||
cx.render(rsx! {
|
||||
div {
|
||||
custom_element {
|
||||
|
||||
@@ -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 {} });
|
||||
@@ -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}" } )),
|
||||
};
|
||||
|
||||
@@ -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 {}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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!"
|
||||
|
||||
@@ -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| {
|
||||
|
||||
@@ -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!")
|
||||
|
||||
@@ -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,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,7 +1,7 @@
|
||||
use dioxus::prelude::*;
|
||||
fn main() {}
|
||||
|
||||
pub static Example: Component<()> = |cx| {
|
||||
pub static Example: Component = |cx| {
|
||||
cx.render(rsx! {
|
||||
div {
|
||||
|
||||
|
||||
@@ -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,7 +1,7 @@
|
||||
use dioxus::prelude::*;
|
||||
fn main() {}
|
||||
|
||||
pub static Example: Component<()> = |cx| {
|
||||
pub static Example: Component = |cx| {
|
||||
cx.render(rsx! {
|
||||
div {
|
||||
|
||||
|
||||
@@ -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>(),
|
||||
|
||||
@@ -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,6 +1,6 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
pub static Example: Component<()> = |cx| {
|
||||
pub static Example: Component = |cx| {
|
||||
cx.render(rsx! {
|
||||
div {
|
||||
|
||||
|
||||
@@ -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"}
|
||||
|
||||
@@ -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
@@ -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);
|
||||
|
||||
|
||||
@@ -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>);
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ fn main() {
|
||||
dioxus_desktop::launch(App);
|
||||
}
|
||||
|
||||
static App: Component<()> = |cx| {
|
||||
static App: Component = |cx| {
|
||||
cx.render(rsx!(
|
||||
div {
|
||||
"hello world!"
|
||||
|
||||
@@ -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
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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();
|
||||
|
||||
|
||||
@@ -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" }
|
||||
// })
|
||||
// }
|
||||
@@ -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! {
|
||||
|
||||
@@ -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));
|
||||
}
|
||||
@@ -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");
|
||||
|
||||
@@ -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
@@ -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
@@ -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! {
|
||||
|
||||
@@ -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
@@ -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" }
|
||||
|
||||
@@ -12,7 +12,7 @@ fn main() {
|
||||
)
|
||||
}
|
||||
|
||||
pub static App: Component<()> = |cx| {
|
||||
pub static App: Component = |cx| {
|
||||
cx.render(rsx!(
|
||||
div {
|
||||
class: "overflow-hidden"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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
@@ -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);
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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/";
|
||||
|
||||
@@ -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"});
|
||||
@@ -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 {
|
||||
|
||||
@@ -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" };
|
||||
|
||||
@@ -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>);
|
||||
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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! {
|
||||
|
||||
Reference in new issue
Block a user