vinary v1.0.17
Vinary: Mini-DOM Library for Vanilla JS lovers
Vine is built to make your html files Reactive with minimalistic syntax. A simple function like this:
createState({
fname: 'Rishom',
lname: 'Rozario',
decription: 'Web-dev enthusiast. I Love React and Angular'
})
...and an HTML file like this:
<h1>{{fname}} {{lname}}</h2>
<p>I am a {{description}}</p>
... is a lot better than the boring old
elem1.textContent = fname + lname
elem2.textContent = 'I am a' + description + description2 + description3 + and_so_on
The createState()
can also take a callback.
const callback = (object, property, element) => {
if (element.nodeName === 'INPUT') {
element.addEventListener('keydown', (e) => {
object[property] = e.target.value
})
}
}
createState({
fname: 'Rishom',
lname: 'Rozario',
decription: 'Web-dev enthusiast. I Love React and Angular'
}, callback)
Let's break this piece of code down and see what the callback()
actually does. The function takes three parameters:
- The
object
parameter is an object that is similar to the object in thecreateState()
function. It reacts to all the changes made in the DOM anf the Javascript file. - The
property
is the key of the object, likefname
for instance. - The
element
is any element with the 'bind' property set (<h1 bind='description'></h1>
), which we will check a bit later, or the part of the HTML within braces ({{description}}
)
The ' if ' statement checks whether the element is an input field
If the element is indeed an input field, a 'keydown' event is attached that changes the property within the object.
It is important to note that the object whose property is being changed is similar to but not an actual copy of the object in createState()
. This means that making changes to the original object does not affect the DOM
Also, the callback is called when parsing the HTML, yes the HTML is parsed during runtime, or, more accurately, when setting the values in the placeholders. It is fired for every element that acts as a placeholder and the property and element parameters are changed every time.