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

Дополнительно

StoreEvent

import { StoreEvent } from "bakugan";
Класс предоставляющий хранилище событий для DOM элеметов
Создание
new StoreEvent();
Создает экземпляр класса StoreEvent
подробней
import { StoreEvent } from "bakugan";

const storeEvent: StoreEvent = new StoreEvent();

console.log(storeEvent);
смотреть пример: web | github
Методы
on(key: string, element: HTMLElement, listeners: IHashMap<(event: Event) => void>): void
Добавляет события в элемент
подробней
Параметры:
  • key: string - уникальный ключ, по которому можно будет удалить привязанные события
  • element: HTMLElement - DOM элемент к которому будут добавлены события
  • listeners: IHashMap<(event: Event) => void> - список событий, которые будут добавлены. где ключ является именем события, а значение - это функция, которая будет обрабатывать данное событие
import { StoreEvent } from "bakugan";

const storeEvent: StoreEvent = new StoreEvent();

const div = document.createElement("div");
document.body.appendChild(div);
div.innerHTML = "text";

let flag: boolean = false;
storeEvent.on("myKey", div, {
    click: (event: MouseEvent) => {
        const key: string = "mouseEvents";

        flag = !flag;
        if (flag) {
            console.log("add hover", event);
            storeEvent.on(key, div, {
                mouseover: (ev: MouseEvent) => {
                    console.log("over", ev);
                },
                mouseout: (ev: MouseEvent) => {
                    console.log("out", ev);
                },
            });
        } else {
            console.log("del hover", event);
            storeEvent.off(key);
        }
    },
});

const button = document.createElement("button");
document.body.appendChild(button);
button.innerHTML = "remove listeners";

storeEvent.on("removeAll", button, {
    click: (event: MouseEvent) => {
        console.log("remove listeners", event);

        storeEvent.offAll();
    },
});
смотреть пример: web | github
off(key: string): void
Удаляет список событий по ключу
подробней
Параметры:
  • key: string - ключ, который был указн при добавлении списка событий
import { StoreEvent } from "bakugan";

const storeEvent: StoreEvent = new StoreEvent();

const div = document.createElement("div");
document.body.appendChild(div);
div.innerHTML = "text";

let flag: boolean = false;
storeEvent.on("myKey", div, {
    click: (event: MouseEvent) => {
        const key: string = "mouseEvents";

        flag = !flag;
        if (flag) {
            console.log("add hover", event);
            storeEvent.on(key, div, {
                mouseover: (ev: MouseEvent) => {
                    console.log("over", ev);
                },
                mouseout: (ev: MouseEvent) => {
                    console.log("out", ev);
                },
            });
        } else {
            console.log("del hover", event);
            storeEvent.off(key);
        }
    },
});

const button = document.createElement("button");
document.body.appendChild(button);
button.innerHTML = "remove listeners";

storeEvent.on("removeAll", button, {
    click: (event: MouseEvent) => {
        console.log("remove listeners", event);

        storeEvent.offAll();
    },
});
смотреть пример: web | github
offAll(): void
Полностью очищает хранилище от событий
подробней
import { StoreEvent } from "bakugan";

const storeEvent: StoreEvent = new StoreEvent();

const div = document.createElement("div");
document.body.appendChild(div);
div.innerHTML = "text";

let flag: boolean = false;
storeEvent.on("myKey", div, {
    click: (event: MouseEvent) => {
        const key: string = "mouseEvents";

        flag = !flag;
        if (flag) {
            console.log("add hover", event);
            storeEvent.on(key, div, {
                mouseover: (ev: MouseEvent) => {
                    console.log("over", ev);
                },
                mouseout: (ev: MouseEvent) => {
                    console.log("out", ev);
                },
            });
        } else {
            console.log("del hover", event);
            storeEvent.off(key);
        }
    },
});

const button = document.createElement("button");
document.body.appendChild(button);
button.innerHTML = "remove listeners";

storeEvent.on("removeAll", button, {
    click: (event: MouseEvent) => {
        console.log("remove listeners", event);

        storeEvent.offAll();
    },
});
смотреть пример: web | github

class Template

