@triskel/app

triskel HTML renderer app

Usage no npm install needed!

<script type="module">
  import triskelApp from 'https://cdn.skypack.dev/@triskel/app';
</script>

README

@triskel/app

Compact, reliable and customizable HTML minifier.

npm bundlephobia GitHub license

Build Status Coverage Status dependencies Status

Installation

npm install @triskel/app --save-dev

RenderApp

RenderApp creates an instance with a context for rendering

var APP = require('@triskel/app');

TriskelApp instance:

Methods

  • APP.render( parent_node, Triskel Structured Nodes (TSList) )

  • APP.defineFilter(filter_name String, filter Function)

    • filter_name, String name for identify filter
    • filterFunction(input_var /* usually a string */)
  • APP.eval(expression String) returns a function that and evaluates data with passed expression

    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) passed withNode(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

    with_node Object {
      `replace_by_comment`: <String|false|undefined>,
      `initNode`: <Function (node_el HTMLElement, node Object, render_options Object, with_node Object)>
    }
    
    APP.withNode(function (node) {
      if( node.$ === 'div' ) return {
        replace_by_comment: 'replaced div: ' + node._,
      };
    });
    
    '<div>lorem ipsum...</div><span>foobar</span>'
    
    // resulting DOM:
    // <!--replaced div: lorem ipsum...--><span>foobar</span>
    
    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]:
    // <div><button data-click="log"></button></div>
    
  • APP.component(tag_name String, options Object or initNode Function)

    • options Object
      {
        'template': <TSlist>,
        `controller`: initNode `Function`,
        'data': <Object>, // Data to be rendered
      }
      

    Component example

    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.directive(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

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: <value of attribute>

  if( matchMedia('(max-width: 768px)').matches ) return {
    replace_by_comment: 'if-mobile: ' + this.attr_value,
  };
});