Feat: buff the readme and docs

README.md

@@ -9,8 +9,11 @@ Dioxus is a portable, performant, and ergonomic framework for building cross-pla
 
 
 ```rust
+//! A complete dioxus web app
+use dioxus_web::*;
+
 fn Example(ctx: Context, props: &()) -> DomTree {
-    let selection = use_state(&ctx, || "...?");
+    let selection = use_state(ctx, || "...?");
 
     ctx.render(rsx! {
         div {
@@ -20,6 +23,10 @@ fn Example(ctx: Context, props: &()) -> DomTree {
         }
     })
 };
+
+fn main() {
+    dioxus_web::start(Example).block_on();
+}
 ```
 
 Dioxus can be used to deliver webapps, desktop apps, static pages, liveview apps, Android apps, iOS Apps, and more. At its core, Dioxus is entirely renderer agnostic and has great documentation for creating new renderers for any platform.
@@ -58,23 +65,10 @@ Dioxus can be used to deliver webapps, desktop apps, static pages, liveview apps
 - [**Community hooks**: 3D renderers](docs/guides/01-ssr.md)
 
 
----
-## Why?
-
-CRUD applications are more complex than ever, requiring knowledge of multiple programming languages on top of annoying build systems and opinionated frameworks. Most JavaScript solutions require libraries to patch core language limitations like Immer for immutable state and TypeScript for static typing.
-
-Certainly, there has to be a better way. Dioxus was made specifically to bring order to this complex ecosystem, taking advantage of immutability-by-default, algebraic datatypes, and efficiency of the Rust programming language. Because Rust runs in both the browser and the server, we can finally write isomoprhic applications that run everywhere, bind to native libraries, and scale well.
-
-Don't be scared of the learning curve - the type of code needed to power a webapp is fairly simple. Diouxs opts to use unsafe (but miri tested!) code to expose an ergonomic API that requires understanding of very few Rust concepts to build a powerful webapp. In many cases, Rust code will end up simpler than JavaScript through the use of immutability, ADTs, and a powerful iterator system that doesn't require annoying "hacks" like `Object.fromEntries`. 
-
-
-## Liveview?
-Liveview is an architecture for building web applications where the final page is generated through 3 methods:
-- Statically render the bundle.
-- Hydrate the bundle to add dynamic functionality.
-- Link individual components to the webserver with websockets.
-
-In other frameworks, the DOM will be updated after events from the page are sent to the server and new html is generated. The html is then sent back to the page over websockets (ie html over websockets).
-
-In Dioxus, the user's bundle will link individual components on the page to the Liveview server. This ensures local events propogate through the page virtual dom if the server is not needed, keeping interactive latency low. This ensures the server load stays low, enabling a single server to handle tens of thousands of simultaneous clients.
-
+## Blog Posts
+- [Why we need a stronger typed web]()
+- [Isomorphic webapps in 10 minutes]()
+- [Rust is high level too]()
+- [Eliminating crashes with Rust webapps]()
+- [Tailwind for Dioxus]()
+- [The monoglot startup]()

packages/core-macro/src/rsxt.rs

@@ -38,7 +38,6 @@ impl Parse for RsxRender {
                     Some(name)
                 }
             } else {
-                // todo!("NOT WORKIGN");
                 None
             };
 
