jayesstee - Javascript Templating (JST)

Overview

Yes, another templating module. This one is quite small, super simple and
is 100% pure javascript. You can step through your templates with a JS
debugger.

The module can both create simple HTML output in string form (useful for
spitting out some HTML in node.js) or can be used in the browser and fill in the
DOM with HTMLElements, etc. It can also manage CSS with local scoping. Finally it adds
some basic support for events and input data retrieval.

Take a look at these codepens for working examples: https://codepen.io/collection/nxdMer

Examples

$3

Add a div with an unordered-list into the body of the page:

import jst from "jayesstee";

// Promote all elements to global (or add 'jst.' in front of everything)
jst.makeGlobal();

jst("body").appendChild(
$div({id: "main", "class": "main-class"},
$ul(
$li({id: "one"}, "First Entry"),
$li({id: "two"}, "Second Entry"),
$li({id: "three"}, "Third Entry")
)
)
);

Build a page using jst.Components

import jst from 'jayesstee';

jst.makeGlobal();

class Page extends jst.Component {
constructor(appData) {
super();
this.header = new Header(appData);
this.body = new Body(appData);
}
cssGlobal() {
return {
body: {fontFamily: "Arial", padding$px: 0, margin$px: 0}
};
}
render() {
return $div({cn: "page"},
this.header,
this.body);
}
}

class Body extends jst.Component {
constructor(appData) {
super();
this.table = new Table(appData.tableConfig, appData.tableData);
}
render() {
return $div({cn: "body"},
this.table);
}
}

class Header extends jst.Component {
constructor(appData) {
super();
this.headerInfo = appData.headerInfo;
}
render() {
return $div({cn: "-header"},
$div({cn: "-title"},
this.headerInfo.title),
$div({cn: "-userInfo"},
this.headerInfo.userInfo)
);
}
cssLocal() {
return {
header$c: {backgroundColor: "black", color: "white", padding$px: 5},
title$c: {fontSize: "150%", display: "inline-block"},
userInfo$c: {display: "inline-block", float: "right", verticalAlign: "bottom"}
}
}
}

const templates = {
table: (fieldInfo, fieldsToShow, collection) =>
$table(
{cn: "table"},
$thead(
$tr(fieldsToShow.map(field => $th(fieldInfo[field].title)))
),
$tbody(
collection.map(entry => $tr(
fieldsToShow.map(field => $td(entry[field]))
))
)
)
};

class Table extends jst.Component {
constructor(config, data) {
super();
this.config = config;
this.data = data;
}
cssLocal() {
return {'tableContainer$c': {margin$px: 10},
table: {borderCollapse: "collapse"},
'td,th': {border$px: [1, "solid", "black"], padding$px: 4},
th: {backgroundColor: "black", color: "white"}
};
}
render() {
return $div({cn: "-tableContainer"},
templates.table(this.config.fieldInfo,
this.config.fieldsToShow,
this.data.collection)
);
}
setConfig(config) {
this.config = config;
this.refresh(); // Refresh only the table on the page
}
setData(data) {
this.data = data;
this.refresh(); // Refresh only the table on the page
}
}

// Now create a page - this won't yet render it
let page = new Page({
headerInfo: {
title: "My Title",
userInfo: "my-name"
},
tableConfig: {
fieldInfo: {
name: {title: "Name"},
height: {title: "Height"},
age: {title: "Age"},
weight: {title: "Weight"},
},
fieldsToShow: ["name", "height", "weight"]
},
tableData: {
collection: [
{name: "Bob", height: 73, age: 31, weight: 180},
{name: "Sam", height: 69, age: 16, weight: 160},
{name: "Ruth", height: 64, age: 55, weight: 150},
{name: "Navneet", height: 60, age: 34, weight: 110}
]
}
});

// Now add it to the document
jst("body").appendChild(page);

CodePen for previous example

$3

CodePen Spinners