diff --git a/docs/references/a_rsx.md b/docs/references/a_rsx.md index 48feef3..bb0f622 100644 --- a/docs/references/a_rsx.md +++ b/docs/references/a_rsx.md @@ -70,17 +70,6 @@ fn app() -> Element { } ``` -## Type assignment -In special elements like `data_holder` You can specify what `type` the element holds. It would act like `my_fn::()` -```rust -fn app() -> Element { - rsx! { - // assign the type u32 - data_holder as u32 { id: "count" } - } -} -``` - ## Handler functions Instead of closures which are tricky to work with on structs, We use `Handler`, It's basically a closure wrapped with a `Arc>` ```rust @@ -95,13 +84,20 @@ 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 +## Handler functions (with dependents) +If you have a `State` and want to use it, you have to put a @ before the code block like this ```rust fn app() -> Element { + let count = State::new(); + rsx! { - @count: u32; + button { + on_click: fn(btn: &mut Button, event, document) @count { + let count = count.use_state(); // locks count so it can be used + }, + "Current count: {count}" + } } } -``` \ No newline at end of file +``` +> :::info you can add multiple decedents by separating them via `,` like: @var1, var2, var3 \ No newline at end of file diff --git a/docs/references/b_handler.md b/docs/references/b_handler.md index 3524d63..13af8b7 100644 --- a/docs/references/b_handler.md +++ b/docs/references/b_handler.md @@ -10,7 +10,7 @@ Handler::new(|btn: &mut Button, event, document| { // do something }) ``` -A better way to do this is: +### Recommended way ```rust rsx! { button { @@ -21,4 +21,22 @@ rsx! { } } ``` -> :::info `fn() {}` is a part of our macro `rsx!`. In rust you would normally use `|| {}` \ No newline at end of file +### With dependents +If you have a `State` and want to use it, you have to put a @ before the code block like this +```rust +fn app() -> Element { + let count = State::new(); + + rsx! { + button { + on_click: fn(btn: &mut Button, event, document) @count { + let count = count.use_state(); // locks count so it can be used + }, + "Current count: {count}" + } + } +} +``` +> :::info you can add multiple decedents by separating them via `,` like: @var1, var2, var3 + +> :::info `fn() {}` is a part of the OSUI macro `rsx!`. In rust you would normally use `|| {}` \ No newline at end of file diff --git a/docs/references/css.md b/docs/references/css.md index 824c875..bedef9a 100644 --- a/docs/references/css.md +++ b/docs/references/css.md @@ -26,7 +26,7 @@ fn styles() -> Css { // Style by state - "my_btn": clicked { // When the element state is clicked + "my_btn": "clicked" { // When the element state is clicked color: Blue, } } diff --git a/docs/references/e_document.md b/docs/references/e_document.md index 026de80..f98d72e 100644 --- a/docs/references/e_document.md +++ b/docs/references/e_document.md @@ -22,9 +22,7 @@ Restarts the program Retrieves a mutable reference to a boxed element of type T by its string identifier, returning None if no such element exists. > :::info Please make sure that the type of the element is correctly matched to the element of that id ### `get_element_by_id_raw(id: &str) -> Option<&mut Element>` -> :::warn Not recommended to use this function, Use `get_element_by_id` instead +> :::warning 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 -### `use_state(name: &str) -> &mut T` -Gets element (DataHolder) by id and returns the data of it: `&mut T` \ No newline at end of file +Renders/reloads the screen, useful when a element updates \ No newline at end of file diff --git a/docs/references/f_element.md b/docs/references/f_element.md index 7f28914..f5ba4ae 100644 --- a/docs/references/f_element.md +++ b/docs/references/f_element.md @@ -2,4 +2,47 @@ title: Element --- -`Element` is a type alias of `Box`. It makes the code look cleaner \ No newline at end of file +`Element` is a type alias of `Box`. It makes the code look cleaner + +# ElementWidget +`ElementWidget` is a trait that defines the Elements and it's rendering / event updates. + +## Methods +### `render(&self, focused: bool) -> Option` +- **required** +- This function renders the element + +### `event(&mut self, event: Event, document: &Document)` +- **optional** +- This function updates the element when there is a event + + +# ElementCore +`ElementCore` is a trait that will automatically be implemented by the `osui_element::element` proc-macro. All of it's functions are used by OSUI. + +## `element` proc-macro +This macro adds the essential fields and functions for a `ElementCore` structure. +```rust +use osui_element::element; +#[element] +#[derive(Default, Debug)] +struct MyElement {} +``` + +## `elem_fn` proc-macro +This macro makes a function that returns a `Box` of which T is the default of `MyElement` +```rust +use osui_element::{element, elem_fn}; +#[element] +#[elem_fn] +#[derive(Default, Debug)] +struct MyElement {} +``` + +>:::info +>You can also define a function for the element manually: +>```rust +>pub fn my_element() -> Box { +> Box::new(MyElement::default()) +>} +>``` \ No newline at end of file diff --git a/docs/references/g_element_widget.md b/docs/references/g_element_widget.md deleted file mode 100644 index adfa57c..0000000 --- a/docs/references/g_element_widget.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: ElementWidget ---- - -`ElementWidget` is a trait that defines the Elements and it's rendering / event updates. - -## Methods -### `render(&self, focused: bool) -> Option` -- **required** -- This function renders the element - -### `event(&mut self, event: Event, document: &Document)` -- **optional** -- This function updates the element when there is a event \ No newline at end of file diff --git a/docs/references/h_element_core.md b/docs/references/h_element_core.md deleted file mode 100644 index b7e8b38..0000000 --- a/docs/references/h_element_core.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: ElementCore ---- - -`ElementCore` is a trait that will automatically be implemented by the `osui_element::element` proc-macro. All of it's functions are used by OSUI. - -## `element` proc-macro -This macro adds the essential fields and functions for a `ElementCore` structure. -```rust -use osui_element::element; -#[element] -#[derive(Default, Debug)] -struct MyElement {} -``` - -## `elem_fn` proc-macro -This macro makes a function that returns a `Box` of which T is the default of `MyElement` -```rust -use osui_element::{element, elem_fn}; -#[element] -#[elem_fn] -#[derive(Default, Debug)] -struct MyElement {} -``` - ->:::info ->You can also define a function for the element manually: ->```rust ->pub fn my_element() -> Box { -> Box::new(MyElement::default()) ->} ->``` \ No newline at end of file diff --git a/versioned_docs/version-0.0.7/references/e_document.md b/versioned_docs/version-0.0.7/references/e_document.md index de72dbe..f98d72e 100644 --- a/versioned_docs/version-0.0.7/references/e_document.md +++ b/versioned_docs/version-0.0.7/references/e_document.md @@ -22,7 +22,7 @@ Restarts the program Retrieves a mutable reference to a boxed element of type T by its string identifier, returning None if no such element exists. > :::info Please make sure that the type of the element is correctly matched to the element of that id ### `get_element_by_id_raw(id: &str) -> Option<&mut Element>` -> :::warn Not recommended to use this function, Use `get_element_by_id` instead +> :::warning 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