@@ -126,6 +125,7 @@ impl Parse for AmbiguousElement {
                             .parse::<Component>()
                             .map(|c| AmbiguousElement::Component(c))
                     } else {
+                        let name = input.parse::<Ident>().unwrap();
                         Err(Error::new(
                             name.span(),
                             "Components must be uppercased, perhaps you mispelled a html tag",

packages/recoil/src/lib.rs

@@ -2,16 +2,33 @@
 //   Important hooks
 // ========================
 
-pub fn init_recoil_root(ctx: Context) {}
+pub fn init_recoil_root(ctx: Context) {
+    let res = ctx.try_use_context::<RecoilRoot>();
+    ctx.create_context(move || {
+        //
+        if res.is_ok() {
+            panic!(
+                "Cannot initialize a recoil root inside of a recoil root.\n An app may only have one recoil root per virtual dom instance"
+            );
+        }
+        RecoilRoot {}
+    })
+}
 
-pub fn use_recoil_value() {}
+pub fn use_atom<'a, T: PartialEq>(c: Context<'a>, t: &'static Atom<T>) -> &'a T {
+    todo!()
+}
 
-pub fn use_recoil() {}
+pub fn use_set_atom<'a, T: PartialEq>(c: Context<'a>, t: &'static Atom<T>) -> Rc<dyn Fn(T)> {
+    todo!()
+}
 
-pub fn use_set_recoil() {}
+use std::rc::Rc;
 
 use dioxus_core::virtual_dom::Context;
 
+pub struct RecoilRoot {}
+
 pub struct RecoilContext {}
 
 impl RecoilContext {
@@ -24,7 +41,7 @@ impl RecoilContext {
     ///
     /// This does not replace the value instantly.
     /// All calls to "get" will return the old value until the component is rendered.
-    pub fn set<T: PartialEq, O>(&self, t: &'static Atom<T>, new: T) {
+    pub fn set<T: PartialEq>(&self, t: &'static Atom<T>, new: T) {
         self.modify(t, move |old| *old = new);
     }
 
@@ -49,10 +66,6 @@ pub fn use_recoil_context<T>(c: Context) -> &T {
 //     todo!()
 // }
 
-pub fn use_atom<'a, T: PartialEq>(c: Context<'a>, t: &'static Atom<T>) -> &'a T {
-    todo!()
-}
-
 pub trait Readable {}
 impl<T: PartialEq> Readable for &'static Atom<T> {}
 impl<K: PartialEq, V: PartialEq> Readable for &'static AtomFamily<K, V> {}
@@ -130,3 +143,34 @@ pub type Selector<O> = selector<O>;
 pub fn use_selector<'a, O>(c: Context<'a>, s: &'static Selector<O>) -> &'a O {
     todo!()
 }
+
+pub fn callback_example(ctx: Context) {
+    let set_user = use_recoil_callback(ctx, |api| {
+        |a: String, b: ()| {
+            //
+        }
+    });
+
+    let set_user = use_recoil_callback(ctx, |api| {
+        //
+    });
+}
+
+fn use_recoil_callback<F>(ctx: Context, f: impl Fn(RecoilContext) -> F) -> F {
+    todo!()
+}
+
+mod analyzer {
+    use super::*;
+
+    const TITLE: Atom<&'static str> = atom(|_| Default::default());
+
+    // pub fn use_add_todo(ctx: Context) -> impl Fn(&'static str) + '_ {
+    //     use_recoil_callback(ctx, move |api| move |a: &'static str| api.set(&TITLE, a))
+    // }
+
+    struct Analyzer(RecoilContext);
+    fn use_analyzer(ctx: Context) -> Analyzer {
+        use_recoil_callback(ctx, |api| Analyzer(api))
+    }
+}

packages/web/examples/todomvcsingle.rs

@@ -7,7 +7,6 @@
 //! If you want an example on recommended project structure, check out the TodoMVC folder
 //!
 //! Here, we show to use Dioxus' Recoil state management solution to simplify app logic
-
 #![allow(non_snake_case)]
 use dioxus_web::dioxus::prelude::*;
 use recoil::*;
@@ -56,6 +55,8 @@ impl TodoManager {
         });
     }
     fn clear_completed(&self) {
+        TODO_LIST.with(api).get()
+        
         self.0.modify(&TODO_LIST, move |list| {
             *list = list.drain().filter(|(_, item)| !item.checked).collect();
         })
@@ -82,12 +83,12 @@ pub struct TodoItem {
 fn App(ctx: Context, props: &()) -> DomTree {
     init_recoil_root(ctx);
 
-    ctx.render(rsx! {
+    rsx! { in ctx,
         div { id: "app", style { "{APP_STYLE}" }
             TodoList {}
             Footer {}
         }
-    })
+    }
 }
 
 pub fn TodoList(ctx: Context, props: &()) -> DomTree {
@@ -109,7 +110,7 @@ pub fn TodoList(ctx: Context, props: &()) -> DomTree {
             })
         });
 
-    ctx.render(rsx! {
+    rsx! { in ctx,
         div {
             header {
                 class: "header"
@@ -126,7 +127,7 @@ pub fn TodoList(ctx: Context, props: &()) -> DomTree {
             // rsx! accepts optionals, so we suggest the `then` method in place of ternary
             {(!todos.is_empty()).then(|| rsx!( FilterToggles {}) )}
         }
-    })
+    }
 }
 
 #[derive(PartialEq, Props)]
@@ -199,7 +200,7 @@ pub fn FilterToggles(ctx: Context, props: &()) -> DomTree {
 }
 
 pub fn Footer(ctx: Context, props: &()) -> DomTree {
-    rsx!( in ctx,
+    rsx! { in ctx,
         footer {
             class: "info"
             p {"Double-click to edit a todo"}
@@ -212,5 +213,5 @@ pub fn Footer(ctx: Context, props: &()) -> DomTree {
                 a { "TodoMVC", href: "http://todomvc.com" }
             }
         }
-    )
+    }
 }