README

nohtml

const {Els, El} = require('nohtml');

// El
// creates a single DOM-element

// Els
// creates DOM-element with this.entry, this.els and this.content

const temp = [
    ['div @w .user'],
        ['div @info', '@w', {s: {padding: '20px'}}],
            ['p #name .b .fs-14', '@info'],
            ['p #age .gray', '@info'],
        ['div ^content', '@w']
];

class User extends Els {
    constructor(d) {
        super(temp)
        Object.assign(this, d);
    }
    set name(v) {
        this.els.name.textContent = v;
    }
    set age(v) {
        this.els.age.textContent = `${v} age`;
    }
};

let David = new User({name: 'David', age: 25});

David.parent = document.body;
// document.body.appendChild(David.entry);

// with static method
for (let i = 0; i < 5; i++) {
    El.create('p', David.content, {t: i}));
}

// detail

let button = new El('button .btn .btn-normal', document.body, {t: 'Send'});
// return {entry: DOM}
// <body>
//     <button className="btn btn-normal">Send</button>
// </body>

// arguments
// 1 - mask or DOM-element
// 2 - link to the parent DOM-element
// 3 - short properties

// mask
// 1 - tag name
// then - class name with dot

let pip = new Els('button .btn .btn-normal');
// return {entry: DOM}

let pup = El.create('button .btn .btn-normal', undefined, {t: 'Send pup', s: {marginBottom: '10px'}});
// return DOM

let user = new Els([
    ['div @wrap .any-class', document.body],
        ['div @wrap_info', '@wrap', {s: {padding: '20px'}}],
            ['p #name .b .fs-14', '@wrap_info', {t: 'No name', s: {marginBottom: '10px'}}],
            [pip.entry, '@wrap_info', {t: 'Send pip'}],
            [pup, '@wrap_info']
]);
// return {entry: DOM, content: DOM, els: {name: DOM}}

// arguments
// 1 - mask or DOM-element
// 2 - link to the parent DOM-element or id parent
// 3 - short properties

// mask
// 1 - tag name
// then
// # - id, save
// @ - id, not save
// . - class name
// ^ - entry content

user.els.name.textContent = 'David';

let {button} = user.els;

button.addEventListener.on('click', e => {
    // ...
});

// short properties
// t - textContent
// h - innerHTML
// v - value
// p - placeholder
// c - className

// short properties (object)
// s - style element
// a - attribute element
// i - appendChild element to parent
Usage no npm install needed!

README

nohtml
