Synthes

How to start?

npm i synthes --save

import Synthes from './synthes';

or

let Synthes = require('./synthes');

or

<script src="synthes.js"></script>

JSON template:

let template = {
    
    "span": {
        "class": 'some your class',
        "attribute": 'some your attribute',
        "content": 'Hello Synthes!'
    }

}

And lets do Synthes:

let sandbox = document.querySelectorAll('some selector')[0]; // Choose your sandbox

let synthes = Synthes(template, sandbox); // Creating Synthes object

synthes.render(); // rendering our template into sandbox

Simple, but maybe without object? Ok..

let sandbox = document.querySelectorAll('some selector'); // Choose your sandbox

Synthes(template, sandbox).render(); // rendering

Ok. Without sandbox..

document.body.appendChild( Synthes(template).node ); // I think u understand

What about simple Synthes object?

let a = Synthes();

a.node - our template as DOM Node

a.string - our DOM Node as string

a.isSynthes - always true if its a Synthes object

a.template - JSON template

a.bind(s) - to bind sandbox "s"

a.render() - to render template into sandbox

What about template?

let template = {
    'node': { //Your DOM Node
        'attribute': 'attribute value',
        'attribute2': 'attribute2 value',
        ...,
        'content': 'some string content' //May be a string, a node or a array template
    }
};

What about mixed template?

let template = {
    'node': { //Your DOM Node
        'attribute': 'attribute value',
        'attribute2': 'attribute2 value',
        ...,
        '$span': 'some string content'
    }
};

U can see "quot; symbol to use string nodes alongside string attributes

Simple template:

let template = { 'span': '' }; // Empty `span`

Nested template:

let template = {
    'div': {
        'p': {
            'span': 'Hello from span in p in div ;)'
        }
    }
};

Node with classes:

let template = {
    'div.my-class.super-class': 'hello synthes'
};

Fast render with object:

let a = Synthes(template, sandbox).render(); //Rendering and creating object at once

Complex and hard

let a = Synthes( { span: 'Hello' } );
let b = Synthes( { span: '%nbsp;' } );
let c = Synthes( { span: 'Synthes' } );

let Synthes = Synthes( { span: [a, b, c] } );

HelloSynthes.string // <span><span>Hello</span><span>%nbsp;</span><span>Synthes</span></span>

Enjoy