Use simple HTML files and ES6 template strings to build web applications without a ton of dependecies, special files, or preloaders. Power of native browser templating.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.gitignore
LICENSE
README.md
es6templates.js
package.json

README.md

Constantine Dobrovolskiy bajjy.com

This library was created to show all the power of ES6, which is supported by all modern browsers. No frames are no longer needed. Under 50 lines of code and you get rid of vendorlock, you will not have to pull billions of dependencies, use special type files or preloaders.

Article on my website: es6 templates

Start

Just add a script to your projecs as a ES6 module

<script src="es6templates.js" type="module"></script>

Dont forget to include it somewhere in your code

import * as templates from '../es6templates.js';

Or You can use any bundler you like. babel, webpack or if you are not a hipster, but true developer — rollup or multihawker.

Using

This lib using basic ES6 templating: var tpl = `this is string ${a + b}`

Simple properties

Which means you can use very same code right in your html file:

<!-- tpl-article.html -->
<article>
    <h2>${newData.title}</h2>
</article>

Now get the file somewhere in your code, library usin fetch method to get file, so templates.include method return Promise:

var myArticle = { title: 'Hellow World!' };
var main = document.querySelector('body');

templates.include('./tpl-article.html', myArticle)
    .then(tpl => main.innerHTML += tpl);

Expressions

Now you can youse any expression inline:

<div class="price">${newData.price * newData.coeff}.00</div>

Functions

But whole power of this approach are in the functions. Here is simple repeat func:

<div>
    ${(() => {
        var list = '';
        newData.map(item => {
            list += `
                <a href="${item.link}" class="title" title="${item.title}">${item.title}</a>
            `
        })
        return list
    })()}
</div>

Middlewares

You can use any middleware fuctions to do even more with templates:

import {default as markdown} from 'markdown-it';

//Define new middleware
templates.middlewares['markdown'] = function(raw) {
    return markdown.render(raw);
};

//fetching tpl
templates.include('./tpl-markdown.html', dataset, 'markdown').then(tpl => {
    console.log(tpl);
    //will output:
    // <p><a href="http://bajjy.com/assets/img/dwnld/package1.zip">download mockup</a></p>
    // <h2><a id="Foreword_1"></a>Foreword</h2>
    // <p>For many years I have been studying and using Photoshop features and tools.</p>
});
<!-- tpl-markdown.html -->
[download mockup](http://bajjy.com/assets/img/dwnld/package1.zip)
## Foreword
For many years I have been studying and using Photoshop features and tools. 

Examples

Look in ./test folder. Thre must be a server for this folder. You can use tiny node server from same folder.

Using of node server

node node-server.js [port]