How to use the bobril.createComponent function in bobril

var counterCtx: CounterCtx;
var counterRenderCounter = 0;

const Counter = b.createComponent({
    ctxClass: CounterCtx,
    render(ctx: CounterCtx, me: b.IBobrilNode) {
        counterRenderCounter++;
        counterCtx = ctx;
        me.children = ctx.counter;
    }
});

var wrapperRenderCounter = 0;

const Wrapper = b.createComponent({
    render(_ctx: b.IBobrilCtx, me: b.IBobrilNode) {
        wrapperRenderCounter++;
        me.children = Counter();
    }
});

describe("ObservableCtx", () => {
    it("Direct", () => {
        let rootRenderCounter = 0;
        counterRenderCounter = 0;
        b.init(() => {
            rootRenderCounter++;
            return Counter();
        });
        b.syncUpdate();
        expect(counterCtx.counter).toBe(0);

"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)),

}
                sleep(10);
                expect(interrupted()).toBeFalsy("Minimum progress must be preserved");
            }

            @computed
            calc2(): void {
                if (interrupted()) {
                    a2 = true;
                    return;
                }
                sleep(10);
            }
        }

        const Comp = b.createComponent({
            ctxClass: CompCtx,
            render(ctx: CompCtx) {
                ctx.calc1();
                expect(gotPartialResults()).toBeFalsy();
                ctx.calc2();
                a3 = gotPartialResults();
                a4 = interrupted();
            }
        });

        b.init(() => Comp());
        b.syncUpdate();
        expect(a1).toBeFalsy();
        expect(a2).toBeTruthy();
        expect(a3).toBeTruthy();
        expect(a4).toBeTruthy();

onFocusOut(ctx: IItemHeaderCtx) {
        ctx.focusFromKeyboard = false;
        b.invalidate(ctx);
    },
    onBlur(ctx: IItemHeaderCtx) {
        ctx.focusFromKeyboard = false;
        b.invalidate(ctx);
    }
});

interface IListItemCtx extends b.IBobrilCtx {
    data: IListItemData;
    isOpen: boolean;
}

