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]space causes HTML to be indented, using space as indentation.name is the name of a compiler option.value is the default value you'd like to set it to.The following compiler options are available:
outputVar is the name of the variable that Ltl concatenates to. (Default: "o")contextVar is the name of the argument that passes context into a template. (Default: "c")partsVar is the name of the argument that a Ltl template receives from callers. (Default: "p")tabWidth is the number of spaces that tabs are converted to before compilation. (Default: 4)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>
<!DOCTYPE html> is automagically inserted before an <html> tag. If you would like to specify a custom doctype, you can use the shorthand doctype or ! syntax.
!(svg)
<!DOCTYPE svg>
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>
Ltl comments are added by using // as a tag, and they do not output any
HTML. The // tag can be used on one line or as a block.
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>
HTML comments are add by using - as a tag.
- Begin page
p Hello
- End page
-
p Delete me
<!--Begin page--><p>Hello</p><!--End page--><!--<p>Delete me</p>-->
You can output the value of a context property with ${..},
and special HTML characters will be escaped for you to
prevent silly little XSS attacks.
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 raw HTML tags rather
than safely escaped text), use ={..}.
Context: {unsafe: "<script>alert('Gotcha!')</script>"}
. ={unsafe}
<div><script>alert('Gotcha!')</script></div>
If you want to show ${..} or ={..} blocks in your output,
you can escape with a backslash.
code \${escaped} or \={raw}
<code>${escaped} or ={raw}
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
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.