mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-11-10 06:34:20 +00:00
fix: readme and examples syntax
This commit is contained in:
parent
f24aae8787
commit
3dc0e59876
102 changed files with 213 additions and 1222 deletions
36
README.md
36
README.md
|
@ -23,30 +23,24 @@
|
|||
</a>
|
||||
<!-- CI -->
|
||||
<a href="https://github.com/jkelleyrtp/dioxus/actions">
|
||||
<img src="https://github.com/jkelleyrtp/dioxus/workflows/CI/badge.svg"
|
||||
<img src="https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg"
|
||||
alt="CI status" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div align="center">
|
||||
<h3>
|
||||
<a href="https://docs.rs/dioxus">
|
||||
API Docs
|
||||
</a>
|
||||
<a href="https://dioxuslabs.com/guide"> Guide </a>
|
||||
<span> | </span>
|
||||
<a href="https://docs.rs/dioxus">
|
||||
Website
|
||||
</a>
|
||||
<a href="https://dioxuslabs.com"> Website </a>
|
||||
<span> | </span>
|
||||
<a href="https://docs.rs/dioxus">
|
||||
Examples
|
||||
</a>
|
||||
<a href="https://github.com/DioxusLabs/awesome-dioxus"> Examples </a>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
Dioxus is a portable, performant, and ergonomic framework for building cross-platform user experiences in Rust.
|
||||
Dioxus is a portable, performant, and ergonomic framework for building cross-platform user interfaces in Rust.
|
||||
|
||||
```rust
|
||||
fn app(cx: Scope) -> Element {
|
||||
|
@ -67,21 +61,21 @@ If you know React, then you already know Dioxus.
|
|||
### Unique features:
|
||||
- Desktop apps running natively (no Electron!) in less than 10 lines of code.
|
||||
- Incredibly ergonomic and powerful state management.
|
||||
- Incredible inline documentation - hover and guides for all HTML elements, listeners, and events.
|
||||
- Comprehensive inline documentation - hover and guides for all HTML elements, listeners, and events.
|
||||
- Extremely memory efficient - 0 global allocations for steady-state components.
|
||||
- Multithreaded asynchronous coroutine scheduler for first-class async support.
|
||||
- And more! Read the full release post here.
|
||||
- Multi-channel asynchronous scheduler for first-class async support.
|
||||
- And more! Read the [full release post here](https://dioxuslabs.com/).
|
||||
|
||||
## Get Started with...
|
||||
|
||||
<table style="width:100%" align="center">
|
||||
<tr >
|
||||
<th><a href="https://dioxuslabs.com/book/">Web</a></th>
|
||||
<th><a href="https://dioxuslabs.com/book/">Desktop</a></th>
|
||||
<th><a href="https://dioxuslabs.com/book/">Mobile</a></th>
|
||||
<th><a href="https://dioxuslabs.com/book/">State</a></th>
|
||||
<th><a href="https://dioxuslabs.com/book/">Docs</a></th>
|
||||
<th><a href="https://dioxuslabs.com/book/">Tools</a></th>
|
||||
<th><a href="https://dioxuslabs.com/guide/">Web</a></th>
|
||||
<th><a href="https://dioxuslabs.com/guide/">Desktop</a></th>
|
||||
<th><a href="https://dioxuslabs.com/guide/">Mobile</a></th>
|
||||
<th><a href="https://dioxuslabs.com/guide/">State</a></th>
|
||||
<th><a href="https://dioxuslabs.com/guide/">Docs</a></th>
|
||||
<th><a href="https://dioxuslabs.com/guide/">Tools</a></th>
|
||||
<tr>
|
||||
</table>
|
||||
|
||||
|
@ -182,7 +176,7 @@ Dioxus is heavily inspired by React, but we want your transition to feel like an
|
|||
|
||||
This project is licensed under the [MIT license].
|
||||
|
||||
[MIT license]: https://github.com/tokio-rs/tokio/blob/master/LICENSE
|
||||
[MIT license]: https://github.com/dioxuslabs/dioxus/blob/master/LICENSE
|
||||
|
||||
### Contribution
|
||||
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
Yew subscriptions are used to schedule update for components into the future. The `Context` object can create subscriptions:
|
||||
|
||||
```rust
|
||||
fn Component(cx: Component<()>) -> DomTree {
|
||||
fn Component(cx: Component) -> DomTree {
|
||||
let update = cx.schedule();
|
||||
|
||||
// Now, when the subscription is called, the component will be re-evaluated
|
||||
|
|
|
@ -21,9 +21,9 @@ fn test() -> DomTree {
|
|||
}
|
||||
}
|
||||
|
||||
static TestComponent: Component<()> = |cx| html!{<div>"Hello world"</div>};
|
||||
static TestComponent: Component = |cx| html!{<div>"Hello world"</div>};
|
||||
|
||||
static TestComponent: Component<()> = |cx|{
|
||||
static TestComponent: Component = |cx|{
|
||||
let g = "BLAH";
|
||||
html! {
|
||||
<div> "Hello world" </div>
|
||||
|
|
|
@ -96,7 +96,7 @@ Sometimes you want a signal to propagate across your app, either through far-awa
|
|||
|
||||
```rust
|
||||
const TITLE: Atom<String> = || "".to_string();
|
||||
const Provider: Component<()> = |cx|{
|
||||
const Provider: Component = |cx|{
|
||||
let title = use_signal(&cx, &TITLE);
|
||||
rsx!(cx, input { value: title })
|
||||
};
|
||||
|
@ -105,7 +105,7 @@ const Provider: Component<()> = |cx|{
|
|||
If we use the `TITLE` atom in another component, we can cause updates to flow between components without calling render or diffing either component trees:
|
||||
|
||||
```rust
|
||||
const Receiver: Component<()> = |cx|{
|
||||
const Receiver: Component = |cx|{
|
||||
let title = use_signal(&cx, &TITLE);
|
||||
log::info!("This will only be called once!");
|
||||
rsx!(cx,
|
||||
|
@ -132,7 +132,7 @@ Dioxus automatically understands how to use your signals when mixed with iterato
|
|||
|
||||
```rust
|
||||
const DICT: AtomFamily<String, String> = |_| {};
|
||||
const List: Component<()> = |cx|{
|
||||
const List: Component = |cx|{
|
||||
let dict = use_signal(&cx, &DICT);
|
||||
cx.render(rsx!(
|
||||
ul {
|
||||
|
|
|
@ -83,7 +83,7 @@ fn App(cx: Scope)-> Element {
|
|||
|
||||
This syntax even enables us to write a one-line component:
|
||||
```rust
|
||||
static App: Component<()> = |cx| rsx!(cx, "hello world!");
|
||||
static App: Component = |cx| rsx!(cx, "hello world!");
|
||||
```
|
||||
|
||||
Alternatively, for match statements, we can just return the builder itself and pass it into a final, single call to `cx.render`:
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
Astute observers might have noticed that `Element` is actually a type alias for `Option<VNode>`. You don't need to know what a `VNode` is, but it's important to recognize that we could actually return nothing at all:
|
||||
|
||||
```rust
|
||||
fn App((cx, props): Component<()>) -> Element {
|
||||
fn App((cx, props): Component) -> Element {
|
||||
None
|
||||
}
|
||||
```
|
||||
|
|
|
@ -25,7 +25,7 @@ fn main() {
|
|||
dioxus::desktop::launch(App);
|
||||
}
|
||||
|
||||
fn App((cx, props): Component<()>) -> Element {}
|
||||
fn App((cx, props): Component) -> Element {}
|
||||
|
||||
#[derive(PartialEq, Props)]
|
||||
struct PostProps{}
|
||||
|
@ -92,7 +92,7 @@ fn main() {
|
|||
|
||||
mod post;
|
||||
|
||||
fn App((cx, props): Component<()>) -> Element {
|
||||
fn App((cx, props): Component) -> Element {
|
||||
cx.render(rsx!{
|
||||
post::Post {
|
||||
id: Uuid::new_v4(),
|
||||
|
@ -191,7 +191,7 @@ fn main() {
|
|||
|
||||
mod post;
|
||||
|
||||
fn App((cx, props): Component<()>) -> Element {
|
||||
fn App((cx, props): Component) -> Element {
|
||||
cx.render(rsx!{
|
||||
post::Post {
|
||||
id: Uuid::new_v4(),
|
||||
|
|
|
@ -135,7 +135,7 @@ fn App(cx: Scope) -> Element {
|
|||
Writing `fn App(cx: Scope) -> Element {` might become tedious. Rust will also let you write functions as static closures, but these types of Components cannot have props that borrow data.
|
||||
|
||||
```rust
|
||||
static App: Component<()> = |cx| cx.render(rsx!(div { "Hello, world!" }));
|
||||
static App: Component = |cx| cx.render(rsx!(div { "Hello, world!" }));
|
||||
```
|
||||
|
||||
### What is this `Context` object?
|
||||
|
|
|
@ -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}" }))
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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! {
|
||||
|
|
|
@ -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");
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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! {
|
||||
|
|
|
@ -12,7 +12,7 @@ https://github.com/rustwasm/gloo
|
|||
For example, resize observer would function like this:
|
||||
|
||||
```rust
|
||||
pub static Example: Component<()> = |cx, props|{
|
||||
pub static Example: Component = |cx| {
|
||||
let observer = use_resize_observer();
|
||||
|
||||
cx.render(rsx!(
|
||||
|
|
|
@ -153,13 +153,13 @@ Notice that LiveComponent receivers (the client-side interpretation of a LiveCom
|
|||
The `VNodeTree` type is a very special type that allows VNodes to be created using a pluggable allocator. The html! macro creates something that looks like:
|
||||
|
||||
```rust
|
||||
pub static Example: Component<()> = |cx, props|{
|
||||
pub static Example: Component = |cx| {
|
||||
html! { <div> "blah" </div> }
|
||||
};
|
||||
|
||||
// expands to...
|
||||
|
||||
pub static Example: Component<()> = |cx, props|{
|
||||
pub static Example: Component = |cx| {
|
||||
// This function converts a Fn(allocator) -> DomTree closure to a VNode struct that will later be evaluated.
|
||||
html_macro_to_vnodetree(move |allocator| {
|
||||
let mut node0 = allocator.alloc(VElement::div);
|
||||
|
@ -216,7 +216,7 @@ struct ExampleContext {
|
|||
items: Vec<String>
|
||||
}
|
||||
|
||||
fn Example<'src>(cx: Context<'src, ()>) -> DomTree<'src> {
|
||||
fn Example<'src>(cx: Scope<'src, ()>) -> DomTree<'src> {
|
||||
let val: &'b ContextGuard<ExampleContext> = (&'b cx).use_context(|context: &'other ExampleContext| {
|
||||
// always select the last element
|
||||
context.items.last()
|
||||
|
@ -313,7 +313,7 @@ Here's how react does it:
|
|||
Any "dirty" node causes an entire subtree render. Calling "setState" at the very top will cascade all the way down. This is particularly bad for this component design:
|
||||
|
||||
```rust
|
||||
static APP: Component<()> = |cx, props|{
|
||||
static APP: Component = |cx| {
|
||||
let title = use_context(Title);
|
||||
cx.render(html!{
|
||||
<div>
|
||||
|
@ -334,7 +334,7 @@ static APP: Component<()> = |cx, props|{
|
|||
</div>
|
||||
})
|
||||
};
|
||||
static HEAVY_LIST: Component<()> = |cx, props|{
|
||||
static HEAVY_LIST: Component = |cx| {
|
||||
cx.render({
|
||||
{0.100.map(i => <BigElement >)}
|
||||
})
|
||||
|
@ -348,7 +348,7 @@ An update to the use_context subscription will mark the node as dirty. The node
|
|||
The FC layout was altered to make life easier for us inside the VirtualDom. The "view" function returns an unbounded VNode object. Calling the "view" function is unsafe under the hood, but prevents lifetimes from leaking out of the function call. Plus, it's easier to write. Because there are no lifetimes on the output (occur purely under the hood), we can escape needing to annotate them.
|
||||
|
||||
```rust
|
||||
fn component(cx: Context, props: &Props) -> DomTree {
|
||||
fn component(cx: Scope<Props>) -> DomTree {
|
||||
|
||||
}
|
||||
```
|
||||
|
@ -378,7 +378,7 @@ struct Props {
|
|||
|
||||
}
|
||||
|
||||
static Component: Component<Props> = |cx, props|{
|
||||
static Component: Component<Props> = |cx| {
|
||||
|
||||
}
|
||||
```
|
||||
|
|
|
@ -1,337 +0,0 @@
|
|||
use proc_macro2::TokenStream;
|
||||
use quote::{quote, ToTokens};
|
||||
|
||||
use syn::{
|
||||
parse::{Parse, ParseStream},
|
||||
Signature,
|
||||
};
|
||||
use syn::{Attribute, Block, FnArg, Ident, Item, ItemFn, ReturnType, Type, Visibility};
|
||||
|
||||
/// A parsed version of the user's input
|
||||
pub struct FunctionComponent {
|
||||
// The actual contents of the function
|
||||
block: Box<Block>,
|
||||
|
||||
// // The user's props type
|
||||
// props_type: Box<Type>,
|
||||
arg: FnArg,
|
||||
vis: Visibility,
|
||||
attrs: Vec<Attribute>,
|
||||
name: Ident,
|
||||
return_type: Box<Type>,
|
||||
}
|
||||
|
||||
impl Parse for FunctionComponent {
|
||||
fn parse(input: ParseStream) -> syn::Result<Self> {
|
||||
let parsed: Item = input.parse()?;
|
||||
|
||||
// Convert the parsed input into the Function block
|
||||
let ItemFn {
|
||||
attrs,
|
||||
vis,
|
||||
sig,
|
||||
block,
|
||||
} = ensure_fn_block(parsed)?;
|
||||
|
||||
// Validate the user's signature
|
||||
let sig = validate_signature(sig)?;
|
||||
|
||||
// Validate the return type is actually something
|
||||
let return_type = ensure_return_type(sig.output)?;
|
||||
|
||||
// Get all the function args
|
||||
let mut inputs = sig.inputs.into_iter();
|
||||
|
||||
// Collect the first arg
|
||||
let first_arg: FnArg = inputs
|
||||
.next()
|
||||
.unwrap_or_else(|| syn::parse_quote! { _: &() });
|
||||
|
||||
// Extract the "context" object
|
||||
// let props_type = validate_context_arg(&first_arg)?;
|
||||
|
||||
/*
|
||||
Extract the rest of the function arguments into a struct body
|
||||
We require all inputs are strongly typed with names so we can destructure into the function body when expanded
|
||||
|
||||
|
||||
*/
|
||||
// let rest = inputs
|
||||
// .map(|f| {
|
||||
// //
|
||||
// match f {
|
||||
// FnArg::Typed(pat) => {
|
||||
// match *pat.pat {
|
||||
// syn::Pat::Type(asd) => {}
|
||||
// _ => {}
|
||||
// };
|
||||
// //
|
||||
// }
|
||||
// FnArg::Receiver(_) => {}
|
||||
// }
|
||||
// // let name = f
|
||||
// let stream = f.into_token_stream();
|
||||
// (stream)
|
||||
// })
|
||||
// .collect::<Vec<_>>();
|
||||
|
||||
// Collect the rest of the args into a list of definitions to be used by the inline struct
|
||||
|
||||
// Checking after param parsing may make it a little inefficient
|
||||
// but that's a requirement for better error messages in case of receivers
|
||||
// `>0` because first one is already consumed.
|
||||
// if inputs.len() > 0 {
|
||||
// let params: TokenStream = inputs.map(|it| it.to_token_stream()).collect();
|
||||
// return Err(syn::Error::new_spanned(
|
||||
// params,
|
||||
// "function components can accept at most one parameter for the props",
|
||||
// ));
|
||||
// }
|
||||
let name = sig.ident;
|
||||
|
||||
Ok(Self {
|
||||
// props_type,
|
||||
block,
|
||||
arg: first_arg,
|
||||
vis,
|
||||
attrs,
|
||||
name,
|
||||
return_type,
|
||||
})
|
||||
}
|
||||
}
|
||||
impl ToTokens for FunctionComponent {
|
||||
fn to_tokens(&self, tokens: &mut TokenStream) {
|
||||
// let FunctionComponentName { component_name } = name;
|
||||
|
||||
let FunctionComponent {
|
||||
block,
|
||||
// props_type,
|
||||
arg: _,
|
||||
vis: _,
|
||||
attrs: _,
|
||||
name: function_name,
|
||||
return_type: _,
|
||||
} = self;
|
||||
|
||||
// if function_name == component_name {
|
||||
// return Err(syn::Error::new_spanned(
|
||||
// component_name,
|
||||
// "the component must not have the same name as the function",
|
||||
// ));
|
||||
// }
|
||||
|
||||
let quoted = quote! {
|
||||
|
||||
|
||||
#[doc(hidden)]
|
||||
#[allow(non_camel_case_types)]
|
||||
#[derive(PartialEq)]
|
||||
pub struct #function_name<'a> {
|
||||
// and some other attrs
|
||||
___p: std::marker::PhantomData<&'a ()>
|
||||
}
|
||||
|
||||
impl<'a> FC for #function_name<'a> {
|
||||
fn render(cx: Context<'_>, props: &#function_name<'a>) -> VNode {
|
||||
let #function_name {
|
||||
..
|
||||
} = props;
|
||||
|
||||
#block
|
||||
}
|
||||
}
|
||||
|
||||
// mod __component_blah {
|
||||
// use super::*;
|
||||
|
||||
// #[derive(PartialEq)]
|
||||
// pub struct Props<'a> {
|
||||
// name: &'a str
|
||||
// }
|
||||
|
||||
// pub fn component<'a>(cx: &'a Context<'a, Props>) -> VNode<'a> {
|
||||
// // Destructure the props into the parent scope
|
||||
// // todo: handle expansion of lifetimes
|
||||
// let Props {
|
||||
// name
|
||||
// } = cx.props;
|
||||
|
||||
// #block
|
||||
// }
|
||||
// }
|
||||
// #[allow(non_snake_case)]
|
||||
// pub use __component_blah::component as #function_name;
|
||||
};
|
||||
|
||||
quoted.to_tokens(tokens);
|
||||
// let quoted = quote! {
|
||||
// #[doc(hidden)]
|
||||
// #[allow(non_camel_case_types)]
|
||||
// #vis struct #function_name;
|
||||
|
||||
// impl ::yew_functional::FunctionProvider for #function_name {
|
||||
// type TProps = #props_type;
|
||||
|
||||
// fn run(#arg) -> #ret_type {
|
||||
// #block
|
||||
// }
|
||||
// }
|
||||
|
||||
// #(#attrs)*
|
||||
// #vis type #component_name = ::yew_functional::FunctionComponent<#function_name>;
|
||||
// };
|
||||
}
|
||||
}
|
||||
|
||||
/// Ensure the user's input is actually a functional component
|
||||
pub fn ensure_fn_block(item: Item) -> syn::Result<ItemFn> {
|
||||
match item {
|
||||
Item::Fn(it) => Ok(it),
|
||||
Item::Static(it) => {
|
||||
let syn::ItemStatic {
|
||||
attrs: _,
|
||||
vis: _,
|
||||
static_token: _,
|
||||
mutability: _,
|
||||
ident: _,
|
||||
colon_token: _,
|
||||
ty,
|
||||
eq_token: _,
|
||||
expr: _,
|
||||
semi_token: _,
|
||||
} = ⁢
|
||||
match ty.as_ref() {
|
||||
Type::BareFn(_bare) => {}
|
||||
// Type::Array(_)
|
||||
// | Type::Group(_)
|
||||
// | Type::ImplTrait(_)
|
||||
// | Type::Infer(_)
|
||||
// | Type::Macro(_)
|
||||
// | Type::Never(_)
|
||||
// | Type::Paren(_)
|
||||
// | Type::Path(_)
|
||||
// | Type::Ptr(_)
|
||||
// | Type::Reference(_)
|
||||
// | Type::Slice(_)
|
||||
// | Type::TraitObject(_)
|
||||
// | Type::Tuple(_)
|
||||
// | Type::Verbatim(_)
|
||||
_ => {}
|
||||
};
|
||||
|
||||
// TODO: Add support for static block
|
||||
// Ensure that the contents of the static block can be extracted to a function
|
||||
// TODO: @Jon
|
||||
// Decide if statics should be converted to functions (under the hood) or stay as statics
|
||||
// They _do_ get promoted, but also have a &'static ref
|
||||
Err(syn::Error::new_spanned(
|
||||
it,
|
||||
"`function_component` attribute not ready for statics",
|
||||
))
|
||||
}
|
||||
other => Err(syn::Error::new_spanned(
|
||||
other,
|
||||
"`function_component` attribute can only be applied to functions",
|
||||
)),
|
||||
}
|
||||
}
|
||||
|
||||
/// Ensure the user's function actually returns a VNode
|
||||
pub fn ensure_return_type(output: ReturnType) -> syn::Result<Box<Type>> {
|
||||
match output {
|
||||
ReturnType::Default => Err(syn::Error::new_spanned(
|
||||
output,
|
||||
"function components must return a `VNode`",
|
||||
)),
|
||||
ReturnType::Type(_, ty) => Ok(ty),
|
||||
}
|
||||
}
|
||||
|
||||
/// Validate the users's input signature for the function component.
|
||||
/// Returns an error if any of the conditions prove to be wrong;
|
||||
pub fn validate_signature(sig: Signature) -> syn::Result<Signature> {
|
||||
if !sig.generics.params.is_empty() {
|
||||
return Err(syn::Error::new_spanned(
|
||||
sig.generics,
|
||||
"function components can't contain generics",
|
||||
));
|
||||
}
|
||||
|
||||
if sig.asyncness.is_some() {
|
||||
return Err(syn::Error::new_spanned(
|
||||
sig.asyncness,
|
||||
"function components can't be async",
|
||||
));
|
||||
}
|
||||
|
||||
if sig.constness.is_some() {
|
||||
return Err(syn::Error::new_spanned(
|
||||
sig.constness,
|
||||
"const functions can't be function components",
|
||||
));
|
||||
}
|
||||
|
||||
if sig.abi.is_some() {
|
||||
return Err(syn::Error::new_spanned(
|
||||
sig.abi,
|
||||
"extern functions can't be function components",
|
||||
));
|
||||
}
|
||||
|
||||
Ok(sig)
|
||||
}
|
||||
|
||||
// pub fn validate_context_arg(first_arg: &FnArg) -> syn::Result<Box<Type>> {
|
||||
// if let FnArg::Typed(arg) = first_arg {
|
||||
// // if let Type::R
|
||||
// // Input arg is a reference to an &mut Context
|
||||
// // if let Type::Reference(ty) = &*arg.ty {
|
||||
// // if ty.lifetime.is_some() {
|
||||
// // return Err(syn::Error::new_spanned(
|
||||
// // &ty.lifetime,
|
||||
// // "reference must not have a lifetime",
|
||||
// // ));
|
||||
// // }
|
||||
|
||||
// // if ty.mutability.is_some() {
|
||||
// // return Err(syn::Error::new_spanned(
|
||||
// // &ty.mutability,
|
||||
// // "reference must not be mutable",
|
||||
// // ));
|
||||
// // }
|
||||
|
||||
// // Ok(ty.elem.clone())
|
||||
// // } else {
|
||||
// // let msg = format!(
|
||||
// // "expected a reference to a `Context` object (try: `&mut {}`)",
|
||||
// // arg.ty.to_token_stream()
|
||||
// // );
|
||||
// // return Err(syn::Error::new_spanned(arg.ty.clone(), msg));
|
||||
// // }
|
||||
// } else {
|
||||
// return Err(syn::Error::new_spanned(
|
||||
// first_arg,
|
||||
// "function components can't accept a receiver",
|
||||
// ));
|
||||
// }
|
||||
// }
|
||||
|
||||
pub fn collect_inline_args() {}
|
||||
|
||||
/// The named specified in the macro usage.
|
||||
pub struct FunctionComponentName {
|
||||
component_name: Ident,
|
||||
}
|
||||
|
||||
impl Parse for FunctionComponentName {
|
||||
fn parse(input: ParseStream) -> syn::Result<Self> {
|
||||
if input.is_empty() {
|
||||
return Err(input.error("expected identifier for the component"));
|
||||
}
|
||||
|
||||
let component_name = input.parse()?;
|
||||
|
||||
Ok(Self { component_name })
|
||||
}
|
||||
}
|
|
@ -30,7 +30,7 @@ pub fn derive_typed_builder(input: proc_macro::TokenStream) -> proc_macro::Token
|
|||
///
|
||||
/// ## Complete Reference Guide:
|
||||
/// ```
|
||||
/// const Example: Component<()> = |cx, props|{
|
||||
/// const Example: Component = |cx| {
|
||||
/// let formatting = "formatting!";
|
||||
/// let formatting_tuple = ("a", "b");
|
||||
/// let lazy_fmt = format_args!("lazily formatted text");
|
||||
|
@ -161,7 +161,7 @@ pub fn derive_typed_builder(input: proc_macro::TokenStream) -> proc_macro::Token
|
|||
/// pub struct BallerProps {}
|
||||
///
|
||||
/// /// This component totally balls
|
||||
/// pub fn Baller(cx: Context<()>) -> DomTree {
|
||||
/// pub fn Baller(cx: Scope<()>) -> DomTree {
|
||||
/// todo!()
|
||||
/// }
|
||||
/// }
|
||||
|
@ -172,7 +172,7 @@ pub fn derive_typed_builder(input: proc_macro::TokenStream) -> proc_macro::Token
|
|||
/// }
|
||||
///
|
||||
/// /// This component is taller than most :)
|
||||
/// pub fn Taller(cx: Context<TallerProps>) -> DomTree {
|
||||
/// pub fn Taller(cx: Scope<TallerProps>) -> DomTree {
|
||||
/// let b = true;
|
||||
/// todo!()
|
||||
/// }
|
||||
|
|
|
@ -72,7 +72,7 @@ impl ToTokens for RsxTemplate {
|
|||
|
||||
// // create a lazy tree that accepts a bump allocator
|
||||
// let final_tokens = quote! {
|
||||
// dioxus::prelude::LazyNodes::new(move |cx, props|{
|
||||
// dioxus::prelude::LazyNodes::new(move |cx| {
|
||||
// let bump = &cx.bump();
|
||||
|
||||
// #new_toks
|
||||
|
|
|
@ -23,7 +23,7 @@ criterion_group!(mbenches, create_rows);
|
|||
criterion_main!(mbenches);
|
||||
|
||||
fn create_rows(c: &mut Criterion) {
|
||||
static App: Component<()> = |cx| {
|
||||
static App: Component = |cx| {
|
||||
let mut rng = SmallRng::from_entropy();
|
||||
let rows = (0..10_000_usize).map(|f| {
|
||||
let label = Label::new(&mut rng);
|
||||
|
|
|
@ -20,7 +20,7 @@ use dioxus_html as dioxus_elements;
|
|||
use rand::prelude::*;
|
||||
|
||||
fn main() {
|
||||
static App: Component<()> = |cx| {
|
||||
static App: Component = |cx| {
|
||||
let mut rng = SmallRng::from_entropy();
|
||||
let rows = (0..10_000_usize).map(|f| {
|
||||
let label = Label::new(&mut rng);
|
||||
|
|
|
@ -467,7 +467,7 @@ impl ScopeState {
|
|||
/// # Example
|
||||
///
|
||||
/// ```rust, ignore
|
||||
/// let mut dom = VirtualDom::new(|cx, props|cx.render(rsx!{ div {} }));
|
||||
/// let mut dom = VirtualDom::new(|cx| cx.render(rsx!{ div {} }));
|
||||
/// dom.rebuild();
|
||||
///
|
||||
/// let base = dom.base_scope();
|
||||
|
@ -511,7 +511,7 @@ impl ScopeState {
|
|||
/// # Example
|
||||
///
|
||||
/// ```rust, ignore
|
||||
/// let mut dom = VirtualDom::new(|cx, props| cx.render(rsx!{ div {} }));
|
||||
/// let mut dom = VirtualDom::new(|cx| cx.render(rsx!{ div {} }));
|
||||
/// dom.rebuild();
|
||||
///
|
||||
/// let base = dom.base_scope();
|
||||
|
@ -531,7 +531,7 @@ impl ScopeState {
|
|||
/// # Example
|
||||
///
|
||||
/// ```rust, ignore
|
||||
/// let mut dom = VirtualDom::new(|cx, props| cx.render(rsx!{ div {} }));
|
||||
/// let mut dom = VirtualDom::new(|cx| cx.render(rsx!{ div {} }));
|
||||
/// dom.rebuild();
|
||||
///
|
||||
/// let base = dom.base_scope();
|
||||
|
@ -550,7 +550,7 @@ impl ScopeState {
|
|||
/// # Example
|
||||
///
|
||||
/// ```rust, ignore
|
||||
/// let mut dom = VirtualDom::new(|cx, props| cx.render(rsx!{ div {} }));
|
||||
/// let mut dom = VirtualDom::new(|cx| cx.render(rsx!{ div {} }));
|
||||
/// dom.rebuild();
|
||||
/// let base = dom.base_scope();
|
||||
///
|
||||
|
@ -619,12 +619,12 @@ impl ScopeState {
|
|||
/// ```rust, ignore
|
||||
/// struct SharedState(&'static str);
|
||||
///
|
||||
/// static App: Component<()> = |cx, props|{
|
||||
/// static App: Component = |cx| {
|
||||
/// cx.use_hook(|_| cx.provide_context(SharedState("world")), |_| {}, |_| {});
|
||||
/// rsx!(cx, Child {})
|
||||
/// }
|
||||
///
|
||||
/// static Child: Component<()> = |cx| {
|
||||
/// static Child: Component = |cx| {
|
||||
/// let state = cx.consume_state::<SharedState>();
|
||||
/// rsx!(cx, div { "hello {state.0}" })
|
||||
/// }
|
||||
|
|
|
@ -135,7 +135,7 @@ impl VirtualDom {
|
|||
/// ```
|
||||
///
|
||||
/// Note: the VirtualDom is not progressed, you must either "run_with_deadline" or use "rebuild" to progress it.
|
||||
pub fn new(root: Component<()>) -> Self {
|
||||
pub fn new(root: Component) -> Self {
|
||||
Self::new_with_props(root, ())
|
||||
}
|
||||
|
||||
|
@ -468,7 +468,7 @@ impl VirtualDom {
|
|||
///
|
||||
/// # Example
|
||||
/// ```rust, ignore
|
||||
/// static App: Component<()> = |cx, props| cx.render(rsx!{ "hello world" });
|
||||
/// static App: Component = |cx| cx.render(rsx!{ "hello world" });
|
||||
/// let mut dom = VirtualDom::new();
|
||||
/// let edits = dom.rebuild();
|
||||
///
|
||||
|
@ -505,7 +505,7 @@ impl VirtualDom {
|
|||
/// value: Shared<&'static str>,
|
||||
/// }
|
||||
///
|
||||
/// static App: Component<AppProps> = |cx, props|{
|
||||
/// static App: Component<AppProps> = |cx| {
|
||||
/// let val = cx.value.borrow();
|
||||
/// cx.render(rsx! { div { "{val}" } })
|
||||
/// };
|
||||
|
|
|
@ -24,7 +24,7 @@ fn new_dom<P: 'static + Send>(app: Component<P>, props: P) -> VirtualDom {
|
|||
/// In debug, this should also toss a warning.
|
||||
#[test]
|
||||
fn test_early_abort() {
|
||||
const app: Component<()> = |cx| {
|
||||
const app: Component = |cx| {
|
||||
let val = cx.use_hook(|_| 0, |f| f);
|
||||
|
||||
*val += 1;
|
||||
|
|
|
@ -45,7 +45,7 @@ fn manual_diffing() {
|
|||
|
||||
#[test]
|
||||
fn events_generate() {
|
||||
static App: Component<()> = |cx| {
|
||||
static App: Component = |cx| {
|
||||
let count = cx.use_hook(|_| 0, |f| f);
|
||||
|
||||
let inner = match *count {
|
||||
|
@ -104,7 +104,7 @@ fn events_generate() {
|
|||
|
||||
#[test]
|
||||
fn components_generate() {
|
||||
static App: Component<()> = |cx| {
|
||||
static App: Component = |cx| {
|
||||
let render_phase = cx.use_hook(|_| 0, |f| f);
|
||||
*render_phase += 1;
|
||||
|
||||
|
@ -121,7 +121,7 @@ fn components_generate() {
|
|||
})
|
||||
};
|
||||
|
||||
static Child: Component<()> = |cx| {
|
||||
static Child: Component = |cx| {
|
||||
cx.render(rsx! {
|
||||
h1 {}
|
||||
})
|
||||
|
@ -220,7 +220,7 @@ fn components_generate() {
|
|||
|
||||
#[test]
|
||||
fn component_swap() {
|
||||
static App: Component<()> = |cx| {
|
||||
static App: Component = |cx| {
|
||||
let render_phase = cx.use_hook(|_| 0, |f| f);
|
||||
*render_phase += 1;
|
||||
|
||||
|
@ -259,7 +259,7 @@ fn component_swap() {
|
|||
})
|
||||
};
|
||||
|
||||
static NavBar: Component<()> = |cx| {
|
||||
static NavBar: Component = |cx| {
|
||||
println!("running navbar");
|
||||
cx.render(rsx! {
|
||||
h1 {
|
||||
|
@ -269,7 +269,7 @@ fn component_swap() {
|
|||
})
|
||||
};
|
||||
|
||||
static NavLink: Component<()> = |cx| {
|
||||
static NavLink: Component = |cx| {
|
||||
println!("running navlink");
|
||||
cx.render(rsx! {
|
||||
h1 {
|
||||
|
@ -278,7 +278,7 @@ fn component_swap() {
|
|||
})
|
||||
};
|
||||
|
||||
static Dashboard: Component<()> = |cx| {
|
||||
static Dashboard: Component = |cx| {
|
||||
println!("running dashboard");
|
||||
cx.render(rsx! {
|
||||
div {
|
||||
|
@ -287,7 +287,7 @@ fn component_swap() {
|
|||
})
|
||||
};
|
||||
|
||||
static Results: Component<()> = |cx| {
|
||||
static Results: Component = |cx| {
|
||||
println!("running results");
|
||||
cx.render(rsx! {
|
||||
div {
|
||||
|
|
|
@ -13,12 +13,12 @@ mod test_logging;
|
|||
fn shared_state_test() {
|
||||
struct MySharedState(&'static str);
|
||||
|
||||
static App: Component<()> = |cx| {
|
||||
static App: Component = |cx| {
|
||||
cx.provide_context(MySharedState("world!"));
|
||||
cx.render(rsx!(Child {}))
|
||||
};
|
||||
|
||||
static Child: Component<()> = |cx| {
|
||||
static Child: Component = |cx| {
|
||||
let shared = cx.consume_context::<MySharedState>()?;
|
||||
cx.render(rsx!("Hello, {shared.0}"))
|
||||
};
|
||||
|
|
|
@ -19,7 +19,7 @@ use DomEdit::*;
|
|||
|
||||
#[test]
|
||||
fn app_runs() {
|
||||
static App: Component<()> = |cx| rsx!(cx, div{"hello"} );
|
||||
static App: Component = |cx| rsx!(cx, div{"hello"} );
|
||||
|
||||
let mut vdom = VirtualDom::new(App);
|
||||
let edits = vdom.rebuild();
|
||||
|
@ -27,7 +27,7 @@ fn app_runs() {
|
|||
|
||||
#[test]
|
||||
fn fragments_work() {
|
||||
static App: Component<()> = |cx| {
|
||||
static App: Component = |cx| {
|
||||
cx.render(rsx!(
|
||||
div{"hello"}
|
||||
div{"goodbye"}
|
||||
|
@ -41,7 +41,7 @@ fn fragments_work() {
|
|||
|
||||
#[test]
|
||||
fn lists_work() {
|
||||
static App: Component<()> = |cx| {
|
||||
static App: Component = |cx| {
|
||||
cx.render(rsx!(
|
||||
h1 {"hello"}
|
||||
{(0..6).map(|f| rsx!(span{ "{f}" }))}
|
||||
|
@ -54,7 +54,7 @@ fn lists_work() {
|
|||
|
||||
#[test]
|
||||
fn conditional_rendering() {
|
||||
static App: Component<()> = |cx| {
|
||||
static App: Component = |cx| {
|
||||
cx.render(rsx!(
|
||||
h1 {"hello"}
|
||||
{true.then(|| rsx!(span{ "a" }))}
|
||||
|
@ -87,13 +87,13 @@ fn conditional_rendering() {
|
|||
|
||||
#[test]
|
||||
fn child_components() {
|
||||
static App: Component<()> = |cx| {
|
||||
static App: Component = |cx| {
|
||||
cx.render(rsx!(
|
||||
{true.then(|| rsx!(Child { }))}
|
||||
{false.then(|| rsx!(Child { }))}
|
||||
))
|
||||
};
|
||||
static Child: Component<()> = |cx| {
|
||||
static Child: Component = |cx| {
|
||||
cx.render(rsx!(
|
||||
h1 {"hello"}
|
||||
h1 {"goodbye"}
|
||||
|
|
|
@ -1,11 +0,0 @@
|
|||
[package]
|
||||
name = "dioxus-coroutines"
|
||||
version = "0.0.0"
|
||||
edition = "2018"
|
||||
repository = "https://github.com/DioxusLabs/dioxus/"
|
||||
homepage = "https://dioxuslabs.com"
|
||||
documentation = "https://dioxuslabs.com"
|
||||
keywords = ["dom", "ui", "gui", "react", "wasm"]
|
||||
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||
|
||||
[dependencies]
|
|
@ -1,8 +0,0 @@
|
|||
#[cfg(test)]
|
||||
mod tests {
|
||||
#[test]
|
||||
fn it_works() {
|
||||
let result = 2 + 2;
|
||||
assert_eq!(result, 4);
|
||||
}
|
||||
}
|
|
@ -7,7 +7,7 @@ fn main() {
|
|||
dioxus::desktop::launch(App)
|
||||
}
|
||||
|
||||
static App: Component<()> = |cx| {
|
||||
static App: Component = |cx| {
|
||||
let (count, set_count) = use_state(&cx, || 0);
|
||||
|
||||
cx.render(rsx!(
|
||||
|
@ -34,7 +34,7 @@ Window management, system trays, notifications, and other desktop-related functi
|
|||
Managing windows is done by simply rendering content into a `WebviewWindow` component.
|
||||
|
||||
```rust
|
||||
static App: Component<()> = |cx| {
|
||||
static App: Component = |cx| {
|
||||
rsx!(cx, WebviewWindow { "hello world" } )
|
||||
}
|
||||
```
|
||||
|
@ -46,7 +46,7 @@ Notifications also use a declarative approach. Sending a notification has never
|
|||
The api has been somewhat modeled after https://github.com/mikaelbr/node-notifier
|
||||
|
||||
```rust
|
||||
static Notifications: Component<()> = |cx| {
|
||||
static Notifications: Component = |cx| {
|
||||
cx.render(rsx!(
|
||||
Notification {
|
||||
title: "title"
|
||||
|
@ -78,7 +78,7 @@ static Notifications: Component<()> = |cx| {
|
|||
Dioxus Desktop supports app trays, which can be built with native menu groups or with a custom window.
|
||||
|
||||
```rust
|
||||
static Tray: Component<()> = |cx| {
|
||||
static Tray: Component = |cx| {
|
||||
cx.render(rsx!(
|
||||
GlobalTray {
|
||||
MenuGroup {
|
||||
|
@ -90,7 +90,7 @@ static Tray: Component<()> = |cx| {
|
|||
};
|
||||
|
||||
// using a builder
|
||||
static Tray: Component<()> = |cx| {
|
||||
static Tray: Component = |cx| {
|
||||
let menu = MenuGroup::builder(cx)
|
||||
.with_items([
|
||||
MenuGroupItem::builder()
|
||||
|
@ -107,7 +107,7 @@ static Tray: Component<()> = |cx| {
|
|||
}
|
||||
|
||||
// or with a custom window
|
||||
static Tray: Component<()> = |cx| {
|
||||
static Tray: Component = |cx| {
|
||||
rsx!(cx, GlobalTray { div { "custom buttons here" } })
|
||||
};
|
||||
```
|
||||
|
@ -116,7 +116,7 @@ static Tray: Component<()> = |cx| {
|
|||
Declaring menus is convenient and cross-platform.
|
||||
|
||||
```rust
|
||||
static Menu: Component<()> = |cx| {
|
||||
static Menu: Component = |cx| {
|
||||
cx.render(rsx!(
|
||||
MenuBarMajorItem { title: "File"
|
||||
MenuGroup {
|
||||
|
|
|
@ -56,7 +56,7 @@ pub struct WebviewWindowProps<'a> {
|
|||
///
|
||||
///
|
||||
///
|
||||
pub fn WebviewWindow(cx: Context, props: &WebviewWindowProps) -> Element {
|
||||
pub fn WebviewWindow(cx: Scope<WebviewWindowProps>) -> Element {
|
||||
let dtcx = cx.consume_state::<RefCell<DesktopContext>>()?;
|
||||
|
||||
cx.use_hook(
|
||||
|
@ -78,7 +78,7 @@ pub fn WebviewWindow(cx: Context, props: &WebviewWindowProps) -> Element {
|
|||
pub struct WindowHandle {}
|
||||
|
||||
/// Get a handle to the current window from inside a component
|
||||
pub fn use_current_window(cx: Context) -> Option<WindowHandle> {
|
||||
pub fn use_current_window(cx: Scope) -> Option<WindowHandle> {
|
||||
todo!()
|
||||
}
|
||||
|
||||
|
@ -90,7 +90,7 @@ fn syntax_works() {
|
|||
use dioxus_hooks::*;
|
||||
use dioxus_html as dioxus_elements;
|
||||
|
||||
static App: Component<()> = |cx| {
|
||||
static App: Component = |cx| {
|
||||
cx.render(rsx! {
|
||||
// left window
|
||||
WebviewWindow {
|
||||
|
|
|
@ -28,11 +28,11 @@ use wry::{
|
|||
webview::{WebView, WebViewBuilder},
|
||||
};
|
||||
|
||||
pub fn launch(root: Component<()>) {
|
||||
pub fn launch(root: Component) {
|
||||
launch_with_props(root, (), |c| c)
|
||||
}
|
||||
pub fn launch_cfg(
|
||||
root: Component<()>,
|
||||
root: Component,
|
||||
config_builder: impl for<'a, 'b> FnOnce(&'b mut DesktopConfig<'a>) -> &'b mut DesktopConfig<'a>,
|
||||
) {
|
||||
launch_with_props(root, (), config_builder)
|
||||
|
|
|
@ -36,7 +36,7 @@ uses the same memoization on top of the use_context API.
|
|||
|
||||
Here's a fully-functional todo app using the use_map API:
|
||||
```rust
|
||||
static TodoList: Component<()> = |cx, props|{
|
||||
static TodoList: Component = |cx| {
|
||||
let todos = use_map(cx, || HashMap::new());
|
||||
let input = use_ref(|| None);
|
||||
|
||||
|
|
|
@ -46,7 +46,7 @@ impl<'a, P, T> UseStateA<'a, T> for Scope<'a, P> {
|
|||
/// Usage:
|
||||
///
|
||||
/// ```ignore
|
||||
/// const Example: Component<()> = |cx| {
|
||||
/// const Example: Component = |cx| {
|
||||
/// let counter = use_state(&cx, || 0);
|
||||
///
|
||||
/// cx.render(rsx! {
|
||||
|
|
|
@ -39,7 +39,7 @@ async fn order_shoes(mut req: WebsocketRequest) -> Response {
|
|||
dioxus::liveview::launch(App, stream).await;
|
||||
}
|
||||
|
||||
fn App(cx: Context, props: &()) -> Element {
|
||||
fn App(cx: Scope<()>) -> Element {
|
||||
let mut count = use_state(&cx, || 0);
|
||||
cx.render(rsx!(
|
||||
button { onclick: move |_| count += 1, "Incr" }
|
||||
|
|
|
@ -26,10 +26,7 @@ fn init_logging() {
|
|||
|
||||
static HTML_CONTENT: &'static str = include_str!("../../desktop/src/index.html");
|
||||
|
||||
pub fn launch(
|
||||
root: Component<()>,
|
||||
builder: fn(WindowBuilder) -> WindowBuilder,
|
||||
) -> anyhow::Result<()> {
|
||||
pub fn launch(root: Component, builder: fn(WindowBuilder) -> WindowBuilder) -> anyhow::Result<()> {
|
||||
launch_with_props(root, (), builder)
|
||||
}
|
||||
pub fn launch_with_props<P: 'static + Send>(
|
||||
|
|
|
@ -16,7 +16,7 @@ enum AppRoute {
|
|||
NotFound
|
||||
}
|
||||
|
||||
static App: Component<()> = |cx| {
|
||||
static App: Component = |cx| {
|
||||
let route = use_router(cx, AppRoute::parse);
|
||||
|
||||
match route {
|
||||
|
@ -30,7 +30,7 @@ static App: Component<()> = |cx| {
|
|||
Adding links into your app:
|
||||
|
||||
```rust
|
||||
static Leaf: Component<()> = |cx| {
|
||||
static Leaf: Component = |cx| {
|
||||
rsx!(cx, div {
|
||||
Link { to: AppRoute::Home }
|
||||
})
|
||||
|
|
|
@ -10,7 +10,7 @@ fn main() {
|
|||
dioxus_web::launch(APP);
|
||||
}
|
||||
|
||||
static APP: Component<()> = |cx| {
|
||||
static APP: Component = |cx| {
|
||||
#[derive(Clone, Debug, PartialEq, Serialize, Deserialize)]
|
||||
enum Route {
|
||||
Home,
|
||||
|
|
|
@ -5,7 +5,7 @@ Render a Dioxus VirtualDOM to a string.
|
|||
|
||||
```rust
|
||||
// Our app:
|
||||
const App: Component<()> = |cx, props| rsx!(cx, div {"hello world!"});
|
||||
const App: Component = |cx| rsx!(cx, div {"hello world!"});
|
||||
|
||||
// Build the virtualdom from our app
|
||||
let mut vdom = VirtualDOM::new(App);
|
||||
|
|
|
@ -31,7 +31,7 @@ impl SsrRenderer {
|
|||
}
|
||||
}
|
||||
|
||||
pub fn render_lazy<'a>(&'a mut self, f: Option<LazyNodes<'a, '_>>) -> String {
|
||||
pub fn render_lazy<'a>(&'a mut self, f: LazyNodes<'a, '_>) -> String {
|
||||
let bump = &mut self.inner as *mut _;
|
||||
let s = self.render_inner(f);
|
||||
// reuse the bump's memory
|
||||
|
@ -39,7 +39,7 @@ impl SsrRenderer {
|
|||
s
|
||||
}
|
||||
|
||||
fn render_inner<'a>(&'a self, f: Option<LazyNodes<'a, '_>>) -> String {
|
||||
fn render_inner<'a>(&'a self, f: LazyNodes<'a, '_>) -> String {
|
||||
let factory = NodeFactory::new(&self.inner);
|
||||
let root = f.into_vnode(factory);
|
||||
format!(
|
||||
|
@ -53,7 +53,7 @@ impl SsrRenderer {
|
|||
}
|
||||
}
|
||||
|
||||
pub fn render_lazy<'a>(f: Option<LazyNodes<'a, '_>>) -> String {
|
||||
pub fn render_lazy<'a>(f: LazyNodes<'a, '_>) -> String {
|
||||
let bump = bumpalo::Bump::new();
|
||||
let borrowed = ≎
|
||||
|
||||
|
@ -113,7 +113,7 @@ pub fn render_vdom_scope(vdom: &VirtualDom, scope: ScopeId) -> Option<String> {
|
|||
///
|
||||
/// ## Example
|
||||
/// ```ignore
|
||||
/// static App: Component<()> = |cx, props|cx.render(rsx!(div { "hello world" }));
|
||||
/// static App: Component = |cx| cx.render(rsx!(div { "hello world" }));
|
||||
/// let mut vdom = VirtualDom::new(App);
|
||||
/// vdom.rebuild();
|
||||
///
|
||||
|
@ -301,13 +301,13 @@ mod tests {
|
|||
use dioxus_core_macro::*;
|
||||
use dioxus_html as dioxus_elements;
|
||||
|
||||
static SIMPLE_APP: Component<()> = |cx| {
|
||||
static SIMPLE_APP: Component = |cx| {
|
||||
cx.render(rsx!(div {
|
||||
"hello world!"
|
||||
}))
|
||||
};
|
||||
|
||||
static SLIGHTLY_MORE_COMPLEX: Component<()> = |cx| {
|
||||
static SLIGHTLY_MORE_COMPLEX: Component = |cx| {
|
||||
cx.render(rsx! {
|
||||
div {
|
||||
title: "About W3Schools"
|
||||
|
@ -326,14 +326,14 @@ mod tests {
|
|||
})
|
||||
};
|
||||
|
||||
static NESTED_APP: Component<()> = |cx| {
|
||||
static NESTED_APP: Component = |cx| {
|
||||
cx.render(rsx!(
|
||||
div {
|
||||
SIMPLE_APP {}
|
||||
}
|
||||
))
|
||||
};
|
||||
static FRAGMENT_APP: Component<()> = |cx| {
|
||||
static FRAGMENT_APP: Component = |cx| {
|
||||
cx.render(rsx!(
|
||||
div { "f1" }
|
||||
div { "f2" }
|
||||
|
@ -389,7 +389,7 @@ mod tests {
|
|||
|
||||
#[test]
|
||||
fn styles() {
|
||||
static STLYE_APP: Component<()> = |cx| {
|
||||
static STLYE_APP: Component = |cx| {
|
||||
cx.render(rsx! {
|
||||
div { color: "blue", font_size: "46px" }
|
||||
})
|
||||
|
|
|
@ -14,7 +14,7 @@ fn main() {
|
|||
dioxus_web::launch(App);
|
||||
}
|
||||
|
||||
static App: Component<()> = |cx| {
|
||||
static App: Component = |cx| {
|
||||
let mut count = use_state(&cx, || 0);
|
||||
|
||||
cx.push_future(|| async move {
|
||||
|
|
|
@ -106,7 +106,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);
|
||||
|
||||
|
@ -219,24 +219,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" }
|
||||
// })
|
||||
// }
|
||||
|
|
|
@ -13,7 +13,7 @@ fn main() {
|
|||
dioxus_web::launch(App);
|
||||
}
|
||||
|
||||
static App: Component<()> = |cx| {
|
||||
static App: Component = |cx| {
|
||||
let show = use_state(&cx, || true);
|
||||
|
||||
let inner = match *show {
|
||||
|
|
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue