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

Feat: major overhaul to diffing

Browse Source
This commit is contained in:
Jonathan Kelley committed 2021-05-15 12:03:08 -04:00
1 parent c809095124
commit 9810feebf5
37 files changed
+1470 -1129
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/web/examples/deep.rs
+1 -3
View File
@@ -7,8 +7,6 @@ fn main() {
wasm_bindgen_futures::spawn_local(WebsysRenderer::start(CustomA))
}
use components::CustomB;
fn CustomA<'a>(ctx: Context<'a>, props: &'a ()) -> DomTree {
let (val, set_val) = use_state(&ctx, || "abcdef".to_string());
@@ -24,7 +22,7 @@ fn CustomA<'a>(ctx: Context<'a>, props: &'a ()) -> DomTree {
"Lower"
onclick: move |_| set_val(val.to_ascii_lowercase())
}
CustomB {
components::CustomB {
val: val.as_ref()
}
}
packages/web/examples/demo2.rs
+1
View File
@@ -0,0 +1 @@
fn main() {}
packages/web/examples/demoday.rs
+86
View File
@@ -0,0 +1,86 @@
use dioxus_web::{dioxus::prelude::*, WebsysRenderer};
fn main() {
wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
console_error_panic_hook::set_once();
wasm_bindgen_futures::spawn_local(WebsysRenderer::start(App))
}
fn App(ctx: Context, props: &()) -> DomTree {
ctx.render(rsx! {
main { class: "dark:bg-gray-800 bg-white relative h-screen"
NavBar {}
{(0..10).map(|f| rsx!{ Landing {} })}
}
})
}
fn NavBar(ctx: Context, props: &()) -> DomTree {
ctx.render(rsx!{
header { class: "h-24 sm:h-32 flex items-center z-30 w-full"
div { class: "container mx-auto px-6 flex items-center justify-between"
div { class: "uppercase text-gray-800 dark:text-white font-black text-3xl"
svg { focusable:"false" width:"100" height:"100" viewBox: "0 0 512 309"
path { fill: "#000"
d: "M120.81 80.561h96.568v7.676h-87.716v57.767h82.486v7.675h-82.486v63.423h88.722v7.675H120.81V80.561zm105.22 0h10.26l45.467 63.423L328.23 80.56L391.441 0l-103.85 150.65l53.515 74.127h-10.663l-48.686-67.462l-48.888 67.462h-10.461l53.917-74.128l-50.296-70.088zm118.898 7.676V80.56h110.048v7.676h-50.699v136.54h-8.852V88.237h-50.497zM0 80.56h11.065l152.58 228.323l-63.053-84.107L9.254 91.468l-.402 133.31H0V80.56zm454.084 134.224c-1.809 0-3.165-1.4-3.165-3.212c0-1.81 1.356-3.212 3.165-3.212c1.83 0 3.165 1.401 3.165 3.212c0 1.811-1.335 3.212-3.165 3.212zm8.698-8.45h4.737c.064 2.565 1.937 4.29 4.693 4.29c3.079 0 4.823-1.854 4.823-5.325v-21.99h4.823v22.011c0 6.252-3.617 9.853-9.603 9.853c-5.62 0-9.473-3.493-9.473-8.84zm25.384-.28h4.78c.409 2.953 3.294 4.828 7.45 4.828c3.875 0 6.717-2.005 6.717-4.764c0-2.371-1.809-3.794-5.921-4.764l-4.005-.97c-5.62-1.316-8.181-4.032-8.181-8.602c0-5.54 4.521-9.227 11.303-9.227c6.308 0 10.916 3.686 11.196 8.925h-4.694c-.452-2.867-2.95-4.657-6.567-4.657c-3.81 0-6.35 1.833-6.35 4.635c0 2.22 1.635 3.493 5.683 4.441l3.423.841c6.373 1.488 9 4.075 9 8.753c0 5.95-4.607 9.68-11.97 9.68c-6.89 0-11.52-3.558-11.864-9.12z"
}
}
}
div { class:"flex items-center"
nav { class: "font-sen text-gray-800 dark:text-white uppercase text-lg lg:flex items-center hidden"
a { href: "#", class:"py-2 px-6 flex text-indigo-500 border-b-2 border-indigo-500"
"Home"
}
a { href: "#", class: "py-2 px-6 flex hover:text-indigo-500"
"Watch"
}
a { href: "#", class: "py-2 px-6 flex hover:text-indigo-500"
"Product"
}
a { href: "#", class: "py-2 px-6 flex hover:text-indigo-500"
"Contact"
}
a { href: "#", class: "py-2 px-6 flex hover:text-indigo-500"
"Career"
}
}
button { class: "lg:hidden flex flex-col ml-4"
span { class: "w-6 h-1 bg-gray-800 dark:bg-white mb-1" }
span { class: "w-6 h-1 bg-gray-800 dark:bg-white mb-1" }
span { class: "w-6 h-1 bg-gray-800 dark:bg-white mb-1" }
}
}
}
}
})
}
fn Landing(ctx: Context, props: &()) -> DomTree {
ctx.render(rsx!{
div { class: "bg-white dark:bg-gray-800 flex relative z-20 items-center"
div { class: "container mx-auto px-6 flex flex-col justify-between items-center relative py-8"
div { class: "flex flex-col"
h1 { class: "font-light w-full uppercase text-center text-4xl sm:text-5xl dark:text-white text-gray-800"
"The React Framework for Production"
}
h2{ class: "font-light max-w-2xl mx-auto w-full text-xl dark:text-white text-gray-500 text-center py-8"
"Next.js gives you the best developer experience with all the features you need for production: \n
hybrid static &amp; server rendering, TypeScript support, smart bundling, route pre-fetching, and \n
more. No config needed."
}
div { class: "flex items-center justify-center mt-4"
a { href: "#" class: "uppercase py-2 px-4 bg-gray-800 border-2 border-transparent text-white text-md mr-4 hover:bg-gray-900"
"Get started"
}
a{ href: "#" class: "uppercase py-2 px-4 bg-transparent border-2 border-gray-800 text-gray-800 dark:text-white hover:bg-gray-800 hover:text-white text-md"
"Documentation"
}
}
}
div { class: "block w-full mx-auto mt-6 md:mt-0 relative"
img { src: "/images/object/12.svg" class: "max-w-xs md:max-w-2xl m-auto" }
}
}
}
})
}
packages/web/examples/landingpage.rs
+43
View File
@@ -0,0 +1,43 @@
//! Basic example that renders a simple domtree to the browser.
use std::rc::Rc;
use dioxus_core::prelude::*;
use dioxus_web::*;
fn main() {
// Setup logging
wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
console_error_panic_hook::set_once();
// Run the app
wasm_bindgen_futures::spawn_local(WebsysRenderer::start(App));
}
static App: FC<()> = |ctx, _| {
let (contents, set_contents) = use_state(&ctx, || "asd");
ctx.render(rsx! {
div {
class: "flex items-center justify-center flex-col"
div {
class: "flex items-center justify-center"
div {
class: "flex flex-col bg-white rounded p-4 w-full max-w-xs"
div { class: "font-bold text-xl", "Example cloud app" }
div { class: "text-sm text-gray-500", "This is running in the cloud!!" }
div {
class: "flex flex-row items-center justify-center mt-6"
div { class: "font-medium text-6xl", "100%" }
}
div {
class: "flex flex-row justify-between mt-6"
a {
href: "https://www.dioxuslabs.com"
class: "underline"
"Made with dioxus"
}
}
}
}
}
})
};
packages/web/examples/landingpage2.rs
+43
View File
@@ -0,0 +1,43 @@
//! Basic example that renders a simple domtree to the browser.
use std::rc::Rc;
use dioxus_core::prelude::*;
use dioxus_web::*;
fn main() {
// Setup logging
wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
console_error_panic_hook::set_once();
// Run the app
wasm_bindgen_futures::spawn_local(WebsysRenderer::start(App));
}
static App: FC<()> = |ctx, _| {
let (contents, set_contents) = use_state(&ctx, || "asd");
ctx.render(rsx! {
div {
class: "flex items-center justify-center flex-col"
div {
class: "flex items-center justify-center"
div {
class: "flex flex-col bg-white rounded p-4 w-full max-w-xs"
div { class: "font-bold text-xl", "Example Web app" }
div { class: "text-sm text-gray-500", "This is running in your browser!" }
div {
class: "flex flex-row items-center justify-center mt-6"
div { class: "font-medium text-6xl", "100%" }
}
div {
class: "flex flex-row justify-between mt-6"
a {
href: "https://www.dioxuslabs.com"
class: "underline"
"Made with dioxus"
}
}
}
}
}
})
};
packages/web/examples/list.rs
+158 -98
View File
@@ -1,125 +1,185 @@
use std::collections::{BTreeMap, BTreeSet, HashMap};
use dioxus::{events::on::MouseEvent, prelude::*};
use dioxus_core as dioxus;
use dioxus_core::prelude::*;
use dioxus_web::WebsysRenderer;
use std::collections::BTreeMap;
fn main() {
wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
console_error_panic_hook::set_once();
wasm_bindgen_futures::spawn_local(async move {
WebsysRenderer::new_with_props(App, ())
.run()
.await
.expect("major crash");
});
wasm_bindgen_futures::spawn_local(WebsysRenderer::start(App));
}
use lazy_static::lazy_static;
lazy_static! {
static ref DummyData: BTreeMap<usize, String> = {
let vals = vec![
"abc123", //
"abc124", //
"abc125", //
"abc126", //
"abc127", //
"abc128", //
"abc129", //
"abc1210", //
"abc1211", //
"abc1212", //
"abc1213", //
"abc1214", //
"abc1215", //
"abc1216", //
"abc1217", //
"abc1218", //
"abc1219", //
"abc1220", //
"abc1221", //
"abc1222", //
];
vals.into_iter()
.map(ToString::to_string)
.enumerate()
.collect()
};
static APP_STYLE: &'static str = include_str!("./todomvc/style.css");
#[derive(PartialEq, Clone, Copy)]
pub enum FilterState {
All,
Active,
Completed,
}
#[derive(Debug, PartialEq, Clone)]
pub struct TodoItem {
pub id: uuid::Uuid,
pub checked: bool,
pub contents: String,
}
static App: FC<()> = |ctx, _| {
let items = use_state_new(&ctx, || DummyData.clone());
let (draft, set_draft) = use_state(&ctx, || "".to_string());
let (filter, set_filter) = use_state(&ctx, || FilterState::All);
let (is_editing, set_is_editing) = use_state(&ctx, || false);
// let (todos, set_todos) = use_state(&ctx, || BTreeMap::<String, TodoItem>::new());
// handle new elements
let add_new = move |_| {
items.modify(|m| {
let k = m.len();
let v = match (k % 3, k % 5) {
(0, 0) => "FizzBuzz".to_string(),
(0, _) => "Fizz".to_string(),
(_, 0) => "Buzz".to_string(),
_ => k.to_string(),
};
m.insert(k, v);
})
};
let elements = items.iter().map(|(k, v)| {
rsx! {
ListHelper {
name: k,
value: v
onclick: move |_| {
let key = k.clone();
items.modify(move |m| { m.remove(&key); } )
}
}
}
});
// let todos = use_ref(&ctx, || BTreeMap::<String, TodoItem>::new());
let todos = use_state_new(&ctx, || BTreeMap::<uuid::Uuid, TodoItem>::new());
// let blah = "{draft}"
ctx.render(rsx!(
div {
h1 {"Some list"}
button {
"Remove all"
onclick: move |_| items.set(BTreeMap::new())
id: "app"
style { "{APP_STYLE}" }
div {
header {
class: "header"
h1 {"todos"}
button {
"press me"
onclick: move |evt| {
let contents = draft.clone();
todos.modify(|f| {
let id = uuid::Uuid::new_v4();
f.insert(id.clone(), TodoItem {
id,
checked: false,
contents
});
})
}
}
input {
class: "new-todo"
placeholder: "What needs to be done?"
// value: "{draft}"
oninput: move |evt| set_draft(evt.value)
}
}
{ // list
todos
.iter()
.filter(|(id, item)| match filter {
FilterState::All => true,
FilterState::Active => !item.checked,
FilterState::Completed => item.checked,
})
.map(|(id, todo)| {
rsx!{
li {
"{todo.contents}"
input {
class: "toggle"
type: "checkbox"
"{todo.checked}"
}
// {is_editing.then(|| rsx!(
// input {
// value: "{contents}"
// }
// ))}
}
}
})
}
// filter toggle (show only if the list isn't empty)
{(!todos.is_empty()).then(||
rsx!{
footer {
span {
strong {"10"}
span {"0 items left"}
}
ul {
class: "filters"
{[
("All", "", FilterState::All),
("Active", "active", FilterState::Active),
("Completed", "completed", FilterState::Completed),
]
.iter()
.map(|(name, path, filter)| {
rsx!(
li {
class: "{name}"
a {
href: "{path}"
onclick: move |_| set_filter(filter.clone())
"{name}"
}
}
)
})
}}
}
}
)}
}
button {
"add new"
onclick: {add_new}
}
ul {
{elements}
footer {
class: "info"
p {"Double-click to edit a todo"}
p {
"Created by "
a { "jkelleyrtp", href: "http://github.com/jkelleyrtp/" }
}
p {
"Part of "
a { "TodoMVC", href: "http://todomvc.com" }
}
}
}
))
};
#[derive(Props)]
struct ListProps<'a, F: Fn(MouseEvent) + 'a> {
name: &'a usize,
value: &'a str,
onclick: F,
}
pub fn FilterToggles(ctx: Context, props: &()) -> DomTree {
// let reducer = recoil::use_callback(&ctx, || ());
// let items_left = recoil::use_atom_family(&ctx, &TODOS, uuid::Uuid::new_v4());
impl<F: Fn(MouseEvent)> PartialEq for ListProps<'_, F> {
fn eq(&self, other: &Self) -> bool {
// no references are ever the same
false
}
}
let toggles = [
("All", "", FilterState::All),
("Active", "active", FilterState::Active),
("Completed", "completed", FilterState::Completed),
]
.iter()
.map(|(name, path, _filter)| {
rsx!(
li {
class: "{name}"
a {
href: "{path}"
// onclick: move |_| reducer.set_filter(&filter)
"{name}"
}
}
)
});
// todo
let item_text = "";
let items_left = "";
fn ListHelper<F: Fn(MouseEvent)>(ctx: Context, props: &ListProps<F>) -> DomTree {
let k = props.name;
let v = props.value;
ctx.render(rsx! {
li {
class: "flex items-center text-xl"
key: "{k}"
span { "{k}: {v}" }
button {
"__ Remove"
onclick: {&props.onclick}
footer {
span {
strong {"{items_left}"}
span {"{item_text} left"}
}
ul {
class: "filters"
{toggles}
}
}
})
packages/web/examples/todomvc/filtertoggles.rs
+7 -9
View File
@@ -13,16 +13,14 @@ pub fn FilterToggles(ctx: Context, props: &()) -> DomTree {
]
.iter()
.map(|(name, path, filter)| {
rsx!(
li {
class: "{name}"
a {
href: "{path}"
onclick: move |_| reducer.set_filter(&filter)
"{name}"
}
rsx!(li {
class: "{name}"
a {
"{name}"
href: "{path}"
onclick: move |_| reducer.set_filter(&filter)
}
)
})
});
// todo
packages/web/examples/todomvc/todoitem.rs
+1 -1
View File
@@ -21,7 +21,7 @@ pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> DomTree {
}
{is_editing.then(|| rsx!(
input {
value: "{contents}"
value: "{todo.contents}"
}
))}
}
packages/web/examples/todomvc_simple.rs
-7
View File
@@ -101,13 +101,6 @@ pub struct TodoEntryProps {
item: Rc<TodoItem>,
}
mod mac {
#[macro_export]
macro_rules! TodoEntry {
() => {};
}
}
// pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> DomTree {
// #[inline_props]
pub fn TodoEntry(
packages/web/examples/todomvcsingle.rs
+1
View File
@@ -115,6 +115,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_atom_family(&ctx, &TODOS, props.id);
let contents = "";
ctx.render(rsx! (
li {
packages/web/examples/weather.rs
+1 -2
View File
@@ -17,7 +17,7 @@ fn main() {
<div class="flex flex-col bg-white rounded p-4 w-full max-w-xs">
// Title
<div class="font-bold text-xl">
"Jon's awesome site!!11"
"Jon's awesome site!!"
</div>
// Subtext / description
@@ -45,4 +45,3 @@ fn main() {
})
}));
}