Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/motss/lit-ntml

Inspired by lit-html but for Node.js
https://github.com/motss/lit-ntml

html html-fragment lit-html lit-ntml ntml parse-html parse5 tagged-template-literals templating typescript

Last synced: 29 days ago
JSON representation

Inspired by lit-html but for Node.js

Host: GitHub
URL: https://github.com/motss/lit-ntml
Owner: motss
License: mit
Created: 2017-11-03T14:12:45.000Z (about 7 years ago)
Default Branch: main
Last Pushed: 2023-06-06T02:36:58.000Z (over 1 year ago)
Last Synced: 2024-11-07T08:26:02.218Z (about 1 month ago)
Topics: html, html-fragment, lit-html, lit-ntml, ntml, parse-html, parse5, tagged-template-literals, templating, typescript
Language: TypeScript
Homepage: https://npm.im/lit-ntml
Size: 1.37 MB
Stars: 83
Watchers: 6
Forks: 9
Open Issues: 4
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: code-of-conduct.md
- Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

awesome-lit - lit-ntml - Lightweight and modern templating for SSR in Node.js, inspired by lit-html. (Similar libraries / Other Tools)

README

        


  lit-ntml


  
Inspired by lit-html but for Node.js.





[![Buy me a coffee][buy-me-a-coffee-badge]][buy-me-a-coffee-url]

[![Follow me][follow-me-badge]][follow-me-url]

[![npm-latest][npm-latest-badge]][npm-latest-url]

[![MIT License][mit-license-badge]][mit-license-url]

[![Downloads][downloads-badge]][downloads-url]

[![Total downloads][total-downloads-badge]][downloads-url]

[![Dependencies][dependencies-badge]][dependencies-url]

[![ci][ga-ci-badge]][ga-ci-url]

[![publish][ga-publish-badge]][ga-publish-url]

[![codecov][codecov-badge]][codecov-url]

[![Code of Conduct][coc-badge]][coc-url]

> Lightweight and modern templating for SSR in [Node.js][nodejs-url], inspired by [lit-html][lit-html-url].

This module also gets featured in [web-padawan/awesome-lit-html][web-padawan-awesome-lit-html-url]. Make sure to check the repo out for awesome things inspired by [lit-html][lit-html-url]. 👍💯

## Table of contents 

