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); index.html
<my-app count="0"></my-app> 
Top comments (0)