add CI

Cargo.toml

@@ -170,6 +170,9 @@ async-lock = { default-features = false, version = "3.4.1" }
 base16 = { default-features = false, version = "0.2.1" }
 digest = { default-features = false, version = "0.10.7" }
 sha2 = { default-features = false, version = "0.10.8" }
+subsecond = { default-features = false, git = "https://github.com/dioxuslabs/dioxus" }
+dioxus-cli-config = { default-features = false, git = "https://github.com/dioxuslabs/dioxus" }
+dioxus-devtools = { default-features = false, git = "https://github.com/dioxuslabs/dioxus" }
 
 [profile.release]
 codegen-units = 1

examples/subsecond_hot_patch/.gitignore

@@ -0,0 +1,7 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target
+.DS_Store
+
+# These are backup files generated by rustfmt
+**/*.rs.bk

examples/subsecond_hot_patch/Cargo.toml

@@ -0,0 +1,13 @@
+[package]
+name = "subsecond_hot_patch"
+version = "0.1.0"
+authors = ["Greg Johnston <greg.johnston@gmail.com>"]
+edition = "2021"
+
+[dependencies]
+leptos = { path = "../../leptos", features = ["csr", "subsecond"] }
+leptos_router = { path = "../../router" }
+
+[features]
+default = ["web"]
+web = []

examples/subsecond_hot_patch/Dioxus.toml

@@ -0,0 +1,21 @@
+[application]
+
+[web.app]
+
+# HTML title tag content
+title = "ltest"
+
+# include `assets` in web platform
+[web.resource]
+
+# Additional CSS style files
+style = []
+
+# Additional JavaScript files
+script = []
+
+[web.resource.dev]
+
+# Javascript code file
+# serve: [dev-server] only
+script = []

examples/subsecond_hot_patch/Makefile.toml

@@ -0,0 +1 @@
+extend = [{ path = "../cargo-make/main.toml" }]

examples/subsecond_hot_patch/README.md

@@ -0,0 +1,31 @@
+# Hot Patching with `dx`
+
+This is an experimental example exploring how to combine Leptos with the binary hot-patching provided by Dioxus's `subsecond` library and `dx` cli.
+
+### Serving Your App
+
+This requires installing the Dioxus CLI version 0.7.0. At the time I'm writing this README, that does not yet have a stable release. Once `dioxus-cli` 0.7.0 has been released, you should use the latest stable release. Until then, I'd suggest installing from git:
+
+```sh
+cargo install dioxus-cli --git https://github.com/DioxusLabs/dioxus
+```
+
+Then you can run the example with `dx serve --hot-patch --platform web`.
+
+### Hot Patching
+
+Changes to the your application should be reflected in your app without a full rebuild and reload.
+
+### Limitatations
+
+Currently we only support hot-patching for reactive view functions. You probably want to use `AnyView` (via `.into_any()`) on any views that will be hot-patched, so they can be rebuilt correctly despite their types changing when the structure of the view tree changes.
+
+If you are using `leptos_router` this actually works quite well, as every route’s view is erased to `AnyView` and the router itself is a reactive view function: in other words, changes inside any route should be hot-patched in any case.
+
+Note that any hot-patch will cause all render effects to run again. This means that some client-side state (like the values of signals) will be wiped out.
+
+### Build Tooling
+
+The preference of the Dioxus team is that all hot-patching work that uses their `subsecond` also use `dioxus-cli`. As this demo shows, it's completely possible to use `dioxus-cli` to build and run a Leptos project. We do not plan to build `subsecond` into our own build tooling at this time.
+
+**This is an experiment/POC. It is being published because members of the community have found it useful and have asked for the support to be merged in its current state. Further development and bugfixes are a relatively low priority at this time.**

examples/subsecond_hot_patch/assets/main.css

@@ -0,0 +1,46 @@
+/* App-wide styling */
+body {
+    background-color: #0f1116;
+    color: #ffffff;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin: 20px;
+}
+
+#hero {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+#links {
+    width: 400px;
+    text-align: left;
+    font-size: x-large;
+    color: white;
+    display: flex;
+    flex-direction: column;
+}
+
+#links a {
+    color: white;
+    text-decoration: none;
+    margin-top: 20px;
+    margin: 10px 0px;
+    border: white 1px solid;
+    border-radius: 5px;
+    padding: 10px;
+}
+
+#links a:hover {
+    background-color: #1f1f1f;
+    cursor: pointer;
+}
+
+#header {
+    max-width: 1200px;
+}
+
+
+

examples/subsecond_hot_patch/src/main.rs

