Description

Temme (or Emmet in reverse) is to javascript what Emmet is to HTML and CSS, with no doubts, Emmet saved us from the headache of working with HTML and CSS, and now, it's about time Javascript had the same quirk too.

Install

You can get TemmeJS following either steps from this guide.

Build

Building Temme JS is fairly easy, simply run npm install to install all the development dependencies, and then run npm run prod to get the production files under the dist folder. More information about this process can be found here.

As for testing, this guide highlights how simple it is.

Usage

As we've come to know, Emmet converts a select of instructions that are plain text to its logical dom skeleton, Temme does that differently, by working with javascript objects instead of plain text, and seeing how this is a javascript library it kind of makes sense. In order for Temme to do its magic, it requires a hierarchy blueprint as a javascript object and an HTML element to append the skeleton too.

Syntax

Temme.parse(hierarchy: Object, target: HTMLElement, endCallback: (hierarchy: Hierarchy) => void, nodeCallback: (temmeId: string, hierarchy: Hierarchy) => void);

Example for the browser

Given the following code snippet:

<!-- The element we're going to append the HTML skeleton to. -->
<div id="target"></div>

<!-- Including Temme JS. -->
<script src="temme.js"></script>

<!-- Putting Temme to do its thing. -->
<script>
    const target = document.getElementById('target');

    Temme.parse({
        classes: ['card', 'card-dark'],
        childNodes: [
            {
                name: 'div',
                classes: ['card-header'],
                childNodes: [
                    {
                        name: 'h2',
                        content: {
                            value: 'Card header'
                        },
                        classes: ['title', 'txt-gray', 'txt-bold'],
                        attributes: [ { contenteditable: true } ]
                    }
                ]
            },
            {
                name: 'div',
                classes: ['card-body', 'container'],
                data: {
                    source: 'www.somelink.com',
                    id: 536
                },
                childNodes: [
                    {
                        name: 'p',
                        content: {
                            value: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores aspernatur deserunt assumenda in officiis dolore, perspiciatis nam soluta iste odit?',
                        }
                    },
                    {
                        name: 'p',
                        content: {
                            type: 'html',
                            value: 'Lorem ipsum <b>dolor sit amet consectetur <u>adipisicing</u></b> elit. Dolores aspernatur <span class="link">deserunt</span> assumenda in officiis dolore, <mark>perspiciatis</mark> nam soluta iste odit?',
                        }
                    },
                ]
            }
        ]
    }, target);
</script>

Simply that, giving Temme a target element and a skeleton object, it will render the following.

<div id="target" class="card card-dark">
    <div class="card-header">
        <h2 class="title txt-gray txt-bold" contenteditable="true">Card header</h2>
    </div>
    <div class="card-body container" data-source="www.somelink.com" data-id="536">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores aspernatur deserunt assumenda in officiis dolore, perspiciatis nam soluta iste odit?</p>
        <p>Lorem ipsum <b>dolor sit amet consectetur <u>adipisicing</u></b> elit. Dolores aspernatur <span class="link">deserunt</span> assumenda in officiis dolore, <mark>perspiciatis</mark> nam soluta iste odit?</p>
    </div>
</div>

Example for a node environment.

As simple and straightforward as we saw on the browser's side of things, the only difference is how we access Temme, and that's by requiring it.

// es5
var Temme = require('path/to/temme');

// es6
import Temme from 'path/to/temme';

As for the usages, it remains just as in the browser.

// The host element.
var target = document.createEelement('div');

// The hierarchy.
var hierarchy = {
    classes: ['red']
}

// Telling Temme to do its thing.
try {

    Temme.parse(hierarchy, target);
}
catch (e) {

    console.error(e.name, e.message);
}

More on how to use Temme can be found at the documentation web page and even more in-depth in the wiki.

Credits

Icon made by Freepik from Flaticon and licensed by Creative Commons BY 3.0.