triskel HTML renderer app
npm install @triskel/appCompact, reliable and customizable HTML minifier.
`` sh`
npm install @triskel/app --save-dev
RenderApp creates an instance with a context for rendering
` js`
var APP = require('@triskel/app');
> Methods
- APP.render( parent_node, Triskel Structured Nodes ([TSList]) )
- APP.defineFilter(filter_name String, filter Function)filter_name
- , String name for identify filterfilterFunction
- (input_var / usually a string /)
- APP.eval(expression String)
returns a function that and evaluates data with passed expression
` js
APP.defineFilter('uppercase', function (text) {
return text.toUpperCase();
});
var renderName = APP.eval(' person.first_name | uppercase ');
renderName({ person: { first_name: 'John' } });
// results: 'JOHN'
`
- APP.withNode(withNode Function)withNode
passed (node TSList Node)
TSList Node Types:
- Node Element: { $: 'input', attrs: { required: '' } }
- Text Node: Strings in [TSList] are converted to { text: 'Lorem ipsum...' }
- Comment Node: { comments: 'This is a JS comment' }
Returned Object determines what to do with node to be rendered
` jsreplace_by_comment
with_node Object {
: initNode
: `
}
` js
APP.withNode(function (node) {
if( node.$ === 'div' ) return {
replace_by_comment: 'replaced div: ' + node._,
};
});
'
// resulting DOM:
// foobar
`
` js
APP.withNode(function (node) {
if( node.attrs && node.attrs['data-click'] === 'log' ) return {
initNode: function (button_el, node / TSList Node /, render_options / options passed to APP.render /) {
button_el.addEventListener('click', function (e) {
console.log('button clicked', button_el);
});
},
};
});
// previous code will log in console every click for nodes with attribute [data-click=log]:
//
- APP.
(tag_name String, options Object or initNode Function)
- options Object
js
{
'template': ,
controller: initNode Function,
'data': ` > Component example
js
APP.component('my-div', {
template: [
{ $: 'ul', _: [
{ $: 'li', _: 'First name: {{ person.first_name }}' },
{ $: 'li', _: 'Last name: {{ person.last_name }}' },
{ $: 'li', _: 'Age: {{ person.birthday | ageDiff }}' },
] }
],
data: {
person: {
first_name: 'John',
last_name: 'Smith',
birthday: '1980-01-01'
}
},
});
`- APP.
(attribute_match String, initNode Function, withNode Function)
- attribute_match: string received will be evaluated as /^attribute_match$/
- withNode: Special withNode that receives:
this.attr_key and this.attr_value> Directive example
js
APP.directive('if-mobile', function (node_el) { if( this.attr_value === 'log' ) {
console.log('node has being rendered')
}
}, function withNode (node) {
console.log(this.attr_key); // results: 'if-mobile'
console.log(this.attr_value); // results:
if( matchMedia('(max-width: 768px)').matches ) return {
replace_by_comment: 'if-mobile: ' + this.attr_value,
};
});
``[TSList]: https://triskeljs.github.io/#triskel-structured-list-tslist