### Start Local Development Server

Source: https://github.com/ranile/gloo/blob/master/website/README.md

Starts a local development server for live preview. Changes are reflected without server restart.

```bash
yarn start
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/ranile/gloo/blob/master/website/README.md

Installs project dependencies using yarn.

```bash
yarn install
```

--------------------------------

### Serve Project with Trunk

Source: https://github.com/ranile/gloo/blob/master/examples/nested-worker-yew/README.md

Use this command to serve the project locally. Ensure Trunk is installed.

```bash
trunk serve
```

--------------------------------

### Build and Run Gloo History WASI Example

Source: https://github.com/ranile/gloo/blob/master/examples/history-wasi/README.md

Use these commands to compile the WASI module and then execute it using Wasmtime.

```bash
cargo build --manifest-path examples/history-wasi/Cargo.toml --target wasm32-wasip1
```

```bash
wasmtime examples/history-wasi/target/wasm32-wasip1/debug/example-history-wasi.wasm
```

--------------------------------

### Browser Dialog Examples

Source: https://context7.com/ranile/gloo/llms.txt

Demonstrates using `alert`, `confirm`, and `prompt` for basic browser dialog interactions. `confirm` returns a boolean, and `prompt` returns an `Option<String>`.

```rust
use gloo_dialogs::{alert, confirm, prompt};

fn dialog_examples() {
    // Show an alert message
    alert("Operation completed successfully!");

    // Ask for confirmation (returns bool)
    let confirmed = confirm("Are you sure you want to delete this item?");
    if confirmed {
        web_sys::console::log_1(&"User confirmed deletion".into());
    }

    // Prompt for input (returns Option<String>)
    let name = prompt("Enter your name:", None);
    match name {
        Some(n) => web_sys::console::log_1(&format!("Hello, {}!", n).into()),
        None => web_sys::console::log_1(&"User cancelled".into()),
    }

    // Prompt with default value
    let email = prompt("Enter your email:", Some("user@example.com"));
}
```

--------------------------------

### Make HTTP GET Requests with Gloo Net

Source: https://context7.com/ranile/gloo/llms.txt

Perform HTTP GET requests using a fluent builder API. Supports headers, query parameters, and JSON response parsing. Requires async context and spawn_local for execution.

```rust
use gloo_net::http::Request;
use serde::Deserialize;

#[derive(Deserialize, Debug)]
struct User {
    id: u32,
    name: String,
    email: String,
}

async fn fetch_user(user_id: u32) -> Result<User, gloo_net::Error> {
    let user: User = Request::get(&format!("https://api.example.com/users/{}", user_id))
        .header("Authorization", "Bearer token123")
        .send()
        .await?
        .json()
        .await?;

    Ok(user)
}

// Usage with spawn_local
use wasm_bindgen_futures::spawn_local;

spawn_local(async {
    match fetch_user(1).await {
        Ok(user) => web_sys::console::log_1(&format!("User: {:?}", user).into()),
        Err(e) => web_sys::console::log_1(&format!("Error: {:?}", e).into()),
    }
});
```

--------------------------------

### EventSource Stream Handling with Gloo-Net

Source: https://github.com/ranile/gloo/blob/master/crates/net/README.md

This example shows how to connect to an EventSource and subscribe to multiple event types. It uses `futures::stream::select` to multiplex events from different streams and logs received messages. Requires `gloo-net`, `wasm-bindgen-futures`, and `futures` crates.

```rust
use gloo_net::eventsource::futures::EventSource;
use wasm_bindgen_futures::spawn_local;
use futures::{stream, StreamExt};
let mut es = EventSource::new("http://api.example.com/ssedemo.php").unwrap();
let stream_1 = es.subscribe("some-event-type").unwrap();
let stream_2 = es.subscribe("another-event-type").unwrap();

spawn_local(async move {
   let mut all_streams = stream::select(stream_1, stream_2);
   while let Some(Ok((event_type, msg))) = all_streams.next().await {
       gloo_console::log!("1. {}: {:?}", event_type, msg)
   }
   gloo_console::log!("EventSource Closed");
})
```

--------------------------------

### Build All Gloo Crates

Source: https://github.com/ranile/gloo/blob/master/CONTRIBUTING.md

Use this command to build all crates within the Gloo project. Ensure you have the Rust toolchain installed.

```shell
cargo build --all
```

--------------------------------

### HTTP POST Request with JSON Body using Gloo-Net

Source: https://github.com/ranile/gloo/blob/master/crates/net/README.md

This example shows how to send a POST request with a JSON payload. It serializes a struct to JSON using `serde` and sends it to a given URL. The response text is then retrieved. Requires `gloo-net` and `serde` crates.

```rust
use gloo_net::http::Request;
use serde::Serialize;
#[derive(Serialize)]
struct Post<'a> {
   title: &'a str,
   body: &'a str,
   #[serde(rename = "userId")]
   user_id: u32,
}

async fn run() -> Result<(), gloo_net::Error> {
let response = Request::post("https://example.com/posts")
   .json(&Post { title: "hello", body: "world", user_id: 1 })? 
   .send()
   .await?;
let data = response.text().await?;
Ok(())
}
```

--------------------------------

### Basic HTTP GET Request with Gloo-Net

Source: https://github.com/ranile/gloo/blob/master/crates/net/README.md

Use this snippet for making a simple GET request to a specified path. It sends the request and asserts that the response status code is 200. Requires the `gloo-net` crate.

```rust
use gloo_net::http::Request;
async fn run() -> Result<(), gloo_net::Error> {
   let resp = Request::get("/path")
       .send()
       .await
       .unwrap();
   assert_eq!(resp.status(), 200);
   Ok(())
}
```

--------------------------------

### Add Event Listener and Timeout with Gloo

Source: https://github.com/ranile/gloo/blob/master/README.md

This example demonstrates using `gloo::events::EventListener` to attach a click handler to a button and `gloo::timers::callback::Timeout` to schedule an update after a delay. It requires importing necessary modules from `gloo` and `wasm_bindgen`.

```rust
use gloo::{events::EventListener, timers::callback::Timeout};
use wasm_bindgen::prelude::*;

