From 6ec98432aca5c650c7b9d81281a9e6e7a24311e6 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Tue, 6 Feb 2024 20:27:43 +0100 Subject: [PATCH 1/2] reverse book --- book/src/guides/animating.md | 18 ++++---- book/src/guides/effects.md | 4 +- book/src/guides/elements.md | 24 +++++------ book/src/guides/font_style.md | 68 +++++++++++++++--------------- book/src/guides/getting_started.md | 12 +++--- book/src/guides/layout.md | 44 +++++++++---------- book/src/guides/style.md | 20 ++++----- book/src/guides/testing.md | 29 +++++++------ book/src/guides/theming.md | 38 ++++++++--------- book/src/guides/virtualizing.md | 14 +++--- book/src/index.md | 6 +-- 11 files changed, 139 insertions(+), 138 deletions(-) diff --git a/book/src/guides/animating.md b/book/src/guides/animating.md index 08e24d37a..9afdf8808 100644 --- a/book/src/guides/animating.md +++ b/book/src/guides/animating.md @@ -18,16 +18,16 @@ fn main() { launch(app); } - fn app() -> Element { - let mut animation = use_animation(|| 0.0); + fn app(cx: Scope) -> Element { + let animation = use_animation(cx, || 0.0); let progress = animation.value(); - use_hook(move || { + use_memo(cx, (), move |_| { animation.start(Animation::new_linear(0.0..=100.0, 50)); - }) + }); - rsx!(rect { + render!(rect { width: "{progress}", }) } @@ -53,8 +53,8 @@ fn main() { const TARGET: f64 = 500.0; -fn app() -> Element { - let mut animation = use_animation_transition(TransitionAnimation::new_sine_in_out(200), (), || { +fn app(cx: Scope) -> Element { + let animation = use_animation_transition(cx, TransitionAnimation::new_sine_in_out(200), (), || { vec![ Animate::new_size(0.0, TARGET), Animate::new_color("rgb(33, 158, 188)", "white"), @@ -72,7 +72,7 @@ fn app() -> Element { } }; - rsx!( + render!( rect { overflow: "clip", background: "black", @@ -83,7 +83,7 @@ fn app() -> Element { height: "100%", width: "200", background: "{background}", - onclick, + onclick: onclick, } } ) diff --git a/book/src/guides/effects.md b/book/src/guides/effects.md index 5f0c9703a..494fba317 100644 --- a/book/src/guides/effects.md +++ b/book/src/guides/effects.md @@ -11,8 +11,8 @@ The `rotate` attribute let's you rotate an element. Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { rotate: "180deg", "Hello, World!" diff --git a/book/src/guides/elements.md b/book/src/guides/elements.md index 660c50e20..eb7afd058 100644 --- a/book/src/guides/elements.md +++ b/book/src/guides/elements.md @@ -16,8 +16,8 @@ You can specify things like [`width`](/guides/layout.html#width), [`paddings`](/ Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { direction: "vertical", label { "Hi!" } @@ -34,8 +34,8 @@ The `label` element simply shows some text. Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { "Hello World" } @@ -53,9 +53,9 @@ Example: static FERRIS: &[u8] = include_bytes!("./ferris.svg"); -fn app() -> Element { - let ferris = bytes_to_data(FERRIS); - rsx!( +fn app(cx: Scope) -> Element { + let ferris = bytes_to_data(cx, FERRIS); + render!( svg { svg_data: ferris, } @@ -70,9 +70,9 @@ The `image` element, just like `svg` element, require you to pass the image byte ```rust, no_run static RUST_LOGO: &[u8] = include_bytes!("./rust_logo.png"); -fn app() -> Element { - let image_data = bytes_to_data(RUST_LOGO); - rsx!( +fn app(cx: Scope) -> Element { + let image_data = bytes_to_data(cx, RUST_LOGO); + render!( image { image_data: image_data, width: "{size}", @@ -87,8 +87,8 @@ fn app() -> Element { Both `paragraph` and `text` elements are used together. They will let you build texts with different styles. ``` rust -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( paragraph { text { font_size: "15", diff --git a/book/src/guides/font_style.md b/book/src/guides/font_style.md index d63cf10dd..3fd67d1e4 100644 --- a/book/src/guides/font_style.md +++ b/book/src/guides/font_style.md @@ -29,8 +29,8 @@ You can learn about the syntax of this attribute in [`Color Syntax`](/guides/sty Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { color: "green", "Hello, World!" @@ -42,8 +42,8 @@ fn app() -> Element { Another example showing [inheritance](#inheritance): ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { color: "blue", label { @@ -66,8 +66,8 @@ Limitation: Only fonts installed in the system are supported for now. Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { font_family: "Inter", "Hello, World!" @@ -85,8 +85,8 @@ You can specify the size of the text using `font_size`. Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { font_size: "50", "Hellooooo!" @@ -106,8 +106,8 @@ Accepted values: `center`, `end`, `justify`, `left`, `right`, `start` Example ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { align: "right", "Hello, World!" @@ -127,8 +127,8 @@ Accepted values: `upright` (default), `italic` and `oblique`. Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { font_style: "italic", "Hello, World!" @@ -170,8 +170,8 @@ Accepted values: Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { font_weight: "bold", "Hello, World!" @@ -199,8 +199,8 @@ Accepted values: Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { font_weight: "bold", "Hello, World!" @@ -220,8 +220,8 @@ Specify the height of the lines of the text. Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { lines_height: "3", "Hello, World! \n Hello, again!" @@ -237,8 +237,8 @@ Determines the amount of lines that the text can have. It has unlimited lines by Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { "Hello, World! \n Hello, World! \n Hello, world!" // Will show all three lines } @@ -259,8 +259,8 @@ Specify the spacing between characters of the text. Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { letter_spacing: "10", "Hello, World!" @@ -278,8 +278,8 @@ Specify the spacing between words of the text. Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { word_spacing: "10", "Hello, World!" @@ -302,8 +302,8 @@ Accpted values: Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { decoration: "line-through", "Hello, World!" @@ -328,8 +328,8 @@ Accpted values: Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { decoration: "line-through", decoration_style: "dotted", @@ -350,8 +350,8 @@ You can learn about the syntax of this attribute in [`Color Syntax`](/guides/sty Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { decoration: "line-through", decoration_color: "orange", @@ -372,8 +372,8 @@ Syntax: ` ` Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { text_shadow: "0 18 12 rgb(0, 0, 0)", "Hello, World!" @@ -395,8 +395,8 @@ Accepted values: Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( label { max_lines: "3", text_overflow: "ellipsis", diff --git a/book/src/guides/getting_started.md b/book/src/guides/getting_started.md index 9afd38ac4..3ce82c631 100644 --- a/book/src/guides/getting_started.md +++ b/book/src/guides/getting_started.md @@ -43,19 +43,17 @@ fn main() { launch(app); } -fn app() -> Element { - let mut count = use_signal(|| 0); +fn app(cx: Scope) -> Element { + let mut count = use_state(cx, || 0); - rsx!( + render!( rect { height: "100%", width: "100%", - background: "rgb(0, 119, 182)", + background: "rgb(35, 35, 35)", color: "white", - main_align: "center", - cross_align: "center", + padding: "12", onclick: move |_| count += 1, - font_size: "35", label { "Click to increase -> {count}" } } ) diff --git a/book/src/guides/layout.md b/book/src/guides/layout.md index bc5de08b3..ea49c7752 100644 --- a/book/src/guides/layout.md +++ b/book/src/guides/layout.md @@ -24,8 +24,8 @@ See syntax for [`Size Units`](#size-units). ##### Usage ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { background: "red", width: "15", @@ -44,8 +44,8 @@ See syntax for [`Size Units`](#size-units). ##### Usage ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { background: "red", min_width: "100", @@ -66,8 +66,8 @@ See syntax for [`Size Units`](#size-units). ##### Usage ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { background: "red", max_width: "50%", @@ -85,8 +85,8 @@ fn app() -> Element { Will use it's inner children as size, so in this case, the `rect` width will be equivalent to the width of `label`: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { width: "auto", height: "33", @@ -101,8 +101,8 @@ fn app() -> Element { #### Logical pixels ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { width: "50", height: "33" @@ -115,8 +115,8 @@ fn app() -> Element { Relative percentage to the parent equivalent value. ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { width: "50%", // Half the parent height: "75%" // 3/4 the parent @@ -130,8 +130,8 @@ fn app() -> Element { For more complex logic you can use the `calc()` function. ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { width: "calc(33% - 60 + 15%)", // (1/3 of the parent minus 60) plus 15% of parent height: "calc(100% - 10)" // 100% of the parent minus 10 @@ -147,8 +147,8 @@ Control how the inner elements will be stacked, possible values are `horizontal` ##### Usage ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { width: "100%", height: "100%", @@ -173,8 +173,8 @@ fn app() -> Element { Specify the inner paddings of an element. You can do so by three different ways. ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { padding: "25" // 25 in all sides padding: "100 50" // 100 in top and bottom, and 50 in left and right @@ -190,8 +190,8 @@ fn app() -> Element { Control how the inner elements are displayed, possible values are `normal` (default) or `center`. ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { width: "100%", height: "100%", @@ -212,8 +212,8 @@ fn app() -> Element { Specify the margin of an element. You can do so by three different ways. ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { margin: "25" // 25 in all sides margin: "100 50" // 100 in top and bottom, and 50 in left and right diff --git a/book/src/guides/style.md b/book/src/guides/style.md index ce9773c04..2053e54de 100644 --- a/book/src/guides/style.md +++ b/book/src/guides/style.md @@ -21,8 +21,8 @@ You can learn about the syntax of this attribute [here](#color-syntax). Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { background: "red" } @@ -42,8 +42,8 @@ Syntax: ` ` Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { shadow: "0 0 25 2 rgb(0, 0, 0, 120)" } @@ -60,8 +60,8 @@ The `corner_radius` attribute let's you smooth the corners of the element, with Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { corner_radius: "10", corner_smoothing: "75%" @@ -82,8 +82,8 @@ You can add a border to an element using the `border` and `border_align` attribu Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { border: "2 solid black", border_align: "inner" @@ -103,8 +103,8 @@ Accepted values: `clip | none`. Example: ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( rect { overflow: "clip" width: "100", diff --git a/book/src/guides/testing.md b/book/src/guides/testing.md index 296480191..0cf151773 100644 --- a/book/src/guides/testing.md +++ b/book/src/guides/testing.md @@ -12,8 +12,8 @@ For example, this will launch a state-less component and assert that it renders ```rust, no_run #[tokio::test] async fn test() { - fn our_component() -> Element { - rsx!( + fn our_component(cx: Scope) -> Element { + render!( label { "Hello World!" } @@ -41,12 +41,15 @@ Here, the component has a state that is `false` by default, but, once mounted it ```rust, no_run #[tokio::test] async fn dynamic_test() { - fn dynamic_component() -> Element { - let mut state = use_signal(|| false); + fn dynamic_component(cx: Scope) -> Element { + let state = use_state(cx, || false); - use_hook(move || state.set(true)); + use_effect(cx, (), |_| { + state.set(true); + async move { } + }); - rsx!( + render!( label { "Is enabled? {state}" } @@ -60,7 +63,7 @@ async fn dynamic_test() { assert_eq!(label.get(0).text(), Some("Is enabled? false")); - // This will run the `use_hook` and update the state. + // This will run the `use_effect` and update the state. utils.wait_for_update().await; assert_eq!(label.get(0).text(), Some("Is enabled? true")); @@ -74,14 +77,14 @@ We can also simulate events on the component, for example, we can simulate a cli ```rust, no_run #[tokio::test] async fn event_test() { - fn event_component() -> Element { - let mut enabled = use_signal(|| false); - rsx!( + fn event_component(cx: Scope) -> Element { + let enabled = use_state(cx, || false); + render!( rect { width: "100%", height: "100%", background: "red", - onclick: move |_| { + onclick: |_| { enabled.set(true); }, label { @@ -126,8 +129,8 @@ Here is an example of how to can set our custom window size: ```rust, no_run #[tokio::test] async fn test() { - fn our_component() -> Element { - rsx!( + fn our_component(cx: Scope) -> Element { + render!( label { "Hello World!" } diff --git a/book/src/guides/theming.md b/book/src/guides/theming.md index a172b218f..e192dc95f 100644 --- a/book/src/guides/theming.md +++ b/book/src/guides/theming.md @@ -9,8 +9,8 @@ Freya has built-in support for Theming. You can access the whole current theme via the `use_get_theme` hook. ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( ThemeProvider { Component { } } @@ -18,12 +18,12 @@ fn app() -> Element { } #[allow(non_snake_case)] -fn Component() -> Element { - let theme = use_get_theme(); +fn Component(cx: Scope) -> Element { + let theme = use_get_theme(cx); let button_theme = &theme.button; - rsx!( + render!( rect { background: "{button_theme.background}", } @@ -35,8 +35,8 @@ fn Component() -> Element { By default, the selected theme is `LIGHT_THEME`. You can use the alternative, `DARK_THEME`. ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( ThemeProvider { theme: LIGHT_THEME, Component { } @@ -45,12 +45,12 @@ fn app() -> Element { } #[allow(non_snake_case)] -fn Component() -> Element { - let theme = use_get_theme(); +fn Component(cx: Scope) -> Element { + let theme = use_get_theme(cx); let button_theme = &theme.button; - rsx!( + render!( rect { background: "{button_theme.background}", } @@ -63,8 +63,8 @@ fn Component() -> Element { Changing the selected theme at runtime is possible by using the `use_theme` hook. ```rust, no_run -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( ThemeProvider { Component { } } @@ -72,16 +72,16 @@ fn app() -> Element { } #[allow(non_snake_case)] -fn Component() -> Element { - let mut theme = use_theme(); +fn Component(cx: Scope) -> Element { + let theme = use_theme(cx); - let onclick = move |_| { + let onclick = |_| { *theme.write() = LIGHT_THEME; }; - rsx!( + render!( Button { - onclick, + onclick: onclick, label { "Use Light theme" } @@ -104,8 +104,8 @@ const CUSTOM_THEME: Theme = Theme { ..LIGHT_THEME }; -fn app() -> Element { - rsx!( +fn app(cx: Scope) -> Element { + render!( ThemeProvider { theme: CUSTOM_THEME, rect { diff --git a/book/src/guides/virtualizing.md b/book/src/guides/virtualizing.md index 5de8fd9f0..9a22020da 100644 --- a/book/src/guides/virtualizing.md +++ b/book/src/guides/virtualizing.md @@ -19,19 +19,19 @@ fn main() { launch(app); } -fn app() -> Element { - let values = use_signal(|| vec!["Hello World"].repeat(400)); +fn app(cx: Scope) -> Element { + let values = use_state(cx, || vec!["Hello World"].repeat(400)); - rsx!( + render!( VirtualScrollView { width: "100%", height: "100%", show_scrollbar: true, direction: "vertical", - length: values.read().len(), + length: values.get().len(), item_size: 25.0, - builder_values: values.read().clone(), - builder: Rc::new(move |(key, index, values)| { + builder_values: values.get(), + builder: Box::new(move |(key, index, _cx, values)| { let values = values.unwrap(); let value = values[index]; rsx! { @@ -72,4 +72,4 @@ Used to calculate how many elements can be fit in the viewport. Any data that you might need in the `builder` function #### `builder` -This is a function that dinamically creates an element for the given index in the list. It receives 4 arguments, a `key` for the element, the `index` of the element and the `builder_values` you previously passed. \ No newline at end of file +This is a function that dinamically creates an element for the given index in the list. It receives 4 arguments, a `key` for the element, the `index` of the element, the Scope (`cx`) and the `builder_values` you previously passed. \ No newline at end of file diff --git a/book/src/index.md b/book/src/index.md index 1d352c2cc..6eea72d1d 100644 --- a/book/src/index.md +++ b/book/src/index.md @@ -16,10 +16,10 @@ ```rust, no_run -fn app() -> Element { - let mut count = use_signal(|| 0); +fn app(cx: Scope) -> Element { + let mut count = use_state(cx, || 0); - rsx!( + render!( rect { height: "20%", width: "100%", From 5be3e9ca6512c3574b34485dc46e88a72f7e5651 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Tue, 6 Feb 2024 20:34:13 +0100 Subject: [PATCH 2/2] reverse website --- website/src/pages/index.astro | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro index 9fa5e96ca..80d23af29 100644 --- a/website/src/pages/index.astro +++ b/website/src/pages/index.astro @@ -6,10 +6,10 @@ import { FaGithub, FaDiscord } from 'react-icons/fa' import { GoBook } from 'react-icons/go' const EXAMPLE_CODE = ` -fn app() -> Element { - let mut count = use_signal(|| 0); +fn app(cx: Scope) -> Element { + let mut count = use_state(cx, || 0); - rsx!( + render!( rect { height: "20%", width: "100%", @@ -145,4 +145,4 @@ fn app() -> Element { height: 481px; } } - + \ No newline at end of file