How to use the bobril.createDerivedComponent function in bobril

me.children = [ b.styledDiv('', bobrilLogo), ' ', ctx.data.children ];
		b.style(me, { fontSize: ctx.data.fontSize });
	}
});

interface IWarnHeaderData extends IHeaderData {
	isWarning?: boolean;
}

interface IWarnHeaderCtx extends b.IBobrilCtx {
	data: IWarnHeaderData;
}

const warnStyle = b.styleDef({ background: "#ffc0c0" });

const warnHeader = b.createDerivedComponent(header, {
	render(ctx: IWarnHeaderCtx, me: b.IBobrilNode) {
		b.style(me, ctx.data.isWarning && warnStyle);
	}
});

setInterval(1000, ()=> {
	b.invalidate();
});

b.init(() => [
    header({ fontSize: 20 }, t('Hello')),
	warnHeader({ fontSize: 25, isWarning: true }, 'World'),
	header({ fontSize: 15 }, t('Right now is {now, date, LLLL}', { now: b.now() }))
]);

"use strict";
var b = require('bobril');
var bobril_g11n_1 = require('bobril-g11n');
bobril_g11n_1.initGlobalization({
    defaultLocale: 'cs-CZ',
    pathToTranslation: function (locale) { return locale + '.js'; }
});
var bobrilLogo = b.styleDef([{ display: 'inline-block' }, b.spriteb(160, 160, 0, 0)], null, "bobrilLogo");
var header = b.createComponent({
    render: function (ctx, me) {
        me.children = [b.styledDiv('', bobrilLogo), ' ', ctx.data.children];
        b.style(me, { fontSize: ctx.data.fontSize });
    }
});
var warnStyle = b.styleDef({ background: "#ffc0c0" }, null, "warnStyle");
var warnHeader = b.createDerivedComponent(header, {
    render: function (ctx, me) {
        b.style(me, ctx.data.isWarning && warnStyle);
    }
});
setInterval(1000, function () {
    b.invalidate();
});
b.init(function () { return [
    header({ fontSize: 20 }, bobril_g11n_1.t(0)),
    warnHeader({ fontSize: 25, isWarning: true }, 'World'),
    header({ fontSize: 15 }, bobril_g11n_1.t(1, { now: b.now() }))
]; });

import * as b from "bobril";
import { Elem, IBaseData } from "./element";

export const Sup = b.createDerivedComponent(Elem, {
  id: "bobrilstrap-sup",
  render(_ctx: b.IBobrilCtx, me: b.IBobrilNode) {
    me.tag = "sup";
  }
});

export default Sup;

import * as b from "bobril";
import { Elem, IBaseData } from "./element";

export const Figure = b.createDerivedComponent(Elem, {
  id: "bobrilstrap-figure",
  render(_ctx: b.IBobrilCtx, me: b.IBobrilNode) {
    me.tag = "figure";
  }
});

export default Figure;

import { Elem, IBaseData, IElementBobrilNode } from "./element";
import { embedResponsiveStyles } from "./embedResponsive";

export interface IEmbedData extends IBaseData {
  src: string;
  type?: string;
  width?: number;
  height?: number;
  embedResponsive?: boolean;
}

interface IEmbedCtx extends b.IBobrilCtx {
  data: IEmbedData;
}

export const Embed = b.createDerivedComponent(Elem, {
  id: "bobrilstrap-embed",
  render(ctx: IEmbedCtx, me: IElementBobrilNode) {
    me.tag = "embed";
    b.style(
      me,
      !!ctx.data.embedResponsive && embedResponsiveStyles.embedResponsiveItem
    );
    me.attrs["src"] = ctx.data.src;

    if (ctx.data.type !== undefined) me.attrs["type"] = ctx.data.type;
    if (ctx.data.height !== undefined) me.attrs["height"] = ctx.data.height;
    if (ctx.data.width !== undefined) me.attrs["width"] = ctx.data.width;
  }
});

export default Embed;

