html-template-tag-stream
v3.0.0
Published
ES6 Tagged Template for compiling HTML template streams.
Downloads
37
Maintainers
Readme
html-template-tag-stream
ES6 Tagged Template for compiling HTML template streams.
Installation
This package is distributed via npm:
npm install html-template-tag
It can also be used in Deno.
Usage
String Interpolation
At its core, this module just performs simple ES6 string interpolation.
import html from "html-template-tag-stream"
var name = `Jon`
var string = ""
for await (const s of html`Hello, ${name}!`) {
string += s
}
// "Hello, Jon!"
Nevertheless, it escapes HTML special characters without refraining its use in loops!
import html from "html-template-tag-stream"
var names = ["Jon", "George", "/><script>alert('xss')</script>"];
var string = ""
var template = html`
<ul>
${names.map((name) => html`
<li>Hello, ${name}!</li>
`)}
</ul>
`
for await (const s of template) {
string += s
}
// "<ul><li>Hello, Jon!</li><li>Hello, George!</li><li>Hello, /><script>alert('xss')</script>!</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>Jon</strong>`;
var string = ""
for await (var s of html`Hello, $${name}!`) {
string += s
}
// "Hello, <strong>Antonio</strong>!"
HTML Template Pre-Compiling
This small module can also be used to pre-compile HTML templates:
import html from "html-template-tag-stream"
var data = {
count: 2,
names: ["Jon", "George"]
}
var template = ({names}) => html`
<ul>
${names.map((name) => html`
<li>Hello, ${name}!</li>
`)}
</ul>
`
var string = ""
for await (var s of template(data)) {
string += s
}
/*
"
<ul>
<li>Hello, Antonio!</li>
<li>Hello, Megan!</li>
</ul>
"
*/
NB: The formatting of the string literal is kept.
That's not all the things you can do with this. Here's a more complex example for a more realistic case beyond what the original library used. You can use this to stream HTML from a server or from a service worker.
const encoder = new TextEncoder()
function streamResponse(generator) {
let { body, headers } =
"body" in generator
? generator
: { body: generator, headers: {} }
const stream = new ReadableStream({
async start(controller : ReadableStreamDefaultController<any>) {
for await (let s of body) {
controller.enqueue(encoder.encode(s))
}
controller.close()
}
})
return new Response(
stream, {
headers: {
"content-type": "text/html; charset=utf-8",
...headers
}
})
}
See the tests for all the types you can pass in!
License
ISC
Thanks
Originally based off of https://github.com/AntonioVdlC/html-template-tag. Which was in turn inspired by:
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.