added new features (for future versions)

.gitignore

@@ -10,6 +10,7 @@
 
 # Misc
 .DS_Store
+**/.DS_Store
 .env.local
 .env.development.local
 .env.test.local

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") {
+                let count = document.use_state::<u32>("count");
-                    count.data += 1;
+                *count += 1;
-                    btn.children.set_text(&count.data.to_string());
+                btn.children.set_text(&count.to_string());
-                }
             },
 
             "0"
         }
 
-        // Store the data (in this case count)
+        // Create a elemental field
-        data_holder as u32 { id: "count" }
+        @count: u32;
     }
 }
 ```

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;
+    }
+}
 ```

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,
         }

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
+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`