lit-ntml
Inspired by lit-html but for Node.js.
Lightweight and modern templating for SSR in Node.js, inspired by lit-html.
This module also gets featured in web-padawan/awesome-lit-html. Make sure to check the repo out for awesome things inspired by lit-html.
Table of contents
- Features
- Pre-requisite
- Enable syntax highlighting when writing HTML with template literal
- Install
- Usage
- API Reference
- deno
- License
Features
-
awaitall tasks including Functions, Promises, and whatnot. -
Compatible for ES Modules (
import { html } from 'lit-ntml') and CommonJS (const { html } = require('lit-ntml');). -
Parses
PromiseListorListby default, without explicit joining. - Support HTML syntax highlighting + autocompletion with vscode-lit-html in JavaScript's template string.
-
Support native ES Module via
.mjs.
Pre-requisite
- Node.js >= 14.17.3
- NPM >= 6.14.13 (NPM comes with Node.js so there is no need to install separately.)
- ES Modules
Enable syntax highlighting when writing HTML with template literal
Visual Studio Code
- Install vscode-lit-html extension.
- If the extension does not provide that syntax highlighting and autocompletion, try writing your templates in
.jsxfile (or.tsxfile if you're TypeScript user) . That should work.
Install
# Install via NPM
$ npm install lit-ntmlUsage
html()
import { html } from 'lit-ntml';
const peopleList = ['Cash Black', 'Vict Fisherman'];
const syncTask = () => `<h1>Hello, World!</h1>`;
const asyncLiteral = Promise.resolve('<h2>John Doe</h2>');
const asyncListTask = async () => `<ul>${peopleList.map(n => `<li>${n}</li>`)}</ul>`;
/** Assuming top-level await is enabled... */
await html`${syncTask}${asyncLiteral}${asyncListTask}`; /** <!DOCTYPE html><html><head></head><body><h1>Hello, World!</h1><h2>John Doe</h2><ul><li>Cash Black</li><li>Vict Fisherman</li></ul></body></html> */htmlSync()
import { htmlSync as html } from 'lit-ntml';
const peopleList = ['Cash Black', 'Vict Fisherman'];
const syncTask = () => `<h1>Hello, World!</h1>`;
html`${syncTask}${peopleList}`;
/** <!DOCTYPE html><html><head></head><body><h1>Hello, World!</h1>Cash BlackVictFisherman[object Promise]</body></html> */htmlFragment()
import { htmlFragment as html } from 'lit-ntml';
const syncTask = () => `<h1>Hello, World!</h1>`;
const externalStyleLiteral = `<style>body { margin: 0; padding: 0; box-sizing: border-box; }</style>`;
/** Assuming top-level await is enabled... */
await html`${externalStyleLiteral}${syncTask}`; /** <style>body { margin: 0; padding: 0; box-sizing: border-box; }</style><h1>Hello, World!</h1> */htmlFragmentSync()
import { htmlFragmentSync as html } from 'lit-ntml';
const peopleList = ['Cash Black', 'Vict Fisherman'];
const syncTask = () => `<h1>Hello, World!</h1>`;
const asyncTask = Promise.resolve(1);
html`${syncTask}${peopleList}${asyncTask}`;
/** <h1>Hello, World!</h1>Cash BlackVictFisherman[object Promise] */SSR with Express (Node.js)
Browser support
Only modern browsers with native ES Modules support requires no polyfills and transpilation needed.
<!doctype html>
<html>
<head>
<script type="module">
import { html } from 'https://cdn.skypack.dev/lit-ntml@latest';
// --snip
</script>
</head>
</html>API Reference
html()
htmlSync()
This method works the same as html() except that this is the synchronous version.
htmlFragment()
htmlFragmentSync()
This method works the same as htmlFragment() except that this is the synchronous version.
deno
License
MIT License © Rong Sen Ng
![dependabot-preview[bot]](https://avatars.githubusercontent.com/u/27856297?size=120)
![dependabot[bot]](https://avatars.githubusercontent.com/u/49699333?size=120)