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

Базовые классы

У bakugan есть 3 базовых класса: Component, Native и Text. Каждый класс решает свои задачи:

  • Component - для создания собственных компонентов;
  • Native - для работы с DOM элементами;
  • Text - для работы с динамическим контентом.

Класс Component

Во введении было рассказано, что для написания собственных компонентов, нужно написать свой класс унаследованный от класса Component. Тогда как классы Native и Text являются "готовыми", они не нуждаются в наследовании.

import { Component, template } from "bakugan";

@template({
    html: `
        <div style="text-align: center; font-size: 20px; margin-top: 100px;">
            Hello World!
        </div>
    `,
})
class App extends Component { }

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

Класс Native

Класс Native обслуживает Node элементы.

Давайте добавим к тегу div атрибут ref="myDiv". Атрибут ref для bakugan является командой, она присваивает данному тегу имя, по которому можно будет обратиться. Имя должно быть уникальным внутри компонента. Чтобы получить наш div, нужно воспользоваться методом get передав туда имя компонента. В результате получим экземпляр класса Native.

Т.к. данный класс работает с DOM элементами, то он имеет соответствующие методы для изменения атрибутов, классов, стилей и свойств:
  • attr - изменяет атрибуты;
  • cl - изменяет классы;
  • css - изменяет стили;
  • prop - изменяет свойства.

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

@template({
    html: `
        <div ref="myDiv" style="text-align: center; margin-top: 100px;">
            Hello World!
        </div>
    `,
})
class App extends Component { }

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

const div: Native = app.get("myDiv");

div.css({
    fontSize: "30px",
    color: "blue",
});

div.cl({
    block: true,
});

div.attr({
    "data-attr": "any value",
});
смотреть пример: web | github

Класс Text

Класс Text нужен когда контент в данном месте будет меняться. Чтобы был создан данный компонент нужно написать тег txt, а для обращения к этому компоненту нужно прописать ему ref. У этого класса есть метод html который меняет контент. В этот метод можно передать не только текст, то и полноценную html разметру. Если текст нужно удалить, то передается пустая строка.

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

@template({
    html: `
        <div style="text-align: center; font-size: 20px; margin-top: 100px;">
            <txt ref="myTxt"></txt>
        </div>
    `,
})
class App extends Component { }

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

const text: Text = app.get("myTxt");

text.html("Hello World!");
смотреть пример: web | github