Skip to content

Reon90/tung

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

logo

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 🤔