sumo-templates

0.1.0 • Public • Published

Sumo

Build Status

An HTML-ish JavaScript templateing system. This is a work in progress. See the todo list at the bottom to see what still needs to be done.

<!-- List users by name -->
<h1>User List</h1>
<p>Total users: <count collection="people" /></p>

<ul>
  <iterate 
    collection="people as person, index" 
    sort="name asc">

    <li id="person-{{person.id}}">
      <h2>{{(index + 1)}}. {{person.name}}</h2>


      <if condition="person.age || person.eyeColor">
        <h3>Personal Data:</h3>
        <ul>
          <if condition="person.age">
            <li>{{person.age}}</li>
          </if>
          <if condition="person.eyeColor">
            <li>{{person.eyeColor}}</li>
          </if>
        </ul>
      </if>

      <if condition="person.friends.length">
        <ul>
          <iterate 
            collection="person.friends as friend" 
            sort="name asc">

            <li id="{{friend.id}}">{{friend.name}}</li>

          </iterate>
        </ul>
        <else>
          {{person.name}} has no friends :`(
        </else>
      </if>

    </li>

  </iterate>
</ul>

Usage

var myData = {
  someArr: [1, 2, 3]
};

var myTemplate = '<count collection="someArr" />';

var myOutput = sumo.compile(myTemplate, myData);
// myOutput is now '3'

Available Elements

  • <count collection="collectionName" />: Counts the number of elements in an array or object
  • <iterate collection="collectionName[ as value[, key]"></iterate>: Iterates over an array or object
    • Access to the current item can be gained through the name {{this}} or the name provided
    • Access to the current index or key can be gained through the name {{key}} or the name provided
    • Sorting can be achieved through the sort attribute like so:
      • sort="asc|desc": sort arrays or single level objects ascending or descending by value
      • sort="property asc|desc": sort an array of objects or an object of objects by property name
      • sort="property.key asc|desc": sort an array of objects or an object of objects by nested property name
  • <if condition="conditionalExpression"></if>: Displays content only if the provided condition evaluates to true
    • Converting values to booleans is supported: <if condition="myArr.length">This is true</if>
    • Comparison and logical operators are supported: ==, ===, !=, !==, !, ||, &&, >, <, >=, <=
    • Compound expressions are supported: <if condition="valTrue && !(valFalse && valEmptyStr && val0)">This is true</if>
  • <else></else>: When nested in an <if></if> element, the content within <else></else> will be displayed when the condition is not satisfied.
  • <elseif condition="conditionalExpression"></elseif>: When nested in an <if></if> element, the content within <elseif></elseif> will be displayed when the if condition is not satisfied and the elseif condition is.

Todo

  • [x] Add sort attribute to <iterate></iterate>
  • [x] Add <else></else> element
  • [x] Add <elseif></elseif> element
  • [x] Add support for nesting elements
  • [ ] Add support for simple computation in if conditions, ie: <if condition="(index + 1) === myArr.length"></if>
  • [ ] Add support for simple computation in template strings, ie: {{(index + 1)}}
  • [ ] Add config setting for turning off error output
  • [ ] Add better documentation
  • [ ] Add a way to determine you're on the first or last item in a collection while iterating
  • [ ] Find a way to clean up / improve efficiency of nested element processing

Readme

Keywords

Package Sidebar

Install

npm i sumo-templates

Weekly Downloads

0

Version

0.1.0

License

MIT

Last publish

Collaborators

  • mgmeyers