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

fix: desktop and mobile

Browse Source
This commit is contained in:
Jonathan Kelley committed 2021-10-22 01:16:39 -04:00
1 parent f66cda4bed
commit 601078f9cf
23 files changed
+670 -132
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/core/Cargo.toml
+2 -2
View File
@@ -42,13 +42,13 @@ serde_repr = { version = "0.1.7", optional = true }
[dev-dependencies]
anyhow = "1.0.42"
async-std = { version = "1.9.0", features = ["attributes"] }
criterion = "0.3.5"
dioxus-html = { path = "../html" }
fern = { version = "0.6.0", features = ["colored"] }
rand = { version = "0.8.4", features = ["small_rng"] }
simple_logger = "1.13.0"
dioxus-core-macro = { path = "../core-macro", version = "0.1.2" }
async-std = { version = "1.9.0", features = ["attributes"] }
criterion = "0.3.5"
[features]
default = []
packages/core/examples/async.rs
+2 -2
View File
@@ -7,9 +7,9 @@ fn main() {
const App: FC<()> = |(cx, props)| {
let id = cx.scope_id();
cx.submit_task(Box::pin(async move { id }));
// cx.submit_task(Box::pin(async move { id }));
let (handle, contents) = use_task(cx, || async { "hello world".to_string() });
// let (handle, contents) = use_task(cx, || async { "hello world".to_string() });
todo!()
};
packages/core/tests/borrowedstate.rs
+12 -8
View File
@@ -1,9 +1,16 @@
use dioxus::{nodes::VSuspended, prelude::*, DomEdit, TestDom};
#![allow(non_snake_case)]
use dioxus::prelude::*;
use dioxus_core as dioxus;
use dioxus_core_macro::*;
use dioxus_html as dioxus_elements;
static Parent: FC<()> = |(cx, props)| {
#[test]
fn test_borrowed_state() {
let _ = VirtualDom::new(Parent);
}
fn Parent((cx, _): Component<()>) -> DomTree {
let value = cx.use_hook(|_| String::new(), |f| &*f, |_| {});
cx.render(rsx! {
@@ -14,11 +21,11 @@ static Parent: FC<()> = |(cx, props)| {
Child { name: value }
}
})
};
}
#[derive(Props)]
struct ChildProps<'a> {
name: &'a String,
name: &'a str,
}
fn Child<'a>((cx, props): Component<'a, ChildProps>) -> DomTree<'a> {
@@ -32,7 +39,7 @@ fn Child<'a>((cx, props): Component<'a, ChildProps>) -> DomTree<'a> {
#[derive(Props)]
struct Grandchild<'a> {
name: &'a String,
name: &'a str,
}
fn Child2<'a>((cx, props): Component<'a, Grandchild>) -> DomTree<'a> {
@@ -40,6 +47,3 @@ fn Child2<'a>((cx, props): Component<'a, Grandchild>) -> DomTree<'a> {
div { "Hello {props.name}!" }
})
}
#[test]
fn test_borrowed_state() {}
packages/core/tests/create_dom.rs
+2
View File
@@ -1,3 +1,5 @@
#![allow(unused, non_upper_case_globals)]
//! Prove that the dom works normally through virtualdom methods.
//!
//! This methods all use "rebuild" which completely bypasses the scheduler.
packages/core/tests/diffing.rs
+1
View File
@@ -1,3 +1,4 @@
#![allow(unused, non_upper_case_globals)]
//! Diffing Tests
//!
//! These tests only verify that the diffing algorithm works properly for single components.
packages/core/tests/display_vdom.rs
+2 -5
View File
@@ -1,19 +1,16 @@
#![allow(unused, non_upper_case_globals)]
//! test that we can display the virtualdom properly
//!
//!
//!
use std::{cell::RefCell, rc::Rc};
use anyhow::{Context, Result};
use dioxus::prelude::*;
use dioxus_core as dioxus;
use dioxus_core_macro::*;
use dioxus_html as dioxus_elements;
mod test_logging;
const IS_LOGGING_ENABLED: bool = true;
#[test]
fn please_work() {
static App: FC<()> = |(cx, props)| {
packages/core/tests/eventsystem.rs
-19
View File
@@ -1,19 +0,0 @@
use bumpalo::Bump;
use anyhow::{Context, Result};
use dioxus::{prelude::*, DomEdit};
use dioxus_core as dioxus;
use dioxus_core_macro::*;
use dioxus_html as dioxus_elements;
#[async_std::test]
async fn event_queue_works() {
static App: FC<()> = |(cx, props)| {
cx.render(rsx! {
div { "hello world" }
})
};
let mut dom = VirtualDom::new(App);
let edits = dom.rebuild();
}
packages/core/tests/hooks.rs
-26
View File
@@ -1,26 +0,0 @@
use std::{cell::RefCell, rc::Rc};
use anyhow::{Context, Result};
use dioxus::prelude::*;
use dioxus_core as dioxus;
use dioxus_html as dioxus_elements;
type Shared<T> = Rc<RefCell<T>>;
#[test]
fn sample_refs() {
// static App: FC<()> = |(cx, props)|{
// let div_ref = use_node_ref::<MyRef, _>(cx);
// cx.render(rsx! {
// div {
// style: { color: "red" },
// node_ref: div_ref,
// onmouseover: move |_| {
// div_ref.borrow_mut().focus();
// },
// },
// })
// };
}
packages/core/tests/lifecycle.rs
+2 -2
View File
@@ -1,6 +1,6 @@
//! Tests for the lifecycle of components.
#![allow(unused, non_upper_case_globals)]
use anyhow::{Context, Result};
//! Tests for the lifecycle of components.
use dioxus::prelude::*;
use dioxus_core as dioxus;
use dioxus_core_macro::*;
packages/core/tests/sharedstate.rs
+3 -7
View File
@@ -1,4 +1,6 @@
use dioxus::{nodes::VSuspended, prelude::*, DomEdit, TestDom};
#![allow(unused, non_upper_case_globals)]
use dioxus::{prelude::*, DomEdit, TestDom};
use dioxus_core as dioxus;
use dioxus_core_macro::*;
use dioxus_html as dioxus_elements;
@@ -7,12 +9,6 @@ use DomEdit::*;
mod test_logging;
fn new_dom() -> TestDom {
const IS_LOGGING_ENABLED: bool = false;
test_logging::set_up_logging(IS_LOGGING_ENABLED);
TestDom::new()
}
#[test]
fn shared_state_test() {
struct MySharedState(&'static str);
packages/core/tests/test_logging.rs
+1 -2
View File
@@ -1,6 +1,5 @@
pub fn set_up_logging(enabled: bool) {
use fern::colors::{Color, ColoredLevelConfig};
if !enabled {
return;
@@ -19,7 +18,7 @@ pub fn set_up_logging(enabled: bool) {
// configure colors for the name of the level.
// since almost all of them are the same as the color for the whole line, we
// just clone `colors_line` and overwrite our changes
let colors_level = colors_line.clone().info(Color::Green);
let colors_level = colors_line.info(Color::Green);
// here we set up our fern Dispatch
// when running tests in batch, the logger is re-used, so ignore the logger error
packages/core/tests/vdom_rebuild.rs
+2
View File
@@ -1,3 +1,5 @@
#![allow(unused, non_upper_case_globals)]
//! Rebuilding tests
//! ----------------
//!
packages/desktop/.vscode/settings.json
Vendored
-3
View File
@@ -1,3 +0,0 @@
{
"rust-analyzer.cargo.allFeatures": true
}
packages/desktop/.vscode/spellright.dict
Vendored
-1
View File
@@ -1 +0,0 @@
WebviewWindow
packages/desktop/Cargo.toml
+1
View File
@@ -33,6 +33,7 @@ tokio_runtime = ["tokio"]
[dev-dependencies]
dioxus-html = { path = "../html" }
dioxus-hooks = { path = "../hooks" }
simple_logger = "1.13.0"
[build-dependencies]
packages/desktop/examples/crm.rs
+8 -8
View File
@@ -22,14 +22,14 @@ pub struct Client {
}
static App: FC<()> = |(cx, _)| {
let scene = use_state(cx, || Scene::ClientsList);
let mut scene = use_state(cx, || Scene::ClientsList);
let clients = use_ref(cx, || vec![] as Vec<Client>);
let firstname = use_state(cx, || String::new());
let lastname = use_state(cx, || String::new());
let description = use_state(cx, || String::new());
let mut firstname = use_state(cx, String::new);
let mut lastname = use_state(cx, String::new);
let mut description = use_state(cx, String::new);
let scene = match *scene {
let scene = match scene.get() {
Scene::ClientsList => {
rsx!(cx, div { class: "crm"
h2 { "List of clients" margin_bottom: "10px" }
@@ -61,13 +61,13 @@ static App: FC<()> = |(cx, _)| {
h2 {"Add new client" margin_bottom: "10px" }
form { class: "pure-form"
input { class: "new-client firstname" placeholder: "First name" value: "{firstname}"
oninput: move |evt| firstname.set(evt.value.clone())
oninput: move |evt| firstname.set(evt.value)
}
input { class: "new-client lastname" placeholder: "Last name" value: "{lastname}"
oninput: move |evt| lastname.set(evt.value.clone())
oninput: move |evt| lastname.set(evt.value)
}
textarea { class: "new-client description" placeholder: "Description" value: "{description}"
oninput: move |evt| description.set(evt.value.clone())
oninput: move |evt| description.set(evt.value)
}
}
button { class: "pure-button pure-button-primary", onclick: {add_new}, "Add New" }
packages/desktop/examples/todomvc.css
+379
View File
@@ -0,0 +1,379 @@
html,
body {
margin: 0;
padding: 0;
}
button {
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 100%;
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
color: inherit;
-webkit-appearance: none;
appearance: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4em;
background: #f5f5f5;
color: #4d4d4d;
min-width: 230px;
max-width: 550px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 300;
}
:focus {
outline: 0;
}
.hidden {
display: none;
}
.todoapp {
background: #fff;
margin: 130px 0 40px 0;
position: relative;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.todoapp input::-webkit-input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
.todoapp input::-moz-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
.todoapp input::input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
.todoapp h1 {
position: absolute;
top: -155px;
width: 100%;
font-size: 100px;
font-weight: 100;
text-align: center;
color: rgba(175, 47, 47, 0.15);
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
}
.new-todo,
.edit {
position: relative;
margin: 0;
width: 100%;
font-size: 24px;
font-family: inherit;
font-weight: inherit;
line-height: 1.4em;
border: 0;
color: inherit;
padding: 6px;
border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.new-todo {
padding: 16px 16px 16px 60px;
border: none;
background: rgba(0, 0, 0, 0.003);
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}
.main {
position: relative;
z-index: 2;
border-top: 1px solid #e6e6e6;
}
.toggle-all {
text-align: center;
border: none;
/* Mobile Safari */
opacity: 0;
position: absolute;
}
.toggle-all+label {
width: 60px;
height: 34px;
font-size: 0;
position: absolute;
top: -52px;
left: -13px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.toggle-all+label:before {
content: '❯';
font-size: 22px;
color: #e6e6e6;
padding: 10px 27px 10px 27px;
}
.toggle-all:checked+label:before {
color: #737373;
}
.todo-list {
margin: 0;
padding: 0;
list-style: none;
}
.todo-list li {
position: relative;
font-size: 24px;
border-bottom: 1px solid #ededed;
}
.todo-list li:last-child {
border-bottom: none;
}
.todo-list li.editing {
border-bottom: none;
padding: 0;
}
.todo-list li.editing .edit {
display: block;
width: 506px;
padding: 12px 16px;
margin: 0 0 0 43px;
}
.todo-list li.editing .view {
display: none;
}
.todo-list li .toggle {
text-align: center;
width: 40px;
/* auto, since non-WebKit browsers doesn't support input styling */
height: auto;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
border: none;
/* Mobile Safari */
-webkit-appearance: none;
appearance: none;
}
.todo-list li .toggle {
opacity: 0;
}
.todo-list li .toggle+label {
/*
Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
*/
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position: center left;
}
.todo-list li .toggle:checked+label {
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
}
.todo-list li label {
word-break: break-all;
padding: 15px 15px 15px 60px;
display: block;
line-height: 1.2;
transition: color 0.4s;
}
.todo-list li.completed label {
color: #d9d9d9;
text-decoration: line-through;
}
.todo-list li .destroy {
display: none;
position: absolute;
top: 0;
right: 10px;
bottom: 0;
width: 40px;
height: 40px;
margin: auto 0;
font-size: 30px;
color: #cc9a9a;
margin-bottom: 11px;
transition: color 0.2s ease-out;
}
.todo-list li .destroy:hover {
color: #af5b5e;
}
.todo-list li .destroy:after {
content: '×';
}
.todo-list li:hover .destroy {
display: block;
}
.todo-list li .edit {
display: none;
}
.todo-list li.editing:last-child {
margin-bottom: -1px;
}
.footer {
color: #777;
padding: 10px 15px;
height: 20px;
text-align: center;
border-top: 1px solid #e6e6e6;
}
.footer:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 50px;
overflow: hidden;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
0 8px 0 -3px #f6f6f6,
0 9px 1px -3px rgba(0, 0, 0, 0.2),
0 16px 0 -6px #f6f6f6,
0 17px 2px -6px rgba(0, 0, 0, 0.2);
}
.todo-count {
float: left;
text-align: left;
}
.todo-count strong {
font-weight: 300;
}
.filters {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
right: 0;
left: 0;
}
.filters li {
display: inline;
}
.filters li a {
color: inherit;
margin: 3px;
padding: 3px 7px;
text-decoration: none;
border: 1px solid transparent;
border-radius: 3px;
}
.filters li a:hover {
border-color: rgba(175, 47, 47, 0.1);
}
.filters li a.selected {
border-color: rgba(175, 47, 47, 0.2);
}
.clear-completed,
html .clear-completed:active {
float: right;
position: relative;
line-height: 20px;
text-decoration: none;
cursor: pointer;
}
.clear-completed:hover {
text-decoration: underline;
}
.info {
margin: 65px auto 0;
color: #bfbfbf;
font-size: 10px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-align: center;
}
.info p {
line-height: 1;
}
.info a {
color: inherit;
text-decoration: none;
font-weight: 400;
}
.info a:hover {
text-decoration: underline;
}
/*
Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox
*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
.toggle-all,
.todo-list li .toggle {
background: none;
}
.todo-list li .toggle {
height: 40px;
}
}
@media (max-width: 430px) {
.footer {
height: 50px;
}
.filters {
bottom: 10px;
}
}
packages/desktop/examples/todomvc.rs
+171
View File
@@ -0,0 +1,171 @@
#![allow(non_upper_case_globals, non_snake_case)]
use dioxus_core as dioxus;
use dioxus_core::prelude::*;
use dioxus_core_macro::*;
use dioxus_hooks::*;
use dioxus_html as dioxus_elements;
use simple_logger::SimpleLogger;
use std::collections::HashMap;
fn main() {
if cfg!(debug_assertions) {
SimpleLogger::new().init().unwrap();
}
dioxus_desktop::launch(App, |c| c)
}
#[derive(PartialEq)]
pub enum FilterState {
All,
Active,
Completed,
}
#[derive(Debug, PartialEq)]
pub struct TodoItem {
pub id: u32,
pub checked: bool,
pub contents: String,
}
pub type Todos = HashMap<u32, TodoItem>;
pub static App: FC<()> = |(cx, _)| {
// Share our TodoList to the todos themselves
use_provide_state(cx, || Todos::new());
// Save state for the draft, filter
let mut draft = use_state(cx, || "".to_string());
let mut filter = use_state(cx, || FilterState::All);
let mut todo_id = use_state(cx, || 0);
// Consume the todos
let todos = use_shared_state::<Todos>(cx)?;
// Filter the todos based on the filter state
let mut filtered_todos = todos
.read()
.iter()
.filter(|(_, item)| match *filter {
FilterState::All => true,
FilterState::Active => !item.checked,
FilterState::Completed => item.checked,
})
.map(|f| *f.0)
.collect::<Vec<_>>();
filtered_todos.sort_unstable();
// Define the actions to manage the todolist
let mut submit_todo = move || {
if !draft.is_empty() {
todos.write().insert(
*todo_id,
TodoItem {
id: *todo_id,
checked: false,
contents: draft.get().clone(),
},
);
todo_id += 1;
draft.set("".to_string());
}
};
let clear_completed = move || {
todos.write().retain(|_, todo| todo.checked == false);
};
// Some assists in actually rendering the content
let show_clear_completed = todos.read().values().any(|todo| todo.checked);
let items_left = filtered_todos.len();
let item_text = match items_left {
1 => "item",
_ => "items",
};
cx.render(rsx!{
section { class: "todoapp"
style { {[include_str!("./todomvc.css")]} }
div {
header { class: "header"
h1 {"todos"}
input {
class: "new-todo"
placeholder: "What needs to be done?"
value: "{draft}"
autofocus: "true"
oninput: move |evt| draft.set(evt.value.clone())
onkeydown: move |evt| {
if evt.key == "Enter" {
submit_todo();
}
}
}
}
ul { class: "todo-list"
{filtered_todos.iter().map(|id| rsx!(TodoEntry { key: "{id}", id: *id }))}
}
{(!todos.read().is_empty()).then(|| rsx!(
footer { class: "footer"
span { class: "todo-count" strong {"{items_left} "} span {"{item_text} left"} }
ul { class: "filters"
li { class: "All", a { onclick: move |_| filter.set(FilterState::All), "All" }}
li { class: "Active", a { onclick: move |_| filter.set(FilterState::Active), "Active" }}
li { class: "Completed", a { onclick: move |_| filter.set(FilterState::Completed), "Completed" }}
}
{(show_clear_completed).then(|| rsx!(
button { class: "clear-completed", onclick: move |_| clear_completed(),
"Clear completed"
}
))}
}
))}
}
}
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(PartialEq, Props)]
pub struct TodoEntryProps {
id: u32,
}
pub fn TodoEntry((cx, props): Component<TodoEntryProps>) -> DomTree {
let todos = use_shared_state::<Todos>(cx)?;
let _todos = todos.read();
let todo = _todos.get(&props.id)?;
let is_editing = use_state(cx, || false);
let completed = if todo.checked { "completed" } else { "" };
cx.render(rsx!{
li { class: "{completed}"
div { class: "view"
input { class: "toggle" r#type: "checkbox" id: "cbg-{todo.id}" checked: "{todo.checked}"
onchange: move |evt| {
todos.write().get_mut(&props.id).map(|todo| todo.checked = evt.value.parse().unwrap());
}
}
label { r#for: "cbg-{todo.id}" pointer_events: "none"
"{todo.contents}"
}
{is_editing.then(|| rsx!{
input { value: "{todo.contents}"
oninput: move |evt| {
todos.write().get_mut(&props.id).map(|todo| todo.contents = evt.value.clone());
},
}
})}
}
}
})
}
packages/desktop/src/events.rs
-1
View File
@@ -49,7 +49,6 @@ fn make_synthetic_event(name: &str, val: serde_json::Value) -> Box<dyn Any + Sen
Box::new(serde_json::from_value::<CompositionEvent>(val).unwrap())
}
"keydown" | "keypress" | "keyup" => {
dbg!(&val);
let evt = serde_json::from_value::<KeyboardEvent>(val).unwrap();
Box::new(evt)
}
packages/desktop/src/index.js
+57 -35
View File
@@ -39,12 +39,12 @@ class Interpreter {
}
ReplaceWith(edit) {
console.log(edit);
// console.log(edit);
let root = this.nodes[edit.root];
let els = this.stack.splice(this.stack.length - edit.m);
console.log(root);
console.log(els);
// console.log(root);
// console.log(els);
root.replaceWith(...els);
@@ -108,7 +108,7 @@ class Interpreter {
this.listeners[event_name] = "bla";
this.root.addEventListener(event_name, (event) => {
console.log("CLICKED");
// console.log("CLICKED");
const target = event.target;
const val = target.getAttribute(`dioxus-event-${event_name}`);
if (val == null) {
@@ -119,30 +119,31 @@ class Interpreter {
const scope_id = parseInt(fields[0]);
const real_id = parseInt(fields[1]);
// console.log(`parsed event with scope_id ${scope_id} and real_id ${real_id}`);
// // console.log(`parsed event with scope_id ${scope_id} and real_id ${real_id}`);
console.log("message fired");
// console.log("message fired");
let contents = serialize_event(event);
rpc.call('user_event', {
let evt = {
event: event_name,
scope: scope_id,
mounted_dom_id: real_id,
contents: contents,
}).then((reply) => {
console.log("reply received");
};
// console.log(evt);
rpc.call('user_event', evt).then((reply) => {
// console.log("reply received", reply);
// console.log(reply);
this.stack.push(this.root);
let edits = reply.edits;
reply.map((reply) => {
let edits = reply.edits;
for (let x = 0; x < edits.length; x++) {
let edit = edits[x];
let f = this[edit.type];
f.call(this, edit);
}
});
for (let x = 0; x < edits.length; x++) {
let edit = edits[x];
let f = this[edit.type];
f.call(this, edit);
}
// console.log("initiated");
})
});
}
@@ -153,25 +154,35 @@ class Interpreter {
}
SetAttribute(edit) {
// console.log("setting attr", edit);
const name = edit.field;
const value = edit.value;
const ns = edit.ns;
const node = this.nodes[edit.root]
if (ns == "style") {
node.style[name] = value;
} else if (ns !== undefined) {
} else if ((ns != null) || (ns != undefined)) {
node.setAttributeNS(ns, name, value);
} else {
node.setAttribute(name, value);
}
if (name === "value") {
node.value = value;
}
if (name === "checked") {
node.checked = true;
}
if (name === "selected") {
node.selected = true;
switch (name) {
case "value":
node.value = value;
break;
case "checked":
// console.log("setting checked");
node.checked = (value === "true");
break;
case "selected":
node.selected = (value === "true");
break;
case "dangerous_inner_html":
node.innerHTML = value;
break;
default:
// console.log("setting attr directly ", name, value);
node.setAttribute(name, value);
}
}
}
RemoveAttribute(edit) {
@@ -209,14 +220,14 @@ async function initialize() {
}
function apply_edits(edits, interpreter) {
console.log(edits);
// console.log(edits);
for (let x = 0; x < edits.length; x++) {
let edit = edits[x];
let f = interpreter[edit.type];
f.call(interpreter, edit);
}
// console.log("stack completed: ", interpreter.stack);
// // console.log("stack completed: ", interpreter.stack);
}
function serialize_event(event) {
@@ -244,8 +255,8 @@ const SerializeMap = {
"focus": serialize_focus,
"blur": serialize_focus,
"change": serialize_form,
// "change": serialize_change,
// "change": serialize_form,
"change": serialize_change,
"input": serialize_form,
"invalid": serialize_form,
@@ -353,8 +364,19 @@ function serialize_keyboard(event) {
function serialize_focus(_event) {
return {}
}
function serialize_change(_event) {
return {}
function serialize_change(event) {
let target = event.target;
let value;
if (target.type === "checkbox" || target.type === "radio") {
value = target.checked ? "true" : "false";
} else {
value = target.value ?? target.textContent;
}
return {
value: value
}
}
function serialize_form(event) {
let target = event.target;
packages/desktop/src/lib.rs
+17 -5
View File
@@ -95,13 +95,13 @@ pub fn run<T: 'static + Send + Sync>(
match event {
Event::NewEvents(StartCause::Init) => {
let window = WindowBuilder::new().build(&event_loop).unwrap();
let window = WindowBuilder::new().build(event_loop).unwrap();
let window_id = window.id();
let (event_tx, event_rx) = tokio::sync::mpsc::unbounded_channel();
let my_props = props_shared.take().unwrap();
let sender = launch_vdom_with_tokio(root, my_props, event_tx.clone());
let sender = launch_vdom_with_tokio(root, my_props, event_tx);
let locked_receiver = Rc::new(RefCell::new(event_rx));
@@ -121,10 +121,15 @@ pub fn run<T: 'static + Send + Sync>(
}
"user_event" => {
let event = events::trigger_from_serialized(req.params.unwrap());
log::debug!("User event: {:?}", event);
sender.unbounded_send(SchedulerMsg::UiEvent(event)).unwrap();
if let Some(BridgeEvent::Update(edits)) = rx.blocking_recv() {
log::info!("bridge received message {:?}", edits);
Some(RpcResponse::new_result(req.id.take(), Some(edits)))
} else {
log::info!("none received message");
None
}
}
@@ -224,13 +229,20 @@ pub(crate) fn launch_vdom_with_tokio<P: Send + 'static>(
let mut muts = vir.run_with_deadline(|| false);
log::debug!("finished running with deadline");
let mut edits = vec![];
while let Some(edit) = muts.pop() {
log::debug!("sending message on channel with edit {:?}", edit);
let edit_string = serde_json::to_value(Evt { edits: edit.edits })
.expect("serializing edits should never fail");
event_tx
.send(BridgeEvent::Update(edit_string))
.expect("Sending should not fail");
edits.push(edit_string);
}
event_tx
.send(BridgeEvent::Update(serde_json::Value::Array(edits)))
.expect("Sending should not fail");
}
})
});
packages/hooks/src/usestate.rs
+1 -1
View File
@@ -102,7 +102,7 @@ impl<'a, T: 'static> UseState<'a, T> {
}
}
pub fn set(&self, new_val: T) {
pub fn set(&mut self, new_val: T) {
*self.inner.wip.borrow_mut() = Some(new_val);
self.needs_update();
}
packages/html/src/lib.rs
+7 -5
View File
@@ -1076,7 +1076,9 @@ builder_constructors! {
/// Build a
/// [`<code>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code)
/// element.
code {};
code {
language: String,
};
/// Build a
/// [`<data>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data)
@@ -1973,8 +1975,8 @@ pub trait SvgAttributes {
vert_adv_y: "vert-adv-y",
vert_origin_x: "vert-origin-x",
vert_origin_y: "vert-origin-y",
viewBox: "viewBox",
viewTarget: "viewTarget",
view_box: "viewBox",
view_target: "viewTarget",
visibility: "visibility",
width: "width",
widths: "widths",
@@ -1985,11 +1987,11 @@ pub trait SvgAttributes {
x1: "x1",
x2: "x2",
xmlns: "xmlns",
xChannelSelector: "xChannelSelector",
x_channel_selector: "xChannelSelector",
y: "y",
y1: "y1",
y2: "y2",
yChannelSelector: "yChannelSelector",
y_channel_selector: "yChannelSelector",
z: "z",
zoomAndPan: "zoomAndPan",
}