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

class Component

import { Component } from "bakugan";
Класс позволяющий писать компоненты. Для этого нужно написать собственный класс унаследованный от Component
Создание
new Component(name: { name: string }, props: IHashMapAny);
new Component(name: string, props: IHashMapAny);
new Component(props: IHashMapAny);
Создает экземпляр класса Component
подробней
Параметры:
  • name: string | { name: string } - задает имя компоненту. Если имя не указано, то оно будет присвоено автоматически
  • props: IHashMapAny - параметры. Можно передавать любые параметры, но данный класс имеет следующие зарезервированные параметры:
    1. template: Template - дочерний шаблон
    2. context: Component - дочерний контекст
    3. closed: boolean - закрытый компонент
    4. events: IHashMap<(eventName: string, ...args: any[]) => void> - события
import { Component, template } from "bakugan";

// component Hello

@template({
    html: `
        <div>
            Hello
            <txt ref="name"></txt>
        </div>
    `,
})
class Hello extends Component {
    public afterInit(component: Hello): void {
        this.get("name").html(` ${this.props.name}`);
    }
}

// component App

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

const app: App = new App({ name: `Ivan` });
app.bindTo(document.body);

const curHello: Hello = app.get("myComponent");
const newHello: Hello = new Hello({ name: `Petya` });

curHello.insertAfter(newHello);

console.log(app);

console.log(curHello);
console.log(newHello);
смотреть пример: web | github
Методы
emit(eventName: string, ...args: any[]): void
Генерирует событие. Имя события всегда должно начинаться с on
подробней
Параметры:
  • eventName: string - имя события
  • ...args: any[] - список аргументов
import { Component, template } from "bakugan";

// component Hello

@template({
    html: `
        <div>
            Hello
            <txt ref="name"></txt>
        </div>
    `,
})
class Hello extends Component {
    public afterInit(component: Hello): void {
        this.get("name").html(` ${this.props.name}`);

        setTimeout(() => {
            this.emit("onMyEvent", this.props.name); // emit!
        }, 1000);
    }
}

// component App

@template({
    html: `
        <div>
            <b-hello onMyEvent="handlerEvent" name="props.ivan"></b-hello>
            <b-hello onMyEvent="handlerEvent" name="props.petya"></b-hello>
        </div>
    `,
    use: {
        "b-hello": Hello,
    },
})
class App extends Component {
    public handlerEvent(component: Hello, name: string): void {
        console.log(this);
        console.log(component);
        console.log(name);
    }
}

const app: App = new App({ ivan: `Ivan`, petya: `Petya` });
app.bindTo(document.body);
смотреть пример: web | github
html(data: IHashMapString): void
Изменяет контент у группы компонентов типа Text
подробней
Параметры:
  • data: IHashMapString - ассоциативный массив данных. Где ключ является именем компонента типа Text, а значение содержимым на который нужно заменить
import { Component, template } from "bakugan";

@template({
    html: `
        <div>
            <txt ref="hello" html="'Hello'"></txt>
            <txt ref="name" html="' Ivan'"></txt>
        </div>
    `,
})
class App extends Component { }

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

// app.get("hello").html(`goodbye`);
// app.get("name").html(` Petya`);

app.html({
    hello: `goodbye`,
    name: ` Petya`,
});
смотреть пример: web | github
close(): void
Закрывает компонент. Когда компонент закрыт, то он не рендерится и нельзя получить доступ к дочерним компонентам, т.к. он не был проинициализирован
подробней
import { Component, template } from "bakugan";

@template({
    html: `
        <div>
            <txt ref="myTxt" html="'Hello World'"></txt>
        </div>
    `,
})
class App extends Component {
    public beforeInit(component: App): void {
        console.log("before init");
    }
}

const app: App = new App({ closed: true });
app.bindTo(document.body);

console.log(app.get("myTxt")); // null

setTimeout(() => {
    app.open();
    console.log(app.get("myTxt")); // Text
}, 2000);