- [Features](#features)

- [Pre-requisite](#pre-requisite)

- [Enable syntax highlighting when writing HTML with template literal](#enable-syntax-highlighting-when-writing-html-with-template-literal)

  - [Visual Studio Code](#visual-studio-code)

- [Install](#install)

- [Usage](#usage)

  - [html()](#html)

  - [htmlSync()](#htmlsync)

  - [htmlFragment()](#htmlfragment)

  - [htmlFragmentSync()](#htmlfragmentsync)

  - [SSR with Express (Node.js)](#ssr-with-express-nodejs)

  - [Browser support](#browser-support)

- [API Reference](#api-reference)

  - [html()](#html-1)

  - [htmlSync()](#htmlsync-1)

  - [htmlFragment()](#htmlfragment-1)

  - [htmlFragmentSync()](#htmlfragmentsync-1)

- [deno](#deno)

- [License](#license)

## Features

| Support | Feature |

| --- | --- |

| ✅ | `await` all tasks including Functions, Promises, and whatnot. |

| ✅ | Parse `PromiseList` or `List` by default, without explicit joining. |

| ✅ | Support HTML syntax highlighting + autocompletion with [vscode-lit-html][vscode-lit-html-url] in JavaScript's template string. |

## Pre-requisite

- [Node.js][nodejs-url] >= 16.x

- [ES Modules]

## Enable syntax highlighting when writing HTML with template literal

### Visual Studio Code

1. Install [vscode-lit-html][vscode-lit-html-url] 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][typescript-url] user) . That should work.

## Install

```sh

# Install via NPM

$ npm install lit-ntml

```

## Usage

### html()

```ts

import { html } from 'lit-ntml';

const peopleList = ['Cash Black', 'Vict Fisherman'];

const syncTask = () => `
Hello, World!`;

const asyncLiteral = Promise.resolve('John Doe');

const asyncListTask = async () => `${peopleList.map(n => `${n}
`)}
`;

/** Assuming top-level await is enabled... */

await html`${syncTask}${asyncLiteral}${asyncListTask}`; /** 
Hello, World!
John Doe


Cash Black

Vict Fisherman

 */

```

### htmlSync()

```ts

import { htmlSync as html } from 'lit-ntml';

const peopleList = ['Cash Black', 'Vict Fisherman'];

const syncTask = () => `
Hello, World!
`;

html`${syncTask}${peopleList}`;

/** 
Hello, World!Cash BlackVictFisherman[object Promise] */

```

### htmlFragment()

```ts

import { htmlFragment as html } from 'lit-ntml';

const syncTask = () => `
Hello, World!`;

const externalStyleLiteral = `body { margin: 0; padding: 0; box-sizing: border-box; }`;

/** Assuming top-level await is enabled... */

await html`${externalStyleLiteral}${syncTask}`; /** body { margin: 0; padding: 0; box-sizing: border-box; }
Hello, World! */

```

### htmlFragmentSync()

```ts

import { htmlFragmentSync as html } from 'lit-ntml';

const peopleList = ['Cash Black', 'Vict Fisherman'];

const syncTask = () => `
Hello, World!`;

const asyncTask = Promise.resolve(1);

html`${syncTask}${peopleList}${asyncTask}`;

/** 
Hello, World!Cash BlackVictFisherman[object Promise] */

```

### SSR with Express (Node.js)

[![Edit SSR with Express and LitNtml](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ssr-with-express-and-litntml-4tbv9?fontsize=14)

### Browser support

Only modern browsers with native [ES Modules] support requires no polyfills and transpilation needed.

```html

  

    

      import { html } from 'https://esm.sh/lit-ntml@latest';

      // --snip

    

  

```

## API Reference

### html()

- returns: <[Promise][promise-mdn-url]<[string][string-mdn-url]>> Promise which resolves with rendered HTML document string.

### htmlSync()

This method works the same as [html()] except that this is the synchronous version.

### htmlFragment()

- returns: <[Promise][promise-mdn-url]<[string][string-mdn-url]>> Promise which resolves with rendered HTML document fragment string.

### htmlFragmentSync()

This method works the same as [htmlFragment()] except that this is the synchronous version.

## deno

👉 Check out the [deno] module at [deno_mod/lit_ntml].

## License

[MIT License](https://motss.mit-license.org) © Rong Sen Ng

[deno_mod/lit_ntml]: https://github.com/motss/deno_mod/tree/master/lit_ntml

[deno]: https://github.com/denoland/deno

[ES Modules]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

[html()]: #html-1

[htmlFragment()]: #htmlfragment-1

[lit-html-url]: https://github.com/PolymerLabs/lit-html

[nodejs-url]: https://nodejs.org

[typescript-url]: https://github.com/Microsoft/TypeScript

[vscode-lit-html-url]: https://github.com/mjbvz/vscode-lit-html

[web-padawan-awesome-lit-html-url]: https://github.com/web-padawan/awesome-lit-html

[boolean-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean

[html-style-element-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLStyleElement

[map-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

[number-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number

[object-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

[promise-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

[string-mdn-url]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

[buy-me-a-coffee-badge]: https://img.shields.io/badge/buy%20me%20a-coffee-ff813f?logo=buymeacoffee&style=flat-square

[follow-me-badge]: https://img.shields.io/badge/follow-@igarshmyb-1d9bf0?logo=twitter&style=flat-square

[npm-latest-badge]: https://img.shields.io/npm/v/lit-ntml?color=blue&logo=npm&style=flat-square

[mit-license-badge]: https://img.shields.io/npm/l/lit-ntml?color=blue&style=flat-square

[downloads-badge]: https://img.shields.io/npm/dm/lit-ntml?style=flat-square

[total-downloads-badge]: https://img.shields.io/npm/dt/lit-ntml?label=total%20downloads&style=flat-square

[dependencies-badge]: https://img.shields.io/librariesio/release/npm/lit-ntml/latest?style=flat-square

[ga-ci-badge]: https://img.shields.io/github/actions/workflow/status/motss/lit-ntml/ci.yml?branch=main&label=ci&logo=githubactions&logoColor=white&style=flat-square

[ga-publish-badge]: https://img.shields.io/github/actions/workflow/status/motss/lit-ntml/publish.yml?branch=main&label=publish&logo=githubactions&logoColor=white&style=flat-square

[codecov-badge]: https://img.shields.io/codecov/c/github/motss/lit-ntml/main?label=codecov&logo=codecov&style=flat-square

[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ed55bb?style=flat-square

[buy-me-a-coffee-url]: https://www.buymeacoffee.com/RLmMhgXFb

[follow-me-url]: https://twitter.com/igarshmyb?utm_source=github.com&utm_medium=referral&utm_content=motss/lit-ntml

[npm-latest-url]: https://www.npmjs.com/package/lit-ntml/v/latest

[mit-license-url]: https://github.com/motss/lit-ntml/blob/main/LICENSE

[downloads-url]: http://www.npmtrends.com/lit-ntml

[dependencies-url]: https://libraries.io/npm/lit-ntml

[ga-ci-url]: https://github.com/motss/lit-ntml/actions/workflows/ci.yml?query=branch%3Amain

[ga-publish-url]: https://github.com/motss/lit-ntml/actions/workflows/publish.yml?query=branch%3Amain

[codecov-url]: https://app.codecov.io/gh/motss/lit-ntml/tree/main

[coc-url]: https://github.com/motss/lit-ntml/blob/main/code-of-conduct.md