Merge branch 'main' into main

.github/workflows/deploy_book.yml

@@ -19,6 +19,8 @@ jobs:
 
       - name: Setup mdBook
         uses: peaceiris/actions-mdbook@v2
+        with:
+          mdbook-version: '0.4.32'
 
       - run: mdbook build
         working-directory: book

CONTRIBUTING.md

@@ -24,9 +24,9 @@ cargo +nightly fmt --all -- --error-on-unformatted --unstable-features
 Freya is split in various crates, each with it's own meaning and purpose, here is the list sorted by their importance:
 
 - `freya`: Entrypoint to the library used by end users, mainly reexports the other crates and contains the launch methods.
-- `renderer`: GUI Renderer using Winit and a Skia Canvas to render the app.
-- `core`: Core logic for events, DOM processing, accessibility integration and text layout measurement is located here.
-- `native-core`: DOM tree-like data structure to hold all the nodes with their attribute values and registered event handlers.
+- `renderer`: Provides a winit event loop based execution for the app.
+- `core`: Core logic for events, DOM processing, accessibility integration, element rendering and text layout measurement is located here.
+- `native-core`: DOM data structure to hold all the nodes with their attribute values and registered event handlers.
 - `torin`: UI layout library specifically made for Freya, although it's agnostic.
 - `hooks`: Various Dioxus hooks to be used in Freya apps (text editing, animation, theming, etc)
 - `components`: Collection of built-in Dioxus components to be used out of the box with in Freya apps (Button, Switch, Slider, Table, ScrollView, etc)
@@ -38,6 +38,8 @@ Freya is split in various crates, each with it's own meaning and purpose, here i
 - `native-core-macro`: Just some internal macros to be used in `states` so it can be integrated with `native-core`.
 - `common`: Some simple utilities used across the different Freya crates.
 
+![Overview](./.github/overview.png)
+
 ## Examples
 All important examples are located in the  `./examples` folder although you might also find some in the form of docs comments in the code itself.
 

Cargo.toml

@@ -14,6 +14,7 @@ hot-reload = ["freya/hot-reload"]
 custom-tokio-rt = ["freya/custom-tokio-rt"]
 performance-overlay = ["freya/performance-overlay"]
 fade-cached-incremental-areas = ["freya/fade-cached-incremental-areas"]
+disable-zoom-shortcuts = ["freya/disable-zoom-shortcuts"]
 
 [patch.crates-io]
 # dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev = "7beacdf9c76ae5412d3c2bcd55f7c5d87f486a0f" }
@@ -78,6 +79,7 @@ skia-safe = { workspace = true }
 tokio = { workspace = true, features = ["fs"]}
 dioxus = { workspace = true }
 freya = { workspace = true }
+freya-hooks = { workspace = true }
 freya-core = { workspace = true }
 freya-testing = { workspace = true }
 reqwest = { version = "0.12.0", features = ["json"] }
@@ -94,6 +96,8 @@ tree-sitter-highlight = "0.23.0"
 tree-sitter-rust = "0.23.0"
 rfd = "0.14.1"
 bytes = "1.5.0"
+dioxus-sdk = { workspace = true }
+winit = { workspace = true }
 
 [profile.release]
 lto = true

README.md

