Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Harsh Singh
Harsh Singh

Posted on

     

Tatva - The Web Component Framework

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);
Enter fullscreen modeExit fullscreen mode

index.html

<my-appcount="0"></my-app>
Enter fullscreen modeExit fullscreen mode

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

A self-taught Web developer and aspiring Pixel artist.
  • Location
    INDIA
  • Work
    Web developer, Indie Game Developer at self employed
  • Joined

More fromHarsh Singh

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp