WIP: move to static props

.vscode/spellright.dict

@@ -35,3 +35,11 @@ Gloo
 mobx
 img
 svg
+Actix
+OrdMap
+datastructures
+onclick
+virtualdom
+namespaced
+namespacing
+impl

Cargo.toml

@@ -8,7 +8,8 @@ members = [
     "packages/recoil",
     "packages/docsite",
     "packages/ssr",
-] # "packages/webview",
+    "packages/webview",
+]
 
 # "packages/cli",
 # "packages/webview",

notes/ARCHITECTURE.md

@@ -1,18 +0,0 @@
-# Dioxus Architecture
-
-:) 
-
-
-```rust
-
-let data = use_context();
-data.set(abc);
-
-unsafe {
-    // data is unsafely aliased
-    data.modify(|&mut data| {
-        
-    })
-}
-
-```

notes/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Dioxus v0.1.0
+
 Welcome to the first iteration of the Dioxus Virtual DOM! This release brings support for:
+
 - Web via WASM
 - Desktop via webview integration
 - Server-rendering with custom ToString implementation
@@ -9,27 +11,35 @@ Welcome to the first iteration of the Dioxus Virtual DOM! This release brings su
 - Context API
 - Basic suspense
 - Controlled components
-----
+
+---
+
 ## Project: Initial VDOM support (TBD)
+
 > Get the initial VDom + Event System + Patching + Diffing + Component framework up and running
 > Get a demo working using just the web
+
 - [x] (Core) Migrate virtual node into new VNode type
 - [x] (Core) Arena allocate VNodes
 - [x] (Core) Allow VNodes to borrow arena contents
 - [x] (Core) Introduce the VDOM and patch API for 3rd party renderers
 - [x] (Core) Implement lifecycle
-- [x] (Core) Implement an event system 
+- [x] (Core) Implement an event system
 - [x] (Core) Implement child nodes, scope creation
 - [x] (Core) Implement dirty tagging and compression
 
-## Project: QOL 
+## Project: QOL
+
 > Make it easier to write components
+
 - [x] (Macro) Tweak event syntax to not be dependent on wasm32 target (just return regular closures which get boxed/alloced)
-- [x] (Macro) Tweak component syntax to accept a new custom element 
+- [x] (Macro) Tweak component syntax to accept a new custom element
 - [ ] (Macro) Allow components to specify their props as function args
 
 ## Project: Hooks + Context + Subscriptions (TBD)
+
 > Implement the foundations for state management
+
 - [x] Implement context object
 - [x] Implement use_state (rewrite to use the use_reducer api like rei)
 - [x] Implement use_ref
@@ -37,54 +47,66 @@ Welcome to the first iteration of the Dioxus Virtual DOM! This release brings su
 - [ ] Implement use_reducer (WIP)
 
 ## Project: String Render (TBD)
-> Implement a light-weight string renderer with basic caching 
+
+> Implement a light-weight string renderer with basic caching
+
 - [x] (Macro) Make VText nodes automatically capture and format IE allow "Text is {blah}"
 - [x] (SSR) Implement stateful 3rd party string renderer
 
 ## Project: Web_sys renderer (TBD)
+
 - [x] WebSys edit interpreter
 - [x] Event system using async channels
 - [ ] Implement conversion of all event types into synthetic events
 
 ## Project: Web-View 🤲 🍨
+
 > Proof of concept: stream render edits from server to client
+
 - [x] Prove that the diffing and patching framework can support patch streaming
 
 ## Project: Examples
-> Get *all* the examples
+
+> Get _all_ the examples
+
 - [ ] (Examples) Tide example with templating
 
-## Project: State management 
-> Get some global state management installed with the hooks + context API
+## Project: State management
 
+> Get some global state management installed with the hooks + context API
 
 ## Project: Concurrency (TBD)
-> Ensure the concurrency model works well, play with lifetimes to check if it can be multithreaded + halted
-?
 
+> Ensure the concurrency model works well, play with lifetimes to check if it can be multithreaded + halted
+> ?
 
 ## Project: Mobile exploration
 
-
 ## Project: Live-View 🤲 🍨
-> Combine the server and client into a single file :) 
 
+> Combine the server and client into a single file :)
 
 ## Project: Sanitization (TBD)
+
 > Improve code health
+
 - [ ] (Macro) Clippy sanity for html macro
 - [ ] (Macro) Error sanitization
 
-
 ## Outstanding todos:
+
 > anything missed so far
+
 - [x] keys on components
 - [x] Allow paths for components
 - [x] todo mvc
 - [x] Tweak macro parsing for better errors
 - [x] dirty tagging, compression
 - [x] code health
-- [ ] name spacing so svg works
+- [x] static str slice optimization
+- [x] name spacing so svg works
+  - [x] A handful of svg elements are automatically namespaced
+  - [ ] Allow hierarchical namespacing (all children share a parent's namespace) - TBD in macro impl
 - [ ] fix keys on elements
 - [ ] controlled components (kinda tuff since we need all these different platforms)
   - [ ] Their own crate
@@ -93,6 +115,8 @@ Welcome to the first iteration of the Dioxus Virtual DOM! This release brings su
   - [ ] Re-exported through the `dioxus` crate (not essential to core virtualdom)
 
 ## Less-essential todos
+
+- [ ] HTML doesn't require strings between elements (copy-paste from internet)
 - [ ] Make events lazy (use traits + Box<dyn>) - not sure what this means anymore
 - [ ] Beef up the dioxus CLI tool to report build progress
 - [ ] Extract arena logic out for better safety guarantees
@@ -105,6 +129,7 @@ Welcome to the first iteration of the Dioxus Virtual DOM! This release brings su
 - [ ] Website
 
 lower priority features
+
 - [ ] Attributes on elements should implement format_args instead of string fmt
 - [ ] fragments
 - [ ] node refs (postpone for future release?)

notes/ROADMAP.md

@@ -1,70 +1,90 @@
 # Road map
+
 This release map gives a sense of the release cadence and features per update going forward into the future. PRs are required to be squashed before merging. For each point release, we save a branch on master (0.1, 0.2, 0.3, master). Eventually, we'll remove these in favor of higher point releases when dioxus is stabilized. Any live PRs will be merged into the dev branch.
 
-Until 0.3, Dioxus will be in stealth mode. The goal is to launch with a bountiful feature set and a cohesive API before OSS tears it apart :). Once LiveView is ready, then Dioxus will launch completely with a beta service for LiveHost.
+Until 0.3, Dioxus will be in stealth mode. The goal is to launch with a bountiful feature set and a cohesive API before OSS tears it apart :).
 
 ## v0.1: Bare Necessities
+
 > Enable ergonomic and performant webapps
+
 ---
+
 Dioxus Core
+
 - Lifecycles for components
 - Internal event system
 - Diffing
 - Patching
 
 Html macro
+
 - special formatting
 - closure handlers
 - child handlers
 - iterator handlers
-  
+
 Dioxus web
+
 - a
-  
-Dioxus CLI 
+
+Dioxus CLI
+
 - Develop
 - Bundle
 - Test
-  
+
 Server-side-rendering
+
 - Write nodes to string
 - Integration with tide, Actix, warp
 
 Dioxus WebView (desktop)
+
 - One-file setup for desktop apps
 - Integration with the web browser for rapid development
 
 ## v0.2: Bread and butter
+
 > Complex apps? CHECK
+
 ---
+
 State management
+
 - Dioxus-Reducer as the blessed redux alternative
   - Includes thunks and reducers (async dispatches)
-- Dioxus-Dataflow as the blessed recoil alternative
+- Dioxus-DataFlow as the blessed recoil alternative
   - The hip, new approach for granular state
 
 Dioxus CLI
+
 - Visual tool?
 - Asset bundling service
-  
+
 Dioxus DevTools integration with the web
-- Basic support for pure liveview/webview 
 
+- Basic support for pure liveview/webview
 
 ## v0.3: Superpowers
+
 > Enable LiveView for fullstack development
+
 ---
+
 Dioxus LiveView
- - Custom server built on Actix (or something fast) 
- - Ergonomic builders
- - Concurrent system built into dioxus core
+
+- Custom server built on Actix (or something fast)
+- Ergonomic builders
+- Concurrent system built into dioxus core
 
 Dioxus iOS
- - Initial support via webview
- - Look into native support based on how Flutter/SwiftUI works
+
+- Initial support via webview
+- Look into native support based on how Flutter/SwiftUI works
 
 Dioxus Android
 
+## v0.4: Community
 
-## v0.4: Community 
 > Foster the incoming community

packages/core-macro/src/htm.rs

@@ -13,6 +13,8 @@
 //!
 //!
 
