wip: recoil

packages/recoil/examples/api_mvc.rs

@@ -0,0 +1,45 @@
+//! RecoilAPI Pattern
+//! ----------------
+//! This example demonstrates how the use_recoil_callback hook can be used to build view controllers.
+//! These view controllers are cheap to make and can be easily shared across the app to provide global
+//! state logic to many components.
+//!
+//! This pattern is meant to replace the typical use_dispatch pattern used in Redux apps.
+
+use dioxus_core::prelude::*;
+use recoil::*;
+
+const TITLE: Atom<String> = |_| format!("Heading");
+const SUBTITLE: Atom<String> = |_| format!("Subheading");
+
+struct TitleController(RecoilApi);
+impl TitleController {
+    fn new(api: RecoilApi) -> Self {
+        Self(api)
+    }
+    fn uppercase(&self) {
+        self.0.modify(&TITLE, |f| *f = f.to_uppercase());
+        self.0.modify(&SUBTITLE, |f| *f = f.to_uppercase());
+    }
+    fn lowercase(&self) {
+        self.0.modify(&TITLE, |f| *f = f.to_lowercase());
+        self.0.modify(&SUBTITLE, |f| *f = f.to_lowercase());
+    }
+}
+
+fn main() {
+    wasm_bindgen_futures::spawn_local(dioxus_web::WebsysRenderer::start(|ctx, _| {
+        let title = use_recoil_value(ctx, &TITLE);
+        let subtitle = use_recoil_value(ctx, &SUBTITLE);
+        let controller = use_recoil_callback(ctx, TitleController::new);
+
+        rsx! { in ctx,
+            div {
+                "{title}"
+                "{subtitle}"
+                button { onclick: move |_| controller.uppercase(), "Uppercase" }
+                button { onclick: move |_| controller.lowercase(), "Lowercase" }
+            }
+        }
+    }))
+}

packages/recoil/examples/callback.rs

@@ -0,0 +1,36 @@
+//! Example: RecoilCallback
+//! ------------------------
+//! This example shows how use_recoil_callback can be used to abstract over sets/gets.
+//! This hook provides a way to capture the RecoilApi object. In this case, we capture
+//! it in a closure an abstract the set/get functionality behind the update_title function.
+//!
+//! It should be straightforward to build a complex app with recoil_callback.
+use dioxus_core::prelude::*;
+use recoil::*;
+
+const TITLE: Atom<&str> = |_| "red";
+
+fn update_title(api: &RecoilApi) {
+    match *api.get(&TITLE) {
+        "green" => api.set(&TITLE, "yellow"),
+        "yellow" => api.set(&TITLE, "red"),
+        "red" => api.set(&TITLE, "green"),
+        _ => {}
+    }
+}
+
+static App: FC<()> = |ctx, _| {
+    let title = use_recoil_value(ctx, &TITLE);
+    let next_light = use_recoil_callback(ctx, |api| move |_| update_title(&api));
+
+    rsx! { in ctx,
+        div {
+            "{title}"
+            button { onclick: {next_light}, "Next light" }
+        }
+    }
+};
+
+fn main() {
+    wasm_bindgen_futures::spawn_local(dioxus_web::WebsysRenderer::start(App))
+}

packages/recoil/examples/ecs.rs

@@ -0,0 +1,48 @@
+//! Example: ECS Architecture for very list selectors
+//! --------------------------------------------------
+//! Sometimes, you need *peak* performance. Cloning and Rc might simply be too much overhead for your app.
+//! If you're building CPU intense apps like graphics editors, simulations, or advanced visualizations,
+//! slicing up your state beyond atoms might be desirable.
+//!
+//! Instead of storing groups of entities in a collection of structs, the ECS Architecture instead stores
+//! an array for each entity in the collection. This tends to improve performance for batch operations on
+//! individual fields at the cost of complexity. Fortunately, this ECS model is built right into Recoil,
+//! making it easier than ever to enable sharded datastructures in your app.
+//!
+//! Instead of defining a struct for our primary datastructure, we'll instead use a type tuple, and then later
+//! index that tuple to get the value we care about. Unfortunately, we lose name information wrt to each
+//! type in the type tuple. This can be solved with an associated module, the derive EcsMacro, or just
+//! by good documentation.
+//!
+//! This approach is best suited for applications where individual entries in families are very large
+//! and updates to neighbors are costly in terms of Clone or field comparisons for memoization.
+use dioxus::prelude::*;
+use dioxus_core as dioxus;
+use recoil::*;
+
+type TodoModel = (
+    bool,   // checked
+    String, // name
+    String, // contents
+);
+
+const TODOS: EcsModel<u32, TodoModel> = |builder| {};
+// const SELECT_TITLE: SelectorBorrowed<u32, &str> = |s, k| TODOS.field(0).select(k);
+// const SELECT_SUBTITLE: SelectorBorrowed<u32, &str> = |s, k| TODOS.field(1).select(k);
+
+static App: FC<()> = |ctx, _| {
+    // let title = use_recoil_value(ctx, &C_SELECTOR);
+    dbg!(TODOS);
+
+    let title = "";
+    rsx! { in ctx,
+        div {
+            "{title}"
+            // button { onclick: {next_light}, "Next light" }
+        }
+    }
+};
+
+fn main() {
+    wasm_bindgen_futures::spawn_local(dioxus_web::WebsysRenderer::start(App))
+}

