-
-
Notifications
You must be signed in to change notification settings - Fork 68
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: New book * more * more * chore: wip async * comps, hooks and animation, wip * router docs * chore: Some notes about hooks and components * chore: i18n and themes * more * clean up * more docs * clean up * more * tweaks * more docs * more docs * clean up * text input guide * typo 'dynamically' * rephrase native_router.md * start moving book to rustdoc * improvements * revert book * clean up * clean up * clean up * clean up * clean up * clean up * clean up * clean up * clean up * clean up * clean up * fixes * clean up * add dioxus i18n to workspace crate
- Loading branch information
Showing
39 changed files
with
1,429 additions
and
232 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,12 @@ | ||
| # Devtools | ||
|
|
||
| Devtools can be enabled by enabling the `devtools` to Freya. | ||
|
|
||
| ```toml | ||
| // Cargo.toml | ||
|
|
||
| [dependencies] | ||
| freya = { version = "0.2", features = ["devtools"] } | ||
|
|
||
| ``` | ||
|
|
||
| # Devtools | ||
|
|
||
| Devtools can be enabled by enabling the `devtools` to Freya. | ||
|
|
||
| ```toml | ||
| // Cargo.toml | ||
|
|
||
| [dependencies] | ||
| freya = { version = "0.2", features = ["devtools"] } | ||
|
|
||
| ``` | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| //! # Accessibility | ||
| //! | ||
| //! TODO | ||
| //! | ||
| //! ### `use_focus` hook | ||
| //! | ||
| //! ```rust | ||
| //! # use freya::prelude::*; | ||
| //! fn app() -> Element { | ||
| //! let mut my_focus = use_focus(); | ||
| //! | ||
| //! rsx!( | ||
| //! rect { | ||
| //! width: "100%", | ||
| //! height: "100%", | ||
| //! a11y_id: my_focus.attribute(), | ||
| //! onclick: move |_| my_focus.focus(), | ||
| //! label { | ||
| //! "{my_focus.is_focused()}" | ||
| //! } | ||
| //! } | ||
| //! ) | ||
| //! } | ||
| //! ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| //! # Async | ||
| //! | ||
| //! You may run asynchronous code through the different APIs Dioxus provide. You can use other libraries such as tokio to spawn tasks but it's not always the recommended approach as these will not work with the lifecycling of the components. | ||
| //! | ||
| //! | ||
| //! ### `spawn` | ||
| //! | ||
| //! Simple function to spawn an **async task**, this is primarily targeted for custom hooks or when you wanted to run some async code dynamically from an event listener. | ||
| //! | ||
| //! Important to know: Tasks spawned with `spawn` will be cancelled when the component their were created is dropped. If you want to have an async tasks not attached to the component you may use `spawn_forever`. | ||
| //! | ||
| //! ```rust | ||
| //! # use freya::prelude::*; | ||
| //! fn app() -> Element { | ||
| //! rsx!(Button { | ||
| //! onclick: |_| { | ||
| //! if 1 == 1 { | ||
| //! spawn(async move { | ||
| //! println!("Hello, World fom an async task!"); | ||
| //! }); | ||
| //! } | ||
| //! } | ||
| //! }) | ||
| //! } | ||
| //! ``` | ||
| //! | ||
| //! ### `use_future` | ||
| //! | ||
| //! TODO | ||
| //! | ||
| //! ### `use_resource` | ||
| //! | ||
| //! TODO |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| //! # Components | ||
| //! | ||
| //! Freya apps will usually be composed of different components. | ||
| //! Components are defined in the form functions that might receive some input as **Props** and return the UI as **Element**. | ||
| //! | ||
| //! > You can learn more about how the UI is defined in the [UI](./ui.md) chapter. | ||
| //! | ||
| //! This is how a simple root component looks like: | ||
| //! | ||
| //! ```rust | ||
| //! # use freya::prelude::*; | ||
| //! // Usually, the root component of a Freya app is named `app`, | ||
| //! // but it is not a requirement | ||
| //! fn app() -> Element { | ||
| //! rsx!( | ||
| //! label { | ||
| //! "Hello, World!" | ||
| //! } | ||
| //! ) | ||
| //! } | ||
| //! ``` | ||
| //! | ||
| //! This is obviously fine, but the moment our app grows in size and complexity we might want to split | ||
| //! things out in order to maintain a certain level of modularity and reusability. We can do this by spliting the UI in different components | ||
| //! | ||
| //! For example, lets create a reusable component: | ||
| //! | ||
| //! ```rust | ||
| //! # use freya::prelude::*; | ||
| //! fn app() -> Element { | ||
| //! rsx!( | ||
| //! // By declaring this element using `TextLabel` | ||
| //! // we are creating an instance of that component | ||
| //! TextLabel { | ||
| //! text: "Number 1" | ||
| //! } | ||
| //! label { | ||
| //! "Number 2" | ||
| //! } | ||
| //! // Another instance of the same component | ||
| //! TextLabel { | ||
| //! text: "Number 3" | ||
| //! } | ||
| //! ) | ||
| //! } | ||
| //! | ||
| //! // Reusable component that we might call as many times we want | ||
| //! #[component] | ||
| //! fn TextLabel(text: String) -> Element { | ||
| //! rsx!( | ||
| //! label { | ||
| //! "{text}" | ||
| //! } | ||
| //! ) | ||
| //! } | ||
| //! ``` | ||
| //! | ||
| //! Notice how we anotate our `TextLabel` component with the macro `#[component]`, this will transform every argument of the function (just `text: String` in this case) to a component prop, so we can later use the component prop in a declarative way in the RSX. | ||
| //! | ||
| //! For more complex components you might want to put the props in an external struct intead of using the `#[components]` macro: | ||
| //! | ||
| //! ```rust | ||
| //! # use freya::prelude::*; | ||
| //! #[derive(Props, PartialEq, Clone)] | ||
| //! struct TextLabelProps { | ||
| //! text: String | ||
| //! } | ||
| //! | ||
| //! fn TextLabel(TextLabelProps { text }: TextLabelProps) -> Element { | ||
| //! rsx!( | ||
| //! label { | ||
| //! "{text}" | ||
| //! } | ||
| //! ) | ||
| //! } | ||
| //! ``` | ||
| //! | ||
| //! ## Renders | ||
| //! | ||
| //! Components renders are just when a component function runs, which might be because it is subscribed to a signal and that signal got mutated, or because its props changed. | ||
| //! | ||
| //! > Even though the naming might give you the impression that it means the app will effectively rerender again, it has nothing to do with it, in fact, a component might render a thousand times but it it doesn't generate a new UI Freya will not rerender it. | ||
| //! | ||
| //! Consider this simple component: | ||
| //! | ||
| //! ```rust | ||
| //! # use freya::prelude::*; | ||
| //! #[component] | ||
| //! fn CoolComp() -> Element { | ||
| //! let mut count = use_signal(|| 0); | ||
| //! | ||
| //! // 1 run of this function means 1 render of this component | ||
| //! // So, everytime the `count` signal is mutated, the component rerenders/is recalled. | ||
| //! | ||
| //! rsx!( | ||
| //! label { | ||
| //! // Update the signal value | ||
| //! onclick: move |_| count += 1, | ||
| //! | ||
| //! // By embedding the count in this text the component is subscried to any change in the `count` siganal | ||
| //! "Increase {count}" | ||
| //! } | ||
| //! ) | ||
| //! } | ||
| //! ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| //! # Setup | ||
| //! | ||
| //! Make sure you have [Rust](https://www.rust-lang.org/) and your OS dependencies installed. | ||
| //! | ||
| //! ### Windows | ||
| //! | ||
| //! You will need C++ build tools which you can get through Visual Studio 2022, learn more [here](https://learn.microsoft.com/en-us/windows/dev-environment/rust/setup#install-visual-studio-recommended-or-the-microsoft-c-build-tools). | ||
| //! | ||
| //! ### Linux | ||
| //! | ||
| //! #### Debian-based (Ubuntu, PopOS, etc) | ||
| //! | ||
| //! Install these packages: | ||
| //! ```sh | ||
| //! sudo apt install build-essential libssl-dev pkg-config cmake libgtk-3-dev libclang-dev | ||
| //! ``` | ||
| //! | ||
| //! #### Arch Linux | ||
| //! | ||
| //! Install these packages: | ||
| //! ```sh | ||
| //! sudo pacman -S base-devel openssl cmake gtk3 clang | ||
| //! ``` | ||
| //! | ||
| //! #### Fedora | ||
| //! | ||
| //! Install these packages: | ||
| //! | ||
| //! ```sh | ||
| //! 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 | ||
| //! | ||
| //! No setup required. But feel free to add more if we miss something. | ||
| //! | ||
| //! ## Custom Linkers | ||
| //! | ||
| //! The following custom linkers are not supported at the moment: | ||
| //! | ||
| //! - `mold` | ||
| //! | ||
| //! If there is another one not supported don't hesitate to add it here. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| //! | ||
| //! # Dioxus Fundamentals | ||
| //! | ||
| //! As you should know by now, Freya runs on 🧬 [Dioxus](https://dioxuslabs.com), a renderer-agnostic UI library for Rust. | ||
| //! | ||
| //! - [UI](crate::_docs::ui) | ||
| //! - [Components](crate::_docs::components_and_props) | ||
| //! - [Hooks](crate::_docs::hooks) | ||
| //! - [State Management](crate::_docs::state_management) | ||
| //! - [Signals](crate::_docs::state_management::signals) | ||
| //! - [Global Signals](crate::_docs::state_management::global_signals) | ||
| //! - [Lifecycle](crate::_docs::state_management::lifecycle) | ||
| //! - [Context](crate::_docs::state_management::context) | ||
| //! - [Memoization](crate::_docs::state_management::memoization) | ||
| //! - [Async Tasks](crate::_docs::async_tasks) |
Oops, something went wrong.