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)