packages/recoil/examples/family.rs

@@ -0,0 +1,33 @@
+use std::collections::HashMap;
+
+use dioxus_core::prelude::*;
+use recoil::*;
+
+const TODOS: AtomFamily<&str, Todo> = |_| HashMap::new();
+
+#[derive(PartialEq)]
+struct Todo {
+    checked: bool,
+    contents: String,
+}
+
+static App: FC<()> = |ctx, _| {
+    rsx! { in ctx,
+        div {
+            "Basic Todolist with AtomFamilies in Recoil.rs"
+        }
+    }
+};
+
+static Child: FC<()> = |ctx, _| {
+    // let todo = use_recoil_value(ctx, &TODOS);
+    rsx! { in ctx,
+        div {
+
+        }
+    }
+};
+
+fn main() {
+    wasm_bindgen_futures::spawn_local(dioxus_web::WebsysRenderer::start(App))
+}

packages/recoil/examples/helloworld.rs

@@ -0,0 +1,20 @@
+use dioxus_core::prelude::*;
+use recoil::*;
+
+const COUNT: Atom<i32> = |_| 0;
+
+static App: FC<()> = |ctx, _| {
+    let (count, set_count) = use_recoil_state(ctx, &COUNT);
+
+    rsx! { in ctx,
+        div {
+            "Count: {count}"
+            button { onclick: move |_| set_count(count + 1), "Incr" }
+            button { onclick: move |_| set_count(count - 1), "Decr" }
+        }
+    }
+};
+
+fn main() {
+    wasm_bindgen_futures::spawn_local(dioxus_web::WebsysRenderer::start(App))
+}

packages/recoil/examples/selectorlist.rs

@@ -0,0 +1,34 @@
+use std::collections::HashMap;
+
+use dioxus_core::prelude::*;
+use recoil::*;
+
+const A_ITEMS: AtomFamily<i32, i32> = |_| HashMap::new();
+const B_ITEMS: AtomFamily<i32, i32> = |_| HashMap::new();
+
+const C_SELECTOR: SelectorFamily<i32, i32> = |api, key| {
+    let a = api.get(&A_ITEMS.select(&key));
+    let b = api.get(&B_ITEMS.select(&key));
+    a + b
+};
+
+const D_SELECTOR: SelectorFamilyBorrowed<i32, i32> = |api, key| -> &i32 {
+    let a = api.get(&A_ITEMS.select(&key));
+    a
+};
+
+static App: FC<()> = |ctx, _| {
+    let title = use_recoil_value(ctx, &C_SELECTOR);
+
+    let title = "";
+    rsx! { in ctx,
+        div {
+            "{title}"
+            // button { onclick: {next_light}, "Next light" }
+        }
+    }
+};
+
+fn main() {
+    wasm_bindgen_futures::spawn_local(dioxus_web::WebsysRenderer::start(App))
+}

packages/recoil/examples/selectors.rs

@@ -0,0 +1,46 @@
+use dioxus_core::prelude::*;
+use recoil::*;
+
+const A: Atom<i32> = |_| 0;
+const B: Atom<i32> = |_| 0;
+const C: Selector<i32> = |api| api.get(&A) + api.get(&B);
+
+static App: FC<()> = |ctx, _| {
+    use_init_recoil_root(ctx);
+    rsx! { in ctx,
+        div {
+            Banner {}
+            BtnA {}
+            BtnB {}
+        }
+    }
+};
+
+static Banner: FC<()> = |ctx, _| {
+    let count = use_recoil_value(ctx, &C);
+    ctx.render(rsx! { h1 { "Count: {count}" } })
+};
+
+static BtnA: FC<()> = |ctx, _| {
+    let (a, set) = use_recoil_state(ctx, &A);
+    rsx! { in ctx,
+        div { "a"
+            button { "+", onclick: move |_| set(a + 1) }
+            button { "-", onclick: move |_| set(a - 1) }
+        }
+    }
+};
+
+static BtnB: FC<()> = |ctx, _| {
+    let (b, set) = use_recoil_state(ctx, &B);
+    rsx! { in ctx,
+        div { "b"
+            button { "+", onclick: move |_| set(b + 1) }
+            button { "-", onclick: move |_| set(b - 1) }
+        }
+    }
+};
+
+fn main() {
+    wasm_bindgen_futures::spawn_local(dioxus_web::WebsysRenderer::start(App))
+}