setTimeout(() => {
    app.close();
    console.log(app.get("myTxt")); // null
}, 4000);
смотреть пример: web | github
open(): void
Открывает компонент. Когда компонент открыт, то он инициализируется, рендерится и можно получить доступ к дочерним компонентам
подробней
import { Component, template } from "bakugan";

@template({
    html: `
        <div>
            <txt ref="myTxt" html="'Hello World'"></txt>
        </div>
    `,
})
class App extends Component {
    public beforeInit(component: App): void {
        console.log("before init");
    }
}

const app: App = new App({ closed: true });
app.bindTo(document.body);

console.log(app.get("myTxt")); // null

setTimeout(() => {
    app.open();
    console.log(app.get("myTxt")); // Text
}, 2000);

setTimeout(() => {
    app.close();
    console.log(app.get("myTxt")); // null
}, 4000);
смотреть пример: web | github
tmp(template: Template, context?: Component): null
Меняет шаблон у компонента. Не рекомендуется использовать. Для динамических шаблонов используйте класс Tmp
подробней
Параметры:
  • template: Template - новый шаблон
  • context?: Component - новый контекст
import { Component, Template, template } from "bakugan";

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

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

const tmp: Template = Template.make({
    html: `
        <div>new template</div>
    `,
});

setTimeout(() => {
    app.tmp(tmp);
}, 2000);
смотреть пример: web | github
tmp(): Template
Получает текущий шаблон
подробней
import { Component, template } from "bakugan";

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

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

console.log(app.tmp());
смотреть пример: web | github
context(context: Component): null
Меняет контекст у компонента. Контекст используется в событиях
подробней
Параметры:
  • context: Component - новый контекст
import { Component, template } from "bakugan";

@template({
    html: `
        <div>
            <span onClick="handler">Hello World</span>
        </div>
    `,
})
class App extends Component { }

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

const context: Component = {
    handler(component: App, event: MouseEvent): void {
        console.log(this);
        console.log(component);
        console.log(event);
    },
} as any;

app.context(context);
смотреть пример: web | github
context(): Component
Получает текущий контекст у компонента. Если контекст не был задан, метод вернет null
подробней
import { Component, template } from "bakugan";

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

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

console.log(app.context()); // null
смотреть пример: web | github
get(ref: string): any
Получет дочерний компонент по его имени
подробней
Параметры:
  • ref: string - имя компонента
import { Component, template } from "bakugan";

@template({
    html: `
        <div>
            <span ref="mySpan">Hello World</span>
        </div>
    `,
})
class App extends Component { }

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

console.log(app.get("mySpan")); // Native
смотреть пример: web | github
ref(name: string): HTMLElement
Получает DOM элемент по его имени
подробней
Параметры:
  • ref: string - имя компонента
import { Component, template } from "bakugan";

@template({
    html: `
        <div>
            <span ref="mySpan">Hello</span>
            <txt ref="myText" html="'World'"></txt>
        </div>
    `,
})
class App extends Component { }

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

console.log(app.ref("mySpan")); // Native
console.log(app.ref("myText")); // null
смотреть пример: web | github
insertFirts(...components: BaseComponent[]): void
Добавляет компоненты в начало текущего компонента
подробней
Параметры:
import { Component, Native, Text, Template, template } from "bakugan";

@template({
    html: `
        <div>
            <span ref="mySpan">Hello World</span>
        </div>
    `,
})
class App extends Component { }

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

const text: Text = new Text("myText", { html: "first" });
const span: Native = new Native("mySpan", {
    tagName: "span",
    template: Template.make({
        html: `last`,
    }),
});

app.insertFirts(text);
app.insertLast(span);
смотреть пример: web | github
insertLast(...components: BaseComponent[]): void
Добавляет компоненты в конец текущего компонента
подробней
Параметры:
import { Component, Native, Text, Template, template } from "bakugan";

@template({
    html: `
        <div>
            <span ref="mySpan">Hello World</span>
        </div>
    `,
})
class App extends Component { }

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