pub struct DelayedHelloButton {
    button: web_sys::Element,
    on_click: events::EventListener,
}

impl DelayedHelloButton {
    pub fn new(document: &web_sys::Document) -> Result<DelayedHelloButton, JsValue> {
        // Create a `<button>` element.
        let button = document.create_element("button")?;

        // Listen to "click" events on the button.
        let button2 = button.clone();
        let on_click = EventListener::new(&button, "click", move |_event| {
            // After a one second timeout, update the button's text content.
            let button3 = button2.clone();
            Timeout::new(1_000, move || {
                button3.set_text_content(Some("Hello from one second ago!"));
            })
            .forget();
        });

        Ok(DelayedHelloButton { button, on_click })
    }
}
```

--------------------------------

### HTTP Networking API (gloo-net) - GET Requests

Source: https://context7.com/ranile/gloo/llms.txt

Perform HTTP GET requests with a fluent builder API. Supports headers, query parameters, and various response formats.

```APIDOC
## HTTP Networking API (gloo-net) - GET Requests

### Description
Perform HTTP GET requests with a fluent builder API. Supports headers, query parameters, and various response formats.

### Method
`GET`

### Endpoint
`/users/{user_id}` (Example path)

### Parameters
#### Path Parameters
- **user_id** (u32) - Required - The ID of the user to fetch.

#### Query Parameters
None explicitly shown in this example, but the builder supports `.query()`.

#### Request Body
None

### Request Example
```rust
use gloo_net::http::Request;
use serde::Deserialize;

#[derive(Deserialize, Debug)]
struct User {
    id: u32,
    name: String,
    email: String,
}

async fn fetch_user(user_id: u32) -> Result<User, gloo_net::Error> {
    let user: User = Request::get(&format!("https://api.example.com/users/{}", user_id))
        .header("Authorization", "Bearer token123")
        .send()
        .await? 
        .json()
        .await?;

    Ok(user)
}

// Usage with spawn_local
use wasm_bindgen_futures::spawn_local;

spawn_local(async {
    match fetch_user(1).await {
        Ok(user) => web_sys::console::log_1(&format!("User: {:?}", user).into()),
        Err(e) => web_sys::console::log_1(&format!("Error: {:?}", e).into()),
    }
});
```

### Response
#### Success Response (200)
- **User** (User) - An object containing user details (id, name, email).

#### Response Example
```json
{
  "id": 1,
  "name": "John Doe",
  "email": "john.doe@example.com"
}
```
```

--------------------------------

### Build Static Website Content

Source: https://github.com/ranile/gloo/blob/master/website/README.md

Generates static website content into the 'build' directory for hosting.

```bash
yarn build
```

--------------------------------

### Deploy Website to GitHub Pages

Source: https://github.com/ranile/gloo/blob/master/website/README.md

Builds and deploys the website to the 'gh-pages' branch, suitable for GitHub Pages hosting. Ensure to replace '<Your GitHub username>' with your actual username.

```bash
GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
```

--------------------------------

### Build HTTP Requests with Query Parameters

Source: https://context7.com/ranile/gloo/llms.txt

Construct HTTP requests with query parameters using the fluent .query() method. Supports chaining multiple calls with different parameter types like tuples and HashMaps.

```rust
use gloo_net::http::Request;
use std::collections::HashMap;

async fn search_users() -> Result<String, gloo_net::Error> {
    let mut params = HashMap::new();
    params.insert("page", "1");
    params.insert("limit", "10");

    let response = Request::get("https://api.example.com/search")
        .query([("q", "rust")])           // Array of tuples
        .query(params)                     // HashMap
        .query([("sort", "name")])         // Can chain multiple calls
        .send()
        .await?;

    response.text().await
}
```

--------------------------------

### EventListener::new_with_options - Advanced Event Options

Source: https://context7.com/ranile/gloo/llms.txt

Configure event listener options including capture phase and passive mode for performance optimization.

```APIDOC
## EventListener::new_with_options - Advanced Event Options

### Description
Configure event listener options including capture phase and passive mode for performance optimization.

### Method
`EventListener::new_with_options`

### Endpoint
N/A (Client-side event listener)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```rust
use gloo_events::{EventListener, EventListenerOptions, EventListenerPhase};
use wasm_bindgen::UnwrapThrowExt;

let document = web_sys::window().unwrap().document().unwrap();

// Enable prevent_default by setting passive to false
let options = EventListenerOptions::enable_prevent_default();

let listener = EventListener::new_with_options(
    &document,
    "touchstart",
    options,
    move |event| {
        event.prevent_default();
        web_sys::console::log_1(&"Touch started (default prevented)".into());
    },
);

// Run in capture phase instead of bubble phase
let capture_options = EventListenerOptions::run_in_capture_phase();

let capture_listener = EventListener::new_with_options(
    &document,
    "click",
    capture_options,
    move |event| {
        event.stop_propagation();
        web_sys::console::log_1(&"Captured click!".into());
    },
);
```

