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

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