Build your own traditional template engine using Transphporm

Building a traditional template engine using Transphporm

Transphporm can be used to build your own mini template system where you do place your logic in the template.

Although this is discouraged, this example shows how flexible Transphporm can be.

Including data

The most basic feature a template system needs is a method of replacing content on the page with data. E.g. a marker for displaying the name of the logged in user

With transphporm this would normally be handled by targetting the element that needs replacing. For example:

<header>
   <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="about/">About</a></li>
            <li><a href="contact/">Contact</a></li>
        <ul>

        <p>Welcome back <a class="accountname" href="profile/">Account Name</a>, 
           you have <a class="messages" href="/messages">num</a> new messages</p>
   </nav>
</header>

layout.html

Transphporm would then replace the account name using

.accountname {
   content: data(accountname);
}

.messages {
    content: data(messagecount);
}

layout.tss

And it would be compiled using the PHP code

$template = new \Transphporm\Builder('layout.xml', 'layout.tss');
$template->output(['accountname' = > $_SESSION['login'], 'messagecount' => 5]);

This could be expressed using a traditional template engine using code similar to:

<header>
   <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="about/">About</a></li>
            <li><a href="contact/">Contact</a></li>
        <ul>

        <p>Welcome back <a class="accountname" href="profile/">{{accountname}}</a>, 
           you have <a class="messages" href="/messages">{{messagecount}}</a> new messages</p>
   </nav>
</header>

The template system would then preg_replace {{accountname}} and {{messagecount}}. Although Transphporm cannot do a textual find/replace it achieve the same thing using elements. Using Transphporm you could create elements which will be replaced.

We'll create the element var and replace it later on:

<header>
   <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="about/">About</a></li>
            <li><a href="contact/">Contact</a></li>
        <ul>

        <p>Welcome back <a class="accountname" href="profile/"><var data="accountname" /></a>, 
           you have <a class="messages" href="/messages"><var data="messagecount" /></a> new messages</p>
   </nav>
</header>

Then, a generic TSS stylesheet can be applied to every page and used to replace and <var> element:

var {
  content: data(attr(data));
  content-mode: replace;
}

Breaking this down:

attr(data) reads the contents of the data attribute for the var element (in our example, this will either resolve to accountname or messagecount).

data(attr(data)) takes the value for the data attribute and passes it to the data function, this will be equivalent to data(accountname) or data(messagecount) which will then be set to the content of the element

content-mode: replace tells Transphporm to replace the matched <var> element with the data from the content attribute, rather than the default behaviour setting the element's content.