### Response
N/A (Event listeners do not have direct responses in this context)

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Display prompt dialog

Source: https://github.com/ranile/gloo/blob/master/website/blog/2021-07-27-new-release.md

Use the `prompt` function from `gloo-dialogs` to display a browser prompt dialog, allowing the user to input text. It returns the user's input.

```rust
prompt("What do you want to say?");
```

--------------------------------

### Update README.md Files

Source: https://github.com/ranile/gloo/blob/master/CONTRIBUTING.md

Automatically update the `README.md` files for each crate to reflect its top-level documentation. This script should be run from the repository root.

```shell
./update-readmes.sh
```

--------------------------------

### WebSocket Communication with Gloo-Net

Source: https://github.com/ranile/gloo/blob/master/crates/net/README.md

Demonstrates establishing a WebSocket connection and sending/receiving messages. It splits the WebSocket into separate send and receive streams, allowing concurrent operations. Requires `gloo-net`, `wasm-bindgen-futures`, and `futures` crates.

```rust
use gloo_net::websocket::{Message, futures::WebSocket};
use wasm_bindgen_futures::spawn_local;
use futures::{SinkExt, StreamExt};
let mut ws = WebSocket::open("wss://echo.websocket.org").unwrap();
let (mut write, mut read) = ws.split();

spawn_local(async move {
   write.send(Message::Text(String::from("test"))).await.unwrap();
   write.send(Message::Text(String::from("test 2"))).await.unwrap();
});

spawn_local(async move {
   while let Some(msg) = read.next().await {
       gloo_console::log!(format!("1. {:?}", msg));
   }
   gloo_console::log!("WebSocket Closed");
})
```

--------------------------------

### HTTP Networking API (gloo-net) - Request with Query Parameters

Source: https://context7.com/ranile/gloo/llms.txt

Build requests with query parameters using the fluent `.query()` method.

```APIDOC
## HTTP Networking API (gloo-net) - Request with Query Parameters

### Description
Build requests with query parameters using the fluent `.query()` method.

### Method
`GET`

### Endpoint
`/search` (Example path)

### Parameters
#### Path Parameters
None

#### Query Parameters
- **q** (string) - Optional - The search query.
- **page** (string) - Optional - The page number for results.
- **limit** (string) - Optional - The number of results per page.
- **sort** (string) - Optional - The field to sort results by.

#### Request Body
None

### Request Example
```rust
use gloo_net::http::Request;
use std::collections::HashMap;

async fn search_users() -> Result<String, gloo_net::Error> {
    let mut params = HashMap::new();
    params.insert("page", "1");
    params.insert("limit", "10");

    let response = Request::get("https://api.example.com/search")
        .query([("q", "rust")])           // Array of tuples
        .query(params)                     // HashMap
        .query([("sort", "name")])         // Can chain multiple calls
        .send()
        .await?;

    response.text().await
}
```

### Response
#### Success Response (200)
- **String** (string) - The response body as text.

#### Response Example
```text
[Search results as text]
```
```

--------------------------------

### Open WebSocket Connection - Rust

Source: https://context7.com/ranile/gloo/llms.txt

Establishes a WebSocket connection and spawns tasks for sending and receiving messages. Requires `gloo-net`, `wasm-bindgen-futures`, and `futures` crates.

```rust
use gloo_net::websocket::{Message, futures::WebSocket};
use wasm_bindgen_futures::spawn_local;
use futures::{SinkExt, StreamExt};

fn connect_websocket() {
    let ws = WebSocket::open("wss://echo.websocket.org").unwrap();
    let (mut write, mut read) = ws.split();

    // Spawn a task to send messages
    spawn_local(async move {
        // Send text message
        write.send(Message::Text(String::from("Hello, WebSocket!"))).await.unwrap();

        // Send binary message
        write.send(Message::Bytes(vec![1, 2, 3, 4])).await.unwrap();
    });

    // Spawn a task to receive messages
    spawn_local(async move {
        while let Some(msg) = read.next().await {
            match msg {
                Ok(Message::Text(text)) => {
                    web_sys::console::log_1(&format!("Received text: {}", text).into());
                }
                Ok(Message::Bytes(bytes)) => {
                    web_sys::console::log_1(&format!("Received {} bytes", bytes.len()).into());
                }
                Err(e) => {
                    web_sys::console::log_1(&format!("WebSocket error: {:?}", e).into());
                    break;
                }
            }
        }
        web_sys::console::log_1(&"WebSocket closed".into());
    });
}
```

--------------------------------

### Import Gloo-Timers Functionality

Source: https://github.com/ranile/gloo/blob/master/website/docs/getting-started.mdx

Import specific functionality, like `Timeout` callbacks, from the `gloo_timers` crate in your `src/lib.rs` file. This allows for targeted use of timer features.

```rust
use gloo_timers::callback::Timeout;

// ...

```

--------------------------------

### Configure EventListener Options

Source: https://context7.com/ranile/gloo/llms.txt

Use EventListenerOptions to enable prevent_default by setting passive to false or to run listeners in the capture phase.

```rust
use gloo_events::{EventListener, EventListenerOptions, EventListenerPhase};
use wasm_bindgen::UnwrapThrowExt;

let document = web_sys::window().unwrap().document().unwrap();

// Enable prevent_default by setting passive to false
let options = EventListenerOptions::enable_prevent_default();

let listener = EventListener::new_with_options(
    &document,
    "touchstart",
    options,
    move |event| {
        event.prevent_default();
        web_sys::console::log_1(&"Touch started (default prevented)".into());
    },
);

// Run in capture phase instead of bubble phase
let capture_options = EventListenerOptions::run_in_capture_phase();

let capture_listener = EventListener::new_with_options(
    &document,
    "click",
    capture_options,
    move |event| {
        event.stop_propagation();
        web_sys::console::log_1(&"Captured click!".into());
    },
);
```