@@ -0,0 +1,44 @@
+use leptos::{prelude::*, subsecond::connect_to_hot_patch_messages};
+use leptos_router::{
+    components::{Route, Router, Routes},
+    path,
+};
+
+fn main() {
+    // connect to DX CLI and patch the WASM binary whenever we receive a message
+    connect_to_hot_patch_messages();
+
+    // wrapping App here in a closure so we can hot-reload it, because we only do that
+    // for reactive views right now. changing anything will re-run App and update the view
+    mount_to_body(|| App);
+}
+
+#[component]
+fn App() -> impl IntoView {
+    view! {
+        <nav>
+            <a href="/">"Home"</a>
+            <a href="/about">"About"</a>
+        </nav>
+        <Router>
+            <Routes fallback=|| "Not found">
+                <Route path=path!("/") view=HomePage/>
+                <Route path=path!("/about") view=About/>
+            </Routes>
+        </Router>
+    }
+}
+
+#[component]
+fn HomePage() -> impl IntoView {
+    view! {
+        <h1>"Home Page"</h1>
+    }
+}
+
+#[component]
+fn About() -> impl IntoView {
+    view! {
+        <h1>"About"</h1>
+    }
+}

leptos/Cargo.toml

@@ -58,6 +58,9 @@ slotmap = { workspace = true, default-features = true }
 futures = { workspace = true, default-features = true }
 send_wrapper = { workspace = true, default-features = true }
 wasm_split_helpers.workspace = true
