render! -> rsx!

marc2332 · Jan 22, 2024 · 285aba5 · 285aba5
1 parent fbdfcb8
commit 285aba5
Show file tree

Hide file tree

Showing 179 changed files with 109 additions and 10,645 deletions.
diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@
 fn app(cx: Scope) -> Element {
     let mut count = use_state(cx, || 0);
 
-    render!(
+    rsx!(
         rect {
             height: "20%",
             width: "100%",

diff --git a/book/src/guides/animating.md b/book/src/guides/animating.md
@@ -1,91 +0,0 @@
-# Animating
-
-Freya provides you with two hooks to help you animate your components.
-
-### `use_animation`
-
-This a very simple hook that will let you animate a certain value from an `inital` value to a `final` value, in a given `duration` of time. There are a few animations that you can choose from:
-
-- Linear
-- EaseIn
-- EaseInOut
-- BounceIns
-
-Here is an example that will animate a value from `0.0` to `100.0` in `50` milliseconds, using the `linear` animation.
-
-```rust, no_run
-fn main() {
-    launch(app);
-}
-
- fn app(cx: Scope) -> Element {
-    let animation = use_animation(cx, || 0.0);
-
-    let progress = animation.value();
-
-    use_memo(cx, (), move |_| {
-        animation.start(Animation::new_linear(0.0..=100.0, 50));
-    });
-
-    render!(rect {
-        width: "{progress}",
-    })
-}
-```
-
-### `use_animation_transition`
-
-This hook let's you group a set of animations together with a certain type of `animation` and a given `duration`. You can also specifiy a set of dependencies that will make animations callback re run.
-
-Just like `use_animation` you have these animations:
-
-- Linear
-- EaseIn
-- EaseInOut
-- BounceIns
-
-Here is an example that will animate a `size` and a color in `200` milliseconds, using the `new_sine_in_out` animation.
-
-```rust, no_run
-fn main() {
-    launch(app);
-}
-
-const TARGET: f64 = 500.0;
-
-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"),
-        ]
-    });
-
-    let size = animation.get(0).unwrap().as_size();
-    let background = animation.get(1).unwrap().as_color();
-
-    let onclick = move |_: MouseEvent| {
-        if size == 0.0 {
-            animation.start();
-        } else if size == TARGET {
-            animation.reverse();
-        }
-    };
-
-    render!(
-        rect {
-            overflow: "clip",
-            background: "black",
-            width: "100%",
-            height: "100%",
-            offset_x: "{size}",
-            rect {
-                height: "100%",
-                width: "200",
-                background: "{background}",
-                onclick: onclick,
-            }
-        }
-    )
-}
-```

diff --git a/book/src/guides/effects.md b/book/src/guides/effects.md
@@ -1,25 +0,0 @@
-# Effects
-
-Learn how the effects attributes work.
-
-- [`rotate`](#rotate)
-
-### rotate
-
-The `rotate` attribute let's you rotate an element.
-
-Example:
-
-```rust, no_run
-fn app(cx: Scope) -> Element {
-    render!(
-        label {
-            rotate: "180deg",
-            "Hello, World!"
-        }
-    )
-}
-```
-
-
-Compatible elements: all except [`text`](/guides/elements.html#paragraph-and-text).

diff --git a/book/src/guides/elements.md b/book/src/guides/elements.md
@@ -1,104 +0,0 @@
-# Elements
-
-Freya contains a set of primitive elements:
-
-- [`rect`](#rect)
-- [`label`](#label)
-- [`image`](#image)
-- [`svg`](#svg)
-- [`paragraph and text`](#paragraph-and-text-and-text)
-
-## rect
-
-The `rect` element (aka `rectangle`) is a box where you can place as many elements inside you want.
-You can specify things like [`width`](/guides/layout.html#width), [`paddings`](/guides/layout.html#padding) or even in what [`direction`](/guides/layout.html#direction) the inner elements are stacked.
-
-Example:
-
-```rust, no_run
-fn app(cx: Scope) -> Element {
-    render!(
-        rect {
-            direction: "vertical",
-            label { "Hi!" }
-            label { "Hi again!"}
-        }
-    )
-}
-```
-
-### label
-
-The `label` element simply shows some text.
-
-Example:
-
-```rust, no_run
-fn app(cx: Scope) -> Element {
-    render!(
-        label {
-            "Hello World"
-        }
-    )
-}
-```
-
-### svg
-
-The `svg` element let's you draw a SVG. You will need to use the `bytes_to_data` to transform the bytes into data the element can recognize.
-
-Example:
-
-```rust, no_run
-
-static FERRIS: &[u8] = include_bytes!("./ferris.svg");
-
-fn app(cx: Scope) -> Element {
-    let ferris = bytes_to_data(cx, FERRIS);
-    render!(
-        svg {
-            svg_data: ferris,
-        }
-    )
-}
-```
-
-### image
-
-The `image` element, just like `svg` element, require you to pass the image bytes yourself.
-
-```rust, no_run
-static RUST_LOGO: &[u8] = include_bytes!("./rust_logo.png");
-
-fn app(cx: Scope) -> Element {
-    let image_data = bytes_to_data(cx, RUST_LOGO);
-    render!(
-        image {
-            image_data: image_data,
-            width: "{size}",
-            height: "{size}",
-        }
-    )
-}
-```
-
-### paragraph and text
-
-Both `paragraph` and `text` elements are used together. They will let you build texts with different styles.
-
-``` rust
-fn app(cx: Scope) -> Element {
-    render!(
-        paragraph {
-            text {
-                font_size: "15",
-                "Hello, "
-            }
-            text {
-                font_size: "30",
-                "World!"
-            }
-        }
-    )
-}
-```