lit-ntml
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.0 • Public • Published

    lit-ntml

    Inspired by lit-html but for Node.js.


    Buy Me A Coffee tippin.me Follow me

    Version Node version MIT License

    Downloads Total downloads Packagephobia Bundlephobia

    ci Dependency Status codecov

    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

    • [x] await all tasks including Functions, Promises, and whatnot.
    • [x] Compatible for ES Modules (import { html } from 'lit-ntml') and CommonJS (const { html } = require('lit-ntml');).
    • [x] Parses PromiseList or List by default, without explicit joining.
    • [x] Support HTML syntax highlighting + autocompletion with vscode-lit-html in JavaScript's template string.
    • [x] 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

    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)

    Edit SSR with Express and LitNtml

    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()

    • returns: <Promise<string>> 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<string>> 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 © Rong Sen Ng

    Install

    npm i lit-ntml

    DownloadsWeekly Downloads

    2,318

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    26.6 kB

    Total Files

    23

    Last publish

    Collaborators

    • motss