Tatva — фреймворк веб-компонентов

В своем предыдущем посте я познакомил вас с «Tatva.js», фреймворком веб-компонентов.
В том посте я показал вам, как с помощью Tatva.js создать практически готовое приложение Todo.

В сегодняшнем посте я покажу вам, как Tatva.js сочетает API веб-компонентов с виртуальным DOM на основе Hyperscript, вдохновленным Preact. Ниже приведен исходный код приложения Counter App, созданного с помощью Tatva.js.

Поскольку оно не требует шага сборки, вы можете загрузить библиотеку из CDN и начать создавать свое приложение.

Пример приложения «Счетчик»:
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>

Войти в полноэкранный режим Выход из полноэкранного режима