@@ -8,11 +8,12 @@
 
 [Website](https://freyaui.dev) | [Nightly Docs](https://docs.freyaui.dev/freya) | [Stable Docs](https://docs.rs/freya/latest/freya) | [Book](https://book.freyaui.dev) | [Discord](https://discord.gg/sYejxCdewG)
 
-**Freya** is a cross-paltform GUI library for Rust powered by 🧬 [Dioxus](https://dioxuslabs.com) and 🎨 [Skia](https://skia.org/). 
+**Freya** is a cross-platform GUI library for Rust powered by 🧬 [Dioxus](https://dioxuslabs.com) and 🎨 [Skia](https://skia.org/). 
+
+**It does not use any web tech**, check the [Differences with Dioxus](https://book.freyaui.dev/differences_with_dioxus.html). 
 
 ⚠️ It's currently work in progress, but you can already play with it! You can join the [Discord](https://discord.gg/sYejxCdewG) server if you have any question or issue. 
 
-<br/>
 <br/>
 
 <table>
@@ -23,7 +24,7 @@
 fn app() -> Element {
     let mut count = use_signal(|| 0);
 
-    render!(
+    rsx!(
         rect {
             height: "50%",
             width: "100%",
@@ -64,12 +65,6 @@ fn app() -> Element {
 </td>
 </table>
 
-### Sponsors 🤗
-
-Thanks to my sponsors for supporting this project! 😄
-
-<!-- sponsors --><a href="https://github.com/piny4man"><img src="https:&#x2F;&#x2F;avatars.githubusercontent.com&#x2F;u&#x2F;8446285?u&#x3D;fd37db4dd9b4ba94dabe0bccc3a95ef2a35376ab&amp;v&#x3D;4" width="60px" alt="" /></a><!-- sponsors -->
-
 ### Want to try it? 🤔
 
 👋 Make sure to check the [Setup guide](https://book.freyaui.dev/setup.html) first.
@@ -91,19 +86,21 @@ Add Freya and Dioxus as dependencies:
 freya = "0.2"
 dioxus = { version = "0.5", features = ["macro", "hooks"], default-features = false }
 ```
+### Contributing 🧙‍♂️
+
+If you are interested in contributing please make sure to have read the [Contributing](CONTRIBUTING.md) guide first!
 
 ### Features ✨
 - ⛏️ Built-in **components** (button, scroll views, switch and more) 
-- 🚇 Built-in **hooks** library (animations, text editing and more)
-- 🔍 Built-in **devtools** panel
+- 🚇 Built-in **hooks** (animations, text editing and more)
+- 🔍 Built-in **developer tools** (tree inspection, fps overlay)
 - 🧰 Built-in **headless runner** to test UI
-- 🎨 **Theming** support (not extensible yet ⚠️)
+- 🎨 **Theming** support
 - 🛩️ **Cross-platform** (Windows, Linux, MacOS)
 - 🖼️ SKSL **Shaders** support
-- 🔄️ Dioxus **Hot-reload** support
 - 📒 Multi-line **text editing**
-- 🦾 Basic **Accessibility** Support (experimental ⚠️)
-- 🧩Compatible with dioxus-sdk and other Dioxus renderer-agnostic libraries
+- 🦾 **Accessibility** support
+- 🧩 Compatible with dioxus-sdk and other Dioxus renderer-agnostic libraries
 
 ### Goals 😁
 - Performant and low memory usage
@@ -113,6 +110,22 @@ dioxus = { version = "0.5", features = ["macro", "hooks"], default-features = fa
 - Useful testing APIs
 - Useful and extensible built-in components and hooks
 
+### Support 🤗
+
+If you are interested in supporting the development of this project feel free to donate to my [Github Sponsor](https://github.com/sponsors/marc2332/) page.
+
+Thanks to my sponsors for supporting this project! 😄 
+
+<!-- sponsors --><a href="https://github.com/piny4man"><img src="https:&#x2F;&#x2F;avatars.githubusercontent.com&#x2F;u&#x2F;8446285?u&#x3D;fd37db4dd9b4ba94dabe0bccc3a95ef2a35376ab&amp;v&#x3D;4" width="60px" alt="" /></a><a href="https://github.com/gqf2008"><img src="https:&#x2F;&#x2F;avatars.githubusercontent.com&#x2F;u&#x2F;2295878?v&#x3D;4" width="60px" alt="高庆丰" /></a><!-- sponsors -->
+
+### Special thanks 💪
+
+- [Jonathan Kelley](https://github.com/jkelleyrtp) and [Evan Almloff](https://github.com/ealmloff) for making [Dioxus](https://dioxuslabs.com/) and all their help, specially when I was still creating Freya.
+- [Armin](https://github.com/pragmatrix) for making [rust-skia](https://github.com/rust-skia/rust-skia/) and all his help and making the favor of hosting prebuilt binaries of skia for the combo of features use by Freya.
+- [geom3trik](https://github.com/geom3trik) for helping me figure out how to add incremental rendering.
+- [Tropical](https://github.com/Tropix126) for this contributions to improving accessibility and rendering.
+- And to the rest of contributors and anybody who gave me any kind of feedback!
+
 ### 🤠 Projects
 
 [Valin](https://github.com/marc2332/valin) ⚒️ is a Work-In-Progress cross-platform code editor, made with Freya 🦀 and Rust, by me.

book/src/differences_with_dioxus.md

@@ -1,15 +1,32 @@
 # Differences with Dioxus
 
-**Freya** is built on top of the core crates from Dioxus, this means that you will effectively be creating Dioxus components, using RSX and hooks. But, you will **not** be using HTML, CSS, JS or any Web tech at all.
+**Freya** is built on top of the **core** crates from Dioxus, this means that you will effectively be creating Dioxus components, using RSX and hooks. 
 
-Here you can find a list of the main differences between Freya and the official Dioxus renderers for Desktop (WebView and Blitz):
+**But**, thanks to Dioxus being a renderer-agnostic library you will **NOT** be using JavaScript, HTML, OR CSS, or any other abstraction that ends up using one of those or anything close to web.
+
+ Freya does everything on its own when it comes to:
+- Elements
+- Styling
+- Layout
+- Events
+- Rendering
+- Testing
+- Built-in components and hooks,
+- Editing
+- Animating
+
+And more. Dioxus only is only used to run the app components (hooks, lifecycle, state, rsx), **everything else is managed by Freya**.
+
+**Freya is not mean to be drop-in alternative to Dioxus renderers but as GUI library on its own.**
+
+Here is the list of the main differences between Freya and the official Dioxus renderers for Desktop (WebView and Blitz):
 
 | Category                             | Freya            | Dioxus Renderers                |
 |--------------------------------------|------------------|---------------------------------|
 | **Elements, attributes and events**  | Custom           | HTML                            |
-| **Layout** | [`Torin`](https://github.com/marc2332/freya/tree/main/crates/torin) | CSS or [`Taffy`](https://github.com/DioxusLabs/taffy) |
-| **Styling**                          | Custom           | CSS                             |
-| **Renderer**                         | Skia             | WebView or WGPU                 |
-| **Components library**               | Custom           | None, but can use HTML elements and CSS libraries |
-| **Devtools**                         | Custom           | Provided in Webview             |
-| **Headless testing runner**          | Custom           | None, but there is Playwright and similar   |
+| **Layout** | Custom ([`Torin`](https://github.com/marc2332/freya/tree/main/crates/torin)) | CSS or [`Taffy`](https://github.com/DioxusLabs/taffy) |
+| **Styling**                          | Custom                    | CSS                             |
+| **Renderer**                         | Skia                      | WebView or WGPU                 |
+| **Components library**               | Custom ([`freya-comonents`](https://github.com/marc2332/freya/tree/main/crates/components))  | None, but can use HTML elements and CSS libraries |
+| **Devtools**                         | Custom ([`freya-devtools`](https://github.com/marc2332/freya/tree/main/crates/devtools))   | Provided in Webview             |
+| **Headless testing runner**          | Custom ([`freya-testing`](https://github.com/marc2332/freya/tree/main/crates/testing))    | None, but there is Playwright and similar   |

book/src/setup.md

@@ -31,6 +31,10 @@ sudo dnf install openssl-devel pkgconf cmake gtk3-devel clang-devel -y
 sudo dnf groupinstall "Development Tools" "C Development Tools and Libraries" -y
 ```
 
+#### NixOS
+
+Copy this [flake.nix](https://github.com/kuba375/freya-flake) into your project root. Then you can enter a dev shell by `nix develop`. 
+
 Don't hesitate to contribute so other distros can be added here.
 
 ### MacOS

crates/common/src/accessibility.rs

@@ -25,8 +25,8 @@ impl AccessibilityDirtyNodes {
         self.added_or_updated.insert(node_id);
     }
 
-    pub fn remove(&mut self, node_id: NodeId, ancestor_node_id: NodeId) {
-        self.removed.insert(node_id, ancestor_node_id);
+    pub fn remove(&mut self, node_id: NodeId, parent_id: NodeId) {
+        self.removed.insert(node_id, parent_id);
     }
 
     pub fn clear(&mut self) {

crates/components/src/accordion.rs

@@ -100,7 +100,7 @@ pub fn Accordion(props: AccordionProps) -> Element {
             height: "auto",
             background: "{background}",
             onclick,
-            border: "1 solid {border_fill}",
+            border: "1 inner {border_fill}",
             {&props.summary}
             rect {
                 overflow: "clip",

crates/components/src/activable_route.rs

@@ -5,7 +5,29 @@ use dioxus_router::{
 };
 use freya_hooks::ActivableRouteContext;
 
-/// Provide a context to the inner components so they can know whether the passed route is the current router in the Router or not.
+/// Sometimes you might want to know if a route is selected so you can style a specific UI element in a different way,
+/// like a button with a different color.
+/// To avoid cluttering your components with router-specific code you might instead want to wrap your component in an `ActivableRoute`
+/// and inside your component call `use_activable_route`.
+///
+/// This way, your component and all its desdendants will just know whether a route is activated or not, but not which one.
+///
+/// ```rs
+/// Link {
+///     to: Route::Home, // Direction route
+///     ActivableRoute {
+///         route: Route::Home, // Activation route
+///         SidebarItem {
+///             // `SidebarItem` will now appear "activated" when the route is `Route::Home`
+///             // `ActivableRoute` is letting it know whether `Route::Home` is enabled
+///             // or not, without the need to add router-specific logic in `SidebarItem`.
+///             label {
+///                 "Go to Hey ! 👋"
+///             }
+///         },
+///     }
+/// }
+/// ```
 #[allow(non_snake_case)]
 #[component]
 pub fn ActivableRoute<T: Clone + PartialEq + Routable + 'static>(