Akili is a component-based framework. To use it you just need to include a downloaded file into your html.

<script src="akili.js"></script>

Of course you can use something to compile the framework. You need babel with babel-preset-akili.

import Akili from 'akili';

So you can wrap any html element to the component and control all its lifecycle.

import Component from 'akili/src/component';

class MyComponent extends Component {
  constructor(el, scope) {
    super(el, scope);
    scope.example = 'Hello World';
  }
}

Akili.component('my-component', MyComponent);

document.addEventListener('DOMContentLoaded', () => {
  Akili.init().catch((err) => console.error(err));
});

<div>
  <my-component>${ this.example }</my-component>
</div>

There we create a new component to control of all html elements with my-component tag name and register it in the framework. Then we initialize our application when DOM content is loaded. The expression in the html will be replaced by scope example value Hello World. If you need to wrap some system element you can use component attribute:

<textarea component="my-textarea"></textarea> === <my-textarea></my-textarea>

Aliases

Sometimes you need to assign the component by some selector. Use Akili.alias function here.

class MyComponent extends Component {
  constructor(el, scope) {
    super(el, scope);
    scope.example = 'Hello World';
  }
}

Akili.component('my-component', MyComponent);
Akili.alias('div.my-component', 'my-component');

document.addEventListener('DOMContentLoaded', () => {
  Akili.init().catch((err) => console.error(err));
});

<div class="my-component">${ this.example }</div>

The first argument in the alias function is DOM selector, the second is component name using during the component registration.

<my-component></my-component> === <div class="my-component"></div>

The framework structure

All files in the library are located in a certain order in src folder. The enter point is akili.js. It returns and adds to window the main object - Akili, which includes some functions and a few another objects:

• Akili.Component - main class from which all components are inherited.
• Akili.Scope - main class from which all scopes are inherited. You can extend it and add any own features to every component scope.
• Akili.EventEmitter - object to create a some kind of a component attribute to manage events.
• Akili.components - object with all default components. For example you can find the framework input implementation as window.Akili.components.Input.
• Akili.services - object with services (router, request, store, etc.)
• Akili.utils - object with different useful functions. Copying variables, working with arrays, etc.
• Akili.globals - object to pass you custom global variables to scope expressions

If you are using the system of es6 modules you have all of the above objects in the according places:

import Akili from 'akili';
import Scope from 'akili/src/scope';
import Component from 'akili/src/component';
import EventEmitter from 'akili/src/event-emitter';
import utils from 'akili/src/utils';
import globals from 'akili/src/globals';
import Input from 'akili/src/components/input';
import router from 'akili/src/services/router';

If you are going to write your own library look at here.

Options

The framework settings are stored in the variable Akili.options.

• debug=true - debug mode.