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 the createState() function. It reacts to all the changes made in the DOM anf the Javascript file.
• The property is the key of the object, like fname 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.