tung

A javascript library for rendering html. Tung helps to divide html and javascript development. In order to start working with tung, you only need to know two methods, setView and setState.

Install

npm install tung

Of course, that you need to convert html to js.

npm install babel-tung

There is config for Webpack and Gulp

Features

• based on snabbdom, a fast and simple virtual DOM library;

• pure html: block defines context, variables, components;

• pure javascript: no jsx, defines only state for rendering html;

• stateful and stateless components;

Use cases

• you don't like jsx;

• you have html developers in your team;

• you like React patterns, but you looking for something different;

Usage

Demo

<!-- page.tpl -->
<div>
    <div class="users">
        <Card block="users" />
    </div>
    <Btn block="btn" />
</div>

<!-- btn.tpl -->
<span class="btn">{this.text}</span>

<!-- card.tpl -->
<div class="item item--admin">
    <img src={this.img} width="50" height="50" />
    <span class="item__content">{this.name}<span block="isAdmin"> &bull; admin</span></span>
    <Btn block="btn"/>
    <Btn block="delete"/>
</div>

import {Tung} from 'tung';
import card from './card';
import page from './tpl/page';
import btn from './tpl/components/btn';

class Users extends Tung {
    constructor(container) {
        super(container);

        this.setView(page, btn, card); // IMPORTANT
        
        fetch('https://api.github.com/users/octocat/following')
            .then(response => response.json())
            .then(users => this.ready(users))
            .catch(console.error);
    }

    ready(users) {
        users[Symbol.iterator] = this.getUsers;
        this.usersIterator = users[Symbol.iterator]();

        this.setState({ // IMPORTANT
            users: [this.buildUser(this.usersIterator.next().value)],
            btn: {
                text: 'Load more',
                on: { click: this.handleEvent }
            }
        });
    }
    
    buildUser(user) {
        return {
            name: user.login,
            img: user.avatar_url,
            url: user.html_url,
            isAdmin: user.site_admin,
            id: user.id,
            onDeleteProfile: [this.onDeleteProfile, this]
        };
    }
    
    handleEvent(e) {
        let user = this.usersIterator.next();
        if (user.done) {
            delete this.state.btn;
        }
        this.state.users.push(this.buildUser(user.value));
        this.setState(this.state); // IMPORTANT
    }
    
    onDeleteProfile(e) {
        let index = this.state.users.findIndex(user => user.id === e.target.data.id);
        this.state.users.splice(index, 1);
        this.setState(this.state); // IMPORTANT
    }

    * getUsers() {
        for (let i = 0; i < this.length; i++) {
            if (this.length === i + 1) {
                return this[i];
            } else {
                yield this[i];
            }
        }
    }
}

new Users(root);

API

methods

name	argument	description
setView	function	Defines which components will use
setState	object	Render html from object

hooks (not called for root)

name	argument	description
init	null	Called when component was created
destroy	null	Called when component was removed

props

name	type	description
refs	object	Stores stateful children components
els	object	Stores DOM elements

html syntax

name	type	description
block	attribute	Name of context
Component	tag	Name of component
this	object	Access to context

state properties

name	type	description
on	object	{ on: { click: this.onClick } }
attrs	object	{ attrs: { placeholder: 'Text' } }
props	object	{ props: { data: { id: 12345 } } }
class	object	{ class: { toggle: true } }
style	object	{ style: { display: 'none' } }

Feel free to offer new features 🤔