Mirrors/dioxus
2
0
Fork 0
mirror of https://github.com/DioxusLabs/dioxus synced 2024-11-27 06:30:20 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge branch 'master' of https://github.com/DioxusLabs/dioxus into lazy_tui

Browse source
This commit is contained in:
Evan Almloff 2022-04-24 06:56:07 -05:00
commit 84db875101
22 changed files with 746 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
benches/tui_update.rs
View file

@ -17,62 +17,14 @@ fn tui_update(c: &mut Criterion) {
&size,
|b, size| {
b.iter(|| match size {
1 => dioxus::tui::launch_cfg(
app3,
Config {
headless: true,
..Default::default()
},
),
2 => dioxus::tui::launch_cfg(
app6,
Config {
headless: true,
..Default::default()
},
),
3 => dioxus::tui::launch_cfg(
app9,
Config {
headless: true,
..Default::default()
},
),
4 => dioxus::tui::launch_cfg(
app12,
Config {
headless: true,
..Default::default()
},
),
5 => dioxus::tui::launch_cfg(
app15,
Config {
headless: true,
..Default::default()
},
),
6 => dioxus::tui::launch_cfg(
app18,
Config {
headless: true,
..Default::default()
},
),
7 => dioxus::tui::launch_cfg(
app21,
Config {
headless: true,
..Default::default()
},
),
8 => dioxus::tui::launch_cfg(
app24,
Config {
headless: true,
..Default::default()
},
),
1 => dioxus::tui::launch_cfg(app3, Config::default().with_headless()),
2 => dioxus::tui::launch_cfg(app6, Config::default().with_headless()),
3 => dioxus::tui::launch_cfg(app9, Config::default().with_headless()),
4 => dioxus::tui::launch_cfg(app12, Config::default().with_headless()),
5 => dioxus::tui::launch_cfg(app15, Config::default().with_headless()),
6 => dioxus::tui::launch_cfg(app18, Config::default().with_headless()),
7 => dioxus::tui::launch_cfg(app21, Config::default().with_headless()),
8 => dioxus::tui::launch_cfg(app24, Config::default().with_headless()),
_ => (),
})
},

37
examples/custom_html.rs Normal file
View file

@ -0,0 +1,37 @@
//! This example shows how to use a custom index.html and custom <HEAD> extensions
//! to add things like stylesheets, scripts, and third-party JS libraries.
use dioxus::prelude::*;
fn main() {
dioxus::desktop::launch_cfg(app, |c| {
c.with_custom_head("<style>body { background-color: red; }</style>".into())
});
dioxus::desktop::launch_cfg(app, |c| {
c.with_custom_index(
r#"
<!DOCTYPE html>
<html>
<head>
<title>Dioxus app</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>body { background-color: blue; }</style>
</head>
<body>
<div id="main"></div>
</body>
</html>
"#
.into(),
)
});
}
fn app(cx: Scope) -> Element {
cx.render(rsx! {
div {
h1 {"hello world!"}
}
})
}

5
examples/tailwind.rs
View file

@ -11,12 +11,13 @@
use dioxus::prelude::*;
fn main() {
dioxus::desktop::launch(app);
dioxus::desktop::launch_cfg(app, |c| {
c.with_custom_head("<script src=\"https://cdn.tailwindcss.com\"></script>".to_string())
});
}
pub fn app(cx: Scope) -> Element {
cx.render(rsx!(
link { href:"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css", rel:"stylesheet" }
div {
header { class: "text-gray-400 bg-gray-900 body-font",
div { class: "container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center",

5
examples/tui_color_test.rs
View file

@ -3,10 +3,7 @@ use dioxus::prelude::*;
fn main() {
dioxus::tui::launch_cfg(
app,
dioxus::tui::Config {
rendering_mode: dioxus::tui::RenderingMode::Ansi,
..Default::default()
},
dioxus::tui::Config::default().with_rendering_mode(dioxus::tui::RenderingMode::Ansi),
);
}

24
packages/desktop/src/cfg.rs
View file

@ -21,6 +21,8 @@ pub struct DesktopConfig {
pub(crate) event_handler: Option<Box<DynEventHandlerFn>>,
pub(crate) disable_context_menu: bool,
pub(crate) resource_dir: Option<PathBuf>,
pub(crate) custom_head: Option<String>,
pub(crate) custom_index: Option<String>,
}
pub(crate) type WryProtocol = (
@ -42,6 +44,8 @@ impl DesktopConfig {
pre_rendered: None,
disable_context_menu: !cfg!(debug_assertions),
resource_dir: None,
custom_head: None,
custom_index: None,
}
}
@ -100,10 +104,30 @@ impl DesktopConfig {
self
}
/// Add a custom icon for this application
pub fn with_icon(&mut self, icon: Icon) -> &mut Self {
self.window.window.window_icon = Some(icon);
self
}
/// Inject additional content into the document's HEAD.
///
/// This is useful for loading CSS libraries, JS libraries, etc.
pub fn with_custom_head(&mut self, head: String) -> &mut Self {
self.custom_head = Some(head);
self
}
/// Use a custom index.html instead of the default Dioxus one.
///
/// Make sure your index.html is valid HTML.
///
/// Dioxus injects some loader code into the closing body tag. Your document
/// must include a body element!
pub fn with_custom_index(&mut self, index: String) -> &mut Self {
self.custom_index = Some(index);
self
}
}
impl DesktopConfig {

2
packages/desktop/src/desktop_context.rs
View file

@ -201,7 +201,7 @@ pub(super) fn handler(
/// Get a closure that executes any JavaScript in the WebView context.
pub fn use_eval<S: std::string::ToString>(cx: &ScopeState) -> &dyn Fn(S) {
let desktop = use_window(&cx).clone();
let desktop = use_window(cx).clone();
cx.use_hook(|_| move |script| desktop.eval(script))
}

7
packages/desktop/src/index.html
View file

@ -3,13 +3,10 @@
<head>
<title>Dioxus app</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CUSTOM HEAD -->
</head>
<body>
<div id="main"></div>
<script>
import("./index.js").then(function (module) {
module.main();
});
</script>
<!-- MODULE LOADER -->
</body>
</html>

12
packages/desktop/src/lib.rs
View file

@ -125,8 +125,9 @@ pub fn launch_with_props<P: 'static + Send>(
let proxy = proxy.clone();
let file_handler = cfg.file_drop_handler.take();
let custom_head = cfg.custom_head.clone();
let resource_dir = cfg.resource_dir.clone();
let index_file = cfg.custom_index.clone();
let mut webview = WebViewBuilder::new(window)
.unwrap()
@ -164,7 +165,12 @@ pub fn launch_with_props<P: 'static + Send>(
});
})
.with_custom_protocol(String::from("dioxus"), move |r| {
protocol::desktop_handler(r, resource_dir.clone())
protocol::desktop_handler(
r,
resource_dir.clone(),
custom_head.clone(),
index_file.clone(),
)
})
.with_file_drop_handler(move |window, evet| {
file_handler
@ -183,12 +189,10 @@ pub fn launch_with_props<P: 'static + Send>(
r#"
if (document.addEventListener) {
document.addEventListener('contextmenu', function(e) {
alert("You've tried to open context menu");
e.preventDefault();
}, false);
} else {
document.attachEvent('oncontextmenu', function() {
alert("You've tried to open context menu");
window.event.returnValue = false;
});
}

37
packages/desktop/src/protocol.rs
View file

@ -4,7 +4,20 @@ use wry::{
Result,
};
pub(super) fn desktop_handler(request: &Request, asset_root: Option<PathBuf>) -> Result<Response> {
const MODULE_LOADER: &str = r#"
<script>
import("./index.js").then(function (module) {
module.main();
});
</script>
"#;
pub(super) fn desktop_handler(
request: &Request,
asset_root: Option<PathBuf>,
custom_head: Option<String>,
custom_index: Option<String>,
) -> Result<Response> {
// Any content that uses the `dioxus://` scheme will be shuttled through this handler as a "special case".
// For now, we only serve two pieces of content which get included as bytes into the final binary.
let path = request.uri().replace("dioxus://", "");
@ -13,9 +26,25 @@ pub(super) fn desktop_handler(request: &Request, asset_root: Option<PathBuf>) ->
let trimmed = path.trim_start_matches("index.html/");
if trimmed.is_empty() {
ResponseBuilder::new()
.mimetype("text/html")
.body(include_bytes!("./index.html").to_vec())
// If a custom index is provided, just defer to that, expecting the user to know what they're doing.
// we'll look for the closing </body> tag and insert our little module loader there.
if let Some(custom_index) = custom_index {
let rendered = custom_index
.replace("</body>", &format!("{}</body>", MODULE_LOADER))
.into_bytes();
ResponseBuilder::new().mimetype("text/html").body(rendered)
} else {
// Otherwise, we'll serve the default index.html and apply a custom head if that's specified.
let mut template = include_str!("./index.html").to_string();
if let Some(custom_head) = custom_head {
template = template.replace("<!-- CUSTOM HEAD -->", &custom_head);
}
template = template.replace("<!-- MODULE LOADER -->", MODULE_LOADER);
ResponseBuilder::new()
.mimetype("text/html")
.body(template.into_bytes())
}
} else if trimmed == "index.js" {
ResponseBuilder::new()
.mimetype("text/javascript")

420
packages/fermi/src/hooks/state.rs Normal file
View file

@ -0,0 +1,420 @@
use crate::{AtomId, AtomRoot, Writable};
use dioxus_core::{ScopeId, ScopeState};
use std::{
cell::RefMut,
fmt::{Debug, Display},
ops::{Add, Div, Mul, Not, Sub},
rc::Rc,
};
/// Store state between component renders.
///
/// ## Dioxus equivalent of AtomState, designed for Rust
///
/// The Dioxus version of `AtomState` for state management inside components. It allows you to ergonomically store and
/// modify state between component renders. When the state is updated, the component will re-render.
///
///
/// ```ignore
/// static COUNT: Atom<u32> = |_| 0;
///
/// fn Example(cx: Scope) -> Element {
/// let mut count = use_atom_state(&cx, COUNT);
///
/// cx.render(rsx! {
/// div {
/// h1 { "Count: {count}" }
/// button { onclick: move |_| count += 1, "Increment" }
/// button { onclick: move |_| count -= 1, "Decrement" }
/// }
/// ))
/// }
/// ```
pub fn use_atom_state<'a, T: 'static>(cx: &'a ScopeState, f: impl Writable<T>) -> &'a AtomState<T> {
let root = crate::use_atom_root(cx);
let inner = cx.use_hook(|_| AtomState {
value: None,
root: root.clone(),
scope_id: cx.scope_id(),
id: f.unique_id(),
});
inner.value = Some(inner.root.register(f, cx.scope_id()));
inner
}
pub struct AtomState<V: 'static> {
root: Rc<AtomRoot>,
id: AtomId,
scope_id: ScopeId,
value: Option<Rc<V>>,
}
impl<V> Drop for AtomState<V> {
fn drop(&mut self) {
self.root.unsubscribe(self.id, self.scope_id)
}
}
impl<T: 'static> AtomState<T> {
/// Set the state to a new value.
pub fn set(&self, new: T) {
self.root.set(self.id, new)
}
/// Get the current value of the state by cloning its container Rc.
///
/// This is useful when you are dealing with state in async contexts but need
/// to know the current value. You are not given a reference to the state.
///
/// # Examples
/// An async context might need to know the current value:
///
/// ```rust, ignore
/// fn component(cx: Scope) -> Element {
/// let count = use_state(&cx, || 0);
/// cx.spawn({
/// let set_count = count.to_owned();
/// async move {
/// let current = set_count.current();
/// }
/// })
/// }
/// ```
#[must_use]
pub fn current(&self) -> Rc<T> {
self.value.as_ref().unwrap().clone()
}
/// Get the `setter` function directly without the `AtomState` wrapper.
///
/// This is useful for passing the setter function to other components.
///
/// However, for most cases, calling `to_owned` o`AtomState`te is the
/// preferred way to get "anoth`set_state`tate handle.
///
///
/// # Examples
/// A component might require an `Rc<dyn Fn(T)>` as an input to set a value.
///
/// ```rust, ignore
/// fn component(cx: Scope) -> Element {
/// let value = use_state(&cx, || 0);
///
/// rsx!{
/// Component {
/// handler: value.setter()
/// }
/// }
/// }
/// ```
#[must_use]
pub fn setter(&self) -> Rc<dyn Fn(T)> {
let root = self.root.clone();
let id = self.id;
Rc::new(move |new_val| root.set(id, new_val))
}
/// Set the state to a new value, using the current state value as a reference.
///
/// This is similar to passing a closure to React's `set_value` function.
///
/// # Examples
///
/// Basic usage:
/// ```rust
/// # use dioxus_core::prelude::*;
/// # use dioxus_hooks::*;
/// fn component(cx: Scope) -> Element {
/// let value = use_state(&cx, || 0);
///
/// // to increment the value
/// value.modify(|v| v + 1);
///
/// // usage in async
/// cx.spawn({
/// let value = value.to_owned();
/// async move {
/// value.modify(|v| v + 1);
/// }
/// });
///
/// # todo!()
/// }
/// ```
pub fn modify(&self, f: impl FnOnce(&T) -> T) {
self.root.clone().set(self.id, {
let current = self.value.as_ref().unwrap();
f(current.as_ref())
});
}
/// Get the value of the state when this handle was created.
///
/// This method is useful when you want an `Rc` around the data to cheaply
/// pass it around your app.
///
/// ## Warning
///
/// This will return a stale value if used within async contexts.
///
/// Try `current` to get the real current value of the state.
///
/// ## Example
///
/// ```rust, ignore
/// # use dioxus_core::prelude::*;
/// # use dioxus_hooks::*;
/// fn component(cx: Scope) -> Element {
/// let value = use_state(&cx, || 0);
///
/// let as_rc = value.get();
/// assert_eq!(as_rc.as_ref(), &0);
///
/// # todo!()
/// }
/// ```
#[must_use]
pub fn get(&self) -> &T {
self.value.as_ref().unwrap()
}
#[must_use]
pub fn get_rc(&self) -> &Rc<T> {
self.value.as_ref().unwrap()
}
/// Mark all consumers of this atom to re-render
///
/// ```rust, ignore
/// fn component(cx: Scope) -> Element {
/// let count = use_state(&cx, || 0);
/// cx.spawn({
/// let count = count.to_owned();
/// async move {
/// // for the component to re-render
/// count.needs_update();
/// }
/// })
/// }
/// ```
pub fn needs_update(&self) {
self.root.force_update(self.id)
}
}
impl<T: Clone> AtomState<T> {
/// Get a mutable handle to the value by calling `ToOwned::to_owned` on the
/// current value.
///
/// This is essentially cloning the underlying value and then setting it,
/// giving you a mutable handle in the process. This method is intended for
/// types that are cheaply cloneable.
///
/// If you are comfortable dealing with `RefMut`, then you can use `make_mut` to get
/// the underlying slot. However, be careful with `RefMut` since you might panic
/// if the `RefCell` is left open.
///
/// # Examples
///
/// ```
/// let val = use_state(&cx, || 0);
///
/// val.with_mut(|v| *v = 1);
/// ```
pub fn with_mut(&self, apply: impl FnOnce(&mut T)) {
let mut new_val = self.value.as_ref().unwrap().as_ref().to_owned();
apply(&mut new_val);
self.set(new_val);
}
/// Get a mutable handle to the value by calling `ToOwned::to_owned` on the
/// current value.
///
/// This is essentially cloning the underlying value and then setting it,
/// giving you a mutable handle in the process. This method is intended for
/// types that are cheaply cloneable.
///
/// # Warning
/// Be careful with `RefMut` since you might panic if the `RefCell` is left open!
///
/// # Examples
///
/// ```
/// let val = use_state(&cx, || 0);
///
/// *val.make_mut() += 1;
/// ```
#[must_use]
pub fn make_mut(&self) -> RefMut<T> {
todo!("make mut not support for atom values yet")
// let mut slot = self.value.as_ref().unwrap();
// self.needs_update();
// if Rc::strong_count(&*slot) > 0 {
// *slot = Rc::new(slot.as_ref().to_owned());
// }
// RefMut::map(slot, |rc| Rc::get_mut(rc).expect("the hard count to be 0"))
}
/// Convert this handle to a tuple of the value and the handle itself.
#[must_use]
pub fn split(&self) -> (&T, &Self) {
(self.value.as_ref().unwrap(), self)
}
}
impl<T: 'static> Clone for AtomState<T> {
fn clone(&self) -> Self {
AtomState {
root: self.root.clone(),
id: self.id,
scope_id: self.scope_id,
value: self.value.clone(),
}
}
}
impl<'a, T: 'static + Display> std::fmt::Display for AtomState<T> {
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
write!(f, "{}", self.value.as_ref().unwrap())
}
}
impl<'a, T: std::fmt::Binary> std::fmt::Binary for AtomState<T> {
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
write!(f, "{:b}", self.value.as_ref().unwrap().as_ref())
}
}
impl<T: PartialEq> PartialEq<T> for AtomState<T> {
fn eq(&self, other: &T) -> bool {
self.value.as_ref().unwrap().as_ref() == other
}
}
// todo: this but for more interesting conrete types
impl PartialEq<bool> for &AtomState<bool> {
fn eq(&self, other: &bool) -> bool {
self.value.as_ref().unwrap().as_ref() == other
}
}
impl<T: PartialEq> PartialEq<AtomState<T>> for AtomState<T> {
fn eq(&self, other: &AtomState<T>) -> bool {
Rc::ptr_eq(self.value.as_ref().unwrap(), other.value.as_ref().unwrap())
}
}
impl<T: Debug> Debug for AtomState<T> {
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
write!(f, "{:?}", self.value.as_ref().unwrap())
}
}
impl<'a, T> std::ops::Deref for AtomState<T> {
type Target = T;
fn deref(&self) -> &Self::Target {
self.value.as_ref().unwrap().as_ref()
}
}
impl<T: Not + Copy> std::ops::Not for &AtomState<T> {
type Output = <T as std::ops::Not>::Output;
fn not(self) -> Self::Output {
self.value.as_ref().unwrap().not()
}
}
impl<T: Not + Copy> std::ops::Not for AtomState<T> {
type Output = <T as std::ops::Not>::Output;
fn not(self) -> Self::Output {
self.value.as_ref().unwrap().not()
}
}
impl<T: std::ops::Add + Copy> std::ops::Add<T> for &AtomState<T> {
type Output = <T as std::ops::Add>::Output;
fn add(self, other: T) -> Self::Output {
*self.value.as_ref().unwrap().as_ref() + other
}
}
impl<T: std::ops::Sub + Copy> std::ops::Sub<T> for &AtomState<T> {
type Output = <T as std::ops::Sub>::Output;
fn sub(self, other: T) -> Self::Output {
*self.value.as_ref().unwrap().as_ref() - other
}
}
impl<T: std::ops::Div + Copy> std::ops::Div<T> for &AtomState<T> {
type Output = <T as std::ops::Div>::Output;
fn div(self, other: T) -> Self::Output {
*self.value.as_ref().unwrap().as_ref() / other
}
}
impl<T: std::ops::Mul + Copy> std::ops::Mul<T> for &AtomState<T> {
type Output = <T as std::ops::Mul>::Output;
fn mul(self, other: T) -> Self::Output {
*self.value.as_ref().unwrap().as_ref() * other
}
}
impl<T: Add<Output = T> + Copy> std::ops::AddAssign<T> for &AtomState<T> {
fn add_assign(&mut self, rhs: T) {
self.set((*self.current()) + rhs);
}
}
impl<T: Sub<Output = T> + Copy> std::ops::SubAssign<T> for &AtomState<T> {
fn sub_assign(&mut self, rhs: T) {
self.set((*self.current()) - rhs);
}
}
impl<T: Mul<Output = T> + Copy> std::ops::MulAssign<T> for &AtomState<T> {
fn mul_assign(&mut self, rhs: T) {
self.set((*self.current()) * rhs);
}
}
impl<T: Div<Output = T> + Copy> std::ops::DivAssign<T> for &AtomState<T> {
fn div_assign(&mut self, rhs: T) {
self.set((*self.current()) / rhs);
}
}
impl<T: Add<Output = T> + Copy> std::ops::AddAssign<T> for AtomState<T> {
fn add_assign(&mut self, rhs: T) {
self.set((*self.current()) + rhs);
}
}
impl<T: Sub<Output = T> + Copy> std::ops::SubAssign<T> for AtomState<T> {
fn sub_assign(&mut self, rhs: T) {
self.set((*self.current()) - rhs);
}
}
impl<T: Mul<Output = T> + Copy> std::ops::MulAssign<T> for AtomState<T> {
fn mul_assign(&mut self, rhs: T) {
self.set((*self.current()) * rhs);
}
}
impl<T: Div<Output = T> + Copy> std::ops::DivAssign<T> for AtomState<T> {
fn div_assign(&mut self, rhs: T) {
self.set((*self.current()) / rhs);
}
}

2
packages/fermi/src/lib.rs
View file

@ -30,11 +30,13 @@ pub mod hooks {
mod init_atom_root;
mod read;
mod set;
mod state;
pub use atom_ref::*;
pub use atom_root::*;
pub use init_atom_root::*;
pub use read::*;
pub use set::*;
pub use state::*;
}
/// All Atoms are `Readable` - they support reading their value.

21
packages/fermi/src/root.rs
View file

@ -39,8 +39,6 @@ impl AtomRoot {
}
pub fn register<V: 'static>(&self, f: impl Readable<V>, scope: ScopeId) -> Rc<V> {
log::trace!("registering atom {:?}", f.unique_id());
let mut atoms = self.atoms.borrow_mut();
// initialize the value if it's not already initialized
@ -97,7 +95,22 @@ impl AtomRoot {
}
}
pub fn read<V>(&self, _f: impl Readable<V>) -> &V {
todo!()
pub fn read<V: 'static>(&self, f: impl Readable<V>) -> Rc<V> {
let mut atoms = self.atoms.borrow_mut();
// initialize the value if it's not already initialized
if let Some(slot) = atoms.get_mut(&f.unique_id()) {
slot.value.clone().downcast().unwrap()
} else {
let value = Rc::new(f.init());
atoms.insert(
f.unique_id(),
Slot {
value: value.clone(),
subscribers: HashSet::new(),
},
);
value
}
}
}

