Component argumnets

Component Arguments with Examples

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:

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:

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:

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:

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:

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:

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.

---

7. View

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

Example:

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:

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:

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.