docs: update local examples and docs to support new syntaxes

Author: jkelleyrtp

.vscode/settings.json

@@ -1,3 +1,7 @@
 {
-  "rust-analyzer.cargo.allFeatures": true
+  "rust-analyzer.cargo.allFeatures": true,
+  "rust-analyzer.cargo.features": [
+    "desktop",
+    "router"
+  ],
 }

README.md

@@ -49,7 +49,7 @@
 Dioxus is a portable, performant, and ergonomic framework for building cross-platform user experiences in Rust.
 
 ```rust
-fn App(cx: Scope<()>) -> Element {
+fn app(cx: Scope<()>) -> Element {
     let mut count = use_state(&cx, || 0);
 
     cx.render(rsx!(
@@ -76,23 +76,21 @@ If you know React, then you already know Dioxus.
 
 <table style="width:100%" align="center">
     <tr >
-        <th><a href="http://github.com/jkelleyrtp/dioxus">Web</a></th>
-        <th><a href="http://github.com/jkelleyrtp/dioxus">Desktop</a></th>
-        <th><a href="http://github.com/jkelleyrtp/dioxus">Mobile</a></th>
-        <th><a href="http://github.com/jkelleyrtp/dioxus">State</a></th>
-        <th><a href="http://github.com/jkelleyrtp/dioxus">Docs</a></th>
-        <th><a href="http://github.com/jkelleyrtp/dioxus">Tools</a></th>
+        <th><a href="https://dioxuslabs.com/book/">Web</a></th>
+        <th><a href="https://dioxuslabs.com/book/">Desktop</a></th>
+        <th><a href="https://dioxuslabs.com/book/">Mobile</a></th>
+        <th><a href="https://dioxuslabs.com/book/">State</a></th>
+        <th><a href="https://dioxuslabs.com/book/">Docs</a></th>
+        <th><a href="https://dioxuslabs.com/book/">Tools</a></th>
     <tr>
 </table>
 
 ## Examples:
 
-| File Navigator (Desktop)                                                                                                                | Bluetooth scanner (Desktop)                                                                                                             | TodoMVC (All platforms)                                                                                        | Widget Gallery                                                                                                                          |
+| File Navigator (Desktop)                                                                                                                | Bluetooth scanner (Desktop)                                                                                                             | TodoMVC (All platforms)                                                                                        | Tailwind (Liveview)                                                                                                                     |
 | --------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
 | [![asd](https://github.com/DioxusLabs/file-explorer-example/raw/master/image.png)](https://github.com/DioxusLabs/file-explorer-example) | [![asd](https://github.com/DioxusLabs/file-explorer-example/raw/master/image.png)](https://github.com/DioxusLabs/file-explorer-example) | [![asd](https://github.com/DioxusLabs/todomvc/raw/master/example.png)](https://github.com/dioxusLabs/todomvc/) | [![asd](https://github.com/DioxusLabs/file-explorer-example/raw/master/image.png)](https://github.com/DioxusLabs/file-explorer-example) |
 
-<!-- | ![asd](https://github.com/DioxusLabs/todomvc/blob/master/example.png) | [![asd](https://github.com/DioxusLabs/todomvc/blob/master/example.png)](https://github.com/dioxusLabs/todomvc/) | ![asd](https://sixtyfps.io/resources/printerdemo_screenshot.png) | -->
-
 
 See the awesome-dioxus page for a curated list of content in the Dioxus Ecosystem.
 
@@ -169,6 +167,7 @@ Dioxus is heavily inspired by React, but we want your transition to feel like an
 | 1st class global state    | ✅      | ✅     | redux/recoil/mobx on top of context                                  |
 | Runs natively             | ✅      | ❓     | runs as a portable binary w/o a runtime (Node)                       |
 | Subtree Memoization       | ✅      | ❓     | skip diffing static element subtrees                                 |
+| High-efficiency templates | 🛠      | ❓     | rsx! calls are translated to templates on the DOM's side             |
 | Compile-time correct      | ✅      | ❓     | Throw errors on invalid template layouts                             |
 | Heuristic Engine          | ✅      | ❓     | track component memory usage to minimize future allocations          |
 | Fine-grained reactivity   | 👀      | ❓     | Skip diffing for fine-grain updates                                  |

docs/guide/src/README.md

@@ -6,7 +6,7 @@
 
 ```rust
 fn App(cx: Context, props: &()) -> Element {
-    let mut count = use_state(cx, || 0);
+    let mut count = use_state(&cx, || 0);
 
     cx.render(rsx!(
         h1 { "High-Five counter: {count}" }
@@ -53,7 +53,7 @@ Dioxus supports server-side rendering!
 For rendering statically to an `.html` file or from a WebServer, then you'll want to make sure the `ssr` feature is enabled in the `dioxus` crate and use the `dioxus::ssr` API. We don't expect the SSR API to change drastically in the future.
 
 ```rust
-let contents = dioxus::ssr::render_vdom(&dom, |c| c);
+let contents = dioxus::ssr::render_vdom(&dom);
 ```
 
 [Jump to the getting started guide for SSR.]()

docs/guide/src/concepts/00-index.md

@@ -45,7 +45,7 @@ As the UI grows in scale, our logic to keep each element in the proper state wou
 Instead, with Dioxus, we *declare* what we want our UI to look like:
 
 ```rust
-let mut state = use_state(cx, || "red");
+let mut state = use_state(&cx, || "red");
 
 cx.render(rsx!(
     Container {

docs/guide/src/concepts/11-arena-memo.md

@@ -21,17 +21,17 @@ fn test() -> DomTree {
     }
 }
 
-static TestComponent: FC<()> = |cx, props|html!{<div>"Hello world"</div>};
+static TestComponent: Component<()> = |cx, props|html!{<div>"Hello world"</div>};
 
-static TestComponent: FC<()> = |cx, props|{
+static TestComponent: Component<()> = |cx, props|{
     let g = "BLAH";
     html! {
         <div> "Hello world" </div>
     }
 };
 
 #[functional_component]
-static TestComponent: FC<{ name: String }> = |cx, props|html! { <div> "Hello {name}" </div> };
+static TestComponent: Component<{ name: String }> = |cx, props|html! { <div> "Hello {name}" </div> };
 ```
 
 ## Why this behavior?

docs/guide/src/concepts/12-signals.md

@@ -12,7 +12,7 @@ Your component today might look something like this:
 
 ```rust
 fn Comp(cx: Context<()>) -> DomTree {
-    let (title, set_title) = use_state(cx, || "Title".to_string());
+    let (title, set_title) = use_state(&cx, || "Title".to_string());
     cx.render(rsx!{
         input {
             value: title,
@@ -26,7 +26,7 @@ This component is fairly straightforward - the input updates its own value on ev
 
 ```rust
 fn Comp(cx: Context<()>) -> DomTree {
-    let (title, set_title) = use_state(cx, || "Title".to_string());
+    let (title, set_title) = use_state(&cx, || "Title".to_string());
     cx.render(rsx!{
         div {
             input {
@@ -96,7 +96,7 @@ Sometimes you want a signal to propagate across your app, either through far-awa
 
 ```rust
 const TITLE: Atom<String> = || "".to_string();
-const Provider: FC<()> = |cx, props|{
+const Provider: Component<()> = |cx, props|{
     let title = use_signal(&cx, &TITLE);
     rsx!(cx, input { value: title })
 };
@@ -105,7 +105,7 @@ const Provider: FC<()> = |cx, props|{
 If we use the `TITLE` atom in another component, we can cause updates to flow between components without calling render or diffing either component trees:
 
 ```rust
-const Receiver: FC<()> = |cx, props|{
+const Receiver: Component<()> = |cx, props|{
     let title = use_signal(&cx, &TITLE);
     log::info!("This will only be called once!");
     rsx!(cx,
@@ -132,7 +132,7 @@ Dioxus automatically understands how to use your signals when mixed with iterato
 
 ```rust
 const DICT: AtomFamily<String, String> = |_| {};
-const List: FC<()> = |cx, props|{
+const List: Component<()> = |cx, props|{
     let dict = use_signal(&cx, &DICT);
     cx.render(rsx!(
         ul {

docs/guide/src/concepts/components.md

@@ -124,7 +124,7 @@ fn VoteButton(cx: Context, props: &VoteButtonProps) -> Element {
     cx.render(rsx!{
         div { class: "votebutton"
             div { class: "arrow up" }
-            div { class: "score", "{props.score}"}
+            div { class: "score", "{cx.props.score}"}
             div { class: "arrow down" }
         }
     })
@@ -147,7 +147,7 @@ struct TitleCardProps<'a> {
 
 fn TitleCard(cx: Context, props: &TitleCardProps) -> Element {
     cx.render(rsx!{
-        h1 { "{props.title}" }
+        h1 { "{cx.props.title}" }
     })
 }   
 ```

docs/guide/src/concepts/conditional_rendering.md

@@ -83,7 +83,7 @@ fn App(cx: Context, props: &())-> Element {
 
 This syntax even enables us to write a one-line component:
 ```rust
-static App: FC<()> = |cx, props| rsx!(cx, "hello world!");
+static App: Component<()> = |cx, props| rsx!(cx, "hello world!");
 ```
 
 Alternatively, for match statements, we can just return the builder itself and pass it into a final, single call to `cx.render`:

docs/guide/src/concepts/exporting_components.md

@@ -22,7 +22,7 @@ Let's say our app looks something like this:
 use dioxus::prelude::*;
 
 fn main() {
-    dioxus::desktop::launch(App, |c| c);
+    dioxus::desktop::launch(App);
 }
 
 fn App((cx, props): Component<()>) -> Element {} 
@@ -87,7 +87,7 @@ In our `main.rs`, we'll want to declare the `post` module so we can access our `
 use dioxus::prelude::*;
 
 fn main() {
-    dioxus::desktop::launch(App, |c| c);
+    dioxus::desktop::launch(App);
 }
 
 mod post;
@@ -186,7 +186,7 @@ Ultimately, including and exporting components is governed by Rust's module syst
 use dioxus::prelude::*;
 
 fn main() {
-    dioxus::desktop::launch(App, |c| c);
+    dioxus::desktop::launch(App);
 }
 
 mod post;

docs/guide/src/concepts/interactivity.md

@@ -64,7 +64,7 @@ The most common hook you'll use for storing state is `use_state`. `use_state` pr
 
 ```rust
 fn App(cx: Context, props: &())-> Element {
-    let post = use_state(cx, || {
+    let post = use_state(&cx, || {
         PostData {
             id: Uuid::new_v4(),
             score: 10,
@@ -112,7 +112,7 @@ For example, let's say we provide a button to generate a new post. Whenever the
 
 ```rust
 fn App(cx: Context, props: &())-> Element {
-    let post = use_state(cx, || PostData::new());
+    let post = use_state(&cx, || PostData::new());
 
     cx.render(rsx!{
         button {
@@ -135,7 +135,7 @@ We can use tasks in our components to build a tiny stopwatch that ticks every se
 ```rust
 
 fn App(cx: Context, props: &())-> Element {
-    let mut sec_elapsed = use_state(cx, || 0);
+    let mut sec_elapsed = use_state(&cx, || 0);
 
     cx.spawn_task(async move {
         TimeoutFuture::from_ms(1000).await;