--------------------------------

### Import Gloo Modules

Source: https://github.com/ranile/gloo/blob/master/website/docs/getting-started.mdx

Import modules from the `gloo` crate, such as timers and event listeners, in your `src/lib.rs` file. This allows access to Gloo's functionalities.

```rust
use gloo::{timers, events};

// ...

```

--------------------------------

### Create and Manipulate Blobs and Files

Source: https://context7.com/ranile/gloo/llms.txt

Work with binary data using Blob and File objects for uploads, downloads, and data processing. Blobs can be created from strings, bytes, or with specific MIME types.

```rust
use gloo_file::{Blob, File};

fn blob_example() {
    // Create a Blob from a string
    let text_blob = Blob::new("Hello, World!");

    // Create a Blob with MIME type
    let json_blob = Blob::new_with_options(
        r#"{"name": "test"}"#, 
        Some("application/json"),
    );

    // Create from bytes
    let binary_blob = Blob::new(&[0u8, 1, 2, 3, 4][..]);

    // Get blob properties
    let size = text_blob.size();
    let mime = json_blob.raw_mime_type();

    // Create a File with name
    let file = File::new("data.txt", "File contents here");
    let filename = file.name();

    // Create a File with options
    use std::time::SystemTime;
    let file_with_options = File::new_with_options(
        "document.json",
        r#"{"key": "value"}"#, 
        Some("application/json"),
        Some(SystemTime::now()),
    );
}
```

--------------------------------

### Render API (gloo-render)

Source: https://context7.com/ranile/gloo/llms.txt

Offers functionality to schedule callbacks synchronized with the browser's repaint cycle for smooth animations.

```APIDOC
## Render API (gloo-render)

### request_animation_frame - Animation loop

### Description
Schedule callbacks synchronized with the browser's repaint cycle for smooth animations.

### Function
- `request_animation_frame(callback: F)`: Schedules a callback to be executed before the next repaint.

### Usage
- The callback receives a `timestamp` argument representing the time in milliseconds since the page load.
- The returned `AnimationFrameHandle` can be used to cancel the animation frame by dropping it.
- For continuous animation, the callback should request the next frame.

### Example Usage
```rust
use gloo_render::request_animation_frame;

fn animate() {
    let handle = request_animation_frame(move |timestamp| {
        // `timestamp` is the time in milliseconds since page load
        web_sys::console::log_1(&format!("Frame at {}ms", timestamp).into());

        // For continuous animation, request the next frame
        // (typically you'd store this in a struct to manage the loop)
    });

    // The animation frame is automatically cancelled if `handle` is dropped
    // To keep it running, call handle.forget() or store it somewhere
}

// Continuous animation example
fn start_animation_loop() {
    fn render_frame(timestamp: f64) {
        // Update animation state based on timestamp
        web_sys::console::log_1(&format!("Rendering at {}ms", timestamp).into());

        // Request next frame
        let _handle = request_animation_frame(render_frame);
    }

    // Start the loop
    let _handle = request_animation_frame(render_frame);
}
```
```

--------------------------------

### Format Gloo Source Code

Source: https://github.com/ranile/gloo/blob/master/CONTRIBUTING.md

Apply consistent code formatting across the entire Gloo codebase using `rustfmt`. Run this command to ensure adherence to style guidelines.

```shell
cargo fmt
```

--------------------------------

### Continuous Animation Loop

Source: https://context7.com/ranile/gloo/llms.txt

Sets up a continuous animation loop by repeatedly requesting animation frames. Ensure the handle is managed to prevent memory leaks or unintended stops.

```rust
// Continuous animation example
fn start_animation_loop() {
    fn render_frame(timestamp: f64) {
        // Update animation state based on timestamp
        web_sys::console::log_1(&format!("Rendering at {}ms", timestamp).into());

        // Request next frame
        let _handle = request_animation_frame(render_frame);
    }

    // Start the loop
    let _handle = request_animation_frame(render_frame);
}
```

--------------------------------

### Display alert dialog

Source: https://github.com/ranile/gloo/blob/master/website/blog/2021-07-27-new-release.md

Use the `alert` function from `gloo-dialogs` to display a standard browser alert box with a message. This is a simple way to provide user feedback.

```rust
alert("Hello World!");
```

--------------------------------

### Structured Console Output - Rust

Source: https://context7.com/ranile/gloo/llms.txt

Groups console output and displays tabular data using `gloo_console` macros. Requires `serde` for table data.

```rust
use gloo_console::{group, group_end, table, log};
use serde::Serialize;

#[derive(Serialize)]
struct User {
    name: String,
    age: u32,
}

fn structured_logging() {
    // Create a collapsible group
    group!("User Details");
    log!("Name: Alice");
    log!("Age: 30");
    group_end!();

    // Collapsed group
    group!(collapsed "Debug Info");
    log!("Internal state...");
    group_end!();

    // Display data as a table
    let users = vec![
        User { name: "Alice".into(), age: 30 },
        User { name: "Bob".into(), age: 25 },
    ];
    table!(users);
}
```

--------------------------------

### Build a Specific Gloo Crate

Source: https://github.com/ranile/gloo/blob/master/CONTRIBUTING.md

