Данная библиотека является идеей, и носит демонстрационный характер.

Жизненный цикл

Класс Component имеет 3 жизненных цикла: init, mount, unmount. Каждый жизненный цикл имеет по 2 события: before и after. т.е. в наследуемом классе могут быть реализованы следующие 6 методов:
  • beforeInit - перед инициализацей;
  • afterInit - после инициализации;
  • beforeMount - перед рендерингом;
  • afterMount - после рендеринга;
  • beforeUnmount - перед демонтированием;
  • afterUnmount - после демонтирования.

Эти методы будет вызывать bagugan при изменении состояния компонента. Например, когда создается экземпляр класса, то вызывается сначала метод beforeInit, а затем afterInit. При этом, если попытаться получить дочерние компоненты в методе beforeInit, то их не будет, т.к. компонент не был еще проинициализирован, а вот в методе afterInit дочерние компоненты уже можно получать. Когда компонент рендерится, то вызываются beforeMount и afterMount методы, а когда компонент удаляется, то вызываются beforeUnmount и afterUnmount. Данные методы не обязательно реализовывать в наследуемом классе, в таком случае они просто не будут вызываться.

import { Component, template } from "bakugan";

@template({
    html: `
        <div style="text-align: center;">
            Hello <txt ref="text" html="' World'"></txt>
        </div>
    `,
})
class App extends Component {
    public beforeInit(): void {
        console.log("beforeInit");

        console.log(this.get("text"));
    }
    public afterInit(): void {
        console.log("afterInit");

        console.log(this.get("text"));
    }
    public beforeMount(): void {
        console.log("beforeMount");
    }
    public afterMount(): void {
        console.log("afterMount");
    }
    public beforeUnmount(): void {
        console.log("beforeUnmount");
    }
    public afterUnmount(): void {
        console.log("afterUnmount");
    }
}

console.log("before creating a instance");
const app: App = new App();
console.log("after creating a instance");

setTimeout(() => {
    console.log("before rendering a instance");
    app.bindTo(document.body);
    console.log("after rendering a instance");

    setTimeout(() => {
        console.log("before deleting a instance");
        app.remove();
        console.log("after deleting a instance");
    }, 3000);

}, 3000);

/*

// console log:

before creating a instance
beforeInit
null
afterInit
Text
after creating a instance
before rendering a instance
beforeMount
afterMount
after rendering a instance
before deleting a instance
beforeUnmount
afterUnmount
after deleting a instance

*/
смотреть пример: web | github

В каждый метод передается один аргумент - это компонент, в котором произошла смена состояния. this и component будут ссылаться на один и тот же экзмепляр класса.

import { Component, template } from "bakugan";

@template({
    html: `
        <div style="text-align: center;">
            Hello World
        </div>
    `,
})
class App extends Component {
    public beforeMount(component: App): void {
        console.log(this);
        console.log(component);
    }
    public afterMount(component: App): void {
        console.log(this);
        console.log(component);
    }
}

const app: App = new App();
app.bindTo(document.body);

/*

// console log:

App
App
App
App

*/
смотреть пример: web | github