Ltl
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'll be right at home with Ltl.
Add ltl to your project:
npm install --save ltl
Compile and render templates:
var ltl = require("ltl");
var template = ltl.compile("#hi Hello ${who}!");
var result = template({who: "World"});
<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.Supported options:
tabWidth is the number of spaces that tabs are converted to before compilation. (Default: 4)Targets are key-value pairs of transpiler names and target language names.
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 as plain text, 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 also 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>
If a filter is unrecognized, Ltl will attempt to load it in the following ways:
window['FILTER_NAME']require('FILTER_NAME')A filter must have a function named compile or parse which accepts a state
and returns a string, or it can be such a function itself.
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 state 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>
To encode for a URL rather than HTML, use &{}.
State: {query: "good brewpubs"}
a(href="?q=&{query}")
<a href="?q=good%20brewpubs">good brewpubs</a>
If you'd like your content to skip encoding (because
you want your expression to output raw HTML tags rather
than safely escaped text), use ={..}.
State: {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}
You can assign a value to a variable in the template state using =.
who = 'World'
. Hello ${who}!
<p>Hello World!</p>
Use for..in to iterate over an array inside the state.
State: {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 object keys.
State: {pairings: {Coffee: 'coding', Beer: 'bloviating'}}
for drink, activity of pairings
.
b \\${field}
space
: is for
space
i \\${value}.
<div><b>Coffee</b> is for <i>coding</i>.</div><div><b>Beer</b> is for <i>bloviating</i>.</div>
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 state.
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>
A template can pass a portion of its state to another template by naming the sub-state property after the template name in a call block:
parent/view.ltl:
p Expect a state like... {child: {name: "only child"}}
call child/view child
child/view.ltl
p This child is called ${name}.
A template can have properties applied to it by using a plus symbol.
extra.ltl:
html
head>title Template Properties
body:md
Properties can be used to provide hidden values to systems that compile
Ltl templates, such as [Chug](http://lighter.io/chug).
+extra
When compiled, the template will become a JavaScript function as usual.
In addition, it will have a property called "extra", whose value will be
a string containing the contents of this block.
+extra
If the plus symbol is used more than once for the same property, the value
of that property will be a concatenation of multiple blocks.
+also:md
# Also supports filters
Properties can have filters. This block will be evaluated as markdown,
and the resulting value will be set as the "also" property of the template.
// Note:
There are several reserved
The js and css properties of a template can be set using the plus symbol, just like other properties. Unlike including JS or CSS in a script or style tag block, these properties would need to be added to a page externally in order to affect the HTML.
js-and-css.ltl:
p This will be included in the template's rendered HTML.
+js
console.log("This will not be included in the template's js property.");
+css
p {color: black}
In addition, several languages that compile to JS/CSS are supported. Their compilers can be invoked using their corresponding file extensions. For JS, Ltl supports coffee, litcoffee, iced, es6, and ts. For CSS, it supports less, scss and styl.
coffee-and-less.ltl:
p:md
This template will compile to a function which returns this paragraph, and
the function will have **js** and **css** properties.
+coffee
console.log "Hello from CoffeeScript!"
+styl
@textColor: #000;
p {
color: @textColor;
}
JavaScript and CSS can also be included inline in a template using directives that appear as tags. Just as with JS and CSS properties, these support compilers such as CoffeeScript and LESS.
inline-js-and-css.ltl
less
a {color: #000;}
coffee
state.linkText = 'hello'
a ${linkText}
The state variable in a template is called state, so the above would set the
linkText value in the state object, and then it would render the following
HTML if called:
<style>a {color: #000;}</style><a>hello</a>
We would like to thank all of the amazing people who use, support, promote, enhance, document, patch, and submit comments & issues. Ltl couldn't exist without you.
Additionally, huge thanks go to Goin’ for employing and supporting Ltl project maintainers, and for being an epically awesome place to work (and play).
Copyright (c) 2014 Sam Eubank
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
We welcome contributions from the community and are happy to have them. Please follow this guide when logging issues or making code changes.
All issues should be created using the new issue form. Please describe the issue including steps to reproduce. Also, make sure to indicate the version that has the issue.
Code changes are welcome and encouraged! Please follow our process:
npm test to run tests quickly, without testing coverage.npm run cover to test coverage and generate a report.npm run report to open the coverage report you generated.As contributors and maintainers of Ltl, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
If any participant in this project has issues or takes exception with a contribution, they are obligated to provide constructive feedback and never resort to personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, edits, issues, and other contributions that are not aligned with this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team.
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
We promise to extend courtesy and respect to everyone involved in this project regardless of gender, gender identity, sexual orientation, ability or disability, ethnicity, religion, age, location, native language, or level of experience.
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.