Add structured html5 codeflow into your javascript/nodejs projects.
- All standard html5 tags as class methods.
- Flexible html input; string, function, array of strings or functions, multiple arguments.
- Inbuilt method loops, conditionals and switches so your html and programming logic can reside together.
- Provides several helper methods.
- Fast, lightweight, no dependencies.
const ht = htflowInit();const htflow = require('htflow');
const ht = htflow();or more simply:
const ht = require('htflow')();const myWebPage = ht.doc(
ht.html(
ht.head(
ht.meta(
{
charset:'utf8'
}
),
ht.link(
{
rel:'stylesheet',
href: './css/wapp.css'
}
),
ht.script(
{
src: './js/wapp.js'
}
),
ht.title(
'Hello'
)
),
ht.body(
{
onload: ht.cmd('wapp.start',0),
style: ht.css(
{
margin : '0px',
width: '100%',
height: '100%'
}
)
},
ht.main(
{
id: 'main'
},
ht.div(
{
id: 'hellodiv'
},
ht.p(
'hello world'
),
ht.button(
{
onclick: ht.cmd('wapp.magic'),
title: 'click on me for some magic'
},
ht.img(
{
src: './img/smileyface.jpg',
height: 24,
width: 24
}
)
)
)
)
)
)
);const myTable = ht.table(
{
id: 'mytable'
},
ht.thead(
ht.tr(
ht.forEach(
['Rec#','Firstname','Surname','Address','Suburb','Mobile'],
(e,i,a) => {
return ht.th(e);
}
)
)
),
ht.tbody(
ht.forEach(
myData, //an array of object records
(e,i,a) => {
return ht.tr(
ht.td(
{
align: 'right',
onmouseover: ht.evt('wapp.hover')
},
i+1
),
ht.forIn(
e,
(k) => {
return ht.td(
{
align: 'left'
},
v
)
}
)
)
}
)
)
);const mySelect = ht.div(
{
id:'control1'
},
ht.label(
{
'for':'display'
},
'Display:'
),
ht.select(
{
id: 'display',
onchange: ht.cmd('wapp.displayChanged'),
title: 'Specify the maximum number of foobats to display'
},
ht.forEach(
[3,6,9,12,15,18,24,30],
(e,i,a) => {
let attr = {
value: e
};
if (e == wapp.display) attr.selected = 'selected';
return ht.option(
attr,
ht.concat(
e,
' foobats'
)
)
}
)
)
);All methods return strings representing HTML5.
There are methods for all HTML5 standard tags:
ht.tag([attr][,html][,html[[,...]); //for double tags, i.e. html, div, span, p, a, etc.
ht.tag([attr]); //for single tags, i.e. meta, img, br, etcReplace 'tag' with the actual html5 element tag.
attr is an object with key value pairs matching element attributes/properties.
html is either a string, a function ()=>{...}, or an array of strings and/or functions returning strings, the string values of which are sequentially appended.
ht.doubleReg(tag);Registers a method for a custom html element tag with double tags (opening/closing pair).
After registering doubleReg('mycustomtag'); you can then use ht.mycustomtag([attr][,html][,...]); in your code.
ht.singleReg(tag);Registers a function for a custom html element tag with single tag.
After registering singleReg('myothercustomtag'); you can then use ht.myothercustomtag([attr]); in your code.
ht.doc([html]);Generates html5 initial document type string with optional html content.
ht.doWhile(test, (cond) => {...});test is a function returning true or false.
cond is the boolean result of the last test.
(cond) => {...} will be executed while the boolean result of test() is true.
in order to exit the loop (cond) => {...} must manipulate in-scope variables so that a subsequent test() returns false.
ht.forLoop(start, end, (i) => {...} );Loop i incrementally from start to end (step +1).
If start is less than end, step is -1.
The numbers start and end are inclusive.
Let (i) => {...} return false to break prematurely from the loop.
ht.forEach(vals, (e,i,a) => {...});Given an array of values vals, html is processed sequentially for each array value with e = element, i = index, a = array.
ht.forIn(obj, (k,v) => {...});Given an object obj, html is processed sequentially for each of its enumerable properties with k = key, v=value.
ht.ifElse(cond, htmlIf[, htmlElse]);If cond (boolean), returns htmlIf or else returns htmlElse (optional.)
ht.switchCase(val,opts,html[,htmlDefault]);Given a value val, and an array of possible matches opts then html is the corresponding array of possible html outputs.
If there is no match for val, htmlDefault is the default output.
If html[n] is given as '||', then opt[n] is a fall through case. For example:
ht.switchCase(
val,
[1,2,3,4,5],
['||','||',()=>{ return 'X'+foo(val); },'||','Y'],
'Z'
);is an emulation of:
switch (val) {
case 1:
case 2:
case 3: return 'X' + foo(val);
case 4:
case 5: return 'Y';
default: return 'Z';
}ht.whileDo(test, (cond) => {...});test is a function returning true or false.
cond is the boolean result of the last test.
(cond) => {...} will be executed at least once then repeated while test() is true. (N.B. The initial value of cond is undefined.)
In order to exit the loop (cond) => {...} must manipulate in-scope variables so that a subsequent test() returns false.
ht.concat(html[,html][,...]);Add html content together (aesthetic alternative to using +'s)
ht.cmd(func[,param][,param][,...]);Helps construct an embedded js event command in html.
func is a string of the target js method name.
param are optional parameters to pass to the method.
For example, clicking on an element with
{
onclick: ht.cmd('validate',str,num);
} triggers
function validate(str,num) {
...
} ht.evt(func,[param,][param,][...]));Operates just like ht.cmd except an 'event' variable is assumed as the first parameter: For example a key down event
{
onkeydown: ht.evt('test',val1,val2);
}triggers
function test(event,val1,val2) {
if (event.code == 'Enter') {...}
}ht.css(prop);Helps include style properties within your html. (Rather use css stylesheets for non-dynamic styling.)
prop is an enumerable object whose key value pairs represent the css properties and values you wish to set or change.
npm install htflowTests are written in Mocha
npm test