The ltl template language (pronounced "little") uses a clean Jade-like syntax to generate HTML at doT-like speeds.
If you love tight code and fast rendering, you're right at home.
Install
$ npm install ltl
Use
var ltl = require('ltl');
var template = ltl.compile('#hi Hello #{name}!');
var result = template({name: 'World'});
// result: '<div id="hi">Hello World!</div>'
code is a string of ltl code.options is an object with any of the following properties:name will cause the template to cache at ltl.templates[name]numberOfSpaces is the default number of spaces to convert a tab
to for mixed tab/space leniency. (Default: 4)name is the name of the variable that ltl concatenates to inside
template functions. (Default: o)name is the name of the argument that passes the data context
into a template. (Default: c)name is the name of the argument that an ltl template receives
from a template that calls it as an abstract template.
(Default: p)Tag nesting is done with whitespace. You can use tabs or spaces, and ltl can detect the number of spaces you're using.
html
head
title Hello World!
body
div Here is some content.
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<div>Here is some content.</div>
</body>
</html>
Note: <!DOCTYPE html> is automagically inserted before an <html> tag.
Nesting can also be done with one-liners using >.
div>span Boo!
<div><span>Boo!</span></div>
HTML id and class attributes are done with # and .
div#myId.myClass.myOtherClass Hello
<div id="myId" class="myClass myOtherClass">Hello</div>
When there is no tag name, div is assumed
.hi Hello
<div class="hi">Hello</div>
Attributes are contained in parentheses, and treated like they would be inside an HTML tag.
(style="display:none" data-something="peek-a-boo") Hide me
<div style="display:none;" data-something="peek-a-boo">Hide me</div>
Note: Unlike Jade, ltl does not use commas between attributes.
If you want to insert a line of text without wrapping it in a tag, just start the line with a minus.
h1
img(src="/logo.png")
- Hello!
<h1><img src="/logo.png">Hello!</h1>
You can output blocks of content using :.
#blah:
Bob Loblaw's Law Blog asks, "Why should YOU go
to jail for a crime someone else noticed?"
<div id="blah">
Bob Loblaw's Law Blog asks, "Why should YOU go
to jail for a crime someone else noticed?"
</div>
Blocks can be passed through filters, such as markdown.
:markdown
# ltl
It's a recursive acronym for "ltl template language".
<h1>ltl</h1><p>It's a recursive acronym for "ltl template language".</p>
Line comments and block comments are added by using // as a tag (at
the beginning of a line). Both are ignored.
h1 Comments
// No one will see this.
p Hello from http://lighter.io/ltl
//
This won't be shown.
Neither will this.
<h1>Comments</h1><p>Hello from http://lighter.io/ltl</p>
You can output the value of a context property with #{..}.
var code = '. Hello #{name}!';
var template = ltl.compile(code)
template({name: 'Sam'});
<div>Hello Sam!</div>
If you'd like your content to skip HTML encoding (because
you want your expression to output HTML tags rather than
text, use ={..}.
Context: {unsafe: "<script>alert('Gotcha!')</script>"}
. ={unsafe}
<div><script>alert('Gotcha!')</script></div>
Use for..in to iterate over an array inside the context.
{list: ['IPA', 'Porter', 'Stout']}ul
for item in list
li #{item}
<ul><li>IPA</li><li>Porter</li><li>Stout</li></ul>
Use for..of to iterate over an object's keys.
ul
for field, value of data
li #{field}: #{value}
<ul><li>IPA</li><li>Porter</li><li>Stout</li></ul>
Use if, else or else if to render conditionally.
The control statement's inline content gets evaluated
as JavaScript.
if username == 'root'
. Do as you please.
else if username
. Do as you can.
else
. Don't.
You can use builtin JavaScript objects and whatnot.
if Math.random() > 0.5
p This has a 50/50 chance of showing.
A template can call another template with call. To accomplish
this, you must compile your templates with options.name, and
they will be stored in ltl.cache. The template that's being
called can access the data context.
var temp = ltl.compile('p\n call bold', {name: 'temp'});
var bold = ltl.compile('b #{text}', {name: 'bold'});
ltl.cache.temp({text: 'Hi!'});
<p><b>Hi!</b></p>
With set and get, a template can get content from a
template that calls it. The calling template declares what
it will pass using set blocks, and the called template
reads data with get blocks.
var layout = ltl.compile('#nav\n get nav\n#content\n get content', {name: 'layout'});
var page = ltl.compile('call layout\n set nav\n . Nav\n set content\n . Content', {name: 'page'});
ltl.cache.page();
<div id="nav">Nav</div><div id="content">Content</div>
Clone the repository.
$ git clone https://github.com/zerious/ltl.git
Install dependencies.
$ npm install
Run all tests.
$ npm test
Run tests an rerun them after changes are made.
$ npm run retest
Run individual test files.
$ mocha test/api
$ mocha test/blocks
$ mocha test/control
$ mocha test/interpolation
...
Test coverage (100% required).
$ npm run cover
View coverage report in a browser (uses Mac OS-friendly open).
$ npm run report
FAQs
Lean Template Language for JavaScript and HTML
The npm package ltl receives a total of 9 weekly downloads. As such, ltl popularity was classified as not popular.
We found that ltl demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.
Security News
PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.
Research
Security News
Malicious npm package postcss-optimizer delivers BeaverTail malware, targeting developer systems; similarities to past campaigns suggest a North Korean connection.