import { Template } from "bakugan";
Шаблон для рендеринга DOM. Шаблон - это хранилище метаданных, у него нет инструметов для рендеринга, поэтому он сам по себе бесполезен. Чтобы шаблон можно было прорендерить, его нужно привязать к компоненту. Так же и компонент без шаблона тоже безполезен т.к. компонент не знает что рендерить
Не путать с декоратором template!
Статические методы
make(config: { html: string, use?: IHashMap<ICtorBaseComponent> }): Template
Создает шаблон для рендеринга DOM
подробней
Параметры:
  • config: {
        html: string,
        use?: IHashMap<ICtorBaseComponent>
    }
    - настройки для создания шаблона. html - шаблон, use - список тегов, которые должны будут заменены на компоненты
import { Component, Template, Tmp, template } from "bakugan";

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

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

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

// template 1
const tmp1: Template = Template.make({
    html: `
        <span>
            <b-hello></b-hello>
        </span>
    `,
    use: {
        "b-hello": Hello,
    },
});

// template 2
const tmp2: Template = Template.make({
    html: `
        <span>Hello Ivan</span>
    `,
});

setInterval(() => {
    const dynamic: Tmp = app.get("dynamic");

    dynamic.tmp(dynamic.tmp() === tmp2 ? tmp1 : tmp2);
}, 2000);
смотреть пример: web | github

Interfaces & Enums

Тип компонента
enum COMPONENT_TYPE {
    COMPONENT = 0,
    NATIVE = 1,
    TEXT = 2,
}
Тип chunk'а, указывает на тип привязки к Node
  • START - привязка к узлу первого компонента
  • FIRST - привязка к родительскому узлу
  • AFTER - привязка предыдущему узлу
enum CHUNK_TYPE {
    START = 0,
    FIRST = 1,
    AFTER = 2,
}
Интерфейс для ассоциативных массивов для указания типизации значений
interface IHashMap<T> {
    [propName: string]: T;
}
пример:
const object: IHashMap<number> = {
    prop1: 1,
    prop2: 2,
    prop3: 3,
};
Интерфейсы для ассоциативных массивов с определенным типом значений (any, string, boolean)
interface IHashMapAny extends IHashMap<any> { }
interface IHashMapString extends IHashMap<string> { }
interface IHashMapBoolean extends IHashMap<boolean> { }
пример:
const object: IHashMapBoolean = {
    prop1: true,
    prop2: false,
    prop3: true,
};
Интерфейс конструктора для классов: Component, Native, Text
interface ICtorBaseComponent {
    new (ref?: { name: string } | string, props?: IHashMapAny): BaseComponent;
}
пример:
const component: Component = new Component({ name: "component" }, { });
const native: Native = new Native({ name: "native" }, { tagName: "div" });
const text: Text = new Text({ name: "text" }, { html: "html content" });
Информация о chunk'е:
  • type - тип chunk'а
  • list - список дочерних компонентов
  • node - ссылка на Node
  • phantom - используется комментарий в chunk'е
interface IChunkEl {
    type: CHUNK_TYPE;
    list: BaseInternal[];
    node: Node;

    phantom?: boolean;
}
Каждый экземпляр базового класса (Component, Native, Text) имеет свойтсво $internal для внутренней работы bakugan. Данный интерфейс описывает набор общих полей для этого свойства
  • id - id компонента
  • name - имя компонента для доступа по имени get(name)
  • type - тип компонента
  • owner - ссылка на экземпляр класса
  • chunk - индекс chunk'а в родительском компоненте
  • index - позиция в chunk'е
  • parent - родительский компонент
  • begin - начало компонента (Node)
  • end - конец компонента (Node)
interface IInternal {
    id: number;
    name?: string;
    type: COMPONENT_TYPE;
    owner: BaseComponent;
    chunk?: number;
    index?: number;
    parent?: IInternalTemplate;
    begin?: Node;
    end?: Node;
}
пример:
const text: Text = new Text({ html: "html content" });
console.log(text.$internal);
Данный интерфейс расширяет IInternal. Он используется в классах, которые используют шаблоны, т.е. в Component и Native
  • template.template - шаблон
  • template.context - контекст
  • root - ссылка на root компонент
  • storeEvent - хранилище нативных событий
  • chunks - информация по блокам. Каждый шаблон разбит на блоки\куски (chunks). Внутри каждого блока могут находиться дочерние компоненты
  • list - доспут к дочерним компонентам по ключу
interface IInternalTemplate extends IInternal {
    template: {
        template: Template;
        context: Component;
    };
    root?: IInternalComponent;
    storeEvent?: StoreEvent;
    chunks?: IChunkEl[];
    list?: IHashMap<BaseInternal>;
}
Конечный набор полей для свойства $internal использующийся в экземпляре класса Component
  • refs - ссылки на Node элементы
