Skip to content

Latest commit

 

History

History
199 lines (166 loc) · 3.52 KB

readme.md

File metadata and controls

199 lines (166 loc) · 3.52 KB
Raw

thtml

HTML Templating Engine for TCL and twebserver.

Note that this project is under active development.

Prerequisites

  • tcl (version 9.0) - TCL

  • tdom (version 0.9.4) - Tcl XML parser

  • If you are planning to use import_node_module and js tags, you will need:

    • npm - Node.js package manager
    • rollup bundler:
      sudo npm -g i rollup

Installation

git clone https://github.com/jerily/thtml.git
cd thtml
mkdir build
cd build
cmake ..
# or if TCL is not in the default path (/usr/local/lib):
# change "TCL_LIBRARY_DIR" and "TCL_INCLUDE_DIR" to the correct paths
# cmake .. -DTCL_LIBRARY_DIR=/usr/local/lib -DTCL_INCLUDE_DIR=/usr/local/include
make
make install

Example

See sample-blog for a complete example.

Supported Features

foreach

Template:

set template {
    <tpl foreach="item" in="${items}">
        <div class="item">
            <span class="name">${item.name}</span>
            <span class="value">${item.value}</span>
        </div>
    </tpl>
}

TCL:

::thtml::render $template {
    items {{
        name "item1"
        value "value1"
    }
    {
        name "item2"
        value "value2"
    }}
}

Expected output:

<div class="item">
    <span class="name">item1</span>
    <span class="value">value1</span>
</div>
<div class="item">
    <span class="name">item2</span>
    <span class="value">value2</span>
</div>

if

Template:

set template {
    <tpl if='$value eq "one"'>
        <div class="value1">Value is 1</div>
    </tpl>
    <tpl if='$value eq "two"'>
        <div class="value2">Value is 2</div>
    </tpl>
    <tpl if='$value eq "three"'>
        <div class="value3">Value is 3</div>
    </tpl>
}

TCL:

::thtml::render $template {value one}

Expected output:

<div class="value1">Value is 1</div>

include

Template:

set template {
    <tpl include="header.thtml" title="You are awesome!" />
    <div class="content">Content</div>
    <tpl include="footer.thtml" />
}

TCL:

::thtml::render $template {}

Expected output:

    <h1>You are awesome!</h1>
    <div class="content">Content</div>
    <strong>Footer</strong>

Where header.thtml is:

<h1>$title</h1>

And footer.thtml is:

<strong>Footer</strong>

val

Template:

set template {
    <html>
        <tpl val="x">return 1</tpl>
        <tpl val="y">return 2</tpl>
        <tpl val="z">return [expr { $x + $y }]</tpl>
        <head>
            <title>$title</title>
        </head>
        <body>
            <h1>$title</h1>
            <p>$z</p>
        </body>
    </html>
}

TCL:

::thtml::render $template {title "Hello World!"}

Working with JavaScript

Plain old script tags

Template:

set template {
    <script>
        console.log("Hello World!");
    </script>
}

Node modules

Template:

set template {
  <import_node_module name="lodash" src="lodash" />
  <import_node_module src="purecss/build/pure-min.css" />

  <html>
    <head>
      <bundle_css url_prefix="/bundle/" />
    </head>
    <body>
      <div id="version"></div>
      <js>
        var el = document.getElementById("version");
        el.innerText = "lodash version: " + lodash.VERSION;
      </js>
      <bundle_js url_prefix="/bundle/" />
    </body>
  </html>
}