Build an individual crate by specifying its name with the `-p` flag. This is useful for focusing on a particular component.

```shell
cargo build -p my-particular-crate
```

--------------------------------

### Run Wasm Headless Browser Tests

Source: https://github.com/ranile/gloo/blob/master/CONTRIBUTING.md

Execute Wasm tests in a headless browser environment for a specific crate. You can choose between Firefox, Safari, or Chrome.

```shell
wasm-pack test --headless --firefox crates/my-particular-crate
```

--------------------------------

### Display confirm dialog

Source: https://github.com/ranile/gloo/blob/master/website/blog/2021-07-27-new-release.md

Use the `confirm` function from `gloo-dialogs` to display a browser confirmation dialog with 'OK' and 'Cancel' buttons. It returns a boolean indicating the user's choice.

```rust
confirm("Are you sure?");
```

--------------------------------

### Add Gloo Dependency

Source: https://github.com/ranile/gloo/blob/master/website/docs/getting-started.mdx

Include the `gloo` crate as a dependency in your `Cargo.toml` file to use the entire toolkit. This is suitable for web applications or top-level Wasm crates.

```toml
[dependencies]
gloo = "0.3"

```

--------------------------------

### Implement Hash-Based Routing with HashHistory

Source: https://context7.com/ranile/gloo/llms.txt

Utilize hash-based URLs for client-side routing, which does not require server configuration. This is useful for single-page applications.

```rust
use gloo_history::{HashHistory, History};

fn hash_history_example() {
    let history = HashHistory::new();

    // URLs will be like: https://example.com/#/dashboard
    history.push("/dashboard");
    history.push("/users/123");

    let location = history.location();
    // location.path() returns "/users/123"
}
```

--------------------------------

### Timers API (gloo-timers)

Source: https://context7.com/ranile/gloo/llms.txt

Provides utilities for scheduling one-time callbacks (timeouts) and repeating callbacks (intervals) with Rust and WebAssembly.

```APIDOC
## Timeout::new - Schedule a one-time callback

### Description
Schedule a callback to execute after a specified delay in milliseconds. The timeout can be cancelled by dropping the returned handle, or kept alive indefinitely with `forget()`.

### Method
N/A (Rust function)

### Endpoint
N/A (Rust function)

### Parameters
N/A

### Request Example
```rust
use gloo_timers::callback::Timeout;

// Create a timeout that fires after 1 second
let timeout = Timeout::new(1_000, move || {
    // This code runs after 1 second
    web_sys::console::log_1(&"Timeout fired!".into());
});

// Option 1: Keep the timeout alive forever (won't be cancelled)
timeout.forget();

// Option 2: Cancel the timeout by dropping it
// drop(timeout);

// Option 3: Explicitly cancel and get the closure back
// let closure = timeout.cancel();
```

### Response
N/A (Rust function)

### Response Example
N/A
```

```APIDOC
## Interval::new - Schedule a repeating callback

### Description
Schedule a callback to execute repeatedly at a fixed interval. The interval continues until the handle is dropped or `forget()` is called.

### Method
N/A (Rust function)

### Endpoint
N/A (Rust function)

### Parameters
N/A

### Request Example
```rust
use gloo_timers::callback::Interval;

// Create an interval that fires every 500ms
let interval = Interval::new(500, move || {
    web_sys::console::log_1(&"Interval tick!".into());
});

// Keep the interval running forever
interval.forget();

// Or cancel it later
// drop(interval);
```

### Response
N/A (Rust function)

### Response Example
N/A
```

```APIDOC
## TimeoutFuture - Async timeout with futures

### Description
Use timeouts as async futures for integration with async/await code. Requires the `futures` feature.

### Method
N/A (Rust function)

### Endpoint
N/A (Rust function)

### Parameters
N/A

### Request Example
```rust
use gloo_timers::future::TimeoutFuture;
use wasm_bindgen_futures::spawn_local;

spawn_local(async {
    // Wait for 2 seconds
    TimeoutFuture::new(2_000).await;

    // Code here runs after the timeout
    web_sys::console::log_1(&"Async timeout complete!".into());
});
```

### Response
N/A (Rust function)

### Response Example
N/A
```

--------------------------------

### WebSocket API (gloo-net)

Source: https://context7.com/ranile/gloo/llms.txt

Create WebSocket connections with full duplex communication using futures-based streams and sinks.

```APIDOC
## WebSocket::open - Create WebSocket connections

### Description
Establish WebSocket connections with full duplex communication using futures-based streams and sinks.

### Method
POST (Implicit, as WebSocket connection is initiated)

### Endpoint
`wss://echo.websocket.org` (Example)

### Parameters
None explicitly defined for the `open` method itself, connection URL is passed during instantiation.

### Request Example
```rust
use gloo_net::websocket::{Message, futures::WebSocket};
use wasm_bindgen_futures::spawn_local;
use futures::{SinkExt, StreamExt};

fn connect_websocket() {
    let ws = WebSocket::open("wss://echo.websocket.org").unwrap();
    let (mut write, mut read) = ws.split();

    // Spawn a task to send messages
    spawn_local(async move {
        // Send text message
        write.send(Message::Text(String::from("Hello, WebSocket!"))).await.unwrap();

        // Send binary message
        write.send(Message::Bytes(vec![1, 2, 3, 4])).await.unwrap();
    });

    // Spawn a task to receive messages
    spawn_local(async move {
        while let Some(msg) = read.next().await {
            match msg {
                Ok(Message::Text(text)) => {
                    web_sys::console::log_1(&format!("Received text: {}", text).into());
                }
                Ok(Message::Bytes(bytes)) => {
                    web_sys::console::log_1(&format!("Received {} bytes", bytes.len()).into());
                }
                Err(e) => {
                    web_sys::console::log_1(&format!("WebSocket error: {:?}", e).into());
                    break;
                }
            }
        }
        web_sys::console::log_1(&"WebSocket closed".into());
    });
}
```

