Compilation

When you call Akili.init(), the library compiles a root element with all its children. By default, the root element is body, but you can pass another element to the function.

Akili.init(document.querySelector('my-root'));

The component of the root element will be in Akili.root. You have access to it in any place of your code.

In Akili, components are completely independent. It's just a smart wrapper on the usual html elements. In order to wrap elements in components we need to compile it. We use Akili.compile function for that.

Akili.compile(element, options)Promise

  • element HTMLElement- root element for compilation
  • [options={recompile: false}] Object- compilation options. If you pass {recompile: true} all previously compiled elements will be recompiled.

You can compile any html element with its content. Every element will try to find an according component to be wrapped. The link between an element and its component is made by using its tag or component attribute;

<div id="compile">
  <my-component></my-component>
  <div component="my-component"></div>
</div>
MyComponent extends Akili.Component {}

Akili.component('my-component', MyComponent);
Akili.compile(document.getElementById('compile'));

In the example above, two of the three elements have components and they will be wrapped. Each compiled html element has link to its component instance in .__akili property. And each component has the same link in .el property.

Templates

You can specify a template for the component in advance.

class MyComponent extends Akili.Component {
  static template = '<div>${ this.example }</div>';

  constructor(...args) {
    super(...args);

    this.scope.example = 'Hello';
  }
}

Inside the template, you can load the content of the html element.

class MyComponent extends Akili.Component {
  static template = '<div class="with-content">${ this.__content }</div>';

  constructor(...args) {
    super(...args);

    this.scope.example = 'Hello';
  }
}
<my-component>${ this.example }</my-component>

As a result, you get:

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

Also you can load the template from a file.

class MyComponent extends Akili.Component {
  static templateUrl = '/templates/my-component.html';
  static templateCache = 5000;
}