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

benches/tui_update.rs

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

examples/custom_html.rs

@@ -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!"}
+        }
+    })
+}

examples/tailwind.rs

@@ -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",

examples/tui_color_test.rs

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

packages/desktop/src/cfg.rs

@@ -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 {

packages/desktop/src/desktop_context.rs

@@ -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))
 }

packages/desktop/src/index.html

@@ -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>
+    <!-- MODULE LOADER -->
-      import("./index.js").then(function (module) {
-        module.main();
-      });
-    </script>
   </body>
 </html>

packages/desktop/src/lib.rs

@@ -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;
                         });
                         }

packages/desktop/src/protocol.rs

@@ -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()
+        // If a custom index is provided, just defer to that, expecting the user to know what they're doing.
-            .mimetype("text/html")
+        // we'll look for the closing </body> tag and insert our little module loader there.
-            .body(include_bytes!("./index.html").to_vec())
+        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")

packages/fermi/src/hooks/state.rs

@@ -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);
+    }
+}

packages/fermi/src/lib.rs

@@ -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.

packages/fermi/src/root.rs

@@ -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 {
+    pub fn read<V: 'static>(&self, f: impl Readable<V>) -> Rc<V> {
-        todo!()
+        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
+        }
     }
 }

packages/html/src/elements.rs

@@ -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.

packages/html/src/events.rs

@@ -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

packages/liveview/Cargo.toml

@@ -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 = []

packages/liveview/examples/axum.rs

@@ -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!"))))
+}

packages/liveview/examples/warp.rs

@@ -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
+        // todo: compactify this routing under one liveview::app method
-    let view = liveview::new(addr);
+        let view = liveview::new(addr);
-    let body = view.body();
+        let body = view.body("<title>Dioxus LiveView</title>");
 
-    let routes = warp::path::end()
+        let routes = warp::path::end()
-        .map(move || warp::reply::html(body.clone()))
+            .map(move || warp::reply::html(body.clone()))
-        .or(warp::path("app")
+            .or(warp::path("app")
-            .and(warp::ws())
+                .and(warp::ws())
-            .and(warp::any().map(move || view.clone()))
+                .and(warp::any().map(move || view.clone()))
-            .map(|ws: Ws, view: liveview::Liveview| {
+                .map(|ws: Ws, view: liveview::Liveview| {
-                ws.on_upgrade(|socket| async move {
+                    ws.on_upgrade(|socket| async move {
-                    view.upgrade(socket, app).await;
+                        view.upgrade(socket, app).await;
-                })
+                    })
-            }));
+                }));
-
+        warp::serve(routes).run(addr).await;
-    warp::serve(routes).run(addr).await;
+    }
 }
 
 fn app(cx: Scope) -> Element {

packages/liveview/src/adapters/axum_adapter.rs

@@ -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();
+}

packages/liveview/src/adapters/warp_adapter.rs

@@ -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);
+                        if msg.method == "user_event" {
-                        event_tx.send(user_event).unwrap();
+                            let user_event = events::trigger_from_serialized(msg.params);
+                            event_tx.send(user_event).unwrap();
+                        }
                     } else {
                         break;
                     }

packages/liveview/src/lib.rs

@@ -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>
+    {header}
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   </head>
   <body>
     <div id="main"></div>

packages/router/src/hooks/use_route.rs

@@ -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.

packages/tui/src/config.rs

@@ -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 {