Events

Akili events system based on the native javascript. To bind the event in the template you need to do this:

<my-component on-click="${ this.example = 'Hello'}">${ this.example }</my-component>

So if you click on the element, the expression inside will be replaced to Hello. You can use any native events just adding dash after on. on-click, on-keyup, on-input, etc.

In the component you have access to events in the attributes.

import EventEmitter from 'akili/scr/event-emitter';

class MyComponent extends Akili.Component {
  compiled() {
    console.log(this.attrs.onClick instanceOf EventEmitter); // true
  }
}

You can trigger new event any time you want.

class MyComponent extends Akili.Component {
  compiled() {
    setTimeout(() => {
      this.attrs.onClick.trigger();
    }, 1000);
  }
}

Custom events

You can trigger your custom event in the components. At first, you need to register the event to be sure that it will be in the attributes.

class MyComponent extends Akili.Component {
  static events = ['my-event'];

  compiled() {
    console.log(this.attrs.onMyEvent) // EventEmitter instance
    console.log(this.attrs.onMyEventTwo) // EventEmitter instance
    console.log(this.attrs.onMyEventThree) // undefined
  }
}
<my-component on-my-event-two="${ console.log(event) }"></my-component>

You can send information along with the message in any type of javascript variables.

class MyComponent extends Akili.Component {
  static events = ['my-event'];

  compiled() {
    let myInformation = 'Hello';

    this.attrs.onMyEvent.trigger(myInformation);
  }
}
<my-component on-my-event="${ console.log(event.detail) // Hello }"></my-component>

In the template event expression you will always have event object. It is native javascript event (Event, CustomEvent e.t.c). Custom information will be in event.detail

By default any custom event uses CustomEvent for triggering.

class MyComponent extends Akili.Component {
  static events = ['my-event'];

  compiled() {
    this.attrs.onMyEvent.trigger('Hello', { bubbles: true });
  }
}

It is the same that:

class MyComponent extends Akili.Component {
  static events = ['my-event'];

  compiled() {
    this.el.dispatchEvent(new CustomEvent('my-event', { bubbles: true, detail: 'Hello' })));
  }
}

If you need to change event class you can use dispatch.

class MyComponent extends Akili.Component {
  static events = ['my-event'];

  compiled() {
    this.attrs.onMyEvent.dispatch(Event, { bubbles: true, detail: 'Hello' });
    this.attrs.onMyEvent.dispatch(MouseEvent, { bubbles: false });
    this.attrs.onMyEvent.dispatch(KeyEvent);
  }
}

System events

Every component has some system events corresponding to the stages of compilation.

<my-component
  on-compiled="${ // when compiled }"
  on-recompiled="${ // when recompiled }"
  on-removed="${ // when removed }"
  on-changed="${ // when any attribute was changed }"
  on-changed-some-attribute="${ // when 'some-attribute' was changed }"
></my-component>