divider: b.styleDef("divider"),
    dropdownHeader: b.styleDef("dropdown-header")
  },
  liStyles
);

export interface IDropdownItemData extends ILiData {
  separator?: boolean;
  header?: boolean;
}

interface ICtx extends b.IBobrilCtx {
  data: IDropdownItemData;
}

export const DropdownItem = b.createDerivedComponent(Li, {
  id: "bobrilstrap-dropdown-item",
  render(ctx: ICtx, me: IElementBobrilNode) {
    b.style(me, !!ctx.data.separator && dropdownItemStyles.divider);
    b.style(me, !!ctx.data.header && dropdownItemStyles.dropdownHeader);
    if (ctx.data.separator) {
      me.attrs["role"] = "separator";
    }
  }
});

export default DropdownItem;

mediaContentStyles.mediaRight
);
medialContentAlignmentStyles(
  MediaContentAlignment.Top,
  mediaContentStyles.mediaTop
);
medialContentAlignmentStyles(
  MediaContentAlignment.Middle,
  mediaContentStyles.mediaMiddle
);
medialContentAlignmentStyles(
  MediaContentAlignment.Bottom,
  mediaContentStyles.mediaBottom
);

export const MediaContent = b.createDerivedComponent(Elem, {
  id: "bobrilstrap-media-content",
  render(ctx: IMediaContentCtx, me: b.IBobrilNode) {
    const alignments =
      ctx.data.alignment instanceof Array
        ? ctx.data.alignment
        : [ctx.data.alignment];
    alignments.forEach(alignment =>
      b.style(me, medialContentAlignmentStyles(alignment))
    );
  }
});

export default MediaContent;

import * as b from "bobril";
import { Elem, IBaseData } from "./element";

export const Underlined = b.createDerivedComponent(Elem, {
  id: "bobrilstrap-underlined",
  render(_ctx: b.IBobrilCtx, me: b.IBobrilNode) {
    me.tag = "u";
  }
});

export const U = Underlined;

export default Underlined;

Right = 1
}

export interface INavbarData extends IBaseData {
  inverse?: boolean;
  static?: NavbarStatic;
  fixed?: NavbarFixed;
  alignment?: NavbarAlignment;
  header?: boolean;
}

interface INavbarCtx extends b.IBobrilCtx {
  data: INavbarData;
}

export const Nav = b.createDerivedComponent(Elem, {
  id: "bobrilstrap-navbar",
  render(ctx: INavbarCtx, me: b.IBobrilNode) {
    me.tag = ctx.data.header ? "header" : "nav";
    b.style(me, navStyles.navbar);
    b.style(
      me,
      ctx.data.inverse ? navStyles.navbarInverse : navStyles.navbarDefault
    );
    b.style(
      me,
      ctx.data.static === NavbarStatic.Top && navStyles.navbarStaticTop
    );
    b.style(me, ctx.data.fixed === NavbarFixed.Top && navStyles.navbarFixedTop);
    b.style(
      me,
      ctx.data.fixed === NavbarFixed.Bottom && navStyles.navbarFixedBottom

import { Th, IThData } from "./th";
import { Td, ITdData } from "./td";

export type IThDataOrString = string | IThData;
export type ITdDataOrString = string | ITdData;

export interface ITrData extends IBaseData {
  context?: TableContext;
  columns?: ITdDataOrString[];
  headers?: IThDataOrString[];
}

interface ICtx extends b.IBobrilCtx {
  data: ITrData;
}
export const Tr = b.createDerivedComponent(Elem, {
  id: "bobrilstrap-tr",
  render(ctx: ICtx, me: b.IBobrilNode) {
    me.tag = "tr";
    b.style(
      me,
      ctx.data.context !== undefined && tableContextStyles(ctx.data.context)
    );

    if (ctx.data.headers)
      me.children = mergeToChildren(
        me,
        ctx.data.headers.map(header => Th(getColumnData(header)))
      );
    if (ctx.data.columns)
      me.children = mergeToChildren(
        me,