### Response
No direct HTTP response. Connection status and messages are handled asynchronously.

#### Success Response (Connection Established)
- None explicitly defined, success is indicated by the absence of errors during connection.

#### Response Example (Received Message)
```json
{
  "type": "text" | "bytes",
  "data": "Received message content"
}
```
```

--------------------------------

### Add Gloo-Timers Dependency

Source: https://github.com/ranile/gloo/blob/master/website/docs/getting-started.mdx

Add the `gloo-timers` crate to your `Cargo.toml` if you only need timer functionalities. This is useful for library crates that depend on specific Gloo features.

```toml
[dependencies]
gloo-timers = "0.2"

```

--------------------------------

### Schedule a repeating callback with Interval::new

Source: https://context7.com/ranile/gloo/llms.txt

Schedule a callback to execute repeatedly at a fixed interval. The interval continues until the handle is dropped or `forget()` is called.

```rust
use gloo_timers::callback::Interval;

// Create an interval that fires every 500ms
let interval = Interval::new(500, move || {
    web_sys::console::log_1(&"Interval tick!".into());
});

// Keep the interval running forever
interval.forget();

// Or cancel it later
// drop(interval);
```

--------------------------------

### Manage Browser History with BrowserHistory

Source: https://context7.com/ranile/gloo/llms.txt

Control browser navigation using pushState and replaceState operations. Listen for navigation changes to react to URL updates.

```rust
use gloo_history::{BrowserHistory, History};
use serde::{Serialize, Deserialize};

#[derive(Serialize, Deserialize, Clone, Debug)]
struct PageState {
    scroll_position: i32,
    filter: String,
}

fn history_example() {
    let history = BrowserHistory::new();

    // Get current location
    let location = history.location();
    web_sys::console::log_1(&format!("Current path: {}", location.path()).into());

    // Navigate to a new URL (adds to history)
    history.push("/dashboard");

    // Navigate with state
    let state = PageState {
        scroll_position: 100,
        filter: "active".into(),
    };
    history.push_with_state("/users", state);

    // Replace current history entry (doesn't add to history)
    history.replace("/settings");

    // Navigate back/forward
    history.go(-1); // Go back one page
    history.go(1);  // Go forward one page

    // Listen for navigation changes
    let listener = history.listen(move || {
        let location = BrowserHistory::new().location();
        web_sys::console::log_1(&format!("Navigated to: {}", location.path()).into());
    });

    // Keep listener alive
    std::mem::forget(listener);
}
```

--------------------------------

### Worker API (gloo-worker)

Source: https://context7.com/ranile/gloo/llms.txt

Documentation for the Gloo Worker API is not provided in the input text.

--------------------------------

### Run All Non-Wasm Tests

Source: https://github.com/ranile/gloo/blob/master/CONTRIBUTING.md

Execute all non-Wasm tests, including documentation tests, for all Gloo crates. This command ensures basic functionality and documentation integrity.

```shell
cargo test --all
```

--------------------------------

### Log text to browser console

Source: https://github.com/ranile/gloo/blob/master/website/blog/2021-07-27-new-release.md

Use the `log!` macro from `gloo-console` to output text to the browser's developer console. This macro handles formatting on the browser side.

```rust
log!("text");
```

--------------------------------

### Async timeout with TimeoutFuture

Source: https://context7.com/ranile/gloo/llms.txt

Use timeouts as async futures for integration with async/await code. Requires the `futures` feature.

```rust
use gloo_timers::future::TimeoutFuture;
use wasm_bindgen_futures::spawn_local;

spawn_local(async {
    // Wait for 2 seconds
    TimeoutFuture::new(2_000).await;

    // Code here runs after the timeout
    web_sys::console::log_1(&"Async timeout complete!".into());
});
```

--------------------------------

### Log Text and JsValue to Console

Source: https://github.com/ranile/gloo/blob/master/crates/console/README.md

Use the `log!` macro to print text and any serializable `JsValue` to the browser's console. Ensure `gloo_console::log` is imported.

```rust
use gloo_console::log;
let object = JsValue::from("any JsValue can be logged");
log!("text", object);
```

--------------------------------

### Log multiple values to browser console

Source: https://github.com/ranile/gloo/blob/master/website/blog/2021-07-27-new-release.md

Log multiple values, including literals and `JsValue`s, using the `log!` macro from `gloo-console`. The macro supports multiple arguments for varied logging.

```rust
let object = JsValue::from("Some JsValue");
log!("literal", object);
```

--------------------------------

### Read File Contents with Callbacks

Source: https://context7.com/ranile/gloo/llms.txt

Reads file contents asynchronously using callbacks for text, bytes, or data URLs. Ensure the `File` object is valid before calling.

```rust
use gloo_file::Blob;
use gloo_file::callbacks::{read_as_text, read_as_bytes, read_as_data_url};
use gloo_file::File;

