# Layout & Components

### Overview of View Types in Stratox

Stratox supports three primary types of views, designed to help you structure and manage your application's UI efficiently:

1. [**Layout**:](#using-layout-views) Serves is the starting point for you to show views. You then extend your layout views content  with `block` and `partial` views.
2. [**Partial**:](#using-partial-views) Extends the layout with content. Partials are self-contained, but as they are statically loadad and counts as a part of the layout, you will need to update the state to update it's content meaning all views will be refreshed.
3. [**Block**:](#using-block-views) Extends the layout with **dynamic** content. Blocks are self-contained, allowing for updates without refreshing the entire layout.

> **Note:** Layout and Block views are initialized similarly but differ in load functionality.

***

### Using Layout Views

Layout views is the starting point for you to show views. You then extend your layout views content  with `block` and `partial` views.

**Example: Basic Layout Initialization**

```javascript
import ProductPage from "@/templates/views/ProductPage";

const { view, item } = this.layout(ProductPage, {
    title: "My text 1",
    description: "Lorem ipsum dolor",
});
```

This code adds and displays the `ProductPage` view if it exists. The `view` object is the main instance, while `item` represents the view's context. Both can manage or update data in the layout but are optional for most cases.

***

### Using Partial Views

**Example: Adding a Partial View**

```javascript
import Increment from "@/templates/views/blocks/Increment";

export default function ProductPage({ props, view }) {
    return `
        <article class="relative card-1 border-bottom ingress">
            <div class="wrapper md">
                <h1 class="headline-1">${props.title}</h1>
                <p>${props.description}</p>
            </div>
        </article>
        <div class="increment">
            ${view.partial(Increment, { title: "Start incrementing", increment: 0 })}
        </div>
    `;
}
```

Partials update the entire layout when refreshed, making them useful for integrating smaller components within larger views.

***

### Using Block Views

**Example: Adding a Block View**

```javascript
import Increment from "@/templates/views/blocks/Increment";

export default function ProductPage({ props, view }) {
    return `
        <article class="relative card-1 border-bottom ingress">
            <div class="wrapper md">
                <h1 class="headline-1">${props.title}</h1>
                <p>${props.description}</p>
            </div>
        </article>
        <div class="increment">
            ${view.block(Increment, { title: "Start incrementing", increment: 0 })}
        </div>
    `;
}
```

Blocks are dynamic components that can be updated independently, making them ideal for complex, interactive elements like sortable tables or modals.

***

### Protecting Against XSS (Cross-Site Scripting)

To safeguard against XSS vulnerabilities, encapsulate potentially injectable data within double curly braces:

**Example: Escaping Data**

```javascript
export default function TextComponent({ props, view }) {
    return `
        <article class="relative card-1 border-bottom ingress">
            <div class="wrapper md">
                <h1 class="headline-1">${{props.title}}</h1>
                <p>${{props.description}}</p>
            </div>
        </article>
    `;
}
```

This approach is especially crucial for user-generated content, query strings, or third-party data.

***

### Loading Views Multiple Times

To reuse the same view with different data, provide unique names for each instance:

**Example: Reusing Layouts**

```javascript
const { view: view1, item: item1 } = this.layout({ ProductPage1: ProductPage }, {
    title: "My text 1",
    description: "lorem ipsum dolor",
});

const { view: view2, item: item2 } = this.layout({ ProductPage2: ProductPage }, {
    title: "My text 2",
    description: "lorem ipsum dolor",
});
```

By appending unique identifiers (e.g., `ProductPage1`, `ProductPage2`), you can load the same layout multiple times efficiently.

***

### Quick Load View

For simple components, you can define and load views directly within your code:

**Example: Inline Layout**

```javascript
this.layout(() => `
    <header class="ingress mb">
        <h2 class="headline-3 title">Hello World</h2>
        <p>Lorem ipsum dolor sit amet.</p>
    </header>`);

this.partial({
    bindToName: function({ props }) {
        return `
        <header class="ingress mb">
            <h2 class="headline-3 title">${props.title}</h2>
            <p>Lorem ipsum dolor sit amet.</p>
        </header>`;
    }
}, {
    headline: "My text 2",
});

this.block(({ props }) => `
    <header class="ingress mb">
        <h2 class="headline-3 title">${props.title}</h2>
        <p>Lorem ipsum dolor sit amet.</p>
    </header>`, {
    headline: "My text 2",
});
```

This approach is ideal for quick prototyping or when working with minimal HTML components.

***

### Asynchronous Layout Loading

To optimize performance, load layouts asynchronously to reduce the initial bundle size:

**Example: Dynamic Layout Loading**

```javascript
this.layout("Ingress", {
    title: "Welcome!",
    description: "lorem ipsum dolor",
});
```

Ensure the `Ingress.js` module exists in `./src/templates/views/`. It will be dynamically loaded when accessed.

**Example: Reusing Layouts with Identifiers**

```javascript
this.layout("text#ingressView1", {
    title: "My text 1",
    description: "Lorem ipsum dolor",
});

this.layout("text#ingressView2", {
    title: "My text 2",
    description: "Lorem ipsum dolor",
});
```

Appending unique identifiers (e.g., `#ingressView1`, `#ingressView2`) allows efficient reuse of layouts.

***

By following these guidelines, you can fully leverage Stratox's view system for creating dynamic, efficient, and secure web applications.


---

# 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/layout-and-components.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.