Compilation

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

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

The root component is always 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 the compilation
  • [options={recompile: false}] Object - compilation options. If you pass {recompile: true} all previously compiled elements will be recompiled.

Compile function returns promise because some components might be compiled asynchronously. For example, those which have template in the separate file. But the compilation itself occurs synchronously in the hierarchy from top to bottom, from left to right.

You can compile any html element with its content. Every element will try to find an according component to be wrapped. The connection between them is carried out by 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 the components have 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;
}