v0.8

App

class App extends Router → mvc/App.js

Instance

To start the app create an object instance. 
const app = new App(appName);

Properties

The app instance properties are:
Property Description Type Default
$appName The application name. It defines the window property. For example if $appName='myApp' then window.myApp string dodoApp
ctrls A collection of all controllers. This makes possible to use a controller's methods inside another controller. object {}
ctrlConstants A controller constants which will not be deleted when one controller is replaced by another controller (when route is changed).
{$appName, $fridge, $httpClient, $auth, $debugOpts, $model, $modeler, $dd} 		object {...}
$preflight array of preflight functions, will be executed on every route before the controller's __loader() Function[] []
$postflight aarray of postflight functions, will be executed on every route ater the controller's __postrend() Function[] []
$debugOpts Debugger options. Set specific option to true if you want to see the debugging messages. See all options. object {...}

Methods

fridge(name, val) :App

Set the subproperty of the controller's $fridge property which will be accessible and unchanged in all controllers.
The $fridge object will not be changed when one controller is replaced by another one i.e. when the app route is changed. Other controller's properties will be deleted.
This method is useful to define values shared among the all controllers.
    ARGUMENTS:
  • name :string - $fridge property name, for example if name is 'api_url' then the frozen constant will be this.$fridge.api_url and it can be used in every controller
  • val :any - the fridge property value
EXAMPLE:
Lets define a constant which will be needed in all or most of the controllers, for example an API URL. 
const app = new App('myApp');
app.fridge('api_baseurl', 'http://api.example.com'); // put the variable in the fridge
Now we can fetch the api_baseurl in every controller with this.$fridge.api_baseurl

httpClient($httpClient) :App

Set the $httpClient property in all controllers. It can be called with this.$httpClient in the controller.
The HTTP client is used for certain API calls.
    ARGUMENTS:
  • $httpClient :object - the http client object
EXAMPLE:
An app needs HTTP client in the controllers to fetch the JSON from API. 

// src/const/$httpClient.js
=========================
import { corelib } from '@mikosoft/dodo';

// default HTTP client
const opts = {
  encodeURI: true,
  timeout: 21000,
  responseType: '', // 'blob' for file download (https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType)
  retry: 0,
  retryDelay: 1300,
  maxRedirects: 0,
  headers: {}
};
const $httpClient = new corelib.HTTPClient(opts);

export { $httpClient };


// src/app.js
=========================
import { $httpClient } from './conf/httpClient.js';
const app = new App('myApp');
app.httpClient($httpClient);
Now this.$httpClient is injected in every controller and can be used to call the API. 
// src/controllers/SomeCtrl.js
=============================
import { Controller } from '@mikosoft/dodo';

class SomeCtrl extends Controller {
  async __init() {
    const answer = await this.$httpClient.askJSON('https://jsonplaceholder.typicode.com/posts/1');
  }
}

auth($auth) :App

Inject the auth library in all controllers and use it as this.$auth (in the controller).
Useful in apps where authentication guards are required in all routes, for example when creating a web panel where users need to login.
    ARGUMENTS:
  • $auth :object - instance of the Auth class
EXAMPLE:
Create an app which has login and dashboard page. After succesful login the user is redirected to dashboard.
Study the Stackblitz example

debug($debugOpts) :App

Set the debug options.
EXAMPLE:
Lets define a constant which will be needed in all or most of the controllers, for example an API URL. 
import { $httpClient, $debugOpts } from './conf/index.js';
const app = new App('myApp');
app
  .httpClient($httpClient)
  .debug($debugOpts);

preflight($preflight) :App

Define preflight functions which will be executed on every route before controller __loader() hook.
    ARGUMENTS:
  • $preflight :Function[] - array of functions (some or all functions can be async, with trx argument)
EXAMPLE:
Define and export preflight functions in the lib/$preflight.js 
// lib/$preflight.js
const rend_loggedUser = (trx) => {
  const ctrl = corelib.navig.current.ctrl; // fetch current page controller from navig
  ctrl.$model.loggedUser = ctrl.$auth.loggedUser; // update loggedUser in the views/inc/.../header.html
};
export default [rend_loggedUser];


// app.js
const app = new App('webPanel');
app
  .auth(auth)
  .fridge('wsLib', wsLib)
  .preflight($preflight)
  .postflight($postflight)
  .debug($debugOpts);

postflight($postflight) :App

Define postflight functions which will be executed on every route after controller __postrend() hook.
    ARGUMENTS:
  • $postflight :Function[] - array of functions (some or all functions can be async, with trx argument)

destroyflight($destroyflight) :App

Define destroyflight function which will be executed when controller is destroyed i.e. when route is changed.
It's useful for example when you want to off() some event listeners.
    ARGUMENTS:
  • $destroyflight :Function - a single function (This function doesn't have arguments)

async i18n(i18n) :void

Set the global, window i18n property.
Language object can be loaded from database, files, browser storage or some other sources.
If input argument "i18n" is undefined the Vite Glob Import will be used by default and language files from src/i18n/ will be loaded.
    ARGUMENTS:
  • i18n :object - object with language translations, for example {de: {common: {USERNAME: 'Nutzername'}, home: {TITLE: 'Startseite', LOGIN: 'Anmeldung'}}}
EXAMPLE:
As the i18n() is async function it must be wrapped in async function so await can be used. Call i18n() before routes() and listen() because language json files must be read before controller execution. 
const initApp = async () => {
  const app = new App('dodoApp');

  await app.i18n(); // load language JSON files in the window.dodoApp.i18n

  app
    .auth($auth)
    .httpClient($httpClient)
    .debug($debugOpts)
    .routes($routes)
    .listen();
};

initApp().catch(console.error);

routes($routes) :object

Define app routes i.e. which controller will be executed when app URL is changed.
    ARGUMENTS:
  • $routes :object - the routes object
EXAMPLE:
Create HomeCtrl controller and inject it in the $routes.
Study the Stackblitz example

listen() :void

Listen for the route changes. Should be used after routes() method.
    ARGUMENTS:
  • - no arguments

Stackblitz Examples

  • Example 1 - how to make APP instance and how to use its methods