From 4bbb44e04ab110af527d115f59849aa61e2a0681 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Mon, 2 Dec 2024 23:14:44 +0100
Subject: [PATCH] added new features (for future versions)

---
 .gitignore                    |  1 +
 docs/index.md                 | 11 +++++-----
 docs/references/a_rsx.md      | 11 ++++++++++
 docs/references/css.md        | 39 +++++++++++------------------------
 docs/references/e_document.md |  4 +++-
 5 files changed, 32 insertions(+), 34 deletions(-)

diff --git a/.gitignore b/.gitignore
index b2d6de3..64b3176 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,7 @@
 
 # Misc
 .DS_Store
+**/.DS_Store
 .env.local
 .env.development.local
 .env.test.local
diff --git a/docs/index.md b/docs/index.md
index c10cb2a..c1b7779 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -37,17 +37,16 @@ fn app() -> Element {
         // Create a button with a on_click handler
         button {
             on_click: fn(btn: &mut Button, _, document) {
-                if let Some(count) = document.get_element_by_id::<DataHolder<u32>>("count") {
-                    count.data += 1;
-                    btn.children.set_text(&count.data.to_string());
-                }
+                let count = document.use_state::<u32>("count");
+                *count += 1;
+                btn.children.set_text(&count.to_string());
             },
 
             "0"
         }
 
-        // Store the data (in this case count)
-        data_holder as u32 { id: "count" }
+        // Create a elemental field
+        @count: u32;
     }
 }
 ```
\ No newline at end of file
diff --git a/docs/references/a_rsx.md b/docs/references/a_rsx.md
index 0145c59..48feef3 100644
--- a/docs/references/a_rsx.md
+++ b/docs/references/a_rsx.md
@@ -93,4 +93,15 @@ fn app() -> Element {
         }
     }
 }
+```
+
+## Variables
+Instead of creating a `data_holder as u32` manually you can just define a variable with `@name: type;`
+> :::info Put this on the end of the rsx to avoid any conflicts with existing elements
+```rust
+fn app() -> Element {
+    rsx! {
+        @count: u32;
+    }
+}
 ```
\ No newline at end of file
diff --git a/docs/references/css.md b/docs/references/css.md
index a12bb30..824c875 100644
--- a/docs/references/css.md
+++ b/docs/references/css.md
@@ -4,7 +4,8 @@ title: CSS
 
 Along with the `Css` type, This macro provides styling for multiple elements by their class name or struct name.
 
-## Style by classname
+## Example
+In this case we will make a button with the classname `my_btn`. And set `styling`
 ```rust
 fn app() -> Element {
     rsx! {
@@ -13,29 +14,19 @@ fn app() -> Element {
         button { class: "my_btn", "Click me!" }
     }
 }
-
-fn styles() -> Css {
-    css! {
-        .my_btn { // style by classname
-            color: Red,
-        }
-    }
-}
 ```
 
-## Style by state
+## Style by classname
 ```rust
-fn app() -> Element {
-    rsx! {
-        styling: Some(styles()) // Set the css styling for the div.
-
-        button { class: "my_btn", "Click me!" }
-    }
-}
-
 fn styles() -> Css {
     css! {
-        .my_btn: clicked { // When the element state is clicked
+        "my_btn" { // style by classname
+            color: Red,
+        }
+
+        // Style by state
+
+        "my_btn": clicked { // When the element state is clicked
             color: Blue,
         }
     }
@@ -44,20 +35,14 @@ fn styles() -> Css {
 
 ## Style by struct name
 ```rust
-fn app() -> Element {
-    rsx! {
-        styling: Some(styles()) // Set the css styling for the div.
-
-        button { "Click me!" } // No need for classes
-    }
-}
-
 fn styles() -> Css {
     css! {
         Button { // style by the struct name
             color: Red,
         }
 
+        // Style by state
+
         Button: clicked { // When the element state is clicked
             color: Blue,
         }
diff --git a/docs/references/e_document.md b/docs/references/e_document.md
index de72dbe..026de80 100644
--- a/docs/references/e_document.md
+++ b/docs/references/e_document.md
@@ -25,4 +25,6 @@ Retrieves a mutable reference to a boxed element of type T by its string identif
 > :::warn Not recommended to use this function, Use `get_element_by_id` instead
 Retrieves a mutable reference to a boxed element by its string identifier, returning None if no such element exists
 ### `render()`
-Renders/reloads the screen, useful when a element updates
\ No newline at end of file
+Renders/reloads the screen, useful when a element updates
+### `use_state<T>(name: &str) -> &mut T`
+Gets element (DataHolder) by id and returns the data of it: `&mut T`
\ No newline at end of file