# Dispatcher overview

You can find the dispatcher in `src/main.js`. It is where all the JavaScript functionality is initialized, dispatched, and emitted. The dispatcher is essential for identifying and providing the appropriate route from the state handler. Designed for flexibility, it enables the incorporation of custom logic to tailor functionality to specific needs.

```js
app.setup("#app").mount(routes, app.serverParams("fragment"), function(response, request) {
    return `
        <main>
            ${response}
        </main>
    `;
});
```

You could also add things like navigation to the above example.

```js
app.setup("#app").mount(
    Router routerCollection,
    serverParams,
    callable dispatch
);
```

#### Let Us Break Down the Arguments

**Arguments**

* **routerCollection**
* **serverParams**
* **dispatch**

**Router Collection (`routerCollection`)**

This expects a `Router` instance, allowing for customization. You can create your router collection by extending the `Router` class, potentially adding more HTTP methods, structure, or functionality.

**Server Params (`serverParams`)**

Server params indicate the URL segment the dispatcher should utilize. These params dynamically target the specified URI segment. Several built-in options include:

* **URI Fragment**: Represents the URL hash or anchor minus the "#" character.

  ```js
  dispatcher.serverParams("fragment");
  ```
* **URI Path**: The regular URI path segment.

  ```js
  dispatcher.serverParams("path");
  ```
* **Script Path**: Ideal for non-browser environments, supporting backend applications, APIs, or shell command routes.

  ```js
  dispatcher.request("path");
  ```

**Dispatch Function (`dispatch`)**

The `dispatch` argument expects a callable function to process the match result, handling both successful (status code 200) and error outcomes (status code 404 for "page not found" and 405 for "Method not allowed"). The function receives two parameters: `response` (object) and `statusCode` (int).

#### Response Details

* **response** (object): Provides an object with vital response data.
* **statusCode** (int): Indicates the result, either successful (200) or error (404 or 405).

#### Understanding the Response

The response structure, as illustrated with the router pattern `/{page:product}/{id:[0-9]+}/{slug:[^/]+}`, and URI path `/product/72/chesterfield` includes:

```json
{
    "verb": "GET",
    "status": 200,
    "path": ["product", "72", "chesterfield"],
    "vars": {
        "page": "product",
        "id": "72",
        "slug": "chesterfield"
    },
    "form": {},
    "request": {
        "get": "URLSearchParams",
        "post": "FormData"
    }
}
```

* **verb**: The HTTP method (`GET` or `POST`).
* **status**: The HTTP status code (`200`, `404`, or `405`).
* **path**: The URI path as an array.
* **vars**: An object mapping path segments to keys.
* **form**: Captures submitted DOM form elements.
* **request.get**: An instance of `URLSearchParams` for GET requests.
* **request.post**: An object for POST requests.
* **response**: Will propagate if a possible fetch (Ajax) response.


---

# 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/router/dispatcher-overview.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.