fn read_file_callback(file: &File) {
    // Read as text with callback
    let _reader = read_as_text(file, |result| {
        match result {
            Ok(text) => web_sys::console::log_1(&format!("Content: {}", text).into()),
            Err(e) => web_sys::console::log_1(&format!("Error: {}", e).into()),
        }
    });

    // Read as bytes
    let _reader = read_as_bytes(file, |result| {
        match result {
            Ok(bytes) => web_sys::console::log_1(&format!("Read {} bytes", bytes.len()).into()),
            Err(e) => web_sys::console::log_1(&format!("Error: {}", e).into()),
        }
    });

    // Read as data URL (base64)
    let _reader = read_as_data_url(file, |result| {
        match result {
            Ok(url) => web_sys::console::log_1(&format!("Data URL: {}", url).into()),
            Err(e) => web_sys::console::log_1(&format!("Error: {}", e).into()),
        }
    });
}
```

--------------------------------

### Browser Console Logging - Rust

Source: https://context7.com/ranile/gloo/llms.txt

Logs messages to the browser console with various severity levels and supports multiple arguments. Requires `gloo-console` and `wasm-bindgen` crates.

```rust
use gloo_console::{log, warn, error, info, debug};
use wasm_bindgen::JsValue;

fn demonstrate_logging() {
    // Basic logging
    log!("Hello, console!");

    // Multiple arguments
    log!("User:", "Alice", "Age:", 30);

    // Different log levels
    info!("Information message");
    warn!("Warning message");
    error!("Error message");
    debug!("Debug message");

    // Log JavaScript values
    let js_object = JsValue::from_str("JavaScript string");
    log!("JS Value:", js_object);
}
```

--------------------------------

### ObjectUrl - Create object URLs

Source: https://context7.com/ranile/gloo/llms.txt

Enables the creation of temporary URLs for Blobs, which can be used in attributes like `src`.

```APIDOC
## ObjectUrl - Create object URLs

### Description
Create temporary URLs for Blobs that can be used as src attributes.

### Method
- `ObjectUrl::from(blob: Blob)`: Creates an ObjectUrl from a Blob.

### Usage
- The created URL can be used as a value for attributes like `href` or `src`.
- The URL is automatically revoked when the `ObjectUrl` instance is dropped.

### Example
```rust
use gloo_file::{Blob, ObjectUrl};

fn create_download_link(data: &str) {
    let blob = Blob::new_with_options(data, Some("text/plain"));
    let url = ObjectUrl::from(blob);

    // Use url.to_string() as href for download links
    // URL is automatically revoked when ObjectUrl is dropped
    web_sys::console::log_1(&format!("Download URL: {}", url).into());
}
```
```

--------------------------------

### Create and Forget Timeout with Callback

Source: https://github.com/ranile/gloo/blob/master/crates/timers/README.md

Use `Timeout::new` to create a timer that executes a closure after a specified delay. Call `forget` if the timeout is not intended to be cancelled.

```rust
use gloo_timers::callback::Timeout;

let timeout = Timeout::new(1_000, move || {
    // Do something after the one second timeout is up!
});

// Since we don't plan on cancelling the timeout, call `forget`.
timeout.forget();
```

--------------------------------

### Create Object URL for Blob

Source: https://context7.com/ranile/gloo/llms.txt

Creates a temporary URL for a Blob that can be used in `src` attributes. The URL is automatically revoked when the `ObjectUrl` is dropped.

```rust
use gloo_file::{Blob, ObjectUrl};

fn create_download_link(data: &str) {
    let blob = Blob::new_with_options(data, Some("text/plain"));
    let url = ObjectUrl::from(blob);

    // Use url.to_string() as href for download links
    // URL is automatically revoked when ObjectUrl is dropped
    web_sys::console::log_1(&format!("Download URL: {}", url).into());
}
```

--------------------------------

### Make HTTP POST Requests with JSON Body

Source: https://context7.com/ranile/gloo/llms.txt

Send POST requests with JSON payloads. The .json() method automatically sets the Content-Type header. Handles server responses and potential errors.

```rust
use gloo_net::http::Request;
use serde::{Serialize, Deserialize};

#[derive(Serialize)]
struct CreatePost<'a> {
    title: &'a str,
    body: &'a str,
    #[serde(rename = "userId")]
    user_id: u32,
}

#[derive(Deserialize, Debug)]
struct PostResponse {
    id: u32,
    title: String,
    body: String,
}

async fn create_post() -> Result<PostResponse, gloo_net::Error> {
    let new_post = CreatePost {
        title: "Hello World",
        body: "This is my first post",
        user_id: 1,
    };

    let response = Request::post("https://jsonplaceholder.typicode.com/posts")
        .json(&new_post)?
        .send()
        .await?;

    if response.ok() {
        response.json().await
    } else {
        Err(gloo_net::Error::GlooError(format!(
            "Server error: {}",
            response.status()
        )))
    }
}
```

--------------------------------

### Store and Retrieve Data with LocalStorage

Source: https://context7.com/ranile/gloo/llms.txt

Use LocalStorage to persist JSON-serializable data across browser sessions. Data is automatically serialized to JSON for complex types.

```rust
use gloo_storage::{LocalStorage, SessionStorage, Storage};
use serde::{Serialize, Deserialize};

#[derive(Serialize, Deserialize, Debug)]
struct UserPreferences {
    theme: String,
    language: String,
    notifications_enabled: bool,
}