export const ListItem = b.createComponent({
    init(ctx: IListItemCtx) {
        ctx.isOpen = ctx.data.initiallyOpen ? ctx.data.initiallyOpen : false;
    },
    render(ctx: IListItemCtx, me: b.IBobrilNode) {
        let d = ctx.data;
        let nestedItems: b.IBobrilNode;
        if (ctx.isOpen && d.nestedItems && d.nestedItems.length) {
            nestedItems = list.List({ nestedLevel: d.nestedLevel + 1 }, d.nestedItems);
        }
        d.onNestedListToggle = () => {
            ctx.isOpen = !ctx.isOpen;
            b.invalidate(ctx);
        }
        d.initiallyOpen = ctx.isOpen;
        me.children = [
            ItemHeader(d),

}

interface IPaperCtx extends b.IBobrilCtx {
    data: IPaperData;
}

export let paperStyle = b.styleDef([c.noTapHighlight, {
    backgroundColor: styles.canvasColor,
    boxSizing: 'border-box',
    fontFamily: styles.fontFamily,
}]);

export let circleStyle = b.styleDef(c.circle);
export let roundStyle = b.styleDef({ borderRadius: 2 });

export const Paper = b.createComponent({
    render(ctx: IPaperCtx, me: b.IBobrilNode) {
        const d = ctx.data;
        me.children = d.children;
        b.style(me, paperStyle);
        let zDepth = d.zDepth;
        if (zDepth == null) zDepth = 1;
        if (zDepth > 0) b.style(me, styles.zDepthShadows[zDepth - 1]);
        if (d.circle) {
            b.style(me, circleStyle);
        } else if (d.round !== false) {
            b.style(me, roundStyle);
        }
        b.style(me, d.style);
    }
});

position: 'fixed',
    transition: transitions.easeOut('250ms', 'opacity') + ', ' + transitions.easeOut('250ms', 'transform'),
    maxHeight: '100%'
});

const horizontalStyle = b.styleDef({
    maxHeight: '100%',
    overflowY: 'auto',
    transition: transitions.easeOut('250ms', 'opacity') + ', ' + transitions.easeOut('250ms', 'transform')
});

const verticalStyle = b.styleDef({
    transition: transitions.easeOut('250ms', 'opacity') + ', ' + transitions.easeOut('250ms', 'transform')
});

export const PopoverAnimationDefault = b.createComponent({
    render(ctx: IPopoverAnimationDefaultCtx, me: b.IBobrilNode) {
        const d = ctx.data;
        const horizontal = d.targetOrigin!.horizontal === 'middle' ? 'vertical' : d.targetOrigin!.horizontal;
        me.children = paper.Paper({
            style: [
                rootStyle,
                {
                    opacity: d.open ? 1 : 0,
                    transform: d.open ? 'scale(1, 1)' : 'scale(0, 0)',
                    transformOrigin: horizontal + ' ' + d.targetOrigin!.vertical
                },
                d.style
            ],
            zDepth: d.zDepth || 1
        }, b.styledDiv(b.styledDiv(d.children, [
            verticalStyle,

function Main(data: b.IRouteHandlerData) {
  return <div>Main</div>;
}

class Main2 extends b.Component {
  render() {
    return <div>Main2</div>;
  }
}

interface IMain3Data {
  test: string;
}

const Main3 = b.createComponent({
  render(ctx: b.IBobrilCtx, me: b.IBobrilNode) {
    me.children = "Main3";
  }
});

b.routes([
  b.route({
    handler: (p: b.IRouteHandlerData) =&gt; <main>
  }),
  b.route({
    handler: (p: b.IRouteHandlerData) =&gt; 
  }),
  b.route({
    handler: (p: b.IRouteHandlerData) =&gt; 
  }),
  b.route({</main>

export interface IListData {
    children?: b.IBobrilNode[];
    privateNested?: boolean;
}

interface IListCtx extends b.IBobrilCtx {
    data: IListData;
}

let listStyle = b.styleDef({
    padding: 0,
    paddingBottom: 8
});

export const List = b.createComponent({
    id: "List",
    render(ctx: IListCtx, me: b.IBobrilNode) {
        let d = ctx.data;
        let hasSubheader = true;
        let firstChild = d.children[0];
        if (firstChild.component) hasSubheader = false;

        b.style(me, listStyle, { paddingTop: hasSubheader ? 0 : 8 });
        me.children = d.children;
    }
});

import * as b from 'bobril';
import * as c from './styleConsts';

let layerId: string | undefined;
let onClicks: { [id: string]: () => void } = {};
let lastId = 0;
let count = 0;

const layerStyle = b.styleDef([c.widthHeight100p, {
    position: 'fixed',
    top: 0
}]);

const clickAwayListenerLayer = b.createComponent({
    render(_ctx, me) {
        b.style(me, layerStyle);
    },
    onPointerUp(): boolean {
        for (var id in onClicks)
            onClicks[id]();
        return true;
    }
});

export interface IClickAwayListenerData {
    onClick: () => void;
}

interface IClickAwayListenerCtx extends b.IBobrilCtx {
    id: string;

height: radius2x,
  backgroundColor: styles.alternateTextColor,
  color: styles.textColor,
}]);

const primaryStyle = b.styleDefEx(badgeStyle, {
  backgroundColor: styles.accent1Color,
  color: styles.alternateTextColor
});

const secondaryStyle = b.styleDefEx(badgeStyle, {
  backgroundColor: styles.primary1Color,
  color: styles.alternateTextColor
});

export const Badge = b.createComponent({
  render(ctx: IBadgeCtx, me: b.IBobrilNode) {
    const d = ctx.data;
    b.style(me, rootStyle);
    me.children = [
      d.children,
      b.styledDiv(d.badgeContent, badgeStyle, d.primary && primaryStyle, d.secondary && secondaryStyle)
    ];
  }
});