Add aper-leptos

Cargo.toml

@@ -12,5 +12,5 @@ members = [
     "aper-serve",
     "aper-yew",
     "aper-websocket-client",
-    "site/doctests",
+    "site/doctests", "aper-leptos",
 ]

aper-leptos/Cargo.toml

@@ -0,0 +1,12 @@
+[package]
+name = "aper-leptos"
+version = "0.5.0"
+edition = "2021"
+
+[dependencies]
+aper = {path = "../aper"}
+aper-websocket-client = { version="0.5.0", path="../aper-websocket-client" }
+leptos = { version = "0.6.14", features = ["csr"] }
+serde = "1.0.210"
+tracing-subscriber = "0.3.18"
+tracing-web = "0.1.3"

aper-leptos/src/lib.rs

@@ -0,0 +1,26 @@
+use aper::{data_structures::Atom, AperSync};
+use leptos::{create_signal, SignalGet, SignalSet};
+use serde::{de::DeserializeOwned, Serialize};
+
+pub mod init_tracing;
+
+pub trait Watch<T> {
+    fn watch(&self) -> Box<dyn Fn() -> T>;
+}
+
+impl<T> Watch<T> for Atom<T>
+where
+    T: Serialize + DeserializeOwned + Default + Clone + Send + Sync + 'static,
+{
+    fn watch(&self) -> Box<dyn Fn() -> T> {
+        let (signal, set_signal) = create_signal(self.get());
+
+        let self_clone = self.clone();
+        self.listen(move || {
+            set_signal.set(self_clone.get());
+            true
+        });
+
+        Box::new(move || signal.get())
+    }
+}

aper/src/data_structures/atom.rs

@@ -2,6 +2,7 @@ use crate::{AperSync, StoreHandle};
 use bytes::Bytes;
 use serde::{de::DeserializeOwned, Serialize};
 
+#[derive(Clone)]
 pub struct Atom<T: Serialize + DeserializeOwned + Default> {
     map: StoreHandle,
     _phantom: std::marker::PhantomData<T>,

aper/src/store/core.rs

@@ -98,7 +98,7 @@ impl Store {
     }
 
     pub fn top_layer_mutations(&self) -> Vec<Mutation> {
-        let layers = self.inner.layers.write().unwrap();
+        let layers = self.inner.layers.read().unwrap();
         let top_layer = layers.last().unwrap();
 
         let mut mutations = vec![];

aper/src/store/iter.rs

@@ -47,7 +47,7 @@ impl StoreIterator {
             if let Some((key, value)) = next_value {
                 println!("pushing... {:?}", key);
                 heap.push(PeekedIterator {
-                    next_value: (&key, value),
+                    next_value: (key, value),
                     layer_rank,
                     rest: iter,
                 });

examples/counter-leptos/client/Cargo.toml

@@ -9,8 +9,9 @@ crate-type = ["cdylib", "rlib"]
 
 [dependencies]
 aper = {path = "../../../aper"}
-aper-websocket-client = { version="0.4.0", path="../../../aper-websocket-client" }
-aper-stateroom = { version="0.4.0", path="../../../aper-stateroom" }
+aper-leptos = { version="0.5.0", path="../../../aper-leptos" }
+aper-websocket-client = { version="0.5.0", path="../../../aper-websocket-client" }
+aper-stateroom = { version="0.5.0", path="../../../aper-stateroom" }
 console_error_panic_hook = "0.1.6"
 serde = { version = "1.0.124", features = ["derive"] }
 wasm-bindgen = "0.2.83"

examples/counter-leptos/client/src/lib.rs

@@ -1,16 +1,12 @@
-use aper::AperSync;
+use aper_leptos::{init_tracing, Watch};
 use aper_stateroom::StateMachineContainerProgram;
 use aper_websocket_client::AperWebSocketStateProgramClient;
 pub use counter_common::{Counter, CounterIntent};
-use leptos::{component, create_trigger, view, IntoView};
+use leptos::{component, view, IntoView};
 use wasm_bindgen::prelude::*;
 
-// TODO: move to shared module
-mod init_tracing;
-
 #[component]
 fn App() -> impl IntoView {
-    let trigger = create_trigger();
     let url = "ws://localhost:8080/ws";
 
     let client_program =
@@ -20,14 +16,6 @@ fn App() -> impl IntoView {
         )
         .unwrap();
 
-    // Force a redraw when the counter changes.
-    // Note: we need to listen on the "value" field, which is what actually mutates,
-    // not the root state. (TODO: seems not ideal?)
-    client_program.state().0.value.listen(move || {
-        trigger.notify();
-        true
-    });
-
     let state = client_program.state().0;
 
     view! {
@@ -37,10 +25,9 @@ fn App() -> impl IntoView {
             }
         >
             "Click me: "
-            {move || {
-                trigger.track();
-                state.value()
-            }}
+            {
+                state.value.watch()
+            }
         </button>
     }
 }