The London Perl and Raku Workshop takes place on 26th Oct 2024. If your company depends on Perl, please consider sponsoring and/or attending.
 / 
Template-Semantic-0.10
River stage one • 3 direct dependents • 3 total dependents
/ Template::Semantic::Cookbook

NAME

Template::Semantic::Cookbook - Template::Semantic Recipes, tricks, hints

RECIPES

Zebra tables

Use XPath power.

print Template::Semantic->process(\*DATA, {
    'table tbody tr' => [
        { '//td[1]' => '101', '//td[2]' => '102' },
        { '//td[1]' => '201', '//td[2]' => '202' },
        { '//td[1]' => '301', '//td[2]' => '302' },
        { '//td[1]' => '401', '//td[2]' => '402' },
    ],
})->process({
    '//table/tbody/tr[position() mod 2 = 0]/@class' => 'even',
});

__DATA__
<table>
    <thead>
        <tr>
            <th>Foo</th>
            <th>Bar</th>
        </tr>
    </thead>
    <tbody>
        <tr class="">
            <td>sample</td>
            <td>sample</td>
        </tr>
    </tbody>
</table>

Output:

<table>
    <thead>
        <tr>
            <th>Foo</th>
            <th>Bar</th>
        </tr>
    </thead>
    <tbody>
        <tr class="">
            <td>101</td>
            <td>102</td>
        </tr>
        <tr class="even">
            <td>201</td>
            <td>202</td>
        </tr>
        <tr class="">
            <td>301</td>
            <td>302</td>
        </tr>
        <tr class="even">
            <td>401</td>
            <td>402</td>
        </tr>
    </tbody>
</table>

If you don't like class="", do this.

print Template::Semantic->process(\*DATA, {
    ...
)->process({
    '//table//tr[position() mod 2 = 0]/@class' => 'even',
    '//table//tr[position() mod 2 = 1]/@class' => undef,
});

For JavaScript vars

If you want to set the value for JavaScript...

print $ts->process(\*DATA, {
    'script[src="foo.js"]@src' => 'http://prod-server/foo.js',
    '//script[2]' => 'var = ' . JSON::to_json($var_to_js),
});
__DATA__
<html>
<script type="text/javascript" src="foo.js"></script>
<script type="text/javascript"></script>
...
</html>

Create attribute

The following example is NOT output as <div class="foo">foo</div> but instead as <div>foo</div> because LibXML cannot find class attribute in <div>.

print Template::Semantic->process(\'<div>foo</div>', {
    'div@class' => 'foo',
});

You can add the attribute with the on-demand.

print Template::Semantic->process(\'<div>foo</div>', {
    'div' => sub { shift->setAttribute(class => 'foo'); \$_ },
});

But I think that you should prepare place holder.

print Template::Semantic->process(\'<div class="">foo</div>', {
    'div@class' => 'foo',
});

Dummy items

If template contains dummy items to check design, you may delete them first.

print Template::Semantic->process(\*DATA, {
    '.dummy' => undef, # remove dummys first
})->process({
    'ul li' => [
        { '.' => 'AAA' },
        { '.' => 'BBB' },
        { '.' => 'CCC' },
        { '.' => 'DDD' },
        { '.' => 'EEE' },
    ],
});

__DATA__
<ul>
    <li>sample</li>
    <li class="dummy">sample</li>
    <li class="dummy">sample</li>
    <li class="dummy">sample</li>
</ul>

Output:

<ul>
    <li>AAA</li>
    <li>BBB</li>
    <li>CCC</li>
    <li>DDD</li>
    <li>EEE</li>
</ul>

Indicator only for Temlate::Semantic

Idea 1 - Original data-id attribute like Template::TAL:

print Template::Semantic->process(\*DATA, {
    '//*[@data-id="foo"]' => 'foo',
    '//*[@data-id="bar"]' => 'bar',
})->process({
    '//@data-id' => undef,
});

__DATA__
<div>
    <span data-id="foo">xxx</span>
    <span data-id="bar">xxx</span>
</div>

Idea 2 - Original x-foobar class:

print Template::Semantic->process(\*DATA, {
    '.x-foo' => 'foo',
    '.x-bar' => 'bar',
})->process({
    '//span[contains(@class,"x-")]/@class' => sub {
        join " ", grep { !/^x-/ } split /\s+/;
    },
});

__DATA__
<div>
    <span class="x-foo">xxx</span>
    <span class="x-bar">xxx</span>
</div>

Some custom filter ideas...

Output format config in template:

print Template::Semantic->process(\*DATA, {
    '.date' => sub {
        my $date = localtime; # or DateTime->now
        $date->strftime( shift->getAttribute('data-format') );
    },
})->process({
    '//@data-format' => undef,
});

__DATA__
<div class="entry">
    <div class="date" data-format="%Y/%m/%d">2010/99/99</div>
</div>

Output:

<div class="entry">
    <div class="date">2010/02/08</div>
</div>

Email template?

You should use the module like Template-Toolkit ;) But if you want to use this module anyway,

my $res = $ts->process(\*DATA, {
    'name' => 'Foo & Co.',
});

my $subj = $res->dom->documentElement->findvalue('//*[@class="subject"]');
my $body = $res->dom->documentElement->findvalue('//*[@class="body"]');

__DATA__
<html>
Subject: <b class="subject">Dear <name>name</name></b>
<hr />

Body:
<pre class="body">Dear <name>name</name>,

bla bla
bla bla
</pre>
</html>

Include

It is easy to substitute another process().

my $ts = Template::Semantic->new;
print $ts->process('wrapper.html', {
    '#container' => $ts->process('include.html'),
});

Wrapper/Template inheritance

It is possible though is tricky.

my $ts = Template::Semantic->new;

print $ts->process('foo.html', {
    '/div' => sub {
        my $node = shift;

        # Get wrapper filename from attribute ...
        my $wrapper = $node->getAttribute('wrapper');

        # Process wrapper.html ...
        # embed this innerHTML to wrapper.html's <div id="content">
        my $res = $ts->process($wrapper, { '#content' => \$_ });

        # Insert result(as XML::LibXML::Element) after me.
        $node->addSibling($res->dom->documentElement);

        # And delete me.
        return undef;
    }
})->process({
    'h1' => 'Hello world!',
});

foo.html

<div wrapper="wrapper.html">
    <h1>foo</h1>
    <p>bla bla bla</p>
</div>

wrapper.html

<html>
    <body>
        <div id="content">
        </div>
    </body>
</html>

Output:

<html>
    <body>
        <div id="content">
    <h1>Hello world!</h1>
    <p>bla bla bla</p>
        </div>
    </body>
</html>

Do you have another good usage?

Blog it ;)

AUTHOR

Naoki Tomita <tomita@cpan.org>