Tatva - The Web Component Framework

#javascript #webcomponents #beginners #virtualdom

In my previous Post, I introduced you guys to "Tatva.js", A Web Component Framework.
In that post, I showed you how to create a barebones Todo App using Tatva.js.

In today's post, I will show you how Tatva.js combines the Web Component API with Preact-inspired Hyperscript based Virtual DOM. Below is the source code of a Counter App created using Tatva.js.

Because it requires no build step, you can load the library from a CDN and start building your app.

Counter App Example:
app.js

import { Component, h, text } from 'https://unpkg.com/tatva@latest';

class MyApp extends Component {

    static get observedAttributes() {
        return ['count']
    }

    componentDidConnect() {
        console.log('Component Connected.');
    }

    incrementBy(n) {
        this.setAttribute('count', this.props.count + n);
    }

    render() {
        return h('div', {}, 
            h('p', {}, text(this.props.count)),
            h('div', {},
                h('button', { onclick: () => this.incrementBy(1) }, text('+')),
                h('button', { onclick: () => this.incrementBy(-1) }, text('-')),
            )
        );
    }

}

MyApp.propTypes = {
    count: Number
};

customElements.define('my-app', MyApp);