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

Глобальные классы

Когда внутри одного компонента нужно использовать другой компонент, используется связка с помощью команды use. Но компоненты можно складывать в "глобальную" область видимости, в таком случае использовать use не нужно.

import { Component, template, util } from "bakugan";

@template({
    html: `<span>Hello World</span>`,
})
class Hello extends Component { }

util.glob.add("b-hello", Hello);

@template({
    html: `
        <div>
            <b-hello></b-hello>
        </div>
    `,
})
class App extends Component { }

const app: App = new App();
app.bindTo(document.body);
смотреть пример: web | github

Классы Tmp и For находятся в глобальной области видимости, поэтому когда их используют в шаблоне, то их не надо прописывать в use.

Глобатьный класс Tmp

Данный класс предоставляет возможность работать с изменяемыми шаблонами. Допустим у нас есть несколько шаблонов (как пример, рекламные блоки) где контент может быть совершенно разным, и нужно этот контент при определенных условиях менять.

import { Component, Tmp, Template, template, util } from "bakugan";

@template({
    html: `
        <div>
            <tmp ref="myTmp">
                <div>header</div>
                <div>content</div>
                <div>footer</div>
            </tmp>
        </div>
    `,
})
class App extends Component { }

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

// получим текущий шаблон
const tmp1: Template = app.get("myTmp").tmp();

// создадим 2 новых шаблона
const tmp2: Template = Template.make({
    html: `
        <div ref="myDiv">content</div>
    `,
});

const tmp3: Template = Template.make({
    html: `
        <span>top</span>
        <div ref="myDiv">content</div>
        <span>bottom</span>
    `,
});

const tmps: Template[] = [tmp1, tmp2, tmp3];
let i: number = 0;

// меняем шаблоны через время
setInterval(() => {
    const tmp: Template = tmps[++i % tmps.length];
    const myTmp: Tmp = app.get("myTmp");

    // устанавливаем новый шаблон
    myTmp.tmp(tmp);

    // если в шаблоне есть компонент myDiv, то меняем ему цвет
    if (myTmp.get("myDiv")) {
        myTmp.get("myDiv").css({ color: `green` });
    }
}, 2000);
смотреть пример: web | github

Глобатьный класс For

Когда есть множество данных, и это множество нужно вывести, то используется класс For. В этот класс нужно передать параметр items - массив данных. Каждый элемент массива обязательно должен быть объектом.

У данного класса есть методы для работы с измененим списка: push, pop, unshift, shift, splice. Также список можно отсортировать методом sort. Имеются и другие методы с работой множеством данных, описание каждого метода есть в разделе API.

import { Component, For, template } from "bakugan";

@template({
    html: `
        <ul>
            <for ref="myFor" items="data">
                <li>
                    <txt ref="text" html="props.item.text"></txt>
                </li>
            </for>
        </ul>
    `,
})
class App extends Component {

    public data: any[];

    public beforeInit(component: App): void {
        this.data = [{
            text: `first`,
        }, {
            text: `second`,
        }, {
            text: `third`,
        }];
    }
}

const app: App = new App();
app.bindTo(document.body);
смотреть пример: web | github

Жизненный цикл классов Tmp и For

Для отслеживания жизненного цикла у классов Tmp и For используется следующее правило: {имя_метода}_{имя_компонента}. Т.е. к методу нужно добавить нижнее подчеркивание плюс добавить имя компонента.

У компонента For будет создано 3 дочерних компонента класса Tmp. Если посмотреть на имя каждого дочернего компонента, то оно будет myForItem, т.е. берется имя компонента For (myFor) и в конец добавляется приставка Item. Это помогает отслеживать состояние жизненного цикла у дочерних элеметов класса For. Но это правило работает только если дочерние компоненты являются экземпляром класса Tmp.

import { Component, Tmp, For, template, util } from "bakugan";

@template({
    html: `
        <div>
            <tmp ref="myTmp">
                <div>
                    <txt ref="text"></txt>
                </div>
            </tmp>
            <ul>
                <for ref="myFor" items="data">
                    <li>
                        <txt ref="text"></txt>
                    </li>
                </for>
            </ul>
        </div>
    `,
})
class App extends Component {
    public data: any[];

    public beforeInit(component: App): void {
        this.data = [{
            text: `first`,
        }, {
            text: `second`,
        }, {
            text: `third`,
        }];
    }

    public afterInit_myTmp(component: Tmp): void {
        component.html({ text: `List:` });
    }

    public beforeInit_myFor(component: For): void {
        console.log("beforeInit For");
    }

    public afterInit_myFor(component: For): void {
        console.log("afterInit For");

        console.log(component.getAt(0).name());
    }

    public afterInit_myForItem(component: Tmp): void {
        component.html({ text: component.props.item.text });
    }
}

const app: App = new App();
app.bindTo(document.body);
смотреть пример: web | github