+subsecond = { workspace = true, default-features = true, optional = true }
+dioxus-cli-config = { workspace = true, default-features = true, optional = true }
+dioxus-devtools = { workspace = true, default-features = true, optional = true }
 
 [features]
 hydration = [
@@ -102,6 +105,16 @@ trace-component-props = [
 ]
 delegation = ["tachys/delegation"]
 islands-router = ["tachys/mark_branches"]
+subsecond = [
+  "reactive_graph/subsecond",
+  "dep:subsecond",
+  "dep:dioxus-cli-config",
+  "dep:dioxus-devtools",
+  "web-sys/Location",
+  "web-sys/MessageEvent",
+  "web-sys/WebSocket",
+  "web-sys/Window",
+]
 
 [dev-dependencies]
 tokio = { features = [

leptos/src/lib.rs

@@ -1,5 +1,4 @@
 #![deny(missing_docs)]
-#![forbid(unsafe_code)]
 
 //! # About Leptos
 //!
@@ -306,6 +305,10 @@ pub use tachys::mathml as math;
 #[doc(inline)]
 pub use tachys::svg;
 
+#[cfg(feature = "subsecond")]
+/// Utilities for using binary hot-patching with [`subsecond`].
+pub mod subsecond;
+
 /// Utilities for simple isomorphic logging to the console or terminal.
 pub mod logging {
     pub use leptos_dom::{debug_warn, error, log, warn};

leptos/src/subsecond.rs

@@ -0,0 +1,62 @@
+use dioxus_devtools::DevserverMsg;
+use wasm_bindgen::{prelude::Closure, JsCast};
+use web_sys::{js_sys::JsString, MessageEvent, WebSocket};
+
+/// Sets up a websocket connect to the `dx` CLI, waiting for incoming hot-patching messages
+/// and patching the WASM binary appropriately.
+//
+//  Note: This is a stripped-down version of Dioxus's `make_ws` from `dioxus_web`
+//  It's essentially copy-pasted here because it's not pub there.
+//  Would love to just take a dependency on that to be able to use it and deduplicate.
+//
+//  https://github.com/DioxusLabs/dioxus/blob/main/packages/web/src/devtools.rs#L36
+pub fn connect_to_hot_patch_messages() {
+    // Get the location of the devserver, using the current location plus the /_dioxus path
+    // The idea here being that the devserver is always located on the /_dioxus behind a proxy
+    let location = web_sys::window().unwrap().location();
+    let url = format!(
+        "{protocol}//{host}/_dioxus?build_id={build_id}",
+        protocol = match location.protocol().unwrap() {
+            prot if prot == "https:" => "wss:",
+            _ => "ws:",
+        },
+        host = location.host().unwrap(),
+        build_id = dioxus_cli_config::build_id(),
+    );
+
+    let ws = WebSocket::new(&url).unwrap();
+
+    ws.set_onmessage(Some(
+        Closure::<dyn FnMut(MessageEvent)>::new(move |e: MessageEvent| {
+            let Ok(text) = e.data().dyn_into::<JsString>() else {
+                return;
+            };
+
+            // The devserver messages have some &'static strs in them, so we need to leak the source string
+            let string: String = text.into();
+            let string = Box::leak(string.into_boxed_str());
+
+            if let Ok(DevserverMsg::HotReload(msg)) =
+                serde_json::from_str::<DevserverMsg>(string)
+            {
+                if let Some(jump_table) = msg.jump_table.as_ref().cloned() {
+                    if msg.for_build_id == Some(dioxus_cli_config::build_id()) {
+                        let our_pid = if cfg!(target_family = "wasm") {
+                            None
+                        } else {
+                            Some(std::process::id())
+                        };
+
+                        if msg.for_pid == our_pid {
+                            unsafe { subsecond::apply_patch(jump_table) }
+                                .unwrap();
+                        }
+                    }
+                }
+            }
+        })
+        .into_js_value()
+        .as_ref()
+        .unchecked_ref(),
+    ));
+}

leptos_dom/src/helpers.rs

@@ -463,7 +463,7 @@ pub fn set_interval_with_handle(
 
     #[inline(never)]
     fn si(
-        cb: Box<dyn Fn()>,
+        cb: Box<dyn FnMut()>,
         duration: Duration,
     ) -> Result<IntervalHandle, JsValue> {
         let cb = Closure::wrap(cb).into_js_value();

reactive_graph/Cargo.toml

@@ -27,6 +27,7 @@ async-lock = { workspace = true, default-features = true }
 send_wrapper = { features = [
   "futures",
 ], workspace = true, default-features = true }
+subsecond = { workspace = true, default-features = true, optional = true }
 indexmap = { workspace = true, default-features = true }
 
 [target.'cfg(all(target_arch = "wasm32", target_os = "unknown"))'.dependencies]
@@ -51,6 +52,7 @@ hydration = ["dep:hydration_context"]
 effects = [
 ] # whether to run effects: should be disabled for something like server rendering
 sandboxed-arenas = []
+subsecond = ["dep:subsecond"]
 
 [package.metadata.docs.rs]
 all-features = true

reactive_graph/src/effect/render_effect.rs

@@ -9,6 +9,8 @@ use crate::{
 };
 use futures::StreamExt;
 use or_poisoned::OrPoisoned;
+#[cfg(feature = "subsecond")]
+use std::sync::Mutex;
 use std::{
     fmt::Debug,
     future::{Future, IntoFuture},
@@ -49,13 +51,39 @@ impl<T> Debug for RenderEffect<T> {
     }
 }
 
+#[cfg(feature = "subsecond")]
+type CurrentHotPtr = Box<dyn Fn() -> Option<subsecond::HotFnPtr> + Send + Sync>;
+
 impl<T> RenderEffect<T>
 where
     T: 'static,
 {
     /// Creates a new render effect, which immediately runs `fun`.
     pub fn new(fun: impl FnMut(Option<T>) -> T + 'static) -> Self {
-        Self::new_with_value_erased(Box::new(fun), None)
+        #[cfg(feature = "subsecond")]
+        let (hot_fn_ptr, fun) = {
+            let fun = Arc::new(Mutex::new(subsecond::HotFn::current(fun)));
+            (
+                {
+                    let fun = Arc::downgrade(&fun);
+                    let wrapped = send_wrapper::SendWrapper::new(move || {
+                        fun.upgrade()
+                            .map(|n| n.lock().or_poisoned().ptr_address())
+                    });
+                    // it's not redundant, it's due to the SendWrapper deref
+                    #[allow(clippy::redundant_closure)]
+                    Box::new(move || wrapped())
+                },
+                move |prev| fun.lock().or_poisoned().call((prev,)),
+            )
+        };
+
+        Self::new_with_value_erased(
+            Box::new(fun),
+            None,
+            #[cfg(feature = "subsecond")]
+            hot_fn_ptr,
+        )
     }
 
     /// Creates a new render effect with an initial value.
@@ -63,7 +91,30 @@ where
         fun: impl FnMut(Option<T>) -> T + 'static,
         initial_value: Option<T>,
     ) -> Self {
-        Self::new_with_value_erased(Box::new(fun), initial_value)
+        #[cfg(feature = "subsecond")]
+        let (hot_fn_ptr, fun) = {
+            let fun = Arc::new(Mutex::new(subsecond::HotFn::current(fun)));
+            (
+                {
+                    let fun = Arc::downgrade(&fun);
+                    let wrapped = send_wrapper::SendWrapper::new(move || {
+                        fun.upgrade()
+                            .map(|n| n.lock().or_poisoned().ptr_address())
+                    });
+                    // it's not redundant, it's due to the SendWrapper deref
+                    #[allow(clippy::redundant_closure)]
+                    Box::new(move || wrapped())
+                },
+                move |prev| fun.lock().or_poisoned().call((prev,)),
+            )
+        };
+
+        Self::new_with_value_erased(
+            Box::new(fun),
+            initial_value,
+            #[cfg(feature = "subsecond")]
+            hot_fn_ptr,
+        )
     }
 
     /// Creates a new render effect, which immediately runs `fun`.
@@ -71,6 +122,11 @@ where
         fun: impl FnMut(Option<T>) -> T + 'static,
         value: impl IntoFuture<Output = T> + 'static,
     ) -> Self {
+        #[cfg(feature = "subsecond")]
+        let mut fun = subsecond::HotFn::current(fun);
+        #[cfg(feature = "subsecond")]
+        let fun = move |prev| fun.call((prev,));
+
         Self::new_with_async_value_erased(
             Box::new(fun),
             Box::pin(value.into_future()),
@@ -79,8 +135,13 @@ where
     }
 
     fn new_with_value_erased(
-        mut fun: Box<dyn FnMut(Option<T>) -> T + 'static>,
+        #[allow(unused_mut)] mut fun: Box<dyn FnMut(Option<T>) -> T + 'static>,
         initial_value: Option<T>,
+        // this argument can be used to invalidate individual effects in the future
+        // in present experiments, I have found that it is not actually granular enough to make a difference
+        #[allow(unused)]
+        #[cfg(feature = "subsecond")]
+        hot_fn_ptr: CurrentHotPtr,
     ) -> Self {
         // codegen optimisation:
         fn prep() -> (Owner, Arc<RwLock<EffectInner>>, crate::channel::Receiver)
@@ -104,12 +165,56 @@ where
             let _ = initial_value;
             let _ = owner;
             let _ = &mut rx;
-            let _ = &mut fun;
+            let _ = fun;
         }
 
         #[cfg(feature = "effects")]
         {
             let subscriber = inner.to_any_subscriber();
+
+            #[cfg(all(feature = "subsecond", debug_assertions))]
+            let mut fun = {
+                use crate::graph::ReactiveNode;
+                use rustc_hash::FxHashMap;
+                use std::sync::{Arc, LazyLock, Mutex};
+                use subsecond::HotFnPtr;
+
+                static HOT_RELOAD_SUBSCRIBERS: LazyLock<
+                    Mutex<FxHashMap<AnySubscriber, (HotFnPtr, CurrentHotPtr)>>,
+                > = LazyLock::new(|| {
+                    subsecond::register_handler(Arc::new(|| {
+                        HOT_RELOAD_SUBSCRIBERS.lock().or_poisoned().retain(
+                            |subscriber, (prev_ptr, hot_fn_ptr)| {
+                                match hot_fn_ptr() {
+                                    None => false,
+                                    Some(curr_hot_ptr) => {
+                                        if curr_hot_ptr != *prev_ptr {
+                                            crate::log_warning(format_args!(
+                                                "{prev_ptr:?} <> \
+                                                 {curr_hot_ptr:?}",
+                                            ));
+                                            *prev_ptr = curr_hot_ptr;
+
+                                            subscriber.mark_dirty();
+                                        }
+                                        true
+                                    }
+                                }
+                            },
+                        );
+                    }));
+                    Default::default()
+                });
+
+                let mut fun = subsecond::HotFn::current(fun);
+                let initial_ptr = hot_fn_ptr().unwrap();
+                HOT_RELOAD_SUBSCRIBERS
+                    .lock()
+                    .or_poisoned()
+                    .insert(subscriber.clone(), (initial_ptr, hot_fn_ptr));
+                move |prev| fun.call((prev,))
+            };
+
             *value.write().or_poisoned() = Some(
                 owner.with(|| subscriber.with_observer(|| fun(initial_value))),
             );
@@ -230,6 +335,11 @@ where
     pub fn new_isomorphic(
         fun: impl FnMut(Option<T>) -> T + Send + Sync + 'static,
     ) -> Self {
+        #[cfg(feature = "subsecond")]
+        let mut fun = subsecond::HotFn::current(fun);
+        #[cfg(feature = "subsecond")]
+        let fun = move |prev| fun.call((prev,));
+
         fn erased<T: Send + Sync + 'static>(
             mut fun: Box<dyn FnMut(Option<T>) -> T + Send + Sync + 'static>,
         ) -> RenderEffect<T> {