HTML template literals view engine with compiler for plain Node.js modules
Documentation and examples are available at https://patrickpissurno.com.br/li-template
li-template (pronounced "lite and plate") works by transpiling .lit template files (HTML + ES6 template literals) into plain ES6 template literals and then compiling them as Node.js modules. By doing this, you can harness maximum performance, as the Node's V8 JIT compiler can fully optimize.
This library also leverages the power of template literals by supporting some other cool stuff:
- Template files are compiled into NodeJS modules and in-memory cached
- Partials and compiled partials
- Short-hand for exists statement
- Short-hand for non-exists or empty statement
- Short-hand for loops
- Every thing you can do with Javascript
- Ultra small size
- Blazing fast
This templating engine was inspired by Mustache and is intended to be used in a logic-less fashion.
It was made in a way so you could use as much logic as you would like to. All things from Javascript can be used inside your templates.
You don't have to learn anything at all. You can just start writing normal ES6 Javascript and do whatever you want. But to make thing even better, we've added a syntax-sugar on top of plain ES6 template literals, our so-called short-hands. They do the very same thing that you could do by writing plain javascript. But they're more compact and concise. There are just three:
Short-hand
$(this.something?){<b>${this.something}</b>}
Transpiles into
${this.something ? `<b>${this.something}</b>` : ''}
Short-hand
$(!this.something?){<b>Empty</b>}
Transpiles into
${this.something == null || this.something.length === 0 ? `<b>Empty</b>` : ''}
Short-hand
$(this.names:name){<b>I'm ${name}</b>}
Transpiles into
${this.names.map(x => `<b>I'm ${x.name}</b>`).join('')}
Inside ${} you can use whatever from Javascript you would like to. Functions, methods, properties, process.env... Whatever. Just keep in mind that whatever you do write in there, would have to work with plain ${} template literals in Node.js module context.
This one is just like plain ES6 template literals.
${this.something}
It will be replaced at render time with this.something's value.
li-template by default doesn't escape anything. So you are 100% vulnerable to XSS attacks or something. This is intended by design, as we want to achieve maximum performance. But this doesn't mean that we're going to leave you on your own. We offer a method that is accessible from within ALL .lit template files that will escape anything. Just call ${safe(this.somethingDangerous)} and you'll be fine. It's easy!
Sometimes li-template may conflict with third-party libraries like inline jQuery. No problem! Just use the backslash before the dollar sign and li-template is going to ignore that tag.
Like this: \$('.my-jquery-selector')
There is a demo where you can play around and learn by yourself. Just clone this repo and you'll find it inside the demo folder. Run npm install && node demo.jsand open your browser at localhost:3000 to play around a little bit. Or see a running example here
MIT License
Copyright (c) 2018-2019 Patrick Pissurno
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.