# Component argumnets

In Stratox, components can utilize various arguments to manage and manipulate data, handle events, and communicate across different parts of the application. Below is a detailed explanation of each argument type, along with quick examples to demonstrate their usage.

***

### 1. **Props**

Props are objects and data passed to views or components. They are isolated within the view instance, allowing for dynamic updates to specific parts of the page.

**Example:**

```javascript
export default function TextComponent({ props }) {
    props.title = "Initial Title";

    return `
        <h1>${props.title}</h1>
        <p>${props.description}</p>
    `;
}
```

***

### 2. **State**

States are global but scoped to the active route and controller method. Updating a state refreshes the entire page and all nested components.

**Example:**

```javascript
export default function StateExample({ state }) {
    state.setDefault({ counter: 0 });

    setTimeout(() => {
        state.update("counter", state.get("counter") + 1);
    }, 1000);

    return `
        <p>Counter: ${state.get("counter")}</p>
    `;
}
```

***

### 3. **Dispatch**

The dispatcher facilitates making requests (GET, POST, PUT, DELETE) and passing data between routers and controller methods.

**Example:**

```javascript
export default function DispatchExample({ dispatch }) {
    dispatch.navigateTo("#about", { message: "Navigated successfully" });

    return `<p>Check console for navigation dispatch.</p>`;
}
```

***

### 4. **Update**

A shortcut for updating and refreshing a view dynamically.

**Example:**

```javascript
export default function UpdateExample({ props, update }) {
    context.setDefault({ counter: 1 });
    props.title = "Dynamic Update";

    setTimeout(() => {
        update({ title: "Updated Title", counter: ++props.counter });
    }, 2000);

    return `
        <h1>${props.title} ${props.counter}</h1>
    `;
}
```

***

#### 5. **HTTP**

Access server-side data such as HTTP methods or status codes.

**Example:**

```javascript
export default function HTTPExample({ http }) {
    return `
        <p>HTTP Method: ${http.method}</p>
        <p>Status Code: ${http.status}</p>
    `;
}
```

***

#### 6. **Request**

Provides access to dispatched requests via `request.get` and `request.post`.

**Example:**

```javascript
export default function RequestExample({ request }) {
    const title = request.get.get("title") || "Default Title";

    return `
        <h1>${{title}}</h1>
    `;
}
```

***Note:** To safeguard against XSS vulnerabilities, encapsulate potentially injectable data within double curly braces.*&#x20;

***

#### 7. **View**

Represents the main view instance, which can handle events and update content.

**Example:**

```javascript
export default function ViewExample({ view }) {
    const clickHandler = view.bind(() => {
        alert("View clicked!");
    }, false);

    return `
        <button onclick="${clickHandler}">Click Me</button>
    `;
}
```

By adding false in second argumnet in bind you will not update and refresh the view.

***

#### 8. **Context**

Access the Stratox context library to manage settings or default values.

**Example:**

```javascript
export default function ContextExample({ context }) {
    context.setDefault({ title: "Hello World" });

    return `
        <p>Default title: ${props.title}</p>
    `;
}
```

***

#### 9. **Services**

Used to access framework functions or communicate externally.

**Example:**

```javascript
export default function ServicesExample({ services }) {
    const dispatch = services.get("dispatch");
    dispatch.navigateTo("#contact");

    return `<p>Check console for service dispatch.</p>`;
}
```

***

By understanding and utilizing these arguments effectively, you can build robust and dynamic applications with Stratox. Each argument serves a specific purpose, enabling a modular and maintainable approach to component development.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://stratox.wazabii.se/views-components/component-argumnets.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.