Dove.js

Simple library to initialize components from HTML tags hierarchichally. Good for websites with various heterogenous, independent components.

Example HTML:

<div data-component="app-component">
    <h1>My App</h1>
    <div class="header">
        <div data-component="header-component">
            <div class="logo"></div>
            <div class="nav-wrapper">
                <div data-component="nav-component" data-prop-nav-items="navItems"></div>
            </div>
        </div>
    </div>
</div>

Example JS:

var NavComponent = Dove.createComponent(function(props) {
    this.navItems = props.navItems;
    this.render();
});
NavComponent.prototype.render = function() {
    // Do something with this.navItems.
    // Use whatever view library you like.
};

var HeaderComponent = Dove.createComponent(function() {
    this.registerComponent('nav-component', NavComponent, true);
    this.navItems = [
        'nav item 1'
        'nav item 2',
        'nav item 3',
    ];
    this.scanChildren();
});

var AppComponent = Dove.createComponent(function() {
    this.registerComponent('header-component', HeaderComponent, true);
    this.scanChildren(); // Searches this.elem for children with data-component attributes and initializes them
});

Initialize the root component

var appComponent = new AppComponent(document.getElementById('#app'));