-
-
Notifications
You must be signed in to change notification settings - Fork 62
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into release/0.2
- Loading branch information
Showing
219 changed files
with
4,635 additions
and
4,055 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 |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| # Contact | ||
|
|
||
| - [Discord](https://discord.gg/sYejxCdewG) | ||
| - [X](https://twitter.com/mkenzo_8) |
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,14 +1,15 @@ | ||
| # Differences with Dioxus | ||
|
|
||
| **Freya** uses most of the core packages of Dioxus, but not all them. | ||
| **Freya** uses some of the core packages of Dioxus, but not all of them. | ||
|
|
||
| These are the main differences between Freya and the official Dioxus renderers for Desktop (webview and Blitz): | ||
| These are 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) | WebView and [`Taffy`](https://github.com/DioxusLabs/taffy) | | ||
| | **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 CSS libraries | | ||
| | **Components library** | Custom | None, but can use HTML elements and CSS libraries | | ||
| | **Devtools** | Custom | Provided in Webview | | ||
| | **Headless testing runner** | Custom | None | | ||
| | **Headless testing runner** | Custom | None, but there is Playwright and similar | |
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,185 @@ | ||
| # Learn Dioxus | ||
|
|
||
| This is a quick introduction to Dioxus in the world of Freya. For more examples or tips you can check the official [Dioxus Docs](https://dioxuslabs.com/learn/0.5/) or the [Dioxus Cheatsheet](https://github.com/marc2332/dioxus-cheatsheet) | ||
|
|
||
| ## Components | ||
| Components in Dioxus are defined in the form of funtions that might receive some `props` and return an `Element`. | ||
|
|
||
| The Element is generated by the `rsx!()` macro. | ||
|
|
||
| ```rs, no_run | ||
| fn MyComponent() -> Element { | ||
| rsx!(...) | ||
| } | ||
| ``` | ||
|
|
||
| ## RSX | ||
|
|
||
| Dioxus uses a custom markup syntax called RSX, it's conceptually similar to React's JSX. | ||
|
|
||
| Syntax: | ||
|
|
||
| ```rs | ||
| <Element Name> { | ||
| <Element Attribute Name>: <Element Attribute Value>, | ||
| <Element Children> | ||
| } | ||
| ``` | ||
|
|
||
| Example: | ||
|
|
||
| ```rs, no_run | ||
| rsx!( | ||
| label { | ||
| onclick: |_| println!("Clicked"), | ||
| color: "red", | ||
| font_size: "50", | ||
| "Hello, World!" | ||
| } | ||
| ) | ||
| ``` | ||
|
|
||
| Another Example: | ||
|
|
||
| ```rs, no_run | ||
| rsx!( | ||
| rect { | ||
| color: "red", | ||
| onclick: |_| println!("Clicked rect"), | ||
| label { | ||
| onclick: |_| println!("Clicked label"), | ||
| font_size: "50", | ||
| "Hello, World!" | ||
| } | ||
| AnotherComponent { | ||
| some_value: 123 | ||
| } | ||
| } | ||
| ) | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| Use the `component` macro if you want to have inlined props: | ||
|
|
||
| ```rs, no_run | ||
| #[component] | ||
| fn MyComponent(name: String, age: u8) -> Element { | ||
| rsx!( | ||
| label { | ||
| "{name} is {age} years old." | ||
| } | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| You can as well have a separate Struct for the props: | ||
| ```rs, no_run | ||
| struct MyComponentProps { | ||
| name: String, | ||
| age: u8 | ||
| } | ||
| fn MyComponent(props: MyComponentProps) -> Element { | ||
| rsx!( | ||
| label { | ||
| "{props.name} is {props.age} years old." | ||
| } | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
|
|
||
| ## State | ||
|
|
||
| Dioxus built-in state management uses **Signals**, and they are usually created with the `use_signal` hook. | ||
|
|
||
| ```rs, no_run | ||
| fn MyComponent() -> Element { | ||
| // `use_signal` takes a callback that initializes the state | ||
| let mut state = use_signal(|| 0); | ||
| // Because signals are copy, we can move them into closures | ||
| let onclick = move |_| { | ||
| // Signals provide some shortcuts for certain types | ||
| state += 1; | ||
| // But we could do as well | ||
| *state.write() += 1; | ||
| }; | ||
| // You can subscribe to a signal, by calling it (`signal()`), | ||
| // calling the `signal.read()` method, or just embedding it into the RSX. | ||
| // Everytime the signal is mutated the component function will rerun | ||
| // because it has been subscribed, and thus producing a | ||
| // new Element with the updated counter. | ||
| println!("{}", state()); | ||
| rsx!( | ||
| label { | ||
| onclick, | ||
| "State is {value}" | ||
| } | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| ## Shared State | ||
|
|
||
| Signals can be passed to other components so they can read/write to the same signal. | ||
|
|
||
|
|
||
| ```rs, no_run | ||
| fn app() -> Element { | ||
| let state = use_signal(|| 0); | ||
| // We pass the signal through the context API | ||
| // So `ThirdComponent` can consume | ||
| use_context_provider(|| state); | ||
| rsx!( | ||
| SecondComponent { | ||
| state // We can pass the signal as a prop as well | ||
| } | ||
| ThirdComponent {} | ||
| ) | ||
| } | ||
| #[component] | ||
| fn SecondComponent(mut state: Signal<usize>) -> Element { | ||
| let onclick = move |_| { | ||
| state += 1; | ||
| }; | ||
| rsx!( | ||
| label { | ||
| onclick, | ||
| "Second component: {state}" | ||
| } | ||
| ) | ||
| } | ||
| #[component] | ||
| fn ThirdComponent() -> Element { | ||
| // We consume the signal passed through `use_context_provider` | ||
| let mut state = use_context::<Signal<usize>>(); | ||
| let onclick = move |_| { | ||
| state += 1; | ||
| }; | ||
| rsx!( | ||
| label { | ||
| onclick, | ||
| "Third component: {state}" | ||
| } | ||
| ) | ||
| } | ||
| ``` | ||
|
|
||
| ## Alternative State Management | ||
|
|
||
| There are other state management libraries with more granular control or with other goals that are worth checking out. | ||
|
|
||
| - [`dioxus-radio`](https://github.com/dioxus-community/dioxus-radio) | ||
| - [`dioxus-query`](https://github.com/marc2332/dioxus-query) |
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,11 +1,11 @@ | ||
| # Frequently Asked Questions | ||
|
|
||
| ## Will Freya have Mobile/Web support? | ||
| Freya current focus is on Desktop (Windows, Linux, MacOS), so there is no plans for either Mobile (Android/iOS) or Web support. But, this doesn't mean it won't happen in the future, who knows! From a technical point of view, it is possible to run Freya on these platforms with the right adjustements. | ||
| Freya's current focus is on Desktop (Windows, Linux, MacOS), so there are currently no plans to support either Mobile (Android/iOS) or Web platforms. But, this doesn't mean it won't happen in the future, who knows! From a technical point of view, it is possible to run Freya on these platforms with the right adjustments. | ||
|
|
||
| ## Why Skia instead of Webview? | ||
| ## Why choose Skia instead of Webview? | ||
| These are the main reasons for this: | ||
| - Ability to define the elements, attributes, styling, layout and events to my own criteria | ||
| - Apps UI look the same no matter the platform | ||
| - Because Freya has control over all the the pipeline it is easier to implement and use certain features such as headless testing runner | ||
| - Not relying on OS for new features or fixes | ||
| - App UIs look the same across platforms | ||
| - Because Freya has control over the entire pipeline, it is easier to implement and use certain features such as headless testing runners | ||
| - No reliance on OS for new features or fixes |
Oops, something went wrong.