The Hatml Template Language

hatml.md

The Hatml Template Language

HTML Attribute Template Markup Language

The hatml templating language uses basic HTML and special attributes for a simple yet powerful templating language.

Basic Templating

In general you write normal HTML. Data is included in the template by including it between {...}. Other special functionality is added via special template attributes.

Template Attributes

if

Only display an element if the condition is true.

<p if="empty(items)">
There are no items!
</p>

if (empty($props['items'])) {
    echo "<p>There are no items!</p>";
}

else

Add an else element in conjunction with an if element.

<div if="signedIn">
    Welcome!
</div>
<div else>
    Sign in to participate.
</div>

if ($props['signedIn']) {
    echo '<div>Welcome!</div>';
} else {
    echo '<div>Sign in to participate.</div>';
}

each

Loop over elements.

<ul each="people">
    <li>Hi {first} {last}!</li>
</ul>

echo '<ul>';
foreach ($props['people'] as $props1) {
    echo 'Hi ',
        htmlspecialchars($props1['first']),
        ' ',
        htmlspecialchars($props1['last']);
}
echo '</ul>';

as

Name the iterator element so that you can still reference the parent.

<ul each="comments" as="comment">
    <li>{name}: {comment.body}</li>
</ul>

echo '<ul>';
foreach ($conext['comments'] as $i1 => $props1) {
    echo '<li>',
        htmlspecialchars($props['name']),
        ': ',
        htmlspecialchars($props1['body']),
        '</li>';
}
echo '</ul>';

empty

Specify a template when there are no items.

<ul each="messages">
    <li>{body}</li>
    <li empty>There are no messages.</li>
</ul>

echo '<ul>';
if (empty($props['messages'])) {
    echo '<li>There are no messages.</li>';
} else {
    foreach ($props['message'] as $i1 => $props1) {
        echo '<li>',
            htmlspecialchars($props1['body']),
            '</li>';
    }
}
echo '</ul>';

with

Pass an item into a template.

<div with="user">
    Hello {name}.
</div>

$props1 = $props['user'];
echo '<div>',
    'Hello ',
    htmlspecialchars($props1['name']),
    '</div>';

literal

Don't parse templates within a literal.

<code literal>Hello <b literal>{username}</b></code>

echo '<code>Hello <b literal>{username}</b></code>';

component

Define a component that can be used later in the template.

<time component="long-date" datetime="{dateFormat(this, 'c')}">{dateFormat(this, 'r')}</time>

<long-date props="dateInserted" />

$this->registerComponent('LongDate', function ($props) {
    echo '<time datetime="',
        htmlspecialchars(dateFormat($props, 'c')),
        '">',
        dateFormat($props, 'r'),
        '</time>';
});

$this->renderComponent('LongDate', $props['dateInserted']);

HTML Utilities

CSS class attributes

When you assign a css class with data you can pass it an array or an object.

Array class attributes

<p class="{['comment', 'is-default']}">Hello</p>

All elements of the array are rendered as separate classes.

<p class="comment is-default">Hello</p>

Object class attributes

<p class="{{comment: true, 'is-default': isDefault }}">Hello</p>

When passing an object as the class attribute the keys define the class names and the values define whether they should be included. In this way you can enable/disable CSS classes with logic from the template's data.

Note the double braces in the above example. The first brace tells us we are using variable interpolation and the second brace wraps the object in JSON notation.

Whitespace

Whitespace around block level elements is trimmed by default resulting in more compact output of your HTML.

HTML comments

Any HTML comments that you declare in the template will be added as PHP comments in the compiled template function. This is useful for debugging or for static template generation.

<!-- Do something. -->
<p>wut!?</p>

return function ($props) {
    // Do something.
    echo '<p>wut!?</p>';
};