const text: Text = new Text("myText", { html: "first" });
const span: Native = new Native("mySpan", {
    tagName: "span",
    template: Template.make({
        html: `last`,
    }),
});

app.insertFirts(text);
app.insertLast(span);
смотреть пример: web | github
bindTo(node: HTMLElement): void
Рендерит компонент
подробней
Параметры:
  • node: HTMLElement - где рендерить компонент
import { Component, template } from "bakugan";

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

const app: App = new App();
app.bindTo(document.body);
смотреть пример: web | github
removeChild(...components: BaseComponent[]): void
Удаляет дочерние компоненты
подробней
Параметры:
  • ...components: BaseComponent[] - компоненты для удаления
import { Component, template } from "bakugan";

@template({
    html: `
        <div>
            <div ref="myDiv1">div 1</div>
            <txt ref="myTxt1" html="'text'"></txt>
            <div ref="myDiv2">div 2</div>
        </div>
    `,
})
class App extends Component { }

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

setTimeout(() => {
    app.removeChild(app.get("myDiv1"), app.get("myTxt1"));
}, 2000);
смотреть пример: web | github
Общие методы
name(newName: string): null
Задает новое имя компоненту
подробней
Параметры:
  • name: string - новое имя компонента
import { Component, Native, Text, template } from "bakugan";

@template({
    html: `
        <div>
            <div ref="myDiv">Hello</div>
            <txt ref="myTxt" html="'World'"></txt>
        </div>
    `,
})
class App extends Component { }

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

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

div.name("newNameDiv");
txt.name("newNameTxt");

console.log(app.get("myDiv")); // null
console.log(app.get("myTxt")); // null
console.log(app.get("newNameDiv")); // Native
console.log(app.get("newNameTxt")); // Text
смотреть пример: web | github
name(): string
Получает имя компонента
подробней
import { Component, Native, Text, template } from "bakugan";

@template({
    html: `
        <div>
            <div ref="myDiv">Hello</div>
            <txt ref="myTxt" html="'World'"></txt>
        </div>
    `,
})
class App extends Component { }

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

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

console.log(div.name()); // myDiv
console.log(txt.name()); // myTxt
смотреть пример: web | github
parent(): Component
Возвращает родительский компонент
подробней
import { Component, Native, Text, template } from "bakugan";

@template({
    html: `
        <div>
            <div ref="myDiv">Hello</div>
            <txt ref="myTxt" html="'World'"></txt>
        </div>
    `,
})
class App extends Component { }

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

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

console.log(div.parent()); // app
console.log(txt.parent()); // app
console.log(app.parent()); // null
смотреть пример: web | github
insertBefore(...components: BaseComponent[]): void
Добавляет компоненты перед текущим компонентом
подробней
Параметры:
import { Component, Native, Text, Template, template } from "bakugan";

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

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

const text: Text = new Text({ html: `insert before` });
const span: Native = new Native({
    tagName: "span",
    template: Template.make({
        html: `insert after`,
    }),
});

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

div.insertBefore(text);
div.insertAfter(span);
смотреть пример: web | github
insertAfter(...components: BaseComponent[]): void
Добавляет компоненты после текущего компонента
подробней
Параметры:
import { Component, Native, Text, Template, template } from "bakugan";

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

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

const text: Text = new Text({ html: `insert before` });
const span: Native = new Native({
    tagName: "span",
    template: Template.make({
        html: `insert after`,
    }),
});

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

div.insertBefore(text);
div.insertAfter(span);
смотреть пример: web | github
remove(): void
Удаляет компонент
подробней
import { Component, Native, Text, template } from "bakugan";

@template({
    html: `
        <div>
            <div ref="myDiv">Hello</div>
            <txt ref="myTxt" html="'World'"></txt>
        </div>
    `,
})
class App extends Component { }

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

const txt: Text = app.get("myTxt");
txt.remove();
смотреть пример: web | github