swaits/dioxus
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: move to static props

Browse Source
This commit is contained in:
Jonathan Kelley committed 2021-05-31 18:55:56 -04:00
1 parent c5089ba3c5
commit c1fd848f89
37 files changed
+1014 -339
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/web/examples/hello.rs
+11 -4
View File
@@ -2,13 +2,20 @@ use dioxus_core::prelude::*;
use dioxus_web::WebsysRenderer;
fn main() {
wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
console_error_panic_hook::set_once();
log::info!("hello world");
wasm_bindgen_futures::spawn_local(WebsysRenderer::start(Example));
}
static Example: FC<()> = |ctx, _props| {
ctx.render(html! {
<div>
"Hello world!"
</div>
ctx.render(rsx! {
div {
span {
class: "px-2 py-1 flex w-36 mt-4 items-center text-xs rounded-md font-semibold text-yellow-500 bg-yellow-100"
"DUE DATE : 18 JUN"
}
}
})
};
packages/web/examples/htmlexample.html
+59
View File
@@ -0,0 +1,59 @@
<div class="shadow-lg rounded-2xl p-4 bg-white dark:bg-gray-700 w-full">
<p class="font-bold text-md text-black dark:text-white">
"Messages"
</p>
<ul>
<li class="flex items-center my-6 space-x-2">
<a href="#" class="block relative">
<img alt="profil" src="/images/person/1.jpg" class="mx-auto object-cover rounded-full h-10 w-10 " />
</a>
<div class="flex flex-col">
<span class="text-sm text-gray-900 font-semibold dark:text-white ml-2">
{title}
</span>
<span class="text-sm text-gray-400 dark:text-gray-300 ml-2">
"Hey John ! Do you read the NextJS doc ?"
</span>
</div>
</li>
<li class="flex items-center my-6 space-x-2">
<a href="#" class="block relative">
<img alt="profil" src="/images/person/5.jpg" class="mx-auto object-cover rounded-full h-10 w-10 " />
</a>
<div class="flex flex-col">
<span class="text-sm text-gray-900 font-semibold dark:text-white ml-2">
"Marie Lou"
</span>
<span class="text-sm text-gray-400 dark:text-gray-300 ml-2">
"No I think the dog is better..."
</span>
</div>
</li>
<li class="flex items-center my-6 space-x-2">
<a href="#" class="block relative">
<img alt="profil" src="/images/person/6.jpg" class="mx-auto object-cover rounded-full h-10 w-10 " />
</a>
<div class="flex flex-col">
<span class="text-sm text-gray-900 font-semibold dark:text-white ml-2">
"Ivan Buck"
</span>
<span class="text-sm text-gray-400 dark:text-gray-300 ml-2">
"Seriously ? haha Bob is not a children !"
</span>
</div>
</li>
<li class="flex items-center my-6 space-x-2">
<a href="#" class="block relative">
<img alt="profil" src="/images/person/7.jpg" class="mx-auto object-cover rounded-full h-10 w-10 " />
</a>
<div class="flex flex-col">
<span class="text-sm text-gray-900 font-semibold dark:text-white ml-2">
"Marina Farga"
</span>
<span class="text-sm text-gray-400 dark:text-gray-300 ml-2">
"Do you need that deisgn ?"
</span>
</div>
</li>
</ul>
</div>
packages/web/examples/list.rs
-1
View File
@@ -38,7 +38,6 @@ static App: FC<()> = |ctx, _| {
ctx.render(rsx!(
div {
id: "app"
style { "{APP_STYLE}" }
div {
header {
packages/web/examples/todomvc_simple.rs
+1 -2
View File
@@ -30,7 +30,6 @@ pub fn App(ctx: Context, props: &()) -> DomTree {
ctx.render(rsx! {
div {
id: "app"
style { "{APP_STYLE}" }
// list
TodoList {}
@@ -101,7 +100,7 @@ pub struct TodoEntryProps {
item: Rc<TodoItem>,
}
// pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> DomTree {
pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> DomTree {
// #[inline_props]
pub fn TodoEntry(
ctx: Context,
packages/web/examples/todomvcsingle.rs
+11 -11
View File
@@ -28,7 +28,7 @@ pub struct TodoItem {
}
// Declare our global app state
const TODO_LIST: Atom<HashMap<Uuid, TodoItem>> = |_| Default::default();
const TODO_LIST: AtomHashMap<Uuid, TodoItem> = |_| {};
const FILTER: Atom<FilterState> = |_| FilterState::All;
const TODOS_LEFT: Selector<usize> = |api| api.get(&TODO_LIST).len();
@@ -74,8 +74,8 @@ impl TodoManager {
pub fn TodoList(ctx: Context, _props: &()) -> DomTree {
let draft = use_state_new(&ctx, || "".to_string());
let todos = use_recoil_value(&ctx, &TODO_LIST);
let filter = use_recoil_value(&ctx, &FILTER);
let todos = use_read(&ctx, &TODO_LIST);
let filter = use_read(&ctx, &FILTER);
let todolist = todos
.values()
@@ -91,8 +91,8 @@ pub fn TodoList(ctx: Context, _props: &()) -> DomTree {
})
});
rsx! { in ctuse_read
div {use_read
rsx! { in ctx,
div {
header {
class: "header"
h1 {"todos"}
@@ -118,7 +118,7 @@ pub struct TodoEntryProps {
pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> DomTree {
let (is_editing, set_is_editing) = use_state(&ctx, || false);
let todo = use_recoil_value(&ctx, &TODO_LIST).get(&props.id).unwrap();
let todo = use_read(&ctx, &TODO_LIST).get(&props.id).unwrap();
ctx.render(rsx! (
li {
@@ -135,11 +135,11 @@ pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> DomTree {
))}
}
))
}use_read
}
pub fn FilterToggles(ctx: Context, _props: &()) -> DomTree {
let reducer = use_recoil_callback(ctx, |api| TodoManager(api));
let items_left = use_recoil_value(ctx, &TODOS_LEFT);
let reducer = TodoManager(use_recoil_api(ctx));
let items_left = use_read(ctx, &TODOS_LEFT);
let toggles = [
("All", "", FilterState::All),
@@ -198,9 +198,9 @@ pub fn Footer(ctx: Context, _props: &()) -> DomTree {
const APP_STYLE: &'static str = include_str!("./todomvc/style.css");
fn App(ctx: Context, _props: &()) -> DomTree {
use_init_recoil_root(ctx);
use_init_recoil_root(ctx, |_| {});
rsx! { in ctx,
div { id: "app", style { "{APP_STYLE}" }
div { id: "app"
TodoList {}
Footer {}
}