lit-nunjucks

Nunjucks compiler to lit-html

Usage no npm install needed!

<script type="module">
  import litNunjucks from 'https://cdn.skypack.dev/lit-nunjucks';
</script>

README

lit-nunjucks

Compile https://mozilla.github.io/nunjucks/ templates into standar lit-html.

Quickstart

Install the library

npm install lit-nunjucks
const { compile } = require('lit-nunjucks')

Givend the input

{% if authorized %} 
Hello {{customer.name}}
{% endif %}

It will generate

function template({
  authorized
}) {
  return authorized && html`Hello ${customer.name}`;
}

Why

Templates are backend tecnologies, Usually sever renders a template once with a given values. If use a template into a full front end app, everytime our data state change we have to re apply the template. This behaviout is costly and there are such a good alternatives there in order to performatly update the DOM with a new state (React, Vue, lit-html).

  • Sometimes you dont want expose all js power to a template developer
  • Templates are simpler to learn than learn advance es6 syntax
  • You might not want to access globals in your templates such as window

This project attempts to bring best of both worlds. Use jinja style templates into a front end app performatly.

Do I need this?

Probably you don't.