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

:page_facing_up: - ES6 Tagged Template for compiling HTML template strings
https://github.com/AntonioVdlC/html-template-tag

html-template string-interpolation template-string

Last synced: 3 months ago
JSON representation

:page_facing_up: - ES6 Tagged Template for compiling HTML template strings

• Host: GitHub
• URL: https://github.com/AntonioVdlC/html-template-tag
• Owner: AntonioVdlC
• License: mit
• Created: 2015-12-05T23:42:01.000Z (over 9 years ago)
• Default Branch: main
• Last Pushed: 2024-08-20T19:54:27.000Z (10 months ago)
• Last Synced: 2024-10-28T22:44:35.252Z (8 months ago)
• Topics: html-template, string-interpolation, template-string
• Language: TypeScript
• Homepage:
• Size: 743 KB
• Stars: 63
• Watchers: 3
• Forks: 8
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# html-template-tag

[![version](https://img.shields.io/npm/v/html-template-tag.svg)](http://npm.im/html-template-tag)

[![issues](https://img.shields.io/github/issues-raw/antoniovdlc/html-template-tag.svg)](https://github.com/AntonioVdlC/html-template-tag/issues)

[![downloads](https://img.shields.io/npm/dt/html-template-tag.svg)](http://npm.im/html-template-tag)

[![license](https://img.shields.io/npm/l/html-template-tag.svg)](http://opensource.org/licenses/MIT)

ES6 Tagged Template for compiling HTML template strings.

## Installation

This package is distributed via npm:

```

npm install html-template-tag

```

## Usage

### String Interpolation

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

```javascript

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!

```javascript

var html = require("html-template-tag");

// - or - import html from "html-template-tag";

var names = ["Antonio", "Megan", "/>alert('xss')"];

var string = html`

  


    ${names.map((name) => html` 
Hello, ${name}!
 `)}

  

`;

// "


Hello, Antonio!

Hello, Megan!

Hello, /><script>alert('xss')</script>!

"

```


### 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).

```javascript

var name = `Antonio`;

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

// "Hello, Antonio!"

```

### HTML Template Pre-Compiling

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

```javascript

var html = require("html-template-tag");

// - or - import html from "html-template-tag";

var data = {

  count: 2,

  names: ["Antonio", "Megan"],

};

var template = ({ names }) => html`

  


    ${names.map((name) => html` 
Hello, ${name}!
 `)}

  

`;


var string = template(data);

/* 

	"

	


		
Hello, Antonio!

		
Hello, Megan!

	

	"

*/

```


> NB: The formating of the string literal is kept.

### Interpolation inside URI attributes

To avoid XSS attacks, this package removes all interpolation instide URI attributes ([more info](https://cheatsheetseries.owasp.org/cheatsheets/XSS_Filter_Evasion_Cheat_Sheet.html)). This package also ensures that interpolations inside attributes are properly escaped.

## License

MIT

## Thanks

The code for this module has been heavily inspired on [Axel Rauschmayer's post on HTML templating with ES6 template strings](http://www.2ality.com/2015/01/template-strings-html.html) and [Stefan Bieschewski's comment](http://www.2ality.com/2015/01/template-strings-html.html#comment-2078932192).