RavaJS is a small library that allows you to define a component that is bound to elements using a CSS selector. This binding is dynamic so that you may define a component at any point and it will effect existing and future matching elements.

How to start

Setup


<script src="https://cdn.jsdelivr.net/npm/rava@2.1.1/dist/rava.min.js"></script>
            

Usage

Now you can use css selectors to find html elements and add new functionality

rava.bind('rava-time',{
    callbacks:{
        created: function(){
            this.start();
        }
    },
    methods : {
        start : function() {
            this.tick();
            this.__timeInterval = setInterval(this.tick,1000);
        },
        stop : function() {
            this.__timeInterval = clearInterval(this.__timeInterval);
        },
        tick : function() {
            this.textContent = new Date().toLocaleTimeString();
        }
    },
    events : {
        click : function() {
            if (this.__timeInterval){
                this.stop();
            } else {
                this.start();
            }
        }
    }
});
        
Combined with some HTML

<h2>"The time" she opined ,"is now <rava-time></rava-time>"</h2>
        
Creates

"The time" she opined ,"is now "