Index

The "src/main.js" file is the root JavaScript file, it is where all the JavaScript functionallity is initilized, dispatched end emitted through. It is also here you can make your global configs and changes to your app.

A completly empty installation of Startox framework will come with the minimum required imports out of the box and will look like this.

import { App } from '@stratox/core';
import routes from '@/routes/app';
import Fields from '@/templates/Fields';

const app = new App({
    fields: Fields
});

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

You can of course add some functions like tailwind and alpine in the installation process and they will be automatically be installed to the main.js file.

Break down

Lets break down the example.

The core and routes has to be imported for the framework to work, the fields is optional.

import { App } from '@stratox/core';
import routes from '@/routes/app';
import Fields from '@/templates/Fields';

The config has alot more option and vist the config page to read more about that.

const app = new App({
    fields: Fields
});

You can see the mount method as you apps index file and this is a good place to add your for example navigation. It is allowed to mount multiple indexs or start points if you wish to do that it is up to you but in most cases once will på sufficent. If you install the examples in the installation process you will see what I mean.

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

You can see the mount method as you apps index file and this is a good place to add your for example navigation. It is allowed to mount multiple indexs or start points if you wish to do that it is up to you but in most cases once will på sufficent.

Router Collection (routerCollection)

This expects a Router instance, allowing for customization. You can create your router collection 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. Will utilize the history pushSate.

app.serverParams("fragment");

URI Path

The regular URI path segment. Will utilize the history pushSate.

app.serverParams("path");

Script Path

Will not utilize the history pushSate.

app.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 (object): Provides an object with vital response data.

• statusCode (int): Indicates the result, either successful (200) or error (404 or 405).