interface IInternalComponent extends IInternalTemplate {
    refs?: IHashMap<HTMLElement>;
}
Конечный набор полей для свойства $internal использующийся в экземпляре класса Native
  • tagName - имя тега
  • attr - атрибуты
  • cl - классы
  • style - стили
interface IInternalNative extends IInternalTemplate {
    tagName: string;
    attr?: IHashMapString;
    cl?: IHashMapBoolean;
    style?: IHashMapString;
}
Конечный набор полей для свойства $internal использующийся в экземпляре класса Text
  • props - параметры
interface IInternalText extends IInternal {
    props?: IHashMapAny;
}
Базовый компонент и базовый внутренний объект $internal
type BaseComponent = Component | Native | Text;
type BaseInternal = IInternalComponent | IInternalNative | IInternalText;

util

import { util } from "bakugan";
Предоставляет дополнительные функции
Свойства
empty
Хранит пустые константы
подробней
Параметры:
  • STRING - пустая строка
  • OBJECT - пустой объект
  • ARRAY - пустой массив
  • FUNCTION - пустая функция
import { util } from "bakugan";

console.log(util.empty.STRING); // ""
console.log(util.empty.OBJECT); // {}
console.log(util.empty.ARRAY); // []
console.log(util.empty.FUNCTION); // function() {}
смотреть пример: web | github
Функции
merge(to: IHashMapAny, ...args: IHashMapAny[]): IHashMapAny
Копирует свойства объектов
подробней
Параметры:
  • to: IHashMapAny - куда копировать свойства
  • ...args: IHashMapAny[] - откуда копировать свойства
import { util } from "bakugan";

const obj: any = util.merge({
    prop1: 123,
}, {
    prop1: 1,
    prop2: 2,
}, {
    prop3: 3,
});

console.log(obj); // { prop1: 1, prop2: 2, prop3: 3 }
смотреть пример: web | github
createDOM(markup: { html: string }, parent?: Node): HTMLElement
Создает DOM из html строки
подробней
Параметры:
  • markup: { html: string } - html строка обернутая в объект
  • parent?: Node - необязательный параметр parent, у которого берется имя тега. По умолчанию создается div элемент и в него записывается html строка. Если передать параметр parent, то узел верхнего уровня будет создан с таким же именем
import { util } from "bakugan";

const tr: HTMLTableRowElement = document.createElement("tr");

const markup: { html: string } = { html: `<td>1</td><td>2</td>` };

const newTr: HTMLTableRowElement = util.createDOM(markup, tr) as HTMLTableRowElement;

console.log(newTr); // tr
console.log(newTr === tr); // false
смотреть пример: web | github
event.on(element: HTMLElement, listeners: IHashMap<(event: Event) => void>): void
Добавляет события в элемент
подробней
Параметры:
  • element: HTMLElement - DOM элемент к которому будут добавлены события
  • listeners: IHashMap<(event: Event) => void> - список событий, которые будут добавлены. где ключ является именем события, а значение - это функция, которая будет обрабатывать данное событие
import { util } from "bakugan";

const div = document.createElement("div");
document.body.appendChild(div);
div.innerHTML = "text";

const events = {
    click(event: MouseEvent): void {
        console.log(event);

        util.event.off(div, events);
    },
};

util.event.on(div, events);
смотреть пример: web | github
event.off(element: HTMLElement, listeners: IHashMap<(event: Event) => void>): void
Удаляет события из элемента
подробней
Параметры:
  • element: HTMLElement - DOM элемент из которого будут удалены события
  • listeners: IHashMap<(event: Event) => void> - список событий, которые будут удалены. где ключ является именем события, а значение - это функция, которая будет удалена
import { util } from "bakugan";

const div = document.createElement("div");
document.body.appendChild(div);
div.innerHTML = "text";

const events = {
    click(event: MouseEvent): void {
        console.log(event);

        util.event.off(div, events);
    },
};

util.event.on(div, events);
смотреть пример: web | github
glob.add(tagName: string, klass: ICtorBaseComponent): void
Добавляет компонент в глобальную область видимости. Не рекомендуется использовать
подробней
Параметры:
  • tagName: string - имя тега
  • klass: ICtorBaseComponent - класс, который будет добавлен в глобальную область
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