Compilation

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

Akili.init(document.body);

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.

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 contents. 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 will get:

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

Also you can load template from a file.

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