changes

versioned_docs/version-0.0.9/h_extensions/id.md

@@ -0,0 +1,36 @@
+---
+title: ID Extension
+slug: /extensions/id
+---
+
+The `IdExtension` is a utility struct that provides an interface to look up widgets by a numeric ID within a `Screen`. It is implemented as an `Extension` and is built on top of a thread-safe `Arc<Screen>`.
+
+---
+
+## 📦 Usage
+
+```rust
+use osui::prelude::*;
+
+fn main() -> std::io::Result<()> {
+    let screen = Screen::new();
+    let elements = IdExtension::new(screen.clone());
+    screen.extension(elements.clone());
+
+    rsx! {
+        "Hello, World"
+    }
+    .draw(&screen);
+
+    std::thread::spawn({
+        let elements = elements.clone();
+        move || {
+            if let Some(widget) = elements.get_element(42) {
+                // use widget
+            }
+        }
+    });
+
+    screen.run()
+}
+```

versioned_docs/version-0.0.9/h_extensions/index.md

@@ -0,0 +1,37 @@
+---
+title: Extensions
+slug: /extensions
+---
+
+OSUI Extensions are a practical way to extend the possibilities with OSUI, Extensions allow for there to be a specific use or functionality that may otherwise be bloat or the opposite behavior of the use case.
+
+### `screen.extension(&mut self, ext: Extension)`
+
+You likely noticed that we used this function in the [Hello World App With Velocity](/docs/next/#hello-world-app-with-velocity) example, this function simply allows for structures implementing [Extension](/docs/next/extensions#trait-extension) to be included in the program.
+
+---
+
+## `Handler<E: Event>`
+
+A `Handler` is a `Component` that is called when a specific event is dispatched, typically through a `Extension`.
+
+### 📦 Usage
+
+```rust
+rsx!{
+    @Handler::new(|widget, t: &TickEvent| {}
+    "Hello World"
+}
+```
+
+---
+
+## Trait `Extension`
+
+### `init(&mut self, _screen: Arc<Screen>)`
+
+Runs right after the Transform component is applied to every widget.
+
+### `render(&mut self, _scope: &mut RenderScope, _widget: &Arc<Widget>)`
+
+Runs right before the `Element::render` is called.

versioned_docs/version-0.0.9/h_extensions/tick.md

@@ -0,0 +1,32 @@
+---
+title: Tick Extension
+slug: /extensions/tick
+---
+
+The `TickExtension` is a utility struct that calls a TickEvent on every tick from the provided tick rate on a separate thread.
+
+---
+
+## 📦 Usage
+
+```rust
+use osui::prelude::*;
+
+fn main() -> std::io::Result<()> {
+    let screen = Screen::new();
+    screen.extension(TickExtension(20)); // 20 tps
+
+    rsx! {
+        @Handler::new(|_, t: &TickEvent| {
+            // One second passed
+            if t.0 == 20 {
+                std::process:exit(0);
+            }
+        });
+        "Hello, World"
+    }
+    .draw(&screen);
+
+    screen.run()
+}
+```

versioned_docs/version-0.0.9/h_extensions/velocity.md

@@ -0,0 +1,39 @@
+---
+title: Velocity Extension
+slug: /extensions/velocity
+---
+
+The `VelocityExtension` is a utility struct that changes the `Transform` component of a div to make a velocity effect.
+
+> :::info
+> The `Velocity` component only works if the `Transform::new` component is in the element, otherwise it may have issues.
+
+---
+
+## 📦 Usage
+
+```rust
+use osui::prelude::*;
+
+fn main() -> std::io::Result<()> {
+    let screen = Screen::new();
+    screen.extension(VelocityExtension);
+
+    rsx! {
+        @Velocity(100, 0);
+        @Transform::new();
+        "Hello, World"
+    }
+    .draw(&screen);
+
+    screen.run()
+}
+```
+
+---
+
+## Components
+
+### `Velocity(x: i32, y: i32)`
+
+Makes the `VelocityExtension` move the element according to the values, if the values are negative then the velocity is in the opposite direction.