In my previousPost, 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';classMyAppextendsComponent{staticgetobservedAttributes(){return['count']}componentDidConnect(){console.log('Component Connected.');}incrementBy(n){this.setAttribute('count',this.props.count+n);}render(){returnh('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-appcount="0"></my-app>Top comments(0)
Subscribe
For further actions, you may consider blocking this person and/orreporting abuse