fn storage_example() {
    // Store a simple value
    LocalStorage::set("username", "alice").unwrap();

    // Retrieve a value
    let username: String = LocalStorage::get("username").unwrap();

    // Store complex data (automatically serialized to JSON)
    let prefs = UserPreferences {
        theme: "dark".into(),
        language: "en".into(),
        notifications_enabled: true,
    };
    LocalStorage::set("preferences", prefs).unwrap();

    // Retrieve complex data
    let loaded_prefs: UserPreferences = LocalStorage::get("preferences").unwrap();
    web_sys::console::log_1(&format!("Loaded: {:?}", loaded_prefs).into());

    // Delete a key
    LocalStorage::delete("username");

    // Clear all storage
    LocalStorage::clear();

    // Get storage length
    let count = LocalStorage::length();

    // Session storage works the same way
    SessionStorage::set("session_token", "abc123").unwrap();
    let token: String = SessionStorage::get("session_token").unwrap();
}
```

--------------------------------

### Schedule a one-time callback with Timeout::new

Source: https://context7.com/ranile/gloo/llms.txt

Schedule a callback to execute after a specified delay. The timeout can be cancelled by dropping the returned handle or kept alive indefinitely with `forget()`.

```rust
use gloo_timers::callback::Timeout;

// Create a timeout that fires after 1 second
let timeout = Timeout::new(1_000, move || {
    // This code runs after 1 second
    web_sys::console::log_1(&"Timeout fired!".into());
});

// Option 1: Keep the timeout alive forever (won't be cancelled)
timeout.forget();

// Option 2: Cancel the timeout by dropping it
// drop(timeout);

// Option 3: Explicitly cancel and get the closure back
// let closure = timeout.cancel();
```

--------------------------------

### DOM Access Helpers in Rust

Source: https://context7.com/ranile/gloo/llms.txt

Provides convenience functions for accessing common DOM objects like window, document, body, head, and history without boilerplate. Useful for direct DOM manipulation.

```rust
use gloo_utils::{window, document, body, head, document_element, history};

fn utils_example() {
    // Get window object
    let win = window();

    // Get document
    let doc = document();

    // Get body element
    let body_element = body();

    // Get head element
    let head_element = head();

    // Get document element (<html>)
    let root = document_element();

    // Get history object
    let hist = history();

    // Example: Set page title
    doc.set_title("My App");

    // Example: Add class to body
    body_element.set_class_name("dark-mode");
}
```

--------------------------------

### Request animation frame

Source: https://github.com/ranile/gloo/blob/master/website/blog/2021-07-27-new-release.md

Use `request_animation_frame` from `gloo-render` to schedule a callback function to be executed before the next repaint. This is ideal for animations.

```rust
request_animation_frame(|_| {
    // inside animation frame.
})
```

--------------------------------

### Implement Web Worker in Rust

Source: https://context7.com/ranile/gloo/llms.txt

Defines a MathWorker that performs calculations off the main thread using the Web Workers API. Requires `serde` for message serialization.

```rust
use gloo_worker::{Worker, WorkerScope};
use serde::{Serialize, Deserialize};

// Define message types
#[derive(Serialize, Deserialize)]
pub struct CalculateInput {
    pub numbers: Vec<i32>,
}

#[derive(Serialize, Deserialize)]
pub struct CalculateOutput {
    pub sum: i32,
    pub average: f64,
}

// Implement the Worker trait
pub struct MathWorker;

impl Worker for MathWorker {
    type Message = ();
    type Input = CalculateInput;
    type Output = CalculateOutput;

    fn create(_scope: &WorkerScope<Self>) -> Self {
        MathWorker
    }

    fn update(&mut self, _scope: &WorkerScope<Self>, _msg: Self::Message) {
        // Handle internal messages
    }

    fn received(
        &mut self,
        scope: &WorkerScope<Self>,
        input: Self::Input,
        id: gloo_worker::HandlerId,
    ) {
        let sum: i32 = input.numbers.iter().sum();
        let average = sum as f64 / input.numbers.len() as f64;

        scope.respond(id, CalculateOutput { sum, average });
    }
}
```

--------------------------------

### Read File Contents Asynchronously

Source: https://context7.com/ranile/gloo/llms.txt

Asynchronously reads file content as text using futures. Requires the "futures" feature to be enabled.

```rust
// Async version (requires "futures" feature)
#[cfg(feature = "futures")]
async fn read_file_async(file: &File) -> Result<String, gloo_file::FileReadError> {
    use gloo_file::futures::read_as_text;
    read_as_text(file).await
}
```

--------------------------------

### Run Non-Wasm Tests for a Specific Crate

Source: https://github.com/ranile/gloo/blob/master/CONTRIBUTING.md

Run non-Wasm tests for an individual crate using the `-p` flag. This is useful for targeted testing during development.

```shell
cargo test -p my-particular-crate
```

--------------------------------

### Request Animation Frame

Source: https://context7.com/ranile/gloo/llms.txt

Schedules a callback to be executed before the next repaint, suitable for animations. The callback receives a timestamp. The frame is cancelled if the handle is dropped.

```rust
use gloo_render::request_animation_frame;

fn animate() {
    let handle = request_animation_frame(move |timestamp| {
        // `timestamp` is the time in milliseconds since page load
        web_sys::console::log_1(&format!("Frame at {}ms", timestamp).into());

        // For continuous animation, request the next frame
        // (typically you'd store this in a struct to manage the loop)
    });

    // The animation frame is automatically cancelled if `handle` is dropped
    // To keep it running, call handle.forget() or store it somewhere
}
```

--------------------------------

### Run Wasm Node.js Tests

Source: https://github.com/ranile/gloo/blob/master/CONTRIBUTING.md

Run Wasm tests within a Node.js environment for a specified crate. This is an alternative to browser-based testing.

```shell
wasm-pack test --node crates/my-particular-crate
```