~cadence/nodejs-html-template-tag

Fork: html-template-tag
Update metadata
5.0.0 Convert to JavaScript, no build step
Revert "Replace jest with vitest"

clone

read-only
https://git.sr.ht/~cadence/nodejs-html-template-tag
read/write
git@git.sr.ht:~cadence/nodejs-html-template-tag

You can also use your local clone with git send-email.

#html-template-tag

Forked from https://github.com/AntonioVdlC/html-template-tag

ES6 Tagged Template for compiling HTML template strings.

#Installation

This package is distributed via npm:

npm install @cloudrac3r/html-template-tag

#Usage

#String Interpolation

At its core, this module just performs simple ES6 string interpolation.

var html = require("html-template-tag");
// - or - import { html } from "html-template-tag";

var name = `Antonio`;
var string = html`Hello, ${name}!`;
// "Hello, Antonio!"

Nevertheless, it escapes HTML special characters without refraining its use in loops!

var html = require("html-template-tag");
// - or - import { html } from "html-template-tag";

var names = ["Antonio", "Megan", "/><script>alert('xss')</script>"];
var string = html`
	<ul>
		${names.map((name) => html`
			<li>Hello, ${name}!</li>
		`)}
	</ul>
`;
// "<ul><li>Hello, Antonio!</li><li>Hello, Megan!</li><li>Hello, /&gt;&lt;script&gt;alert(&#39;xss&#39;)&lt;/script&gt;!</li></ul>"

#Skip autoscaping

You can use double dollar signs in interpolation to mark the value as safe (which means that this variable will not be escaped).

var name = `<strong>Antonio</strong>`;
var string = html`Hello, $${name}!`;
// "Hello, <strong>Antonio</strong>!"

#HTML Template Pre-Compiling

This small module can also be used to pre-compile HTML templates:

var html = require("html-template-tag");
// - or - import { html } from "html-template-tag";

var data = {
	count: 2,
	names: ["Antonio", "Megan"]
};

var template = ({names}) => html`
	<ul>
		${names.map((name) => html`
			<li>Hello, ${name}!</li>
		`)}
	</ul>
`;

var string = template(data);
/* 
	"
	<ul>
		<li>Hello, Antonio!</li>
		<li>Hello, Megan!</li>
	</ul>
	"
*/

NB: The formating of the string literal is kept.

#License

MIT

#Thanks

The code for this module has been heavily inspired on Axel Rauschmayer's post on HTML templating with ES6 template strings and Stefan Bieschewski's comment.