Merge branch 'master' into jk/autofmt-fixues

.github/dependabot.yml

@@ -0,0 +1,7 @@
+version: 2
+updates:
+  # Maintain dependencies for GitHub Actions
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"

.github/workflows/docs.yml

@@ -13,7 +13,6 @@ jobs:
     runs-on: ubuntu-latest
     environment: docs
     steps:
-      - uses: actions/checkout@v2
 
       # NOTE: Comment out when https://github.com/rust-lang/mdBook/pull/1306 is merged and released
       # - name: Setup mdBook
@@ -25,6 +24,7 @@ jobs:
       - name: Setup mdBook
         run: |
           cargo install mdbook --git https://github.com/Ruin0x11/mdBook.git --branch localization --rev e74fdb1
+      - uses: actions/checkout@v3
 
       - name: Build
         run: cd docs &&
@@ -32,7 +32,7 @@ jobs:
           cd router && mdbook build -d ../nightly/router  && cd ..
 
       - name: Deploy 🚀
-        uses: JamesIves/github-pages-deploy-action@v4.2.3
+        uses: JamesIves/github-pages-deploy-action@v4.4.1
         with:
           branch: gh-pages # The branch the action should deploy to.
           folder: docs/nightly # The folder the action should deploy.

.github/workflows/macos.yml

@@ -30,13 +30,13 @@ jobs:
     name: Test Suite
     runs-on: macos-latest
     steps:
-      - uses: actions/checkout@v2
       - uses: actions-rs/toolchain@v1
         with:
           profile: minimal
           toolchain: stable
           override: true
-      - uses: Swatinem/rust-cache@v1
+      - uses: Swatinem/rust-cache@v2
+      - uses: actions/checkout@v3
       - uses: actions-rs/cargo@v1
         with:
           command: test

.github/workflows/main.yml

@@ -32,15 +32,15 @@ jobs:
     name: Check
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
       - uses: actions-rs/toolchain@v1
         with:
           profile: minimal
           toolchain: stable
           override: true
-      - uses: Swatinem/rust-cache@v1
+      - uses: Swatinem/rust-cache@v2
       - run: sudo apt-get update
       - run: sudo apt install libwebkit2gtk-4.0-dev libgtk-3-dev libayatana-appindicator3-dev
+      - uses: actions/checkout@v3
       - uses: actions-rs/cargo@v1
         with:
           command: check
@@ -51,18 +51,18 @@ jobs:
     name: Test Suite
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
       - uses: actions-rs/toolchain@v1
         with:
           profile: minimal
           toolchain: stable
           override: true
-      - uses: Swatinem/rust-cache@v1
+      - uses: Swatinem/rust-cache@v2
       - run: sudo apt-get update
       - run: sudo apt install libwebkit2gtk-4.0-dev libgtk-3-dev libayatana-appindicator3-dev
       - uses: davidB/rust-cargo-make@v1
       - uses: browser-actions/setup-firefox@latest
-      - uses: jetli/wasm-pack-action@v0.3.0
+      - uses: jetli/wasm-pack-action@v0.4.0
+      - uses: actions/checkout@v3
       - uses: actions-rs/cargo@v1
         with:
           command: make
@@ -73,14 +73,14 @@ jobs:
     name: Rustfmt
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
       - uses: actions-rs/toolchain@v1
         with:
           profile: minimal
           toolchain: stable
           override: true
-      - uses: Swatinem/rust-cache@v1
+      - uses: Swatinem/rust-cache@v2
       - run: rustup component add rustfmt
+      - uses: actions/checkout@v3
       - uses: actions-rs/cargo@v1
         with:
           command: fmt
@@ -91,16 +91,16 @@ jobs:
     name: Clippy
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
       - uses: actions-rs/toolchain@v1
         with:
           profile: minimal
           toolchain: stable
           override: true
-      - uses: Swatinem/rust-cache@v1
+      - uses: Swatinem/rust-cache@v2
       - run: sudo apt-get update
       - run: sudo apt install libwebkit2gtk-4.0-dev libgtk-3-dev libayatana-appindicator3-dev
       - run: rustup component add clippy
+      - uses: actions/checkout@v3
       - uses: actions-rs/cargo@v1
         with:
           command: clippy
@@ -115,7 +115,7 @@ jobs:
   #     options: --security-opt seccomp=unconfined
   #   steps:
   #     - name: Checkout repository
-  #       uses: actions/checkout@v2
+  #       uses: actions/checkout@v3
   #     - name: Generate code coverage
   #       run: |
   #         apt-get update &&\

.github/workflows/windows.yml

@@ -47,8 +47,6 @@ jobs:
       # which causes failures for some of rustfmt's line-ending sensitive tests
       - name: disable git eol translation
         run: git config --global core.autocrlf false
-      - name: checkout
-        uses: actions/checkout@v2
 
         # Run build
       - name: Install Rustup using win.rustup.rs
@@ -66,6 +64,9 @@ jobs:
         if: matrix.target == 'x86_64-pc-windows-gnu' && matrix.channel == 'nightly'
         shell: bash
 
+      - name: checkout
+        uses: actions/checkout@v3
+
       - name: test
         run: |
           rustc -Vv

Cargo.toml

