@frank-mayer/yahp v0.4.1

yahp

Yet another HTML preprocessor

Variables

All variables are immutable within its creating tag but are available after the scope was closed.

Variables can only be overwritten outside the crating tag.

<define var="foo" value="'foo bar'">
  <!-- variable foo is available here with the value 'foo bar' -->
  <!-- variable foo can NOT be overwritten -->
</define>

<!-- variable foo is still available here with the value 'foo bar'  -->
<!-- variable foo CAN be overwritten here -->

Features

Expression

Use double curly braces to write JavaScript expressions.

If an expression equals to undefined, it will not be rendered.

<span
  style="color:{{'#'+Math.floor(Math.random()*0xffffff).toString(16).padStart(6,'0')}}"
>
  Random Color
</span>

<span style="color:#c8c760">Random Color</span>

For

The <for> Tag is a JavaScript for of loop.

<ul>
  <for var="item" of="[1,2,3]">
    <li>{{item}}</li>
  </for>
</ul>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

Define

The <define> Tag defines a variable.

<define var="arr" value="[1,2,3]">
  <ul>
    <for var="item" of="{{arr}}">
      <li>{{item}}</li>
    </for>
  </ul>
</define>

If

Use the if Tag to check if a condition is truthy or falsy.

<define var="b" value="{{Boolean(Math.round(Math.random()))}}">
  <if condition="{{b}}">
    <div>true</div>
  </if>
  <if not condition="{{b}}">
    <div>false</div>
  </if>
</define>

Fetch

The <fetch> Tag allows fetching resources across the network.

If you want the fetch response to be interpreted as JSON, use the json switch attribute.

<fetch json var="dog" url="https://dog.ceo/api/breeds/image/random">
  <img src="{{dog.message}}" />
</fetch>