5
packages/html/src/elements.rs
View file

@ -428,6 +428,11 @@ builder_constructors! {
/// element.
mark {};
/// Build a
/// [`<menu>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu)
/// element.
menu {};
/// Build a
/// [`<q>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q)
/// element.

2
packages/html/src/events.rs
View file

@ -611,7 +611,7 @@ pub mod on {
feature = "serialize",
derive(serde_repr::Serialize_repr, serde_repr::Deserialize_repr)
)]
#[derive(Clone, Copy, Debug)]
#[derive(Clone, Copy, Debug, PartialEq)]
#[repr(u8)]
pub enum KeyCode {
// That key has no keycode, = 0

11
packages/liveview/Cargo.toml
View file

@ -30,5 +30,16 @@ dioxus-core = { path = "../core", features = ["serialize"] }
# warp
warp = { version = "0.3", optional = true }
# axum
axum = { version = "0.5.1", optional = true, features = ["ws"] }
tower = { version = "0.4.12", optional = true }
[dev-dependencies]
tokio = { version = "1", features = ["full"] }
dioxus = { path = "../../" }
warp = "0.3"
axum = { version = "0.5.1", features = ["ws"] }
tower = "0.4.12"
[features]
default = []

38
packages/liveview/examples/axum.rs Normal file
View file

@ -0,0 +1,38 @@
use axum::{
extract::ws::WebSocketUpgrade, response::Html, response::IntoResponse, routing::get, Extension,
Router,
};
use dioxus_core::{Element, LazyNodes, Scope};
use dioxus_liveview::Liveview;
#[tokio::main]
async fn main() {
#[cfg(feature = "axum")]
{
pretty_env_logger::init();
let addr: std::net::SocketAddr = ([127, 0, 0, 1], 3030).into();
let view = dioxus_liveview::new(addr);
let body = view.body("<title>Dioxus Liveview</title>");
let app = Router::new()
.route("/", get(move || async { Html(body) }))
.route(
"/app",
get(move |ws: WebSocketUpgrade| async move {
ws.on_upgrade(move |socket| async move {
view.upgrade(socket, app).await;
})
}),
);
axum::Server::bind(&addr.to_string().parse().unwrap())
.serve(app.into_make_service())
.await
.unwrap();
}
}
fn app(cx: Scope) -> Element {
cx.render(LazyNodes::new(|f| f.text(format_args!("hello world!"))))
}

38
packages/liveview/examples/warp.rs
View file

@ -1,5 +1,3 @@
#![cfg(feature = "warp")]
use dioxus_core::{Element, LazyNodes, Scope};
use dioxus_liveview as liveview;
use warp::ws::Ws;
@ -7,26 +5,28 @@ use warp::Filter;
#[tokio::main]
async fn main() {
pretty_env_logger::init();
#[cfg(feature = "warp")]
{
pretty_env_logger::init();
let addr = ([127, 0, 0, 1], 3030);
let addr = ([127, 0, 0, 1], 3030);
// todo: compactify this routing under one liveview::app method
let view = liveview::new(addr);
let body = view.body();
// todo: compactify this routing under one liveview::app method
let view = liveview::new(addr);
let body = view.body("<title>Dioxus LiveView</title>");
let routes = warp::path::end()
.map(move || warp::reply::html(body.clone()))
.or(warp::path("app")
.and(warp::ws())
.and(warp::any().map(move || view.clone()))
.map(|ws: Ws, view: liveview::Liveview| {
ws.on_upgrade(|socket| async move {
view.upgrade(socket, app).await;
})
}));
warp::serve(routes).run(addr).await;
let routes = warp::path::end()
.map(move || warp::reply::html(body.clone()))
.or(warp::path("app")
.and(warp::ws())
.and(warp::any().map(move || view.clone()))
.map(|ws: Ws, view: liveview::Liveview| {
ws.on_upgrade(|socket| async move {
view.upgrade(socket, app).await;
})
}));
warp::serve(routes).run(addr).await;
}
}
fn app(cx: Scope) -> Element {

76
packages/liveview/src/adapters/axum_adapter.rs
View file

@ -1 +1,77 @@
use crate::{events, Liveview};
use axum::extract::ws::{Message, WebSocket};
use dioxus_core::prelude::*;
use futures_util::{
future::{select, Either},
pin_mut, SinkExt, StreamExt,
};
use tokio::sync::mpsc;
use tokio_stream::wrappers::UnboundedReceiverStream;
use tokio_util::task::LocalPoolHandle;
#[cfg(feature = "axum")]
impl crate::Liveview {
pub async fn upgrade(&self, ws: WebSocket, app: fn(Scope) -> Element) {
connect(ws, self.pool.clone(), app).await;
}
}
pub async fn connect(socket: WebSocket, pool: LocalPoolHandle, app: fn(Scope) -> Element) {
let (mut user_ws_tx, mut user_ws_rx) = socket.split();
let (event_tx, event_rx) = mpsc::unbounded_channel();
let (edits_tx, edits_rx) = mpsc::unbounded_channel();
let mut edits_rx = UnboundedReceiverStream::new(edits_rx);
let mut event_rx = UnboundedReceiverStream::new(event_rx);
let vdom_fut = pool.clone().spawn_pinned(move || async move {
let mut vdom = VirtualDom::new(app);
let edits = vdom.rebuild();
let serialized = serde_json::to_string(&edits.edits).unwrap();
edits_tx.send(serialized).unwrap();
loop {
let new_event = {
let vdom_fut = vdom.wait_for_work();
pin_mut!(vdom_fut);
match select(event_rx.next(), vdom_fut).await {
Either::Left((l, _)) => l,
Either::Right((_, _)) => None,
}
};
if let Some(new_event) = new_event {
vdom.handle_message(dioxus_core::SchedulerMsg::Event(new_event));
} else {
let mutations = vdom.work_with_deadline(|| false);
for mutation in mutations {
let edits = serde_json::to_string(&mutation.edits).unwrap();
edits_tx.send(edits).unwrap();
}
}
}
});
loop {
match select(user_ws_rx.next(), edits_rx.next()).await {
Either::Left((l, _)) => {
if let Some(Ok(msg)) = l {
if let Ok(Some(msg)) = msg.to_text().map(events::parse_ipc_message) {
let user_event = events::trigger_from_serialized(msg.params);
event_tx.send(user_event).unwrap();
} else {
break;
}
} else {
break;
}
}
Either::Right((edits, _)) => {
if let Some(edits) = edits {
// send the edits to the client
if user_ws_tx.send(Message::Text(edits)).await.is_err() {
break;
}
} else {
break;
}
}
}
}
vdom_fut.abort();
}

7
packages/liveview/src/adapters/warp_adapter.rs
View file

@ -6,6 +6,7 @@ use tokio_stream::wrappers::UnboundedReceiverStream;
use tokio_util::task::LocalPoolHandle;
use warp::ws::{Message, WebSocket};
#[cfg(feature = "warp")]
impl crate::Liveview {
pub async fn upgrade(&self, ws: warp::ws::WebSocket, app: fn(Scope) -> Element) {
connect(ws, self.pool.clone(), app).await;
@ -65,8 +66,10 @@ pub async fn connect(ws: WebSocket, pool: LocalPoolHandle, app: fn(Scope) -> Ele
Either::Left((l, _)) => {
if let Some(Ok(msg)) = l {
if let Ok(Some(msg)) = msg.to_str().map(events::parse_ipc_message) {
let user_event = events::trigger_from_serialized(msg.params);
event_tx.send(user_event).unwrap();
if msg.method == "user_event" {
let user_event = events::trigger_from_serialized(msg.params);
event_tx.send(user_event).unwrap();
}
} else {
break;
}

5
packages/liveview/src/lib.rs
View file

@ -31,14 +31,13 @@ pub struct Liveview {
}
impl Liveview {
pub fn body(&self) -> String {
pub fn body(&self, header: &str) -> String {
format!(
r#"
<!DOCTYPE html>
<html>
<head>
<title>Dioxus app</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{header}
</head>
<body>
<div id="main"></div>

2
packages/router/src/hooks/use_route.rs
View file

@ -51,7 +51,7 @@ impl UseRoute {
#[cfg(feature = "query")]
pub fn query<T: serde::de::DeserializeOwned>(&self) -> Option<T> {
let query = self.url().query()?;
serde_urlencoded::from_str(query.strip_prefix('?').unwrap_or("")).ok()
serde_urlencoded::from_str(query).ok()
}
/// Get the first query parameter given the parameter name.

34
packages/tui/src/config.rs
View file

@ -1,11 +1,39 @@
#[derive(Clone, Copy)]
#[non_exhaustive]
pub struct Config {
pub rendering_mode: RenderingMode,
pub(crate) rendering_mode: RenderingMode,
/// Controls if the terminal quit when the user presses `ctrl+c`?
/// To handle quiting on your own, use the [crate::TuiContext] root context.
pub ctrl_c_quit: bool,
pub(crate) ctrl_c_quit: bool,
/// Controls if the terminal should dislay anything, usefull for testing.
pub headless: bool,
pub(crate) headless: bool,
}
impl Config {
pub fn new() -> Self {
Self::default()
}
pub fn with_rendering_mode(self, rendering_mode: RenderingMode) -> Self {
Self {
rendering_mode,
..self
}
}
pub fn with_ctrl_c_quit(self) -> Self {
Self {
ctrl_c_quit: true,
..self
}
}
pub fn with_headless(self) -> Self {
Self {
headless: true,
..self
}
}
}
impl Default for Config {