@@ -1,4 +1,3 @@
-
 [workspace]
 members = [
     "packages/dioxus",
@@ -13,17 +12,15 @@ members = [
     "packages/mobile",
     "packages/interpreter",
     "packages/fermi",
-    "packages/tui",
     "packages/liveview",
     "packages/autofmt",
     "packages/rsx",
-    "packages/rsx_interpreter",
+    "docs/guide",
+    "packages/tui",
     "packages/native-core",
     "packages/native-core-macro",
-    "docs/guide",
 ]
 
-
 # This is a "virtual package"
 # It is not meant to be published, but is used so "cargo run --example XYZ" works properly
 [package]
@@ -38,7 +35,7 @@ homepage = "https://dioxuslabs.com"
 documentation = "https://dioxuslabs.com"
 keywords = ["dom", "ui", "gui", "react", "wasm"]
 rust-version = "1.60.0"
-
+publish = false
 
 [dev-dependencies]
 dioxus = { path = "./packages/dioxus" }
@@ -60,3 +57,9 @@ reqwest = { version = "0.11.9", features = ["json"] }
 fern = { version = "0.6.0", features = ["colored"] }
 thiserror = "1.0.30"
 env_logger = "0.9.0"
+simple_logger = "4.0.0"
+
+[profile.release]
+opt-level = 3
+lto = true
+debug = true

README.md

@@ -1,6 +1,6 @@
-<div align="center">
-  <h1>Dioxus</h1>
-</div>
+<p align="center">
+  <img src="./notes/header.svg">
+</p>
 
 <div align="center">
   <!-- Crates version -->
@@ -54,7 +54,7 @@ Dioxus is a portable, performant, and ergonomic framework for building cross-pla
 
 ```rust
 fn app(cx: Scope) -> Element {
-    let mut count = use_state(&cx, || 0);
+    let mut count = use_state(cx, || 0);
 
     cx.render(rsx! {
         h1 { "High-Five counter: {count}" }
@@ -68,115 +68,108 @@ Dioxus can be used to deliver webapps, desktop apps, static sites, mobile apps,
 
 If you know React, then you already know Dioxus.
 
-### Unique features:
-
+## Unique features:
 - Desktop apps running natively (no Electron!) in less than 10 lines of code.
 - Incredibly ergonomic and powerful state management.
 - Comprehensive inline documentation - hover and guides for all HTML elements, listeners, and events.
-- Extremely memory efficient - 0 global allocations for steady-state components.
-- Multi-channel asynchronous scheduler for first-class async support.
+- Blazingly fast 🔥🔥 and extremely memory efficient
+- Integrated hot reloading for fast iteration
+- First-class async support with coroutines and suspense
 - And more! Read the [full release post](https://dioxuslabs.com/blog/introducing-dioxus/).
 
-## Get Started with...
-
-<table style="width:100%" align="center">
-    <tr >
-        <th><a href="https://dioxuslabs.com/guide/">Tutorial</a></th>
-        <th><a href="https://dioxuslabs.com/reference/web">Web</a></th>
-        <th><a href="https://dioxuslabs.com/reference/desktop/">Desktop</a></th>
-        <th><a href="https://dioxuslabs.com/reference/ssr/">SSR</a></th>
-        <th><a href="https://dioxuslabs.com/reference/mobile/">Mobile</a></th>
+## Supported Platforms
+<div align="center">
+  <table style="width:100%">
     <tr>
-</table>
-
-## Example Projects:
-
-| File Navigator (Desktop)                                                                                                                                                        | WiFi scanner (Desktop)                                                                                                                                                                 | TodoMVC (All platforms)                                                                                                                                                 | E-commerce w/ Tailwind (SSR/LiveView)                                                                                                                                                 |
-|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| [![File Explorer](https://github.com/DioxusLabs/example-projects/raw/master/file-explorer/image.png)](https://github.com/DioxusLabs/example-projects/blob/master/file-explorer) | [![Wifi Scanner Demo](https://github.com/DioxusLabs/example-projects/raw/master/wifi-scanner/demo_small.png)](https://github.com/DioxusLabs/example-projects/blob/master/wifi-scanner) | [![TodoMVC example](https://github.com/DioxusLabs/example-projects/raw/master/todomvc/example.png)](https://github.com/DioxusLabs/example-projects/blob/master/todomvc) | [![E-commerce Example](https://github.com/DioxusLabs/example-projects/raw/master/ecommerce-site/demo.png)](https://github.com/DioxusLabs/example-projects/blob/master/ecommerce-site) |
-
-See the [awesome-dioxus](https://github.com/DioxusLabs/awesome-dioxus) page for a curated list of content in the Dioxus Ecosystem.
-
-## Why Dioxus and why Rust?
-
-TypeScript is a fantastic addition to JavaScript, but it's still fundamentally JavaScript. TS code runs slightly slower, has tons of configuration options, and not every package is properly typed.
-
-By using Rust, we gain:
-
-- Static types for _every_ library
-- Immutability by default
-- A simple and intuitive module system
-- Integrated documentation (`go to source` _actually goes to source_)
-- Advanced pattern matching
-- Clean, efficient, composable iterators
-- Inline built-in unit/integration testing
-- Best-in-class error handling
-- Powerful and sane standard library
-- Flexible macro system
-- Access to `crates.io`
-
-Specifically, Dioxus provides us many other assurances:
-
-- Proper use of immutable data structures
-- Guaranteed error handling (so you can sleep easy at night not worrying about `cannot read property of undefined`)
-- Native performance on mobile
-- Direct access to system IO
-
-And much more. Dioxus makes Rust apps just as fast to write as React apps, but affords more robustness, giving your frontend team greater confidence in making big changes in shorter time.
-
-## Why NOT Dioxus?
-
-You shouldn't use Dioxus if:
-
-- You don't like the React Hooks approach to frontend
-- You need a no-std renderer
-- You want to support browsers where Wasm or asm.js are not supported.
-- You need a Send+Sync UI solution (Dioxus is not currently thread-safe)
-
-## Comparison with other Rust UI frameworks
-
-Dioxus primarily emphasizes **developer experience** and **familiarity with React principles**.
+      <td><em>Web</em></td>
+      <td>
+        <ul>
+          <li>Render directly to the DOM using WebAssembly</li>
+          <li>Pre-render with SSR and rehydrate on the client</li>
+          <li>Simple "hello world" at about 65kb, comparable to React</li>
+          <li>Built-in dev server and hot reloading for quick iteration</li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td><em>Desktop</em></td>
+      <td>
+        <ul>
+          <li>Render using Webview or - experimentally - with WGPU or Skia </li>
+          <li>Zero-config setup. Simply cargo-run to build your app </li>
+          <li>Full support for native system access without electron-esque IPC </li>
+          <li>Supports macOS, Linux, and Windows. Portable <3mb binaries </li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td><em>Mobile</em></td>
+      <td>
+        <ul>
+          <li>Render using Webview or - experimentally - with WGPU or Skia </li>
+          <li>Support for iOS and Android </li>
+          <li><em>Significantly</em> more performant than React Native </li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td><em>Liveview</em></td>
+      <td>
+        <ul>
+          <li>Render apps - or just a single component - entirely on the server</li>
+          <li>Integrations with popular Rust frameworks like Axum and Warp</li>
+          <li>Extremely low-latency and ability to support 10,000+ simultaneous apps</li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td><em>Terminal</em></td>
+      <td>
+        <ul>
+          <li>Render apps directly into your terminal, similar to <a href="https://github.com/vadimdemedes/ink"> ink.js</a></li>
+          <li>Powered by the familiar flexbox and CSS model of the browser</li>
+          <li>Built-in widgets like text input, buttons, and focus system</li>
+        </ul>
+      </td>
+    </tr>
+  </table>
+</div>
 
-- [Yew](https://github.com/yewstack/yew): prefers the elm pattern instead, no borrowed props, supports SSR (no hydration), no direct desktop/mobile support.
-- [Percy](https://github.com/chinedufn/percy): Supports SSR but with less emphasis on state management and event handling.
-- [Sycamore](https://github.com/sycamore-rs/sycamore): VDOM-less using fine-grained reactivity, but no direct support for desktop/mobile.
-- [Dominator](https://github.com/Pauan/rust-dominator): Signal-based zero-cost alternative, less emphasis on community and docs.
-- [Azul](https://azul.rs): Fully native HTML/CSS renderer for desktop applications, no support for web/ssr
+## Why Dioxus?
+There's tons of options for building apps, so why would you choose Dioxus?
 
-## Parity with React & Roadmap
+Well, first and foremost, Dioxus prioritizes developer experience. This is reflected in a variety of features unique to Dioxus:
 
-Dioxus is heavily inspired by React, but we want your transition to feel like an upgrade. Dioxus is _most_ of the way there, but missing a few key features. These include:
+- Autoformatting of our meta language (RSX) and accompanying VSCode extension
+- Hotreloading using an interpreter of RSX for both desktop and web
+- Emphasis on good docs - our guide is complete and our HTML elements are documented
+- Significant research in simplifying
 
-- Portals
-- Suspense integration with SSR
-- Server Components / Bundle Splitting / Lazy
+Dioxus is also a very extensible platform.
 
-Dioxus is unique in the Rust ecosystem in that it supports:
+- Easily build new renderers by implementing a very simple optimized stack-machine
+- Build and share components and even custom elements
 
-- Components with props that borrow from their parent
-- Server-side-rendering with client-side hydration
-- Support for desktop applications
+So... Dioxus is great, but why won't it work for me?
+- It's not fully mature yet. APIs are still shifting, things might break (though we try to avoid it)
+- You need to run in a no-std environment.
+- You don't like the React-hooks model of building UIs
 
-For more information on what features are currently available and the roadmap for the future, be sure to check out [the guide](https://dioxuslabs.com/guide/).
 
-## Projects in the ecosystem
+## Contributing
+- Report issues on our [issue tracker](https://github.com/dioxuslabs/dioxus/issues).
+- Join the discord and ask questions!
 
-Want to jump in and help build the future of Rust frontend? There's plenty of places where your contributions can make a huge difference:
 
-- [TUI renderer](https://github.com/dioxusLabs/rink)
-- [CLI Tooling](https://github.com/dioxusLabs/cli)
-- [Documentation and Example Projects](https://github.com/dioxusLabs/docsite)
-- LiveView and Web Server
-- Asset System
+<a href="https://github.com/dioxuslabs/dioxus/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=dioxuslabs/dioxus&max=30&columns=10" />
+</a>
 
 ## License
-
 This project is licensed under the [MIT license].
 
 [mit license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT
 
-### Contribution
-
 Unless you explicitly state otherwise, any contribution intentionally submitted
 for inclusion in Dioxus by you, shall be licensed as MIT, without any additional
 terms or conditions.

docs/guide/examples/component_children_inspect.rs

@@ -26,7 +26,7 @@ struct ClickableProps<'a> {
 // ANCHOR: Clickable
 fn Clickable<'a>(cx: Scope<'a, ClickableProps<'a>>) -> Element {
     match cx.props.children {
-        Some(VNode::Text(_)) => {
+        Ok(VNode { dynamic_nodes, .. }) => {
             todo!("render some stuff")
         }
         _ => {

docs/guide/examples/conditional_rendering.rs

@@ -6,7 +6,7 @@ fn main() {
 }
 
 pub fn App(cx: Scope) -> Element {
-    let is_logged_in = use_state(&cx, || false);
+    let is_logged_in = use_state(cx, || false);
 
     cx.render(rsx!(LogIn {
         is_logged_in: **is_logged_in,
@@ -48,7 +48,7 @@ fn LogIn<'a>(
 fn LogInWarning(cx: Scope, is_logged_in: bool) -> Element {
     // ANCHOR: conditional_none
     if *is_logged_in {
-        return None;
+        return cx.render(rsx!(()));
     }
 
     cx.render(rsx! {

docs/guide/examples/event_handler_prop.rs

@@ -1,6 +1,5 @@
 #![allow(non_snake_case)]
 
-use dioxus::events::MouseEvent;
 use dioxus::prelude::*;
 
 fn main() {

docs/guide/examples/event_nested.rs

@@ -14,7 +14,7 @@ fn App(cx: Scope) -> Element {
             button {
                 onclick: move |event| {
                     // now, outer won't be triggered
-                    event.cancel_bubble();
+                    event.stop_propogation();
                 },
                 "inner"
             }

docs/guide/examples/hello_world_tui_no_ctrl_c.rs

@@ -26,7 +26,7 @@ fn App(cx: Scope) -> Element {
             background_color: "red",
             justify_content: "center",
             align_items: "center",
-            onkeydown: move |k: KeyboardEvent| if let KeyCode::Q = k.data.key_code {
+            onkeydown: move |k: KeyboardEvent| if let KeyCode::Q = k.key_code {
                 tui_ctx.quit();
             },
 

docs/guide/examples/hooks_bad.rs

@@ -17,13 +17,13 @@ fn App(cx: Scope) -> Element {
     // But `if` statements only run if the conditional is true!
     // So we might violate rule 2.
     if you_are_happy && you_know_it {
-        let something = use_state(&cx, || "hands");
+        let something = use_state(cx, || "hands");
         println!("clap your {something}")
     }
 
     // ✅ instead, *always* call use_state
     // You can put other stuff in the conditional though
-    let something = use_state(&cx, || "hands");
+    let something = use_state(cx, || "hands");
     if you_are_happy && you_know_it {
         println!("clap your {something}")
     }
@@ -33,12 +33,12 @@ fn App(cx: Scope) -> Element {
     // ❌ don't call hooks inside closures!
     // We can't guarantee that the closure, if used, will be called at the same time every time
     let _a = || {
-        let b = use_state(&cx, || 0);
+        let b = use_state(cx, || 0);
         b.get()
     };
 
     // ✅ instead, move hook `b` outside
-    let b = use_state(&cx, || 0);
+    let b = use_state(cx, || 0);
     let _a = || b.get();
     // ANCHOR_END: closure
 
@@ -50,12 +50,12 @@ fn App(cx: Scope) -> Element {
     // ❌ Do not use hooks in loops!
     // In this case, if the length of the Vec changes, we break rule 2
     for _name in &names {
-        let is_selected = use_state(&cx, || false);
+        let is_selected = use_state(cx, || false);
         println!("selected: {is_selected}");
     }
 
     // ✅ Instead, use a hashmap with use_ref
-    let selection_map = use_ref(&cx, HashMap::<&str, bool>::new);
+    let selection_map = use_ref(cx, HashMap::<&str, bool>::new);
 
     for name in &names {
         let is_selected = selection_map.read()[name];
@@ -63,5 +63,5 @@ fn App(cx: Scope) -> Element {
     }
     // ANCHOR_END: loop
 
-    None
+    cx.render(rsx!(()))
 }

docs/guide/examples/hooks_composed.rs

@@ -8,6 +8,6 @@ struct AppSettings {}
 
 // ANCHOR: wrap_context
 fn use_settings(cx: &ScopeState) -> UseSharedState<AppSettings> {
-    use_context::<AppSettings>(cx).expect("App settings not provided")
+    use_shared_state::<AppSettings>(cx).expect("App settings not provided")
 }
 // ANCHOR_END: wrap_context

docs/guide/examples/hooks_counter.rs

@@ -7,7 +7,7 @@ fn main() {
 
 // ANCHOR: component
 fn App(cx: Scope) -> Element {
-    let mut count = use_state(&cx, || 0);
+    let mut count = use_state(cx, || 0);
 
     cx.render(rsx!(
         h1 { "High-Five counter: {count}" }

docs/guide/examples/hooks_counter_two_state.rs

@@ -8,8 +8,8 @@ fn main() {
 // ANCHOR: component
 fn App(cx: Scope) -> Element {
     // ANCHOR: use_state_calls
-    let mut count_a = use_state(&cx, || 0);
-    let mut count_b = use_state(&cx, || 0);
+    let mut count_a = use_state(cx, || 0);
+    let mut count_b = use_state(cx, || 0);
     // ANCHOR_END: use_state_calls
 
     cx.render(rsx!(

docs/guide/examples/hooks_use_ref.rs

@@ -7,7 +7,7 @@ fn main() {
 
 // ANCHOR: component
 fn App(cx: Scope) -> Element {
-    let list = use_ref(&cx, Vec::new);
+    let list = use_ref(cx, Vec::new);
     let list_formatted = format!("{:?}", *list.read());
 
     cx.render(rsx!(

docs/guide/examples/input_controlled.rs

@@ -7,7 +7,7 @@ fn main() {
 
 // ANCHOR: component
 fn App(cx: Scope) -> Element {
-    let name = use_state(&cx, || "bob".to_string());
+    let name = use_state(cx, || "bob".to_string());
 
     cx.render(rsx! {
         input {

docs/guide/examples/meme_editor.rs

@@ -1,7 +1,6 @@
 // ANCHOR: all
 #![allow(non_snake_case)]
 
-use dioxus::events::FormEvent;
 use dioxus::prelude::*;
 
 fn main() {
@@ -18,7 +17,7 @@ fn MemeEditor(cx: Scope) -> Element {
         width: fit-content;
     ";
 
-    let caption = use_state(&cx, || "me waiting for my rust code to compile".to_string());
+    let caption = use_state(cx, || "me waiting for my rust code to compile".to_string());
 
     cx.render(rsx! {
         div {

docs/guide/examples/meme_editor_dark_mode.rs

@@ -1,7 +1,6 @@
 // ANCHOR: all
 #![allow(non_snake_case)]
 
-use dioxus::events::FormEvent;
 use dioxus::prelude::*;
 
 fn main() {
@@ -14,10 +13,10 @@ struct DarkMode(bool);
 
 pub fn App(cx: Scope) -> Element {
     // ANCHOR: context_provider
-    use_context_provider(&cx, || DarkMode(false));
+    use_shared_state_provider(cx, || DarkMode(false));
     // ANCHOR_END: context_provider
 
-    let is_dark_mode = use_is_dark_mode(&cx);
+    let is_dark_mode = use_is_dark_mode(cx);
 
     let wrapper_style = if is_dark_mode {
         r"
@@ -37,7 +36,7 @@ pub fn App(cx: Scope) -> Element {
 
 pub fn use_is_dark_mode(cx: &ScopeState) -> bool {
     // ANCHOR: use_context
-    let dark_mode_context = use_context::<DarkMode>(cx);
+    let dark_mode_context = use_shared_state::<DarkMode>(cx);
     // ANCHOR_END: use_context
 
     dark_mode_context
@@ -47,7 +46,7 @@ pub fn use_is_dark_mode(cx: &ScopeState) -> bool {
 
 // ANCHOR: toggle
 pub fn DarkModeToggle(cx: Scope) -> Element {
-    let dark_mode = use_context::<DarkMode>(&cx)?;
+    let dark_mode = use_shared_state::<DarkMode>(cx).unwrap();
 
     let style = if dark_mode.read().0 {
         "color:white"
@@ -71,7 +70,7 @@ pub fn DarkModeToggle(cx: Scope) -> Element {
 
 // ANCHOR: meme_editor
 fn MemeEditor(cx: Scope) -> Element {
-    let is_dark_mode = use_is_dark_mode(&cx);
+    let is_dark_mode = use_is_dark_mode(cx);
     let heading_style = if is_dark_mode { "color: white" } else { "" };
 
     let container_style = r"
@@ -82,7 +81,7 @@ fn MemeEditor(cx: Scope) -> Element {
         width: fit-content;
     ";
 
-    let caption = use_state(&cx, || "me waiting for my rust code to compile".to_string());
+    let caption = use_state(cx, || "me waiting for my rust code to compile".to_string());
 
     cx.render(rsx! {
         div {
@@ -152,7 +151,7 @@ fn CaptionEditor<'a>(
     caption: &'a str,
     on_input: EventHandler<'a, FormEvent>,
 ) -> Element<'a> {
-    let is_dark_mode = use_is_dark_mode(&cx);
+    let is_dark_mode = use_is_dark_mode(cx);
 
     let colors = if is_dark_mode {
         r"

docs/guide/examples/rendering_lists.rs

@@ -14,9 +14,9 @@ struct Comment {
 
 pub fn App(cx: Scope) -> Element {
     // ANCHOR: render_list
-    let comment_field = use_state(&cx, String::new);
-    let mut next_id = use_state(&cx, || 0);
-    let comments = use_ref(&cx, Vec::<Comment>::new);
+    let comment_field = use_state(cx, String::new);
+    let mut next_id = use_state(cx, || 0);
+    let comments = use_ref(cx, Vec::<Comment>::new);
 
     let comments_lock = comments.read();
     let comments_rendered = comments_lock.iter().map(|comment| {

docs/guide/examples/rsx_overview.rs

@@ -103,7 +103,7 @@ pub fn Expression(cx: Scope) -> Element {
     // ANCHOR: expression
     let text = "Dioxus";
     cx.render(rsx!(span {
-        [text.to_uppercase()]
+        text.to_uppercase()
     }))
     // ANCHOR_END: expression
 }

docs/guide/examples/spawn.rs

@@ -8,7 +8,7 @@ fn main() {
 
 fn App(cx: Scope) -> Element {
     // ANCHOR: spawn
-    let logged_in = use_state(&cx, || false);
+    let logged_in = use_state(cx, || false);
 
     let log_in = move |_| {
         cx.spawn({
@@ -58,18 +58,18 @@ pub fn Tokio(cx: Scope) -> Element {
         // ANCHOR_END: tokio
     };
 
-    None
+    cx.render(rsx!(()))
 }
 
 pub fn ToOwnedMacro(cx: Scope) -> Element {
-    let count = use_state(&cx, || 0);
-    let age = use_state(&cx, || 0);
-    let name = use_state(&cx, || 0);
-    let description = use_state(&cx, || 0);
+    let count = use_state(cx, || 0);
+    let age = use_state(cx, || 0);
+    let name = use_state(cx, || 0);
+    let description = use_state(cx, || 0);
 
     let _ = || {
         // ANCHOR: to_owned_macro
-        use dioxus::core::to_owned;
+        use dioxus::hooks::to_owned;
 
         cx.spawn({
             to_owned![count, age, name, description];
@@ -80,5 +80,5 @@ pub fn ToOwnedMacro(cx: Scope) -> Element {
         // ANCHOR_END: to_owned_macro
     };
 
-    None
+    cx.render(rsx!(()))
 }

docs/guide/examples/use_future.rs

@@ -14,7 +14,7 @@ struct ApiResponse {
 
 fn App(cx: Scope) -> Element {
     // ANCHOR: use_future
-    let future = use_future(&cx, (), |_| async move {
+    let future = use_future(cx, (), |_| async move {
         reqwest::get("https://dog.ceo/api/breeds/image/random")
             .await
             .unwrap()
@@ -47,7 +47,7 @@ fn App(cx: Scope) -> Element {
 #[inline_props]
 fn RandomDog(cx: Scope, breed: String) -> Element {
     // ANCHOR: dependency
-    let future = use_future(&cx, (breed,), |(breed,)| async move {
+    let future = use_future(cx, (breed,), |(breed,)| async move {
         reqwest::get(format!("https://dog.ceo/api/breed/{breed}/images/random"))
             .await
             .unwrap()
@@ -56,5 +56,5 @@ fn RandomDog(cx: Scope, breed: String) -> Element {
     });
     // ANCHOR_END: dependency
 
-    None
+    cx.render(rsx!(()))
 }

docs/guide/src/en/__unused/advanced-guides/12-signals.md

@@ -12,7 +12,7 @@ Your component today might look something like this:
 
 ```rust
 fn Comp(cx: Scope) -> 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
 
 ```rust
 fn Comp(cx: Scope) -> 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 {
@@ -49,7 +49,7 @@ We can use signals to generate a two-way binding between data and the input box.
 
 ```rust
 fn Comp(cx: Scope) -> DomTree {
-    let mut title = use_signal(&cx, || String::from("Title"));
+    let mut title = use_signal(cx, || String::from("Title"));
     cx.render(rsx!(input { value: title }))
 }
 ```
@@ -58,8 +58,8 @@ For a slightly more interesting example, this component calculates the sum betwe
 
 ```rust
 fn Calculator(cx: Scope) -> DomTree {
-    let mut a = use_signal(&cx, || 0);
-    let mut b = use_signal(&cx, || 0);
+    let mut a = use_signal(cx, || 0);
+    let mut b = use_signal(cx, || 0);
     let mut c = a + b;
     rsx! {
         input { value: a }
@@ -72,8 +72,8 @@ fn Calculator(cx: Scope) -> DomTree {
 Do you notice how we can use built-in operations on signals? Under the hood, we actually create a new derived signal that depends on `a` and `b`. Whenever `a` or `b` update, then `c` will update. If we need to create a new derived signal that's more complex than a basic operation (`std::ops`) we can either chain signals together or combine them:
 
 ```rust
-let mut a = use_signal(&cx, || 0);
-let mut b = use_signal(&cx, || 0);
+let mut a = use_signal(cx, || 0);
+let mut b = use_signal(cx, || 0);
 
 // Chain signals together using the `with` method
 let c = a.with(b).map(|(a, b)| *a + *b);
@@ -84,7 +84,7 @@ let c = a.with(b).map(|(a, b)| *a + *b);
 If we ever need to get the value out of a signal, we can simply `deref` it.
 
 ```rust
-let mut a = use_signal(&cx, || 0);
+let mut a = use_signal(cx, || 0);
 let c = *a + *b;
 ```
 
@@ -97,7 +97,7 @@ Sometimes you want a signal to propagate across your app, either through far-awa
 ```rust
 const TITLE: Atom<String> = || "".to_string();
 const Provider: Component = |cx|{
-    let title = use_signal(&cx, &TITLE);
+    let title = use_signal(cx, &TITLE);
     render!(input { value: title })
 };
 ```
@@ -106,7 +106,7 @@ If we use the `TITLE` atom in another component, we can cause updates to flow be
 
 ```rust
 const Receiver: Component = |cx|{
-    let title = use_signal(&cx, &TITLE);
+    let title = use_signal(cx, &TITLE);
     log::info!("This will only be called once!");
     rsx!(cx,
         div {
@@ -133,7 +133,7 @@ Dioxus automatically understands how to use your signals when mixed with iterato
 ```rust
 const DICT: AtomFamily<String, String> = |_| {};
 const List: Component = |cx|{
-    let dict = use_signal(&cx, &DICT);
+    let dict = use_signal(cx, &DICT);
     cx.render(rsx!(
         ul {
             For { each: dict, map: |k, v| rsx!( li { "{v}" }) }

docs/guide/src/en/__unused/composing.md

@@ -59,7 +59,7 @@ If we represented the reactive graph presented above in Dioxus, it would look ve
 // Declare a component that holds our datasources and calculates `g`
 fn RenderGraph(cx: Scope) -> Element {
     let seconds = use_datasource(SECONDS);
-    let constant = use_state(&cx, || 1);
+    let constant = use_state(cx, || 1);
 
     cx.render(rsx!(
         RenderG { seconds: seconds }

docs/guide/src/en/__unused/fanout.md

@@ -28,8 +28,8 @@ If we used global state like use_context or fermi, we might be tempted to inject
 
 ```rust
 fn Titlebar(cx: Scope<TitlebarProps>) -> Element {
-    let title = use_read(&cx, TITLE);
-    let subtitle = use_read(&cx, SUBTITLE);
+    let title = use_read(cx, TITLE);
+    let subtitle = use_read(cx, SUBTITLE);
 
     cx.render(rsx!{/* ui */})
 }
@@ -43,11 +43,11 @@ To enable our titlebar component to be used across apps, we want to lift our ato
 
 ```rust
 fn DocsiteTitlesection(cx: Scope) {
-    let title = use_read(&cx, TITLE);
-    let subtitle = use_read(&cx, SUBTITLE);
+    let title = use_read(cx, TITLE);
+    let subtitle = use_read(cx, SUBTITLE);
 
-    let username = use_read(&cx, USERNAME);
-    let points = use_read(&cx, POINTS);
+    let username = use_read(cx, USERNAME);
+    let points = use_read(cx, POINTS);
 
     cx.render(rsx!{
         TitleBar { title: title, subtitle: subtitle }

docs/guide/src/en/__unused/localstate.md

@@ -13,7 +13,7 @@ struct Todo {
     is_editing: bool,
 }
 
-let todos = use_ref(&cx, || vec![Todo::new()]);
+let todos = use_ref(cx, || vec![Todo::new()]);
 
 cx.render(rsx!{
     ul {
@@ -40,7 +40,7 @@ Instead, let's refactor our Todo component to handle its own state:
 ```rust
 #[inline_props]
 fn Todo<'a>(cx: Scope, todo: &'a Todo) -> Element {
-    let is_hovered = use_state(&cx, || false);
+    let is_hovered = use_state(cx, || false);
 
     cx.render(rsx!{
         li {
@@ -80,15 +80,15 @@ struct State {
 }
 
 // in the component
-let state = use_ref(&cx, State::new)
+let state = use_ref(cx, State::new)
 ```
 
 The "better" approach for this particular component would be to break the state apart into different values:
 
 ```rust
-let count = use_state(&cx, || 0);
-let color = use_state(&cx, || "red");
-let names = use_state(&cx, HashMap::new);
+let count = use_state(cx, || 0);
+let color = use_state(cx, || "red");
+let names = use_state(cx, HashMap::new);
 ```
 
 You might recognize that our "names" value is a HashMap – which is not terribly cheap to clone every time we update its value. To solve this issue, we *highly* suggest using a library like [`im`](https://crates.io/crates/im) which will take advantage of structural sharing to make clones and mutations much cheaper.
@@ -96,7 +96,7 @@ You might recognize that our "names" value is a HashMap – which is not terribl
 When combined with the `make_mut` method on `use_state`, you can get really succinct updates to collections:
 
 ```rust
-let todos = use_state(&cx, im_rc::HashMap::default);
+let todos = use_state(cx, im_rc::HashMap::default);
 
 todos.make_mut().insert("new todo", Todo {
     contents: "go get groceries",

docs/guide/src/en/__unused/memoization.md

@@ -8,8 +8,8 @@ For example, let's say we have a component that has two children:
 ```rust
 fn Demo(cx: Scope) -> Element {
     // don't worry about these 2, we'll cover them later
-    let name = use_state(&cx, || String::from("bob"));
-    let age = use_state(&cx, || 21);
+    let name = use_state(cx, || String::from("bob"));
+    let age = use_state(cx, || 21);
 
     cx.render(rsx!{
         Name { name: name }

docs/guide/src/en/__unused/model_pattern.md

@@ -20,7 +20,7 @@ Our component is really simple – we just call `use_ref` to get an initial calc
 
 ```rust
 fn app(cx: Scope) -> Element {
-    let state = use_ref(&cx, Calculator::new);
+    let state = use_ref(cx, Calculator::new);
 
     cx.render(rsx!{
         // the rendering code

docs/guide/src/en/async/use_coroutine.md

@@ -10,7 +10,7 @@ The basic setup for coroutines is the `use_coroutine` hook. Most coroutines we w
 
 ```rust
 fn app(cx: Scope) -> Element {
-    let ws: &UseCoroutine<()> = use_coroutine(&cx, |rx| async move {
+    let ws: &UseCoroutine<()> = use_coroutine(cx, |rx| async move {
         // Connect to some sort of service
         let mut conn = connect_to_ws_server().await;
 
@@ -27,7 +27,7 @@ For many services, a simple async loop will handle the majority of use cases.
 However, if we want to temporarily disable the coroutine, we can "pause" it using the `pause` method, and "resume" it using the `resume` method:
 
 ```rust
-let sync: &UseCoroutine<()> = use_coroutine(&cx, |rx| async move {
+let sync: &UseCoroutine<()> = use_coroutine(cx, |rx| async move {
     // code for syncing
 });
 
@@ -63,7 +63,7 @@ enum ProfileUpdate {
     SetAge(i32)
 }
 
-let profile = use_coroutine(&cx, |mut rx: UnboundedReciver<ProfileUpdate>| async move {
+let profile = use_coroutine(cx, |mut rx: UnboundedReciver<ProfileUpdate>| async move {
     let mut server = connect_to_server().await;
 
     while let Ok(msg) = rx.next().await {
@@ -86,9 +86,9 @@ cx.render(rsx!{
 For sufficiently complex apps, we could build a bunch of different useful "services" that loop on channels to update the app.
 
 ```rust
-let profile = use_coroutine(&cx, profile_service);
-let editor = use_coroutine(&cx, editor_service);
-let sync = use_coroutine(&cx, sync_service);
+let profile = use_coroutine(cx, profile_service);
+let editor = use_coroutine(cx, editor_service);
+let sync = use_coroutine(cx, sync_service);
 
 async fn profile_service(rx: UnboundedReceiver<ProfileCommand>) {
     // do stuff
@@ -109,9 +109,9 @@ We can combine coroutines with Fermi to emulate Redux Toolkit's Thunk system wit
 static USERNAME: Atom<String> = |_| "default".to_string();
 
 fn app(cx: Scope) -> Element {
-    let atoms = use_atom_root(&cx);
+    let atoms = use_atom_root(cx);
 
-    use_coroutine(&cx, |rx| sync_service(rx, atoms.clone()));
+    use_coroutine(cx, |rx| sync_service(rx, atoms.clone()));
 
     cx.render(rsx!{
         Banner {}
@@ -119,7 +119,7 @@ fn app(cx: Scope) -> Element {
 }
 
 fn Banner(cx: Scope) -> Element {
-    let username = use_read(&cx, USERNAME);
+    let username = use_read(cx, USERNAME);
 
     cx.render(rsx!{
         h1 { "Welcome back, {username}" }
@@ -158,8 +158,8 @@ To yield values from a coroutine, simply bring in a `UseState` handle and set th
 
 
 ```rust
-let sync_status = use_state(&cx, || Status::Launching);
-let sync_task = use_coroutine(&cx, |rx: UnboundedReceiver<SyncAction>| {
+let sync_status = use_state(cx, || Status::Launching);
+let sync_task = use_coroutine(cx, |rx: UnboundedReceiver<SyncAction>| {
     to_owned![sync_status];
     async move {
         loop {
@@ -176,7 +176,7 @@ Coroutine handles are automatically injected through the context API. `use_corou
 
 ```rust
 fn Child(cx: Scope) -> Element {
-    let sync_task = use_coroutine_handle::<SyncAction>(&cx);
+    let sync_task = use_coroutine_handle::<SyncAction>(cx);
 
     sync_task.send(SyncAction::SetUsername);
 }

docs/guide/src/en/best_practices/error_handling.md

@@ -56,7 +56,7 @@ The next "best" way of handling errors in Dioxus is to match on the error locall
 To do this, we simply have an error state built into our component:
 
 ```rust
-let err = use_state(&cx, || None);
+let err = use_state(cx, || None);
 ```
 
 Whenever we perform an action that generates an error, we'll set that error state. We can then match on the error in a number of ways (early return, return Element, etc).
@@ -64,7 +64,7 @@ Whenever we perform an action that generates an error, we'll set that error stat
 
 ```rust
 fn Commandline(cx: Scope) -> Element {
-    let error = use_state(&cx, || None);
+    let error = use_state(cx, || None);
 
     cx.render(match *error {
         Some(error) => rsx!(
@@ -85,7 +85,7 @@ If you're dealing with a handful of components with minimal nesting, you can jus
 
 ```rust
 fn Commandline(cx: Scope) -> Element {
-    let error = use_state(&cx, || None);
+    let error = use_state(cx, || None);
 
     if let Some(error) = **error {
         return cx.render(rsx!{ "An error occured" });
@@ -125,7 +125,7 @@ Then, in our top level component, we want to explicitly handle the possible erro
 
 ```rust
 fn TopLevel(cx: Scope) -> Element {
-    let error = use_read(&cx, INPUT_ERROR);
+    let error = use_read(cx, INPUT_ERROR);
 
     match error {
         TooLong => return cx.render(rsx!{ "FAILED: Too long!" }),
@@ -139,7 +139,7 @@ Now, whenever a downstream component has an error in its actions, it can simply
 
 ```rust
 fn Commandline(cx: Scope) -> Element {
-    let set_error = use_set(&cx, INPUT_ERROR);
+    let set_error = use_set(cx, INPUT_ERROR);
 
     cx.render(rsx!{
         input {

docs/guide/src/en/best_practices/index.md

@@ -12,18 +12,3 @@ While it is possible to share state between components, this should only be done
 
 - Keep state local to a component if possible
 - When sharing state through props, only pass down the specific data necessary
-
-## Reusable Libraries
-
-When publishing a library designed to work with Dioxus, we highly advise using only the core feature on the `dioxus` crate. This makes your crate compile faster, makes it more stable, and avoids bringing in incompatible libraries that might make it not compile on unsupported platforms.
-
-
-❌ Don't include unnecessary dependencies in libraries:
-```toml
-dioxus = { version = "...", features = ["web", "desktop", "full"]}
-```
-
-✅ Only add the features you need:
-```toml
-dioxus = { version = "...", features = "core"}
-```

docs/guide/src/en/getting_started/desktop.md

@@ -25,19 +25,13 @@ cargo new --bin demo
 cd demo
 ```
 
-Add Dioxus with the `desktop` feature (this will edit `Cargo.toml`):
+Add Dioxus and the `desktop` renderer (this will edit `Cargo.toml`):
 
 ```shell
-cargo add dioxus --features desktop
+cargo add dioxus
+cargo add dioxus-desktop
 ```
 
-> If your system does not provide the `libappindicator3` library, like Debian/bullseye, you can enable the replacement `ayatana` with an additional flag:
->
->```shell
-># On Debian/bullseye use:
->cargo add dioxus --features desktop --features ayatana
->```
-
 Edit your `main.rs`:
 
 ```rust

docs/guide/src/en/getting_started/hot_reload.md

@@ -8,7 +8,7 @@
 Install [dioxus-cli](https://github.com/DioxusLabs/cli).
 Enable the hot-reload feature on dioxus:
 ```toml
-dioxus = { version = "*", features = ["web", "hot-reload"] }
+dioxus = { version = "*", features = ["hot-reload"] }
 ```
 
 # Usage

docs/guide/src/en/getting_started/mobile.md

@@ -5,12 +5,13 @@ Build a mobile app with Dioxus!
 Example: [Todo App](https://github.com/DioxusLabs/example-projects/blob/master/ios_demo)
 
 ## Support
-Mobile is currently the least-supported renderer target for Dioxus. Mobile apps are rendered with the platform's WebView, meaning that animations, transparency, and native widgets are not currently achievable.
+Mobile is currently the least-supported renderer target for Dioxus. Mobile apps are rendered with either the platform's WebView or experimentally through WGPU. WebView doesn't support animations, transparency, and native widgets.
 
-In addition, iOS is the only supported Mobile Platform. It is possible to get Dioxus running on Android and rendered with WebView, but the Rust windowing library that Dioxus uses – tao – does not currently support Android.
 
 Mobile support is currently best suited for CRUD-style apps, ideally for internal teams who need to develop quickly but don't care much about animations or native widgets.
 
+This guide is primarily targetted for iOS apps, however, you can follow it while using the `android` guide in `cargo-mobile`.
+
 ## Getting Set up
 
 Getting set up with mobile can be quite challenging. The tooling here isn't great (yet) and might take some hacking around to get things working. macOS M1 is broadly unexplored and might not work for you.
@@ -51,7 +52,8 @@ path = "gen/bin/desktop.rs"
 # clear all the dependencies
 [dependencies]
 mobile-entry-point = "0.1.0"
-dioxus = { version = "*", features = ["mobile"] }
+dioxus = { version = "*"}
+dioxus-desktop = { version = "*" }
 simple_logger = "*"
 ```
 
@@ -61,7 +63,7 @@ Edit your `lib.rs`:
 use dioxus::prelude::*;
 
 fn main() {
-    dioxus_mobile::launch(app);
+    dioxus_desktop::launch(app);
 }
 
 fn app(cx: Scope) -> Element {

docs/guide/src/en/getting_started/ssr.md

@@ -36,10 +36,11 @@ cargo new --bin demo
 cd app
 ```
 
-Add Dioxus with the `ssr` feature:
+Add Dioxus and the `ssr` renderer feature:
 
 ```shell
-cargo add dioxus --features ssr
+cargo add dioxus
+cargo add dioxus-ssr
 ```
 
 Next, add all the Axum dependencies. This will be different if you're using a different Web Framework
@@ -54,7 +55,8 @@ Your dependencies should look roughly like this:
 ```toml
 [dependencies]
 axum = "0.4.5"
-dioxus = { version = "*", features = ["ssr"] }
+dioxus = { version = "*" }
+dioxus-ssr = { version = "*" }
 tokio = { version = "1.15.0", features = ["full"] }
 ```
 

docs/guide/src/en/getting_started/tui.md

@@ -13,12 +13,13 @@ TUI support is currently quite experimental. Even the project name will change.
 ## Getting Set up
 
 
-Start by making a new package and adding our TUI feature.
+Start by making a new package and adding our TUI renderer.
 
 ```shell
 cargo new --bin demo
 cd demo
-cargo add dioxus --features tui
+cargo add dioxus
+cargo add dioxus-tui
 ```
 
 Then, edit your `main.rs` with the basic template.
@@ -42,5 +43,6 @@ Press "ctrl-c" to close the app. To switch from "ctrl-c" to  just "q" to quit yo
 ## Notes
 
 - Our TUI package uses flexbox for layout
+- Regular widgets will not work in the tui render, but the tui renderer has it's own widget components (see [the widgets example](https://github.com/DioxusLabs/dioxus/blob/master/packages/tui/examples/tui_widgets.rs)).
 - 1px is one character lineheight. Your regular CSS px does not translate.
 - If your app panics, your terminal is wrecked. This will be fixed eventually.

docs/guide/src/en/getting_started/web.md

@@ -38,10 +38,11 @@ cargo new --bin demo
 cd demo
 ```
 
-Add Dioxus as a dependency with the `web` feature:
+Add Dioxus as a dependency and add the web renderer:
 
 ```bash
-cargo add dioxus --features web
+cargo add dioxus
+cargo add dioxus-web
 ```
 
 Add an `index.html` for Trunk to use. Make sure your "mount point" element has an ID of "main":

docs/guide/src/en/index.md

@@ -6,7 +6,7 @@ Dioxus is a portable, performant, and ergonomic framework for building cross-pla
 
 ```rust
 fn app(cx: Scope) -> Element {
-    let mut count = use_state(&cx, || 0);
+    let mut count = use_state(cx, || 0);
 
     cx.render(rsx!(
         h1 { "High-Five counter: {count}" }
@@ -48,4 +48,4 @@ Web: Since the web is a fairly mature platform, we expect there to be very littl
 
 Desktop: APIs will likely be in flux as we figure out better patterns than our ElectronJS counterpart.
 
-SSR: We don't expect the SSR API to change drastically in the future.
+SSR: We don't expect the SSR API to change drastically in the future.

docs/guide/src/en/interactivity/router.md

@@ -19,7 +19,8 @@ This is where the router crates come in handy. To make sure we're using the rout
 
 ```toml
 [dependencies]
-dioxus = { version = "0.2", features = ["desktop", "router"] }
+dioxus = { version = "*" }
+dioxus-router = { version = "*" }
 ```
 
 

docs/guide/src/en/roadmap.md

@@ -50,7 +50,7 @@ Generally, here's the status of each platform:
 | 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             |
+| 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                                  |
@@ -66,7 +66,7 @@ These Features are planned for the future of Dioxus:
 ### Core
 - [x] Release of Dioxus Core
 - [x] Upgrade documentation to include more theory and be more comprehensive
-- [ ] Support for HTML-side templates for lightning-fast dom manipulation
+- [x] Support for HTML-side templates for lightning-fast dom manipulation
 - [ ] Support for multiple renderers for same virtualdom (subtrees)
 - [ ] Support for ThreadSafe (Send + Sync)
 - [ ] Support for Portals

docs/guide/src/pt-br/async/use_coroutine.md

@@ -10,7 +10,7 @@ A configuração básica para corrotinas é o _hook_ `use_coroutine`. A maioria
 
 ```rust
 fn app(cx: Scope) -> Element {
-    let ws: &UseCoroutine<()> = use_coroutine(&cx, |rx| async move {
+    let ws: &UseCoroutine<()> = use_coroutine(cx, |rx| async move {
         // Connect to some sort of service
         let mut conn = connect_to_ws_server().await;
 
@@ -27,7 +27,7 @@ Para muitos serviços, um _loop_ assíncrono simples lidará com a maioria dos c
 No entanto, se quisermos desabilitar temporariamente a corrotina, podemos "pausá-la" usando o método `pause` e "retomá-la" usando o método `resume`:
 
 ```rust
-let sync: &UseCoroutine<()> = use_coroutine(&cx, |rx| async move {
+let sync: &UseCoroutine<()> = use_coroutine(cx, |rx| async move {
     // code for syncing
 });
 
@@ -62,7 +62,7 @@ enum ProfileUpdate {
     SetAge(i32)
 }
 
-let profile = use_coroutine(&cx, |mut rx: UnboundedReciver<ProfileUpdate>| async move {
+let profile = use_coroutine(cx, |mut rx: UnboundedReciver<ProfileUpdate>| async move {
     let mut server = connect_to_server().await;
 
     while let Ok(msg) = rx.next().await {
@@ -85,9 +85,9 @@ cx.render(rsx!{
 Para aplicativos suficientemente complexos, poderíamos criar vários "serviços" úteis diferentes que fazem um _loop_ nos canais para atualizar o aplicativo.
 
 ```rust
-let profile = use_coroutine(&cx, profile_service);
-let editor = use_coroutine(&cx, editor_service);
-let sync = use_coroutine(&cx, sync_service);
+let profile = use_coroutine(cx, profile_service);
+let editor = use_coroutine(cx, editor_service);
+let sync = use_coroutine(cx, sync_service);
 
 async fn profile_service(rx: UnboundedReceiver<ProfileCommand>) {
     // do stuff
@@ -108,9 +108,9 @@ Podemos combinar corrotinas com `Fermi` para emular o sistema `Thunk` do **Redux
 static USERNAME: Atom<String> = |_| "default".to_string();
 
 fn app(cx: Scope) -> Element {
-    let atoms = use_atom_root(&cx);
+    let atoms = use_atom_root(cx);
 
-    use_coroutine(&cx, |rx| sync_service(rx, atoms.clone()));
+    use_coroutine(cx, |rx| sync_service(rx, atoms.clone()));
 
     cx.render(rsx!{
         Banner {}
@@ -118,7 +118,7 @@ fn app(cx: Scope) -> Element {
 }
 
 fn Banner(cx: Scope) -> Element {
-    let username = use_read(&cx, USERNAME);
+    let username = use_read(cx, USERNAME);
 
     cx.render(rsx!{
         h1 { "Welcome back, {username}" }
@@ -156,8 +156,8 @@ async fn sync_service(mut rx: UnboundedReceiver<SyncAction>, atoms: AtomRoot) {
 Para obter valores de uma corrotina, basta usar um identificador `UseState` e definir o valor sempre que sua corrotina concluir seu trabalho.
 
 ```rust
-let sync_status = use_state(&cx, || Status::Launching);
-let sync_task = use_coroutine(&cx, |rx: UnboundedReceiver<SyncAction>| {
+let sync_status = use_state(cx, || Status::Launching);
+let sync_task = use_coroutine(cx, |rx: UnboundedReceiver<SyncAction>| {
     to_owned![sync_status];
     async move {
         loop {
@@ -174,7 +174,7 @@ Os identificadores de corrotina são injetados automaticamente por meio da API d
 
 ```rust
 fn Child(cx: Scope) -> Element {
-    let sync_task = use_coroutine_handle::<SyncAction>(&cx);
+    let sync_task = use_coroutine_handle::<SyncAction>(cx);
 
     sync_task.send(SyncAction::SetUsername);
 }

docs/guide/src/pt-br/best_practices/error_handling.md

@@ -53,14 +53,14 @@ A próxima "melhor" maneira de lidar com erros no Dioxus é combinar (`match`) o
 Para fazer isso, simplesmente temos um estado de erro embutido em nosso componente:
 
 ```rust
-let err = use_state(&cx, || None);
+let err = use_state(cx, || None);
 ```
 
 Sempre que realizarmos uma ação que gere um erro, definiremos esse estado de erro. Podemos então combinar o erro de várias maneiras (retorno antecipado, elemento de retorno etc.).
 
 ```rust
 fn Commandline(cx: Scope) -> Element {
-    let error = use_state(&cx, || None);
+    let error = use_state(cx, || None);
 
     cx.render(match *error {
         Some(error) => rsx!(
@@ -81,7 +81,7 @@ Se você estiver lidando com alguns componentes com um mínimo de aninhamento, b
 
 ```rust
 fn Commandline(cx: Scope) -> Element {
-    let error = use_state(&cx, || None);
+    let error = use_state(cx, || None);
 
     if let Some(error) = **error {
         return cx.render(rsx!{ "An error occured" });
@@ -120,7 +120,7 @@ Então, em nosso componente de nível superior, queremos tratar explicitamente o
 
 ```rust
 fn TopLevel(cx: Scope) -> Element {
-    let error = use_read(&cx, INPUT_ERROR);
+    let error = use_read(cx, INPUT_ERROR);
 
     match error {
         TooLong => return cx.render(rsx!{ "FAILED: Too long!" }),
@@ -134,7 +134,7 @@ Agora, sempre que um componente _downstream_ tiver um erro em suas ações, ele
 
 ```rust
 fn Commandline(cx: Scope) -> Element {
-    let set_error = use_set(&cx, INPUT_ERROR);
+    let set_error = use_set(cx, INPUT_ERROR);
 
     cx.render(rsx!{
         input {

docs/guide/src/pt-br/best_practices/index.md

@@ -12,19 +12,3 @@ Embora seja possível compartilhar o estado entre os componentes, isso só deve
 
 - Mantenha o estado local para um componente, se possível
 - Ao compartilhar o estado por meio de adereços, passe apenas os dados específicos necessários
-
-## Bibliotecas Reutilizáveis
-
-Ao publicar uma biblioteca projetada para funcionar com o Dioxus, é altamente recomendável usar apenas o recurso principal na `crate` `dioxus`. Isso faz com que sua `crate` seja compilada mais rapidamente, mais estável e evita a inclusão de bibliotecas incompatíveis que podem fazer com que ela não seja compilada em plataformas não suportadas.
-
-❌ Não inclua dependências desnecessárias nas bibliotecas:
-
-```toml
-dioxus = { version = "...", features = ["web", "desktop", "full"]}
-```
-
-✅ Adicione apenas os recursos que você precisa:
-
-```toml
-dioxus = { version = "...", features = "core"}
-```

docs/guide/src/pt-br/getting_started/desktop.md

@@ -29,16 +29,10 @@ cd demo
 Adicione o Dioxus com o recurso `desktop` (isso irá editar o `Cargo.toml`):
 
 ```shell
-cargo add dioxus --features desktop
+cargo add dioxus
+cargo add dioxus-desktop
 ```
 
-> Se seu sistema não fornece a biblioteca `libappindicator3`, como Debian/bullseye, você pode habilitar a substituta `ayatana` com um _flag_ adicional:
->
-> ```shell
-> # On Debian/bullseye use:
-> cargo add dioxus --features desktop --features ayatana
-> ```
-
 Edite seu `main.rs`:
 
 ```rust

docs/guide/src/pt-br/getting_started/hot_reload.md

@@ -10,7 +10,7 @@ Instale o [dioxus-cli](https://github.com/DioxusLabs/cli).
 Habilite o recurso de _hot-reload_ no dioxus:
 
 ```toml
-dioxus = { version = "*", features = ["web", "hot-reload"] }
+dioxus = { version = "*", features = ["hot-reload"] }
 ```
 
 # Usage

docs/guide/src/pt-br/getting_started/mobile.md

@@ -52,7 +52,8 @@ path = "gen/bin/desktop.rs"
 # clear all the dependencies
 [dependencies]
 mobile-entry-point = "0.1.0"
-dioxus = { version = "*", features = ["mobile"] }
+dioxus = { version = "*" }
+dioxus-desktop = { version = "*" }
 simple_logger = "*"
 ```
 
@@ -62,7 +63,7 @@ Edite seu `lib.rs`:
 use dioxus::prelude::*;
 
 fn main() {
-    dioxus::mobile::launch(app);
+    dioxus_desktop::launch(app);
 }
 
 fn app(cx: Scope) -> Element {

docs/guide/src/pt-br/getting_started/ssr.md

@@ -38,7 +38,8 @@ cd app
 Adicione o Dioxus com o recurso `ssr`:
 
 ```shell
-cargo add dioxus --features ssr
+cargo add dioxus
+cargo add dioxus-ssr
 ```
 
 Em seguida, adicione todas as dependências do Axum. Isso será diferente se você estiver usando um Web Framework diferente
@@ -53,7 +54,8 @@ Suas dependências devem ficar mais ou menos assim:
 ```toml
 [dependencies]
 axum = "0.4.5"
-dioxus = { version = "*", features = ["ssr"] }
+dioxus = { version = "*" }
+dioxus-ssr = { version = "*" }
 tokio = { version = "1.15.0", features = ["full"] }
 ```
 
@@ -83,7 +85,7 @@ E, em seguida, adicione nosso _endpoint_. Podemos renderizar `rsx!` diretamente:
 
 ```rust
 async fn app_endpoint() -> Html<String> {
-    Html(dioxus::ssr::render_lazy(rsx! {
+    Html(dioxus_ssr::render_lazy(rsx! {
             h1 { "hello world!" }
     }))
 }
@@ -99,7 +101,7 @@ async fn app_endpoint() -> Html<String> {
     let mut app = VirtualDom::new(app);
     let _ = app.rebuild();
 
-    Html(dioxus::ssr::render_vdom(&app))
+    Html(dioxus_ssr::render_vdom(&app))
 }
 ```
 

docs/guide/src/pt-br/getting_started/tui.md

@@ -17,7 +17,8 @@ Comece criando um novo pacote e adicionando nosso recurso TUI.
 ```shell
 cargo new --bin demo
 cd demo
-cargo add dioxus --features tui
+cargo add dioxus
+cargo add dioxus-tui
 ```
 
 Em seguida, edite seu `main.rs` com o modelo básico.

docs/guide/src/pt-br/getting_started/web.md

@@ -43,7 +43,8 @@ cd demo
 Adicione o Dioxus como uma dependência com o recurso `web`:
 
 ```bash
-cargo add dioxus --features web
+cargo add dioxus
+cargo add dioxus-web
 ```
 
 Adicione um `index.html` para o `Trunk` usar. Certifique-se de que seu elemento "mount point" tenha um ID de "main":

docs/guide/src/pt-br/index.md

@@ -6,7 +6,7 @@ Dioxus é uma estrutura portátil, de alto desempenho e ergonômica para a const
 
 ```rust
 fn app(cx: Scope) -> Element {
-    let mut count = use_state(&cx, || 0);
+    let mut count = use_state(cx, || 0);
 
     cx.render(rsx!(
         h1 { "High-Five counter: {count}" }

docs/guide/src/pt-br/interactivity/router.md

@@ -18,7 +18,8 @@ Cada uma dessas cenas é independente – não queremos renderizar a página ini
 
 ```toml
 [dependencies]
-dioxus = { version = "0.2", features = ["desktop", "router"] }
+dioxus = { version = "*" }
+dioxus-router = { version = "*" }
 ```
 
 ## Usando o Roteador

docs/posts/release-0-2-0.md

@@ -27,7 +27,7 @@ Dioxus is a recently-released library for building interactive user interfaces (
 
 ```rust
 fn app(cx: Scope) -> Element {
-    let mut count = use_state(&cx, || 0);
+    let mut count = use_state(cx, || 0);
 
     cx.render(rsx! {
         h1 { "Count: {count}" }
@@ -102,8 +102,8 @@ We're also using hooks to parse the URL parameters and segments so you can inter
 struct Query { name: String }
 
 fn BlogPost(cx: Scope) -> Element {
-    let post = use_route(&cx).segment("post")?;
-    let query = use_route(&cx).query::<Query>()?;
+    let post = use_route(cx).segment("post")?;
+    let query = use_route(cx).query::<Query>()?;
 
     cx.render(rsx!{
         "Viewing post {post}"
@@ -128,7 +128,7 @@ static TITLE: Atom<&str> = |_| "Hello";
 
 // Read the value from anywhere in the app, subscribing to any changes
 fn app(cx: Scope) -> Element {
-    let title = use_read(&cx, TITLE);
+    let title = use_read(cx, TITLE);
     cx.render(rsx!{
         h1 { "{title}" }
         Child {}
@@ -137,7 +137,7 @@ fn app(cx: Scope) -> Element {
 
 // Set the value from anywhere in the app
 fn Child(cx: Scope) -> Element {
-    let set_title = use_set(&cx, TITLE);
+    let set_title = use_set(cx, TITLE);
     cx.render(rsx!{
         button {
             onclick: move |_| set_title("goodbye"),
@@ -245,7 +245,7 @@ First, we upgraded the `use_future` hook. It now supports dependencies, which le
 
 ```rust
 fn RenderDog(cx: Scope, breed: String) -> Element {
-    let dog_request = use_future(&cx, (breed,), |(breed,)| async move {
+    let dog_request = use_future(cx, (breed,), |(breed,)| async move {
         reqwest::get(format!("https://dog.ceo/api/breed/{}/images/random", breed))
             .await
             .unwrap()
@@ -265,7 +265,7 @@ Additionally, we added better support for coroutines. You can now start, stop, r
 
 ```rust
 fn App(cx: Scope) -> Element {
-    let sync_task = use_coroutine(&cx, |rx| async move {
+    let sync_task = use_coroutine(cx, |rx| async move {
         connect_to_server().await;
         let state = MyState::new();
 

docs/posts/release.md

@@ -28,7 +28,7 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let mut count = use_state(&cx, || 0);
+    let mut count = use_state(cx, || 0);
 
     cx.render(rsx! {
         h1 { "Count: {count}" }
@@ -138,7 +138,7 @@ struct CardProps {
 }
 
 static Card: Component<CardProps> = |cx| {
-	let mut count = use_state(&cx, || 0);
+	let mut count = use_state(cx, || 0);
 	cx.render(rsx!(
 		aside {
 			h2 { "{cx.props.title}" }
@@ -191,7 +191,7 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let mut count = use_state(&cx, || 0);
+    let mut count = use_state(cx, || 0);
 
     cx.render(rsx! {
         h1 { "Count: {count}" }
@@ -260,7 +260,7 @@ Dioxus understands the lifetimes of data borrowed from `Scope`, so you can safel
 
 
 ```rust
-let name = use_state(&cx, || "asd");
+let name = use_state(cx, || "asd");
 rsx! {
 	div {
 		button { onclick: move |_| name.set("abc") }
@@ -274,7 +274,7 @@ Because we know the lifetime of your handlers, we can also expose this to childr
 
 ```rust
 fn app(cx: Scope) -> Element {
-	let name = use_state(&cx, || "asd");
+	let name = use_state(cx, || "asd");
 	cx.render(rsx!{
 		Button { name: name }
 	})

docs/router/src/guide/building-a-nest.md

@@ -10,12 +10,12 @@ Let's create a new ``navbar`` component:
 fn navbar(cx: Scope) -> Element {
     cx.render(rsx! {
         ul {
-            
+
         }
     })
 }
 ```
-Our navbar will be a list of links going between our pages. We could always use an HTML anchor element but that would cause our page to unnecessarily reload. Instead we want to use the ``Link`` component provided by Dioxus Router. 
+Our navbar will be a list of links going between our pages. We could always use an HTML anchor element but that would cause our page to unnecessarily reload. Instead we want to use the ``Link`` component provided by Dioxus Router.
 
 The Link component is very similar to the Route component. It takes a path and an element. Add the Link component into your use statement and then add some links:
 ```rs
@@ -38,7 +38,7 @@ fn navbar(cx: Scope) -> Element {
 }
 ```
 >By default, the Link component only works for links within your application. To link to external sites, add the ``external: true`` property.
->```rs 
+>```rs
 >Link { to: "https://github.com", external: true, "GitHub"}
 >```
 
@@ -66,7 +66,7 @@ We want to store our blogs in a database and load them as needed. This'll help p
 We could utilize a search page that loads a blog when clicked but then our users won't be able to share our blogs easily. This is where URL parameters come in. And finally, we also want our site to tell users they are on a blog page whenever the URL starts with``/blog``.
 
 The path to our blog will look like ``/blog/myBlogPage``. ``myBlogPage`` being the URL parameter.
-Dioxus Router uses the ``:name`` pattern so our route will look like ``/blog/:post``.  
+Dioxus Router uses the ``:name`` pattern so our route will look like ``/blog/:post``.
 
 First, lets tell users when they are on a blog page. Add a new route in your app component.
 ```rs
@@ -77,7 +77,7 @@ fn app(cx: Scope) -> Element {
             self::navbar {}
             Route { to: "/", self::homepage {}}
             // NEW
-            Route { 
+            Route {
                 to: "/blog",
             }
             Route { to: "", self::page_not_found {}}
@@ -93,7 +93,7 @@ fn app(cx: Scope) -> Element {
             p { "-- Dioxus Blog --" }
             self::navbar {}
             Route { to: "/", self::homepage {}}
-            Route { 
+            Route {
                 to: "/blog",
                 Route { to: "/:post", "This is my blog post!" } // NEW
             }
@@ -109,7 +109,7 @@ fn app(cx: Scope) -> Element {
         Router {
             self::navbar {}
             Route { to: "/", self::homepage {}}
-            Route { 
+            Route {
                 to: "/blog",
                 p { "-- Dioxus Blog --" } // MOVED
                 Route { to: "/:post", "This is my blog post!" }
@@ -119,7 +119,7 @@ fn app(cx: Scope) -> Element {
     })
 }
 ```
-Now our ``-- Dioxus Blog --`` text will be displayed whenever a user is on a path that starts with ``/blog``. Displaying content in a way that is page-agnostic is useful when building navigation menus, footers, and similar. 
+Now our ``-- Dioxus Blog --`` text will be displayed whenever a user is on a path that starts with ``/blog``. Displaying content in a way that is page-agnostic is useful when building navigation menus, footers, and similar.
 
 All that's left is to handle our URL parameter. We will begin by creating a ``get_blog_post`` function. In a real site, this function would call an API endpoint to get a blog post from the database. However, that is out of the scope of this guide so we will be utilizing static text.
 ```rs
@@ -153,7 +153,7 @@ use dioxus::{
 ...
 
 fn blog_post(cx: Scope) -> Element {
-    let route = use_route(&cx); // NEW
+    let route = use_route(cx); // NEW
     let blog_text = "";
 
     cx.render(rsx! {
@@ -165,7 +165,7 @@ Dioxus Router provides built in methods to extract information from a route. We
 The ``segment`` method also parses the parameter into any type for us. We'll use a match expression that handles a parsing error and on success, uses our helper function to grab the blog post.
 ```rs
 fn blog_post(cx: Scope) -> Element {
-    let route = use_route(&cx);
+    let route = use_route(cx);
 
     // NEW
     let blog_text = match route.segment::<String>("post").unwrap() {
@@ -198,4 +198,4 @@ fn app(cx: Scope) -> Element {
 That's it! If you head to ``/blog/foo`` you should see ``Welcome to the foo blog post!``.
 
 ### Conclusion
-In this chapter we utilized Dioxus Router's Link, URL Parameter, and ``use_route`` functionality to build the blog portion of our application. In the next and final chapter, we will go over the ``Redirect`` component to redirect non-authorized users to another page.
+In this chapter we utilized Dioxus Router's Link, URL Parameter, and ``use_route`` functionality to build the blog portion of our application. In the next and final chapter, we will go over the ``Redirect`` component to redirect non-authorized users to another page.

examples/README.md

@@ -134,31 +134,33 @@ cargo run --example hello_world
 
 ## Terminal UI
 
-[tui_border](./tui_border.rs)
+[tui_all_events](../packages/tui/examples/tui_all_events.rs) - All of the terminal events
 
-[tui_buttons](./tui_buttons.rs)
+[tui_border](../packages/tui/examples/tui_border.rs) - Different styles of borders and corners
 
-[tui_color_test](./tui_color_test.rs)
+[tui_buttons](../packages/tui/examples/tui_buttons.rs) - A grid of buttons that work demonstrate the focus system
 
-[tui_components](./tui_components.rs)
+[tui_color_test](../packages/tui/examples/tui_color_test.rs) - Grid of colors to demonstrate compatablility with different terminal color rendering modes
 
-[tui_frame](./tui_frame.rs)
+[tui_colorpicker](../packages/tui/examples/tui_colorpicker.rs) - A colorpicker
 
-[tui_hover](./tui_hover.rs)
+[tui_components](../packages/tui/examples/tui_components.rs) - Simple component example
 
-[tui_keys](./tui_keys.rs)
+[tui_flex](../packages/tui/examples/tui_flex.rs) - Flexbox support
 
-[tui_list](./tui_list.rs)
+[tui_hover](../packages/tui/examples/tui_hover.rs) - Detect hover and mouse events
 
-[tui_margin](./tui_margin.rs)
+[tui_list](../packages/tui/examples/tui_list.rs) - Renders a list of items
 
-[tui_quadrants](./tui_quadrants.rs)
+[tui_margin](../packages/tui/examples/tui_margin.rs) - Margins around flexboxes
 
-[tui_readme](./tui_readme.rs)
+[tui_quadrants](../packages/tui/examples/tui_quadrants.rs) - Four quadrants
 
-[tui_task](./tui_task.rs)
+[tui_readme](../packages/tui/examples/tui_readme.rs) - The readme example
 
-[tui_text](./tui_text.rs)
+[tui_task](../packages/tui/examples/tui_task.rs) - Background tasks
+
+[tui_text](../packages/tui/examples/tui_text.rs) - Simple text example
 
 # TODO
 Missing Features

examples/all_css.rs

@@ -7,405 +7,407 @@ fn main() {
 fn app(cx: Scope) -> Element {
     cx.render(rsx! {
         div {
-          align_content: "a",
-          align_items: "a",
-          align_self: "a",
-          alignment_adjust: "a",
-          alignment_baseline: "a",
-          all: "a",
-          alt: "a",
-          animation: "a",
-          animation_delay: "a",
-          animation_direction: "a",
-          animation_duration: "a",
-          animation_fill_mode: "a",
-          animation_iteration_count: "a",
-          animation_name: "a",
-          animation_play_state: "a",
-          animation_timing_function: "a",
-          azimuth: "a",
-          backface_visibility: "a",
-          background: "a",
-          background_attachment: "a",
-          background_clip: "a",
-          background_color: "a",
-          background_image: "a",
-          background_origin: "a",
-          background_position: "a",
-          background_repeat: "a",
-          background_size: "a",
-          background_blend_mode: "a",
-          baseline_shift: "a",
-          bleed: "a",
-          bookmark_label: "a",
-          bookmark_level: "a",
-          bookmark_state: "a",
-          border: "a",
-          border_color: "a",
-          border_style: "a",
-          border_width: "a",
-          border_bottom: "a",
-          border_bottom_color: "a",
-          border_bottom_style: "a",
-          border_bottom_width: "a",
-          border_left: "a",
-          border_left_color: "a",
-          border_left_style: "a",
-          border_left_width: "a",
-          border_right: "a",
-          border_right_color: "a",
-          border_right_style: "a",
-          border_right_width: "a",
-          border_top: "a",
-          border_top_color: "a",
-          border_top_style: "a",
-          border_top_width: "a",
-          border_collapse: "a",
-          border_image: "a",
-          border_image_outset: "a",
-          border_image_repeat: "a",
-          border_image_slice: "a",
-          border_image_source: "a",
-          border_image_width: "a",
-          border_radius: "a",
-          border_bottom_left_radius: "a",
-          border_bottom_right_radius: "a",
-          border_top_left_radius: "a",
-          border_top_right_radius: "a",
-          border_spacing: "a",
-          bottom: "a",
-          box_decoration_break: "a",
-          box_shadow: "a",
-          box_sizing: "a",
-          box_snap: "a",
-          break_after: "a",
-          break_before: "a",
-          break_inside: "a",
-          buffered_rendering: "a",
-          caption_side: "a",
-          clear: "a",
-          clear_side: "a",
-          clip: "a",
-          clip_path: "a",
-          clip_rule: "a",
-          color: "a",
-          color_adjust: "a",
-          color_correction: "a",
-          color_interpolation: "a",
-          color_interpolation_filters: "a",
-          color_profile: "a",
-          color_rendering: "a",
-          column_fill: "a",
-          column_gap: "a",
-          column_rule: "a",
-          column_rule_color: "a",
-          column_rule_style: "a",
-          column_rule_width: "a",
-          column_span: "a",
-          columns: "a",
-          column_count: "a",
-          column_width: "a",
-          contain: "a",
-          content: "a",
-          counter_increment: "a",
-          counter_reset: "a",
-          counter_set: "a",
-          cue: "a",
-          cue_after: "a",
-          cue_before: "a",
-          cursor: "a",
-          direction: "a",
-          display: "a",
-          display_inside: "a",
-          display_outside: "a",
-          display_extras: "a",
-          display_box: "a",
-          dominant_baseline: "a",
-          elevation: "a",
-          empty_cells: "a",
-          enable_background: "a",
-          fill: "a",
-          fill_opacity: "a",
-          fill_rule: "a",
-          filter: "a",
-          float: "a",
-          float_defer_column: "a",
-          float_defer_page: "a",
-          float_offset: "a",
-          float_wrap: "a",
-          flow_into: "a",
-          flow_from: "a",
-          flex: "a",
-          flex_basis: "a",
-          flex_grow: "a",
-          flex_shrink: "a",
-          flex_flow: "a",
-          flex_direction: "a",
-          flex_wrap: "a",
-          flood_color: "a",
-          flood_opacity: "a",
-          font: "a",
-          font_family: "a",
-          font_size: "a",
-          font_stretch: "a",
-          font_style: "a",
-          font_weight: "a",
-          font_feature_settings: "a",
-          font_kerning: "a",
-          font_language_override: "a",
-          font_size_adjust: "a",
-          font_synthesis: "a",
-          font_variant: "a",
-          font_variant_alternates: "a",
-          font_variant_caps: "a",
-          font_variant_east_asian: "a",
-          font_variant_ligatures: "a",
-          font_variant_numeric: "a",
-          font_variant_position: "a",
-          footnote_policy: "a",
-          glyph_orientation_horizontal: "a",
-          glyph_orientation_vertical: "a",
-          grid: "a",
-          grid_auto_flow: "a",
-          grid_auto_columns: "a",
-          grid_auto_rows: "a",
-          grid_template: "a",
-          grid_template_areas: "a",
-          grid_template_columns: "a",
-          grid_template_rows: "a",
-          grid_area: "a",
-          grid_column: "a",
-          grid_column_start: "a",
-          grid_column_end: "a",
-          grid_row: "a",
-          grid_row_start: "a",
-          grid_row_end: "a",
-          hanging_punctuation: "a",
-          height: "a",
-          hyphenate_character: "a",
-          hyphenate_limit_chars: "a",
-          hyphenate_limit_last: "a",
-          hyphenate_limit_lines: "a",
-          hyphenate_limit_zone: "a",
-          hyphens: "a",
-          icon: "a",
-          image_orientation: "a",
-          image_resolution: "a",
-          image_rendering: "a",
-          ime: "a",
-          ime_align: "a",
-          ime_mode: "a",
-          ime_offset: "a",
-          ime_width: "a",
-          initial_letters: "a",
-          inline_box_align: "a",
-          isolation: "a",
-          justify_content: "a",
-          justify_items: "a",
-          justify_self: "a",
-          kerning: "a",
-          left: "a",
-          letter_spacing: "a",
-          lighting_color: "a",
-          line_box_contain: "a",
-          line_break: "a",
-          line_grid: "a",
-          line_height: "a",
-          line_slack: "a",
-          line_snap: "a",
-          list_style: "a",
-          list_style_image: "a",
-          list_style_position: "a",
-          list_style_type: "a",
-          margin: "a",
-          margin_bottom: "a",
-          margin_left: "a",
-          margin_right: "a",
-          margin_top: "a",
-          marker: "a",
-          marker_end: "a",
-          marker_mid: "a",
-          marker_pattern: "a",
-          marker_segment: "a",
-          marker_start: "a",
-          marker_knockout_left: "a",
-          marker_knockout_right: "a",
-          marker_side: "a",
-          marks: "a",
-          marquee_direction: "a",
-          marquee_play_count: "a",
-          marquee_speed: "a",
-          marquee_style: "a",
-          mask: "a",
-          mask_image: "a",
-          mask_repeat: "a",
-          mask_position: "a",
-          mask_clip: "a",
-          mask_origin: "a",
-          mask_size: "a",
-          mask_box: "a",
-          mask_box_outset: "a",
-          mask_box_repeat: "a",
-          mask_box_slice: "a",
-          mask_box_source: "a",
-          mask_box_width: "a",
-          mask_type: "a",
-          max_height: "a",
-          max_lines: "a",
-          max_width: "a",
-          min_height: "a",
-          min_width: "a",
-          mix_blend_mode: "a",
-          nav_down: "a",
-          nav_index: "a",
-          nav_left: "a",
-          nav_right: "a",
-          nav_up: "a",
-          object_fit: "a",
-          object_position: "a",
-          offset_after: "a",
-          offset_before: "a",
-          offset_end: "a",
-          offset_start: "a",
-          opacity: "a",
-          order: "a",
-          orphans: "a",
-          outline: "a",
-          outline_color: "a",
-          outline_style: "a",
-          outline_width: "a",
-          outline_offset: "a",
-          overflow: "a",
-          overflow_x: "a",
-          overflow_y: "a",
-          overflow_style: "a",
-          overflow_wrap: "a",
-          padding: "a",
-          padding_bottom: "a",
-          padding_left: "a",
-          padding_right: "a",
-          padding_top: "a",
-          page: "a",
-          page_break_after: "a",
-          page_break_before: "a",
-          page_break_inside: "a",
-          paint_order: "a",
-          pause: "a",
-          pause_after: "a",
-          pause_before: "a",
-          perspective: "a",
-          perspective_origin: "a",
-          pitch: "a",
-          pitch_range: "a",
-          play_during: "a",
-          pointer_events: "a",
-          position: "a",
-          quotes: "a",
-          region_fragment: "a",
-          resize: "a",
-          rest: "a",
-          rest_after: "a",
-          rest_before: "a",
-          richness: "a",
-          right: "a",
-          ruby_align: "a",
-          ruby_merge: "a",
-          ruby_position: "a",
-          scroll_behavior: "a",
-          scroll_snap_coordinate: "a",
-          scroll_snap_destination: "a",
-          scroll_snap_points_x: "a",
-          scroll_snap_points_y: "a",
-          scroll_snap_type: "a",
-          shape_image_threshold: "a",
-          shape_inside: "a",
-          shape_margin: "a",
-          shape_outside: "a",
-          shape_padding: "a",
-          shape_rendering: "a",
-          size: "a",
-          speak: "a",
-          speak_as: "a",
-          speak_header: "a",
-          speak_numeral: "a",
-          speak_punctuation: "a",
-          speech_rate: "a",
-          stop_color: "a",
-          stop_opacity: "a",
-          stress: "a",
-          string_set: "a",
-          stroke: "a",
-          stroke_dasharray: "a",
-          stroke_dashoffset: "a",
-          stroke_linecap: "a",
-          stroke_linejoin: "a",
-          stroke_miterlimit: "a",
-          stroke_opacity: "a",
-          stroke_width: "a",
-          tab_size: "a",
-          table_layout: "a",
-          text_align: "a",
-          text_align_all: "a",
-          text_align_last: "a",
-          text_anchor: "a",
-          text_combine_upright: "a",
-          text_decoration: "a",
-          text_decoration_color: "a",
-          text_decoration_line: "a",
-          text_decoration_style: "a",
-          text_decoration_skip: "a",
-          text_emphasis: "a",
-          text_emphasis_color: "a",
-          text_emphasis_style: "a",
-          text_emphasis_position: "a",
-          text_emphasis_skip: "a",
-          text_height: "a",
-          text_indent: "a",
-          text_justify: "a",
-          text_orientation: "a",
-          text_overflow: "a",
-          text_rendering: "a",
-          text_shadow: "a",
-          text_size_adjust: "a",
-          text_space_collapse: "a",
-          text_spacing: "a",
-          text_transform: "a",
-          text_underline_position: "a",
-          text_wrap: "a",
-          top: "a",
-          touch_action: "a",
-          transform: "a",
-          transform_box: "a",
-          transform_origin: "a",
-          transform_style: "a",
-          transition: "a",
-          transition_delay: "a",
-          transition_duration: "a",
-          transition_property: "a",
-          unicode_bidi: "a",
-          vector_effect: "a",
-          vertical_align: "a",
-          visibility: "a",
-          voice_balance: "a",
-          voice_duration: "a",
-          voice_family: "a",
-          voice_pitch: "a",
-          voice_range: "a",
-          voice_rate: "a",
-          voice_stress: "a",
-          voice_volumn: "a",
-          volume: "a",
-          white_space: "a",
-          widows: "a",
-          width: "a",
-          will_change: "a",
-          word_break: "a",
-          word_spacing: "a",
-          word_wrap: "a",
-          wrap_flow: "a",
-          wrap_through: "a",
-          writing_mode: "a",
-          z_index: "a",
+            align_content: "a",
+            align_items: "a",
+            align_self: "a",
+            alignment_adjust: "a",
+            alignment_baseline: "a",
+            all: "a",
+            alt: "a",
+            animation: "a",
+            animation_delay: "a",
+            animation_direction: "a",
+            animation_duration: "a",
+            animation_fill_mode: "a",
+            animation_iteration_count: "a",
+            animation_name: "a",
+            animation_play_state: "a",
+            animation_timing_function: "a",
+            azimuth: "a",
+            backface_visibility: "a",
+            background: "a",
+            background_attachment: "a",
+            background_clip: "a",
+            background_color: "a",
+            background_image: "a",
+            background_origin: "a",
+            background_position: "a",
+            background_repeat: "a",
+            background_size: "a",
+            background_blend_mode: "a",
+            baseline_shift: "a",
+            bleed: "a",
+            bookmark_label: "a",
+            bookmark_level: "a",
+            bookmark_state: "a",
+            border: "a",
+            border_color: "a",
+            border_style: "a",
+            border_width: "a",
+            border_bottom: "a",
+            border_bottom_color: "a",
+            border_bottom_style: "a",
+            border_bottom_width: "a",
+            border_left: "a",
+            border_left_color: "a",
+            border_left_style: "a",
+            border_left_width: "a",
+            border_right: "a",
+            border_right_color: "a",
+            border_right_style: "a",
+            border_right_width: "a",
+            border_top: "a",
+            border_top_color: "a",
+            border_top_style: "a",
+            border_top_width: "a",
+            border_collapse: "a",
+            border_image: "a",
+            border_image_outset: "a",
+            border_image_repeat: "a",
+            border_image_slice: "a",
+            border_image_source: "a",
+            border_image_width: "a",
+            border_radius: "a",
+            border_bottom_left_radius: "a",
+            border_bottom_right_radius: "a",
+            border_top_left_radius: "a",
+            border_top_right_radius: "a",
+            border_spacing: "a",
+            bottom: "a",
+            box_decoration_break: "a",
+            box_shadow: "a",
+            box_sizing: "a",
+            box_snap: "a",
+            break_after: "a",
+            break_before: "a",
+            break_inside: "a",
+            buffered_rendering: "a",
+            caption_side: "a",
+            clear: "a",
+            clear_side: "a",
+            clip: "a",
+            clip_path: "a",
+            clip_rule: "a",
+            color: "a",
+            color_adjust: "a",
+            color_correction: "a",
+            color_interpolation: "a",
+            color_interpolation_filters: "a",
+            color_profile: "a",
+            color_rendering: "a",
+            column_fill: "a",
+            column_gap: "a",
+            column_rule: "a",
+            column_rule_color: "a",
+            column_rule_style: "a",
+            column_rule_width: "a",
+            column_span: "a",
+            columns: "a",
+            column_count: "a",
+            column_width: "a",
+            contain: "a",
+            content: "a",
+            counter_increment: "a",
+            counter_reset: "a",
+            counter_set: "a",
+            cue: "a",
+            cue_after: "a",
+            cue_before: "a",
+            cursor: "a",
+            direction: "a",
+            display: "a",
+            display_inside: "a",
+            display_outside: "a",
+            display_extras: "a",
+            display_box: "a",
+            dominant_baseline: "a",
+            elevation: "a",
+            empty_cells: "a",
+            enable_background: "a",
+            fill: "a",
+            fill_opacity: "a",
+            fill_rule: "a",
+            filter: "a",
+            float: "a",
+            float_defer_column: "a",
+            float_defer_page: "a",
+            float_offset: "a",
+            float_wrap: "a",
+            flow_into: "a",
+            flow_from: "a",
+            flex: "a",
+            flex_basis: "a",
+            flex_grow: "a",
+            flex_shrink: "a",
+            flex_flow: "a",
+            flex_direction: "a",
+            flex_wrap: "a",
+            flood_color: "a",
+            flood_opacity: "a",
+            font: "a",
+            font_family: "a",
+            font_size: "a",
+            font_stretch: "a",
+            font_style: "a",
+            font_weight: "a",
+            font_feature_settings: "a",
+            font_kerning: "a",
+            font_language_override: "a",
+            font_size_adjust: "a",
+            font_synthesis: "a",
+            font_variant: "a",
+            font_variant_alternates: "a",
+            font_variant_caps: "a",
+            font_variant_east_asian: "a",
+            font_variant_ligatures: "a",
+            font_variant_numeric: "a",
+            font_variant_position: "a",
+            footnote_policy: "a",
+            glyph_orientation_horizontal: "a",
+            glyph_orientation_vertical: "a",
+            grid: "a",
+            grid_auto_flow: "a",
+            grid_auto_columns: "a",
+            grid_auto_rows: "a",
+            grid_template: "a",
+            grid_template_areas: "a",
+            grid_template_columns: "a",
+            grid_template_rows: "a",
+            grid_area: "a",
+            grid_column: "a",
+            grid_column_start: "a",
+            grid_column_end: "a",
+            grid_row: "a",
+            grid_row_start: "a",
+            grid_row_end: "a",
+            hanging_punctuation: "a",
+            height: "a",
+            hyphenate_character: "a",
+            hyphenate_limit_chars: "a",
+            hyphenate_limit_last: "a",
+            hyphenate_limit_lines: "a",
+            hyphenate_limit_zone: "a",
+            hyphens: "a",
+            icon: "a",
+            image_orientation: "a",
+            image_resolution: "a",
+            image_rendering: "a",
+            ime: "a",
+            ime_align: "a",
+            ime_mode: "a",
+            ime_offset: "a",
+            ime_width: "a",
+            initial_letters: "a",
+            inline_box_align: "a",
+            isolation: "a",
+            justify_content: "a",
+            justify_items: "a",
+            justify_self: "a",
+            kerning: "a",
+            left: "a",
+            letter_spacing: "a",
+            lighting_color: "a",
+            line_box_contain: "a",
+            line_break: "a",
+            line_grid: "a",
+            line_height: "a",
+            line_slack: "a",
+            line_snap: "a",
+            list_style: "a",
+            list_style_image: "a",
+            list_style_position: "a",
+            list_style_type: "a",
+            margin: "a",
+            margin_bottom: "a",
+            margin_left: "a",
+            margin_right: "a",
+            margin_top: "a",
+            marker: "a",
+            marker_end: "a",
+            marker_mid: "a",
+            marker_pattern: "a",
+            marker_segment: "a",
+            marker_start: "a",
+            marker_knockout_left: "a",
+            marker_knockout_right: "a",
+            marker_side: "a",
+            marks: "a",
+            marquee_direction: "a",
+            marquee_play_count: "a",
+            marquee_speed: "a",
+            marquee_style: "a",
+            mask: "a",
+            mask_image: "a",
+            mask_repeat: "a",
+            mask_position: "a",
+            mask_clip: "a",
+            mask_origin: "a",
+            mask_size: "a",
+            mask_box: "a",
+            mask_box_outset: "a",
+            mask_box_repeat: "a",
+            mask_box_slice: "a",
+            mask_box_source: "a",
+            mask_box_width: "a",
+            mask_type: "a",
+            max_height: "a",
+            max_lines: "a",
+            max_width: "a",
+            min_height: "a",
+            min_width: "a",
+            mix_blend_mode: "a",
+            nav_down: "a",
+            nav_index: "a",
+            nav_left: "a",
+            nav_right: "a",
+            nav_up: "a",
+            object_fit: "a",
+            object_position: "a",
+            offset_after: "a",
+            offset_before: "a",
+            offset_end: "a",
+            offset_start: "a",
+            opacity: "a",
+            order: "a",
+            orphans: "a",
+            outline: "a",
+            outline_color: "a",
+            outline_style: "a",
+            outline_width: "a",
+            outline_offset: "a",
+            overflow: "a",
+            overflow_x: "a",
+            overflow_y: "a",
+            overflow_style: "a",
+            overflow_wrap: "a",
+            padding: "a",
+            padding_bottom: "a",
+            padding_left: "a",
+            padding_right: "a",
+            padding_top: "a",
+            page: "a",
+            page_break_after: "a",
+            page_break_before: "a",
+            page_break_inside: "a",
+            paint_order: "a",
+            pause: "a",
+            pause_after: "a",
+            pause_before: "a",
+            perspective: "a",
+            perspective_origin: "a",
+            pitch: "a",
+            pitch_range: "a",
+            play_during: "a",
+            pointer_events: "a",
+            position: "a",
+            quotes: "a",
+            region_fragment: "a",
+            resize: "a",
+            rest: "a",
+            rest_after: "a",
+            rest_before: "a",
+            richness: "a",
+            right: "a",
+            ruby_align: "a",
+            ruby_merge: "a",
+            ruby_position: "a",
+            scroll_behavior: "a",
+            scroll_snap_coordinate: "a",
+            scroll_snap_destination: "a",
+            scroll_snap_points_x: "a",
+            scroll_snap_points_y: "a",
+            scroll_snap_type: "a",
+            shape_image_threshold: "a",
+            shape_inside: "a",
+            shape_margin: "a",
+            shape_outside: "a",
+            shape_padding: "a",
+            shape_rendering: "a",
+            size: "a",
+            speak: "a",
+            speak_as: "a",
+            speak_header: "a",
+            speak_numeral: "a",
+            speak_punctuation: "a",
+            speech_rate: "a",
+            stop_color: "a",
+            stop_opacity: "a",
+            stress: "a",
+            string_set: "a",
+            stroke: "a",
+            stroke_dasharray: "a",
+            stroke_dashoffset: "a",
+            stroke_linecap: "a",
+            stroke_linejoin: "a",
+            stroke_miterlimit: "a",
+            stroke_opacity: "a",
+            stroke_width: "a",
+            tab_size: "a",
+            table_layout: "a",
+            text_align: "a",
+            text_align_all: "a",
+            text_align_last: "a",
+            text_anchor: "a",
+            text_combine_upright: "a",
+            text_decoration: "a",
+            text_decoration_color: "a",
+            text_decoration_line: "a",
+            text_decoration_style: "a",
+            text_decoration_skip: "a",
+            text_emphasis: "a",
+            text_emphasis_color: "a",
+            text_emphasis_style: "a",
+            text_emphasis_position: "a",
+            text_emphasis_skip: "a",
+            text_height: "a",
+            text_indent: "a",
+            text_justify: "a",
+            text_orientation: "a",
+            text_overflow: "a",
+            text_rendering: "a",
+            text_shadow: "a",
+            text_size_adjust: "a",
+            text_space_collapse: "a",
+            text_spacing: "a",
+            text_transform: "a",
+            text_underline_position: "a",
+            text_wrap: "a",
+            top: "a",
+            touch_action: "a",
+            transform: "a",
+            transform_box: "a",
+            transform_origin: "a",
+            transform_style: "a",
+            transition: "a",
+            transition_delay: "a",
+            transition_duration: "a",
+            transition_property: "a",
+            unicode_bidi: "a",
+            vector_effect: "a",
+            vertical_align: "a",
+            visibility: "a",
+            voice_balance: "a",
+            voice_duration: "a",
+            voice_family: "a",
+            voice_pitch: "a",
+            voice_range: "a",
+            voice_rate: "a",
+            voice_stress: "a",
+            voice_volumn: "a",
+            volume: "a",
+            white_space: "a",
+            widows: "a",
+            width: "a",
+            will_change: "a",
+            word_break: "a",
+            word_spacing: "a",
+            word_wrap: "a",
+            wrap_flow: "a",
+            wrap_through: "a",
+            writing_mode: "a",
+            z_index: "a",
+
+            "This example isn't quite useful yet"
         }
     })
 }

examples/all_events.rs

@@ -1,4 +1,4 @@
-use dioxus::{events::*, prelude::*};
+use dioxus::{events::*, html::MouseEvent, prelude::*};
 
 fn main() {
     dioxus_desktop::launch(app);
@@ -41,7 +41,7 @@ const RECT_STYLE: &str = r#"
     "#;
 
 fn app(cx: Scope) -> Element {
-    let events = use_ref(&cx, std::collections::VecDeque::new);
+    let events = use_ref(cx, std::collections::VecDeque::new);
 
     let log_event = move |event: Event| {
         let mut events = events.write();

examples/borrowed.rs

@@ -29,9 +29,7 @@ fn app(cx: Scope) -> Element {
 
     cx.render(rsx! {
         div {
-            Child1 {
-                text: first
-            }
+            Child1 { text: first }
         }
     })
 }
@@ -59,9 +57,7 @@ struct C2Props<'a> {
 
 fn Child2<'a>(cx: Scope<'a, C2Props<'a>>) -> Element {
     cx.render(rsx! {
-        Child3 {
-            text: cx.props.text
-        }
+        Child3 { text: cx.props.text }
     })
 }
 

examples/calculator.rs

@@ -19,12 +19,13 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let val = use_state(&cx, || String::from("0"));
+    let val = use_state(cx, || String::from("0"));
 
     let input_digit = move |num: u8| {
         if val.get() == "0" {
             val.set(String::new());
         }
+
         val.make_mut().push_str(num.to_string().as_str());
     };
 
@@ -99,12 +100,8 @@ fn app(cx: Scope) -> Element {
                                 }
                             }
                             div { class: "digit-keys",
-                                button { class: "calculator-key key-0", onclick: move |_| input_digit(0),
-                                    "0"
-                                }
-                                button { class: "calculator-key key-dot", onclick: move |_| val.make_mut().push('.'),
-                                    "●"
-                                }
+                                button { class: "calculator-key key-0", onclick: move |_| input_digit(0), "0" }
+                                button { class: "calculator-key key-dot", onclick: move |_| val.make_mut().push('.'), "●" }
                                 (1..10).map(|k| rsx!{
                                     button {
                                         class: "calculator-key {k}",
@@ -116,22 +113,13 @@ fn app(cx: Scope) -> Element {
                             }
                         }
                         div { class: "operator-keys",
-                            button { class: "calculator-key key-divide", onclick: move |_| input_operator("/"),
-                                "÷"
-                            }
-                            button { class: "calculator-key key-multiply", onclick: move |_| input_operator("*"),
-                                "×"
-                            }
-                            button { class: "calculator-key key-subtract", onclick: move |_| input_operator("-"),
-                                "−"
-                            }
-                            button { class: "calculator-key key-add", onclick: move |_| input_operator("+"),
-                                "+"
-                            }
-                            button { class: "calculator-key key-equals",
-                                onclick: move |_| {
-                                    val.set(format!("{}", calc_val(val.as_str())));
-                                },
+                            button { class: "calculator-key key-divide", onclick: move |_| input_operator("/"), "÷" }
+                            button { class: "calculator-key key-multiply", onclick: move |_| input_operator("*"), "×" }
+                            button { class: "calculator-key key-subtract", onclick: move |_| input_operator("-"), "−" }
+                            button { class: "calculator-key key-add", onclick: move |_| input_operator("+"), "+" }
+                            button {
+                                class: "calculator-key key-equals",
+                                onclick: move |_| val.set(format!("{}", calc_val(val.as_str()))),
                                 "="
                             }
                         }

examples/callback.rs

@@ -0,0 +1,22 @@
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus_desktop::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    let login = use_callback!(cx, move |_| async move {
+        let res = reqwest::get("https://dog.ceo/api/breeds/list/all")
+            .await
+            .unwrap()
+            .text()
+            .await
+            .unwrap();
+
+        println!("{:#?}, ", res);
+    });
+
+    cx.render(rsx! {
+        button { onclick: login, "Click me!" }
+    })
+}

examples/crm.rs

@@ -16,10 +16,10 @@ pub struct Client {
 }
 
 fn app(cx: Scope) -> Element {
-    let clients = use_ref(&cx, || vec![] as Vec<Client>);
-    let firstname = use_state(&cx, String::new);
-    let lastname = use_state(&cx, String::new);
-    let description = use_state(&cx, String::new);
+    let clients = use_ref(cx, || vec![] as Vec<Client>);
+    let firstname = use_state(cx, String::new);
+    let lastname = use_state(cx, String::new);
+    let description = use_state(cx, String::new);
 
     cx.render(rsx!(
         body {
@@ -30,7 +30,7 @@ fn app(cx: Scope) -> Element {
                 integrity: "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5",
                 crossorigin: "anonymous",
             }
-            h1 {"Dioxus CRM Example"}
+            h1 { "Dioxus CRM Example" }
             Router {
                 Route { to: "/",
                     div { class: "crm",
@@ -40,12 +40,12 @@ fn app(cx: Scope) -> Element {
                                 div { class: "client", style: "margin-bottom: 50px",
                                     p { "First Name: {client.first_name}" }
                                     p { "Last Name: {client.last_name}" }
-                                    p {"Description: {client.description}"}
+                                    p { "Description: {client.description}" }
                                 })
                             )
                         }
                         Link { to: "/new", class: "pure-button pure-button-primary", "Add New" }
-                        Link { to: "/new", class: "pure-button", "Settings" }
+                        Link { to: "/settings", class: "pure-button", "Settings" }
                     }
                 }
                 Route { to: "/new",

examples/custom_element.rs

@@ -10,21 +10,31 @@ fn main() {
     let mut dom = VirtualDom::new(app);
     let _ = dom.rebuild();
 
-    let output = dioxus_ssr::render_vdom(&dom);
+    let output = dioxus_ssr::render(&dom);
 
     println!("{}", output);
 }
 
 fn app(cx: Scope) -> Element {
-    let nf = NodeFactory::new(&cx);
+    let g = cx.component(component, (), "component");
+    let c = cx.make_node(g);
+    cx.render(rsx! {
+        div { c }
+    })
 
-    let mut attrs = dioxus::core::exports::bumpalo::collections::Vec::new_in(nf.bump());
+    // let nf = NodeFactory::new(cx);
 
-    attrs.push(nf.attr("client-id", format_args!("abc123"), None, false));
+    // let mut attrs = dioxus::core::exports::bumpalo::collections::Vec::new_in(nf.bump());
 
-    attrs.push(nf.attr("name", format_args!("bob"), None, false));
+    // attrs.push(nf.attr("client-id", format_args!("abc123"), None, false));
 
-    attrs.push(nf.attr("age", format_args!("47"), None, false));
+    // attrs.push(nf.attr("name", format_args!("bob"), None, false));
 
-    Some(nf.raw_element("my-element", None, &[], attrs.into_bump_slice(), &[], None))
+    // attrs.push(nf.attr("age", format_args!("47"), None, false));
+
+    // Some(nf.raw_element("my-element", None, &[], attrs.into_bump_slice(), &[], None))
+}
+
+fn component(cx: Scope) -> Element {
+    todo!()
 }

examples/disabled.rs

@@ -5,7 +5,7 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let disabled = use_state(&cx, || false);
+    let disabled = use_state(cx, || false);
 
     cx.render(rsx! {
         div {

examples/dog_app.rs

@@ -1,12 +1,8 @@
-#![allow(non_snake_case)]
-
-//! Render a bunch of doggos!
-
 use dioxus::prelude::*;
 use std::collections::HashMap;
 
 fn main() {
-    dioxus_desktop::launch(app);
+    dioxus_desktop::launch(|cx| render!(app_root {}));
 }
 
 #[derive(Debug, Clone, PartialEq, serde::Deserialize)]
@@ -14,10 +10,10 @@ struct ListBreeds {
     message: HashMap<String, Vec<String>>,
 }
 
-fn app(cx: Scope) -> Element {
-    let breed = use_state(&cx, || None);
+async fn app_root(cx: Scope<'_>) -> Element {
+    let breed = use_state(cx, || "deerhound".to_string());
 
-    let breeds = use_future(&cx, (), |_| async move {
+    let breeds = use_future!(cx, || async move {
         reqwest::get("https://dog.ceo/api/breeds/list/all")
             .await
             .unwrap()
@@ -25,32 +21,26 @@ fn app(cx: Scope) -> Element {
             .await
     });
 
-    match breeds.value() {
-        Some(Ok(breeds)) => cx.render(rsx! {
-            div {
+    match breeds.await {
+        Ok(breeds) => cx.render(rsx! {
+            div { height: "500px",
                 h1 { "Select a dog breed!" }
                 div { display: "flex",
                     ul { flex: "50%",
-                        breeds.message.keys().map(|cur_breed| rsx!(
-                            li {
+                        for cur_breed in breeds.message.keys().take(10) {
+                            li { key: "{cur_breed}",
                                 button {
-                                    onclick: move |_| breed.set(Some(cur_breed.clone())),
+                                    onclick: move |_| breed.set(cur_breed.clone()),
                                     "{cur_breed}"
                                 }
                             }
-                        ))
-                    }
-                    div { flex: "50%",
-                        match breed.get() {
-                            Some(breed) => rsx!( Breed { breed: breed.clone() } ),
-                            None => rsx!("No Breed selected"),
                         }
                     }
+                    div { flex: "50%", breed_pic { breed: breed.to_string() } }
                 }
             }
         }),
-        Some(Err(_e)) => cx.render(rsx! { div { "Error fetching breeds" } }),
-        None => cx.render(rsx! { div { "Loading dogs..." } }),
+        Err(_e) => cx.render(rsx! { div { "Error fetching breeds" } }),
     }
 }
 
@@ -60,8 +50,8 @@ struct DogApi {
 }
 
 #[inline_props]
-fn Breed(cx: Scope, breed: String) -> Element {
-    let fut = use_future(&cx, (breed,), |(breed,)| async move {
+async fn breed_pic(cx: Scope, breed: String) -> Element {
+    let fut = use_future!(cx, |breed| async move {
         reqwest::get(format!("https://dog.ceo/api/breed/{}/images/random", breed))
             .await
             .unwrap()
@@ -69,21 +59,23 @@ fn Breed(cx: Scope, breed: String) -> Element {
             .await
     });
 
-    cx.render(match fut.value() {
-        Some(Ok(resp)) => rsx! {
-            button {
-                onclick: move |_| fut.restart(),
-                "Click to fetch another doggo"
-            }
+    match fut.await {
+        Ok(resp) => render! {
             div {
+                button {
+                    onclick: move |_| {
+                        println!("clicked");
+                        fut.restart()
+                    },
+                    "Click to fetch another doggo"
+                }
                 img {
+                    src: "{resp.message}",
                     max_width: "500px",
                     max_height: "500px",
-                    src: "{resp.message}",
                 }
             }
         },
-        Some(Err(_)) => rsx! { div { "loading dogs failed" } },
-        None => rsx! { div { "loading dogs..." } },
-    })
+        Err(_) => render! { div { "loading dogs failed" } },
+    }
 }

examples/error_handle.rs

@@ -5,7 +5,7 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let val = use_state(&cx, || "0.0001");
+    let val = use_state(cx, || "0.0001");
 
     let num = match val.parse::<f32>() {
         Err(_) => return cx.render(rsx!("Parsing failed")),
@@ -18,5 +18,17 @@ fn app(cx: Scope) -> Element {
             onclick: move |_| val.set("invalid"),
             "Set an invalid number"
         }
+        (0..5).map(|i| rsx! {
+            demo_c { x: i }
+        })
+    })
+}
+
+#[inline_props]
+fn demo_c(cx: Scope, x: i32) -> Element {
+    cx.render(rsx! {
+        h1 {
+            "asdasdasdasd {x}"
+        }
     })
 }

examples/eval.rs

@@ -1,12 +1,22 @@
 use dioxus::prelude::*;
+use dioxus_desktop::EvalResult;
 
 fn main() {
     dioxus_desktop::launch(app);
 }
 
 fn app(cx: Scope) -> Element {
-    let script = use_state(&cx, String::new);
-    let eval = dioxus_desktop::use_eval(&cx);
+    let script = use_state(cx, String::new);
+    let eval = dioxus_desktop::use_eval(cx);
+    let future: &UseRef<Option<EvalResult>> = use_ref(cx, || None);
+    if future.read().is_some() {
+        let future_clone = future.clone();
+        cx.spawn(async move {
+            if let Some(fut) = future_clone.with_mut(|o| o.take()) {
+                println!("{:?}", fut.await)
+            }
+        });
+    }
 
     cx.render(rsx! {
         div {
@@ -16,7 +26,10 @@ fn app(cx: Scope) -> Element {
                 oninput: move |e| script.set(e.value.clone()),
             }
             button {
-                onclick: move |_| eval(script),
+                onclick: move |_| {
+                    let fut = eval(script);
+                    future.set(Some(fut));
+                },
                 "Execute"
             }
         }

examples/fermi.rs

@@ -10,17 +10,17 @@ fn main() {
 static NAME: Atom<String> = |_| "world".to_string();
 
 fn app(cx: Scope) -> Element {
-    let name = use_read(&cx, NAME);
+    let name = use_read(cx, NAME);
 
     cx.render(rsx! {
         div { "hello {name}!" }
         Child {}
-        ChildWithRef{}
+        ChildWithRef {}
     })
 }
 
 fn Child(cx: Scope) -> Element {
-    let set_name = use_set(&cx, NAME);
+    let set_name = use_set(cx, NAME);
 
     cx.render(rsx! {
         button {
@@ -33,7 +33,7 @@ fn Child(cx: Scope) -> Element {
 static NAMES: AtomRef<Vec<String>> = |_| vec!["world".to_string()];
 
 fn ChildWithRef(cx: Scope) -> Element {
-    let names = use_atom_ref(&cx, NAMES);
+    let names = use_atom_ref(cx, NAMES);
 
     cx.render(rsx! {
         div {

examples/file_explorer.rs

@@ -19,9 +19,9 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let files = use_ref(&cx, Files::new);
+    let files = use_ref(cx, Files::new);
 
-    render! {
+    cx.render(rsx! {
         div {
             link { href:"https://fonts.googleapis.com/icon?family=Material+Icons", rel:"stylesheet", }
             style { include_str!("./assets/fileexplorer.css") }
@@ -62,7 +62,7 @@ fn app(cx: Scope) -> Element {
                 })
             }
         }
-    }
+    })
 }
 
 struct Files {

examples/flat_router.rs

@@ -7,7 +7,6 @@ fn main() {
 
     let cfg = Config::new().with_window(
         WindowBuilder::new()
-            .with_title("Spinsense Client")
             .with_inner_size(LogicalSize::new(600, 1000))
             .with_resizable(false),
     );
@@ -17,21 +16,21 @@ fn main() {
 
 fn app(cx: Scope) -> Element {
     cx.render(rsx! {
-        Router {
-            Route { to: "/", "Home" }
-            Route { to: "/games", "Games" }
-            Route { to: "/play", "Play" }
-            Route { to: "/settings", "Settings" }
+        div {
+            Router {
+                Route { to: "/", "Home" }
+                Route { to: "/games", "Games" }
+                Route { to: "/play", "Play" }
+                Route { to: "/settings", "Settings" }
 
-            p {
-                "----"
-            }
-            nav {
-                ul {
-                    Link { to: "/", li { "Home" } }
-                    Link { to: "/games", li { "Games" } }
-                    Link { to: "/play", li { "Play" } }
-                    Link { to: "/settings", li { "Settings" } }
+                p { "----" }
+                nav {
+                    ul {
+                        Link { to: "/", li { "Home" } }
+                        Link { to: "/games", li { "Games" } }
+                        Link { to: "/play", li { "Play" } }
+                        Link { to: "/settings", li { "Settings" } }
+                    }
                 }
             }
         }

examples/framework_benchmark.rs

@@ -32,8 +32,8 @@ impl Label {
 }
 
 fn app(cx: Scope) -> Element {
-    let items = use_ref(&cx, Vec::new);
-    let selected = use_state(&cx, || None);
+    let items = use_ref(cx, Vec::new);
+    let selected = use_state(cx, || None);
 
     cx.render(rsx! {
         div { class: "container",
@@ -72,7 +72,7 @@ fn app(cx: Scope) -> Element {
                             td { class:"col-md-1" }
                             td { class:"col-md-1", "{item.key}" }
                             td { class:"col-md-1", onclick: move |_| selected.set(Some(id)),
-                                a { class: "lbl", item.labels }
+                                a { class: "lbl", "{item.labels[0]}{item.labels[1]}{item.labels[2]}" }
                             }
                             td { class: "col-md-1",
                                 a { class: "remove", onclick: move |_| { items.write().remove(id); },

examples/generic_component.rs

@@ -0,0 +1,13 @@
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus_desktop::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    cx.render(rsx! { generic_child::<i32>{} })
+}
+
+fn generic_child<T>(cx: Scope) -> Element {
+    cx.render(rsx! { div {} })
+}

examples/hydration.rs

@@ -14,13 +14,13 @@ use dioxus_desktop::Config;
 
 fn main() {
     let vdom = VirtualDom::new(app);
-    let content = dioxus_ssr::render_vdom_cfg(&vdom, |f| f.pre_render(true));
+    let content = dioxus_ssr::pre_render(&vdom);
 
     dioxus_desktop::launch_cfg(app, Config::new().with_prerendered(content));
 }
 
 fn app(cx: Scope) -> Element {
-    let val = use_state(&cx, || 0);
+    let val = use_state(cx, || 0);
 
     cx.render(rsx! {
         div {

examples/inlineprops.rs

@@ -28,7 +28,7 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let state = use_state(&cx, || 1);
+    let state = use_state(cx, || 1);
 
     cx.render(rsx! {
         div {

examples/inputs.rs

@@ -2,7 +2,7 @@
 //!
 //! There is some conversion happening when input types are checkbox/radio/select/textarea etc.
 
-use dioxus::{events::FormEvent, prelude::*};
+use dioxus::prelude::*;
 
 fn main() {
     dioxus_desktop::launch(app);
@@ -28,7 +28,6 @@ const FIELDS: &[(&str, &str)] = &[
     ("text", ""),
     ("time", ""),
     ("url", ""),
-    //
     // less supported things
     ("hidden", ""),
     ("month", ""), // degrades to text most of the time, but works properly as "value'"
@@ -114,7 +113,7 @@ fn app(cx: Scope) -> Element {
                 }
             }
 
-            FIELDS.iter().map(|(field, value)| rsx!(
+            FIELDS.iter().map(|(field, value)| rsx! {
                 div {
                     input {
                         id: "{field}",
@@ -131,8 +130,7 @@ fn app(cx: Scope) -> Element {
                     }
                     br {}
                 }
-            ))
-
+            })
         }
     })
 }

examples/login_form.rs

@@ -1,7 +1,6 @@
 //! This example demonstrates the following:
 //! Futures in a callback, Router, and Forms
 
-use dioxus::events::*;
 use dioxus::prelude::*;
 
 fn main() {
@@ -37,11 +36,10 @@ fn app(cx: Scope) -> Element {
         form {
             onsubmit: onsubmit,
             prevent_default: "onsubmit", // Prevent the default behavior of <form> to post
-
-            input { "type": "text", id: "username", name: "username" }
+            input { r#type: "text", id: "username", name: "username" }
             label { "Username" }
             br {}
-            input { "type": "password", id: "password", name: "password" }
+            input { r#type: "password", id: "password", name: "password" }
             label { "Password" }
             br {}
             button { "Login" }

examples/nested_listeners.rs

@@ -22,7 +22,7 @@ fn app(cx: Scope) -> Element {
             button {
                 onclick: move |evt| {
                     println!("clicked! bottom no bubbling");
-                    evt.cancel_bubble();
+                    evt.stop_propogation();
                 },
                 "Dont propogate"
             }

examples/pattern_model.rs

@@ -19,6 +19,7 @@
 
 use dioxus::events::*;
 use dioxus::html::input_data::keyboard_types::Key;
+use dioxus::html::MouseEvent;
 use dioxus::prelude::*;
 use dioxus_desktop::wry::application::dpi::LogicalSize;
 use dioxus_desktop::{Config, WindowBuilder};
@@ -35,7 +36,7 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let state = use_ref(&cx, Calculator::new);
+    let state = use_ref(cx, Calculator::new);
 
     cx.render(rsx! {
         style { include_str!("./assets/calculator.css") }

examples/pattern_reducer.rs

@@ -15,7 +15,7 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let state = use_state(&cx, PlayerState::new);
+    let state = use_state(cx, PlayerState::new);
 
     cx.render(rsx!(
         div {

examples/readme.rs

@@ -9,7 +9,7 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let mut count = use_state(&cx, || 0);
+    let mut count = use_state(cx, || 0);
 
     cx.render(rsx! {
         h1 { "High-Five counter: {count}" }

examples/router.rs

@@ -30,7 +30,7 @@ fn app(cx: Scope) -> Element {
 }
 
 fn BlogPost(cx: Scope) -> Element {
-    let post = dioxus_router::use_route(&cx).last_segment()?;
+    let post = dioxus_router::use_route(cx).last_segment().unwrap();
 
     cx.render(rsx! {
         div {
@@ -46,9 +46,9 @@ struct Query {
 }
 
 fn User(cx: Scope) -> Element {
-    let post = dioxus_router::use_route(&cx).last_segment()?;
+    let post = dioxus_router::use_route(cx).last_segment().unwrap();
 
-    let query = dioxus_router::use_route(&cx)
+    let query = dioxus_router::use_route(cx)
         .query::<Query>()
         .unwrap_or(Query { bold: false });
 

examples/rsx_compile_fail.rs

@@ -5,21 +5,22 @@ use dioxus::prelude::*;
 
 fn main() {
     let mut vdom = VirtualDom::new(example);
-    vdom.rebuild();
+    _ = vdom.rebuild();
 
-    let out = dioxus_ssr::render_vdom_cfg(&vdom, |c| c.newline(true).indent(true));
-    println!("{}", out);
+    let mut renderer = dioxus_ssr::Renderer::new();
+    renderer.pretty = true;
+    renderer.render(&vdom);
 }
 
 fn example(cx: Scope) -> Element {
-    let items = use_state(&cx, || {
+    let items = use_state(cx, || {
         vec![Thing {
             a: "asd".to_string(),
             b: 10,
         }]
     });
 
-    let things = use_ref(&cx, || {
+    let things = use_ref(cx, || {
         vec![Thing {
             a: "asd".to_string(),
             b: 10,
@@ -27,7 +28,7 @@ fn example(cx: Scope) -> Element {
     });
     let things_list = things.read();
 
-    let mything = use_ref(&cx, || Some(String::from("asd")));
+    let mything = use_ref(cx, || Some(String::from("asd")));
     let mything_read = mything.read();
 
     cx.render(rsx!(

examples/rsx_usage.rs

@@ -1,5 +1,4 @@
 #![allow(non_snake_case)]
-
 //! A tour of the rsx! macro
 //! ------------------------
 //!
@@ -39,7 +38,7 @@
 //! - Accept a list of vnodes as children for a Fragment component
 //! - Allow keyed fragments in iterators
 //! - Allow top-level fragments
-//!
+
 fn main() {
     dioxus_desktop::launch(app);
 }
@@ -165,13 +164,13 @@ fn app(cx: Scope) -> Element {
 
             // Can pass in props directly as an expression
             {
-                let props = TallerProps {a: "hello", children: Default::default()};
+                let props = TallerProps {a: "hello", children: cx.render(rsx!(()))};
                 rsx!(Taller { ..props })
             }
 
             // Spreading can also be overridden manually
             Taller {
-                ..TallerProps { a: "ballin!", children: Default::default() },
+                ..TallerProps { a: "ballin!", children: cx.render(rsx!(()) )},
                 a: "not ballin!"
             }
 
@@ -183,7 +182,7 @@ fn app(cx: Scope) -> Element {
 
             // Components can be generic too
             // This component takes i32 type to give you typed input
-            TypedInput::<TypedInputProps<i32>> {}
+            TypedInput::<i32> {}
 
             // Type inference can be used too
             TypedInput { initial: 10.0 }
@@ -200,7 +199,7 @@ fn app(cx: Scope) -> Element {
 
             // helper functions
             // Anything that implements IntoVnode can be dropped directly into Rsx
-            helper(&cx, "hello world!")
+            helper(cx, "hello world!")
 
             // Strings can be supplied directly
             String::from("Hello world!")

examples/simple_desktop.rs

@@ -0,0 +1,60 @@
+use dioxus::prelude::*;
+use dioxus_router::*;
+
+fn main() {
+    simple_logger::SimpleLogger::new()
+        .with_level(log::LevelFilter::Debug)
+        .with_module_level("dioxus_router", log::LevelFilter::Trace)
+        .with_module_level("dioxus", log::LevelFilter::Trace)
+        .init()
+        .unwrap();
+    dioxus_desktop::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    cx.render(rsx! {
+        Router {
+            h1 { "Your app here" }
+            ul {
+                Link { to: "/", li { "home" } }
+                Link { to: "/blog", li { "blog" } }
+                Link { to: "/blog/tim", li { "tims' blog" } }
+                Link { to: "/blog/bill", li { "bills' blog" } }
+                Link { to: "/blog/james",
+                        li { "james amazing' blog" }
+                }
+                Link { to: "/apples", li { "go to apples" } }
+            }
+            Route { to: "/", Home {} }
+            Route { to: "/blog/", BlogList {} }
+            Route { to: "/blog/:id/", BlogPost {} }
+            Route { to: "/oranges", "Oranges are not apples!" }
+            Redirect { from: "/apples", to: "/oranges" }
+        }
+    })
+}
+
+fn Home(cx: Scope) -> Element {
+    log::debug!("rendering home {:?}", cx.scope_id());
+    cx.render(rsx! { h1 { "Home" } })
+}
+
+fn BlogList(cx: Scope) -> Element {
+    log::debug!("rendering blog list {:?}", cx.scope_id());
+    cx.render(rsx! { div { "Blog List" } })
+}
+
+fn BlogPost(cx: Scope) -> Element {
+    let Some(id) = use_route(cx).segment("id") else {
+        return cx.render(rsx! { div { "No blog post id" } })
+    };
+
+    log::debug!("rendering blog post {}", id);
+
+    cx.render(rsx! {
+        div {
+            h3 { "blog post: {id:?}"  }
+            Link { to: "/blog/", "back to blog list" }
+        }
+    })
+}

examples/simple_list.rs

@@ -6,14 +6,29 @@ fn main() {
 
 fn app(cx: Scope) -> Element {
     cx.render(rsx!(
-        // Use Map directly to lazily pull elements
-        (0..10).map(|f| rsx! { "{f}" }),
-        // Collect into an intermediate collection if necessary
-        ["a", "b", "c"]
-            .into_iter()
-            .map(|f| rsx! { "{f}" })
-            .collect::<Vec<_>>(),
-        // Use optionals
-        Some(rsx! { "Some" }),
+        div {
+            // Use Map directly to lazily pull elements
+            (0..10).map(|f| rsx! { "{f}" }),
+
+            // Collect into an intermediate collection if necessary, and call into_iter
+            ["a", "b", "c", "d", "e", "f"]
+                .into_iter()
+                .map(|f| rsx! { "{f}" })
+                .collect::<Vec<_>>()
+                .into_iter(),
+
+            // Use optionals
+            Some(rsx! { "Some" }),
+
+            // use a for loop where the body itself is RSX
+            for name in 0..10 {
+                div {"{name}"}
+            }
+
+            // Or even use an unterminated conditional
+            if true {
+                rsx!{ "hello world!" }
+            }
+        }
     ))
 }

examples/ssr.rs

@@ -2,15 +2,13 @@
 //!
 //! This example shows how we can render the Dioxus Virtualdom using SSR.
 
-use std::fmt::Write;
-
 use dioxus::prelude::*;
 
 fn main() {
     // We can render VirtualDoms
     let mut vdom = VirtualDom::new(app);
     let _ = vdom.rebuild();
-    println!("{}", dioxus_ssr::render_vdom(&vdom));
+    println!("{}", dioxus_ssr::render(&vdom));
 
     // Or we can render rsx! calls themselves
     println!(
@@ -23,17 +21,12 @@ fn main() {
     );
 
     // We can configure the SSR rendering to add ids for rehydration
-    println!(
-        "{}",
-        dioxus_ssr::render_vdom_cfg(&vdom, |c| c.pre_render(true))
-    );
+    println!("{}", dioxus_ssr::pre_render(&vdom));
 
-    // We can even render as a writer
+    // We can render to a buf directly too
     let mut file = String::new();
-    let _ = file.write_fmt(format_args!(
-        "{}",
-        dioxus_ssr::TextRenderer::from_vdom(&vdom, Default::default())
-    ));
+    let mut renderer = dioxus_ssr::Renderer::default();
+    renderer.render_to(&mut file, &vdom).unwrap();
     println!("{}", file);
 }
 

examples/suspense.rs

@@ -53,7 +53,7 @@ fn app(cx: Scope) -> Element {
 /// Suspense is achieved my moving the future into only the component that
 /// actually renders the data.
 fn Doggo(cx: Scope) -> Element {
-    let fut = use_future(&cx, (), |_| async move {
+    let fut = use_future(cx, (), |_| async move {
         reqwest::get("https://dog.ceo/api/breeds/image/random/")
             .await
             .unwrap()

examples/svg.rs

@@ -1,15 +1,15 @@
 // Thanks to @japsu and their project https://github.com/japsu/jatsi for the example!
 
-use dioxus::{events::MouseEvent, prelude::*};
+use dioxus::prelude::*;
 
 fn main() {
     dioxus_desktop::launch(app);
 }
 
 fn app(cx: Scope) -> Element {
-    let val = use_state(&cx, || 5);
+    let val = use_state(cx, || 5);
 
-    render! {
+    cx.render(rsx! {
         div {
             user_select: "none",
             webkit_user_select: "none",
@@ -31,7 +31,7 @@ fn app(cx: Scope) -> Element {
                 }
             }
         }
-    }
+    })
 }
 
 #[derive(Props)]
@@ -70,19 +70,21 @@ pub fn Die<'a>(cx: Scope<'a, DieProps<'a>>) -> Element {
         .map(|((x, y), _)| {
             let dcx = x * OFFSET;
             let dcy = y * OFFSET;
-            rsx!(circle {
-                cx: "{dcx}",
-                cy: "{dcy}",
-                r: "{DOT_RADIUS}",
-                fill: "#333"
-            })
+
+            rsx! {
+                circle {
+                    cx: "{dcx}",
+                    cy: "{dcy}",
+                    r: "{DOT_RADIUS}",
+                    fill: "#333"
+                }
+            }
         });
 
-    render! {
+    cx.render(rsx! {
       svg {
         onclick: move |e| cx.props.onclick.call(e),
         prevent_default: "onclick",
-        "dioxus-prevent-default": "onclick",
         class: "die",
         view_box: "-1000 -1000 2000 2000",
 
@@ -97,5 +99,5 @@ pub fn Die<'a>(cx: Scope<'a, DieProps<'a>>) -> Element {
 
         dots
       }
-    }
+    })
 }

examples/svg_basic.rs

@@ -67,6 +67,12 @@ fn app(cx: Scope) -> Element {
             stroke: "blue",
             stroke_width: "5",
         }
+        path {
+            d: "M9.00001 9C9 62 103.5 124 103.5 178",
+            stroke: "#3CC4DC",
+            "stroke-linecap": "square",
+            "stroke-width": "square",
+        }
     }))
 }
 

examples/tasks.rs

@@ -10,9 +10,9 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let count = use_state(&cx, || 0);
+    let count = use_state(cx, || 0);
 
-    use_future(&cx, (), move |_| {
+    use_future(cx, (), move |_| {
         let mut count = count.clone();
         async move {
             loop {

examples/textarea.rs

@@ -7,7 +7,7 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let model = use_state(&cx, || String::from("asd"));
+    let model = use_state(cx, || String::from("asd"));
 
     println!("{}", model);
 

examples/todomvc.rs

@@ -22,10 +22,10 @@ pub struct TodoItem {
 }
 
 pub fn app(cx: Scope<()>) -> Element {
-    let todos = use_state(&cx, im_rc::HashMap::<u32, TodoItem>::default);
-    let filter = use_state(&cx, || FilterState::All);
-    let draft = use_state(&cx, || "".to_string());
-    let todo_id = use_state(&cx, || 0);
+    let todos = use_state(cx, im_rc::HashMap::<u32, TodoItem>::default);
+    let filter = use_state(cx, || FilterState::All);
+    let draft = use_state(cx, || "".to_string());
+    let todo_id = use_state(cx, || 0);
 
     // Filter the todos based on the filter state
     let mut filtered_todos = todos
@@ -57,7 +57,9 @@ pub fn app(cx: Scope<()>) -> Element {
                         placeholder: "What needs to be done?",
                         value: "{draft}",
                         autofocus: "true",
-                        oninput: move |evt| draft.set(evt.value.clone()),
+                        oninput: move |evt| {
+                            draft.set(evt.value.clone());
+                        },
                         onkeydown: move |evt| {
                             if evt.key() == Key::Enter && !draft.is_empty() {
                                 todos.make_mut().insert(
@@ -114,7 +116,7 @@ pub struct TodoEntryProps<'a> {
 }
 
 pub fn TodoEntry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
-    let is_editing = use_state(&cx, || false);
+    let is_editing = use_state(cx, || false);
 
     let todos = cx.props.todos.get();
     let todo = &todos[&cx.props.id];

examples/window_event.rs

@@ -12,15 +12,15 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let window = dioxus_desktop::use_window(&cx);
+    let window = dioxus_desktop::use_window(cx);
 
     // if you want to make window fullscreen, you need close the resizable.
     // window.set_fullscreen(true);
     // window.set_resizable(false);
 
-    let fullscreen = use_state(&cx, || false);
-    let always_on_top = use_state(&cx, || false);
-    let decorations = use_state(&cx, || false);
+    let fullscreen = use_state(cx, || false);
+    let always_on_top = use_state(cx, || false);
+    let decorations = use_state(cx, || false);
 
     cx.render(rsx!(
         link { href:"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css", rel:"stylesheet" }
@@ -35,13 +35,13 @@ fn app(cx: Scope) -> Element {
                 nav { class: "md:ml-auto flex flex-wrap items-center text-base justify-center" }
                 button {
                     class: "inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0",
-                    onmousedown: |evt| evt.cancel_bubble(),
+                    onmousedown: |evt| evt.stop_propogation(),
                     onclick: move |_| window.set_minimized(true),
                     "Minimize"
                 }
                 button {
                     class: "inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0",
-                    onmousedown: |evt| evt.cancel_bubble(),
+                    onmousedown: |evt| evt.stop_propogation(),
                     onclick: move |_| {
 
                         window.set_fullscreen(!**fullscreen);
@@ -52,7 +52,7 @@ fn app(cx: Scope) -> Element {
                 }
                 button {
                     class: "inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0",
-                    onmousedown: |evt| evt.cancel_bubble(),
+                    onmousedown: |evt| evt.stop_propogation(),
                     onclick: move |_| window.close(),
                     "Close"
                 }
@@ -66,7 +66,7 @@ fn app(cx: Scope) -> Element {
                 div {
                     button {
                         class: "inline-flex items-center text-white bg-green-500 border-0 py-1 px-3 hover:bg-green-700 rounded",
-                        onmousedown: |evt| evt.cancel_bubble(),
+                        onmousedown: |evt| evt.stop_propogation(),
                         onclick: move |_| {
                             window.set_always_on_top(!always_on_top);
                             always_on_top.set(!always_on_top);
@@ -77,7 +77,7 @@ fn app(cx: Scope) -> Element {
                 div {
                     button {
                         class: "inline-flex items-center text-white bg-blue-500 border-0 py-1 px-3 hover:bg-green-700 rounded",
-                        onmousedown: |evt| evt.cancel_bubble(),
+                        onmousedown: |evt| evt.stop_propogation(),
                         onclick: move |_| {
                             window.set_decorations(!decorations);
                             decorations.set(!decorations);
@@ -88,7 +88,7 @@ fn app(cx: Scope) -> Element {
                 div {
                     button {
                         class: "inline-flex items-center text-white bg-blue-500 border-0 py-1 px-3 hover:bg-green-700 rounded",
-                        onmousedown: |evt| evt.cancel_bubble(),
+                        onmousedown: |evt| evt.stop_propogation(),
                         onclick: move |_| window.set_title("Dioxus Application"),
                         "Change Title"
                     }

examples/window_zoom.rs

@@ -6,9 +6,9 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let window = use_window(&cx);
+    let window = use_window(cx);
 
-    let level = use_state(&cx, || 1.0);
+    let level = use_state(cx, || 1.0);
     cx.render(rsx! {
         input {
             r#type: "number",

examples/xss_safety.rs

@@ -9,7 +9,7 @@ fn main() {
 }
 
 fn app(cx: Scope) -> Element {
-    let contents = use_state(&cx, || {
+    let contents = use_state(cx, || {
         String::from("<script>alert(\"hello world\")</script>")
     });
 

notes/README.md

@@ -233,7 +233,7 @@ use hooks to define state and modify it from within listeners.
 
 ```rust, ignore
 fn app(cx: Scope) -> Element {
-    let name = use_state(&cx, || "world");
+    let name = use_state(cx, || "world");
 
     render!("hello {name}!")
 }
@@ -280,7 +280,7 @@ fn main() {
 }
 
 fn App(cx: Scope) -> Element {
-    let count = use_state(&cx, || 0);
+    let count = use_state(cx, || 0);
 
     cx.render(rsx!(
         div { "Count: {count}" }

notes/README/ZH_CN.md

@@ -1,9 +1,6 @@
-<div align="center">
-  <h1>🌗🚀 Dioxus</h1>
-  <p>
-    <strong>Frontend that scales.</strong>
-  </p>
-</div>
+<p align="center">
+  <img src="../header.svg">
+</p>
 
 <div align="center">
   <!-- Crates version -->
@@ -26,9 +23,7 @@
     <img src="https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg"
       alt="CI status" />
   </a>
-</div>
 
-<div align="center">
   <!--Awesome -->
   <a href="https://github.com/dioxuslabs/awesome-dioxus">
     <img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome Page" />
@@ -39,33 +34,27 @@
   </a>
 </div>
 
-
 <div align="center">
   <h3>
-    <a href="https://dioxuslabs.com"> 官网 </a>
+    <a href="https://dioxuslabs.com"> 官方网站 </a>
     <span> | </span>
-    <a href="https://dioxus.mrxzx.info/"> 手册 </a>
+    <a href="https://github.com/DioxusLabs/example-projects"> 代码示例 </a>
+    <span> | </span>
+    <a href="https://dioxuslabs.com/guide"> 开发指南 </a>
     <span> | </span>
-    <a href="https://github.com/DioxusLabs/example-projects"> 示例 </a>
-  </h3>
-</div>
-
-<div align="center">
-  <h4>
     <a href="https://github.com/DioxusLabs/dioxus/blob/master/README.md"> English </a>
     <span> | </span>
-    <a href="https://github.com/DioxusLabs/dioxus/blob/master/README.md"> 中文 </a>
+    <a href="https://github.com/DioxusLabs/dioxus/blob/master/translations/pt-br/README.md"> PT-BR </a>
   </h3>
 </div>
 
-
 <br/>
 
-Dioxus 是一个可移植、高性能的框架，用于在 Rust 中构建跨平台的用户界面。
+Dioxus 是一个可移植的、高性能的、符合人体工程学的框架，使用 Rust 语言构建跨平台的用户界面。
 
 ```rust
 fn app(cx: Scope) -> Element {
-    let mut count = use_state(&cx, || 0);
+    let mut count = use_state(cx, || 0);
 
     cx.render(rsx! {
         h1 { "High-Five counter: {count}" }
@@ -75,103 +64,111 @@ fn app(cx: Scope) -> Element {
 }
 ```
 
-Dioxus 可用于制作 网页程序、桌面应用、静态站点、移动端应用。
-
-Dioxus 为不同的平台都提供了很好的开发文档。
-
-如果你会使用 React ，那 Dioxus 对你来说会很简单。 
-
-### 项目特点:
-- 对桌面应用的原生支持。
-- 强大的状态管理工具。
-- 支持所有 HTML 标签，监听器和事件。
-- 超高的内存使用率，稳定的组件分配器。
-- 多通道异步调度器，超强的异步支持。
-- 更多信息请查阅： [版本发布文档](https://dioxuslabs.com/blog/introducing-dioxus/).
-
-### 示例
-
-本项目中的所有例子都是 `桌面应用` 程序，请使用 `cargo run --example XYZ` 运行这些例子。
+Dioxus 可用于生成 网页前端、桌面应用、静态网站、移动端应用、TUI程序、等多类平台应用。
 
-```
-cargo run --example EXAMPLE
-```
+如果你能够熟悉使用 React 框架，那 Dioxus 对你来说将非常简单。
 
-## 进入学习
+## 独特的特性:
+- 桌面程序完全基于本地环境运行（并非 Electron 的封装）
+- 符合人体工程学的设计以及拥有强大的状态管理
+- 全面的内联文档 - 包含所有 HTML 元素、监听器 和 事件 指南。
+- 极快的运行效率和极高的内存效率
+- 智能项目热更新和高效的项目迭代
+- 一流的异步支持🔥
+- 更多内容请查看 [版本发布信息](https://dioxuslabs.com/blog/introducing-dioxus/).
 
-<table style="width:100%" align="center">
-    <tr >
-        <th><a href="https://dioxuslabs.com/guide/">教程</a></th>
-        <th><a href="https://dioxuslabs.com/reference/web">网页端</a></th>
-        <th><a href="https://dioxuslabs.com/reference/desktop/">桌面端</a></th>
-        <th><a href="https://dioxuslabs.com/reference/ssr/">SSR</a></th>
-        <th><a href="https://dioxuslabs.com/reference/mobile/">移动端</a></th>
-        <th><a href="https://dioxuslabs.com/guide/concepts/managing_state.html">状态管理</a></th>
+## 已支持的平台
+<div align="center">
+  <table style="width:100%">
     <tr>
-</table>
-
-
-## Dioxus 项目
-
-| 文件浏览器 (桌面应用)                                                                                                                                                           | WiFi 扫描器 (桌面应用)                                                                                                                                                                 | Todo管理 (所有平台)                                                                                                                                                     | 商城系统 (SSR/liveview)                                                                                                                                                               |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [![File Explorer](https://github.com/DioxusLabs/example-projects/raw/master/file-explorer/image.png)](https://github.com/DioxusLabs/example-projects/blob/master/file-explorer) | [![Wifi Scanner Demo](https://github.com/DioxusLabs/example-projects/raw/master/wifi-scanner/demo_small.png)](https://github.com/DioxusLabs/example-projects/blob/master/wifi-scanner) | [![TodoMVC example](https://github.com/DioxusLabs/example-projects/raw/master/todomvc/example.png)](https://github.com/DioxusLabs/example-projects/blob/master/todomvc) | [![E-commerce Example](https://github.com/DioxusLabs/example-projects/raw/master/ecommerce-site/demo.png)](https://github.com/DioxusLabs/example-projects/blob/master/ecommerce-site) |
-
-
-查看 [awesome-dioxus](https://github.com/DioxusLabs/awesome-dioxus) 查看更多有趣（~~NiuBi~~）的项目！
-
-## 为什么使用 Dioxus 和 Rust ？
-
-TypeScript 是一个不错的 JavaScript 拓展集，但它仍然算是 JavaScript。
-
-TS 代码运行效率不高，而且有大量的配置项。
+      <td><em>网站项目</em></td>
+      <td>
+        <ul>
+          <li>使用 WebAssembly 直接对 DOM 进行渲染</li>
+          <li>为 SSR 提供预渲染或作为客户端使用</li>
+          <li>简单的 "Hello World" 仅仅 65kb, 媲美 React 框架</li>
+          <li>CLI 提供热更新支持，方便项目快速迭代</li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td><em>桌面应用</em></td>
+      <td>
+        <ul>
+          <li>使用 Webview 进行渲染 或 使用 WGPU 和 Skia（试验性的）</li>
+          <li>无多余配置，使用 `cargo build` 即可快速构建</li>
+          <li>对原生系统的全面支持</li>
+          <li>支持 Macos、Linux、Windows 等系统，极小的二进制文件</li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td><em>移动端应用</em></td>
+      <td>
+        <ul>
+          <li>使用 Webview 进行渲染 或 使用 WGPU 和 Skia（试验性的）</li>
+          <li>支持 IOS 和 安卓系统</li>
+          <li><em>显著的</em> 性能强于 React Native 框架 </li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td><em>Liveview</em></td>
+      <td>
+        <ul>
+          <li>使用服务器渲染组件与应用程序</li>
+          <li>与受欢迎的后端框架进行融合（Axum、Wrap）</li>
+          <li>及低的延迟</li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td><em>终端程序</em></td>
+      <td>
+        <ul>
+          <li>在终端程序中渲染，类似于： <a href="https://github.com/vadimdemedes/ink"> ink.js</a></li>
+          <li>支持 CSS 相关模型（类似于浏览器内的）</li>
+          <li>Built-in widgets like text input, buttons, and focus system</li>
+        </ul>
+      </td>
+    </tr>
+  </table>
+</div>
 
-相比之下，Dioxus 使用 Rust 编写将大大的提高效能。
+## Why Dioxus?
 
-使用 Rust 开发，我们能获得：
+目前有非常多的应用开发选择，为什么偏偏要选择 Dioxus 呢？
 
-- 静态类型支持。
-- 变量默认不变性。
-- 简单直观的模块系统。
-- 内部集成的文档系统。
-- 先进的模式匹配系统。
-- 简洁、高效、强大的迭代器。
-- 内置的 单元测试 / 集成测试。
-- 优秀的异常处理系统。
-- 强大且健全的标准库。
-- 灵活的 `宏` 系统。
-- 使用 `crates.io` 管理包。
+首先，Dioxus将开发者的经验放在首位。这反映在 Dioxus 特有的各种功能上。
 
-Dioxus 能为开发者提供的：
+- 自动格式化 RSX 格式代码，并拥有 VSCode 插件作为支持。
+- 热加载基于 RSX 代码解析器，同时支持桌面程序和网页程序。
+- 强调文档的重要性，我们对所有 HTML 元素都提供文档支持。
 
-- 安全使用数据结构。
-- 安全的错误处理结果。
-- 拥有原生移动端的性能。
-- 直接访问系统的IO层。
+Dioxus 也是一个可扩展化的平台。
 
-Dioxus 使 Rust 应用程序的编写速度和 React 应用程序一样快，但提供了更多的健壮性，让团队能在更短的时间内做出强大功能。
+- 通过实现一个非常简单的优化堆栈机，轻松构建新的渲染器。
+- 构建并分享开发者自定义的组件代码。
 
-### 不建议使用 Dioxus 的情况？
+Dioxus 那么优秀，但什么时候它不适合我呢？
+- 它还没有完全成熟。api仍在变化，可能会出现故障（尽管我们试图避免）
+- 您需要运行在 no-std 的环境之中。
+- 你不喜欢使用 React-like 的方式构建 UI 项目。
 
-您不该在这些情况下使用 Dioxus ：
 
-- 您不喜欢类似 React 的开发风格。
-- 您需要一个 `no-std` 的渲染器。
-- 您希望应用运行在 `不支持 Wasm 或 asm.js` 的浏览器。
-- 您需要一个 `Send + Sync` UI 解决方案（目前不支持）。
+## 贡献代码
+- 在我们的 [问题追踪](https://github.com/dioxuslabs/dioxus/issues) 中汇报你遇到的问题。
+- 加入我们的 Discord 与我们交流。
 
-### 项目生态
 
-想要加入我们一起为 Dioxus 生态努力吗？有很多项目都能在您的帮助下获得改变：
+<a href="https://github.com/dioxuslabs/dioxus/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=dioxuslabs/dioxus&max=30&columns=10" />
+</a>
 
-- [TUI 渲染器](https://github.com/dioxusLabs/rink)
-- [CLI 开发工具](https://github.com/dioxusLabs/cli)
-- [官网及文档](https://github.com/dioxusLabs/docsite)
-- 动态网站 及 Web 服务器
-- 资源系统
+## 开源协议
 
-## 协议
+本项目使用 [MIT license].
 
-这个项目使用 [MIT 协议].
+[mit license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT
 
-[MIT 协议]: https://github.com/dioxuslabs/dioxus/blob/master/LICENSE
+除非您另有明确声明，否则有意提交的任何贡献将被授权为 MIT 协议，没有任何附加条款或条件。

notes/SOLVEDPROBLEMS.md

@@ -406,8 +406,8 @@ enum Patch {
 ```
 
 ```rust
-let node_ref = use_node_ref(&cx);
-use_effect(&cx, || {
+let node_ref = use_node_ref(cx);
+use_effect(cx, || {
 
 }, []);
 div { ref: node_ref,

notes/header.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1007 197"><style>
+@keyframes a0_t { 0% { transform: translate(225px,339.9px) scale(0,1) translate(-89.5px,-24px); } 35% { transform: translate(225px,339.9px) scale(0,1) translate(-89.5px,-24px); animation-timing-function: cubic-bezier(.6,0,.4,1); } 45% { transform: translate(225px,339.9px) scale(1,1) translate(-89.5px,-24px); } 50% { transform: translate(225px,339.9px) scale(1,1) translate(-89.5px,-24px); animation-timing-function: cubic-bezier(.6,0,.4,1); } 60% { transform: translate(225px,339.9px) scale(0,1) translate(-89.5px,-24px); } 100% { transform: translate(225px,339.9px) scale(0,1) translate(-89.5px,-24px); } }
+@keyframes a1_t { 0% { transform: translate(225px,348.9px) scale(0,1) translate(-41.5px,-11px); } 20% { transform: translate(225px,348.9px) scale(0,1) translate(-41.5px,-11px); animation-timing-function: cubic-bezier(.6,0,.4,1); } 30% { transform: translate(225px,348.9px) scale(1,1) translate(-41.5px,-11px); } 35% { transform: translate(225px,348.9px) scale(1,1) translate(-41.5px,-11px); } 45% { transform: translate(225px,348.9px) scale(0,1) translate(-41.5px,-11px); } 100% { transform: translate(225px,348.9px) scale(0,1) translate(-41.5px,-11px); } }
+@keyframes a3_t { 0% { transform: translate(225px,198.9px) rotate(-90deg); } 10% { transform: translate(225px,198.9px) rotate(-90deg); } 20% { transform: translate(225px,198.9px) rotate(-90deg); animation-timing-function: cubic-bezier(.6,0,.4,1); } 30% { transform: translate(225px,198.9px) rotate(0deg); } 35% { transform: translate(225px,198.9px) rotate(0deg); } 45% { transform: translate(225px,198.9px) rotate(0deg); } 50% { transform: translate(225px,198.9px) rotate(0deg); animation-timing-function: cubic-bezier(.6,0,.4,1); } 60% { transform: translate(225px,198.9px) rotate(-90deg); } 65% { transform: translate(225px,198.9px) rotate(-90deg); } 75% { transform: translate(225px,198.9px) rotate(-90deg); } 100% { transform: translate(225px,198.9px) rotate(-90deg); } }
+@keyframes a2_t { 0% { transform: translate(-200px,-167px); animation-timing-function: cubic-bezier(.6,0,.4,1); } 10% { transform: translate(-150px,-80px); } 20% { transform: translate(-150px,-80px); animation-timing-function: cubic-bezier(.6,0,.4,1); } 30% { transform: translate(-200px,-123px); } 35% { transform: translate(-200px,-123px); animation-timing-function: cubic-bezier(.6,0,.4,1); } 45% { transform: translate(-150px,-100px); } 50% { transform: translate(-150px,-100px); animation-timing-function: cubic-bezier(.6,0,.4,1); } 60% { transform: translate(-150px,-80px); } 65% { transform: translate(-150px,-80px); animation-timing-function: cubic-bezier(.6,0,.4,1); } 75% { transform: translate(-217px,-200px); } 100% { transform: translate(-217px,-200px); } }
+@keyframes a2_o { 0% { opacity: 0; animation-timing-function: cubic-bezier(.6,0,.4,1); } 10% { opacity: 1; } 65% { opacity: 1; animation-timing-function: cubic-bezier(.6,0,.4,1); } 75% { opacity: 0; } 100% { opacity: 0; } }
+@keyframes a2_sw { 0% { stroke-width: 30px; animation-timing-function: cubic-bezier(.6,0,.4,1); } 10% { stroke-width: 8px; } 65% { stroke-width: 8px; animation-timing-function: cubic-bezier(.6,0,.4,1); } 75% { stroke-width: 30px; } 100% { stroke-width: 30px; } }
+@keyframes a2_w { 0% { width: 400px; animation-timing-function: cubic-bezier(.6,0,.4,1); } 10% { width: 300px; } 20% { width: 300px; animation-timing-function: cubic-bezier(.6,0,.4,1); } 30% { width: 400px; } 35% { width: 400px; animation-timing-function: cubic-bezier(.6,0,.4,1); } 45% { width: 300px; } 50% { width: 300px; } 60% { width: 300px; } 65% { width: 300px; animation-timing-function: cubic-bezier(.6,0,.4,1); } 75% { width: 434px; } 100% { width: 434px; } }
+@keyframes a2_h { 0% { height: 334px; animation-timing-function: cubic-bezier(.6,0,.4,1); } 10% { height: 160px; } 20% { height: 160px; animation-timing-function: cubic-bezier(.6,0,.4,1); } 30% { height: 246px; } 35% { height: 246px; animation-timing-function: cubic-bezier(.6,0,.4,1); } 45% { height: 200px; } 50% { height: 200px; animation-timing-function: cubic-bezier(.6,0,.4,1); } 60% { height: 160px; } 65% { height: 160px; animation-timing-function: cubic-bezier(.6,0,.4,1); } 75% { height: 400px; } 100% { height: 400px; } }
+@keyframes a4_t { 0% { transform: translate(143.5px,48.9px); } 10% { transform: translate(180.5px,98.9px); } 100% { transform: translate(180.5px,98.9px); } }
+@keyframes a4_w { 0% { width: 168.5px; } 10% { width: 94.5px; } 100% { width: 94.5px; } }
+@keyframes a4_h { 0% { height: 302px; } 10% { height: 202px; } 100% { height: 202px; } }
+@keyframes a5_t { 0% { transform: translate(217px,324.9px); animation-timing-function: cubic-bezier(.6,0,.4,1); } 10% { transform: translate(190px,324.9px); } 20% { transform: translate(190px,324.9px); } 30% { transform: translate(190px,324.9px); } 100% { transform: translate(190px,324.9px); } }
+@keyframes a5_o { 0% { opacity: 0; animation-timing-function: cubic-bezier(.6,0,.4,1); } 10% { opacity: 1; } 20% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } }
+@keyframes a5_w { 0% { width: 16px; animation-timing-function: cubic-bezier(.6,0,.4,1); } 10% { width: 70px; } 20% { width: 70px; } 30% { width: 70px; } 100% { width: 70px; } }
+@keyframes a6_t { 0% { transform: translate(217px,324.9px); } 50% { transform: translate(217px,324.9px); animation-timing-function: cubic-bezier(.6,0,.4,1); } 60% { transform: translate(190px,324.9px); } 65% { transform: translate(190px,324.9px); } 75% { transform: translate(190px,324.9px); } 100% { transform: translate(190px,324.9px); } }
+@keyframes a6_o { 0% { opacity: 0; } 50% { opacity: 0; animation-timing-function: cubic-bezier(.6,0,.4,1); } 60% { opacity: 1; } 65% { opacity: 1; animation-timing-function: cubic-bezier(.6,0,.4,1); } 75% { opacity: 0; } 100% { opacity: 0; } }
+@keyframes a6_w { 0% { width: 16px; } 50% { width: 16px; animation-timing-function: cubic-bezier(.6,0,.4,1); } 60% { width: 70px; } 65% { width: 70px; } 75% { width: 70px; } 100% { width: 70px; } }
+@keyframes a7_t { 0% { transform: translate(225px,198.9px) scale(1.5,1.5) translate(-42.3px,-93px); animation-timing-function: cubic-bezier(.6,0,.4,1); } 10% { transform: translate(225px,198.9px) scale(1,1) translate(-42.3px,-93px); } 20% { transform: translate(225px,198.9px) scale(1,1) translate(-42.3px,-93px); animation-timing-function: cubic-bezier(.6,0,.4,1); } 25% { transform: translate(225px,198.9px) scale(.8,.8) translate(-42.3px,-93px); animation-timing-function: cubic-bezier(.6,0,.4,1); } 30% { transform: translate(225px,198.9px) scale(1,1) translate(-42.3px,-93px); } 35% { transform: translate(225px,198.9px) scale(1,1) translate(-42.3px,-93px); animation-timing-function: cubic-bezier(.4,0,.6,1); } 45% { transform: translate(225px,198.9px) scale(.8,.8) translate(-42.3px,-93px); } 50% { transform: translate(225px,198.9px) scale(.8,.8) translate(-42.3px,-93px); animation-timing-function: cubic-bezier(.4,0,.6,1); } 55% { transform: translate(225px,198.9px) scale(.7,.7) translate(-42.3px,-93px); animation-timing-function: cubic-bezier(.4,0,.6,1); } 60% { transform: translate(225px,198.9px) scale(1,1) translate(-42.3px,-93px); } 65% { transform: translate(225px,198.9px) scale(1,1) translate(-42.3px,-93px); animation-timing-function: cubic-bezier(.4,0,.6,1); } 75% { transform: translate(225px,198.9px) scale(1.5,1.5) translate(-42.3px,-93px); } 100% { transform: translate(225px,198.9px) scale(1.5,1.5) translate(-42.3px,-93px); } }
+</style><defs><symbol id="Symbol-2" preserveAspectRatio="none" width="111.5" height="186" viewBox="0 0 111.5 186" overflow="visible"><g transform="translate(8.5,4.5)"><rect x="4" width="85" height="8" fill="#d9d9d9"/><rect x="4" y="26" width="85" height="8" fill="#d9d9d9"/><rect x="25" y="56" width="43" height="8" fill="#d9d9d9"/><rect width="85" height="8" fill="#d9d9d9" transform="translate(46.5,175) rotate(180) scale(-1,1) translate(-42.5,-4)"/><rect width="85" height="8" fill="#d9d9d9" transform="translate(46.5,149) rotate(180) scale(-1,1) translate(-42.5,-4)"/><rect width="43" height="8" fill="#d9d9d9" transform="translate(46.5,119) rotate(180) scale(-1,1) translate(-21.5,-4)"/><path d="M0 4c0 53 94.5 115 94.5 169" stroke="#3cc4dc" stroke-width="17" stroke-linecap="square" fill="none"/><path d="M94.5 4c0 53-94.5 115-94.5 169" stroke="#fb422d" stroke-width="17" stroke-linecap="square" fill="none"/></g></symbol><symbol id="Symbol-5" preserveAspectRatio="none" width="84.5" height="186" viewBox="0 0 84.5 186" overflow="visible"><g transform="translate(42.3,93) scale(5.352,6.9) translate(-16,60)"><g transform="translate(-34.9,-125.8)"><g transform="translate(24,5)"><path d="M33 46.5c0 3.1-0.8 5.5-2.2 7.4c-1.4 1.9-3.3 3.6-5.4 5.4c-2.2 1.7-4.5 3.6-6.3 6.2c-1.8 2.5-3.1 5.5-3.1 9.5h4.7c0-3.1 .9-5.4 2.2-7.3c1.4-1.9 3.3-3.5 5.5-5.3c2.1-1.8 4.4-3.7 6.2-6.2c1.8-2.6 3.1-5.6 3.1-9.7Z" fill="#e96020"/><path d="M20.4 70.7c-0.6 0-1 .5-1 1.1c0 .7 .4 1.2 1 1.2h12.9c.7 0 1.2-0.5 1.2-1.2c0-0.6-0.5-1.1-1.2-1.1Z" fill="#2d323b"/><path d="M21.8 66.6c-0.7 0-1 .6-1 1.2c0 .6 .3 1 .9 1h10.3c.6 0 1.1-0.5 1.1-1.1c0-0.6-0.5-1.1-1.1-1.1Z" fill="#2d323b"/><path d="M21.8 53c-0.7 0-1.2 .5-1.1 1.1c0 .6 .4 1.1 1.1 1.1h10.2c.6 0 .9-0.6 .9-1.2c0-0.6-0.3-1-0.9-1Z" fill="#2d323b"/><path d="M20.4 48.8c-0.6 0-1.2 .5-1.2 1.1c0 .7 .6 1.2 1.2 1.2h12.9c.7 0 1-0.5 1-1.1c0-0.7-0.3-1.2-1-1.2Z" fill="#2d323b"/><path d="M16 46.5c0 4.1 1.3 7.1 3.1 9.7c1.8 2.5 4.1 4.4 6.3 6.2c2.1 1.8 4 3.6 5.4 5.5c1.4 1.9 2.2 4 2.2 7.1h4.7c0-4-1.3-7.1-3.1-9.6c-1.8-2.5-4.1-4.4-6.2-6.2c-2.2-1.8-4.1-3.4-5.5-5.3c-1.3-1.9-2.2-4.3-2.2-7.4Z" fill="#00a8d6"/></g></g></g></symbol></defs><rect width="1007" height="197" stroke="#0f1116" fill="#0f1116" stroke-width="0"/><path fill="#fff" d="M83.3 106.1v-65.7h17c4.2 0 7.9 .8 11 2.4c3.1 1.6 5.5 3.9 7.2 6.9c1.7 2.9 2.6 6.4 2.6 10.4v26.2c0 4-0.9 7.5-2.6 10.5c-1.7 3-4.1 5.3-7.2 6.9c-3.1 1.6-6.8 2.4-11 2.4Zm8.1-7.2h8.9c4 0 7.1-1.1 9.3-3.3c2.3-2.3 3.4-5.3 3.4-9.3v-26.2c0-3.9-1.1-7-3.4-9.2c-2.2-2.2-5.3-3.3-9.3-3.3h-8.9Zm45.3 7.2v-7.4h17.5v-34.7h-15.7v-7.4h23.8v42.1h16.7v7.4Zm20.7-58.4c-2 0-3.6-0.5-4.7-1.5c-1.2-1.1-1.7-2.4-1.7-4.2c0-1.8 .5-3.2 1.7-4.3c1.1-1 2.7-1.5 4.7-1.5c1.9 0 3.5 .5 4.6 1.5c1.2 1.1 1.7 2.5 1.7 4.3c0 1.8-0.5 3.1-1.7 4.2c-1.1 1-2.7 1.5-4.6 1.5Zm52.6 59.1c-6 0-10.7-1.7-14.2-5.1c-3.4-3.4-5.1-8-5.1-13.8v-13.1c0-5.9 1.7-10.5 5.1-13.9c3.5-3.3 8.2-5 14.2-5c6 0 10.7 1.7 14.2 5c3.4 3.4 5.2 8 5.2 13.8v13.2c0 5.8-1.8 10.4-5.2 13.8c-3.5 3.4-8.2 5.1-14.2 5.1Zm0-7.2c3.5 0 6.3-1 8.3-3c2-1.9 3-4.8 3-8.7v-13.1c0-3.9-1-6.8-3-8.8c-2-1.9-4.8-2.9-8.3-2.9c-3.5 0-6.2 1-8.2 2.9c-2 2-3 4.9-3 8.8v13.1c0 3.9 1 6.8 3 8.7c2 2 4.7 3 8.2 3Zm31.5 6.5l17.6-25.5l-16.5-24h9.5l9.8 15.3c.5 .7 .9 1.4 1.2 2.2c.4 .7 .8 1.4 1 1.8c.2-0.4 .5-1.1 .8-1.8c.4-0.8 .8-1.5 1.3-2.2l9.9-15.3h9.4l-16.5 24.1l17.5 25.4h-9.5l-10.7-16.2c-0.4-0.7-0.8-1.4-1.2-2.3c-0.4-0.9-0.7-1.6-1-2.1c-0.2 .5-0.6 1.2-1 2.1c-0.5 .9-1 1.6-1.4 2.3l-10.7 16.2Zm76.4 .9c-5.7 0-10.2-1.7-13.7-5.1c-3.4-3.4-5.1-8-5.1-13.8v-31.5h8.1v31.5c0 3.7 1 6.6 2.9 8.7c1.9 2.1 4.5 3.1 7.8 3.1c3.4 0 6-1 8-3.1c1.9-2.1 2.9-5 2.9-8.7v-31.5h8.1v31.5c0 5.8-1.7 10.4-5.2 13.8c-3.5 3.4-8.1 5.1-13.8 5.1Zm52.6-0.2c-5.1 0-9.3-1.2-12.5-3.5c-3.3-2.3-4.9-5.5-4.9-9.6h8.3c0 1.8 .9 3.3 2.6 4.3c1.8 1.1 4 1.6 6.6 1.6h3.8c3.2 0 5.6-0.6 7.1-1.9c1.6-1.3 2.4-3 2.4-5.2c0-2.1-0.8-3.8-2.2-5c-1.5-1.2-3.6-2-6.4-2.5l-6.6-1c-5-0.9-8.6-2.4-10.9-4.7c-2.4-2.3-3.5-5.5-3.5-9.5c0-4.5 1.4-7.9 4.3-10.3c2.9-2.4 7.1-3.6 12.6-3.6h3.4c5 0 9.1 1.1 12.1 3.4c3 2.2 4.6 5.2 4.6 8.9h-8.3c0-1.6-0.8-2.8-2.3-3.7c-1.5-1-3.6-1.4-6.3-1.4h-3.4c-2.8 0-5 .6-6.5 1.7c-1.5 1.2-2.3 2.9-2.3 5c0 3.6 2.5 5.8 7.6 6.7l6.7 1.1c5.3 .8 9.2 2.4 11.7 4.6c2.4 2.3 3.6 5.6 3.6 9.9c0 4.6-1.5 8.2-4.4 10.8c-2.9 2.6-7.3 3.9-13.2 3.9Z"/><path fill="#fff" d="M91 164c-2 0-3.6-0.6-4.7-1.7c-1.1-1.1-1.6-2.7-1.6-4.6v-15.9h2.7v15.9c0 1.2 .3 2.2 .9 2.8c.6 .7 1.5 1.1 2.7 1.1c1.2 0 2.1-0.4 2.7-1.1c.6-0.7 .9-1.6 .9-2.8v-15.9h2.7v15.9c0 2-0.5 3.5-1.6 4.6c-1.1 1.1-2.6 1.7-4.7 1.7Zm17.5-0.1c-1.7 0-3.1-0.3-4.2-1.1c-1.1-0.8-1.6-1.9-1.6-3.2h2.8c0 .6 .3 1.1 .8 1.4c.6 .4 1.4 .5 2.2 .5h1.3c1.1 0 1.9-0.2 2.4-0.6c.5-0.4 .8-1 .8-1.7c0-0.7-0.3-1.3-0.8-1.7c-0.5-0.4-1.2-0.7-2.1-0.8l-2.2-0.4c-1.7-0.3-2.9-0.8-3.6-1.5c-0.8-0.8-1.2-1.9-1.2-3.2c0-1.5 .5-2.6 1.4-3.4c1-0.8 2.4-1.2 4.2-1.2h1.2c1.6 0 3 .3 4 1.1c1 .7 1.5 1.7 1.5 3h-2.7c0-0.6-0.3-1-0.8-1.3c-0.5-0.3-1.2-0.4-2.1-0.4h-1.1c-1 0-1.7 .2-2.2 .5c-0.5 .4-0.8 1-0.8 1.7c0 1.2 .9 1.9 2.6 2.2l2.2 .4c1.8 .3 3.1 .8 3.9 1.5c.8 .8 1.2 1.9 1.2 3.3c0 1.6-0.5 2.8-1.5 3.6c-0.9 .9-2.4 1.3-4.4 1.3Zm18.5 .1c-1.3 0-2.4-0.3-3.4-0.8c-1-0.5-1.7-1.2-2.3-2.2c-0.5-0.9-0.8-2-0.8-3.3v-4.5c0-1.3 .3-2.4 .8-3.3c.6-1 1.3-1.7 2.3-2.2c1-0.5 2.1-0.8 3.4-0.8c1.3 0 2.4 .3 3.4 .8c1 .5 1.7 1.2 2.3 2.2c.5 .9 .8 2 .8 3.3l-0.1 2.9h-10.2v1.6c0 1.3 .3 2.3 1 3c.6 .7 1.6 1 2.8 1c1 0 1.9-0.2 2.5-0.5c.7-0.4 1-1 1.2-1.7h2.7c-0.2 1.4-0.9 2.5-2 3.3c-1.2 .8-2.7 1.2-4.4 1.2Zm-3.8-9.9h7.6v-0.9c0-1.3-0.3-2.3-1-3c-0.6-0.7-1.6-1-2.8-1c-1.2 0-2.2 .3-2.8 1c-0.7 .7-1 1.7-1 3Zm16.1 9.6v-16.5h2.7v3.2c.1-1.1 .6-2 1.4-2.6c.7-0.6 1.7-0.9 3-0.9c1.7 0 3.1 .5 4.1 1.6c1 1.1 1.5 2.6 1.5 4.5v1.1h-2.7v-0.9c0-1.3-0.3-2.2-0.9-2.9c-0.7-0.7-1.6-1.1-2.8-1.1c-2.4 0-3.6 1.4-3.6 4v10.5Zm35.8 0v-2.5h4.5v-16.9h-4.5v-2.5h11.8l-0.1 2.5h-4.4v16.9h4.4v2.5Zm17.7 0v-16.5h2.7v3.2c.1-1.1 .6-2 1.3-2.6c.8-0.6 1.8-0.9 3.1-0.9c1.6 0 3 .5 3.9 1.5c1 1.1 1.5 2.4 1.5 4.2v11.1h-2.7v-10.8c0-1.2-0.3-2.1-0.9-2.7c-0.7-0.6-1.5-1-2.6-1c-1.1 0-2 .4-2.7 1.1c-0.6 .6-0.9 1.6-0.9 2.9v10.5Zm26 0c-1.4 0-2.4-0.4-3.3-1.2c-0.8-0.8-1.2-1.8-1.2-3.1v-9.7h-4.7v-2.5h4.7v-4.7h2.7v4.7h6.6v2.5h-6.6v9.7c0 .5 .2 1 .5 1.3c.3 .4 .8 .5 1.3 .5h4.5v2.5Zm16.2 .3c-1.3 0-2.4-0.3-3.4-0.8c-1-0.5-1.7-1.2-2.3-2.2c-0.5-0.9-0.7-2-0.7-3.3v-4.5c0-1.3 .2-2.4 .7-3.3c.6-1 1.3-1.7 2.3-2.2c1-0.5 2.1-0.8 3.4-0.8c1.3 0 2.4 .3 3.4 .8c1 .5 1.7 1.2 2.3 2.2c.5 .9 .8 2 .8 3.3l-0.1 2.9h-10.2v1.6c0 1.3 .3 2.3 1 3c.6 .7 1.6 1 2.8 1c1 0 1.9-0.2 2.5-0.5c.7-0.4 1-1 1.2-1.7h2.7c-0.2 1.4-0.9 2.5-2 3.3c-1.2 .8-2.7 1.2-4.4 1.2Zm-3.8-9.9h7.6v-0.9c0-1.3-0.3-2.3-1-3c-0.6-0.7-1.6-1-2.8-1c-1.2 0-2.2 .3-2.8 1c-0.7 .7-1 1.7-1 3Zm16.1 9.6v-16.5h2.7v3.2c.1-1.1 .6-2 1.4-2.6c.7-0.6 1.7-0.9 3-0.9c1.7 0 3.1 .5 4.1 1.6c1 1.1 1.5 2.6 1.5 4.5v1.1h-2.7v-0.9c0-1.3-0.3-2.2-0.9-2.9c-0.7-0.7-1.6-1.1-2.8-1.1c-2.4 0-3.6 1.4-3.6 4v10.5Zm21.3 0v-12.4h-4.8v-2.4h4.8v-2.9c0-1.3 .4-2.3 1.2-3.1c.9-0.7 2-1.1 3.4-1.1h4.9v2.5h-4.9c-1.3 0-1.9 .5-1.9 1.7v2.9h6.8v2.4h-6.8v12.4Zm19 .3c-1.8 0-3.1-0.4-4.1-1.3c-1-0.9-1.5-2.1-1.5-3.6c0-1.6 .5-2.8 1.5-3.7c1-0.9 2.3-1.3 4-1.3h5.1v-1.6c0-1-0.3-1.8-0.9-2.4c-0.6-0.5-1.5-0.8-2.5-0.8c-1 0-1.8 .2-2.5 .6c-0.6 .4-1 1-1.2 1.7h-2.7c.1-1 .4-1.8 1-2.5c.6-0.7 1.3-1.2 2.2-1.6c1-0.4 2-0.6 3.2-0.6c1.9 0 3.4 .5 4.5 1.5c1.1 1 1.6 2.3 1.6 4v11.3h-2.6v-3.1h-0.1c-0.1 1-0.6 1.9-1.5 2.5c-0.9 .6-2.1 .9-3.5 .9Zm.6-2.1c1.3 0 2.4-0.3 3.2-1c.8-0.6 1.2-1.4 1.2-2.4v-2.4h-5c-0.9 0-1.6 .3-2.2 .8c-0.5 .5-0.7 1.1-0.7 2c0 .9 .3 1.6 .9 2.2c.6 .5 1.5 .8 2.6 .8Zm18.9 2.1c-2 0-3.6-0.6-4.8-1.7c-1.2-1.1-1.7-2.6-1.7-4.6v-4.5c0-2 .5-3.5 1.7-4.6c1.2-1.1 2.8-1.7 4.8-1.7c1.9 0 3.5 .5 4.6 1.5c1.2 1 1.8 2.4 1.8 4.2h-2.7c0-1.1-0.4-1.9-1-2.4c-0.7-0.6-1.6-0.9-2.7-0.9c-1.2 0-2.1 .3-2.8 1c-0.7 .7-1.1 1.6-1.1 2.9l.1 4.5c-0.1 1.2 .3 2.2 1 2.9c.7 .7 1.6 1 2.8 1c1.1 0 2-0.3 2.7-0.9c.6-0.6 1-1.4 1-2.4h2.7c0 1.8-0.6 3.2-1.8 4.2c-1.1 1-2.7 1.5-4.6 1.5Zm17.9 0c-1.3 0-2.4-0.3-3.4-0.8c-1-0.5-1.7-1.2-2.3-2.2c-0.5-0.9-0.7-2-0.7-3.3v-4.5c0-1.3 .2-2.4 .7-3.3c.6-1 1.3-1.7 2.3-2.2c1-0.5 2.1-0.8 3.4-0.8c1.3 0 2.4 .3 3.4 .8c1 .5 1.7 1.2 2.3 2.2c.5 .9 .8 2 .8 3.3v2.9h-10.3v1.6c0 1.3 .3 2.3 1 3c.6 .7 1.6 1 2.8 1c1 0 1.9-0.2 2.5-0.5c.7-0.4 1.1-1 1.2-1.7h2.7c-0.2 1.4-0.9 2.5-2 3.3c-1.2 .8-2.7 1.2-4.4 1.2Zm-3.8-9.9h7.6v-0.9c0-1.3-0.3-2.3-1-3c-0.6-0.7-1.6-1-2.8-1c-1.2 0-2.2 .3-2.8 1c-0.7 .7-1 1.7-1 3Zm21.3 9.8c-1.7 0-3.1-0.3-4.2-1.1c-1.1-0.8-1.6-1.9-1.6-3.2h2.8c0 .6 .3 1.1 .8 1.4c.6 .4 1.4 .5 2.3 .5h1.2c1.1 0 1.9-0.2 2.4-0.6c.5-0.4 .8-1 .8-1.7c0-0.7-0.3-1.3-0.8-1.7c-0.5-0.4-1.2-0.7-2.1-0.8l-2.2-0.4c-1.6-0.3-2.9-0.8-3.6-1.5c-0.8-0.8-1.2-1.9-1.2-3.2c0-1.5 .5-2.6 1.4-3.4c1-0.8 2.4-1.2 4.2-1.2h1.2c1.7 0 3 .3 4 1.1c1 .7 1.5 1.7 1.5 3h-2.7c0-0.6-0.3-1-0.8-1.3c-0.5-0.3-1.2-0.4-2.1-0.4h-1.1c-1 0-1.7 .2-2.2 .5c-0.5 .4-0.8 1-0.8 1.7c0 1.2 .9 1.9 2.6 2.2l2.2 .4c1.8 .3 3.1 .8 3.9 1.5c.8 .8 1.2 1.9 1.2 3.3c0 1.6-0.5 2.8-1.5 3.6c-0.9 .9-2.4 1.3-4.3 1.3Zm38.3-0.2c-1.4 0-2.4-0.4-3.3-1.2c-0.8-0.8-1.2-1.8-1.2-3.2v-9.6h-4.6v-2.5h4.6v-4.7h2.7v4.7h6.6v2.5h-6.6v9.6c0 .6 .2 1.1 .5 1.4c.3 .4 .8 .5 1.3 .5h4.5v2.5Zm10 0v-21.9h2.7v8.6c.1-1.2 .6-2 1.3-2.6c.8-0.6 1.8-0.9 3.1-0.9c1.6 0 3 .5 3.9 1.5c1 1.1 1.5 2.4 1.5 4.2v11.1h-2.7v-10.8c0-1.2-0.3-2.1-0.9-2.7c-0.7-0.7-1.5-1-2.6-1c-1.1 0-2 .3-2.7 1c-0.6 .7-0.9 1.7-0.9 3v10.5Zm22.8 .3c-1.8 0-3.1-0.4-4.1-1.3c-1-0.9-1.5-2.1-1.5-3.7c0-1.5 .5-2.7 1.5-3.6c1-0.9 2.3-1.3 4-1.3h5.1v-1.7c0-1-0.3-1.7-0.9-2.3c-0.6-0.6-1.5-0.8-2.5-0.8c-1 0-1.8 .2-2.5 .6c-0.6 .4-1 1-1.2 1.7h-2.7c.1-1 .4-1.8 1-2.5c.6-0.7 1.3-1.2 2.2-1.6c1-0.4 2-0.6 3.2-0.6c1.9 0 3.4 .5 4.5 1.5c1.1 1 1.6 2.3 1.6 4v11.3h-2.6v-3.2h-0.1c-0.1 1.1-0.6 1.9-1.5 2.6c-0.9 .6-2.1 .9-3.5 .9Zm.6-2.1c1.3 0 2.4-0.4 3.2-1c.8-0.6 1.2-1.5 1.2-2.5v-2.3h-5c-0.9 0-1.6 .3-2.2 .8c-0.5 .5-0.7 1.1-0.7 2c0 .9 .3 1.6 .9 2.2c.6 .5 1.5 .8 2.6 .8Zm20.6 1.8c-1.4 0-2.4-0.4-3.3-1.2c-0.8-0.8-1.2-1.8-1.2-3.2v-9.6h-4.6v-2.5h4.6v-4.7h2.7v4.7h6.6v2.5h-6.6v9.6c0 .6 .2 1.1 .5 1.4c.3 .4 .8 .5 1.3 .5h4.5v2.5Zm28.5 0v-16.5h2.7v3.1c.1-1.1 .6-1.9 1.4-2.5c.7-0.6 1.7-0.9 3-0.9c1.7 0 3.1 .5 4.1 1.6c1 1.1 1.5 2.6 1.5 4.5v1.1h-2.7v-0.9c0-1.3-0.3-2.2-0.9-2.9c-0.7-0.7-1.6-1.1-2.8-1.1c-2.4 0-3.6 1.4-3.6 4v10.5Zm23.7 .3c-1.9 0-3.4-0.6-4.6-1.7c-1.1-1.1-1.7-2.7-1.7-4.6v-10.5h2.7v10.5c0 1.2 .3 2.2 1 2.9c.6 .7 1.5 1 2.6 1c1.1 0 2-0.3 2.6-1c.7-0.7 1-1.7 1-2.9v-10.5h2.7v10.5c0 1.9-0.6 3.5-1.7 4.6c-1.2 1.1-2.7 1.7-4.6 1.7Zm11.8-0.3v-16.5h2.7v3.1c.1-1.1 .6-1.9 1.3-2.5c.8-0.6 1.8-0.9 3.1-0.9c1.6 0 2.9 .5 3.9 1.5c1 1 1.5 2.4 1.5 4.2v11.1h-2.7v-10.8c0-1.2-0.3-2.1-0.9-2.7c-0.7-0.6-1.5-1-2.6-1c-1.1 0-2 .4-2.7 1.1c-0.6 .6-0.9 1.6-0.9 2.9v10.5Zm40.8 .3c-1.8 0-3.2-0.4-4.2-1.3c-1-0.9-1.5-2.1-1.5-3.7c0-1.5 .5-2.7 1.5-3.6c1-0.9 2.4-1.3 4.1-1.3h5.1v-1.7c0-1-0.3-1.7-0.9-2.3c-0.6-0.6-1.5-0.8-2.6-0.8c-0.9 0-1.7 .2-2.4 .6c-0.6 .4-1.1 1-1.2 1.6h-2.7c.1-0.9 .4-1.7 1-2.4c.6-0.7 1.3-1.2 2.2-1.6c1-0.4 2-0.6 3.1-0.6c1.9 0 3.4 .5 4.5 1.5c1.1 .9 1.7 2.3 1.7 4v11.3h-2.6v-3.2h-0.1c-0.1 1.1-0.6 1.9-1.5 2.6c-0.9 .6-2.1 .9-3.5 .9Zm.6-2.1c1.3 0 2.3-0.4 3.2-1c.8-0.6 1.2-1.5 1.2-2.5v-2.3h-5c-0.9 0-1.7 .3-2.2 .8c-0.5 .5-0.8 1.1-0.8 2c0 .9 .4 1.6 1 2.2c.6 .5 1.5 .8 2.6 .8Zm12.6 1.8v-16.5h2.7v3.1c.1-1.1 .6-1.9 1.3-2.5c.8-0.6 1.8-0.9 3.1-0.9c1.6 0 2.9 .5 3.9 1.5c1 1 1.5 2.4 1.5 4.2v11.1h-2.7v-10.8c0-1.2-0.3-2.1-0.9-2.7c-0.7-0.6-1.5-1-2.6-1c-1.1 0-2 .4-2.7 1.1c-0.6 .6-0.9 1.6-0.9 2.9v10.5Zm20.6 5.4l2.4-6.4l-6.3-15.5h2.9l4.1 10.2c.1 .3 .2 .7 .4 1.2c.1 .5 .2 .9 .3 1.2c.1-0.3 .2-0.7 .3-1.2c.1-0.5 .3-0.9 .4-1.2l3.8-10.2h2.8l-8.3 21.9Zm16.3-5.4l-2.7-16.5h2.4l1.6 11.7c.1 .4 .2 .9 .2 1.4c.1 .5 .1 1 .1 1.3h.2c0-0.3 0-0.8 .1-1.3c.1-0.5 .1-1 .2-1.4l1.8-11.7h2.7l1.9 11.7c.1 .4 .1 .9 .2 1.4c.1 .5 .1 1 .1 1.3h.2c0-0.3 .1-0.8 .1-1.3c.1-0.5 .2-1 .2-1.4l1.7-11.7h2.2l-2.7 16.5h-3l-1.8-11.4c0-0.6-0.1-1.1-0.2-1.7c-0.1-0.5-0.1-1-0.2-1.3h-0.1c0 .3-0.1 .8-0.1 1.3c-0.1 .6-0.2 1.1-0.3 1.7l-1.8 11.4Zm17.1 0v-21.9h2.7v8.5c.1-1.1 .6-1.9 1.3-2.5c.8-0.6 1.8-0.9 3.1-0.9c1.6 0 2.9 .5 3.9 1.5c1 1 1.5 2.4 1.5 4.2v11.1h-2.7v-10.8c0-1.2-0.3-2.1-0.9-2.7c-0.7-0.7-1.5-1-2.6-1c-1.1 0-2 .3-2.7 1c-0.6 .7-0.9 1.7-0.9 3v10.5Zm24.2 .3c-1.3 0-2.4-0.3-3.4-0.8c-1-0.5-1.7-1.2-2.3-2.2c-0.5-0.9-0.8-2-0.8-3.3v-4.5c0-1.3 .3-2.4 .8-3.3c.6-1 1.3-1.7 2.3-2.2c1-0.5 2.1-0.8 3.4-0.8c1.3 0 2.4 .3 3.4 .8c1 .5 1.7 1.2 2.3 2.2c.5 .9 .7 2 .7 3.3v2.9h-10.2v1.6c0 1.3 .3 2.3 1 3c.6 .7 1.6 1 2.8 1c1 0 1.9-0.2 2.5-0.5c.7-0.4 1-1 1.2-1.7h2.7c-0.2 1.4-0.9 2.5-2 3.3c-1.2 .8-2.7 1.2-4.4 1.2Zm-3.8-9.9h7.6v-0.9c0-1.3-0.3-2.3-1-3c-0.6-0.7-1.6-1.1-2.8-1.1c-1.2 0-2.2 .4-2.8 1.1c-0.7 .7-1 1.7-1 3Zm16.1 9.6v-16.5h2.7v3.1c.1-1.1 .6-1.9 1.3-2.5c.8-0.6 1.8-0.9 3.1-0.9c1.7 0 3.1 .5 4.1 1.6c1 1.1 1.5 2.6 1.5 4.5v1.1h-2.7v-0.9c0-1.3-0.3-2.2-0.9-2.9c-0.7-0.7-1.6-1.1-2.8-1.1c-2.4 0-3.6 1.4-3.6 4v10.5Zm23.7 .3c-1.3 0-2.4-0.3-3.4-0.8c-1-0.5-1.7-1.2-2.3-2.2c-0.5-0.9-0.8-2-0.8-3.3v-4.5c0-1.3 .3-2.4 .8-3.3c.6-1 1.3-1.7 2.3-2.2c1-0.5 2.1-0.8 3.4-0.8c1.3 0 2.4 .3 3.4 .8c1 .5 1.7 1.2 2.3 2.2c.5 .9 .7 2 .7 3.3v2.9h-10.2v1.6c0 1.3 .3 2.3 1 3c.6 .7 1.6 1 2.8 1c1 0 1.9-0.2 2.5-0.5c.7-0.4 1-1 1.2-1.7h2.7c-0.2 1.4-0.9 2.5-2 3.3c-1.2 .8-2.7 1.2-4.4 1.2Zm-3.8-9.9h7.6v-0.9c0-1.3-0.3-2.3-1-3c-0.6-0.7-1.6-1.1-2.8-1.1c-1.2 0-2.2 .4-2.8 1.1c-0.7 .7-1 1.7-1 3Z"/><g transform="translate(764,-14.5) scale(.431111,.440249) translate(-13.9,56.6)"><path fill="#e0e0e0" stroke="#e0e0e0" stroke-linejoin="round" d="M-50.7 4h278.2c10 0 9 0 9 0l41 40c0 0 1 0-9 0h-358c-9.9 0-9 0-9 0l38.8-40c0 0-0.9 0 9 0Z" stroke-width="10" transform="translate(225,339.9) scale(0,1) translate(-89.5,-24)" style="animation: 10s linear infinite both a0_t;"/><rect width="83" height="22" stroke="#fb422d" fill="#e0e0e0" rx="2" stroke-width="0" transform="translate(225,348.9) scale(0,1) translate(-41.5,-11)" style="animation: 10s linear infinite both a1_t;"/><g style="animation: 10s linear infinite both a3_t;"><rect width="400" height="334" stroke="#e0e0e0" fill="none" stroke-width="30" stroke-miterlimit="1" rx="10" opacity="0" transform="translate(225,198.9) rotate(-90) translate(-200,-167)" style="animation: 10s linear infinite both a2_t, 10s linear infinite both a2_o, 10s linear infinite both a2_sw, 10s linear infinite both a2_w, 10s linear infinite both a2_h;"/></g><use width="168.5" height="302" xlink:href="#Symbol-2" opacity="0" transform="translate(227.8,199.9) translate(-84.2,-151)" style="animation: 10s linear infinite both a4_t, 10s linear infinite both a4_w, 10s linear infinite both a4_h;"/><rect width="16" height="8" stroke="#fb422d" fill="#e0e0e0" stroke-width="0" rx="2" opacity="0" transform="translate(225,328.9) translate(-8,-4)" style="animation: 10s linear infinite both a5_t, 10s linear infinite both a5_o, 10s linear infinite both a5_w;"/><rect width="16" height="8" stroke="#fb422d" fill="#e0e0e0" stroke-width="0" rx="2" opacity="0" transform="translate(225,328.9) translate(-8,-4)" style="animation: 10s linear infinite both a6_t, 10s linear infinite both a6_o, 10s linear infinite both a6_w;"/><g transform="translate(225,198.9) scale(1.5,1.5) translate(-42.3,-93)" style="animation: 10s linear infinite both a7_t;"><g transform="translate(42.3,93) scale(5.352,6.9) translate(-16,60)"><g transform="translate(-34.9,-125.8)"><g transform="translate(24,5)"><path d="M33 46.5c0 3.1-0.8 5.5-2.2 7.4c-1.4 1.9-3.3 3.6-5.4 5.4c-2.2 1.7-4.5 3.6-6.3 6.2c-1.8 2.5-3.1 5.5-3.1 9.5h4.7c0-3.1 .9-5.4 2.2-7.3c1.4-1.9 3.3-3.5 5.5-5.3c2.1-1.8 4.4-3.7 6.2-6.2c1.8-2.6 3.1-5.6 3.1-9.7Z" fill="#e96020"/><path d="M20.4 70.7c-0.6 0-1 .5-1 1.1c0 .7 .4 1.2 1 1.2h12.9c.7 0 1.2-0.5 1.2-1.2c0-0.6-0.5-1.1-1.2-1.1Z" fill="#2d323b"/><path d="M21.8 66.6c-0.7 0-1 .6-1 1.2c0 .6 .3 1 .9 1h10.3c.6 0 1.1-0.5 1.1-1.1c0-0.6-0.5-1.1-1.1-1.1Z" fill="#2d323b"/><path d="M21.8 53c-0.7 0-1.2 .5-1.1 1.1c0 .6 .4 1.1 1.1 1.1h10.2c.6 0 .9-0.6 .9-1.2c0-0.6-0.3-1-0.9-1Z" fill="#2d323b"/><path d="M20.4 48.8c-0.6 0-1.2 .5-1.2 1.1c0 .7 .6 1.2 1.2 1.2h12.9c.7 0 1-0.5 1-1.1c0-0.7-0.3-1.2-1-1.2Z" fill="#2d323b"/><path d="M16 46.5c0 4.1 1.3 7.1 3.1 9.7c1.8 2.5 4.1 4.4 6.3 6.2c2.1 1.8 4 3.6 5.4 5.5c1.4 1.9 2.2 4 2.2 7.1h4.7c0-4-1.3-7.1-3.1-9.6c-1.8-2.5-4.1-4.4-6.2-6.2c-2.2-1.8-4.1-3.4-5.5-5.3c-1.3-1.9-2.2-4.3-2.2-7.4Z" fill="#00a8d6"/></g></g></g></g></g></svg>