Skip to content

Latest commit

 

History

History

lit_ntml

README.md

lit_ntml

Expressive HTML Templates

MIT License

Lightweight, expressive, and modern templating for SSR in deno, inspired by lit-html.

Table of contents

Usage

html()

import { html } from "https://cdn.jsdelivr.net/gh/motss/[email protected]/lit_ntml/mod.ts";

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 "https://cdn.jsdelivr.net/gh/motss/[email protected]/lit_ntml/mod.ts";

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

htmlFragment()

import { htmlFragment as html } from "https://cdn.jsdelivr.net/gh/motss/[email protected]/lit_ntml/mod.ts";

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 "https://cdn.jsdelivr.net/gh/motss/[email protected]/lit_ntml/mod.ts";

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

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.

License

MIT License © Rong Sen Ng