bobris / bobril Goto Github PK
View Code? Open in Web Editor NEWComponent oriented framework with Virtual dom (fast, stable, with tooling)
Home Page: http://bobril.com
License: MIT License
Component oriented framework with Virtual dom (fast, stable, with tooling)
Home Page: http://bobril.com
License: MIT License
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.
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 :)
png use sprite , but when use gif , the build is just png file, the gif not work
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.
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).
When I accidently call transation.Store() on KeyValuePair, instead of on his value. I get Verification Exception, operation could destabilize runtime. It's difficult to find the right spot where tr.Store on struct is called.
I call b.invalidate(ctx) in postinitDom and render is not called then.
fix: add finishUpdateNodeWithoutChange(c, createInto, createBefore); to updateNode In case there is no component and source is same reference it is considered not changed
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:
Line 4233 in 7bce04d
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 ?
Thank you.
Can we reander a Inspire Desinger Bobril output in a WebComponent inseat of a iframe?
Hi Bobris,
i update the desginer to 14.4 and when i build component with gulp
its give me error on export
and when i click on js file its give me this row
exports.textBoxFactory = void 0;
Hello,
I just want to know what is the difference between those 2 ways to create a component :
const myComponent: IBobrilComponent = {
init(ctx: IBobrilCtx) {...},
render(ctx: IBobrilCtx, me: IBobrilNode) {...}
use :
{ component: myComponent, data: { model: model, passenger: passenger } }
const myComponent= b.createComponent({
init(ctx: IBobrilCtx) {...},
render(ctx: IBobrilCtx, me: IBobrilNode) {...}
use :
myComponent( {...} )
thank you.
i'm using the Quadient DC and i want to importing libraries to component that i build
but that give me error "Require is not defined" when its compile to js
there is a way to import libraries like material?
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
Float was reserved keyword till ECMAScript 3 and reserved words actually only apply to Identifiers, so it's use as an object property is legal.
Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar
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 have problem with local built, I am using for built bb
PS E:\Other_projects\VSC_ESP\testBobril> bb
Bobril-build core running C:\Users\rmysk.bbcore\1.34.0
Listening on http://localhost:8080/
Build started E:/Other_projects/VSC_ESP/testBobril
Npm install
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
audited 1 package in 0.717s
found 0 vulnerabilities
during local built I received this error
Main file E:/Other_projects/VSC_ESP/testBobril/index.js not found
Using TypeScript version 4.1.2
JS Bundle length: 11758 SourceMap length: 517 T:28ms
package.json(1,1): Unused dependency bobril in package.json (-13)
Build done in 3.2s with no errors and 1 warning and has 3 files
Semantic check done in 4.3s with no errors and 1 warning
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
Hi,
I have 2 different models :
model1: {}
model2: {}
When I click on a button, I'd like to change model.
Could u, plz, tell me what's the best way.
Best regards,
Richy
I copy and pasted hello world code example from http://bobril.com/#/getStarted and it does not work. There are syntax errors.
i create a textbox input and the validation work only on:
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
};
}
there a way to style children with selectors like focus?
Hello,
I would like to use as a component template that returns a string containing the HTML value of a component.
Is there a method like this?
Hi,
I have a problem to apply !important to CSS property.
It occurs only if the CSS property name is composed by two words.
For example: box-shadow, min-width, min-height, etc..
If I do not use "!imporant", than the property is correctly displayed in browser (debugg view), but if I apply this keyword, than the property completly disappear.
b.styledDiv(...., {minWidth: "200px !important"})
something like below...
b.styleDef({
color:'red';
p:{
color:'blue'
}
}}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.