npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

lit-ntml

2.9.0 • Public • Published

lit-ntml

Inspired by lit-html but for Node.js.

Hello, World!

Follow me

Version Node version MIT License

Downloads Total downloads Packagephobia Bundlephobia

CircleCI Dependency Status codecov Coverage Status

codebeat badge Codacy Badge Code of Conduct

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

  • await all tasks including Functions, Promises, and whatnot.
  • Compatible for ES Modules (import { html } from 'lit-ntml') and CommonJS (const { html } = require('lit-ntml');).
  • Parses PromiseList or List by 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

Enable syntax highlighting when writing HTML with template literal

Visual Studio Code

  1. Install vscode-lit-html extension.
  2. If the extension does not provide that syntax highlighting and autocompletion, try writing your templates in .jsx file (or .tsx file if you're TypeScript user) . That should work.

Install

# Install via NPM 
$ npm install lit-ntml

Usage

TypeScript or native ES Modules

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> */

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> */

Node.js

html()

const { html } = require('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> */

htmlFragment()

const { htmlFragment } = require('lit-ntml');
 
const html = htmlFragment;
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> */

SSR with Express (Node.js)

Edit SSR with Express and LitNtml

Browser

ES Modules

<!doctype html>
<html>
  <head>
    <script type="module">
      import { html } from 'https://unpkg.com/lit-ntml@latest/dist/lit-ntml.min.js';
 
      // --snip
    </script> 
  </head>
</html>

UMD

<!doctype html>
<html>
  <head>
    <script src="https://unpkg.com/lit-ntml@latest/dist/lit-ntml.umd.min.js"></script> 
    <script>
      var { html } = window.LitNtml;
 
      // --snip
    </script> 
  </head>
</html>

deno

👉 Check out the deno module at deno_mod/lit_ntml.

API Reference

html()

  • returns: <Promise<string>> Promise which resolves with rendered HTML document string.

htmlFragment()

  • returns: <Promise<string>> Promise which resolves with rendered HTML document fragment string.

License

MIT License © Rong Sen Ng

install

npm i lit-ntml

Downloadsweekly downloads

112

version

2.9.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability