Class: App

Constructor

new App(containeropt, configopt)

Create an app instance

Parameters:

Name Type Attributes Default Description

container

HTMLElement | null

null

The root container of the application. If null, creates a new

element in document.body

config

object

{}

Application configuration object

Properties

Name Type Attributes Description

app

object

App-level configuration

Properties

Name	Type	Attributes	Default	Description
`id`	string \| null	<optional>	null	Unique ID of app instance. Auto-generated if not provided
`title`	string \| null	<optional>	null	App's title. If set, updates document.title
`sayHello`	boolean	<optional>	true	Whether to log InfrontJS version to console

l18n

object

Internationalization configuration

Properties

Name	Type	Attributes	Default	Description
`defaultLanguage`	string	<optional>	'en'	Default language code

router

object

Router configuration

Properties

Name	Type	Attributes	Default	Description
`isEnabled`	boolean	<optional>	true	Enable/disable routing
`mode`	string	<optional>	'url'	Router mode: 'url' (pushState) or 'hash'
`basePath`	string \| null	<optional>	null	Base path for subdirectory deployments

stateManager

object

State manager configuration

Properties

Name	Type	Attributes	Description
`notFoundState`	function	<optional>	State class to use for 404 errors

Source: core/App.js, line 69

Throws:

If not running in browser environment
Type
Error
If container is not an HTMLElement
Type
Error

Examples

// Basic app setup
const container = document.querySelector('#app');
const app = new IF.App(container, {
    app: { title: 'My Application' },
    router: { mode: 'url' },
    l18n: { defaultLanguage: 'en' }
});

// Register states
app.stateManager.add(HomeState, AboutState, UserState);

// Start the application
await app.run();

// Multiple app instances
const app1 = new IF.App(container1, { app: { id: 'main-app' } });
const app2 = new IF.App(container2, { app: { id: 'widget-app' } });

// Access by ID
const mainApp = IF.App.get('main-app');

// Cleanup when done
await app.destroy(); // Properly cleans up all resources

Extends

CustomEvents

Members

POOL :Object.<string, App>

Global pool of all app instances

Type:

Object.<string, App>

Source: core/App.js, line 76

Methods

addEventListener(type, listener)

Add an event listener for a specific event type

Parameters:

Name	Type	Description
`type`	string	Event type to listen for
`listener`	function \| EventListenerOrEventListenerObject	Callback function or event listener object

Overrides: CustomEvents#addEventListener
Source: core/CustomEvents.js, line 117

Examples

// Function listener
app.addEventListener('customEvent', (event) => {
    console.log('Custom event fired:', event.detail);
});

// Object listener
const listener = {
    handleEvent(event) {
        console.log('Event:', event.type);
    }
};
app.addEventListener('myEvent', listener);

(async) destroy() → {Promise.<void>}

Destroys InfrontJS application instance and cleans up all resources This method properly disposes of all subsystems, removes event listeners, cleans up the DOM, and removes the app from the global pool.

Source: core/App.js, line 332

Returns:

Type:: Promise.<void>

Examples

// Cleanup when app is no longer needed
await app.destroy();

// Cleanup before page navigation
window.addEventListener('beforeunload', async () => {
    await app.destroy();
});

// Switch between apps
await oldApp.destroy();
const newApp = new IF.App(container, newConfig);
await newApp.run();

dispatchEvent(event) → {boolean}

Dispatch an event to all registered listeners Executes all listeners in the order they were added.

Parameters:

Name	Type	Description
`event`	Event \| CustomEvent	Event object to dispatch. Use CustomEvent for custom data.

Overrides: CustomEvents#dispatchEvent
Source: core/CustomEvents.js, line 187

Returns:

True unless event.preventDefault() was called

Type:: boolean

Examples

// Dispatch simple event
app.dispatchEvent(new Event('refresh'));

// Dispatch event with data
app.dispatchEvent(new CustomEvent('userLogin', {
    detail: {
        userId: 123,
        username: 'john',
        timestamp: Date.now()
    }
}));

// Cancelable event
const event = new CustomEvent('beforeSave', {
    detail: { data: formData },
    cancelable: true
});
const allowed = app.dispatchEvent(event);
if (!allowed) {
    console.log('Save was prevented');
}

getVersion() → {string}

Get InfrontJS version

Source: core/App.js, line 256

Returns:

Version string (e.g., '1.0.0-rc9')

Type:: string

Example

const version = app.getVersion();
console.log('Running InfrontJS', version);

removeEventListener(type, listener)

Remove an event listener for a specific event type

Parameters:

Name	Type	Description
`type`	string	Event type to remove listener from
`listener`	function \| EventListenerOrEventListenerObject	The exact listener function or object to remove

Overrides: CustomEvents#removeEventListener
Source: core/CustomEvents.js, line 144

Examples

// Remove specific listener
const handler = (e) => console.log('Event fired');
app.addEventListener('myEvent', handler);
app.removeEventListener('myEvent', handler);

// One-time event listener pattern
const onceHandler = (e) => {
    console.log('This runs only once');
    app.removeEventListener('myEvent', onceHandler);
};
app.addEventListener('myEvent', onceHandler);

(async) run(routeopt) → {Promise.<void>}

Run application logic and activate routing This is an asynchronous function that starts the application lifecycle. It enables the router and processes the initial route.

Parameters:

Name	Type	Attributes	Default	Description
`route`	string \| null	<optional>	null	Initial route to navigate to. If null, uses current URL

Source: core/App.js, line 289

Returns:

Type:: Promise.<void>

Examples

// Start with current URL
await app.run();

// Start at specific route
await app.run('/dashboard');

// Complete startup flow
const app = new IF.App(container, config);
app.stateManager.add(HomeState, AboutState);

// Load translations before starting
await app.l18n.loadTranslations('en', '/locales/en.json');

// Start application
await app.run('/home');

(static) get(uidopt) → {App|null}

Get an app instance from the global pool by UID

Parameters:

Name	Type	Attributes	Default	Description
`uid`	string \| null	<optional>	null	Unique identifier of the app. If null, returns the first app in the pool.

Source: core/App.js, line 93

Returns:

The app instance or null if not found

Type:: App | null

Examples

// Get specific app
const app = IF.App.get('my-app-id');

// Get first app (useful for single-app setups)
const app = IF.App.get();