+use crate::util::is_valid_svg_tag;
+
 use {
     proc_macro::TokenStream,
     proc_macro2::{Span, TokenStream as TokenStream2},
@@ -32,13 +34,17 @@ pub struct HtmlRender {
 }
 
 impl Parse for HtmlRender {
-    fn parse(s: ParseStream) -> Result<Self> {
+    fn parse(input: ParseStream) -> Result<Self> {
+        if input.peek(LitStr) {
+            return input.parse::<LitStr>()?.parse::<HtmlRender>();
+        }
+
         // let ctx: Ident = s.parse()?;
         // s.parse::<Token![,]>()?;
         // if elements are in an array, return a bumpalo::collections::Vec rather than a Node.
-        let kind = if s.peek(token::Bracket) {
+        let kind = if input.peek(token::Bracket) {
             let nodes_toks;
-            syn::bracketed!(nodes_toks in s);
+            syn::bracketed!(nodes_toks in input);
             let mut nodes: Vec<MaybeExpr<Node>> = vec![nodes_toks.parse()?];
             while nodes_toks.peek(Token![,]) {
                 nodes_toks.parse::<Token![,]>()?;
@@ -46,7 +52,7 @@ impl Parse for HtmlRender {
             }
             NodeOrList::List(NodeList(nodes))
         } else {
-            NodeOrList::Node(s.parse()?)
+            NodeOrList::Node(input.parse()?)
         };
         Ok(HtmlRender { kind })
     }
@@ -147,13 +153,20 @@ struct Element {
 impl ToTokens for ToToksCtx<&Element> {
     fn to_tokens(&self, tokens: &mut TokenStream2) {
         // let ctx = self.ctx;
-        let _name = &self.inner.name;
+        let name = &self.inner.name.to_string();
         tokens.append_all(quote! {
-            dioxus::builder::ElementBuilder::new(ctx, "#name")
+            dioxus::builder::ElementBuilder::new(ctx, #name)
         });
         for attr in self.inner.attrs.iter() {
             self.recurse(attr).to_tokens(tokens);
         }
+
+        if is_valid_svg_tag(name) {
+            tokens.append_all(quote! {
+                .namespace(Some("http://www.w3.org/2000/svg"))
+            });
+        }
+
         match &self.inner.children {
             MaybeExpr::Expr(expr) => tokens.append_all(quote! {
                 .children(#expr)
@@ -229,6 +242,7 @@ impl Parse for Element {
             ));
         }
         s.parse::<Token![>]>()?;
+
         Ok(Self {
             name,
             attrs,
@@ -297,9 +311,15 @@ impl ToTokens for ToToksCtx<&Attr> {
         match &self.inner.ty {
             AttrType::Value(value) => {
                 let value = self.recurse(value);
-                tokens.append_all(quote! {
-                    .attr(#name, #value)
-                });
+                if name == "xmlns" {
+                    tokens.append_all(quote! {
+                        .namespace(Some(#value))
+                    });
+                } else {
+                    tokens.append_all(quote! {
+                        .attr(#name, format_args_f!(#value))
+                    });
+                }
             }
             AttrType::Event(event) => {
                 tokens.append_all(quote! {
@@ -334,14 +354,7 @@ impl ToTokens for ToToksCtx<&TextNode> {
     fn to_tokens(&self, tokens: &mut TokenStream2) {
         let mut token_stream = TokenStream2::new();
         self.recurse(&self.inner.0).to_tokens(&mut token_stream);
-        tokens.append_all(quote! {
-            {
-                use bumpalo::core_alloc::fmt::Write;
-                let mut s = bumpalo::collections::String::new_in(bump);
-                s.write_fmt(format_args_f!(#token_stream)).unwrap();
-                dioxus::builder::text2(s)
-            }
-        });
+        tokens.append_all(quote! {dioxus::builder::text3(bump, format_args_f!(#token_stream))});
     }
 }
 

packages/core-macro/src/lib.rs

@@ -2,12 +2,13 @@ use proc_macro::TokenStream;
 use quote::ToTokens;
 use syn::parse_macro_input;
 
-mod fc;
-mod htm;
-mod ifmt;
-mod props;
-mod rsxt;
-mod util;
+pub(crate) mod fc;
+pub(crate) mod htm;
+pub(crate) mod ifmt;
+pub(crate) mod props;
+pub(crate) mod rsxt;
+pub(crate) mod rsxtemplate;
+pub(crate) mod util;
 
 /// The html! macro makes it easy for developers to write jsx-style markup in their components.
 /// We aim to keep functional parity with html templates.
@@ -29,6 +30,16 @@ pub fn rsx(s: TokenStream) -> TokenStream {
     }
 }
 
+/// The html! macro makes it easy for developers to write jsx-style markup in their components.
+/// We aim to keep functional parity with html templates.
+#[proc_macro]
+pub fn rsx_template(s: TokenStream) -> TokenStream {
+    match syn::parse::<rsxtemplate::RsxTemplate>(s) {
+        Err(e) => e.to_compile_error().into(),
+        Ok(s) => s.to_token_stream().into(),
+    }
+}
+
 // #[proc_macro_attribute]
 // pub fn fc(attr: TokenStream, item: TokenStream) -> TokenStream {
 

packages/core-macro/src/rsxt.rs

@@ -1,6 +1,6 @@
 use syn::parse::{discouraged::Speculative, ParseBuffer};
 
-use crate::util::is_valid_html_tag;
+use crate::util::is_valid_tag;
 
 use {
     proc_macro::TokenStream,
@@ -23,12 +23,16 @@ pub struct RsxRender {
 
 impl Parse for RsxRender {
     fn parse(input: ParseStream) -> Result<Self> {
+        if input.peek(LitStr) {
+            return input.parse::<LitStr>()?.parse::<RsxRender>();
+        }
+
         // try to parse the first ident and comma
         let custom_context =
             if input.peek(Token![in]) && input.peek2(Ident) && input.peek3(Token![,]) {
                 let _ = input.parse::<Token![in]>()?;
                 let name = input.parse::<Ident>()?;
-                if is_valid_html_tag(&name.to_string()) {
+                if is_valid_tag(&name.to_string()) {
                     return Err(Error::new(
                         input.span(),
                         "Custom context cannot be an html element name",
@@ -114,7 +118,7 @@ impl Parse for AmbiguousElement {
         if let Ok(name) = input.fork().parse::<Ident>() {
             let name_str = name.to_string();
 
-            match is_valid_html_tag(&name_str) {
+            match is_valid_tag(&name_str) {
                 true => input
                     .parse::<Element>()
                     .map(|c| AmbiguousElement::Element(c)),
@@ -134,6 +138,9 @@ impl Parse for AmbiguousElement {
                 }
             }
         } else {
+            if input.peek(LitStr) {
+                panic!("it's actually a litstr");
+            }
             Err(Error::new(input.span(), "Not a valid Html tag"))
         }
     }
@@ -318,7 +325,7 @@ impl Parse for Element {
         //
         let name = Ident::parse(stream)?;
 
-        if !crate::util::is_valid_html_tag(&name.to_string()) {
+        if !crate::util::is_valid_tag(&name.to_string()) {
             return Err(Error::new(name.span(), "Not a valid Html tag"));
         }
 
@@ -495,12 +502,7 @@ impl ToTokens for &ElementAttr {
         match &self.ty {
             AttrType::BumpText(value) => {
                 tokens.append_all(quote! {
-                    .attr(#name, {
-                        use bumpalo::core_alloc::fmt::Write;
-                        let mut s = bumpalo::collections::String::new_in(bump);
-                        s.write_fmt(format_args_f!(#value)).unwrap();
-                        s.into_bump_str()
-                    })
+                    .attr(#name, format_args_f!(#value))
                 });
             }
             AttrType::Event(event) => {
@@ -540,10 +542,11 @@ impl ToTokens for TextNode {
         let token_stream = &self.0.to_token_stream();
         tokens.append_all(quote! {
             {
-                use bumpalo::core_alloc::fmt::Write;
-                let mut s = bumpalo::collections::String::new_in(bump);
-                s.write_fmt(format_args_f!(#token_stream)).unwrap();
-                dioxus::builder::text2(s)
+                // use bumpalo::core_alloc::fmt::Write;
+                // let mut s = bumpalo::collections::String::new_in(bump);
+                // s.write_fmt(format_args_f!(#token_stream)).unwrap();
+                dioxus::builder::text3(bump, format_args_f!(#token_stream))
+                // dioxus::builder::text2(s)
             }
         });
     }

packages/core-macro/src/rsxtemplate.rs

@@ -0,0 +1,72 @@
+use crate::{rsxt::RsxRender, util::is_valid_svg_tag};
+
+use {
+    proc_macro::TokenStream,
+    proc_macro2::{Span, TokenStream as TokenStream2},
+    quote::{quote, ToTokens, TokenStreamExt},
+    syn::{
+        ext::IdentExt,
+        parse::{Parse, ParseStream},
+        token, Error, Expr, ExprClosure, Ident, LitBool, LitStr, Path, Result, Token,
+    },
+};
+
+// ==============================================
+// Parse any stream coming from the html! macro
+// ==============================================
+pub struct RsxTemplate {
+    inner: RsxRender,
+}
+
+impl Parse for RsxTemplate {
+    fn parse(s: ParseStream) -> Result<Self> {
+        if s.peek(LitStr) {
+            use std::str::FromStr;
+            let lit = s.parse::<LitStr>()?;
+            match lit.parse::<crate::rsxt::RsxRender>() {
+                Ok(r) => Ok(Self { inner: r }),
+                Err(e) => Err(e),
+            }
+        } else {
+            panic!("Not a str lit")
+        }
+        // let t = s.parse::<LitStr>()?;
+
+        // let new_stream = TokenStream::from(t.to_s)
+
+        // let ctx: Ident = s.parse()?;
+        // s.parse::<Token![,]>()?;
+        // if elements are in an array, return a bumpalo::collections::Vec rather than a Node.
+        // let kind = if s.peek(token::Bracket) {
+        //     let nodes_toks;
+        //     syn::bracketed!(nodes_toks in s);
+        //     let mut nodes: Vec<MaybeExpr<Node>> = vec![nodes_toks.parse()?];
+        //     while nodes_toks.peek(Token![,]) {
+        //         nodes_toks.parse::<Token![,]>()?;
+        //         nodes.push(nodes_toks.parse()?);
+        //     }
+        //     NodeOrList::List(NodeList(nodes))
+        // } else {
+        //     NodeOrList::Node(s.parse()?)
+        // };
+        // Ok(HtmlRender { kind })
+    }
+}
+
+impl ToTokens for RsxTemplate {
+    fn to_tokens(&self, out_tokens: &mut TokenStream2) {
+        self.inner.to_tokens(out_tokens);
+        // let new_toks = ToToksCtx::new(&self.kind).to_token_stream();
+
+        // // create a lazy tree that accepts a bump allocator
+        // let final_tokens = quote! {
+        //     dioxus::prelude::LazyNodes::new(move |ctx| {
+        //         let bump = &ctx.bump();
+
+        //         #new_toks
+        //     })
+        // };
+
+        // final_tokens.to_tokens(out_tokens);
+    }
+}

packages/core-macro/src/util.rs

@@ -2,7 +2,8 @@
 use once_cell::sync::Lazy;
 use std::collections::hash_set::HashSet;
 
-static VALID_TAGS: Lazy<HashSet<&'static str>> = Lazy::new(|| {
+/// rsx! and html! macros support the html namespace as well as svg namespace
+static HTML_TAGS: Lazy<HashSet<&'static str>> = Lazy::new(|| {
     [
         "a",
         "abbr",
@@ -117,9 +118,16 @@ static VALID_TAGS: Lazy<HashSet<&'static str>> = Lazy::new(|| {
         "var",
         "video",
         "wbr",
+    ]
+    .iter()
+    .cloned()
+    .collect()
+});
+
+static SVG_TAGS: Lazy<HashSet<&'static str>> = Lazy::new(|| {
+    [
         // SVTG
-        "svg",
-        "path",
+        "svg", "path", "g",
     ]
     .iter()
     .cloned()
@@ -135,6 +143,14 @@ static VALID_TAGS: Lazy<HashSet<&'static str>> = Lazy::new(|| {
 ///
 /// assert_eq!(is_valid_tag("random"), false);
 /// ```
+pub fn is_valid_tag(tag: &str) -> bool {
+    is_valid_html_tag(tag) || is_valid_svg_tag(tag)
+}
+
 pub fn is_valid_html_tag(tag: &str) -> bool {
-    VALID_TAGS.contains(tag)
+    HTML_TAGS.contains(tag)
+}
+
+pub fn is_valid_svg_tag(tag: &str) -> bool {
+    SVG_TAGS.contains(tag)
 }

packages/core/examples/borrowed.rs

@@ -7,12 +7,12 @@
 
 fn main() {}
 
-use std::{borrow::Borrow, rc::Rc};
+use std::{borrow::Borrow, ops::Deref, rc::Rc};
 
 use dioxus_core::prelude::*;
 
 struct Props {
-    items: Vec<ListItem>,
+    items: Vec<Rc<ListItem>>,
 }
 
 #[derive(PartialEq)]
@@ -35,8 +35,8 @@ fn app<'a>(ctx: Context<'a>, props: &Props) -> DomTree {
                 ChildItem,
                 // create the props with nothing but the fc<T>
                 fc_to_builder(ChildItem)
-                    .item(child)
-                    .item_handler(set_val.clone())
+                    .item(child.clone())
+                    .item_handler(Callback(set_val.clone()))
                     .build(),
                 None,
             ));
@@ -46,19 +46,13 @@ fn app<'a>(ctx: Context<'a>, props: &Props) -> DomTree {
 }
 
 // props should derive a partialeq implementation automatically, but implement ptr compare for & fields
-#[derive(Props)]
-struct ChildProps<'a> {
+#[derive(Props, PartialEq)]
+struct ChildProps {
     // Pass down complex structs
-    item: &'a ListItem,
+    item: Rc<ListItem>,
 
     // Even pass down handlers!
-    item_handler: Rc<dyn Fn(i32)>,
-}
-
-impl PartialEq for ChildProps<'_> {
-    fn eq(&self, _other: &Self) -> bool {
-        false
-    }
+    item_handler: Callback<i32>,
 }
 
 fn ChildItem<'a>(ctx: Context<'a>, props: &ChildProps) -> DomTree {
@@ -75,3 +69,18 @@ fn ChildItem<'a>(ctx: Context<'a>, props: &ChildProps) -> DomTree {
         }
     })
 }
+
+#[derive(Clone)]
+struct Callback<I, O = ()>(Rc<dyn Fn(I) -> O>);
+impl<I, O> Deref for Callback<I, O> {
+    type Target = Rc<dyn Fn(I) -> O>;
+
+    fn deref(&self) -> &Self::Target {
+        &self.0
+    }
+}
+impl<I, O> PartialEq for Callback<I, O> {
+    fn eq(&self, other: &Self) -> bool {
+        Rc::ptr_eq(&self.0, &other.0)
+    }
+}

packages/core/examples/component_child.rs

@@ -0,0 +1,68 @@
+use std::{ops::Deref, rc::Rc};
+
+use dioxus::virtual_dom::Scope;
+use dioxus_core::prelude::*;
+
+type RcStr = Rc<str>;
+
+fn main() {
+    let r: RcStr = "asdasd".into();
+    let r: RcStr = String::from("asdasd").into();
+
+    let g = rsx! {
+        div {
+            Example {}
+        }
+    };
+}
+
+static Example: FC<()> = |ctx, props| {
+    let nodes = ctx.children();
+
+    //
+    rsx! { in ctx,
+        div {
+            {nodes}
+        }
+    }
+};
+
+#[derive(Clone, Copy)]
+struct MyContext<'a, T> {
+    props: &'a T,
+    inner: &'a Scope,
+}
+impl<'a, T> MyContext<'a, T> {
+    fn children(&self) -> Vec<VNode<'a>> {
+        todo!()
+    }
+    pub fn render2<F: for<'b> FnOnce(&'b NodeCtx<'a>) -> VNode<'a> + 'a>(
+        &self,
+        lazy_nodes: LazyNodes<'a, F>,
+    ) -> VNode<'a> {
+        self.inner.render2(lazy_nodes)
+    }
+}
+
+impl<'a, T> Deref for MyContext<'a, T> {
+    type Target = T;
+
+    fn deref(&self) -> &Self::Target {
+        self.props
+    }
+}
+
+struct MyProps {
+    title: String,
+}
+
+fn example(scope: MyContext<MyProps>) -> VNode {
+    let childs = scope.children();
+
+    scope.inner.render2(rsx! {
+        div {
+            "{scope.title}"
+            {childs}
+        }
+    })
+}

packages/core/examples/template.rs

@@ -0,0 +1,8 @@
+use dioxus_core::prelude::*;
+use dioxus_core_macro::rsx_template;
+
+fn main() {
+    let g = html!("<div> </div>");
+    let g = html!("<div> </div>");
+    // let g = rsx!("div { div { } } ");
+}

packages/core/examples/text.rs

@@ -0,0 +1,16 @@
+use dioxus_core::prelude::*;
+use dioxus_core_macro::format_args_f;
+
+fn main() {
+    let num = 123;
+    let b = Bump::new();
+
+    let g = rsx! {
+        div {
+            "abc {num}"
+            div {
+                "asd"
+            }
+        }
+    };
+}

packages/core/src/component.rs

@@ -9,7 +9,7 @@ use crate::innerlude::FC;
 
 pub type ScopeIdx = generational_arena::Index;
 
-pub trait Properties: PartialEq {
+pub trait Properties: PartialEq + 'static {
     type Builder;
     fn builder() -> Self::Builder;
 }

packages/core/src/nodebuilder.rs

@@ -387,8 +387,17 @@ where
     /// // Create the `<div id="my-div"/>` element.
     /// let my_div = div(&b).attr("id", "my-div").finish();
     /// ```
-    #[inline]
-    pub fn attr(mut self, name: &'static str, value: &'a str) -> Self {
+    pub fn attr(mut self, name: &'static str, args: std::fmt::Arguments) -> Self {
+        let value = match args.as_str() {
+            Some(static_str) => static_str,
+            None => {
+                use bumpalo::core_alloc::fmt::Write;
+                let mut s = bumpalo::collections::String::new_in(self.ctx.bump());
+                s.write_fmt(args).unwrap();
+                s.into_bump_str()
+            }
+        };
+
         self.attributes.push(Attribute { name, value });
         self
     }
@@ -578,6 +587,12 @@ impl<'a> IntoDomTree<'a> for () {
     }
 }
 
+impl<'a> IntoDomTree<'a> for Option<()> {
+    fn into_vnode(self, ctx: &NodeCtx<'a>) -> VNode<'a> {
+        VNode::Suspended
+    }
+}
+
 /// Construct a text VNode.
 ///
 /// This is `dioxus`'s virtual DOM equivalent of `document.createTextVNode`.
@@ -599,6 +614,26 @@ pub fn text2<'a>(contents: bumpalo::collections::String<'a>) -> VNode<'a> {
     VNode::text(f)
 }
 
+pub fn text3<'a>(bump: &'a bumpalo::Bump, args: std::fmt::Arguments) -> VNode<'a> {
+    // This is a cute little optimization
+    //
+    // We use format_args! on everything. However, not all textnodes have dynamic content, and thus are completely static.
+    // we can just short-circuit to the &'static str version instead of having to allocate in the bump arena.
+    //
+    // In the most general case, this prevents the need for any string allocations for simple code IE:
+    //      div {"abc"}
+    //
+    match args.as_str() {
+        Some(static_str) => VNode::text(static_str),
+        None => {
+            use bumpalo::core_alloc::fmt::Write;
+            let mut s = bumpalo::collections::String::new_in(bump);
+            s.write_fmt(args).unwrap();
+            VNode::text(s.into_bump_str())
+        }
+    }
+}
+
 /// Construct an attribute for an element.
 ///
 /// # Example

packages/core/src/nodes.rs

@@ -14,7 +14,7 @@ use std::{cell::RefCell, fmt::Debug, marker::PhantomData, rc::Rc};
 /// It's a placeholder over vnodes, to make working with lifetimes easier
 pub struct DomTree {
     // this should *never* be publicly accessible to external
-    pub(crate) root: VNode<'static>,
+    pub root: VNode<'static>,
 }
 
 /// Tools for the base unit of the virtual dom - the VNode
@@ -80,6 +80,9 @@ impl<'a> VNode<'a> {
             VNode::Suspended => {
                 todo!()
             }
+            // Self::PhantomChild { id } => {
+            //     todo!()
+            // }
             VNode::Component(c) => c.key,
         }
     }
@@ -218,6 +221,8 @@ pub struct VComponent<'src> {
     pub comparator: Rc<dyn Fn(&VComponent) -> bool + 'src>,
     pub caller: Rc<dyn Fn(Context) -> DomTree + 'src>,
 
+    pub children: &'src [VNode<'src>],
+
     // a pointer into the bump arena (given by the 'src lifetime)
     raw_props: *const (),
 
@@ -266,6 +271,7 @@ impl<'a> VComponent<'a> {
             user_fc: caller_ref,
             raw_props: props as *const P as *const _,
             _p: PhantomData,
+            children: &[],
             caller,
             comparator: Rc::new(props_comparator),
             stable_addr: Rc::new(RefCell::new(None)),

packages/core/src/virtual_dom.rs

@@ -482,7 +482,7 @@ pub struct Scope {
 
     // IDs of children that this scope has created
     // This enables us to drop the children and their children when this scope is destroyed
-    pub children: RefCell<HashSet<ScopeIdx>>,
+    children: RefCell<HashSet<ScopeIdx>>,
 
     // A reference to the list of components.
     // This lets us traverse the component list whenever we need to access our parent or children.
@@ -595,6 +595,14 @@ impl Scope {
         // This breaks any latent references, invalidating every pointer referencing into it.
         self.frames.next().bump.reset();
 
+        // Remove all the outdated listeners
+        //
+        self.listeners
+            .try_borrow_mut()
+            .ok()
+            .ok_or(Error::FatalInternal("Borrowing listener failed"))?
+            .drain(..);
+
         *self.hookidx.borrow_mut() = 0;
 
         let caller = self
@@ -621,7 +629,7 @@ impl Scope {
         let EventTrigger {
             listener_id, event, ..
         } = trigger;
-
+        //
         unsafe {
             // Convert the raw ptr into an actual object
             // This operation is assumed to be safe
@@ -637,15 +645,6 @@ impl Scope {
 
             // Run the callback with the user event
             listener_fn(event);
-
-            // drain all the event listeners
-            // if we don't, then they'll stick around and become invalid
-            // big big big big safety issue
-            self.listeners
-                .try_borrow_mut()
-                .ok()
-                .ok_or(Error::FatalInternal("Borrowing listener failed"))?
-                .drain(..);
         }
         Ok(())
     }
@@ -687,7 +686,7 @@ pub type Context<'src> = &'src Scope;
 
 impl Scope {
     /// Access the children elements passed into the component
-    pub fn children(&self) -> Vec<VNode> {
+    pub fn children(&self) -> &[VNode] {
         todo!("Children API not yet implemented for component Context")
     }
 
@@ -743,6 +742,17 @@ impl Scope {
             },
         }
     }
+
+    pub fn render2<'scope, F: for<'b> FnOnce(&'b NodeCtx<'scope>) -> VNode<'scope> + 'scope>(
+        &'scope self,
+        lazy_nodes: LazyNodes<'scope, F>,
+    ) -> VNode<'scope> {
+        let ctx = NodeCtx {
+            scope_ref: self,
+            listener_id: 0.into(),
+        };
+        lazy_nodes.into_vnode(&ctx)
+    }
 }
 
 // ================================================
@@ -863,60 +873,66 @@ impl Scope {
     }
 
     /// There are hooks going on here!
-    pub fn use_context<T: 'static>(&self) -> Rc<T> {
+    pub fn use_context<'a, T: 'static>(&'a self) -> &'a Rc<T> {
         self.try_use_context().unwrap()
     }
 
-    ///
-    pub fn try_use_context<T: 'static>(&self) -> Result<Rc<T>> {
-        let ty = TypeId::of::<T>();
-
-        let mut scope = Some(self);
-        let cached_root = use_ref(self, || None as Option<Weak<T>>);
-
-        // Try to provide the cached version without having to re-climb the tree
-        if let Some(ptr) = cached_root.borrow().as_ref() {
-            if let Some(pt) = ptr.clone().upgrade() {
-                return Ok(pt);
-            } else {
-                /*
-                failed to upgrade the weak is strange
-                this means the root dropped the context (the scope was killed)
+    /// Uses a context, storing the cached value around
+    pub fn try_use_context<T: 'static>(&self) -> Result<&Rc<T>> {
+        struct UseContextHook<C> {
+            par: Option<Rc<C>>,
+            we: Option<Weak<C>>,
+        }
 
-                The main idea here is to prevent memory leaks where parents should be cleaning up their own memory.
+        self.use_hook(
+            move || UseContextHook {
+                par: None as Option<Rc<T>>,
+                we: None as Option<Weak<T>>,
+            },
+            move |hook| {
+                let mut scope = Some(self);
 
-                However, this behavior allows receivers/providers to move around in the hierarchy.
-                This works because we climb the tree if upgrading the Rc failed.
-                */
-            }
-        }
+                if let Some(we) = &hook.we {
+                    if let Some(re) = we.upgrade() {
+                        hook.par = Some(re);
+                        return Ok(hook.par.as_ref().unwrap());
+                    }
+                }
 
-        while let Some(inner) = scope {
-            log::debug!("Searching {:#?} for valid shared_context", inner.arena_idx);
-            let shared_contexts = inner.shared_contexts.borrow();
-            if let Some(shared_ctx) = shared_contexts.get(&ty) {
-                let rc = shared_ctx
-                    .downcast_ref()
-                    .expect("Should not fail, already validated the type from the hashmap");
-
-                *cached_root.borrow_mut() = Some(Rc::downgrade(&rc));
-                return Ok(rc.clone());
-            } else {
-                match inner.parent {
-                    Some(parent_id) => {
-                        let parent = inner
-                            .arena_link
-                            .try_get(parent_id)
-                            .map_err(|_| Error::FatalInternal("Failed to find parent"))?;
-
-                        scope = Some(parent);
+                let ty = TypeId::of::<T>();
+                while let Some(inner) = scope {
+                    log::debug!("Searching {:#?} for valid shared_context", inner.arena_idx);
+                    let shared_contexts = inner.shared_contexts.borrow();
+
+                    if let Some(shared_ctx) = shared_contexts.get(&ty) {
+                        log::debug!("found matching ctx");
+                        let rc = shared_ctx
+                            .clone()
+                            .downcast::<T>()
+                            .expect("Should not fail, already validated the type from the hashmap");
+
+                        hook.we = Some(Rc::downgrade(&rc));
+                        hook.par = Some(rc);
+                        return Ok(hook.par.as_ref().unwrap());
+                    } else {
+                        match inner.parent {
+                            Some(parent_id) => {
+                                let parent = inner
+                                    .arena_link
+                                    .try_get(parent_id)
+                                    .map_err(|_| Error::FatalInternal("Failed to find parent"))?;
+
+                                scope = Some(parent);
+                            }
+                            None => return Err(Error::MissingSharedContext),
+                        }
                     }
-                    None => return Err(Error::MissingSharedContext),
                 }
-            }
-        }
 
-        Err(Error::MissingSharedContext)
+                Err(Error::MissingSharedContext)
+            },
+            |_| {},
+        )
     }
 }
 

packages/liveview/index.html

@@ -136,6 +136,8 @@
         interp.stack.push(document.createElement(tagName));
       }
 
+
+
       // 11
       NewEventListener(edit, interp) {
         // todo!
@@ -186,7 +188,7 @@
       }
 
       // 16
-      CreateElementNS(edit, interp) {
+      CreateElementNs(edit, interp) {
         //   const tagNameId = mem32[i++];
         //   const tagName = interp.getCachedString(tagNameId);
         //   const nsId = mem32[i++];
@@ -280,7 +282,9 @@
 
     function EditListReceived(rawEditList) {
       let editList = JSON.parse(rawEditList);
+      console.warn("hnelllo");
       editList.forEach(function (edit, index) {
+        console.log(edit);
         op_table[edit.type](edit, interpreter);
       });
     }

packages/recoil/Cargo.toml

@@ -9,10 +9,14 @@ edition = "2018"
 [dependencies]
 anyhow = "1.0.40"
 dioxus-core = { path = "../core" }
-generational-arena = "0.2.8"
 thiserror = "1.0.24"
+log = "0.4.14"
+im-rc = "15.0.0"
 
 [dev-dependencies]
-uuid = { version = "0.8.2", features = ["v4"] }
+uuid = { version = "0.8.2", features = ["v4", "wasm-bindgen"] }
 dioxus-web = { path = "../web" }
 wasm-bindgen-futures = "*"
+
+wasm-logger = "0.2.0"
+console_error_panic_hook = "0.1.6"

packages/recoil/README.md

@@ -6,12 +6,14 @@ Recoil.rs is officially supported by the Dioxus team. By doing so, are are "plan
 
 Internally, Dioxus uses batching to speed up linear-style operations. Recoil.rs integrates with this batching optimization, making app-wide changes extremely fast. This way, Recoil.rs can be pushed significantly harder than Redux without the need to enable/disable debug flags to prevent performance slowdowns.
 
-## Guide
+# Guide
+
+## Atoms
 
 A simple atom of state is defined globally as a const:
 
 ```rust
-const Light: Atom<&'static str> = |_| "Green";
+const Light: Atom<&str> = |_| "Green";
 ```
 
 This atom of state is initialized with a value of `"Green"`. The atom that is returned does not actually contain any values. Instead, the atom's key - which is automatically generated in this instance - is used in the context of a Recoil App.
@@ -30,3 +32,106 @@ fn App(ctx: Context, props: &()) -> DomTree {
     })
 }
 ```
+
+Atoms are considered "Writable" objects since any consumer may also set the Atom's value with their own:
+
+```rust
+fn App(ctx: Context, props: &()) -> DomTree {
+    let color = recoil::use_read(ctx, Light);
+    let set_color = recoil::use_write(ctx, Light);
+    rsx!{in ctx,
+        div {
+            h1{"Color: {color}"}
+            button {onclick: move |_| set_color("red"), "red"}
+            button {onclick: move |_| set_color("yellow"), "yellow"}
+            button {onclick: move |_| set_color("green"), "green"}
+        }
+    }
+}
+```
+
+"Reading" a value with use_read subscribes that component to any changes to that value while "Writing" a value does not. It's a good idea to use `write-only` whenever it makes sense to prevent unnecessary evaluations. Both `read` and `write` may be combined together to provide a `use_state` style hook.
+
+```rust
+fn App(ctx: Context, props: &()) -> DomTree {
+    let (color, set_color) = recoil::use_read_write(ctx, Light);
+    rsx!{in ctx,
+        div {
+            h1{"Color: {color}"}
+            button {onclick: move |_| set_color("red"), "red"}
+        }
+    }
+}
+```
+
+## Selectors
+
+Selectors are a concept popular in the JS world as a way of narrowing down a selection of state outside the VDOM lifecycle. Selectors have two functions: 1) summarize/narrow down some complex state and 2) memoize calculations.
+
+Selectors are only `readable` - they cannot be set. This differs from RecoilJS where selectors _are_ `writable`. Selectors, as you might've guessed, "select" some data from atoms and other selectors.
+
+Selectors provide a `SelectorApi` which essentially exposes a read-only `RecoilApi`. They have the `get` method which allows any readable valued to be obtained for the purpose of generating a new value. A `Selector` may only return `'static` data, however `SelectorBorrowed` may return borrowed data.
+
+returning static data:
+
+```rust
+const Light: Atom<&'static str> = |_| "Green";
+const NumChars: Selector<usize> = |api| api.get(&Light).len();
+```
+
+Selectors will update their selection and notify subscribed components whenever their dependencies also update. The `get` calls in a selector will subscribe that selector to whatever `Readable` is being `get`-ted. Unlike hooks, you may use `get` in conditionals; an internal algorithm decides when a selector needs to be updated based on what it `get`-ted last time it was ran.
+
+Selectors may also returned borrowed data:
+
+```rust
+const Light: Atom<&'static str> = |_| "Green";
+const ThreeChars: SelectorBorrowed<str> = |api| api.get(&Light).chars().take(3).unwrap();
+```
+
+Unfortunately, Rust tries to coerce `T` (the type in the Selector generics) to the `'static` lifetime because we defined it as a static. `SelectorBorrowed` defines a type for a function that returns `&T` and provides the right lifetime for `T`. If you don't like having to use a dedicated `Borrowed` type, regular functions work too:
+
+```rust
+fn Light(api: &mut AtomBuilder) -> &'static str {
+    "Green"
+}
+fn ThreeChars(api: &mut SelectorApi) -> &'static str {
+    api.get(&Light).chars().take(3).unwrap()
+}
+```
+
+Returning borrowed data is generally frowned upon, but may be useful when used wisely.
+
+- If a selected value equals its previous selection (via PartialEq), the old value must be kept around to avoid evaluating subscribed components.
+- It's unlikely that a change in a dependency's data will not change the selector's output.
+
+In general, borrowed selectors introduce a slight memory overhead as they need to retain previous state to safely memoize downstream subscribers. The amount of state kept around scales with the amount of `gets` in a selector - though as the number of dependencies increase, the less likely the selector actually stays memoized. Recoil tries to optimize this behavior the best it can to balance component evaluations with memory overhead.
+
+## Families
+
+You might notice that collections will not be performant with just sets/gets. We don't want to clone our entire HashMap every time we want to insert or remove an entry! That's where `Families` come in. Families are memoized collections (HashMap and OrdMap) that wrap the immutable datastructures library `im-rc`. Families are defined by a function that takes the FamilyApi and returns a function that provides a default value given a key. In this example, we insert a value into the collection when initialized, and then return a function that takes a key and returns a default value.
+
+```rust
+const CloudRatings: AtomFamily<&str, i32> = |api| {
+    api.insert("Oracle", -1);
+    |key| match key {
+        "AWS" => 1,
+        "Azure" => 2,
+        "GCP" => 3,
+        _ => 0
+    }
+}
+```
+
+Whenever you `select` on a `Family`, the ID of the entry is tracked. Other subscribers will only be updated if they too select the same family with the same key and that value is updated. Otherwise, these subscribers will never re-render on an "insert", "remove", or "update" of the collection. You could easily implement this yourself with Atoms, immutable datastructures, and selectors, but our implementation is more efficient and first-class.
+
+```rust
+fn App(ctx: Context, props: &()) -> DomTree {
+    let (rating, set_rating) = recoil::use_read_write(ctx, CloudRatings.select("AWS"));
+    rsx!{in ctx,
+        div {
+            h1{ "AWS rating: {rating}" }
+            button { onclick: move |_| set_rating((rating + 1) % 5), "incr" }
+        }
+    }
+}
+```

packages/recoil/examples/family.rs

@@ -1,27 +1,34 @@
-use std::collections::HashMap;
+use std::{collections::HashMap, rc::Rc};
 
 use dioxus_core::prelude::*;
 use recoil::*;
 use uuid::Uuid;
 
-const TODOS: AtomFamily<Uuid, Todo> = |_| HashMap::new();
+const TODOS: AtomHashMap<Uuid, Rc<Todo>> = |map| {};
 
 #[derive(PartialEq)]
 struct Todo {
     checked: bool,
     title: String,
-    contents: String,
+    content: String,
 }
 
 static App: FC<()> = |ctx, _| {
-    use_init_recoil_root(ctx, |_| {});
+    use_init_recoil_root(ctx, move |cfg| {});
+
     let todos = use_read_family(ctx, &TODOS);
 
-    rsx! { in ctx,
-        div {
-            "Basic Todolist with AtomFamilies in Recoil.rs"
-        }
-    }
+    // rsx! { in ctx,
+    //     div {
+    //         h1 {"Basic Todolist with AtomFamilies in Recoil.rs"}
+    //         ul { { todos.keys().map(|id| rsx! { Child { id: *id } }) } }
+    //     }
+    // }
+    ctx.render(html! {
+        <a href="#" class="">
+            <img class="inline-block h-10 w-10 rounded-full object-cover ring-2 ring-white" src="/images/person/4.jpg" alt="Jade"/>
+        </a>
+    })
 };
 
 #[derive(Props, PartialEq)]
@@ -33,11 +40,11 @@ static Child: FC<ChildProps> = |ctx, props| {
     let (todo, set_todo) = use_read_write(ctx, &TODOS.select(&props.id));
 
     rsx! { in ctx,
-        div {
+        li {
             h1 {"{todo.title}"}
             input { type: "checkbox", name: "scales", checked: "{todo.checked}" }
-            label { "{todo.contents}", for: "scales" }
-            p {"{todo.contents}"}
+            label { "{todo.content}", for: "scales" }
+            p {"{todo.content}"}
         }
     }
 };

packages/recoil/examples/familypoc.rs

@@ -0,0 +1,47 @@
+use dioxus_core::prelude::*;
+use im_rc::HashMap as ImMap;
+use recoil::*;
+use uuid::Uuid;
+
+const TODOS: Atom<ImMap<Uuid, Todo>> = |_| ImMap::new();
+
+#[derive(PartialEq)]
+struct Todo {
+    checked: bool,
+    title: String,
+    contents: String,
+}
+
+static App: FC<()> = |ctx, _| {
+    use_init_recoil_root(ctx, |_| {});
+    let todos = use_read(ctx, &TODOS);
+
+    rsx! { in ctx,
+        div {
+            "Basic Todolist with AtomFamilies in Recoil.rs"
+        }
+    }
+};
+
+#[derive(Props, PartialEq)]
+struct ChildProps {
+    id: Uuid,
+}
+
+static Child: FC<ChildProps> = |ctx, props| {
+    let todo = use_read(ctx, &TODOS).get(&props.id).unwrap();
+    // let (todo, set_todo) = use_read_write(ctx, &TODOS);
+
+    rsx! { in ctx,
+        div {
+            h1 {"{todo.title}"}
+            input { type: "checkbox", name: "scales", checked: "{todo.checked}" }
+            label { "{todo.contents}", for: "scales" }
+            p {"{todo.contents}"}
+        }
+    }
+};
+
+fn main() {
+    wasm_bindgen_futures::spawn_local(dioxus_web::WebsysRenderer::start(App))
+}

packages/recoil/examples/helloworld.rs → packages/recoil/examples/hellorecoil.rs

@@ -11,12 +11,19 @@ static App: FC<()> = |ctx, _| {
     rsx! { in ctx,
         div {
             "Count: {count}"
-            button { onclick: move |_| set_count(count + 1), "Incr" }
-            button { onclick: move |_| set_count(count - 1), "Decr" }
+            br {}
+            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))
+    // Setup logging
+    wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
+    console_error_panic_hook::set_once();
+
+    log::debug!("asd");
+    wasm_bindgen_futures::spawn_local(dioxus_web::WebsysRenderer::start(App));
 }

packages/recoil/examples/selectorlist.rs

@@ -3,8 +3,8 @@ 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 A_ITEMS: AtomHashMap<i32, i32> = |_| HashMap::new();
+const B_ITEMS: AtomHashMap<i32, i32> = |_| HashMap::new();
 
 const C_SELECTOR: SelectorFamily<i32, i32> = |api, key| {
     let a = api.get(&A_ITEMS.select(&key));

packages/recoil/examples/test.html

@@ -0,0 +1 @@
+println!("asd")

packages/recoil/notes/Architecture.md

@@ -95,8 +95,8 @@ const ContentCards: SelectorFamily<Uuid, ContentCard> = |api, key| api.on_get_as
 
 static ContentCard: FC<()> = |ctx, props| {
     let body =  async match use_recoil_value()(props.id).await {
-        Ok(content) => rsx!{ p {"{content}"} }
-        Err(e) => rsx!{ p {"Failed to load"}}
+        Ok(content) => rsx!{in ctx, p {"{content}"} }
+        Err(e) => rsx!{in ctx, p {"Failed to load"}}
     };
 
     rsx!{

packages/recoil/src/lib.rs

@@ -6,7 +6,6 @@ use std::{
     rc::Rc,
 };
 
-pub use api::*;
 pub use atomfamily::*;
 pub use atoms::*;
 pub use ecs::*;
@@ -18,13 +17,14 @@ pub use selector::*;
 pub use selectorfamily::*;
 pub use traits::*;
 pub use utils::*;
+mod tracingimmap;
 
 mod traits {
     use dioxus_core::prelude::Context;
 
     use super::*;
-    pub trait FamilyKey: PartialEq + Hash + 'static {}
-    impl<T: PartialEq + Hash + 'static> FamilyKey for T {}
+    pub trait MapKey: PartialEq + Hash + 'static {}
+    impl<T: PartialEq + Hash + 'static> MapKey for T {}
 
     pub trait AtomValue: PartialEq + 'static {}
     impl<T: PartialEq + 'static> AtomValue for T {}
@@ -32,8 +32,7 @@ mod traits {
     // Atoms, selectors, and their family variants are readable
     pub trait Readable<T: AtomValue>: Sized + Copy {
         fn use_read<'a>(self, ctx: Context<'a>) -> &'a T {
-            hooks::use_read(ctx, self);
-            todo!()
+            hooks::use_read(ctx, self)
         }
 
         // This returns a future of the value
@@ -44,9 +43,7 @@ mod traits {
             todo!()
         }
 
-        fn initialize(self, api: &RecoilRoot) -> T {
-            todo!()
-        }
+        fn initialize(self, api: &RecoilRoot) -> T;
 
         // We use the Raw Ptr to the atom
         // TODO: Make sure atoms with the same definitions don't get merged together. I don't think they do, but double check
@@ -78,7 +75,13 @@ mod atoms {
     // impl<T: AtomValue> Readable<T> for Atom<T> {}
     impl<T: AtomValue> Readable<T> for &'static Atom<T> {
         fn static_id(self) -> u32 {
-            todo!()
+            self as *const _ as u32
+        }
+
+        fn initialize(self, api: &RecoilRoot) -> T {
+            let mut builder = AtomBuilder {};
+            let p = self(&mut builder);
+            p
         }
     }
 
@@ -88,13 +91,13 @@ mod atoms {
         use super::*;
         use dioxus_core::prelude::Context;
 
-        const Example: Atom<i32> = |_| 10;
+        fn _test(ctx: Context) {
+            const EXAMPLE_ATOM: Atom<i32> = |_| 10;
 
-        fn test(ctx: Context) {
             // ensure that atoms are both read and write
-            let _ = use_read(ctx, &Example);
-            let _ = use_read_write(ctx, &Example);
-            let _ = use_write(ctx, &Example);
+            let _ = use_read(ctx, &EXAMPLE_ATOM);
+            let _ = use_read_write(ctx, &EXAMPLE_ATOM);
+            let _ = use_write(ctx, &EXAMPLE_ATOM);
         }
     }
 }
@@ -104,38 +107,57 @@ mod atomfamily {
     pub trait FamilyCollection<K, V> {}
     impl<K, V> FamilyCollection<K, V> for HashMap<K, V> {}
 
-    pub type AtomFamily<K, V, F = HashMap<K, V>> = fn((&K, &V)) -> F;
+    use im_rc::HashMap as ImHashMap;
+
+    /// AtomHashMaps provide an efficient way of maintaing collections of atoms.
+    ///
+    /// Under the hood, AtomHashMaps uses [IM](https://www.rust-lang.org)'s immutable HashMap implementation to lazily
+    /// clone data as it is modified.
+    ///
+    ///
+    ///
+    ///
+    ///
+    ///
+    pub type AtomHashMap<K, V> = fn(&mut ImHashMap<K, V>);
 
-    pub trait AtomFamilySelector<K: FamilyKey, V: AtomValue> {
-        fn select(&'static self, k: &K) -> AtomFamilySelection<K, V> {
+    pub trait AtomFamilySelector<K: MapKey, V: AtomValue + Clone> {
+        fn select(&'static self, k: &K) -> AtomMapSelection<K, V> {
             todo!()
         }
     }
 
-    impl<K: FamilyKey, V: AtomValue> AtomFamilySelector<K, V> for AtomFamily<K, V> {
-        fn select(&'static self, k: &K) -> AtomFamilySelection<K, V> {
+    impl<K: MapKey, V: AtomValue + Clone> AtomFamilySelector<K, V> for AtomHashMap<K, V> {
+        fn select(&'static self, k: &K) -> AtomMapSelection<K, V> {
             todo!()
         }
     }
 
-    pub struct AtomFamilySelection<'a, K: FamilyKey, V: AtomValue> {
-        root: &'static AtomFamily<K, V>,
+    pub struct AtomMapSelection<'a, K: MapKey, V: AtomValue> {
+        root: &'static AtomHashMap<K, V>,
         key: &'a K,
     }
 
-    impl<'a, K: FamilyKey, V: AtomValue> Readable<V> for &AtomFamilySelection<'a, K, V> {
+    impl<'a, K: MapKey, V: AtomValue> Readable<V> for &AtomMapSelection<'a, K, V> {
         fn static_id(self) -> u32 {
             todo!()
         }
+
+        fn initialize(self, api: &RecoilRoot) -> V {
+            todo!()
+            // let mut builder = AtomBuilder {};
+            // let p = self(&mut builder);
+            // p
+        }
     }
 
-    impl<'a, K: FamilyKey, T: AtomValue> Writable<T> for &AtomFamilySelection<'a, K, T> {}
+    impl<'a, K: MapKey, T: AtomValue> Writable<T> for &AtomMapSelection<'a, K, T> {}
 
     mod compiletests {
         use dioxus_core::prelude::Context;
 
         use super::*;
-        const Titles: AtomFamily<u32, &str> = |_| HashMap::new();
+        const Titles: AtomHashMap<u32, &str> = |map| {};
 
         fn test(ctx: Context) {
             let title = Titles.select(&10).use_read(ctx);
@@ -157,6 +179,10 @@ mod selector {
         fn static_id(self) -> u32 {
             todo!()
         }
+
+        fn initialize(self, api: &RecoilRoot) -> T {
+            todo!()
+        }
     }
 
     pub struct SelectorFamilyBuilder {}
@@ -184,6 +210,10 @@ mod selectorfamily {
         fn static_id(self) -> u32 {
             todo!()
         }
+
+        fn initialize(self, api: &RecoilRoot) -> V {
+            todo!()
+        }
     }
 
     /// Borrowed selector families are – surprisingly - discouraged.
@@ -196,32 +226,12 @@ mod selectorfamily {
     // impl<'a, K, V: 'a> SelectionSelector<K, V> for fn(&'a mut SelectorFamilyBuilder, K) -> V {}
 }
 
-mod api {
-    use super::*;
-
-    // pub struct RecoilApi {}
-    // impl RecoilApi {
-    //     pub fn get<T: AtomValue>(&self, t: &'static Atom<T>) -> Rc<T> {
-    //         todo!()
-    //     }
-    //     pub fn modify<T: PartialEq, O>(
-    //         &self,
-    //         t: &'static Atom<T>,
-    //         f: impl FnOnce(&mut T) -> O,
-    //     ) -> O {
-    //         todo!()
-    //     }
-    //     pub fn set<T: AtomValue>(&self, t: &'static Atom<T>, new: T) {
-    //         self.modify(t, move |old| *old = new);
-    //     }
-    // }
-}
-
 mod root {
     use std::{
         any::{Any, TypeId},
         collections::{HashSet, VecDeque},
         iter::FromIterator,
+        sync::atomic::{AtomicU32, AtomicUsize},
     };
 
     use super::*;
@@ -229,17 +239,7 @@ mod root {
     type AtomId = u32;
     type ConsumerId = u32;
 
-    pub struct RecoilContext {
-        pub(crate) inner: Rc<RefCell<RecoilRoot>>,
-    }
-
-    impl RecoilContext {
-        pub fn new() -> Self {
-            Self {
-                inner: Rc::new(RefCell::new(RecoilRoot::new())),
-            }
-        }
-    }
+    pub type RecoilContext = RefCell<RecoilRoot>;
 
     // Sometimes memoization means we don't need to re-render components that holds "correct values"
     // IE we consider re-render more expensive than keeping the old value around.
@@ -248,7 +248,8 @@ mod root {
     // Instead, we choose to let the hook itself hold onto the Rc<T> by not forcing a render when T is the same.
     // Whenever the component needs to be re-rendered for other reasons, the "get" method will automatically update the Rc<T> to the most recent one.
     pub struct RecoilRoot {
-        nodes: HashMap<AtomId, Slot>,
+        nodes: RefCell<HashMap<AtomId, Slot>>,
+        consumer_map: HashMap<ConsumerId, AtomId>,
     }
 
     struct Slot {
@@ -259,23 +260,40 @@ mod root {
         dependents: HashSet<AtomId>,
     }
 
+    static NEXT_ID: AtomicU32 = AtomicU32::new(0);
+    fn next_consumer_id() -> u32 {
+        NEXT_ID.fetch_add(1, std::sync::atomic::Ordering::Relaxed)
+    }
+
     impl RecoilRoot {
         pub(crate) fn new() -> Self {
             Self {
                 nodes: Default::default(),
+                consumer_map: Default::default(),
             }
         }
 
         pub fn subscribe<T: AtomValue>(
-            &self,
+            &mut self,
             readable: impl Readable<T>,
             receiver_fn: Rc<dyn Fn()>,
         ) -> ConsumerId {
-            todo!()
+            let consumer_id = next_consumer_id();
+            let atom_id = readable.static_id();
+            log::debug!("Subscribing consumer to atom {} {}", consumer_id, atom_id);
+
+            let mut nodes = self.nodes.borrow_mut();
+            let slot = nodes.get_mut(&atom_id).unwrap();
+            slot.consumers.insert(consumer_id, receiver_fn);
+            self.consumer_map.insert(consumer_id, atom_id);
+            consumer_id
         }
 
-        pub fn unsubscribe(&self, id: ConsumerId) {
-            todo!()
+        pub fn unsubscribe(&mut self, consumer_id: ConsumerId) {
+            let atom_id = self.consumer_map.get(&consumer_id).unwrap();
+            let mut nodes = self.nodes.borrow_mut();
+            let slot = nodes.get_mut(&atom_id).unwrap();
+            slot.consumers.remove(&consumer_id);
         }
 
         /// Directly get the *slot*
@@ -283,13 +301,29 @@ mod root {
         ///
         ///
         pub fn try_get_raw<T: AtomValue>(&self, readable: impl Readable<T>) -> Result<Rc<T>> {
-            todo!()
+            let atom_id = readable.static_id();
+            let mut nodes = self.nodes.borrow_mut();
+            if !nodes.contains_key(&atom_id) {
+                let value = Slot {
+                    type_id: TypeId::of::<T>(),
+                    source: atom_id,
+                    value: Rc::new(readable.initialize(self)),
+                    consumers: Default::default(),
+                    dependents: Default::default(),
+                };
+                nodes.insert(atom_id, value);
+            }
+            let out = nodes
+                .get(&atom_id)
+                .unwrap()
+                .value
+                .clone()
+                .downcast::<T>()
+                .unwrap();
+
+            Ok(out)
         }
 
-        // pub fn try_get<T: AtomValue>(&self, readable: impl Readable<T>) -> Result<&T> {
-        //     self.try_get_raw(readable).map(|f| f.as_ref())
-        // }
-
         pub fn try_set<T: AtomValue>(
             &mut self,
             writable: impl Writable<T>,
@@ -297,7 +331,15 @@ mod root {
         ) -> crate::error::Result<()> {
             let atom_id = writable.static_id();
 
-            let consumers = match self.nodes.get_mut(&atom_id) {
+            self.set_by_id(atom_id, new_val);
+
+            Ok(())
+        }
+
+        // A slightly dangerous method to manually overwrite any slot given an AtomId
+        pub(crate) fn set_by_id<T: AtomValue>(&mut self, atom_id: AtomId, new_val: T) {
+            let mut nodes = self.nodes.borrow_mut();
+            let consumers = match nodes.get_mut(&atom_id) {
                 Some(slot) => {
                     slot.value = Rc::new(new_val);
                     &slot.consumers
@@ -306,44 +348,30 @@ mod root {
                     let value = Slot {
                         type_id: TypeId::of::<T>(),
                         source: atom_id,
-                        value: Rc::new(writable.initialize(self)),
+                        value: Rc::new(new_val),
+                        // value: Rc::new(writable.initialize(self)),
                         consumers: Default::default(),
                         dependents: Default::default(),
                     };
-                    self.nodes.insert(atom_id, value);
-                    &self.nodes.get(&atom_id).unwrap().consumers
+                    nodes.insert(atom_id, value);
+                    &nodes.get(&atom_id).unwrap().consumers
                 }
             };
 
-            for (_, consumer_fn) in consumers {
+            for (id, consumer_fn) in consumers {
+                log::debug!("triggering selector {}", id);
                 consumer_fn();
             }
-
-            // if it's a an atom or selector, update all the dependents
-
-            Ok(())
-        }
-
-        pub fn get<T: AtomValue>(&self, readable: impl Readable<T>) -> Rc<T> {
-            todo!()
-            // self.try_get(readable).unwrap()
         }
-
-        pub fn set<T: AtomValue>(&mut self, writable: impl Writable<T>, new_val: T) {
-            self.try_set(writable, new_val).unwrap();
-        }
-
-        /// A slightly dangerous method to manually overwrite any slot given an AtomId
-        pub(crate) fn set_by_id<T: AtomValue>(&self, id: AtomId, new_val: T) {}
     }
 }
 
 mod hooks {
     use super::*;
-    use dioxus_core::prelude::Context;
+    use dioxus_core::{hooks::use_ref, prelude::Context};
 
     pub fn use_init_recoil_root(ctx: Context, cfg: impl Fn(())) {
-        ctx.use_create_context(move || RecoilRoot::new())
+        ctx.use_create_context(move || RefCell::new(RecoilRoot::new()))
     }
 
     /// Gain access to the recoil API directly - set, get, modify, everything
@@ -353,25 +381,28 @@ mod hooks {
     ///
     /// You can use this method to create controllers that perform much more complex actions than set/get
     /// However, be aware that "getting" values through this hook will not subscribe the component to any updates.
-    pub fn use_recoil_api<'a, F: 'a>(
-        ctx: Context<'a>,
-        f: impl Fn(Rc<RecoilRoot>) -> F + 'static,
-    ) -> &F {
-        let g = ctx.use_context::<RecoilContext>();
-        let api = g.inner.clone();
-        todo!()
+    pub fn use_recoil_api<'a>(ctx: Context<'a>) -> &Rc<RecoilContext> {
+        ctx.use_context::<RecoilContext>()
     }
 
     pub fn use_write<'a, T: AtomValue>(
         ctx: Context<'a>,
+        // todo: this shouldn't need to be static
         writable: impl Writable<T>,
     ) -> &'a Rc<dyn Fn(T)> {
-        let api = use_recoil_api(ctx, |f| f);
+        let api = use_recoil_api(ctx);
         ctx.use_hook(
             move || {
                 let api = api.clone();
                 let raw_id = writable.static_id();
-                Rc::new(move |new_val| api.set_by_id(raw_id, new_val)) as Rc<dyn Fn(T)>
+                Rc::new(move |new_val| {
+                    //
+                    log::debug!("setting new value ");
+                    let mut api = api.as_ref().borrow_mut();
+
+                    // api.try_set(writable, new_val).expect("failed to set");
+                    api.set_by_id(raw_id, new_val);
+                }) as Rc<dyn Fn(T)>
             },
             move |hook| &*hook,
             |hook| {},
@@ -387,9 +418,11 @@ mod hooks {
             consumer_id: u32,
         }
 
-        let api = use_recoil_api(ctx, |api| api);
+        let api = use_recoil_api(ctx);
         ctx.use_hook(
             move || {
+                let mut api = api.as_ref().borrow_mut();
+
                 let update = ctx.schedule_update();
                 let val = api.try_get_raw(readable).unwrap();
                 let id = api.subscribe(readable, Rc::new(update));
@@ -399,11 +432,14 @@ mod hooks {
                 }
             },
             move |hook| {
+                let api = api.as_ref().borrow();
+
                 let val = api.try_get_raw(readable).unwrap();
                 hook.value = val;
                 &hook.value
             },
-            |hook| {
+            move |hook| {
+                let mut api = api.as_ref().borrow_mut();
                 api.unsubscribe(hook.consumer_id);
             },
         )
@@ -414,12 +450,16 @@ mod hooks {
         use_read_raw(ctx, readable).as_ref()
     }
 
-    /// Use an atom in both read and write modes - only available for atoms and family selections (not selectors)
+    /// # Use an atom in both read and write
+    ///
+    /// This method is only available for atoms and family selections (not selectors).
+    ///
     /// This is equivalent to calling both `use_read` and `use_write`, but saves you the hassle and repitition
     ///
+    /// ## Example
+    ///
     /// ```
     /// const Title: Atom<&str> = |_| "hello";
-    /// //...
     /// let (title, set_title) = use_read_write(ctx, &Title);
     ///
     /// // equivalent to:
@@ -432,13 +472,40 @@ mod hooks {
         (use_read(ctx, writable), use_write(ctx, writable))
     }
 
+    /// # Modify an atom without using `use_read`.
+    ///
+    /// Occasionally, a component might want to write to an atom without subscribing to its changes. `use_write` does not
+    /// provide this functionality, so `use_modify` exists to gain access to the current atom value while setting it.
+    ///
+    /// ## Notes
+    ///
+    /// Do note that this hook can only be used with Atoms where T: Clone since we actually clone the current atom to make
+    /// it mutable.
+    ///
+    /// Also note that you need to stack-borrow the closure since the modify closure expects an &dyn Fn. If we made it
+    /// a static type, it wouldn't be possible to use the `modify` closure more than once (two closures always are different)
+    ///
+    /// ## Example
+    ///
+    /// ```ignore
+    /// let modify_atom = use_modify(ctx, Atom);
+    ///
+    /// modify_atom(&|a| *a += 1)
+    /// ```
+    pub fn use_modify<'a, T: AtomValue + 'static + Clone>(
+        ctx: Context<'a>,
+        writable: impl Writable<T>,
+    ) -> impl Fn(&dyn Fn()) {
+        |_| {}
+    }
+
     /// Use a family collection directly
     /// !! Any changes to the family will cause this subscriber to update
     /// Try not to put this at the very top-level of your app.
-    pub fn use_read_family<'a, K, V, C: FamilyCollection<K, V>>(
+    pub fn use_read_family<'a, K, V>(
         ctx: Context<'a>,
-        t: &AtomFamily<K, V, C>,
-    ) -> &'a C {
+        t: &AtomHashMap<K, V>,
+    ) -> &'a im_rc::HashMap<K, V> {
         todo!()
     }
 }

packages/recoil/src/tracingimmap.rs

@@ -0,0 +1,29 @@
+//! Tracing immap
+//! Traces modifications since last generation
+//! To reconstruct the history, you will need *all* the generations between the start and end points
+
+use im_rc::HashMap as ImMap;
+
+pub struct TracedHashMap<K, V> {
+    inner: ImMap<K, V>,
+    generation: u32,
+    mods_since_last_gen: Vec<K>,
+}
+
+impl<K: Clone, V: Clone> TracedHashMap<K, V> {
+    fn next_generation(&self) -> Self {
+        Self {
+            generation: self.generation + 1,
+            inner: self.inner.clone(),
+            mods_since_last_gen: vec![],
+        }
+    }
+}
+
+#[test]
+fn compare_dos() {
+    let map1 = im_rc::hashmap! {3 => 2, 2 => 3};
+    let map2 = im_rc::hashmap! {2 => 3, 3 => 2};
+
+    assert_eq!(map1, map2);
+}

packages/web/examples/hello.rs

@@ -2,13 +2,20 @@ use dioxus_core::prelude::*;
 use dioxus_web::WebsysRenderer;
 
 fn main() {
+    wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
+    console_error_panic_hook::set_once();
+
+    log::info!("hello world");
     wasm_bindgen_futures::spawn_local(WebsysRenderer::start(Example));
 }
 
 static Example: FC<()> = |ctx, _props| {
-    ctx.render(html! {
-        <div>
-            "Hello world!"
-        </div>
+    ctx.render(rsx! {
+        div {
+            span {
+                class: "px-2 py-1 flex w-36 mt-4 items-center text-xs rounded-md font-semibold text-yellow-500 bg-yellow-100"
+                "DUE DATE : 18 JUN"
+            }
+        }
     })
 };

packages/web/examples/htmlexample.html

@@ -0,0 +1,59 @@
+<div class="shadow-lg rounded-2xl p-4 bg-white dark:bg-gray-700 w-full">
+    <p class="font-bold text-md text-black dark:text-white">
+        "Messages"
+    </p>
+    <ul>
+        <li class="flex items-center my-6 space-x-2">
+            <a href="#" class="block relative">
+                <img alt="profil" src="/images/person/1.jpg" class="mx-auto object-cover rounded-full h-10 w-10 " />
+            </a>
+            <div class="flex flex-col">
+                <span class="text-sm text-gray-900 font-semibold dark:text-white ml-2">
+                    {title}
+                </span>
+                <span class="text-sm text-gray-400 dark:text-gray-300 ml-2">
+                    "Hey John ! Do you read the NextJS doc ?"
+                </span>
+            </div>
+        </li>
+        <li class="flex items-center my-6 space-x-2">
+            <a href="#" class="block relative">
+                <img alt="profil" src="/images/person/5.jpg" class="mx-auto object-cover rounded-full h-10 w-10 " />
+            </a>
+            <div class="flex flex-col">
+                <span class="text-sm text-gray-900 font-semibold dark:text-white ml-2">
+                    "Marie Lou"
+                </span>
+                <span class="text-sm text-gray-400 dark:text-gray-300 ml-2">
+                    "No I think the dog is better..."
+                </span>
+            </div>
+        </li>
+        <li class="flex items-center my-6 space-x-2">
+            <a href="#" class="block relative">
+                <img alt="profil" src="/images/person/6.jpg" class="mx-auto object-cover rounded-full h-10 w-10 " />
+            </a>
+            <div class="flex flex-col">
+                <span class="text-sm text-gray-900 font-semibold dark:text-white ml-2">
+                    "Ivan Buck"
+                </span>
+                <span class="text-sm text-gray-400 dark:text-gray-300 ml-2">
+                    "Seriously ? haha Bob is not a children !"
+                </span>
+            </div>
+        </li>
+        <li class="flex items-center my-6 space-x-2">
+            <a href="#" class="block relative">
+                <img alt="profil" src="/images/person/7.jpg" class="mx-auto object-cover rounded-full h-10 w-10 " />
+            </a>
+            <div class="flex flex-col">
+                <span class="text-sm text-gray-900 font-semibold dark:text-white ml-2">
+                    "Marina Farga"
+                </span>
+                <span class="text-sm text-gray-400 dark:text-gray-300 ml-2">
+                    "Do you need that deisgn ?"
+                </span>
+            </div>
+        </li>
+    </ul>
+</div>

packages/web/examples/list.rs

@@ -38,7 +38,6 @@ static App: FC<()> = |ctx, _| {
     ctx.render(rsx!(
         div {
             id: "app"
-            style { "{APP_STYLE}" }
 
             div {
                 header {

packages/web/examples/todomvc_simple.rs

@@ -30,7 +30,6 @@ pub fn App(ctx: Context, props: &()) -> DomTree {
     ctx.render(rsx! {
         div {
             id: "app"
-            style { "{APP_STYLE}" }
 
             // list
             TodoList {}
@@ -101,7 +100,7 @@ pub struct TodoEntryProps {
     item: Rc<TodoItem>,
 }
 
-// pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> DomTree {
+pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> DomTree {
 // #[inline_props]
 pub fn TodoEntry(
     ctx: Context,

packages/web/examples/todomvcsingle.rs

@@ -28,7 +28,7 @@ pub struct TodoItem {
 }
 
 // Declare our global app state
-const TODO_LIST: Atom<HashMap<Uuid, TodoItem>> = |_| Default::default();
+const TODO_LIST: AtomHashMap<Uuid, TodoItem> = |_| {};
 const FILTER: Atom<FilterState> = |_| FilterState::All;
 const TODOS_LEFT: Selector<usize> = |api| api.get(&TODO_LIST).len();
 
@@ -74,8 +74,8 @@ impl TodoManager {
 
 pub fn TodoList(ctx: Context, _props: &()) -> DomTree {
     let draft = use_state_new(&ctx, || "".to_string());
-    let todos = use_recoil_value(&ctx, &TODO_LIST);
-    let filter = use_recoil_value(&ctx, &FILTER);
+    let todos = use_read(&ctx, &TODO_LIST);
+    let filter = use_read(&ctx, &FILTER);
 
     let todolist = todos
         .values()
@@ -91,8 +91,8 @@ pub fn TodoList(ctx: Context, _props: &()) -> DomTree {
             })
         });
 
-    rsx! { in ctuse_read
-        div {use_read
+    rsx! { in ctx,
+        div {
             header {
                 class: "header"
                 h1 {"todos"}
@@ -118,7 +118,7 @@ pub struct TodoEntryProps {
 
 pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> DomTree {
     let (is_editing, set_is_editing) = use_state(&ctx, || false);
-    let todo = use_recoil_value(&ctx, &TODO_LIST).get(&props.id).unwrap();
+    let todo = use_read(&ctx, &TODO_LIST).get(&props.id).unwrap();
 
     ctx.render(rsx! (
         li {
@@ -135,11 +135,11 @@ pub fn TodoEntry(ctx: Context, props: &TodoEntryProps) -> DomTree {
            ))}
         }
     ))
-}use_read
+}
 
 pub fn FilterToggles(ctx: Context, _props: &()) -> DomTree {
-    let reducer = use_recoil_callback(ctx, |api| TodoManager(api));
-    let items_left = use_recoil_value(ctx, &TODOS_LEFT);
+    let reducer = TodoManager(use_recoil_api(ctx));
+    let items_left = use_read(ctx, &TODOS_LEFT);
 
     let toggles = [
         ("All", "", FilterState::All),
@@ -198,9 +198,9 @@ pub fn Footer(ctx: Context, _props: &()) -> DomTree {
 const APP_STYLE: &'static str = include_str!("./todomvc/style.css");
 
 fn App(ctx: Context, _props: &()) -> DomTree {
-    use_init_recoil_root(ctx);
+    use_init_recoil_root(ctx, |_| {});
     rsx! { in ctx,
-        div { id: "app", style { "{APP_STYLE}" }
+        div { id: "app"
             TodoList {}
             Footer {}
         }

packages/web/src/interpreter.rs

@@ -276,8 +276,15 @@ impl PatchMachine {
             Edit::SetAttribute { name, value } => {
                 let node = self.stack.top();
 
-                if let Some(node) = node.dyn_ref::<HtmlInputElement>() {
+                log::debug!("setting attribute for element");
+
+                if let Some(node) = node.dyn_ref::<web_sys::Element>() {
+                    // node.set_attribute(name, value).unwrap();
+                    log::info!("setting attr {} {}", name, value);
                     node.set_attribute(name, value).unwrap();
+                }
+                if let Some(node) = node.dyn_ref::<HtmlInputElement>() {
+                    log::debug!("el is html input element");
 
                     // Some attributes are "volatile" and don't work through `setAttribute`.
                     if name == "value" {
@@ -289,18 +296,22 @@ impl PatchMachine {
                 }
 
                 if let Some(node) = node.dyn_ref::<HtmlOptionElement>() {
+                    log::debug!("el is html option element");
                     if name == "selected" {
                         node.set_selected(true);
                     }
                 }
+                log::debug!("el is none");
+                // if let Some(node) = node.dyn_ref::<web_sys::Namesp>() {}
             }
 
             // 4
             Edit::RemoveAttribute { name } => {
                 let node = self.stack.top();
-                if let Some(node) = node.dyn_ref::<HtmlInputElement>() {
+                if let Some(node) = node.dyn_ref::<web_sys::Element>() {
                     node.remove_attribute(name).unwrap();
-
+                }
+                if let Some(node) = node.dyn_ref::<HtmlInputElement>() {
                     // Some attributes are "volatile" and don't work through `removeAttribute`.
                     if name == "value" {
                         node.set_value("");
@@ -433,6 +444,7 @@ impl PatchMachine {
                     .unwrap()
                     .dyn_into::<Node>()
                     .unwrap();
+                log::debug!("Made NS element {} {}", ns, tag_name);
                 self.stack.push(el);
             }
 

packages/webview/Cargo.toml

@@ -11,7 +11,7 @@ license = "MIT/Apache-2.0"
 [dependencies]
 # web-view = { git = "https://github.com/Boscop/web-view" }
 web-view = "0.7.3"
-dioxus-core = { path = "../core", version = "0.1.2", features = ["serde"] }
+dioxus-core = { path = "../core", version = "0.1.2", features = ["serialize"] }
 anyhow = "1.0.38"
 argh = "0.1.4"
 serde = "1.0.120"

packages/webview/examples/demo.rs

@@ -18,29 +18,48 @@ fn main() {
 }
 
 static Example: FC<()> = |ctx, _props| {
-    ctx.render(rsx! {
-        div  {
-            class: "flex items-center justify-center flex-col"
-            div {
-                class: "flex items-center justify-center"
-                div {
-                    class: "flex flex-col bg-white rounded p-4 w-full max-w-xs"
-                    div { class: "font-bold text-xl", "Example desktop app" }
-                    div { class: "text-sm text-gray-500", "This is running natively" }
-                    div {
-                        class: "flex flex-row items-center justify-center mt-6"
-                        div { class: "font-medium text-6xl", "100%" }
-                    }
-                    div {
-                        class: "flex flex-row justify-between mt-6"
-                        a {
-                            href: "https://www.dioxuslabs.com"
-                            class: "underline"
-                            "Made with dioxus"
-                        }
-                    }
-                }
-            }
-        }
+    ctx.render(html! {
+        <div>
+        <svg class="octicon octicon-star v-align-text-bottom"
+        viewBox="0 0 14 16" version="1.1"
+        width="14" height="16"
+        xmlns="http://www.w3.org/2000/svg"
+        >
+
+        <path
+        d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14"
+        xmlns="http://www.w3.org/2000/svg"
+        >
+        </path>
+
+        </svg>
+        </div>
     })
 };
+// static Example: FC<()> = |ctx, _props| {
+//     ctx.render(rsx! {
+//         div  {
+//             class: "flex items-center justify-center flex-col"
+//             div {
+//                 class: "flex items-center justify-center"
+//                 div {
+//                     class: "flex flex-col bg-white rounded p-4 w-full max-w-xs"
+//                     div { class: "font-bold text-xl", "Example desktop app" }
+//                     div { class: "text-sm text-gray-500", "This is running natively" }
+//                     div {
+//                         class: "flex flex-row items-center justify-center mt-6"
+//                         div { class: "font-medium text-6xl", "100%" }
+//                     }
+//                     div {
+//                         class: "flex flex-row justify-between mt-6"
+//                         a {
+//                             href: "https://www.dioxuslabs.com"
+//                             class: "underline"
+//                             "Made with dioxus"
+//                         }
+//                     }
+//                 }
+//             }
+//         }
+//     })
+// };