pluss v0.1.1

Pluss

Superset of HTML.

Features:

• insert variables
• conditional logic
• for loops (map)
• isomorphic

Insert variables

Escaped:

{{ hello }}

Translates to:

${ esc(hello) }

Raw:

{{{ hello }}}

Translates to:

${ hello }

Conditional logic

<div if="hello">
  {{ hello }}
</div>

Translates to:

${function(){
  if (hello) {
    return `<div>${esc(hello)}</div>`
  }
  return ''
}()}

For loops

Array:

<ul>
  <li map="product of products">
    {{ product }}
  </li>
</ul>

Translates to:

<ul>
  ${products.map(function(product) {
    return `<li>${esc(product)}</li>`
  }).join('')}
</ul>

Array with index:

<ul>
  <li map="product, index of products">
    {{ product }} {{ index }}
  </li>
</ul>

Translates to:

<ul>
  ${products.map(function(product, index) {
    return `<li>${esc(product)} ${esc(index)}</li>`
  }).join('')}
</ul>

Array with index, contained:

<ul>
  <li map="product, index of products" class="n-{{ index }}">
    {{ product }} {{ index }}
  </li>
</ul>

Translates to:

<ul>
  ${products.map(function(product, index) {
    return `<li class="n-${esc(index)}">${esc(product)} ${esc(index)}</li>`
  }).join('')}
</ul>

Array with existing function:

<ul>
  <li map="product, index of products" with="{{ $.app.components.productList }}"></li>
</ul>

Translates to:

<ul>
  ${products.map(function(product, index) {
    return `<li>${esc(product)} ${esc(index)}</li>`
  }).join('')}
</ul>

MIT licensed.

Created by Eldøy Projects. Enjoy!