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

Связывание классов

Допустим имеется 2 класса, и нужно один экземпляр класса использовать внутри другого. Для этого в декораторе добавляется свойство use в котором прописываются правила, имя какого тега нужно заменить на компонент. Тег b-hello будет заменен на экземпляр класса Hello. В примере используется приставка b-, она не обязательная, но она используется для того, чтобы было легче понять (визуально), что это компонент, а не тег. Так же эти компоненты можно получить с помощью метода get указав имя компонента.

import { Component, template } from "bakugan";

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

@template({
    html: `
        <div>
            <b-hello ref="hello1"></b-hello>
            <b-hello ref="hello2"></b-hello>
            <b-hello ref="hello2"></b-hello>
        </div>
    `,
    use: {
        "b-hello": Hello,
    },
})
class App extends Component { }

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

console.log(app.get("hello2"));
смотреть пример: web | github

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

import { Component, template } from "bakugan";

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

@template({
    html: `
        <div>
            <b-hello
                ref="hello"
                text="'hello'"
                bool="true"
                num="34"
                obj="{ prop: 12, big: false }"
                array="[1, 2, 3]"></b-hello>
        </div>
    `,
    use: {
        "b-hello": Hello,
    },
})
class App extends Component { }

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

const hello: Hello = app.get("hello");
console.log(hello.props);
смотреть пример: web | github

Есть еще один способ передачи параметров - это брать значения у родительского компонента. Для этого нужно написать в значении атрибута имя свойства родительского компонента. В примере выше значение тега text было обернуто в еще одни кавычки "'hello'". Это было сделано потому чтобы указать, что передается именно строка, а не путь к родительскому свойству.

import { Component, template } from "bakugan";

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

@template({
    html: `
        <div>
            <b-hello
                ref="hello"
                text="text"
                num="count"
                array="data"></b-hello>
        </div>
    `,
    use: {
        "b-hello": Hello,
    },
})
class App extends Component {

    public text: string;
    public data: any [];
    public count: number;

    public beforeInit(): void {
        this.text = `hello`;
        this.data = [1, 2, 3];
        this.count = 45;
    }
}

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

const hello: Hello = app.get("hello");
console.log(hello.props);
смотреть пример: web | github