After recently starting a new project with Bobril (within the last 30 minutes), I am getting the the above error against this line of code:

https://github.com/Bobris/Bobril/blob/7bce04dda6afb570b1a57afc6fe905b00fe607fb/package/index.ts#L4233

After fishing around for a bit, waitingForPopHashChange is a numeric where setTimeout is a timer. Is this a legit error or something perhaps I messed up when installing the project?

Hello,

I use Bobril for the first time and I'm looking for documentation. You soon a complete documentation ?

• Into the videohe use b.createComponent(...) but I dont find this method!

Thank you.

Hello,

I have implemented a select box this way :

    const cePaxSelect = b.createComponent({
        render(ctx: IBobrilCtx, me: IBobrilNode) {
            me.tag = "select";
            me.className = "natural-select";
            me.children = this.createOptions(ctx.data);
        },
        onChange(ctx: IBobrilCtx, value: string) {
            // process value here ...
            b.invalidate();
        },
        createOptions(model: IBookingModel): IBobrilChildren {
        ...

The issue occured when we click on the select box, there is an onChange event that is launched, so, the first value in the list is selected. When a element is selected, I need to update the values inside this select box, but it create the issue of the click again. This does not appear on your exemple : http://bobris.github.io/Bobril/input/index.html

I have tried to create a event component to handle the onChange event inside it :

            me.component = {
                onChange(ctx: IBobrilCtx, value: string) {
                    console.log("select change : " + value);
                }
            };

but nothing occured.

thank you.

i create a textbox input and the validation work only on:

• Submit
• Always

and i want with first focus

 <reference path='../../Libraries/bobril/library.d.ts'/>

  <reference path='../../Libraries/dc-helpers/library.ts'/>
 <reference path='../../Libraries/bobril-onchange/library.d.ts'/>
 <reference path='../../Libraries/validation/library.ts'/>
  <reference path="../../Libraries/bobril-focus/library.d.ts"/>

declare let textboxStyle: IBobrilStyleDef; declare let textboxInvalidStyle: IBobrilStyleDef; declare let labelStyle: IBobrilStyleDef;

const enum TextboxType { TEXT = "text", PASSWORD = "password", SEARCH = "search" }

const enum Autocapitalize { NONE = "none", SENTENCES = "sentences", WORDS = "words", CHARACTERS = "characters" }

interface IData { datactx: IDataCtx; id: string; placeholder: string; type: TextboxType; maxlength: number; autocapitalize: Autocapitalize; }

interface ICtx extends IBobrilCtx { data: IData; firstFocus: boolean; }

interface IDataCtx { setValue(value: string): void; getValue(): string; } let applyInvalidStyle: boolean = true; const divComponent: IBobrilComponent = {

id: "DivComponent",
init(ctx: ICtx, me: IBobrilCacheNode): void {
    initValidatedInput(ctx, me, "Value");
},
render(ctx: ICtx, me: IBobrilNode): void {
    me.tag = 'div';
    applyInvalidStyle = !isValid(ctx)
        && ctx.cfg
        && ctx.cfg.shouldShowValidation(ctx);
    me.children = [createInputComponent(ctx), b.style!({ tag: 'label', children: ctx.data.placeholder, attrs: { for: ctx.data.id } }, labelStyle)]
},
onChange(ctx: ICtx, value: string): void {
    ctx.data.datactx.setValue(value);
},
onBlur(ctx: ICtx): void {
    if (!ctx.firstFocus) {
        ctx.firstFocus = true;
        b.invalidate();
    }
}

}; function createInputComponent(ctx: ICtx): IBobrilNode { return { data: ctx.data, component: inputTextComponent } } const inputTextComponent: IBobrilComponent = { id: "TextBoxComponent",

render(ctx: ICtx, me: IBobrilNode): void {
    const d = ctx.data;
    me.tag = "input";
    me.attrs = b.assign(
        me.attrs || {}, {
        id: d.id,
        name: d.id,
        placeholder: ' ',
        value: d.datactx.getValue(),
        maxlength: d.maxlength
    },
        getReadOnlyStatus(ctx) ? { readonly: true } : {}
    );

    b.style!(me, textboxStyle, applyInvalidStyle && textboxInvalidStyle)
},
onChange(ctx: ICtx, value: string): void {
    if (!ctx.firstFocus) {
        ctx.firstFocus = true;
        b.invalidate();
    }
    ctx.data.datactx.setValue(value);
},
onBlur(ctx: ICtx): void {
    if (!ctx.firstFocus) {
        ctx.firstFocus = true;
        b.invalidate();
    }
}

} var getID = (): string => { return Math.random().toString(36).substr(2, 9); } export function textBoxFactory( type: TextboxType, placeholder: string, maxLength: number, autocapitalize: Autocapitalize, dataCtx: IDataCtx ): IBobrilNode { const ID = getID(); return { data: { placeholder, type, id: ID, maxlength: maxLength >= 0 ? maxLength : null, autocapitalize, datactx: dataCtx }, component: divComponent }; }

At the moment, the bobril NPM package doesn't contain compiled output. It only contains index.ts. What is worse is that the package.json references main: 'index.js' which doesn't exist in the package (I'm surprised NPM let you publish like this).

If it is possible, it would be nice to be able to use this without having to use the custom tooling. I believe at the least this requires publishing NPM packages with pre-compiled index.js (this may require other changes as well, not sure).

Current state:

• All node setters are filled with max ID depends on routes count (all nodes are set to the same array field)
• only last item of this array are actually used.

Problem description:

• When count of routes is decreased, node setters are still set to previous max ID
  • It means that this ID of nodeArray is not used bcs of clear -> canDeactivate is not called
• When count of routes is increased, node setters are changed just for few new higher setters
  • It means that there is posibility to have obsolete node in nodeArray -> canDeactivate is called even if node is not rendered

Solution:

• Reset nodeArray and node setters when count of routes is changed
• Thanks to this, nodeArray will have only last route item every time, so just the last canDeactivate will be called.

Solution to the future:

• Should be nodeArray filled with all nodes used in routes?
  • Then canDeactivate can be called for all routes which are deactivated
  • We need to know future routes before first iteration of routing is called.
  • We need to keep nodeArray updated all the time.

First I want to say, great work on Bobril, it's something I've been utilising for a framework I'm currently designing.

The only lacking feature I see is isomorphic support for NodeJS? So, like React, components can be rendered on the server and, upon the client loading the rendered output, initialise from the pre-rendered DOM. React makes use of data-reactid to link up the nodes to their respective virtual dom counterparts, so I'd imagine something similar could be applied to Bobril.

I believe this a key feature that would certainly add massively to Bobril and its uptake in the community.

Hi, I have an issue with loader of nodejs modules. I have created a sandbox project to visualize the problem The problem occurs, when I import typescript file, that is not in the hiearchy of the project directories.

The project structure:

There are two projects. The one is located in src and the second in otherProject. Each of this projects has own package.json.

I want to import an utils.ts class in src project.

If I run bb command in src project, than bobril sources in the browser looks like:

The problem is, that the loader wants to load the module bobril through the key: "node_modules/bobril/index" From this map: It will fall to this exception:

So, in the chrome browser console this exception occured:

Uncaught Error: Module bobril in src/index not registered
    at Function.R.r (loader.js:27)
    at loader.js:31
    at index.ts:1
    at Function.R.r (loader.js:31)
    at (index):16

I need this, to create a sandbox (example) project, to test the core functionality of another project.

Sandbox code to see the error: bobril-issue-sandbox.zip

Any idea?

Thanks :)

I need to use optGroups in Selects but the label attribute is not rendered... How could I do it? thank you !

fact is it's perfecty working... sorry for that

tsc 2.1.5 used tsc is called in script without creating source maps (no sourceMappingURL is in js now) Commited only changed js from folders when was done some change.

IBobrilMouseEvent contains page positions x and y. I need element postion.

My current solution:

const position = b.convertPointFromPageToNode(ctx.me, x, y);
const scroll = b.getWindowScroll();
let cell = ctx.cellPositonConverter.getCellFromPositon(position[0] + scroll[0], position[1] + scroll[1]);

Is there any better way to convert it to element position with scroll support?

THX Pepa