Bristle
Bristle is a lightweight front-end rendering solution.
Bristles
Bristles represent DOM elements, and can chained together. Bristles are re-rendered when their parents are. Bristles are created with 3 parameters, the first for creating the DOM element, the second for the inner text value of the element, and the third for the parent node. Only the first parameter is required, which may be either a string of the element type, or an object where the type property contains a string of the element type, and any other properties represent the attributes of the element. The second parameter may be text to display, or instead can be a function which will be given the Bristle's render method as the parameter. The third parameter either accepts another Bristle object or a DOM element to append to.
Bristle Methods
render
Allows you to set the value of a bristle, accepts string, boolean, number. Additionally a DOM element can be passed, which will just append it as a child.
bristle.render('Hello World')
remove
Removes the bristle from it's parent element.
bristle.remove()
appendTo
Allows you to append a bristle to another Bristle or HTMLElement object
bristle.appendTo(element)
onEvent
Allows you to add event listeners to the bristle's DOM element.
bristle.onEvent('click',()=>{alert('clicked!')})
setAttributes
Allows you to modify the attributes of the bristle's DOM element, accepts an object.
bristle.setAttributes({style:"color:red;"})
WARNING: You will be vulnerable to script injections if you setAttributes with data from unsafe/unsanitized sources.
Example Calculator
var calc = new Bristle({type:'div',id:'calculator'},'Calculator');
var currentValue = 0;
var display = new Bristle('p',currentValue,calc);
var subtract = new Bristle('button','-',calc);
subtract.onEvent('click',()=>{
currentValue--;
display.render(currentValue);
});
var add = new Bristle('button','+',calc);
add.onEvent('click',()=>{
currentValue++;
display.render(currentValue);
});
calc.appendTo(document.body);